* { box-sizing: border-box; }
html { background: rgb(238, 241, 245); }
body { margin: 0px; font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif; color: rgb(51, 56, 68); background: rgb(238, 241, 245); letter-spacing: 0px; }
a { color: inherit; text-decoration: none; }
button { margin: 0px; padding: 0px; border: 0px; color: inherit; background: transparent; font: inherit; }
.phone { position: relative; width: 100%; max-width: 375px; min-height: 100vh; margin: 0px auto; overflow-x: hidden; background: rgb(255, 255, 255); }/* Chat page */
:root {
  --ink: #111536;
  --ink-soft: #293059;
  --muted: #8b95b2;
  --blue: #2f76ff;
  --violet: #6a5cff;
  --cyan: #18bfc9;
  --warm: #ff6a75;
  --green: #18b873;
  --red: #ff4d5f;
}

.chat-phone {
  max-width: 430px;
  min-height: max(100vh, 866px);
  overflow: hidden;
  background:
    radial-gradient(circle at 21% 8%, rgba(255, 235, 239, 0.72), transparent 29%),
    radial-gradient(circle at 92% 18%, rgba(207, 244, 255, 0.42), transparent 26%),
    linear-gradient(180deg, #f4f2ff 0%, #edf1ff 45%, #e7e9fb 100%);
  color: var(--ink);
  line-height: 1.2;
}

.chat-status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 50px;
  padding: 16px 36px 0 50px;
  color: #070914;
  font-size: 19.5px;
  font-weight: 800;
  line-height: 1;
}

.chat-time {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.contact-dot {
  position: relative;
  width: 12px;
  height: 16px;
  border-radius: 2px;
  background: #090a0e;
}

.contact-dot::before,
.contact-dot::after {
  content: "";
  position: absolute;
  left: 50%;
  background: #fff;
  transform: translateX(-50%);
}

.contact-dot::before {
  top: 3px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
}

.contact-dot::after {
  bottom: 2px;
  width: 8px;
  height: 4px;
  border-radius: 5px 5px 2px 2px;
}

.chat-status-icons {
  display: flex;
  align-items: center;
  gap: 8px;
}

.chat-signal {
  display: inline-flex;
  align-items: flex-end;
  gap: 4px;
  height: 20px;
}

.chat-signal i {
  display: block;
  width: 5px;
  border-radius: 3px;
  background: #030408;
}

.chat-signal i:nth-child(1) {
  height: 8px;
}

.chat-signal i:nth-child(2) {
  height: 12px;
}

.chat-signal i:nth-child(3) {
  height: 16px;
}

.chat-signal i:nth-child(4) {
  height: 20px;
}

.network-label {
  font-size: 19px;
  letter-spacing: 0;
}

.chat-battery {
  position: relative;
  width: 31px;
  height: 17px;
  border: 2px solid rgba(17, 17, 30, 0.42);
  border-radius: 6px;
}

.chat-battery::before {
  content: "";
  position: absolute;
  top: 5px;
  right: -5px;
  width: 2px;
  height: 7px;
  border-radius: 0 2px 2px 0;
  background: rgba(17, 17, 30, 0.42);
}

.chat-battery::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 4px;
  width: 7px;
  height: 8px;
  border-radius: 3px;
  background: #05060a;
}

.chat-nav {
  position: relative;
  z-index: 30;
  display: flex;
  align-items: center;
  height: 48px;
  padding: 0 20px;
}

.chat-back-button,
.chat-nav button {
  border: 0;
  font: inherit;
}

.chat-back-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-left: -4px;
  padding: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.34) 58%, rgba(255, 255, 255, 0.18) 100%);
  border-radius: 50%;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.7),
    0 8px 18px rgba(73, 85, 155, 0.1);
  backdrop-filter: blur(12px);
}

.chat-back-button svg {
  width: 27px;
  height: 27px;
  stroke: currentColor;
  stroke-width: 2.65;
  fill: none;
  filter: drop-shadow(0 2px 3px rgba(30, 34, 93, 0.12));
  stroke-linecap: round;
  stroke-linejoin: round;
}

.chat-nav-actions {
  display: flex;
  align-items: center;
  gap: 0;
  margin-left: auto;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.66);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow:
    0 10px 24px rgba(80, 85, 148, 0.11),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(12px);
}

.chat-nav-actions.is-guide-active {
  position: relative;
  z-index: 40;
  overflow: visible;
  border-color: rgba(255, 255, 255, 0.95);
  background: #fff;
  box-shadow:
    0 0 0 5px rgba(84, 135, 255, 0.24),
    0 15px 34px rgba(42, 65, 150, 0.24);
}

.question-pill,
.history-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  border-radius: 18px;
  background: transparent;
  color: var(--ink);
}

.question-pill.is-guide-target,
.history-pill.is-guide-target {
  position: relative;
  z-index: 41;
  color: var(--blue);
}

.question-pill.is-guide-target::before,
.history-pill.is-guide-target::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: inherit;
  background: rgba(49, 107, 255, 0.1);
}

.question-pill.is-guide-target > svg,
.history-pill.is-guide-target > svg {
  position: relative;
  z-index: 1;
}

.question-pill {
  position: relative;
  width: 47px;
  border-radius: 18px 0 0 18px;
}

.question-pill::after {
  content: "";
  position: absolute;
  right: 0;
  width: 1px;
  height: 18px;
  background: rgba(190, 198, 222, 0.48);
}

.history-pill {
  width: 51px;
  border-radius: 0 18px 18px 0;
}

.question-pill svg,
.history-pill svg {
  width: 21px;
  height: 21px;
  stroke: currentColor;
  stroke-width: 2.1;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.chat-hero {
  position: relative;
  height: 126px;
  overflow: hidden;
}

.chat-thread {
  position: relative;
  height: calc(max(100vh, 866px) - 98px);
  padding-bottom: 28px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
  scroll-padding: 10px 0 32px;
  scrollbar-width: none;
}

.chat-thread::-webkit-scrollbar {
  display: none;
}

.hero-watermark {
  position: absolute;
  left: 38px;
  right: 18px;
  bottom: -2px;
  color: rgba(255, 255, 255, 0.34);
  font-size: 88px;
  font-weight: 900;
  line-height: 0.8;
  letter-spacing: 4px;
  pointer-events: none;
}

.hero-person {
  position: absolute;
  left: 16px;
  top: 6px;
  z-index: 1;
  width: 130px;
  height: 156px;
  object-fit: contain;
  object-position: center top;
}

.hero-copy {
  position: relative;
  z-index: 2;
  margin-left: 134px;
  padding-top: 22px;
  padding-right: 18px;
  color: var(--ink);
  font-weight: 900;
}

.hero-copy p,
.hero-copy strong {
  display: block;
  margin: 0;
  line-height: 1.45;
}

.hero-copy p {
  color: #2755d7;
  font-size: 20px;
  text-shadow: 0 2px 8px rgba(79, 104, 213, 0.12);
}

.hero-copy strong {
  font-size: 18px;
  font-weight: 900;
}

.review-shell {
  position: relative;
  z-index: 3;
  margin: 0 12px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.94);
  border-radius: 28px;
  background: rgba(241, 244, 255, 0.68);
  box-shadow:
    0 18px 38px rgba(103, 108, 185, 0.11),
    inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

.review-card {
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.75);
}

.review-card {
  margin-bottom: 10px;
  padding: 17px 16px 16px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  background:
    radial-gradient(circle at 90% 0%, rgba(231, 248, 255, 0.52), transparent 30%),
    rgba(248, 250, 255, 0.93);
  box-shadow:
    0 10px 26px rgba(94, 108, 183, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.review-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.title-mark {
  flex: 0 0 auto;
  width: 5px;
  height: 27px;
  border-radius: 5px;
  background: var(--blue);
}

.review-card-head div {
  display: grid;
  gap: 4px;
}

.review-card-head strong {
  color: var(--ink);
  font-size: 18px;
  font-weight: 900;
  line-height: 1.18;
}

.rate-summary {
  display: grid;
  grid-template-columns: minmax(96px, 1fr) 78px minmax(96px, 1fr);
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 11px 12px 10px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow:
    0 9px 22px rgba(70, 82, 160, 0.07),
    inset 0 0 0 1px rgba(232, 237, 255, 0.72);
}

.rate-item {
  display: grid;
  gap: 5px;
}

.rate-item.is-target {
  text-align: right;
}

.rate-item span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.rate-item strong {
  color: var(--warm);
  font-size: 29px;
  font-weight: 900;
  line-height: 1;
}

.rate-item.is-target strong {
  color: var(--blue);
}

.rate-compare {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 4px;
  color: var(--violet);
}

.rate-compare i {
  position: relative;
  display: block;
  width: 100%;
  height: 7px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--warm) 0%, var(--violet) 49%, var(--blue) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.36);
}

.rate-compare i::before,
.rate-compare i::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 12px;
  height: 12px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: currentColor;
  box-shadow:
    0 0 0 3px rgba(255, 106, 117, 0.12),
    0 4px 10px rgba(45, 53, 132, 0.2);
  transform: translateY(-50%);
}

.rate-compare i::before {
  left: -2px;
  background: var(--warm);
}

.rate-compare i::after {
  right: -2px;
  background: var(--blue);
  box-shadow:
    0 0 0 3px rgba(31, 111, 255, 0.14),
    0 4px 10px rgba(31, 111, 255, 0.22);
}

.rate-compare em {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  height: 21px;
  border-radius: 12px;
  background: #f1f4ff;
  color: #5661e9;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
  box-shadow: inset 0 0 0 1px rgba(118, 101, 255, 0.08);
}

.review-note {
  margin-top: 13px;
  padding-top: 14px;
  padding-bottom: 14px;
  border-top: 1px dashed rgba(158, 169, 205, 0.48);
  border-bottom: 1px dashed rgba(158, 169, 205, 0.48);
}

.review-note p {
  margin: 0;
  color: var(--ink);
  font-size: 15.5px;
  font-weight: 800;
  line-height: 1.58;
}

.review-plan {
  margin-top: 13px;
}

.review-plan p {
  margin: 0 0 12px;
  color: var(--ink-soft);
  font-size: 15.5px;
  font-weight: 800;
  line-height: 1.46;
}

.review-plan ol {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  counter-reset: review-step;
  list-style: none;
}

.review-plan li {
  counter-increment: review-step;
  position: relative;
  min-height: 28px;
  padding-left: 38px;
  color: #223050;
  font-size: 15px;
  font-weight: 800;
  line-height: 28px;
}

.review-plan li::before {
  content: counter(review-step);
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: #fff;
  background: var(--blue);
  font-size: 13px;
  font-weight: 900;
}

.review-plan li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 13px;
  top: 28px;
  width: 2px;
  height: 8px;
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(24, 191, 201, 0.34), rgba(47, 118, 255, 0.08));
}

