/* ============================================================
   Predictions Plugin — Frontend CSS v3.3
   9 premium themes • picks • packages • capper
   All scoped to .predictions-plugin-wrap[data-theme]
   ============================================================ */

/* ── Base CSS Variables — Classic (light default) ─────────── */
.predictions-plugin-wrap {
    --pp-bg:              #ffffff;
    --pp-bg-card:         #f8f9fb;
    --pp-bg-card-hover:   #f0f4f8;
    --pp-bg-input:        #f8fafc;
    --pp-border:          #e2e8f0;
    --pp-border-strong:   #cbd5e1;
    --pp-text:            #0f172a;
    --pp-text-muted:      #64748b;
    --pp-text-faint:      #94a3b8;
    --pp-accent:          #e85500;
    --pp-accent-2:        #cc4000;
    --pp-accent-soft:     #eff6ff;
    --pp-accent-text:     #ffffff;
    --pp-win:             #16a34a;
    --pp-win-bg:          #dcfce7;
    --pp-loss:            #dc2626;
    --pp-loss-bg:         #fee2e2;
    --pp-push:            #64748b;
    --pp-push-bg:         #f1f5f9;
    --pp-pending:         #d97706;
    --pp-pending-bg:      #fef3c7;
    --pp-void:            #7c3aed;
    --pp-void-bg:         #ede9fe;
    --pp-radius:          14px;
    --pp-radius-sm:       8px;
    --pp-radius-xs:       6px;
    --pp-shadow:          0 2px 8px rgba(0,0,0,.07), 0 1px 3px rgba(0,0,0,.04);
    --pp-shadow-hover:    0 8px 24px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06);
    --pp-shadow-card:     0 1px 4px rgba(0,0,0,.06);
    --pp-glow:            none;
    --pp-featured-ring:   0 0 0 2px var(--pp-accent);
    --pp-font:            -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --pp-transition:      .2s cubic-bezier(.4,0,.2,1);
    --pp-badge-low:       #94a3b8;
    --pp-badge-medium:    #e85500;
    --pp-badge-high:      #f59e0b;
    --pp-badge-max:       #ef4444;
    --pp-stat-1:          linear-gradient(135deg,#e85500,#cc4000);
    --pp-stat-2:          linear-gradient(135deg,#f59e0b,#d97706);
    --pp-stat-3:          linear-gradient(135deg,#10b981,#047857);
    --pp-stat-4:          linear-gradient(135deg,#8b5cf6,#6d28d9);
    --pp-stat-5:          linear-gradient(135deg,#ec4899,#be185d);
    --pp-stat-6:          linear-gradient(135deg,#6b7280,#374151);
    --pp-stat-7:          linear-gradient(135deg,#14b8a6,#0f766e);

    font-family: var(--pp-font);
    color: var(--pp-text);
    background: var(--pp-bg);
    max-width: 100%;
    box-sizing: border-box;
    padding: 8px 0 24px;
    isolation: isolate;
}

/* ═══════════════════════════════════════════════════════════
   THEMES
   ═══════════════════════════════════════════════════════════ */

/* ── 1. DARK ────────────────────────────────────────────────── */
.predictions-plugin-wrap[data-theme="dark"] {
    --pp-bg:            #0f172a;
    --pp-bg-card:       #1e293b;
    --pp-bg-card-hover: #263147;
    --pp-bg-input:      #1e293b;
    --pp-border:        #334155;
    --pp-border-strong: #475569;
    --pp-text:          #f1f5f9;
    --pp-text-muted:    #94a3b8;
    --pp-text-faint:    #64748b;
    --pp-accent:        #ff7a35;
    --pp-accent-2:      #e85500;
    --pp-accent-soft:   rgba(96,165,250,.12);
    --pp-win-bg:        rgba(22,163,74,.18);
    --pp-loss-bg:       rgba(220,38,38,.18);
    --pp-push-bg:       rgba(100,116,139,.15);
    --pp-pending-bg:    rgba(217,119,6,.18);
    --pp-void-bg:       rgba(124,58,237,.18);
    --pp-shadow:        0 2px 12px rgba(0,0,0,.4);
    --pp-shadow-hover:  0 8px 28px rgba(0,0,0,.5);
    --pp-shadow-card:   0 1px 6px rgba(0,0,0,.3);
}

/* ── 2. NEON ONYX ───────────────────────────────────────────── */
.predictions-plugin-wrap[data-theme="neon-onyx"] {
    --pp-bg:            #0a0a0a;
    --pp-bg-card:       #111111;
    --pp-bg-card-hover: #161616;
    --pp-bg-input:      #0d0d0d;
    --pp-border:        #1f1f1f;
    --pp-border-strong: #2a2a2a;
    --pp-text:          #e8e8e8;
    --pp-text-muted:    #666666;
    --pp-text-faint:    #444444;
    --pp-accent:        #00ff88;
    --pp-accent-2:      #00e5ff;
    --pp-accent-soft:   rgba(0,255,136,.08);
    --pp-accent-text:   #0a0a0a;
    --pp-win:           #00ff88;
    --pp-win-bg:        rgba(0,255,136,.1);
    --pp-loss:          #ff3355;
    --pp-loss-bg:       rgba(255,51,85,.1);
    --pp-push:          #666;
    --pp-push-bg:       rgba(102,102,102,.12);
    --pp-pending:       #ffaa00;
    --pp-pending-bg:    rgba(255,170,0,.1);
    --pp-void:          #b94dff;
    --pp-void-bg:       rgba(185,77,255,.1);
    --pp-radius:        8px;
    --pp-radius-sm:     4px;
    --pp-shadow:        0 0 0 1px #1f1f1f, 0 4px 16px rgba(0,0,0,.6);
    --pp-shadow-hover:  0 0 0 1px var(--pp-accent), 0 0 24px rgba(0,255,136,.12), 0 8px 24px rgba(0,0,0,.6);
    --pp-shadow-card:   0 0 0 1px #1a1a1a;
    --pp-glow:          0 0 20px rgba(0,255,136,.15);
    --pp-featured-ring: 0 0 0 1px var(--pp-accent), 0 0 20px rgba(0,255,136,.3);
    --pp-stat-1:        linear-gradient(135deg,#00ff88,#00cc70);
    --pp-stat-2:        linear-gradient(135deg,#ffaa00,#ff7700);
    --pp-stat-3:        linear-gradient(135deg,#00e5ff,#0099cc);
    --pp-stat-4:        linear-gradient(135deg,#b94dff,#8800cc);
    --pp-stat-5:        linear-gradient(135deg,#ff3355,#cc0022);
    --pp-stat-6:        linear-gradient(135deg,#444,#222);
    --pp-stat-7:        linear-gradient(135deg,#00ff88,#00b35a);
}
.predictions-plugin-wrap[data-theme="neon-onyx"] .predictions-pick-card:hover,
.predictions-plugin-wrap[data-theme="neon-onyx"] .pp-card:hover {
    border-color: var(--pp-accent) !important;
    box-shadow: var(--pp-shadow-hover) !important;
}
.predictions-plugin-wrap[data-theme="neon-onyx"] .predictions-result-badge.win {
    color: var(--pp-win); border-color: var(--pp-win);
    text-shadow: 0 0 8px var(--pp-win); box-shadow: 0 0 12px rgba(0,255,136,.2);
}
.predictions-plugin-wrap[data-theme="neon-onyx"] .predictions-result-badge.loss {
    color: var(--pp-loss); border-color: var(--pp-loss);
    text-shadow: 0 0 8px var(--pp-loss);
}

/* ── 3. AZURE MIST ──────────────────────────────────────────── */
.predictions-plugin-wrap[data-theme="azure-mist"] {
    --pp-bg:            #f0f7ff;
    --pp-bg-card:       #ffffff;
    --pp-bg-card-hover: #e8f4fd;
    --pp-bg-input:      #f8fbff;
    --pp-border:        #bfdbfe;
    --pp-border-strong: #93c5fd;
    --pp-text:          #0c2d4e;
    --pp-text-muted:    #3b6ea0;
    --pp-text-faint:    #64a0d4;
    --pp-accent:        #0284c7;
    --pp-accent-2:      #0369a1;
    --pp-accent-soft:   #e0f2fe;
    --pp-win:           #059669;
    --pp-win-bg:        #d1fae5;
    --pp-loss:          #dc2626;
    --pp-loss-bg:       #fee2e2;
    --pp-shadow:        0 2px 12px rgba(2,132,199,.08), 0 1px 4px rgba(2,132,199,.05);
    --pp-shadow-hover:  0 8px 28px rgba(2,132,199,.14), 0 4px 10px rgba(2,132,199,.08);
    --pp-shadow-card:   0 1px 4px rgba(2,132,199,.06);
    --pp-stat-1:        linear-gradient(135deg,#0ea5e9,#0284c7);
    --pp-stat-2:        linear-gradient(135deg,#38bdf8,#0ea5e9);
    --pp-stat-3:        linear-gradient(135deg,#059669,#047857);
    --pp-stat-4:        linear-gradient(135deg,#6366f1,#4f46e5);
    --pp-stat-5:        linear-gradient(135deg,#0284c7,#0369a1);
    --pp-stat-6:        linear-gradient(135deg,#3b6ea0,#1e3a5f);
    --pp-stat-7:        linear-gradient(135deg,#22d3ee,#0891b2);
}

/* ── 4. TEAL MIST ───────────────────────────────────────────── */
.predictions-plugin-wrap[data-theme="teal-mist"] {
    --pp-bg:            #f0fdf9;
    --pp-bg-card:       #ffffff;
    --pp-bg-card-hover: #ccfbf1;
    --pp-bg-input:      #f0fdf9;
    --pp-border:        #99f6e4;
    --pp-border-strong: #5eead4;
    --pp-text:          #042f2e;
    --pp-text-muted:    #0f766e;
    --pp-text-faint:    #14b8a6;
    --pp-accent:        #0d9488;
    --pp-accent-2:      #0f766e;
    --pp-accent-soft:   #ccfbf1;
    --pp-win:           #059669;
    --pp-win-bg:        #d1fae5;
    --pp-shadow:        0 2px 12px rgba(13,148,136,.08);
    --pp-shadow-hover:  0 8px 28px rgba(13,148,136,.15);
    --pp-shadow-card:   0 1px 4px rgba(13,148,136,.06);
    --pp-stat-1:        linear-gradient(135deg,#0d9488,#0f766e);
    --pp-stat-2:        linear-gradient(135deg,#f59e0b,#d97706);
    --pp-stat-3:        linear-gradient(135deg,#10b981,#059669);
    --pp-stat-4:        linear-gradient(135deg,#14b8a6,#0d9488);
    --pp-stat-5:        linear-gradient(135deg,#6ee7b7,#34d399);
    --pp-stat-6:        linear-gradient(135deg,#0f766e,#134e4a);
    --pp-stat-7:        linear-gradient(135deg,#0891b2,#0369a1);
}

/* ── 5. MERIDIAN BLUE ───────────────────────────────────────── */
.predictions-plugin-wrap[data-theme="meridian-blue"] {
    --pp-bg:            #0c1f3c;
    --pp-bg-card:       #112240;
    --pp-bg-card-hover: #162d53;
    --pp-bg-input:      #0e2347;
    --pp-border:        #1e3a5f;
    --pp-border-strong: #2d5480;
    --pp-text:          #ccd6f6;
    --pp-text-muted:    #8892b0;
    --pp-text-faint:    #4a6080;
    --pp-accent:        #64ffda;
    --pp-accent-2:      #00d4aa;
    --pp-accent-soft:   rgba(100,255,218,.08);
    --pp-accent-text:   #0c1f3c;
    --pp-win:           #64ffda;
    --pp-win-bg:        rgba(100,255,218,.12);
    --pp-loss:          #ff6b6b;
    --pp-loss-bg:       rgba(255,107,107,.12);
    --pp-push:          #8892b0;
    --pp-push-bg:       rgba(136,146,176,.12);
    --pp-pending:       #ffd700;
    --pp-pending-bg:    rgba(255,215,0,.1);
    --pp-void:          #c792ea;
    --pp-void-bg:       rgba(199,146,234,.1);
    --pp-shadow:        0 4px 16px rgba(0,0,0,.4);
    --pp-shadow-hover:  0 0 0 1px rgba(100,255,218,.2), 0 12px 32px rgba(0,0,0,.5);
    --pp-shadow-card:   0 2px 8px rgba(0,0,0,.3);
    --pp-featured-ring: 0 0 0 1px var(--pp-accent);
    --pp-stat-1:        linear-gradient(135deg,#ff7a35,#e85500);
    --pp-stat-2:        linear-gradient(135deg,#ffd700,#f59e0b);
    --pp-stat-3:        linear-gradient(135deg,#64ffda,#00b386);
    --pp-stat-4:        linear-gradient(135deg,#c792ea,#8b5cf6);
    --pp-stat-5:        linear-gradient(135deg,#ff6b6b,#dc2626);
    --pp-stat-6:        linear-gradient(135deg,#8892b0,#4a6080);
    --pp-stat-7:        linear-gradient(135deg,#38bdf8,#0284c7);
}
.predictions-plugin-wrap[data-theme="meridian-blue"] .predictions-pick-card:hover {
    border-color: rgba(100,255,218,.3) !important;
}

/* ── 6. SOLAR DUSK ──────────────────────────────────────────── */
.predictions-plugin-wrap[data-theme="solar-dusk"] {
    --pp-bg:            #12001e;
    --pp-bg-card:       #1c0a2e;
    --pp-bg-card-hover: #261040;
    --pp-bg-input:      #1a0826;
    --pp-border:        #3d1a5e;
    --pp-border-strong: #5a2585;
    --pp-text:          #fde8d0;
    --pp-text-muted:    #c4a0e0;
    --pp-text-faint:    #8b5ea0;
    --pp-accent:        #f97316;
    --pp-accent-2:      #ea580c;
    --pp-accent-soft:   rgba(249,115,22,.12);
    --pp-accent-text:   #ffffff;
    --pp-win:           #4ade80;
    --pp-win-bg:        rgba(74,222,128,.12);
    --pp-loss:          #f43f5e;
    --pp-loss-bg:       rgba(244,63,94,.12);
    --pp-push:          #c4a0e0;
    --pp-push-bg:       rgba(196,160,224,.1);
    --pp-pending:       #fbbf24;
    --pp-pending-bg:    rgba(251,191,36,.1);
    --pp-void:          #a855f7;
    --pp-void-bg:       rgba(168,85,247,.15);
    --pp-shadow:        0 4px 20px rgba(249,115,22,.08), 0 2px 8px rgba(0,0,0,.5);
    --pp-shadow-hover:  0 0 0 1px rgba(249,115,22,.3), 0 12px 32px rgba(249,115,22,.15), 0 4px 16px rgba(0,0,0,.5);
    --pp-shadow-card:   0 2px 8px rgba(0,0,0,.4);
    --pp-glow:          0 0 40px rgba(249,115,22,.06);
    --pp-featured-ring: 0 0 0 2px var(--pp-accent), 0 0 24px rgba(249,115,22,.4);
    --pp-stat-1:        linear-gradient(135deg,#f97316,#ea580c);
    --pp-stat-2:        linear-gradient(135deg,#a855f7,#7c3aed);
    --pp-stat-3:        linear-gradient(135deg,#4ade80,#16a34a);
    --pp-stat-4:        linear-gradient(135deg,#fb923c,#f97316);
    --pp-stat-5:        linear-gradient(135deg,#f43f5e,#e11d48);
    --pp-stat-6:        linear-gradient(135deg,#8b5ea0,#5b2d7a);
    --pp-stat-7:        linear-gradient(135deg,#fbbf24,#f59e0b);
}
.predictions-plugin-wrap[data-theme="solar-dusk"] {
    background: radial-gradient(ellipse at top, #2d0a4e 0%, #12001e 60%);
}
.predictions-plugin-wrap[data-theme="solar-dusk"] .predictions-pick-card:hover {
    border-color: rgba(249,115,22,.4) !important;
}

/* ── 7. STARRY NIGHT ────────────────────────────────────────── */
.predictions-plugin-wrap[data-theme="starry-night"] {
    --pp-bg:            #03071a;
    --pp-bg-card:       #080f2a;
    --pp-bg-card-hover: #0d1535;
    --pp-bg-input:      #060c22;
    --pp-border:        #141f40;
    --pp-border-strong: #1e2d5a;
    --pp-text:          #e2e8ff;
    --pp-text-muted:    #818cf8;
    --pp-text-faint:    #4c5480;
    --pp-accent:        #818cf8;
    --pp-accent-2:      #6366f1;
    --pp-accent-soft:   rgba(129,140,248,.1);
    --pp-accent-text:   #ffffff;
    --pp-win:           #34d399;
    --pp-win-bg:        rgba(52,211,153,.12);
    --pp-loss:          #f87171;
    --pp-loss-bg:       rgba(248,113,113,.12);
    --pp-push:          #818cf8;
    --pp-push-bg:       rgba(129,140,248,.1);
    --pp-pending:       #fbbf24;
    --pp-pending-bg:    rgba(251,191,36,.1);
    --pp-void:          #c084fc;
    --pp-void-bg:       rgba(192,132,252,.1);
    --pp-shadow:        0 4px 20px rgba(0,0,0,.6);
    --pp-shadow-hover:  0 0 0 1px rgba(129,140,248,.3), 0 0 32px rgba(129,140,248,.1), 0 12px 32px rgba(0,0,0,.7);
    --pp-shadow-card:   0 2px 8px rgba(0,0,0,.5);
    --pp-featured-ring: 0 0 0 1px var(--pp-accent), 0 0 32px rgba(129,140,248,.3);
    --pp-stat-1:        linear-gradient(135deg,#818cf8,#6366f1);
    --pp-stat-2:        linear-gradient(135deg,#fbbf24,#d97706);
    --pp-stat-3:        linear-gradient(135deg,#34d399,#059669);
    --pp-stat-4:        linear-gradient(135deg,#c084fc,#9333ea);
    --pp-stat-5:        linear-gradient(135deg,#f87171,#dc2626);
    --pp-stat-6:        linear-gradient(135deg,#4c5480,#1e2d5a);
    --pp-stat-7:        linear-gradient(135deg,#ff8c4a,#e85500);
}
.predictions-plugin-wrap[data-theme="starry-night"] {
    background: radial-gradient(ellipse at 20% 10%, rgba(99,102,241,.12) 0%, transparent 50%),
                radial-gradient(ellipse at 80% 80%, rgba(192,132,252,.08) 0%, transparent 40%),
                #03071a;
}

/* ── 8. PERPETUITY ──────────────────────────────────────────── */
.predictions-plugin-wrap[data-theme="perpetuity"] {
    --pp-bg:            #faf9f6;
    --pp-bg-card:       #ffffff;
    --pp-bg-card-hover: #f5f3ee;
    --pp-bg-input:      #faf9f6;
    --pp-border:        #e8e2d9;
    --pp-border-strong: #d4ccc0;
    --pp-text:          #1a1a1a;
    --pp-text-muted:    #6b6358;
    --pp-text-faint:    #a89e94;
    --pp-accent:        #c8a84b;
    --pp-accent-2:      #a8882b;
    --pp-accent-soft:   #fdf8ed;
    --pp-accent-text:   #1a1a1a;
    --pp-win:           #2d6a2d;
    --pp-win-bg:        #e8f5e8;
    --pp-loss:          #8b1a1a;
    --pp-loss-bg:       #fce8e8;
    --pp-push:          #6b6358;
    --pp-push-bg:       #f0ede8;
    --pp-pending:       #8b6914;
    --pp-pending-bg:    #fdf5dc;
    --pp-void:          #5a3e6e;
    --pp-void-bg:       #f0e8f8;
    --pp-radius:        4px;
    --pp-radius-sm:     2px;
    --pp-shadow:        0 1px 4px rgba(0,0,0,.08), 0 0 0 1px rgba(0,0,0,.04);
    --pp-shadow-hover:  0 4px 16px rgba(0,0,0,.1), 0 0 0 1px rgba(0,0,0,.06);
    --pp-shadow-card:   0 0 0 1px rgba(0,0,0,.06);
    --pp-stat-1:        linear-gradient(135deg,#c8a84b,#a8882b);
    --pp-stat-2:        linear-gradient(135deg,#8b6914,#6b4a0a);
    --pp-stat-3:        linear-gradient(135deg,#2d6a2d,#1a4a1a);
    --pp-stat-4:        linear-gradient(135deg,#5a3e6e,#3a1e4e);
    --pp-stat-5:        linear-gradient(135deg,#8b1a1a,#5a0a0a);
    --pp-stat-6:        linear-gradient(135deg,#6b6358,#4a423a);
    --pp-stat-7:        linear-gradient(135deg,#a8882b,#88681b);
}
.predictions-plugin-wrap[data-theme="perpetuity"] .predictions-pick-card { font-family: Georgia, 'Times New Roman', serif; }
.predictions-plugin-wrap[data-theme="perpetuity"] .predictions-pick-card:hover { border-color: var(--pp-border-strong) !important; }

/* ── 9. NOTEBOOK ─────────────────────────────────────────────── */
.predictions-plugin-wrap[data-theme="notebook"] {
    --pp-bg:            #fffef7;
    --pp-bg-card:       #fffff2;
    --pp-bg-card-hover: #fffde8;
    --pp-bg-input:      #fffff8;
    --pp-border:        #d4c89a;
    --pp-border-strong: #b8aa7a;
    --pp-text:          #1a1000;
    --pp-text-muted:    #5c4a1e;
    --pp-text-faint:    #9a8050;
    --pp-accent:        #1565c0;
    --pp-accent-2:      #0d47a1;
    --pp-accent-soft:   #e3f2fd;
    --pp-win:           #1b5e20;
    --pp-win-bg:        #e8f5e9;
    --pp-loss:          #b71c1c;
    --pp-loss-bg:       #ffebee;
    --pp-push:          #5c4a1e;
    --pp-push-bg:       #faf6e8;
    --pp-pending:       #e65100;
    --pp-pending-bg:    #fff3e0;
    --pp-void:          #4a148c;
    --pp-void-bg:       #f3e5f5;
    --pp-radius:        3px;
    --pp-radius-sm:     2px;
    --pp-shadow:        2px 2px 0 rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.08);
    --pp-shadow-hover:  3px 3px 0 rgba(21,101,192,.15), 0 2px 8px rgba(0,0,0,.1);
    --pp-shadow-card:   1px 1px 0 rgba(0,0,0,.06);
    --pp-stat-1:        linear-gradient(135deg,#1565c0,#0d47a1);
    --pp-stat-2:        linear-gradient(135deg,#e65100,#bf360c);
    --pp-stat-3:        linear-gradient(135deg,#1b5e20,#2e7d32);
    --pp-stat-4:        linear-gradient(135deg,#4a148c,#6a1b9a);
    --pp-stat-5:        linear-gradient(135deg,#b71c1c,#c62828);
    --pp-stat-6:        linear-gradient(135deg,#5c4a1e,#795548);
    --pp-stat-7:        linear-gradient(135deg,#0277bd,#01579b);
}
.predictions-plugin-wrap[data-theme="notebook"] {
    background-image:
        repeating-linear-gradient(transparent, transparent 27px, rgba(180,210,255,.35) 27px, rgba(180,210,255,.35) 28px);
    background-size: 100% 28px;
    background-attachment: local;
}
.predictions-plugin-wrap[data-theme="notebook"] .predictions-pick-card {
    border-left: 4px solid #ef9a9a !important;
    box-shadow: 2px 2px 0 rgba(0,0,0,.06) !important;
}
.predictions-plugin-wrap[data-theme="notebook"] .predictions-pick-card.result-win  { border-left-color: var(--pp-win) !important; }
.predictions-plugin-wrap[data-theme="notebook"] .predictions-pick-card.result-loss { border-left-color: var(--pp-loss) !important; }

/* ── Glass (legacy) ─────────────────────────────────────────── */
.predictions-plugin-wrap[data-theme="glass"] {
    --pp-bg:            transparent;
    --pp-bg-card:       rgba(255,255,255,.1);
    --pp-bg-card-hover: rgba(255,255,255,.18);
    --pp-border:        rgba(255,255,255,.18);
    --pp-border-strong: rgba(255,255,255,.3);
    --pp-text:          #ffffff;
    --pp-text-muted:    rgba(255,255,255,.7);
    --pp-text-faint:    rgba(255,255,255,.4);
    --pp-accent:        #c084fc;
    --pp-accent-2:      #a855f7;
    --pp-accent-soft:   rgba(192,132,252,.15);
    --pp-shadow:        0 4px 24px rgba(0,0,0,.25);
    --pp-shadow-hover:  0 8px 32px rgba(0,0,0,.35);
    background: linear-gradient(135deg,#1a1a2e 0%,#16213e 50%,#0f3460 100%);
    border-radius: var(--pp-radius);
    padding: 24px;
}
.predictions-plugin-wrap[data-theme="glass"] .predictions-pick-card {
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
}

/* ── Minimal (legacy) ───────────────────────────────────────── */
.predictions-plugin-wrap[data-theme="minimal"] {
    --pp-bg-card:      #ffffff;
    --pp-border:       #e5e7eb;
    --pp-radius:       6px;
    --pp-shadow:       none;
    --pp-shadow-hover: 0 1px 4px rgba(0,0,0,.1);
}

/* ── Gold Dark ─────────────────────────────────────────────────────────── */
.predictions-plugin-wrap[data-theme="gold-dark"] {
    --pp-bg:              #0a0900;
    --pp-bg-card:         #141200;
    --pp-bg-card-hover:   #1e1a00;
    --pp-bg-input:        #1a1700;
    --pp-border:          #2e2800;
    --pp-border-strong:   #4a3e00;
    --pp-text:            #f2e6b0;
    --pp-text-muted:      #b89a3a;
    --pp-text-faint:      #7a6520;
    --pp-accent:          #d4a017;
    --pp-accent-2:        #b8860b;
    --pp-accent-soft:     rgba(212,160,23,.12);
    --pp-accent-text:     #0a0900;
    --pp-win:             #22c55e;
    --pp-win-bg:          rgba(34,197,94,.12);
    --pp-loss:            #ef4444;
    --pp-loss-bg:         rgba(239,68,68,.12);
    --pp-push:            #d4a017;
    --pp-push-bg:         rgba(212,160,23,.10);
    --pp-pending:         #f59e0b;
    --pp-pending-bg:      rgba(245,158,11,.10);
    --pp-void:            #a78bfa;
    --pp-void-bg:         rgba(167,139,250,.10);
    --pp-radius:          14px;
    --pp-radius-sm:       8px;
    --pp-radius-xs:       6px;
    --pp-shadow:          0 2px 12px rgba(0,0,0,.5), 0 1px 4px rgba(0,0,0,.4);
    --pp-shadow-hover:    0 8px 32px rgba(0,0,0,.6), 0 0 20px rgba(212,160,23,.15);
    --pp-shadow-card:     0 1px 6px rgba(0,0,0,.4);
    --pp-glow:            0 0 24px rgba(212,160,23,.2);
    --pp-featured-ring:   0 0 0 2px var(--pp-accent), 0 0 16px rgba(212,160,23,.3);
}
.predictions-plugin-wrap[data-theme="gold-dark"] .predictions-pick-card:hover {
    box-shadow: var(--pp-shadow-hover);
    border-color: var(--pp-accent) !important;
}
.predictions-plugin-wrap[data-theme="gold-dark"] .predictions-pick-card.featured {
    border-color: var(--pp-accent) !important;
}

/* ═══════════════════════════════════════════════════════════
   RESET
   ═══════════════════════════════════════════════════════════ */
.predictions-plugin-wrap *, .predictions-plugin-wrap *::before, .predictions-plugin-wrap *::after { box-sizing: border-box; }

/* ═══════════════════════════════════════════════════════════
   FILTER BAR
   ═══════════════════════════════════════════════════════════ */
.predictions-filters {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
    padding: 20px 24px;
    background: var(--pp-bg-card);
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius);
    box-shadow: var(--pp-shadow);
}
.predictions-filter-main-row {
    display: flex; align-items: center; gap: 14px; width: 100%; flex-wrap: wrap;
}
.predictions-filter-group { display: flex; align-items: center; gap: 8px; }
.predictions-filter-group--search { flex: 1; min-width: 240px; }
.predictions-filter-search {
    width: 100%; padding: 10px 14px;
    border-radius: var(--pp-radius-sm);
    border: 1.5px solid var(--pp-border);
    background: var(--pp-bg-input);
    color: var(--pp-text); font-size: 14px; font-family: var(--pp-font);
    outline: none; transition: all var(--pp-transition);
}
.predictions-filter-search:focus {
    border-color: var(--pp-accent);
    box-shadow: 0 0 0 3px var(--pp-accent-soft);
}
.predictions-btn-advanced-toggle {
    padding: 10px 18px; border-radius: var(--pp-radius-sm);
    border: 1.5px solid var(--pp-border);
    background: var(--pp-bg); color: var(--pp-text);
    font-size: 13px; font-weight: 600; cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--pp-font); transition: all var(--pp-transition);
}
.predictions-btn-advanced-toggle:hover { border-color: var(--pp-accent); background: var(--pp-accent-soft); color: var(--pp-accent); }
.predictions-btn-advanced-toggle.active { background: var(--pp-accent); border-color: var(--pp-accent); color: var(--pp-accent-text); }
.predictions-filter-group--wrap {
    display: flex; align-items: center; gap: 12px; width: 100%;
    border-bottom: 1px solid var(--pp-border); padding-bottom: 12px;
}
.predictions-filter-group--wrap:last-of-type { border-bottom: none; padding-bottom: 0; }
.predictions-filter-label {
    font-size: 11px; font-weight: 700; color: var(--pp-text-faint);
    text-transform: uppercase; letter-spacing: .08em; min-width: 60px; flex-shrink: 0;
}
.pill-container { display: flex; gap: 8px; overflow-x: auto; width: 100%; padding: 2px 0; -webkit-overflow-scrolling: touch; }
.pill-container::-webkit-scrollbar { height: 4px; }
.pill-container::-webkit-scrollbar-track { background: transparent; }
.pill-container::-webkit-scrollbar-thumb { background: var(--pp-border); border-radius: 4px; }
.predictions-filter-pill {
    padding: 6px 16px; border-radius: 20px;
    border: 1.5px solid var(--pp-border);
    background: var(--pp-bg); color: var(--pp-text-muted);
    font-size: 13px; font-weight: 600; cursor: pointer;
    transition: all var(--pp-transition); font-family: var(--pp-font);
    white-space: nowrap; display: inline-flex; align-items: center; gap: 4px;
}
.predictions-filter-pill:hover { border-color: var(--pp-accent); color: var(--pp-accent); background: var(--pp-accent-soft); }
.predictions-filter-pill.active { background: var(--pp-accent); border-color: var(--pp-accent); color: var(--pp-accent-text); }
.predictions-advanced-filters-panel {
    background: var(--pp-bg-card-hover); border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius-sm); padding: 20px; margin-top: 8px; width: 100%;
    animation: pp-fade-in .2s ease both;
}
.advanced-filters-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 16px; }
.predictions-filter-select {
    width: 100%; padding: 8px 12px; border-radius: var(--pp-radius-sm);
    border: 1.5px solid var(--pp-border); background: var(--pp-bg-input);
    color: var(--pp-text); font-size: 13px; cursor: pointer;
    font-family: var(--pp-font); outline: none; transition: all var(--pp-transition);
}
.predictions-filter-select:focus { border-color: var(--pp-accent); }
.advanced-panel-actions {
    display: flex; justify-content: flex-end; margin-top: 16px;
    padding-top: 14px; border-top: 1px solid var(--pp-border);
}
.predictions-filter-clear {
    padding: 8px 18px; border-radius: var(--pp-radius-sm);
    border: 1.5px solid var(--pp-border); background: transparent;
    color: var(--pp-text-muted); font-size: 13px; font-weight: 600;
    cursor: pointer; font-family: var(--pp-font); transition: all var(--pp-transition);
}
.predictions-filter-clear:hover { border-color: var(--pp-loss); color: var(--pp-loss); background: var(--pp-loss-bg); }
.predictions-layout-btns { margin-left: auto; display: flex; gap: 6px; flex-shrink: 0; }
.predictions-layout-btn {
    width: 38px; height: 38px; border: 1.5px solid var(--pp-border);
    border-radius: var(--pp-radius-sm); background: var(--pp-bg); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: var(--pp-text-muted); transition: all var(--pp-transition); font-size: 16px;
}
.predictions-layout-btn:hover, .predictions-layout-btn.active { border-color: var(--pp-accent); color: var(--pp-accent); background: var(--pp-accent-soft); }

/* ═══════════════════════════════════════════════════════════
   GRID + LOADER
   ═══════════════════════════════════════════════════════════ */
.predictions-grid-container { position: relative; }
.predictions-grid-loader {
    position: absolute; inset: 0; background: rgba(255,255,255,.4);
    z-index: 100; display: flex; align-items: center; justify-content: center;
    border-radius: var(--pp-radius); backdrop-filter: blur(2px);
}
[data-theme="dark"] .predictions-grid-loader,
[data-theme="neon-onyx"] .predictions-grid-loader,
[data-theme="meridian-blue"] .predictions-grid-loader,
[data-theme="solar-dusk"] .predictions-grid-loader,
[data-theme="starry-night"] .predictions-grid-loader { background: rgba(0,0,0,.4); }
.pp-spinner {
    width: 44px; height: 44px;
    border: 4px solid var(--pp-border); border-top-color: var(--pp-accent);
    border-radius: 50%; animation: pp-spin .6s linear infinite;
}
.predictions-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
.predictions-grid[data-layout="grid-2"] { grid-template-columns: repeat(2,1fr); }
.predictions-grid[data-layout="grid-3"] { grid-template-columns: repeat(3,1fr); }
.predictions-grid[data-layout="list"]   { grid-template-columns: 1fr; }
@media (max-width: 768px) {
    .predictions-grid[data-layout="grid-2"],
    .predictions-grid[data-layout="grid-3"] { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════
   PICK CARD
   ═══════════════════════════════════════════════════════════ */
.predictions-pick-card {
    background: var(--pp-bg-card);
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius);
    padding: 20px;
    box-shadow: var(--pp-shadow);
    transition: box-shadow var(--pp-transition), transform var(--pp-transition), border-color var(--pp-transition);
    display: flex; flex-direction: column; gap: 12px;
    position: relative; overflow: hidden; cursor: default;
    animation: pp-fade-in .3s ease both;
}
.predictions-pick-card:hover {
    box-shadow: var(--pp-shadow-hover);
    transform: translateY(-2px);
    border-color: var(--pp-accent);
}
.predictions-pick-card.result-win   { border-left: 4px solid var(--pp-win); }
.predictions-pick-card.result-loss  { border-left: 4px solid var(--pp-loss); }
.predictions-pick-card.result-push  { border-left: 4px solid var(--pp-push); }
.predictions-pick-card.result-void  { border-left: 4px solid var(--pp-void); }
.predictions-pick-card.result-pending { border-left: 4px solid var(--pp-pending); }
.predictions-pick-card:nth-child(1) { animation-delay: .02s; }
.predictions-pick-card:nth-child(2) { animation-delay: .05s; }
.predictions-pick-card:nth-child(3) { animation-delay: .08s; }
.predictions-pick-card:nth-child(4) { animation-delay: .11s; }
.predictions-pick-card:nth-child(5) { animation-delay: .14s; }
.predictions-pick-card:nth-child(6) { animation-delay: .17s; }

/* List layout */
.predictions-grid[data-layout="list"] .predictions-pick-card {
    flex-direction: row; align-items: center; gap: 16px; padding: 14px 20px;
}
.predictions-grid[data-layout="list"] .predictions-pick-body { flex: 1; }
.predictions-grid[data-layout="list"] .predictions-pick-notes { display: none; }
.predictions-grid[data-layout="list"] .predictions-pick-meta { flex-direction: row; flex-wrap: wrap; gap: 8px; }

/* Card header */
.predictions-pick-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.predictions-pick-sport-badge {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 11px; font-weight: 700; color: var(--pp-accent);
    background: var(--pp-accent-soft); padding: 3px 10px; border-radius: 20px;
    text-transform: uppercase; letter-spacing: .05em; white-space: nowrap;
}
.predictions-pick-category {
    font-size: 11px; color: var(--pp-text-muted);
    background: var(--pp-bg-card-hover); padding: 2px 8px;
    border-radius: 20px; border: 1px solid var(--pp-border);
}
.predictions-pick-matchup {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.predictions-pick-team {
    font-size: 15px; font-weight: 700; color: var(--pp-text);
    text-align: center; flex: 1; line-height: 1.2;
}
.predictions-pick-vs {
    font-size: 11px; color: var(--pp-text-muted); font-weight: 600;
    text-transform: uppercase; letter-spacing: .1em; flex-shrink: 0;
    background: var(--pp-bg-card-hover); padding: 4px 8px;
    border-radius: 6px; border: 1px solid var(--pp-border);
}
.predictions-pick-team-sub { font-size: 11px; color: var(--pp-text-muted); font-weight: 400; }
.predictions-pick-detail-row {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 10px 12px; background: var(--pp-bg-card-hover);
    border-radius: var(--pp-radius-sm); border: 1px solid var(--pp-border);
}
.predictions-pick-on   { font-size: 14px; font-weight: 700; color: var(--pp-accent); }
.predictions-pick-line { font-size: 13px; color: var(--pp-text-muted); font-weight: 500; }
.predictions-pick-odds { margin-left: auto; font-size: 16px; font-weight: 800; color: var(--pp-text); }
.predictions-pick-units {
    font-size: 12px; color: var(--pp-text-muted); padding: 2px 8px;
    background: var(--pp-bg-card); border: 1px solid var(--pp-border);
    border-radius: 6px; font-weight: 600;
}
.predictions-pick-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.predictions-pick-date { font-size: 12px; color: var(--pp-text-muted); display: flex; align-items: center; gap: 4px; }
.predictions-pick-tags { display: flex; gap: 4px; flex-wrap: wrap; }
.predictions-pick-tag {
    font-size: 11px; color: var(--pp-text-muted);
    background: var(--pp-bg-card-hover); border: 1px solid var(--pp-border);
    border-radius: 20px; padding: 2px 8px;
}

/* Confidence */
.predictions-confidence {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 11px; font-weight: 700; border-radius: 6px; padding: 3px 8px; border: 1.5px solid;
}
.predictions-confidence.low    { color: var(--pp-badge-low);    border-color: var(--pp-badge-low);    background: rgba(148,163,184,.1); }
.predictions-confidence.medium { color: var(--pp-badge-medium); border-color: var(--pp-badge-medium); background: rgba(59,130,246,.08); }
.predictions-confidence.high   { color: var(--pp-badge-high);   border-color: var(--pp-badge-high);   background: rgba(245,158,11,.1); }
.predictions-confidence.max    { color: var(--pp-badge-max);    border-color: var(--pp-badge-max);    background: rgba(239,68,68,.1); }

/* Result badge */
.predictions-result-badge {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 12px; font-weight: 700; padding: 4px 12px; border-radius: 20px;
    border: 1.5px solid; letter-spacing: .03em; text-transform: uppercase; margin-left: auto;
}
.predictions-result-badge.win     { color: var(--pp-win);     border-color: var(--pp-win);     background: var(--pp-win-bg); }
.predictions-result-badge.loss    { color: var(--pp-loss);    border-color: var(--pp-loss);    background: var(--pp-loss-bg); }
.predictions-result-badge.push    { color: var(--pp-push);    border-color: var(--pp-push);    background: var(--pp-push-bg); }
.predictions-result-badge.pending { color: var(--pp-pending); border-color: var(--pp-pending); background: var(--pp-pending-bg); }
.predictions-result-badge.void    { color: var(--pp-void);    border-color: var(--pp-void);    background: var(--pp-void-bg); }
.predictions-result-score { font-size: 11px; color: var(--pp-text-muted); font-weight: 500; }

/* Notes */
.predictions-pick-notes {
    font-size: 13px; color: var(--pp-text-muted); line-height: 1.6;
    padding-top: 8px; border-top: 1px solid var(--pp-border);
}
.predictions-pick-notes-toggle {
    background: none; border: none; color: var(--pp-accent);
    font-size: 12px; font-weight: 600; cursor: pointer; padding: 0;
    font-family: var(--pp-font); text-decoration: underline;
}

/* ═══════════════════════════════════════════════════════════
   ROI WIDGET
   ═══════════════════════════════════════════════════════════ */
.predictions-roi-widget {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 12px; margin: 16px 0;
}
.predictions-roi-card {
    background: var(--pp-bg-card); border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius); padding: 16px 12px;
    text-align: center; box-shadow: var(--pp-shadow);
}
.predictions-roi-value  { font-size: 28px; font-weight: 800; color: var(--pp-text); display: block; }
.predictions-roi-value.positive { color: var(--pp-win); }
.predictions-roi-value.negative { color: var(--pp-loss); }
.predictions-roi-label  { font-size: 11px; color: var(--pp-text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; margin-top: 4px; display: block; }

/* ═══════════════════════════════════════════════════════════
   PAYWALL
   ═══════════════════════════════════════════════════════════ */
.predictions-paywall {
    text-align: center; padding: 40px 24px;
    background: var(--pp-bg-card); border: 1.5px dashed var(--pp-border);
    border-radius: var(--pp-radius); margin: 16px 0;
}
.predictions-paywall h3 { font-size: 18px; color: var(--pp-text); margin: 0 0 8px; }
.predictions-paywall p  { font-size: 14px; color: var(--pp-text-muted); margin: 0 0 20px; }
.predictions-paywall-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 12px 28px; background: var(--pp-accent); color: var(--pp-accent-text) !important;
    border-radius: var(--pp-radius-sm); font-size: 14px; font-weight: 700;
    text-decoration: none; transition: opacity var(--pp-transition), transform var(--pp-transition);
}
.predictions-paywall-btn:hover { opacity: .9; transform: translateY(-1px); text-decoration: none; }

/* ═══════════════════════════════════════════════════════════
   EMPTY STATE
   ═══════════════════════════════════════════════════════════ */
.predictions-empty { text-align: center; padding: 60px 24px; color: var(--pp-text-muted); }
.predictions-empty-icon { font-size: 48px; display: block; margin-bottom: 12px; opacity: .5; }

/* ═══════════════════════════════════════════════════════════
   PACKAGES / PRICING
   ═══════════════════════════════════════════════════════════ */
.predictions-packages-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px; margin: 16px 0;
}
.predictions-package-card {
    background: var(--pp-bg-card); border: 1.5px solid var(--pp-border);
    border-radius: var(--pp-radius); padding: 24px; box-shadow: var(--pp-shadow);
    display: flex; flex-direction: column; gap: 12px;
    transition: box-shadow var(--pp-transition), transform var(--pp-transition), border-color var(--pp-transition);
}
.predictions-package-card:hover { box-shadow: var(--pp-shadow-hover); transform: translateY(-3px); border-color: var(--pp-accent); }
.predictions-package-card.featured { border-color: var(--pp-accent); border-width: 2px; box-shadow: var(--pp-featured-ring); }
.predictions-package-name  { font-size: 18px; font-weight: 700; color: var(--pp-text); }
.predictions-package-price { font-size: 32px; font-weight: 800; color: var(--pp-accent); }
.predictions-price-interval { font-size: 14px; font-weight: 400; color: var(--pp-text-muted); }
.predictions-price-free { font-size: 24px; font-weight: 800; color: var(--pp-win); }
.predictions-package-desc  { font-size: 13px; color: var(--pp-text-muted); line-height: 1.5; }
.predictions-package-btn {
    display: block; text-align: center; padding: 12px;
    background: var(--pp-accent); color: var(--pp-accent-text) !important;
    border-radius: var(--pp-radius-sm); font-weight: 700; text-decoration: none;
    transition: opacity var(--pp-transition); margin-top: auto;
    font-family: var(--pp-font); border: none; cursor: pointer; font-size: 14px;
}
.predictions-package-btn:hover { opacity: .85; text-decoration: none; }

/* ── New package template overrides — inherit from wrap vars ── */
.pp-pricing-wrap { --pp-ac: var(--pp-accent); --pp-ac2: var(--pp-accent-2); }
.pp-btn-stripe, .pp-btn-fallback { background: var(--pp-accent) !important; color: var(--pp-accent-text) !important; }
.pp-btn-free, .pp-btn-view       { background: var(--pp-win) !important; color: #fff !important; }
.pp-btn-manage                   { background: var(--pp-text-muted) !important; color: #fff !important; }
.pp-btn-renew                    { background: var(--pp-accent) !important; color: var(--pp-accent-text) !important; }
.pp-card                         { background: var(--pp-bg-card) !important; border-color: var(--pp-border) !important; color: var(--pp-text); }
.pp-card.pp-featured             { box-shadow: var(--pp-featured-ring) !important; border-color: var(--pp-accent) !important; }
.pp-name                         { color: var(--pp-text); }
.pp-price                        { color: var(--pp-accent); }
.pp-desc                         { color: var(--pp-text-muted); }
.pp-features                     { color: var(--pp-text); }
.pp-features li::before          { color: var(--pp-accent); }

/* ═══════════════════════════════════════════════════════════
   PAGINATION
   ═══════════════════════════════════════════════════════════ */
.predictions-pagination { display: flex; justify-content: center; gap: 6px; margin-top: 24px; flex-wrap: wrap; }
.predictions-page-btn {
    padding: 7px 14px; border: 1.5px solid var(--pp-border);
    border-radius: var(--pp-radius-sm); background: var(--pp-bg-card);
    color: var(--pp-text); cursor: pointer; font-size: 13px; font-weight: 500;
    transition: all var(--pp-transition); font-family: var(--pp-font);
}
.predictions-page-btn:hover, .predictions-page-btn.active { background: var(--pp-accent); border-color: var(--pp-accent); color: var(--pp-accent-text); }
.predictions-page-btn:disabled { opacity: .4; cursor: not-allowed; }

/* ═══════════════════════════════════════════════════════════
   LOADING
   ═══════════════════════════════════════════════════════════ */
.predictions-loading { display: flex; justify-content: center; align-items: center; padding: 60px 24px; color: var(--pp-text-muted); gap: 10px; }
.predictions-spinner { width: 20px; height: 20px; border: 2.5px solid var(--pp-border); border-top-color: var(--pp-accent); border-radius: 50%; animation: pp-spin .6s linear infinite; }

/* ═══════════════════════════════════════════════════════════
   ANIMATIONS
   ═══════════════════════════════════════════════════════════ */
@keyframes pp-spin { to { transform: rotate(360deg); } }
@keyframes pp-fade-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce) {
    .predictions-pick-card { animation: none; transition: none; }
    .predictions-pick-card:hover { transform: none; }
}

/* ═══════════════════════════════════════════════════════════
   THEME SWITCHER DOTS
   ═══════════════════════════════════════════════════════════ */
.predictions-theme-switcher {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 16px; flex-wrap: wrap;
}
.predictions-theme-switcher-label {
    font-size: 11px; font-weight: 700; color: var(--pp-text-faint);
    text-transform: uppercase; letter-spacing: .08em; flex-shrink: 0;
}
.predictions-theme-switcher-dots {
    display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
}
.predictions-theme-btn {
    width: 22px; height: 22px; border-radius: 50%;
    border: 2px solid transparent; cursor: pointer;
    transition: transform var(--pp-transition), box-shadow var(--pp-transition), border-color var(--pp-transition);
    padding: 0; flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.predictions-theme-btn:hover {
    transform: scale(1.2);
    box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.predictions-theme-btn.active {
    border-color: #fff;
    box-shadow: 0 0 0 3px var(--dot-color, #e85500), 0 2px 8px rgba(0,0,0,.2);
    transform: scale(1.15);
}

/* ═══════════════════════════════════════════════════════════
   CAPPER DASHBOARD — token-based, works in any theme
   ═══════════════════════════════════════════════════════════ */
.predictions-plugin-wrap .predictions-capper {
    max-width: 100%;
    margin: 0;
    padding: 0;
    color: var(--pp-text);
}

.predictions-plugin-wrap .predictions-capper-section {
    background: var(--pp-bg-card);
    border: 1px solid var(--pp-border);
    box-shadow: var(--pp-shadow);
    color: var(--pp-text);
}
.predictions-plugin-wrap .predictions-capper-section-title { color: var(--pp-text); }
.predictions-plugin-wrap .predictions-capper-section-title::after { background: var(--pp-accent); }
.predictions-plugin-wrap .predictions-capper-section-header { border-bottom-color: var(--pp-border); }

.predictions-plugin-wrap .predictions-field label        { color: var(--pp-text-muted); }
.predictions-plugin-wrap .predictions-field input,
.predictions-plugin-wrap .predictions-field select,
.predictions-plugin-wrap .predictions-field textarea {
    border-color: var(--pp-border-strong);
    background: var(--pp-bg-input);
    color: var(--pp-text);
}
.predictions-plugin-wrap .predictions-field input:focus,
.predictions-plugin-wrap .predictions-field select:focus,
.predictions-plugin-wrap .predictions-field textarea:focus {
    border-color: var(--pp-accent);
    background: var(--pp-bg-card);
    box-shadow: 0 0 0 4px var(--pp-accent-soft);
}
.predictions-plugin-wrap .predictions-checkbox-group {
    background: var(--pp-bg-card-hover); border-color: var(--pp-border);
}
.predictions-plugin-wrap .predictions-checkbox-label { color: var(--pp-text); }
.predictions-plugin-wrap .predictions-checkbox-label input[type="checkbox"] { accent-color: var(--pp-accent); }

.predictions-plugin-wrap .predictions-btn--primary {
    background: linear-gradient(135deg, var(--pp-accent), var(--pp-accent-2));
    color: var(--pp-accent-text);
    box-shadow: 0 4px 12px var(--pp-accent-soft);
}
.predictions-plugin-wrap .predictions-btn--primary:hover:not(:disabled) {
    background: linear-gradient(135deg, var(--pp-accent-2), var(--pp-accent));
}
.predictions-plugin-wrap .predictions-btn--outline {
    background: var(--pp-bg-card); color: var(--pp-accent); border-color: var(--pp-border);
}
.predictions-plugin-wrap .predictions-btn--outline:hover:not(:disabled) {
    background: var(--pp-accent-soft); border-color: var(--pp-accent);
}
.predictions-plugin-wrap .predictions-btn--ghost { background: transparent; color: var(--pp-text-muted); border-color: var(--pp-border); }
.predictions-plugin-wrap .predictions-btn--ghost:hover:not(:disabled) { background: var(--pp-bg-card-hover); }
.predictions-plugin-wrap .predictions-btn--danger { background: var(--pp-bg-card); color: var(--pp-loss); border-color: var(--pp-loss-bg); }
.predictions-plugin-wrap .predictions-btn--danger:hover:not(:disabled) { background: var(--pp-loss-bg); border-color: var(--pp-loss); }

.predictions-plugin-wrap .predictions-capper-table th,
.predictions-plugin-wrap .predictions-capper-table td { border-bottom-color: var(--pp-border); }
.predictions-plugin-wrap .predictions-capper-table thead th { background: var(--pp-bg-card-hover); color: var(--pp-text-muted); border-bottom-color: var(--pp-border-strong); }
.predictions-plugin-wrap .predictions-capper-table tbody tr:hover { background: var(--pp-bg-card-hover); }
.predictions-plugin-wrap .predictions-table-wrap { border-color: var(--pp-border); }
.predictions-plugin-wrap .predictions-teams { color: var(--pp-text); }
.predictions-plugin-wrap .predictions-sport-badge { background: var(--pp-accent-soft); color: var(--pp-accent); }
.predictions-plugin-wrap .predictions-score { color: var(--pp-text-muted); }

.predictions-plugin-wrap .predictions-badge--win  { background: var(--pp-win-bg);     color: var(--pp-win);  border-color: var(--pp-win); }
.predictions-plugin-wrap .predictions-badge--loss { background: var(--pp-loss-bg);    color: var(--pp-loss); border-color: var(--pp-loss); }
.predictions-plugin-wrap .predictions-badge--push { background: var(--pp-push-bg);    color: var(--pp-push); border-color: var(--pp-push); }
.predictions-plugin-wrap .predictions-badge--void { background: var(--pp-void-bg);    color: var(--pp-void); border-color: var(--pp-void); }
.predictions-plugin-wrap .predictions-badge--pending { background: var(--pp-pending-bg); color: var(--pp-pending); border-color: var(--pp-pending); }

.predictions-plugin-wrap .predictions-grade-btn--win  { color: var(--pp-win);  border-color: var(--pp-win-bg);  background: var(--pp-bg-card); }
.predictions-plugin-wrap .predictions-grade-btn--win:hover:not(:disabled)  { background: var(--pp-win-bg);  border-color: var(--pp-win); }
.predictions-plugin-wrap .predictions-grade-btn--loss { color: var(--pp-loss); border-color: var(--pp-loss-bg); background: var(--pp-bg-card); }
.predictions-plugin-wrap .predictions-grade-btn--loss:hover:not(:disabled) { background: var(--pp-loss-bg); border-color: var(--pp-loss); }
.predictions-plugin-wrap .predictions-grade-btn--push { color: var(--pp-push); border-color: var(--pp-push-bg); background: var(--pp-bg-card); }
.predictions-plugin-wrap .predictions-grade-btn--push:hover:not(:disabled) { background: var(--pp-push-bg); border-color: var(--pp-push); }

.predictions-plugin-wrap .predictions-draft-status { color: var(--pp-text-muted); }
.predictions-plugin-wrap .predictions-field-hint   { color: var(--pp-text-faint); }

/* Stat cards inherit card background and border from theme */
.predictions-plugin-wrap .predictions-stat-card {
    background: var(--pp-bg-card);
    border: 1px solid var(--pp-border);
    box-shadow: var(--pp-shadow);
    color: var(--pp-text);
}
.predictions-plugin-wrap .predictions-stat-label { color: var(--pp-text-muted); }