/* ============================================================
   AI 讲台 · 录制台（studio.record）
   主题：跟随顶栏（html[data-theme]），深浅两套都成立。
   2026-10-19 前这里曾「恒深色」（.darkscope + data-theme="dark"），
   导致浅色主题在录制台完全不生效，已移除；本文件不新增任何色值。
   颜色 / 阴影一律 var(--*)；间距 / 圆角 / 字号沿用 app.css 的直写口径
   （tokens.css 目前只覆盖颜色与阴影）。如需 token 化间距/圆角，须先在
   tokens.css 建立 spacing / radius 体系，不要在组件里另立一套。
   ============================================================ */

.rec{
  --rec-col:284px;
  --rec-gap:14px;
  --rec-r:10px;
  /* 底部安全区对应壳的悬浮控制条（独立窗口，见 studio/src/main/control-window.js
     与 src/renderer/control/control.css）：窗口宽 360 / 高 56，距屏幕工作区底
     EDGE_GAP=18px，即浮条从视口底部往上占 74px，页面需要 ≥ 74 + 12 = 86px。
     132 是历史值（早期按两行内联录制条估的），实测偏保守但仍成立：
     底部空白 = 40 + 132 = 172px（紧凑模式 40 + 120 = 160px）。
     实测 1080×675 / 1280×800 / 1280×900 / 1440×900 / 1920×1080 五档、
     页首与滚到底两种位置，浮条包围盒与「开始录制」均无相交，故不收紧到 86px
     （收紧只会减少滚动末端的呼吸空间，没有收益）。 */
  --rec-float-safe:132px;
  min-height:calc(100vh - 56px);
  background:var(--bg);
  color:var(--ink);
  /* 上/左/右三边与通用页 .pg 完全同口径（同一组 token，见 app.css 的 .pg）。
     起因（实测，非目测）：此处原为硬编码 14px 22px，与 .pg 的
     var(--sp-6) var(--sp-7) 不等 —— 上下差 6px、左右差 2px，
     切页时内容整体位移可见。**两份各写一份必然漂**，故改为读同一个 token。
     底部不跟随 .pg：那 40px + --rec-float-safe 是给壳的独立悬浮控制条留的安全区
     （见上方注释），.pg 的 48px 是普通呼吸空间，两者用途不同，不能合并。 */
  padding:var(--sp-6) var(--sp-7) calc(40px + var(--rec-float-safe));
  /* **不设 max-width**（与 .pg 不同，这是刻意的 —— 2026-10-24 PM 裁定）：
     .pg 限宽 1360px 是为文字行宽舒适；而本页主体是 16:9 实时预览，
     限宽会让预览在宽屏上缩掉一半以上（实测 1920 屏：预览 1044×585 → 690×388）。
     代价是宽屏下本页左右不对齐其它页 —— 接受，理由是预览尺寸对录制更重要。 */
}
/* hidden 属性优先：组件里大量 display:flex/inline-flex 会盖过 UA 的 [hidden] */
.rec [hidden]{display:none !important}

/* ============ 页头 ============ */
/* 页头度量对齐通用页 .pghd（见 app.css）：gap 与下边距都读同一组 token。
   起因（实测，非目测）：此处原为 gap:16px / margin-bottom:12px，
   而 .pghd 是 gap:var(--sp-5)(16) / margin-bottom:var(--sp-5)(16) ——
   gap 恰好同值、下边距差 4px，肉眼可见「录制台的页头比别人紧」。
   2026-10-24 PM 裁定：改为对齐。
   紧凑模式（矮视口）另有自己的压缩覆盖，见下方 media 块。 */
.rec-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-5);margin-bottom:var(--sp-5)}
.rec-hd h1{font-size:19px;line-height:1.3}
.rec-sub{font-size:12.5px;color:var(--ink3);margin-top:4px;line-height:1.6}

/* 卡片标题条统一走 app.css 的 .card>.hd（flex + align-items:center）。
   2026-10-19 曾给右栏单独加 align-items:baseline + h3/.mic line-height:1.5，
   想把「一次录好」压到标题基线：实测标题基线与标签严格相等（0.00px），
   但 h3 行盒被撑到 20.25px，标题条比中栏高 2.3px，标题整体下移 1px，
   三栏标题分隔线因此错位。标签与标题是同级关系，居中即视觉对齐
   （实测基线差 -0.53px，与中栏「窗口跟随…」完全一致），不再逐卡微调。 */