.next-step-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 48px;
  margin-top: 18px;
  border-radius: 24px;
  color: #fff;
  background:
    linear-gradient(90deg, #6757ff 0%, #2f76ff 58%, #15bfc9 100%);
  box-shadow:
    0 11px 22px rgba(47, 118, 255, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
  font-size: 17px;
  font-weight: 900;
  transition:
    transform 0.16s ease,
    box-shadow 0.16s ease,
    background-color 0.16s ease,
    color 0.16s ease;
}

.next-step-button:active:not(:disabled) {
  transform: scale(0.985);
}

.next-step-button.is-vip-gate {
  background:
    linear-gradient(90deg, #ff9f3d 0%, #ffcf5a 54%, #ffd977 100%);
  color: #4d3000;
  box-shadow:
    0 11px 22px rgba(214, 133, 25, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

.next-step-button:disabled,
.next-step-button.is-started {
  color: #7983a0;
  background: #eef2fe;
  box-shadow: inset 0 0 0 1px rgba(205, 216, 246, 0.94);
}

.free-quota-tip {
  display: flex;
  justify-content: center;
  margin: 10px 0 0;
  color: #303852;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.3;
}

.free-quota-tip.is-used-up {
  color: #8c5613;
}

.diagnosis-flow {
  display: grid;
  gap: 14px;
  margin: 12px 14px 0;
  padding-right: 2px;
}

.flow-message {
  display: flex;
  width: 100%;
  animation: chat-message-in 0.22s ease-out both;
}

.system-message {
  justify-content: flex-start;
}

.user-message {
  justify-content: flex-end;
}

.loading-message {
  align-items: center;
  gap: 5px;
  width: fit-content;
  max-width: 72%;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 18px 18px 18px 6px;
  color: var(--ink-soft);
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(226, 232, 255, 0.9);
  font-size: 14px;
  font-weight: 800;
}

.loading-message i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--blue);
  animation: typing-dot 1s infinite ease-in-out;
}

.loading-message i:nth-child(3) {
  animation-delay: 0.15s;
}

.loading-message i:nth-child(4) {
  animation-delay: 0.3s;
}

.user-bubble {
  max-width: 82%;
  padding: 11px 14px;
  border-radius: 18px 18px 6px 18px;
  color: #fff;
  background: linear-gradient(90deg, #6757ff 0%, #2f76ff 100%);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.45;
}

.system-bubble {
  max-width: 86%;
  padding: 12px 14px;
  border-radius: 18px 18px 18px 6px;
  color: var(--ink);
  background: #fff;
  box-shadow:
    inset 0 0 0 1px rgba(226, 232, 255, 0.92),
    0 10px 22px rgba(70, 82, 160, 0.08);
  font-size: 14px;
  font-weight: 750;
  line-height: 1.58;
}

.flow-question-card {
  position: relative;
  overflow: hidden;
  padding: 16px 15px 16px;
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.99) 0%, rgba(250, 252, 255, 0.99) 100%),
    radial-gradient(circle at 92% 0%, rgba(235, 247, 255, 0.72), transparent 30%),
    rgba(255, 255, 255, 0.98);
  box-shadow:
    inset 0 0 0 1px rgba(225, 232, 255, 0.98),
    0 16px 32px rgba(70, 82, 160, 0.13);
  animation: chat-message-in 0.24s ease-out both;
}

.flow-question-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, #5c64ff 0%, #2f76ff 58%, #18bfc9 100%);
}

.flow-question-card.is-pinpoint::before {
  background: linear-gradient(90deg, #ff7b6e 0%, #ff9a4d 58%, #ffd15c 100%);
}

.flow-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 28px;
  padding: 5px 0 12px;
}

.flow-head-title {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex: 1 1 auto;
}

.flow-think-mark {
  position: relative;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, #5d7cff 0%, #2f76ff 100%);
  box-shadow: 0 4px 10px rgba(47, 118, 255, 0.22);
}

.flow-question-card.is-pinpoint .flow-think-mark {
  background: linear-gradient(135deg, #ff7b6e 0%, #ff9a4d 100%);
  box-shadow: 0 4px 10px rgba(255, 122, 88, 0.2);
}

.flow-think-mark::before,
.flow-think-mark::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: #fff;
  border-radius: 999px;
  transform: translate(-50%, -50%);
}

.flow-think-mark::before {
  width: 9px;
  height: 2px;
}

.flow-think-mark::after {
  width: 2px;
  height: 9px;
}

.flow-card-head strong {
  display: block;
  flex: 0 1 auto;
  min-width: 0;
  margin: 0;
  color: var(--ink);
  font-size: 14.5px;
  font-weight: 900;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flow-type-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 21px;
  padding: 0 8px;
  border-radius: 11px;
  color: var(--blue);
  background: rgba(47, 118, 255, 0.1);
  font-size: 11.5px;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.flow-question-card.is-pinpoint .flow-type-badge {
  color: #e2653f;
  background: rgba(255, 139, 78, 0.13);
}

.flow-progress {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: auto 16px;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.flow-progress em {
  display: block;
  color: #8a92ad;
  font-size: 11.5px;
  font-weight: 900;
  font-style: normal;
  line-height: 1;
}

.flow-progress strong {
  margin: 0;
  color: var(--blue);
  font-size: 13.5px;
}

.flow-progress i {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background:
    radial-gradient(circle, #fff 0 42%, transparent 43%),
    conic-gradient(var(--blue) 0 var(--progress), #dbe3ff var(--progress) 100%);
}

.flow-question-text {
  margin: 2px 0 15px;
  padding: 11px 0 0;
  border-top: 1px dashed rgba(158, 169, 205, 0.38);
  color: var(--ink);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.58;
}

.flow-options {
  display: grid;
  grid-template-columns: 1fr;
  gap: 11px;
}

.flow-option {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  width: 100%;
  min-height: 56px;
  padding: 12px 13px;
  border: 1px solid #dbe4f7;
  border-radius: 16px;
  color: var(--ink-soft);
  background: linear-gradient(180deg, #fbfcff 0%, #f6f8ff 100%);
  font-size: 13.5px;
  font-weight: 800;
  line-height: 1.36;
  text-align: left;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.86),
    0 5px 12px rgba(71, 88, 150, 0.04);
  transition:
    transform 0.14s ease,
    border-color 0.16s ease,
    background-color 0.16s ease,
    color 0.16s ease,
    opacity 0.16s ease;
}

.flow-option-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: var(--blue);
  background: #eef4ff;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
}

.flow-option-text {
  display: block;
  min-width: 0;
  padding-top: 1px;
}

.flow-option:active:not(:disabled) {
  transform: scale(0.992);
}

.flow-option.is-selected,
.flow-question-card.is-answered .flow-option.is-correct-answer {
  border-color: var(--blue);
  color: #fff;
  background: linear-gradient(90deg, #5c64ff 0%, #2f76ff 100%);
  box-shadow: 0 8px 18px rgba(47, 118, 255, 0.18);
}

.flow-option.is-selected .flow-option-key,
.flow-question-card.is-answered .flow-option.is-correct-answer .flow-option-key {
  color: var(--blue);
  background: #fff;
}

.flow-question-card.is-answered .flow-option.is-user-wrong {
  border-color: #ff5d73;
  color: #fff;
  background: linear-gradient(90deg, #ff6b7c 0%, #ff4d61 100%);
  box-shadow: 0 8px 18px rgba(255, 93, 115, 0.2);
  opacity: 1;
}

.flow-question-card.is-answered .flow-option.is-user-wrong .flow-option-key {
  color: #ff5d73;
  background: #fff;
}

.flow-question-card.is-answered .flow-option:not(.is-selected):not(.is-correct-answer):not(.is-user-wrong) {
  opacity: 0.56;
}

.flow-option:disabled,
.flow-confirm-button:disabled {
  cursor: default;
}

.flow-confirm-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 40px;
  margin-top: 12px;
  border-radius: 20px;
  color: #fff;
  background: var(--blue);
  font-size: 14px;
  font-weight: 900;
  transition:
    transform 0.14s ease,
    background-color 0.16s ease,
    color 0.16s ease,
    opacity 0.16s ease;
}

.flow-confirm-button:active:not(:disabled) {
  transform: scale(0.99);
}

.flow-confirm-button:disabled {
  color: #9aa4bd;
  background: #edf1fb;
}

.flow-summary-card {
  position: relative;
  overflow: visible;
  padding: 0 13px 13px;
  border-radius: 20px;
  background: #fff;
  box-shadow:
    inset 0 0 0 1px rgba(223, 230, 251, 0.96),
    0 16px 34px rgba(70, 82, 160, 0.13);
  animation: chat-message-in 0.24s ease-out both;
}

.flow-summary-card::before {
  display: none;
}

.report-head {
  position: relative;
  display: block;
  min-height: 184px;
  margin: 0 -13px 12px;
  padding: 82px 15px 16px;
  overflow: hidden;
  border: 1px solid rgba(69, 111, 255, 0.46);
  border-radius: 20px 20px 18px 18px;
  background:
    radial-gradient(circle at 50% -12px, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0.18) 29%, transparent 54%),
    linear-gradient(135deg, #625cff 0%, #3f67ff 46%, #1f7dff 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    inset 0 -1px 0 rgba(255, 255, 255, 0.18);
}

.report-head::before,
.report-head::after {
  position: absolute;
  top: 56px;
  color: rgba(255, 255, 255, 0.09);
  font-size: 35px;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
  pointer-events: none;
}

.report-head::before {
  content: "PRESENTATION";
  left: 50%;
  transform: translateX(-50%);
}

.report-head::after {
  content: "";
  left: 15px;
  right: 15px;
  top: 112px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.24), transparent);
}

.report-mascot {
  position: absolute;
  left: 50%;
  top: -10px;
  z-index: 2;
  width: 124px;
  height: 124px;
  object-fit: contain;
  transform: translateX(-50%);
  pointer-events: none;
}

.report-head-bar {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0;
  color: #fff;
}

.report-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 0;
  width: 100%;
  text-align: center;
}

.report-title strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 19px;
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: 16px;
  color: #fff;
  background: rgba(255, 255, 255, 0.15);
  box-shadow:
    inset 0 0 0 1px rgba(91, 143, 255, 0.1),
    0 9px 20px rgba(41, 45, 166, 0.14);
  text-shadow: 0 2px 8px rgba(42, 43, 145, 0.25);
  font-size: 17.5px;
  font-weight: 900;
  line-height: 1;
}

.report-head p {
  position: relative;
  z-index: 3;
  margin: 12px auto 0;
  max-width: 342px;
  padding: 0 3px;
  color: #fff;
  background: transparent;
  text-shadow: 0 2px 8px rgba(36, 38, 130, 0.24);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.68;
}

.report-overview {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(88px, 2fr);
  align-items: stretch;
  gap: 10px;
  margin-top: 10px;
}

.report-radar {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 8px;
  min-height: 214px;
  padding: 30px 8px 10px;
  border-radius: 16px;
  background: linear-gradient(180deg, #f8faff 0%, #f2f6ff 100%);
  box-shadow:
    inset 0 0 0 1px rgba(218, 227, 255, 0.95),
    0 8px 18px rgba(72, 91, 166, 0.05);
}

.report-radar > strong {
  position: absolute;
  top: 11px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 9px;
  border-radius: 11px;
  color: #2368de;
  background: #eaf2ff;
  box-shadow: inset 0 0 0 1px rgba(94, 146, 255, 0.18);
  font-size: 11.5px;
  font-weight: 900;
  line-height: 1;
}

.report-radar svg {
  width: 198px;
  height: 150px;
  margin-top: 0;
  overflow: hidden;
}

.report-radar line,
.report-radar .radar-grid {
  stroke: #cfd9f5;
  stroke-width: 1.3;
  fill: none;
}

.report-radar .radar-grid.is-inner {
  stroke-dasharray: 3 3;
}

.report-radar .radar-area {
  fill: rgba(47, 118, 255, 0.22);
  stroke: var(--blue);
  stroke-width: 2.4;
}

.report-radar .radar-weak-link {
  fill: none;
  stroke: var(--red);
  stroke-linecap: round;
  stroke-width: 2.8;
}

.report-radar .radar-dot {
  fill: #fff;
  stroke-width: 2;
}

.report-radar .radar-dot.is-strong {
  fill: var(--blue);
  stroke: #ffffff;
}

.report-radar .radar-dot.is-weak {
  fill: var(--red);
  stroke: #ffffff;
}

.report-radar .radar-point-label {
  pointer-events: none;
}

.report-radar .radar-point-label line {
  stroke-width: 1.1;
  stroke-dasharray: 2.5 2.5;
}

.report-radar .radar-point-label rect {
  fill: rgba(255, 255, 255, 0.96);
  stroke-width: 1.2;
  filter: drop-shadow(0 3px 6px rgba(63, 82, 150, 0.12));
}

.report-radar .radar-label-name {
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
  text-anchor: middle;
}

.report-radar .radar-point-label.is-strong line,
.report-radar .radar-point-label.is-strong rect {
  stroke: rgba(47, 118, 255, 0.32);
}

.report-radar .radar-point-label.is-strong .radar-label-name {
  fill: var(--blue);
}

.report-radar .radar-point-label.is-weak line,
.report-radar .radar-point-label.is-weak rect {
  stroke: rgba(235, 75, 91, 0.34);
}

.report-radar .radar-point-label.is-weak .radar-label-name {
  fill: var(--red);
}

.axis-top {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.axis-right {
  top: 39px;
  right: 0;
  text-align: right;
}

.axis-bottom-right {
  right: 4px;
  bottom: 0;
  text-align: right;
}

.axis-bottom-left {
  left: 4px;
  bottom: 0;
}

.axis-left {
  top: 39px;
  left: 0;
}

.report-counts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.report-counts div {
  display: grid;
  align-content: center;
  min-height: 81px;
  padding: 10px 11px;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(249, 251, 255, 0.98));
  box-shadow:
    inset 0 0 0 1px rgba(221, 229, 251, 0.96),
    0 9px 20px rgba(70, 82, 160, 0.06);
}

.report-counts span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
}

