/* Yo'l qismi */
.journey-board {
    max-width: 640px;
    margin: 0 auto;
    padding: 20px 20px 100px;
}

@keyframes tabFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.journey-board.tab--active,
.play-lab.state--active,
.typing-lab.state--active,
.listening-lab.state--active {
    animation: tabFadeIn .35s ease;
}

.unit__banner {
    border-radius: 16px;
    padding: 16px 20px;
    margin: 26px 0 34px;
    color: #fff;
    box-shadow: 0 6px 0 rgba(0, 0, 0, 0.18);
}

.unit__banner .unit__eyebrow {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
    opacity: .85;
    font-weight: 700;
}

.unit__banner h3 {
    margin: 2px 0 0;
    font-size: 19px;
}

.unit__banner .unit__theme {
    font-size: 13px;
    opacity: .9;
    margin-top: 2px;
}

.unit__banner.state--done {
    opacity: .55;
}

.lesson-node__row {
    display: flex;
    justify-content: center;
    margin: 0 0 30px;
    position: relative;
}

.lesson-node__btn {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border: none;
    cursor: pointer;
    position: relative;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: 22px;
    box-shadow: 0 6px 0 rgba(0, 0, 0, 0.25);
    transition: transform .12s, filter .15s;
}

.lesson-node__btn:not(.state--locked):hover {
    filter: brightness(1.08);
    transform: translateY(-2px);
}

.lesson-node__btn:active {
    transform: translateY(4px);
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.25);
}

.lesson-node__btn.state--locked {
    background: var(--locked);
    color: #5c6d78;
    cursor: pointer;
    box-shadow: 0 6px 0 rgba(0, 0, 0, 0.18);
}

.lesson-node__btn.state--locked:active {
    transform: translateY(3px);
    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.18);
}

.lesson-node__btn.state--locked:hover {
    filter: brightness(1.15);
}

.lesson-node__pulse-alert {
    animation: nodePulseAlert 1.1s ease;
}

@keyframes nodePulseAlert {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0);
        filter: brightness(1);
    }
    15%, 45%, 75% {
        box-shadow: 0 0 0 10px rgba(var(--accent-rgb), 0.3);
        filter: brightness(1.3);
    }
    30%, 60%, 90% {
        box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0);
        filter: brightness(1);
    }
}

.lesson-node__btn.state--current {
    background: var(--accent);
    color: #fff;
    box-shadow: 0 6px 0 rgba(0, 0, 0, 0.25), 0 0 20px rgba(255, 46, 151, 0.55);
}

body.theme-picker--light .lesson-node__btn.state--current {
    box-shadow: 0 6px 0 rgba(0, 0, 0, 0.25);
}

.lesson-node__btn.state--current::after {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 3px solid rgba(226, 121, 61, 0.4);
    animation: pulse 1.8s infinite;
}

.lesson-node__btn.state--done {
    background: var(--success);
    color: #fff;
    box-shadow: 0 6px 0 rgba(0, 0, 0, 0.25), 0 0 14px rgba(57, 255, 136, 0.4);
}

body.theme-picker--light .lesson-node__btn.state--done {
    box-shadow: 0 6px 0 rgba(0, 0, 0, 0.25);
}

.lesson-node__icon {
    font-size: 26px;
}

