/* ============================================================
   DYNANCA — BELAJAR (lesson platform) APP
   ============================================================ */

.app-shell{padding-top:var(--header-h);min-height:100vh;display:flex}

/* ---------- Progress rail under header ---------- */
.progress-rail{position:fixed;top:var(--header-h);inset-inline:0;height:3px;background:var(--line);z-index:120}
.progress-rail-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--gold));width:0%;transition:width .5s var(--ease)}

/* ---------- Sidebar ---------- */
.sidebar{
  width:296px;flex:none;border-inline-end:1px solid var(--line);background:var(--paper);
  height:calc(100vh - var(--header-h));position:sticky;top:var(--header-h);overflow-y:auto;
  padding:20px 16px 40px;
}
.sb-search{position:relative;margin-bottom:16px}
.sb-search input{width:100%;padding:11px 14px 11px 38px;border-radius:var(--r-sm);border:1px solid var(--line-strong);background:var(--surface-2);font-size:14px;color:var(--ink)}
.sb-search input:focus{border-color:var(--accent);outline:none}
.sb-search .icon{position:absolute;inset-inline-start:12px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--muted);pointer-events:none}
.sb-search-results{position:absolute;top:calc(100% + 6px);inset-inline:0;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-2);max-height:340px;overflow-y:auto;z-index:20;display:none}
.sb-search-results.open{display:block}
.sb-search-results a{display:block;padding:11px 14px;border-bottom:1px solid var(--line);font-size:13.5px}
.sb-search-results a:last-child{border-bottom:0}
.sb-search-results a:hover,.sb-search-results a.active{background:var(--surface-2)}
.sb-search-results b{display:block;color:var(--ink);font-weight:600}
.sb-search-results span{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.sb-search-empty{padding:16px 14px;font-size:13px;color:var(--muted)}

.sb-progress{display:flex;align-items:center;gap:10px;margin-bottom:18px;font-size:12.5px;color:var(--muted)}
.sb-progress-bar{flex:1;height:6px;border-radius:999px;background:var(--surface-2);overflow:hidden}
.sb-progress-bar span{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--gold));border-radius:999px;transition:width .5s var(--ease)}

.sb-module{margin-bottom:6px}
.sb-module-btn{display:flex;align-items:center;gap:10px;width:100%;padding:10px 8px;border-radius:var(--r-sm);font-size:13px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--ink)}
.sb-module-btn:hover{background:var(--surface-2)}
.sb-module-btn .chev{width:15px;height:15px;color:var(--muted);transition:transform var(--dur-fast);margin-inline-start:auto}
.sb-module.open .sb-module-btn .chev{transform:rotate(90deg)}
.sb-module-num{font-family:var(--fm);color:var(--muted);font-weight:600}
.sb-lessons{display:none;padding-inline-start:10px;border-inline-start:1px solid var(--line);margin-inline-start:19px}
.sb-module.open .sb-lessons{display:block}
.sb-lesson{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--r-sm);font-size:13.5px;color:var(--muted)}
.sb-lesson:hover{background:var(--surface-2);color:var(--ink)}
.sb-lesson[aria-current="true"]{background:var(--accent-soft);color:var(--accent);font-weight:600}
.sb-lesson .dot{width:16px;height:16px;border-radius:50%;border:1.5px solid var(--line-strong);flex:none;display:grid;place-items:center}
.sb-lesson.done .dot{background:var(--good);border-color:var(--good)}
.sb-lesson.done .dot svg{width:10px;height:10px;stroke:#fff;stroke-width:3}
.sb-soon{margin-top:18px;padding:14px;border:1px dashed var(--line-strong);border-radius:var(--r-md);font-size:12.5px;color:var(--muted)}
.sb-soon b{display:block;color:var(--ink);font-size:13px;margin-bottom:4px}

.sb-mobile-toggle{display:none}

/* ---------- Main content ---------- */
.lesson-main{flex:1;min-width:0}
.lesson-wrap{max-width:760px;margin:0 auto;padding:36px var(--gutter) 90px}

.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:13px;color:var(--muted);margin-bottom:22px}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--accent)}
.crumbs .sep{opacity:.5}
.crumbs .current{color:var(--ink);font-weight:600}