.report-counts strong {
  margin-top: 7px;
  color: var(--ink);
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
}

.report-counts div:first-child strong {
  color: var(--warm);
}

.report-counts div:last-child strong {
  color: var(--blue);
}

.report-feedback {
  display: grid;
  gap: 18px;
  margin-top: 18px;
}

.report-section {
  padding: 8px 4px 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.report-section span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 9px;
  border-radius: 11px;
  font-size: 11.5px;
  font-weight: 900;
  line-height: 1;
}

.report-section span::before {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
}

.report-section p {
  margin: 13px 0 0;
  color: var(--ink-soft);
  font-size: 13.5px;
  font-weight: 750;
  line-height: 1.72;
}

.report-section.is-good {
  background: transparent;
}

.report-section.is-good span::before {
  content: "赞";
  background: #18bfc9;
}

.report-section.is-good span {
  color: #167c8f;
  background: rgba(24, 191, 201, 0.13);
}

.report-section.is-weak {
  background: transparent;
}

.report-section.is-weak span::before {
  content: "!";
  background: var(--warm);
}

.report-section.is-weak span {
  color: #d94d5b;
  background: rgba(255, 106, 117, 0.13);
}

.report-section ol {
  display: grid;
  gap: 15px;
  margin: 14px 0 0;
  padding: 0;
  counter-reset: report-issue;
  list-style: none;
}

.report-section li {
  counter-increment: report-issue;
  position: relative;
  padding-left: 34px;
  color: var(--ink-soft);
  font-size: 13.5px;
  font-weight: 750;
  line-height: 1.72;
}

.report-section li strong {
  color: var(--ink);
  font-weight: 900;
}

.report-section li::before {
  content: counter(report-issue);
  position: absolute;
  left: 0;
  top: 1px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: #fff;
  background: var(--warm);
  font-size: 10.5px;
  font-weight: 900;
  line-height: 1;
}

.flow-summary-card button {
  width: 100%;
  height: 42px;
  margin-top: 12px;
  border-radius: 21px;
  color: #fff;
  background: linear-gradient(90deg, #5c64ff 0%, #2f76ff 100%);
  box-shadow: 0 10px 22px rgba(47, 118, 255, 0.2);
  font-size: 15px;
  font-weight: 900;
}

.resource-decision-card {
  padding: 16px 13px 14px;
  border-radius: 22px;
  background:
    radial-gradient(circle at 76% 0%, rgba(137, 238, 233, 0.26), transparent 40%),
    linear-gradient(180deg, #e8f9ff 0%, #f7fbff 100%);
  box-shadow:
    inset 0 0 0 1px rgba(219, 231, 255, 0.9),
    0 14px 30px rgba(70, 82, 160, 0.09);
  animation: chat-message-in 0.24s ease-out both;
}

.resource-decision-head {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}

.resource-decision-head span {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 9px;
  border-radius: 11px;
  color: var(--blue);
  background: #eaf2ff;
  font-size: 11.5px;
  font-weight: 900;
}

.resource-decision-head strong {
  color: var(--ink);
  font-size: 19px;
  font-weight: 900;
  line-height: 1.2;
}

.resource-decision-head p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 13.5px;
  font-weight: 750;
  line-height: 1.62;
}

.resource-strategy-list {
  display: grid;
  gap: 12px;
}

.resource-strategy-card {
  display: grid;
  gap: 0;
  width: 100%;
  padding: 13px 12px;
  border-radius: 22px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.96);
  box-shadow:
    inset 0 0 0 1px rgba(220, 229, 255, 0.92),
    0 12px 26px rgba(70, 82, 160, 0.08);
  text-align: left;
  cursor: pointer;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    background 180ms ease;
}

.resource-strategy-card + .resource-strategy-card {
  margin-top: 0;
}

.resource-strategy-card:active {
  transform: scale(0.995);
}

.resource-strategy-summary {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 62px;
  align-items: center;
  gap: 10px;
}

.resource-strategy-summary i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 13px;
  background: linear-gradient(135deg, #eef4ff, #e3ebff);
  box-shadow: inset 0 0 0 1px rgba(70, 118, 255, 0.12);
}

.resource-strategy-summary i::before {
  content: "";
  width: 17px;
  height: 17px;
  border-radius: 6px;
  background: linear-gradient(135deg, #5c64ff, #2f76ff);
  box-shadow: 0 6px 12px rgba(47, 118, 255, 0.22);
}

.resource-strategy-copy {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.resource-strategy-copy strong {
  color: var(--blue);
  font-size: 17px;
  font-weight: 900;
  line-height: 1.28;
}

.resource-strategy-copy small {
  color: var(--ink-soft);
  font-size: 12.8px;
  font-weight: 760;
  line-height: 1.52;
}

.resource-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 30px;
  padding: 0 12px;
  border: 1px solid rgba(94, 104, 255, 0.22);
  border-radius: 15px;
  color: #4c55d8;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(223, 231, 255, 0.82);
  font-size: 11.5px;
  font-weight: 900;
  white-space: nowrap;
  cursor: pointer;
}

.resource-strategy-card.is-done {
  background: linear-gradient(180deg, #fbfdff 0%, #f4f8ff 100%);
}

.resource-strategy-card.is-expanded {
  gap: 14px;
  background:
    radial-gradient(circle at 100% 0%, rgba(47, 118, 255, 0.12), transparent 34%),
    rgba(255, 255, 255, 0.98);
}

.resource-strategy-card.is-done .resource-strategy-summary i::before {
  content: "✓";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px;
  font-weight: 900;
}

.resource-strategy-card.is-done .resource-status {
  color: #fff;
  background: var(--blue);
  box-shadow: none;
}

.resource-support-block .resource-material-page {
  margin-top: 10px;
}

.resource-inline-detail {
  display: grid;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid rgba(216, 226, 255, 0.92);
}

.resource-inline-complete-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 40px;
  border-radius: 20px;
  color: #fff;
  background: linear-gradient(90deg, #326dff 0%, #5a43ff 100%);
  box-shadow: 0 10px 20px rgba(47, 118, 255, 0.18);
  font-size: 13.5px;
  font-weight: 900;
}

.resource-inline-complete-button.is-done,
.resource-inline-complete-button:disabled {
  color: var(--blue);
  background: #edf4ff;
  box-shadow: inset 0 0 0 1px rgba(198, 214, 255, 0.96);
}

.resource-choice-panel {
  display: grid;
  gap: 10px;
  margin-top: 13px;
  padding: 14px 12px 12px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 90% 0%, rgba(47, 118, 255, 0.12), transparent 38%),
    #fff;
  box-shadow:
    inset 0 0 0 1px rgba(214, 225, 255, 0.95),
    0 10px 22px rgba(70, 82, 160, 0.08);
}

.resource-choice-panel > span {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 9px;
  border-radius: 11px;
  color: var(--blue);
  background: #eaf2ff;
  font-size: 11.5px;
  font-weight: 900;
}

.resource-choice-panel h3 {
  margin: 0;
  color: var(--ink);
  font-size: 17px;
  font-weight: 900;
  line-height: 1.28;
}

.resource-choice-panel p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.5;
}

.resource-choice-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 2px;
}

.resource-choice-actions button {
  height: 40px;
  border-radius: 20px;
  font-size: 13.5px;
  font-weight: 900;
  white-space: nowrap;
}

.resource-choice-primary {
  color: #fff;
  background: #cfd8ef;
  box-shadow: inset 0 0 0 1px rgba(161, 174, 211, 0.35);
  cursor: not-allowed;
}

.resource-choice-panel.is-ready .resource-choice-primary {
  background: linear-gradient(90deg, #326dff 0%, #5a43ff 100%);
  box-shadow: 0 10px 20px rgba(47, 118, 255, 0.22);
  cursor: pointer;
}

@keyframes typing-dot {
  0%,
  80%,
  100% {
    opacity: 0.35;
    transform: translateY(0);
  }
  40% {
    opacity: 1;
    transform: translateY(-2px);
  }
}

@keyframes chat-message-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .chat-thread {
    scroll-behavior: auto;
  }

  .flow-message,
  .flow-question-card,
  .flow-summary-card,
  .loading-message i {
    animation: none;
  }

  .next-step-button,
  .flow-option,
  .flow-confirm-button {
    transition: none;
  }
}

.voice-button {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  color: var(--ink);
}

.voice-button svg {
  stroke: currentColor;
  stroke-width: 2.35;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.voice-button svg {
  width: 22px;
  height: 22px;
}

.is-hidden {
  display: none !important;
}

.screen-mask {
  position: absolute;
  inset: 0;
  z-index: 32;
  background: rgba(17, 21, 54, 0.34);
  backdrop-filter: blur(2px);
}

.onboarding-guide {
  position: absolute;
  inset: 0;
  z-index: 36;
  pointer-events: none;
}

.guide-scrim {
  position: absolute;
  inset: 0;
  background: rgba(13, 18, 48, 0.54);
  backdrop-filter: blur(2px);
  pointer-events: auto;
}

.guide-callout {
  position: absolute;
  z-index: 37;
  display: none;
  width: 205px;
  padding: 12px 14px 13px;
  border: 1px solid rgba(212, 224, 255, 0.95);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 18px 36px rgba(20, 28, 84, 0.24);
  pointer-events: auto;
}

.onboarding-guide[data-guide-step="question"] .guide-callout-question,
.onboarding-guide[data-guide-step="history"] .guide-callout-history {
  display: block;
}

.guide-callout::before {
  content: "";
  position: absolute;
  top: -30px;
  width: 2px;
  height: 30px;
  border-radius: 2px;
  background: #fff;
}

.guide-callout::after {
  content: "";
  position: absolute;
  top: -38px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow:
    0 0 0 3px #fff,
    0 0 0 8px rgba(49, 107, 255, 0.2);
}

.guide-callout span {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: 10px;
  color: var(--blue);
  background: #eef4ff;
  font-size: 11px;
  font-weight: 900;
}

.guide-callout strong {
  display: block;
  margin-top: 7px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 900;
  line-height: 1.38;
}

.guide-callout-question {
  top: 112px;
  right: 65px;
}

.guide-callout-question::before {
  right: 26px;
}

.guide-callout-question::after {
  right: 20px;
}

.guide-callout-history {
  top: 112px;
  right: 14px;
}

.guide-callout-history::before {
  right: 25px;
}

.guide-callout-history::after {
  right: 19px;
}

.guide-done-button {
  position: absolute;
  right: 22px;
  top: 248px;
  z-index: 37;
  min-width: 96px;
  height: 40px;
  padding: 0 18px;
  border-radius: 20px;
  color: #fff;
  background: var(--blue);
  box-shadow: 0 12px 26px rgba(49, 107, 255, 0.3);
  font-size: 14px;
  font-weight: 900;
  pointer-events: auto;
}

.onboarding-guide[data-guide-step="question"] .guide-done-button {
  right: 65px;
  top: 196px;
}

.onboarding-guide[data-guide-step="history"] .guide-done-button {
  right: 14px;
  top: 196px;
}

.resource-mask {
  position: absolute;
  inset: 0;
  z-index: 32;
  background: rgba(17, 21, 54, 0.48);
  backdrop-filter: blur(3px);
}

.resource-sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 34;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  height: min(720px, calc(100% - 74px));
  max-height: calc(100% - 74px);
  padding: 10px 18px 18px;
  border-radius: 26px 26px 0 0;
  background:
    linear-gradient(180deg, rgba(238, 248, 255, 0.98) 0%, rgba(255, 255, 255, 0.98) 38%);
  box-shadow: 0 -22px 48px rgba(20, 31, 82, 0.24);
}

