/**
 * NoPixels Founder's Club — Frontend-CSS
 *
 * Branding-Variablen aus PLUGIN-STACK-OVERVIEW.md §6.
 */

.npfc-cart-banner,
.npfc-cart-cta,
.npfc-pre-release-banner,
.npfc-library-banner {
    --np-accent: #FFB23F;
    --np-accent-2: #7C5CFF;
    --np-success: #43D17A;
    --np-warn: #F3C969;

    border-radius: 10px;
    padding: 14px 18px;
    margin: 14px 0;
    font-size: 14px;
    line-height: 1.5;
}

.npfc-cart-banner {
    background: linear-gradient(90deg, rgba(67,209,122,0.10), rgba(255,178,63,0.08));
    border: 1px solid var(--np-success);
}

.npfc-cart-cta {
    background: linear-gradient(90deg, rgba(255,178,63,0.10), transparent);
    border: 1px dashed var(--np-accent);
}

/* Pre-Release */
.npfc-pre-release-banner {
    background: #f5f3ff;
    border-left: 4px solid var(--np-accent-2);
}

.npfc-pre-release-banner.is-eligible {
    background: rgba(67, 209, 122, 0.10);
    border-left-color: var(--np-success);
}

.npfc-pre-release-banner ul {
    margin: 8px 0 0 16px;
    padding: 0;
    list-style: none;
}

.npfc-pre-release-banner ul li {
    padding: 3px 0;
    color: #444;
}

/* Pre-Release-Stock-Status Label */
.stock.pre-release-locked {
    color: var(--np-accent-2);
    font-weight: 600;
}

/* Library */
.npfc-library-banner {
    background: rgba(67, 209, 122, 0.08);
    border-left: 4px solid var(--np-success);
}

.npfc-library-banner.is-free {
    font-weight: 600;
}

/* ============================================================== */
/*   <np-pass> Custom Element                                     */
/* ============================================================== */

.np-pass {
    --tier-color: #B87333;
    --np-ink: #E8EDF2;
    --np-muted: #8A94A3;
    --np-bg: #0B0F14;
    --np-surface: #141A22;
    --tilt-x: 0deg;
    --tilt-y: 0deg;
    --foil-x: 50%;
    --foil-y: 50%;

    display: block;
    width: 100%;
    max-width: 380px;
    aspect-ratio: 0.72;     /* TCG-Karten-Verhältnis (63x88) */
    margin: 16px auto;
    background: var(--np-bg);
    color: var(--np-ink);
    border-radius: 14px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 6px 24px rgba(0,0,0,0.25);
    font-family: 'Inter', system-ui, sans-serif;
    transform-style: preserve-3d;
    transition: transform 0.15s ease-out;
    transform: perspective(800px) rotateY(var(--tilt-x)) rotateX(var(--tilt-y));
    will-change: transform;
    border: 3px solid var(--tier-color);
}

.np-pass--mini    { max-width: 200px; }
.np-pass--regular { max-width: 380px; }
.np-pass--full    { max-width: 480px; }

.np-pass-frame {
    position: relative;
    padding: 16px 18px;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 2;
}

/* Foil-Effekt (alle Tiers, intensiver bei Mythic) */
.np-pass-foil {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background:
        radial-gradient(circle at var(--foil-x) var(--foil-y),
            rgba(255,255,255,0.45) 0%,
            rgba(255,255,255,0.08) 30%,
            transparent 60%);
    mix-blend-mode: screen;
    opacity: 0.55;
}

.np-pass[data-tier="bronze"] .np-pass-foil { opacity: 0.25; }
.np-pass[data-tier="silver"] .np-pass-foil { opacity: 0.50; }
.np-pass[data-tier="gold"]   .np-pass-foil { opacity: 0.55; }

.np-pass[data-tier="mythic"] .np-pass-foil {
    opacity: 0.65;
    background:
        radial-gradient(circle at var(--foil-x) var(--foil-y),
            rgba(255,255,255,0.55) 0%,
            transparent 60%),
        linear-gradient(120deg,
            #ff5c7a 0%, #7c5cff 25%, #43d17a 50%, #f3c969 75%, #ff5c7a 100%);
    background-size: cover, 300% 300%;
    animation: np-pass-foil-shift 8s linear infinite;
    mix-blend-mode: color-dodge;
}

@keyframes np-pass-foil-shift {
    0%   { background-position: var(--foil-x) var(--foil-y), 0% 50%; }
    100% { background-position: var(--foil-x) var(--foil-y), 300% 50%; }
}

/* Header */
.np-pass-header {
    display: flex;
    align-items: center;
    gap: 12px;
}

.np-pass-avatar {
    width: 56px; height: 56px;
    border-radius: 50%;
    border: 2px solid var(--tier-color);
    flex-shrink: 0;
    object-fit: cover;
}

.np-pass-name {
    display: flex; flex-direction: column; gap: 4px;
    min-width: 0;
}

.np-pass-name strong {
    font-family: 'Cinzel', serif;
    font-size: 18px;
    letter-spacing: 0.02em;
    color: var(--np-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.np-pass-tier-badge {
    align-self: flex-start;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #fff;
    text-shadow: 0 1px 1px rgba(0,0,0,0.4);
}

/* Stats */
.np-pass-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
    padding: 8px 6px;
}

.np-pass-stat {
    display: flex; flex-direction: column; align-items: center;
}

.np-pass-stat-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--np-muted);
}

