/* 全天电脑维修 · 自助硬件检测工具样式
 * 品牌蓝设计系统：沿用站点深蓝主色 #16457c，叠加自研品牌蓝 #1677ff 作为交互高光，
 * 琥珀 #f59e0b 作为强调行动色，与全站视觉语言一致。
 * 响应式：移动端单列、桌面端多列网格；触摸/鼠标/键盘三态兼容。 */

:root {
  --diag-primary: #16457c;
  --diag-primary-dk: #0d2f57;
  --diag-brand: #1677ff;        /* 自研品牌蓝（交互高光） */
  --diag-brand-dk: #0958d9;
  --diag-accent: #f59e0b;
  --diag-accent-dk: #e78a06;
  --diag-bg: #f5f7fa;
  --diag-card: #ffffff;
  --diag-text: #1f2937;
  --diag-muted: #6b7280;
  --diag-line: #e5e7eb;
  --diag-radius: 14px;
  --diag-radius-sm: 10px;
  --diag-tap: rgba(22, 69, 124, .10);
  --diag-focus: #2f6fb5;
  --diag-shadow: 0 6px 22px rgba(22, 69, 124, .10);
}

* { box-sizing: border-box; }
.diag-wrap { max-width: 1100px; margin: 0 auto; padding: 0 16px; }
.diag-muted { color: var(--diag-muted); font-size: 14px; }