.lesson-head{margin-bottom:30px}
.lesson-meta{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:14px}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;letter-spacing:.04em;padding:5px 11px;border-radius:999px;background:var(--surface-2);color:var(--muted)}
.chip.level-beginner{background:var(--good-soft);color:var(--good)}
.chip.level-intermediate{background:var(--gold-soft);color:var(--gold)}
.lesson-head h1{margin-bottom:0}

.lesson-section{margin-top:38px}
.lesson-section h2{font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:14px;display:flex;align-items:center;gap:9px}
.lesson-section h2::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent)}
.lesson-prose p{margin-bottom:14px;color:var(--body);font-size:16px;line-height:1.75}
.lesson-prose p:last-child{margin-bottom:0}
.lesson-prose ul,.lesson-prose ol{margin:12px 0 14px 22px;color:var(--body)}
.lesson-prose li{margin-bottom:7px;line-height:1.65;list-style:disc}
.lesson-prose code{background:var(--surface-2);padding:2px 6px;border-radius:5px;font-size:.9em;color:var(--ink)}

/* ---------- Code block ---------- */
.code-block{background:var(--code-bg);border-radius:var(--r-md);overflow:hidden;box-shadow:var(--sh-1);border:1px solid var(--code-line)}
.cb-top{display:flex;align-items:center;gap:8px;padding:11px 14px;border-bottom:1px solid var(--code-line)}
.cb-dot{width:10px;height:10px;border-radius:50%;flex:none}
.cb-dot.r{background:#e0716f}.cb-dot.y{background:#e5b45c}.cb-dot.g{background:#4bbf85}
.cb-lang{margin-inline-start:6px;font-family:var(--fm);font-size:12px;color:rgba(233,237,247,.62)}
.cb-actions{margin-inline-start:auto;display:flex;gap:6px}
.cb-btn{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:rgba(233,237,247,.72);padding:6px 11px;border-radius:7px;border:1px solid rgba(233,237,247,.14);transition:var(--dur-fast)}
.cb-btn:hover{border-color:rgba(233,237,247,.32);color:#fff}
.cb-btn .icon{width:14px;height:14px}
.cb-btn.copied{color:#4bbf85;border-color:#4bbf85}
.cb-btn.cb-run{color:#a3d977;border-color:rgba(163,217,119,.3)}
.cb-btn.cb-run:hover{border-color:#a3d977;color:#c3e79c}
.cb-btn[disabled]{opacity:.5;pointer-events:none}
.cb-body{overflow-x:auto;max-width:100%}
.cb-pre{padding:16px 18px;font-family:var(--fm);font-size:13.5px;line-height:1.75;color:var(--code-ink);white-space:pre;min-width:0}
.cb-pre code{font-family:inherit}
.cb-editable{width:100%;min-height:110px;resize:vertical;padding:16px 18px;font-family:var(--fm);font-size:13.5px;line-height:1.75;color:var(--code-ink);background:transparent;border:0;outline:none;white-space:pre}

/* token colors (fallback + Prism override) */
.token.keyword,.tok-kw{color:#7ea2f2}
.token.string,.tok-str{color:#a3d977}
.token.comment,.tok-com{color:#6b7285;font-style:italic}
.token.function,.tok-fn{color:#e5b45c}
.token.number,.tok-num{color:#e0a3d0}
.token.operator,.tok-op{color:#c9d3e8}
.token.builtin,.token.boolean{color:#7ea2f2}

/* ---------- Output block ---------- */
.output-block{margin-top:12px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.ob-top{display:flex;align-items:center;justify-content:space-between;padding:9px 14px;border-bottom:1px solid var(--line);font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.ob-status{font-size:11px;font-weight:600;letter-spacing:.02em;text-transform:none;padding:3px 9px;border-radius:999px}
.ob-status.state-static{background:var(--surface-3);color:var(--muted)}
.ob-status.state-loading{background:var(--accent-soft);color:var(--accent)}
.ob-status.state-success{background:var(--good-soft);color:var(--good)}
.ob-status.state-error{background:var(--bad-soft);color:var(--bad)}
.ob-pre{padding:14px 16px;font-family:var(--fm);font-size:13.5px;line-height:1.7;color:var(--body);white-space:pre-wrap;word-break:break-word;max-height:340px;overflow-y:auto}
.ob-pre.is-error{color:var(--bad)}
.ob-spinner{display:inline-flex;gap:4px;align-items:center}
.ob-spinner span{width:5px;height:5px;border-radius:50%;background:var(--accent);animation:obPulse 1s infinite ease-in-out}
.ob-spinner span:nth-child(2){animation-delay:.15s}
.ob-spinner span:nth-child(3){animation-delay:.3s}
@keyframes obPulse{0%,80%,100%{opacity:.25}40%{opacity:1}}

/* ---------- Practice ---------- */
.practice-box{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);padding:20px}
.practice-box .lesson-prose{margin-bottom:16px}

/* ---------- Checkpoint ---------- */
.checkpoint{background:var(--paper);border:1px solid var(--line-strong);border-radius:var(--r-lg);padding:24px}
.checkpoint-q{font-weight:600;color:var(--ink);margin-bottom:16px;font-size:16px}
.cp-options{display:grid;gap:10px}
.cp-opt{display:flex;align-items:center;gap:12px;padding:13px 15px;border:1px solid var(--line-strong);border-radius:var(--r-sm);text-align:start;font-size:14.5px;color:var(--body);transition:var(--dur-fast)}
.cp-opt:hover{border-color:var(--accent)}
.cp-opt .letter{width:24px;height:24px;border-radius:50%;background:var(--surface-2);color:var(--muted);font-size:12px;font-weight:700;display:grid;place-items:center;flex:none}
.cp-opt[aria-pressed="true"].correct{border-color:var(--good);background:var(--good-soft)}
.cp-opt[aria-pressed="true"].correct .letter{background:var(--good);color:#fff}
.cp-opt[aria-pressed="true"].wrong{border-color:var(--bad);background:var(--bad-soft)}
.cp-opt[aria-pressed="true"].wrong .letter{background:var(--bad);color:#fff}
.cp-opt[disabled]{cursor:default}
.cp-feedback{margin-top:16px;padding:14px 16px;border-radius:var(--r-sm);background:var(--surface-2);font-size:14px;color:var(--body);display:none}
.cp-feedback.show{display:block}
.cp-feedback.correct{background:var(--good-soft);color:var(--good)}

/* ---------- Complete + Prev/Next ---------- */
.lesson-actions{margin-top:44px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:24px;border-top:1px solid var(--line)}
.mark-done{display:inline-flex;align-items:center;gap:9px}
.mark-done .icon{width:18px;height:18px}
.mark-done.is-done{background:var(--good);box-shadow:none}
.mark-done.is-done:hover{background:var(--good)}

.lesson-nav{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:20px}
.nav-card{border:1px solid var(--line);border-radius:var(--r-md);padding:16px 18px;background:var(--paper);transition:border-color var(--dur-fast),transform var(--dur-fast)}
.nav-card:hover{border-color:var(--accent);transform:translateY(-2px)}
.nav-card.next{text-align:end}
.nav-card .nav-label{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:6px}
.nav-card .nav-title{font-weight:600;color:var(--ink);font-size:14.5px}
.nav-card.disabled{opacity:.4;pointer-events:none}

/* ---------- Empty / landing state inside belajar.html (no lesson selected) ---------- */
.lesson-empty{padding:60px var(--gutter);text-align:center;max-width:640px;margin:0 auto}
.lesson-empty .icon-big{width:56px;height:56px;color:var(--accent);margin:0 auto 20px}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .sidebar{
    position:fixed;top:var(--header-h);inset-inline-start:0;bottom:0;z-index:140;
    width:min(320px,86vw);height:auto;transform:translateX(-100%);transition:transform var(--dur-slow) var(--ease);
    box-shadow:var(--sh-2);
  }
  body.sidebar-open .sidebar{transform:none}
  .sidebar-backdrop{position:fixed;inset:0;top:var(--header-h);background:rgba(10,13,20,.5);z-index:135;display:none}
  body.sidebar-open .sidebar-backdrop{display:block}
  .sb-mobile-toggle{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;padding:9px 14px;border:1px solid var(--line-strong);border-radius:999px;color:var(--ink);margin:16px var(--gutter) 0}
}
@media (max-width:640px){
  .lesson-wrap{padding:26px 16px 70px}
  .lesson-nav{grid-template-columns:1fr}
  .nav-card.next{text-align:start}
}