.np-pass-stat-value {
    font-family: 'JetBrains Mono', monospace;
    font-size: 17px;
    font-weight: 600;
    color: var(--np-ink);
}

.np-pass-stat-value small {
    font-size: 11px;
    color: var(--tier-color);
}

/* XP-Bar */
.np-pass-xpbar {
    position: relative;
    background: rgba(255,255,255,0.06);
    border-radius: 8px;
    overflow: hidden;
    height: 36px;
}

.np-pass-xpbar-fill {
    position: absolute;
    inset: 0 auto 0 0;
    background: linear-gradient(90deg, var(--tier-color), #FFB23F);
    border-radius: 8px;
    transition: width 0.6s cubic-bezier(.4,1.6,.6,1);
    opacity: 0.85;
}

.np-pass-xpbar-text {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-size: 11px;
    line-height: 1.2;
    color: var(--np-ink);
    text-shadow: 0 1px 2px rgba(0,0,0,0.6);
    font-weight: 600;
}

.np-pass-tonext {
    font-size: 10px;
    font-weight: 400;
    color: rgba(232,237,242,0.85);
}

/* Perks */
.np-pass-perks {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    font-size: 10px;
}

.np-pass-perks li {
    background: rgba(255,255,255,0.06);
    padding: 2px 8px;
    border-radius: 10px;
    color: rgba(232,237,242,0.9);
}

/* Multiplier-Pill */
.np-pass-multiplier {
    background: linear-gradient(90deg, #FFB23F, #FF5C7A);
    color: #fff;
    text-align: center;
    padding: 4px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* QR-Placeholder */
.np-pass-qr-slot {
    background: rgba(255,255,255,0.04);
    border: 1px dashed rgba(255,255,255,0.15);
    border-radius: 6px;
    padding: 12px;
    text-align: center;
    color: var(--np-muted);
    font-size: 10px;
}

/* Animations */
.np-pass--xp-flash .np-pass-xpbar-fill {
    animation: np-pass-flash 1.2s ease-out;
}

@keyframes np-pass-flash {
    0%   { box-shadow: 0 0 0 0 rgba(255,178,63,0.6); }
    50%  { box-shadow: 0 0 24px 8px rgba(255,178,63,0.5); }
    100% { box-shadow: 0 0 0 0 rgba(255,178,63,0); }
}

.np-pass--levelup {
    animation: np-pass-levelup 2.5s ease-in-out;
}

@keyframes np-pass-levelup {
    0%, 100% { box-shadow: 0 6px 24px rgba(0,0,0,0.25); }
    20%      { box-shadow: 0 6px 24px rgba(255,178,63,1), 0 0 60px rgba(255,178,63,0.7); }
    50%      { box-shadow: 0 6px 24px rgba(124,92,255,1), 0 0 60px rgba(124,92,255,0.7); }
}

.np-pass-empty {
    color: var(--np-muted);
    text-align: center;
    padding: 40px 20px;
}

/* ============================================================== */
/*   Tier-Comparison + Upgrade-CTA                                */
/* ============================================================== */

.npfc-tier-comparison {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin: 20px 0;
}

.npfc-tier-comparison-card {
    background: #fff;
    border: 2px solid #ccc;
    border-radius: 10px;
    padding: 16px;
    text-align: center;
    position: relative;
}

.npfc-tier-comparison-card.is-current {
    border-color: #43D17A;
    box-shadow: 0 0 0 4px rgba(67,209,122,0.18);
}

.npfc-tier-comparison-card.is-current::before {
    content: '✓ DEIN TIER';
    position: absolute; top: 8px; right: 10px;
    font-size: 10px; font-weight: 700;
    color: #43D17A;
    letter-spacing: 0.06em;
}

.npfc-tier-comparison-card h3 {
    margin: 0 0 4px;
    font-size: 22px;
    font-family: 'Cinzel', serif;
}

.npfc-tier-comparison-price {
    font-size: 26px;
    font-weight: 700;
    margin: 8px 0 4px;
}

.npfc-tier-comparison-price small {
    font-size: 12px;
    color: #888;
    font-weight: 400;
}

.npfc-tier-comparison-perks {
    list-style: none;
    padding: 0;
    margin: 12px 0 0;
    font-size: 13px;
    text-align: left;
}

.npfc-tier-comparison-perks li {
    padding: 4px 0;
    border-top: 1px dashed #eee;
}

.npfc-tier-comparison-perks li:first-child {
    border-top: 0;
}

.npfc-cta-upgrade {
    background: linear-gradient(90deg, #FFB23F, #FF5C7A);
    color: #fff;
    padding: 16px 24px;
    border-radius: 10px;
    text-align: center;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin: 16px 0;
}

.npfc-cta-upgrade a {
    background: #fff;
    color: #d97b00;
    padding: 10px 20px;
    border-radius: 6px;
    font-weight: 700;
    text-decoration: none;
}

/* My-Account-Tab "Mein Pass" */
.npfc-account-overview {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) 2fr;
    gap: 24px;
}

@media (max-width: 768px) {
    .npfc-account-overview {
        grid-template-columns: 1fr;
    }
}

.npfc-account-overview h3 {
    margin-top: 24px;
}

/* ============================================================== */
/*   Saison-Pass                                                  */
/* ============================================================== */

.npfc-season-pass {
    --np-accent: #FFB23F;
    --np-accent-2: #7C5CFF;
    --np-surface: #141A22;
    --np-success: #43D17A;
    background: #fff;
    color: #1f2330; /* dunkle Basisschrift, sonst erbt die weiße Karte die helle Theme-Schrift */
    border-radius: 10px;
    padding: 20px 24px;
    margin: 24px 0;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}

.npfc-season-pass-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    border-bottom: 2px solid var(--np-accent);
    padding-bottom: 8px;
    margin-bottom: 16px;
}

.npfc-season-pass-header h2 {
    margin: 0;
    font-family: 'Cinzel', serif;
    font-size: 26px;
}

.npfc-season-pass-header small {
    color: #888;
    font-size: 12px;
}

.npfc-season-track-summary {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #f8f9fb;
    border-radius: 8px;
    padding: 14px 18px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.npfc-season-track-level {
    font-family: 'JetBrains Mono', monospace;
    font-size: 22px;
}

.npfc-season-track-xpbar {
    flex: 1 1 240px;
    background: rgba(124, 92, 255, 0.10);
    border-radius: 8px;
    overflow: hidden;
    height: 38px;
    position: relative;
    min-width: 240px;
}

.npfc-season-track-xpbar-fill {
    position: absolute;
    inset: 0 auto 0 0;
    background: linear-gradient(90deg, var(--np-accent), var(--np-accent-2));
    transition: width 0.6s cubic-bezier(.4,1.6,.6,1);
    opacity: 0.85;
}

.npfc-season-track-xpbar-text {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

.npfc-season-track-premium {
    color: #7C5CFF;
    font-weight: 600;
    font-size: 13px;
}

/* Belohnungs-Stufen — horizontal scroll */
.npfc-season-rewards-scroll {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 6px 0 14px;
    scroll-snap-type: x mandatory;
}

.npfc-reward-step {
    min-width: 132px;
    flex-shrink: 0;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    scroll-snap-align: start;
}

.npfc-reward-step.is-reached {
    border-color: var(--np-success);
    background: rgba(67, 209, 122, 0.04);
}

.npfc-reward-step.is-locked {
    opacity: 0.55;
}

.npfc-reward-step-num {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: #888;
    letter-spacing: 0.06em;
    text-align: center;
}

.npfc-reward-cell {
    padding: 8px;
    border-radius: 6px;
    font-size: 12px;
    background: #f6f7f8;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 56px;
    justify-content: center;
}

.npfc-reward-cell.is-free    { border-left: 3px solid #888; }
.npfc-reward-cell.is-premium { border-left: 3px solid var(--np-accent-2); background: rgba(124, 92, 255, 0.05); }
.npfc-reward-cell.is-claimed { opacity: 0.6; }
.npfc-reward-cell.is-empty   { color: #ccc; }
.npfc-reward-cell .button    { margin-top: 4px; }

.npfc-reward-token {
    font-size: 11px;
    line-height: 1.3;
}

/* Quests */
.npfc-season-quests details {
    border: 1px solid #eee;
    border-radius: 8px;
    margin-bottom: 8px;
    background: #fff;
}

.npfc-season-quests summary {
    padding: 12px 16px;
    cursor: pointer;
    font-size: 14px;
}

.npfc-quest-list {
    list-style: none;
    margin: 0;
    padding: 0 16px 12px;
}

.npfc-quest {
    display: grid;
    grid-template-columns: 1fr 200px 110px;
    gap: 12px;
    align-items: center;
    padding: 10px 0;
    border-top: 1px dashed #eee;
}

.npfc-quest:first-child { border-top: 0; }

.npfc-quest.is-completed { background: rgba(67, 209, 122, 0.04); }

.npfc-quest-info strong { display: block; }
.npfc-quest-info small  { color: #666; font-size: 12px; }

.npfc-quest-progress {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
}

.npfc-quest-progress-bar {
    background: #eee;
    border-radius: 4px;
    height: 6px;
    overflow: hidden;
}

.npfc-quest-progress-fill {
    height: 100%;
    background: var(--np-accent);
    transition: width 0.4s;
}

.npfc-quest-action {
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.npfc-quest-reward {
    font-weight: 600;
    color: var(--np-accent);
    font-size: 13px;
}

@media (max-width: 640px) {
    .npfc-quest {
        grid-template-columns: 1fr;
    }
    .npfc-quest-action {
        text-align: left;
        align-items: flex-start;
    }
}

/* ============================================================== */
/*   Talent-Baum                                                  */
/* ============================================================== */

.npfc-talent-tree {
    --np-accent: #FFB23F;
    --np-accent-2: #7C5CFF;
    background: #fff;
    color: #1f2330; /* dunkle Basisschrift, sonst erbt die weiße Karte die helle Theme-Schrift */
    border-radius: 10px;
    padding: 20px 24px;
    margin: 24px 0;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}

.npfc-talent-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    background: linear-gradient(90deg, rgba(255,178,63,0.10), rgba(124,92,255,0.06));
    border-radius: 8px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.npfc-talent-respec {
    background: #fff;
    border: 1px solid #ccc;
}

.npfc-talent-respec small {
    display: block;
    color: #888;
    font-size: 11px;
}

.npfc-talent-columns {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

@media (max-width: 900px) {
    .npfc-talent-columns {
        grid-template-columns: 1fr;
    }
}

.npfc-talent-column {
    --path-color: #888;
    background: #f8f9fb;
    border-top: 4px solid var(--path-color);
    border-radius: 6px;
    padding: 14px;
}

.npfc-talent-column h3 {
    margin: 0 0 12px;
    color: var(--path-color);
    font-family: 'Cinzel', serif;
    font-size: 18px;
    text-align: center;
}

.npfc-talent-tier {
    margin-bottom: 10px;
}

.npfc-talent-tier-label {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #888;
    margin-bottom: 6px;
    text-align: center;
}

.npfc-talent-tier-nodes {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.npfc-talent-node {
    display: grid;
    grid-template-columns: 32px 1fr 24px;
    grid-template-areas:
        "cost label check"
        "cost desc check"
        "cost effect check";
    gap: 2px 8px;
    background: #fff;
    border: 2px solid #ddd;
    border-radius: 6px;
    padding: 8px 10px;
    text-align: left;
    cursor: pointer;
    transition: transform 0.1s, border-color 0.15s, box-shadow 0.15s;
    font: inherit;
    color: inherit;
}

.npfc-talent-node:hover:not([disabled]) {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.npfc-talent-node.is-eligible {
    border-color: var(--np-accent);
    background: rgba(255,178,63,0.04);
}

.npfc-talent-node.is-unlocked {
    border-color: #43D17A;
    background: rgba(67,209,122,0.10);
    cursor: default;
}

.npfc-talent-node.is-locked,
.npfc-talent-node[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
}

.npfc-talent-node-cost {
    grid-area: cost;
    align-self: center;
    background: var(--path-color, var(--np-accent-2));
    color: #fff;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    text-align: center;
    line-height: 28px;
    font-weight: 700;
    font-size: 12px;
}

.npfc-talent-node-label {
    grid-area: label;
    font-weight: 700;
    font-size: 13px;
}

.npfc-talent-node-desc {
    grid-area: desc;
    font-size: 11px;
    color: #555;
    line-height: 1.3;
}

.npfc-talent-node-effect {
    grid-area: effect;
    font-size: 10px;
    color: #666;
    font-style: italic;
}

.npfc-talent-node-check {
    grid-area: check;
    align-self: center;
    color: #43D17A;
    font-size: 18px;
    font-weight: 700;
}

.npfc-talent-tree-empty {
    padding: 30px;
    text-align: center;
    color: #888;
}

/* ============================================================== */
/*   Achievements-Wall                                            */
/* ============================================================== */

.npfc-achievements-wall {
    background: #fff;
    color: #1f2330; /* dunkle Basisschrift, sonst erbt die weiße Karte die helle Theme-Schrift */
    border-radius: 10px;
    padding: 20px 24px;
    margin: 24px 0;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}

.npfc-achievements-header {
    background: linear-gradient(90deg, rgba(255,178,63,0.15), rgba(124,92,255,0.10));
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.npfc-achievements-progress {
    flex: 1 1 200px;
    background: rgba(0,0,0,0.08);
    border-radius: 6px;
    height: 8px;
    overflow: hidden;
}

.npfc-achievements-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #FFB23F, #7C5CFF);
    transition: width 0.6s;
}

.npfc-achievements-featured {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.npfc-achievements-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
    margin-bottom: 20px;
}

.npfc-achievement-card {
    --cat-color: #888;
    display: grid;
    grid-template-columns: 40px 1fr 28px;
    gap: 10px;
    align-items: center;
    background: #fff;
    border: 2px solid #eee;
    border-left: 4px solid var(--cat-color);
    border-radius: 6px;
    padding: 10px 12px;
    transition: transform 0.1s, box-shadow 0.15s;
}

.npfc-achievement-card.is-unlocked {
    background: linear-gradient(135deg, #fff, rgba(67,209,122,0.06));
}

.npfc-achievement-card.is-locked {
    opacity: 0.55;
    filter: grayscale(0.6);
}

.npfc-achievement-card.is-featured {
    border-color: #FFB23F;
    box-shadow: 0 0 0 3px rgba(255,178,63,0.18);
}

.npfc-achievement-card.is-hidden {
    background: #f6f7f8;
}

.npfc-achievement-icon {
    font-size: 28px;
    text-align: center;
}

.npfc-achievement-info {
    min-width: 0;
}

.npfc-achievement-info strong {
    display: block;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.npfc-achievement-info small {
    color: #666;
    font-size: 11px;
    line-height: 1.3;
    display: block;
    margin-top: 2px;
}

.npfc-achievement-xp {
    display: inline-block;
    margin-top: 4px;
    font-size: 10px;
    color: #FFB23F;
    font-weight: 700;
}

.npfc-achievement-feature {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: #FFB23F;
    padding: 0;
}

.npfc-achievement-feature:hover {
    transform: scale(1.2);
}

.npfc-achievements-empty {
    padding: 30px;
    text-align: center;
    color: #888;
}

@media (max-width: 640px) {
    .npfc-achievements-featured {
        grid-template-columns: 1fr;
    }
}

/* --- Booster-Guthaben-Banner (Saison-Pass) --- */
.npfc-booster-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 12px 0;
    padding: 12px 16px;
    border-radius: 12px;
    background: linear-gradient(135deg, #2b1055, #7597de);
    color: #fff;
    font-size: 15px;
    box-shadow: 0 4px 14px rgba(43, 16, 85, .25);
}
.npfc-booster-icon { font-size: 22px; line-height: 1; }
.npfc-booster-text { line-height: 1.4; }
.npfc-booster-text strong { font-size: 17px; }
.npfc-booster-double {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(255, 210, 0, .22);
    color: #ffe27a;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════════
   „Mein Konto"-Seite: Inhaltsbereich als weiße Karte.
   STRENG gescoped auf body.woocommerce-account → kein anderer Seiten-
   Inhalt wird weiß. Passt optisch zur weißen Konto-Navigation links und
   macht alle Tabs (Dashboard, Matchmaking, Mein Pass, Bestenliste …)
   einheitlich gut lesbar — unabhängig vom dunklen Theme.
   ═══════════════════════════════════════════════════════════════════ */
body.woocommerce-account .woocommerce-MyAccount-content {
    background: #fff;
    color: #1f2330;
    border-radius: 12px;
    padding: 28px 32px;
    box-shadow: 0 2px 14px rgba(0,0,0,0.08);
    min-height: 320px;
}
/* WICHTIG: KEINE pauschale Textfarbe auf Nachfahren (p/h2/li …) erzwingen!
   Das würde die HELLE Schrift selbsttragender dunkler Widgets (Singles-Markt,
   Discord-Hub) überschreiben → dunkel-auf-dunkel → unsichtbar. Die Basis-`color`
   oben reicht für WooCommerce-Standardinhalt; dunkle Widgets setzen ihre eigene
   Farbe auf ihrem Wrapper und gewinnen damit über die geerbte Basis. */