/* HERO */

.result-hero{
    background:#f7faff;
}

.result-hero h1{
    font-size:58px;
    font-weight:800;
    color:#0a2540;
    line-height:1.1;
}

.result-hero h1 span{
    display:block;
    color:#0d6efd;
}

.result-hero p{
    font-size:18px;
    color:#6b7280;
    margin:20px 0;
}

.hero-image-wrap{
    position:relative;
    text-align:center;
}

.hero-image-wrap img{
    position:relative;
    z-index:2;
    max-height:600px;
}

.result-stats-bar{
    margin-top:-35px;
    position:relative;
    z-index:10;
}

.stats-wrapper{
    background:
    linear-gradient(
        135deg,
        #0d6efd,
        #0a58ca
    );

    border-radius:18px;

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

    overflow:hidden;
}

.stat-item{
    color:#fff;
    text-align:center;
    padding:25px;
}

.stat-item i{
    font-size:28px;
    margin-bottom:10px;
}

.stat-item h4{
    font-weight:700;
}

.stat-item span{
    font-size:14px;
}

.section-heading h2{
    font-size:32px;
    font-weight:700;
    color:#0a2540;
}

.overview-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
}

.overview-card{
    background:#fff;
    border:1px solid #e8edf7;
    border-radius:16px;
    padding:25px;
    text-align:center;
    transition:.3s;
}

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

.overview-card i{
    font-size:28px;
    color:#0d6efd;
    margin-bottom:15px;
}

.overview-card h6{
    color:#6b7280;
}

.overview-card p{
    font-weight:700;
    margin:0;
}

.cutoff-card{
    padding:25px;
    border-radius:18px;
    text-align:center;
    border:1px solid #e8edf7;
}

.cutoff-card h3{
    margin-top:15px;
    font-weight:700;
}

.green{
    background:#f1fbf5;
}

.blue{
    background:#f2f7ff;
}

.orange{
    background:#fff8ef;
}

.purple{
    background:#faf5ff;
}

.stats-grid{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:20px;
}

.stats-card{
    background:#fff;
    border:1px solid #e8edf7;
    border-radius:18px;
    padding:25px;
    text-align:center;
}

.stats-card i{
    font-size:28px;
    margin-bottom:15px;
    color:#0d6efd;
}

.stats-card h4{
    font-weight:700;
}

.stats-card span{
    color:#6b7280;
    font-size:14px;
}

/* ====================================
   ANALYTICS
==================================== */

.analysis-card{
    background:#fff;
    border:1px solid #e8edf7;
    border-radius:18px;
    padding:30px;
    height:100%;
}

.analysis-card table{
    margin:0;
}

.analysis-card thead{
    background:#f7faff;
}

.analysis-card th{
    color:#0a2540;
}

.category-item{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:18px;
}

.category-dot{
    width:14px;
    height:14px;
    border-radius:50%;
}

.category-dot.blue{
    background:#0d6efd;
}

.category-dot.green{
    background:#16a34a;
}

.category-dot.orange{
    background:#f59e0b;
}

.category-dot.purple{
    background:#8b5cf6;
}

.chart-placeholder{
    height:250px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    color:#94a3b8;
}

.chart-placeholder i{
    font-size:80px;
    margin-bottom:15px;
}

/* ====================================
   TOP STATES
==================================== */

.state-rank-card{
    border-radius:20px;
    padding:35px;
    text-align:center;
    color:#fff;
}

