/* ============================================================================
   台式机功耗计算器 — 样式表
   风格：华硕 ROG 奥创（Armoury Crate）

   依据《01-设计系统-ROG奥创.md》（从华硕官网真实 UI 截图提取）。
   三段结构，改版时请保持：
     ① 设计令牌（:root 暗色 + html[data-theme="light"] 浅色覆盖）
     ② 组件
     ③ 响应式 + 打印（@media print 是导出 PDF 的唯一实现，不可删）

   ── 三条「反 AI 感」铁律（每次改动后自查）──────────────────────────────
     ① 一种强调色且极小面积：只有 ROG 红，总面积 < 3%，其余全是灰阶
     ② 不要渐变、不要发光、不要 emoji 当图标
     ③ 形态多样化：分组靠亮度与细分隔线，不是「每块都套同一个深色卡片」
   ========================================================================== */

/* ========================================================== ① 设计令牌 == */
:root {
  /* 内嵌截图提取遮罩，兼容直接双击 HTML 的 file 协议。 */
  --lightning-wordmark: url("data:image/png;base64,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");
  /* 内嵌截图提取遮罩，兼容直接双击 HTML 的 file 协议。 */
  --lightning-mark: url("data:image/png;base64,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");
  /* 背景：三级亮度，靠亮度差而不是描边来分区 */
  --bg:          #121212;   /* 主内容区 */
  --bg-soft:     #181818;   /* 次级凹陷区（输入框、代码块） */
  --bg-nav:      #0a0a0a;   /* 顶栏，最暗 */
  --surface:     #1a1a1a;   /* 浮起表面（下拉、抽屉、气泡） */
  --surface-2:   #202020;   /* 表面上的悬停态 */

  /* 描边：极低对比，只在需要时出现 */
  --line:        #2a2a2a;
  --line-soft:   #202020;

  /* 文本：四级 */
  --text:        #ffffff;
  --text-2:      #c8c8c8;
  --text-3:      #8a8a8a;
  /* 原值 #5a5a5a 在 #0a0a0a 上实测 2.87:1，而 .logo small / .unit /
     .ac-issues 这些 11px 正文都在用它。抬到 4.8:1，与 --text-3 仍留层次差。 */
  --text-4:      #7d7d7d;

  /* ROG 红：全局唯一强调色，克制使用 */
  --rog:         #ff0033;
  --rog-dim:     #c40028;
  --rog-glow:    rgba(255, 0, 51, .35);

  /* 状态色：只用于有语义的地方，不做装饰 */
  --ok:          #16a34a;
  --warn:        #e08600;
  --err:         #ff0033;   /* 危险 = 品牌色，合理 */

  /* 字号只允许这 6 档：11 辅助 / 12 标签 / 14 正文 / 15 卡片标题 / 20 分区标题 / hero */
  --fs-xs:   11px;
  --fs-sm:   12px;
  --fs-base: 14px;
  --fs-h:    15px;
  --fs-sec:  20px;
  --fs-hero: clamp(40px, 6vw, 56px);

  --radius:      2px;       /* 关键：奥创几乎不用大圆角 */
  --radius-lg:   4px;

  /* 斜切的尺寸档位。ROG 的切割语言只出现在「标记与指示条」上，
     不给容器切角 —— 对照 Armoury Crate 的真实界面，面板全是干净矩形。 */
  --cut:         9px;       /* 关键数值下方的斜切下划条 */
  --cut-bar:     4px;       /* 选中态的斜切短条（模式选择器 / 筛选按钮） */

  --mono: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", monospace;
  --sans: "Segoe UI", "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;

  --ease: cubic-bezier(.4, 0, .2, 1);
  --dur: 150ms;
  /* 参考澎湃 OS 的跟手感；这些曲线为网页自行调校。 */
  --motion-enter: cubic-bezier(.16, 1, .3, 1);
  --motion-exit: cubic-bezier(.4, 0, 1, 1);
  --motion-fast: cubic-bezier(.2, 0, .2, 1);
  --shadow-float: 0 8px 32px rgba(0, 0, 0, .6);
}

/* 浅色主题：变量名与暗色完全一致，仅换值。ROG 红压深以保证白底达标 */
html[data-theme="light"] {
  --bg:          #f5f5f5;
  --bg-soft:     #ffffff;
  --bg-nav:      #ffffff;
  --surface:     #ffffff;
  --surface-2:   #f0f0f0;

  --line:        #e0e0e0;
  --line-soft:   #ececec;

  --text:        #111111;
  --text-2:      #333333;
  --text-3:      #5c5c5c;
  /* 原值 #8a8a8a 在 #f5f5f5 上实测 3.45:1，抬到 4.6:1 */
  --text-4:      #6f6f6f;

  --rog:         #d40029;
  --rog-dim:     #a80020;
  --rog-glow:    rgba(212, 0, 41, .22);

  --ok:          #15803d;
  --warn:        #9a5b00;
  --err:         #c4001f;

  --shadow-float: 0 8px 32px rgba(0, 0, 0, .14);
}

/* ============================================================ ② 组件 === */

* { box-sizing: border-box; }

html, body { margin: 0; }

body {
  background: var(--bg);
  color: var(--text-2);
  font: var(--fs-base)/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--text-2); text-decoration: none; border-bottom: 1px solid var(--line); }
a:hover { color: var(--text); border-bottom-color: var(--text-3); }

:focus-visible { outline: 2px solid var(--rog); outline-offset: 2px; }

/* 图标：统一 16px 描边风格 */
svg { display: block; }
.ico { flex: 0 0 16px; color: var(--text-3); }
.ico svg { width: 16px; height: 16px; }

/* ------------------------------------------------------------- 布局 ---- */
.wrap { max-width: 1560px; margin: 0 auto; padding: 0 32px 80px; }

/* 左右分流：左列负责「填」，右列负责「看」 */
.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0 40px;
  align-items: start;
}

/* 关键：grid/flex 子项默认 min-width:auto，会被 <select> 里最长选项的固有宽度撑破，
   在窄屏造成整页横向溢出。必须显式归零。 */
.layout > * { min-width: 0; }
.card, .card-body, .field, .grid2 > *, .grid3 > * { min-width: 0; }
select { max-width: 100%; }

/* ------------------------------------------------------------- 顶栏 ----
   最暗的一层（--bg-nav），靠亮度差与主内容区分离。
   答案筹码挂在这里 —— 顶栏是 sticky 的，所以任何滚动位置都能看到推荐瓦数。 */
header.top {
  position: sticky; top: 0; z-index: 50;
  background: var(--bg-nav);
  border-bottom: 1px solid var(--line);
  padding: 10px 0;
  margin-bottom: 24px;
}
.top-inner {
  max-width: 1560px; margin: 0 auto; padding: 0 32px;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}

.logo { display: flex; align-items: center; gap: 11px; }

/* MSI LIGHTNING 截图提取标记，主题色通过 CSS mask 统一上色。 */
.logo .mark,
.logo .wordmark,
.modal-head .mark,
.modal-head .wordmark {
  background: var(--rog);
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}
.logo .mark {
  width: 22px; flex: 0 0 22px; aspect-ratio: 94 / 172;
  -webkit-mask-image: var(--lightning-mark);
          mask-image: var(--lightning-mark);
}
/* MSI LIGHTNING 几何字标；窄屏只保留标志和中文站名。 */
.logo .wordmark {
  width: 140px; flex: 0 0 140px; aspect-ratio: 412 / 62;
  -webkit-mask-image: var(--lightning-wordmark);
          mask-image: var(--lightning-wordmark);
}
.logo h1 {
  margin: 0; font-size: var(--fs-h); font-weight: 700; color: var(--text);
  letter-spacing: .01em; line-height: 1.2;
}
.logo small { display: block; font-size: var(--fs-xs); color: var(--text-4); }
/* 顶栏里品牌锁定版与产品名之间要有一道分隔，否则读成一串 */
.logo-text { margin-left: 4px; padding-left: 13px; border-left: 1px solid var(--line); }

.top-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* 答案筹码：顶栏里常驻的推荐瓦数（唯一允许发光的地方）。
   保持干净的矩形 —— 对照真实奥创界面，面板与筹码都不切角。 */
.answer-chip {
  display: inline-flex; align-items: baseline; gap: 8px;
  padding: 5px 12px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-left: 3px solid var(--rog);
  border-radius: var(--radius);
}
.answer-chip[hidden] { display: none; }
.answer-chip .ac-label { font-size: var(--fs-xs); color: var(--text-3); letter-spacing: .04em; }
.answer-chip .ac-value {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 18px; font-weight: 700; color: var(--text); letter-spacing: -.01em;
}
.answer-chip .ac-issues { font-size: var(--fs-xs); color: var(--text-4); }
.answer-chip .ac-issues.has-error { color: var(--err); }

