/* ============================================================
   MMR Dashboard Blueprint — Design System & Component Styles
   Pixel-perfect recreation of the MMR Coach Dashboard
   ============================================================ */

/* === DESIGN SYSTEM TOKENS (Dark — default for this dashboard) === */
.mmr-dashboard-bp {
    /* Background */
    --bp-bg-primary: #0a0e1a;
    --bp-bg-gradient: linear-gradient(135deg, #0a0e1a 0%, #1a1f2e 100%);
    --bp-bg-grid-line: rgba(255, 255, 255, 0.02);
    --bp-bg-grid-size: 50px;

    /* Glass Card */
    --bp-glass-bg: rgba(10, 14, 26, 0.7);
    --bp-glass-blur: 16px;
    --bp-glass-border: 1px solid rgba(255, 255, 255, 0.08);
    --bp-glass-radius: 20px;
    --bp-glass-padding: 24px;

    /* Accent Colors */
    --bp-emerald: #00ff7f;
    --bp-cyan: #00ffcc;
    --bp-gold: #ffd700;
    --bp-amber: rgba(255, 170, 0, 1);
    --bp-red: #ff4444;
    --bp-vs: rgba(255, 255, 255, 0.3);

    /* Text Hierarchy */
    --bp-text-primary: #ffffff;
    --bp-text-secondary: rgba(255, 255, 255, 0.7);
    --bp-text-tertiary: rgba(255, 255, 255, 0.5);
    --bp-text-muted: rgba(255, 255, 255, 0.4);
    --bp-text-faint: rgba(255, 255, 255, 0.08);

    /* Typography */
    --bp-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --bp-fs-hero: 96px;
    --bp-fs-large: 56px;
    --bp-fs-value: 32px;
    --bp-fs-medium: 28px;
    --bp-fs-body: 13px;
    --bp-fs-label: 11px;
    --bp-fs-header: 10px;

    /* Font Weights */
    --bp-fw-semibold: 600;
    --bp-fw-bold: 700;
    --bp-fw-extrabold: 800;
    --bp-fw-black: 900;

    /* Glow Effects */
    --bp-glow-emerald: 0 0 20px rgba(0, 255, 127, 0.5);
    --bp-glow-gold: 0 0 40px rgba(255, 215, 0, 0.6);
    --bp-glow-red: 0 0 20px rgba(255, 68, 68, 0.6);
    --bp-glow-emerald-strong: 0 0 40px rgba(0, 255, 127, 0.6);

    /* Inner Card Variants */
    --bp-rank-bg: rgba(0, 255, 127, 0.08);
    --bp-rank-border: rgba(0, 255, 127, 0.2);
    --bp-danger-bg: rgba(255, 68, 68, 0.1);
    --bp-danger-border: rgba(255, 68, 68, 0.3);
    --bp-danger-accent: rgba(255, 68, 68, 0.6);
    --bp-warning-bg: rgba(255, 170, 0, 0.1);
    --bp-warning-border: rgba(255, 170, 0, 0.2);
    --bp-warning-accent: rgba(255, 170, 0, 0.5);
    --bp-subtle-bg: rgba(255, 255, 255, 0.02);
    --bp-subtle-border: rgba(255, 255, 255, 0.05);

    /* Spacing */
    --bp-gap: 16px;
    --bp-outer-pad-v: 40px;
    --bp-outer-pad-h: 24px;
    --bp-max-width: 1600px;
}

/* === LIGHT MODE TOKEN OVERRIDES ===
   Matches site light theme: #FAFAFA bg, #F5F5F5 cards, #666 text */
html:not([data-theme="dark"]) .mmr-dashboard-bp {
    --bp-bg-primary: #FAFAFA;
    --bp-bg-gradient: linear-gradient(135deg, #FAFAFA 0%, #f0f0f2 100%);
    --bp-bg-grid-line: rgba(0, 0, 0, 0.03);

    --bp-glass-bg: rgba(255, 255, 255, 0.85);
    --bp-glass-border: 1px solid rgba(0, 0, 0, 0.08);

    --bp-emerald: #059669;
    --bp-cyan: #0891b2;
    --bp-gold: #d97706;
    --bp-amber: #d97706;
    --bp-red: #dc2626;
    --bp-vs: rgba(0, 0, 0, 0.25);

    --bp-text-primary: #1f2937;
    --bp-text-secondary: #4b5563;
    --bp-text-tertiary: #6b7280;
    --bp-text-muted: #9ca3af;
    --bp-text-faint: rgba(0, 0, 0, 0.06);

    --bp-glow-emerald: 0 0 12px rgba(5, 150, 105, 0.2);
    --bp-glow-gold: 0 0 12px rgba(217, 119, 6, 0.2);
    --bp-glow-red: 0 0 12px rgba(220, 38, 38, 0.2);
    --bp-glow-emerald-strong: 0 0 20px rgba(5, 150, 105, 0.3);

    --bp-rank-bg: rgba(5, 150, 105, 0.06);
    --bp-rank-border: rgba(5, 150, 105, 0.15);
    --bp-danger-bg: rgba(220, 38, 38, 0.06);
    --bp-danger-border: rgba(220, 38, 38, 0.15);
    --bp-danger-accent: rgba(220, 38, 38, 0.5);
    --bp-warning-bg: rgba(217, 119, 6, 0.06);
    --bp-warning-border: rgba(217, 119, 6, 0.15);
    --bp-warning-accent: rgba(217, 119, 6, 0.4);
    --bp-subtle-bg: rgba(0, 0, 0, 0.02);
    --bp-subtle-border: rgba(0, 0, 0, 0.06);
}


/* === OUTER CONTAINER === */
.mmr-dashboard-bp {
    font-family: var(--bp-font);
    background: var(--bp-bg-gradient);
    min-height: 100vh;
    padding: var(--bp-outer-pad-v) var(--bp-outer-pad-h);
    color: var(--bp-text-primary);
    position: relative;
    /* No overflow-x here — html/body handle it. Setting it here creates a second scroll context. */
    box-sizing: border-box;
    width: 100%;
    max-width: 100vw;
}

.mmr-dashboard-bp *,
.mmr-dashboard-bp *::before,
.mmr-dashboard-bp *::after {
    box-sizing: border-box;
}

/* Subtle grid overlay */
.mmr-dashboard-bp::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(var(--bp-bg-grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--bp-bg-grid-line) 1px, transparent 1px);
    background-size: var(--bp-bg-grid-size) var(--bp-bg-grid-size);
    pointer-events: none;
    z-index: 0;
}

/* Ambient light bleed — dramatic orbs that extend into results */
.mmr-dashboard-bp::after {
    content: '';
    position: absolute;
    inset: -200px;
    background:
        radial-gradient(ellipse 900px 800px at 3% 20%, rgba(56, 100, 220, 0.22), transparent 70%),
        radial-gradient(ellipse 800px 900px at 97% 50%, rgba(0, 255, 127, 0.14), transparent 70%),
        radial-gradient(ellipse 700px 500px at 50% 3%, rgba(100, 120, 255, 0.09), transparent 60%),
        radial-gradient(ellipse 600px 600px at 80% 12%, rgba(200, 80, 192, 0.10), transparent 70%),
        radial-gradient(ellipse 500px 500px at 20% 70%, rgba(0, 212, 255, 0.07), transparent 65%),
        radial-gradient(ellipse 400px 500px at 70% 80%, rgba(0, 255, 127, 0.06), transparent 65%);
    pointer-events: none;
    z-index: 0;
    animation: bp-orb-drift 20s ease-in-out infinite alternate;
}

@keyframes bp-orb-drift {
    0% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(10px, -8px) scale(1.02); }
    66% { transform: translate(-8px, 6px) scale(0.98); }
    100% { transform: translate(5px, -4px) scale(1.01); }
}

/* Dashboard inner wrapper with outer border */
.bp-dashboard-wrapper {
    max-width: var(--bp-max-width);
    margin: 0 auto;
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 24px;
    padding: var(--bp-gap);
    position: relative;
    z-index: 1;
    background: rgba(0, 0, 0, 0.20);
    box-sizing: border-box;
    width: 100%;
    box-shadow:
        0 50px 100px rgba(0, 0, 0, 0.55),
        0 25px 60px rgba(0, 0, 0, 0.4),
        0 0 160px rgba(56, 100, 220, 0.10),
        0 0 160px rgba(0, 255, 127, 0.06),
        0 0 80px rgba(200, 80, 192, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        inset 0 0 80px rgba(0, 0, 0, 0.10);
}

/* === BENTO GRID === */
.bp-dashboard-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.2fr 0.9fr;
    grid-template-rows: auto auto;
    gap: var(--bp-gap);
}

/* Card grid positions */
.bp-card-target-identity {
    grid-column: 1;
    grid-row: 1;
}

.bp-card-mmr-reality {
    grid-column: 2;
    grid-row: 1;
}

