/* ==========================================================
   MF INSIGHTS THEME
   ========================================================== */

:root{

    --primary:#0f172a;
    --primary-light:#1e293b;

    --blue:#2563eb;
    --blue-light:#eff6ff;

    --green:#16a34a;
    --orange:#f59e0b;
    --red:#dc2626;

    --bg:#f1f5f9;
    --card:#ffffff;

    --text:#0f172a;
    --muted:#64748b;

    --border:#e2e8f0;

    --radius:18px;
}

/* ==========================================================
   GLOBAL
   ========================================================== */

body{

    background:var(--bg);

    font-family:
        Inter,
        Segoe UI,
        Arial,
        sans-serif;

    color:var(--text);

    font-size:15px;
}

a{
    text-decoration:none;
}

a:hover{
    text-decoration:none;
}

.container-fluid{
    max-width:1700px;
}

/* ==========================================================
   NAVBAR
   ========================================================== */

.top-navbar{

    background:
        linear-gradient(
            90deg,
            #0f172a,
            #1e293b
        );

    padding:14px 24px;

    box-shadow:
        0 4px 12px rgba(0,0,0,.08);
}

.navbar-brand{

    font-size:22px;
    font-weight:700;
    color:white !important;
}

#fundSearch{

    border-radius:12px;
    border:none;
    padding:12px 15px;
}

/* ==========================================================
   SIDEBAR
   ========================================================== */

.sidebar{

    background:white;

    min-height:100vh;

    border-right:
        1px solid var(--border);

    padding:20px;
}

.sidebar-title{

    color:var(--muted);

    font-size:11px;

    text-transform:uppercase;

    letter-spacing:1px;

    font-weight:700;

    margin-top:25px;

    margin-bottom:12px;
}

.sidebar a{

    display:block;

    padding:12px 15px;

    border-radius:12px;

    color:var(--text);

    margin-bottom:6px;

    transition:.2s;
}

.sidebar a:hover{

    background:var(--blue-light);

    color:var(--blue);

    transform:translateX(3px);
}

/* ==========================================================
   HERO
   ========================================================== */

.hero-home,
.fund-hero{

    background:
        linear-gradient(
            135deg,
            #1e3a8a,
            #2563eb
        );

    color:white;

    border-radius:24px;

    padding:45px;

    margin-bottom:25px;

    overflow:hidden;

    position:relative;
}

.hero-home h1,
.fund-title{

    font-size:42px;

    font-weight:800;

    margin-bottom:10px;
}

.hero-home p,
.fund-meta{

    opacity:.95;

    font-size:16px;
}

.hero-search{

    margin-top:25px;

    max-width:750px;
}

/* ==========================================================
   CARDS
   ========================================================== */

.card{

    border:none;

    border-radius:20px;

    background:white;

    box-shadow:
        0 2px 8px rgba(15,23,42,.05);

    margin-bottom:25px;
}

.card-header{

    background:white;

    border-bottom:
        1px solid var(--border);

    padding:18px 24px;

    font-size:18px;

    font-weight:700;
}

.card-body{

    padding:24px;
}
.stat-card
{
    position:relative;

    height:100%;

    background:#fff;

    border:1px solid #e5e7eb;

    border-radius:20px;

    padding:22px 15px;

    text-align:center;

    transition:all .25s ease;

    overflow:hidden;

    box-shadow:
        0 2px 10px rgba(0,0,0,.04);
}

.stat-card:before
{
    content:'';

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:4px;

    background:
    linear-gradient(
        90deg,
        #2563eb,
        #06b6d4
    );
}

.stat-card:hover
{
    transform:translateY(-4px);

    box-shadow:
        0 12px 30px rgba(0,0,0,.08);
}

.stat-sip
{
    background:
    linear-gradient(
        135deg,
        #eff6ff,
        #ffffff
    );
}

.stat-expense
{
    background:
    linear-gradient(
        135deg,
        #f0fdf4,
        #ffffff
    );
}

.stat-exit
{
    background:
    linear-gradient(
        135deg,
        #fff7ed,
        #ffffff
    );
}

.stat-icon
{
    width:46px;
    height:46px;

    margin:0 auto 12px;

    border-radius:14px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:#f8fafc;

    font-size:22px;
}

.stat-value
{
    font-size:1.45rem;

    font-weight:800;

    color:#0f172a;

    margin-bottom:6px;

    line-height:1.25;
}

.stat-text
{
    font-size:.95rem;

    line-height:1.4;

    min-height:44px;

    display:flex;
    align-items:center;
    justify-content:center;
}

.stat-small
{
    font-size:1rem;
}

.stat-subtext
{
    font-size:11px;

    color:#64748b;

    min-height:32px;

    margin-bottom:6px;

    line-height:1.3;
}

.stat-label
{
    font-size:.72rem;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:1px;

    color:#64748b;
}

@media(max-width:768px)
{
    .stat-card
    {
        padding:18px 12px;
    }

    .stat-value
    {
        font-size:1.15rem;
    }

    .stat-text
    {
        font-size:.85rem;
        min-height:40px;
    }

    .stat-icon
    {
        width:40px;
        height:40px;
        font-size:18px;
    }
}
/* ==========================================================
   HOLDINGS
   ========================================================== */

.holding-card{

    background:white;

    border-radius:18px;

    border:
        1px solid var(--border);

    padding:20px;

    transition:.2s;

    height:100%;
}

.holding-card:hover{

    transform:translateY(-4px);

    box-shadow:
        0 10px 25px rgba(15,23,42,.08);
}

.holding-company{

    font-size:17px;

    font-weight:700;

    line-height:1.5;

    min-height:55px;
}

.holding-company a{

    color:var(--text);
}

.holding-company a:hover{

    color:var(--blue);
}

.holding-sector{

    color:var(--muted);

    font-size:13px;

    margin-top:8px;
}

.holding-weight{

    margin-top:15px;

    font-size:28px;

    font-weight:800;

    color:var(--green);
}

/* ==========================================================
   TABLES
   ========================================================== */

.table{

    margin-bottom:0;
}

.table thead th{

    background:#f8fafc;

    border-bottom:
        1px solid var(--border);

    color:var(--muted);

    font-size:13px;

    text-transform:uppercase;

    letter-spacing:.5px;
}

.table tbody tr{

    transition:.15s;
}

.table tbody tr:hover{

    background:#f8fafc;
}

.table td{

    vertical-align:middle;
}

/* ==========================================================
   CHARTS
   ========================================================== */

.chart-container{

    height:450px;

    padding:10px;
}

#navChart,
#amcChart,
#sectorChart{

    background:white;
}

/* ==========================================================
   MINI STATS
   ========================================================== */

.mini-stat{

    background:#f8fafc;

    border:
        1px solid var(--border);

    border-radius:16px;

    padding:18px;

    text-align:center;

    transition:.2s;
}

.mini-stat:hover{

    background:white;

    box-shadow:
        0 6px 18px rgba(15,23,42,.06);
}

.mini-stat strong{

    display:block;

    margin-top:10px;

    font-size:24px;

    color:var(--blue);
}

/* ==========================================================
   HERO CARD
   ========================================================== */

.hero-card{

    background:white;

    border-radius:24px;

    padding:35px;

    box-shadow:
        0 4px 20px rgba(15,23,42,.06);
}

.hero-card h1{

    font-size:38px;

    font-weight:800;
}

/* ==========================================================
   FOOTER
   ========================================================== */

.footer{

    background:white;

    border-top:
        1px solid var(--border);

    margin-top:50px;

    padding:25px;

    color:var(--muted);
}

/* ==========================================================
   MOBILE
   ========================================================== */

@media(max-width:768px){

    .hero-home,
    .fund-hero{

        padding:25px;
    }

    .hero-home h1,
    .fund-title{

        font-size:28px;
    }

    .hero-card h1{

        font-size:28px;
    }

    .stat-value,
    .metric-value{

        font-size:24px;
    }

    .chart-container{

        height:300px;
    }
}
/* =========================
   SEARCH WRAPPER
========================= */

.search-wrapper{
    position:relative;
    width:100%;
    max-width:680px;
}

/* input */
.search-input{
    height:44px;
    border-radius:14px;
    padding-left:14px;
    border:1px solid #e2e8f0;
    box-shadow:none;
    font-size:14px;
}

.search-input:focus{
    border-color:#2563eb;
    box-shadow:0 0 0 3px rgba(37,99,235,.15);
}

/* =========================
   DROPDOWN BOX
========================= */

#searchResults{
    position:absolute;
    top:100%;
    left:0;
    right:0;

    margin-top:10px;
    background:#fff;

    border-radius:16px;
    overflow:hidden;

    box-shadow:
        0 20px 60px rgba(15,23,42,.18);

    display:none;
    z-index:99999;

    border:1px solid #f1f5f9;
}

