/*
|--------------------------------------------------------------------------
| CFTECOURSES — CHART ENGINE V1
|--------------------------------------------------------------------------
*/

.cfte-market-chart{
    margin:28px 0;
    border:1px solid #dce5ef;
    border-radius:18px;
    overflow:hidden;
    background:#fff;
    box-shadow:0 14px 36px rgba(15,23,42,.07);
    direction:ltr;
}

.cfte-market-chart-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    padding:14px 18px;
    border-bottom:1px solid #e8eef5;
}

.cfte-market-chart-symbol{
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
}

.cfte-market-chart-symbol strong{
    color:#0f172a;
    font-size:15px;
    letter-spacing:.01em;
}

.cfte-market-chart-symbol span{
    color:#64748b;
    font-size:12px;
}

.cfte-market-chart-live{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:11px;
    font-weight:800;
    color:#475569;
    white-space:nowrap;
}

.cfte-market-chart-live::before{
    content:"";
    width:7px;
    height:7px;
    border-radius:50%;
    background:#22c55e;
}

.cfte-market-chart-stage{
    position:relative;
    height:430px;
    background:#fff;
    cursor:crosshair;
    user-select:none;
}

.cfte-market-chart canvas{
    display:block;
    width:100%;
    height:100%;
}

.cfte-market-chart-tooltip{
    position:absolute;
    z-index:5;
    top:10px;
    left:12px;
    display:flex;
    gap:11px;
    flex-wrap:wrap;
    padding:7px 10px;
    border:1px solid rgba(148,163,184,.28);
    border-radius:8px;
    background:rgba(255,255,255,.92);
    backdrop-filter:blur(8px);
    font-size:11px;
    line-height:1.3;
    color:#475569;
    pointer-events:none;
}

.cfte-market-chart-tooltip b{
    color:#0f172a;
    font-weight:800;
}

.cfte-market-chart-lesson{
    direction:rtl;
    padding:16px 18px 18px;
    border-top:1px solid #e8eef5;
    background:#f8fafc;
}

.cfte-market-chart-lesson strong{
    display:block;
    margin-bottom:5px;
    color:#0f172a;
    font-size:14px;
}

.cfte-market-chart-lesson p{
    margin:0 !important;
    color:#475569;
    font-size:14px !important;
    line-height:1.9 !important;
}

.cfte-chart-anatomy{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
    margin-top:12px;
}

.cfte-chart-anatomy span{
    padding:9px 10px;
    border:1px solid #dbe5ef;
    border-radius:10px;
    background:#fff;
    color:#334155;
    font-size:12px;
    font-weight:700;
    text-align:center;
}


/* DARK MODE */

[data-theme="dark"] .cfte-market-chart{
    background:#0b1220;
    border-color:#243244;
    box-shadow:none;
}

[data-theme="dark"] .cfte-market-chart-head{
    border-color:#243244;
}

[data-theme="dark"] .cfte-market-chart-symbol strong{
    color:#f8fafc;
}

[data-theme="dark"] .cfte-market-chart-symbol span,
[data-theme="dark"] .cfte-market-chart-live{
    color:#94a3b8;
}

[data-theme="dark"] .cfte-market-chart-stage{
    background:#0b1220;
}

[data-theme="dark"] .cfte-market-chart-tooltip{
    background:rgba(11,18,32,.92);
    border-color:#334155;
    color:#94a3b8;
}

[data-theme="dark"] .cfte-market-chart-tooltip b{
    color:#f8fafc;
}

[data-theme="dark"] .cfte-market-chart-lesson{
    background:#111b2c;
    border-color:#243244;
}

[data-theme="dark"] .cfte-market-chart-lesson strong{
    color:#f8fafc;
}

[data-theme="dark"] .cfte-market-chart-lesson p{
    color:#cbd5e1;
}

[data-theme="dark"] .cfte-chart-anatomy span{
    background:#0b1220;
    border-color:#334155;
    color:#cbd5e1;
}


@media (max-width:700px){

    .cfte-market-chart-stage{
        height:340px;
    }

    .cfte-market-chart-head{
        padding:12px 14px;
    }

    .cfte-market-chart-tooltip{
        max-width:calc(100% - 24px);
        gap:6px 9px;
        font-size:10px;
    }

    .cfte-market-chart-lesson{
        padding:14px;
    }

    .cfte-chart-anatomy{
        grid-template-columns:1fr;
    }
}


/*
|--------------------------------------------------------------------------
| CFTECOURSES — CHART ENGINE V2
|--------------------------------------------------------------------------
*/

.cfte-chart-date{
    font-weight:800;
    color:#2563eb;
}

[data-theme="dark"] .cfte-chart-date{
    color:#60a5fa;
}


/* Educational visual block */

.cfte-visual-study{
    margin:30px 0;
}

.cfte-visual-study-intro{
    direction:rtl;
    margin:0 0 13px;
}

.cfte-visual-study-intro small{
    display:block;
    margin-bottom:5px;
    color:#2563eb;
    font-size:11px;
    font-weight:900;
    letter-spacing:.06em;
    text-transform:uppercase;
}

.cfte-visual-study-intro h3{
    margin:0 0 7px !important;
    font-size:20px !important;
}

.cfte-visual-study-intro p{
    margin:0 !important;
}


/* Two-chart comparison */

.cfte-chart-pair{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
}

.cfte-chart-pair .cfte-market-chart{
    margin:0;
}

.cfte-chart-pair .cfte-market-chart-stage{
    height:310px;
}


/* Insight beneath chart */

.cfte-chart-insight{
    direction:rtl;
    display:flex;
    gap:12px;
    align-items:flex-start;
    margin-top:13px;
    padding:13px 15px;
    border:1px solid #dbe5ef;
    border-radius:12px;
    background:#f8fafc;
}

.cfte-chart-insight b{
    flex:0 0 auto;
    color:#2563eb;
}

.cfte-chart-insight p{
    margin:0 !important;
    font-size:14px !important;
}

[data-theme="dark"] .cfte-chart-insight{
    border-color:#334155;
    background:#111b2c;
}

[data-theme="dark"] .cfte-chart-insight b{
    color:#60a5fa;
}


/* OHLC badges under first chart */

.cfte-ohlc-guide{
    direction:ltr;
    display:flex;
    flex-wrap:wrap;
    gap:7px;
    margin-top:11px;
}

.cfte-ohlc-guide span{
    padding:5px 9px;
    border-radius:7px;
    background:#eaf1f8;
    color:#334155;
    font-size:11px;
    font-weight:800;
}

[data-theme="dark"] .cfte-ohlc-guide span{
    background:#1e293b;
    color:#e2e8f0;
}


/* Case-study prompts */

.cfte-chart-prompts{
    direction:rtl;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px;
    margin-top:13px;
}

.cfte-chart-prompt{
    padding:11px 12px;
    border:1px solid #dbe5ef;
    border-radius:10px;
    background:#fff;
    color:#334155;
    font-size:13px;
    font-weight:700;
}

[data-theme="dark"] .cfte-chart-prompt{
    border-color:#334155;
    background:#0b1220;
    color:#cbd5e1;
}


@media (max-width:760px){

    .cfte-chart-pair{
        grid-template-columns:1fr;
    }

    .cfte-chart-pair
    .cfte-market-chart-stage{
        height:300px;
    }

    .cfte-chart-prompts{
        grid-template-columns:1fr;
    }

    .cfte-visual-study-intro h3{
        font-size:18px !important;
    }
}


/*
|--------------------------------------------------------------------------
| CFTECOURSES — DOW THEORY VISUALS V1
|--------------------------------------------------------------------------
*/

.cfte-dow-flow{
    direction:rtl;
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:8px;
    margin:14px 0;
}

