/* 使用教程（growth/tutorial/web.js）：登录页、顶栏、空的生成记录三个入口和播放弹窗 */

.tutorial-link { display: inline-flex; align-items: center; gap: 10px; margin-top: 28px; padding: 6px 14px 6px 6px; border: 1px solid var(--lime-line); border-radius: 999px; background: var(--lime-soft); color: var(--t100); font: inherit; font-size: 13px; cursor: pointer; transition: background-color 0.15s, border-color 0.15s; -webkit-app-region: no-drag; /* 桌面版登录页整块能拖窗口，这个按钮要能点 */ }
.tutorial-link:hover { border-color: var(--lime); background: rgba(190, 242, 100, 0.2); }
.play-dot { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--lime); color: #000; }
.play-dot svg { margin-left: 2px; }
.tutorial-link-len { color: var(--t400); font-size: 12px; }
.tutorial-btn { display: flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 6px; background: none; color: var(--t300); font: inherit; font-size: 12px; cursor: pointer; transition: border-color 0.15s, background-color 0.15s, color 0.15s; }
.tutorial-btn svg { color: var(--lime); }
.tutorial-btn:hover { border-color: var(--line-strong); background: rgba(255, 255, 255, 0.04); color: var(--t100); }
.tutorial-card { display: block; width: min(100%, 440px); margin: 28px auto 0; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: border-color 0.15s, transform 0.15s; }
.tutorial-card:hover { border-color: var(--lime-line); transform: translateY(-1px); }
.tutorial-card img { display: block; width: 100%; height: auto; aspect-ratio: 1720 / 1080; }
.tutorial-card-cap { display: flex; justify-content: space-between; padding: 10px 14px; border-top: 1px solid var(--line-weak); font-size: 13px; color: var(--t200); }
.tutorial-card-cap span { color: var(--lime); }
.tutorial-panel { max-width: min(960px, calc((92dvh - 170px) * 1.59)); max-height: 92dvh; }
.tutorial-hint { margin-left: 12px; font-size: 12px; color: var(--t400); }
.tutorial-panel video { display: block; width: 100%; aspect-ratio: 1720 / 1080; background: #000; }
.chapters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 12px 16px 16px; list-style: none; }
.chapters button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 10px; border: 1px solid var(--line-weak); border-radius: 8px; background: var(--field); color: var(--t300); font: inherit; font-size: 12px; text-align: left; cursor: pointer; transition: background-color 0.15s, border-color 0.15s, color 0.15s; }
.chapters button:hover { background: var(--hover); color: var(--t100); }
.chapters b { font-family: var(--font-mono); font-weight: 500; color: var(--t500); }
.chapters span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chapters time { margin-left: auto; color: var(--t500); font-variant-numeric: tabular-nums; }
.chapters button.is-current { border-color: var(--lime-line); background: var(--lime-soft); color: var(--t50); }
.chapters button.is-current b { color: var(--lime); }
@media (max-width: 640px) {
  .tutorial-btn span, .tutorial-hint { display: none; }
  .tutorial-btn { padding: 5px 7px; }
  .chapters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .tutorial-btn { display: none; } /* 手机上顶栏放不下；教程还能从登录页和空的生成记录里打开 */
}