.bp-card-account-hub {
    grid-column: 3;
    grid-row: 1 / 3;
}

.bp-card-coaching {
    grid-column: 1 / 3;
    grid-row: 2;
}

/* Bottom row: Meta Intelligence + Match Timeline side by side, top-aligned */
.bp-card-meta {
    grid-column: 1 / 2;
    grid-row: 3;
    align-self: start;
}

.bp-card-meta .bp-glass,
.bp-card-timeline .bp-glass {
    border-top: 1px solid rgba(0, 212, 255, 0.08);
}

.bp-card-timeline {
    grid-column: 2 / 4;
    grid-row: 3;
    align-self: start;
}

/* === HERO TITLE === */
.bp-hero-title {
    text-align: center;
    margin-bottom: 40px;
}

.bp-hero-heading {
    font-size: 3.5rem;
    font-weight: 900;
    color: var(--bp-text-primary);
    letter-spacing: -1px;
    margin: 0 0 10px;
    line-height: 1.1;
}

.bp-hero-accent {
    background: linear-gradient(135deg, #00D4FF 0%, #C850C0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.bp-hero-badge {
    display: inline-block;
    font-size: 0.9rem;
    vertical-align: middle;
    padding: 4px 10px;
    background: #C850C0;
    color: #fff;
    border-radius: 6px;
    font-weight: 800;
    margin-left: 10px;
    box-shadow: 0 0 20px rgba(200, 80, 192, 0.4);
    -webkit-text-fill-color: #fff;
}

.bp-hero-subtitle {
    color: var(--bp-text-muted);
    font-size: 1.2rem;
    margin: 0;
    font-weight: 400;
}


/* === SEARCH SECTION === */
.bp-search-section {
    width: 100%;
    max-width: 680px;
    margin: 0 auto 48px;
}

.bp-search-bar {
    display: flex;
    align-items: center;
    background: rgba(17, 24, 33, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 50px;
    padding: 6px 6px 6px 20px;
    gap: 0;
    transition: border-color 0.2s, box-shadow 0.2s;
    backdrop-filter: blur(20px);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.bp-search-bar:focus-within {
    border-color: rgba(0, 212, 255, 0.3);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0, 212, 255, 0.08);
}

.bp-search-region {
    position: relative;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.bp-region-select {
    appearance: none;
    -webkit-appearance: none;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--bp-text-primary);
    font-family: var(--bp-font);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 12px 28px 12px 14px;
    cursor: pointer;
    outline: none;
    min-width: 70px;
    border-radius: 30px;
    text-align: center;
    transition: 0.3s;
}

.bp-region-select option {
    background: #1a1f2e;
    color: #fff;
}

.bp-region-chevron {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    color: var(--bp-text-muted);
    pointer-events: none;
}

.bp-search-divider {
    width: 1px;
    height: 24px;
    background: rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
    margin: 0 14px;
}

.bp-search-input {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--bp-text-primary);
    font-family: var(--bp-font);
    font-size: 1.1rem;
    font-weight: 500;
    padding: 14px 8px;
    outline: none;
    min-width: 0;
}

.bp-search-input::placeholder {
    color: var(--bp-text-muted);
    font-weight: 400;
}

.bp-search-input:disabled {
    opacity: 0.5;
}

.bp-search-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #00D4FF;
    border: none;
    border-radius: 40px;
    color: #000;
    font-family: var(--bp-font);
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 1px;
    padding: 14px 32px;
    cursor: pointer;
    transition: all 0.3s;
    flex-shrink: 0;
    white-space: nowrap;
    text-transform: uppercase;
}

.bp-search-btn:hover:not(:disabled) {
    transform: scale(1.02);
    box-shadow: 0 0 30px rgba(0, 212, 255, 0.6);
}

.bp-search-btn:active:not(:disabled) {
    transform: scale(0.97);
}

.bp-search-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.bp-search-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.bp-search-spinner {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    animation: bp-spin 0.8s linear infinite;
}

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

.bp-search-loading {
    color: var(--bp-text-secondary);
    background: rgba(255, 255, 255, 0.08);
}

.bp-search-error {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 10px 14px;
    background: rgba(255, 68, 68, 0.08);
    border: 1px solid rgba(255, 68, 68, 0.2);
    border-radius: 10px;
    color: #ff6b6b;
    font-family: var(--bp-font);
    font-size: 12px;
    font-weight: 500;
}

.bp-error-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* ============================================================
   CYBER LOADING ANIMATION
   ============================================================ */

.bp-loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    gap: 40px;
    animation: bp-fade-in 0.6s ease-out;
}

@keyframes bp-fade-in {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Planet + Orbits */
.bp-loading-planet {
    position: relative;
    width: 160px;
    height: 160px;
}

.bp-planet-core {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #1a3a5c, #0a1628);
    box-shadow:
        0 0 30px rgba(0, 212, 255, 0.25),
        0 0 60px rgba(0, 212, 255, 0.1),
        inset 0 0 20px rgba(0, 212, 255, 0.15);
    animation: bp-planet-pulse 2s ease-in-out infinite;
}

@keyframes bp-planet-pulse {
    0%, 100% { box-shadow: 0 0 30px rgba(0, 212, 255, 0.25), 0 0 60px rgba(0, 212, 255, 0.1), inset 0 0 20px rgba(0, 212, 255, 0.15); }
    50% { box-shadow: 0 0 40px rgba(0, 212, 255, 0.4), 0 0 80px rgba(0, 212, 255, 0.15), inset 0 0 25px rgba(0, 212, 255, 0.25); }
}

/* Orbital rings */
.bp-orbit {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    border: 1.5px solid transparent;
}

.bp-orbit-1 {
    width: 90px;
    height: 90px;
    margin-top: -45px;
    margin-left: -45px;
    border-color: rgba(0, 212, 255, 0.3);
    border-top-color: rgba(0, 212, 255, 0.8);
    animation: bp-orbit-spin 2s linear infinite;
}

.bp-orbit-2 {
    width: 120px;
    height: 120px;
    margin-top: -60px;
    margin-left: -60px;
    border-color: rgba(0, 255, 127, 0.15);
    border-right-color: rgba(0, 255, 127, 0.6);
    animation: bp-orbit-spin 3.5s linear infinite reverse;
}

.bp-orbit-3 {
    width: 155px;
    height: 155px;
    margin-top: -77.5px;
    margin-left: -77.5px;
    border-color: rgba(200, 80, 192, 0.1);
    border-bottom-color: rgba(200, 80, 192, 0.5);
    border-left-color: rgba(200, 80, 192, 0.25);
    animation: bp-orbit-spin 5s linear infinite;
}

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

/* Scanning line */
.bp-scan-line {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 180px;
    height: 2px;
    margin-left: -90px;
    background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.6), transparent);
    animation: bp-scan-sweep 2.5s ease-in-out infinite;
    opacity: 0.6;
}

@keyframes bp-scan-sweep {
    0% { transform: rotate(0deg); opacity: 0.3; }
    50% { opacity: 0.8; }
    100% { transform: rotate(360deg); opacity: 0.3; }
}