.cfte-dow-flow > div{
    position:relative;
    padding:12px 10px;
    border:1px solid #dbe5ef;
    border-radius:11px;
    background:#fff;
    text-align:center;
}

.cfte-dow-flow b{
    display:block;
    margin-bottom:4px;
    color:#2563eb;
    font-size:11px;
}

.cfte-dow-flow span{
    font-size:12px;
    font-weight:800;
    color:#334155;
}

.cfte-dow-verdict{
    direction:rtl;
    margin-top:13px;
    padding:14px 16px;
    border-radius:12px;
    border:1px solid #dbe5ef;
    background:#f8fafc;
}

.cfte-dow-verdict strong{
    color:#2563eb;
}

.cfte-dow-case-steps{
    direction:rtl;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px;
    margin-top:13px;
}

.cfte-dow-case-step{
    padding:11px 12px;
    border:1px solid #dbe5ef;
    border-radius:10px;
    background:#fff;
    font-size:13px;
    font-weight:700;
    color:#334155;
}

[data-theme="dark"] .cfte-dow-flow > div,
[data-theme="dark"] .cfte-dow-case-step{
    background:#0b1220;
    border-color:#334155;
    color:#cbd5e1;
}

[data-theme="dark"] .cfte-dow-flow span{
    color:#cbd5e1;
}

[data-theme="dark"] .cfte-dow-verdict{
    background:#111b2c;
    border-color:#334155;
}

[data-theme="dark"] .cfte-dow-flow b,
[data-theme="dark"] .cfte-dow-verdict strong{
    color:#60a5fa;
}

@media(max-width:760px){

    .cfte-dow-flow{
        grid-template-columns:1fr;
    }

    .cfte-dow-case-steps{
        grid-template-columns:1fr;
    }
}


/*
|--------------------------------------------------------------------------
| CFTECOURSES — STRUCTURE CHARTS V3
|--------------------------------------------------------------------------
*/

.cfte-market-chart-stage{
    min-height:390px;
}

.cfte-market-chart canvas{
    cursor:crosshair;
}

/*
 * Give educational charts more breathing room.
 */

.cfte-visual-study{
    margin-top:38px;
    margin-bottom:38px;
}

.cfte-visual-study-intro{
    max-width:850px;
}

.cfte-visual-study-intro h3{
    line-height:1.55;
}

/*
 * Make the chart the visual focus.
 */

.cfte-market-chart{
    box-shadow:
        0 12px 35px rgba(15,23,42,.07);
}

[data-theme="dark"] .cfte-market-chart{
    box-shadow:
        0 14px 40px rgba(0,0,0,.22);
}

@media(max-width:760px){

    .cfte-market-chart-stage{
        min-height:330px;
    }
}


/*
|--------------------------------------------------------------------------
| CFTECOURSES — LESSON 02 STRUCTURE V3
|--------------------------------------------------------------------------
*/

.cfte-visual-study .cfte-chart-insight{
    border-inline-start:4px solid #2563eb;
}

.cfte-dow-verdict{
    line-height:1.8;
}

.cfte-market-chart-stage{
    position:relative;
}

/*
 * Larger desktop chart for structural lessons.
 */

@media(min-width:1000px){

    .cfte-visual-study
    .cfte-market-chart-stage{
        min-height:430px;
    }

    .cfte-chart-pair
    .cfte-market-chart-stage{
        min-height:350px;
    }
}

@media(max-width:760px){

    .cfte-chart-pair{
        grid-template-columns:1fr !important;
    }

    .cfte-chart-pair
    .cfte-market-chart-stage{
        min-height:320px;
    }
}


/*
==========================================================================
 CFTECOURSES — EDUCATIONAL VISUAL SYSTEM V4
==========================================================================
*/

.cfte-v4-study{
    margin:38px 0;
    padding:28px;
    border:1px solid #e2e8f0;
    border-radius:22px;
    background:
        linear-gradient(
            180deg,
            rgba(248,250,252,.96),
            rgba(255,255,255,1)
        );
    overflow:hidden;
}

.cfte-v4-study.compact{
    padding-bottom:24px;
}

.cfte-v4-heading{
    margin-bottom:24px;
}

.cfte-v4-heading > span{
    display:inline-block;
    margin-bottom:8px;
    font-size:11px;
    font-weight:800;
    letter-spacing:.08em;
    color:#2563eb;
}

.cfte-v4-heading h3{
    margin:0 0 8px;
    font-size:24px;
    line-height:1.5;
}

.cfte-v4-heading p{
    margin:0;
    color:#64748b;
    line-height:1.9;
}


/* -------------------------------------------------------
   Anatomy
------------------------------------------------------- */

.cfte-v4-flow{
    display:grid;
    grid-template-columns:
        1fr auto 1fr auto 1fr auto 1.45fr;
    gap:12px;
    align-items:center;
}

.cfte-v4-source,
.cfte-v4-result{
    min-height:118px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    border-radius:18px;
    border:1px solid #dbe3ef;
    background:#fff;
    padding:18px;
}

.cfte-v4-source strong{
    font-size:19px;
    letter-spacing:.06em;
    color:#0f172a;
}

.cfte-v4-source span{
    margin-top:7px;
    color:#64748b;
}

.cfte-v4-result{
    background:#0f172a;
    color:#fff;
    border-color:#0f172a;
}

.cfte-v4-result small{
    opacity:.65;
    font-weight:800;
    letter-spacing:.08em;
}

.cfte-v4-result strong{
    font-size:20px;
    margin:6px 0;
}

.cfte-v4-result span{
    opacity:.82;
}

.cfte-v4-plus,
.cfte-v4-arrow{
    font-weight:900;
    font-size:22px;
    color:#94a3b8;
}

.cfte-v4-note{
    margin-top:18px;
    padding:14px 18px;
    border-radius:14px;
    background:#eff6ff;
    color:#1e3a8a;
    line-height:1.8;
}


/* -------------------------------------------------------
   Information reaction
------------------------------------------------------- */

.cfte-v4-reaction{
    display:grid;
    grid-template-columns:1fr auto 1fr auto 1fr;
    align-items:center;
    gap:14px;
}

.cfte-v4-reaction-card{
    min-height:140px;
    padding:20px;
    border:1px solid #dbe3ef;
    border-radius:18px;
    background:#fff;
    display:flex;
    flex-direction:column;
    justify-content:center;
    text-align:center;
}

.cfte-v4-reaction-card small{
    font-weight:900;
    color:#94a3b8;
}

.cfte-v4-reaction-card strong{
    font-size:18px;
    margin:7px 0;
    color:#0f172a;
}

.cfte-v4-reaction-card span{
    color:#64748b;
}

.cfte-v4-reaction-card.active{
    border-color:#93c5fd;
    background:#eff6ff;
}

.cfte-v4-arrow-big{
    font-size:24px;
    color:#94a3b8;
}

.cfte-v4-focus{
    margin-top:18px;
    display:flex;
    gap:12px;
    align-items:flex-start;
    padding:15px 18px;
    border-radius:14px;
    background:#f8fafc;
}

.cfte-v4-focus b{
    white-space:nowrap;
    color:#0f172a;
}

.cfte-v4-focus span{
    color:#475569;
    line-height:1.8;
}


/* -------------------------------------------------------
   SVG structure
------------------------------------------------------- */

.cfte-v4-diagram,
.cfte-v4-case{
    border:1px solid #dbe3ef;
    border-radius:18px;
    background:#fff;
    padding:10px;
}

.cfte-v4-svg{
    display:block;
    width:100%;
    height:auto;
}

.v4-grid line{
    stroke:#e8edf4;
    stroke-width:1;
    stroke-dasharray:4 7;
}