/* ============ 三栏 ============ */
.rec-grid{display:grid;grid-template-columns:var(--rec-col) minmax(0,1fr) var(--rec-col);gap:var(--rec-gap);align-items:start}
@media (max-width:1180px){
  .rec-grid{grid-template-columns:minmax(0,1fr)}
}
/* 卡片内容内距与通用卡片一致（--sp-5，见 app.css 的 .card>.bd）——
   基准来自 design/ui-kit.html §.card>.bd，2026-10-20 设计签 ACCEPT（docs/acceptance-ui-batch2.md §8.1），
   但当时随 e0eff25 整体还原 record.css 而未落地；本次补执行。 */
.rec-card>.bd{padding:var(--sp-5)}
.rec-grid .card>.bd{padding:var(--sp-5)}

/* ============ 1 · 录制源 ============ */
.rec-srcs{display:flex;flex-direction:column;gap:6px}
.rec-src{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  padding:9px 10px;border-radius:var(--rec-r);
  border:1px solid var(--line);background:var(--panel2);color:var(--ink2);
  font:inherit;cursor:pointer;transition:border-color .13s,box-shadow .13s,background .13s;
}
.rec-src:hover{border-color:var(--brand-line)}
.rec-src.on{border-color:var(--brand);background:var(--brand-soft);box-shadow:0 0 0 2px var(--brand-soft)}
.rec-src .ic{
  width:28px;height:28px;border-radius:8px;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:var(--fill);color:var(--ink2);font-size:13px;
}
.rec-src.on .ic{background:var(--panel);color:var(--brand-ink)}
/* 图标统一为内联 SVG（2026-10-19）：固定 16px，颜色随 currentColor，不依赖字体字形 */
.rec-src .ic svg{width:16px;height:16px;display:block}
.rec-start svg{width:15px;height:15px;display:inline-block;vertical-align:-2px;margin-right:6px}
.rec-src .tt{display:block;font-size:12.5px;font-weight:500;color:var(--ink);line-height:1.35}
.rec-src .ss{display:block;font-size:11px;color:var(--ink3);margin-top:2px;line-height:1.4}
.rec-src[aria-disabled="true"]{opacity:.55;cursor:not-allowed}

.rec-sublab{font-size:11px;color:var(--ink3);letter-spacing:.02em;margin-bottom:6px}
.rec-panel{display:flex;flex-direction:column;gap:8px}
.rec-panel .link{background:none;border:0;padding:0;font-family:inherit;font-size:11.5px}

.rec-na{
  border:1px dashed var(--line);border-radius:9px;padding:10px;text-align:center;
  font-size:11.5px;line-height:1.6;color:var(--ink3);background:var(--panel2);
}
.rec-na b{display:block;color:var(--ink2);font-weight:500;margin-bottom:2px}

/* 屏幕列表 */
.rec-scr{
  display:flex;align-items:center;gap:9px;width:100%;text-align:left;padding:7px;
  border:1px solid var(--line);border-radius:9px;background:var(--panel2);
  font:inherit;cursor:pointer;transition:border-color .13s,box-shadow .13s;
}
.rec-scr:hover{border-color:var(--brand-line)}
.rec-scr.on{border-color:var(--brand);box-shadow:0 0 0 2px var(--brand-soft)}
/* 副屏：本期只展示不可选（start 无 displayId），常驻「暂不支持」灰标 */
.rec-scr.off{opacity:.62;cursor:not-allowed;background:var(--panel3)}
.rec-scr.off:hover{border-color:var(--line)}
.rec-scr.off .th{opacity:.55}
.rec-scr .th{width:66px;height:37px;border-radius:5px;flex:none;background:var(--panel3);border:1px solid var(--line2);overflow:hidden}
.rec-scr .th img{width:100%;height:100%;object-fit:cover;display:block}
.rec-scr .nm{display:block;font-size:11.5px;font-weight:500;color:var(--ink);line-height:1.35}
.rec-scr .mt{display:block;font-size:10.5px;color:var(--ink3);margin-top:2px}
.rec-scr-tags{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex:none}
.rec-scr-tags .tag{height:19px;padding:0 6px;font-size:10.5px}