/* =========================
   SECTION HEADER
========================= */

.search-section{
    padding:8px 14px;
    font-size:11px;
    font-weight:700;
    letter-spacing:.06em;
    color:#64748b;
    background:#f8fafc;
    text-transform:uppercase;
}

/* =========================
   ITEM ROW
========================= */

.search-item{
    display:flex;
    flex-direction:column;

    padding:12px 14px;
    text-decoration:none;

    border-bottom:1px solid #f1f5f9;

    transition:.15s ease;
}

.search-item:hover{
    background:#eff6ff;
}

/* main title */
.search-title{
    font-size:14px;
    font-weight:600;
    color:#0f172a;

    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

/* subtitle */
.search-meta{
    font-size:12px;
    color:#64748b;
    margin-top:4px;
}

/* badge */
.search-type{
    display:inline-block;
    font-size:10px;
    font-weight:700;
    padding:2px 8px;
    border-radius:999px;

    background:#dbeafe;
    color:#1d4ed8;

    margin-bottom:6px;
    width:max-content;
}

/* empty state (optional) */
.search-empty{
    padding:16px;
    text-align:center;
    color:#94a3b8;
    font-size:13px;
}
.div-with-vertical-scroll {
    max-height: 400px;
    overflow-y: auto;
}
/* ==========================================
   FUND SEARCH
========================================== */

.fund-search-wrap{
    position:relative;
}

.fund-search{
    height:58px;
    border:2px solid #dbe3f0;
    border-radius:14px;
    padding:0 18px;
    font-size:16px;
    font-weight:500;
    background:#fff;
    transition:all .2s ease;
    box-shadow:0 2px 8px rgba(0,0,0,.04);
}

.fund-search:focus{
    border-color:#2563eb;
    box-shadow:
        0 0 0 4px rgba(37,99,235,.12),
        0 10px 25px rgba(37,99,235,.10);
    outline:none;
}

.fund-search::placeholder{
    color:#94a3b8;
    font-weight:400;
}

/* ==========================================
   SEARCH RESULTS
========================================== */

.search-results{
    /*position:absolute;*/
    left:0;
    right:0;
    top:100%;
    margin-top:6px;

    background:#fff;

    border:1px solid #e5e7eb;
    border-radius:14px;

    box-shadow:
        0 10px 30px rgba(0,0,0,.08);

    max-height:450px;
    overflow-y:auto;

    z-index:9999;
}

/* Scrollbar */

.search-results::-webkit-scrollbar{
    width:8px;
}

.search-results::-webkit-scrollbar-thumb{
    background:#cbd5e1;
    border-radius:10px;
}

/* ==========================================
   RESULT ITEM
========================================== */

.search-item{
    padding:14px 16px;
    cursor:pointer;
    border-bottom:1px solid #b2c9df;
    transition:all .15s ease;
}

.search-item:last-child{
    border-bottom:none;
}

.search-item:hover{
    background:#eff6ff;
}

.search-item-name{
    font-size:14px;
    font-weight:600;
    color:#0f172a;
    line-height:1.4;
}

.search-item-meta{
    font-size:12px;
    color:#64748b;
    margin-top:4px;
}

/* ==========================================
   SELECTED FUND LOOK
========================================== */

.fund-search.selected{
    border-color:#16a34a;
    background:#f0fdf4;
}

.card {
    border-radius:16px;
}

.fs-4 {
    line-height:1.2;
}

.text-warning {
    color:#f59e0b !important;
}

.seo-summary {
    margin: 24px 0;
    padding: 20px;
    border: 1px solid #eaeaea;
    border-radius: 10px;
    background: #fafafa;
}

.seo-summary__container {
    max-width: 900px;
    margin: 0 auto;
}

.seo-summary__title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 12px;
    color: #111;
}

.seo-summary__content {
    font-size: 14px;
    line-height: 1.6;
    color: #444;
}

.similar-funds-grid
{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.similar-fund-card
{
    border:1px solid #e5e7eb;
    border-radius:12px;
    padding:12px 15px;
    background:#fff;

    display:flex;
    align-items:center;
    gap:15px;

    transition:.15s;
}

.similar-fund-card:hover
{
    box-shadow:0 4px 12px rgba(0,0,0,.08);
}

.similar-left
{
    flex:1;
    min-width:0;
}

.similar-fund-name
{
    font-size:15px;
    font-weight:700;
    line-height:1.3;
}

.similar-fund-name a
{
    text-decoration:none;
}

.similar-meta
{
    font-size:12px;
    color:#6b7280;
    margin-top:3px;
}

.similar-score
{
    width:220px;
}

.similarity-bar
{
    width:100%;
    height:20px;

    background:#e5e7eb;

    border-radius:999px;

    overflow:hidden;
}

.similarity-fill
{
    height:100%;

    display:flex;
    align-items:center;
    justify-content:center;

    color:#fff;

    font-size:11px;
    font-weight:700;
}

.similar-actions
{
    display:flex;
    gap:8px;
}

.btn-mini
{
    padding:6px 10px;
    border-radius:8px;
    text-decoration:none;
    font-size:12px;
    font-weight:600;
}

.btn-fund
{
    background:#2563eb;
    color:#fff;
}

.btn-fund:hover
{
    color:#111827;
}

.btn-similar
{
    background:#97ea9b;
    color:#111827;
}

.btn-similar:hover
{
    color:#111827;
}

.btn-compare
{
    background:#48cc38;
    color:#111827;
}

.btn-compare:hover
{
    color:#111827;
}

@media(max-width:768px)
{
    .similar-fund-card
    {
        flex-direction:column;
        align-items:flex-start;
    }

    .similar-score
    {
        width:100%;
    }

    .similar-actions
    {
        width:100%;
    }
}
#similarfundSearch {
    border: 1px solid #245bd8;
}
#fundSearchBox {
    position: relative;
}

#similarfundSearchResults{
    display: none;
    /*position: absolute;*/
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 99999;

    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 14px;

    max-height: 420px;
    overflow-y: auto;

    box-shadow: 0 18px 45px rgba(0,0,0,0.12);

    padding: 6px 0;

    animation: fundDropdownFade 0.12s ease-in-out;
}
#fundSearchResults {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 99999;

    background: #fff;
    border-radius: 14px;
    border: 1px solid #eee;

    max-height: 420px;
    overflow-y: auto;

    box-shadow: 0 20px 50px rgba(0,0,0,0.12);
}
.similar-search-item{
    display:flex;
    flex-direction:column;

    padding:12px 14px;
    text-decoration:none;

    border-bottom:1px solid #000;

    transition:.15s ease;
}

.similar-search-item:hover{
    background:#eff6ff;
}
.returns-grid
{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
    gap:15px;
}

.return-box
{
    text-align:center;
    padding:18px 10px;
    border:1px solid #e9ecef;
    border-radius:12px;
    background:#fff;
    transition:.2s;
}

.return-box:hover
{
    transform:translateY(-2px);
    box-shadow:0 8px 20px rgba(0,0,0,.08);
}

.return-period
{
    font-size:13px;
    color:#6c757d;
    font-weight:600;
    margin-bottom:8px;
    text-transform:uppercase;
}

.return-value
{
    font-size:26px;
    font-weight:700;
    line-height:1;
}

.return-success-box
{
    border-top:10px solid #198754 !important;
    border: 1px solid;
    color:#198754 !important;
}

.return-danger-box
{
    border-top:10px solid #dc3545 !important;
    border: 1px solid;
    color:#dc3545 !important;
}
.stat-value {
    min-height: 92% !important;
}
.insight-grid
{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(350px,1fr));
    gap:20px;
}

.insight-card
{
    border:1px solid #e9ecef;
    border-radius:12px;
    background:#fff;
    overflow:hidden;
}

.insight-header
{
    padding:12px 15px;
    font-weight:700;
    background:#f8f9fa;
    border-bottom:1px solid #eee;
}

.insight-row
{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:10px 15px;
    border-bottom:1px solid #f1f3f5;
    transition:.2s;
}

.insight-row:hover
{
    background:#fafafa;
}

.insight-row:last-child
{
    border-bottom:none;
}

.rank-badge
{
    width:26px;
    height:26px;
    border-radius:50%;
    background:#0d6efd;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:12px;
    font-weight:700;
}

.info-main
{
    flex:1;
    margin-left:10px;
    overflow:hidden;
}

.info-main a
{
    text-decoration:none;
    font-weight:600;
    color:#212529;
}

.info-sub
{
    font-size:12px;
    color:#6c757d;
}

.metric
{
    font-weight:700;
    white-space:nowrap;
}

.metric-green
{
    color:#198754;
}

.metric-blue
{
    color:#0d6efd;
}