.chat-phone.is-strategy-detail-page .chat-thread {
  display: none;
}

.chat-phone.is-strategy-detail-page .chat-nav-actions {
  visibility: hidden;
  pointer-events: none;
}

.chat-phone.is-strategy-detail-page .resource-sheet {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  z-index: 1;
  height: calc(max(100vh, 866px) - 98px);
  max-height: calc(max(100vh, 866px) - 98px);
  min-height: calc(max(100vh, 866px) - 98px);
  padding-top: 18px;
  border-radius: 0;
  background:
    radial-gradient(circle at 100% 0%, rgba(47, 118, 255, 0.09), transparent 36%),
    linear-gradient(180deg, rgba(238, 248, 255, 0.98) 0%, rgba(255, 255, 255, 0.98) 38%);
  box-shadow: none;
}

.chat-phone.is-strategy-detail-page .resource-sheet-handle {
  display: none;
}

.resource-sheet-handle {
  justify-self: center;
  width: 54px;
  height: 5px;
  margin-bottom: 16px;
  border-radius: 999px;
  background: #c3d2ea;
}

.resource-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.resource-sheet-head span {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 9px;
  border-radius: 11px;
  color: var(--blue);
  background: #eaf2ff;
  font-size: 11.5px;
  font-weight: 900;
}

.resource-sheet-head h2 {
  margin: 8px 0 0;
  color: var(--ink);
  font-size: 22px;
  font-weight: 900;
  line-height: 1.15;
}

.resource-sheet-close {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--ink);
  background: #eef3ff;
}

.resource-sheet-close svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 2.3;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.resource-sheet-body {
  display: grid;
  gap: 12px;
  min-height: 0;
  overflow: auto;
  padding: 1px 0 14px;
  overscroll-behavior: contain;
}

.resource-detail-block {
  padding: 14px;
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: inset 0 0 0 1px rgba(220, 229, 255, 0.86);
}

.resource-detail-block span {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 9px;
  border-radius: 11px;
  color: #5b61d8;
  background: #eef0ff;
  font-size: 11.5px;
  font-weight: 900;
}

.resource-detail-block p {
  margin: 10px 0 0;
  color: var(--ink-soft);
  font-size: 14.2px;
  font-weight: 760;
  line-height: 1.68;
}

.resource-material-entry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 46px;
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  color: var(--ink);
  background: linear-gradient(180deg, #f8fbff 0%, #eef5ff 100%);
  box-shadow: inset 0 0 0 1px rgba(68, 134, 255, 0.22);
  font-family: inherit;
  text-align: left;
}

.resource-material-entry::after {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-right: 2px solid #3b73ff;
  border-bottom: 2px solid #3b73ff;
  transform: rotate(-45deg);
}

.resource-material-entry strong {
  min-width: 0;
  color: var(--ink);
  font-size: 14.2px;
  font-weight: 900;
  line-height: 1.35;
}

.resource-material-entry em {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 9px;
  border-radius: 12px;
  color: #fff;
  background: var(--blue);
  font-size: 11.5px;
  font-style: normal;
  font-weight: 900;
}

.resource-material-page {
  display: grid;
  gap: 13px;
  padding: 15px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow:
    inset 0 0 0 1px rgba(220, 229, 255, 0.88),
    0 12px 24px rgba(70, 82, 160, 0.08);
}

.resource-material-page > span {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 9px;
  border-radius: 11px;
  color: #5b61d8;
  background: #eef0ff;
  font-size: 11.5px;
  font-weight: 900;
}

.resource-material-page h3 {
  margin: 0;
  color: var(--ink);
  font-size: 20px;
  font-weight: 950;
  line-height: 1.25;
}

.resource-material-page section {
  display: grid;
  gap: 7px;
  padding: 12px;
  border-radius: 15px;
  background: #f7fbff;
  box-shadow: inset 0 0 0 1px rgba(220, 229, 255, 0.82);
}

.resource-material-page section strong {
  color: var(--blue);
  font-size: 13px;
  font-weight: 900;
}

.resource-material-page section p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 780;
  line-height: 1.68;
}

.formula-variable-list {
  display: grid;
  gap: 8px;
}

.formula-variable-list p {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
}

.formula-variable-list b {
  color: var(--ink);
  font-weight: 950;
}

.formula-variable-list span {
  min-width: 0;
}

.resource-complete-button {
  width: 100%;
  height: 48px;
  margin-top: 0;
  border-radius: 24px;
  color: #fff;
  background: linear-gradient(90deg, #326dff 0%, #5a43ff 100%);
  box-shadow: 0 13px 26px rgba(47, 118, 255, 0.24);
  font-size: 16px;
  font-weight: 900;
}

.resource-sheet-actions {
  position: relative;
  z-index: 2;
  padding-top: 10px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.98) 42%);
  box-shadow: 0 -12px 18px rgba(238, 244, 255, 0.78);
}

.entry-modal {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  z-index: 34;
  display: flex;
  justify-content: center;
  padding: 0 24px;
  pointer-events: none;
  transform: translateY(-50%);
}

.entry-card {
  position: relative;
  width: min(100%, 328px);
  padding: 18px 16px 18px;
  border: 0;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 20px 48px rgba(25, 31, 74, 0.22);
  pointer-events: auto;
}

.entry-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 12px;
  border-radius: 999px;
  color: var(--blue);
  background: #f1f5ff;
  font-size: 12.5px;
  font-weight: 800;
}

.entry-badge strong {
  margin: 0 1px;
  font-size: inherit;
  font-weight: 900;
}

.entry-copy {
  margin: 16px 28px 0 0;
  color: #1d2958;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.58;
}

.entry-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 22px;
}

.entry-actions button {
  height: 42px;
  border-radius: 21px;
  font-size: 15px;
  font-weight: 800;
  white-space: nowrap;
}

.entry-secondary {
  color: #334368;
  background: #f3f5fa;
}

.entry-primary {
  color: #fff;
  background: linear-gradient(90deg, #3d7dff 0%, #2f76ff 100%);
}

.entry-close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: #4e5d86;
  background: #f4f5fa;
}

.entry-close svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 2.2;
}

.history-panel {
  position: absolute;
  left: 13px;
  right: 13px;
  top: 112px;
  bottom: 94px;
  z-index: 34;
}

.history-card {
  height: 100%;
  padding: 18px;
  border: 1px solid rgba(223, 230, 255, 0.96);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 18px 38px rgba(70, 82, 160, 0.16);
  overflow: auto;
}

.history-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.history-head span {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 11px;
  color: var(--blue);
  background: #eef4ff;
  font-size: 11px;
  font-weight: 900;
}

.question-source-card .question-stem > span,
.question-options > span {
  display: block;
  color: #7b88a6;
  font-size: 11.5px;
  font-weight: 900;
}

.history-head strong {
  display: block;
  margin-top: 4px;
  color: var(--ink);
  font-size: 20px;
  font-weight: 900;
}

.history-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: var(--ink);
  background: #f2f5ff;
}

.history-close svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 2.3;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.question-source-card {
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(223, 232, 255, 0.95);
  border-radius: 18px;
  background: linear-gradient(180deg, #f7faff 0%, #f2f6ff 100%);
}

.question-source-card .question-stem {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 13px 13px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: inset 0 0 0 1px rgba(229, 235, 255, 0.9);
}

.question-source-card p {
  margin: 0;
  color: #111a3a;
  font-size: 14.5px;
  font-weight: 800;
  line-height: 1.68;
}

.question-options {
  display: grid;
  gap: 8px;
}

.option-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.option-grid span {
  display: flex;
  align-items: center;
  min-height: 32px;
  padding: 8px 11px;
  border: 1px solid rgba(226, 233, 255, 0.92);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--ink-soft);
  font-size: 13.5px;
  font-weight: 900;
}

.option-grid .is-answer {
  color: #fff;
  background: var(--blue);
  border-color: transparent;
  box-shadow: 0 7px 15px rgba(47, 118, 255, 0.2);
}

.option-grid .is-user-selected:not(.is-answer) {
  color: #d9364c;
  border-color: rgba(245, 114, 128, 0.55);
  background: #fff0f2;
  box-shadow: inset 0 0 0 1px rgba(245, 114, 128, 0.2);
}

.history-choice-modal {
  position: absolute;
  inset: 0;
  z-index: 34;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 28px;
}

.history-choice-card {
  position: relative;
  display: grid;
  gap: 12px;
  width: 100%;
  padding: 20px;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 22px 48px rgba(25, 31, 74, 0.24);
}

.history-choice-close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  color: var(--ink-soft);
  background: #eef5ff;
  box-shadow: inset 0 0 0 1px rgba(198, 214, 255, 0.82);
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
}

.history-choice-card > span,
.history-tree-summary > span,
.history-current-card > span,
.history-leaf-record > span {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: 12px;
  color: var(--blue);
  background: #eaf2ff;
  font-size: 12px;
  font-weight: 900;
}

.history-choice-card h2 {
  margin: 0;
  color: var(--ink);
  font-size: 20px;
  font-weight: 900;
}

.history-choice-card p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 760;
  line-height: 1.6;
}

.history-choice-actions {
  display: grid;
  gap: 10px;
}

.history-choice-actions button,
.history-page-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border-radius: 22px;
  color: #fff;
  background: linear-gradient(90deg, #326dff 0%, #5a43ff 100%);
  box-shadow: 0 10px 20px rgba(47, 118, 255, 0.22);
  font-size: 14px;
  font-weight: 900;
  text-decoration: none;
}

.history-choice-actions button + button {
  color: var(--blue);
  background: #eef5ff;
  box-shadow: inset 0 0 0 1px rgba(198, 214, 255, 0.96);
}

.history-page-phone {
  max-width: 430px;
  min-height: max(100vh, 866px);
  overflow-x: hidden;
  overflow-y: auto;
  background: linear-gradient(180deg, #f7efff 0%, #eef4ff 48%, #e8edfb 100%);
  color: var(--ink);
}

.history-page-nav {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px 14px;
}

.history-page-nav div {
  display: grid;
  gap: 4px;
}

.history-page-nav span {
  color: var(--blue);
  font-size: 12px;
  font-weight: 900;
}

.history-page-nav strong {
  color: var(--ink);
  font-size: 21px;
  font-weight: 900;
}

.history-current-card,
.history-tree-summary {
  display: grid;
  gap: 12px;
  margin: 0 14px 14px;
  padding: 16px 14px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 18px 38px rgba(70, 82, 160, 0.14);
}

.history-current-card h1,
.history-tree-summary strong {
  margin: 0;
  color: var(--ink);
  font-size: 20px;
  font-weight: 900;
}

.history-path,
.history-tree-summary p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 760;
  line-height: 1.58;
}

