/* =========================================================
   LEARN FOREX  (css/learn.css)
   Uses the tokens already declared in style.css.
   ========================================================= */

body.is-learn{ padding-top:0; }

.learn-page{
    padding-top:130px;    /* clear the fixed nav (accounts for wrapped nav on narrow widths) */
    padding-bottom:80px;
    min-height:100vh;
}
.learn-page .section-inner{
    padding:0 24px;
    max-width:var(--max-w);
    margin:0 auto;
}

/* Breadcrumb: allow long lesson titles to wrap, never overlap */
.learn-crumb{
    line-height:1.5;
    min-width:0;
}
.learn-crumb-module{
    min-width:0;
    flex:1;
    overflow-wrap:anywhere;
    word-break:break-word;
}

.learn-view{ display:block; }
.learn-view[hidden]{ display:none; }

/* ---------------- Landing header ---------------- */
.learn-head{
    text-align:center;
    max-width:780px;
    margin:0 auto 44px;
}
.learn-head .lead{ margin-left:auto; margin-right:auto; }
.learn-head h1{
    font-size:clamp(32px, 5vw, 52px);
    letter-spacing:-0.7px;
    line-height:1.1;
    margin-top:10px;
    margin-bottom:16px;
}

/* ---------------- Dashboard ---------------- */
.learn-dashboard{
    display:grid;
    grid-template-columns:1.6fr 1fr 1fr 1fr;
    gap:14px;
    margin-bottom:40px;
}
.learn-stat{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:20px 22px;
    display:flex;
    flex-direction:column;
    gap:6px;
    position:relative;
    overflow:hidden;
    min-height:140px;
    justify-content:center;
}
.learn-stat-label{
    font-size:11px;
    letter-spacing:2px;
    text-transform:uppercase;
    color:var(--muted);
    font-weight:700;
}
.learn-stat-big{
    font-size:42px;
    font-weight:800;
    color:#fff;
    line-height:1;
    letter-spacing:-1px;
    font-variant-numeric:tabular-nums;
}
.learn-stat-big small{
    font-size:18px;
    color:var(--muted);
    font-weight:600;
    margin-left:2px;
}
.learn-stat-sub{
    color:var(--muted);
    font-size:12px;
    letter-spacing:0.5px;
}

