/* 使用教程：封面格子 + 播放导航 + 全屏 */
.header-actions .profile-trigger.tutorial-trigger{ gap:8px; }
.tutorial-dialog{
  position:fixed !important; left:50% !important; top:50% !important;
  transform:translate(-50%,-50%) !important; margin:0 !important;
  width:min(1080px, calc(100vw - 28px)) !important;
  height:min(780px, calc(100dvh - 36px)) !important;
  max-width:calc(100vw - 28px) !important; max-height:calc(100dvh - 36px) !important;
  padding:0 !important; overflow:hidden !important;
  border:1px solid rgba(250,231,184,.34) !important; border-radius:26px !important;
  color:#fff9ec !important;
  background:
    radial-gradient(circle at 90% 0%, rgba(244,196,101,.22), transparent 34%),
    radial-gradient(circle at 8% 100%, rgba(101,158,112,.2), transparent 40%),
    linear-gradient(140deg, rgba(24,42,34,.97), rgba(16,26,22,.95)) !important;
  box-shadow:0 28px 80px rgba(4,16,11,.55), inset 0 1px 0 rgba(255,255,255,.14) !important;
  backdrop-filter:blur(26px) saturate(118%); -webkit-backdrop-filter:blur(26px) saturate(118%);
}
.tutorial-dialog::backdrop{
  background:rgba(8,15,12,.55); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.tutorial-shell{
  height:100%; box-sizing:border-box; display:flex; flex-direction:column;
  padding:22px 22px 16px; gap:14px;
}
.tutorial-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; flex:0 0 auto; }
.tutorial-head h2{ margin:0; font:500 28px/1.25 Georgia,"Songti SC",serif; color:#fff8e8; letter-spacing:.04em; }
.tutorial-head p{ margin:6px 0 0; font:14px/1.5 sans-serif; color:rgba(255,244,214,.62); }
.tutorial-close{
  width:42px;height:42px;display:grid;place-items:center;
  border:1px solid rgba(255,246,220,.28);border-radius:50%;
  color:#fff8e8;background:rgba(255,255,255,.1);cursor:pointer;flex:0 0 auto;
}
.tutorial-close:hover{background:rgba(255,255,255,.16)}
.tutorial-close svg{width:18px;height:18px}
.tutorial-grid{
  flex:1 1 auto; min-height:0; overflow:auto;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:16px; padding:4px 2px 10px; align-content:start;
  scrollbar-width:thin; scrollbar-color:#9bb08a transparent;
}
.tutorial-card{
  display:flex; flex-direction:column; gap:10px;
  border:1px solid rgba(255,236,190,.22); border-radius:18px;
  background:rgba(255,255,255,.06); padding:10px; cursor:pointer;
  transition:transform .15s ease, border-color .15s ease, background .15s ease;
}
.tutorial-card:hover{
  transform:translateY(-2px); border-color:rgba(244,196,101,.45); background:rgba(255,255,255,.1);
}
.tutorial-thumb{
  position:relative; aspect-ratio:16/10; border-radius:12px; overflow:hidden;
  background:linear-gradient(145deg,#1a2c24,#243830);
}
.tutorial-thumb img,.tutorial-thumb video{ width:100%;height:100%;object-fit:cover;display:block; }
.tutorial-thumb-ph{
  width:100%;height:100%;display:grid;place-items:center;
  color:rgba(255,244,214,.45); font:14px/1.4 sans-serif;
}
.tutorial-play{
  position:absolute;inset:0;display:grid;place-items:center;
  background:rgba(8,16,12,.28); transition:background .15s ease;
}
.tutorial-card:hover .tutorial-play{background:rgba(8,16,12,.12)}
.tutorial-play span{
  width:52px;height:52px;border-radius:50%; display:grid;place-items:center;
  background:linear-gradient(135deg,#f0d48a,#c4922e); color:#3d2c0d;
  box-shadow:0 8px 22px rgba(0,0,0,.28); font-size:18px;padding-left:3px;
}
.tutorial-label{
  margin:0; padding:0 4px 4px; font:15px/1.45 "Songti SC","STSong",serif;
  color:#fff6e4; text-align:center; letter-spacing:.04em;
}
.tutorial-empty{
  grid-column:1/-1; text-align:center; padding:60px 20px;
  color:rgba(255,244,214,.55); font:15px/1.7 sans-serif;
}
.tutorial-player-wrap{
  display:none; flex:1 1 auto; min-height:0; flex-direction:column; gap:12px;
}
.tutorial-dialog.is-playing .tutorial-grid{display:none}
.tutorial-dialog.is-playing .tutorial-player-wrap{display:flex}
.tutorial-player-bar{ display:flex; align-items:center; gap:10px; }
.tutorial-back,.tutorial-fs{
  border:1px solid rgba(255,246,220,.28); background:rgba(255,255,255,.08);
  color:#fff8e8; border-radius:999px; padding:8px 14px; min-height:0;
  font:14px sans-serif; cursor:pointer;
}
.tutorial-fs{ margin-left:auto; }
.tutorial-fs[aria-pressed="true"]{ background:rgba(212,168,74,.28); border-color:rgba(244,196,101,.5); }
.tutorial-player-title{
  margin:0; font:500 20px/1.35 Georgia,"Songti SC",serif; color:#fff8e8;
}
.tutorial-video-box{
  flex:1 1 auto; min-height:0; width:100%; border-radius:16px; overflow:hidden;
  background:#000; border:1px solid rgba(255,236,190,.18);
  display:flex; align-items:center; justify-content:center;
}
.tutorial-video-box:fullscreen, .tutorial-video-box:-webkit-full-screen{
  border-radius:0; border:0; background:#000;
}
.tutorial-player{
  width:100%; height:100%; max-height:100%; background:#000; border:0; outline:none;
}
.tutorial-nav{
  display:grid; grid-template-columns:1fr 1fr; gap:10px; flex:0 0 auto;
}
.tutorial-nav-btn{
  display:flex; flex-direction:column; align-items:flex-start; gap:4px;
  text-align:left; padding:12px 14px; border-radius:14px;
  border:1px solid rgba(255,236,190,.22); background:rgba(255,255,255,.07);
  color:#fff8e8; cursor:pointer; min-height:0;
}
.tutorial-nav-btn:hover:not(:disabled){ background:rgba(255,255,255,.12); border-color:rgba(244,196,101,.4); }
.tutorial-nav-btn:disabled{ opacity:.42; cursor:default; }
.tutorial-nav-dir{ font:12px/1.2 sans-serif; color:rgba(255,244,214,.55); }
.tutorial-nav-name{
  font:15px/1.35 "Songti SC","STSong",serif; color:#fff6e4;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%;
}
@media(max-width:700px){
  .tutorial-dialog{
    width:calc(100vw - 16px) !important; height:calc(100dvh - 20px) !important; border-radius:20px !important;
  }
  .tutorial-head h2{font-size:22px}
  .tutorial-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
  .tutorial-nav{grid-template-columns:1fr}
}