/* =========================================================
   ACADEMY PAGE
========================================================= */

.academy-hero{
    padding:80px 0 50px;
    border-bottom:1px solid rgba(255,255,255,.06);
}

.academy-hero h1{
    font-size:clamp(42px,6vw,72px);
    line-height:1;
    margin:12px 0 18px;
}

.academy-hero p{
    max-width:760px;
    color:var(--muted);
    font-size:18px;
}

.academy-layout{
    display:grid;
    grid-template-columns:280px 1fr;
    gap:30px;
    padding:50px 0 80px;
}

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

.academy-sidebar{
    position:sticky;
    top:95px;
    align-self:start;
}

.sidebar-card{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:20px;
    padding:22px;
}

.sidebar-card h3{
    margin:0 0 18px;
    font-size:18px;
}

.category-list{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.category-btn{
    width:100%;
    border:none;
    cursor:pointer;
    text-align:left;
    padding:12px 14px;
    border-radius:12px;
    background:#0b100e;
    color:#cbd5d0;
    font-weight:700;
    transition:.2s;
}

.category-btn:hover,
.category-btn.active{
    background:rgba(200,255,40,.1);
    color:var(--lime);
}

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

.academy-toolbar{
    margin-bottom:25px;
}

.academy-search{
    width:100%;
    padding:16px 18px;
    border-radius:14px;
    border:1px solid var(--line);
    background:#080c0a;
    color:#fff;
    font-size:15px;
    outline:none;
}

/* =========================================================
   GRID
========================================================= */

.academy-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
}

.article-card{
    background:linear-gradient(
        145deg,
        #111a17,
        #090e0c
    );
    border:1px solid var(--line);
    border-radius:22px;
    overflow:hidden;
    transition:.25s;
}

.article-card:hover{
    transform:translateY(-4px);
    border-color:#3f5847;
}

.article-thumb{
    aspect-ratio:16/9;
    background:
    linear-gradient(
        135deg,
        rgba(200,255,40,.15),
        rgba(255,255,255,.02)
    );
}

.article-content{
    padding:22px;
}

.article-category{
    display:inline-block;
    padding:6px 10px;
    border-radius:999px;
    background:rgba(200,255,40,.08);
    border:1px solid rgba(200,255,40,.15);
    color:var(--lime);
    font-size:11px;
    font-weight:900;
    text-transform:uppercase;
}

.article-content h3{
    margin:14px 0 10px;
    font-size:21px;
    line-height:1.3;
}

.article-content p{
    color:var(--muted);
    font-size:14px;
    margin:0 0 18px;
}

.article-link{
    color:var(--lime);
    font-weight:800;
    font-size:14px;
}

.hidden-card{
    display:none;
}

/* =========================================================
   LOAD MORE
========================================================= */

.load-wrap{
    text-align:center;
    margin-top:35px;
}

.load-more{
    border:none;
    cursor:pointer;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:1000px){

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

}

@media(max-width:900px){

    .academy-layout{
        grid-template-columns:1fr;
    }

    .academy-sidebar{
        position:static;
    }

}

@media(max-width:700px){

    .academy-grid{
        grid-template-columns:1fr;
    }

}

/* =====================================================
ARTICLE PAGE
===================================================== */

.article-hero{
    padding:70px 0 45px;
    border-bottom:1px solid rgba(255,255,255,.06);
}

.article-category{
    display:inline-flex;
    padding:8px 14px;
    border-radius:999px;
    background:rgba(200,255,40,.08);
    border:1px solid rgba(200,255,40,.18);
    color:var(--lime);
    font-size:12px;
    font-weight:900;
    text-transform:uppercase;
}

.article-hero h1{
    font-size:clamp(40px,6vw,72px);
    line-height:1;
    margin:18px 0;
}

.article-meta{
    display:flex;
    gap:18px;
    flex-wrap:wrap;
    color:var(--muted);
    font-size:14px;
}

/* =====================================================
LAYOUT
===================================================== */

.article-layout{
    display:grid;
    grid-template-columns:260px 1fr;
    gap:40px;
    padding:50px 0 90px;
}

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

.toc{
    position:sticky;
    top:100px;
}

.toc-card{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:18px;
    padding:22px;
}

.toc-card h3{
    margin:0 0 16px;
    font-size:18px;
}

.toc-card a{
    display:block;
    padding:8px 0;
    color:#cdd5d1;
    font-size:14px;
}

.toc-card a:hover{
    color:var(--lime);
}

/* =====================================================
CONTENT
===================================================== */


        
.article-content{
    max-width:850px;
}

.featured-image{
    aspect-ratio:16/8;
    border-radius:24px;
    overflow:hidden;
    margin-bottom:35px;
    border:1px solid var(--line);
}