.btn {
    display: inline-block;
    padding: 10px 16px;
    margin: 6px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    color: #fff;
    transition: all 0.2s ease-in-out;
    border: 1px solid transparent;
    cursor: pointer;
}

.btn:hover {
    transform: translateY(-1px);
    opacity: 0.9;
}

.btn-large-cap {
    background: #1e88e5;
}

.btn-mid-cap {
    background: #1976d2;
}

.btn-small-cap {
    background: #0d47a1;
}

.btn-flexi-cap {
    background: #3949ab;
}

.btn-multi-cap {
    background: #5e35b1;
}

.btn-large-mid-cap {
    background: #3f51b5;
}

.btn-elss {
    background: #43a047;
}

.btn-value {
    background: #2e7d32;
}

.btn-contra {
    background: #1b5e20;
}

.btn-sectoral-thematic {
    background: #fb8c00;
}

.btn-hybrid {
    background: #8e24aa;
}

.btn-multi-asset {
    background: #6a1b9a;
}

.btn-corporate-bond {
    background: #6d4c41;
}

.btn-short-duration {
    background: #5d4037;
}

.btn-liquid {
    background: #455a64;
}

.btn-retirement {
    background: #2e7d32; /* calm wealth-building green */
    color: #fff;
    font-weight: 600;
}.btn-large-cap,
.btn-mid-cap,
.btn-small-cap,
.btn-flexi-cap,
.btn-multi-cap,
.btn-large-mid-cap,
.btn-elss,
.btn-value,
.btn-contra,
.btn-sectoral-thematic,
.btn-hybrid,
.btn-multi-asset,
.btn-corporate-bond,
.btn-short-duration,
.btn-retirement,
.btn-liquid{
    transition:all .2s ease;
}

.btn-large-cap:hover,
.btn-mid-cap:hover,
.btn-small-cap:hover,
.btn-flexi-cap:hover,
.btn-multi-cap:hover,
.btn-large-mid-cap:hover,
.btn-elss:hover,
.btn-value:hover,
.btn-contra:hover,
.btn-sectoral-thematic:hover,
.btn-hybrid:hover,
.btn-multi-asset:hover,
.btn-corporate-bond:hover,
.btn-short-duration:hover,
.btn-retirement:hover,
.btn-liquid:hover{

    transform:translateY(-3px);

    box-shadow:
        0 10px 20px rgba(0,0,0,.12),
        0 4px 8px rgba(0,0,0,.08);

    text-decoration:none;
}

.btn{
    box-shadow:0 2px 6px rgba(0,0,0,.10);
    border-radius:12px;
    font-weight:600;
}

.btn:active{
    transform:translateY(-1px);
}


/* ===== FORM WRAPPER ===== */
.row.g-3 {
    padding: 18px;
}

/* Labels */
label.fw-bold {
    font-size: 14px;
    color: #374151;
    margin-bottom: 6px;
}

/* ===== INPUT BOX ===== */
.fund-search-wrap {
    position: relative;
}

/* Main input */
.fund-search {
    height: 52px;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    padding-left: 14px;
    font-size: 14px;
    transition: all 0.2s ease-in-out;
    background: #fafafa;
}

/* Focus effect */
.fund-search:focus {
    background: #fff;
    border-color: #6366f1;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15);
}

/* Placeholder styling */
.fund-search::placeholder {
    color: #9ca3af;
    font-size: 13px;
}

/* ===== SEARCH DROPDOWN ===== */
.search-results {
    position: absolute;
    top: auto;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    max-height: 240px;
    overflow-y: auto;
    z-index: 999;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

/* Each result item (you’ll need to apply this class in JS) */
.search-results div {
    padding: 10px 14px;
    cursor: pointer;
    font-size: 13px;
    transition: 0.2s;
}

.search-results div:hover {
    background: #f3f4f6;
}

/* ===== COMPARE BUTTON ===== */
.btn-primary {
    height: 52px;
    border-radius: 12px !important;
    font-weight: 600;
    font-size: 15px;
    background: #0d6efd;
    border: none;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 6px 18px rgba(99, 102, 241, 0.25);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(99, 102, 241, 0.35);
}

.heatmap-grid
{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:15px;
}

.heatmap-card
{
    display:block;
    text-decoration:none;
    color:#212529;
    border-radius:14px;
    padding:18px;
    transition:.2s;
    border:1px solid rgba(0,0,0,.08);
}

.heatmap-card:hover
{
    transform:translateY(-3px);
    box-shadow:0 10px 25px rgba(0,0,0,.08);
}

.heatmap-title
{
    font-weight:700;
    font-size:15px;
    margin-bottom:10px;
}

.heatmap-return
{
    font-size:28px;
    font-weight:800;
    line-height:1;
}

.heatmap-funds
{
    font-size:13px;
    color:#6c757d;
    margin-top:8px;
}
.portfolio-card
{
    border:none;
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 8px 24px rgba(0,0,0,.06);
}

.portfolio-card .card-header
{
    background:linear-gradient(135deg,#0d6efd,#4f8cff);
    color:#fff;
    padding:18px 24px;
}

.portfolio-card .card-header small
{
    color:rgba(255,255,255,.8);
}

.holding-row
{
    display:flex;
    align-items:center;
    gap:15px;
    padding:16px 20px;
    border-bottom:1px solid #f1f3f5;
    transition:.2s;
}

.holding-row:hover
{
    background:#f8f9fa;
}

.holding-rank
{
    width:42px;
    height:42px;
    border-radius:50%;
    background:#eef4ff;
    color:#0d6efd;
    font-weight:700;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
}

.holding-main
{
    flex:1;
}

.holding-company
{
    font-size:15px;
    font-weight:700;
    margin-bottom:4px;
}

.holding-sector
{
    font-size:12px;
    color:#6c757d;
    margin-bottom:8px;
}

.holding-progress
{
    height:8px;
    background:#edf2f7;
    border-radius:50px;
    overflow:hidden;
}

.holding-progress-bar
{
    height:100%;
    border-radius:50px;
}

.holding-weight
{
    font-size:18px;
    font-weight:800;
    min-width:70px;
    text-align:right;
    color:#198754;
}

.holdings-table th
{
    font-size:12px;
    text-transform:uppercase;
    color:#6c757d;
    background:#fafafa;
}

.holding-rank
{
    display:inline-flex;
    width:24px;
    height:24px;
    border-radius:50%;
    align-items:center;
    justify-content:center;
    background:#eef4ff;
    color:#0d6efd;
    font-size:12px;
    font-weight:700;
}

.holding-bar
{
    width:90px;
    height:8px;
    background:#e9ecef;
    border-radius:20px;
    overflow:hidden;
}

.holding-bar-fill
{
    height:100%;
    background:linear-gradient(
        90deg,
        #198754,
        #20c997
    );
}

.holdings-table td
{
    padding-top:10px;
    padding-bottom:10px;
}

/* =========================
   GLOBAL ANCHOR BASE STYLE
   ========================= */

/* =========================
   GLOBAL LINK DESIGN SYSTEM
   ========================= */

a {
    color: inherit;
    text-decoration: none;
    cursor: pointer;

    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;

    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-font-smoothing: antialiased;
}

/* =========================
   BASE INTERACTION FEEL
   ========================= */

a:hover {
    transform: translateY(-1px);
    opacity: 0.9;
}

a:active {
    transform: translateY(0px) scale(0.98);
}

a:focus-visible {
    outline: 3px solid rgba(99, 102, 241, 0.35);
    outline-offset: 3px;
    border-radius: 6px;
}

/* =========================
   SMART TEXT LINKS
   (auto-underlined only in content)
   ========================= */

p a,
li a,
span a {
    color: #4f46e5;
    font-weight: 500;
}

/* animated underline effect */
p a::after,
li a::after,
span a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, #4f46e5, #818cf8);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s ease;
    opacity: 0.8;
}

p a:hover::after,
li a:hover::after,
span a:hover::after {
    transform: scaleX(1);
}

/* =========================
   IMAGE LINKS (CLEAN ZOOM)
   ========================= */

a:has(img) {
    display: inline-block;
    border-radius: 12px;
    overflow: hidden;
}

a img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 0.4s ease, filter 0.4s ease;
}

a:hover img {
    transform: scale(1.06);
    filter: brightness(1.08) contrast(1.05);
}

/* =========================
   ICON LINKS (SMOOTH FLOAT)
   ========================= */

a svg,
a i {
    transition: transform 0.25s ease;
}

a:hover svg,
a:hover i {
    transform: translateX(2px);
}

/* =========================
   / MENU LINKS (OPTIONAL FEEL)
   ========================= */

a {
    padding: 6px 10px;
    border-radius: 8px;
}

a:hover {
    background: rgba(99, 102, 241, 0.08);
}

/* active state */
a.active {
    color: #4f46e5;
    background: rgba(99, 102, 241, 0.12);
}