.v4-price-line{
    fill:none;
    stroke:#0f172a;
    stroke-width:5;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.v4-point circle{
    stroke:#fff;
    stroke-width:4;
}

.v4-point.high circle{
    fill:#2563eb;
}

.v4-point.low circle{
    fill:#0ea5e9;
}

.v4-point text{
    text-anchor:middle;
    font-family:Arial,sans-serif;
    font-weight:800;
    fill:#0f172a;
}

.v4-point text + text{
    font-size:12px;
    font-weight:600;
    fill:#64748b;
}

.v4-leg-label{
    fill:#64748b;
    font-size:13px;
    font-weight:700;
    text-anchor:middle;
}

.v4-direction{
    stroke:#2563eb;
    stroke-width:2;
    stroke-dasharray:8 7;
}

.v4-arrow-head{
    fill:#2563eb;
}

.v4-direction-label{
    fill:#2563eb;
    font-size:13px;
    font-weight:900;
}

.cfte-v4-rule{
    margin-top:16px;
    display:grid;
    grid-template-columns:1fr 1fr 1.4fr;
    gap:12px;
}

.cfte-v4-rule > div{
    padding:14px 16px;
    border-radius:14px;
    background:#f8fafc;
}

.cfte-v4-rule b{
    display:block;
    color:#2563eb;
    font-size:16px;
    margin-bottom:4px;
}

.cfte-v4-rule span{
    color:#475569;
    line-height:1.65;
}


/* -------------------------------------------------------
   Pattern comparison
------------------------------------------------------- */

.cfte-v4-pattern-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
}

.cfte-v4-pattern{
    border:1px solid #dbe3ef;
    border-radius:18px;
    background:#fff;
    padding:18px;
}

.cfte-v4-pattern-title{
    display:flex;
    justify-content:space-between;
    gap:10px;
    margin-bottom:10px;
}

.cfte-v4-pattern-title strong{
    color:#0f172a;
}

.cfte-v4-pattern-title span{
    color:#64748b;
    font-size:13px;
}

.cfte-v4-mini-svg{
    width:100%;
    height:auto;
    display:block;
}