/* Loading text */
.bp-loading-text {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.bp-loading-title {
    font-family: var(--bp-font);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(0, 212, 255, 0.9);
    text-shadow: 0 0 20px rgba(0, 212, 255, 0.3);
    animation: bp-title-flicker 3s ease-in-out infinite;
}

@keyframes bp-title-flicker {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.bp-loading-steps {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
}

.bp-step {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--bp-font);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.3px;
    transition: all 0.4s ease;
}

.bp-step-icon {
    width: 10px;
    height: 10px;
    flex-shrink: 0;
}

.bp-step-active {
    color: rgba(0, 212, 255, 0.9);
    animation: bp-step-blink 1.2s ease-in-out infinite;
}

.bp-step-active .bp-step-icon {
    color: #00D4FF;
    filter: drop-shadow(0 0 4px rgba(0, 212, 255, 0.6));
}

.bp-step-pending {
    color: rgba(255, 255, 255, 0.25);
    animation: bp-step-cascade 4s ease-in-out infinite;
}

.bp-step-pending:nth-child(2) { animation-delay: 1s; }
.bp-step-pending:nth-child(3) { animation-delay: 2s; }
.bp-step-pending:nth-child(4) { animation-delay: 3s; }
.bp-step-pending:nth-child(5) { animation-delay: 4s; }
.bp-step-pending:nth-child(6) { animation-delay: 5s; }
.bp-step-pending:nth-child(7) { animation-delay: 6s; }

@keyframes bp-step-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

@keyframes bp-step-cascade {
    0%, 15% { color: rgba(255, 255, 255, 0.25); }
    20%, 35% { color: rgba(0, 212, 255, 0.8); }
    40%, 100% { color: rgba(0, 255, 127, 0.5); }
}

/* Data particles orbiting the planet */
.bp-data-particle {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #00d4ff;
    box-shadow: 0 0 8px rgba(0, 212, 255, 0.8), 0 0 16px rgba(0, 212, 255, 0.4);
}

.bp-particle-1 {
    top: 50%; left: 50%;
    animation: bp-particle-orbit-1 3s linear infinite;
}
.bp-particle-2 {
    top: 50%; left: 50%;
    background: #00ff7f;
    box-shadow: 0 0 8px rgba(0, 255, 127, 0.8), 0 0 16px rgba(0, 255, 127, 0.4);
    animation: bp-particle-orbit-2 4.5s linear infinite;
}
.bp-particle-3 {
    top: 50%; left: 50%;
    background: #c850c0;
    box-shadow: 0 0 8px rgba(200, 80, 192, 0.8), 0 0 16px rgba(200, 80, 192, 0.4);
    animation: bp-particle-orbit-3 6s linear infinite;
}

@keyframes bp-particle-orbit-1 {
    0%   { transform: rotate(0deg) translateX(46px) rotate(0deg); opacity: 1; }
    50%  { opacity: 0.4; }
    100% { transform: rotate(360deg) translateX(46px) rotate(-360deg); opacity: 1; }
}
@keyframes bp-particle-orbit-2 {
    0%   { transform: rotate(120deg) translateX(62px) rotate(-120deg); opacity: 1; }
    50%  { opacity: 0.3; }
    100% { transform: rotate(480deg) translateX(62px) rotate(-480deg); opacity: 1; }
}
@keyframes bp-particle-orbit-3 {
    0%   { transform: rotate(240deg) translateX(78px) rotate(-240deg); opacity: 0.8; }
    50%  { opacity: 0.2; }
    100% { transform: rotate(600deg) translateX(78px) rotate(-600deg); opacity: 0.8; }
}

/* Progress bar */
.bp-loading-progress-wrap {
    width: 200px;
    height: 3px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.06);
    overflow: hidden;
}
.bp-loading-progress-bar {
    height: 100%;
    border-radius: 2px;
    background: linear-gradient(90deg, #00d4ff, #00ff7f);
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.4);
    transition: width 1.2s ease-out;
}
.bp-loading-pct {
    font-family: var(--bp-font);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    color: rgba(0, 212, 255, 0.6);
    margin-top: -8px;
}

/* Light mode loading */
html:not([data-theme="dark"]) .bp-loading-title {
    color: rgba(8, 145, 178, 0.9);
    text-shadow: none;
}

html:not([data-theme="dark"]) .bp-planet-core {
    background: radial-gradient(circle at 35% 35%, #d1e8f0, #a8d4e6);
    box-shadow: 0 0 30px rgba(8, 145, 178, 0.2), 0 0 60px rgba(8, 145, 178, 0.08);
}

html:not([data-theme="dark"]) .bp-orbit-1 {
    border-color: rgba(8, 145, 178, 0.2);
    border-top-color: rgba(8, 145, 178, 0.6);
}

html:not([data-theme="dark"]) .bp-orbit-2 {
    border-color: rgba(5, 150, 105, 0.1);
    border-right-color: rgba(5, 150, 105, 0.4);
}

html:not([data-theme="dark"]) .bp-orbit-3 {
    border-color: rgba(147, 51, 234, 0.08);
    border-bottom-color: rgba(147, 51, 234, 0.3);
    border-left-color: rgba(147, 51, 234, 0.15);
}

html:not([data-theme="dark"]) .bp-scan-line {
    background: linear-gradient(90deg, transparent, rgba(8, 145, 178, 0.4), transparent);
}

html:not([data-theme="dark"]) .bp-step-active {
    color: rgba(8, 145, 178, 0.9);
}

html:not([data-theme="dark"]) .bp-step-pending {
    color: rgba(0, 0, 0, 0.25);
}

html:not([data-theme="dark"]) .bp-step-active .bp-step-icon {
    color: #0891b2;
    filter: none;
}

html:not([data-theme="dark"]) .bp-data-particle {
    box-shadow: 0 0 6px rgba(8, 145, 178, 0.5);
}
html:not([data-theme="dark"]) .bp-particle-1 { background: #0891b2; }
html:not([data-theme="dark"]) .bp-particle-2 { background: #059669; box-shadow: 0 0 6px rgba(5, 150, 105, 0.5); }
html:not([data-theme="dark"]) .bp-particle-3 { background: #9333ea; box-shadow: 0 0 6px rgba(147, 51, 234, 0.5); }

html:not([data-theme="dark"]) .bp-loading-progress-wrap {
    background: rgba(0, 0, 0, 0.06);
}
html:not([data-theme="dark"]) .bp-loading-progress-bar {
    background: linear-gradient(90deg, #0891b2, #059669);
    box-shadow: none;
}
html:not([data-theme="dark"]) .bp-loading-pct {
    color: rgba(8, 145, 178, 0.6);
}

@media (max-width: 480px) {
    .bp-loading-container {
        padding: 50px 16px;
        gap: 30px;
    }

    .bp-loading-planet {
        width: 120px;
        height: 120px;
    }

    .bp-planet-core {
        width: 36px;
        height: 36px;
    }

    .bp-orbit-1 { width: 68px; height: 68px; margin-top: -34px; margin-left: -34px; }
    .bp-orbit-2 { width: 90px; height: 90px; margin-top: -45px; margin-left: -45px; }
    .bp-orbit-3 { width: 116px; height: 116px; margin-top: -58px; margin-left: -58px; }
    .bp-scan-line { width: 130px; margin-left: -65px; }

    .bp-loading-title {
        font-size: 12px;
        letter-spacing: 2px;
    }

    .bp-step {
        font-size: 11px;
    }
}

/* ============================================================
   ERROR STATE — Player not found / scrape failure
   ============================================================ */

.bp-error-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px 80px;
    gap: 20px;
    animation: bp-fade-in 0.5s ease-out;
    text-align: center;
}

.bp-error-icon-wrap {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 68, 68, 0.06);
    border: 1px solid rgba(255, 68, 68, 0.12);
    margin-bottom: 8px;
}

.bp-error-title {
    font-family: var(--bp-font);
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--bp-red);
}

.bp-error-desc {
    font-family: var(--bp-font);
    font-size: 14px;
    font-weight: 400;
    color: var(--bp-text-secondary);
    max-width: 480px;
    line-height: 1.6;
}

.bp-error-hints {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
    margin-top: 12px;
    padding: 16px 20px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.03);
    border-radius: 12px;
}

.bp-error-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--bp-font);
    font-size: 12px;
    color: var(--bp-text-tertiary);
}

.bp-error-hint svg {
    flex-shrink: 0;
    color: var(--bp-text-muted);
}

.bp-error-code {
    font-weight: 700;
    color: var(--bp-cyan);
    font-family: 'Consolas', 'Monaco', monospace;
}

/* Light mode error state */
html:not([data-theme="dark"]) .bp-error-icon-wrap {
    background: rgba(220, 38, 38, 0.04);
    border-color: rgba(220, 38, 38, 0.1);
}

html:not([data-theme="dark"]) .bp-error-hints {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.06);
}

html:not([data-theme="dark"]) .bp-error-code {
    color: #0891b2;
}

/* === GLASS PANEL BASE ===
   NOTE: Class name intentionally avoids "card" to prevent
   sitewide dark theme catch-all: div[class*="card"] { background: !important }
*/
.bp-glass {
    background: rgba(12, 17, 30, 0.70) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.03);
    border-radius: var(--bp-glass-radius);
    padding: var(--bp-glass-padding);
    position: relative;
    overflow: hidden;
    color: var(--bp-text-primary) !important;
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.6),
        0 8px 24px rgba(0, 0, 0, 0.4),
        0 2px 6px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        inset 0 0 0 1px rgba(255, 255, 255, 0.02);
}

/* Override the outer wrapper and container */
html[data-theme="dark"] .mmr-dashboard-bp {
    background: var(--bp-bg-gradient) !important;
    color: var(--bp-text-primary) !important;
}

html[data-theme="dark"] .mmr-dashboard-bp .bp-dashboard-wrapper {
    background: rgba(0, 0, 0, 0.25) !important;
    background-color: rgba(0, 0, 0, 0.25) !important;
    border-color: rgba(255, 255, 255, 0.03) !important;
}

/* Nuclear override: force ALL elements inside our dashboard to respect our styles */
html[data-theme="dark"] .mmr-dashboard-bp .bp-glass,
html[data-theme="dark"] .mmr-dashboard-bp div.bp-glass,
html[data-theme="dark"] .mmr-dashboard-bp [class*="bp-glass"] {
    background: rgba(12, 17, 30, 0.70) !important;
    background-color: rgba(12, 17, 30, 0.70) !important;
    color: var(--bp-text-primary) !important;
    border-color: rgba(255, 255, 255, 0.03) !important;
}

