/* ==========================================================================
   2026 FINANCIAL REPORT STYLE - FINAL VERSION
   ========================================================================== */

/* --- 1. MAIN CONTAINERS --- */
.content-section {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    margin-bottom: 30px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
    overflow: hidden;
    position: relative;
}

.section-content {
    padding: 25px;
    font-size: 16px;
    line-height: 1.7;
    color: #334155; /* Softer Dark Gray */
}

.section-content p {
    margin-top: 0;
    margin-bottom: 20px;
}

/* --- 2. HEADERS & TITLES --- */
.section-header {
    padding: 20px 25px;
    border-bottom: 1px solid #f1f5f9;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
}

.section-title {
    font-family: 'Outfit', sans-serif;
    font-size: 20px;
    font-weight: 800;
    color: #0f172a; /* Dark Navy */
    margin: 0;
}

.pg-edit-btn {
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pg-edit-btn:hover {
    background: #e2e8f0;
    color: #0f172a;
}

/* --- 3. MODERN DATA LISTS (Anti-Footprint Rows) --- */
.fin-data-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 25px;
}

.fin-data-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.fin-data-row:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
    transform: translateX(4px);
}

.fin-data-label {
    color: #64748b;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
}

.fin-data-label i {
    color: #10b981; /* Emerald Green */
    font-size: 16px;
    width: 20px;
    text-align: center;
}

.fin-data-value {
    color: #0f172a;
    font-size: 15px;
    font-weight: 700;
    text-align: right;
}

.fin-data-value a {
    color: #3b82f6;
    text-decoration: none;
}
.fin-data-value a:hover { text-decoration: underline; }

/* --- 4. TRADITIONAL DATA TABLES --- */
.data-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
}

.data-table th, 
.data-table td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #f1f5f9;
    font-size: 14px;
}

.data-table th {
    background-color: #f8fafc;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    font-size: 11px;
}

.data-table td:first-child {
    font-weight: 600;
    color: #475569;
    width: 30%;
}

.data-table i {
    margin-right: 10px;
    color: #94a3b8;
    width: 16px;
    text-align: center;
}

.table-image.is-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