/* =========================
   DISABLED LINKS
   ========================= */

a.disabled,
a[aria-disabled="true"] {
    pointer-events: none;
    opacity: 0.45;
    filter: grayscale(0.4);
    cursor: not-allowed;
}

/* =========================
   DARK MODE FRIENDLY BASE
   ========================= */

@media (prefers-color-scheme: dark) {
    p a,
    li a,
    span a {
        color: #818cf8;
    }

    p a::after,
    li a::after,
    span a::after {
        background: linear-gradient(90deg, #818cf8, #a5b4fc);
    }

    a:hover {
        background: rgba(129, 140, 248, 0.12);
    }
}

.discovery-grid
{
    display:grid;
    grid-template-columns:1.2fr 1fr 1fr;
    gap:15px;
}

.discovery-card
{
    background:#fff;
    border:1px solid #e9ecef;
    border-radius:14px;
    overflow:hidden;
}

.discovery-header
{
    padding:12px 15px;
    font-weight:700;
    border-bottom:1px solid #eee;
    background:#fafafa;
}

.discovery-row
{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:10px 14px;
    border-bottom:1px solid #f3f3f3;
}

.discovery-row:last-child
{
    border-bottom:none;
}

.discovery-rank
{
    width:24px;
    height:24px;
    border-radius:50%;
    background:#eef4ff;
    color:#0d6efd;
    font-size:12px;
    font-weight:700;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-right:8px;
}

.discovery-left
{
    display:flex;
    align-items:center;
    flex:1;
    min-width:0;
}

.discovery-main
{
    overflow:hidden;
}

.discovery-title, .category-name
{
    font-size:13px;
    font-weight:600;
    line-height:1.3;
}

.discovery-sub
{
    font-size:11px;
    color:#6c757d;
}

.discovery-metric, .category-rank
{
    font-weight:700;
    white-space:nowrap;
}

.heatmap-mini
{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px;
    padding:15px;
}

.heatmap-box
{
    text-align:center;
    border-radius:10px;
    padding:12px;
    background:#f8f9fa;
}

.heatmap-value
{
    font-size:22px;
    font-weight:800;
    color:#198754;
}

@media(max-width:992px)
{
    .discovery-grid
    {
        grid-template-columns:1fr;
    }
}

.category-row
{
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px 15px;
    border-bottom:1px solid #f1f3f5;
    transition:.2s;
    color:#212529;
}

.category-row:hover
{
    background:#f8f9fa;
}

.category-rank
{
    width:32px;
    height:32px;
    border-radius:50%;
    background:#eef4ff;
    color:#0d6efd;
    font-weight:700;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:12px;
}

.category-main
{
    flex:1;
}

.category-meta
{
    font-size:11px;
    color:#6c757d;
}

.category-return
{
    font-weight:700;
    color:#198754;
}

.category-dashboard
{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:15px;
    margin-top:20px;
}

.insight-card
{
    background:#fff;
    border:1px solid #e9ecef;
    border-radius:14px;
    overflow:hidden;
}

.insight-header
{
    padding:12px 15px;
    font-weight:700;
    background:#fafafa;
    border-bottom:1px solid #eee;
}

.insight-row
{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:10px 14px;
    border-bottom:1px solid #f3f3f3;
}

.insight-row:last-child
{
    border-bottom:none;
}

.insight-left
{
    flex:1;
    min-width:0;
}

.insight-title
{
    font-size:13px;
    font-weight:600;
}

.insight-sub
{
    font-size:11px;
    color:#6c757d;
}

.insight-value
{
    font-weight:700;
}

.snapshot-grid
{
    display:grid;
    grid-template-columns:repeat(2,1fr);
}

.snapshot-box
{
    text-align:center;
    padding:15px;
    border-bottom:1px solid #f1f1f1;
    border-right:1px solid #f1f1f1;
}

.snapshot-box:nth-child(2n)
{
    border-right:none;
}

.snapshot-value
{
    font-size:24px;
    font-weight:800;
}

.snapshot-label
{
    font-size:12px;
    color:#777;
}

.sector-search-card
{
    background:#fff;
    border:1px solid #edf2f7;
    border-radius:16px;
    padding:15px;
}

.sector-stat-card
{
    background:#fff;
    border:1px solid #edf2f7;
    border-radius:16px;
    padding:18px;
    text-align:center;
    height:100%;
}

.stat-number
{
    font-size:28px;
    font-weight:800;
    color:#0d6efd;
}

.stat-text
{
    color:#666;
    font-size:12px;
}

.sector-highlight .stat-number
{
    font-size:18px;
    color:#198754;
}

.sector-grid
{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
    gap:15px;
    margin-top:20px;
}

.sector-card
{
    background:#fff;
    border:1px solid #a2b2c5;
    border-radius:16px;
    padding:16px;
    transition:.25s;
    height:100%;
    min-width: stretch;
}

.sector-card:hover
{
    transform:translateY(-4px);
    box-shadow:0 10px 25px rgba(0,0,0,.08);
}

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

.sector-name
{
    font-size:16px;
    font-weight:700;
    color:#1f2937;
}

.sector-rank
{
    font-size:12px;
    color:#6b7280;
    font-weight:700;
}

.sector-metrics
{
    display:flex;
    justify-content:space-between;
    margin-top:14px;
}

.metric-value
{
    display:block;
    font-size:18px;
    font-weight:800;
    color:#111827;
}

.metric-label
{
    display:block;
    font-size:11px;
    color:#6b7280;
}

.sector-bar
{
    margin-top:15px;
    height:8px;
    background:#eef2f7;
    border-radius:20px;
    overflow:hidden;
}

.sector-bar-fill
{
    height:100%;
    border-radius:20px;
}

.heat-hot .sector-bar-fill
{
    background:#dc3545;
}

.heat-warm .sector-bar-fill
{
    background:#fd7e14;
}

.heat-cool .sector-bar-fill
{
    background:#0d6efd;
}

.sector-exposure
{
    margin-top:12px;
    font-size:12px;
    color:#6b7280;
}

.company-search-card
{
    background:#fff;
    border:1px solid #edf2f7;
    border-radius:16px;
    padding:15px;
}

.company-stat-card
{
    background:#fff;
    border:1px solid #edf2f7;
    border-radius:16px;
    padding:18px;
    text-align:center;
    height:100%;
}

.stat-number
{
    font-size:24px;
    font-weight:800;
    color:#0d6efd;
}

.highlight .stat-number
{
    color:#198754;
    font-size:16px;
}

.stat-text
{
    font-size:12px;
    color:#6b7280;
}

.company-grid
{
    display:grid;
    grid-template-columns:
    repeat(auto-fill,minmax(300px,1fr));
    gap:15px;
}

.company-item
{
    display:block;
    height:100%;
}

.company-card
{
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:16px;
    padding:16px;
    height:180px;

    display:flex;
    flex-direction:column;

    transition:.25s;
}

.company-card:hover
{
    transform:translateY(-4px);
    box-shadow:0 10px 25px rgba(0,0,0,.08);
}

.company-header
{
    display:flex;
    justify-content:space-between;
}

.company-name
{
    font-size:15px;
    font-weight:700;
    color:#111827;
}

.company-rank
{
    font-size:12px;
    color:#6b7280;
}

.sector-pill
{
    display:inline-block;
    margin-top:10px;
    background:#f3f4f6;
    padding:4px 10px;
    border-radius:20px;
    font-size:12px;
    color:#374151;
}

.company-metrics
{
    display:flex;
    justify-content:space-between;
    margin-top:15px;
}

.metric-value
{
    display:block;
    font-size:18px;
    font-weight:800;
    color:#111827;
}

.metric-label
{
    display:block;
    font-size:11px;
    color:#6b7280;
}

.company-bar
{
    margin-top:15px;
    height:8px;
    background:#eef2f7;
    border-radius:30px;
    overflow:hidden;
}

.company-bar-fill
{
    height:100%;
}

.heat-hot .company-bar-fill
{
    background:#dc3545;
}

.heat-warm .company-bar-fill
{
    background:#fd7e14;
}

.heat-cool .company-bar-fill
{
    background:#0d6efd;
}

.company-footer
{
    margin-top:auto;
    font-size:12px;
    color:#6b7280;
}
.recommended-fund
{
    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:12px 15px;
    margin-bottom:10px;

    background:#fff;
    border:1px solid #e9ecef;
    border-radius:10px;

    transition:all .2s ease;
}

.recommended-fund:hover
{
    border-color:#0d6efd;
    box-shadow:0 4px 12px rgba(0,0,0,.08);
    transform:translateY(-1px);
}

.recommended-fund-name
{
    flex:1;
    padding-right:15px;
}

.recommended-fund-name a
{
    color:#212529;
    text-decoration:none;
    font-weight:600;
    line-height:1.4;
}

.recommended-fund-name a:hover
{
    color:#0d6efd;
}

.recommended-fund-meta
{
    display:flex;
    align-items:center;
    gap:10px;
    flex-shrink:0;
}

.return-period
{
    background:#f8f9fa;
    color:#6c757d;

    padding:4px 10px;
    border-radius:20px;

    font-size:12px;
    font-weight:600;
}

.return-value
{
    background:#198754;
    color:#fff;

    padding:6px 12px;
    border-radius:20px;

    font-size:14px;
    font-weight:700;

    min-width:75px;
    text-align:center;
}

.explore-hero{
    background:linear-gradient(135deg,#0d6efd,#6610f2);
    color:#fff;
    border-radius:20px;
    padding:40px;
    box-shadow:0 15px 40px rgba(0,0,0,.12);
}

.explore-nav{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:15px;
}

.explore-nav a{
    text-decoration:none;
    background:#fff;
    border-radius:15px;
    padding:20px;
    text-align:center;
    font-weight:600;
    color:#333;
    transition:.2s;
    box-shadow:0 3px 10px rgba(0,0,0,.08);
}

.explore-nav a:hover{
    transform:translateY(-3px);
}

.explore-section{
    margin-top:30px;
}

.explore-card{
    border:none;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 4px 20px rgba(0,0,0,.08);
}

.explore-header{
    padding:18px 25px;
    font-size:24px;
    font-weight:700;
}

.fund-item,
.category-item,
.amc-item,
.company-item{
    display:block;
    text-decoration:none;
    padding:12px 15px;
    border-radius:12px;
    transition:.15s;
    color:#222;
}

.fund-item:hover,
.category-item:hover,
.amc-item:hover,
.company-item:hover{
    background:#f8f9fa;
}

.rank-pill{
    background:#198754;
    color:#fff;
    padding:4px 10px;
    border-radius:50px;
    font-size:12px;
    margin-right:8px;
}

.count-badge{
    float:right;
    background:#eef2ff;
    color:#0d6efd;
    padding:4px 10px;
    border-radius:20px;
    font-size:12px;
}

.tool-box{
    text-decoration:none;
    display:block;
    background:#fff;
    border-radius:15px;
    padding:25px;
    height:100%;
    color:#222;
    box-shadow:0 4px 15px rgba(0,0,0,.08);
    transition:.2s;
}

.tool-box:hover{
    transform:translateY(-3px);
}

.tool-icon{
    font-size:34px;
    margin-bottom:10px;
}

.sticky-explore{
    position:sticky;
    top:15px;
    z-index:99;
}

.explore-cta{
    background:linear-gradient(135deg,#0d6efd 0%,#6610f2 100%);
    border-radius:20px;
    overflow:hidden;
    color:#fff;
    box-shadow:0 10px 30px rgba(0,0,0,.15);
}

.explore-cta-content{
    padding:30px;
}

.explore-cta-title{
    font-size:28px;
    font-weight:700;
    margin-bottom:10px;
}

.explore-cta-desc{
    font-size:16px;
    opacity:.95;
    margin-bottom:20px;
    line-height:1.7;
}

.explore-cta-features{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-bottom:20px;
}

.explore-pill{
    background:rgba(255,255,255,.15);
    border:1px solid rgba(255,255,255,.25);
    border-radius:30px;
    padding:8px 14px;
    font-size:14px;
}

.explore-btn{
    display:inline-block;
    background:#fff;
    color:#0d6efd !important;
    text-decoration:none;
    font-weight:700;
    padding:12px 24px;
    border-radius:50px;
    transition:.2s;
}

.explore-btn:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 20px rgba(0,0,0,.15);
}

.explore-highlight{
    font-size:14px;
    opacity:.9;
    margin-top:15px;
}

.best-funds-hero{
    background:linear-gradient(135deg,#0d6efd,#6610f2);
    color:#fff;
    padding:35px;
    border-radius:20px;
    box-shadow:0 15px 35px rgba(0,0,0,.12);
}

.hero-badge{
    display:inline-block;
    background:rgba(255,255,255,.2);
    padding:8px 15px;
    border-radius:30px;
    margin-bottom:15px;
}

.hero-title{
    font-size:42px;
    font-weight:700;
}

.hero-desc{
    font-size:18px;
    opacity:.95;
}
.hero-stats{
    display:flex;
    flex-wrap:wrap;
    gap:15px;
    margin-top:25px;
}

.stat-box{
    display:flex;
    align-items:center;
    gap:15px;

    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.18);

    backdrop-filter:blur(10px);

    border-radius:18px;

    padding:15px 20px;

    min-width:220px;
}

.stat-icon{
    font-size:28px;
    line-height:1;
}

.hero-stats .stat-value{
    font-size:22px;
    font-weight:700;
    color:#fff;
}

.stat-value-small{
    font-size:16px;
    font-weight:700;
    color:#fff;
    line-height:1.3;
}

.hero-stats .stat-label{
    color: #ffffff;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.8px;
    opacity:.8;
}
.quick-tools{
    background:#fff;
    color:#333;
    border-radius:20px;
    padding:20px;
}

.tool-btn{
    display:block;
    text-decoration:none;
    color:#333;
    padding:12px;
    margin-top:10px;
    background:#f8f9fa;
    border-radius:12px;
}

.tool-btn:hover{
    background:#eef3ff;
}

.rank-pill{
    background:#198754;
    color:#fff;
    padding:6px 12px;
    border-radius:20px;
    font-size:13px;
}

.fund-link{
    text-decoration:none;
    font-weight:600;
}

.return-red{
    color:#f20000;
    font-weight:700;
}
.return-green{
    color:#198754;
    font-weight:700;
}
.fund-name{
    margin-bottom:6px;
}

.fund-actions{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
}

.action-chip{
    display:inline-block;
    text-decoration:none;
    font-size:12px;
    font-weight:600;
    padding:4px 10px;
    border-radius:20px;
    transition:.15s;
}

.chip-view{
    background:#e8f4ff;
    color:#0d6efd;
}

.chip-compare{
    background:#fff4e5;
    color:#fd7e14;
}

.chip-similar{
    background:#eafaf1;
    color:#198754;
}

.action-chip:hover{
    transform:translateY(-1px);
    opacity:.9;
}
.company-hero{
    background:linear-gradient(135deg,#0f172a,#1e3a8a);
    color:#fff;
    border-radius:18px;
    padding:35px;
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:25px;
}

.hero-badge{
    display:inline-block;
    background:rgba(255,255,255,.15);
    padding:8px 15px;
    border-radius:50px;
    margin-bottom:15px;
}

.hero-subtitle{
    opacity:.9;
    max-width:700px;
}

.hero-stats{
    display:flex;
    gap:20px;
}

.hero-stat{
    background:rgba(255,255,255,.12);
    backdrop-filter:blur(6px);
    border-radius:15px;
    padding:20px;
    min-width:160px;
    text-align:center;
}

.hero-number{
    font-size:28px;
    font-weight:700;
}

.hero-label{
    opacity:.8;
}

.insight-card{
    background:#fff;
    border-radius:15px;
    padding:25px;
    text-align:center;
    box-shadow:0 10px 25px rgba(0,0,0,.08);
    height:100%;
}

.insight-icon{
    font-size:34px;
    margin-bottom:10px;
}

.insight-title{
    color:#666;
}

.insight-value{
    font-size:28px;
    font-weight:700;
    margin-top:10px;
}

.weight-pill{
    background:#dcfce7;
    color:#166534;
    padding:6px 12px;
    border-radius:50px;
    font-weight:700;
}

.fund-link{
    font-weight:600;
}
.insight-box{
    background:#fff;
    border-radius:16px;
    padding:25px;
    text-align:center;
    box-shadow:0 8px 25px rgba(0,0,0,.08);
    height:100%;
}

.insight-icon{
    font-size:34px;
    margin-bottom:10px;
}

.insight-title{
    color:#666;
}

.category-insight-value{
    font-size:12px;
    font-weight:700;
    margin:10px 0;
}

.top-fund-card{
    display:flex;
    align-items:center;
    gap:15px;
    padding:15px;
    border-radius:12px;
    background:#f8fafc;
    border:1px solid #e5e7eb;
}

.top-fund-rank{
    width:40px;
    height:40px;
    background:#2563eb;
    color:#fff;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
}

.top-fund-content{
    flex:1;
}

.top-fund-weight{
    font-size:18px;
    font-weight:700;
    color:#16a34a;
}

.exposure-row{
    display:flex;
    justify-content:space-between;
    padding:10px 0;
    border-bottom:1px solid #eee;
}
.nav-performance
{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
    gap:12px;
}

.nav-performance-item
{
    border-radius:18px;
    padding:20px 15px;
    text-align:center;
    transition:all .25s ease;
    border:1px solid transparent;
    overflow:hidden;
}

.nav-performance-item:hover
{
    transform:translateY(-4px);

    box-shadow:
        0 10px 25px rgba(0,0,0,.08),
        0 18px 40px rgba(0,0,0,.12);
}
.nav-period
{
    font-size:12px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.8px;
    color:#6c757d;
    margin-bottom:10px;
}

.nav-change
{
    font-size:22px;
    font-weight:800;
    line-height:1;
    white-space:nowrap;
    overflow:hidden;
}

.nav-change.gain
{
    color:#16a34a;
}

.nav-change.loss
{
    color:#dc2626;
}

@media(max-width:768px)
{
    .nav-change
    {
        font-size:22px;
    }
}
.nav-cell-value
{
    font-size:20px;
    font-weight:700;
    white-space:nowrap;
    line-height:1;
}
.nav-period-grid
{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
    gap:15px;
}
.gain-card
{
    background:linear-gradient(
        135deg,
        #ecfdf5 0%,
        #d1fae5 100%
    );

    border-color:#a7f3d0;

    box-shadow:
        0 4px 12px rgba(22,163,74,.12);
}
.loss-card
{
    background:linear-gradient(
        135deg,
        #fef2f2 0%,
        #fee2e2 100%
    );

    border-color:#fecaca;

    box-shadow:
        0 4px 12px rgba(220,38,38,.10);
}
.compare-btn
{
    border-radius:12px;
    padding:12px 22px;
    font-weight:600;
    font-size:15px;
    color: #000;

    box-shadow:
        0 4px 12px rgba(0,0,0,.15);

    transition:all .25s ease;
}

.compare-btn:hover
{
    transform:translateY(-2px);

    box-shadow:
        0 8px 20px rgba(0,0,0,.20);
}
#comparisonCard {
    background: linear-gradient(
        135deg,
        #f8fbff,
        #eef7ff
    );
}

#comparisonCard .fs-5 {
    font-size: 1.4rem;
}

.card {
    transition: all .25s ease;
}

.card:hover {
    transform: translateY(-2px);
}

#summaryBoxA,
#summaryBoxB {
    font-size: 0.95rem;
}
.user-avatar{
    width:36px;
    height:36px;
    min-width:36px;
    min-height:36px;
    border-radius:50%;
    object-fit:cover;
    object-position:center;
    border:2px solid rgba(255,255,255,.25);
    display:block;
}

