/* Redesign phase 2: Ruta unit focus. Mobile = vertical timeline (p-02), desktop = 3-column grid (p-08). */
.p2{display:flex;flex-direction:column;gap:16px;margin-bottom:28px}
.p2-levels{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 -4px;padding:2px 4px}
.p2-levels::-webkit-scrollbar{display:none}
.p2-levels a{flex:0 0 auto;display:flex;align-items:baseline;gap:6px;padding:7px 13px;border-radius:999px;background:var(--glass);border:1px solid var(--edge);color:var(--on-card);font-weight:800;font-size:.88rem;text-decoration:none;box-shadow:var(--sh-sm)}
.p2-levels a small{font-weight:600;font-size:.72rem;color:var(--on-card-mut)}
.p2-levels a.on{background:linear-gradient(135deg,#7c3aed,#9d4edd);color:#fff;border-color:transparent}
.p2-levels a.on small{color:rgba(255,255,255,.8)}
.p2-hero{position:relative;overflow:hidden;border-radius:28px;padding:20px 22px 22px;color:#fff;background:linear-gradient(135deg,#6d28d9 0%,#8b3ff0 55%,#a855f7 100%);box-shadow:0 18px 40px -16px rgba(109,40,217,.55)}
.p2-hero::after{content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.22),transparent 70%);pointer-events:none}
.p2-hero-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.p2-kick{margin:0;font-size:.74rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#ffb27a}
.p2-count{font-size:.8rem;font-weight:700;opacity:.9;white-space:nowrap}
.p2-hero h1{margin:6px 0 8px;font-size:clamp(1.7rem,6vw,2.35rem);line-height:1.08;font-weight:800;letter-spacing:-.02em;color:#fff}
.p2-lead{margin:0 0 14px;font-size:.92rem;line-height:1.4;opacity:.92;max-width:60ch}
.p2-bar{height:8px;border-radius:99px;background:rgba(255,255,255,.22);overflow:hidden}
.p2-bar i{display:block;height:100%;border-radius:inherit;background:var(--orange,#ff8a3d);min-width:6px}
.p2-start{margin:10px 0 0;font-size:.78rem;font-weight:600;opacity:.85}
/* timeline (mobile) */
.p2-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;position:relative}
.p2-steps::before{content:"";position:absolute;left:23px;top:22px;bottom:22px;width:2px;background:var(--line)}
.p2-step{position:relative}
.p2 .p2-card{display:flex;align-items:center;gap:14px;padding:6px 0;cursor:pointer;color:var(--on-card);text-decoration:none;-webkit-tap-highlight-color:transparent}
.p2 .p2-card:focus-visible{outline:3px solid var(--acc);outline-offset:3px;border-radius:16px}
.p2-ic{flex:0 0 48px;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:1.05rem;background:var(--glass-2);border:1px solid var(--edge);box-shadow:var(--sh-sm);color:var(--on-card);position:relative;z-index:1}
.p2-box{flex:1;min-width:0;display:flex;align-items:center;gap:10px}
.p2-tx{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.p2-tx small{font-size:.74rem;color:var(--on-card-mut);font-weight:600}
.p2-tx b{font-size:1rem;font-weight:800;line-height:1.25}
.p2-pass,.p2-side{display:none}
.s-done .p2-ic{background:var(--ok-bar,#1f8f43);color:#fff;border-color:transparent}
.s-locked .p2-tx,.s-premium .p2-tx{opacity:.62}
.s-locked .p2-ic,.s-premium .p2-ic{color:var(--on-card-mut)}
.k-ai .p2-ic,.k-game .p2-ic{border-radius:14px}
.k-game.s-open .p2-ic,.k-game.s-done .p2-ic{background:linear-gradient(135deg,#7c3aed,#a855f7);color:#fff;border-color:transparent}
.k-ep .p2-ic{background:#2a1830;color:#ff8a3d;border-color:transparent}
.k-test .p2-ic,.k-exam .p2-ic{border-radius:14px;border:2px solid #ff8a3d;color:#c2410c;background:#fff4ec}
.k-test.s-done .p2-ic,.k-exam.s-done .p2-ic{background:var(--ok-bar,#1f8f43);border-color:transparent;color:#fff}
.p2-step.cur .p2-ic{background:var(--hero,#d81b6b);color:#fff;border-color:transparent;box-shadow:0 0 0 5px rgba(216,27,107,.16)}
.p2-step.cur .p2-box{padding:12px 12px 12px 16px;border-radius:20px;background:var(--glass-2);border:1.5px solid var(--hero,#d81b6b);box-shadow:var(--sh)}
.p2-step.cur .p2-tx small{color:var(--hero,#d81b6b);font-weight:800}
.p2-go{flex:0 0 auto;padding:9px 16px;font-size:.9rem;background:var(--hero,#d81b6b);color:#fff;border-radius:14px;font-weight:800;box-shadow:0 8px 18px -8px rgba(216,27,107,.7)}
.p2-unav{display:flex;justify-content:space-between;gap:10px}
.p2-unav .btn{font-size:.88rem;padding:9px 14px}
.p2-unitsec h2{font-size:1.05rem;margin:4px 0 10px}
.p2-units{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;padding:2px 2px 8px}
.p2-units::-webkit-scrollbar{display:none}
.p2-units a{flex:0 0 168px;display:flex;flex-direction:column;gap:3px;padding:12px 14px;border-radius:18px;background:var(--glass);border:1px solid var(--edge);box-shadow:var(--sh-sm);color:var(--on-card);text-decoration:none}
.p2-units a small{font-size:.72rem;color:var(--on-card-mut);font-weight:700}
.p2-units a b{font-size:.9rem;line-height:1.25}
.p2-units a.done small{color:var(--ok-bar,#1f8f43)}
.p2-units a.on{border:1.5px solid #7c3aed;background:var(--glass-2)}
.p2-allsec{margin-top:8px}
.p2-allh{font-size:1.25rem;margin:8px 0 4px}
/* dark */
@media (prefers-color-scheme:dark){
  :root:not([data-theme=light]) .k-test .p2-ic,:root:not([data-theme=light]) .k-exam .p2-ic{background:rgba(255,138,61,.12);color:#ffb27a}
  :root:not([data-theme=light]) .p2-step.cur .p2-tx small{color:#ff7aa8}
}
:root[data-theme=dark] .k-test .p2-ic,:root[data-theme=dark] .k-exam .p2-ic{background:rgba(255,138,61,.12);color:#ffb27a}
:root[data-theme=dark] .p2-step.cur .p2-tx small{color:#ff7aa8}
/* desktop grid */
@media (min-width:900px){
  body:has(.sidenav:not([hidden])) .p2-levels{display:none}
  .p2-hero{padding:26px 30px}
  .p2-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .p2-steps::before{display:none}
  .p2 .p2-card{height:100%;box-sizing:border-box;align-items:flex-start;gap:12px;padding:16px 18px;border-radius:20px;background:var(--glass);border:1px solid var(--edge);box-shadow:var(--sh-sm);transition:transform .15s,box-shadow .15s}
  .p2 a.p2-card:hover{transform:translateY(-2px);box-shadow:var(--sh)}
  .p2-box{flex-direction:column;align-items:stretch;gap:10px;height:100%}
  .k-lesson .p2-ic{display:none}
  .p2-ic{flex:0 0 40px;width:40px;height:40px;font-size:.95rem}
  .p2-step.cur .p2-ic{box-shadow:none}
  .p2-step.cur .p2-card{border:1.5px solid var(--hero,#d81b6b);background:var(--glass-2);box-shadow:var(--sh)}
  .p2-step.cur .p2-box{padding:0;border:0;background:none;box-shadow:none}
  .p2-go{align-self:flex-start;margin-top:auto}
  .k-game .p2-card{border:1.5px dashed #a78bfa;background:rgba(124,58,237,.06)}
  .p2-pass{display:inline-block;align-self:flex-start;font-size:.7rem;font-weight:800;color:#15803d;background:rgba(34,197,94,.14);padding:3px 8px;border-radius:99px;order:-1}
  .k-ep,.k-test,.k-exam{grid-column:1/-1}
  .k-ep .p2-box,.k-test .p2-box,.k-exam .p2-box{flex-direction:row;align-items:center}
  .p2 .k-ep .p2-card,.p2 .k-test .p2-card,.p2 .k-exam .p2-card{align-items:center}
  .p2 .k-ep .p2-card{background:linear-gradient(90deg,#3d2440,#2a1830);color:#fff;border-color:transparent}
  .k-ep .p2-ic{background:#ff8a3d;color:#fff}
  .k-ep .p2-tx small{color:#ffb27a}
  .p2 .k-test .p2-card,.p2 .k-exam .p2-card{background:rgba(255,138,61,.1);border:1.5px solid rgba(255,138,61,.55)}
  .p2-side{display:inline;margin-left:auto;font-size:.8rem;font-weight:800;color:#c2410c;white-space:nowrap}
  .k-test .p2-pass,.k-exam .p2-pass{order:0;margin-left:auto;align-self:center}
  .k-ep .p2-go,.k-test .p2-go,.k-exam .p2-go{margin:0 0 0 auto;align-self:center}
  .p2-unitsec .p2-units{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));overflow:visible}
}