/* Comparison Specifics */
.comparison-table {
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    border-collapse: separate;
    border-spacing: 0;
}
.comparison-table th { background: #0f172a; color: #fff; padding: 15px; font-size: 14px;}
.comparison-table td { padding: 15px; border-bottom: 1px solid #f1f5f9; background: #fff; }

/* --- 5. EXECUTIVE INDEX (TOC) --- */
.exec-index-wrapper {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-left: 4px solid #10B981; /* Green accent */
    border-radius: 8px;
    margin: 30px 0;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
    overflow: hidden;
}

.exec-index-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    cursor: pointer;
    background: #f8fafc;
    user-select: none;
}

.exec-index-title {
    font-family: inherit; /* Inherits font-secondary if set globally */
    font-size: 16px;
    font-weight: 700;
    color: #0F172A;
    margin: 0;
}

.exec-index-title i { color: #10B981; margin-right: 8px; }

.exec-index-toggle {
    background: transparent;
    border: none;
    color: #64748B;
    cursor: pointer;
    transition: transform 0.3s ease;
}
.exec-index-wrapper.is-open .exec-index-toggle { transform: rotate(180deg); }

.exec-index-body {
    padding: 15px 20px 20px 20px;
    border-top: 1px solid #e2e8f0;
}

.exec-index-list { list-style: none; padding: 0; margin: 0; }
.exec-index-list li { margin-bottom: 10px; }
.exec-index-list li a {
    color: #334155;
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    transition: 0.2s;
}
.exec-index-list li a:hover { color: #10B981; padding-left: 5px; }
.exec-sub-list { padding-left: 20px; margin-top: 8px; border-left: 1px dashed #cbd5e1; }

/* --- 6. MEDIA GRIDS (Gallery & Filmography) --- */
.media-grid, 
.photo-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 15px;
}

.media-item-card {
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    background: #fff;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.media-item-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}

.media-item-title { font-size: 14px; font-weight: 600; padding: 8px 10px 0; }
.media-item-meta { font-size: 11px; color: #64748b; padding: 0 10px 10px; }

/* --- 7. FAQ COMPONENT --- */
.faq-list { display: flex; flex-direction: column; gap: 10px; }
.faq-item { border: 1px solid #e2e8f0; border-radius: 10px; overflow: hidden; background: #fff; }

.faq-question {
    width: 100%;
    background: #f8fafc;
    border: none;
    text-align: left;
    padding: 15px 20px;
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.faq-answer {
    display: none; /* JS will toggle this */
    padding: 20px;
    border-top: 1px solid #e2e8f0;
    line-height: 1.7;
    color: #334155;
}

/* --- 8. VISUAL EXTRAS (Graph & Timeline) --- */
.graph-container {
    position: relative;
    height: 300px;
    margin-top: 20px;
    background: #f8fafc;
    padding: 15px;
    border-radius: 12px;
}

.milestones-timeline {
    padding: 20px;
    background: #f8fafc;
    border-radius: 12px;
    margin-top: 15px;
}

.milestone-item {
    display: flex;
    gap: 20px;
    padding-bottom: 20px;
    border-left: 2px solid #10b981;
    padding-left: 20px;
    position: relative;
}

.milestone-item:last-child { border-left: 2px solid transparent; }

.milestone-item::before {
    content: '';
    position: absolute;
    left: -9px;
    top: 0;
    width: 16px;
    height: 16px;
    background: #10b981;
    border-radius: 50%;
    border: 3px solid #f8fafc; /* Adds a ring effect */
}

/* --- 9. RESPONSIVENESS --- */
@media (max-width: 600px) {
    /* Stack Data Rows */
    .fin-data-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
    .fin-data-value {
        text-align: left;
        padding-left: 30px; /* Align with text, not icon */
        width: 100%;
    }
    
    /* Adjust Tables */
    .data-table th, .data-table td {
        padding: 10px;
        font-size: 13px;
    }
    
    /* Adjust Header */
    .section-header {
        padding: 15px;
    }
}

/* --- LEGACY CALCULATOR --- */
.calc-box-wrapper {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 30px;
    text-align: center;
}
.calc-icon { font-size: 32px; color: #0f172a; margin-bottom: 10px; }
.calc-heading { font-size: 20px; font-weight: 800; color: #0f172a; margin: 0 0 10px 0; }
.calc-desc { font-size: 14px; color: #64748b; margin-bottom: 20px; line-height: 1.5; }

.calc-input-group {
    display: flex;
    max-width: 400px;
    margin: 0 auto;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    overflow: hidden;
}
.currency-symbol { background: #f1f5f9; padding: 10px 15px; color: #64748b; font-weight: 600; }
#user-annual-salary { border: none; padding: 10px; width: 100%; outline: none; }
#btn-calc-legacy {
    background: #0f172a; color: #fff; border: none; padding: 0 20px; font-weight: 700; cursor: pointer;
}
#legacy-result-area { margin-top: 20px; border-top: 1px dashed #e2e8f0; padding-top: 20px; }
.result-years { font-size: 32px; font-weight: 900; color: #10b981; }

/* --- RELATED FINANCIAL PROFILES --- */
.related-finance-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
}
.rel-fin-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border: 1px solid #e2e8f0;
    padding: 12px;
    border-radius: 8px;
    text-decoration: none;
    transition: 0.2s;
}
.rel-fin-card:hover { border-color: #10b981; transform: translateY(-2px); }
.rel-fin-img img { width: 50px; height: 50px; border-radius: 6px; object-fit: cover; }
.rel-fin-prof { font-size: 10px; text-transform: uppercase; color: #94a3b8; font-weight: 700; }
.rel-fin-name { margin: 2px 0; font-size: 14px; color: #0f172a; font-weight: 700; }
.rel-fin-nw { font-size: 11px; color: #64748b; }
.rel-fin-nw strong { color: #10b981; }

/* --- PORTFOLIO LIST --- */
.portfolio-grid { border: 1px solid #e2e8f0; border-radius: 8px; overflow: hidden; }
.port-header, .port-row {
    display: grid;
    grid-template-columns: 60px 2fr 1fr;
    padding: 12px 15px;
    gap: 10px;
    border-bottom: 1px solid #f1f5f9;
}
.port-header { background: #f8fafc; font-weight: 700; color: #0f172a; font-size: 13px; }
.port-row:last-child { border-bottom: none; }
.port-year { color: #10b981; font-weight: 700; }
.port-title { font-weight: 600; color: #334155; }
.port-role { font-size: 13px; color: #64748b; }

/* --- PROFESSIONAL LIST (TRIVIA) --- */
.professional-list { list-style: none; padding: 0; margin: 0; }
.professional-list li {
    padding: 10px 0;
    border-bottom: 1px solid #f1f5f9;
    color: #334155;
    font-size: 15px;
}
.professional-list li i { color: #10b981; margin-right: 8px; }

/* --- CLEAN ACCORDION (FAQ) --- */
.acc-item { border: 1px solid #e2e8f0; border-radius: 8px; margin-bottom: 10px; }
.acc-trigger {
    padding: 15px; cursor: pointer; font-weight: 600; color: #0f172a;
    display: flex; justify-content: space-between; align-items: center;
    list-style: none;
}
.acc-trigger::-webkit-details-marker { display: none; }
.acc-content { padding: 0 15px 15px; color: #475569; line-height: 1.6; }
.acc-item[open] .acc-trigger { border-bottom: 1px solid #f1f5f9; background: #f8fafc; }
/* ============================================================
   SINGLE CELEBRITY SECTIONS CSS (No Pink, Only Blue/Dark)
   ============================================================ */
.content-section { background: #fff; border: 1px solid #E2E8F0; border-radius: 16px; margin-bottom: 30px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.02); }
.section-header { padding: 20px 25px; border-bottom: 1px solid #F1F5F9; background: #F8FAFC; }
.section-title { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 22px; font-weight: 800; color: #0F172A; margin: 0; }
.section-content { padding: 25px; }
.sub-heading { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 18px; margin: 30px 0 15px; color: #0F172A; }
.text-blue { color: #3B82F6 !important; }

/* Tables */
.data-table { width: 100%; border-collapse: collapse; }
.data-table th { text-align: left; padding: 12px; background: #F1F5F9; color: #64748B; font-size: 12px; text-transform: uppercase; }
.data-table td { padding: 15px 12px; border-bottom: 1px solid #F1F5F9; color: #334155; font-size: 15px; }
.data-table td:first-child { width: 40%; }

/* =============================================================
   PEER COMPARISON SECTION (Blue & Green Theme)
   ============================================================= */

.cw-peer-track-wrap {
    position: relative;
    width: 100%;
}

/* ── Grid layout (Desktop) ── */
@media (min-width: 768px) {
    .cw-peer-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
        flex-wrap: unset !important;
    }
    .cw-peer-item {
        width: auto !important;
        margin: 0 !important;
    }
    .cw-peer-dots {
        display: none;
    }
}

/* ── Card Design ── */
.cw-peer-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 25px 20px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    height: 100%;
}

.cw-peer-card:hover {
    border-color: #3B82F6; /* Theme Blue */
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(59, 130, 246, 0.1);
}

/* ── VS Badge ── */
.cw-peer-vs {
    position: absolute;
    top: 12px;
    right: 12px;
    background: #f1f5f9;
    color: #64748b;
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
    padding: 4px 8px;
    border-radius: 6px;
}

/* ── Avatar ── */
.cw-peer-avatar-wrap {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #f8fafc;
    flex-shrink: 0;
    transition: border-color 0.3s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.cw-peer-card:hover .cw-peer-avatar-wrap {
    border-color: #10B981; /* Theme Green */
}

.cw-peer-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ── Info Block ── */
.cw-peer-info {
    text-align: center;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.cw-peer-name {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 17px;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 4px;
    line-height: 1.2;
}

.cw-peer-prof {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    display: block;
}

.cw-peer-nw {
    font-family: 'JetBrains Mono', monospace;
    font-size: 15px;
    font-weight: 800;
    color: #10B981; /* Theme Green */
}

/* ── CTA Button ── */
.cw-peer-cta {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: #3B82F6; /* Theme Blue */
    background: #eff6ff;
    padding: 6px 16px;
    border-radius: 20px;
    transition: all 0.3s ease;
    margin-top: 5px;
}

.cw-peer-card:hover .cw-peer-cta {
    background: #3B82F6;
    color: #ffffff;
}

/* ── Swiper Dots (Mobile) ── */
.cw-peer-dots {
    margin-top: 15px !important;
    position: static !important;
}
.cw-peer-dots .swiper-pagination-bullet {
    background: #cbd5e1;
    opacity: 1;
}
.cw-peer-dots .swiper-pagination-bullet-active {
    background: #3B82F6;
    transform: scaleX(2);
    border-radius: 4px;
}

/* Calculator */
.calc-box { background: #0F172A; color: #fff; padding: 30px; border-radius: 12px; text-align: center; }
.calc-icon { font-size: 32px; margin-bottom: 15px; }
.calc-input-row { display: flex; max-width: 400px; margin: 20px auto; background: #1E293B; border-radius: 8px; padding: 5px; border: 1px solid #334155; }
.calc-input-row .currency { padding: 10px 15px; color: #94A3B8; }
.calc-input-row input { flex: 1; background: transparent; border: none; color: #fff; outline: none; font-size: 16px; }
#btn-calculate { background: #3B82F6; color: #fff; border: none; padding: 0 20px; border-radius: 6px; font-weight: bold; cursor: pointer; }
#calc-result { margin-top: 20px; font-size: 16px; padding-top: 20px; border-top: 1px dashed #334155; }
#calc-years { font-size: 24px; }

/* Timeline */
.timeline-wrapper { border-left: 2px solid #E2E8F0; padding-left: 20px; margin-left: 10px; }
.timeline-item { position: relative; margin-bottom: 20px; }
.time-dot { position: absolute; left: -27px; top: 5px; width: 12px; height: 12px; background: #3B82F6; border-radius: 50%; border: 3px solid #fff; }
.time-year { font-weight: 800; color: #0F172A; font-size: 14px; margin-bottom: 5px; }
.time-desc { color: #64748B; font-size: 15px; line-height: 1.5; }

/* ============================================================
   DATA LISTS & TRIVIA STYLES
   ============================================================ */
.fin-data-list { display: flex; flex-direction: column; gap: 10px; }
.fin-data-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 15px 20px; background: #F8FAFC; border: 1px solid #E2E8F0;
    border-radius: 12px; transition: 0.2s;
}
.fin-data-row:hover { background: #fff; border-color: #CBD5E1; transform: translateX(5px); box-shadow: 0 4px 10px rgba(0,0,0,0.02); }
.fin-data-label { font-size: 14px; font-weight: 700; color: #64748B; display: flex; align-items: center; gap: 10px; }
.fin-data-label i { width: 20px; text-align: center; }
.fin-data-value { font-size: 15px; font-weight: 700; color: #0F172A; text-align: right; }

/* Trivia List */
.trivia-list-modern { list-style: none; padding: 0; margin: 0; }
.trivia-list-modern li {
    display: flex; align-items: flex-start; gap: 15px;
    padding: 15px 0; border-bottom: 1px solid #F1F5F9;
    font-size: 16px; color: #334155; line-height: 1.6;
}
.trivia-list-modern li:last-child { border-bottom: none; }
.trivia-list-modern li i { margin-top: 4px; font-size: 18px; }

/* Smart Paragraphs Text */
.smart-paragraphs p { font-size: 16px; line-height: 1.8; color: #334155; margin-bottom: 15px; }

/* Mobile */
@media (max-width: 768px) {
    .fin-data-row { flex-direction: column; align-items: flex-start; gap: 5px; }
    .fin-data-value { text-align: left; padding-left: 30px; }
}

/* --- News List --- */
.news-list-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.news-item { display: flex; align-items: center; gap: 15px; text-decoration: none; color: #0F172A; transition: 0.2s; padding: 10px; border-radius: 12px; border: 1px solid transparent; }
.news-item:hover { border-color: #E2E8F0; background: #F8FAFC; }
.news-thumb img { width: 60px; height: 60px; border-radius: 8px; object-fit: cover; }
.news-info h4 { margin: 0 0 5px 0; font-size: 15px; font-weight: 700; line-height: 1.3; }
.news-date { font-size: 12px; color: #94A3B8; }

/* --- Gallery Grid --- */
.gallery-grid-modern { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 10px; }
.gallery-thumb img { width: 100%; height: 100px; object-fit: cover; border-radius: 8px; transition: 0.2s; }
.gallery-thumb:hover img { transform: scale(1.05); filter: brightness(1.1); }

/* --- FAQ Accordion --- */
.clean-accordion .acc-item { border-bottom: 1px solid #F1F5F9; }
.acc-trigger { list-style: none; padding: 15px 0; font-weight: 700; cursor: pointer; display: flex; justify-content: space-between; align-items: center; color: #0F172A; }
.acc-trigger::-webkit-details-marker { display: none; }
.acc-trigger .icon { color: #3B82F6; font-size: 12px; transition: 0.3s; }
.acc-item[open] .acc-trigger .icon { transform: rotate(180deg); }
.acc-content { padding-bottom: 15px; color: #334155; line-height: 1.6; font-size: 15px; }

/* --- Related Cards --- */
.related-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; }
.related-card { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid #E2E8F0; border-radius: 12px; text-decoration: none; transition: 0.2s; }
.related-card:hover { border-color: #3B82F6; box-shadow: 0 4px 10px rgba(0,0,0,0.05); }
.related-img img { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; }
.related-info h4 { margin: 0; font-size: 14px; color: #0F172A; }
.related-info span { font-size: 12px; color: #10B981; font-weight: 700; }

/* Mobile */
@media (max-width: 768px) {
    .news-list-grid, .related-grid { grid-template-columns: 1fr; }
}

/* --- Disclaimer Box (Improved) --- */
.pg-disclaimer-box {
    display: flex; align-items: center; gap: 15px;
    background: #FFFBEB; /* Light Yellow Alert */
    border: 1px solid #FCD34D;
    padding: 15px 20px;
    border-radius: 8px;
    margin-top: 30px;
    font-size: 13px;
    color: #92400E;
}
.disc-icon { font-size: 20px; color: #F59E0B; }
.disc-text a { color: #B45309; text-decoration: underline; font-weight: 700; }

/* --- Global Color Fix (No Pink) --- */
.text-green { color: #10B981 !important; }
.btn-engagement { background-color: #3B82F6 !important; } /* Blue Button */
.btn-engagement:hover { background-color: #2563EB !important; }

/* Graph Container */
.graph-container { background: #fff !important; }


/* =============================================================
   WEALTH REALITY ENGINE (WRE) — v2.0
   Appended to: assets/css/content-sections.css
   
   Design: Dark fintech dashboard · Blue + Green palette
   Fonts:  Plus Jakarta Sans (headings) · JetBrains Mono (numbers)
   CWV:    contain:layout style · will-change only on animated els
   ============================================================= */

/* ── 0. TOKENS ────────────────────────────────────────────── */
.wre-root {
    --wre-blue:        #3B82F6;
    --wre-blue-dark:   #2563EB;
    --wre-blue-glow:   rgba(59,130,246,.18);
    --wre-green:       #10B981;
    --wre-green-dark:  #059669;
    --wre-green-glow:  rgba(16,185,129,.18);
    --wre-bg:          #0D1B2A;
    --wre-surface:     #132136;
    --wre-surface-2:   #1A2E47;
    --wre-border:      rgba(255,255,255,.08);
    --wre-text:        #E2E8F0;
    --wre-muted:       #64748B;
    --wre-amber:       #F59E0B;
    --wre-radius:      14px;
    --wre-radius-sm:   8px;
    --wre-font-head:   'Plus Jakarta Sans', system-ui, sans-serif;
    --wre-font-mono:   'JetBrains Mono', 'Fira Code', monospace;
    --wre-transition:  220ms cubic-bezier(.4,0,.2,1);
    contain: layout style;
}

/* ── 1. ROOT WRAPPER ──────────────────────────────────────── */
.wre-root {
    background:    var(--wre-bg);
    border-radius: var(--wre-radius);
    overflow:      hidden;
    color:         var(--wre-text);
    font-family:   var(--wre-font-head);
}

/* Section badge */
.wre-badge {
    background:    var(--wre-blue-glow);
    color:         var(--wre-blue);
    font-size:     11px;
    font-weight:   700;
    letter-spacing:.06em;
    text-transform: uppercase;
    padding:       4px 10px;
    border-radius: 20px;
    border:        1px solid rgba(59,130,246,.3);
}
.wre-title-icon {
    color:        var(--wre-green);
    margin-right: 8px;
    font-size:    18px;
}

/* ── 2. INPUT PANEL ───────────────────────────────────────── */
.wre-input-panel {
    padding: 28px 28px 24px;
}

/* Intro row */
.wre-intro {
    display:        flex;
    align-items:    center;
    gap:            14px;
    margin-bottom:  24px;
    padding:        16px 18px;
    background:     var(--wre-surface);
    border-radius:  var(--wre-radius-sm);
    border:         1px solid var(--wre-border);
}
.wre-intro-avatar {
    width:           46px;
    height:          46px;
    flex-shrink:     0;
    background:      var(--wre-blue-glow);
    border-radius:   50%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       20px;
    color:           var(--wre-blue);
}
.wre-intro-text {
    display:     flex;
    flex-direction: column;
    gap:         3px;
}
.wre-intro-text strong {
    font-size:   15px;
    font-weight: 700;
    color:       #fff;
}
.wre-intro-text span {
    font-size:  13px;
    color:      var(--wre-muted);
    line-height:1.4;
}

/* Field group */
.wre-field-group { margin-bottom: 20px; }
.wre-field-label {
    display:      block;
    font-size:    12px;
    font-weight:  700;
    color:        var(--wre-muted);
    text-transform: uppercase;
    letter-spacing: .07em;
    margin-bottom: 10px;
}

/* Input wrap */
.wre-input-wrap {
    display:        flex;
    align-items:    center;
    background:     var(--wre-surface);
    border:         1.5px solid var(--wre-border);
    border-radius:  var(--wre-radius-sm);
    overflow:       hidden;
    margin-bottom:  14px;
    transition:     border-color var(--wre-transition);
}
.wre-input-wrap:focus-within {
    border-color: var(--wre-blue);
    box-shadow:   0 0 0 3px var(--wre-blue-glow);
}
.wre-prefix {
    padding:    0 16px;
    font-size:  22px;
    font-weight: 800;
    color:      var(--wre-green);
    background: rgba(16,185,129,.08);
    align-self: stretch;
    display:    flex;
    align-items: center;
    border-right: 1px solid var(--wre-border);
}
.wre-salary-input {
    flex:           1;
    background:     transparent;
    border:         none;
    outline:        none;
    color:          #fff;
    font-size:      22px;
    font-family:    var(--wre-font-mono);
    font-weight:    700;
    padding:        14px 12px;
    min-width:      0;
    /* Remove spinner arrows */
    -moz-appearance: textfield;
}
.wre-salary-input::-webkit-outer-spin-button,
.wre-salary-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.wre-input-live {
    padding:    0 14px;
    font-size:  12px;
    color:      var(--wre-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

/* Slider */
.wre-slider {
    width:         100%;
    height:        6px;
    -webkit-appearance: none;
    appearance:    none;
    background:    var(--wre-surface-2);
    border-radius: 10px;
    outline:       none;
    cursor:        pointer;
    margin-bottom: 6px;
    accent-color:  var(--wre-blue);
}
.wre-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width:          20px;
    height:         20px;
    background:     var(--wre-blue);
    border-radius:  50%;
    border:         3px solid #0D1B2A;
    box-shadow:     0 0 0 2px var(--wre-blue);
    cursor:         pointer;
    will-change:    transform;
    transition:     transform var(--wre-transition);
}
.wre-slider::-webkit-slider-thumb:hover { transform: scale(1.2); }
.wre-slider::-moz-range-thumb {
    width:          18px;
    height:         18px;
    background:     var(--wre-blue);
    border-radius:  50%;
    border:         3px solid #0D1B2A;
    cursor:         pointer;
}
.wre-slider-ticks {
    display:         flex;
    justify-content: space-between;
    font-size:       11px;
    color:           var(--wre-muted);
    margin-bottom:   18px;
}

/* Presets */
.wre-presets {
    display:     flex;
    align-items: center;
    gap:         8px;
    flex-wrap:   wrap;
    margin-bottom: 22px;
}
.wre-presets-label {
    font-size:  12px;
    color:      var(--wre-muted);
    flex-shrink: 0;
}
.wre-preset-btn {
    background:    var(--wre-surface);
    border:        1px solid var(--wre-border);
    color:         var(--wre-text);
    font-family:   var(--wre-font-head);
    font-size:     12px;
    font-weight:   600;
    padding:       5px 13px;
    border-radius: 20px;
    cursor:        pointer;
    transition:    background var(--wre-transition), border-color var(--wre-transition), color var(--wre-transition);
}
.wre-preset-btn:hover,
.wre-preset-btn.active {
    background:   var(--wre-blue-glow);
    border-color: var(--wre-blue);
    color:        var(--wre-blue);
}

/* CTA button */
.wre-cta-btn {
    width:          100%;
    background:     linear-gradient(135deg, var(--wre-blue) 0%, var(--wre-blue-dark) 100%);
    color:          #fff;
    border:         none;
    border-radius:  var(--wre-radius-sm);
    font-family:    var(--wre-font-head);
    font-size:      16px;
    font-weight:    800;
    padding:        16px;
    cursor:         pointer;
    display:        flex;
    align-items:    center;
    justify-content: center;
    gap:            10px;
    will-change:    transform, box-shadow;
    transition:     transform var(--wre-transition), box-shadow var(--wre-transition);
    letter-spacing: .01em;
}
.wre-cta-btn:hover {
    transform:  translateY(-2px);
    box-shadow: 0 12px 28px rgba(59,130,246,.35);
}
.wre-cta-btn:active { transform: translateY(0); }

.wre-disclaimer-note {
    text-align: center;
    font-size:  12px;
    color:      var(--wre-muted);
    margin:     14px 0 0;
    display:    flex;
    align-items: center;
    justify-content: center;
    gap:        6px;
}

/* ── 3. LOADER ────────────────────────────────────────────── */
.wre-loader {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    padding:         50px 20px;
    gap:             16px;
    color:           var(--wre-muted);
    font-size:       14px;
}
.wre-loader-ring {
    width:            44px;
    height:           44px;
    border:           3px solid var(--wre-surface-2);
    border-top-color: var(--wre-blue);
    border-radius:    50%;
    will-change:      transform;
    animation:        wre-spin .9s linear infinite;
}
@keyframes wre-spin { to { transform: rotate(360deg); } }

/* ── 4. RESULTS PANEL ─────────────────────────────────────── */
.wre-results {
    padding:   0 28px 28px;
    animation: wre-fade-up .4s ease both;
}
@keyframes wre-fade-up {
    from { opacity:0; transform: translateY(12px); }
    to   { opacity:1; transform: translateY(0); }
}

/* Hero summary row */
.wre-hero-summary {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             12px;
    margin-bottom:   22px;
    padding:         16px 18px;
    background:      var(--wre-surface);
    border-radius:   var(--wre-radius-sm);
    border:          1px solid var(--wre-border);
    flex-wrap:       wrap;
}
.wre-hero-pill {
    font-size:   14px;
    color:       var(--wre-muted);
    line-height: 1.5;
}
.wre-highlight-num {
    color:       var(--wre-green);
    font-family: var(--wre-font-mono);
    font-size:   17px;
    font-weight: 800;
}
.wre-reset-btn {
    background:    var(--wre-surface-2);
    border:        1px solid var(--wre-border);
    color:         var(--wre-muted);
    font-family:   var(--wre-font-head);
    font-size:     12px;
    font-weight:   600;
    padding:       7px 14px;
    border-radius: 20px;
    cursor:        pointer;
    display:       flex;
    align-items:   center;
    gap:           6px;
    white-space:   nowrap;
    transition:    color var(--wre-transition), border-color var(--wre-transition);
    flex-shrink:   0;
}
.wre-reset-btn:hover { color: var(--wre-text); border-color: var(--wre-muted); }

/* Wealth bar */
.wre-bar-section { margin-bottom: 26px; }
.wre-bar-header {
    display:         flex;
    justify-content: space-between;
    margin-bottom:   8px;
}
.wre-bar-label {
    font-size:   12px;
    font-weight: 700;
    display:     flex;
    align-items: center;
    gap:         6px;
    color:       var(--wre-muted);
}
.wre-dot {
    width:         10px;
    height:        10px;
    border-radius: 50%;
    flex-shrink:   0;
}
.wre-dot--green { background: var(--wre-green); }
.wre-dot--blue  { background: var(--wre-blue); }

.wre-track {
    position:      relative;
    height:        16px;
    background:    var(--wre-blue);
    border-radius: 8px;
    overflow:      hidden;
}
.wre-fill-celeb {
    position:      absolute;
    inset:         0;
    background:    linear-gradient(90deg, #1d4ed8, var(--wre-blue));
    border-radius: 8px;
}
.wre-fill-you {
    position:      absolute;
    inset-block:   0;
    left:          0;
    background:    var(--wre-green);
    border-radius: 8px;
    will-change:   width;
    transition:    width 1.6s cubic-bezier(.25,.8,.25,1);
    z-index:       2;
}
.wre-bar-caption {
    text-align:  center;
    font-size:   12px;
    color:       var(--wre-muted);
    margin:      8px 0 0;
}

/* ── 5. TABS ──────────────────────────────────────────────── */
.wre-tabs {
    display:       flex;
    gap:           4px;
    margin-bottom: 18px;
    background:    var(--wre-surface);
    border-radius: var(--wre-radius-sm);
    padding:       4px;
    overflow-x:    auto;
    scrollbar-width: none;
}
.wre-tabs::-webkit-scrollbar { display: none; }

.wre-tab {
    flex:            1;
    background:      transparent;
    border:          none;
    color:           var(--wre-muted);
    font-family:     var(--wre-font-head);
    font-size:       12px;
    font-weight:     600;
    padding:         9px 12px;
    border-radius:   6px;
    cursor:          pointer;
    white-space:     nowrap;
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             6px;
    transition:      background var(--wre-transition), color var(--wre-transition);
}
.wre-tab i { font-size: 11px; }
.wre-tab:hover { color: var(--wre-text); }
.wre-tab.active {
    background: var(--wre-surface-2);
    color:      #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,.25);
}

/* ── 6. TAB PANELS ────────────────────────────────────────── */
.wre-tab-panel { animation: wre-fade-up .25s ease both; }
.wre-tab-intro {
    font-size:   14px;
    color:       var(--wre-muted);
    margin:      0 0 16px;
    line-height: 1.5;
}
.wre-tab-intro strong { color: var(--wre-text); }

/* — Breakdown stat grid — */
.wre-stat-grid {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   12px;
}
.wre-stat-card {
    background:    var(--wre-surface);
    border:        1px solid var(--wre-border);
    border-radius: var(--wre-radius-sm);
    padding:       16px;
    display:       flex;
    align-items:   center;
    gap:           14px;
    transition:    border-color var(--wre-transition), box-shadow var(--wre-transition);
}
.wre-stat-card:hover { border-color: rgba(255,255,255,.15); }
.wre-stat-card--green { border-left: 3px solid var(--wre-green); }
.wre-stat-card--blue  { border-left: 3px solid var(--wre-blue); }
.wre-stat-icon {
    width:           38px;
    height:          38px;
    flex-shrink:     0;
    background:      var(--wre-surface-2);
    border-radius:   var(--wre-radius-sm);
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       16px;
    color:           var(--wre-muted);
}
.wre-stat-card--green .wre-stat-icon { color: var(--wre-green); background: var(--wre-green-glow); }
.wre-stat-card--blue  .wre-stat-icon { color: var(--wre-blue);  background: var(--wre-blue-glow);  }
.wre-stat-body {
    display:        flex;
    flex-direction: column;
    gap:            3px;
    min-width:      0;
}
.wre-stat-label {
    font-size:   11px;
    color:       var(--wre-muted);
    font-weight: 600;
    line-height: 1.3;
}
.wre-stat-val {
    font-family: var(--wre-font-mono);
    font-size:   16px;
    font-weight: 800;
    color:       #fff;
    line-height: 1.2;
    overflow:    hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* — Timeline tab — */
.wre-timeline {
    position:      relative;
    padding-left:  28px;
    margin-bottom: 18px;
}
.wre-timeline::before {
    content:       '';
    position:      absolute;
    left:          9px;
    top:           12px;
    bottom:        12px;
    width:         2px;
    background:    linear-gradient(to bottom, var(--wre-green), var(--wre-blue));
    border-radius: 2px;
}
.wre-tl-item {
    position:      relative;
    margin-bottom: 22px;
}
.wre-tl-item:last-child { margin-bottom: 0; }
.wre-tl-dot {
    position:      absolute;
    left:          -24px;
    top:           4px;
    width:         14px;
    height:        14px;
    border-radius: 50%;
    border:        3px solid var(--wre-bg);
}
.wre-tl-dot--now { background: var(--wre-green); }
.wre-tl-dot--mid { background: var(--wre-amber); }
.wre-tl-dot--end { background: var(--wre-blue);  }
.wre-tl-body { padding-left: 4px; }
.wre-tl-body strong {
    display:     block;
    font-size:   15px;
    font-weight: 800;
    color:       #fff;
    margin-bottom: 3px;
    font-family: var(--wre-font-mono);
}
.wre-tl-body span {
    font-size:   13px;
    color:       var(--wre-muted);
    line-height: 1.4;
}

.wre-history-pill {
    display:       flex;
    align-items:   center;
    gap:           10px;
    padding:       13px 16px;
    background:    rgba(59,130,246,.08);
    border:        1px solid rgba(59,130,246,.2);
    border-radius: var(--wre-radius-sm);
    font-size:     13px;
    color:         var(--wre-text);
}
.wre-history-pill i { color: var(--wre-blue); flex-shrink: 0; }

/* — Buy list tab — */
.wre-buy-grid {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   10px;
    margin-bottom:         14px;
}
.wre-buy-card {
    background:    var(--wre-surface);
    border:        1px solid var(--wre-border);
    border-radius: var(--wre-radius-sm);
    padding:       14px;
    display:       grid;
    grid-template-columns: 36px 1fr auto;
    align-items:   center;
    gap:           10px;
    transition:    border-color var(--wre-transition);
}
.wre-buy-card:hover { border-color: var(--wre-green); }
.wre-buy-icon {
    width:           36px;
    height:          36px;
    flex-shrink:     0;
    background:      var(--wre-green-glow);
    border-radius:   var(--wre-radius-sm);
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       15px;
    color:           var(--wre-green);
}
.wre-buy-info {
    display:        flex;
    flex-direction: column;
    gap:            2px;
    min-width:      0;
}
.wre-buy-label {
    font-size:     12px;
    font-weight:   700;
    color:         var(--wre-text);
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
}
.wre-buy-cost {
    font-size:   11px;
    color:       var(--wre-muted);
    font-family: var(--wre-font-mono);
}
.wre-buy-count {
    display:         flex;
    flex-direction:  column;
    align-items:     flex-end;
    gap:             1px;
    flex-shrink:     0;
}
.wre-buy-num {
    font-family: var(--wre-font-mono);
    font-size:   16px;
    font-weight: 800;
    color:       var(--wre-green);
    line-height: 1;
}
.wre-buy-count span {
    font-size: 10px;
    color:     var(--wre-muted);
}
.wre-buy-footnote {
    font-size:  12px;
    color:      var(--wre-muted);
    display:    flex;
    align-items: center;
    gap:        7px;
    margin:     0;
}
.wre-buy-footnote strong { color: var(--wre-blue); font-family: var(--wre-font-mono); }

/* — Earning speed tab — */
.wre-speed-grid {
    display:               grid;
    grid-template-columns: repeat(4,1fr);
    gap:                   10px;
    margin-bottom:         16px;
}
.wre-speed-card {
    background:    var(--wre-surface);
    border:        1px solid var(--wre-border);
    border-radius: var(--wre-radius-sm);
    padding:       16px 12px;
    text-align:    center;
    display:       flex;
    flex-direction: column;
    align-items:   center;
    gap:           6px;
}
.wre-speed-card i { font-size: 18px; color: var(--wre-muted); }
.wre-speed-card--accent { border-top: 2px solid var(--wre-blue); }
.wre-speed-card--accent i { color: var(--wre-blue); }
.wre-speed-label {
    font-size:   10px;
    font-weight: 600;
    color:       var(--wre-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
}
.wre-speed-val {
    font-family: var(--wre-font-mono);
    font-size:   14px;
    font-weight: 800;
    color:       #fff;
    word-break:  break-all;
}

.wre-speed-compare {
    display:       flex;
    align-items:   center;
    gap:           10px;
    padding:       14px 16px;
    background:    rgba(16,185,129,.07);
    border:        1px solid rgba(16,185,129,.2);
    border-radius: var(--wre-radius-sm);
    margin-bottom: 14px;
    font-size:     14px;
    color:         var(--wre-text);
}
.wre-speed-compare i { color: var(--wre-green); flex-shrink: 0; }
.wre-speed-compare strong {
    color:       var(--wre-green);
    font-family: var(--wre-font-mono);
    font-size:   16px;
}

/* Live ticker */
.wre-live-ticker {
    display:       flex;
    align-items:   center;
    gap:           10px;
    padding:       12px 16px;
    background:    var(--wre-surface);
    border:        1px solid var(--wre-border);
    border-radius: var(--wre-radius-sm);
    font-size:     13px;
    color:         var(--wre-muted);
    font-family:   var(--wre-font-mono);
    overflow:      hidden;
}
.wre-ticker-dot {
    width:         8px;
    height:        8px;
    background:    var(--wre-green);
    border-radius: 50%;
    flex-shrink:   0;
    animation:     wre-pulse 1.5s ease infinite;
}
@keyframes wre-pulse {
    0%, 100% { opacity:1; transform:scale(1); }
    50%       { opacity:.5; transform:scale(.8); }
}

/* ── 7. RESPONSIVE ────────────────────────────────────────── */
@media (max-width: 640px) {
    .wre-input-panel,
    .wre-results { padding-left: 16px; padding-right: 16px; }

    .wre-stat-grid { grid-template-columns: 1fr; }

    .wre-buy-grid { grid-template-columns: 1fr; }

    .wre-speed-grid { grid-template-columns: 1fr 1fr; }

    .wre-intro { flex-direction: column; text-align: center; }

    .wre-hero-summary { flex-direction: column; align-items: flex-start; }

    .wre-tab { font-size: 11px; padding: 8px 8px; }
    .wre-tab i { display: none; }

    .wre-salary-input { font-size: 18px; }
    .wre-prefix { font-size: 18px; padding: 0 12px; }

    .wre-cta-btn { font-size: 15px; padding: 15px; }
}

@media (max-width: 380px) {
    .wre-speed-grid { grid-template-columns: 1fr; }
    .wre-buy-card   { grid-template-columns: 32px 1fr auto; }
}

/* ── 8. REDUCED MOTION ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .wre-loader-ring,
    .wre-ticker-dot,
    .wre-results,
    .wre-tab-panel { animation: none !important; }
    .wre-fill-you  { transition: none !important; }
    .wre-cta-btn   { transition: none !important; }
}

/* Fix for Wealth Reality Engine Loader */
.wre-loader[hidden], 
.wre-results[hidden] {
    display: none !important;
}