/* Override any sitewide div background rules inside our dashboard */
html[data-theme="dark"] .mmr-dashboard-bp div:not(.bp-rank-inner):not(.bp-rank-frosted):not(.bp-winrate-fill):not(.bp-winrate-bar):not(.bp-velocity-bar-fill):not(.bp-alert-dot):not(.bp-search-bar):not(.bp-search-error):not(.bp-hub-divider):not(.bp-lp-bar-track):not(.bp-gravity-bar):not(.bp-hero-badge):not(.bp-dashboard-wrapper):not(.bp-velocity-pill):not(.bp-trend-graph):not(.bp-error-icon-wrap):not(.bp-error-hints) {
    background-color: transparent !important;
}

/* Re-apply backgrounds that we DO want */
html[data-theme="dark"] .mmr-dashboard-bp .bp-glass {
    background: rgba(12, 17, 30, 0.70) !important;
    background-color: rgba(12, 17, 30, 0.70) !important;
}

html[data-theme="dark"] .mmr-dashboard-bp .bp-search-bar {
    background: rgba(17, 24, 33, 0.85) !important;
    background-color: rgba(17, 24, 33, 0.85) !important;
}

html[data-theme="dark"] .mmr-dashboard-bp .bp-search-error {
    background: rgba(255, 68, 68, 0.08) !important;
    background-color: rgba(255, 68, 68, 0.08) !important;
}

html[data-theme="dark"] .mmr-dashboard-bp .bp-search-btn {
    background: #00D4FF !important;
    color: #000 !important;
}

html[data-theme="dark"] .mmr-dashboard-bp .bp-search-input {
    color: #fff !important;
    background: transparent !important;
}

html[data-theme="dark"] .mmr-dashboard-bp .bp-region-select {
    color: #fff !important;
    background: rgba(0, 0, 0, 0.3) !important;
    background-color: rgba(0, 0, 0, 0.3) !important;
}

html[data-theme="dark"] .mmr-dashboard-bp .bp-hero-heading {
    color: #fff !important;
}

html[data-theme="dark"] .mmr-dashboard-bp .bp-hero-badge {
    background: #C850C0 !important;
    background-color: #C850C0 !important;
}

html[data-theme="dark"] .mmr-dashboard-bp .bp-rank-inner {
    /* Let inline style handle the tier-tinted background */
}

html[data-theme="dark"] .mmr-dashboard-bp .bp-rank-frosted {
    background: rgba(255, 255, 255, 0.03) !important;
    background-color: rgba(255, 255, 255, 0.03) !important;
}

html[data-theme="dark"] .mmr-dashboard-bp .bp-gravity-alert {
    background: var(--bp-danger-bg) !important;
    background-color: rgba(255, 68, 68, 0.1) !important;
}

html[data-theme="dark"] .mmr-dashboard-bp .bp-coaching-warning {
    background: var(--bp-warning-bg) !important;
    background-color: rgba(255, 170, 0, 0.1) !important;
}

html[data-theme="dark"] .mmr-dashboard-bp .bp-inner-card-subtle {
    background: var(--bp-subtle-bg) !important;
    background-color: rgba(255, 255, 255, 0.02) !important;
}

html[data-theme="dark"] .mmr-dashboard-bp .bp-hub-stat,
html[data-theme="dark"] .mmr-dashboard-bp .bp-gold-stat,
html[data-theme="dark"] .mmr-dashboard-bp .bp-insight-item {
    background: var(--bp-subtle-bg) !important;
    background-color: rgba(255, 255, 255, 0.02) !important;
}

html[data-theme="dark"] .mmr-dashboard-bp .bp-insight-danger {
    background: rgba(255, 68, 68, 0.05) !important;
    background-color: rgba(255, 68, 68, 0.05) !important;
}

html[data-theme="dark"] .mmr-dashboard-bp .bp-alert-pill {
    background-color: transparent !important;
}

html[data-theme="dark"] .mmr-dashboard-bp .bp-coaching-collapse-header:hover {
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.08), rgba(8, 145, 178, 0.05)) !important;
    border-color: rgba(0, 212, 255, 0.3) !important;
}

html[data-theme="dark"] .mmr-dashboard-bp .bp-coaching-header-expanded {
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.06), rgba(8, 145, 178, 0.03)) !important;
    border-color: rgba(0, 212, 255, 0.2) !important;
}

html[data-theme="dark"] .mmr-dashboard-bp .bp-velocity-row,
html[data-theme="dark"] .mmr-dashboard-bp .bp-velocity-section,
html[data-theme="dark"] .mmr-dashboard-bp .bp-velocity-grid {
    background-color: transparent !important;
}

html[data-theme="dark"] .mmr-dashboard-bp .bp-velocity-bar-track {
    background-color: rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] .mmr-dashboard-bp .bp-winrate-bar {
    background-color: rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] .mmr-dashboard-bp .bp-hub-divider {
    background-color: rgba(255, 255, 255, 0.04) !important;
}

html[data-theme="dark"] .mmr-dashboard-bp .bp-hub-top,
html[data-theme="dark"] .mmr-dashboard-bp .bp-hub-gauge-side,
html[data-theme="dark"] .mmr-dashboard-bp .bp-hub-stats-side,
html[data-theme="dark"] .mmr-dashboard-bp .bp-gauge-wl {
    background-color: transparent !important;
}

html[data-theme="dark"] .mmr-dashboard-bp .bp-trend-graph {
    background: rgba(255, 255, 255, 0.02) !important;
    background-color: rgba(255, 255, 255, 0.02) !important;
}

html[data-theme="dark"] .mmr-dashboard-bp .bp-alerts-with-graph {
    background-color: transparent !important;
}

html[data-theme="dark"] .mmr-dashboard-bp .bp-error-icon-wrap {
    background: rgba(255, 68, 68, 0.06) !important;
    background-color: rgba(255, 68, 68, 0.06) !important;
}

html[data-theme="dark"] .mmr-dashboard-bp .bp-error-hints {
    background: rgba(255, 255, 255, 0.02) !important;
    background-color: rgba(255, 255, 255, 0.02) !important;
}

/* Ensure border colors aren't overridden — but keep them subtle */
html[data-theme="dark"] .mmr-dashboard-bp .bp-glass {
    border-color: rgba(255, 255, 255, 0.03) !important;
}

/* Top-edge highlight — very subtle gradient shimmer */
.bp-glass::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 15%, rgba(56, 100, 220, 0.10) 35%, rgba(255, 255, 255, 0.03) 50%, rgba(0, 255, 127, 0.10) 65%, transparent 85%);
    pointer-events: none;
    z-index: 1;
}

/* Corner color bleed — ambient glow inside each panel */
.bp-glass::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 200px 200px at 0% 0%, rgba(56, 100, 220, 0.08), transparent 70%),
        radial-gradient(ellipse 200px 200px at 100% 100%, rgba(0, 255, 127, 0.06), transparent 70%),
        radial-gradient(ellipse 150px 150px at 100% 0%, rgba(200, 80, 192, 0.04), transparent 70%);
    pointer-events: none;
    z-index: 0;
}

/* === CARD HEADER LABEL === */
.bp-card-header {
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--bp-text-secondary);
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

/* === INNER CARD VARIANTS === */
.bp-inner-card-rank {
    background: var(--bp-rank-bg);
    border: 1px solid rgba(0, 255, 127, 0.12);
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.bp-inner-card-danger {
    background: var(--bp-danger-bg);
    border: 1px solid rgba(255, 68, 68, 0.15);
    border-radius: 12px;
    padding: 16px;
    border-left: 3px solid var(--bp-danger-accent);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.bp-inner-card-warning {
    background: var(--bp-warning-bg);
    border: 1px solid rgba(255, 170, 0, 0.12);
    border-radius: 12px;
    padding: 16px;
    border-left: 3px solid var(--bp-warning-accent);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.bp-inner-card-subtle {
    background: var(--bp-subtle-bg);
    border: 1px solid rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    padding: 14px;
}


/* ============================================================
   TARGET IDENTITY CARD
   ============================================================ */

.bp-target-identity {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Rank inner card — tinted glass effect */
.bp-rank-inner {
    border: 1px solid;
    border-radius: 12px;
    padding: 20px;
    position: relative;
    overflow: hidden;
}

/* Frosted glass variant — everything in one box */
.bp-rank-frosted {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-color: var(--tier-color, rgba(255, 255, 255, 0.06));
    border-width: 1px;
    border-style: solid;
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.25),
        0 1px 4px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* Subtle glass sheen on rank card */
.bp-rank-inner::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06), transparent);
    pointer-events: none;
}

.bp-rank-row {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Vertical centered rank layout (matches mockup) */
.bp-rank-col {
    display: flex;
    align-items: center;
    gap: 16px;
}

.bp-rank-info-centered {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.bp-rank-emblem {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    position: relative;
}

.bp-rank-emblem-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 0 12px currentColor);
    opacity: 0.95;
}

.bp-rank-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.bp-rank-name {
    font-size: 22px;
    font-weight: var(--bp-fw-black);
    text-transform: uppercase;
    line-height: 1.1;
}

.bp-rank-lp {
    font-size: 14px;
    font-weight: var(--bp-fw-semibold);
    color: var(--bp-text-tertiary);
}

/* Summoner name */
.bp-summoner-name {
    font-size: 36px;
    font-weight: var(--bp-fw-black);
    color: var(--bp-text-primary);
    letter-spacing: -0.5px;
    line-height: 1.1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Win rate row */
.bp-winrate-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.bp-winrate-pct {
    font-size: var(--bp-fs-body);
    font-weight: var(--bp-fw-bold);
    color: var(--bp-text-secondary);
}

.bp-winrate-wl {
    font-size: var(--bp-fs-body);
    color: var(--bp-text-muted);
}

.bp-winrate-bar {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 3px;
    overflow: hidden;
    margin-top: 4px;
}

.bp-winrate-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.6s ease-out;
}

/* Role badge */
.bp-role-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 16px;
    border-radius: 12px;
    border: 1px solid;
    font-size: 14px;
    font-weight: var(--bp-fw-extrabold);
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: default;
    background: transparent;
}