/* ---------------------------------------------------------- 分区标记 ----
   Armoury Crate 里每个分区标题前都有一个小小的「三条斜杠」`///` 标记
   （Aura Sync 的 Basic Effects / Advanced Effects，Home 的 Systems Monitor /
   Devices / Operating Mode 都是它）。这是 ROG 界面里最强的视觉签名，
   所以这里严格照抄它的形态：三根等距细斜杠，纯 CSS 三个 linear-gradient 拼出。
   ⚠️ 是三条，不是两条 —— 两条会读成「快进符号 >>」，那是另一个语义。 */
.card > h2::before,
details.section-collapse > summary::before {
  content: "";
  display: inline-block; width: 14px; height: 14px; margin-right: 11px;
  flex: 0 0 14px; vertical-align: -2px;
  background:
    linear-gradient(115deg, transparent 4%, var(--rog) 4%, var(--rog) 20%, transparent 20%),
    linear-gradient(115deg, transparent 38%, var(--rog) 38%, var(--rog) 54%, transparent 54%),
    linear-gradient(115deg, transparent 72%, var(--rog) 72%, var(--rog) 88%, transparent 88%);
}

/* ------------------------------------------------------------- 分区 ----
   布局参考 MSI 电源计算器：**左侧窄栏放「图标 + 分组名」，右侧一大片放字段**。
   这样十几组配置排下来是一列整齐的分组名，扫一眼就知道要填哪几项；
   字段本身仍是「左标签 + 右控件」的数据行（这一条本来就是两家的共同做法）。

   分区之间靠「极细上边线」分隔，不给每块都套完整矩形。

   ⚠️ 这套三列栅格**只作用于配置列**（.col-config）。
   结果列用的也是 <section class="card">，如果不加限定，
   结果列会被一起塞进「176px | 1fr | 24px」三列里，内容被挤烂并横向溢出。
   三列： 分组名栏 | 字段/摘要 | 折叠键                                       */
.card {
  background: none; border: none;
  border-top: 1px solid var(--line);
  border-radius: 0; margin-bottom: 0; overflow: visible;
}
.col-config .card {
  display: grid;
  grid-template-columns: minmax(0, 176px) minmax(0, 1fr) 24px;
  column-gap: 18px;
  align-items: start;
  padding: 12px 0 13px;
}
.card > h2 {
  margin: 0; padding: 0;
  font-size: var(--fs-h); font-weight: 700; color: var(--text);
  letter-spacing: .01em; line-height: 1.35;
  border-bottom: none;
  background: none;
  /* /// + 图标 + 分组名 排在同一行（对照 MSI 的 [icon] CPU）——
     三者各占一行会把每个分区撑到近 60px 高，一屏看不到几组。 */
  display: flex; align-items: center; flex-wrap: wrap; gap: 0;
}
.col-config .card > h2 { grid-column: 1; grid-row: 1; }
/* 分组图标（由 js/ui.js 注入） */
.card > h2 .sec-ico {
  display: inline-flex; margin: 0 9px 0 0;
  color: var(--text-3);
}
.card > h2 .sec-ico svg { width: 19px; height: 19px; display: block; }
.col-config .card-body { grid-column: 2; grid-row: 1; padding: 0; }
.card-body.tight { padding: 0; }

/* 序号：不再是亮色实底方块（它出现 19 次，是全页最吵的重复元素），改为小号灰字 */
.card > h2 .idx {
  width: auto; height: auto; flex: 0 0 auto; display: inline;
  background: none; color: var(--text-4);
  font-family: var(--mono); font-size: var(--fs-sm); font-weight: 600;
  margin-right: 6px; box-shadow: none !important;
}
.card > h2 .hint {
  display: block; flex: 1 1 100%; margin: 5px 0 0;
  font-weight: 400; font-size: var(--fs-xs); color: var(--text-3); line-height: 1.55;
}
/* /// 标记与图标、分组名同一行 */
.card > h2::before { display: inline-block; margin: 0 8px 0 0; vertical-align: -2px; }

/* 已选摘要（折叠态显示，由 js/ui.js 注入到**分区**上，与字段同栏） */
.card-summary {
  grid-column: 2; grid-row: 1;
  display: none; font-size: var(--fs-sm); color: var(--text-2);
  font-weight: 600; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
  padding-top: 1px;
}
.card.is-collapsed > h2 .hint { display: none; }
.card.is-collapsed > .card-summary { display: block; }

/* 展开 / 收起的平滑高度过渡（只作用于配置列）。
   display:none 是没法做过渡的，所以这里用 grid-template-rows 从 0fr 到 1fr ——
   高度自然动画，且不需要事先知道内容有多高（由 js/ui.js 包的那层 .card-body-in 承载）。 */
.col-config .card > .card-body {
  display: grid; grid-template-rows: 1fr;
  transition: grid-template-rows 320ms var(--motion-enter), opacity 180ms var(--motion-fast);
}
.col-config .card > .card-body > .card-body-in { min-height: 0; overflow: hidden; }
.col-config .card.is-collapsed > .card-body {
  grid-template-rows: 0fr; opacity: 0; pointer-events: none;
  transition-duration: 220ms, 140ms;
}

/* 折叠开关 */
.card-toggle {
  grid-column: 3; grid-row: 1;
  width: 24px; height: 24px; padding: 0; margin: 0;
  display: grid; place-items: center; cursor: pointer;
  background: none; border: 1px solid var(--line);
  border-radius: var(--radius); color: var(--text-3);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease),
              background-color var(--dur) var(--ease);
}
.card-toggle:hover { border-color: var(--text-4); color: var(--text); }
.card-toggle::before { content: '▾'; font-size: 10px; display: block; transition: transform var(--dur) var(--ease); }
.card.is-collapsed .card-toggle::before { transform: rotate(-90deg); }
/* 收起状态下整行可点，给一点悬停反馈 */
.card.is-collapsed { cursor: pointer; }
.card.is-collapsed:hover { background: var(--bg-soft); }
.card.is-collapsed:hover > h2 { color: var(--text); }

/* 引导卡不是配置分区，保持整幅布局（它有自己的关闭键，没有折叠键） */
.card.guide {
  display: block; padding: 14px 0 20px;
}
.card.guide > h2 {
  padding: 0 0 10px; border-bottom: 1px solid var(--line-soft);
  display: flex; align-items: center;
}
.card.guide > h2::before { display: inline-block; margin: 0 11px 0 0; }
.card.guide > .card-body { padding: 14px 0 0; }

/* 当前卡：只做「左侧红色指示条」，不做整块变色 */
.col-config .card { border-left: 2px solid transparent; padding-left: 14px; }
.col-config .card.is-active { border-left-color: var(--rog); }

.sticky-col { position: sticky; top: 72px; }

/* ---------------------------------------------------------------- 斜切 ----
   ROG 的切割语言来自机箱与显卡外壳的 45° 切角，但在**软件界面**里，
   它只以两种形态出现（对照 Armoury Crate 真实截图）：
     · 分区标题前的三条斜杠 `///`（见上面的分区标记）
     · 选中项底部的斜切短条（模式选择器 / 筛选项 / 关键数值）
   刻意不给面板与容器切角：真实界面里它们全是干净矩形，
   给每个容器都切一刀会变成「到处贴同一个花纹」的装饰癖 —— 那正是 AI 味的主要来源。

   两条硬约束：
     · 斜切只切形状，不切文字。全站没有任何 transform: skew 落在文本上。
     · 不对可聚焦元素本身用 clip-path —— 那会连 :focus-visible 的焦点环一起裁掉，
       键盘用户就看不到焦点了。斜切只出现在伪元素装饰条上。 */