.learn-stat-hero{
    background:linear-gradient(180deg, rgba(255,152,0,0.14), rgba(255,152,0,0.02));
    border-color:rgba(255,152,0,0.35);
}
.learn-stat-hero::after{
    content:"";
    position:absolute;
    right:-40px; top:-40px;
    width:180px; height:180px;
    background:radial-gradient(circle, rgba(255,152,0,0.25), transparent 70%);
    pointer-events:none;
}
.learn-stat-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
}
.learn-stat-tier{
    font-size:14px;
    font-weight:800;
    letter-spacing:0.5px;
    color:var(--primary);
    background:var(--primary-soft);
    padding:5px 12px;
    border-radius:999px;
    border:1px solid rgba(255,152,0,0.3);
}
.learn-stat-tier[data-tier="pro"]{
    color:var(--green);
    background:rgba(0,200,83,0.12);
    border-color:rgba(0,200,83,0.35);
}
.learn-stat-tier[data-tier="elite"]{
    color:var(--red);
    background:rgba(255,23,68,0.12);
    border-color:rgba(255,23,68,0.35);
}
.learn-stat-tier[data-tier="master"]{
    color:#fff;
    background:linear-gradient(90deg, var(--primary), var(--red));
    border-color:transparent;
}
.learn-stat-bar{
    height:8px;
    background:rgba(255,255,255,0.06);
    border-radius:999px;
    overflow:hidden;
    margin-top:8px;
}
.learn-stat-bar-fill{
    height:100%;
    width:0%;
    background:linear-gradient(90deg, var(--primary), #ffc36b);
    border-radius:999px;
    box-shadow:0 0 12px rgba(255,152,0,0.55);
    transition:width 0.6s cubic-bezier(.2,.8,.2,1);
}
.learn-stat-foot{
    display:flex;
    justify-content:space-between;
    font-size:12px;
    color:var(--muted);
    margin-top:4px;
}
.learn-stat-foot strong{ color:#fff; font-variant-numeric:tabular-nums; }

/* ---------------- Quick-access cards ---------------- */
.learn-quick{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
    margin-bottom:48px;
}
.learn-quick-card{
    display:flex;
    align-items:center;
    gap:18px;
    text-decoration:none;
    color:inherit;
    padding:22px 24px;
    border-radius:var(--radius);
    border:1px solid var(--border);
    background:var(--card);
    transition:transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
    position:relative;
    overflow:hidden;
}
.learn-quick-card:hover{
    transform:translateY(-3px);
    border-color:var(--primary);
    background:var(--card-2);
}
.learn-quick-icon{
    width:54px; height:54px;
    display:grid;
    place-items:center;
    background:var(--primary-soft);
    border-radius:16px;
    font-size:26px;
    flex-shrink:0;
}
.learn-quick-body{ flex:1; min-width:0; }
.learn-quick-body h3{
    color:#fff;
    font-size:17px;
    margin-bottom:4px;
}
.learn-quick-body p{ color:var(--muted); font-size:14px; }
.learn-quick-arrow{
    font-size:24px;
    color:var(--primary);
    opacity:0.7;
    transition:transform 0.25s ease, opacity 0.25s ease;
}
.learn-quick-card:hover .learn-quick-arrow{ transform:translateX(4px); opacity:1; }

/* ---------------- Module cards ---------------- */
.learn-section-title{
    font-size:clamp(24px, 3vw, 32px);
    margin-bottom:20px;
}
.learn-modules{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(360px,1fr));
    gap:18px;
    margin-bottom:40px;
}
.learn-module{
    display:block;
    text-decoration:none;
    color:inherit;
    background:var(--card);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:24px;
    transition:transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    position:relative;
}
.learn-module:hover{
    transform:translateY(-4px);
    border-color:var(--primary);
    box-shadow:0 20px 40px rgba(0,0,0,0.3);
}
.learn-module-head{
    display:flex;
    gap:16px;
    margin-bottom:16px;
}
.learn-module-icon{
    width:56px; height:56px;
    border-radius:16px;
    display:grid;
    place-items:center;
    font-size:28px;
    flex-shrink:0;
    background:var(--primary-soft);
    border:1px solid rgba(255,152,0,0.25);
}
.learn-module-icon[data-color="green"]{
    background:rgba(0,200,83,0.12);
    border-color:rgba(0,200,83,0.28);
}
.learn-module-icon[data-color="red"]{
    background:rgba(255,23,68,0.12);
    border-color:rgba(255,23,68,0.28);
}
.learn-module-body{ flex:1; min-width:0; }
.learn-module-index{
    font-size:11px;
    letter-spacing:2px;
    text-transform:uppercase;
    color:var(--primary);
    font-weight:700;
}
.learn-module-body h3{
    color:#fff;
    font-size:19px;
    margin:4px 0 4px;
    letter-spacing:-0.2px;
}
.learn-module-body p{ color:var(--muted); font-size:14px; }

.learn-module-progress{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:14px;
}
.learn-module-bar{
    flex:1;
    height:6px;
    background:rgba(255,255,255,0.06);
    border-radius:999px;
    overflow:hidden;
}
.learn-module-bar-fill{
    height:100%;
    width:0%;
    background:linear-gradient(90deg, var(--primary), #ffc36b);
    border-radius:999px;
    transition:width 0.6s cubic-bezier(.2,.8,.2,1);
}
.learn-module-count{
    font-size:12px;
    color:var(--muted);
    font-variant-numeric:tabular-nums;
    white-space:nowrap;
}
.learn-module-lessons{
    list-style:none;
    padding:0;
    margin:0;
    border-top:1px solid var(--border);
    padding-top:10px;
}
.learn-module-lessons li{
    display:grid;
    grid-template-columns:42px 1fr auto;
    gap:10px;
    align-items:center;
    padding:8px 0;
    font-size:13.5px;
    color:#ddd;
    border-bottom:1px dashed rgba(255,255,255,0.04);
}
.learn-module-lessons li:last-child{ border-bottom:0; }
.learn-module-lessons li.is-done{ color:var(--muted); }
.learn-module-lessons li.is-done .learn-lesson-title{
    text-decoration:line-through;
    text-decoration-color:rgba(255,152,0,0.5);
}
.learn-lesson-num{
    font-size:11px;
    letter-spacing:1px;
    color:var(--primary);
    background:var(--primary-soft);
    padding:3px 7px;
    border-radius:6px;
    text-align:center;
    font-weight:700;
    font-variant-numeric:tabular-nums;
}
.learn-module-lessons li.is-done .learn-lesson-num{
    color:var(--green);
    background:rgba(0,200,83,0.1);
}
.learn-module-lessons li.is-done .learn-lesson-num::after{ content:" ✓"; }
.learn-lesson-mins{
    font-size:11px;
    color:var(--muted);
    font-variant-numeric:tabular-nums;
}

.learn-disclaimer{
    margin-top:30px;
    font-size:13px;
    color:var(--muted);
    padding:14px 16px;
    border:1px dashed var(--border);
    border-radius:var(--radius-sm);
    background:rgba(255,255,255,0.015);
    max-width:780px;
    margin-left:auto;
    margin-right:auto;
}

/* ---------------- Lesson view ---------------- */
.learn-crumb{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:30px;
    font-size:13px;
    flex-wrap:wrap;
}
.learn-crumb-link{
    color:var(--muted);
    text-decoration:none;
    transition:color 0.2s ease;
}
.learn-crumb-link:hover{ color:var(--primary); }
.learn-crumb-sep{ color:var(--muted); opacity:0.5; }
.learn-crumb-module{ color:#eee; font-weight:500; }
.learn-crumb-module .learn-crumb-sep{ margin:0 4px; }

.learn-article{
    max-width:760px;
    margin:0 auto 40px;
}
.learn-article-head{ margin-bottom:30px; }
.learn-article-module{
    display:inline-block;
    font-size:12px;
    letter-spacing:2px;
    text-transform:uppercase;
    color:var(--primary);
    background:var(--primary-soft);
    padding:5px 12px;
    border-radius:999px;
    margin-bottom:16px;
    font-weight:700;
}
.learn-article-head h1{
    font-size:clamp(28px, 4vw, 42px);
    line-height:1.15;
    letter-spacing:-0.5px;
    margin-bottom:14px;
}
.learn-article-meta{
    display:flex;
    gap:12px;
    color:var(--muted);
    font-size:13px;
    align-items:center;
}

.learn-article-body{
    color:#e0e0e0;
    font-size:17px;
    line-height:1.75;
}
.learn-article-body p{ margin-bottom:18px; }
.learn-article-body h4{
    color:var(--primary);
    font-size:17px;
    letter-spacing:-0.2px;
    margin:28px 0 10px;
    font-weight:700;
}
.learn-article-body ul,
.learn-article-body ol{
    padding-left:22px;
    margin-bottom:20px;
}
.learn-article-body li{ margin-bottom:8px; }
.learn-article-body strong{ color:#fff; }
.learn-article-body em{ color:#f0f0f0; font-style:italic; }
.learn-article-body code{
    background:var(--card-2);
    padding:2px 8px;
    border-radius:6px;
    font-size:0.92em;
    color:var(--primary);
    font-family:'SF Mono', 'Consolas', monospace;
    border:1px solid var(--border);
}

.learn-takeaways{
    background:linear-gradient(180deg, rgba(255,152,0,0.1), rgba(255,152,0,0.02));
    border:1px solid rgba(255,152,0,0.3);
    border-radius:var(--radius);
    padding:22px 26px;
    margin-top:40px;
}
.learn-takeaways h4{
    color:var(--primary);
    font-size:12px;
    letter-spacing:2px;
    text-transform:uppercase;
    margin-bottom:12px;
    font-weight:800;
}
.learn-takeaways ul{
    list-style:none;
    padding:0;
    margin:0;
    display:flex;
    flex-direction:column;
    gap:10px;
}
.learn-takeaways li{
    padding-left:24px;
    position:relative;
    color:#f0f0f0;
    font-size:15px;
    line-height:1.55;
}
.learn-takeaways li::before{
    content:"→";
    position:absolute;
    left:0;
    color:var(--primary);
    font-weight:700;
}

/* ---------------- Quiz ---------------- */
.learn-quiz{
    max-width:760px;
    margin:0 auto 32px;
    padding:28px;
    border:1px solid var(--border);
    border-radius:var(--radius);
    background:var(--card);
}
.learn-quiz-head{ margin-bottom:22px; }
.learn-quiz-head h3{ color:#fff; font-size:22px; margin:8px 0 4px; }
.learn-quiz-head p{ color:var(--muted); font-size:14px; }

.learn-quiz-q{
    padding:20px 0;
    border-top:1px solid var(--border);
}
.learn-quiz-q:first-of-type{ border-top:0; padding-top:8px; }
.learn-quiz-q-head{
    display:flex;
    align-items:flex-start;
    gap:14px;
    margin-bottom:14px;
}
.learn-quiz-q-num{
    background:var(--primary-soft);
    color:var(--primary);
    padding:4px 10px;
    border-radius:999px;
    font-size:11px;
    font-weight:800;
    letter-spacing:1px;
    white-space:nowrap;
}
.learn-quiz-q-head p{
    color:#f0f0f0;
    font-size:16px;
    line-height:1.55;
    flex:1;
}

.learn-quiz-options{
    display:flex;
    flex-direction:column;
    gap:8px;
}
.learn-quiz-opt{
    display:flex;
    align-items:center;
    gap:14px;
    width:100%;
    text-align:left;
    padding:14px 18px;
    background:var(--dark-2);
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    color:#e0e0e0;
    font-family:inherit;
    font-size:15px;
    line-height:1.4;
    cursor:pointer;
    transition:all 0.2s ease;
}
.learn-quiz-opt:not(:disabled):hover{
    border-color:var(--primary);
    transform:translateX(2px);
    background:var(--card-2);
}
.learn-quiz-opt-letter{
    width:28px; height:28px;
    border-radius:8px;
    background:var(--card-2);
    border:1px solid var(--border);
    display:grid;
    place-items:center;
    font-weight:700;
    font-size:13px;
    color:var(--muted);
    flex-shrink:0;
    transition:all 0.2s ease;
}
.learn-quiz-opt:hover .learn-quiz-opt-letter{
    color:var(--primary);
    border-color:var(--primary);
    background:var(--primary-soft);
}
.learn-quiz-opt.is-picked{
    border-color:var(--primary);
    background:var(--primary-soft);
}
.learn-quiz-opt.is-correct{
    border-color:var(--green);
    background:rgba(0,200,83,0.1);
    color:#fff;
}
.learn-quiz-opt.is-correct .learn-quiz-opt-letter{
    background:var(--green);
    color:#0a0a0a;
    border-color:var(--green);
}
.learn-quiz-opt.is-wrong{
    border-color:var(--red);
    background:rgba(255,23,68,0.08);
}
.learn-quiz-opt.is-wrong .learn-quiz-opt-letter{
    background:var(--red);
    color:#fff;
    border-color:var(--red);
}
.learn-quiz-opt:disabled{ cursor:default; }

.learn-quiz-explain{
    margin-top:12px;
    padding:14px 18px;
    border-radius:var(--radius-sm);
    font-size:14px;
    line-height:1.55;
    border:1px solid var(--border);
    color:#e6e6e6;
}
.learn-quiz-explain.is-right{
    background:rgba(0,200,83,0.06);
    border-color:rgba(0,200,83,0.3);
}
.learn-quiz-explain.is-wrong{
    background:rgba(255,23,68,0.06);
    border-color:rgba(255,23,68,0.3);
}
.learn-quiz-explain strong{ color:#fff; margin-right:4px; }

.learn-quiz-summary{
    margin-top:22px;
    padding:16px 20px;
    border-radius:var(--radius-sm);
    background:linear-gradient(180deg, rgba(255,152,0,0.14), rgba(255,152,0,0.02));
    border:1px solid rgba(255,152,0,0.3);
    color:#fff;
    font-size:15px;
}
.learn-quiz-summary.is-perfect{
    background:linear-gradient(180deg, rgba(0,200,83,0.14), rgba(0,200,83,0.02));
    border-color:rgba(0,200,83,0.35);
}
.learn-quiz-summary strong{ margin-right:6px; }

.learn-lesson-foot{
    max-width:760px;
    margin:0 auto;
    display:flex;
    justify-content:space-between;
    gap:10px;
}
.learn-lesson-foot .btn:disabled{
    opacity:0.4;
    cursor:not-allowed;
    pointer-events:none;
}

/* ---------------- Chart drill ---------------- */
.learn-drill-head{
    text-align:center;
    max-width:720px;
    margin:0 auto 30px;
}
.learn-drill-head h1{
    font-size:clamp(28px, 4vw, 42px);
    margin-top:10px;
    margin-bottom:12px;
    line-height:1.15;
    letter-spacing:-0.4px;
}

.learn-drill-stage{
    max-width:820px;
    margin:0 auto;
    background:var(--card);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:28px;
    box-shadow:0 30px 80px rgba(0,0,0,0.35);
}
.learn-drill-stats{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px;
    margin-bottom:20px;
}
.learn-drill-stats > div{
    background:var(--dark-2);
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    padding:10px 14px;
    display:flex;
    flex-direction:column;
    gap:2px;
}
.learn-drill-stats small{
    font-size:10px;
    letter-spacing:1.5px;
    text-transform:uppercase;
    color:var(--muted);
    font-weight:600;
}
.learn-drill-stats strong{
    font-size:20px;
    color:#fff;
    font-variant-numeric:tabular-nums;
}

#drillCanvas{
    width:100%;
    height:320px;
    border-radius:var(--radius-sm);
    background:#0e0e0e;
    border:1px solid var(--border);
    display:block;
    margin-bottom:22px;
}

.learn-drill-question h3{
    color:#fff;
    font-size:18px;
    margin-bottom:14px;
}
.learn-drill-options{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    margin-bottom:16px;
}
.learn-drill-opt{
    display:flex;
    align-items:center;
    gap:12px;
    padding:14px 16px;
    background:var(--dark-2);
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    color:#e0e0e0;
    font-family:inherit;
    font-size:14px;
    font-weight:500;
    cursor:pointer;
    transition:all 0.2s ease;
    text-align:left;
}
.learn-drill-opt:not(:disabled):hover{
    border-color:var(--primary);
    background:var(--card-2);
}
.learn-drill-opt-letter{
    width:26px; height:26px;
    background:var(--card-2);
    border:1px solid var(--border);
    border-radius:6px;
    display:grid;
    place-items:center;
    font-size:12px;
    font-weight:700;
    color:var(--muted);
    flex-shrink:0;
}
.learn-drill-opt.is-correct{
    border-color:var(--green);
    background:rgba(0,200,83,0.1);
    color:#fff;
}
.learn-drill-opt.is-correct .learn-drill-opt-letter{
    background:var(--green); color:#0a0a0a; border-color:var(--green);
}
.learn-drill-opt.is-wrong{
    border-color:var(--red);
    background:rgba(255,23,68,0.08);
}
.learn-drill-opt.is-wrong .learn-drill-opt-letter{
    background:var(--red); color:#fff; border-color:var(--red);
}
.learn-drill-opt:disabled{ cursor:default; }

.learn-drill-explain{
    padding:14px 18px;
    border-radius:var(--radius-sm);
    font-size:14px;
    line-height:1.6;
    margin-bottom:16px;
    color:#e6e6e6;
    border:1px solid var(--border);
}
.learn-drill-explain.is-right{
    background:rgba(0,200,83,0.08);
    border-color:rgba(0,200,83,0.3);
}
.learn-drill-explain.is-wrong{
    background:rgba(255,23,68,0.08);
    border-color:rgba(255,23,68,0.3);
}
.learn-drill-explain strong{ color:#fff; margin-right:4px; }
.learn-drill-explain em{ color:var(--primary); font-style:normal; font-weight:700; }

.learn-drill-actions{
    display:flex;
    justify-content:flex-end;
}

/* ---------------- Daily ---------------- */
.learn-daily-stage{
    max-width:720px;
    margin:0 auto;
    background:var(--card);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:28px;
    box-shadow:0 30px 80px rgba(0,0,0,0.35);
}
.learn-daily-tag{
    display:inline-block;
    font-size:11px;
    letter-spacing:1.5px;
    text-transform:uppercase;
    color:var(--primary);
    background:var(--primary-soft);
    padding:5px 11px;
    border-radius:999px;
    margin-bottom:16px;
    font-weight:700;
}
.learn-daily-q{
    color:#fff;
    font-size:20px;
    line-height:1.5;
    margin-bottom:20px;
    letter-spacing:-0.2px;
}

/* ---------------- Toast ---------------- */
.learn-toast{
    position:fixed;
    bottom:24px;
    left:50%;
    transform:translateX(-50%) translateY(20px);
    background:var(--card-2);
    border:1px solid var(--border);
    padding:12px 22px;
    border-radius:999px;
    color:#fff;
    font-weight:700;
    font-size:14px;
    letter-spacing:0.3px;
    opacity:0;
    transition:all 0.3s cubic-bezier(.2,.8,.2,1);
    pointer-events:none;
    z-index:10000;
    box-shadow:0 20px 50px rgba(0,0,0,0.5);
}
.learn-toast.is-shown{
    opacity:1;
    transform:translateX(-50%) translateY(0);
}
.learn-toast[data-variant="gain"]{
    background:linear-gradient(180deg, rgba(255,152,0,0.2), rgba(255,152,0,0.06));
    border-color:rgba(255,152,0,0.45);
    color:var(--primary);
    box-shadow:0 20px 40px rgba(255,152,0,0.3);
}

/* ---------------- Responsive ---------------- */
@media (max-width:900px){
    .learn-dashboard{ grid-template-columns:1fr 1fr; }
    .learn-stat-hero{ grid-column:1 / -1; }
    .learn-quick{ grid-template-columns:1fr; }
    .learn-drill-options{ grid-template-columns:1fr; }
    .learn-modules{ grid-template-columns:1fr; }
}
@media (max-width:560px){
    .learn-page{ padding-top:140px; }
    .learn-dashboard{ grid-template-columns:1fr; }
    .learn-stat-hero{ grid-column:auto; }
    .learn-stat-big{ font-size:34px; }
    .learn-quiz{ padding:20px; }
    .learn-quiz-opt{ padding:12px 14px; font-size:14px; }
    .learn-drill-stage{ padding:18px; }
    .learn-article-body{ font-size:16px; }
    #drillCanvas{ height:240px; }
}