.v4-mini-price{
    fill:none;
    stroke:#0f172a;
    stroke-width:5;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.v4-base-zone{
    fill:rgba(37,99,235,.07);
    stroke:#93c5fd;
    stroke-width:1.5;
    stroke-dasharray:5 5;
}

.v4-zone-text{
    fill:#64748b;
    font-size:12px;
    font-weight:700;
}

.v4-outcome-good{
    fill:#166534;
    font-size:12px;
    font-weight:900;
}

.v4-outcome-bad{
    fill:#991b1b;
    font-size:12px;
    font-weight:900;
}

.cfte-v4-probability{
    margin-top:16px;
    padding:16px 18px;
    border-radius:14px;
    background:#fff7ed;
    display:flex;
    gap:16px;
    align-items:center;
}

.cfte-v4-probability strong{
    direction:ltr;
    white-space:nowrap;
    color:#9a3412;
}

.cfte-v4-probability span{
    color:#7c2d12;
    line-height:1.75;
}


/* -------------------------------------------------------
   Technical vs Fundamental
------------------------------------------------------- */

.cfte-v4-compare{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    gap:18px;
    align-items:center;
}

.cfte-v4-analysis-card{
    min-height:315px;
    border:1px solid #dbe3ef;
    border-radius:20px;
    background:#fff;
    padding:24px;
    text-align:center;
}

.cfte-v4-analysis-card small{
    font-weight:900;
    letter-spacing:.08em;
    color:#64748b;
}

.cfte-v4-big-question{
    font-size:52px;
    font-weight:900;
    line-height:1;
    margin:20px 0 12px;
    color:#2563eb;
}

.cfte-v4-analysis-card.fundamental
.cfte-v4-big-question{
    color:#7c3aed;
}

.cfte-v4-analysis-card > strong{
    display:block;
    font-size:18px;
    color:#0f172a;
}

.cfte-v4-analysis-card ul{
    list-style:none;
    padding:0;
    margin:20px 0;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:8px;
}

.cfte-v4-analysis-card li{
    padding:7px 10px;
    border-radius:999px;
    background:#f1f5f9;
    color:#475569;
    font-size:13px;
}

.cfte-v4-output{
    border-top:1px solid #e2e8f0;
    padding-top:15px;
    color:#475569;
    font-weight:700;
}

.cfte-v4-vs{
    width:50px;
    height:50px;
    border-radius:50%;
    background:#0f172a;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:900;
}


/* -------------------------------------------------------
   Case study
------------------------------------------------------- */

.v4-case-zone{
    fill:rgba(245,158,11,.10);
    stroke:#f59e0b;
    stroke-width:1.5;
    stroke-dasharray:6 5;
}

.v4-case-price{
    fill:none;
    stroke:#0f172a;
    stroke-width:5;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.v4-case-dot{
    fill:#2563eb;
    stroke:#fff;
    stroke-width:3;
}

.v4-case-number{
    fill:#2563eb;
    font-size:14px;
    font-weight:900;
}

.v4-case-zone-label{
    fill:#92400e;
    font-size:13px;
    font-weight:800;
}

.v4-volume rect{
    fill:#cbd5e1;
}

.v4-volume-label{
    fill:#64748b;
    font-size:11px;
    font-weight:800;
}

.cfte-v4-questions{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:10px;
    margin-top:14px;
}

.cfte-v4-questions > div{
    background:#f8fafc;
    border-radius:13px;
    padding:13px;
}

.cfte-v4-questions b{
    display:block;
    color:#2563eb;
    font-size:12px;
    margin-bottom:5px;
}

.cfte-v4-questions span{
    color:#334155;
    font-size:13px;
    line-height:1.6;
}


/* -------------------------------------------------------
   Probability / risk
------------------------------------------------------- */

.cfte-v4-risk-flow{
    display:grid;
    grid-template-columns:
        1fr auto 1fr auto 1fr auto 1fr;
    gap:10px;
    align-items:center;
}

.cfte-v4-risk-flow > div{
    min-height:120px;
    padding:15px;
    border:1px solid #dbe3ef;
    background:#fff;
    border-radius:16px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    text-align:center;
}

.cfte-v4-risk-flow > div.final{
    background:#0f172a;
    color:#fff;
}

.cfte-v4-risk-flow small{
    font-weight:900;
    opacity:.55;
}

.cfte-v4-risk-flow strong{
    margin:5px 0;
    font-size:15px;
}

.cfte-v4-risk-flow span{
    font-size:13px;
    opacity:.78;
}

.cfte-v4-risk-arrow{
    font-size:20px;
    color:#94a3b8;
}

.cfte-v4-warning{
    margin-top:16px;
    padding:13px 16px;
    border-radius:13px;
    background:#fef2f2;
    color:#991b1b;
    text-align:center;
    direction:ltr;
}


/* -------------------------------------------------------
   Dark mode
------------------------------------------------------- */

[data-theme="dark"] .cfte-v4-study{
    border-color:#293548;
    background:
        linear-gradient(
            180deg,
            #111827,
            #0f172a
        );
}

[data-theme="dark"] .cfte-v4-heading h3,
[data-theme="dark"] .cfte-v4-source strong,
[data-theme="dark"] .cfte-v4-reaction-card strong,
[data-theme="dark"] .cfte-v4-pattern-title strong,
[data-theme="dark"] .cfte-v4-analysis-card > strong{
    color:#f8fafc;
}

[data-theme="dark"] .cfte-v4-heading p,
[data-theme="dark"] .cfte-v4-source span,
[data-theme="dark"] .cfte-v4-reaction-card span,
[data-theme="dark"] .cfte-v4-pattern-title span{
    color:#94a3b8;
}

[data-theme="dark"] .cfte-v4-source,
[data-theme="dark"] .cfte-v4-reaction-card,
[data-theme="dark"] .cfte-v4-diagram,
[data-theme="dark"] .cfte-v4-pattern,
[data-theme="dark"] .cfte-v4-analysis-card,
[data-theme="dark"] .cfte-v4-case,
[data-theme="dark"] .cfte-v4-risk-flow > div{
    background:#111827;
    border-color:#334155;
}

[data-theme="dark"] .v4-grid line{
    stroke:#263244;
}

[data-theme="dark"] .v4-price-line,
[data-theme="dark"] .v4-mini-price,
[data-theme="dark"] .v4-case-price{
    stroke:#e2e8f0;
}

[data-theme="dark"] .v4-point text{
    fill:#f8fafc;
}

[data-theme="dark"] .v4-point text + text,
[data-theme="dark"] .v4-leg-label,
[data-theme="dark"] .v4-zone-text,
[data-theme="dark"] .v4-volume-label{
    fill:#94a3b8;
}

[data-theme="dark"] .cfte-v4-rule > div,
[data-theme="dark"] .cfte-v4-questions > div,
[data-theme="dark"] .cfte-v4-focus{
    background:#182235;
}

[data-theme="dark"] .cfte-v4-rule span,
[data-theme="dark"] .cfte-v4-questions span,
[data-theme="dark"] .cfte-v4-focus span{
    color:#cbd5e1;
}


/* -------------------------------------------------------
   Responsive
------------------------------------------------------- */

@media(max-width:900px){

    .cfte-v4-flow{
        grid-template-columns:1fr;
    }

    .cfte-v4-plus,
    .cfte-v4-arrow{
        transform:rotate(90deg);
        text-align:center;
    }

    .cfte-v4-reaction{
        grid-template-columns:1fr;
    }

    .cfte-v4-arrow-big{
        transform:rotate(90deg);
        text-align:center;
    }

    .cfte-v4-pattern-grid{
        grid-template-columns:1fr;
    }

    .cfte-v4-compare{
        grid-template-columns:1fr;
    }

    .cfte-v4-vs{
        margin:auto;
    }

    .cfte-v4-risk-flow{
        grid-template-columns:1fr;
    }

    .cfte-v4-risk-arrow{
        transform:rotate(90deg);
        text-align:center;
    }

    .cfte-v4-questions{
        grid-template-columns:1fr 1fr;
    }

    .cfte-v4-rule{
        grid-template-columns:1fr;
    }
}

@media(max-width:600px){

    .cfte-v4-study{
        padding:18px 14px;
        border-radius:17px;
    }

    .cfte-v4-heading h3{
        font-size:20px;
    }

    .cfte-v4-questions{
        grid-template-columns:1fr;
    }

    .cfte-v4-svg{
        min-width:720px;
    }

    .cfte-v4-diagram,
    .cfte-v4-case{
        overflow-x:auto;
    }
}

/*
==========================================================================
 CFTECOURSES — DOW THEORY VISUAL SYSTEM V4
==========================================================================
*/

.cfte-v4-dow{
    position:relative;
}

.dowv4-process{
    display:grid;
    grid-template-columns:
        1fr auto 1fr auto 1fr auto 1fr auto 1fr;
    gap:10px;
    align-items:center;
}

.dowv4-process > div{
    min-height:135px;
    padding:16px 12px;
    border:1px solid #dbe3ef;
    border-radius:16px;
    background:#fff;
    text-align:center;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.dowv4-process b{
    color:#2563eb;
    font-size:12px;
}

.dowv4-process strong{
    color:#0f172a;
    margin:5px 0;
}

.dowv4-process span{
    color:#64748b;
    font-size:13px;
    line-height:1.6;
}

.dowv4-process i,
.phase-arrow{
    font-style:normal;
    color:#94a3b8;
    font-size:20px;
    font-weight:900;
}

.dowv4-svgbox{
    border:1px solid #dbe3ef;
    background:#fff;
    border-radius:18px;
    padding:12px;
}

.dowv4-svg{
    width:100%;
    height:auto;
    display:block;
}

.dowv4-grid line{
    stroke:#e8edf4;
    stroke-width:1;
    stroke-dasharray:5 7;
}

.dowv4-primary{
    fill:none;
    stroke:#2563eb;
    stroke-width:8;
    opacity:.22;
    stroke-linecap:round;
}

.dowv4-secondary{
    fill:none;
    stroke:#0f172a;
    stroke-width:5;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.dowv4-minor{
    fill:none;
    stroke:#64748b;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.dowv4-label{
    font-family:Arial,sans-serif;
    font-size:14px;
    font-weight:900;
}

.dowv4-label.primary{
    fill:#2563eb;
}

.dowv4-label.secondary{
    fill:#0f172a;
}

.dowv4-label.minor{
    fill:#64748b;
}

.dowv4-callout-line{
    fill:none;
    stroke:#0f172a;
    stroke-width:1.5;
    stroke-dasharray:5 5;
}

.dowv4-callout-line.minor{
    stroke:#64748b;
}

.dowv4-three{
    margin-top:14px;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px;
}

.dowv4-three > div{
    padding:14px;
    border-radius:14px;
    background:#f8fafc;
}

.dowv4-three b{
    display:block;
    color:#2563eb;
    font-size:12px;
    margin-bottom:4px;
}

.dowv4-three span{
    color:#475569;
    line-height:1.6;
}


/* phases */

.dowv4-phases{
    display:grid;
    grid-template-columns:1fr auto 1fr auto 1fr;
    gap:14px;
    align-items:center;
}

.dowv4-phase{
    min-height:190px;
    padding:22px 18px;
    border:1px solid #dbe3ef;
    border-radius:18px;
    background:#fff;
    text-align:center;
}

.phase-num{
    width:38px;
    height:38px;
    border-radius:50%;
    margin:0 auto 12px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#eff6ff;
    color:#2563eb;
    font-weight:900;
}

.dowv4-phase small{
    display:block;
    color:#94a3b8;
    font-weight:900;
    letter-spacing:.08em;
}

.dowv4-phase strong{
    display:block;
    margin:7px 0;
    color:#0f172a;
}

.dowv4-phase span{
    color:#64748b;
    line-height:1.7;
    font-size:13px;
}

.dowv4-phase-road{
    margin-top:16px;
    border-radius:18px;
    background:#f8fafc;
    padding:8px;
}

.dowv4-road{
    fill:none;
    stroke:#2563eb;
    stroke-width:6;
    stroke-linecap:round;
}

.dowv4-phase-road circle{
    fill:#fff;
    stroke:#2563eb;
    stroke-width:5;
}

.dowv4-phase-road text{
    fill:#475569;
    font-size:13px;
    font-weight:800;
}


/* confirmation */

.dowv4-confirm-grid,
.dowv4-compare-structure{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
}

.dowv4-confirm-card,
.dowv4-structure-card{
    border:1px solid #dbe3ef;
    border-radius:18px;
    background:#fff;
    padding:17px;
}

.dowv4-cardhead{
    display:flex;
    justify-content:space-between;
    gap:10px;
    align-items:center;
    margin-bottom:8px;
}

.dowv4-cardhead b{
    color:#0f172a;
}

.dowv4-cardhead span{
    font-size:11px;
    font-weight:900;
    color:#16a34a;
}

.dowv4-confirm-card.warning
.dowv4-cardhead span,
.dowv4-structure-card.danger
.dowv4-cardhead span{
    color:#dc2626;
}

.dowv4-confirm-line{
    fill:none;
    stroke:#2563eb;
    stroke-width:5;
    stroke-linejoin:round;
    stroke-linecap:round;
}

.dowv4-confirm-line.alt{
    stroke:#0ea5e9;
}

.dowv4-nonconfirm-line{
    fill:none;
    stroke:#64748b;
    stroke-width:5;
    stroke-linejoin:round;
    stroke-linecap:round;
}

.dowv4-base{
    stroke:#cbd5e1;
    stroke-width:1;
}

.dowv4-old-high{
    stroke:#ef4444;
    stroke-width:1.5;
    stroke-dasharray:6 5;
}

.dowv4-up{
    fill:#15803d;
    font-size:12px;
    font-weight:900;
}

.dowv4-warn{
    fill:#b45309;
    font-size:12px;
    font-weight:900;
}

.dowv4-verdict{
    margin-top:14px;
    padding:15px 18px;
    border-radius:14px;
    display:flex;
    gap:12px;
    align-items:flex-start;
}

.dowv4-verdict.good{
    background:#f0fdf4;
    color:#166534;
}

.dowv4-verdict.warn{
    background:#fff7ed;
    color:#9a3412;
}

.dowv4-verdict b{
    direction:ltr;
    white-space:nowrap;
}


/* volume */

.dowv4-volume-price{
    fill:none;
    stroke:#0f172a;
    stroke-width:5;
    stroke-linejoin:round;
    stroke-linecap:round;
}

.dowv4-bars rect{
    fill:#94a3b8;
}

.dowv4-bars rect:nth-child(4n),
.dowv4-bars rect:nth-child(4n+1){
    fill:#64748b;
}

.dowv4-volume-text{
    fill:#64748b;
    font-size:12px;
    font-weight:900;
}

.dowv4-pricefirst{
    display:grid;
    grid-template-columns:1fr auto 1fr auto 1fr;
    gap:12px;
    align-items:center;
    margin-top:14px;
}

.dowv4-pricefirst > div{
    padding:15px;
    border-radius:14px;
    background:#f8fafc;
    text-align:center;
}

.dowv4-pricefirst > div.result{
    background:#eff6ff;
}

.dowv4-pricefirst b{
    display:block;
    color:#2563eb;
    font-size:12px;
}

.dowv4-pricefirst strong{
    display:block;
    color:#0f172a;
    margin:3px 0;
}

.dowv4-pricefirst span{
    color:#64748b;
    font-size:13px;
}

.dowv4-pricefirst i{
    font-style:normal;
    font-size:22px;
    font-weight:900;
    color:#94a3b8;
}


/* correction vs reversal */

.dowv4-structure-line{
    fill:none;
    stroke:#2563eb;
    stroke-width:5;
    stroke-linejoin:round;
    stroke-linecap:round;
}

.dowv4-reversal-line{
    fill:none;
    stroke:#dc2626;
    stroke-width:5;
    stroke-linejoin:round;
    stroke-linecap:round;
}

.dowv4-structure-card circle{
    fill:#0ea5e9;
    stroke:#fff;
    stroke-width:3;
}

.dowv4-hl{
    fill:#2563eb;
    font-size:13px;
    font-weight:900;
}

.dowv4-break-level{
    stroke:#ef4444;
    stroke-width:1.5;
    stroke-dasharray:7 6;
}

.dowv4-danger-text{
    fill:#dc2626;
    font-size:12px;
    font-weight:900;
}

.dowv4-structure-card p{
    color:#475569;
    line-height:1.8;
    margin:5px 0 0;
}


/* case */

.dowv4-case-line{
    fill:none;
    stroke:#0f172a;
    stroke-width:5;
    stroke-linejoin:round;
    stroke-linecap:round;
}

.dowv4-secondary-zone{
    fill:rgba(37,99,235,.07);
    stroke:#93c5fd;
    stroke-width:1.5;
    stroke-dasharray:5 5;
}

.dowv4-case-label{
    fill:#2563eb;
    font-size:14px;
    font-weight:900;
}

.dowv4-case-small{
    fill:#64748b;
    font-size:11px;
    font-weight:800;
}

.dowv4-case-steps{
    margin-top:14px;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px;
}

.dowv4-case-steps > div{
    padding:14px;
    border-radius:13px;
    background:#f8fafc;
}

.dowv4-case-steps b{
    display:block;
    color:#2563eb;
    font-size:11px;
    margin-bottom:4px;
}

.dowv4-case-steps span{
    color:#334155;
    font-size:13px;
    line-height:1.6;
}


/* dark */

[data-theme="dark"] .dowv4-process > div,
[data-theme="dark"] .dowv4-svgbox,
[data-theme="dark"] .dowv4-phase,
[data-theme="dark"] .dowv4-confirm-card,
[data-theme="dark"] .dowv4-structure-card{
    background:#111827;
    border-color:#334155;
}

[data-theme="dark"] .dowv4-process strong,
[data-theme="dark"] .dowv4-phase strong,
[data-theme="dark"] .dowv4-cardhead b,
[data-theme="dark"] .dowv4-pricefirst strong{
    color:#f8fafc;
}

[data-theme="dark"] .dowv4-process span,
[data-theme="dark"] .dowv4-phase span,
[data-theme="dark"] .dowv4-structure-card p{
    color:#cbd5e1;
}

[data-theme="dark"] .dowv4-secondary,
[data-theme="dark"] .dowv4-volume-price,
[data-theme="dark"] .dowv4-case-line{
    stroke:#e2e8f0;
}

[data-theme="dark"] .dowv4-label.secondary{
    fill:#e2e8f0;
}

[data-theme="dark"] .dowv4-three > div,
[data-theme="dark"] .dowv4-pricefirst > div,
[data-theme="dark"] .dowv4-case-steps > div,
[data-theme="dark"] .dowv4-phase-road{
    background:#182235;
}

[data-theme="dark"] .dowv4-three span,
[data-theme="dark"] .dowv4-pricefirst span,
[data-theme="dark"] .dowv4-case-steps span{
    color:#cbd5e1;
}


/* responsive */

@media(max-width:900px){

    .dowv4-process{
        grid-template-columns:1fr;
    }

    .dowv4-process i,
    .phase-arrow{
        text-align:center;
        transform:rotate(90deg);
    }

    .dowv4-phases{
        grid-template-columns:1fr;
    }

    .dowv4-confirm-grid,
    .dowv4-compare-structure{
        grid-template-columns:1fr;
    }

    .dowv4-three{
        grid-template-columns:1fr;
    }

    .dowv4-pricefirst{
        grid-template-columns:1fr;
    }

    .dowv4-case-steps{
        grid-template-columns:1fr 1fr;
    }
}

@media(max-width:600px){

    .dowv4-svgbox.scrollable{
        overflow-x:auto;
    }

    .dowv4-svgbox.scrollable .dowv4-svg{
        min-width:760px;
    }

    .dowv4-case-steps{
        grid-template-columns:1fr;
    }

    .dowv4-cardhead{
        align-items:flex-start;
        flex-direction:column;
    }
}

/*
==========================================================================
 CFTECOURSES — DOW PHASES V4.2
 Clear Accumulation → Participation → Late Phase
==========================================================================
*/

.dowv42-phases .cfte-v4-heading{
    margin-bottom:20px;
}

.dowv42-chart-wrap{
    border:1px solid #dbe3ef;
    border-radius:22px;
    background:#fff;
    overflow:hidden;
}

.dowv42-phase-headings{
    display:grid;
    grid-template-columns:330fr 500fr 300fr;
    border-bottom:1px solid #e2e8f0;
}

.dowv42-phase-title{
    display:flex;
    gap:12px;
    align-items:center;
    padding:16px 18px;
}

.dowv42-phase-title + .dowv42-phase-title{
    border-inline-start:1px solid #e2e8f0;
}

.dowv42-phase-title b{
    width:34px;
    height:34px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 34px;
    font-size:11px;
    font-weight:900;
}

.dowv42-phase-title strong{
    display:block;
    color:#0f172a;
    font-size:14px;
}

.dowv42-phase-title span{
    display:block;
    margin-top:2px;
    color:#64748b;
    font-size:12px;
}

.dowv42-phase-title.accumulation{
    background:#f8fafc;
}

.dowv42-phase-title.accumulation b{
    background:#e2e8f0;
    color:#334155;
}

.dowv42-phase-title.participation{
    background:#eff6ff;
}

.dowv42-phase-title.participation b{
    background:#2563eb;
    color:#fff;
}

.dowv42-phase-title.distribution{
    background:#fff7ed;
}

.dowv42-phase-title.distribution b{
    background:#f59e0b;
    color:#fff;
}


/* chart */

.dowv42-main-chart{
    padding:12px 14px 0;
}

.dowv42-svg{
    display:block;
    width:100%;
    height:auto;
}

.dowv42-zone.accumulation{
    fill:#f8fafc;
}

.dowv42-zone.participation{
    fill:#f7fbff;
}

.dowv42-zone.distribution{
    fill:#fffbeb;
}

.dowv42-grid line{
    stroke:#e2e8f0;
    stroke-width:1;
    stroke-dasharray:5 7;
}

.dowv42-separator{
    stroke:#cbd5e1;
    stroke-width:2;
    stroke-dasharray:8 8;
}

.dowv42-price{
    fill:none;
    stroke:#0f172a;
    stroke-width:7;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.dowv42-range{
    stroke:#94a3b8;
    stroke-width:2;
    stroke-dasharray:7 6;
}

.dowv42-svg-label{
    fill:#64748b;
    font-size:13px;
    font-weight:900;
}

.dowv42-point{
    fill:#fff;
    stroke:#2563eb;
    stroke-width:5;
}

.dowv42-hh{
    fill:#15803d;
    font-size:15px;
    font-weight:900;
}

.dowv42-hl{
    fill:#2563eb;
    font-size:15px;
    font-weight:900;
}

.dowv42-ceiling{
    stroke:#f59e0b;
    stroke-width:2;
    stroke-dasharray:8 6;
}

.dowv42-late-label{
    fill:#b45309;
    font-size:12px;
    font-weight:900;
}

.dowv42-stage-label rect{
    stroke-width:1;
}

.dowv42-stage-label text{
    font-size:12px;
    font-weight:800;
}

.dowv42-stage-label.stage1 rect{
    fill:#fff;
    stroke:#cbd5e1;
}

.dowv42-stage-label.stage1 text{
    fill:#475569;
}

.dowv42-stage-label.stage2 rect{
    fill:#eff6ff;
    stroke:#93c5fd;
}

.dowv42-stage-label.stage2 text{
    fill:#1d4ed8;
}

.dowv42-stage-label.stage3 rect{
    fill:#fff7ed;
    stroke:#fdba74;
}

.dowv42-stage-label.stage3 text{
    fill:#9a3412;
}

.dowv42-direction{
    fill:none;
    stroke:#2563eb;
    stroke-width:2;
    stroke-dasharray:8 7;
    opacity:.65;
}

.dowv42-arrow{
    fill:#2563eb;
    opacity:.7;
}

.dowv42-direction-label{
    fill:#2563eb;
    font-size:13px;
    font-weight:900;
}


/* participation */

.dowv42-participation{
    border-top:1px solid #e2e8f0;
    padding:18px;
    background:#f8fafc;
}

.dowv42-part-title{
    font-size:12px;
    font-weight:900;
    color:#334155;
    letter-spacing:.05em;
    margin-bottom:13px;
}

.dowv42-part-title span{
    color:#94a3b8;
    font-weight:600;
    letter-spacing:0;
    margin-inline-start:8px;
}

.dowv42-part-grid{
    display:grid;
    grid-template-columns:330fr 500fr 300fr;
    gap:10px;
}

.dowv42-part-grid > div{
    position:relative;
    padding:14px 14px 14px 18px;
    border-radius:14px;
    background:#fff;
    border:1px solid #e2e8f0;
}

.dowv42-part-grid small{
    display:block;
    color:#94a3b8;
    font-size:10px;
    font-weight:900;
    margin-bottom:3px;
}

.dowv42-part-grid strong{
    display:block;
    color:#0f172a;
    font-size:13px;
}

.dowv42-part-grid p{
    color:#64748b;
    font-size:12px;
    line-height:1.6;
    margin:5px 0 0;
}

.dowv42-dot{
    position:absolute;
    top:16px;
    inset-inline-end:15px;
    width:9px;
    height:9px;
    border-radius:50%;
}

.dowv42-dot.d1{
    background:#94a3b8;
}

.dowv42-dot.d2{
    background:#2563eb;
}

.dowv42-dot.d3{
    background:#f59e0b;
}


/* reading cards */

.dowv42-read{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
    margin-top:15px;
}

.dowv42-read > div{
    padding:16px;
    border:1px solid #e2e8f0;
    border-radius:16px;
    background:#fff;
}

.dowv42-read b{
    display:inline-flex;
    width:29px;
    height:29px;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#eff6ff;
    color:#2563eb;
    font-size:11px;
    margin-bottom:8px;
}

.dowv42-read strong{
    display:block;
    color:#0f172a;
    margin-bottom:5px;
}

.dowv42-read span{
    display:block;
    color:#64748b;
    font-size:13px;
    line-height:1.7;
}

.dowv42-exam-note{
    margin-top:15px;
}


/* dark mode */

[data-theme="dark"] .dowv42-chart-wrap,
[data-theme="dark"] .dowv42-read > div,
[data-theme="dark"] .dowv42-part-grid > div{
    background:#111827;
    border-color:#334155;
}

[data-theme="dark"] .dowv42-phase-headings,
[data-theme="dark"] .dowv42-participation{
    border-color:#334155;
}

[data-theme="dark"] .dowv42-phase-title.accumulation{
    background:#172033;
}

[data-theme="dark"] .dowv42-phase-title.participation{
    background:#12213c;
}

[data-theme="dark"] .dowv42-phase-title.distribution{
    background:#2a2115;
}

[data-theme="dark"] .dowv42-phase-title strong,
[data-theme="dark"] .dowv42-part-grid strong,
[data-theme="dark"] .dowv42-read strong{
    color:#f8fafc;
}

[data-theme="dark"] .dowv42-phase-title span,
[data-theme="dark"] .dowv42-part-grid p,
[data-theme="dark"] .dowv42-read span{
    color:#cbd5e1;
}

[data-theme="dark"] .dowv42-zone.accumulation{
    fill:#111827;
}

[data-theme="dark"] .dowv42-zone.participation{
    fill:#111d31;
}

[data-theme="dark"] .dowv42-zone.distribution{
    fill:#241d12;
}

[data-theme="dark"] .dowv42-price{
    stroke:#f8fafc;
}

[data-theme="dark"] .dowv42-stage-label.stage1 rect{
    fill:#182235;
    stroke:#475569;
}

[data-theme="dark"] .dowv42-stage-label.stage1 text{
    fill:#e2e8f0;
}

[data-theme="dark"] .dowv42-participation{
    background:#172033;
}

[data-theme="dark"] .dowv42-part-title{
    color:#e2e8f0;
}


/* responsive */

@media(max-width:800px){

    .dowv42-chart-wrap{
        overflow:hidden;
    }

    .dowv42-phase-headings{
        grid-template-columns:1fr;
    }

    .dowv42-phase-title + .dowv42-phase-title{
        border-inline-start:0;
        border-top:1px solid #e2e8f0;
    }

    .dowv42-main-chart{
        overflow-x:auto;
    }

    .dowv42-main-chart .dowv42-svg{
        min-width:900px;
    }

    .dowv42-part-grid,
    .dowv42-read{
        grid-template-columns:1fr;
    }

}

/*
==========================================================================
 CFTECOURSES — VISUAL IMAGE STUDY V4.3
==========================================================================
*/

.cfte-v4-image-study .cfte-v4-figure{
    margin:20px 0 0;
    padding:0;
}

.cfte-v4-image-study .cfte-v4-figure img{
    display:block;
    width:100%;
    height:auto;
    border-radius:20px;
    border:1px solid #dbe3ef;
    background:#fff;
    box-shadow:
        0 18px 45px rgba(15,23,42,.08);
}

.cfte-v4-image-study .cfte-v4-figure figcaption{
    margin-top:12px;
    padding:13px 16px;
    border-radius:14px;
    background:#f8fafc;
    border:1px solid #e2e8f0;
    color:#475569;
    font-size:13px;
    line-height:1.8;
}

.cfte-v4-image-study .cfte-v4-figure figcaption strong{
    color:#0f172a;
}

[data-theme="dark"]
.cfte-v4-image-study .cfte-v4-figure img{
    border-color:#334155;
}

[data-theme="dark"]
.cfte-v4-image-study .cfte-v4-figure figcaption{
    background:#172033;
    border-color:#334155;
    color:#cbd5e1;
}

[data-theme="dark"]
.cfte-v4-image-study .cfte-v4-figure figcaption strong{
    color:#f8fafc;
}

@media(max-width:700px){

    .cfte-v4-image-study .cfte-v4-figure img{
        border-radius:14px;
    }

    .cfte-v4-image-study .cfte-v4-figure figcaption{
        font-size:12px;
    }

}

/*
==========================================================================
 CFTECOURSES — MODULE 01 LESSON 03 VISUAL SYSTEM V4
 Trend Degrees / Secondary Reaction / Correction vs Reversal
==========================================================================
*/

.trendv4-study{
    margin-top:26px;
}

.trendv4-svg{
    width:100%;
    height:auto;
    display:block;
}

.trendv4-grid line{
    stroke:#e2e8f0;
    stroke-width:1;
    stroke-dasharray:5 7;
}

.trendv4-price{
    fill:none;
    stroke:#0f172a;
    stroke-width:7;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.trendv4-primary-guide{
    fill:none;
    stroke:#2563eb;
    stroke-width:3;
    stroke-dasharray:10 8;
}

.trendv4-secondary{
    fill:none;
    stroke:#e11d48;
    stroke-width:8;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.trendv4-minor{
    fill:none;
    stroke:#f59e0b;
    stroke-width:5;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.trendv4-point{
    fill:#fff;
    stroke:#2563eb;
    stroke-width:5;
}


/* Visual 01 */

.trendv4-nested{
    border:1px solid #dbe3ef;
    border-radius:22px;
    background:#fff;
    padding:18px;
}

.trendv4-context{
    display:flex;
    align-items:center;
    gap:10px;
    padding:11px 14px;
    background:#eff6ff;
    border:1px solid #bfdbfe;
    border-radius:14px;
    margin-bottom:10px;
}

.trendv4-context span{
    font-size:10px;
    font-weight:900;
    letter-spacing:.08em;
    color:#64748b;
}

.trendv4-context strong{
    color:#1d4ed8;
}

.trendv4-context small{
    color:#64748b;
}

.trendv4-label rect{
    stroke-width:1.5;
}

.trendv4-label text{
    font-size:13px;
    font-weight:900;
}

.trendv4-label.primary-label rect{
    fill:#eff6ff;
    stroke:#93c5fd;
}

.trendv4-label.primary-label text{
    fill:#1d4ed8;
}

.trendv4-label.secondary-label rect{
    fill:#fff1f2;
    stroke:#fda4af;
}

.trendv4-label.secondary-label text{
    fill:#be123c;
}

.trendv4-label.minor-label rect{
    fill:#fffbeb;
    stroke:#fcd34d;
}

.trendv4-label.minor-label text{
    fill:#a16207;
}

.trendv4-core-message{
    display:flex;
    gap:12px;
    align-items:center;
    padding:14px 16px;
    border-radius:14px;
    background:#f8fafc;
    border:1px solid #e2e8f0;
}

.trendv4-core-message strong{
    color:#0f172a;
    white-space:nowrap;
}

.trendv4-core-message span{
    color:#475569;
    line-height:1.7;
}


/* Visual 02 */

.trendv4-levels{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:14px;
}

.trendv4-level{
    position:relative;
    border:1px solid #e2e8f0;
    border-radius:20px;
    background:#fff;
    padding:18px;
    overflow:hidden;
}

.trendv4-level-num{
    position:absolute;
    top:15px;
    inset-inline-end:15px;
    width:34px;
    height:34px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:11px;
    font-weight:900;
    background:#f1f5f9;
    color:#475569;
}

.trendv4-mini-chart{
    height:120px;
    margin-bottom:14px;
}

.trendv4-mini-chart svg{
    width:100%;
    height:100%;
}

.trendv4-mini-chart polyline{
    fill:none;
    stroke:#0f172a;
    stroke-width:7;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.trendv4-level.primary .trendv4-mini-chart polyline{
    stroke:#2563eb;
}

.trendv4-level.secondary .trendv4-mini-chart polyline{
    stroke:#e11d48;
}

.trendv4-level.minor .trendv4-mini-chart polyline{
    stroke:#f59e0b;
}

.trendv4-level > span{
    display:block;
    color:#94a3b8;
    font-size:10px;
    font-weight:900;
    letter-spacing:.08em;
}

.trendv4-level > strong{
    display:block;
    margin-top:3px;
    color:#0f172a;
    font-size:17px;
}

.trendv4-level > small{
    display:block;
    color:#64748b;
    margin-top:2px;
}

.trendv4-level p{
    color:#64748b;
    line-height:1.7;
    min-height:48px;
}

.trendv4-direction{
    display:inline-flex;
    padding:6px 9px;
    border-radius:8px;
    font-size:10px;
    letter-spacing:.04em;
}

.trendv4-direction.up{
    background:#eff6ff;
    color:#1d4ed8;
}

.trendv4-direction.down{
    background:#fff1f2;
    color:#be123c;
}

.trendv4-direction.noise{
    background:#fffbeb;
    color:#a16207;
}


/* Visual 03 */

.trendv4-example{
    border:1px solid #e2e8f0;
    border-radius:22px;
    background:#fff;
    padding:18px;
}

.trendv4-axis{
    fill:#64748b;
    font-size:14px;
    font-weight:900;
}

.trendv4-start{
    fill:#fff;
    stroke:#64748b;
    stroke-width:5;
}

.trendv4-high{
    fill:#fff;
    stroke:#2563eb;
    stroke-width:5;
}

.trendv4-correction{
    fill:#fff;
    stroke:#e11d48;
    stroke-width:5;
}

.trendv4-value-label rect{
    stroke-width:1.5;
}

.trendv4-value-label text{
    font-size:13px;
    font-weight:900;
}

.trendv4-value-label.start rect{
    fill:#f8fafc;
    stroke:#cbd5e1;
}

.trendv4-value-label.start text{
    fill:#475569;
}

.trendv4-value-label.high rect{
    fill:#eff6ff;
    stroke:#93c5fd;
}

.trendv4-value-label.high text{
    fill:#1d4ed8;
}

.trendv4-value-label.correction rect{
    fill:#fff1f2;
    stroke:#fda4af;
}

.trendv4-value-label.correction text{
    fill:#be123c;
}

.trendv4-uptext{
    fill:#2563eb;
    font-size:13px;
    font-weight:900;
}

.trendv4-downtext{
    fill:#be123c;
    font-size:12px;
    font-weight:900;
}

.trendv4-question{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:9px;
    padding:16px;
    background:#f8fafc;
    border-radius:15px;
    margin-top:10px;
}

.trendv4-question > span{
    padding:6px 10px;
    border-radius:8px;
    background:#eff6ff;
    color:#1d4ed8;
    font-weight:900;
}

.trendv4-question > span.pullback{
    background:#fff1f2;
    color:#be123c;
}

.trendv4-question > strong{
    width:100%;
    color:#0f172a;
    margin-top:5px;
}

.trendv4-question p{
    margin:0;
    color:#64748b;
    line-height:1.7;
}


/* Visual 04 */

.trendv4-timeframes{
    display:grid;
    grid-template-columns:1fr auto 1fr auto 1fr;
    gap:10px;
    align-items:center;
}

.trendv4-timeframe{
    border:1px solid #e2e8f0;
    border-radius:18px;
    padding:14px;
    background:#fff;
}

.trendv4-tf-head{
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:9px;
}

.trendv4-tf-head > span{
    width:30px;
    height:30px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#f1f5f9;
    color:#475569;
    font-size:10px;
    font-weight:900;
}

.trendv4-tf-head small{
    display:block;
    color:#94a3b8;
    font-size:9px;
    font-weight:900;
}

.trendv4-tf-head strong{
    display:block;
    color:#0f172a;
    font-size:13px;
}

.trendv4-tf-head > b{
    font-size:11px;
    color:#2563eb;
}

.trendv4-timeframe.secondary .trendv4-tf-head > b{
    color:#be123c;
}

.trendv4-timeframe.minor .trendv4-tf-head > b{
    color:#a16207;
}

.trendv4-timeframe svg{
    width:100%;
    height:135px;
    margin-top:10px;
}

.trendv4-timeframe polyline{
    fill:none;
    stroke-width:7;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.trendv4-timeframe.primary polyline{
    stroke:#2563eb;
}

.trendv4-timeframe.secondary polyline{
    stroke:#e11d48;
}

.trendv4-timeframe.minor polyline{
    stroke:#f59e0b;
}

.trendv4-timeframe p{
    margin:5px 0 0;
    color:#64748b;
    font-size:12px;
    line-height:1.6;
}

.trendv4-zoom-arrow{
    text-align:center;
    color:#94a3b8;
}

.trendv4-zoom-arrow span{
    display:block;
    font-size:8px;
    font-weight:900;
}

.trendv4-zoom-arrow b{
    font-size:24px;
}

.trendv4-equation{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
    gap:10px;
    margin-top:14px;
    padding:14px;
    border:1px solid #dbeafe;
    background:#eff6ff;
    border-radius:14px;
}

.trendv4-equation span{
    font-weight:900;
    color:#1e3a8a;
}

.trendv4-equation > b{
    color:#94a3b8;
}

.trendv4-equation strong{
    color:#0f172a;
}


/* Visual 05 */

.trendv4-compare{
    display:grid;
    grid-template-columns:1fr 54px 1fr;
    align-items:center;
    gap:12px;
}

.trendv4-scenario{
    border:1px solid #e2e8f0;
    border-radius:20px;
    background:#fff;
    padding:16px;
}

.trendv4-scenario-head{
    display:flex;
    gap:10px;
    align-items:center;
}

.trendv4-scenario-head > span{
    width:34px;
    height:34px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:900;
}

.trendv4-scenario.correction .trendv4-scenario-head > span{
    background:#dcfce7;
    color:#15803d;
}

.trendv4-scenario.reversal .trendv4-scenario-head > span{
    background:#fee2e2;
    color:#b91c1c;
}

.trendv4-scenario-head small{
    display:block;
    color:#94a3b8;
    font-size:9px;
    font-weight:900;
}

.trendv4-scenario-head strong{
    display:block;
    color:#0f172a;
}

.trendv4-scenario-head em{
    display:block;
    color:#64748b;
    font-size:11px;
    font-style:normal;
}

.trendv4-scenario svg{
    width:100%;
    height:auto;
    margin-top:10px;
}

.trendv4-base{
    stroke:#cbd5e1;
    stroke-width:2;
    stroke-dasharray:7 6;
}

.trendv4-break-level{
    stroke:#ef4444;
    stroke-width:2;
    stroke-dasharray:7 6;
}

.trendv4-hh{
    fill:#15803d;
    font-size:13px;
    font-weight:900;
}

.trendv4-hl{
    fill:#2563eb;
    font-size:13px;
    font-weight:900;
}

.trendv4-lh,
.trendv4-ll{
    fill:#b91c1c;
    font-size:13px;
    font-weight:900;
}

.trendv4-badpoint{
    fill:#fff;
    stroke:#dc2626;
    stroke-width:5;
}

.trendv4-correction-arrow{
    fill:none;
    stroke:#e11d48;
    stroke-width:3;
    stroke-dasharray:6 5;
}

.trendv4-breaktext{
    fill:#b91c1c;
    font-size:11px;
    font-weight:900;
}

.trendv4-result{
    padding:12px;
    border-radius:12px;
}

.trendv4-result strong{
    display:block;
    font-size:12px;
}

.trendv4-result span{
    display:block;
    margin-top:3px;
    font-size:12px;
    line-height:1.6;
}

.trendv4-result.good{
    background:#f0fdf4;
    color:#166534;
}

.trendv4-result.bad{
    background:#fef2f2;
    color:#991b1b;
}

.trendv4-vs{
    width:48px;
    height:48px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#0f172a;
    color:#fff;
    font-size:11px;
    font-weight:900;
}


/* DARK */

[data-theme="dark"] .trendv4-nested,
[data-theme="dark"] .trendv4-level,
[data-theme="dark"] .trendv4-example,
[data-theme="dark"] .trendv4-timeframe,
[data-theme="dark"] .trendv4-scenario{
    background:#111827;
    border-color:#334155;
}

[data-theme="dark"] .trendv4-price{
    stroke:#f8fafc;
}

[data-theme="dark"] .trendv4-core-message,
[data-theme="dark"] .trendv4-question{
    background:#172033;
    border-color:#334155;
}

[data-theme="dark"] .trendv4-core-message strong,
[data-theme="dark"] .trendv4-question > strong,
[data-theme="dark"] .trendv4-level > strong,
[data-theme="dark"] .trendv4-tf-head strong,
[data-theme="dark"] .trendv4-scenario-head strong{
    color:#f8fafc;
}

[data-theme="dark"] .trendv4-core-message span,
[data-theme="dark"] .trendv4-question p,
[data-theme="dark"] .trendv4-level p,
[data-theme="dark"] .trendv4-timeframe p{
    color:#cbd5e1;
}

[data-theme="dark"] .trendv4-mini-chart polyline{
    stroke:inherit;
}


/* RESPONSIVE */

@media(max-width:900px){

    .trendv4-levels{
        grid-template-columns:1fr;
    }

    .trendv4-timeframes{
        grid-template-columns:1fr;
    }

    .trendv4-zoom-arrow{
        transform:rotate(90deg);
        padding:3px 0;
    }

    .trendv4-compare{
        grid-template-columns:1fr;
    }

    .trendv4-vs{
        margin:auto;
    }

}

@media(max-width:650px){

    .trendv4-nested,
    .trendv4-example{
        overflow-x:auto;
    }

    .trendv4-nested > .trendv4-svg,
    .trendv4-example > .trendv4-svg{
        min-width:780px;
    }

    .trendv4-core-message{
        display:block;
    }

    .trendv4-core-message strong{
        display:block;
        margin-bottom:5px;
    }

}