.bp-role-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
}

.bp-role-icon svg {
    width: 24px;
    height: 24px;
}

.bp-role-icon-img {
    width: 24px;
    height: 24px;
    display: inline-block;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}


/* ============================================================
   MMR REALITY CHECK CARD
   ============================================================ */

.bp-mmr-reality {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* MMR Comparison Row */
.bp-mmr-compare {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 16px;
}

.bp-mmr-side {
    text-align: center;
    flex: 1;
}

.bp-mmr-hero {
    font-size: var(--bp-fs-hero);
    font-weight: var(--bp-fw-black);
    letter-spacing: -4px;
    line-height: 1;
}

.bp-mmr-hidden {
    color: var(--bp-emerald);
    text-shadow: var(--bp-glow-emerald-strong);
}

.bp-mmr-rank {
    color: var(--bp-gold);
    text-shadow: var(--bp-glow-gold);
}

.bp-mmr-vs {
    font-size: 24px;
    font-weight: var(--bp-fw-black);
    color: var(--bp-vs);
    align-self: center;
    padding-top: 20px;
}

.bp-mmr-label {
    font-size: var(--bp-fs-label);
    font-weight: var(--bp-fw-extrabold);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--bp-text-secondary);
    margin-top: 8px;
}

.bp-mmr-sublabel {
    font-size: var(--bp-fs-header);
    font-style: italic;
    color: var(--bp-text-muted);
    margin-top: 2px;
}

/* LP Gravity Bar */
.bp-gravity-bar-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.bp-gravity-bar {
    flex: 1;
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.06);
}

.bp-gravity-bar-fill {
    height: 100%;
    width: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, #00ff7f 0%, #ffd700 50%, #ff4444 100%);
}

.bp-mmr-diff {
    font-size: 16px;
    font-weight: var(--bp-fw-black);
    white-space: nowrap;
}

/* LP Gravity Projection */
.bp-lp-header {
    font-size: var(--bp-fs-label);
    font-weight: var(--bp-fw-extrabold);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--bp-text-muted);
    margin-top: 4px;
}

.bp-lp-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
    text-align: center;
}

.bp-lp-value {
    font-size: var(--bp-fs-medium);
    font-weight: var(--bp-fw-black);
    line-height: 1.2;
}

.bp-lp-gain { color: var(--bp-emerald); }
.bp-lp-loss { color: var(--bp-red); }
.bp-lp-breakeven { color: var(--bp-gold); }

.bp-lp-label {
    font-size: var(--bp-fs-label);
    font-weight: var(--bp-fw-semibold);
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--bp-text-muted);
    margin-top: 4px;
}

/* Gravity Alert */
.bp-gravity-alert {
    background: var(--bp-danger-bg);
    border: 1px solid rgba(255, 68, 68, 0.15);
    border-left: 3px solid var(--bp-danger-accent);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow:
        0 2px 12px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 68, 68, 0.05);
}

.bp-gravity-alert-content {
    flex: 1;
}

.bp-gravity-alert-title {
    font-size: var(--bp-fs-body);
    font-weight: var(--bp-fw-bold);
    color: var(--bp-text-primary);
}

.bp-gravity-alert-desc {
    font-size: var(--bp-fs-label);
    font-style: italic;
    color: var(--bp-text-tertiary);
    margin-top: 4px;
}

.bp-gravity-alert-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.8;
}


/* ============================================================
   ACCOUNT DATA HUB CARD
   ============================================================ */

.bp-account-hub {
    display: flex;
    flex-direction: column;
    gap: 14px;
    height: 100%;
}

/* Hub Top: 2-column layout (gauge left, stats right) */
.bp-hub-top {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
}

.bp-hub-gauge-side {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.bp-hub-stats-side {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-top: 4px;
}

.bp-momentum-title {
    font-size: var(--bp-fs-label);
    font-weight: var(--bp-fw-extrabold);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--bp-text-secondary);
}

/* Speedometer Gauge */
.bp-gauge-svg-wrap {
    position: relative;
    flex-shrink: 0;
}

.bp-gauge-center {
    position: absolute;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.bp-gauge-pct {
    font-size: 32px;
    font-weight: var(--bp-fw-black);
    color: var(--bp-text-primary);
    line-height: 1;
}

.bp-gauge-trend {
    font-size: 8px;
    font-weight: var(--bp-fw-bold);
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--bp-text-muted);
    margin-top: 2px;
}

.bp-gauge-wl {
    font-size: var(--bp-fs-label);
    font-weight: var(--bp-fw-bold);
    text-align: center;
}

/* Hub Stats — plain text style (no boxes) matching mockup */
.bp-hub-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.bp-hub-stat-label {
    font-size: var(--bp-fs-header);
    font-weight: var(--bp-fw-bold);
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--bp-text-muted);
}

.bp-hub-stat-value {
    font-size: 18px;
    font-weight: var(--bp-fw-black);
    text-transform: uppercase;
    line-height: 1.2;
}

.bp-hub-stat-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.bp-hub-stat-icon {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.bp-hub-stat-icon svg {
    display: block;
}

/* Velocity Section: side-by-side pill containers */
.bp-velocity-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.bp-velocity-pill {
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 12px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.bp-velocity-pill-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.bp-hub-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.04);
    margin: 2px 0;
}

.bp-velocity-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px;
}

.bp-velocity-label {
    font-size: var(--bp-fs-label);
    font-weight: var(--bp-fw-bold);
    color: var(--bp-text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    white-space: nowrap;
}

.bp-velocity-bar-track {
    height: 8px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    overflow: hidden;
}

.bp-velocity-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.6s ease-out;
}

.bp-velocity-value {
    font-size: var(--bp-fs-label);
    font-weight: var(--bp-fw-extrabold);
    text-transform: uppercase;
    white-space: nowrap;
}

/* Alert Pills */
.bp-alert-pills {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bp-alert-pill {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.02);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    transition: box-shadow 0.2s ease;
}

.bp-alert-pill-icon {
    font-size: 16px;
    flex-shrink: 0;
    line-height: 1;
    margin-top: 1px;
}

.bp-alert-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 4px;
}

.bp-alert-pill-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.bp-alert-pill-title {
    font-size: var(--bp-fs-body);
    font-weight: var(--bp-fw-bold);
    line-height: 1.3;
}

.bp-alert-pill-desc {
    font-size: var(--bp-fs-label);
    color: var(--bp-text-tertiary);
    line-height: 1.4;
}


/* ============================================================
   COACHING ANALYSIS & GOLD LEAK CARD
   ============================================================ */

.bp-coaching {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bp-coaching-subheader {
    font-size: var(--bp-fs-label);
    font-weight: var(--bp-fw-extrabold);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--bp-text-secondary);
}

.bp-coaching-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.04);
    margin: 4px 0;
}

/* Gold Stats Grid */
.bp-gold-stats {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
    text-align: center;
}

.bp-gold-stat {
    background: var(--bp-subtle-bg);
    border: 1px solid rgba(255, 255, 255, 0.02);
    border-radius: 8px;
    padding: 20px 12px;
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.bp-gold-value {
    font-size: 36px;
    font-weight: var(--bp-fw-black);
    line-height: 1.2;
}

.bp-gold-label {
    font-size: var(--bp-fs-label);
    font-weight: var(--bp-fw-semibold);
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--bp-text-muted);
    margin-top: 4px;
}

