/* ═══════════════════════════════════════════════════════════════
   components.css — Design System Component Definitions
   Auto-extracted from preview/component-*.html
   DO NOT EDIT MANUALLY — regenerate via extract-components-css.mjs
   ═══════════════════════════════════════════════════════════════ */

/* ── Button ────────────────────────────────────────────────── */
/* @anatomy
   <span class="label">变体 Variants</span><button class="btn primary" data-evidence-sample="Primary CTA">开始学习 Start Learning</button><button class="btn secondary" data-evidence-sample="Secondary">查看大纲 View Outline</button><button class="btn ghost" data-evidence-sample="Ghost">收藏 Bookmark</button><button class="btn outline" data-evidence-sample="Outline">下载资源 Download</button>
*/
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); box-sizing: border-box; height: var(--size-button-md); padding: 0 var(--space-5); font-family: var(--font-body); font-size: var(--font-size-body); font-weight: var(--font-weight-h4); line-height: 1; border: 2px solid transparent; border-radius: var(--radius-md); cursor: pointer; white-space: nowrap; flex-shrink: 0; min-width: var(--size-button-md); transition: background var(--duration-fast), box-shadow var(--duration-fast), transform var(--duration-fast), border-color var(--duration-fast); }
.btn:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.btn.primary { background: var(--color-primary); color: var(--color-on-primary); }
.btn.primary:hover { background: var(--color-primary-hover); box-shadow: var(--shadow-2); }
.btn.primary:active { transform: translateY(1px); box-shadow: none; }
.btn.secondary { background: var(--accent); color: var(--accent-foreground); }
.btn.secondary:hover { background: var(--accent-hover); box-shadow: var(--shadow-2); }
.btn.secondary:active { transform: translateY(1px); box-shadow: none; }
.btn.ghost { background: transparent; color: var(--color-primary); }
.btn.ghost:hover { background: var(--color-primary-container); }
.btn.outline { background: transparent; color: var(--color-primary); border-color: var(--color-primary); }
.btn.outline:hover { background: var(--color-primary-container); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
.btn.sm { height: var(--size-button-sm); padding: 0 var(--space-4); font-size: var(--font-size-caption); min-width: var(--size-button-sm); }
.btn.lg { height: var(--size-button-lg); padding: 0 var(--space-6); font-size: var(--font-size-lead); min-width: var(--size-button-lg); }

/* ── Card ──────────────────────────────────────────────────── */
/* @anatomy
   <span class="label">Knowledge</span> <div class="stage"> <article class="card card-knowledge" data-evidence-sample="knowledge-card"> <span class="tag">基础概念 Fundamentals</span> <h3 class="title">色彩车轮 Primary Color Wheels</h3> <p class="summary">理解 primary、secondary 与 tertiary 色彩的排列关系，掌握色相轮的核心结构。Understand the arrangement of primary, secondary, and tertiary colors on the wheel.</p> <a class="more...
*/
/* Component definitions — extracted to components.css by deterministic script */
  .card { box-sizing: border-box; background: var(--color-card); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; width: 100%; }
  .card-knowledge { padding: var(--space-6); border: 1px solid var(--color-border); box-shadow: var(--shadow-2); gap: var(--space-3); }
  .card-knowledge .tag { align-self: flex-start; background: var(--color-primary-container); color: var(--color-on-primary-container); padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); font-size: var(--font-size-eyebrow); font-weight: var(--font-weight-eyebrow); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
  .card-knowledge .title { margin: 0; font-family: var(--font-heading); font-size: var(--font-size-h3); font-weight: var(--font-weight-h3); line-height: var(--line-height-h3); color: var(--color-on-surface); }
  .card-knowledge .summary { margin: 0; font-size: var(--font-size-body); line-height: var(--line-height-body); color: var(--color-on-surface-variant); }
  .card-knowledge .more { align-self: flex-start; color: var(--color-primary); text-decoration: none; font-size: var(--font-size-caption); font-weight: var(--font-weight-caption); white-space: nowrap; transition: color var(--duration-fast); }
  .card-knowledge .more:hover { text-decoration: underline; }
  .card-course { padding: 0; box-shadow: var(--shadow-2); }
  .card-course .thumb { height: 140px; background: linear-gradient(135deg, var(--davinci-primary-400), var(--davinci-accent-500)); position: relative; }
  .card-course .badge { position: absolute; top: var(--space-3); left: var(--space-3); background: var(--color-surface); color: var(--color-on-surface); padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); font-size: var(--font-size-eyebrow); font-weight: var(--font-weight-eyebrow); letter-spacing: 0.08em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; box-shadow: var(--shadow-1); }
  .card-course .badge::before { content: ""; width: 6px; height: 6px; border-radius: var(--radius-full); background: var(--color-success); flex-shrink: 0; }
  .card-course .body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); }
  .card-course .title { margin: 0; font-family: var(--font-heading); font-size: var(--font-size-h4); font-weight: var(--font-weight-h4); line-height: var(--line-height-h4); color: var(--color-on-surface); }
  .card-course .meta { font-size: var(--font-size-caption); color: var(--color-muted-foreground); white-space: nowrap; }
  .card-course .progress { height: 4px; background: var(--color-secondary-container); border-radius: var(--radius-full); overflow: hidden; }
  .card-course .progress > span { display: block; height: 100%; width: 45%; background: var(--color-primary); border-radius: var(--radius-full); }
  .card-course .cta { align-self: flex-start; background: var(--color-primary); color: var(--color-on-primary); border: none; border-radius: var(--radius-md); padding: var(--space-2) var(--space-4); font-family: var(--font-body); font-size: var(--font-size-caption); font-weight: var(--font-weight-caption); cursor: pointer; transition: background var(--duration-fast); white-space: nowrap; }
  .card-course .cta:hover { background: var(--color-primary-hover); }
  .card-lesson { box-sizing: border-box; padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); display: flex; align-items: center; gap: var(--space-3); background: var(--color-card); transition: filter var(--duration-fast); }
  .card-lesson:hover { filter: brightness(0.97); }
  .card-lesson .num { font-family: var(--font-mono); font-size: var(--font-size-mono); font-weight: var(--font-weight-mono); color: var(--color-primary); flex-shrink: 0; }
  .card-lesson .info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .card-lesson .info .t { font-family: var(--font-heading); font-size: var(--font-size-body); font-weight: var(--font-weight-h4); color: var(--color-on-surface); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .card-lesson .info .d { font-size: var(--font-size-caption); color: var(--color-muted-foreground); white-space: nowrap; }
  .card-lesson .status { width: 20px; height: 20px; border-radius: var(--radius-full); flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; color: var(--color-on-primary); }
  .card-lesson .status.done { background: var(--color-success); }
  .card-lesson .status.progress { background: var(--color-warning); }
  .card-lesson .status.todo { background: transparent; border: 2px solid var(--color-border); color: var(--color-muted-foreground); }
  .card-lesson .status svg { width: 12px; height: 12px; }

/* ── Content Block ─────────────────────────────────────────── */
/* @anatomy
   <span class="label">Text · 文本</span>
*/
.cb { width: 100%; box-sizing: border-box; display: flex; flex-direction: column; gap: var(--space-4); }
  .cb-text { padding: var(--space-6); max-width: 65ch; }
  .cb-heading { font-family: var(--font-heading); font-size: var(--font-size-h4); font-weight: var(--font-weight-h4); line-height: var(--line-height-h4); color: var(--color-on-surface); margin: 0; word-break: keep-all; overflow-wrap: break-word; }
  .cb-body { font-family: var(--font-body); font-size: var(--font-size-body); font-weight: var(--font-weight-body); line-height: var(--line-height-body); color: var(--color-on-surface); margin: 0; overflow-wrap: break-word; word-break: keep-all; }
  .cb-body em { color: var(--color-primary); font-style: normal; font-weight: var(--font-weight-h4); }
  .cb-media-row { display: flex; flex-direction: row; gap: var(--space-5); align-items: flex-start; flex-wrap: wrap; }
  .cb-media { flex: 1 1 220px; min-width: 0; aspect-ratio: 16 / 9; background: var(--color-surface-container-high); border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; color: var(--color-on-surface-variant); font-family: var(--font-body); font-size: var(--font-size-caption); }
  .cb-media-text { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: var(--space-3); }
  .cb-caption { font-family: var(--font-body); font-size: var(--font-size-caption); color: var(--color-on-surface-variant); margin: 0; }
  .cb-video { background: var(--color-surface); border-radius: var(--radius-lg); padding: var(--space-5); gap: var(--space-4); }
  .cb-video-frame { aspect-ratio: 16 / 9; background: var(--color-surface-container-high); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; color: var(--color-on-surface-variant); font-family: var(--font-body); font-size: var(--font-size-caption); }
  .cb-code { background: var(--color-surface); border-left: 4px solid var(--color-primary); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); gap: var(--space-2); }
  .cb-mono { font-family: var(--font-mono); font-size: var(--font-size-mono); line-height: var(--line-height-mono); color: var(--color-on-surface); margin: 0; white-space: pre-wrap; }
  .cb-attribution { font-family: var(--font-body); font-size: var(--font-size-caption); color: var(--color-on-surface-variant); margin: 0; }