.rank-1{
    background:linear-gradient(135deg,#16a34a,#15803d);
}

.rank-2{
    background:linear-gradient(135deg,#0d6efd,#0a58ca);
}

.rank-3{
    background:linear-gradient(135deg,#f59e0b,#d97706);
}

.state-rank-card span{
    font-size:32px;
    font-weight:700;
}

.state-rank-card h4{
    margin-top:10px;
    font-weight:700;
}

.state-rank-card h3{
    font-size:34px;
    margin-top:15px;
}

/* ===============================
   STATE ANALYSIS
================================ */

.state-table thead{
    background:#eef4ff;
}

.state-table th{
    color:#0a2540;
    font-size:14px;
    font-weight:700;
}

.state-table td{
    font-size:14px;
}

/* ===============================
   CATEGORY ANALYSIS
================================ */

.category-layout{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:25px;
}

.donut-chart{

    width:240px;
    height:240px;

    border-radius:50%;

    background:
    conic-gradient(
        #2ecc71 0 44.2%,
        #3b82f6 44.2% 73.7%,
        #f59e0b 73.7% 90.3%,
        #8b5cf6 90.3% 100%
    );

    position:relative;

    flex-shrink:0;
}

.donut-chart::before{

    content:'';

    position:absolute;

    width:130px;
    height:130px;

    background:#fff;

    border-radius:50%;

    top:50%;
    left:50%;

    transform:translate(-50%,-50%);
}

.donut-center{

    position:absolute;

    top:50%;
    left:50%;

    transform:translate(-50%,-50%);

    text-align:center;

    z-index:2;
}

.donut-center h3{
    margin:0;
    font-size:34px;
    font-weight:800;
}

.donut-center span{
    display:block;
    font-weight:700;
}

.donut-center small{
    color:#6b7280;
}

.category-legend{
    flex:1;
}

.legend-item{
    display:flex;
    align-items:flex-start;
    gap:12px;
    margin-bottom:22px;
}

.dot{
    width:14px;
    height:14px;
    border-radius:50%;
    margin-top:5px;
}

.dot.green{background:#2ecc71;}
.dot.blue{background:#3b82f6;}
.dot.orange{background:#f59e0b;}
.dot.purple{background:#8b5cf6;}

.legend-item strong{
    display:block;
    font-size:15px;
}

.legend-item small{
    color:#555;
    font-size:14px;
}

/* ===================================
   COUNSELLING FLOW
=================================== */

.counselling-flow{
    display:flex;
    justify-content:space-between;
    position:relative;
}

.counselling-flow::before{
    content:'';
    position:absolute;
    top:28px;
    left:8%;
    right:8%;
    height:2px;
    background:#dce7ff;
}

.flow-step{
    position:relative;
    z-index:2;
    text-align:center;
}

.flow-icon{
    width:58px;
    height:58px;
    border-radius:50%;
    background:#fff;
    border:2px solid #dce7ff;

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

    margin:auto auto 10px;
}

.flow-step.active .flow-icon{
    background:#fff4dc;
    border-color:#f59e0b;
}

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

.college-cutoff-card{
    border:1px solid #e8edf7;
    border-radius:16px;
    padding:20px;
    text-align:center;
}

.college-cutoff-card strong{
    display:block;
    font-size:24px;
    color:#0d6efd;
    margin:10px 0;
}

/* ===================================
   TRENDS
=================================== */

.trend-bars{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    height:250px;
}

.bar{
    width:45px;
    text-align:center;
}

.bar div{
    background:#0d6efd;
    border-radius:10px 10px 0 0;
    height:100%;
}

.bar.active div{
    background:#22c55e;
}

.line-chart-placeholder{
    height:250px;

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

    color:#94a3b8;
}

.line-chart-placeholder i{
    font-size:60px;
}

/* ===================================
   UPDATES
=================================== */

.update-row{
    display:flex;
    justify-content:space-between;
    padding:15px 0;
    border-bottom:1px solid #edf2f7;
}

.top-states-grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:15px;
}

.state-performance-card{
    background:#fff;
    border:1px solid #e8edf7;
    border-radius:16px;
    padding:20px;
    text-align:center;
}

.trophy{
    font-size:32px;
    margin-bottom:10px;
}

.rank{
    font-size:28px;
    font-weight:700;
    color:#0d6efd;
    margin-bottom:10px;
}

.state-performance-card strong{
    display:block;
    font-size:32px;
    color:#0a2540;
}

.gold{
    background:#fffdf5;
}

.silver{
    background:#fafafa;
}

.bronze{
    background:#fff8f3;
}

/* TIMELINE */

.modern-timeline{
    display:flex;
    justify-content:space-between;
    position:relative;
    text-align:center;
}

.modern-timeline::before{
    content:'';
    position:absolute;
    left:8%;
    right:8%;
    top:30px;
    height:2px;
    background:#dce7ff;
}

.timeline-step{
    width:18%;
    position:relative;
    z-index:2;
}

.timeline-step i{
    width:60px;
    height:60px;
    border-radius:50%;
    background:#fff;
    border:2px solid #dce7ff;

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

    margin:0 auto 10px;
    font-size:20px;
}

.timeline-step h6{
    font-size:14px;
    margin-bottom:4px;
}

.timeline-step small{
    font-size:12px;
    color:#6b7280;
}

/* COLLEGES */

.college-rank-card{
    background:#fff;
    border:1px solid #e8edf7;
    border-radius:16px;
    padding:20px;
    text-align:center;
    height:100%;
    transition:.3s;
}

.college-rank-card:hover{
    transform:translateY(-4px);
}

.college-logo{
    width:60px;
    height:60px;
    object-fit:contain;
    margin-bottom:12px;
}

.college-rank-card h6{
    min-height:45px;
    font-size:14px;
    font-weight:700;
}

.college-rank-card ul{
    list-style:none;
    padding:0;
    margin:12px 0;
}

.college-rank-card li{
    font-size:13px;
    margin-bottom:4px;
}