:root {
  --dh-ink:#181c2f;
  --dh-muted:#68748a;
  --dh-line:#dce4ef;
  --dh-paper:#f6f9fd;
  --dh-primary:#554bc7;
  --dh-cyan:#39afd0;
}

.dh-page,.dt-page { min-height:100%; color:var(--dh-ink); background:#f4f7fb; }
.dh-page { padding:34px clamp(24px,4vw,64px) 38px; }
.dh-hero { display:flex; align-items:flex-end; justify-content:space-between; gap:36px; max-width:1380px; margin:0 auto; padding:4px 2px 30px; }
.dh-hero__copy { max-width:800px; }
.dh-back { display:inline-flex; align-items:center; gap:7px; margin:0 0 25px; padding:0; border:0; background:transparent; color:#748094; font-size:13px; cursor:pointer; }
.dh-back i { font-size:20px; }
.dh-eyebrow,.dt-kicker { display:block; color:#5f57bd; font-size:11px; font-weight:800; letter-spacing:.17em; }
.dh-hero h1 { margin:10px 0 12px; font-family:"Microsoft YaHei UI","PingFang SC",sans-serif; font-size:clamp(34px,3.6vw,56px); line-height:1.1; letter-spacing:-.035em; }
.dh-hero__copy > p { max-width:750px; margin:0; color:var(--dh-muted); font-size:16px; line-height:1.8; text-wrap:pretty; }
.dh-hero__method { display:flex; align-items:center; gap:12px; padding:15px 18px; border:1px solid var(--dh-line); border-radius:12px; background:rgba(255,255,255,.8); color:#6d778a; font-size:11px; white-space:nowrap; }
.dh-hero__method i { width:18px; height:1px; background:#c7d0dd; }

.dh-mode-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; max-width:1380px; margin:0 auto; }
.dh-mode-card { overflow:hidden; display:grid; grid-template-rows:230px 1fr; min-height:590px; border:1px solid var(--dh-line); border-radius:22px; background:#fff; box-shadow:0 18px 55px rgba(33,46,74,.07); transition:transform .24s ease,box-shadow .24s ease,border-color .24s ease; }
.dh-mode-card:hover { transform:translateY(-4px); border-color:#cbd3ef; box-shadow:0 24px 65px rgba(33,46,74,.12); }
.dh-mode-card__visual { position:relative; overflow:hidden; display:grid; place-items:center; }
.dh-mode-card--scene .dh-mode-card__visual { background:linear-gradient(135deg,#edf4ff 0%,#f3f0ff 100%); }
.dh-mode-card--theory .dh-mode-card__visual { background:linear-gradient(135deg,#eefafd 0%,#edf4ff 100%); }
.dh-mode-card__visual:after { position:absolute; inset:auto -70px -130px auto; width:310px; height:310px; border:1px solid rgba(99,91,204,.12); border-radius:50%; content:""; }
.dh-mode-card__visual img { z-index:1; width:132px; height:132px; border:8px solid rgba(255,255,255,.84); border-radius:30px; box-shadow:0 18px 45px rgba(69,62,160,.2); }
.dh-live-dot,.dh-paper-label { position:absolute; z-index:2; top:20px; left:22px; display:flex; align-items:center; gap:8px; min-height:30px; padding:0 11px; border-radius:999px; background:rgba(255,255,255,.82); color:#5148b8; font-size:11px; font-weight:700; backdrop-filter:blur(8px); }
.dh-live-dot i { width:7px; height:7px; border-radius:50%; background:#45c987; box-shadow:0 0 0 5px rgba(69,201,135,.12); }
.dh-wave { position:absolute; z-index:1; top:50%; left:calc(50% + 85px); display:flex; align-items:center; gap:5px; height:50px; transform:translateY(-50%); }
.dh-wave i { width:5px; border-radius:5px; background:#6c63d6; animation:dh-wave 1.1s ease-in-out infinite alternate; }
.dh-wave i:nth-child(1),.dh-wave i:nth-child(5) { height:14px; }.dh-wave i:nth-child(2),.dh-wave i:nth-child(4) { height:28px; animation-delay:.18s; }.dh-wave i:nth-child(3) { height:44px; animation-delay:.32s; }
.dh-paper { position:relative; z-index:1; width:260px; min-height:160px; padding:24px 22px; border:1px solid rgba(135,154,187,.24); border-radius:16px; background:rgba(255,255,255,.9); box-shadow:0 20px 45px rgba(55,84,120,.14); transform:rotate(-2deg); }
.dh-paper:before { position:absolute; inset:12px -9px -9px 12px; z-index:-1; border:1px solid rgba(135,154,187,.2); border-radius:16px; background:rgba(255,255,255,.6); content:""; }
.dh-paper > div { display:grid; grid-template-columns:25px 1fr 42px; align-items:center; gap:9px; margin-bottom:13px; }
.dh-paper b { color:#77849b; font-size:9px; }.dh-paper i { height:6px; border-radius:5px; background:#dce4ee; }.dh-paper em { height:18px; border:1px solid #d3dce8; border-radius:5px; }
.dh-paper strong { display:flex; gap:7px; margin-top:21px; }.dh-paper strong span { width:25px; height:25px; border-radius:7px; background:#eef0ff; }.dh-paper strong span:nth-child(-n+4) { background:#6b62d6; }

.dh-mode-card__body { position:relative; display:flex; flex-direction:column; padding:30px 32px 28px; }
.dh-mode-card__index { position:absolute; top:22px; right:30px; color:#e4e8ef; font-size:42px; font-weight:800; letter-spacing:-.07em; }
.dh-mode-card__tag { align-self:flex-start; padding:6px 9px; border-radius:6px; background:#f1f1ff; color:#5d54c4; font-size:10px; font-weight:800; letter-spacing:.06em; }
.dh-mode-card h2 { margin:16px 0 10px; font-size:27px; letter-spacing:-.02em; }
.dh-mode-card__body > p { margin:0; color:var(--dh-muted); font-size:14px; line-height:1.8; text-wrap:pretty; }
.dh-mode-card ul { display:grid; gap:10px; margin:21px 0 26px; padding:0; list-style:none; color:#4e596d; font-size:13px; }
.dh-mode-card li { display:flex; align-items:center; gap:9px; }.dh-mode-card li i { display:grid; place-items:center; width:19px; height:19px; border-radius:50%; background:#e8f7f0; color:#2b9a64; font-size:14px; }
.dh-mode-card__foot { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-top:auto; padding-top:22px; border-top:1px solid #e7ebf1; }
.dh-mode-card__foot > span { color:#8590a2; font-size:11px; }
.dh-mode-card__foot button,.dt-primary-button { display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:43px; padding:0 18px; border:0; border-radius:10px; background:#252a3c; color:#fff; font-size:13px; font-weight:700; cursor:pointer; transition:background .18s ease,transform .18s ease; }
.dh-mode-card__foot button:hover,.dt-primary-button:hover { background:#5149ba; transform:translateY(-1px); }
.dh-mode-card__foot button i { font-size:19px; }
.dh-note { display:flex; align-items:center; justify-content:center; gap:10px; max-width:1380px; margin:22px auto 0; color:#7b8798; font-size:11px; text-align:center; }.dh-note i { color:#5e56bd; font-size:17px; }

@keyframes dh-wave { from { transform: scaleY(.6); opacity: .55; } to { transform: scaleY(1.12); opacity: 1; } }

/* ===== 考题能力诊断（dt-*）· 对齐首页蓝青成长设计语言 ===== */
.dt-page {
  padding: calc(84px + 18px) clamp(22px, 3.4vw, 52px) 48px;
  background:
    radial-gradient(circle at 6% 0%, rgba(23, 105, 255, .06), transparent 30%),
    radial-gradient(circle at 96% 2%, rgba(28, 185, 157, .055), transparent 26%),
    #f3f8fb;
  color: #0b294a;
}
.dt-header { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 18px; max-width: 1380px; margin: 0 auto 22px; padding-bottom: 20px; border-bottom: 1px solid #e1eaf2; }
.dt-back { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid #d9e5ef; border-radius: 13px; background: #fff; color: #234664; cursor: pointer; transition: border-color .16s ease, color .16s ease, box-shadow .16s ease; }
.dt-back:hover { border-color: #9cc3ff; color: #1769ff; box-shadow: 0 8px 20px rgba(23, 105, 255, .12); }
.dt-back i { font-size: 25px; }
.dt-header > div:nth-child(2) > span { color: #1769ff; font-size: 10px; font-weight: 800; letter-spacing: .17em; }
.dt-header h1 { margin: 5px 0 3px; font-size: 26px; letter-spacing: -.01em; color: #0a294b; }
.dt-header p { margin: 0; color: #7b8fa2; font-size: 12.5px; }
.dt-save-state { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 15px; border: 1px solid #d9e5ef; border-radius: 999px; background: #fff; color: #51677d; font-size: 11.5px; font-weight: 600; }
.dt-save-state i { font-size: 16px; color: #93a3b2; }
.dt-save-state::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #c3d0dd; }
.dt-save-state.is-saving { border-color: #b9d4ff; background: #f4f9ff; color: #1769ff; }
.dt-save-state.is-saving::before { background: #1769ff; animation: dt-pulse 1s ease-in-out infinite; }
.dt-save-state.is-saved { border-color: #bfe8da; background: #f2fbf7; color: #128f77; }
.dt-save-state.is-saved::before { background: #18b497; }
.dt-save-state.is-failed { border-color: #f3d9c2; background: #fff7ef; color: #c05f1c; }
.dt-save-state.is-failed::before { background: #d66a25; }
@keyframes dt-pulse { 50% { opacity: .3; } }

.dt-workspace { display: grid; grid-template-columns: 304px minmax(0, 1fr); gap: 22px; max-width: 1380px; margin: 0 auto; align-items: start; }
.dt-progress-panel, .dt-question-shell, .dt-report, .dt-state-card {
  border: 1px solid #d9e5ef; border-radius: 18px; background: #fff;
  box-shadow: 0 14px 40px rgba(32, 75, 112, .07);
}

/* 左侧：诊断驾驶舱 */
.dt-progress-panel { position: sticky; top: 18px; padding: 26px 24px 22px; }
.dt-progress-panel h2 { margin: 8px 0 20px; font-size: 21px; color: #123858; }
.dt-progress-ring {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 3px;
  width: 154px; height: 154px; margin: 0 auto 8px; border-radius: 50%;
  background:
    radial-gradient(circle at center, #fff 63%, transparent 64%),
    conic-gradient(#1769ff calc(var(--progress) * 1%), #1cb99d 0, #e3edf5 0);
}
.dt-progress-ring strong { font-size: 38px; font-weight: 800; color: #0c3158; line-height: 1; }
.dt-progress-ring span { color: #7c8fa2; font-size: 13px; font-weight: 600; }
.dt-progress-panel > p { margin: 6px 0 20px; color: #7b8fa2; font-size: 12px; line-height: 1.7; text-align: center; text-wrap: pretty; }

.dt-panel-block { margin-bottom: 18px; padding-top: 16px; border-top: 1px solid #edf3f8; }
.dt-panel-block__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 11px; }
.dt-panel-block__head span { color: #123858; font-size: 12.5px; font-weight: 800; }
.dt-panel-block__head b { color: #1769ff; font-size: 11px; font-weight: 800; }

.dt-nav-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 7px; }
.dt-nav-cell {
  position: relative; height: 38px; border: 1.5px solid #e3ebf2; border-radius: 10px;
  background: #fff; color: #51677d; font-size: 12.5px; font-weight: 700; cursor: pointer;
  transition: border-color .14s ease, background .14s ease, color .14s ease, transform .14s ease, box-shadow .14s ease;
}
.dt-nav-cell:hover { border-color: #9cc3ff; color: #1769ff; transform: translateY(-1px); }
.dt-nav-cell.is-answered { border-color: #b9d4ff; background: #e8f2ff; color: #1769ff; }
.dt-nav-cell.is-marked { border-color: #f3d9c2; background: #fff7ef; color: #c05f1c; }
.dt-nav-cell.is-marked::after { content: ""; position: absolute; top: 5px; right: 5px; width: 6px; height: 6px; border-radius: 50%; background: #f29a38; }
.dt-nav-cell.is-current {
  border-color: transparent; color: #fff;
  background: linear-gradient(120deg, #1769ff, #1cb99d);
  box-shadow: 0 8px 18px rgba(23, 105, 255, .28); transform: translateY(-1px);
}
.dt-nav-cell.is-current:hover { color: #fff; }

.dt-dims { display: grid; gap: 11px; }
.dt-dim__head { display: flex; justify-content: space-between; margin-bottom: 5px; font-size: 11px; }
.dt-dim__head span { color: #51677d; }
.dt-dim__head b { color: #0c3158; }
.dt-dim i { display: block; overflow: hidden; height: 7px; border-radius: 99px; background: #e6eef5; }
.dt-dim em { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #1769ff, #1cb99d); transition: width .3s ease; }

.dt-progress-panel dl { margin: 4px 0 18px; }
.dt-progress-panel dl div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid #edf3f8; font-size: 11px; }
.dt-progress-panel dt { color: #8a97a8; }
.dt-progress-panel dd { margin: 0; color: #153b5c; font-weight: 700; }
.dt-quiet-button { min-height: 40px; padding: 0 16px; border: 1px solid #d9e5ef; border-radius: 10px; background: #fff; color: #51677d; font-size: 12px; font-weight: 700; cursor: pointer; transition: border-color .15s ease, color .15s ease; }
.dt-quiet-button:hover { border-color: #9cc3ff; color: #1769ff; }
.dt-progress-panel > .dt-quiet-button { width: 100%; }

/* 右侧：答卷工作台 */
.dt-question-shell { overflow: hidden; min-height: 620px; padding: 0 32px 30px; }
.dt-shell-top { padding: 20px 2px 16px; border-bottom: 1px solid #edf3f8; }
.dt-question-topline { display: flex; justify-content: space-between; align-items: center; padding: 0 0 12px; color: #7c8fa2; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; }
.dt-question-topline strong { color: #1769ff; font-size: 13px; }
.dt-progress-bar { overflow: hidden; height: 8px; border-radius: 99px; background: #e6eef5; }
.dt-progress-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #1769ff, #1cb99d); transition: width .35s ease; }

/* —— dwm 题目卡覆盖（仅作用于本页） —— */
.dt-page .dwm-questionnaire { padding: 26px 4px 0; }
.dt-page .dwm-question-card { border: 0; box-shadow: none; background: transparent; }
.dt-page .dwm-question-card__head { padding-top: 0; border-bottom: 0; }
.dt-page .dwm-question-meta span:first-child { color: #0e7f6b; background: #e8faf4; border-radius: 999px; padding: 0 12px; min-height: 28px; }
.dt-page .dwm-question-meta span + span { color: #5d5ce8; background: #f1edff; border-radius: 999px; padding: 0 12px; min-height: 28px; }
.dt-page .dwm-question-card__head > strong { min-height: 28px; display: inline-flex; align-items: center; padding: 0 13px; border-radius: 999px; background: #eaf3ff; color: #1769ff; font-size: 11.5px; }
.dt-page .dwm-question-card h3 { margin: 24px 0 22px; color: #0a294b; font-size: 21px; font-weight: 700; line-height: 1.62; letter-spacing: -.005em; }

.dt-page .dwm-question-options { counter-reset: dtq; gap: 12px; }
.dt-page .dwm-question-option {
  counter-increment: dtq;
  grid-template-columns: 30px minmax(0, 1fr); gap: 14px;
  min-height: 58px; padding: 13px 16px;
  border: 1.5px solid #dfe7ee; border-radius: 13px;
  color: #234664; font-size: 13.5px; line-height: 1.6;
}
.dt-page .dwm-question-option:hover { border-color: #9cc3ff; background: #f8fbff; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(32, 75, 112, .08); }
.dt-page .dwm-question-option__mark {
  width: 30px; height: 30px; border: 1.5px solid #d7e2ec; border-radius: 9px;
  background: #f4f8fc; font-size: 12.5px; font-weight: 800;
}
.dt-page .dwm-question-option__mark::before { content: counter(dtq, upper-alpha); color: #7d90a3; }
.dt-page .dwm-question-option.is-selected {
  border-color: #1769ff;
  background: linear-gradient(100deg, #f3f8ff, #effbf7);
  box-shadow: 0 10px 26px rgba(23, 105, 255, .14);
  color: #0a294b; font-weight: 600;
}
.dt-page .dwm-question-option.is-selected .dwm-question-option__mark { border: 0; background: linear-gradient(120deg, #1769ff, #1cb99d); }
.dt-page .dwm-question-option.is-selected .dwm-question-option__mark::before { color: #fff; }
.dt-page .dwm-question-card__actions { margin-top: 26px; padding-top: 18px; border-top: 1px solid #edf3f8; }

.dt-page .dwm-button { border-radius: 11px; font-weight: 700; }
.dt-page .dwm-button--quiet { border-color: #d9e5ef; background: #fff; color: #51677d; }
.dt-page .dwm-button--quiet:hover:not(:disabled) { border-color: #9cc3ff; color: #1769ff; }
.dt-page .dwm-button--review { border-color: #f3d9c2; background: #fff7ef; color: #c05f1c; }
.dt-page .dwm-button--review:hover:not(:disabled) { border-color: #eda863; }
.dt-page .dwm-button--review.is-active { border-color: #d66a25; background: #d66a25; color: #fff; }
.dt-page .dwm-button--primary {
  margin-left: auto; border: 0; color: #fff;
  background: linear-gradient(100deg, #1769ff, #1cb99d);
  box-shadow: 0 12px 26px rgba(23, 105, 255, .24);
}
.dt-page .dwm-button--primary:hover:not(:disabled) { filter: brightness(1.06); transform: translateY(-1px); }
.dt-page .dwm-button--primary:disabled { opacity: .45; box-shadow: none; }

/* 状态卡 */
.dt-state-card { max-width: 760px; margin: 90px auto; padding: 70px 35px; text-align: center; }
.dt-state-card > i { display: inline-grid; place-items: center; width: 84px; height: 84px; margin-bottom: 6px; border-radius: 24px; background: #eaf3ff; color: #1769ff; font-size: 44px; }
.dt-state-card h2 { margin: 16px 0 8px; color: #123858; }
.dt-state-card p { color: #7b8fa2; }
.dt-state-card button { min-height: 42px; padding: 0 20px; margin-top: 16px; border: 0; border-radius: 11px; background: linear-gradient(100deg, #1769ff, #1cb99d); color: #fff; font-weight: 700; cursor: pointer; }
.dt-state-card--error > i { background: #fdeeea; color: #d64550; }

/* 报告页 */
.dt-report { max-width: 1080px; margin: 26px auto; padding: 0 0 28px; overflow: hidden; }
.dt-report__hero {
  display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 18px;
  margin: 0 0 8px; padding: 34px 34px 30px; color: #fff;
  background: linear-gradient(115deg, #0d315c, #1769ff 62%, #5264e6);
}
.dt-report__hero > span { grid-column: 1 / -1; color: #a9d5ff; font-size: 10px; font-weight: 800; letter-spacing: .18em; }
.dt-report__hero > i { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: rgba(255, 255, 255, .16); color: #7df0d4; font-size: 34px; }
.dt-report__hero h2 { margin: 0 0 5px; font-size: 25px; color: #fff; }
.dt-report__hero p { margin: 0; color: #cfe4ff; font-size: 12.5px; }
.dt-report__hero > strong { color: #43e0bd; font-size: 46px; font-weight: 900; }
.dt-report__hero small { margin-left: 4px; color: #b7e9dd; font-size: 12px; }
.dt-report__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 26px; padding: 26px 34px 6px; }
.dt-report__grid article { padding: 15px 17px; border: 1px solid #e1eaf2; border-radius: 13px; background: #fbfdff; }
.dt-report__grid article > div { display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 12.5px; color: #51677d; }
.dt-report__grid b { color: #1769ff; font-size: 14px; }
.dt-report__grid article > i { display: block; overflow: hidden; height: 7px; border-radius: 99px; background: #e6eef5; }
.dt-report__grid em { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #1769ff, #1cb99d); }
.dt-report__narrative { margin: 18px 34px 8px; padding: 20px 22px; border: 1px solid #d9e5ef; border-radius: 14px; background: linear-gradient(150deg, #f6fbff, #f2fbf8); }
.dt-report__narrative > strong { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; color: #0e7f6b; font-size: 13px; }
.dt-report__narrative > strong > i { font-size: 17px; }
.dt-report__narrative > strong > span { margin-left: auto; color: #93a3b2; font-size: 10px; font-weight: 600; letter-spacing: .06em; }
.dt-report__narrative > div { font-size: 12.5px; color: #2c4a63; line-height: 1.9; }
.dt-report__narrative h3 { margin: 12px 0 6px; font-size: 13px; color: #123858; }
.dt-report__narrative p { margin: 0 0 6px; }
.dt-report__narrative ul, .dt-report__narrative ol { margin: 6px 0; padding-left: 20px; }
.dt-report__narrative li { margin: 3px 0; }
.dt-primary-button { background: linear-gradient(100deg, #1769ff, #1cb99d) !important; box-shadow: 0 12px 26px rgba(23, 105, 255, .24); }
.dt-report__actions { display: flex; justify-content: flex-end; gap: 10px; margin: 18px 34px 0; padding-top: 20px; border-top: 1px solid #edf3f8; }

@media (max-width: 980px) {
  .dt-workspace { grid-template-columns: 1fr; }
  .dt-progress-panel { position: static; }
  .dt-nav-grid { grid-template-columns: repeat(9, 1fr); }
}
@media (max-width: 680px) {
  .dt-page { padding: calc(64px + 14px) 14px 34px; }
  .dt-header { grid-template-columns: 44px 1fr; }
  .dt-save-state { grid-column: 1 / -1; justify-self: start; }
  .dt-question-shell { min-height: 560px; padding: 0 16px 22px; }
  .dt-nav-grid { grid-template-columns: repeat(6, 1fr); }
  .dt-report__hero { padding: 26px 22px 24px; grid-template-columns: 48px 1fr; }
  .dt-report__hero > strong { grid-column: 1 / -1; }
  .dt-report__grid { grid-template-columns: 1fr; padding: 22px 22px 4px; }
  .dt-report__narrative { margin: 16px 22px 6px; }
  .dt-report__actions { flex-direction: column-reverse; margin: 14px 22px 0; }
  .dt-report__actions button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .dt-nav-cell, .dt-page .dwm-question-option, .dt-page .dwm-button, .dt-progress-bar i, .dt-dim em { transition: none; }
  .dt-save-state.is-saving::before { animation: none; }
}