.learning-path-page{padding:3rem 1.5rem 5rem;max-width:1280px;margin:0 auto;position:relative}.learning-path-header{text-align:center;margin-bottom:4rem;animation:slideDown .6s ease-out}.learning-path-header h1{font-size:3rem;font-weight:800;color:var(--color-text);margin-bottom:.75rem;background:linear-gradient(135deg,var(--color-playful-blue),var(--color-playful-purple),var(--color-playful-pink));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;display:inline-block}.learning-path-header p{font-size:1.25rem;color:var(--color-text-muted);font-weight:500}.learning-path-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:2rem}.lp-card{background:#fff9;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.8);border-radius:24px;padding:2rem;display:flex;flex-direction:column;gap:1.25rem;position:relative;overflow:hidden;transition:all .4s cubic-bezier(.34,1.56,.64,1);box-shadow:0 8px 32px #1e1b4b0d;z-index:1}.lp-card:before{content:"";position:absolute;top:0;left:-100%;width:50%;height:100%;background:linear-gradient(to right,#fff0,#fff9,#fff0);transform:skew(-25deg);transition:none;z-index:-1}.lp-card:not(.locked):hover{transform:translateY(-8px);box-shadow:0 20px 40px #0ea5e926,0 0 0 1px var(--color-playful-blue)}.lp-card:not(.locked):hover:before{animation:shineCard .8s ease-out}.lp-card:has(.lp-card-badge.in_progress){border-color:#a855f766;box-shadow:0 12px 32px #a855f726,0 0 0 1px #a855f733;animation:borderGlow 3s infinite alternate}@keyframes borderGlow{0%{box-shadow:0 12px 32px #a855f726,0 0 0 1px #a855f733}to{box-shadow:0 12px 48px #a855f74d,0 0 0 2px #a855f766}}.lp-card.locked{background:#f1f3f866;backdrop-filter:blur(8px) grayscale(50%);-webkit-backdrop-filter:blur(8px) grayscale(50%);border:1px solid rgba(226,230,238,.5);opacity:.85}.lp-card-header{display:flex;justify-content:space-between;align-items:center}.lp-card-stage{font-size:1rem;font-weight:800;color:var(--color-playful-purple);text-transform:uppercase;letter-spacing:1px;background:var(--color-surface);padding:.25rem .75rem;border-radius:var(--radius-full);box-shadow:var(--shadow-sm)}.lp-card-badge{font-size:.85rem;padding:.4rem .8rem;border-radius:var(--radius-full);font-weight:700;display:flex;align-items:center;gap:.4rem;box-shadow:var(--shadow-sm)}.lp-card-badge.locked{background:var(--color-bg);color:var(--color-text-muted)}.lp-card-badge.in_progress{background:linear-gradient(135deg,var(--color-playful-purple),var(--color-playful-pink));color:#fff}.lp-card-badge.completed{background:linear-gradient(135deg,var(--color-playful-green),#059669);color:#fff}.lp-card-title{font-size:1.4rem;font-weight:800;color:var(--color-text);margin:0;line-height:1.3}.lp-card-desc{font-size:1rem;color:var(--color-text-secondary);line-height:1.5;flex-grow:1}.lp-card-goal{font-size:.9rem;font-weight:600;color:var(--color-text);background:#ffffffb3;padding:.75rem 1rem;border-radius:12px;display:flex;align-items:flex-start;gap:.5rem;border:1px dashed var(--color-border)}.lp-card-progress{display:flex;flex-direction:column;gap:.75rem;margin-top:.5rem}.lp-progress-bar-bg{height:12px;background:#e2e6eecc;border-radius:99px;overflow:hidden;position:relative;box-shadow:inset 0 2px 4px #0000000d}.lp-progress-bar-fill{height:100%;background:linear-gradient(90deg,var(--color-playful-blue),var(--color-playful-purple));border-radius:99px;transition:width 1s cubic-bezier(.34,1.56,.64,1);position:relative;overflow:hidden}.lp-progress-bar-fill:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#fff0,#fff6,#fff0);animation:barShine 2s infinite linear}.lp-progress-bar-fill.completed{background:linear-gradient(90deg,var(--color-playful-green),#34d399)}.lp-progress-text{font-size:.85rem;color:var(--color-text-secondary);text-align:right;font-weight:800}.lp-card-actions{margin-top:auto;display:flex;gap:.75rem}.lp-card-actions>*{flex:1}.lp-card-actions .btn-secondary{flex:0;min-width:max-content}.dark-mode .lp-card{background:#1e293b99;border-color:#ffffff1a}.dark-mode .lp-card.locked{background:#0f172a66;border-color:#ffffff0d}.dark-mode .lp-card-goal{background:#0f172a80;border-color:#ffffff1a}@keyframes slideDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes shineCard{to{left:150%}}@keyframes barShine{0%{transform:translate(-100%)}to{transform:translate(100%)}}@media(max-width:768px){.learning-path-header h1{font-size:2.25rem}.learning-path-grid{grid-template-columns:1fr}}