/**
 * MythosX Anvil 使用教程 · 设置 BIOS 分步界面样式（E 组件，gb- 前缀）。
 *
 * 业务定位：品牌选择、分步播放器、速查表的版式，以及四个品牌（五套）BIOS 界面的重绘皮肤。
 *
 * 为什么这样写：
 *   - 外壳控件按「教程页控件规范 v2」（work/briefs/controls-v2.md，Owner：按钮太油腻、不高级）：
 *     平、细、准、留白——只用发丝细线、字重与字色的层级、对齐和间距；没有渐变、投影、内高光、小圆点、角标方框和外框容器；
 *     暖金只出现在指示线（选中瓦片顶边、当前步骤左侧、窄屏进度当前段）和焦点环；
 *   - BIOS 画布按设计尺寸（--W × --H）重绘，所有尺寸写成 calc(N * var(--u))，--u = 容器宽 / 设计宽：
 *     文字是原生排版，放大缩小都不糊；行高、选中条位置、滚动偏移都按「行高 × 行数」算，不依赖测量；
 *     画布里是厂商界面的重绘，保留厂商配色（降一档饱和度、压暗一档），不受上面的控件规范约束；
 *   - 演示标注（高亮框、点击提示、值下沿指示线、对勾）用站点强调色，最小尺寸按 px 兜底，手机镜头里也看得见；
 *   - 动效只用无回弹的减速曲线；减少动态效果时（mx.css 全局把过渡缩到 0.01ms）直接是终态。
 */

.gb {
  --gb-ease: var(--ease, cubic-bezier(.2, 0, 0, 1));
  /* 控件规范 v2 的令牌：细线、悬停线、选中线；过渡只动颜色、边线和透明度 */
  --gb-line: rgba(240, 238, 233, .09);
  --gb-hover: rgba(240, 238, 233, .2);
  --gb-pick: rgba(240, 238, 233, .55);
  --gb-trans: color .18s var(--gb-ease), border-color .18s var(--gb-ease), opacity .18s var(--gb-ease);
  /* 和上面四项摘要之间的距离由挂载点决定（guide.css 的 .gb-mount），这里不再叠外边距 */
  container-type: inline-size;
}
/* 焦点环：只在键盘聚焦时出现，1.5px 暖金，离开元素 3px */
/* 控制条的按钮（.mx-btn）用 guide.css 的统一焦点环（2px、外扩 2px），这里只管其余按钮（步骤列表、品牌瓦片） */
.gb button:not(.mx-btn):focus-visible, .gb-opt:has(input:focus-visible) { outline: 1.5px solid rgba(232, 196, 147, .8); outline-offset: 3px; }
.gb button:not(.mx-btn):focus:not(:focus-visible) { outline: none; }

/* 选项瓦片（品牌、界面分代）--------------------------------------------- */
/* 组标签在上，瓦片一行等宽等高；默认透明底加细线，悬停线提一级，选中是选中线加顶边一条暖金指示线（左右各缩进 14px） */
.gb-gen { margin-top: 22px; }
.gb-pick-label { margin-bottom: 10px; font: 500 12px/1.4 var(--mono); letter-spacing: .04em; color: var(--text-3); }
.gb-seg { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 10px; }
.gb-opt { position: relative; display: flex; min-width: 0; border: 1px solid var(--gb-line); border-radius: 10px; cursor: pointer; transition: var(--gb-trans); }
.gb-opt::before { content: ""; position: absolute; left: 14px; right: 14px; top: -1px; height: 2px; background: var(--accent); opacity: 0; transition: opacity .18s var(--gb-ease); }
.gb-opt:hover { border-color: var(--gb-hover); }
.gb-opt.is-on { border-color: var(--gb-pick); }
.gb-opt.is-on::before { opacity: 1; }
/* 原生单选框视觉隐藏，键盘和读屏照常 */
.gb-opt input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.gb-opt-face { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 4px; min-width: 0; min-height: 64px; padding: 12px 16px; pointer-events: none; }
.gb-opt-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; line-height: 1.4; color: var(--text-2); transition: var(--gb-trans); }
.gb-opt:hover .gb-opt-name { color: var(--text); }
.gb-opt.is-on .gb-opt-name { color: var(--text); font-weight: 500; }
.gb-opt-sub { font: 400 12px/1.4 var(--mono); color: var(--text-3); }
/* 界面分代两项文字长：放得下一行，放不下就在瓦片里折行，两块等高；折行时两行等长，不在末行剩「见）」 */
.gb-seg-gen .gb-opt-name { white-space: normal; text-wrap: balance; }

/* 播放器 ----------------------------------------------------------------- */
.gb-player { container-type: inline-size; margin-top: 28px; }
.gb-play-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }

/* 步骤列表（宽屏）：纯文字竖排，等宽编号加步骤名；当前步左侧 2px 暖金指示线、字重 500，没有底色 */
.gb-sg-t { margin-bottom: 8px; font: 500 12px/1.4 var(--mono); letter-spacing: .04em; color: var(--text-3); }
.gb-sg + .gb-sg { margin-top: 22px; }
.gb-sg-list { display: grid; }
.gb-st { position: relative; display: flex; align-items: baseline; gap: 14px; width: 100%; padding: 8px 0 8px 16px; font-size: 15px; line-height: 1.5; color: var(--text-2); text-align: left; transition: var(--gb-trans); }
/* 当前步左侧 2px：细线色轨道上一条暖金进度，从上往下长满（脚本用 Web Animations 匀速 scaleY，可暂停）；切步归零 */
.gb-st-prog { position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px; overflow: hidden; background: var(--gb-line); opacity: 0; transition: opacity .18s var(--gb-ease); }
.gb-st-prog b { position: absolute; inset: 0; background: var(--accent); transform: scaleY(0); transform-origin: top; }
.gb-st:hover { color: var(--text); }
.gb-st.is-on { color: var(--text); font-weight: 500; }
.gb-st.is-on .gb-st-prog { opacity: 1; }
.gb-st-n { flex: none; min-width: 3.4em; font: 400 12px/1.5 var(--mono); color: var(--text-3); }

/* 窄屏进度：一条 2px 分段进度线（每步一段，间隔 3px），当前段暖金；下面一行当前步骤名和计数。宽屏不显示 */
.gb-prog { display: none; }
.gb-prog-bar { display: flex; gap: 3px; }
/* 窄屏分段：每段是细线色，当前段里一条暖金从左往右填满（匀速 scaleX，可暂停） */
.gb-prog-bar i { position: relative; flex: 1; height: 2px; overflow: hidden; background: var(--gb-line); }
.gb-prog-bar i b { position: absolute; inset: 0; background: var(--accent); transform: scaleX(0); transform-origin: left; }
/* 减少动态效果：不自动续播、不画进度动画，当前那一条直接是满的，作为静态的当前指示 */
.gb.is-static .gb-st.is-on .gb-st-prog b, .gb.is-static .gb-prog-bar i.is-on b { transform: none; }
.gb-prog-line { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 12px; }
.gb-prog-name { font-size: 15px; font-weight: 500; color: var(--text); }
/* 窄屏进度线下面的步数：外观是 guide.css 的 .mx-step（「步骤 04 / 05」），这里不再定字体 */

/* 画框：一条细线围住厂商界面，没有投影 */
.gb-frame {
  container-type: inline-size;
  position: relative; overflow: hidden;
  border: 1px solid var(--gb-line); border-radius: 10px;
  background: #000;
}
.gb-stage { position: relative; aspect-ratio: var(--ar, 16 / 9); }

/* 镜头（窄屏）与放大档（640–900px）：画布按 bios.js 算出的每设计单位像素（--lu）放大，画面框高度由脚本给定，
   画布在框里平移（transform），平移只用无回弹的减速曲线；is-snap 时直接到位（换步归位、拖动、终态） */
.gb-stage.is-zoom { aspect-ratio: auto; overflow: hidden; touch-action: pan-y pinch-zoom; cursor: grab; }
.gb-stage.is-zoom .gb-cv { --u: var(--lu); right: auto; bottom: auto; width: calc(var(--W) * var(--u)); height: calc(var(--H) * var(--u)); transition: transform .38s var(--gb-ease); }
.gb-stage.is-zoom .gb-cv.is-snap { transition: none; }

/* 画面上只剩一个叠放按钮「看整屏 / 放大」（只在窄屏，右上角）；外观是 .mx-btn.is-overlay（平的页面底色保证压在画面上读得清），
   这里只管位置。按钮规范 v3 起「重播」挪进了下面的控制条，画面上不再压它 */
.gb-ov { position: absolute; z-index: 2; }
.gb-lens-btn { right: 8px; top: 8px; }
.gb-lens-btn.mx-btn { display: none; }
.gb-frame.is-narrow .gb-lens-btn.mx-btn { display: inline-flex; }

/* 说明句：所有步骤叠在同一格，高度取最长那句，换步只换显示；英文照 BIOS 原文用等宽，目标值只靠字重区分，不用暖金 */
.gb-say { display: grid; margin-top: 18px; }
.gb-say-i { grid-area: 1 / 1; visibility: hidden; opacity: 0; transition: opacity .25s var(--gb-ease), visibility 0s linear .25s; }
.gb-say-i.is-on { visibility: visible; opacity: 1; transition: opacity .25s var(--gb-ease), visibility 0s; }
.gb-say-main { font-size: 17px; line-height: 1.75; color: var(--text); }
.gb-say-alt { margin-top: 6px; font-size: 15px; line-height: 1.75; color: var(--text-2); }
.gb-say-note { margin-top: 6px; font-size: 13.5px; line-height: 1.7; color: var(--text-3); }
.gb-en { white-space: nowrap; font-family: var(--mono); font-size: .9em; letter-spacing: -.01em; }
.gb-sep { color: var(--text-3); white-space: pre; }
.gb-path .gb-en { color: var(--text-2); }
.gb-say-alt .gb-path .gb-en, .gb-say-alt .gb-item { color: var(--text-2); }
.gb-item, .gb-val { color: var(--text); font-weight: 500; }
.gb-key { padding: 0 5px; border: 1px solid var(--gb-hover); border-radius: 4px; }

/* 控制条（按钮规范 v3）：左边按钮组「上一步 · 暂停 · 重播 · 下一步」、右边步数，版式是 guide.css 的 .mx-ctl，
   按钮外观是 .mx-btn（下一步是这一条唯一的主按钮 is-primary）；这里只管和上面说明句的间隔与顶上一条细线 */
.gb-ctrl { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--gb-line); }
.gb-hint { margin-top: 12px; font-size: 13.5px; color: var(--text-3); }