.navbar .dropdown-toggle{
    color:#fff;
    text-decoration:none;
    font-weight:500;
}

.navbar .dropdown-toggle::after{
    margin-left:.5rem;
}

.navbar .dropdown-toggle:hover{
    color:#fff;
}

.dropdown-menu{
    border-radius:12px;
    border:none;
    box-shadow:0 10px 30px rgba(0,0,0,.15);
}

.dropdown-item{
    padding:.65rem 1rem;
}

/* SIP Performance Table */
/* ==========================================
   Monthly SIP Performance Tables
   ========================================== */

#fundATable,
#fundBTable {
    font-size: 13px !important;
}


/* Header */

#fundATable thead th,
#fundBTable thead th {
    font-weight: 600;
    white-space: nowrap;
    color: #555;
    border-bottom: 2px solid #eee;
    text-align: center;
    vertical-align: middle;
}


/* Body */

#fundATable tbody td,
#fundBTable tbody td {
    white-space: nowrap;
    vertical-align: middle;
    text-align: right;
}


/* First column Month */

#fundATable tbody td:first-child,
#fundBTable tbody td:first-child {
    text-align: center;
    font-weight: 500;
}


/* Hover effect */

#fundATable tbody tr:hover,
#fundBTable tbody tr:hover {
    background-color: rgba(13,110,253,.05);
}


