:root {
    /* --- BASE COLORS --- */
    --bg-primary: #f3f4f6;
    --bg-secondary: #ffffff;
    --text-primary: #111827;
    --text-secondary: #4b5563;
    --text-muted: #9ca3af;
    --border-color: #e5e7eb;
    --card-bg: #ffffff;
    --glass-bg: rgba(255, 255, 255, 0.7);
    --glass-border: rgba(255, 255, 255, 0.5);

    /* --- UI ELEMENTS --- */
    --header-bg: rgba(79, 70, 229, 0.9);
    --sidebar-bg: #ffffff;
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

    /* --- WIDGET SPECIFIC --- */
    --widget-prize-glow: radial-gradient(circle, rgba(224, 231, 255, 0.4) 0%, rgba(255, 255, 255, 0) 70%);
    --widget-lottery-glow: radial-gradient(circle, rgba(254, 243, 199, 0.4) 0%, rgba(255, 255, 255, 0) 70%);
    --widget-amount-bg: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    --widget-lottery-header: #d97706;
    --widget-lottery-star-bg: linear-gradient(135deg, #fbbf24 0%, #d97706 100%);
    --widget-lottery-star-shadow: rgba(245, 158, 11, 0.3);
}

body.dark-mode {
    --bg-primary: #111827;
    --bg-secondary: #1f2937;
    --text-primary: #f9fafb;
    --text-secondary: #d1d5db;
    --text-muted: #9ca3af;
    --border-color: #374151;
    --card-bg: #1f2937;
    --glass-bg: rgba(31, 41, 55, 0.8);
    --glass-border: rgba(255, 255, 255, 0.1);

    --header-bg: #0f172a;
    --sidebar-bg: #1f2937;
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);

    /* --- WIDGET SPECIFIC DARK --- */
    --widget-prize-glow: radial-gradient(circle, rgba(79, 70, 229, 0.1) 0%, rgba(15, 23, 42, 0) 70%);
    --widget-lottery-glow: radial-gradient(circle, rgba(245, 158, 11, 0.1) 0%, rgba(15, 23, 42, 0) 70%);
    --widget-amount-bg: linear-gradient(135deg, #818cf8, #c7d2fe);
    --widget-lottery-header: #fbbf24;
    --widget-lottery-star-bg: linear-gradient(135deg, #fbbf24 0%, #d97706 100%);
    --widget-lottery-star-shadow: rgba(0, 0, 0, 0.5);
}

/* Global utility for using theme backgrounds */
body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    transition: background-color 0.3s, color 0.3s;
}

.glass {
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
}

.card,
.rules-section,
.mechanic-card,
.benefit-card {
    background-color: var(--card-bg) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

.winner-block,
.profile-header-card {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid var(--glass-border) !important;
    padding: 60px 30px 40px 30px !important;
    /* Increased top padding to clear badge/button */
    border-radius: 16px !important;
    text-align: center !important;
    position: relative !important;
    margin-bottom: 30px !important;
    box-shadow: var(--shadow-md) !important;
}

.edit-profile-btn {
    position: absolute !important;
    top: 15px !important;
    right: 15px !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid var(--border-color) !important;
    background: var(--bg-secondary) !important;
    color: var(--text-secondary) !important;
    cursor: pointer;
    z-index: 20;
}

.benefit-card p,
.how-step p {
    color: var(--text-secondary) !important;
}

.partner-how,
.partner-social-proof {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

.logo-placeholder {
    color: var(--text-muted) !important;
    border-color: var(--border-color) !important;
    background: var(--bg-primary) !important;
}

/* Fancy UI elements (Modals, Inputs) */
.fancy-modal {
    background-color: var(--card-bg) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
}

.fancy-input {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
}

.fancy-input:focus {
    background-color: var(--bg-secondary) !important;
    border-color: var(--color-primary) !important;
}

.social-input-group {
    background-color: var(--bg-primary) !important;
    border: 1px solid var(--border-color) !important;
}

.social-input-group .social-icon {
    color: var(--text-secondary) !important;
    border-right: 1px solid var(--border-color) !important;
}

.social-input-group input {
    color: var(--text-primary) !important;
    background: transparent !important;
}

.char-count-display {
    color: var(--text-muted) !important;
}

/* Helper for legacy elements */
.how-step span {
    background: var(--color-primary) !important;
    color: white !important;
}

/* Final touches for missing elements */
.profile-header,
.timeline-content,
.rule-item,
.no-winner-block {
    background-color: var(--card-bg) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

.timeline-content h3,
.winner-block-text h3,
.winner-block-text p,
.rule-item,
.rule-item i {
    color: inherit;
    /* Rely on parent .card style */
}

/* Ensure icons and specific text elements have correct colors */
.rule-item i {
    color: #10b981 !important;
    /* Keep green for success rules */
}

.rule-item.danger i {
    color: #ef4444 !important;
    /* Keep red for danger rules */
}

.timeline-content .step-time {
    background-color: var(--bg-primary) !important;
    color: var(--text-secondary) !important;
}

.article-carousel,
.carousel-img.clickable {
    background-color: var(--bg-primary) !important;
}

.winner-prize {
    background: rgba(99, 102, 241, 0.2) !important;
    color: var(--color-primary-light) !important;
}

body.dark-mode .profile-header-card h2,
body.dark-mode .winner-block-text h3 {
    color: var(--text-primary) !important;
}

body.dark-mode .profile-header-card p,
body.dark-mode .winner-block-text p {
    color: var(--text-secondary) !important;
}

/* Spotlight & Mission Adaptations */
body.dark-mode .spotlight-card {
    background: var(--glass-bg) !important;
    backdrop-filter: var(--glass-blur) !important;
    -webkit-backdrop-filter: var(--glass-blur) !important;
    border: var(--glass-border) !important;
    box-shadow: var(--shadow-lg) !important;
}

body.dark-mode .spotlight-title {
    color: var(--text-primary) !important;
}

body.dark-mode .spotlight-meta {
    color: var(--text-secondary) !important;
}

body.dark-mode .mission-card {
    background: var(--glass-bg) !important;
    backdrop-filter: var(--glass-blur) !important;
    -webkit-backdrop-filter: var(--glass-blur) !important;
    border: var(--glass-border) !important;
    box-shadow: var(--shadow-lg) !important;
}

body.dark-mode .mission-header span:first-child {
    color: var(--text-primary) !important;
}

body.dark-mode .mission-count {
    background: rgba(79, 70, 229, 0.2) !important;
    color: #818cf8 !important;
    border-color: rgba(129, 140, 248, 0.3) !important;
}

body.dark-mode .mission-bar-bg {
    background: rgba(255, 255, 255, 0.05) !important;
}

body.dark-mode .mission-text {
    color: var(--text-secondary) !important;
}

body.dark-mode .mission-card.completed {
    background: linear-gradient(180deg, rgba(22, 163, 74, 0.1) 0%, rgba(20, 83, 45, 0.2) 100%) !important;
    border-color: rgba(34, 197, 94, 0.4) !important;
}

body.dark-mode #mission-sticky-wrapper {
    background: var(--glass-bg) !important;
    backdrop-filter: var(--glass-blur) !important;
    -webkit-backdrop-filter: var(--glass-blur) !important;
    border: var(--glass-border) !important;
    box-shadow: var(--shadow-lg) !important;
}

body.dark-mode #mission-sticky-wrapper span,
body.dark-mode #mission-sticky-wrapper i {
    color: var(--text-primary) !important;
}

/* User Requested Golden Prize Overrides */
body.dark-mode .widget-lottery {
    background: var(--glass-bg) !important;
    border-color: var(--glass-border) !important;
    box-shadow: var(--shadow-lg) !important;
}

body.dark-mode .lottery-header {
    color: var(--widget-lottery-header) !important;
}

body.dark-mode .lottery-amount {
    background: var(--widget-amount-bg) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
}

body.dark-mode .lottery-desc {
    color: var(--text-secondary) !important;
}

body.dark-mode .lottery-star-icon {
    box-shadow: 0 2px 5px var(--widget-lottery-star-shadow) !important;
}

/* Publish Page Dark Mode Overrides */
body.dark-mode .week-selector-title {
    color: var(--text-primary) !important;
}

body.dark-mode .week-option-card {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

body.dark-mode .week-option-card.active {
    background: rgba(79, 70, 229, 0.1) !important;
    border-color: var(--color-primary) !important;
}

body.dark-mode .week-option-label {
    color: var(--text-primary) !important;
}

body.dark-mode .week-option-desc {
    color: var(--text-secondary) !important;
}

body.dark-mode .inspiration-card {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

body.dark-mode .inspi-content h4 {
    color: var(--text-primary) !important;
}

body.dark-mode .inspi-tag {
    background: var(--bg-primary) !important;
    color: var(--text-secondary) !important;
    border-color: var(--border-color) !important;
}

body.dark-mode .inspi-tag:hover,
body.dark-mode .inspi-tag.active {
    background: rgba(79, 70, 229, 0.2) !important;
    border-color: var(--color-primary) !important;
}

body.dark-mode .reddit-section {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

body.dark-mode .section-header .section-label {
    color: var(--text-muted) !important;
}

body.dark-mode .reddit-subtitle-input,
body.dark-mode .reddit-textarea {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

body.dark-mode .reddit-upload-zone {
    background: var(--bg-primary) !important;
    border-color: var(--border-color) !important;
}

body.dark-mode .upload-label {
    color: #ffffff !important;
}

body.dark-mode .upload-icon-circle {
    background: rgba(79, 70, 229, 0.2) !important;
    color: #fff !important;
}

body.dark-mode .image-count {
    color: var(--text-muted) !important;
}

body.dark-mode textarea#title {
    background: transparent !important;
    color: var(--text-primary) !important;
    border-bottom-color: var(--border-color) !important;
}

/* body.dark-mode .community-selector {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
} */

body.dark-mode .community-selector select {
    color: var(--text-primary) !important;
    background: var(--bg-secondary) !important;
}

body.dark-mode .community-selector i {
    color: var(--text-secondary) !important;
}
body.dark-mode .community-selector select option {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}