/* ============================================================
   测试页外观覆盖层 v1.0
   注入在原始页面样式之后，用于隐藏原站导航、移除广告残留、
   统一排版与控件观感，不破坏原有交互逻辑。
   色值统一取自 tokens.css。
   ============================================================ */

/* --- 隐藏原站导航与广告残留 --- */
#arm_topnav, #nav-overlay, #arm_toolset,
[class*="leader_ad"], [class*="ad_banner"], [class*="adsense"],
[id*="ezoic"], [class*="ezoic"], ins.adsbygoogle,
.google-auto-placed, #ad_block_1, #ad_block_2, #ad_block_3 {
  display: none !important;
}

/* --- 基础排版 --- */
body {
  background: var(--sk-bg);
  color: var(--sk-text-2);
  font-family: var(--sk-font);
  -webkit-font-smoothing: antialiased;
  padding-bottom: 0;
}

body #progress { top: var(--sk-nav-h); }

h1, h2, h3, h4 {
  font-family: var(--sk-font);
  letter-spacing: var(--sk-tracking-snug);
  color: var(--sk-text-1);
}

/* --- 统一按钮观感 --- */
body .answer,
body button.answer,
body .btn,
body .button,
body input[type=button],
body input[type=submit] {
  font-family: var(--sk-font);
  border-radius: var(--sk-r-md);
  transition: transform var(--sk-dur-fast) ease,
              box-shadow var(--sk-dur-base) ease,
              background var(--sk-dur-base) ease;
}

body .answer:active { transform: scale(.985); }

/* --- 结果区与卡片 --- */
body #result_details,
body .main_view {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

body #snapshot-container img,
body #result_details img {
  border-radius: var(--sk-r-md);
}

/* --- 顶部留白由新导航接管 --- */
body > #splash,
body > main {
  padding-top: var(--sk-sp-4);
}

/* --- 隐藏原站残留的外链提示块 --- */
.samelang_links_img, #arm_mybar_utils, .mybar-loading { display: none !important; }

/* ------------------------------------------------------------
   品牌对齐：把原站内容区从绿色/灰色体系迁到浅蓝体系
   仅作用于 article.hint 与主按钮，不改变任何交互逻辑
   ------------------------------------------------------------ */
article.hint {
  background: var(--sk-surface) !important;
  border: 1px solid var(--sk-line);
  border-radius: var(--sk-r-lg);
  color: var(--sk-text-2) !important;
  box-shadow: var(--sk-shadow-xs);
  overflow: hidden;
}

article.hint h1 {
  background: var(--sk-accent) !important;
  color: #fff !important;
  letter-spacing: var(--sk-tracking-snug);
  font-weight: var(--sk-fw-bold);
}

article.hint h2,
article.hint h3 {
  color: var(--sk-text-1) !important;
}

article.hint a {
  color: var(--sk-accent) !important;
  text-decoration-color: color-mix(in srgb, var(--sk-accent) 35%, transparent);
}

article.hint a:hover { color: var(--sk-accent-hover) !important; }

article.hint select,
article.hint input[type=text],
article.hint input[type=number] {
  border: 1px solid var(--sk-line-strong) !important;
  border-radius: var(--sk-r-sm) !important;
  background: var(--sk-surface) !important;
  color: var(--sk-text-1) !important;
  padding: 6px 10px !important;
  font-family: var(--sk-font) !important;
}

article.hint ul li {
  color: var(--sk-text-2);
}

/* 推荐测试 / 标签链 */
article.hint ul a {
  display: inline-block;
  padding: 3px 11px;
  border: 1px solid var(--sk-brand-200) !important;
  border-radius: var(--sk-r-pill);
  background: var(--sk-accent-tint);
  color: var(--sk-accent) !important;
  font-size: var(--sk-fs-13);
  line-height: 1.6;
  transition: background var(--sk-dur-fast), border-color var(--sk-dur-fast);
}

article.hint ul a:hover {
  background: var(--sk-accent-soft);
  border-color: var(--sk-brand-300) !important;
}

/* 开始测试按钮 */
#start,
button.progress-button {
  border-radius: var(--sk-r-md) !important;
  overflow: hidden;
  box-shadow: var(--sk-shadow-brand) !important;
}

#start .progress-inner,
button.progress-button .progress-inner,
#start > span:last-child,
button.progress-button > span:last-child {
  background: var(--sk-accent) !important;
  color: #fff !important;
  border-radius: var(--sk-r-md) !important;
  font-weight: var(--sk-fw-semibold);
  letter-spacing: .01em;
}

/* 进度按钮的可见面（原站为 #progress-inner） */
#progress-inner {
  background: var(--sk-accent) !important;
  border-radius: var(--sk-r-md) !important;
}

#start:hover .progress-inner,
#start:hover > span:last-child,
button.progress-button:hover > span:last-child,
#start:hover #progress-inner { background: var(--sk-accent-hover) !important; }

#start .progress,
button.progress-button .progress { background: var(--sk-brand-700) !important; }


/* --- 滚动条（与站点一致）--- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: var(--sk-gray-300);
  border-radius: var(--sk-r-pill);
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-track { background: transparent; }

/* --- 移动端微调 --- */
@media (max-width: 860px) {
  body #progress { top: 56px; }
  body #result_details, body .main_view { max-width: 100%; }
}