/* Current Value column */

#fundATable td:nth-child(6),
#fundBTable td:nth-child(6) {
    font-weight: 600;
    color: #198754;
}


/* Gain/Loss column */

#fundATable td:last-child,
#fundBTable td:last-child {
    font-weight: 600;
}


/* Positive / Negative */

.sip-positive {
    color: #198754 !important;
}

.sip-negative {
    color: #dc3545 !important;
}


/* Card styling */

.card:has(#fundATable),
.card:has(#fundBTable) {
    border-radius: 12px;
    border: 0;
    box-shadow: 0 2px 10px rgba(0,0,0,.08);
}


/* Table rounded corners */

#fundATable,
#fundBTable {
    border-radius: 8px;
    overflow: hidden;
}


/* Mobile */

@media(max-width:768px){

    #fundATable,
    #fundBTable {
        font-size: 13px !important;
    }


    #fundATable th,
    #fundATable td,
    #fundBTable th,
    #fundBTable td {
        padding: 6px 5px;
    }

}

/*---*/
/* =====================================
   FUND EXPLORER
===================================== */

.fund-explorer {
    border: 1px solid #e9ecef;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 4px 18px rgba(0,0,0,.05);
}


.fund-explorer h3 {
    font-size: 22px;
    font-weight: 700;
    color: #212529;
    border-bottom: 1px solid #eee;
    padding-bottom: 12px;
}


/* =====================================
   FILTER AREA
===================================== */

.fund-explorer .row {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 12px;
    border: 1px solid #eef0f2;
}


.fund-filter,
.fund-explorer select,
.fund-explorer input {
    height: 38px;
    font-size: 13px;
    border-radius: 8px;
    border: 1px solid #dfe3e8;
    transition: all .2s ease;
}


/* Search box special */

#fundSearch {

    background:
    #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23999' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85zm-5.242.656a5 5 0 1 1 0-10 5 5 0 0 1 0 10z'/%3E%3C/svg%3E")
    no-repeat 12px center;

    padding-left:38px;

}


#fundSearch:focus {

    border-color:#0d6efd;

    box-shadow:
    0 0 0 .2rem rgba(13,110,253,.15);

}




.fund-explorer select:focus,
.fund-explorer input:focus {

    border-color:#0d6efd;

    box-shadow:
    0 0 0 .15rem rgba(13,110,253,.15);

}




/* Return filters separator */

#returnYear {

    border-left:4px solid #0d6efd;

}


#returnOperator {

    border-left:4px solid #198754;

}


#returnValue {

    border-left:4px solid #ffc107;

}



/* MF Rank separator */

#sortFilter {

    border-left:4px solid #6f42c1;

    font-weight:600;

}




/* =====================================
   TABLE
===================================== */


.fund-table {

    font-size:13px;

    margin-bottom:0;

}



.fund-table thead th {

    background:#f1f3f5;

    color:#495057;

    font-weight:700;

    white-space:nowrap;

    border-bottom:2px solid #dee2e6;

    padding:10px 12px;

}



.fund-table tbody td {

    padding:10px 12px;

    vertical-align:middle;

    white-space:nowrap;

}



.fund-table tbody tr {

    transition:.2s;

}



.fund-table tbody tr:hover {

    background:#f8fbff;

}




/* Fund name */

.fund-name {

    color:#0d6efd;

    font-weight:600;

    text-decoration:none;

    font-size:13px;

}


.fund-name:hover {

    text-decoration:underline;

}




/* Return columns */

.fund-table td:nth-child(6),
.fund-table td:nth-child(7),
.fund-table td:nth-child(8) {

    color:#198754;

    font-weight:600;

}




/* MF Rank */

.fund-table td:nth-child(9) {

    font-weight:700;

    color:#6f42c1;

}



/* Launch date */

.fund-table td:nth-child(5) {

    color:#6c757d;

    font-size:12px;

}



/* =====================================
   PAGINATION
===================================== */


.fund-pagination {

    display:flex;

    justify-content:center;

    gap:6px;

    margin-top:20px;

}



.fund-pagination button {

    min-width:34px;

    height:34px;

    border-radius:8px;

    border:1px solid #dee2e6;

    background:#fff;

    color:#495057;

    font-size:13px;

}



.fund-pagination button:hover {

    background:#e9f2ff;

    border-color:#0d6efd;

}



.fund-pagination button.active {

    background:#0d6efd;

    color:white;

    border-color:#0d6efd;

}



/* =====================================
   MOBILE
===================================== */


@media(max-width:768px){


.fund-explorer {

    padding:15px!important;

}


.fund-table {

    font-size:12px;

}



.fund-table th,
.fund-table td {

    padding:8px;

}



.fund-explorer .row {

    padding:10px;

}



}

/* Table Sorting */

.fund-table th.sortable {

    cursor:pointer;

    user-select:none;

    transition:.2s;

}


.fund-table th.sortable:hover {

    background:#e7f1ff;

    color:#0d6efd;

}


.fund-table th.sort-active {

    background:#0d6efd;

    color:#fff;

}