/* 宽屏：步骤列表在左、界面在右 */
@container (min-width: 880px) {
  .gb-play-in { grid-template-columns: 220px minmax(0, 1fr); gap: 40px; }
}
/* 窄屏：不要一排步骤块，换成进度线 + 当前步骤名；计数已经写在进度线下面，控件行不再重复 */
@container (max-width: 879.98px) {
  .gb-steps { display: none; }
  .gb-prog { display: block; margin-bottom: 14px; }
  .gb-count { display: none; }
}

/* 速查表：纯细线表格，目标值只靠字重，不用暖金 */
.gb-quick { margin-top: 32px; }
.gb-quick-t { font: 500 12px/1.4 var(--mono); letter-spacing: .04em; color: var(--text-3); }
/* 固定列宽：路径和值再长也只在格内折行，表格不会比组件宽（原来自动列宽在 768 和手机上把「改成」一列挤出右边被裁） */
.gb-quick-table { width: 100%; margin-top: 10px; border-collapse: collapse; table-layout: fixed; font-size: 14.5px; }
.gb-quick-table thead th:first-child { width: 7em; }
.gb-quick-table thead th:last-child { width: 28%; }
/* 窄屏时菜单路径和值会折行：balance 让各行一样长，不在末行只剩一两个字（11-11 全面对齐：360 / 390 下曾有 10 处） */
.gb-quick-table td { overflow-wrap: anywhere; text-wrap: balance; }
.gb-quick-table th, .gb-quick-table td { padding: 12px 18px 12px 0; border-top: 1px solid var(--gb-line); text-align: left; vertical-align: baseline; }
.gb-quick-table thead th { padding-block: 0 10px; border-top: 0; font: 500 12px/1.4 var(--mono); color: var(--text-3); }
.gb-quick-table tbody th { width: 7em; font-weight: 500; color: var(--text); white-space: nowrap; }
.gb-quick-table tr > :last-child { padding-right: 0; }
/* 同一项的第二处（IOMMU 下的 Pre-boot DMA Protection）：和上一行算一格，中间不画线 */
.gb-quick-table tr.is-more td { padding-top: 0; border-top-color: transparent; }
.gb-quick-path { color: var(--text-2); }
.gb-quick-path .gb-en { color: var(--text-2); }
.gb-quick-path .gb-en:last-child { color: var(--text); }
.gb-quick-val .gb-en { color: var(--text); font-weight: 500; }
.gb-fine { margin-top: 16px; font-size: 13px; line-height: 1.7; color: var(--text-3); }

