/* Shared tutorial surfaces, scoped away from the rest of the console. */
.tutorial-sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.tutorial-editor{--tv-line:var(--hk-line,#e2e4eb);--tv-soft:var(--hk-soft,#f7f7fa);--tv-ink:var(--hk-text,#1d1d1f);--tv-muted:var(--hk-muted,#737784);--tv-accent:var(--hk-primary,#0071e3);color:var(--tv-ink)}
.tutorial-editor .panel-head{align-items:flex-start;justify-content:space-between;gap:16px}
.tutorial-config-badge{padding:8px 14px;border:1px solid var(--tv-line);border-radius:999px;background:var(--hk-tint,#edf4ff);color:var(--tv-accent);font-size:11px;white-space:nowrap}
.tutorial-config-badge.is-pending{background:var(--tv-soft);color:var(--tv-muted)}
body.huoke-console .settings-form.tutorial-editor-form,.settings-form.tutorial-editor-form{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:28px;align-items:start}
.tutorial-editor-fields{display:grid;gap:22px;min-width:0}
.tutorial-editor-fields label{display:grid!important;gap:9px;font-size:12px;color:var(--tv-ink)}
.tutorial-editor-fields input{width:100%;min-width:0;box-sizing:border-box}
.tutorial-editor-fields>label small{display:inline;color:var(--tv-muted);font-size:11px}
.tutorial-source-card{padding:20px;border:1px solid var(--tv-line);border-radius:20px;background:var(--tv-soft);min-width:0}
.tutorial-source-heading{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.tutorial-source-heading>span{display:grid;place-items:center;width:38px;height:38px;flex:0 0 38px;border-radius:12px;background:var(--hk-surface,#fff);color:var(--tv-accent);font-size:22px}
.tutorial-source-heading h3,.tutorial-preview-copy h3{margin:0;font-size:14px;font-weight:600;line-height:1.6}
.tutorial-source-heading p,.tutorial-preview-copy p{margin:5px 0 0;font-size:12px;line-height:1.8;color:var(--tv-muted)}
.tutorial-source-card small{display:block;margin-top:12px;color:var(--tv-muted);font-size:11px;line-height:1.8}
.tutorial-file-label{min-width:0}.tutorial-editor input[type=file]{padding:12px;border:1px solid var(--tv-line);border-radius:12px;background:var(--hk-surface,#fff);font-size:12px}
.tutorial-editor input[type=file]::file-selector-button{padding:8px 10px;margin-right:10px;border:0;border-radius:8px;background:var(--hk-tint,#edf4ff);color:var(--tv-accent);cursor:pointer}
.tutorial-file-meta{display:flex;justify-content:space-between;align-items:center;gap:10px}
body.huoke-console .tutorial-file-meta button,.tutorial-file-meta button{padding:4px 0!important;background:transparent!important;color:var(--tv-accent)!important;border:0!important;box-shadow:none!important;font-size:11px!important;white-space:nowrap}
.tutorial-preview-card{min-width:0;border:1px solid var(--tv-line);border-radius:20px;background:var(--tv-soft);overflow:hidden}
.tutorial-preview-head{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 20px;font-size:12px}
[data-tutorial-status]{color:var(--tv-muted,var(--ink-soft));font-size:11px;line-height:1.5}
[data-tutorial-status][data-state=ready]{color:#14865c}[data-tutorial-status][data-state=error]{color:#b34d18}
.tutorial-player-stage{position:relative;aspect-ratio:16/9;background:#11161c;isolation:isolate;overflow:hidden}
.tutorial-player-stage video{display:block;width:100%;height:100%;object-fit:contain;background:#11161c}
.tutorial-player-message{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:24px;text-align:center;background:linear-gradient(135deg,#162438,#11161c);color:#f5f5f7;z-index:1}
.tutorial-player-message[hidden],.tutorial-editor [hidden],.tutorial-video [hidden]{display:none!important}
.tutorial-player-message>span{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;border:1px solid #ffffff40;color:#b5d6ff;font-size:24px}
.tutorial-player-message strong{font-size:15px;font-weight:600;line-height:1.5}
.tutorial-player-message p{margin:0;max-width:390px;font-size:12px;line-height:1.8;color:#bfc9d7}
body.huoke-console .tutorial-player-message button,.tutorial-player-message button{margin-top:5px;padding:9px 16px!important;border:1px solid #ffffff30!important;border-radius:999px!important;background:#ffffff12!important;color:#eaf3ff!important;font-size:12px!important;cursor:pointer}
.tutorial-preview-copy{padding:20px}.tutorial-preview-copy a{display:inline-block;margin-top:16px;color:var(--tv-accent);font-size:12px;text-decoration:none}
.tutorial-editor-footer{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:20px;padding-top:22px;border-top:1px solid var(--tv-line)}
.tutorial-editor-footer p{margin:0;color:var(--tv-muted);font-size:11px;line-height:1.8}.tutorial-editor-footer p.is-error{color:#b34d18}
.tutorial-editor-footer button{flex-shrink:0}.tutorial-editor-footer button:disabled{opacity:.6;cursor:wait}
.tutorial-video{padding-top:72px;padding-bottom:72px}
.tutorial-video-head{max-width:1120px;margin:0 auto 24px;border:0;padding:0}
.tutorial-video-head h2{font-size:clamp(26px,3vw,36px);letter-spacing:-.04em;line-height:1.3}
.tutorial-video .tutorial-video-label{border:1px solid var(--line);background:var(--mint);color:var(--coral);padding:9px 14px;border-radius:14px;font-size:12px;white-space:nowrap}
.tutorial-video-head p{margin:12px 0 0;color:var(--ink-soft);font-size:14px;line-height:1.8}
.tutorial-watch-card{max-width:1120px;margin:auto;border:1px solid var(--line);border-radius:24px;overflow:hidden;background:var(--white);box-shadow:var(--shadow)}
.tutorial-watch-footer{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:22px 26px;color:var(--ink)}
.tutorial-watch-footer strong{font-size:14px;font-weight:600}.tutorial-watch-footer p{margin:5px 0 0;color:var(--ink-soft);font-size:12px}
.tutorial-watch-actions{display:flex;align-items:center;gap:18px;flex-shrink:0}.tutorial-watch-actions a{color:var(--coral);font-size:12px;text-decoration:none}
.tutorial-watch-actions button{display:inline-flex;align-items:center;min-height:40px;padding:0;border:0;background:transparent;color:var(--coral);font:inherit;font-size:12px;white-space:nowrap;cursor:pointer}
.tutorial-watch-actions button:hover{color:var(--coral-dark)}
.tutorial-editor :focus-visible,.tutorial-video :focus-visible{outline:3px solid #0071e3;outline-offset:3px}
body.dark [data-tutorial-status][data-state=ready],body.dark-mode [data-tutorial-status][data-state=ready]{color:#64d6a1}body.dark [data-tutorial-status][data-state=error],body.dark-mode [data-tutorial-status][data-state=error],body.dark .tutorial-editor-footer p.is-error,body.dark-mode .tutorial-editor-footer p.is-error{color:#ffb580}
@media(min-width:1101px){.tutorial-watch-actions{padding-right:150px}}
@media(max-width:1100px){body.huoke-console .settings-form.tutorial-editor-form,.settings-form.tutorial-editor-form{grid-template-columns:1fr}.tutorial-preview-card{max-width:720px;width:100%}}
@media(max-width:760px){.tutorial-video{padding-top:48px;padding-bottom:48px}.tutorial-video-head{display:block}.tutorial-video-label{margin-top:14px}.tutorial-video-head p{font-size:12px}.tutorial-watch-card{border-radius:20px}.tutorial-watch-footer{padding:18px;align-items:flex-start;flex-direction:column;gap:14px}.tutorial-editor .panel-head{flex-wrap:wrap}.tutorial-editor-footer{align-items:stretch;flex-direction:column;gap:14px}.tutorial-source-card,.tutorial-preview-copy{padding:16px}.tutorial-editor-fields{gap:18px}.tutorial-player-message{padding:16px;gap:6px}.tutorial-player-message>span{width:28px;height:28px;font-size:18px}.tutorial-player-message strong{font-size:13px}.tutorial-player-message p{font-size:11px}.tutorial-preview-head{padding:16px}.tutorial-editor-footer button{align-self:flex-start}}
@media(prefers-reduced-motion:reduce){.tutorial-editor *,.tutorial-video *{transition:none!important}}