.lesson-node__stars {
    position: absolute;
    bottom: -16px;
    display: flex;
    gap: 1px;
    font-size: 8.5px;
    white-space: nowrap;
}

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    70% {
        transform: scale(1.25);
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

.dot__trail {
    position: absolute;
    top: -30px;
    left: 50%;
    width: 2px;
    height: 30px;
    background: repeating-linear-gradient(to bottom, rgba(var(--overlay-rgb), 0.18) 0 6px, transparent 6px 12px);
    transform: translateX(-50%);
}

.lesson-node__row:first-child .dot__trail {
    display: none;
}

.summit__card {
    text-align: center;
    background: var(--paper);
    color: var(--ink);
    border-radius: 18px;
    padding: 34px 20px;
    margin-top: 20px;
}

.summit__card .state--peak {
    font-size: 48px;
}


/* ==========================================================================
   CONTINUE LEARNING CARD (master spec PART 9 §3/§4) — faqat autentifikatsiya
   qilingan foydalanuvchilar uchun, backend'dan olingan haqiqiy progress
   asosida. Dizayn tokenlaridan foydalanadi (PART 8).
   ========================================================================== */

.continue-card {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    background: linear-gradient(135deg, var(--teal-dark), var(--purple));
    border-radius: var(--radius-xl);
    padding: var(--space-5);
    margin-bottom: var(--space-4);
    color: #fff;
    box-shadow: var(--shadow-md);
    cursor: pointer;
    border: none;
    width: 100%;
    text-align: left;
    font-family: 'Manrope', sans-serif;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.continue-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.continue-card:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring), var(--shadow-lg);
}

.continue-card__icon {
    font-size: 32px;
    flex-shrink: 0;
}

.continue-card__body {
    flex: 1;
    min-width: 0;
}

.continue-card__eyebrow {
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.85;
    margin: 0 0 2px;
}

.continue-card__title {
    font-size: 16px;
    font-weight: 800;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.continue-card__sub {
    font-size: 12.5px;
    opacity: 0.85;
    margin: 2px 0 0;
}

.continue-card__arrow {
    font-size: 22px;
    opacity: 0.85;
    flex-shrink: 0;
}

.continue-card__skeleton {
    height: 76px;
    margin-bottom: var(--space-4);
}

.continue-card__streak-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(255, 255, 255, 0.18);
    border-radius: var(--radius-full);
    padding: 2px 10px;
    font-size: 12px;
    font-weight: 700;
    margin-left: var(--space-3);
    flex-shrink: 0;
}