/* Analysis Warning Box */
.bp-coaching-warning {
    background: var(--bp-warning-bg);
    border: 1px solid rgba(255, 170, 0, 0.12);
    border-left: 3px solid var(--bp-warning-accent);
    border-radius: 12px;
    padding: 14px 16px;
    box-shadow:
        0 2px 12px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 170, 0, 0.04);
}

.bp-coaching-warning-text {
    font-size: var(--bp-fs-body);
    color: var(--bp-text-secondary);
    line-height: 1.5;
}

.bp-rank-highlight {
    color: var(--bp-gold);
    font-weight: var(--bp-fw-bold);
}

/* Insights Grid */
.bp-insights-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.bp-insights-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bp-insights-col-header {
    font-size: var(--bp-fs-header);
    font-weight: var(--bp-fw-bold);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 4px;
}

/* Insight Items */
.bp-insight-item {
    background: var(--bp-subtle-bg);
    border: 1px solid rgba(255, 255, 255, 0.02);
    border-radius: 8px;
    padding: 12px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

.bp-insight-danger {
    background: rgba(255, 68, 68, 0.05);
    border-color: rgba(255, 68, 68, 0.12);
}

.bp-insight-icon {
    font-size: 20px;
    flex-shrink: 0;
    line-height: 1;
}

.bp-insight-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.bp-insight-title {
    font-size: var(--bp-fs-body);
    font-weight: var(--bp-fw-bold);
    color: var(--bp-text-primary);
    line-height: 1.3;
}

.bp-insight-desc {
    font-size: var(--bp-fs-label);
    color: var(--bp-text-tertiary);
    line-height: 1.4;
}


/* ============================================================
   SIGNATURE PICKS CARD
   ============================================================ */

.bp-signature-picks {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Horizontal champion grid — matches mockup layout */
.bp-champ-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.bp-champ-cell {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.bp-champ-portrait {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.bp-champ-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.bp-champ-name {
    font-size: var(--bp-fs-body);
    font-weight: var(--bp-fw-bold);
    color: var(--bp-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bp-champ-stats {
    font-size: var(--bp-fs-label);
    font-weight: var(--bp-fw-semibold);
}


/* Alerts + Trend Graph side-by-side layout */
.bp-alerts-with-graph {
    display: grid;
    grid-template-columns: 1fr 140px;
    gap: 14px;
    align-items: start;
}

.bp-trend-graph {
    width: 100%;
    height: 100%;
    min-height: 100px;
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 10px;
    padding: 8px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15);
}

.bp-trend-graph svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Account Hub + Signature Picks stacked in same grid cell */
.bp-account-hub-stack {
    display: flex;
    flex-direction: column;
    gap: var(--bp-gap);
    height: 100%;
}


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

/* Tablet / Small Desktop: single-column stack */
@media (max-width: 1400px) {
    .bp-dashboard-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    .bp-card-target-identity,
    .bp-card-mmr-reality,
    .bp-card-account-hub,
    .bp-card-coaching,
    .bp-card-meta,
    .bp-card-timeline {
        grid-column: 1;
        grid-row: auto;
    }
}

/* Mobile landscape / small tablet */
@media (max-width: 768px) {
    .mmr-dashboard-bp {
        padding: 20px 10px;
    }

    .mmr-dashboard-bp::after {
        display: none;
    }

    .mmr-dashboard-bp::before {
        display: none;
    }

    .bp-dashboard-wrapper {
        border-radius: 14px;
        padding: 8px;
        box-shadow: none;
    }

    .bp-glass {
        padding: 20px;
    }

    .bp-hero-heading {
        font-size: 2.5rem;
    }

    .bp-hero-badge {
        font-size: 0.75rem;
        padding: 3px 8px;
    }

    .bp-hero-subtitle {
        font-size: 1rem;
    }

    .bp-mmr-hero {
        font-size: 48px;
        letter-spacing: -2px;
    }

    .bp-gauge-pct {
        font-size: 28px;
    }

    .bp-summoner-name {
        font-size: 28px;
    }

    .bp-insights-grid {
        grid-template-columns: 1fr;
    }

    .bp-champ-list {
        flex-wrap: wrap;
    }

    .bp-gold-stats {
        gap: 8px;
    }

    .bp-gold-value {
        font-size: 24px;
    }

    .bp-lp-value {
        font-size: 22px;
    }

    .bp-hub-top {
        grid-template-columns: 1fr;
    }

    .bp-velocity-grid {
        grid-template-columns: 1fr;
    }

    .bp-alerts-with-graph {
        grid-template-columns: 1fr;
    }
}

/* Mobile portrait */
@media (max-width: 480px) {
    .mmr-dashboard-bp {
        padding: 12px 6px;
    }

    .mmr-dashboard-bp::after,
    .mmr-dashboard-bp::before {
        display: none;
    }

    .bp-hero-heading {
        font-size: 2rem;
    }

    .bp-hero-badge {
        display: block;
        margin: 8px auto 0;
        width: fit-content;
    }

    .bp-hero-subtitle {
        font-size: 0.9rem;
    }

    .bp-search-section {
        margin-bottom: 20px;
    }

    .bp-search-bar {
        flex-wrap: wrap;
        padding: 8px;
        gap: 0;
    }

    .bp-search-region {
        width: auto;
    }

    .bp-search-divider {
        display: none;
    }

    .bp-search-input {
        flex: 1;
        min-width: 120px;
        font-size: 13px;
    }

    .bp-search-btn {
        width: 100%;
        justify-content: center;
        margin-top: 6px;
        padding: 10px;
    }

    .bp-glass {
        border-radius: 12px;
        padding: 14px;
        max-width: 100%;
    }

    .bp-dashboard-wrapper {
        border-radius: 12px;
        padding: 6px;
        border: none;
        box-shadow: none;
    }

    .bp-mmr-hero {
        font-size: 36px;
        letter-spacing: -1px;
    }

    .bp-mmr-compare {
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }

    .bp-mmr-vs {
        padding-top: 0;
    }

    .bp-gauge-pct {
        font-size: 28px;
    }

    .bp-summoner-name {
        font-size: 24px;
    }

    .bp-gold-stats {
        grid-template-columns: 1fr;
    }

    .bp-champ-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .bp-status-grid {
        grid-template-columns: 1fr;
    }

    .bp-lp-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .bp-lp-value {
        font-size: 20px;
    }
}

/* SEO content grid — stack on mobile */
@media (max-width: 768px) {
    .bp-seo-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================================
   LIGHT MODE — Component-level overrides
   Adapts all hardcoded dark values to match site light theme
   ============================================================ */

/* Grid overlay: dark lines on light bg */
html:not([data-theme="dark"]) .mmr-dashboard-bp::before {
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 0, 0, 0.03) 1px, transparent 1px);
}

/* Glass panel */
html:not([data-theme="dark"]) .bp-glass {
    background: rgba(255, 255, 255, 0.85) !important;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.06),
        0 1px 3px rgba(0, 0, 0, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    color: #1f2937 !important;
}

html:not([data-theme="dark"]) .bp-glass::before {
    background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.03), transparent);
}

html:not([data-theme="dark"]) .bp-glass::after {
    background:
        radial-gradient(ellipse 200px 200px at 0% 0%, rgba(56, 100, 220, 0.03), transparent 70%),
        radial-gradient(ellipse 200px 200px at 100% 100%, rgba(5, 150, 105, 0.02), transparent 70%);
}

/* Card header */
html:not([data-theme="dark"]) .bp-card-header {
    color: #9ca3af;
    border-bottom-color: rgba(0, 0, 0, 0.06);
}

/* Search bar */
html:not([data-theme="dark"]) .bp-search-bar {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(20px);
}

html:not([data-theme="dark"]) .bp-search-bar:focus-within {
    border-color: rgba(8, 145, 178, 0.4);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 0 12px rgba(8, 145, 178, 0.08);
}

html:not([data-theme="dark"]) .bp-search-input {
    color: #1f2937;
}

html:not([data-theme="dark"]) .bp-search-input::placeholder {
    color: #9ca3af;
}

html:not([data-theme="dark"]) .bp-region-select {
    color: #1f2937;
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.08);
}

html:not([data-theme="dark"]) .bp-region-select option {
    background: #fff;
    color: #1f2937;
}

html:not([data-theme="dark"]) .bp-search-divider {
    background: rgba(0, 0, 0, 0.1);
}

html:not([data-theme="dark"]) .bp-search-btn {
    background: #0891b2;
    color: #fff;
    border: none;
}

html:not([data-theme="dark"]) .bp-search-btn:hover:not(:disabled) {
    background: #0e7490;
    box-shadow: 0 0 20px rgba(8, 145, 178, 0.3);
}

html:not([data-theme="dark"]) .bp-search-loading {
    color: #6b7280;
    background: rgba(0, 0, 0, 0.04);
}

html:not([data-theme="dark"]) .bp-search-error {
    background: rgba(220, 38, 38, 0.05);
    border-color: rgba(220, 38, 38, 0.15);
    color: #dc2626;
}

/* Hero title */
html:not([data-theme="dark"]) .bp-hero-heading {
    color: #1f2937;
}

html:not([data-theme="dark"]) .bp-hero-accent {
    background: linear-gradient(135deg, #0891b2 0%, #9333ea 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

html:not([data-theme="dark"]) .bp-hero-badge {
    background: #9333ea;
    box-shadow: 0 0 12px rgba(147, 51, 234, 0.2);
}

html:not([data-theme="dark"]) .bp-hero-subtitle {
    color: #6b7280;
}

/* Rank frosted inner card */
html:not([data-theme="dark"]) .bp-rank-frosted {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.08);
}

html:not([data-theme="dark"]) .bp-rank-frosted::before {
    background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.04), transparent);
}