/* ------------------------------------------------------------- 按钮 ---- */
button, .btn {
  padding: 7px 14px; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--surface-2); color: var(--text-2);
  font-size: var(--fs-sm); font-family: inherit; font-weight: 600;
  cursor: pointer; white-space: nowrap;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease),
              background-color var(--dur) var(--ease);
}
button:hover, .btn:hover { color: var(--text); border-color: var(--text-4); }
button.primary { background: var(--rog); border-color: var(--rog); color: #fff; }
button.primary:hover { background: var(--rog-dim); border-color: var(--rog-dim); color: #fff; }
button.ghost { background: none; }
button:disabled { opacity: .4; cursor: not-allowed; }
button .ico { display: inline-block; vertical-align: -2px; }

/* ------------------------------------------------------- 主题切换按钮 ----
   顶栏里唯一的「设置类」控件，需要一眼看出它是个可点的按钮，
   所以给它**实描边 + 高亮文字**，而不是像其他 ghost 按钮那样淡到看不见。
   图标用 ROG 红点亮，翻面时文字跟着说明「切到哪一边」。 */
#btnTheme {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--text-4);
  background: var(--surface-2);
  color: var(--text);
  padding: 6px 12px;
}
#btnTheme .ico { color: var(--rog); flex: 0 0 20px; width: 20px; height: 20px; }
#btnTheme .theme-label { font-weight: 700; letter-spacing: .02em; }
#btnTheme:hover { border-color: var(--rog); }
#btnTheme:active { background: var(--bg-soft); }

/* --------------------------------------------------- 设置行（表单）----
   奥创的输入控件是「左标签 + 右控件 + 行间细线」的 row 形态，
   而不是 label 在上、input 在下的堆叠式表单。 */
.field {
  display: flex; align-items: center; gap: 16px;
  min-height: 52px; padding: 9px 0;
  border-top: 1px solid var(--line-soft);
}
.field:first-child { border-top: none; }
.field > label {
  flex: 1 1 auto; min-width: 0; margin: 0;
  font-size: var(--fs-base); font-weight: 400; color: var(--text-2);
}
.field > label .unit { display: block; font-size: var(--fs-xs); color: var(--text-4); font-weight: 400; }
.field > select,
.field > input[type="text"],
.field > input[type="number"] { flex: 0 0 220px; width: 220px; }

/* 含分段按钮 / 复选网格 / 多控件的字段不适合 row 形态，退回纵向 */
.field:has(> .seg),
.field:has(> .chk-grid),
.field:has(> div) { display: block; }
.field:has(> .seg) > label,
.field:has(> .chk-grid) > label,
.field:has(> div) > label { margin-bottom: 8px; }

select, input[type="text"], input[type="number"], input[type="search"] {
  width: 100%; padding: 7px 10px;
  background: var(--bg-soft); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--radius);
  font-size: var(--fs-sm); font-family: var(--mono);
  /* 不写 outline: none —— 那会压制键盘焦点。焦点样式统一由全局
     :focus-visible 提供（2px ROG 红描边 + 2px 偏移）。 */
  transition: border-color var(--dur) var(--ease);
}
select:focus, input:focus { border-color: var(--rog); }
select:disabled { opacity: .45; cursor: not-allowed; }

/* 原生下拉箭头在暗色下很难看，换成内联 SVG 灰箭头 */
select {
  appearance: none; -webkit-appearance: none; padding-right: 26px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%238a8a8a' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 9px center; background-size: 10px 7px;
}
select option, select optgroup { background: var(--bg-soft); color: var(--text); }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 20px; }

/* --------------------------------------------------------- 开关 -------- */
.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; font-size: var(--fs-sm); color: var(--text-3); }
.switch input { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; }
.switch .track {
  width: 38px; height: 20px; border-radius: 10px; background: var(--surface-2);
  border: 1px solid var(--line); position: relative;
  transition: background-color var(--dur) var(--ease); flex: 0 0 38px;
}
.switch .track::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 14px; height: 14px; border-radius: 50%; background: var(--text-4);
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.switch input:checked + .track { background: var(--rog); border-color: var(--rog); }
.switch input:checked + .track::after { transform: translateX(18px); background: #fff; }
.switch input:focus-visible + .track { outline: 2px solid var(--rog); outline-offset: 2px; }

/* --------------------------------------------- 模式选择器（使用场景）---
   图标 + 文字 + 选中项底部红色短条。奥创最标志性的组件之一。 */
.scenarios { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.scenario {
  background: none; border: none; border-bottom: 3px solid transparent;
  border-radius: 0; padding: 12px 8px 11px; position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  color: var(--text-4); cursor: pointer; text-align: center;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.scenario:hover { color: var(--text-2); border-bottom-color: var(--line); }
.scenario .si, .scenario .si svg { width: 22px; height: 22px; }
.scenario b { font-size: var(--fs-sm); font-weight: 600; color: inherit; }
.scenario span { font-size: var(--fs-xs); color: var(--text-3); font-family: var(--mono); }
/* 选中态 = 极淡同色底 + 底部斜切短条。
   这正是奥创 Home 页「Operating Mode」那一排按钮的做法（Quiet/Standard/
   Turbo/Full Speed/Custom，选中的 Turbo 就是浅底 + 红下边）。 */
.scenario.on {
  color: var(--text); border-bottom-color: transparent;
  background: rgba(255, 0, 51, .06);
}
.scenario.on span { color: var(--text-3); }
.scenario.on::after {
  content: ''; position: absolute; left: 12%; right: 12%; bottom: 0; height: 3px;
  background: var(--rog);
  clip-path: polygon(var(--cut-bar) 0, 100% 0,
                     calc(100% - var(--cut-bar)) 100%, 0 100%);
}

.seg { display: flex; gap: 6px; flex-wrap: wrap; }
.seg button { flex: 0 0 auto; min-width: 72px; position: relative; }
.seg button.on { border-color: var(--rog); color: var(--text); background: rgba(255, 0, 51, .06); }
/* 选中态 = 极淡同色底 + 红色描边 + 底部斜切短条。
   对照奥创真实界面的标签页：选中项就是一层很浅的底 + 一根红色下边。
   ⚠️ 只加伪元素、不对 button 本身用 clip-path ——
   那会连 :focus-visible 的焦点环一起裁掉，键盘用户就看不到焦点了。 */
.seg button.on::after {
  content: ''; position: absolute; left: 5px; right: 5px; bottom: -1px; height: 2px;
  background: var(--rog);
  clip-path: polygon(var(--cut-bar) 0, 100% 0,
                     calc(100% - var(--cut-bar)) 100%, 0 100%);
}

/* --------------------------------------------------- 关键数值块 --------
   #recoBig 是全页唯一的大字。
   ⚠️ 中文绝不能进 .big —— mono 字体栈里没有中文字体，
      空态时会出现「中文雅黑 + 数字 Consolas」同段两种字形。 */
.reco {
  padding: 20px 22px 24px;
  position: relative;
  /* 参考 MSI 的右栏：把「推荐多少瓦」放进一个独立的填充面板里，
     数字才是这一列真正的落点，而不是浮在一片空白上。
     ROG 的做法是在面板顶部压一根红条，而不是给整块铺红底。 */
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-top: 2px solid var(--rog);
}
.reco .reco-label {
  font-size: var(--fs-xs); color: var(--text-3);
  letter-spacing: .12em; text-transform: uppercase; margin-bottom: 10px;
}
.reco .big {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: var(--fs-hero); font-weight: 700; color: var(--text);
  line-height: 1; letter-spacing: -.02em;
  display: inline-block; position: relative;
}
/* 数字左下方 4px 红色斜切条（奥创的红色指示条 + ROG 的切割语言） */
.reco .big::after {
  content: ''; position: absolute; left: 0; bottom: -9px;
  width: 48px; height: 4px; background: var(--rog);
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--cut)) 100%, 0 100%);
}
.reco .big span { font-size: 20px; font-weight: 400; color: var(--text-3); margin-left: 6px; }
.reco .sub { font-size: var(--fs-base); color: var(--text-2); margin-top: 18px; }
.reco .sub b { color: var(--text); font-weight: 700; }
.reco .sub span { color: var(--text-3) !important; opacity: 1 !important; font-size: var(--fs-sm); }
.reco .meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }

/* --------------------------------------------------------- 数据行 ------
   密集数据用「标签 ······· 右对齐数值」的行式列表，不是一个数据一张卡。 */
.hero {
  display: block; background: none; border: none; border-radius: 0;
  margin-bottom: 0; padding: 2px 0 0;
}
.hero > div {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 9px 0; background: none;
  border-bottom: 1px solid var(--line-soft);
}
.hero > div:last-child { border-bottom: none; }
.hero .k { flex: 0 0 auto; order: 1; font-size: var(--fs-sm); color: var(--text-3); margin: 0; }
.hero > div::after {
  content: ''; flex: 1 1 auto; order: 2; min-width: 20px;
  border-bottom: 1px dotted var(--line); transform: translateY(-3px);
}
.hero .v {
  flex: 0 0 auto; order: 3;
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: var(--fs-base); font-weight: 700; color: var(--text); line-height: 1.2;
}
.hero .v small { font-size: var(--fs-sm); font-weight: 400; color: var(--text-3); }
.hero .v.accent, .hero .v.blue, .hero .v.warn { color: var(--text); }
/* 说明文字必须换行到第二行，且用 --text-3（--text-4 对比度不足 4.5:1） */
.hero .u {
  flex: 1 1 100%; order: 4; min-width: 0;
  font-size: var(--fs-xs); color: var(--text-3); margin: 2px 0 0; line-height: 1.6;
}

/* ------------------------------------------------------------- 标签 ---- */
.tag {
  font-size: var(--fs-xs); padding: 2px 8px; border-radius: var(--radius);
  border: 1px solid var(--line); color: var(--text-3); background: none;
}
.tag.on { border-color: var(--rog); color: var(--text); }
.tag.blue, .tag.warn { border-color: var(--line); color: var(--text-3); }