.featured-image img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.article-content h2{
    font-size:34px;
    margin-top:50px;
    margin-bottom:16px;
}

.article-content h3{
    font-size:25px;
    margin-top:35px;
}

.article-content p{
    color:#c7d0cb;
    font-size:18px;
    line-height:1.9;
}

.article-content ul{
    color:#c7d0cb;
    line-height:1.9;
}

.article-content li{
    margin-bottom:10px;
}

/* =====================================================
VIDEO
===================================================== */

.video-box{
    margin:40px 0;
    border-radius:22px;
    overflow:hidden;
    border:1px solid var(--line);
}

.video-box iframe{
    width:100%;
    aspect-ratio:16/9;
    border:none;
}

/* =====================================================
NOTE BOX
===================================================== */

.note-box{
    margin:40px 0;
    padding:25px;
    border-radius:20px;
    border:1px solid rgba(200,255,40,.2);
    background:rgba(200,255,40,.05);
}

.note-box strong{
    color:var(--lime);
}

/* =====================================================
CTA
===================================================== */

.cta-box{
    margin-top:60px;
    padding:40px;
    text-align:center;
    border-radius:24px;
    background:
    linear-gradient(
        145deg,
        rgba(200,255,40,.08),
        rgba(13,20,18,.95)
    );
    border:1px solid rgba(200,255,40,.18);
}

.cta-box h2{
    margin-top:0;
}

.cta-box p{
    max-width:600px;
    margin:auto;
}

/* =====================================================
RELATED
===================================================== */

.related-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
    margin-top:30px;
}

.related-card{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:20px;
    overflow:hidden;
}

.related-card img{
    aspect-ratio:16/9;
    width:100%;
    object-fit:cover;
}

.related-card-content{
    padding:18px;
}

.related-card h4{
    margin:0 0 8px;
}

/* =====================================================
RESPONSIVE
===================================================== */

@media(max-width:950px){

    .article-layout{
        grid-template-columns:1fr;
    }

    .toc{
        position:static;
    }

}

@media(max-width:700px){

    .related-grid{
        grid-template-columns:1fr;
    }

    .article-content p{
        font-size:17px;
    }

}

/* =========================================
           ChartScalping Special Strategy
           Article-specific styles
        ========================================= */

        .strategy-flow {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
            gap: 10px;
            margin: 30px 0;
        }

        .strategy-step {
            background: #11151a;
            border: 1px solid rgba(200, 255, 40, 0.25);
            border-radius: 10px;
            padding: 14px 16px;
            text-align: center;
            min-width: 145px;
            color: #fff;
            font-size: 14px;
            line-height: 1.4;
        }

        .strategy-step strong {
            display: block;
            color: #c8ff28;
            margin-bottom: 4px;
        }

        .strategy-arrow {
            color: #c8ff28;
            font-size: 22px;
            font-weight: 700;
        }
.rule-box {
            border-left: 4px solid #c8ff28;
            background: rgba(200, 255, 40, 0.06);
            padding: 20px 22px;
            margin: 25px 0;
            border-radius: 0 10px 10px 0;
        }

        .rule-box h3 {
            margin-top: 0;
            color: #c8ff28;
        }
         .formula {
            background: #090c0f;
            border: 1px solid rgba(200,255,40,0.18);
            border-radius: 12px;
            padding: 22px;
            text-align: center;
            margin: 30px 0;
            font-size: 16px;
            line-height: 2;
        }

        .formula span {
            color: #c8ff28;
            font-weight: 700;
        }
        .no-trade-box {
            border: 1px solid rgba(255, 80, 80, 0.35);
            background: rgba(255, 80, 80, 0.05);
            border-radius: 12px;
            padding: 22px;
            margin: 25px 0;
        }

        .no-trade-box h3 {
            color: #ff7777;
            margin-top: 0;
        }
        .confirmation-box {
            border: 1px solid rgba(200, 255, 40, 0.25);
            background: #101419;
            border-radius: 12px;
            padding: 24px;
            margin: 25px 0;
        }

        .confirmation-box ul {
            margin-bottom: 0;
        }
        .model-card {
            background: #101419;
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 14px;
            padding: 25px;
            margin: 25px 0;
        }

        .model-card.sell {
            border-top: 3px solid #ff6b6b;
        }

        .model-card.buy {
            border-top: 3px solid #c8ff28;
        }

        .model-card h3 {
            margin-top: 0;
        }

        .model-card.sell h3 {
            color: #ff7777;
        }

        .model-card.buy h3 {
            color: #c8ff28;
        }
        .formula-box {
            background: #090c0f;
            border: 1px solid rgba(200,255,40,0.18);
            border-radius: 12px;
            padding: 22px;
            text-align: center;
            margin: 30px 0;
            font-size: 16px;
            line-height: 2;
            color: #c8ff28;
            font-weight: 700;
        }