.tutorial-page{min-height:100vh}
.tutorial-shell{max-width:1280px;margin:auto;padding:54px 28px 100px}
.tutorial-hero{margin-bottom:32px}
.tutorial-hero h1{white-space:normal}
.tutorial-hero p{text-align:right;line-height:1.6}
.course-library{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}
.course-card{display:block;padding:0;border:1px solid var(--line);border-radius:24px;background:linear-gradient(145deg,rgba(255,255,255,.12),rgba(255,255,255,.045));overflow:hidden;text-align:left;color:var(--ink);cursor:pointer;box-shadow:inset 0 1px 0 #ffffff20,0 24px 70px #0003;backdrop-filter:blur(28px);transform-origin:center;transition:transform .34s cubic-bezier(.2,.8,.2,1),border-color .34s ease,box-shadow .34s ease,background .34s ease}
.dashboard-body .course-card.glass:hover{transform:translateY(-5px) scale(1.025);border-color:#e7a0ff!important;background:linear-gradient(145deg,rgba(223,134,255,.2),rgba(255,255,255,.055))!important;box-shadow:inset 0 1px 0 #ffffff38,0 28px 75px #0006,0 0 0 1px #df86ff70,0 0 22px #df86ffaa,0 0 58px #a93bff78!important;filter:drop-shadow(0 0 18px rgba(223,134,255,.48))}
.course-card>*{position:relative;z-index:1}
.course-cover{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;background:#150d1c;transition:filter .34s ease}
.course-card:hover .course-cover{filter:saturate(1.08) brightness(1.05)}
.course-card:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.course-card:active{transform:translateY(-2px) scale(1.012)}
.course-card-copy{display:block;padding:20px}
.course-card-copy small{color:var(--accent);font-weight:850;letter-spacing:.1em}
.course-card-copy b{display:block;font-size:23px;margin:8px 0}
.course-card-copy p{display:block;min-height:44px;margin:0;color:var(--muted);line-height:1.5}
.course-card-meta{display:flex;justify-content:space-between;gap:15px;margin-top:18px;color:#918696;font-size:11px;transition:color .25s ease}
.course-card:hover .course-card-meta{color:#e3a8f8}
.course-back{display:inline-flex;align-items:center;gap:8px;margin-bottom:20px;padding:0;border:0;background:none;color:var(--accent);font-weight:800;cursor:pointer}
.tutorial-layout{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:22px}
.tutorial-player{border:1px solid #30332f;border-radius:20px;overflow:hidden;background:#070807;color:#f1f3ec;box-shadow:0 25px 80px #0004}
.tutorial-video{display:block;width:100%;aspect-ratio:16/9;background:#050605}
.tutorial-empty{aspect-ratio:16/9;display:grid;place-items:center;text-align:center;padding:35px;background:radial-gradient(circle at 50% 30%,#2b2031,#090a09 62%);color:#a9a0ad}
.tutorial-empty i{display:grid;place-items:center;width:74px;height:74px;margin:0 auto 18px;border:1px solid #c884ff66;border-radius:50%;color:#d89aff;font-style:normal;font-size:28px}
.tutorial-meta{padding:24px 26px}
.tutorial-meta small{color:#d89aff;font-weight:800;letter-spacing:.1em}
.tutorial-meta h2{font-size:27px;margin:9px 0}
.tutorial-meta p{color:#aaa2ac;margin:0}
.course-panel{border:1px solid #30332f;border-radius:20px;background:#171417;color:#f1f3ec;padding:18px;height:max-content}
.course-head{padding:8px 8px 18px;border-bottom:1px solid #39323b}
.course-head small{color:#928998}
.course-head h2{font-size:21px;margin:6px 0}
.course-head p{color:#928998}
.lesson-list{display:grid;gap:8px;padding-top:12px}
.lesson-button{width:100%;display:grid;grid-template-columns:34px 1fr auto;gap:10px;align-items:center;padding:13px;border:1px solid transparent;border-radius:13px;background:none;color:#daddd5;text-align:left;cursor:pointer}
.lesson-button:hover,.lesson-button.active{background:#282229;border-color:#413744}
.lesson-button.active{color:#d89aff}
.lesson-index{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#332b35;font-size:11px}
.lesson-button small{display:block;color:#948a98;margin-top:3px}
.lesson-state{font-size:10px;color:#948a98}
.welcome-dialog{width:min(980px,94vw);padding:0;border:1px solid #ffffff26;border-radius:24px;background:#111310;color:#f4f5ef;box-shadow:0 40px 120px #000b;overflow:hidden}
.welcome-dialog::backdrop{background:#080a08d9;backdrop-filter:blur(14px)}
.welcome-content{display:grid;grid-template-columns:1.35fr .65fr}
.welcome-media{background:#050605}
.welcome-media video,.welcome-media .tutorial-empty{width:100%;height:100%;min-height:430px;object-fit:contain}
.welcome-copy{padding:38px 32px;display:flex;flex-direction:column}
.welcome-copy small{color:#d89aff;font-weight:850;letter-spacing:.14em}
.welcome-copy h2{font-size:38px;line-height:1;letter-spacing:-.045em;margin:18px 0}
.welcome-copy p{color:#a6aba2;line-height:1.65}
.welcome-actions{display:grid;gap:10px;margin-top:auto}
.welcome-actions a,.welcome-actions button{min-height:48px;border-radius:12px;font-weight:800;cursor:pointer}
.welcome-actions a{display:grid;place-items:center;background:#c884ff;color:#170d1d}
.welcome-actions button{border:1px solid #3c4139;background:none;color:#d9ddd5}
.welcome-close{position:absolute;right:14px;top:14px;width:35px;height:35px;border:1px solid #ffffff33;border-radius:50%;background:#111b;color:#fff;font-size:20px;cursor:pointer}
@media(max-width:900px){.course-library{grid-template-columns:1fr 1fr}.tutorial-layout{grid-template-columns:1fr}.welcome-content{grid-template-columns:1fr}.welcome-media video,.welcome-media .tutorial-empty{min-height:0}.welcome-copy{gap:16px}.welcome-actions{margin-top:8px}}
@media(max-width:620px){.tutorial-shell{padding:34px 16px 70px}.tutorial-hero p{text-align:left}.course-library{grid-template-columns:1fr 1fr}.tutorial-meta{padding:20px}.welcome-copy{padding:28px 22px}.welcome-copy h2{font-size:31px}}
@media(max-width:430px){.course-library{grid-template-columns:1fr}}