/* --------------------------------------------------------- 三档推荐 --- */
.psu-picks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 24px; }
.psu-pick { padding: 12px 0 14px; border-top: 1px solid var(--line-soft); background: none; border-radius: 0; }
.psu-pick:first-child { border-top: none; }
.psu-pick .role {
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-3);
}
.psu-pick .nm { font-size: var(--fs-base); font-weight: 600; color: var(--text); margin: 6px 0 4px; }
.psu-pick .w {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 22px; font-weight: 700; color: var(--text); letter-spacing: -.01em;
}
.psu-pick .sp { font-size: var(--fs-xs); color: var(--text-3); margin-top: 4px; }
.psu-pick .pr { font-family: var(--mono); font-size: var(--fs-sm); color: var(--text-3); margin-top: 6px; }

/* --------------------------------------------------------- 风险提示 ---
   左侧 3px 色条 + 极淡同色底。红色只用于错误，警告走琥珀。 */
.issue {
  display: flex; gap: 10px; padding: 10px 12px;
  border-radius: var(--radius); border: 1px solid var(--line);
  border-left: 3px solid var(--text-4);
  background: none; margin-bottom: 6px; font-size: var(--fs-base);
}
.issue:last-child { margin-bottom: 0; }
.issue .ico { margin-top: 2px; }
.issue b { display: block; color: var(--text); font-weight: 600; margin-bottom: 3px; }
.issue .d { color: var(--text-3); font-size: var(--fs-sm); }
.issue .f { color: var(--text-2); font-size: var(--fs-sm); margin-top: 5px; }
.issue.error { border-left-color: var(--err); background: rgba(255, 0, 51, .06); }
.issue.error .ico { color: var(--err); }
.issue.warn { border-left-color: var(--warn); background: rgba(224, 134, 0, .06); }
.issue.warn .ico { color: var(--warn); }
.issue.info .ico { color: var(--text-4); }
.issue.ok { border-left-color: var(--ok); }
.issue.ok .ico { color: var(--ok); }

/* --------------------------------------------------------- 明细表 ----- */
/* 窄屏必须能横向滚动，否则会裁掉瓦数列且无法触达 */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.detail { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
table.detail th {
  text-align: left; padding: 8px 10px; font-size: var(--fs-xs); color: var(--text-4);
  font-weight: 600; border-bottom: 1px solid var(--line); white-space: nowrap;
}
table.detail td { padding: 8px 10px; border-bottom: 1px solid var(--line-soft); vertical-align: top; color: var(--text-2); }
table.detail tr.hl .nm { color: var(--text); font-weight: 600; }
table.detail .nm { font-weight: 600; color: var(--text); }
table.detail .dt { color: var(--text-3); font-size: var(--fs-xs); }
table.detail .wt {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-weight: 600; text-align: right; white-space: nowrap; color: var(--text);
}
table.detail tr.sum td { border-top: 1px solid var(--line); border-bottom: none; font-weight: 600; padding-top: 11px; }
.grp { font-size: var(--fs-xs); font-weight: 600; color: var(--text-3); letter-spacing: .06em; }

/* --------------------------------------------------------- 置信度 ----- */
.conf {
  display: inline-block; font-size: 10px; padding: 1px 5px; border-radius: var(--radius);
  font-family: var(--mono); vertical-align: middle; margin-left: 5px;
  border: 1px solid currentColor; color: var(--text-4);
}
.conf.official { color: var(--ok); }
.conf.review { color: var(--text-3); }
.conf.leak { color: var(--err); }
.conf.estimate { color: var(--warn); }

/* ------------------------------------------------- 存储行 / 复选 ----- */
.storage-row { display: grid; grid-template-columns: 1fr 74px 34px; gap: 8px; margin-bottom: 8px; align-items: center; }
.storage-row .del {
  min-height: 34px; padding: 0; display: grid; place-items: center;
  color: var(--text-4); border: 1px solid var(--line); border-radius: var(--radius);
  background: none; font-size: var(--fs-base);
}
.storage-row .del:hover { color: var(--err); border-color: var(--err); }

.chk-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 20px; }
.chk {
  display: flex; align-items: center; gap: 9px; font-size: var(--fs-sm);
  padding: 8px 0; border: none; border-bottom: 1px solid var(--line-soft);
  border-radius: 0; background: none;
}
.chk input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--rog); flex: 0 0 16px; }
.chk input[type="number"] { width: 54px; flex: 0 0 54px; padding: 3px 6px; font-size: var(--fs-sm); }
.chk span { color: var(--text-3); flex: 1; }

/* --------------------------------------------------- 说明块（可收纳）-- */
.note {
  font-size: var(--fs-sm); color: var(--text-3); line-height: 1.7;
  padding: 8px 0 8px 12px; background: none; border-radius: 0;
  border-left: 1px solid var(--line);
}
.note.warn { border-left-color: var(--warn); color: var(--text-3); }
.note.accent { border-left-color: var(--rog); color: var(--text-3); }
.note b { color: var(--text-2); }

.note.note-collapsible {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; cursor: pointer; position: relative; padding-right: 52px;
}
.note.note-collapsible::after {
  content: '展开'; position: absolute; right: 0; bottom: 8px;
  font-size: var(--fs-xs); color: var(--text-3);
}
.note.note-collapsible.open { -webkit-line-clamp: unset; display: block; overflow: visible; padding-right: 12px; }
.note.note-collapsible.open::after { display: none; }

/* --------------------------------------------------- 数据说明（折叠）-- */
.banner {
  border: 1px solid var(--line); border-left: 3px solid var(--warn);
  border-radius: var(--radius); background: none; margin-bottom: 20px;
  overflow: hidden;
}
.banner > summary {
  cursor: pointer; list-style: none; padding: 9px 14px;
  font-size: var(--fs-sm); color: var(--text-3);
  display: flex; align-items: center; gap: 8px;
}
.banner > summary::-webkit-details-marker { display: none; }
.banner > summary::after { content: '依据与局限'; margin-left: auto; color: var(--text-3); font-size: var(--fs-xs); }
.banner[open] > summary::after { content: '收起'; }
.banner .banner-body {
  padding: 10px 14px 13px; font-size: var(--fs-xs); line-height: 1.8;
  color: var(--text-3); border-top: 1px solid var(--line-soft);
}

/* ------------------------------------------------------------- 引导 ---- */
.guide-steps {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  margin: 0 0 14px; padding: 0; list-style: none;
}
.guide-steps li {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  text-align: center; padding: 14px 8px;
  border: none; border-right: 1px solid var(--line-soft);
  border-radius: 0; background: none;
  font-size: var(--fs-xs); color: var(--text-3);
}
.guide-steps li:last-child { border-right: none; }
.guide-steps li .gi { color: var(--text-3); }
.guide-steps li .gi svg { width: 20px; height: 20px; }
.guide-steps li b { font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); }

.guide-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }

details.glossary { border-top: 1px solid var(--line-soft); padding-top: 10px; margin-top: 12px; }
details.glossary > summary {
  cursor: pointer; font-size: var(--fs-sm); font-weight: 600; color: var(--text-3);
  padding: 2px 0; list-style: none;
}
details.glossary > summary::-webkit-details-marker { display: none; }
details.glossary > summary::before { content: '▸ '; }
details.glossary[open] > summary::before { content: '▾ '; }
details.glossary dl { margin: 12px 0 0; font-size: var(--fs-sm); line-height: 1.75; }
details.glossary dt { font-weight: 600; color: var(--text); margin-top: 10px; font-size: var(--fs-sm); }
details.glossary dt:first-child { margin-top: 0; }
details.glossary dd { margin: 3px 0 0; color: var(--text-3); }

/* --------------------------------------------------- 页面底部折叠区 -- */
details.section-collapse { margin-top: 20px; border-top: 1px solid var(--line); }
details.section-collapse > summary {
  cursor: pointer; list-style: none; padding: 14px 0;
  border: none; border-radius: 0; background: none;
  font-size: var(--fs-h); font-weight: 700; color: var(--text);
  display: flex; align-items: center; gap: 0;
}
details.section-collapse > summary::-webkit-details-marker { display: none; }
details.section-collapse > summary .hint {
  margin-left: auto; font-weight: 400; font-size: var(--fs-xs); color: var(--text-3);
}

/* ------------------------------------------------- 来源 / kv / 其他 -- */
.src-list { list-style: none; margin: 0; padding: 0; font-size: var(--fs-sm); }
.src-list li { padding: 7px 0; border-bottom: 1px solid var(--line-soft); color: var(--text-3); }
.src-list li:last-child { border-bottom: none; }