/* 品牌瓦片宽屏一行四块，放不下（约 900px 以下）两列；界面分代窄屏上下两块；速查表的「改成」列允许折行 */
@container (max-width: 900px) {
  .gb-seg-brand { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container (max-width: 680px) {
  /* 手机上「AMD fTPM switch」「Overclocking › Advanced CPU Configuration」这类英文一整段比一行还宽：
     允许在英文空格处折行（不在单词中间断），否则会被右边裁掉 */
  .gb-say .gb-en, .gb-quick-table .gb-en { white-space: normal; }
  .gb-seg-gen { grid-template-columns: minmax(0, 1fr); }
  .gb-opt-face { min-height: 58px; padding: 10px 14px; }
  .gb-opt-name { font-size: 14px; }
  .gb-quick-table { font-size: 13.5px; }
  .gb-quick-table thead th:first-child { width: 4.8em; }
  .gb-quick-table thead th:last-child { width: 34%; }
  /* 启动顺序任务的项名「第一启动项」五个字，比四项设置的长一个字，首列放宽；只作用于 boot 任务，第一章的表不变。
     路径列随之变窄，「SETTINGS › Boot › Boot Option #1」要能在 › 两侧折行，不然只能从单词中间断开（B / oot） */
  .gb[data-task="boot"] .gb-quick-table thead th:first-child { width: 6em; }
  .gb[data-task="boot"] .gb-quick-table .gb-sep { white-space: normal; }
}

/* ======================================================================
 * BIOS 画布（各皮肤共用）
 * ==================================================================== */
.gb-cv {
  --u: calc(100cqw / var(--W));
  position: absolute; inset: 0;
  overflow: hidden; isolation: isolate;
  line-height: 1.2;
  -webkit-font-smoothing: antialiased;
  user-select: none;
}
.gb-cv p { text-wrap: nowrap; }
.gb-svg { display: inline-flex; flex: none; width: 1.05em; height: 1.05em; }
.gb-svg svg { width: 100%; height: 100%; }

/* 无字占位条：没核实的条目、值、标题。颜色跟随所在文字，透明度压低，读者一眼看出「这里有一行，但不必看」 */
.gb-ph { display: block; width: calc(100% * var(--pw, 1)); height: calc(var(--u) * 8); border-radius: calc(var(--u) * 2); background: currentColor; opacity: .16; }

/* 列表区：.gb-list 裁出可见窗口；行高 = --rh × --h */
.gb-list { position: relative; overflow: hidden; }
.gb-rows { position: relative; }
.gb-r { position: relative; height: calc(var(--rh) * var(--h, 1)); white-space: nowrap; transition: height .24s var(--gb-ease), opacity .2s var(--gb-ease); }
.gb-r.is-gone { --h: 0 !important; opacity: 0; overflow: hidden; }
.gb-l { position: absolute; left: var(--lx); top: 50%; transform: translateY(-50%); }
.gb-v { position: absolute; left: var(--vx); top: 50%; transform: translateY(-50%); display: flex; align-items: center; }
.gb-v2 { position: absolute; left: var(--v2x); top: 50%; transform: translateY(-50%); }
.gb-vt.is-new { animation: gb-fade .24s var(--gb-ease) both; }
.gb-vph { width: calc(var(--u) * 64); }
.gb-r-ph .gb-ph { position: absolute; left: var(--lx); top: 50%; width: calc(var(--lw) * var(--pw, .4)); margin-top: calc(var(--u) * -4); }
.gb-r-ph.is-head .gb-ph { opacity: .11; }
.gb-sel { position: absolute; left: var(--sel-l, 0); top: 0; width: var(--sel-w, 100%); height: calc(var(--rh) * var(--h, 1)); background: var(--sel-bg); transition: transform .23s var(--gb-ease); }
.gb-r-st .gb-v { left: var(--stx, var(--vx)); }

/* 标注层（演示用，站点强调色）：目标条目外的高亮框（行内 ::after）、确认对勾；没有投影和光晕，
   高亮框外面一圈 1px 深色描边（outline）让它压在红色、洋红选中条上也分得出 */
.gb-cv .is-target { position: relative; }
.gb-r.is-target::after, .gb-cv .is-target:not(.gb-r)::after {
  content: ""; position: absolute; z-index: 4; pointer-events: none;
  border: 2px solid var(--accent); border-radius: 4px;
  outline: 1px solid rgba(0, 0, 0, .55);
  animation: gb-fade .3s var(--gb-ease) both;
}
.gb-r.is-target::after { left: var(--mk-l); width: var(--mk-w); top: 1px; bottom: 1px; }
.gb-cv .is-target:not(.gb-r)::after { inset: calc(var(--u) * -5); }
.gb-ok {
  --ok: clamp(11px, calc(var(--u) * 18), 20px);
  position: absolute; z-index: 7; left: calc(100% + clamp(5px, calc(var(--u) * 10), 12px)); top: 50%;
  width: var(--ok); height: var(--ok); margin-top: calc(var(--ok) / -2);
  border-radius: 50%; background: var(--accent);
  opacity: 0; transform: scale(.6);
  transition: opacity .24s var(--gb-ease), transform .28s var(--gb-ease);
}
.gb-ok::after { content: ""; position: absolute; left: 35%; top: 20%; width: 28%; height: 46%; border: solid #17140f; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.is-done .gb-ok { opacity: 1; transform: none; }
/* 按钮类目标（EZ 屏的模式按钮、确认框按钮、键帽）左右常挨着别的按钮，有的还贴着画布上沿：对勾挂在右下角 */
.gb-cv .is-target:not(.gb-r) > .gb-ok { left: auto; right: calc(var(--ok) / -2 - var(--u) * 4); top: auto; bottom: calc(var(--ok) / -2 - var(--u) * 4); margin-top: 0; }

/* 演示光标：left / top 是指尖在画布里的像素位置，移动时长由脚本按节拍给（transition-duration），减速曲线不回弹；
   箭头外面一圈 1px 深色投影只为在浅色、红色底上都看得见 */
.gb-mouse {
  position: absolute; z-index: 8; left: 0; top: 0;
  width: clamp(11px, calc(var(--u) * 16), 18px); height: clamp(14px, calc(var(--u) * 21), 23px);
  pointer-events: none; filter: drop-shadow(0 0 1px rgba(0, 0, 0, .95));
  transition-property: left, top; transition-timing-function: var(--gb-ease);
}
.gb-mouse::before { content: ""; position: absolute; inset: 0; background: #f4f2ee; clip-path: polygon(0 0, 0 80%, 24% 61%, 41% 98%, 57% 91%, 41% 56%, 74% 56%); }
/* 点击提示：一圈细线从光标处向外扩散后淡出（350ms，减速，不回弹） */
.gb-ripple {
  --rp: clamp(22px, calc(var(--u) * 34), 40px);
  position: absolute; z-index: 8; width: var(--rp); height: var(--rp); margin: calc(var(--rp) / -2) 0 0 calc(var(--rp) / -2);
  border: 1.5px solid rgba(244, 242, 238, .9); border-radius: 50%; pointer-events: none;
  animation: gb-ripple .35s var(--gb-ease) both;
}
/* 透明度前一半基本不降、后一半才淡出：减速曲线下圈很快就扩开，不留住的话人眼看不到这一圈 */
@keyframes gb-ripple { 0% { opacity: 1; transform: scale(.25); } 55% { opacity: .85; } 100% { opacity: 0; transform: scale(1); } }
/* 「看到它别慌」的提示框：很淡的中性灰细框（不用暖金），和高亮框同位置，淡入、停 0.5 秒、淡出，不留在终态 */
.gb-hintbox { position: absolute; z-index: 3; left: var(--mk-l); width: var(--mk-w); top: 1px; bottom: 1px; border: 1.5px solid rgba(240, 238, 233, .32); border-radius: 4px; pointer-events: none; animation: gb-fade .25s var(--gb-ease) backwards; transition: opacity .25s var(--gb-ease); }
.gb-hintbox.is-out { opacity: 0; }
/* 值变成目标值后，下沿一条 2px 暖金指示线闪一下（亮起、停一下、淡出） */
.gb-uline { position: absolute; left: 0; right: 0; bottom: calc(var(--u) * -3); height: 2px; background: var(--accent); pointer-events: none; animation: gb-uline .45s var(--gb-ease) both; }
@keyframes gb-uline { 0% { opacity: 0; } 30%, 70% { opacity: 1; } 100% { opacity: 0; } }

/* 弹出的可选值列表与确认框 */
.gb-pop { position: absolute; z-index: 6; animation: gb-fade .16s var(--gb-ease) both; }
.gb-pop.is-closing { opacity: 0; transition: opacity .09s linear; }
.gb-pop.is-drop { left: var(--vx); width: var(--vw); }
.gb-pop.is-modal { left: 50%; top: 50%; transform: translate(-50%, -50%); }
.gb-pop-list { position: relative; }
.gb-pop-o { position: relative; display: flex; align-items: center; height: var(--ph); white-space: nowrap; }
.gb-pop-sel { position: absolute; left: 0; right: 0; top: 0; height: var(--ph); transition: transform .2s var(--gb-ease); }
.gb-dlg-dim { position: absolute; inset: 0; z-index: 5; background: rgba(0, 0, 0, .42); animation: gb-fade .2s var(--gb-ease) both; }
.gb-dlg { position: absolute; z-index: 6; animation: gb-fade .2s var(--gb-ease) both; }
.gb-dlg-btns { display: flex; }
.gb-dlg-b { position: relative; display: flex; align-items: center; justify-content: center; }
.gb-dlg-bph { width: 50%; }
.is-instant *, .is-instant *::before, .is-instant *::after { animation: none !important; transition: none !important; }
@keyframes gb-fade { from { opacity: 0; } to { opacity: 1; } }

/* EZ 屏正文：只留面板标题，内容画占位块 */
.gb-ezp { display: flex; flex-direction: column; gap: calc(var(--u) * 10); padding: calc(var(--u) * 14) calc(var(--u) * 16); }
.gb-ezp-t { font-size: calc(var(--u) * 15); }
.gb-ezp .gb-ph { height: calc(var(--u) * 7); }

/* 实拍截图口子：数据里给了 image 就显示图，并套同一个标注框 */
.sk-image { background: #000; }
.gb-shot { width: 100%; height: 100%; object-fit: cover; }
.gb-imgmark { position: absolute; border: 2px solid var(--accent); border-radius: 4px; outline: 1px solid rgba(0, 0, 0, .55); opacity: 0; transition: opacity .2s var(--gb-ease); }
.gb-imgmark.is-on { opacity: 1; }

/* 「进入 BIOS」：按键示意，站点风格（按控件规范 v2 画平：细线键帽，没有渐变和投影；先高亮要按的键，再按三下） */
.sk-keys { display: grid; place-items: center; background: #070708; }
.k-caps { display: flex; align-items: center; gap: calc(var(--u) * 34); }
.k-cap {
  display: grid; place-items: center; min-width: calc(var(--u) * 150); height: calc(var(--u) * 116); padding: 0 calc(var(--u) * 26);
  border: 1px solid rgba(var(--ink-rgb), .2); border-bottom-width: calc(var(--u) * 5); border-radius: calc(var(--u) * 14);
  background: #111113;
  font: 500 calc(var(--u) * 32) / 1 var(--sans); color: var(--text-2);
}
.k-cap:not(.is-main) { opacity: .5; }
.k-cap.is-main { color: var(--text); }
.sk-keys.is-play .k-cap.is-main { animation: gb-press .46s var(--gb-ease) 3; }
@keyframes gb-press {
  0%, 100% { transform: none; border-bottom-width: calc(var(--u) * 5); }
  40% { transform: translateY(calc(var(--u) * 4)); border-bottom-width: 1px; }
}

/* ======================================================================
 * 华硕 ASUS · UEFI BIOS Utility（PRIME / TUF 蓝黑皮肤，按 800 系手册截图 1230×692 换算到 1280×720）
 * ==================================================================== */
.sk-asus {
  --rh: calc(var(--u) * 34); --lx: calc(var(--u) * 61); --lw: calc(var(--u) * 560);
  --vx: calc(var(--u) * 688); --vw: calc(var(--u) * 310); --vh: calc(var(--u) * 25);
  --sel-w: calc(var(--u) * 1020); --sel-bg: #45474b;
  --mk-l: calc(var(--u) * 30); --mk-w: calc(var(--u) * 980);
  --ph: calc(var(--u) * 25);
  --a-cyan: #4ea6c9;
  background: #1b1c1e;
  font-family: "Segoe UI", "Noto Sans", "Open Sans", Inter, Arial, sans-serif;
  font-size: calc(var(--u) * 16); color: #e6e6e6;
}
/* 标题栏和底栏：蓝黑底加很淡的斜向细纹，代替手册截图里的科技纹插画 */
.sk-asus .a-hd, .sk-asus .a-ft {
  position: absolute; left: 0; right: 0;
  background:
    repeating-linear-gradient(118deg, rgba(110, 170, 210, .045) 0 1px, transparent 1px calc(var(--u) * 11)),
    linear-gradient(100deg, #0a131c 0%, #0f1f2c 46%, #0b1520 100%);
}
.sk-asus .a-hd { top: 0; height: calc(var(--u) * 76); }
.sk-asus .a-title { position: absolute; left: calc(var(--u) * 24); top: calc(var(--u) * 8); font-size: calc(var(--u) * 18.5); color: #eef1f3; }
.sk-asus .a-meta { position: absolute; left: calc(var(--u) * 22); top: calc(var(--u) * 37); display: flex; align-items: center; height: calc(var(--u) * 32); }
.sk-asus .a-date { font-size: calc(var(--u) * 10.5); line-height: 1.15; color: #dfe4e8; }
.sk-asus .a-time { margin-left: calc(var(--u) * 30); font-size: calc(var(--u) * 27); color: #f3f5f6; }
.sk-asus .a-gear { width: calc(var(--u) * 19); height: calc(var(--u) * 19); margin-left: calc(var(--u) * 30); color: #e6e9ec; }
.sk-asus .a-div { width: 1px; height: calc(var(--u) * 24); margin: 0 calc(var(--u) * 14); background: rgba(255, 255, 255, .45); }
.sk-asus .a-tools { display: flex; gap: calc(var(--u) * 11); font-size: calc(var(--u) * 14.5); color: #eef1f3; }
.sk-asus .a-tool { display: inline-flex; align-items: center; gap: calc(var(--u) * 4); }
.sk-asus .a-tool .gb-svg { width: calc(var(--u) * 17); height: calc(var(--u) * 17); }
.sk-asus .a-tabs { position: absolute; left: calc(var(--u) * 54); top: calc(var(--u) * 76); height: calc(var(--u) * 36); display: flex; align-items: center; gap: calc(var(--u) * 20); font-size: calc(var(--u) * 16.5); color: #e2e2e2; }
.sk-asus .gb-tab.is-on { color: var(--a-cyan); text-decoration: underline; text-underline-offset: calc(var(--u) * 4); text-decoration-thickness: calc(var(--u) * 1.5); }
.sk-asus .a-main { position: absolute; left: 0; top: calc(var(--u) * 112); width: calc(var(--u) * 1046); height: calc(var(--u) * 430); display: flex; flex-direction: column; --crumb: 0px; }
.sk-asus .a-main.has-crumb { --crumb: var(--rh); }
.sk-asus .a-main .gb-list { flex: 1; }
.sk-asus .a-main::after { content: ""; position: absolute; right: calc(var(--u) * 4); top: 0; height: 74%; width: calc(var(--u) * 2); background: #5b5d60; }
.sk-asus .gb-crumb { display: flex; align-items: center; height: var(--rh); flex: none; font-size: calc(var(--u) * 16.5); }
.sk-asus .gb-crumb-ic { width: calc(var(--u) * 20); height: calc(var(--u) * 20); margin: 0 calc(var(--u) * 18) 0 calc(var(--u) * 22); }
.sk-asus .gb-r-sub::before { content: "\27A4"; position: absolute; left: calc(var(--u) * 42); top: 50%; transform: translateY(-50%); font-size: calc(var(--u) * 12); }
.sk-asus .gb-r.is-dim { color: #7c7e81; }
.sk-asus .gb-r-info .gb-l, .sk-asus .gb-r-info .gb-v { color: #9b9da0; }
.sk-asus .gb-r-head .gb-l { color: #9b9da0; }
.sk-asus .gb-r-head.has-line::before { content: ""; position: absolute; left: var(--lx); width: calc(var(--u) * 938); top: calc(var(--u) * 2); height: 1px; background: #6a6c6f; }
.sk-asus .gb-v.is-dd { width: var(--vw); height: var(--vh); padding: 0 calc(var(--u) * 30) 0 calc(var(--u) * 10); border: 1px solid #a3a5a8; background: #121314; font-size: calc(var(--u) * 14.5); }
.sk-asus .gb-v.is-dd .gb-vph { width: 46%; }
.sk-asus .gb-dd-caret { position: absolute; right: calc(var(--u) * 10); top: 50%; border: calc(var(--u) * 4.5) solid transparent; border-top-color: #e6e6e6; margin-top: calc(var(--u) * -1.5); }
.sk-asus .gb-vt { overflow: hidden; text-overflow: ellipsis; }
.sk-asus .a-info { position: absolute; left: 0; top: calc(var(--u) * 545); width: calc(var(--u) * 1046); height: calc(var(--u) * 97); border-top: calc(var(--u) * 4) solid #121314; }
.sk-asus .a-info-ic { position: absolute; left: calc(var(--u) * 17); top: calc(var(--u) * 12); width: calc(var(--u) * 25); height: calc(var(--u) * 25); color: #d6d6d6; }
.sk-asus .gb-help { position: absolute; left: var(--lx); top: calc(var(--u) * 10); right: calc(var(--u) * 30); font-size: calc(var(--u) * 13); line-height: 1.38; color: #e6e6e6; white-space: pre-line; text-wrap: wrap; }
.sk-asus .gb-help-ph { width: calc(var(--u) * 260); height: calc(var(--u) * 7); margin-top: calc(var(--u) * 6); }
.sk-asus .a-mon { position: absolute; left: calc(var(--u) * 1054); top: calc(var(--u) * 76); width: calc(var(--u) * 226); height: calc(var(--u) * 566); padding: calc(var(--u) * 10) calc(var(--u) * 12) 0 calc(var(--u) * 10); background: #18191b; }
.sk-asus .a-mon-t { display: flex; align-items: center; gap: calc(var(--u) * 7); font-size: calc(var(--u) * 15.5); }
.sk-asus .a-mon-t .gb-svg { width: calc(var(--u) * 19); height: calc(var(--u) * 19); }
.sk-asus .a-mon-g { margin: calc(var(--u) * 18) 0 calc(var(--u) * 10); font-size: calc(var(--u) * 15.5); color: var(--a-cyan); }
.sk-asus .a-mon-g + .a-cells + .a-mon-g { padding-top: calc(var(--u) * 14); border-top: 1px solid #45474a; }
.sk-asus .a-cells { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 12) calc(var(--u) * 8); }
.sk-asus .gb-cell { display: grid; gap: calc(var(--u) * 2); }
.sk-asus .gb-cell-k { font-size: calc(var(--u) * 12.5); color: #a9abae; }
.sk-asus .gb-cell-v { font-size: calc(var(--u) * 13); color: #eaeaea; }
.sk-asus .a-ft { top: calc(var(--u) * 645); bottom: 0; }
.sk-asus .a-hot { position: absolute; right: calc(var(--u) * 26); top: calc(var(--u) * 21); display: flex; font-size: calc(var(--u) * 15); color: #eef1f3; }
.sk-asus .a-hk { padding: 0 calc(var(--u) * 11); border-left: 1px solid rgba(255, 255, 255, .55); }
.sk-asus .a-hk:first-child { border-left: 0; }
.sk-asus .a-ver { position: absolute; left: 0; right: 0; bottom: calc(var(--u) * 7); text-align: center; font-size: calc(var(--u) * 14.5); color: #e5e8ea; }
.sk-asus .gb-pop { background: #131416; border: 1px solid #8c8e91; font-size: calc(var(--u) * 14.5); }
.sk-asus .gb-pop-o { padding: 0 calc(var(--u) * 10); }
.sk-asus .gb-pop-sel { background: #34495a; }
/* 保存确认框：横贯全宽的灰色带，内容在中间一半宽度里（FAQ 1044842 截图） */
.sk-asus .gb-dlg { left: 0; right: 0; top: calc(var(--u) * 190); height: calc(var(--u) * 360); padding: calc(var(--u) * 16) 25% 0; background: #2c2d2f; }
.sk-asus .gb-dlg-title { font-size: calc(var(--u) * 19); }
.sk-asus .gb-dlg-text { margin-top: calc(var(--u) * 4); padding-bottom: calc(var(--u) * 12); border-bottom: 1px solid #7a7c7f; font-size: calc(var(--u) * 15); }
.sk-asus .gb-dlg-body { display: grid; gap: calc(var(--u) * 12); padding: calc(var(--u) * 16) calc(var(--u) * 12); color: #d8d8d8; }
.sk-asus .gb-dlg-btns { position: absolute; right: 25%; bottom: calc(var(--u) * 20); gap: calc(var(--u) * 12); }
.sk-asus .gb-dlg-b { width: calc(var(--u) * 132); height: calc(var(--u) * 30); border: 1px solid #c8cacd; font-size: calc(var(--u) * 15); }
.sk-asus .gb-dlg-b.is-focus { background: #3a5466; border-color: #9fb3c2; }
/* EZ Mode 面板排法照 800 系手册 p7：左边三行（信息与温度 / DRAM 与存储 / 风扇），右边一栏（EZ System Tuning、Boot Priority） */
.sk-asus.is-ez .a-ez { position: absolute; left: 0; right: 0; top: calc(var(--u) * 76); height: calc(var(--u) * 569); display: grid; grid-template-columns: 1.35fr .85fr 1.15fr 1.38fr; grid-template-rows: .9fr 1.4fr 1.15fr; gap: 1px; background: #2a2b2d; }
.sk-asus .a-ez .gb-ezp { background: #1b1c1e; }
.sk-asus .a-ez .gb-ezp:nth-child(4) { grid-column: 4; grid-row: 1; }
.sk-asus .a-ez .gb-ezp:nth-child(6) { grid-column: 2 / span 2; }
.sk-asus .a-ez .gb-ezp:nth-child(7) { grid-column: 4; grid-row: 2 / span 2; }
.sk-asus .a-ez .gb-ezp:nth-child(9) { grid-column: 2 / span 2; }
.sk-asus .a-ez .gb-ezp-t { color: var(--a-cyan); }
.sk-asus.is-ez .a-hot { top: calc(var(--u) * 26); }

/* ======================================================================
 * 华擎 ASRock · UEFI SETUP UTILITY（800 系指南截图 1024×768；黑底、红色选中整条、等宽字）
 * 红色从 #c70307 降到 #9c1a1f，免得一整条纯红在页面上抢眼
 * ==================================================================== */
.sk-asrock {
  --rh: calc(var(--u) * 34); --lx: calc(var(--u) * 26); --lw: calc(var(--u) * 400);
  --vx: calc(var(--u) * 495); --vw: calc(var(--u) * 170); --vh: calc(var(--u) * 28);
  --sel-l: calc(var(--u) * 24); --sel-w: calc(var(--u) * 450); --sel-bg: #9c1a1f;
  --mk-l: calc(var(--u) * 15); --mk-w: calc(var(--u) * 660);
  --stx: calc(var(--u) * 444);
  --ph: calc(var(--u) * 34);
  --r-red: #b8353a;
  background: #000;
  font-family: Consolas, "JetBrains Mono", "Cascadia Mono", "Courier New", monospace;
  font-size: calc(var(--u) * 16); color: #f2f2f2;
}
/* 左下角的灰色斜纹（截图里是一大片三角形的细斜线）：渐隐成三角，压得很淡，不和列表抢 */
.sk-asrock::before { content: ""; position: absolute; left: 0; bottom: 0; width: 46%; height: 44%; z-index: -1; background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .05) 0 calc(var(--u) * 1.5), transparent calc(var(--u) * 1.5) calc(var(--u) * 7)); -webkit-mask-image: linear-gradient(to top right, #000 20%, transparent 62%); mask-image: linear-gradient(to top right, #000 20%, transparent 62%); }
.sk-asrock .gb-r-ph.is-info .gb-ph { opacity: .12; }
.sk-asrock .r-mark { position: absolute; left: calc(var(--u) * 133); top: calc(var(--u) * 26); font-size: calc(var(--u) * 13); letter-spacing: .3em; color: #8d8d8d; }
.sk-asrock .r-btn { display: inline-flex; align-items: center; justify-content: center; gap: calc(var(--u) * 6); height: calc(var(--u) * 28); border: 1px solid #6f6f6f; background: linear-gradient(to bottom, #555, #2a2a2a); font-size: calc(var(--u) * 14.5); color: #ececec; }
.sk-asrock .r-mode { position: absolute; left: calc(var(--u) * 866); top: calc(var(--u) * 6); width: calc(var(--u) * 149); height: calc(var(--u) * 30); }
.sk-asrock .r-tabs { position: absolute; left: calc(var(--u) * 28); top: calc(var(--u) * 47); width: calc(var(--u) * 977); height: calc(var(--u) * 32); display: grid; grid-template-columns: repeat(8, 1fr); align-items: center; text-align: center; font-size: calc(var(--u) * 16.5); }
.sk-asrock .gb-tab { position: relative; }
.sk-asrock .gb-tab.is-on { color: var(--r-red); }
.sk-asrock .gb-tab.is-on::after { content: ""; position: absolute; left: 50%; bottom: calc(var(--u) * -12); width: calc(var(--u) * 96); height: calc(var(--u) * 4); margin-left: calc(var(--u) * -48); background: #6c6c6c; }
.sk-asrock .r-main { position: absolute; left: 0; top: calc(var(--u) * 127); width: calc(var(--u) * 690); height: calc(var(--u) * 595); }
.sk-asrock .r-main .gb-list { height: 100%; }
.sk-asrock .gb-crumb { position: absolute; left: calc(var(--u) * 17); top: calc(var(--u) * -34); display: flex; align-items: center; gap: calc(var(--u) * 17); height: calc(var(--u) * 26); }
.sk-asrock .gb-crumb-btn { width: calc(var(--u) * 19); height: calc(var(--u) * 19); background: linear-gradient(#e8e8e8, #bdbdbd); position: relative; }
.sk-asrock .gb-crumb-btn::after { content: ""; position: absolute; left: 30%; top: 50%; margin-top: calc(var(--u) * -4.5); border: calc(var(--u) * 4.5) solid transparent; border-right: calc(var(--u) * 6) solid #111; border-left: 0; }
.sk-asrock .gb-sel { margin-top: calc(var(--u) * 3); height: calc(var(--rh) * var(--h, 1) - var(--u) * 6); }
.sk-asrock .gb-ric { position: absolute; left: calc(var(--u) * 31); top: 50%; width: calc(var(--u) * 21); height: calc(var(--u) * 21); transform: translateY(-50%); color: #cfcfcf; }
.sk-asrock .gb-ric + .gb-l { left: calc(var(--u) * 60); }
.sk-asrock .gb-r-info .gb-l { left: calc(var(--u) * 24); }
.sk-asrock .gb-r.is-dim { color: #8b8b8b; }
.sk-asrock .gb-r.is-dim .gb-ric { color: #8b8b8b; }
.sk-asrock .gb-v { width: var(--vw); height: var(--vh); justify-content: center; border: 1px solid #3c3c3c; background: linear-gradient(to bottom, #474747, #262626); }
.sk-asrock .gb-r.is-sel .gb-v { box-shadow: inset calc(var(--u) * 3) 0 0 #e9e9e9, inset calc(var(--u) * -3) 0 0 #e9e9e9; }
.sk-asrock .gb-r.is-mid .gb-v, .sk-asrock .gb-r-st .gb-v { left: var(--stx); width: auto; height: auto; border: 0; background: none; justify-content: flex-start; }
.sk-asrock .gb-r-head.has-line::after { content: ""; position: absolute; left: calc(var(--u) * 24); width: calc(var(--u) * 642); bottom: calc(var(--u) * 2); height: 1px; background: #3d3d3d; }
.sk-asrock .gb-r-head .gb-l { left: calc(var(--u) * 24); }
.sk-asrock .gb-r-ph.is-info .gb-ph { left: calc(var(--u) * 24); }
.sk-asrock .r-desc { position: absolute; left: calc(var(--u) * 698); top: calc(var(--u) * 213); width: calc(var(--u) * 305); height: calc(var(--u) * 491); border: 1px solid #4b4b4b; }
.sk-asrock .r-desc-t { margin: calc(var(--u) * 23) calc(var(--u) * 8) 0; padding: 0 calc(var(--u) * 8) calc(var(--u) * 10); border-bottom: 1px solid #3a3a3a; font-size: calc(var(--u) * 16); }
.sk-asrock .gb-help { margin: calc(var(--u) * 12) calc(var(--u) * 16) 0; font-size: calc(var(--u) * 15.5); line-height: 1.42; white-space: pre-line; text-wrap: wrap; }
.sk-asrock .gb-help-ph { width: calc(var(--u) * 200); margin-top: calc(var(--u) * 7); }
.sk-asrock .r-qr { position: absolute; left: calc(var(--u) * 16); right: calc(var(--u) * 16); bottom: calc(var(--u) * 33); display: flex; justify-content: space-between; align-items: flex-start; }
.sk-asrock .r-qr-t { width: calc(var(--u) * 150); font-size: calc(var(--u) * 15.5); line-height: 1.42; text-wrap: wrap; }
.sk-asrock .r-qr-code { width: calc(var(--u) * 78); height: calc(var(--u) * 78); margin-top: calc(var(--u) * -10); background: repeating-conic-gradient(#d8d8d8 0 25%, #5c5c5c 0 50%) 0 0 / calc(var(--u) * 9.5) calc(var(--u) * 9.5); border: calc(var(--u) * 4) solid #d8d8d8; opacity: .32; }
.sk-asrock .r-ft { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--u) * 38); background: linear-gradient(to bottom, #3b3b3b, #262626); }
.sk-asrock .r-ft .r-btn { position: absolute; top: calc(var(--u) * 6); height: calc(var(--u) * 27); }
.sk-asrock .r-search { left: calc(var(--u) * 480); width: calc(var(--u) * 108); }
.sk-asrock .r-lang { left: calc(var(--u) * 605); width: calc(var(--u) * 93); }
.sk-asrock .r-clock { left: calc(var(--u) * 713); width: calc(var(--u) * 291); }
.sk-asrock .r-search .gb-svg { width: calc(var(--u) * 18); height: calc(var(--u) * 18); }
.sk-asrock .gb-pop { width: calc(var(--u) * 300); border: 1px solid #5a5a5a; background: #141414; }
.sk-asrock .gb-pop-head { position: relative; display: flex; align-items: center; justify-content: center; height: calc(var(--u) * 46); font-size: calc(var(--u) * 17); }
.sk-asrock .gb-pop-x { position: absolute; right: calc(var(--u) * 10); top: calc(var(--u) * 9); width: calc(var(--u) * 28); height: calc(var(--u) * 28); border: 1px solid #777; background: linear-gradient(#4a4a4a, #222); }
.sk-asrock .gb-pop-list { margin: 0 calc(var(--u) * 14) calc(var(--u) * 14); padding: calc(var(--u) * 6) 0; background: #0b0b0b; }
.sk-asrock .gb-pop-o { padding: 0 calc(var(--u) * 12); font-size: calc(var(--u) * 17); }
.sk-asrock .gb-pop-sel { background: #9c1a1f; }
.sk-asrock .gb-dlg { left: 50%; top: 50%; width: calc(var(--u) * 470); transform: translate(-50%, -50%); padding: calc(var(--u) * 16) calc(var(--u) * 22) calc(var(--u) * 22); border: 1px solid #5a5a5a; background: #141414; }
.sk-asrock .gb-dlg-head .gb-ph { width: calc(var(--u) * 140); margin: calc(var(--u) * 4) auto 0; }
.sk-asrock .gb-dlg-text { margin-top: calc(var(--u) * 22); text-align: center; font-size: calc(var(--u) * 16); }
.sk-asrock .gb-dlg-btns { justify-content: center; gap: calc(var(--u) * 18); margin-top: calc(var(--u) * 26); }
.sk-asrock .gb-dlg-b { width: calc(var(--u) * 120); height: calc(var(--u) * 30); border: 1px solid #6f6f6f; background: linear-gradient(to bottom, #555, #2a2a2a); }
.sk-asrock .gb-dlg-b.is-focus { background: #9c1a1f; border-color: #c95b5f; }
.sk-asrock.is-ez .r-ezbar { position: absolute; right: calc(var(--u) * 9); top: calc(var(--u) * 6); display: flex; align-items: center; gap: calc(var(--u) * 10); }
.sk-asrock .r-ezbar .r-btn { width: calc(var(--u) * 150); height: calc(var(--u) * 30); font-size: calc(var(--u) * 14); }
.sk-asrock .r-ezic { width: calc(var(--u) * 26); height: calc(var(--u) * 26); color: #9a9a9a; }
/* EZ Mode 面板排法照 800 系指南 PDF p30：左（型号 / DRAM / 存储）、中（温度 / 风扇 / 温控）、右（时钟 / 启动顺序） */
.sk-asrock .r-ez { position: absolute; left: calc(var(--u) * 10); right: calc(var(--u) * 10); top: calc(var(--u) * 42); bottom: calc(var(--u) * 12); display: grid; grid-template-columns: 1.7fr 1fr 1.28fr; grid-template-rows: .8fr 1.3fr 1.5fr; gap: calc(var(--u) * 6); }
.sk-asrock .r-ez .gb-ezp { background: #111; }
.sk-asrock .r-ez .gb-ezp:nth-child(6) { grid-row: span 2; }

/* ======================================================================
 * 技嘉 GIGABYTE · Aorus 25 主题（800 系手册截图 1025×577 换算到 1280×720）
 * 近黑底、选中行暗灰条、当前页签青绿下划线；青绿降了饱和度，顶部霓虹线压得很淡
 * ==================================================================== */
.sk-gigabyte {
  --rh: calc(var(--u) * 21.35); --lx: calc(var(--u) * 25); --lw: calc(var(--u) * 330);
  --vx: calc(var(--u) * 481); --vw: calc(var(--u) * 150); --v2x: calc(var(--u) * 633);
  --sel-w: 100%; --sel-bg: #262c30;
  --mk-l: calc(var(--u) * 4); --mk-w: calc(var(--u) * 630);
  --ph: calc(var(--u) * 26);
  --g-teal: #4fb7a3;
  background:
    radial-gradient(42% 60% at 42% 60%, rgba(46, 70, 130, .22), transparent 70%),
    radial-gradient(30% 40% at 30% 30%, rgba(90, 50, 130, .12), transparent 70%),
    #050708;
  /* 正文用常规无衬线（Bahnschrift 在小字号下发粗，和截图的细字不像），只有模式页签和时间用窄体 */
  font-family: "Segoe UI", Inter, Arial, sans-serif;
  font-size: calc(var(--u) * 13.8); color: #f1f1f1;
}
.sk-gigabyte .g-mode, .sk-gigabyte .g-time { font-family: Bahnschrift, "Segoe UI", "DIN Alternate", sans-serif; }
.sk-gigabyte::before, .sk-gigabyte::after { content: ""; position: absolute; left: 0; right: 0; height: calc(var(--u) * 2); background: linear-gradient(90deg, transparent, rgba(120, 70, 170, .55) 30%, rgba(80, 160, 170, .45) 70%, transparent); }
.sk-gigabyte::before { top: calc(var(--u) * 60); }
.sk-gigabyte::after { top: calc(var(--u) * 689); }
.sk-gigabyte .g-hd { position: absolute; left: 0; right: 0; top: 0; height: calc(var(--u) * 60); }
.sk-gigabyte .g-modes { position: absolute; left: calc(var(--u) * 420); top: calc(var(--u) * 8); display: flex; gap: calc(var(--u) * 8); }
/* 模式页签的斜切底画在 ::before 上：clip-path 放在按钮本身会把标注框也裁掉 */
.sk-gigabyte .g-mode { position: relative; isolation: isolate; display: grid; place-items: center; width: calc(var(--u) * 210); height: calc(var(--u) * 44); font-size: calc(var(--u) * 16.5); letter-spacing: .1em; color: #d9d9d9; transition: color .2s var(--gb-ease); }
.sk-gigabyte .g-mode::before { content: ""; position: absolute; inset: 0; z-index: -1; clip-path: polygon(calc(var(--u) * 14) 0, 100% 0, 100% 100%, 0 100%, 0 calc(var(--u) * 14)); background: linear-gradient(to bottom, #15181c, #0d0f12); transition: background .2s var(--gb-ease); }
.sk-gigabyte .g-mode.is-on, .sk-gigabyte.is-ez.is-pressed .g-mode:last-child { color: #fff; }
.sk-gigabyte .g-mode.is-on::before, .sk-gigabyte.is-ez.is-pressed .g-mode:last-child::before { background: linear-gradient(to bottom, rgba(110, 70, 150, .55), rgba(40, 30, 70, .7)); }
.sk-gigabyte.is-ez.is-pressed .g-mode:first-child { color: #d9d9d9; }
.sk-gigabyte.is-ez.is-pressed .g-mode:first-child::before { background: linear-gradient(to bottom, #15181c, #0d0f12); }
.sk-gigabyte .g-icons { position: absolute; left: calc(var(--u) * 902); top: calc(var(--u) * 19); display: flex; gap: calc(var(--u) * 14); }
.sk-gigabyte .g-icons .gb-svg { width: calc(var(--u) * 19); height: calc(var(--u) * 19); color: #dcdcdc; }
.sk-gigabyte .g-lang { position: absolute; left: calc(var(--u) * 1004); top: calc(var(--u) * 15); display: flex; align-items: center; gap: calc(var(--u) * 6); height: calc(var(--u) * 28); padding: 0 calc(var(--u) * 12); border: 1px solid rgba(80, 160, 160, .4); font-size: calc(var(--u) * 13); }
.sk-gigabyte .g-date { position: absolute; left: calc(var(--u) * 1094); top: calc(var(--u) * 13); font-size: calc(var(--u) * 13); line-height: 1.2; }
.sk-gigabyte .g-time { position: absolute; left: calc(var(--u) * 1172); top: calc(var(--u) * 13); font-size: calc(var(--u) * 27); }
.sk-gigabyte .g-tabs { position: absolute; left: calc(var(--u) * 30); top: calc(var(--u) * 82); display: flex; gap: calc(var(--u) * 18); font-size: calc(var(--u) * 13.5); }
.sk-gigabyte .gb-tab { position: relative; display: inline-flex; align-items: center; gap: calc(var(--u) * 6); height: calc(var(--u) * 24); }
.sk-gigabyte .gb-tab-ic { width: calc(var(--u) * 16); height: calc(var(--u) * 16); }
.sk-gigabyte .gb-tab.is-on::after { content: ""; position: absolute; left: 0; right: 0; bottom: calc(var(--u) * -2); height: calc(var(--u) * 2); background: var(--g-teal); }
.sk-gigabyte .g-main { position: absolute; left: calc(var(--u) * 30); top: calc(var(--u) * 112); width: calc(var(--u) * 895); height: calc(var(--u) * 492); }
.sk-gigabyte .gb-crumb { height: calc(var(--u) * 23); padding-left: calc(var(--u) * 4); font-size: calc(var(--u) * 13.5); }
/* 列表区：顶线下空一行，再往下每行一道细线铺满整块（截图里没有内容的行也有线） */
.sk-gigabyte .gb-list { position: absolute; left: 0; right: 0; top: calc(var(--u) * 23); bottom: 0; padding-top: var(--rh); border-top: 1px solid rgba(255, 255, 255, .16); background: repeating-linear-gradient(to bottom, transparent 0 calc(var(--rh) - 1px), rgba(255, 255, 255, .1) calc(var(--rh) - 1px) var(--rh)) 0 var(--rh) / 100% 100% no-repeat; }
.sk-gigabyte .gb-r-sub::before { content: ""; position: absolute; left: calc(var(--u) * 10); top: 50%; width: calc(var(--u) * 6); height: calc(var(--u) * 6); margin-top: calc(var(--u) * -3); background: var(--g-teal); }
.sk-gigabyte .gb-r.is-dim, .sk-gigabyte .gb-r-head { color: #7d8083; }
.sk-gigabyte .gb-r-head .gb-l { left: var(--lx); }
.sk-gigabyte .gb-v2 { color: #f1f1f1; }
.sk-gigabyte .g-help { position: absolute; left: calc(var(--u) * 37); top: calc(var(--u) * 609); font-size: calc(var(--u) * 13.5); line-height: 1.35; white-space: pre-line; }
.sk-gigabyte .gb-help-ph { width: calc(var(--u) * 220); margin-top: calc(var(--u) * 4); }
.sk-gigabyte .g-hw { position: absolute; left: calc(var(--u) * 938); top: calc(var(--u) * 143); width: calc(var(--u) * 307); }
.sk-gigabyte .g-hw-t { margin-bottom: calc(var(--u) * 4); font-size: calc(var(--u) * 15.5); }
.sk-gigabyte .g-cells { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 6) calc(var(--u) * 12); margin-bottom: calc(var(--u) * 20); padding: calc(var(--u) * 8) calc(var(--u) * 16) calc(var(--u) * 10); border: 1px solid rgba(255, 255, 255, .24); }
.sk-gigabyte .gb-cell { display: grid; }
.sk-gigabyte .gb-cell-k { font-size: calc(var(--u) * 12.5); color: #d4d4d4; }
.sk-gigabyte .gb-cell-v { font-size: calc(var(--u) * 19.5); }
.sk-gigabyte .g-btns { position: absolute; left: calc(var(--u) * 972); top: calc(var(--u) * 636); display: flex; gap: calc(var(--u) * 7); }
.sk-gigabyte .g-btn { display: inline-flex; align-items: center; gap: calc(var(--u) * 6); height: calc(var(--u) * 30); padding: 0 calc(var(--u) * 10); border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .05); font-size: calc(var(--u) * 13); }
.sk-gigabyte .g-btn .gb-svg { width: calc(var(--u) * 15); height: calc(var(--u) * 15); }
.sk-gigabyte .gb-pop { width: calc(var(--u) * 320); border: 1px solid rgba(255, 255, 255, .26); background: #0c0f11; box-shadow: 0 calc(var(--u) * 20) calc(var(--u) * 50) rgba(0, 0, 0, .7); }
.sk-gigabyte .gb-pop-head { padding: calc(var(--u) * 10) calc(var(--u) * 14); border-bottom: 1px solid rgba(255, 255, 255, .14); font-size: calc(var(--u) * 14.5); }
.sk-gigabyte .gb-pop-list { padding: calc(var(--u) * 6) 0; }
.sk-gigabyte .gb-pop-o { padding: 0 calc(var(--u) * 14); }
.sk-gigabyte .gb-pop-sel { background: #2b353a; box-shadow: inset calc(var(--u) * 3) 0 0 var(--g-teal); }
.sk-gigabyte .gb-dlg { left: 50%; top: 50%; width: calc(var(--u) * 420); transform: translate(-50%, -50%); padding: calc(var(--u) * 16) calc(var(--u) * 20) calc(var(--u) * 20); border: 1px solid rgba(255, 255, 255, .26); background: #0c0f11; }
.sk-gigabyte .gb-dlg-head .gb-ph { width: calc(var(--u) * 150); }
.sk-gigabyte .gb-dlg-body { display: grid; gap: calc(var(--u) * 10); margin-top: calc(var(--u) * 14); }
.sk-gigabyte .gb-dlg-tph2 { width: calc(var(--u) * 260); margin-top: calc(var(--u) * 16); }
.sk-gigabyte .gb-dlg-btns { justify-content: flex-end; gap: calc(var(--u) * 10); margin-top: calc(var(--u) * 22); }
.sk-gigabyte .gb-dlg-b { width: calc(var(--u) * 100); height: calc(var(--u) * 30); border: 1px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .05); }
.sk-gigabyte .gb-dlg-b.is-focus { background: #2b353a; border-color: var(--g-teal); }
.sk-gigabyte.is-ez .g-ezq { top: calc(var(--u) * 82); }
.sk-gigabyte .g-ez { position: absolute; left: calc(var(--u) * 26); right: calc(var(--u) * 26); top: calc(var(--u) * 132); bottom: calc(var(--u) * 50); display: grid; grid-template-columns: 1fr 1fr .9fr .95fr; grid-template-rows: 1fr 1fr 1.1fr; gap: calc(var(--u) * 12); }
.sk-gigabyte .g-ez .gb-ezp { border: 1px solid rgba(255, 255, 255, .16); background: rgba(5, 8, 10, .5); }
.sk-gigabyte .g-ez .gb-ezp:nth-child(1) { grid-row: span 2; }
.sk-gigabyte .g-ez .gb-ezp:nth-child(2) { grid-column: span 2; border-color: transparent; background: none; }
.sk-gigabyte .g-ez .gb-ezp:nth-child(8) { grid-column: span 3; }

/* ======================================================================
 * 微星 MSI · Click BIOS X（800 系指南截图 1121×631 换算到 1280×720，MPG 皮肤）
 * 洋红从 #c2185b 降到 #8a2b55，选中条再压暗，免得大面积玫红抢页面
 * ==================================================================== */
.sk-msi-x {
  --rh: calc(var(--u) * 36); --lx: calc(var(--u) * 26); --lw: calc(var(--u) * 300);
  --vx: calc(var(--u) * 425); --vw: calc(var(--u) * 217); --vh: calc(var(--u) * 21);
  --sel-w: calc(var(--u) * 660); --sel-bg: rgba(138, 43, 85, .42);
  --mk-l: calc(var(--u) * 4); --mk-w: calc(var(--u) * 650);
  --ph: calc(var(--u) * 22);
  --x-mag: #8a2b55; --x-mag-t: #c95b86;
  background:
    radial-gradient(40% 55% at 58% 62%, rgba(90, 40, 110, .2), transparent 70%),
    radial-gradient(30% 40% at 92% 10%, rgba(140, 40, 90, .14), transparent 70%),
    #120f16;
  font-family: "Segoe UI", Inter, Arial, sans-serif;
  font-size: calc(var(--u) * 15); color: #e4e2e6;
}
.sk-msi-x .x-hd { position: absolute; left: 0; right: 0; top: 0; height: calc(var(--u) * 107); border-bottom: 1px solid rgba(255, 255, 255, .2); }
.sk-msi-x .x-title { position: absolute; left: calc(var(--u) * 137); top: calc(var(--u) * 16); font-size: calc(var(--u) * 17); font-weight: 700; letter-spacing: .07em; }
.sk-msi-x .x-seg { position: absolute; left: calc(var(--u) * 26); top: calc(var(--u) * 66); display: flex; height: calc(var(--u) * 24); border: 1px solid #77737b; }
.sk-msi-x .x-seg-o { display: grid; place-items: center; height: 100%; padding: 0 calc(var(--u) * 20); font-size: calc(var(--u) * 14); color: #cfcdd2; transition: background-color .2s var(--gb-ease); }
.sk-msi-x .x-seg-o:first-child { width: calc(var(--u) * 135); }
.sk-msi-x .x-seg-o:last-child { width: calc(var(--u) * 132); }
.sk-msi-x .x-seg-o.is-on { background: var(--x-mag); color: #f4eef1; }
.sk-msi-x.is-ez.is-pressed .x-seg-o:first-child { background: none; color: #cfcdd2; }
.sk-msi-x.is-ez.is-pressed .x-seg-o:last-child { background: var(--x-mag); color: #f4eef1; }
.sk-msi-x .x-icons { position: absolute; right: calc(var(--u) * 36); top: calc(var(--u) * 66); display: flex; align-items: center; gap: calc(var(--u) * 17); color: #e2e0e4; font-size: calc(var(--u) * 14.5); }
.sk-msi-x .x-icons .gb-svg { width: calc(var(--u) * 21); height: calc(var(--u) * 21); }
.sk-msi-x .x-vdiv { width: 1px; height: calc(var(--u) * 24); background: rgba(255, 255, 255, .35); margin: 0 calc(var(--u) * 6); }
.sk-msi-x .x-menu { position: absolute; left: 0; top: calc(var(--u) * 117); width: calc(var(--u) * 240); display: grid; }
.sk-msi-x .x-mi { display: flex; align-items: center; gap: calc(var(--u) * 12); height: calc(var(--u) * 36); padding-left: calc(var(--u) * 42); font-size: calc(var(--u) * 15); }
.sk-msi-x .x-mi .gb-svg { width: calc(var(--u) * 17); height: calc(var(--u) * 17); }
.sk-msi-x .x-mi.is-on { background: rgba(138, 43, 85, .62); }
.sk-msi-x.is-ez::before { display: none; }
.sk-msi-x::before { content: ""; position: absolute; left: calc(var(--u) * 240); top: calc(var(--u) * 107); bottom: calc(var(--u) * 54); width: 1px; background: rgba(255, 255, 255, .2); }
.sk-msi-x .x-main { position: absolute; left: calc(var(--u) * 253); top: calc(var(--u) * 116); width: calc(var(--u) * 667); height: calc(var(--u) * 472); --crumb: 0px; }
.sk-msi-x .x-main.has-crumb { --crumb: calc(var(--u) * 27); }
.sk-msi-x .gb-crumb { display: flex; align-items: center; gap: calc(var(--u) * 6); height: calc(var(--u) * 27); padding-left: calc(var(--u) * 9); font-size: calc(var(--u) * 11.5); color: var(--x-mag-t); }
.sk-msi-x .gb-crumb-ic { width: calc(var(--u) * 13); height: calc(var(--u) * 13); }
.sk-msi-x .gb-crumb-ph { width: calc(var(--u) * 120); height: calc(var(--u) * 6); }
.sk-msi-x .gb-list { position: absolute; left: 0; right: 0; top: var(--crumb); bottom: 0; }
.sk-msi-x .gb-r-sub::before { content: ""; position: absolute; left: calc(var(--u) * 12); top: 50%; width: calc(var(--u) * 6); height: calc(var(--u) * 6); margin-top: calc(var(--u) * -3.5); border: solid #a9a6ad; border-width: 1px 1px 0 0; transform: rotate(45deg); }
.sk-msi-x .gb-r.is-dim { color: #75727a; }
.sk-msi-x .gb-r-head .gb-l { top: auto; bottom: calc(var(--u) * 4); transform: none; color: #d6d4d9; }
.sk-msi-x .gb-r-ph.is-head .gb-ph { top: auto; bottom: calc(var(--u) * 8); margin: 0; }
.sk-msi-x .gb-v { font-size: calc(var(--u) * 14.5); }
.sk-msi-x .gb-v.is-dd, .sk-msi-x .gb-v.is-inp { width: var(--vw); height: var(--vh); padding: 0 calc(var(--u) * 26) 0 calc(var(--u) * 9); background: #3c3a40; font-size: calc(var(--u) * 12); }
.sk-msi-x .gb-r.is-dim .gb-v { background: #2b292e; color: #75727a; }
.sk-msi-x .gb-dd-caret { position: absolute; right: calc(var(--u) * 7); top: 50%; border: calc(var(--u) * 4.5) solid transparent; border-top: calc(var(--u) * 6) solid #e4e2e6; border-bottom: 0; margin-top: calc(var(--u) * -2.5); }
.sk-msi-x .gb-v.is-dd .gb-vph, .sk-msi-x .gb-v.is-inp .gb-vph { width: calc(var(--u) * 70); height: calc(var(--u) * 6); }
.sk-msi-x .x-info { position: absolute; left: calc(var(--u) * 253); top: calc(var(--u) * 592); width: calc(var(--u) * 667); height: calc(var(--u) * 70); border-top: 1px solid rgba(255, 255, 255, .45); }
.sk-msi-x .x-info-ic { position: absolute; left: calc(var(--u) * 7); top: calc(var(--u) * 11); width: calc(var(--u) * 14); height: calc(var(--u) * 14); color: #bdbac0; }
.sk-msi-x .gb-help { position: absolute; left: calc(var(--u) * 30); top: calc(var(--u) * 12); font-size: calc(var(--u) * 13); }
.sk-msi-x .gb-help-ph { width: calc(var(--u) * 200); height: calc(var(--u) * 6); margin-top: calc(var(--u) * 4); }
.sk-msi-x .x-side { position: absolute; left: calc(var(--u) * 936); top: calc(var(--u) * 116); right: calc(var(--u) * 32); bottom: calc(var(--u) * 54); }
.sk-msi-x .x-side-t { font-size: calc(var(--u) * 15); }
.sk-msi-x .x-side-g { margin-top: calc(var(--u) * 12); font-size: calc(var(--u) * 14.5); color: var(--x-mag-t); }
.sk-msi-x .x-cells { display: grid; gap: calc(var(--u) * 3); padding: calc(var(--u) * 12) 0 calc(var(--u) * 10); border-bottom: 1px solid rgba(255, 255, 255, .22); }
.sk-msi-x .gb-cell { display: grid; grid-template-columns: 1fr 1fr; align-items: center; min-height: calc(var(--u) * 17); font-size: calc(var(--u) * 12.5); }
.sk-msi-x .gb-cell-k { color: #b8b5bb; }
.sk-msi-x .gb-cell .gb-ph { width: 70%; height: calc(var(--u) * 6); }
.sk-msi-x .x-keys { position: absolute; left: 0; bottom: calc(var(--u) * 8); display: grid; gap: calc(var(--u) * 14); font-size: calc(var(--u) * 12); }
.sk-msi-x .x-keys p { display: flex; align-items: center; gap: calc(var(--u) * 14); }
.sk-msi-x .x-keycap { width: calc(var(--u) * 24); height: calc(var(--u) * 14); border: 1px solid #bdbac0; border-radius: 2px; }
.sk-msi-x .x-ft { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--u) * 54); display: flex; align-items: center; gap: calc(var(--u) * 30); padding-left: calc(var(--u) * 40); border-top: 1px solid rgba(255, 255, 255, .2); font-size: calc(var(--u) * 14.5); }
.sk-msi-x .x-devs { display: flex; gap: calc(var(--u) * 30); }
.sk-msi-x .x-dev { width: calc(var(--u) * 20); height: calc(var(--u) * 20); border: 1px solid #a9a6ad; border-radius: 50%; opacity: .7; }
.sk-msi-x .gb-pop { border: 1px solid #66626b; background: #1b1820; font-size: calc(var(--u) * 12.5); }
.sk-msi-x .gb-pop-o { padding: 0 calc(var(--u) * 9); }
.sk-msi-x .gb-pop-sel { background: var(--x-mag); }
.sk-msi-x .gb-dlg { left: 50%; top: 48%; width: calc(var(--u) * 460); transform: translate(-50%, -50%); padding: calc(var(--u) * 18) calc(var(--u) * 22) calc(var(--u) * 22); border: 1px solid #66626b; background: #1b1820; }
.sk-msi-x .gb-dlg-head .gb-ph { width: calc(var(--u) * 150); }
.sk-msi-x .gb-dlg-tph2 { width: calc(var(--u) * 240); margin-top: calc(var(--u) * 16); }
.sk-msi-x .gb-dlg-body { display: grid; gap: calc(var(--u) * 10); margin-top: calc(var(--u) * 14); }
.sk-msi-x .gb-dlg-btns { justify-content: center; gap: calc(var(--u) * 14); margin-top: calc(var(--u) * 24); }
.sk-msi-x .gb-dlg-b { width: calc(var(--u) * 110); height: calc(var(--u) * 28); border: 1px solid #77737b; }
.sk-msi-x .gb-dlg-b.is-focus { background: var(--x-mag); border-color: #b95883; }
.sk-msi-x .x-ez { position: absolute; left: calc(var(--u) * 26); right: calc(var(--u) * 26); top: calc(var(--u) * 126); bottom: calc(var(--u) * 72); display: grid; grid-template-columns: 1.2fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: calc(var(--u) * 12); }
.sk-msi-x .x-ez .gb-ezp { border: 1px solid rgba(255, 255, 255, .14); background: rgba(10, 8, 14, .45); }
.sk-msi-x .x-ez .gb-ezp:first-child { grid-row: 1 / span 2; }

/* ======================================================================
 * 微星 MSI · Click BIOS 5（600 系指南截图 1024×768，红黑皮肤）
 * 左右三块拉丝灰大按钮；红色降到 #a3262a，选中条暗红
 * ==================================================================== */
.sk-msi-5 {
  --rh: calc(var(--u) * 19); --lx: calc(var(--u) * 54); --lw: calc(var(--u) * 260);
  --vx: calc(var(--u) * 392); --vw: calc(var(--u) * 150);
  --sel-l: calc(var(--u) * 50); --sel-w: calc(var(--u) * 500); --sel-bg: #511619;
  --mk-l: calc(var(--u) * 36); --mk-w: calc(var(--u) * 520);
  --ph: calc(var(--u) * 24);
  --m-red: #c43a3c; --m-red-d: #a3262a;
  background: #000;
  font-family: "Segoe UI", Inter, Arial, sans-serif;
  font-size: calc(var(--u) * 14); color: #ececec;
}
.sk-msi-5 .m-hd { position: absolute; left: 0; right: 0; top: 0; height: calc(var(--u) * 40); background: #070707; }
.sk-msi-5 .m-title { position: absolute; left: calc(var(--u) * 20); top: calc(var(--u) * 7); font-family: Bahnschrift, "Segoe UI", sans-serif; font-size: calc(var(--u) * 21); font-weight: 300; letter-spacing: .2em; }
.sk-msi-5 .m-mode { position: absolute; isolation: isolate; left: calc(var(--u) * 538); top: 0; width: calc(var(--u) * 208); height: calc(var(--u) * 28); display: grid; place-items: center; font-size: calc(var(--u) * 14); color: var(--m-red); }
.sk-msi-5 .m-mode::before { content: ""; position: absolute; inset: 0; border: 1px solid var(--m-red-d); border-top: 0; transform: perspective(calc(var(--u) * 100)) rotateX(-10deg); transform-origin: top; background: linear-gradient(to bottom, #120505, #0a0a0a); z-index: -1; }
.sk-msi-5 .m-tools { position: absolute; right: calc(var(--u) * 18); top: calc(var(--u) * 9); display: flex; align-items: center; gap: calc(var(--u) * 10); font-size: calc(var(--u) * 13.5); }
.sk-msi-5 .m-tools .gb-svg { width: calc(var(--u) * 19); height: calc(var(--u) * 19); color: var(--m-red); }
.sk-msi-5 .m-tools .gb-svg:last-child { margin-left: calc(var(--u) * 50); color: #dcdcdc; }
.sk-msi-5 .m-band { position: absolute; left: 0; right: 0; top: calc(var(--u) * 40); height: calc(var(--u) * 212); border-top: 1px solid #262626; }
.sk-msi-5 .m-clock { position: absolute; left: calc(var(--u) * 14); top: calc(var(--u) * 2); display: flex; align-items: baseline; gap: calc(var(--u) * 14); }
.sk-msi-5 .m-time { font-family: "Consolas", monospace; font-size: calc(var(--u) * 25); letter-spacing: .08em; }
.sk-msi-5 .m-dateline { font-size: calc(var(--u) * 14); }
.sk-msi-5 .m-speeds { position: absolute; left: calc(var(--u) * 37); top: calc(var(--u) * 30); display: grid; gap: calc(var(--u) * 2); }
.sk-msi-5 .m-speeds p { display: grid; grid-template-columns: calc(var(--u) * 148) auto; align-items: baseline; font-size: calc(var(--u) * 19); }
.sk-msi-5 .m-speeds b { font-size: calc(var(--u) * 21); color: var(--m-red); }
.sk-msi-5 .m-boost { position: absolute; left: 0; top: calc(var(--u) * 95); width: calc(var(--u) * 210); height: calc(var(--u) * 20); padding-left: calc(var(--u) * 8); background: linear-gradient(90deg, #3a0c0d, #170606); font-size: calc(var(--u) * 13); font-weight: 600; }
.sk-msi-5 .m-tiles { position: absolute; left: 0; top: calc(var(--u) * 116); width: calc(var(--u) * 357); height: calc(var(--u) * 94); display: grid; grid-template-columns: 1fr 2fr; gap: calc(var(--u) * 4); }
.sk-msi-5 .m-tile { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: calc(var(--u) * 10); padding-bottom: calc(var(--u) * 8); border-bottom: calc(var(--u) * 3) solid var(--m-red-d); background: linear-gradient(to bottom, #3a3a3a, #1e1e1e); font-size: calc(var(--u) * 12.5); }
.sk-msi-5 .m-tile .gb-svg { width: calc(var(--u) * 34); height: calc(var(--u) * 34); }
.sk-msi-5 .m-sys { position: absolute; left: calc(var(--u) * 375); top: calc(var(--u) * 6); display: grid; grid-template-columns: calc(var(--u) * 290) auto; font-size: calc(var(--u) * 13.5); color: #bcbcbc; line-height: 1.4; }
.sk-msi-5 .m-sys span { color: #ececec; }
.sk-msi-5 .m-bootp { position: absolute; left: calc(var(--u) * 375); top: calc(var(--u) * 122); font-size: calc(var(--u) * 13); font-weight: 600; color: var(--m-red); }
.sk-msi-5 .m-devs { position: absolute; left: calc(var(--u) * 375); top: calc(var(--u) * 140); width: calc(var(--u) * 375); height: calc(var(--u) * 54); display: flex; align-items: center; justify-content: space-around; border: 1px solid #4a1414; }
.sk-msi-5 .m-dev { width: calc(var(--u) * 28); height: calc(var(--u) * 30); border: 1px solid #6a6a6a; border-radius: calc(var(--u) * 3); opacity: .6; }
/* 左右大按钮：拉丝灰，当前那块红边发光；当前块不显示副标题（截图如此） */
.sk-msi-5 .m-left, .sk-msi-5 .m-right { position: absolute; top: calc(var(--u) * 252); bottom: 0; width: calc(var(--u) * 210); display: grid; grid-template-rows: repeat(3, 1fr); gap: calc(var(--u) * 2); }
.sk-msi-5 .m-left { left: 0; }
.sk-msi-5 .m-right { right: 0; }
.sk-msi-5 .m-big { position: relative; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 calc(var(--u) * 20) calc(var(--u) * 18); background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 3px), linear-gradient(to bottom, #2c2c2c, #151515); }
.sk-msi-5 .m-big.is-on { box-shadow: inset 0 0 0 calc(var(--u) * 2) var(--m-red-d), inset 0 0 calc(var(--u) * 18) rgba(170, 30, 30, .4); }
.sk-msi-5 .m-big-s { font-size: calc(var(--u) * 13); color: #d8d8d8; }
.sk-msi-5 .m-big-t { font-size: calc(var(--u) * 29); line-height: 1.05; letter-spacing: .01em; }
.sk-msi-5 .m-right .m-big-t { white-space: normal; }
.sk-msi-5 .m-main { position: absolute; left: calc(var(--u) * 210); top: calc(var(--u) * 252); width: calc(var(--u) * 605); bottom: 0; }
.sk-msi-5 .gb-crumb { position: relative; display: flex; align-items: center; height: calc(var(--u) * 50); padding-left: calc(var(--u) * 20); font-size: calc(var(--u) * 15); color: #cfcfcf; }
.sk-msi-5 .gb-crumb-ph { width: calc(var(--u) * 160); }
.sk-msi-5 .gb-hotkey { margin-left: auto; font-size: calc(var(--u) * 11.5); color: #bbb; }
.sk-msi-5 .gb-hotkey-sep { margin: 0 calc(var(--u) * 10); color: #888; }
.sk-msi-5 .gb-hotkey-ic { width: calc(var(--u) * 13); height: calc(var(--u) * 13); margin-right: calc(var(--u) * 22); }
.sk-msi-5 .gb-list { position: absolute; left: 0; right: 0; top: calc(var(--u) * 56); bottom: calc(var(--u) * 10); }
.sk-msi-5 .gb-r-sub::before { content: ""; position: absolute; left: calc(var(--u) * 42); top: 50%; width: calc(var(--u) * 5); height: calc(var(--u) * 5); margin-top: calc(var(--u) * -3); border: solid var(--m-red); border-width: calc(var(--u) * 1.6) calc(var(--u) * 1.6) 0 0; transform: rotate(45deg); }
.sk-msi-5 .gb-r-sub::after { content: ""; position: absolute; left: calc(var(--u) * 38); width: calc(var(--u) * 512); bottom: 0; height: 1px; background: #3a3a3a; }
.sk-msi-5 .gb-r-sub.is-target::after { left: var(--mk-l); width: var(--mk-w); bottom: 1px; height: auto; background: none; }
/* Click BIOS 5 行距只有 19，标注框贴着行画会把字压住：上下各放出 3px */
.sk-msi-5 .gb-r.is-target::after { top: -3px; bottom: -3px; }
.sk-msi-5 .gb-r.is-dim { color: #7c7c7c; }
.sk-msi-5 .gb-r.is-dim.gb-r-sub::before { border-color: #7c7c7c; }
.sk-msi-5 .gb-r-head .gb-l { top: auto; bottom: calc(var(--u) * 1); transform: none; font-size: calc(var(--u) * 15); letter-spacing: .04em; color: #a8a8a8; }
.sk-msi-5 .gb-r-info .gb-v { color: #8a8a8a; }
.sk-msi-5 .gb-vph { width: calc(var(--u) * 60); height: calc(var(--u) * 6); }
.sk-msi-5 .m-helpbar { position: absolute; right: 0; top: calc(var(--u) * 252); bottom: 0; width: calc(var(--u) * 209); border: 1px solid #6b1515; background: #050505; }
.sk-msi-5 .m-help-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 4); padding: calc(var(--u) * 4) calc(var(--u) * 4) 0; font-size: calc(var(--u) * 12.5); font-weight: 600; text-align: center; }
.sk-msi-5 .m-help-tabs span { padding: calc(var(--u) * 2) 0; border: 1px solid var(--m-red-d); color: var(--m-red); }
.sk-msi-5 .m-help-tabs .is-on { background: var(--m-red-d); color: #fff; }
.sk-msi-5 .gb-help { margin: calc(var(--u) * 26) calc(var(--u) * 16) 0; font-size: calc(var(--u) * 14); line-height: 1.38; letter-spacing: .03em; color: #cfcfcf; white-space: pre-line; text-wrap: wrap; }
.sk-msi-5 .gb-help-ph { width: 80%; height: calc(var(--u) * 6); }
.sk-msi-5 .m-help-keys { position: absolute; left: calc(var(--u) * 18); bottom: calc(var(--u) * 10); padding-top: calc(var(--u) * 8); font-size: calc(var(--u) * 14); line-height: 1.36; }
.sk-msi-5 .gb-pop { width: calc(var(--u) * 260); border: 1px solid #7a1c1c; background: #0b0b0b; box-shadow: 0 0 calc(var(--u) * 24) rgba(0, 0, 0, .8); }
.sk-msi-5 .gb-pop-head { padding: calc(var(--u) * 6) calc(var(--u) * 12); background: linear-gradient(90deg, #4a1213, #1a0707); font-size: calc(var(--u) * 14); }
.sk-msi-5 .gb-pop-list { padding: calc(var(--u) * 6) 0; }
.sk-msi-5 .gb-pop-o { padding: 0 calc(var(--u) * 12); }
.sk-msi-5 .gb-pop-sel { background: #511619; }
.sk-msi-5 .gb-dlg { left: 50%; top: 62%; width: calc(var(--u) * 420); transform: translate(-50%, -50%); padding: 0 0 calc(var(--u) * 18); border: 1px solid #7a1c1c; background: #0b0b0b; }
.sk-msi-5 .gb-dlg-head { padding: calc(var(--u) * 8) calc(var(--u) * 14); background: linear-gradient(90deg, #4a1213, #1a0707); }
.sk-msi-5 .gb-dlg-head .gb-ph { width: calc(var(--u) * 140); }
.sk-msi-5 .gb-dlg-tph2 { width: calc(var(--u) * 240); margin: calc(var(--u) * 16) calc(var(--u) * 18) 0; }
.sk-msi-5 .gb-dlg-body { display: grid; gap: calc(var(--u) * 10); margin: calc(var(--u) * 14) calc(var(--u) * 18) 0; }
.sk-msi-5 .gb-dlg-btns { justify-content: center; gap: calc(var(--u) * 14); margin-top: calc(var(--u) * 22); }
.sk-msi-5 .gb-dlg-b { width: calc(var(--u) * 100); height: calc(var(--u) * 26); border: 1px solid #555; background: linear-gradient(to bottom, #333, #1a1a1a); }
.sk-msi-5 .gb-dlg-b.is-focus { background: #6a1b1d; border-color: #b04446; }
.sk-msi-5 .m-ez { position: absolute; left: calc(var(--u) * 10); right: calc(var(--u) * 10); top: calc(var(--u) * 256); bottom: calc(var(--u) * 10); border: 1px solid #3a1010; }
.sk-msi-5 .m-ez-t { height: calc(var(--u) * 22); padding-left: calc(var(--u) * 10); background: linear-gradient(90deg, #3a0c0d, transparent 40%); font-size: calc(var(--u) * 13); font-weight: 600; line-height: calc(var(--u) * 22); }
.sk-msi-5 .m-ez-menu { position: absolute; left: calc(var(--u) * 4); top: calc(var(--u) * 26); width: calc(var(--u) * 210); display: grid; }
.sk-msi-5 .m-ez-mi { height: calc(var(--u) * 54); padding-left: calc(var(--u) * 56); border-bottom: 1px solid #262626; font-size: calc(var(--u) * 14.5); line-height: calc(var(--u) * 54); }
.sk-msi-5 .m-ez-mi.is-on { box-shadow: inset 0 0 0 calc(var(--u) * 2) var(--m-red-d); background: #2a0d0e; }
.sk-msi-5 .m-ez-body { position: absolute; left: calc(var(--u) * 270); right: calc(var(--u) * 30); top: calc(var(--u) * 60); display: grid; gap: calc(var(--u) * 16); color: #bbb; }
.sk-msi-5 .m-ez-tiles { position: absolute; left: calc(var(--u) * 16); right: calc(var(--u) * 16); bottom: calc(var(--u) * 14); display: grid; grid-template-columns: 1fr 1.6fr 1.6fr; grid-template-rows: repeat(3, calc(var(--u) * 40)); grid-auto-flow: column; gap: calc(var(--u) * 16) calc(var(--u) * 24); }
.sk-msi-5 .m-ez-tile { display: flex; align-items: center; padding-left: calc(var(--u) * 58); border: 1px solid #3c3c3c; background: linear-gradient(to bottom, #2a2a2a, #161616); font-size: calc(var(--u) * 14); }
.sk-msi-5 .m-ez-ph { border: 1px solid #4a1414; background: linear-gradient(to bottom, #2a0d0e, #160707); }
/* 模式按钮贴着画布上沿：标注框上边收进画布里，不被裁掉 */
.sk-msi-5 .m-mode.is-target::after { inset: 2px calc(var(--u) * -5) calc(var(--u) * -5); }

/* 英文版的快速表：英文术语比中文长，表头与单元格允许换行、行高随内容（只在英文页生效；中文表格不变） */
html[lang="en-US"] .gb-quick-table tbody th,
html[lang="en-US"] .gb-quick-table td { white-space: normal; }
html[lang="en-US"] .gb-quick-table tr { height: auto; }
/* 英文版快速表里的英文术语（.gb-en 默认整段不换行，原意是中文句子里夹的英文名不被拆开）：英文页整句都是英文，
   在 768 这类表格列较窄的宽度会伸出单元格；允许在空格处换行（只在英文页生效） */
html[lang="en-US"] .gb-quick-table .gb-en { white-space: normal; }
/* 英文版的按键帽（Delete、F2 等）：字母比数字宽，收紧左右留白与间距，避免文字压出按键帽（只在英文页生效） */
html[lang="en-US"] .k-cap { padding: 0 calc(var(--u) * 12); }
html[lang="en-US"] .k-caps { gap: calc(var(--u) * 20); }