.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-player-shell { --tutorial-accent:#7cebc2; --tutorial-play:#0c9cda; --plyr-color-main:#0c9cda; }
.tutorial-player-shell .tutorial-video { position:relative; margin-top:22px; }
.tutorial-video-youtube { min-height:200px; container-type:inline-size; }
.tutorial-youtube-stage,.tutorial-youtube-stage .plyr,.tutorial-youtube-stage .plyr__video-wrapper,.tutorial-youtube-stage .plyr__video-embed { width:100%; height:100%; }
.tutorial-youtube-stage { position:absolute; inset:0; }
.tutorial-youtube-stage .plyr__video-embed { aspect-ratio:auto; padding-bottom:0 !important; }
.tutorial-youtube-stage .plyr__video-embed__container { width:100%; height:100%; padding-bottom:0 !important; transform:none !important; }
.tutorial-youtube-stage .plyr__video-embed iframe { position:absolute; inset:0; width:100%; height:100%; }
.tutorial-youtube-clean .tutorial-youtube-stage iframe { pointer-events:none; }
.tutorial-youtube-clean .tutorial-youtube-stage::before,.tutorial-youtube-clean .tutorial-youtube-stage::after { content:""; position:absolute; left:0; right:0; z-index:10; height:14%; pointer-events:none; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
.tutorial-youtube-clean .tutorial-youtube-stage::before { top:0; background:linear-gradient(rgba(5,9,14,.6) 75%,transparent); }
.tutorial-youtube-clean .tutorial-youtube-stage::after { bottom:0; background:linear-gradient(transparent,rgba(5,9,14,.6) 25%); }
.tutorial-youtube-clean:fullscreen .tutorial-youtube-stage::before,.tutorial-youtube-clean:fullscreen .tutorial-youtube-stage::after,.tutorial-youtube-clean.is-tutorial-fullscreen .tutorial-youtube-stage::before,.tutorial-youtube-clean.is-tutorial-fullscreen .tutorial-youtube-stage::after { display:none; }
.tutorial-youtube-stage .plyr__poster { display:none !important; }
.tutorial-youtube-stage[hidden],.tutorial-youtube-cover[hidden],.tutorial-youtube-end[hidden] { display:none !important; }
.tutorial-youtube-cover { position:absolute; inset:0; overflow:hidden; background:#071113; }
.tutorial-youtube-cover::after { position:absolute; inset:0; content:""; background:linear-gradient(180deg,transparent 30%,rgba(5,13,16,.58)); pointer-events:none; }
.tutorial-youtube-cover img { display:block; width:100%; height:100%; object-fit:cover; opacity:.82; }
.tutorial-youtube-cover .tutorial-youtube-activate { z-index:1; }
.tutorial-youtube-end { position:absolute; inset:0; display:grid; place-items:center; overflow:hidden; background:#071113; text-align:center; }
.tutorial-youtube-end::after { position:absolute; inset:0; content:""; background:rgba(4,13,16,.73); pointer-events:none; }
.tutorial-youtube-end img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.55; }
.tutorial-youtube-end > div { position:relative; z-index:1; display:grid; justify-items:center; gap:12px; }
.tutorial-youtube-end strong { color:#f1fff8; font-family:"Space Grotesk",sans-serif; font-size:clamp(19px,3vw,28px); }
.tutorial-youtube-end button { padding:11px 17px; border:1px solid var(--tutorial-accent); border-radius:9px; background:#183c35; color:#eafff5; font:inherit; font-weight:700; cursor:pointer; }
.tutorial-youtube-end button:hover,.tutorial-youtube-end button:focus-visible { background:#28614f; outline:2px solid #e6fff2; outline-offset:3px; }
.tutorial-youtube-activate { position:absolute; top:50%; left:50%; display:grid; place-items:center; width:74px; height:74px; transform:translate(-50%,-50%); border:1px solid #75d9ff; border-radius:50%; background:var(--tutorial-play); color:#fff; box-shadow:0 0 0 9px rgba(12,156,218,.16),0 16px 40px rgba(0,0,0,.42); cursor:pointer; }
.tutorial-youtube-activate svg { width:30px; height:30px; margin-left:3px; fill:currentColor; }
.tutorial-youtube-activate:hover:not(:disabled),.tutorial-youtube-activate:focus-visible { background:#087db0; outline:2px solid #d7f5ff; outline-offset:4px; }
.tutorial-youtube-activate:disabled { cursor:wait; opacity:.65; }
.tutorial-player-status { padding:10px 14px; border:1px solid #294344; border-top:0; border-radius:0 0 12px 12px; background:#101e23; color:#c9e9dd; text-align:center; font-size:12px; }
.tutorial-player-status.is-error { padding:16px; color:#fff; }
.tutorial-player-status a { color:var(--tutorial-accent); font-weight:700; }
.tutorial-player-controls { position:absolute; z-index:15; right:0; bottom:0; left:0; display:flex; align-items:center; gap:12px; min-height:68px; padding:17px 16px 8px; border:0; border-radius:0 0 14px 14px; background:linear-gradient(transparent,rgba(0,0,0,.84)); color:#f0f5f3; font-size:12px; font-variant-numeric:tabular-nums; opacity:1; visibility:visible; transition:opacity .2s ease,transform .2s ease,visibility .2s; }
.tutorial-player-shell.is-controls-idle .tutorial-player-controls { opacity:0; visibility:hidden; pointer-events:none; transform:translateY(6px); }
.tutorial-player-controls:focus-visible { outline:2px solid #87d9fa; outline-offset:3px; }
.tutorial-player-controls[hidden],.tutorial-youtube-activate[hidden],.tutorial-player-status[hidden],.tutorial-direct-field[hidden],.tutorial-youtube-field[hidden] { display:none !important; }
.tutorial-player-shell .tutorial-video { border-radius:14px; }
.tutorial-player-controls button { flex:0 0 auto; display:grid; place-items:center; min-width:34px; min-height:34px; padding:7px; border:0; border-radius:8px; background:transparent; color:#d9ede8; cursor:pointer; font:inherit; font-weight:700; }
.tutorial-player-controls button svg { width:18px; height:18px; fill:currentColor; }
.tutorial-player-controls button:hover,.tutorial-player-controls button:focus-visible { background:#1b3948; color:#fff; outline:2px solid #87d9fa; outline-offset:2px; }
.tutorial-player-controls [data-youtube-play] { width:40px; height:40px; border-radius:50%; background:var(--tutorial-play); color:#fff; }
.tutorial-player-controls [data-youtube-play]:hover,.tutorial-player-controls [data-youtube-play]:focus-visible { background:#087db0; }
.tutorial-player-controls [data-youtube-play] .tutorial-icon-pause { display:none; }
.tutorial-player-controls [data-youtube-play][data-playing="true"] .tutorial-icon-play { display:none; }
.tutorial-player-controls [data-youtube-play][data-playing="true"] .tutorial-icon-pause { display:block; }
.tutorial-player-controls input[type="range"] { width:92px; accent-color:var(--tutorial-play); cursor:pointer; }
.tutorial-player-controls input[data-youtube-progress] { flex:1; min-width:90px; }
.tutorial-speed-label { display:flex; align-items:center; gap:5px; white-space:nowrap; }
.tutorial-speed-label select { padding:6px 8px; border:1px solid #35505b; border-radius:7px; background:#102831; color:#e5f6ef; font:inherit; }
.tutorial-player-shell:fullscreen { display:flex; flex-direction:column; justify-content:center; padding:0; background:#05090e; }
.tutorial-player-shell:fullscreen .tutorial-video { flex:1; min-height:0; aspect-ratio:auto; margin-top:0; }
.tutorial-player-shell.is-tutorial-fullscreen { position:fixed; inset:0; z-index:100000; display:flex; flex-direction:column; padding:0; background:#05090e; }
.tutorial-player-shell.is-tutorial-fullscreen .tutorial-video { flex:1; min-height:0; aspect-ratio:auto; margin-top:0; }
.tutorial-video-error { display:grid; place-items:center; padding:24px; color:#f3d7d7; text-align:center; }
.tutorial-youtube-preview { margin-top:12px; color:#a5bdb5; font-size:12px; }
.tutorial-youtube-preview .tutorial-player-shell { max-width:460px; }
.tutorial-youtube-preview > small { display:block; margin-top:8px; }
.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; } }
@media(max-width:600px) {
  .tutorial-player-controls { display:grid; grid-template-columns:40px 42px minmax(60px,1fr) 42px 34px; gap:7px; padding:9px; }
  .tutorial-player-controls [data-youtube-play] { grid-column:1; grid-row:1; }
  .tutorial-player-controls [data-youtube-current] { grid-column:2; grid-row:1; }
  .tutorial-player-controls input[data-youtube-progress] { grid-column:3; grid-row:1; min-width:0; width:100%; }
  .tutorial-player-controls [data-youtube-duration] { grid-column:4; grid-row:1; }
  .tutorial-player-controls [data-youtube-fullscreen] { grid-column:5; grid-row:1; }
  .tutorial-player-controls [data-youtube-mute] { grid-column:1 / 3; grid-row:2; }
  .tutorial-player-controls input[data-youtube-volume] { grid-column:3; grid-row:2; min-width:0; width:100%; }
  .tutorial-speed-label { grid-column:4 / 6; grid-row:2; justify-content:flex-end; font-size:0; }
  .tutorial-speed-label select { font-size:12px; }
}
@container (min-width:520px) and (max-width:700px) {
  .tutorial-player-controls { gap:7px; padding:12px 10px 7px; }
  .tutorial-player-controls input[data-youtube-progress] { min-width:60px; }
  .tutorial-player-controls input[data-youtube-volume] { width:65px; }
  .tutorial-speed-label { font-size:0; }
  .tutorial-speed-label select { font-size:12px; }
}
@container (max-width:519px) {
  .tutorial-player-controls { display:grid; grid-template-columns:40px 42px minmax(60px,1fr) 42px 34px; gap:7px; padding:9px; }
  .tutorial-player-controls [data-youtube-play] { grid-column:1; grid-row:1; }
  .tutorial-player-controls [data-youtube-current] { grid-column:2; grid-row:1; }
  .tutorial-player-controls input[data-youtube-progress] { grid-column:3; grid-row:1; min-width:0; width:100%; }
  .tutorial-player-controls [data-youtube-duration] { grid-column:4; grid-row:1; }
  .tutorial-player-controls [data-youtube-fullscreen] { grid-column:5; grid-row:1; }
  .tutorial-player-controls [data-youtube-mute] { grid-column:1 / 3; grid-row:2; }
  .tutorial-player-controls input[data-youtube-volume] { grid-column:3; grid-row:2; min-width:0; width:100%; }
  .tutorial-speed-label { grid-column:4 / 6; grid-row:2; justify-content:flex-end; font-size:0; }
  .tutorial-speed-label select { font-size:12px; }
}
@media(prefers-reduced-motion:reduce) { .tutorial-youtube-activate,.tutorial-player-controls { transition:none; } }