/* 窗口网格 */
.rec-wins{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.rec-win{
  position:relative;display:flex;flex-direction:column;gap:5px;padding:5px;
  border:1px solid var(--line);border-radius:9px;background:var(--panel2);
  font:inherit;text-align:left;cursor:pointer;transition:border-color .13s,box-shadow .13s;min-width:0;
}
.rec-win:hover{border-color:var(--brand-line)}
.rec-win.on{border-color:var(--brand);box-shadow:0 0 0 2px var(--brand-soft)}
.rec-win .th{
  width:100%;aspect-ratio:16/9;border-radius:5px;overflow:hidden;flex:none;
  background:var(--panel3);border:1px solid var(--line2);
  display:flex;align-items:center;justify-content:center;color:var(--ink4);font-size:15px;
}
.rec-win .th img{width:100%;height:100%;object-fit:cover;display:block}
.rec-win .tt{
  font-size:11px;color:var(--ink);line-height:1.35;font-weight:500;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  word-break:break-all;
}
.rec-win .ap{font-size:10px;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rec-win .rc-tag{position:absolute;right:8px;top:8px}

/* 区域选择 */
.rec-region-row{display:flex;align-items:center;gap:8px}
.rec-region-row .btn{flex:none}
.rec-region-size{font-size:11.5px;color:var(--ink2);font-variant-numeric:tabular-nums}
.rec-region-size b{color:var(--ink);font-weight:600}
.rec-meta{font-size:10.5px;color:var(--ink3);line-height:1.55}

/* ============ 2 · 预览 ============ */
.rec-stage{
  position:relative;width:100%;aspect-ratio:16/9;border-radius:var(--rec-r);overflow:hidden;
  background:var(--bg);border:1px solid var(--line);user-select:none;
}
.rec-slide{
  position:absolute;inset:7%;border-radius:6px;background:var(--panel3);
  border:1px solid var(--line2);padding:5.5% 6%;display:flex;flex-direction:column;
  gap:2.2%;color:var(--ink);overflow:hidden;
}
.rec-slide-hd{font-size:clamp(12px,1.7vw,20px);font-weight:600;letter-spacing:-.01em;line-height:1.3}
.rec-slide-rule{width:32px;height:3px;border-radius:2px;background:var(--brand);flex:none}
.rec-slide-li{font-size:clamp(9px,1vw,12.5px);color:var(--ink2);line-height:1.7}
.rec-slide-fig{
  position:absolute;right:6%;top:26%;width:32%;aspect-ratio:4/3;border-radius:7px;
  background:var(--panel2);border:1px solid var(--line);
}
.rec-slide-fig::before{
  content:"";position:absolute;left:20%;right:20%;top:28%;bottom:28%;
  border-left:1px solid var(--ink4);border-bottom:1px solid var(--ink4);
  border-radius:0 0 0 2px;
}
.rec-slide-pg{position:absolute;right:5%;bottom:5%;font-size:clamp(8px,.9vw,11px);color:var(--ink4)}

.rec-shot{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:var(--bg)}
.rec-shot[hidden]{display:none}

.rec-zone{position:absolute;pointer-events:none;border:1px dashed var(--wn);border-radius:3px;opacity:0;transition:opacity .18s}
.rec-zone.on{opacity:1}
.rec-zone span{
  position:absolute;top:-17px;left:0;white-space:nowrap;font-size:9px;
  color:var(--wn-ink);background:var(--wn-soft);border:1px solid var(--wn-line);
  border-radius:3px;padding:0 4px;line-height:15px;
}
.rec-zt{left:0;right:0;top:0;height:11%}
.rec-zp{right:3%;bottom:3%;width:15%;height:13%}
.rec-zp span{top:auto;bottom:-17px;left:auto;right:0}

.rec-bub{
  position:absolute;z-index:3;overflow:hidden;pointer-events:none;
  background:var(--brand-soft);border:1px solid var(--brand-line);
  box-shadow:var(--sh-md);
  transition:left .2s ease,right .2s ease,top .2s ease,bottom .2s ease,width .2s ease,height .2s ease,border-radius .2s ease,opacity .2s;
}
.rec-bub.hide{opacity:0}
.rec-bub svg{display:block;width:100%;height:100%}
.rec-bub.warn{border-color:var(--wn);box-shadow:0 0 0 3px var(--wn-soft)}

.rec-badge{
  position:absolute;left:8px;top:8px;z-index:4;max-width:62%;
  font-size:10px;line-height:1.5;color:var(--ink2);
  background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:2px 7px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.rec-live{
  position:absolute;right:8px;top:8px;z-index:4;display:flex;align-items:center;gap:5px;
  font-size:10.5px;color:var(--dg-ink);background:var(--dg-soft);border:1px solid var(--dg-line);
  border-radius:6px;padding:2px 8px;font-variant-numeric:tabular-nums;
}
.rec-live i{width:6px;height:6px;border-radius:50%;background:currentColor;animation:recPulse 1.6s infinite}
@keyframes recPulse{0%,100%{opacity:1}50%{opacity:.3}}

/* 开录前 3 秒倒计时（P1-5）：期间不下发 recorder.start */
.rec-count{
  position:absolute;inset:0;z-index:8;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
  padding:10px;text-align:center;
}
.rec-count::before{content:"";position:absolute;inset:0;background:var(--bg);opacity:.82}
.rec-count>*{position:relative;z-index:1}
.rec-count-box{
  display:flex;flex-direction:column;align-items:center;gap:7px;
  padding:16px 22px 14px;border-radius:14px;
  background:var(--panel);border:1px solid var(--line);box-shadow:var(--sh-lg);
}
.rec-count-num{
  font-size:clamp(42px,6vw,66px);line-height:1;font-weight:600;
  color:var(--brand);letter-spacing:-.02em;font-variant-numeric:tabular-nums;
}
.rec-count-t{font-size:13px;font-weight:500;color:var(--ink)}
.rec-count-s{font-size:11px;color:var(--ink2);line-height:1.5;max-width:92%;word-break:break-all}
.rec-count-note{
  font-size:10.5px;color:var(--wn-ink);background:var(--wn-soft);
  border:1px solid var(--wn-line);border-radius:6px;padding:3px 8px;
}
.rec-count .btn{margin-top:5px}

.rec-pickmask{position:absolute;inset:0;z-index:5;background:var(--bg);opacity:.55}
.rec-pickmask.on{cursor:crosshair}
.rec-pickhint{
  position:absolute;left:50%;top:10px;transform:translateX(-50%);z-index:6;
  font-size:11px;color:var(--ink);background:var(--panel);border:1px solid var(--brand-line);
  border-radius:7px;padding:4px 10px;white-space:nowrap;box-shadow:var(--sh-sm);
}
.rec-sel{
  position:absolute;z-index:6;border:1.5px solid var(--brand);border-radius:2px;
  background:var(--brand-soft);opacity:.28;pointer-events:none;
}
.rec-sel span{
  position:absolute;right:0;bottom:-19px;font-size:10px;line-height:16px;
  color:var(--on-brand);background:var(--brand);border-radius:3px;padding:0 5px;
  white-space:nowrap;font-variant-numeric:tabular-nums;
}

.rec-prevfoot{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px}
.rec-chk{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:var(--ink3);cursor:pointer;user-select:none}
.rec-chk input{width:13px;height:13px;margin:0;accent-color:var(--brand);cursor:pointer}
.rec-zonewarn{font-size:11px;color:var(--wn-ink);margin-left:auto}
.rec-zonewarn[hidden]{display:none}

/* ============ 预检 ============ */
.rec-pre{display:flex;flex-wrap:wrap;gap:7px}
/* 预检标签一律复用设计系统 .tag 的度量（ui-kit:219 height:21px / background:--fill）；
   2026-10-24 UI 一致性走查：删掉本页自造的 23px 高度与 .mock 的 --panel3 底色
   （偏差 2px + 色值不等，触发团队门禁规则 4）。mock 语义只靠文案「· mock」表达，
   不再用第二套配色。 */
.rec-pre .tag.na{background:transparent;border:1px dashed var(--line);color:var(--ink3)}
.rec-pre-note{font-size:11px;color:var(--ink3);line-height:1.6;margin-top:9px}
.rec-pre-note.wn{color:var(--wn-ink);margin-top:7px}

/* ============ 3 · 合成 ============ */
.rec-sec{display:flex;flex-direction:column;gap:7px}
.rec-sec + .rec-sec{border-top:1px solid var(--line2);padding-top:10px}
.rec-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.rec-lab{font-size:12.5px;font-weight:500;color:var(--ink2)}
.rec-hint{font-size:10.5px;color:var(--ink3);line-height:1.5}

.rec-inline{display:flex;align-items:center;gap:8px}
.rec-inline .rec-lab{flex:none;width:30px}
.rec-inline .rec-seg{flex:1}

.rec-seg{display:flex;width:100%;gap:2px;background:var(--fill);border-radius:8px;padding:2px}
.rec-seg button{
  flex:1;min-width:0;height:28px;border:0;border-radius:6px;background:transparent;
  font-family:inherit;font-size:11.5px;font-weight:500;color:var(--ink2);
  cursor:pointer;transition:background .13s,color .13s;white-space:nowrap;
}
.rec-seg button:hover:not(:disabled){color:var(--ink)}
.rec-seg button.on{background:var(--panel);color:var(--ink);box-shadow:var(--sh-xs)}
.rec-seg button:disabled{opacity:.45;cursor:not-allowed}
.rec .sw[disabled]{opacity:.45;cursor:not-allowed}

.rec-pos{display:flex;gap:10px;align-items:flex-start}
.rec-posbox{
  position:relative;width:104px;height:56px;flex:none;border-radius:8px;
  border:1px solid var(--line);background:var(--panel2);padding:3px;
  display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:3px;
}
.rec-posbox button{
  border:1px solid transparent;border-radius:4px;background:var(--panel);
  color:var(--ink3);font-family:inherit;font-size:10px;line-height:1;cursor:pointer;
  padding:0;transition:.13s;
}
.rec-posbox button:hover{background:var(--fill);color:var(--ink2)}
.rec-posbox button.on{border-color:var(--brand);background:var(--brand-soft);color:var(--brand-ink);font-weight:600}
.rec-poslab{font-size:11.5px;color:var(--ink);font-weight:500}
.rec-poshint{font-size:10.5px;color:var(--ink3);line-height:1.55;margin-top:4px}

.rec-dev{display:flex;flex-direction:column;gap:6px}
.rec-selbox{position:relative}
.rec-selbox::after{
  content:"\2304";position:absolute;right:10px;top:50%;transform:translateY(-52%);
  color:var(--ink3);font-size:12px;pointer-events:none;
}
.rec-selbox select{
  appearance:none;width:100%;height:32px;padding:0 26px 0 9px;
  font-family:inherit;font-size:12px;color:var(--ink);
  background:var(--panel2);border:1px solid var(--line);border-radius:7px;cursor:pointer;
}
.rec-selbox select:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 2px var(--brand-soft)}
.rec-selbox select:disabled{color:var(--ink4);cursor:not-allowed;background:var(--panel3)}

/* 电平条 / 电平说明（2026-10-19 收口）：
   0.45 透明度的 idle 条本来就是占位，不再抢行内空间；说明文字改成独立一行，
   因为最长文案「音量偏大（峰值 -1.2 dB，可能削波）」在 284px 列里会把
   「麦克风」标签挤成竖排。电平条 flex:none，不允许被压到 0。 */
.rec-lv{display:flex;align-items:flex-end;gap:3px;height:16px;flex:none}
.rec-lv i{width:3px;border-radius:2px;background:var(--ok);flex:none}
.rec-lv.idle i{background:var(--ink4);opacity:.45}
.rec-lvnote{font-size:10px;color:var(--ink3);line-height:1.45;margin-top:2px;word-break:break-word}

.rec-shapelock{font-size:10.5px;color:var(--wn-ink);line-height:1.5}
.rec-shapelock[hidden]{display:none}

/* ============ 开始 / 控制 ============ */
.rec-cta{display:flex;flex-direction:column;gap:7px;margin-top:10px}
.rec-start{width:100%;height:44px;font-size:14.5px;border-radius:10px}
.rec-reason{font-size:11.5px;line-height:1.55;color:var(--wn-ink);text-align:center}
.rec-reason[hidden]{display:none}
.rec-done{
  font-size:11.5px;line-height:1.55;color:var(--ink2);text-align:center;word-break:break-all;
  border:1px solid var(--line);border-radius:10px;background:var(--panel2);
  padding:10px 12px;display:flex;flex-direction:column;gap:8px;
}
.rec-done[hidden]{display:none}
.rec-done-hd{font-size:12px;font-weight:600;color:var(--ok-ink)}
.rec-done-meta{display:flex;align-items:baseline;justify-content:center;gap:10px}
.rec-done-kv{display:flex;align-items:baseline;gap:5px}
.rec-done-kv em{font-style:normal;font-size:10.5px;color:var(--ink3)}
.rec-done-kv b{
  font-size:14px;font-weight:600;color:var(--ink);
  font-variant-numeric:tabular-nums;letter-spacing:.01em;
}
.rec-done-dot{width:3px;height:3px;border-radius:50%;background:var(--ink4);flex:none;align-self:center}
.rec-done-path{font-size:10.5px;color:var(--ink3);line-height:1.5}
.rec-done-path[hidden]{display:none}
/* 成片/上传状态行（V-404c）：纯文本提示，颜色只走 token（--ink3 常态 / --wn-ink 失败） */
.rec-done-note{font-size:10.5px;color:var(--ink3);line-height:1.5;text-align:center}
.rec-done-note[hidden]{display:none}
.rec-done-note.is-err{color:var(--wn-ink)}
.rec-done-acts{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.rec-done-acts .btn{min-width:0;flex:1 1 0}
/* 「发布为课程视频」独占一行：文案比另两个按钮长，三等分会把字挤到换行 */
.rec-done-acts .btn.rec-publish{flex:1 1 100%}
.rec-done .rec-reason{text-align:center}
.rec-foot{font-size:10.5px;color:var(--ink3);line-height:1.55}
.rec-foot[hidden]{display:none}

.rec-bar{
  display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:10px;
  background:var(--panel);border:1px solid var(--line);box-shadow:var(--sh-sm);
}
.rec-dot{width:9px;height:9px;border-radius:50%;background:var(--ink4);flex:none}
.rec-bar[data-state="recording"] .rec-dot{background:var(--dg);animation:recPulse 1.6s infinite}
.rec-bar[data-state="paused"] .rec-dot{background:var(--wn)}
.rec-bar[data-state="started"] .rec-dot{background:var(--dg)}
.rec-time{font-size:15px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.rec-state{font-size:11px;color:var(--ink3)}
.rec-acts{margin-left:auto;display:flex;gap:6px}
/* 页头动作按钮对齐通用小按钮 .btn.sm（见 app.css）——
   基准来自 design/ui-kit.html §.btn.sm，2026-10-20 设计签 ACCEPT（docs/acceptance-ui-batch2.md §8.1）。 */
.rec-acts .btn{height:28px;padding:0 10px;font-size:12.5px}
.rec-recmsg{
  display:flex;align-items:center;gap:7px;border:1px solid var(--ok-line);background:var(--ok-soft);
  color:var(--ok-ink);border-radius:8px;padding:5px 10px;font-size:11px;line-height:1.45;
}
.rec-recmsg i{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}

.rec-note{font-size:10.5px;color:var(--ink3);line-height:1.55}

/* ============ 矮视口紧凑模式（1280×800 / 900 高窗口） ============
   目标：首屏能看到完整「开始录制」，且滚到底仍与悬浮条留出安全距。
   只压缩纵向密度，不隐藏预检 / 原因 / 取消等操作信息。 */
@media (max-height:820px){
  /* 上边距在基础值上再压 7px（不是写死一个新值 —— 基础值改了这里自动跟随，
     否则紧凑模式会与基础值各自漂移，正是本次要治的病）。
     7px 这个压缩量是实测定的：1280×800 首屏必须完整露出「开始录制」，
     实测按钮底沿仍在视口内、且下方仍有呼吸余量；压更多则按钮被切，
     压更少则紧凑模式的收益（首屏少一行滚动）消失。 */
  .rec{padding-top:calc(var(--sp-6) - 7px);--rec-float-safe:120px}
  /* 页头下边距同样是「基础值 − 压缩量」：基础是 var(--sp-5)(16)，
     紧凑档压 10px → 6px。写成算式而不是孤立值，基础改了这里自动跟随。 */
  .rec-hd{margin-bottom:calc(var(--sp-5) - 10px)}
  .rec-sub{display:none}
  .rec-grid .card>.hd{padding:7px 14px}
  .rec-grid .card>.bd{padding:var(--sp-4);gap:6px}
  .rec-sec{gap:5px}
  .rec-sec + .rec-sec{padding-top:2px}
  .rec-seg button{height:23px}
  .rec-selbox select{height:26px}
  .rec-posbox{height:40px}
  .rec-cta{margin-top:2px;gap:5px}
  .rec-cta .btn.lg{height:42px}
  .rec-foot{display:none}
}


/* ============================================================
   课件录制（v1.2.4 第 4 源）—— 录制台内的新增组件
   ------------------------------------------------------------
   设计真源：`design/ui-kit.html`「课件录制组件」页（d3）N1/N2/N5/N6/N7；
   规格：`docs/ui-spec-courseware-recording.md` §1。
   全部度量取 tokens（--sp-* /--r-* /--fs-* /--panel* /--line* /--ink* /--brand* /--ok* /--wn* /--dg*），
   不新增色值、不写裸字号/裸圆角（UI 一致性门禁 D 组会抓）。
   ============================================================ */

/* ---------- N5 提示条 .alert（4 变体 + 无色常驻） ----------
   v1.2.5 批 A：录制台页面顶部的三条提示（目标窗口告警 / 页级错误 / mock 常驻说明）
   已**全部收敛**到本 .alert 体系，本文件不再有第二套提示条视觉。
   语义映射按 `docs/ui-spec-courseware-recording.md` §5.3，**保持不变**：
   告警 → .alert.wn + 右槽多按钮；错误 → .alert.dg + 右槽可关闭；mock → .alert 常驻无按钮
   （成功/就绪提示 → .alert.ok，见 ui-prep §E4 / ui-kit「.alert.ok 吸收成功提示」）。 */
.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--panel2);
  color: var(--ink2);
  font-size: var(--fs-2);
  line-height: 1.5;
}
.alert .alert-ic {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-1);
  font-weight: 600;
  background: var(--line);
  color: var(--ink2);
}
.alert .grow { min-width: 0; flex: 1; word-break: break-word; }
/* 右槽（按钮/关闭）：ui-kit `.alert .acts`（ui-spec §N5 结构：ic + grow + acts） */
.alert .acts { display: flex; align-items: center; gap: var(--sp-2); flex: none; }
.alert b { display: block; font-size: var(--fs-3); font-weight: 600; color: inherit; }
.alert span { color: inherit; }
.alert.wn { border-color: var(--wn-line); background: var(--wn-soft); color: var(--wn-ink); }
.alert.wn .alert-ic { background: var(--wn); color: var(--on-wn); }
.alert.brand { border-color: var(--brand-line); background: var(--brand-soft); color: var(--brand-ink); }
.alert.brand .alert-ic { background: var(--brand); color: var(--on-brand); }
.alert.dg { border-color: var(--dg-line); background: var(--dg-soft); color: var(--dg-ink); }
.alert.dg .alert-ic { background: var(--dg); color: var(--on-dg); }
.alert.ok { border-color: var(--ok-line); background: var(--ok-soft); color: var(--ok-ink); }
.alert.ok .alert-ic { background: var(--ok); color: var(--on-ok); }

/* 页面级提示条（.rec 的直接子元素：目标窗口告警 / 成功提示 / mock 常驻 / 页级错误）
   与下方三栏之间的呼吸距。组件自身不带页级外距（.alert 在课件面板里由 .rec-panel 的 gap
   负责间距），这里只管「挂在页面顶部」这一种摆放 —— 12px 与收敛前的 10/10/12px 最大差 2px
   （docs/team.md §三 规则 4 的 4px 容差内）。 */
.rec > .alert { margin-bottom: var(--sp-4); }

.rec-src .tag { flex: none; }

/* ---------- N2 课件导入卡 ---------- */
.cw-card {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.cw-thumb {
  flex: none;
  width: 96px;
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid var(--line2);
  border-radius: var(--r-sm);
  background: var(--panel3);
}
.cw-thumb img { display: block; width: 100%; height: 100%; object-fit: contain; }
.cw-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.cw-name {
  font-size: var(--fs-3);
  font-weight: 500;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cw-meta {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  font-size: var(--fs-1);
  color: var(--ink3);
}
.cw-phase {
  font-size: var(--fs-2);
  color: var(--ink2);
  line-height: 1.5;
  margin-bottom: var(--sp-2);
}
.cw-acts {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-top: var(--sp-2);
}