/* ============================================================
   AI 讲台 · 消费端样式（learn.home / play / share / author / mine）
   原 js/views/learn.js 内的 d-learn-css 注入块。
   2026-10-20 U-101：由 JS 运行时 document.head 注入改为静态样式表；
   规则文本逐字搬移，未改任何选择器与属性值（零视觉变化）。
   后续批次才做命名对齐；间距 / 圆角 / 字号已于 U-201 换用 tokens.css 档位令牌
   （值相等，零视觉变化）。
   ============================================================ */

.d-wrap{max-width:900px;margin:0 auto}
.d-h5{max-width:430px;margin:0 auto}
.d-course{cursor:pointer;transition:.13s}
.d-course:hover{transform:translateY(-2px);box-shadow:var(--sh-md)}
.d-tt{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.45;min-height:2.9em}
.d-lock{left:6px;right:auto;background:var(--wn);color:var(--on-wn)}
.d-player{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--panel);box-shadow:var(--sh-sm)}
.d-stage{position:relative}
.d-slide{position:relative;aspect-ratio:16/9;display:flex;flex-direction:column;justify-content:space-between;padding:5% 6%}
.d-slide-hd{font-size:var(--fs-2);opacity:.72}
.d-slide-bd{font-size:26px;font-weight:600;letter-spacing:-.01em;text-align:center;line-height:1.35}
.d-slide-ft{font-size:var(--fs-2);opacity:.72;text-align:right}
.d-ctrl{display:flex;align-items:center;gap:var(--sp-4);padding:10px 14px;border-top:1px solid var(--line2)}
/* 真实视频（V-405）：play_url 非空时用原生 <video> 取代模拟时钟舞台。
   底色取 --ink 作深色舞台；圆角由 .d-player / .card 的 overflow:hidden 裁出，
   故这里不再叠一层 radius（叠了会在四角露出白边）。
   自带控件已覆盖播放/拖动，自绘控制条在视频形态下收起，避免两套按钮打架。 */
.d-video{display:block;width:100%;aspect-ratio:16/9;background:var(--stage);object-fit:contain}
.d-video:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.d-player.is-video .d-ctrl{display:none}
/* 加载态（慢网）：视频出画面前给一句「在加载」，替掉一片纯黑框。
   底色不另加，露出 .d-video 的 --stage 即可；层用 inset:0 绝对定位，
   不参与布局，故不影响 .d-video 的 16/9 与 .d-player 的圆角裁切。
   pointer-events:none —— 原生控件在底部，层不能挡住它。
   只放文案、不画自绘转圈：原生控件在加载期自己会转一个圈，再叠一圈就成了
   两个同心 spinner；文案往下挪一档，落在那个圈的开口下方而不是压在笔画上。
   刻意不写进度百分比：<video> 只在 progress 事件里给总量，慢网下拿不到
   可信的已完成字节，编个数字比留白更糟。层序 7 < .d-mask(8) < .d-vfail(9)。 */
.d-vload{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:7;color:var(--ink3);font-size:var(--fs-3)}
.d-vload .d-vload-tt{transform:translateY(var(--sp-7))}
.d-vload[hidden]{display:none}
/* 加载失败：盖一层说明 + 重试，绝不静默回落成模拟时钟 */
.d-vfail{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:var(--sp-5);z-index:9}
.d-vfail[hidden]{display:none}
.d-mask{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:var(--sp-5);z-index:8}
.d-veil{position:absolute;inset:0;background:var(--stage);opacity:.45}
.d-lockbox{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:var(--sp-5);box-shadow:var(--sh-lg);display:flex;flex-direction:column;align-items:center;gap:var(--sp-3);text-align:center;max-width:300px}
.d-price{font-size:22px;font-weight:600;color:var(--dg-ink)}
.d-hero{border-radius:var(--r-lg);padding:var(--sp-6);color:var(--on-ai);background:var(--grad-ai);box-shadow:var(--sh-sm)}
.d-hero .d-sub{opacity:.85}
.d-hero .av{background:var(--panel);color:var(--brand-ink);border:2px solid var(--panel2)}
.d-hrow{display:flex;gap:10px;overflow-x:auto;padding-bottom:var(--sp-2)}
.d-hitem{flex:0 0 168px;cursor:pointer}
.d-me-cells{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.d-cell{display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);padding:14px var(--sp-2);border:1px solid var(--line);border-radius:var(--r-md);background:var(--panel);cursor:pointer;transition:.13s}
.d-cell:hover{border-color:var(--brand-line)}
.d-cell .ic{width:34px;height:34px;border-radius:9px;background:var(--fill);display:flex;align-items:center;justify-content:center;font-size:15px;color:var(--ink2)}
.d-cell span{font-size:var(--fs-2);color:var(--ink2)}
.d-h5cover{aspect-ratio:16/9;border-radius:0}
.d-h5body{padding:var(--sp-5)}
.d-sticky{position:sticky;bottom:0;z-index:5;display:flex;gap:10px;padding:var(--sp-4) 14px;background:var(--panel);border-top:1px solid var(--line2)}
@media (max-width:760px){.d-me-cells{grid-template-columns:repeat(3,minmax(0,1fr))}}