.kv { display: grid; grid-template-columns: auto 1fr; gap: 5px 14px; font-size: var(--fs-sm); }
.kv dt { color: var(--text-3); }
.kv dd { margin: 0; font-family: var(--mono); color: var(--text-2); }

/* Toast：不再是 99px 胶囊 + 满饱和实底 + 大阴影 */
.toast {
  position: fixed; bottom: 24px; left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: var(--surface); color: var(--text);
  border: 1px solid var(--line); border-left: 3px solid var(--rog);
  border-radius: var(--radius); padding: 10px 16px;
  font-size: var(--fs-sm); font-weight: 600;
  box-shadow: var(--shadow-float);
  opacity: 0; transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  z-index: 200; pointer-events: none;
}
.toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }
.toast.err { border-left-color: var(--err); }

.empty { padding: 22px 0; color: var(--text-3); font-size: var(--fs-sm); }

/* ------------------------------------------------------------- 弹窗 ----
   数据声明弹窗。打开页面时自动出现，顶栏「数据声明」按钮可随时重开。
   干净矩形 + 浮层阴影。对照真实奥创界面，面板一律不切角 ——
   斜切只留给「分区标记」和「选中指示条」两处。 */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(0, 0, 0, .74);
  backdrop-filter: blur(8px);
  display: grid; place-items: center;
  padding: 20px; overflow-y: auto;
}
.modal-backdrop[hidden] { display: none; }
body.modal-open { overflow: hidden; }

.modal-card {
  width: min(680px, 100%);
  max-height: calc(100dvh - 40px);
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-float);
}

.modal-head {
  display: flex; align-items: center; gap: 12px;
  padding: 15px 18px; border-bottom: 1px solid var(--line);
  flex: 0 0 auto;
}
/* 弹窗头部使用 MSI LIGHTNING 横向组合，与顶栏共用 PNG 素材。 */

.modal-head .mark {
  width: 22px; flex: 0 0 22px; aspect-ratio: 94 / 172;
  -webkit-mask: var(--lightning-mark) center / contain no-repeat;
          mask: var(--lightning-mark) center / contain no-repeat;
}
.modal-head .wordmark {
  width: 76px; flex: 0 0 76px; aspect-ratio: 412 / 62;
  -webkit-mask: var(--lightning-wordmark) center / contain no-repeat;
          mask: var(--lightning-wordmark) center / contain no-repeat;
}
/* 字标与后面的中文标题之间留出区分度 */
.modal-head h2 {
  margin: 0 0 0 6px; font-size: var(--fs-sec); font-weight: 700;
  color: var(--text); letter-spacing: .01em;
}
.modal-x {
  margin-left: auto; flex: 0 0 auto;
  width: 30px; height: 30px; padding: 0;
  display: grid; place-items: center; min-height: 0;
  background: none; border: 1px solid var(--line);
  border-radius: var(--radius); color: var(--text-3); cursor: pointer;
}
.modal-x:hover { color: var(--text); border-color: var(--text-4); }
.modal-x svg { width: 14px; height: 14px; }

.modal-body { padding: 2px 18px 6px; overflow-y: auto; flex: 1 1 auto; }
.modal-body section { padding: 14px 0; border-bottom: 1px solid var(--line-soft); }
.modal-body section:last-child { border-bottom: none; }
/* 小标题不加任何装饰条。
   初版给五个小标题各加了一根斜切短棒，结果是同一枚花纹在弹窗里重复五遍 ——
   这种「到处贴同一个 motif」正是 AI 味的典型来源。真实奥创界面里
   分区标记只在模块级标题出现一次，小节标题就是干净的一行粗体。 */
.modal-body h3 {
  margin: 0 0 8px; font-size: var(--fs-base); font-weight: 700; color: var(--text);
}
.modal-body p { margin: 0; font-size: var(--fs-base); line-height: 1.8; color: var(--text-3); }
.modal-body p b { color: var(--text-2); }
.modal-body .note { margin: 0; }
.modal-body .src-list { margin-top: 2px; }

.modal-foot {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 13px 18px; border-top: 1px solid var(--line); flex: 0 0 auto;
  background: var(--bg-soft);
}
.modal-foot .chk {
  flex: 1 1 auto; border-bottom: none; padding: 0; min-height: 0; margin: 0;
}
.modal-foot button.primary { flex: 0 0 auto; }

/* MSI-inspired hierarchy: quiet component rows and one clear result. */
.page-intro { padding: 30px 0 40px; }
.page-intro .eyebrow { margin: 0 0 10px; color: var(--text-3); font-size: 11px; letter-spacing: .16em; }
.page-intro h2 { margin: 0 0 10px; font-size: clamp(25px, 3vw, 36px); line-height: 1.3; font-weight: 600; color: var(--text); }
.page-intro > p:last-child { margin: 0; color: var(--text-3); }
.advanced-options { border-top: 1px solid var(--line-soft); margin-top: 14px; }
.advanced-options > summary { cursor: pointer; color: var(--text-3); font-size: 12px; padding: 12px 0; }
.advanced-options > summary:hover { color: var(--text); }
.advanced-options > div { padding: 4px 0 10px; }
.modal-lead { margin: 6px 0 18px !important; color: var(--text) !important; font-size: 18px !important; font-weight: 600; }
.modal-body .usage-points { list-style: none; padding: 0; counter-reset: notice; margin-bottom: 22px; }
.usage-points li { counter-increment: notice; display: flex; align-items: baseline; gap: 12px; padding: 7px 0; }
.usage-points li::before { content: '0' counter(notice); color: var(--text-3); font: 11px var(--mono); }
.modal-body .result-explain { border-top: 1px solid var(--line); }
.modal-body .result-explain > summary { padding: 14px 0; color: var(--text-2); }
.modal-body .result-explain p { margin-bottom: 12px; }
.modal-backdrop { opacity: 1; transition: opacity 160ms var(--ease); }
.modal-backdrop.is-closing { opacity: 0; }

/* ------------------------------------------------------------- 滚动条 - */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--line); }
::-webkit-scrollbar-thumb:hover { background: var(--text-4); }

/* ================================================== ③ 响应式 与 打印 == */

.mobile-bar { display: none; }

@media (max-width: 1180px) {
  .layout { grid-template-columns: 1fr; }
  .sticky-col { position: static; }
}

@media (max-width: 780px) {
  .psu-picks { grid-template-columns: 1fr; }
  .psu-pick:first-child { border-top: 1px solid var(--line-soft); }
}

@media (max-width: 640px) {
  .wrap, .top-inner { padding-left: 16px; padding-right: 16px; }
  .grid3, .grid2, .chk-grid { grid-template-columns: 1fr; }
  .scenarios { grid-template-columns: repeat(2, 1fr); }
  .scenario:nth-child(2) { border-right: none; }
  .guide-steps { grid-template-columns: 1fr; }
  .guide-steps li { flex-direction: row; text-align: left; border-right: none; border-bottom: 1px solid var(--line-soft); }
  .guide-steps li:last-child { border-bottom: none; }
  .top-actions { width: 100%; margin-left: 0; }
  /* 窄屏只留图形本体：140px 的字标会把产品名挤到换行，
     而顶栏里真正需要被读到的是「这是什么工具」。 */
  .logo .brand-lockup { display: none; }
  .logo-text { padding-left: 11px; }

  /* 分区从「左栏分组名 + 右栏字段」改回上下堆叠：
     152px 的分组名栏在 390px 屏上会把字段压到没法用。
     图标与 /// 回到标题行内横排。 */
  .col-config .card {
    grid-template-columns: minmax(0, 1fr) 28px;
    column-gap: 14px; row-gap: 9px;
  }
  .col-config .card > h2 { grid-column: 1; grid-row: 1; }
  .card > h2::before { display: inline-block; margin: 0 9px 0 0; vertical-align: -2px; }
  .card > h2 .sec-ico { display: inline-flex; margin: 0 8px 0 0; }
  .card > h2 .sec-ico svg { width: 18px; height: 18px; }
  .card > h2 .hint { display: none; }
  .col-config .card > .card-summary { grid-column: 1 / 3; grid-row: 2; padding-top: 0; }
  .col-config .card > .card-body { grid-column: 1 / 3; grid-row: 2; }
  .col-config .card > .card-toggle { grid-column: 2; grid-row: 1; }

  /* 触控目标 ≥44px */
  button, .btn, select, input[type="text"], input[type="number"], input[type="search"] { min-height: 44px; }
  .card-toggle { width: 32px; height: 32px; }
  .storage-row { grid-template-columns: 1fr 68px 44px; }
  .storage-row .del { min-height: 44px; }
  .chk input[type="checkbox"] { width: 20px; height: 20px; flex: 0 0 20px; }
  .chk { padding: 11px 0; }
  .field { min-height: 56px; }
  .field > select, .field > input[type="text"], .field > input[type="number"] { flex: 0 0 170px; width: 170px; }

  /* 窄屏结果条：常驻底部，拇指可达 */
  .sticky-col { padding-bottom: 62px; }
  .mobile-bar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    align-items: baseline; gap: 10px; padding: 11px 16px;
    background: var(--bg-nav);
    border-top: 2px solid var(--rog);
  }
  .mobile-bar .mb-label { font-size: var(--fs-xs); color: var(--text-3); }
  .mobile-bar .mb-value {
    font-family: var(--mono); font-variant-numeric: tabular-nums;
    font-size: 22px; font-weight: 700; color: var(--text);
    margin-left: auto; letter-spacing: -.02em;
  }
  .mobile-bar .mb-value span { font-size: var(--fs-sm); font-weight: 400; color: var(--text-3); }

  /* 窄屏把声明弹窗做成整屏抽屉：内容多，居中卡片会挤成一条 */
  .modal-backdrop { padding: 0; }
  .modal-card {
    width: 100%; max-height: 100dvh; height: 100dvh;
    border: none;
  }
  .modal-body { padding: 2px 16px 6px; }
  .modal-head, .modal-foot { padding-left: 16px; padding-right: 16px; }
  .modal-foot { padding-bottom: max(13px, env(safe-area-inset-bottom, 0px)); }
  .modal-foot button.primary { flex: 1 1 100%; }
}