/* ---------- Yo'l xaritasi: yakuniy "polish" (avvalgi final-ui-polish.css dan) ---------- */
.journey-board{position:relative;padding-bottom:50px!important}
.zero-english__entry-card,.continue-card{
  border:1px solid rgba(77,225,255,.20)!important;
  background:
    radial-gradient(circle at 100% 0%,rgba(77,225,255,.10),transparent 34%),
    linear-gradient(145deg,#101b30,#0c1322)!important;
  box-shadow:0 16px 38px rgba(0,0,0,.22)!important;
  border-radius:20px!important;
}
.unit__banner{
  position:relative!important;
  margin:26px 0 22px!important;
  border:1px solid rgba(255,255,255,.12)!important;
  background:linear-gradient(145deg,#171e35,#0f1628)!important;
  overflow:hidden!important;
}
.unit__banner::after{content:"";position:absolute;right:-80px;top:-80px;width:180px;height:180px;border-radius:50%;background:rgba(77,225,255,.08);filter:blur(20px)}
.lesson-node__row{min-height:70px!important}
.lesson-node__btn{
  border:1px solid rgba(182,196,231,.16)!important;
  box-shadow:0 10px 24px rgba(0,0,0,.18)!important;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease!important;
}
.lesson-node__btn.state--current{border-color:rgba(77,225,255,.55)!important;box-shadow:0 0 0 5px rgba(77,225,255,.07),0 14px 28px rgba(0,0,0,.24)!important}
.lesson-node__btn.state--done{border-color:rgba(72,220,138,.35)!important}
.lesson-node__btn:hover{transform:translateX(var(--lesson-x,0)) translateY(-2px)!important}
.summit__card{border:1px solid rgba(255,201,91,.25)!important;border-radius:22px!important;background:linear-gradient(145deg,rgba(51,42,19,.9),rgba(18,18,25,.95))!important}


/* 201-bosqich — yakuniy imtihon kirish kartasi */
.final-exam-entry{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;overflow:hidden;margin:30px 0 12px;padding:24px;border-radius:26px;background:linear-gradient(135deg,rgba(var(--accent-rgb),.08),var(--panel-2) 38%,var(--paper));border:1px solid rgba(var(--accent-rgb),.24);box-shadow:var(--shadow-lg),0 0 36px rgba(var(--accent-rgb),.08)}.final-exam-entry__glow{position:absolute;width:260px;height:260px;border-radius:50%;right:-95px;top:-110px;background:radial-gradient(circle,rgba(226,121,61,.26),transparent 68%);pointer-events:none}.final-exam-entry__lock-mark{position:absolute;right:16px;top:14px;z-index:2;width:34px;height:34px;display:grid;place-items:center;border-radius:11px;background:rgba(8,12,20,.45);border:1px solid rgba(255,255,255,.08);font-size:14px;backdrop-filter:blur(8px)}.final-exam-entry__icon{position:relative;width:78px;height:78px;display:grid;place-items:center;border-radius:24px;font-size:40px;background:linear-gradient(135deg,var(--accent),var(--purple));box-shadow:0 14px 28px rgba(0,0,0,.2),0 0 28px rgba(var(--accent-rgb),.22);color:#fff}.final-exam-entry__body{position:relative;min-width:0}.final-exam-entry__topline{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.final-exam-entry__badge{display:inline-flex;align-items:center;font-size:9px;font-weight:900;letter-spacing:.12em;color:var(--accent);margin-bottom:5px}.final-exam-entry__goal{display:inline-flex;align-items:center;padding:4px 7px;border-radius:999px;background:rgba(var(--accent-rgb),.1);border:1px solid rgba(var(--accent-rgb),.16);font-size:8px;font-weight:900;letter-spacing:.08em;color:var(--muted)}.final-exam-entry__body h2{margin:0 0 6px;font-size:24px;letter-spacing:-.03em}.final-exam-entry__body p{margin:0;color:var(--muted);font-size:13px;line-height:1.55;max-width:620px}.final-exam-entry__meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.final-exam-entry__meta span{font-size:10px;padding:6px 9px;border-radius:999px;background:rgba(var(--overlay-rgb),.06);border:1px solid rgba(var(--overlay-rgb),.08);color:var(--muted)}.final-exam-entry__button{position:relative;white-space:nowrap;border:0;border-radius:14px;padding:13px 15px;background:var(--accent);color:#fff;font:800 12px 'Manrope',sans-serif;cursor:pointer;box-shadow:0 5px 0 rgba(0,0,0,.18);transition:transform .15s ease,filter .15s ease}.final-exam-entry__button:hover{filter:brightness(1.07);transform:translateY(-1px)}.final-exam-entry__button:active{transform:translateY(2px);box-shadow:0 2px 0 rgba(0,0,0,.18)}
@media(max-width:620px){.final-exam-entry{grid-template-columns:auto 1fr;padding:18px;gap:13px}.final-exam-entry__icon{width:60px;height:60px;border-radius:19px;font-size:31px}.final-exam-entry__body h2{font-size:20px}.final-exam-entry__button{grid-column:1/-1;width:100%;padding:12px}.final-exam-entry__meta{display:none}.final-exam-entry__lock-mark{right:12px;top:12px;width:30px;height:30px}.final-exam-entry__goal{font-size:7.5px}}
.final-exam-entry.is-locked{filter:saturate(.72);opacity:.96;background:linear-gradient(135deg,rgba(var(--accent-rgb),.06),var(--panel-2) 42%,var(--paper));border-color:rgba(var(--accent-rgb),.18)}.final-exam-entry.is-locked .final-exam-entry__button{cursor:not-allowed;opacity:.7;background:rgba(var(--overlay-rgb),.1);border:1px solid rgba(var(--overlay-rgb),.1);color:var(--muted);box-shadow:none}.final-exam-entry.is-locked .final-exam-entry__icon{filter:grayscale(.08)}
@media(max-width:390px){.final-exam-entry{padding:15px}.final-exam-entry__icon{width:52px;height:52px;font-size:27px}.final-exam-entry__body p{font-size:12px}.final-exam-entry__body h2{font-size:18px}.final-exam-entry__badge{font-size:8px}}