html:not([data-theme="dark"]) .bp-rank-lp {
    color: #6b7280;
}

html:not([data-theme="dark"]) .bp-summoner-name {
    color: #1f2937;
}

html:not([data-theme="dark"]) .bp-winrate-pct {
    color: #4b5563;
}

html:not([data-theme="dark"]) .bp-winrate-wl {
    color: #9ca3af;
}

html:not([data-theme="dark"]) .bp-winrate-bar {
    background: rgba(0, 0, 0, 0.06);
}

/* Role badge */
html:not([data-theme="dark"]) .bp-role-badge {
    color: #059669;
}

/* MMR Reality Check */
html:not([data-theme="dark"]) .bp-mmr-label,
html:not([data-theme="dark"]) .bp-mmr-sublabel {
    color: #6b7280;
}

html:not([data-theme="dark"]) .bp-mmr-vs {
    color: rgba(0, 0, 0, 0.25);
}

html:not([data-theme="dark"]) .bp-mmr-diff {
    color: #4b5563;
}

html:not([data-theme="dark"]) .bp-lp-section-title {
    color: #9ca3af;
}

html:not([data-theme="dark"]) .bp-lp-label {
    color: #9ca3af;
}

html:not([data-theme="dark"]) .bp-gravity-alert {
    background: rgba(220, 38, 38, 0.05);
    border-color: rgba(220, 38, 38, 0.15);
}

html:not([data-theme="dark"]) .bp-gravity-title {
    color: #1f2937;
}

html:not([data-theme="dark"]) .bp-gravity-desc {
    color: #6b7280;
}

/* LP gravity bar */
html:not([data-theme="dark"]) .bp-lp-bar-track {
    background: rgba(0, 0, 0, 0.06);
}

/* Account Data Hub */
html:not([data-theme="dark"]) .bp-hub-stat {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.06);
}

html:not([data-theme="dark"]) .bp-hub-stat-label {
    color: #9ca3af;
}

html:not([data-theme="dark"]) .bp-hub-stat-value {
    color: #1f2937;
}

html:not([data-theme="dark"]) .bp-gauge-label {
    color: #9ca3af;
}

html:not([data-theme="dark"]) .bp-gauge-wl {
    color: #6b7280;
}

html:not([data-theme="dark"]) .bp-velocity-label {
    color: #9ca3af;
}

html:not([data-theme="dark"]) .bp-velocity-bar-track {
    background: rgba(0, 0, 0, 0.06);
}

html:not([data-theme="dark"]) .bp-velocity-pill {
    border-color: rgba(0, 0, 0, 0.08);
}

html:not([data-theme="dark"]) .bp-alert-pill {
    color: #4b5563;
}

html:not([data-theme="dark"]) .bp-alert-title {
    color: #1f2937;
}

html:not([data-theme="dark"]) .bp-alert-desc {
    color: #6b7280;
}

/* Coaching Analysis */
html:not([data-theme="dark"]) .bp-gold-stat {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.06);
}

html:not([data-theme="dark"]) .bp-gold-label {
    color: #9ca3af;
}

html:not([data-theme="dark"]) .bp-coaching-warning {
    background: rgba(217, 119, 6, 0.05);
    border-color: rgba(217, 119, 6, 0.15);
    color: #92400e;
}

html:not([data-theme="dark"]) .bp-coaching-divider {
    background: rgba(0, 0, 0, 0.06);
}

html:not([data-theme="dark"]) .bp-insight-item {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.06);
}

html:not([data-theme="dark"]) .bp-insight-danger {
    background: rgba(220, 38, 38, 0.04);
    border-color: rgba(220, 38, 38, 0.1);
}

html:not([data-theme="dark"]) .bp-insight-title {
    color: #1f2937;
}

html:not([data-theme="dark"]) .bp-insight-desc {
    color: #6b7280;
}

html:not([data-theme="dark"]) .bp-insights-section-title {
    color: #9ca3af;
}

/* Signature Picks */
html:not([data-theme="dark"]) .bp-champ-portrait {
    border-color: rgba(0, 0, 0, 0.1);
}

html:not([data-theme="dark"]) .bp-champ-name {
    color: #1f2937;
}

html:not([data-theme="dark"]) .bp-champ-stats {
    color: #6b7280;
}

/* Dashboard wrapper */
html:not([data-theme="dark"]) .bp-dashboard-wrapper {
    border-color: rgba(0, 0, 0, 0.04);
    background: rgba(0, 0, 0, 0.02);
}

/* Light mode: disable ambient glow orbs */
html:not([data-theme="dark"]) .mmr-dashboard-bp::after {
    inset: 0;
    background:
        radial-gradient(ellipse 600px 500px at 5% 30%, rgba(56, 100, 220, 0.04), transparent 70%),
        radial-gradient(ellipse 500px 600px at 95% 60%, rgba(5, 150, 105, 0.03), transparent 70%);
    animation: none;
}

/* Light mode: hub divider */
html:not([data-theme="dark"]) .bp-hub-divider {
    background: rgba(0, 0, 0, 0.06);
}

/* Light mode: trend graph */
html:not([data-theme="dark"]) .bp-trend-graph {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.06);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.04);
}

/* Light mode: tone down glows on hero numbers */
html:not([data-theme="dark"]) .bp-mmr-hidden {
    text-shadow: none;
}

html:not([data-theme="dark"]) .bp-mmr-rank {
    text-shadow: none;
}

/* Light mode: rank name glow removal (inline text-shadow won't override, but this helps) */
html:not([data-theme="dark"]) .bp-rank-name {
    text-shadow: none !important;
}


/* ============================================================
   COACHING COLLAPSE HEADER — Click Hint Animations
   ============================================================ */

/* Shimmer sweep — shared by CTA banner and coaching header */
@keyframes bp-cta-sweep {
    0% { left: -100%; }
    100% { left: 200%; }
}

/* Coaching header shimmer — plays twice on load then stops */
@keyframes bp-coaching-shimmer {
    0% { left: -100%; }
    50% { left: 200%; }
    100% { left: 200%; }
}

/* Chevron bounce — gentle "tap me" hint */
@keyframes bp-chevron-bounce {
    0%, 60%, 100% { transform: translateY(0); }
    30% { transform: translateY(3px); }
    45% { transform: translateY(-2px); }
}

/* Border glow pulse on load */
@keyframes bp-header-glow {
    0% { border-color: rgba(8, 145, 178, 0.15); box-shadow: none; }
    40% { border-color: rgba(0, 212, 255, 0.4); box-shadow: 0 0 12px rgba(0, 212, 255, 0.15); }
    100% { border-color: rgba(255, 255, 255, 0.05); box-shadow: none; }
}

/* Attention nudge — subtle wiggle that says "tap me" */
@keyframes bp-nudge {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-3px); }
    40% { transform: translateX(3px); }
    60% { transform: translateX(-2px); }
    80% { transform: translateX(2px); }
}

.bp-coaching-collapse-header {
    position: relative;
    overflow: hidden;
    transition: border-color 0.3s, box-shadow 0.3s, background 0.3s;
    animation: bp-header-glow 3s ease-out forwards, bp-nudge 0.5s ease-in-out 4s 2;
}

.bp-coaching-collapse-header:hover {
    border-color: rgba(0, 212, 255, 0.3) !important;
    box-shadow: 0 0 16px rgba(0, 212, 255, 0.1);
    background: rgba(8, 145, 178, 0.06) !important;
}

/* Shimmer sweep overlay inside coaching header */
.bp-coaching-collapse-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.06), rgba(0, 255, 204, 0.04), transparent);
    animation: bp-coaching-shimmer 4s ease-in-out 0.5s 2;
    pointer-events: none;
    z-index: 1;
}

/* Chevron bounce animation */
.bp-cta-chevron {
    color: var(--bp-text-muted, rgba(255, 255, 255, 0.4));
    transition: transform 0.3s ease, color 0.3s;
    animation: bp-chevron-bounce 2s ease-in-out 1s 3;
    flex-shrink: 0;
}