@media (max-width: 420px) {
  .wrap, .top-inner { padding-left: 12px; padding-right: 12px; }
  .card-body { padding: 12px 0 16px; }
  .logo small { display: none; }
}

/* 启动专用：单一小焦点，有限时长；红色预算来自合并弹窗的重复背景声明。 */
.psu-ui-initializing .card-body { transition: none !important; }
.psu-boot {
  display: none; position: fixed; inset: 0; z-index: 10000;
  align-items: center; justify-content: center;
  background: #000; color: var(--rog);
  touch-action: none;
}
html.psu-boot-pending .psu-boot { display: flex; }
/* 跳过提示：纯视觉。遮罩恒为黑底，与站点主题无关，所以这里用绝对色而不是主题 token。
   动作本身是「点任意位置 / 按任意键」，由 js/ui.js 的捕获监听实现。 */
.psu-boot-skip {
  position: absolute; right: max(24px, env(safe-area-inset-right, 0px)); bottom: max(20px, env(safe-area-inset-bottom, 0px));
  font-size: var(--fs-xs); letter-spacing: .08em;
  color: rgba(255, 255, 255, .42);
}
/* 窄屏顶栏位置紧张，「重播开场」让位（键盘用户在宽屏可用；窄屏仍可点 logo） */
@media (max-width: 640px) { #btnReplayIntro { display: none; } }
/* 没有 JS 时：整张配置/结果区与顶栏按钮都是死的（下拉没有选项、
   按钮点了没反应、计数是「—」），与其让人以为页面坏了，不如收起它们，
   只留 <noscript> 的说明。类名由 <head> 最前面的内联脚本摘掉。 */
.no-js .layout, .no-js .top-actions { display: none; }
html.psu-boot-active, html.psu-boot-active body { overflow: hidden; }
html.psu-boot-pending body > :not(.psu-boot):not(script):not(noscript) { opacity: 0; }
/* 启动动画已经从 DOM/CSS 版改成 Canvas 版（js/boot-animation.js），
   原来那套靠 .psu-boot-focus / -mark / -half / -line / -ticks 拼出来的
   分镜连同它的 6 个 keyframes 一并删除。这里只留 Canvas 需要的外框。 */
/* 卡片逐个弹出分两步：psu-boot-hold 先把它们压成不可见并排好各自的
   --psu-boot-delay，psu-boot-fill 一到就依次播放 psu-content-in。
   动画的填充状态会盖过 hold 的 opacity，所以两只类名同时挂着也不会打架。 */
.psu-boot-hold .psu-boot-item { opacity: 0; }
.psu-boot-fill .psu-boot-item { animation: psu-content-in .36s var(--ease) var(--psu-boot-delay, 0ms) both; }
@keyframes psu-content-in {
  from { opacity: 0; transform: translate(-3px, 4px); }
  to { opacity: 1; transform: translate(0, 0); }
}

/* 局部回弹不改变控件尺寸或文档布局；JS 从当前帧接续，CSS 保留降级路径。 */
button, .btn {
  transition: transform 320ms var(--motion-enter), opacity 180ms var(--motion-fast),
    background-color 180ms var(--motion-fast), border-color 180ms var(--motion-fast), color 180ms var(--motion-fast);
}
html:not(.psu-motion-ready) button:not(:disabled):active,
html:not(.psu-motion-ready) .btn:not([aria-disabled="true"]):active {
  transform: scale(.975); transition-duration: 80ms;
}
#btnTheme .ico { transition: transform 380ms var(--motion-enter); }
html[data-theme="light"] #btnTheme .ico { transform: rotate(180deg); }
.switch .track::after { transition: transform 320ms var(--motion-enter), background-color 180ms var(--motion-fast); }
.col-config .card > .card-body > .card-body-in {
  transform: translateY(0); transition: transform 320ms var(--motion-enter);
}
.col-config .card.is-collapsed > .card-body > .card-body-in { transform: translateY(-6px); }
html:not(.psu-boot-active) details[open] > :not(summary),
.modal-backdrop:not([hidden]) > .modal-card { animation: psu-ui-enter .32s var(--motion-enter) both; }
.modal-backdrop.is-closing > .modal-card { animation: psu-ui-exit .18s var(--motion-exit) both; }
html.psu-motion-ready details[open] > :not(summary),
html.psu-motion-ready .modal-backdrop > .modal-card { animation: none; }
.psu-ui-feedback { animation: psu-ui-feedback .18s var(--ease) both; }
@keyframes psu-ui-enter {
  from { opacity: 0; transform: translateY(8px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes psu-ui-exit {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(8px) scale(.98); }
}
@keyframes psu-ui-feedback {
  from { opacity: .65; transform: translateY(1px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  #btnTheme .ico, .card-body-in, button:active, .btn:active { transform: none !important; }
}
@media print {
  .psu-ui-feedback, details[open] > :not(summary), .modal-card, .card-body-in {
    animation: none !important; transition: none !important; transform: none !important; opacity: 1 !important;
  }
}

/* 结论优先：详情由用户展开，打印保留完整报告。 */
.result-fold > summary { display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 14px 0; }
.result-fold > summary h2 .hint { margin-left: 10px; font-size: var(--fs-xs); font-weight: 400; color: var(--text-3); }
.result-fold > summary h2 { margin: 0; font-size: var(--fs-h); }
.result-fold > summary::after, .result-explain > summary::after { content: '＋'; margin-left: auto; color: var(--text-3); }
.result-fold[open] > summary::after, .result-explain[open] > summary::after { content: '−'; }
.result-fold > summary, .result-explain > summary { list-style: none; }
.result-fold > summary::-webkit-details-marker, .result-explain > summary::-webkit-details-marker { display: none; }
.result-explain { margin: 10px 0; color: var(--text-3); font-size: var(--fs-sm); }
.result-explain > summary { display: flex; gap: 10px; cursor: pointer; padding: 8px 0; }
.explain-content { display: grid; gap: 8px; padding: 8px 0; }
.result-explain .meta { display: flex; flex-wrap: wrap; gap: 6px; }
.fold-status { font-size: var(--fs-xs); color: var(--text-3); font-weight: 400; }
.usage-notice { margin: 14px 0 0; color: var(--text-3); font-size: var(--fs-xs); }
.usage-open { padding: 0; border: 0; background: none; font-size: inherit; text-decoration: underline; min-height: 0; }
.usage-points { padding-left: 20px; margin: 0 0 18px; line-height: 1.8; }
.modal-foot .chk[hidden] { display: none; }
#issues .issue.ok .d, #issues .issue.info:has(b:first-child) > div > .d { display: none; }
#issues .issue details > summary { cursor: pointer; }
#issues .issue details > summary b { display: inline; }
#upgradeBox > .note:last-child:not(.accent) { display: none; }
#upgradeBox > .empty, #adviceBox > .empty { display: none; }
.hero > div { padding-top: 12px; padding-bottom: 12px; }
@media print {
  .result-fold > summary { display: block !important; }
  .result-fold > summary::after, .result-explain > summary::after, .usage-notice { display: none !important; }
  #issues .issue .d { display: block !important; }
  details.result-fold > .card-body, details.result-explain > div { display: block !important; }
}

/* 简洁计算器布局：宽配置区、紧凑结果区，帮助按需展开。 */
@media (min-width: 1181px) {
  .layout { grid-template-columns: minmax(0, 1.35fr) minmax(360px, .85fr); gap: 40px; }
  .col-config .card { grid-template-columns: minmax(0, 150px) minmax(0, 1fr) 28px; padding: 18px 0; }
}
.col-config .card.guide { display: block; padding: 0 0 20px; border-top: none; }
.card.guide > h2 { justify-content: space-between; }
.card.guide > h2 .hint { display: none; }
.card.guide > .card-body { display: flex; flex-wrap: wrap; align-items: start; gap: 14px; padding-top: 14px; }
.guide-actions { margin: 0; }
.guide-help { flex: 1 1 150px; font-size: var(--fs-sm); color: var(--text-3); }
.guide-help > summary { cursor: pointer; padding: 8px 0; }
.guide-help[open] { flex-basis: 100%; }
.guide-help .guide-steps { margin: 12px 0; }
.col-config .card > h2 .hint { display: none; }
.col-config .card > h2 .idx { display: none; }
.col-config .card > h2::before { display: none; }
.col-config .card > h2 .sec-ico { transition: transform 160ms var(--ease); }
.col-config .card:hover > h2 .sec-ico { transform: translateX(2px); }
.col-result .reco { padding: 24px; }
.col-result .reco .big { display: block; margin: 14px 0 22px; }
.col-result .hero { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 18px 0; }
.col-result .hero > div { display: block; min-width: 0; padding: 0; border: 0; }
.col-result .hero .k { font-size: var(--fs-xs); }
.col-result .hero .v { margin-top: 8px; font-size: 20px; }
.col-result .hero > div::after { display: none; }
.col-result .psu-picks { grid-template-columns: 1fr; gap: 0; }
.col-result .psu-pick { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line-soft); }
.col-result .psu-pick > * { grid-column: 1; }
.col-result .psu-pick .w { grid-column: 2; grid-row: 1 / 4; align-self: center; }
.col-result .psu-pick .nm { margin: 4px 0; }
.pick-specs { grid-column: 1 / -1 !important; color: var(--text-3); font-size: var(--fs-xs); margin-top: 8px; }
.pick-specs > summary { cursor: pointer; padding: 4px 0; }
.result-fold > summary::after, .result-explain > summary::after { transition: transform 180ms var(--ease); }
.result-fold[open] > summary::after, .result-explain[open] > summary::after { content: '＋'; transform: rotate(45deg); }
.storage-row, .custom-row { animation: psu-ui-enter .32s var(--motion-enter) both; }
@media (hover: hover) and (pointer: fine) {
  button:not(:disabled):hover { transform: translateY(-1px); }
  button:not(:disabled):active { transform: translateY(1px) scale(.98); }
}
@media (max-width: 700px) {
  .modal-backdrop { padding: 16px; }
  .modal-card { height: auto; max-height: calc(100dvh - 32px); border: 1px solid var(--line); }
  .modal-foot { flex-wrap: wrap; }
  .modal-foot .chk { font-size: var(--fs-sm); }
  .col-result .reco { padding: 18px; }
  .col-result .hero { gap: 8px; }
}
@media screen and (min-width: 1181px) {
  .wrap, .top-inner { max-width: 1360px; }
  .layout { grid-template-columns: minmax(0, 1.65fr) minmax(340px, 1fr); gap: 56px; }
  .col-config .card { grid-template-columns: 132px minmax(0, 1fr) 28px; padding-top: 24px; padding-bottom: 24px; }
}
@media screen {
  .col-result .reco { border: 1px solid var(--line); background: var(--surface); padding: 30px; }
  .col-result .reco .big::after { display: none; }
  .modal-card { width: min(580px, 100%); }
  .modal-head, .modal-foot { padding: 20px 24px; }
  .modal-body { padding: 10px 24px 20px; }
  .col-config .card { transition: border-color 200ms var(--ease), background-color 200ms var(--ease); }
  select, input { transition: border-color 180ms var(--ease), background-color 180ms var(--ease); }
  /* .page-intro 不再自带入场动画：它现在和其余各块一样走 psu-boot-hold / psu-boot-fill。
     留一条自己的 animation 会有两个后果 —— ① 动画盖过 hold 的 opacity:0，
     于是关掉声明之前它就可见；② 收尾撤掉 psu-boot-fill 时它会重新播一遍。 */
}
@media (max-width: 640px) {
  .page-intro { padding: 14px 0 28px; }
  .modal-head, .modal-foot { padding: 16px 20px; }
  .modal-body { padding: 8px 20px 16px; }
}
@media print { .page-intro { display: none; } }
@media (prefers-reduced-motion: reduce) {
  button:hover, .col-config .card:hover > h2 .sec-ico { transform: none !important; }
}
@media print {
  .guide-help { display: none !important; }
  .storage-row, .custom-row { animation: none !important; }
}

/* 尊重系统的「减少动态效果」设置 */
@media (prefers-reduced-motion: reduce) {
  .psu-boot { display: none !important; }
  html.psu-boot-active body > :not(.psu-boot), .psu-boot-hold .psu-boot-item {
    opacity: 1 !important; transform: none !important; animation: none !important;
  }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}


.print-only { display: none; }

/* Canvas fills the visible stage; drawing applies one uniform responsive scale. */
.psu-boot { overflow: hidden; height: 100vh; height: 100dvh; }
.psu-boot-canvas {
  display: block; flex: none; max-width: none;
  width: 100%; height: 100%; background: #000;
}

/* 配置管理与对比沿用平面分区、细分隔线和现有文字尺度。 */
.decision-toolbar { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 24px; padding: 18px 0; border-block: 1px solid var(--line); }
.decision-toolbar > *, .search-controls > *, .comparison-table td { min-width: 0; }
.decision-toolbar label { display: block; font-size: var(--fs-sm); color: var(--text-2); margin-bottom: 6px; }
.decision-toolbar p { margin: 8px 0 0; }
.search-controls { display: grid; grid-template-columns: 100px 1fr; gap: 8px; }
.search-results { max-height: 320px; overflow-y: auto; }
.search-results button { display: block; width: 100%; text-align: left; padding: 10px; border: 0; border-bottom: 1px solid var(--line); background: var(--bg-soft); white-space: normal; overflow-wrap: anywhere; }
.search-results button:hover { background: var(--surface-2); }
.plan-manager { grid-column: 1 / -1; }
.plan-manager > summary { cursor: pointer; font-weight: 600; padding: 8px 0; }
.plan-manager .hint { margin-left: 12px; }
.plan-panel { padding-top: 14px; }
.plan-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.coverage-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px 0; font-size: var(--fs-sm); color: var(--text-2); }
.decision-quality .note + .note { margin-top: 10px; }
.decision-quality input { max-width: 140px; }
.candidate-list { max-height: 300px; overflow-y: auto; }
.candidate-row { padding: 10px 0; border-bottom: 1px solid var(--line); }
.candidate-row p { margin: 4px 0; color: var(--text-2); font-size: var(--fs-sm); }
.candidate-row button { margin-top: 6px; }
.hero .v.blue { font-size: clamp(20px, 3vw, 32px); overflow-wrap: anywhere; }
.comparison-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); margin: 16px 0; }
.comparison-table th, .comparison-table td { padding: 9px 6px; border-bottom: 1px solid var(--line); text-align: left; overflow-wrap: anywhere; }
.comparison-table th { color: var(--text-2); font-weight: 600; }
#compareOutput .note { margin-top: 10px; }
#comparisonCard .grid2 { grid-template-columns: 1fr 1fr; }
#comparisonCard .field { display: block; min-width: 0; }
#comparisonCard .field > label { display: block; margin-bottom: 8px; }
#comparisonCard .field > select { width: 100%; max-width: 100%; }
html[data-calc-mode="quick"] .col-config > .card[data-detail-part] { display: none; }
.no-js .decision-toolbar { display: none; }
@media (max-width: 640px) {
  .decision-toolbar { grid-template-columns: 1fr; gap: 14px; }
  #comparisonCard .grid2, .coverage-list { grid-template-columns: 1fr; }
  .plan-actions button { flex: 1 1 140px; }
  .comparison-table th, .comparison-table td { padding: 8px 4px; }
}

/* LIGHTNING slogan follows the original opening lockup. */
.brand-lockup { display: inline-flex; flex: none; flex-direction: column; align-items: center; gap: 2px; color: var(--rog); }
.brand-lockup .wordmark { display: block; flex: none; }
.brand-tagline { display: block; font: 700 10px/1.2 Arial, sans-serif; letter-spacing: .35px; white-space: nowrap; }
.modal-head .brand-lockup .wordmark { width: 110px; }
.modal-head .brand-tagline { letter-spacing: .1px; }

/* 快速选型：核心填写优先，结果与字段共用一致的交互反馈。 */
.page-intro { padding-top: 24px; padding-bottom: 20px; }
.page-intro .eyebrow { display: none; }
.page-intro h2 { font-size: clamp(24px, 2.5vw, 32px); }
.decision-toolbar { margin-bottom: 14px; padding-block: 12px; gap: 12px 24px; }
.top-actions { flex-wrap: wrap; }
#dbCounts { display: none; }
.core-search { margin-bottom: 16px; }
.core-search > label { display: block; margin-bottom: 8px; color: var(--text-2); }
.core-search input { width: 100%; min-width: 0; }
.search-controls input { width: 100%; min-width: 0; }
.search-category { color: var(--text-3); font-size: var(--fs-xs); }
.search-results button:focus-visible { outline: 2px solid var(--err); outline-offset: -2px; }
.quick-budget { padding: 16px 0; border-bottom: 1px solid var(--line); color: var(--text-2); font-size: var(--fs-sm); }
.quick-budget[hidden] { display: none; }
.quick-budget p { margin: 0 0 10px; line-height: 1.7; }
#resultNext { margin-top: 16px; }
.reco.has-conflict { border-color: var(--err); }
.reco.has-conflict .big { font-size: var(--fs-sec); color: var(--text-3); }
.reco.has-conflict .reco-label { color: var(--err); font-size: 18px; }
.existing-summary { padding-top: 14px; margin-top: 14px; border-top: 1px solid var(--line); font-size: var(--fs-sm); line-height: 1.7; }
.col-config .card, #resultPanel { scroll-margin-top: 140px; }
#resultPanel:focus-visible { outline: 2px solid var(--err); outline-offset: 6px; }
.card-toggle { min-width: 44px; min-height: 44px; }
input[type="search"]:focus-visible { outline: 2px solid var(--err); outline-offset: 2px; }
@media (max-width: 1180px) {
  .wrap { padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px)); }
  .mobile-bar { display: flex; position: fixed; inset: auto 0 0; z-index: 60; align-items: center; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--bg-nav); border-top: 2px solid var(--err); }
  .mobile-bar .mb-label { color: var(--text-2); font-size: var(--fs-sm); }
  .mobile-bar .mb-value { font-family: var(--mono); font-size: 22px; font-variant-numeric: tabular-nums; margin-left: auto; white-space: nowrap; }
  .mobile-bar button { min-height: 44px; flex-shrink: 0; }
}
@media (max-width: 640px) {
  .top-inner { gap: 6px; padding-block: 8px; }
  .top-actions { gap: 6px; }
  .logo small { display: none; }
  .page-intro { padding-top: 18px; padding-bottom: 16px; }
  input[type="search"] { min-height: 44px; }
  .mobile-bar { gap: 8px; }
  .mobile-bar .mb-label { max-width: 42%; }
  .col-config .card { grid-template-columns: minmax(0, 1fr) 44px; }
}


