.d3-header{position:sticky;top:0;z-index:100;display:flex;align-items:center;padding-block:var(--space-xs);padding-inline:var(--space-xs);transition:transform .3s ease}.d3-header.hidden{transform:translateY(-100%)}.d3-nav{background:var(--gray-12);border:1px solid var(--gray-3);transition:transform .3s ease;position:relative;transform:rotate(3deg);display:flex;align-items:center;gap:var(--space-2xs);margin-left:auto;border-radius:var(--radius-xs);box-shadow:var(--shadow-m)}.nav-logo{font-weight:700;font-size:1.1rem;color:var(--gray-1);text-decoration:none;padding:var(--space-2xs) var(--space-3xs);transition:all .2s ease}.nav-logo:hover{color:var(--pink-1)}.nav-btn{border:none;background:none;color:var(--gray-1);padding:var(--space-2xs) var(--space-3xs);text-decoration:none;cursor:pointer;transition:all .2s ease}.nav-btn:hover:not(:disabled){color:var(--pink-1);transform:translateY(-2px)}.nav-btn:hover:not(:disabled) svg{stroke:var(--pink-1)}.nav-btn:disabled{opacity:.5;cursor:not-allowed}.icon{width:24px;height:24px}.icon-path{transition:all .3s ease}.icon-path.animated{stroke-dasharray:100;stroke-dashoffset:100;animation:drawPath .6s ease forwards}@keyframes drawPath{to{stroke-dashoffset:0}}.course-progress-panel{position:fixed;top:70px;right:10px;opacity:0;visibility:hidden;height:calc(100vh - 90px);overflow:hidden;z-index:999;background:var(--gray-12);color:var(--gray-1);border-radius:var(--radius-m);box-shadow:var(--shadow-l);border:1px solid var(--gray-10);padding:var(--space-2xs);display:flex;flex-direction:column;gap:var(--space-xs);min-width:350px;max-width:400px;transform-origin:top right;transform:scale(.95) translateY(22px);transition:opacity .2s ease-in-out,visibility .2s ease-in-out,transform .2s ease-in-out}@media (max-width: 480px){.course-progress-panel{min-width:calc(100vw - 20px);max-width:calc(100vw - 20px)}}.course-progress-panel.open{opacity:1;visibility:visible;transform:scale(1) rotate(3deg)}@media (max-width: 700px){.course-progress-panel.open{opacity:1;visibility:visible;transform:scale(1) rotate(0)}}.panel-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--gray-6);padding-bottom:var(--space-3xs)}.panel-header h2{margin:0;font-size:1.25rem}.close-btn{background:none;border:none;cursor:pointer;line-height:1;padding:0;width:32px;height:32px;color:var(--gray-1);opacity:.7;transition:opacity .2s ease}.close-btn:hover{opacity:1}.close-btn svg{stroke:currentColor}.progress-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-3xs);padding-bottom:var(--space-3xs)}.stat{display:flex;flex-direction:column;align-items:center;gap:var(--space-3xs);text-align:center}.stat-label{font-size:.8rem;opacity:.7;line-height:1.3}.stat-value{font-size:1.5rem;font-weight:700}.progress-bar-container{width:100%;background-color:var(--gray-6);border-radius:99px;height:10px;overflow:hidden}.progress-bar-fill{height:100%;width:0%;background-color:var(--green-11);border-radius:99px;transition:width .5s ease}.panel-content{flex:1;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--gray-6) transparent}.panel-content::-webkit-scrollbar{width:8px}.panel-content::-webkit-scrollbar-thumb{background-color:var(--gray-6);border-radius:4px}.chapters-list{display:flex;flex-direction:column;gap:var(--space-xs);padding-right:var(--space-3xs)}.chapter-item{border-bottom:1px solid var(--gray-6);padding-bottom:var(--space-xs)}.chapter-item:last-child{border-bottom:none}.chapter-header{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-xs);margin-bottom:var(--space-2xs)}.chapter-title{font-size:var(--step-1);margin:0;line-height:1.3}.chapter-meta{display:flex;flex-direction:column;align-items:flex-end;gap:var(--space-3xs);flex-shrink:0}.chapter-quiz-summary{font-size:.8rem;color:var(--gray-1);opacity:.8}.chapter-quiz-summary strong{color:var(--gray-1);opacity:1;font-weight:600}.chapter-progress-badge{font-size:calc(var(--step-0) * .5);padding:var(--space-3xs) var(--space-2xs);background:var(--gray-3);color:var(--gray-12);border-radius:var(--radius-m);font-weight:600}.lessons-list{display:flex;flex-direction:column;gap:.5rem}.lesson-item{display:flex;align-items:center;gap:var(--space-3xs);padding-block:var(--space-3xs);padding-inline:var(--space-2xs);border-radius:var(--radius-xs);text-decoration:none;transition:all .2s ease;color:var(--gray-1);border:1px solid transparent}.lesson-item:hover{background:var(--gray-3);color:var(--gray-12)}.lesson-item.current{background:var(--pink-10);color:var(--pink-1);border-color:var(--pink-1)}.lesson-status-icon{font-size:1rem;min-width:1.5rem;text-align:center}.lesson-item.completed{opacity:.7}.lesson-item.completed .lesson-status-icon{color:var(--green-11)}.lesson-item.completed:hover{opacity:1}.lesson-item.skipped{opacity:.8}.lesson-item.skipped .lesson-status-icon{color:var(--amber-11)}.lesson-item.skipped:hover{opacity:1}.lesson-item.pending .lesson-status-icon{opacity:.5}.lesson-title{flex:1;font-size:.95rem}.panel-footer{padding-top:var(--space-2xs);border-top:1px solid var(--gray-6);display:flex}.reset-btn{background:none;border:1px solid var(--red-10);color:var(--red-10);padding:var(--space-3xs) var(--space-s);border-radius:var(--radius-xs);cursor:pointer;font-size:.9rem;font-weight:500;transition:all .2s ease;display:inline-flex;align-items:center;gap:var(--space-3xs);margin-left:auto}.reset-btn:hover{background:var(--red-11);color:var(--red-1)}@media print{.d3-header{display:none}}.lesson-nav{display:grid;grid-template-columns:1fr 1fr;max-width:1400px;margin:0 auto;gap:var(--space-3xs)}.prev-link,.next-link,.empty-link{display:flex;flex-direction:column;padding:var(--space-xs) var(--space-s);border:1px solid transparent;transition:all .2s ease}.prev-link,.next-link{text-decoration:none}.prev-link:hover,.next-link:hover{background:var(--pink-10);color:var(--pink-1);border-color:var(--pink-1)}.prev-link{text-align:left;align-items:flex-start}.next-link{text-align:right;align-items:flex-end}.prev-link span,.next-link span{font-size:.9rem;opacity:.7;margin-bottom:.5rem;display:flex;align-items:center;gap:.5rem}.prev-link strong,.next-link strong{font-size:1.1rem;font-weight:500}.prev-link:hover strong,.next-link:hover strong{color:var(--primary)}.nav-icon{width:24px;height:24px;flex-shrink:0}@media (max-width: 640px){.lesson-nav{grid-template-columns:1fr}.next-link{border-top:1px dashed var(--border)}}.d3-course-content{min-height:calc(100vh - 120px)}