.bp-coaching-collapse-header:hover .bp-cta-chevron {
    color: var(--bp-cyan, #00D4FF);
}

.bp-cta-chevron-up {
    transform: rotate(180deg);
    animation: none;
}

/* Expanded state — remove entry animations, keep hover */
.bp-coaching-header-expanded {
    animation: none;
    border-color: rgba(0, 212, 255, 0.2) !important;
}

.bp-coaching-header-expanded::before {
    animation: none;
    display: none;
}

/* Light mode overrides */
html:not([data-theme="dark"]) .bp-coaching-collapse-header {
    animation: none;
}

html:not([data-theme="dark"]) .bp-coaching-collapse-header:hover {
    border-color: rgba(8, 145, 178, 0.25) !important;
    box-shadow: 0 0 12px rgba(8, 145, 178, 0.06);
    background: rgba(8, 145, 178, 0.04) !important;
}

html:not([data-theme="dark"]) .bp-coaching-collapse-header::before {
    background: linear-gradient(90deg, transparent, rgba(8, 145, 178, 0.04), rgba(5, 150, 105, 0.03), transparent);
}

html:not([data-theme="dark"]) .bp-cta-chevron {
    color: #9ca3af;
}

html:not([data-theme="dark"]) .bp-coaching-collapse-header:hover .bp-cta-chevron {
    color: #0891b2;
}

html:not([data-theme="dark"]) .bp-coaching-header-expanded {
    border-color: rgba(8, 145, 178, 0.15) !important;
    background: rgba(8, 145, 178, 0.03) !important;
}

html:not([data-theme="dark"]) .bp-coaching-collapse-header .bp-coaching-collapse-badge {
    background: linear-gradient(135deg, #0891b2, #0e7490) !important;
    box-shadow: 0 0 8px rgba(8, 145, 178, 0.2);
}

/* ============================================================
   SHARE BUTTONS — Below search bar
   ============================================================ */

.bp-share-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.bp-share-btn:active {
    transform: translateY(0);
}

/* Light mode share buttons */
html:not([data-theme="dark"]) .bp-share-btn[style*="0,212,255"] {
    background: linear-gradient(135deg, rgba(8, 145, 178, 0.08), rgba(8, 145, 178, 0.03)) !important;
    border-color: rgba(8, 145, 178, 0.2) !important;
    color: #0891b2;
}

html:not([data-theme="dark"]) .bp-share-btn[style*="168,85,247"] {
    background: linear-gradient(135deg, rgba(147, 51, 234, 0.08), rgba(147, 51, 234, 0.03)) !important;
    border-color: rgba(147, 51, 234, 0.2) !important;
    color: #7c3aed;
}

html:not([data-theme="dark"]) .bp-share-btn:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* ============================================================
   MMR COMPARE ROW — Responsive layout for Reality Check
   ============================================================ */
.bp-mmr-compare-row {
    display: flex;
    align-items: stretch;
    gap: 0;
}

.bp-mmr-compare-side {
    flex: 1;
    text-align: center;
    padding: 20px 16px;
    min-width: 0;
}

.bp-mmr-compare-left {
    border-radius: 12px 0 0 12px;
}

.bp-mmr-compare-right {
    border-radius: 0 12px 12px 0;
}

.bp-mmr-compare-value {
    font-size: 36px;
    font-weight: 900;
    line-height: 1.1;
}

.bp-mmr-delta-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.bp-mmr-delta-badge {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 -14px;
    position: relative;
    flex-shrink: 0;
}

/* Coaching 3-col grid — auto-fit for responsive */
.bp-coaching-3col {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* Meta grid — auto-fit for responsive */
.bp-meta-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

/* ============================================================
   MOBILE FIX — Force all dashboard content to fit viewport
   ============================================================ */
@media (max-width: 768px) {
    /* Global containment */
    .mmr-dashboard-bp,
    .mmr-dashboard-bp .bp-dashboard-wrapper,
    .mmr-dashboard-bp .bp-dashboard-grid {
        max-width: 100vw !important;
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    /* All glass cards: force full width, prevent blowout */
    .mmr-dashboard-bp .bp-glass {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        word-break: break-word;
        box-sizing: border-box !important;
    }

    /* Grid sections: force single column full width */
    .mmr-dashboard-bp .bp-dashboard-grid > div {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    /* Combat stats: 2x2 grid on mobile instead of 4-col */
    .mmr-dashboard-bp .bp-combat-stats {
        grid-template-columns: 1fr 1fr !important;
    }

    /* Coaching 3-col (Strengths/Watch Out/Meta Picks): stack */
    .mmr-dashboard-bp .bp-coaching-collapse-body > div:last-child[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }

    /* Meta Insights: Your Picks / Top Meta — stack */
    .mmr-dashboard-bp .bp-meta-insights > div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }

    /* Lobby tier pills: wrap */
    .mmr-dashboard-bp .bp-lobby-tiers {
        flex-wrap: wrap !important;
    }

    /* Match timeline W/L chain: allow horizontal scroll */
    .mmr-dashboard-bp .bp-match-timeline .bp-glass,
    .mmr-dashboard-bp .bp-match-timeline {
        overflow-x: auto !important;
        max-width: 100% !important;
    }

    /* CTA banner: stack on mobile */
    .mmr-dashboard-bp .bp-cta-collapsed-header {
        flex-wrap: wrap !important;
    }

    .mmr-dashboard-bp .bp-cta-collapsed-header .bp-cta-collapsed-right {
        width: 100% !important;
    }

    .mmr-dashboard-bp .bp-cta-collapsed-header .bp-cta-inline-btn {
        width: 100% !important;
        justify-content: center !important;
    }

    /* Coaching collapse header: wrap badge below on tiny screens */
    .mmr-dashboard-bp .bp-coaching-collapse-header {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    /* Summoner name: shrink font */
    .mmr-dashboard-bp .bp-summoner-name {
        font-size: 22px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* MMR hero numbers: smaller on mobile */
    .mmr-dashboard-bp .bp-mmr-hero {
        font-size: 36px !important;
    }

    /* Share buttons row */
    .mmr-dashboard-bp [style*="max-width:680px"][style*="flex-wrap"] {
        max-width: 100% !important;
    }

    /* MMR Compare row: stack vertically on mobile */
    .bp-mmr-compare-row {
        flex-direction: column !important;
        gap: 0 !important;
    }

    .bp-mmr-compare-left {
        border-radius: 12px 12px 0 0 !important;
        border-right: 1px solid rgba(0,255,127,0.08) !important;
        border-bottom: none !important;
    }

    .bp-mmr-compare-right {
        border-radius: 0 0 12px 12px !important;
        border-left: 1px solid rgba(255,255,255,0.04) !important;
        border-top: none !important;
    }

    .bp-mmr-delta-wrap {
        margin: -20px auto -20px !important;
        z-index: 3 !important;
        position: relative !important;
    }

    .bp-mmr-delta-badge {
        margin: 0 !important;
        width: 64px !important;
        height: 64px !important;
    }

    .bp-mmr-compare-value {
        font-size: 28px !important;
    }

    /* Coaching 3-col: stack on mobile */
    .bp-coaching-3col {
        grid-template-columns: 1fr !important;
    }

    /* Meta grid: stack on mobile */
    .bp-meta-grid {
        grid-template-columns: 1fr !important;
    }

    /* Gravity alert: prevent overflow */
    .mmr-dashboard-bp .bp-gravity-alert {
        max-width: 100% !important;
        overflow: hidden !important;
    }

    .mmr-dashboard-bp .bp-gravity-alert-desc {
        word-break: break-word !important;
    }

    /* LP grid: stack on mobile */
    .mmr-dashboard-bp .bp-lp-grid {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    /* Search button: full width on mobile */
    .mmr-dashboard-bp .bp-search-btn {
        padding: 12px 20px !important;
    }
}

/* Extra small phones */
@media (max-width: 420px) {
    /* Combat stats: single column on very small screens */
    .mmr-dashboard-bp .bp-combat-stats {
        grid-template-columns: 1fr 1fr !important;
        gap: 6px !important;
    }

    /* Economy breakdown: stack vertically */
    .mmr-dashboard-bp .bp-coaching-collapse-body div[style*="display:flex"][style*="justify-content:center"][style*="gap:0"] {
        flex-direction: column !important;
        gap: 12px !important;
    }

    /* Hide the pipe dividers in economy breakdown on tiny screens */
    .mmr-dashboard-bp .bp-coaching-collapse-body div[style*="width:1px"][style*="height:48px"] {
        display: none !important;
    }

    /* Gold stats: already 1fr from 480px rule */

    /* Rank emblem smaller */
    .mmr-dashboard-bp .bp-rank-emblem {
        width: 60px !important;
        height: 60px !important;
    }

    .mmr-dashboard-bp .bp-rank-name {
        font-size: 18px !important;
    }
}