/* Hero（工具页头部） */
.diag-hero {
  background: linear-gradient(135deg, var(--diag-primary) 0%, var(--diag-primary-dk) 100%);
  color: #fff; padding: 40px 0; text-align: center;
}
.diag-hero h1 { font-size: 28px; letter-spacing: .5px; line-height: 1.3; }
.diag-hero p { margin: 10px auto 0; max-width: 720px; opacity: .88; font-size: 15px; }
.diag-hero .diag-crumb { font-size: 13px; opacity: .8; margin-bottom: 8px; }
.diag-hero .diag-crumb a { color: #fff; text-decoration: underline; opacity: .85; }

.diag-section { margin: 28px auto; }

/* 通用卡片 */
.diag-card {
  background: var(--diag-card); border: 1px solid var(--diag-line);
  border-radius: var(--diag-radius); box-shadow: var(--diag-shadow);
  padding: 20px; margin-bottom: 18px;
}
.diag-card h2 {
  font-size: 18px; margin-bottom: 12px;
  border-left: 4px solid var(--diag-brand); padding-left: 10px;
}
.diag-card h3 { font-size: 15px; margin: 14px 0 8px; color: var(--diag-primary); }

/* 工具网格（hub 页） */
.diag-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.diag-tool {
  display: flex; flex-direction: column; gap: 8px;
  background: var(--diag-card); border: 1px solid var(--diag-line);
  border-radius: var(--diag-radius); box-shadow: var(--diag-shadow);
  padding: 20px; text-decoration: none; color: var(--diag-text);
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.diag-tool:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(22,69,124,.16); border-color: var(--diag-brand); }
.diag-tool:active { transform: translateY(0) scale(.99); }
.diag-tool .diag-tool-ico { font-size: 34px; line-height: 1; }
.diag-tool .diag-tool-name { font-size: 17px; font-weight: 700; }
.diag-tool .diag-tool-desc { font-size: 13px; color: var(--diag-muted); }
.diag-tool .diag-tool-go { margin-top: 6px; color: var(--diag-brand); font-weight: 600; font-size: 14px; }

/* 按钮 */
.diag-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 42px; padding: 0 20px; border: 1px solid var(--diag-line);
  background: #fff; color: var(--diag-text); border-radius: 22px;
  font-size: 15px; font-weight: 600; cursor: pointer; user-select: none;
  transition: transform .12s, background .15s, border-color .15s, color .15s;
}
.diag-btn:hover { border-color: var(--diag-brand); color: var(--diag-brand); }
.diag-btn:active { transform: scale(.97); }
.diag-btn-primary {
  background: var(--diag-accent); color: #fff; border-color: var(--diag-accent);
}
.diag-btn-primary:hover { background: var(--diag-accent-dk); border-color: var(--diag-accent-dk); color: #fff; }
.diag-btn-brand { background: var(--diag-brand); color: #fff; border-color: var(--diag-brand); }
.diag-btn-brand:hover { background: var(--diag-brand-dk); border-color: var(--diag-brand-dk); color: #fff; }
.diag-btn:disabled { opacity: .5; cursor: not-allowed; }
.diag-btn-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0; }

/* 结果区 */
.diag-result {
  margin-top: 14px; padding: 16px; border-radius: var(--diag-radius-sm);
  background: #f0f6ff; border: 1px solid #cfe1ff; color: var(--diag-primary-dk);
  font-size: 15px; line-height: 1.7;
}
.diag-result.diag-ok { background: #ecfdf3; border-color: #a6f0c6; color: #067647; }
.diag-result.diag-warn { background: #fff7ed; border-color: #fed7aa; color: #b45309; }
.diag-result b { font-size: 18px; }
.diag-result .diag-big { font-size: 30px; font-weight: 800; color: var(--diag-brand); }

/* 交互舞台（canvas / 检测区） */
.diag-stage {
  position: relative; width: 100%; height: 240px; border-radius: var(--diag-radius-sm);
  background: #0d2f57; overflow: hidden; margin: 12px 0;
}
.diag-stage canvas { display: block; width: 100%; height: 100%; }
.diag-stage .diag-stage-tip {
  position: absolute; left: 12px; bottom: 10px; right: 12px;
  color: #cfe1ff; font-size: 13px; text-align: center; pointer-events: none;
}

/* 全屏纯色覆盖（屏幕坏点检测） */
.diag-fullscreen {
  position: fixed; inset: 0; z-index: 9999; display: none;
  align-items: center; justify-content: center; cursor: pointer;
}
.diag-fullscreen.is-show { display: flex; }
.diag-fullscreen .diag-fs-tip {
  position: absolute; left: 0; right: 0; bottom: 28px; text-align: center;
  color: rgba(255,255,255,.85); font-size: 15px; letter-spacing: 1px;
  text-shadow: 0 1px 3px rgba(0,0,0,.5);
}

/* 信息表（显卡检测） */
.diag-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.diag-table th, .diag-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--diag-line); vertical-align: top; }
.diag-table th { width: 140px; color: var(--diag-muted); font-weight: 600; background: #fafbfc; }
.diag-table tr:last-child th, .diag-table tr:last-child td { border-bottom: none; }
.diag-table code { background: #eef2f7; padding: 1px 6px; border-radius: 6px; font-size: 13px; word-break: break-all; }

/* 分享条 */
.diag-share {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-top: 20px; padding: 16px; border-radius: var(--diag-radius);
  background: #fff; border: 1px dashed var(--diag-line);
}
.diag-share .diag-share-label { font-size: 14px; color: var(--diag-muted); margin-right: 4px; }
.diag-share-btn {
  display: inline-flex; align-items: center; gap: 6px; min-height: 38px;
  padding: 0 14px; border-radius: 20px; border: 1px solid var(--diag-line);
  background: #fff; color: var(--diag-text); font-size: 14px; cursor: pointer;
  transition: transform .12s, border-color .15s, color .15s, background .15s;
}
.diag-share-btn:hover { border-color: var(--diag-brand); color: var(--diag-brand); }
.diag-share-btn:active { transform: scale(.96); }
.diag-share-btn .ico { font-size: 16px; }
.diag-share-msg {
  flex-basis: 100%; font-size: 13px; color: var(--diag-brand-dk); min-height: 18px;
}

/* Toast */
.diag-toast {
  position: fixed; left: 50%; bottom: 40px; transform: translateX(-50%) translateY(20px);
  background: rgba(13,47,87,.95); color: #fff; padding: 10px 18px; border-radius: 22px;
  font-size: 14px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 10000;
}
.diag-toast.is-show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* 响应式 */
@media (max-width: 768px) {
  .diag-grid { grid-template-columns: 1fr; }
  .diag-hero { padding: 28px 0; }
  .diag-hero h1 { font-size: 22px; }
  .diag-table th { width: 110px; }
}
:focus-visible { outline: 2px solid var(--diag-focus); outline-offset: 2px; border-radius: 6px; }