.history-record-kpis {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border-radius: 18px;
  background: #f7faff;
}

.history-record-kpis div {
  display: grid;
  gap: 5px;
  justify-items: center;
}

.history-record-kpis span {
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 900;
}

.history-record-kpis strong {
  color: var(--ink);
  font-size: 20px;
  font-weight: 900;
}

.history-record-kpis .is-up strong {
  color: var(--blue);
}

.history-record-kpis i {
  color: var(--blue);
  font-style: normal;
  font-weight: 900;
}

.history-record-section {
  display: grid;
  gap: 8px;
  padding: 13px;
  border-radius: 16px;
  background: rgba(247, 250, 255, 0.92);
}

.history-record-section h2 {
  margin: 0;
  color: var(--blue);
  font-size: 13px;
  font-weight: 900;
}

.history-record-section p,
.history-record-section li {
  margin: 0;
  color: var(--ink-soft);
  font-size: 13.5px;
  font-weight: 760;
  line-height: 1.62;
}

.history-record-section ul {
  display: grid;
  gap: 7px;
  margin: 0;
  padding-left: 18px;
}

.history-transcript-summary {
  display: grid;
  gap: 9px;
  margin: 14px;
  padding: 16px 14px;
  border-radius: 20px;
  background:
    radial-gradient(circle at 88% 0%, rgba(47, 118, 255, 0.12), transparent 34%),
    #fff;
  box-shadow:
    inset 0 0 0 1px rgba(223, 230, 251, 0.96),
    0 14px 30px rgba(70, 82, 160, 0.1);
}

.history-transcript-summary > span,
.history-chat-section > span {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  height: 23px;
  padding: 0 9px;
  border-radius: 12px;
  color: var(--blue);
  background: #eaf2ff;
  font-size: 11.5px;
  font-weight: 900;
}

.history-transcript-summary h1 {
  margin: 0;
  color: var(--ink);
  font-size: 18px;
  font-weight: 900;
  line-height: 1.32;
}

.history-transcript-summary p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.58;
}

.history-transcript,
.history-all-records {
  display: grid;
  gap: 12px;
  margin: 0 14px 18px;
}

.history-chat-section {
  display: grid;
  gap: 8px;
}

.history-chat-bubble,
.history-chat-card {
  padding: 12px 14px;
  border-radius: 18px;
  color: var(--ink);
  background: #fff;
  box-shadow:
    inset 0 0 0 1px rgba(226, 232, 255, 0.92),
    0 10px 22px rgba(70, 82, 160, 0.08);
  font-size: 13.5px;
  font-weight: 750;
  line-height: 1.58;
}

.history-chat-bubble.is-user {
  justify-self: end;
  max-width: 82%;
  color: #fff;
  background: linear-gradient(90deg, #6757ff 0%, #2f76ff 100%);
  border-radius: 18px 18px 6px 18px;
}

.history-chat-bubble.is-system {
  justify-self: start;
  max-width: 88%;
  border-radius: 18px 18px 18px 6px;
}

.history-chat-card {
  display: grid;
  gap: 8px;
}

.history-chat-card.is-report {
  background: linear-gradient(180deg, #eef6ff 0%, #ffffff 100%);
  box-shadow:
    inset 0 0 0 1px rgba(47, 118, 255, 0.22),
    0 12px 26px rgba(47, 118, 255, 0.1);
}

.history-chat-card strong {
  color: var(--ink);
  font-size: 15px;
  font-weight: 900;
}

.history-chat-card p,
.history-chat-card li {
  margin: 0;
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.58;
}

.history-chat-card ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 18px;
}

.history-topic-record {
  display: grid;
  gap: 10px;
}

.history-topic-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-height: 48px;
  padding: 0 12px;
  border-radius: 16px;
  color: var(--ink);
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(214, 225, 255, 0.92);
  text-align: left;
}

.history-topic-head span {
  overflow: hidden;
  font-size: 14px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.history-topic-head em {
  color: var(--blue);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.history-topic-body {
  display: grid;
  gap: 12px;
}

.history-page-primary {
  margin: 0 14px 24px;
}

.history-chat-snapshot {
  margin: 0 0 18px;
}

.history-chat-snapshot .chat-thread {
  padding-bottom: 18px;
}

.history-chat-snapshot button,
.history-chat-snapshot a,
.history-chat-snapshot input {
  pointer-events: none;
}

.history-chat-snapshot .verification-actions {
  display: none;
}

.history-snapshot-loading {
  margin: 0 14px 18px;
  padding: 14px;
  border-radius: 16px;
  color: var(--ink-soft);
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(214, 225, 255, 0.95);
  font-size: 13px;
  font-weight: 800;
}

.history-snapshot-frame {
  position: absolute;
  width: 1px;
  height: 1px;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

.history-tree {
  display: grid;
  gap: 9px;
  margin: 0 14px 24px;
}

.history-tree-node {
  display: grid;
  gap: 8px;
}

.history-tree-toggle,
.history-tree-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 18px;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 10px 12px;
  padding-left: calc(12px + (var(--level) - 1) * 12px);
  border-radius: 16px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.96);
  border: 0;
  box-shadow: inset 0 0 0 1px rgba(214, 225, 255, 0.95);
  font-family: inherit;
  text-align: left;
}

.history-tree-toggle span,
.history-tree-name {
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 900;
  white-space: nowrap;
}

.history-tree-toggle em,
.history-tree-row em {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 9px;
  border-radius: 12px;
  color: var(--blue);
  background: #eaf2ff;
  font-style: normal;
  font-size: 11.5px;
  font-weight: 900;
}

.history-tree-row i {
  color: var(--blue);
  font-size: 15px;
  font-style: normal;
  font-weight: 900;
  text-align: center;
}

.history-tree-row:disabled {
  cursor: default;
  opacity: 0.62;
}

.history-tree-node.is-open > .history-tree-toggle,
.history-tree-node.is-open > .history-tree-row {
  border-color: rgba(47, 118, 255, 0.6);
  background: #eef5ff;
}

.history-tree-children {
  display: grid;
  gap: 8px;
  margin-left: 10px;
  padding-left: 10px;
  border-left: 1px solid rgba(186, 204, 242, 0.85);
}

.history-leaf-record {
  display: grid;
  gap: 8px;
  margin-left: calc(var(--level) * 10px);
  padding: 13px;
  border-radius: 16px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(214, 225, 255, 0.95);
}

.history-leaf-record strong {
  color: var(--ink);
  font-size: 14px;
  font-weight: 900;
}

.history-leaf-record p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 12.5px;
  font-weight: 760;
  line-height: 1.55;
}

.history-leaf-record div {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--blue);
}

.history-leaf-record b {
  font-size: 15px;
  font-weight: 900;
}

.answer-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding-top: 3px;
}

.answer-summary div {
  display: grid;
  gap: 6px;
  min-height: 62px;
  padding: 10px 11px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: inset 0 0 0 1px rgba(213, 225, 255, 0.96);
}

.answer-summary span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
}

.answer-summary strong {
  color: var(--blue);
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
}

.answer-summary strong.is-wrong {
  color: var(--red);
}

.question-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.question-card {
  border-radius: 16px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(226, 232, 255, 0.9);
  overflow: hidden;
}

.question-card summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  padding: 0 13px;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}

.question-card summary::-webkit-details-marker {
  display: none;
}

.question-card summary span {
  color: var(--blue);
  font-size: 12px;
  font-weight: 900;
}

.question-card summary strong {
  font-size: 14px;
  font-weight: 900;
}

.question-card p {
  margin: 0;
  padding: 0 13px 10px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.5;
}

.question-card ol {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0 13px 13px;
  list-style: none;
}

.question-card li {
  padding: 9px 10px;
  border-radius: 12px;
  background: #f6f8ff;
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.45;
}

@media (max-width: 390px) {
  .hero-copy {
    margin-left: 166px;
  }

  .hero-copy p {
    font-size: 20px;
  }

  .hero-copy strong {
    font-size: 18.5px;
  }

  .review-card-head strong {
    font-size: 19px;
  }

  .rate-summary {
    grid-template-columns: minmax(88px, 1fr) 72px minmax(88px, 1fr);
  }

  .rate-item strong {
    font-size: 27px;
  }
}

/* Analysis page */
.analysis-phone {
  color: #2f3542;
  background: #fff;
  line-height: 1.2;
}

.status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 45px;
  padding: 15px 21px 0;
  color: #08090d;
  font-size: 15px;
  font-weight: 800;
}

.status-icons {
  display: flex;
  align-items: center;
  gap: 5px;
}

.signal {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 13px;
}

.signal i {
  width: 3px;
  border-radius: 2px;
  background: currentColor;
}

.signal i:nth-child(1) { height: 5px; }
.signal i:nth-child(2) { height: 7px; }
.signal i:nth-child(3) { height: 10px; }
.signal i:nth-child(4) { height: 12px; }

.wifi {
  position: relative;
  width: 15px;
  height: 11px;
  border: 2px solid currentColor;
  border-bottom: 0;
  border-radius: 14px 14px 0 0;
}

.wifi::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -3px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  transform: translateX(-50%);
}

.battery {
  position: relative;
  width: 21px;
  height: 10px;
  border: 1.8px solid currentColor;
  border-radius: 3px;
}

.battery::before {
  content: "";
  position: absolute;
  right: -4px;
  top: 3px;
  width: 2px;
  height: 4px;
  border-radius: 0 2px 2px 0;
  background: currentColor;
}

.battery::after {
  content: "";
  position: absolute;
  inset: 2px 4px 2px 2px;
  border-radius: 2px;
  background: currentColor;
}

.top-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  padding: 0 16px;
}

.analysis-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 31px;
  height: 31px;
  color: #343945;
}

.icon-button svg {
  width: 21px;
  height: 21px;
  stroke: currentColor;
  stroke-width: 2.1;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.question-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 18px 16px;
}

.type-tag {
  color: #a2a7b0;
  font-size: 11px;
  font-weight: 700;
}

.question-count {
  color: #606672;
  font-size: 15px;
  font-weight: 700;
}

.question-block {
  padding: 18px 16px 38px;
}

.question-stem {
  margin: 0 0 25px;
  color: #2f333d;
  font-size: 16px;
  font-weight: 700;
  line-height: 2;
}

.options {
  display: grid;
  gap: 25px;
}

.option {
  display: grid;
  grid-template-columns: 38px 1fr;
  column-gap: 14px;
  align-items: start;
  color: #50545d;
  font-size: 15px;
  line-height: 1.65;
}

.single-question-phone {
  min-height: 100vh;
  background: #fff;
}

.single-question-block {
  min-height: calc(100vh - 137px);
  padding-bottom: 72px;
}

.single-answer-option {
  width: 100%;
  min-height: 48px;
  padding: 7px 9px 7px 0;
  border-radius: 8px;
  text-align: left;
  transition: background-color 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

.single-answer-option:active {
  transform: scale(0.99);
}

.single-answer-option.is-selected {
  background: #eef5ff;
  color: #1c63d5;
}

.single-answer-option.is-selected .choice {
  border-color: #2f76ff;
  background: #2f76ff;
  color: #fff;
}

.choice {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 33px;
  height: 33px;
  border: 1px solid #e9edf3;
  border-radius: 50%;
  background: #fff;
  color: #9ca3ad;
  font-size: 14px;
  font-weight: 800;
}

.choice.correct {
  border-color: var(--green);
  background: var(--green);
  color: #fff;
}

.choice.wrong {
  border-color: var(--red);
  background: var(--red);
  color: #fff;
}

.option.is-user-selected:not(.is-correct-answer) .choice {
  border-color: var(--red);
  background: var(--red);
  color: #fff;
}

.option.is-user-selected:not(.is-correct-answer) {
  color: #d9364c;
}

.option.is-correct-answer .choice {
  border-color: var(--green);
  background: var(--green);
  color: #fff;
}

.option.is-correct-answer {
  color: #1b7d55;
  font-weight: 800;
}

.section-separator {
  height: 8px;
  background: #f4f6fa;
}

.answer-section,
.content-section {
  padding: 16px;
  background: #fff;
}

.answer-card {
  overflow: hidden;
  border: 1px solid #eef1f6;
  border-radius: 8px;
  background: #f8fafc;
}

.answer-main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 17px 18px 13px;
}