.form-control,
.form-select{

    border-radius:14px;
    border:1px solid #dce3ea;
    min-height:52px;

}

.form-control:focus,
.form-select:focus{

    border-color:#0d6efd;
    box-shadow:0 0 0 .18rem rgba(13,110,253,.15);

}

.btn{

    border-radius:14px;

}

.summary-card{

    background:white;
    border-radius:18px;
    padding:22px;
    transition:.25s;

}

.summary-card:hover{

    transform:translateY(-5px);

    box-shadow:0 14px 30px rgba(0,0,0,.12);

}

.metric{

    font-size:2rem;

    font-weight:700;

    color:#0d6efd;

}

.metric-label{

    color:#6c757d;

    font-size:.9rem;

    text-transform:uppercase;

    letter-spacing:.5px;

}

/* ============================================
   PHASE 1 HERO
============================================ */


.phase1-hero{

    background:
    linear-gradient(
        135deg,
        #eff6ff,
        #ffffff
    );

    border-radius:24px;

    padding:35px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:30px;

    margin-top:20px;

}



.phase1-heading{

    max-width:600px;

}



.phase1-tag{

    display:inline-block;

    background:#dbeafe;

    color:#2563eb;

    padding:8px 16px;

    border-radius:50px;

    font-size:14px;

    font-weight:600;

    margin-bottom:15px;

}



.phase1-heading h1{

    font-size:42px;

    font-weight:800;

    color:#111827;

    margin-bottom:12px;

}



.phase1-heading p{

    font-size:18px;

    color:#64748b;

    line-height:1.6;

}



.phase1-score-card{

    background:white;

    width:340px;

    border-radius:22px;

    padding:28px;

    box-shadow:
    0 15px 40px rgba(0,0,0,.08);

    text-align:center;

}



.phase1-label{

    font-size:15px;

    color:#64748b;

}



.phase1-number{

    font-size:55px;

    font-weight:900;

    margin:10px 0;

}



.phase1-progress{

    height:12px;

    background:#e5e7eb;

    border-radius:20px;

    overflow:hidden;

}



.phase1-progress-fill{

    height:100%;

    border-radius:20px;

}



.phase1-status{

    margin-top:18px;

    font-size:18px;

    font-weight:700;

}



.phase1-divider{

    height:1px;

    background:#e5e7eb;

    margin:20px 0;

}



.phase1-diversification{

    display:flex;

    flex-direction:column;

    gap:8px;

    color:#64748b;

}



.phase1-diversification strong{

    color:#111827;

    font-size:22px;

}



.phase1-empty{

    color:#64748b;

    padding:30px;

}



/* MOBILE */

@media(max-width:768px){

.phase1-hero{

    flex-direction:column;

    padding:25px;

}


.phase1-heading h1{

    font-size:32px;

}


.phase1-score-card{

    width:100%;

}

}

/* ============================================
   PHASE 2 : QUICK STATS
============================================ */


.phase2-stats-grid{

    display:grid;

    grid-template-columns:
    repeat(6,1fr);

    gap:18px;

    margin-top:25px;

}



.phase2-stat-card{

    background:#ffffff;

    border-radius:18px;

    padding:22px;

    box-shadow:
    0 8px 25px rgba(0,0,0,.06);

    border:1px solid #f1f5f9;

    transition:.25s;

}



.phase2-stat-card:hover{

    transform:translateY(-5px);

    box-shadow:
    0 15px 35px rgba(0,0,0,.10);

}



.phase2-icon{

    font-size:26px;

    margin-bottom:15px;

}



.phase2-label{

    font-size:14px;

    color:#64748b;

    margin-bottom:8px;

}



.phase2-value{

    font-size:26px;

    font-weight:800;

    color:#111827;

}



.phase2-small{

    font-size:22px;

}



/* TABLET */

@media(max-width:1100px){


.phase2-stats-grid{

grid-template-columns:
repeat(3,1fr);

}


}



/* MOBILE */

@media(max-width:600px){


.phase2-stats-grid{

grid-template-columns:
repeat(2,1fr);

}


.phase2-stat-card{

padding:16px;

}


.phase2-value{

font-size:22px;

}


}

/* ============================================
   PHASE 3 : AI INSIGHT CARD
============================================ */


.phase3-insight-card{


    margin-top:25px;


    background:
    linear-gradient(
        135deg,
        #eff6ff,
        #ffffff
    );


    border-radius:22px;


    padding:30px;


    border:1px solid #dbeafe;


}



.phase3-header{


    display:flex;


    align-items:center;


    gap:15px;


}



.phase3-icon{


    width:50px;


    height:50px;


    border-radius:50%;


    display:flex;


    align-items:center;


    justify-content:center;


    background:#2563eb;


    color:white;


    font-size:25px;


}



.phase3-header h3{


    margin:0;


    font-size:22px;


    font-weight:800;


}



.phase3-header span{


    color:#64748b;


    font-size:14px;


}



.phase3-verdict{


    margin-top:25px;


    font-size:24px;


    font-weight:800;


    color:#111827;


}



.phase3-message{


    margin-top:15px;


    color:#475569;


    font-size:17px;


    line-height:1.7;


    max-width:900px;


}



.phase3-recommendation{


    margin-top:20px;


    background:white;


    border-radius:16px;


    padding:20px;


    border-left:5px solid #2563eb;


}



.phase3-recommendation strong{


    color:#2563eb;


}



.phase3-recommendation p{


    margin-top:8px;


    margin-bottom:0;


    color:#334155;


    line-height:1.6;


}



@media(max-width:600px){


.phase3-insight-card{

padding:20px;

}


.phase3-verdict{

font-size:20px;

}


}

/* ============================================
   PHASE 4 : OVERLAP GAUGE
============================================ */


.phase4-gauge-card{


    margin-top:25px;


    background:#ffffff;


    border-radius:22px;


    padding:30px;


    text-align:center;


    box-shadow:
    0 10px 30px rgba(0,0,0,.06);


}



.phase4-title{


    font-size:20px;


    font-weight:800;


    color:#111827;


}



.phase4-number{


    font-size:60px;


    font-weight:900;


    margin:15px 0;


}



.phase4-meter{


    width:100%;


}



.phase4-track{


    height:18px;


    background:


    linear-gradient(
        90deg,
        #22c55e 0%,
        #22c55e 35%,
        #facc15 55%,
        #f97316 75%,
        #dc2626 100%
    );


    border-radius:50px;


    overflow:hidden;


    position:relative;


}



.phase4-fill{


    height:100%;


    opacity:.95;


    transition:
    width 1.5s ease;


    border-radius:50px;


}



.phase4-scale{


    display:flex;


    justify-content:space-between;


    margin-top:15px;


    font-size:14px;


    color:#475569;


}



.phase4-result{


    margin-top:25px;


    font-size:22px;


    font-weight:800;


}



.phase4-description{


    color:#64748b;


    margin-top:10px;


    line-height:1.6;


}



@media(max-width:600px){


.phase4-number{

font-size:45px;

}


.phase4-scale{

font-size:12px;

}

}

/* ============================================
   PHASE 5 : VENN DIAGRAM
============================================ */


.phase5-venn-card{


    margin-top:25px;


    background:#ffffff;


    border-radius:22px;


    padding:30px;


    text-align:center;


    box-shadow:
    0 10px 30px rgba(0,0,0,.06);


}



.phase5-venn-card h3{


    font-size:22px;

    font-weight:800;

    margin-bottom:5px;

}



.phase5-venn-card p{


    color:#64748b;

}



.phase5-venn-container{


    position:relative;


    height:280px;


    margin-top:35px;


    display:flex;


    justify-content:center;


    align-items:center;


}



.phase5-circle{


    width:220px;


    height:220px;


    border-radius:50%;


    display:flex;


    flex-direction:column;


    justify-content:center;


    align-items:center;


    color:white;


    position:absolute;


    font-weight:700;


}



.phase5-left{


    background:
    rgba(37,99,235,.75);


    transform:translateX(-95px);


}



.phase5-right{


    background:
    rgba(16,185,129,.75);


    transform:translateX(81px);


}



.phase5-common{


    z-index:5;


    width:110px;


    height:110px;


    border-radius:50%;


    background:#f59e0b;


    color:white;


    display:flex;


    flex-direction:column;


    justify-content:center;


    align-items:center;


    box-shadow:
    0 10px 25px rgba(0,0,0,.2);


}



.phase5-common strong{


    font-size:30px;


}



.phase5-fund-name{


    font-size:16px;


}



.phase5-number{


    font-size:40px;


    margin-top:8px;


}



.phase5-circle span{


    font-size:13px;


}



