.edge-user-links .tutorial-nav-link { color:#c8f6e2; border-color:rgba(95,232,178,.2); background:rgba(95,232,178,.06); }
.edge-user-links .tutorial-nav-link .ui-icon { color:#79eac1; }
.tutorial-page { padding-top:42px; padding-bottom:96px; }
.tutorial-hero { position:relative; overflow:hidden; padding:48px 52px; border:1px solid rgba(112,231,185,.2); border-radius:22px; background:radial-gradient(circle at 88% 15%,rgba(48,167,143,.19),transparent 36%),linear-gradient(125deg,#102126,#0b121b 60%,#0b1019); }
.tutorial-hero::after { content:"360"; position:absolute; right:36px; bottom:-65px; color:rgba(141,255,209,.035); font-family:"Space Grotesk",sans-serif; font-size:230px; font-weight:700; line-height:1; pointer-events:none; }
.tutorial-hero h1 { position:relative; z-index:1; max-width:720px; margin:18px 0; color:#f6faf8; font-family:"Space Grotesk",sans-serif; font-size:clamp(34px,5vw,58px); letter-spacing:-.055em; line-height:1.06; }
.tutorial-hero h1 span { color:#7cebc2; }
.tutorial-hero p { position:relative; z-index:1; max-width:590px; margin:0; color:#adbfbe; line-height:1.7; }
.tutorial-hero-meta { display:flex; gap:10px; margin-top:24px; }
.tutorial-hero-meta span { border:1px solid rgba(117,222,190,.21); border-radius:100px; padding:7px 12px; color:#c5eddb; background:rgba(1,12,14,.26); font-size:12px; font-weight:700; }
.tutorial-layout { display:grid; grid-template-columns:minmax(250px,300px) minmax(0,1fr); gap:22px; align-items:start; margin-top:26px; }
.tutorial-outline,.tutorial-content { border:1px solid #26363b; border-radius:18px; background:#0e151c; }
.tutorial-outline { position:sticky; top:96px; padding:18px; }
.tutorial-outline-label { padding:0 7px 14px; color:#80e5c1; font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.tutorial-outline-module { padding:16px 0; border-top:1px solid #243139; }
.tutorial-outline-module-head { display:flex; align-items:baseline; gap:11px; padding:0 7px 9px; color:#f2f7f5; }
.tutorial-outline-module-head span { color:#66bda2; font-family:"Space Grotesk",sans-serif; font-size:12px; }
.tutorial-outline-module-head strong { font-size:14px; }
.tutorial-lesson-btn { display:flex; align-items:center; gap:10px; width:100%; padding:11px 10px; border:1px solid transparent; border-radius:10px; background:transparent; color:#aebdc0; text-align:left; cursor:pointer; font:inherit; font-size:13px; }
.tutorial-lesson-btn > span:nth-child(2) { flex:1; }
.tutorial-lesson-btn small { color:#6a7f83; }
.tutorial-lesson-btn:hover,.tutorial-lesson-btn:focus-visible { color:#fff; background:#17272b; outline:none; }
.tutorial-lesson-btn.active { border-color:rgba(100,231,178,.29); background:linear-gradient(90deg,rgba(58,194,144,.17),rgba(58,194,144,.05)); color:#f5fffa; }
.tutorial-play-icon { display:grid; place-items:center; flex:0 0 25px; height:25px; border:1px solid #415b57; border-radius:7px; color:#7cebc2; font-size:9px; }
.tutorial-content { min-height:460px; padding:30px; }
.tutorial-content-top { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.tutorial-lesson-index { color:#7d9696; font-size:12px; font-weight:700; }
.tutorial-content h2 { margin:13px 0 0; color:#f4faf7; font-family:"Space Grotesk",sans-serif; font-size:clamp(26px,3.4vw,38px); letter-spacing:-.035em; }
.tutorial-description { max-width:760px; margin:12px 0 24px; color:#b6c6c6; line-height:1.7; white-space:pre-line; }
.tutorial-module-description { margin:10px 0 0; color:#7faaa0; font-size:13px; line-height:1.6; white-space:pre-line; }
.tutorial-video { overflow:hidden; width:100%; aspect-ratio:16/9; margin-top:22px; border:1px solid #294344; border-radius:14px; background:#05090e; box-shadow:0 18px 42px rgba(0,0,0,.23); }
.tutorial-video video,.tutorial-video iframe { display:block; width:100%; height:100%; border:0; background:#000; }
.tutorial-resources { display:grid; grid-template-columns:minmax(180px,.7fr) minmax(0,1fr); gap:24px; margin-top:34px; padding-top:28px; border-top:1px solid #253339; }
.tutorial-resources h3 { margin:10px 0; color:#f0f8f4; font-size:20px; }
.tutorial-resources p { margin:0; color:#98adad; font-size:13px; line-height:1.6; }
.tutorial-resource-list { display:grid; gap:9px; }
.tutorial-resource { display:flex; align-items:center; gap:11px; padding:13px 15px; border:1px solid #294139; border-radius:10px; background:#12221f; color:#d5f6e6; text-decoration:none; }
.tutorial-resource strong { flex:1; font-size:13px; }
.tutorial-resource:hover,.tutorial-resource:focus-visible { border-color:#70d9ac; background:#18352a; }
.tutorial-empty { margin-top:24px; padding:50px 24px; border:1px dashed #34564b; border-radius:16px; color:#adbdba; text-align:center; }
.tutorial-admin-list { display:grid; gap:15px; }
.tutorial-admin-module { overflow:hidden; border:1px solid #2c3b3e; border-radius:15px; background:#111a1f; }
.tutorial-admin-module-head { display:flex; align-items:flex-start; gap:15px; padding:20px; }
.tutorial-admin-number { flex:0 0 37px; color:#73dfb6; font-family:"Space Grotesk",sans-serif; font-size:20px; font-weight:700; }
.tutorial-admin-module-title { flex:1; min-width:0; }
.tutorial-admin-module-title h2 { margin:5px 0 4px; color:#f1f9f5; font-size:20px; }
.tutorial-admin-module-title p { margin:0; color:#a5b5b8; font-size:13px; }
.tutorial-admin-status { display:inline-block; color:#b6b5a3; font-size:10px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.tutorial-admin-status.is-live { color:#78e7b5; }
.tutorial-admin-lessons { display:grid; gap:1px; background:#26363b; border-top:1px solid #26363b; }
.tutorial-admin-lesson { display:flex; align-items:center; gap:13px; padding:13px 20px; background:#0e161c; }
.tutorial-admin-lesson > span { color:#78bba8; font-size:12px; }
.tutorial-admin-lesson > div { display:grid; flex:1; gap:4px; min-width:0; }
.tutorial-admin-lesson strong { color:#eaf3f0; font-size:13px; }
.tutorial-admin-lesson small { color:#8fa3a4; }
.tutorial-add-lesson { width:100%; padding:14px; border:0; border-top:1px solid #26363b; background:#142420; color:#84e3b9; text-align:left; cursor:pointer; font-weight:700; }
.tutorial-add-lesson:hover { background:#1a3029; }
.tutorial-admin-empty { padding:42px; border:1px dashed #3a6050; border-radius:15px; color:#adbfbb; }
.tutorial-admin-empty h2 { margin-top:0; color:#f1f8f5; }
.tutorial-resource-rows { display:grid; gap:8px; margin-top:9px; }
.tutorial-resource-edit { display:grid; grid-template-columns:minmax(120px,.8fr) minmax(180px,1.5fr) auto; gap:8px; }
.tutorial-publish-field { display:flex; align-items:end; padding-bottom:10px; }
.tutorial-publish-field label { display:flex; align-items:center; gap:8px; margin:0; }
.tutorial-publish-field input { width:auto; }
@media(max-width:850px) { .tutorial-layout { grid-template-columns:1fr; } .tutorial-outline { position:static; } .tutorial-outline-module { display:inline-block; width:min(100%,300px); vertical-align:top; } .tutorial-resources { grid-template-columns:1fr; } }
@media(max-width:600px) { .tutorial-page { padding-top:18px; } .tutorial-hero { padding:30px 24px; } .tutorial-hero::after { right:-6px; bottom:-30px; font-size:130px; } .tutorial-content { padding:20px; } .tutorial-admin-module-head,.tutorial-admin-lesson { flex-wrap:wrap; } .tutorial-resource-edit { grid-template-columns:1fr auto; } .tutorial-resource-edit .tutorial-resource-url { grid-column:1; } }