.hardware-search > summary { cursor: pointer; color: var(--text-2); padding: 6px 0; }
.hardware-search[open] > summary { margin-bottom: 10px; }
.decision-toolbar { align-items: start; }
#guideCard { border-bottom: 0; }
#guideCard > h2 { display: none; }
#guideCard .card-body { padding-block: 4px; }
.core-search .note:empty { display: none; }
.core-search .search-results:empty { display: none; }
.col-config .card { column-gap: 16px; }
.col-config .card > .card-toggle { justify-self: end; }
.existing-summary[data-level="error"] { color: var(--err); }
#resolveConflict { margin-top: 12px; }
@media (max-width: 640px) {
  .decision-toolbar { gap: 6px; }
  .top .logo-text h1 { font-size: var(--fs-base); }
}


.hardware-filters > summary { cursor: pointer; padding-block: 10px; font-size: var(--fs-sm); color: var(--text-2); }
.hardware-filters[open] > summary { margin-bottom: 10px; }
.header-more { position: relative; }
.header-more > summary { cursor: pointer; padding: 10px 14px; min-height: 44px; box-sizing: border-box; color: var(--text-2); border: 1px solid var(--line); }
.header-more-panel { position: absolute; top: calc(100% + 6px); right: 0; padding: 10px; min-width: 160px; display: grid; gap: 8px; background: var(--bg-nav); border: 1px solid var(--line); z-index: 80; }
.header-more-panel button { width: 100%; min-height: 44px; text-align: left; }
@media (max-width: 640px) {
  .top-inner { flex-wrap: nowrap; }
  .top-actions { width: auto; margin-left: auto; flex-wrap: nowrap; }
  .answer-chip { display: none !important; }
  .header-more-panel #btnReplayIntro { display: block; }
  .top .logo .mark { width: 16px; height: 30px; }
  #btnTheme { padding-inline: 9px; }
  .theme-label { display: none; }
  .hardware-filters > summary, .advanced-options > summary, .hardware-search > summary { min-height: 44px; display: flex; align-items: center; box-sizing: border-box; }
}