.answer-main h2 {
  margin: 0 0 11px;
  color: var(--green);
  font-size: 16px;
  line-height: 1;
}

.answer-main p {
  margin: 0;
  color: #747d8e;
  font-size: 13px;
  font-weight: 700;
}

.answer-main strong {
  margin-left: 8px;
  color: var(--green);
}

.answer-divider {
  margin-left: 14px;
}

.answer-main strong.is-wrong {
  color: var(--red);
}

.answer-card.is-wrong-answer .answer-main h2 {
  color: var(--red);
}

.answer-card.is-wrong-answer .mastered-pill {
  background: #fff0f2;
  color: #d9364c;
}

.mastered-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 75px;
  height: 25px;
  margin-top: 1px;
  border-radius: 14px;
  background: #eef2f6;
  color: #8a93a1;
  font-size: 12px;
  font-weight: 700;
}

.time-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0 18px;
  padding: 12px 0;
  border-top: 1px dashed #dde3ec;
  border-bottom: 1px dashed #dde3ec;
}

.time-item {
  display: grid;
  gap: 5px;
}

.time-item em {
  color: #8d95a6;
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
}

.time-item strong {
  color: #242a36;
  font-size: 14px;
}

.answer-insight {
  position: relative;
  margin: 14px 14px 15px;
  padding: 25px 12px 12px;
  border: 1px solid #edf0f6;
  border-radius: 8px;
  background: #fff;
}

.insight-head {
  display: block;
}

.insight-topic {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.insight-topic span,
.rate-pill em {
  color: #8c94a4;
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
}

.insight-topic span {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 9px;
  border-radius: 8px 0 8px 0;
  color: #3b7cff;
  background: #eef6ff;
  font-size: 10px;
  font-weight: 900;
}

.insight-topic strong {
  color: #262c3b;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.35;
}

.gap-chip {
  display: inline-flex;
  align-items: center;
  min-height: 0;
  padding: 0;
  border-radius: 0;
  color: #ff3f4a;
  background: transparent;
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
}

.insight-rates {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 11px;
}

.rate-pill {
  position: relative;
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 9px 11px;
  border: 1px solid #edf0f6;
  border-radius: 8px;
  background: #f8fafc;
}

.rate-pill strong {
  color: #252b39;
  font-size: 21px;
  font-weight: 900;
  line-height: 1;
}

.rate-pill.is-low {
  border-color: #ffd8dd;
  background: #fff7f8;
}

.rate-pill.is-low em {
  padding-right: 0;
}

.rate-pill.is-low strong {
  color: #ff3f4a;
}

.flow-cta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 46px;
  margin-top: 12px;
  padding: 0 13px;
  overflow: hidden;
  border: 1px solid #e2e4ff;
  border-radius: 14px;
  color: #17163f;
  background: linear-gradient(180deg, #faf9ff 0%, #f3f2ff 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  font-weight: 900;
}

.flow-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 0%, rgba(129, 147, 255, 0.18) 46%, transparent 72%);
  transform: translateX(-100%);
  animation: flow-soft-sheen 2.8s ease-in-out infinite;
}

.flow-main,
.flow-dot,
.flow-sub,
.flow-chevron {
  position: relative;
  z-index: 1;
}

.flow-main {
  color: #17163f;
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

.flow-dot {
  width: 4px;
  height: 4px;
  margin: 0 9px;
  border-radius: 50%;
  background: #9da0b4;
}

.flow-sub {
  color: #878b9e;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.flow-chevron {
  width: 9px;
  height: 9px;
  margin-left: 8px;
  border-top: 2px solid #8d90a4;
  border-right: 2px solid #8d90a4;
  transform: rotate(45deg);
}

@keyframes flow-soft-sheen {
  0%,
  38% { transform: translateX(-105%); }
  72%,
  100% { transform: translateX(105%); }
}

.section-title {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 16px;
  color: #26314c;
  font-size: 17px;
  font-weight: 900;
}

.section-title::before {
  content: "";
  width: 4px;
  height: 16px;
  border-radius: 4px;
  background: var(--red);
}

.video-card {
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 88px;
  padding: 16px;
  border-radius: 8px;
  background: radial-gradient(circle at 92% 18%, rgba(255, 255, 255, 0.42), transparent 23%), linear-gradient(135deg, #39435f 0%, #182033 100%);
  color: #fff;
}

.video-play {
  position: relative;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
}

.video-play::after {
  content: "";
  position: absolute;
  left: 17px;
  top: 12px;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-left: 13px solid #fff;
}

.video-card strong {
  display: block;
  font-size: 15px;
  font-weight: 900;
}

.video-card p {
  margin: 6px 0 0;
  color: rgba(255, 255, 255, 0.74);
  font-size: 12px;
  line-height: 1.45;
}

.text-explain {
  display: grid;
  gap: 14px;
  color: #4d535e;
  font-size: 15px;
  line-height: 1.8;
}

.text-explain p {
  margin: 0;
}

.text-explain strong {
  color: #2e3542;
}

.explain-point {
  position: relative;
  padding-left: 15px;
}

.explain-point::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--blue);
}

.knowledge-break-card {
  position: relative;
  overflow: hidden;
  margin-top: 17px;
  border-radius: 20px;
  background: linear-gradient(180deg, #f0efff 0%, #e9ecff 100%);
  box-shadow: 0 10px 22px rgba(87, 91, 194, 0.12);
}

.clinic-hero {
  position: relative;
  min-height: 124px;
  padding: 12px 18px 0;
  overflow: hidden;
  border-radius: 20px 20px 0 0;
  background: radial-gradient(circle at 16% 0%, rgba(255, 255, 255, 0.68), transparent 28%), linear-gradient(135deg, #7069ff 0%, #5757f6 56%, #646fff 100%);
}

.clinic-watermark {
  position: absolute;
  left: 18px;
  bottom: -17px;
  color: rgba(255, 255, 255, 0.14);
  font-size: 72px;
  font-weight: 900;
  line-height: 1;
}

.clinic-mascot {
  position: absolute;
  left: 50%;
  bottom: 2px;
  z-index: 1;
  width: 126px;
  height: 126px;
  object-fit: contain;
  object-position: center bottom;
  transform: translateX(-50%);
}

.clinic-top {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 34px;
}

.clinic-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #fff;
}

.clinic-title strong {
  color: #fff;
  font-size: 18px;
  font-weight: 900;
}

.clinic-title span,
.clinic-exit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.58);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
}

.clinic-title span {
  height: 20px;
  padding: 0 8px;
  border-radius: 10px;
}

.clinic-exit {
  width: 53px;
  height: 26px;
  border-radius: 15px;
  font-size: 12px;
}

.clinic-panel {
  position: relative;
  z-index: 3;
  margin-top: -22px;
  padding: 15px 17px 14px;
  border-radius: 18px 18px 20px 20px;
  background: #fff;
}

.clinic-steps {
  display: grid;
  grid-template-columns: 1fr 10px 1fr 10px 1fr;
  align-items: center;
  gap: 6px;
  color: #141743;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.clinic-steps i {
  position: relative;
  width: 10px;
  height: 8px;
}

.clinic-steps i::before,
.clinic-steps i::after {
  content: "";
  position: absolute;
  top: 3px;
  width: 6px;
  height: 6px;
  border-top: 1.5px solid #c0c5da;
  border-right: 1.5px solid #c0c5da;
  transform: rotate(45deg);
}

.clinic-steps i::after {
  left: 4px;
}

.clinic-divider {
  height: 10px;
  margin: 13px 0 12px;
  background: repeating-linear-gradient(135deg, transparent 0 3px, #e8ebf7 3px 4px);
}

.clinic-copy {
  color: #11143f;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.65;
}

.break-flow-btn,
.train-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 900;
}

