/* =========================================================================
   Premium course area — everything scoped under .course-shell so it never
   leaks into the rest of the site. Emerald → teal accent, soft shadows.
   ========================================================================= */
.course-shell {
    --c-grad: linear-gradient(135deg, #34d399 0%, #14b8a6 100%);
    --c-emerald: #10b981;
    --c-teal: #14b8a6;
    --c-ink: #1f2a37;
    --c-line: #e4efea;
    background:
        radial-gradient(1100px 380px at 82% -8%, rgba(20,184,166,.10), transparent 60%),
        radial-gradient(820px 340px at -8% 8%, rgba(52,211,153,.10), transparent 55%),
        #f7faf9;
    min-height: calc(100vh - 200px);
    padding: 2.2rem 1rem 3rem;
}
.course-container { max-width: 880px; margin: 0 auto; }

/* ---- Hero band -------------------------------------------------------- */
.course-hero {
    background: var(--c-grad);
    border-radius: 18px;
    color: #fff;
    padding: 1.5rem 1.7rem;
    box-shadow: 0 16px 34px -14px rgba(16,185,129,.55);
    display: flex; align-items: center; gap: 1.25rem;
}
.course-hero .ch-icon { font-size: 2.3rem; opacity: .95; }
.course-hero h1 { color: #fff !important; margin: 0; font-weight: 800; line-height: 1.15; }
.course-hero .ch-sub { color: rgba(255,255,255,.88); font-size: .9rem; }
.course-hero .ch-spacer { flex: 1; }

/* completion ring */
.c-ring {
    --p: 0; width: 78px; height: 78px; border-radius: 50%; flex: 0 0 auto;
    background: conic-gradient(#fff calc(var(--p) * 1%), rgba(255,255,255,.28) 0);
    display: grid; place-items: center;
}
.c-ring-inner {
    width: 60px; height: 60px; border-radius: 50%;
    background: rgba(255,255,255,.16); color: #fff;
    display: grid; place-items: center; font-weight: 800; font-size: .9rem;
    border: 1px solid rgba(255,255,255,.35);
}

/* ---- Timeline / learning path ---------------------------------------- */
.c-path { margin-top: 1.6rem; }
.c-step { position: relative; display: flex; padding: 0 0 1.3rem 3rem; }
.c-step::before {
    content: ""; position: absolute; left: 19px; top: 8px; bottom: -8px;
    width: 2px; background: var(--c-line);
}
.c-step:last-child::before { display: none; }
.c-step.done::before { background: linear-gradient(#34d399, #14b8a6); }
.c-node {
    position: absolute; left: 4px; top: 0; width: 33px; height: 33px; border-radius: 50%;
    display: grid; place-items: center; font-weight: 800; font-size: .85rem; z-index: 1;
    background: #fff; border: 2px solid var(--c-line); color: #9aa7a1;
}
.c-step.done .c-node { background: var(--c-grad); border-color: transparent; color: #fff; }
.c-step.current .c-node {
    background: #fff; border-color: var(--c-emerald); color: var(--c-emerald);
    box-shadow: 0 0 0 5px rgba(16,185,129,.15); animation: cpulse 2.2s infinite;
}
@keyframes cpulse {
    0%,100% { box-shadow: 0 0 0 5px rgba(16,185,129,.15); }
    50%     { box-shadow: 0 0 0 9px rgba(16,185,129,.04); }
}
.c-card {
    flex: 1; background: #fff; border: 1px solid var(--c-line); border-radius: 14px;
    padding: .8rem 1.1rem; display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; transition: transform .15s ease, box-shadow .15s ease;
}
.c-step.done .c-card, .c-step.current .c-card { box-shadow: 0 6px 18px -12px rgba(16,40,30,.3); }
.c-card.is-link:hover { transform: translateY(-2px); box-shadow: 0 14px 26px -14px rgba(16,40,30,.35); }
.c-step.locked .c-card { background: #f5f8f7; color: #9aa7a1; box-shadow: none; }
.c-ch-title { font-weight: 700; color: var(--c-ink); }
.c-step.locked .c-ch-title { font-weight: 600; color: #9aa7a1; }
.c-ch-meta { font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; color: #9aa7a1; }

/* ---- Buttons --------------------------------------------------------- */
.btn-course {
    background: var(--c-grad); color: #fff !important; border: none; font-weight: 700;
    border-radius: 10px; box-shadow: 0 8px 18px -8px rgba(16,185,129,.6);
    transition: filter .15s ease, transform .15s ease;
}
.btn-course:hover { filter: brightness(1.06); transform: translateY(-1px); color: #fff; }
.btn-ghost {
    background: #fff; color: var(--c-teal) !important; border: 1px solid var(--c-line);
    border-radius: 10px; font-weight: 600;
}
.btn-ghost:hover { border-color: var(--c-emerald); color: var(--c-emerald) !important; }

/* ---- Reading (chapter) ----------------------------------------------- */
.c-topbar {
    position: sticky; top: 0; z-index: 30; background: rgba(255,255,255,.86);
    backdrop-filter: blur(8px); border-bottom: 1px solid var(--c-line);
}
.c-topbar-inner { max-width: 880px; margin: 0 auto; padding: .7rem 1rem; display: flex; align-items: center; gap: .8rem; }
.c-progress-line { height: 3px; background: var(--c-grad); width: 0; transition: width .12s ease; }

.course-card {
    background: #fff; border: 1px solid var(--c-line); border-radius: 18px;
    box-shadow: 0 12px 34px -22px rgba(16,40,30,.4); padding: 2rem 2.2rem;
}
.course-prose { font-size: 1.04rem; line-height: 1.78; color: var(--c-ink); }
.course-prose h3 {
    font-weight: 800; font-size: 1.2rem; margin: 1.9rem 0 .55rem; padding-left: .75rem;
    border-left: 4px solid var(--c-emerald); color: var(--c-ink);
}
.course-prose h3:first-child { margin-top: 0; }
.course-prose p { margin: .65rem 0; }
.course-prose ul { margin: .6rem 0 .6rem 1.15rem; }
.course-prose li { margin: .32rem 0; }
.course-prose strong { color: #0f3d33; }
.course-prose code { background: #eef6f3; color: #0f766e; padding: .06em .4em; border-radius: 5px; font-size: .92em; }
.course-prose figure { margin: 1.7rem auto; text-align: center; }
.course-prose figure img { border-radius: 12px; box-shadow: 0 12px 32px -14px rgba(16,40,30,.4); max-width: 100%; }
.course-prose figcaption { font-size: .82rem; color: #6b7c75; margin-top: .55rem; }
/* a "callout" if the author wraps a note in <blockquote> or .c-note */
.course-prose blockquote, .c-note {
    background: #f0fbf7; border-left: 4px solid var(--c-teal); border-radius: 0 10px 10px 0;
    padding: .85rem 1.1rem; margin: 1.2rem 0; color: #134e48;
}

/* ---- Quiz ------------------------------------------------------------ */
.c-dots { display: flex; gap: .45rem; justify-content: center; margin-bottom: 1.4rem; }
.c-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c-line); transition: background .2s, transform .2s; }
.c-dot.answered { background: var(--c-emerald); transform: scale(1.15); }
.q-card {
    background: #fff; border: 1px solid var(--c-line); border-radius: 16px;
    padding: 1.15rem 1.3rem; margin-bottom: 1.1rem; box-shadow: 0 6px 18px -14px rgba(16,40,30,.3);
}
.q-num { background: var(--c-grad); color: #fff; border-radius: 8px; font-weight: 700; }
.c-choice {
    display: flex; align-items: flex-start; gap: .7rem; padding: .65rem .9rem; border-radius: 10px;
    cursor: pointer; border: 2px solid transparent; transition: border-color .15s, background .15s;
    font-size: .92rem;
}
.c-choice:hover { background: #f0fbf7; border-color: #9ee6cf; }
input[type=radio]:checked + .c-choice { background: #e9faf2; border-color: var(--c-emerald); font-weight: 600; }
.q-card input[type=radio] { display: none; }
.c-choice .c-letter { background: #eef2f0; border-radius: 6px; padding: 0 .5em; font-weight: 700; color: #5b6b65; }
input[type=radio]:checked + .c-choice .c-letter { background: var(--c-emerald); color: #fff; }

/* ---- Result ---------------------------------------------------------- */
.result-card {
    background: #fff; border-radius: 22px; box-shadow: 0 22px 60px -26px rgba(16,40,30,.5);
}
@keyframes popIn { 0% { transform: scale(.72); opacity: 0; } 80% { transform: scale(1.04); } 100% { transform: scale(1); opacity: 1; } }
.pop-in { animation: popIn .5s ease forwards; }
.score-ring {
    --p: 0; width: 132px; height: 132px; border-radius: 50%; margin: 0 auto; position: relative;
    background: conic-gradient(var(--c-emerald) calc(var(--p) * 1%), #eef2f0 0);
    display: grid; place-items: center;
}
.score-ring.fail { background: conic-gradient(#f0b429 calc(var(--p) * 1%), #eef2f0 0); }
.score-ring::after { content: ""; width: 104px; height: 104px; border-radius: 50%; background: #fff; }
.score-ring .sr-val { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 800; font-size: 1.7rem; color: var(--c-ink); }
.breakdown-row { display: flex; align-items: flex-start; gap: .6rem; margin-bottom: .7rem; }

/* ---- Completion badge (final exam passed) ---------------------------- */
.course-badge { width: 148px; height: 148px; margin: 0 auto 0.5rem; position: relative; }
.course-badge .cb-rays {
    position: absolute; inset: -10px; border-radius: 50%;
    background: conic-gradient(from 0deg, rgba(251,191,36,.35), rgba(251,191,36,0) 22%, rgba(251,191,36,.35) 50%, rgba(251,191,36,0) 72%, rgba(251,191,36,.35));
    animation: cbspin 9s linear infinite;
}
@keyframes cbspin { to { transform: rotate(360deg); } }
.course-badge .cb-disc {
    position: absolute; inset: 6px; border-radius: 50%;
    background: radial-gradient(circle at 50% 32%, #fef3c7 0%, #fbbf24 48%, #d97706 100%);
    border: 5px solid #fff; box-shadow: 0 14px 30px -10px rgba(180,83,9,.6), inset 0 -6px 14px rgba(146,64,14,.35);
    display: grid; place-items: center;
}
.course-badge .cb-icon { font-size: 2.8rem; color: #fff; filter: drop-shadow(0 2px 2px rgba(146,64,14,.5)); }
.course-badge .cb-check {
    position: absolute; right: 6px; bottom: 6px; width: 38px; height: 38px; border-radius: 50%;
    background: var(--c-grad); color: #fff; display: grid; place-items: center; font-size: 1rem;
    border: 3px solid #fff; box-shadow: 0 6px 14px -6px rgba(16,185,129,.7);
}
.cb-ribbon {
    display: inline-block; margin-top: .8rem; padding: .3rem 1.1rem; border-radius: 999px;
    background: var(--c-grad); color: #fff; font-weight: 800; letter-spacing: .06em;
    text-transform: uppercase; font-size: .72rem; box-shadow: 0 8px 18px -8px rgba(16,185,129,.6);
}

/* reading-time pill */
.read-pill {
    display: inline-flex; align-items: center; gap: .35rem; font-size: .72rem; font-weight: 700;
    color: var(--c-teal); background: #effaf5; border: 1px solid #cdeee1; border-radius: 999px;
    padding: .12rem .6rem;
}

/* ---- Confetti (subtle, brief) ---------------------------------------- */
.confetti {
    position: fixed; top: -12px; width: 9px; height: 14px; border-radius: 2px;
    opacity: .9; z-index: 9999; pointer-events: none; animation: cfall linear forwards;
}
@keyframes cfall { to { transform: translateY(106vh) rotate(560deg); opacity: .35; } }