/* CSAO 认证测试占位页（#/csao） */
.page-csao { max-width: 860px; margin: 0 auto; padding: 32px 20px 60px; }

.csao-banner {
  margin-top: 18px;
  padding: 26px 28px;
  border: 1px solid rgba(53,224,255,.3);
  border-radius: 22px;
  background:
    radial-gradient(120% 160% at 15% 0%, rgba(53,224,255,.1), transparent 55%),
    color-mix(in srgb, var(--panel, #101827) 86%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.csao-banner__tag {
  display: inline-block;
  font-size: 11px; letter-spacing: .2em;
  color: var(--accent-cyan, #35e0ff);
  border: 1px solid rgba(53,224,255,.4);
  border-radius: 999px; padding: 3px 14px;
}
.csao-banner h2 { margin: 12px 0 8px; font-size: 20px; letter-spacing: .04em; }
.csao-banner p { margin: 0; font-size: 13px; line-height: 1.9; color: var(--muted, #8a97b1); }

.csao-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 16px;
}
.csao-card {
  border: 1px solid var(--line, rgba(140,170,255,.14));
  border-radius: 16px;
  padding: 16px;
  background: color-mix(in srgb, var(--panel, #101827) 80%, transparent);
}
.csao-card b { display: block; font-size: 13px; letter-spacing: .06em; margin-bottom: 6px; color: var(--ink, #dfe7f5); }
.csao-card p { margin: 0; font-size: 12px; line-height: 1.8; color: var(--muted, #8a97b1); }

.csao-cta { margin-top: 22px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
/* 正式考试直达说明行（v1.3.7） */
.csao-official { margin-top: 10px; font-size: 12px; color: var(--muted, #8a97b1); }
a.csao-cta__btn { text-decoration: none; }
.csao-cta__btn {
  display: inline-block;
  padding: 11px 26px;
  border: 1px solid var(--accent-cyan, #35e0ff);
  border-radius: 999px;
  color: var(--accent-cyan, #35e0ff);
  font-size: 13px; letter-spacing: .1em;
  text-decoration: none;
  transition: background .2s;
}
.csao-cta__btn:hover { background: rgba(53,224,255,.1); }
.csao-cta__note { font-size: 12px; color: var(--muted, #8a97b1); }

@media (max-width: 820px) {
  .csao-grid { grid-template-columns: 1fr; }
}

/* ================= 真实考试页 ================= */
.csao-cta__btn--primary { background: rgba(53,224,255,.12); }
.csao-cta__btn { cursor: pointer; }

.csao-bar {
  display: flex; align-items: center; gap: 16px;
  padding: 12px 18px; margin-top: 18px;
  border: 1px solid var(--line, rgba(140,170,255,.14));
  border-radius: 16px;
  background: color-mix(in srgb, var(--panel, #101827) 86%, transparent);
  position: sticky; top: 10px; z-index: 10;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.csao-bar__timer { font-size: 22px; font-weight: 700; letter-spacing: .1em; font-variant-numeric: tabular-nums; color: var(--accent-cyan, #35e0ff); }
.csao-bar__timer.is-low { color: #ff5a6a; }
.csao-bar__prog { font-size: 12px; color: var(--muted, #8a97b1); }
.csao-bar__submit {
  margin-left: auto;
  padding: 8px 22px;
  border: 1px solid #ff5a6a; border-radius: 999px;
  background: transparent; color: #ff5a6a;
  font-size: 13px; letter-spacing: .1em; cursor: pointer;
}
.csao-bar__submit:hover { background: rgba(255,90,106,.1); }

.csao-qcard {
  margin-top: 14px;
  border: 1px solid var(--line, rgba(140,170,255,.14));
  border-radius: 22px;
  background: color-mix(in srgb, var(--panel, #101827) 86%, transparent);
  backdrop-filter: blur(10px);
  padding: 22px 24px;
}
.csao-qcard__meta { font-size: 11px; letter-spacing: .14em; color: var(--accent-cyan, #35e0ff); }
.csao-qcard__q { margin: 10px 0 14px; font-size: 17px; line-height: 1.8; }
.csao-choices { display: grid; gap: 10px; }
.csao-choice {
  display: flex; gap: 10px; align-items: flex-start;
  text-align: left;
  padding: 12px 16px;
  border: 1px solid var(--line, rgba(140,170,255,.16));
  border-radius: 14px;
  background: transparent;
  color: var(--ink, #dfe7f5);
  font-size: 13.5px; line-height: 1.7;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.csao-choice:hover { border-color: var(--accent-cyan, #35e0ff); }
.csao-choice.is-on { border-color: var(--accent-cyan, #35e0ff); background: rgba(53,224,255,.1); }
.csao-choice__key {
  flex: none; width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line, rgba(140,170,255,.3));
  border-radius: 7px; font-size: 11px;
}
.csao-choice.is-on .csao-choice__key { background: var(--accent-cyan, #35e0ff); color: #06121f; border-color: transparent; }

.csao-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.csao-nav__cell {
  width: 36px; height: 36px;
  border: 1px solid var(--line, rgba(140,170,255,.16));
  border-radius: 10px;
  background: transparent; color: var(--muted, #8a97b1);
  font-size: 12px; cursor: pointer;
}
.csao-nav__cell.is-done { border-color: #46e08a; color: #46e08a; }
.csao-nav__cell.is-cur { background: var(--accent-cyan, #35e0ff); color: #06121f; border-color: transparent; font-weight: 700; }

/* 结果页 */
.csao-result {
  margin-top: 22px;
  text-align: center;
  border: 1px solid var(--line, rgba(140,170,255,.14));
  border-radius: 22px;
  padding: 34px 26px;
  background: color-mix(in srgb, var(--panel, #101827) 86%, transparent);
  backdrop-filter: blur(10px);
}
.csao-result__verdict { font-size: 13px; letter-spacing: .3em; }
.csao-result--pass .csao-result__verdict { color: #46e08a; }
.csao-result--fail .csao-result__verdict { color: #ff5a6a; }
.csao-result__score { font-size: 64px; font-weight: 800; color: var(--ink, #dfe7f5); }
.csao-result__score small { font-size: 20px; color: var(--muted, #8a97b1); font-weight: 400; }
.csao-result__line { font-size: 13px; color: var(--muted, #8a97b1); }
.csao-result__hint { font-size: 13px; }

.csao-review { margin-top: 20px; }
.csao-review h2 { font-size: 16px; letter-spacing: .08em; margin-bottom: 12px; }
.csao-review__item {
  border: 1px solid var(--line, rgba(140,170,255,.14));
  border-radius: 16px;
  padding: 16px 18px;
  margin-bottom: 10px;
  background: color-mix(in srgb, var(--panel, #101827) 82%, transparent);
}
.csao-review__q { margin: 0 0 6px; font-size: 13.5px; line-height: 1.7; }
.csao-review__q i { font-style: normal; font-size: 10.5px; color: var(--accent-cyan, #35e0ff); margin-left: 8px; }
.csao-review__a { margin: 0 0 4px; font-size: 12.5px; color: var(--muted, #8a97b1); }
.csao-review__a b { color: #46e08a; }
.csao-review__e { margin: 0; font-size: 12px; line-height: 1.8; color: var(--muted, #a8b3c7); }

/* ================= 视觉美化 ================= */
/* 标题渐变 */
.page-csao .quiz-head__title {
  background: linear-gradient(110deg, #eaf3ff 30%, #35e0ff 75%, #7aa2ff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* 日间模式：起点换深色，否则白字渐变消失在浅底上 */
[data-theme="light"] .page-csao .quiz-head__title {
  background: linear-gradient(110deg, #16203a 30%, #0d9dd8 75%, #2b6fe0);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* 开场横幅：证书徽章 */
.csao-banner { position: relative; overflow: hidden; }
.csao-banner__seal {
  position: absolute; right: 26px; top: 50%;
  transform: translateY(-50%) rotate(-8deg);
  width: 92px; height: 92px;
  border: 2px solid rgba(53,224,255,.5);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle, rgba(53,224,255,.14), transparent 70%);
  box-shadow: 0 0 30px -8px rgba(53,224,255,.5), inset 0 0 18px rgba(53,224,255,.12);
}
.csao-banner__seal i {
  font-style: normal;
  font-size: 15px; font-weight: 800; letter-spacing: .08em;
  text-align: center; line-height: 1.25;
  color: var(--accent-cyan, #35e0ff);
}
@media (max-width: 640px) { .csao-banner__seal { display: none; } }

/* 考试条：进度轨 */
.csao-bar__track {
  flex: 1; height: 6px; border-radius: 99px;
  background: rgba(127,147,178,.18);
  overflow: hidden;
}
.csao-bar__track i {
  display: block; height: 100%;
  background: linear-gradient(90deg, #1f9fd4, #35e0ff);
  border-radius: 99px;
  transition: width .3s ease;
  box-shadow: 0 0 8px rgba(53,224,255,.5);
}

/* 题卡与选项动效 */
.csao-qcard { box-shadow: 0 18px 44px -18px rgba(0,0,0,.55), inset 0 1px 0 rgba(160,190,255,.08); }
.csao-choice { position: relative; overflow: hidden; }
.csao-choice::after {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--accent-cyan, #35e0ff);
  transform: scaleY(0); transition: transform .18s ease;
}
.csao-choice:hover::after, .csao-choice.is-on::after { transform: scaleY(1); }
.csao-choice { transition: border-color .15s, background .15s, transform .15s; }
.csao-choice:active { transform: scale(.99); }

/* 答题卡格子动效 */
.csao-nav__cell { transition: transform .12s, border-color .15s, background .15s; }
.csao-nav__cell:hover { transform: translateY(-2px); }

/* 成绩圆环 */
.csao-ring { position: relative; width: 150px; height: 150px; margin: 0 auto 10px; }
.csao-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.csao-ring circle { fill: none; stroke-width: 9; }
.csao-ring__bg { stroke: rgba(127,147,178,.18); }
.csao-ring__val {
  stroke: var(--accent-cyan, #35e0ff);
  stroke-linecap: round;
  stroke-dasharray: 326.7;
  stroke-dashoffset: calc(326.7 - 326.7 * var(--pct, 0) / 100);
  transition: stroke-dashoffset 1s cubic-bezier(.22,.9,.3,1);
  filter: drop-shadow(0 0 6px rgba(53,224,255,.5));
}
.csao-result--fail .csao-ring__val { stroke: #ff5a6a; filter: drop-shadow(0 0 6px rgba(255,90,106,.45)); }
.csao-ring__num {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 40px; font-weight: 800;
}
.csao-ring__num small { font-size: 15px; font-weight: 400; color: var(--muted, #8a97b1); margin-left: 3px; }
.csao-result__verdict { display: block; font-size: 14px; letter-spacing: .4em; margin-bottom: 6px; }
.csao-result--pass .csao-result__verdict::before { content: '✓ '; }
.csao-result--fail .csao-result__verdict::before { content: '✗ '; }

/* 复盘卡左侧红条 */
.csao-review__item { border-left: 3px solid rgba(255,90,106,.55); }