.break-flow-btn {
  height: 40px;
  margin-top: 13px;
  border-radius: 21px;
  background: linear-gradient(90deg, #22bed1, #5576ff, #6a63ff);
  box-shadow: 0 8px 17px rgba(83, 104, 255, 0.18);
  font-size: 14px;
}

.break-card-note {
  margin: 8px 0 0;
  color: #9da6bd;
  font-size: 11px;
  line-height: 1.45;
}

.extend-card,
.training-card {
  padding: 14px;
  border-radius: 8px;
  background: #f8fafc;
  color: #4d5565;
  font-size: 14px;
  line-height: 1.75;
}

.extend-card p {
  margin: 0 0 10px;
}

.training-card {
  display: grid;
  gap: 13px;
  border: 1px solid #e7edf7;
}

.training-card h3 {
  margin: 0;
  color: #26314c;
  font-size: 16px;
}

.training-card p {
  margin: 7px 0 0;
  color: #7c8494;
  font-size: 13px;
}

.train-btn {
  width: 102px;
  height: 34px;
  border-radius: 18px;
  background: var(--red);
  font-size: 14px;
}

.train-badge {
  color: #a0a7b4;
  font-size: 11px;
}

.bottom-note {
  padding: 21px 0 28px;
  color: #b4bac4;
  background: #fff;
  text-align: center;
  font-size: 12px;
}

.home-indicator {
  width: 134px;
  height: 5px;
  margin: 0 auto 8px;
  border-radius: 5px;
  background: #111;
}

/* Light action-card version for the knowledge diagnosis entrance */
.knowledge-break-card {
  position: relative;
  overflow: hidden;
  margin-top: 22px;
  padding: 0 16px 14px;
  border: 1px solid #d9eaff;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(239, 249, 255, 0.96) 0%, rgba(250, 253, 255, 0.98) 100%);
  box-shadow: 0 8px 20px rgba(73, 129, 190, 0.1);
}

.action-hero {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 90px;
  padding: 31px 0 12px;
  overflow: visible;
  border-radius: 16px 16px 0 0;
}

.action-hero::before {
  display: none;
}

.action-mascot-crop {
  position: relative;
  top: -4px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 52px;
  width: 52px;
  height: 58px;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.action-mascot {
  position: relative;
  top: 0;
  width: 64px;
  height: 64px;
  object-fit: contain;
  object-position: center;
}

.action-hero-copy {
  position: relative;
  z-index: 4;
  flex: 1;
  min-width: 0;
  padding: 0 10px 0 0;
}

.action-kicker {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  height: 27px;
  padding: 0 12px;
  border-radius: 0 16px 0 12px;
  color: #fff;
  background: linear-gradient(135deg, #ff756a 0%, #ff4451 100%);
  box-shadow: 0 5px 12px rgba(255, 78, 88, 0.16);
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
}

.accuracy-meter {
  padding: 12px 0 15px;
  border-top: 1px solid #e4eefb;
  border-bottom: 1px solid #e4eefb;
}

.meter-values {
  display: grid;
  grid-template-columns: minmax(70px, 1fr) 62px minmax(70px, 1fr);
  align-items: end;
  gap: 8px;
}

.meter-values span {
  display: grid;
  gap: 5px;
}

.meter-values span:nth-child(3) {
  text-align: right;
}

.meter-values em {
  color: #8a94a8;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  line-height: 1;
}

.meter-values strong {
  color: #ff4a56;
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
}

.meter-values span:nth-child(3) strong {
  color: #20284a;
}

.meter-values small {
  color: #8a94a8;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
}

.meter-values .meter-gap {
  align-self: center;
  justify-items: center;
  gap: 2px;
  min-width: 0;
  padding: 5px 4px;
  border-radius: 999px;
  background: #fff1f3;
}

.meter-values .meter-gap em {
  color: #ff6670;
  font-size: 10px;
}

.meter-values .meter-gap strong {
  color: #ff3f4a;
  font-size: 16px;
}

.action-panel {
  position: relative;
  z-index: 5;
  margin-top: 4px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.action-title {
  margin: 0;
  color: #151a42;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.55;
}

.knowledge-topic {
  color: #1f6fff;
  font-weight: 900;
}

.action-pill {
  margin: 22px 0 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #34445f;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.65;
}

.action-pill strong {
  color: #1c55c9;
  font-weight: 900;
}

.action-button {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  margin: 20px 0 16px;
  border-radius: 13px;
  color: #fff;
  background: linear-gradient(90deg, #25bfd0 0%, #4e79ff 48%, #23c4d7 100%);
  background-size: 220% 100%;
  box-shadow: 0 8px 17px rgba(71, 114, 238, 0.2);
  font-size: 14px;
  font-weight: 900;
  animation: action-button-flow 2.6s ease-in-out infinite, action-button-breathe 2.2s ease-in-out infinite;
}

.action-button:active {
  transform: translateY(1px) scale(0.99);
}

@keyframes action-button-flow {
  0%,
  100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes action-button-breathe {
  0%,
  100% { box-shadow: 0 8px 17px rgba(71, 114, 238, 0.2); }
  50% { box-shadow: 0 11px 23px rgba(71, 114, 238, 0.32); }
}

@media (prefers-reduced-motion: reduce) {
  .action-button {
    animation: none;
  }
}

.knowledge-break-card .break-card-note {
  margin: 8px 0 0;
  color: #aab3c9;
  font-size: 11px;
  line-height: 1.35;
}

/* Verification loop */
.validation-modal {
  position: absolute;
  inset: 0;
  z-index: 34;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 28px;
}

.validation-card {
  width: 100%;
  max-width: 344px;
  padding: 24px 20px 20px;
  border: 1px solid rgba(220, 230, 255, 0.72);
  border-radius: 24px;
  color: var(--ink);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(246, 250, 255, 0.98) 100%);
  box-shadow: 0 24px 56px rgba(20, 31, 82, 0.26);
  text-align: center;
}

.validation-card img {
  width: 96px;
  height: 96px;
  object-fit: contain;
  margin-top: -74px;
}

.validation-card > span {
  display: inline-flex;
  align-items: center;
  height: 24px;
  margin-top: 2px;
  padding: 0 10px;
  border-radius: 12px;
  color: var(--blue);
  background: #eaf2ff;
  font-size: 12px;
  font-weight: 900;
}

.validation-card h2 {
  margin: 12px 0 10px;
  color: var(--ink);
  font-size: 22px;
  font-weight: 900;
  line-height: 1.18;
}

.validation-card p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 14.5px;
  font-weight: 800;
  line-height: 1.6;
  text-align: left;
}

.validation-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 18px;
}

.validation-actions button,
.validation-continue-button,
.verification-actions button,
.verify-primary,
.verify-report-button,
.verify-secondary,
.verify-submit {
  height: 44px;
  border-radius: 22px;
  font-size: 14.5px;
  font-weight: 900;
}

.validation-primary,
.verify-primary,
.verify-submit,
.verification-actions .is-primary,
.validation-continue-button {
  color: #fff;
  background: linear-gradient(90deg, #326dff 0%, #5a43ff 100%);
  box-shadow: 0 10px 22px rgba(47, 118, 255, 0.22);
}

.validation-secondary,
.verify-secondary,
.verification-actions button {
  color: var(--ink-soft);
  background: #f2f5ff;
  box-shadow: inset 0 0 0 1px rgba(214, 225, 255, 0.9);
}

.validation-standby-card,
.validation-finish-card,
.verification-transcript-card,
.verification-analysis-card,
.verification-report-card {
  display: grid;
  gap: 12px;
  padding: 16px 14px;
  border-radius: 20px;
  background: #fff;
  box-shadow:
    inset 0 0 0 1px rgba(223, 230, 251, 0.96),
    0 14px 30px rgba(70, 82, 160, 0.1);
  animation: chat-message-in 0.24s ease-out both;
}

.validation-standby-card > span,
.validation-finish-card > span,
.verification-transcript-head span,
.verification-transcript-foot span,
.verification-analysis-head span,
.verification-report-head span,
.verification-section span {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  height: 23px;
  padding: 0 9px;
  border-radius: 12px;
  color: var(--blue);
  background: #eaf2ff;
  font-size: 11.5px;
  font-weight: 900;
}

.validation-standby-card strong,
.validation-finish-card strong,
.verification-transcript-head strong,
.verification-transcript-foot strong,
.verification-analysis-head strong,
.verification-report-head strong {
  color: var(--ink);
  font-size: 18px;
  font-weight: 900;
  line-height: 1.32;
}

.validation-standby-card p,
.validation-finish-card p,
.verification-transcript-head p,
.verification-section p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 13.5px;
  font-weight: 750;
  line-height: 1.62;
}

.verification-transcript-card {
  background:
    linear-gradient(180deg, rgba(236, 246, 255, 0.72), rgba(255, 255, 255, 0) 32%),
    #fff;
}

.verification-transcript-head,
.verification-transcript-list {
  display: grid;
  gap: 10px;
}

.verification-transcript-controls {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 36px;
  align-items: center;
  gap: 10px;
  min-height: 36px;
}

.verification-transcript-controls button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 18px;
  color: var(--blue);
  background: #edf4ff;
  box-shadow: inset 0 0 0 1px rgba(198, 214, 255, 0.96);
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
}

.verification-transcript-controls button:disabled {
  color: #a8b1cc;
  background: #f4f6fb;
  box-shadow: inset 0 0 0 1px rgba(222, 231, 255, 0.92);
}

.verification-transcript-controls span {
  justify-self: center;
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
}

.verification-transcript-controls strong,
.verification-transcript-controls b {
  color: var(--blue);
  font-size: 15px;
  font-weight: 950;
}

.verification-transcript-item {
  display: grid;
  gap: 10px;
  padding: 13px;
  border-radius: 18px;
  background: #f8fbff;
  box-shadow: inset 0 0 0 1px rgba(222, 231, 255, 0.92);
}

.verification-transcript-item.is-right {
  background: linear-gradient(180deg, #f4fbff 0%, #f9fcff 100%);
  box-shadow: inset 0 0 0 1px rgba(122, 180, 255, 0.5);
}

.verification-transcript-item.is-wrong {
  background: linear-gradient(180deg, #fff7f7 0%, #fffafa 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 176, 176, 0.62);
}

.verification-transcript-meta,
.verification-transcript-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.verification-transcript-meta span {
  color: var(--ink-muted);
  font-size: 12px;
  font-weight: 900;
}

.verification-transcript-meta strong {
  color: var(--blue);
  font-size: 12px;
  font-weight: 900;
}

.verification-transcript-item.is-wrong .verification-transcript-meta strong {
  color: #dc3f4f;
}

.verification-transcript-stem {
  margin: 0;
  color: var(--ink);
  font-size: 14px;
  font-weight: 850;
  line-height: 1.62;
}

.verification-transcript-options {
  display: grid;
  gap: 8px;
}

.verification-transcript-option {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 10px;
  border-radius: 14px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(222, 231, 255, 0.92);
}

.verification-transcript-option b {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: var(--blue);
  background: #edf4ff;
  font-size: 13px;
  font-weight: 950;
}

.verification-transcript-option span {
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.45;
}

.verification-transcript-option.is-correct-answer {
  box-shadow: inset 0 0 0 1px rgba(47, 118, 255, 0.34);
}

.verification-transcript-option.is-user-selected {
  background: #edf5ff;
}

.verification-transcript-option.is-user-wrong {
  background: #fff0f2;
  box-shadow: inset 0 0 0 1px rgba(245, 114, 128, 0.42);
}

.verification-transcript-answer,
.verification-analysis-answer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  padding: 12px;
  border-radius: 14px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(222, 231, 255, 0.92);
}

.verification-transcript-answer span,
.verification-analysis-answer span {
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
}

.verification-answer-choice {
  color: var(--ink);
  font-size: 16px;
  font-weight: 950;
}

.verification-answer-choice.is-correct {
  color: var(--blue);
}

.verification-answer-choice.is-wrong {
  color: var(--red);
}

.verification-report-card {
  background:
    radial-gradient(circle at 88% 0%, rgba(45, 209, 196, 0.18), transparent 34%),
    #fff;
}

.verification-report-head {
  display: grid;
  gap: 9px;
}

.verification-chart {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  min-height: 168px;
  padding: 14px 12px 12px;
  border-radius: 18px;
  background: linear-gradient(180deg, #f7faff 0%, #edf4ff 100%);
  box-shadow: inset 0 0 0 1px rgba(222, 231, 255, 0.92);
}

.verification-data-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: -4px;
  padding: 10px;
  border-radius: 16px;
  background: rgba(247, 250, 255, 0.94);
  box-shadow: inset 0 0 0 1px rgba(222, 231, 255, 0.92);
}

.verification-data-strip div {
  display: grid;
  justify-items: center;
  gap: 5px;
  min-width: 0;
  padding: 8px 4px;
  border-radius: 13px;
  background: #fff;
}

.verification-data-strip span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
}

.verification-data-strip strong {
  max-width: 100%;
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
  line-height: 1.15;
  text-align: center;
  overflow-wrap: anywhere;
}

.chart-column {
  display: grid;
  grid-template-rows: 92px auto auto;
  justify-items: center;
  align-items: end;
  gap: 6px;
  min-height: 136px;
}

.chart-column i {
  align-self: end;
  width: 42px;
  border-radius: 14px 14px 8px 8px;
}

.chart-column.is-before i {
  height: var(--verify-before-height);
  background: #b9c6df;
}

.chart-column.is-after i {
  height: var(--verify-result-height);
  box-shadow: 0 10px 20px rgba(47, 118, 255, 0.18);
}

.chart-column b {
  color: var(--ink);
  font-size: 18px;
  font-weight: 900;
}

.chart-column span {
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 900;
}

.verification-report-card.is-result-up .chart-column.is-after i {
  background: linear-gradient(180deg, #54d7ff 0%, #2f76ff 100%);
}

.verification-report-card.is-result-up .chart-column.is-after b {
  color: #2f76ff;
}

.verification-report-card.is-result-down .chart-column.is-after i {
  background: linear-gradient(180deg, #ff9aa2 0%, #ff5b6b 100%);
  box-shadow: 0 10px 20px rgba(255, 91, 107, 0.18);
}

.verification-report-card.is-result-down .chart-column.is-after b {
  color: #f04c5e;
}

.verification-report-card.is-result-flat .chart-column.is-after i {
  background: linear-gradient(180deg, #ffd765 0%, #f2a900 100%);
  box-shadow: 0 10px 20px rgba(242, 169, 0, 0.2);
}

.verification-report-card.is-result-flat .chart-column.is-after b {
  color: #b87b00;
}

.chart-arrow {
  align-self: center;
  color: var(--blue);
  font-size: 22px;
  font-weight: 900;
}

.verification-section {
  display: grid;
  gap: 8px;
  padding: 13px;
  border-radius: 16px;
  background: rgba(247, 250, 255, 0.92);
}

.verification-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.verification-analysis-card {
  background:
    radial-gradient(circle at 8% 0%, rgba(47, 118, 255, 0.12), transparent 32%),
    #fff;
}

.verification-analysis-head {
  display: grid;
  gap: 9px;
}

.verification-analysis-list {
  display: grid;
  gap: 14px;
}

.verification-analysis-item {
  display: grid;
  gap: 12px;
  padding: 14px 12px;
  border-radius: 18px;
  background: #f8faff;
  box-shadow: inset 0 0 0 1px rgba(222, 231, 255, 0.9);
}

.verification-analysis-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.verification-analysis-meta span,
.verification-analysis-meta strong {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: 12px;
  font-size: 11.5px;
  font-weight: 900;
}

.verification-analysis-meta span {
  color: var(--blue);
  background: #eaf2ff;
}

.verification-analysis-meta strong {
  color: #16a7b5;
  background: rgba(24, 191, 201, 0.12);
}

.verification-analysis-stem,
.verification-analysis-text {
  margin: 0;
  color: var(--ink-soft);
  font-size: 13.5px;
  font-weight: 760;
  line-height: 1.72;
}

.step-analysis-list {
  display: grid;
  gap: 9px;
}

.step-analysis-block {
  display: grid;
  gap: 7px;
  padding: 10px;
  border-radius: 13px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(222, 231, 255, 0.88);
}

.step-analysis-block h4 {
  margin: 0;
  color: var(--blue);
  font-size: 13px;
  font-weight: 950;
  line-height: 1.2;
}

.step-analysis-block p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 760;
  line-height: 1.68;
}

.verification-analysis-options {
  display: grid;
  gap: 8px;
}

.verification-analysis-option {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border: 1.5px solid rgba(218, 228, 255, 0.95);
  border-radius: 14px;
  background: #fff;
}

.verification-analysis-option b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: var(--blue);
  background: #eaf2ff;
  font-size: 13px;
  font-weight: 900;
}

.verification-analysis-option span {
  color: var(--ink-soft);
  font-size: 13.5px;
  font-weight: 820;
  line-height: 1.45;
}

.verification-analysis-option.is-correct-answer {
  border-color: rgba(24, 191, 201, 0.72);
  background: #effffd;
}

.verification-analysis-option.is-user-selected {
  box-shadow: inset 0 0 0 1px rgba(47, 118, 255, 0.22);
}

.verification-analysis-option.is-user-wrong {
  border-color: rgba(255, 106, 117, 0.75);
  background: #fff3f5;
}

.verify-phone {
  max-width: 430px;
  min-height: max(100vh, 866px);
  overflow-x: hidden;
  overflow-y: auto;
  padding-bottom: calc(118px + env(safe-area-inset-bottom, 0px));
  background:
    radial-gradient(circle at 14% 7%, rgba(255, 236, 243, 0.72), transparent 30%),
    linear-gradient(180deg, #f4f2ff 0%, #edf2ff 52%, #e7eaf8 100%);
  color: var(--ink);
}

.verify-status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 50px;
  padding: 16px 34px 0 50px;
  color: #070914;
  font-size: 19.5px;
  font-weight: 800;
}

.verify-status-icons {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 18px;
}

.verify-status-icons i {
  width: 5px;
  border-radius: 4px;
  background: #05070d;
}

.verify-status-icons i:nth-child(1) { height: 9px; }
.verify-status-icons i:nth-child(2) { height: 14px; }
.verify-status-icons i:nth-child(3) { height: 19px; }

.verify-status-icons b {
  width: 26px;
  height: 14px;
  border: 2px solid #05070d;
  border-radius: 5px;
}

.verify-nav {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px 10px;
}

.verify-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.74);
}

.verify-back svg,
.verify-sheet-head svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  stroke-width: 2.4;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.verify-nav div {
  display: grid;
  gap: 4px;
  flex: 1;
}

.verify-nav span {
  color: var(--blue);
  font-size: 12px;
  font-weight: 900;
}

.verify-nav strong {
  color: var(--ink);
  font-size: 21px;
  font-weight: 900;
}

.verify-nav em {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 10px;
  border-radius: 14px;
  color: var(--blue);
  background: #fff;
  font-style: normal;
  font-size: 13px;
  font-weight: 900;
}

.verify-progress {
  height: 6px;
  margin: 2px 22px 14px;
  overflow: hidden;
  border-radius: 6px;
  background: rgba(207, 218, 244, 0.82);
}

.verify-progress i {
  display: block;
  width: 33.333%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #5c64ff 0%, #2f76ff 100%);
}

.verify-question-card {
  display: grid;
  gap: 14px;
  margin: 0 14px;
  padding: 16px 14px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 18px 38px rgba(70, 82, 160, 0.14);
}

.verify-floating-action {
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: 12;
  width: min(calc(100vw - 28px), 402px);
  transform: translateX(-50%);
  padding: 14px 0 calc(14px + env(safe-area-inset-bottom, 0px));
}

.verify-floating-card {
  padding: 10px;
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow:
    0 16px 30px rgba(70, 82, 160, 0.16),
    inset 0 0 0 1px rgba(223, 230, 251, 0.92);
  backdrop-filter: blur(18px);
}

.verify-stem {
  margin: 0;
  color: var(--ink);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.72;
}

.verify-options {
  display: grid;
  gap: 10px;
}

.verify-option {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 10px 12px;
  border: 1.5px solid rgba(218, 228, 255, 0.95);
  border-radius: 16px;
  color: var(--ink-soft);
  background: #f8faff;
  text-align: left;
}

.verify-option b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: var(--blue);
  background: #eaf2ff;
  font-size: 13px;
  font-weight: 900;
}