@media(max-width:600px){


.phase5-circle{


width:150px;

height:150px;

}



.phase5-left{

transform:translateX(-45px);

}



.phase5-right{

transform:translateX(45px);

}



.phase5-common{

width:80px;

height:80px;

}



.phase5-common strong{

font-size:22px;

}



}
/* ============================================
   PHASE 6 : HOLDINGS TABLE
============================================ */


.phase6-table-card{


margin-top:25px;


background:#fff;


border-radius:22px;


padding:30px;


box-shadow:
0 10px 30px rgba(0,0,0,.06);


}



.phase6-table-card h3{


font-size:22px;

font-weight:800;

margin-bottom:5px;


}



.phase6-table-card p{


color:#64748b;

margin-bottom:25px;


}



.phase6-table{


width:100%;


border-collapse:collapse;


}



.phase6-table th{


background:#f8fafc;


padding:15px;


font-size:14px;


color:#475569;


text-align:left;


}



.phase6-table td{


padding:15px;


border-bottom:1px solid #f1f5f9;


color:#334155;


}



.phase6-company{


font-weight:700;


color:#111827!important;


}



.phase6-positive{


background:#dcfce7;


color:#15803d;


padding:5px 10px;


border-radius:20px;


font-weight:700;


font-size:13px;


}



.phase6-negative{


background:#fee2e2;


color:#b91c1c;


padding:5px 10px;


border-radius:20px;


font-weight:700;


font-size:13px;


}



.phase6-table tbody tr{


transition:.2s;


}



.phase6-table tbody tr:hover{


background:#f8fafc;


}



@media(max-width:700px){


.phase6-table{


font-size:13px;


}



.phase6-table th,
.phase6-table td{


padding:10px;


}


}

/* ============================================
   PHASE 7 : UNIQUE HOLDINGS
============================================ */


.phase7-wrapper{


display:grid;


grid-template-columns:
repeat(2,1fr);


gap:25px;


margin-top:25px;


}



.phase7-column{


background:#ffffff;


border-radius:22px;


padding:30px;


box-shadow:
0 10px 30px rgba(0,0,0,.06);


}



.phase7-column h3{


font-size:22px;


font-weight:800;


margin-bottom:5px;


}



.phase7-column p{


color:#64748b;


margin-bottom:20px;


}



.phase7-list{


display:flex;


flex-direction:column;


gap:12px;


}



.phase7-item{


display:flex;


justify-content:space-between;


align-items:center;


padding:14px 16px;


border-radius:14px;


font-weight:600;


}



.phase7-blue{


background:#eff6ff;


color:#1d4ed8;


}



.phase7-green{


background:#ecfdf5;


color:#047857;


}



.phase7-item strong{


font-size:15px;


background:white;


padding:5px 10px;


border-radius:20px;


}



@media(max-width:768px){


.phase7-wrapper{


grid-template-columns:1fr;


}


}

/* ============================================
   PHASE 8 : SECTOR COMPARISON
============================================ */


.phase8-sector-card{


margin-top:25px;


background:#ffffff;


border-radius:22px;


padding:30px;


box-shadow:
0 10px 30px rgba(0,0,0,.06);


}



.phase8-sector-card h3{


font-size:22px;


font-weight:800;


margin-bottom:5px;


}



.phase8-sector-card p{


color:#64748b;


margin-bottom:25px;


}



.phase8-row{


padding:20px 0;


border-bottom:1px solid #f1f5f9;


}



.phase8-sector-name{


font-weight:800;


font-size:17px;


margin-bottom:15px;


color:#111827;


}



.phase8-fund{


display:grid;


grid-template-columns:
180px 1fr 70px;


align-items:center;


gap:15px;


margin:12px 0;


}



.phase8-fund span{


font-size:13px;


color:#64748b;


overflow:hidden;


text-overflow:ellipsis;


white-space:nowrap;


}



.phase8-track{


height:12px;


background:#e2e8f0;


border-radius:20px;


overflow:hidden;


}



.phase8-bar{


height:100%;


border-radius:20px;


transition:1s;


}



.phase8-bar.blue{


background:#2563eb;


}



.phase8-bar.green{


background:#10b981;


}



.phase8-fund strong{


font-size:14px;


}



@media(max-width:768px){


.phase8-fund{


grid-template-columns:
100px 1fr 50px;


gap:8px;


}



.phase8-fund span{


font-size:11px;


}


}

/* ============================================
   PHASE 9 : MARKET CAP STYLE
============================================ */


.phase9-market-card{


margin-top:25px;


background:#ffffff;


border-radius:22px;


padding:30px;


box-shadow:
0 10px 30px rgba(0,0,0,.06);


}



.phase9-market-card h3{


font-size:22px;


font-weight:800;


margin-bottom:5px;


}



.phase9-market-card p{


color:#64748b;


margin-bottom:25px;


}



.phase9-row{


padding:20px 0;


border-bottom:1px solid #f1f5f9;


}



.phase9-title{


font-size:18px;


font-weight:800;


margin-bottom:18px;


color:#111827;


}



.phase9-column{


display:grid;


grid-template-columns:
180px 1fr 70px;


align-items:center;


gap:15px;


margin-bottom:12px;


}



.phase9-label{


font-size:13px;


color:#64748b;


overflow:hidden;


white-space:nowrap;


text-overflow:ellipsis;


}



.phase9-track{


height:14px;


background:#e2e8f0;


border-radius:30px;


overflow:hidden;


}



.phase9-fill{


height:100%;


border-radius:30px;


}



.phase9-fill.blue{


background:#2563eb;


}



.phase9-fill.green{


background:#10b981;


}



.phase9-column strong{


font-size:14px;


}



@media(max-width:700px){


.phase9-column{


grid-template-columns:
90px 1fr 45px;


gap:8px;


}



.phase9-label{


font-size:11px;


}


}

/* ============================================
   PHASE 10 : RISK RETURN
============================================ */


.phase10-risk-card{


margin-top:25px;


background:#ffffff;


border-radius:22px;


padding:30px;


box-shadow:
0 10px 30px rgba(0,0,0,.06);


}



.phase10-risk-card h3{


font-size:22px;


font-weight:800;


margin-bottom:5px;


}



.phase10-risk-card p{


color:#64748b;


margin-bottom:25px;


}



.phase10-row{


display:grid;


grid-template-columns:
1.3fr 1fr 1fr;


padding:16px;


border-bottom:1px solid #f1f5f9;


align-items:center;


}



.phase10-head{


background:#f8fafc;


border-radius:12px;


font-weight:700;


}



.phase10-row div{


color:#334155;


}



.phase10-row .positive{


color:#15803d;


font-weight:700;


}



@media(max-width:700px){


.phase10-row{


font-size:13px;


grid-template-columns:
1.2fr 1fr 1fr;


padding:12px;


}


}

/* ============================================
   PHASE 11 : GROWTH CHART
============================================ */


.phase11-growth-card{


margin-top:25px;


background:#ffffff;


border-radius:22px;


padding:30px;


box-shadow:
0 10px 30px rgba(0,0,0,.06);


}



.phase11-growth-card h3{


font-size:22px;


font-weight:800;


}



.phase11-growth-card p{


color:#64748b;


}



.phase11-summary{


display:grid;


grid-template-columns:
repeat(3,1fr);


gap:20px;


margin:25px 0;


}



.phase11-box{


padding:20px;


border-radius:18px;


display:flex;


flex-direction:column;


gap:8px;


}



.phase11-box span{


font-size:14px;


}



.phase11-box strong{


font-size:26px;


}



.phase11-box.blue{


background:#eff6ff;


color:#1d4ed8;


}



.phase11-box.green{


background:#ecfdf5;


color:#047857;


}



.phase11-box.orange{


background:#fff7ed;


color:#c2410c;


}



.phase11-chart{


height:350px;


}



@media(max-width:700px){


.phase11-summary{


grid-template-columns:1fr;


}


}

.star-rating{
    color:#f59e0b;
    font-size:20px;
    letter-spacing:2px;
    line-height:1;
}

/* ============================================
   HERO ACTION BUTTONS
============================================ */

.hero-action-buttons{

    margin-top:20px;

    display:flex;

    justify-content:center;

    gap:15px;

    flex-wrap:wrap;

}

.hero-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:12px 22px;

    border-radius:12px;

    text-decoration:none;

    font-weight:700;

    transition:.25s ease;

}

.hero-btn-primary{

    background:#2563eb;

    color:#fff;

}

.hero-btn-primary:hover{

    background:#1d4ed8;

    color:#fff;

    transform:translateY(-2px);

}

.hero-btn-secondary{

    background:#10b981;

    color:#fff;

}

.hero-btn-secondary:hover{

    background:#059669;

    color:#fff;

    transform:translateY(-2px);

}

@media(max-width:768px){

.hero-action-buttons{

    flex-direction:column;

    align-items:center;

}

.hero-btn{

    width:240px;

}

}