/* ------------------------------------------------------------- 打印 ----
   ⚠️ 这是导出 PDF 的唯一实现。改版后必须回归验证：
      配置列隐藏、按钮隐藏、折叠内容全部展开、红色指示条压平成黑色。
   --------------------------------------------------------------------- */
@media print {
  .psu-boot { display: none !important; }
  html.psu-boot-active, html.psu-boot-active body { overflow: visible !important; }
  html.psu-boot-active body > :not(.psu-boot), .psu-boot-hold .psu-boot-item {
    opacity: 1 !important; transform: none !important; animation: none !important;
  }
  :root {
    --bg: #fff; --bg-soft: #fff; --bg-nav: #fff; --surface: #fff; --surface-2: #fff;
    --text: #000; --text-2: #222; --text-3: #444; --text-4: #666;
    --line: #bbb; --line-soft: #ddd;
    --rog: #000; --rog-dim: #000; --warn: #000; --err: #000; --ok: #000;
  }
  header.top, .top-actions, .layout > .col-config,
  .toast, button, .btn, details.section-collapse,
  .mobile-bar, .card-toggle, .banner, .answer-chip,
  .modal-backdrop { display: none !important; }

  body { background: #fff !important; color: #000; font-size: 11pt; }
  .wrap { max-width: 100%; padding: 0; }
  .layout { grid-template-columns: 1fr; }
  .sticky-col { position: static; padding-bottom: 0; }

  .card { break-inside: avoid; border-top: 1px solid #999; }
  .card > h2 { border-bottom: 1px solid #999; }
  /* 双斜杠标记在打印时压平为纯黑方块，不做渐变 */
  .card > h2::before, details.section-collapse > summary::before {
    background: #000 !important; width: 10px; height: 10px;
  }
  .card > h2 .idx { color: #000; }

  /* 折叠内容必须全部展开，否则 PDF 会缺内容。
     注意屏幕态的收起是靠 grid-template-rows 0fr 做的，不是 display:none，
     所以这里要把行高和透明度都还原，光加 display:block 不够。 */
  .card.is-collapsed > .card-body {
    display: grid !important; grid-template-rows: 1fr !important;
    opacity: 1 !important; pointer-events: auto !important;
  }
  .card > .card-body { transition: none !important; }
  .card.is-collapsed > h2 .card-summary { display: none !important; }
  .card.is-collapsed > h2 .hint { display: inline !important; }
  details, details > *, details > summary + * { display: block !important; }
  details > summary { display: none !important; }
  .note.note-collapsible {
    display: block !important; -webkit-line-clamp: unset !important;
    overflow: visible !important; padding-right: 12px !important;
  }
  .note.note-collapsible::after { display: none !important; }

  /* 压平红色指示条与任何残留着色 */
  .reco .big::after { background: #000 !important; }
  .col-config .card { border-left: none !important; padding-left: 0 !important; }
  .issue, .note, .psu-pick, .hero > div {
    background: none !important; background-image: none !important;
    box-shadow: none !important;
  }
  .issue.error, .issue.warn { border-left-color: #000 !important; }
  .reco .big, .hero .v, .psu-pick .w, table.detail tr.sum .wt {
    color: #000 !important; text-shadow: none !important; background-image: none !important;
  }
  .tag, .conf { border-color: #666 !important; color: #333 !important; }
  select, input { border: 1px solid #999; background: #fff !important; color: #000; }
  .table-scroll { overflow: visible !important; }
  .decision-toolbar, #comparisonCard .field, #upgradeSimulation, .candidate-row button { display: none !important; }
  .candidate-list { max-height: none !important; overflow: visible !important; }
  .decision-quality details > *, .result-explain > .coverage-list, .result-explain > #allPsuCandidates { display: block !important; }
  .comparison-table, .comparison-table tr, .candidate-row { break-inside: avoid; }

  .print-only { display: block !important; }
  a { color: #000; border-bottom: none; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8pt; color: #555; }
  .core-search, .quick-budget, #chooseIgpu, #resultNext, #resolveConflict { display: none !important; }
}