.verify-option span {
  font-size: 14px;
  font-weight: 800;
  line-height: 1.45;
}

.verify-option.is-selected {
  border-color: var(--blue);
  background: #eef5ff;
}

.verify-analysis-review {
  display: grid;
  gap: 12px;
  margin: 0 14px 24px;
}

.verify-review-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.verify-review-head span,
.verify-complete-card > span {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: 12px;
  color: var(--blue);
  background: #eaf2ff;
  font-size: 12px;
  font-weight: 900;
}

.verify-review-head strong {
  color: var(--ink);
  font-size: 15px;
  font-weight: 900;
}

.verify-review-card {
  display: grid;
  gap: 14px;
  padding: 16px 14px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 18px 38px rgba(70, 82, 160, 0.14);
}

.verify-review-block {
  display: grid;
  gap: 10px;
}

.verify-review-block h3 {
  margin: 0;
  color: var(--ink);
  font-size: 14px;
  font-weight: 900;
}

.verify-review-block p,
.verify-review-analysis {
  margin: 0;
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 760;
  line-height: 1.72;
}

.verify-review-options {
  display: grid;
  gap: 8px;
}

.verify-review-option {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 10px 11px;
  border: 1.5px solid rgba(218, 228, 255, 0.95);
  border-radius: 15px;
  background: #f8faff;
}

.verify-review-option b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: var(--blue);
  background: #eaf2ff;
  font-size: 13px;
  font-weight: 900;
}

.verify-review-option span {
  color: var(--ink-soft);
  font-size: 13.5px;
  font-weight: 820;
  line-height: 1.45;
}

.verify-review-option.is-correct-answer {
  border-color: rgba(24, 191, 201, 0.72);
  background: #effffd;
}

.verify-review-option.is-user-selected {
  box-shadow: inset 0 0 0 1px rgba(47, 118, 255, 0.22);
}

.verify-review-option.is-user-wrong {
  border-color: rgba(255, 106, 117, 0.75);
  background: #fff3f5;
}

.verify-review-answer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.verify-review-answer div {
  display: grid;
  gap: 6px;
  padding: 12px;
  border-radius: 16px;
  background: #f7faff;
}

.verify-review-answer span {
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 900;
}

.verify-review-answer strong {
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 900;
  line-height: 1.35;
}

.verify-review-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.verify-review-actions button {
  padding: 0 4px;
  font-size: 13.5px;
  white-space: nowrap;
}

.verify-review-actions button:disabled {
  color: #8b96af;
  background: #edf2ff;
  box-shadow: inset 0 0 0 1px rgba(207, 218, 244, 0.9);
}

.verify-report-button {
  width: auto;
  color: var(--blue);
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(198, 214, 255, 0.96);
}

.verify-option.is-answer {
  border-color: rgba(47, 118, 255, 0.74);
  background: #eef5ff;
}

.verify-option.is-wrong {
  border-color: rgba(255, 106, 117, 0.75);
  background: #fff3f5;
}

.verify-option.is-answer b {
  color: #fff;
  background: linear-gradient(135deg, #5c64ff, #2f76ff);
}

.verify-option.is-wrong b {
  color: #fff;
  background: linear-gradient(135deg, #ff7a86, #ff5f6b);
}

.verify-submit {
  width: 100%;
}

.verify-submit:disabled {
  color: #8b96af;
  background: #edf2ff;
  box-shadow: inset 0 0 0 1px rgba(207, 218, 244, 0.9);
}

.verify-answer-panel {
  display: grid;
  gap: 12px;
  margin: 12px 14px 0;
  padding: 14px;
  border-radius: 20px;
  background: #fff;
  box-shadow:
    inset 0 0 0 1px rgba(223, 230, 251, 0.96),
    0 12px 26px rgba(70, 82, 160, 0.1);
}

.verify-answer-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
}

.verify-answer-summary span {
  color: var(--ink);
  font-size: 13px;
  font-weight: 850;
}

.verify-answer-choice {
  color: var(--blue);
  font-size: 14px;
  font-weight: 900;
}

.verify-answer-choice.is-correct {
  color: var(--blue);
}

.verify-answer-choice.is-wrong {
  color: #ef5a68;
}

.verify-answer-analysis,
.verify-answer-panel p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 13.5px;
  font-weight: 750;
  line-height: 1.58;
}

.verify-answer-panel.is-wrong {
  background: #fff7f8;
  box-shadow:
    inset 0 0 0 1px rgba(255, 212, 217, 0.96),
    0 12px 26px rgba(70, 82, 160, 0.1);
}

.verify-after-actions,
.verify-exit-card div,
.verify-complete-card div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.verify-mask {
  position: absolute;
  inset: 0;
  z-index: 20;
  background: rgba(17, 21, 54, 0.34);
  backdrop-filter: blur(2px);
}

.verify-analysis-sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 22;
  max-height: 70%;
  padding: 18px;
  border-radius: 24px 24px 0 0;
  background: #fff;
  box-shadow: 0 -18px 42px rgba(20, 31, 82, 0.22);
}

.verify-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.verify-sheet-head span {
  color: var(--ink);
  font-size: 18px;
  font-weight: 900;
}

.verify-sheet-head button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: var(--ink);
  background: #f2f5ff;
}

.verify-analysis-body {
  max-height: 470px;
  overflow: auto;
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 760;
  line-height: 1.72;
}

.verify-exit-modal,
.verify-complete-modal {
  position: absolute;
  inset: 0;
  z-index: 24;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 28px;
}

.verify-exit-card,
.verify-complete-card {
  width: 100%;
  padding: 20px;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 22px 48px rgba(25, 31, 74, 0.24);
}

.verify-exit-card > span {
  display: inline-flex;
  align-items: center;
  height: 23px;
  padding: 0 9px;
  border-radius: 12px;
  color: var(--warm);
  background: rgba(255, 106, 117, 0.12);
  font-size: 11.5px;
  font-weight: 900;
}

.verify-complete-card {
  display: grid;
  gap: 10px;
}

.verify-complete-card > span {
  justify-self: start;
}

.verify-exit-card h2,
.verify-complete-card h2 {
  margin: 12px 0 8px;
  color: var(--ink);
  font-size: 20px;
  font-weight: 900;
}

.verify-complete-card h2 {
  margin: 0;
}

.verify-exit-card p,
.verify-complete-card p {
  margin: 0 0 16px;
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 760;
  line-height: 1.6;
}

.verify-complete-card p {
  margin-bottom: 6px;
}

.verify-complete-card div {
  grid-template-columns: 1fr;
}