/* ── Navigation ────────────────────────────────────────────── */
/* @anatomy
   <div class="block"> <span class="label">双轴导航 Dual-Axis Nav</span> <nav class="davinci-nav"> <div class="davinci-nav-axis"> <button class="davinci-nav-tab active" data-evidence-sample="Course week"><span class="wk">W1</span>第1周 Intro</button>
*/
/* Dual-axis navigation */
.davinci-nav { display: flex; flex-direction: column; gap: var(--space-2); width: 100%; max-width: var(--max-content); }
.davinci-nav-axis { display: flex; align-items: center; gap: var(--space-1); flex-wrap: wrap; }
.davinci-nav-tab { position: relative; display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-2) var(--space-4); font-family: var(--font-body); font-size: var(--font-size-body); font-weight: var(--font-weight-body); line-height: 1; color: var(--color-muted-foreground); background: transparent; border: none; border-radius: var(--radius-sm); cursor: pointer; white-space: nowrap; transition: color var(--duration-fast), background var(--duration-fast); }
.davinci-nav-tab:hover { color: var(--color-primary); background: var(--color-primary-container); }
.davinci-nav-tab.active { color: var(--color-primary); font-weight: var(--font-weight-h4); }
.davinci-nav-tab.active::after { content: ''; position: absolute; left: var(--space-3); right: var(--space-3); bottom: -2px; height: 3px; background: var(--color-primary); border-radius: var(--radius-full); }
.davinci-nav-tab .wk { font-family: var(--font-mono); font-size: var(--font-size-caption); color: var(--color-muted-foreground); }
.davinci-nav-tab.active .wk { color: var(--color-primary); }
.davinci-nav-tab:disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }

/* Category pills (second axis) */
.davinci-nav-pill { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-3); font-family: var(--font-body); font-size: var(--font-size-caption); font-weight: var(--font-weight-caption); line-height: 1.4; color: var(--color-on-surface-variant); background: var(--color-secondary-container); border: 1px solid transparent; border-radius: var(--radius-full); cursor: pointer; white-space: nowrap; transition: all var(--duration-fast); }
.davinci-nav-pill:hover { color: var(--color-primary); border-color: var(--color-primary); }
.davinci-nav-pill.active { color: var(--color-on-primary); background: var(--color-primary); border-color: var(--color-primary); }
.davinci-nav-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.7; }

/* Language toggle */
.davinci-lang { display: inline-flex; align-items: center; background: var(--color-secondary-container); border-radius: var(--radius-full); padding: 3px; position: relative; }
.davinci-lang-opt { position: relative; z-index: 1; padding: var(--space-1) var(--space-3); font-family: var(--font-body); font-size: var(--font-size-caption); font-weight: var(--font-weight-caption); line-height: 1.4; color: var(--color-muted-foreground); background: transparent; border: none; border-radius: var(--radius-full); cursor: pointer; transition: color var(--duration-fast); }
.davinci-lang-opt.active { color: var(--color-on-primary); font-weight: var(--font-weight-h4); }
.davinci-lang-slider { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); background: var(--color-primary); border-radius: var(--radius-full); transition: transform var(--duration-base) var(--easing-bounce); z-index: 0; }
.davinci-lang[data-locale="en"] .davinci-lang-slider { transform: translateX(100%); }

/* Breadcrumb */
.davinci-crumb { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-caption); color: var(--color-muted-foreground); }
.davinci-crumb a { color: var(--color-muted-foreground); text-decoration: none; transition: color var(--duration-fast); }
.davinci-crumb a:hover { color: var(--color-primary); }
.davinci-crumb .sep { color: var(--color-border); }
.davinci-crumb .current { color: var(--color-on-surface); font-weight: var(--font-weight-caption); }

/* ── Tag ───────────────────────────────────────────────────── */
/* @anatomy
   <span class="label">分类 Category</span> <span class="davinci-tag category" data-evidence-sample="Category tag">调色 Grading</span> <span class="davinci-tag category accent" data-evidence-sample="Category tag">剪辑 Editing</span> <span class="davinci-tag category info" data-evidence-sample="Category tag">特效 Fusion</span> <span class="davinci-tag category success" data-evidence-sample="Category tag">音...
*/
.davinci-tag { display: inline-flex; align-items: center; gap: var(--space-1); padding: 2px var(--space-3); font-family: var(--font-body); font-size: var(--font-size-caption); font-weight: var(--font-weight-caption); line-height: 1.5; border-radius: var(--radius-full); white-space: nowrap; border: 1px solid transparent; }
.davinci-tag .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }

/* Category (solid, saturated) */
.davinci-tag.category { background: var(--color-primary); color: var(--color-on-primary); }
.davinci-tag.category.accent { background: var(--accent); color: var(--accent-foreground); }
.davinci-tag.category.info { background: var(--color-info); color: #ffffff; }
.davinci-tag.category.success { background: var(--color-success); color: #ffffff; }
.davinci-tag.category.warning { background: var(--color-warning); color: #ffffff; }

/* Difficulty (soft fill) */
.davinci-tag.difficulty { background: var(--color-primary-container); color: var(--color-on-primary-container); }
.davinci-tag.difficulty.beg { background: #ecfdf5; color: var(--color-success); }
.davinci-tag.difficulty.int { background: #eff6ff; color: var(--color-info); }
.davinci-tag.difficulty.adv { background: #fff1f2; color: var(--accent); }

/* Status (solid with icon dot) */
.davinci-tag.status.new { background: var(--accent); color: var(--accent-foreground); }
.davinci-tag.status.done { background: var(--color-success); color: #ffffff; }
.davinci-tag.status.progress { background: var(--color-warning); color: #ffffff; }
.davinci-tag.status.locked { background: var(--color-secondary-container); color: var(--color-muted-foreground); }

/* Outline variant */
.davinci-tag.outline { background: transparent; border-color: var(--color-border); color: var(--color-on-surface-variant); }
.davinci-tag.outline.primary { border-color: var(--color-primary); color: var(--color-primary); }
.davinci-tag.outline.accent { border-color: var(--accent); color: var(--accent); }

/* ── Video Card ────────────────────────────────────────────── */
/* @anatomy
   <div class="block"> <span class="label">课时视频 Lesson Video</span> <div class="grid"> <article class="davinci-vcard" data-evidence-sample="Lesson video"> <div class="davinci-vcard-media"> <div class="davinci-vcard-grad" style="background: linear-gradient(135deg, #f97316 0%, #f43f5e 100%);"></div>
*/
.davinci-vcard { position: relative; display: flex; flex-direction: column; background: var(--color-card); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-1); transition: box-shadow var(--duration-base), transform var(--duration-base); }
.davinci-vcard:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); }
.davinci-vcard.featured { box-shadow: var(--shadow-3); }

.davinci-vcard-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--color-surface-container-high); }
.davinci-vcard-thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.davinci-vcard-grad { position: absolute; inset: 0; background: linear-gradient(135deg, var(--davinci-primary-500) 0%, var(--davinci-accent-500) 100%); }

.davinci-vcard-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.92); border-radius: 50%; box-shadow: var(--shadow-3); transition: transform var(--duration-base) var(--easing-bounce), background var(--duration-fast); }
.davinci-vcard:hover .davinci-vcard-play { transform: translate(-50%, -50%) scale(1.12); background: var(--color-on-primary); }
.davinci-vcard-play svg { width: 22px; height: 22px; fill: var(--color-primary); transition: fill var(--duration-fast); }
.davinci-vcard:hover .davinci-vcard-play svg { fill: #ffffff; }

.davinci-vcard-duration { position: absolute; bottom: var(--space-2); right: var(--space-2); padding: 2px var(--space-2); background: rgba(26,23,18,0.82); color: #ffffff; font-family: var(--font-mono); font-size: var(--font-size-caption); font-weight: var(--font-weight-caption); border-radius: var(--radius-sm); backdrop-filter: blur(4px); }

.davinci-vcard-badge { position: absolute; top: var(--space-2); left: var(--space-2); padding: 3px var(--space-2); background: var(--accent); color: var(--accent-foreground); font-size: var(--font-size-eyebrow); font-weight: var(--font-weight-eyebrow); text-transform: uppercase; letter-spacing: 0.06em; border-radius: var(--radius-sm); }

.davinci-vcard-body { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); }
.davinci-vcard-title { font-family: var(--font-heading); font-size: var(--font-size-h4); font-weight: var(--font-weight-h4); line-height: var(--line-height-h4); color: var(--color-on-surface); margin: 0; }
.davinci-vcard-desc { font-size: var(--font-size-body); line-height: var(--line-height-body); color: var(--color-muted-foreground); margin: 0; }
.davinci-vcard-meta { display: flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-caption); color: var(--color-muted-foreground); }
.davinci-vcard-avatar { width: 24px; height: 24px; border-radius: 50%; background: var(--color-primary-container); color: var(--color-on-primary-container); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: var(--font-weight-h4); flex-shrink: 0; }
.davinci-vcard-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-1); }

.davinci-vcard.featured .davinci-vcard-title { font-size: var(--font-size-h3); }