@charset "UTF-8";

/* Page-specific card treatment; all existing diagnostic controls stay in place. */
body[data-page="diagnosis"] {
  --ink: #214d6b;
  --muted: #718b9d;
  --green: #477f9f;
  --line: #c9dce8;
  --paper: #fff;
  --bg: #f5f9fc;
  --soft: #e4f3fb;
  color: var(--ink);
  background: #f5f9fc;
}

body[data-page="diagnosis"] main { max-width: 1480px; padding-top: 25px; }
body[data-page="diagnosis"] .intro {
  position: relative;
  min-height: 168px;
  padding: 25px 27px 25px 183px;
  gap: 25px;
  border: 1px solid #b5cfdf;
  border-radius: 23px;
  background: linear-gradient(115deg, #e4f3fb 0%, #f7fbfd 62%, #edf6fc 100%);
  box-shadow: inset 0 0 0 4px #ffffffcf, 0 4px 0 #bfd5e34a;
}
body[data-page="diagnosis"] .intro::before {
  content: "";
  position: absolute;
  top: 15px;
  left: 19px;
  width: 133px;
  height: 133px;
  border: 4px solid #fff;
  border-radius: 20px;
  background: #d8eafa url("assets/chibi/chibi-squad-learning.jpg") center 51% / cover no-repeat;
  box-shadow: 0 0 0 1px #a7c3d6, 0 5px 0 #8facbf36;
  pointer-events: none;
}
body[data-page="diagnosis"] .intro > div:first-child { flex: 1; min-width: 0; }
body[data-page="diagnosis"] .intro h1 { color: #214d6b; }
body[data-page="diagnosis"] .eyebrow { color: #6e90a7; letter-spacing: 1px; }
body[data-page="diagnosis"] .intro-copy { color: #68869b; }
body[data-page="diagnosis"] .service-card {
  flex: 0 1 325px;
  border: 1px solid #bdd2e0;
  border-radius: 15px;
  background: #ffffffdf;
  box-shadow: inset 0 0 0 3px #fff, 0 3px 0 #bed2e13b;
}
body[data-page="diagnosis"] .service-card > p { color: #7a91a1; }
body[data-page="diagnosis"] .service-line i.offline { background: #cda963; }
body[data-page="diagnosis"] .service-line i.ready { background: #76b9b0; }
body[data-page="diagnosis"] .notice {
  color: #807249;
  background: #fffcf1;
  border-color: #e6d8af;
  box-shadow: inset 0 0 0 3px #fffef8;
}

body[data-page="diagnosis"] .task-list { gap: 11px; margin-bottom: 21px; }
body[data-page="diagnosis"] .task-list button {
  min-height: 45px;
  color: #587b93;
  border: 1px solid #adc6d7;
  border-radius: 12px;
  background: linear-gradient(#fff, #f4f9fd);
  box-shadow: inset 0 0 0 2px #fff, 0 3px 0 #b7cfdd59;
}
body[data-page="diagnosis"] .task-list button span { color: #829caf; }
body[data-page="diagnosis"] .task-list button[aria-pressed="true"] {
  color: #285879;
  border-color: #8cadc4;
  background: linear-gradient(110deg, #deeff9, #f1f8fc);
  box-shadow: inset 0 0 0 2px #fff, inset 0 -3px 0 #dfc98d, 0 3px 0 #a6c4d76b;
}
body[data-page="diagnosis"] .workspace {
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 24px;
}
body[data-page="diagnosis"] .card {
  border: 2px solid #8fb5cb;
  border-radius: 23px;
  background: linear-gradient(145deg, #fff 75%, #f6fbfe);
  box-shadow: inset 0 0 0 5px #fff, inset 0 0 0 6px #e4eef5, 0 6px 0 #a6c0d13d, 0 12px 23px #446f8c08;
}
body[data-page="diagnosis"] .card-heading {
  padding-bottom: 16px;
  border-bottom: 1px solid #dce8f1;
  margin-bottom: 19px;
}
body[data-page="diagnosis"] .card-heading h2 { color: #285776; }
body[data-page="diagnosis"] .step-number {
  width: 36px;
  height: 36px;
  border: 1px solid #d6bf85;
  border-radius: 12px;
  background: linear-gradient(145deg, #fffcf0, #f6e9c3);
  color: #927542;
  box-shadow: inset 0 0 0 2px #fffdf7, 0 2px 0 #d8c69458;
}
body[data-page="diagnosis"] .badge {
  color: #68889e;
  background: #eff6fb;
  border-color: #c6dae8;
}
body[data-page="diagnosis"] .problem-prompt { color: #2e5873; }
body[data-page="diagnosis"] .task-diagram {
  margin-top: 20px;
  padding: 11px;
  background: radial-gradient(ellipse at 50% 38%, #fff 35%, #edf6fc 100%);
  border: 1px solid #c6dce9;
  border-radius: 17px;
  box-shadow: inset 0 0 0 3px #fff;
}
body[data-page="diagnosis"] .task-diagram svg [stroke]:not([stroke="none"]) { stroke: #4d819f; }
body[data-page="diagnosis"] .task-diagram svg text { fill: #315d78; }
body[data-page="diagnosis"] .diagram-note { color: #839aab; }
body[data-page="diagnosis"] .givens > div,
body[data-page="diagnosis"] .problem-footer { border-color: #dbe7f0; }
body[data-page="diagnosis"] .givens dt { color: #7d97a9; }
body[data-page="diagnosis"] .problem-footer p { color: #7f95a5; }
body[data-page="diagnosis"] .editor-card label span { color: #7d96a8; }
body[data-page="diagnosis"] input[type="text"],
body[data-page="diagnosis"] textarea {
  color: #315974;
  background: #fbfdff;
  border-color: #b8d0e0;
  border-radius: 12px;
  box-shadow: inset 0 2px 4px #6c94ae06;
}
body[data-page="diagnosis"] input::placeholder,
body[data-page="diagnosis"] textarea::placeholder { color: #94aaba; }
body[data-page="diagnosis"] input[type="checkbox"] { accent-color: #588bac; }
body[data-page="diagnosis"] button:focus-visible,
body[data-page="diagnosis"] a:focus-visible,
body[data-page="diagnosis"] input:focus-visible,
body[data-page="diagnosis"] textarea:focus-visible,
body[data-page="diagnosis"] summary:focus-visible { outline-color: #8eb9d4; }

body[data-page="diagnosis"] .voice-input {
  border: 1px solid #b9d3e5;
  border-radius: 15px;
  background: #edf6fc;
  box-shadow: inset 0 0 0 3px #ffffffb8;
}
body[data-page="diagnosis"] .voice-controls .voice-start,
body[data-page="diagnosis"] .voice-preview-actions .voice-start {
  color: #3b6d8b;
  border-color: #a5c3d8;
  background: linear-gradient(#fff, #dfeef8);
  box-shadow: inset 0 0 0 1px #fff, 0 2px 0 #b3cedf73;
}
body[data-page="diagnosis"] .voice-controls .voice-start:hover:not(:disabled),
body[data-page="diagnosis"] .voice-preview-actions .voice-start:hover:not(:disabled) {
  background: #e0f0fb;
  border-color: #7eabc9;
}
body[data-page="diagnosis"] .voice-status,
body[data-page="diagnosis"] .voice-timer { color: #4c7895; }
body[data-page="diagnosis"] .voice-tip { color: #7995a8; }
body[data-page="diagnosis"] .voice-status.voice-error { color: #ac614c; }
body[data-page="diagnosis"] .voice-preview { border-color: #c5dcea; }
body[data-page="diagnosis"] .voice-level { background: #d1e4ef; }
body[data-page="diagnosis"] .voice-level i { background: #68a2c6; }
body[data-page="diagnosis"] .voice-input.recording {
  border-color: #cca871;
  box-shadow: inset 0 0 0 3px #fffbef, 0 0 0 2px #e6d4ab4d;
}
body[data-page="diagnosis"] .photo-area { background: #f8fbfe; border-color: #ccdeeb; border-radius: 13px; }
body[data-page="diagnosis"] .photo-area > summary span { color: #88a1b2; }
body[data-page="diagnosis"] .photo-card { border-color: #c2d9e7; border-radius: 11px; }
body[data-page="diagnosis"] .file-button { border-color: #a7c5d9; background: #fff; }
body[data-page="diagnosis"] .recognition-options { color: #557c96; background: #edf6fc; }
body[data-page="diagnosis"] .recognition-issues,
body[data-page="diagnosis"] .input-message { border-color: #e6d7b4; background: #fffbef; color: #8b754a; }
body[data-page="diagnosis"] .input-message.success { background: #eff7fc; border-color: #c2dce9; color: #4e7894; }
body[data-page="diagnosis"] .submission-note { color: #8ba0ae; }

body[data-page="diagnosis"] .result-card { margin-top: 28px; }
body[data-page="diagnosis"] .result-heading { border-color: #d6e5ee; }
body[data-page="diagnosis"] .result-heading .badge.example { color: #987940; background: #fff8e8; border-color: #e5d0a0; }
body[data-page="diagnosis"] .candidate-note,
body[data-page="diagnosis"] .next-task { color: #69879c; background: #eef6fc; border-color: #d7e7f1; }
body[data-page="diagnosis"] .original-process { border-color: #cbdfea; background: #fbfdff; }
body[data-page="diagnosis"] .original-process > summary { color: #6e8da3; }
body[data-page="diagnosis"] .original-process pre { color: #587c94; }
body[data-page="diagnosis"] .analysis-step { border-color: #c4dce9; border-radius: 14px; box-shadow: inset 0 0 0 2px #fff, 0 2px 0 #c1d9e52e; }
body[data-page="diagnosis"] .analysis-step.first-issue { border-color: #ddb4bd; background: #fff9fa; }
body[data-page="diagnosis"] .step-reason { color: #6d899b; }
body[data-page="diagnosis"] .scope-text { color: #8ca1af; }
body[data-page="diagnosis"] .gap-card { background: #fffcf2; border-color: #e5d8b5; border-radius: 14px; }
body[data-page="diagnosis"] .gap-card small { color: #9c967f; }
body[data-page="diagnosis"] .follow-up { background: #f2f8fd; border-color: #c2d9e9; border-radius: 14px; }
body[data-page="diagnosis"] .follow-up > small { color: #819aab; }
body[data-page="diagnosis"] .probe-link { background: #fbfdff; border-color: #b9d3e4; border-radius: 12px; box-shadow: inset 0 0 0 2px #fff, 0 3px 0 #bfd6e43b; }
body[data-page="diagnosis"] .probe-link:hover { background: #eaf5fc; }
body[data-page="diagnosis"] .probe-link small { color: #849dae; }
body[data-page="diagnosis"] .page-footer { color: #88a1b3; }

@media (max-width: 1100px) {
  body[data-page="diagnosis"] .intro { padding-left: 149px; padding-right: 19px; gap: 19px; }
  body[data-page="diagnosis"] .intro::before { left: 17px; top: 23px; width: 108px; height: 119px; }
  body[data-page="diagnosis"] .service-card { flex-basis: 255px; }
  body[data-page="diagnosis"] .intro h1 { font-size: 27px; }
  body[data-page="diagnosis"] .workspace { gap: 19px; }
}
@media (max-width: 760px) {
  body[data-page="diagnosis"] main { padding-top: 19px; }
  body[data-page="diagnosis"] .intro { padding: 19px; min-height: 0; gap: 14px; border-radius: 20px; }
  body[data-page="diagnosis"] .intro::before { left: auto; top: 15px; right: 16px; width: 87px; height: 91px; border-radius: 16px; }
  body[data-page="diagnosis"] .intro > div:first-child { padding-right: 108px; min-height: 95px; }
  body[data-page="diagnosis"] .intro h1 { font-size: 26px; }
  body[data-page="diagnosis"] .intro-copy { font-size: 12px; line-height: 1.8; }
  body[data-page="diagnosis"] .service-card { flex-basis: auto; width: 100%; }
  body[data-page="diagnosis"] .workspace { grid-template-columns: minmax(0, 1fr); gap: 21px; }
  body[data-page="diagnosis"] .card { border-radius: 20px; }
  body[data-page="diagnosis"] .task-list { gap: 8px; margin-bottom: 18px; }
  body[data-page="diagnosis"] .task-list button { white-space: normal; min-width: 0; padding: 9px 10px; }
  body[data-page="diagnosis"] .task-diagram { padding: 7px; }
  body[data-page="diagnosis"] .result-grid { gap: 22px; }
}
@media (max-width: 440px) {
  body[data-page="diagnosis"] .intro { padding: 16px; }
  body[data-page="diagnosis"] .intro::before { top: 15px; right: 13px; width: 68px; height: 84px; border-width: 3px; border-radius: 14px; }
  body[data-page="diagnosis"] .intro > div:first-child { padding-right: 83px; min-height: 103px; }
  body[data-page="diagnosis"] .intro h1 { font-size: 23px; line-height: 1.5; }
  body[data-page="diagnosis"] .intro .eyebrow { font-size: 10px; }
  body[data-page="diagnosis"] .task-list button { padding: 9px 7px; font-size: 11px; border-radius: 11px; }
  body[data-page="diagnosis"] .card { padding: 18px 15px; }
  body[data-page="diagnosis"] .card-heading { gap: 9px; }
  body[data-page="diagnosis"] .card-heading h2 { font-size: 17px; }
  body[data-page="diagnosis"] .step-number { width: 32px; height: 32px; border-radius: 10px; }
  body[data-page="diagnosis"] .voice-input { padding: 11px; }
  body[data-page="diagnosis"] .service-card { padding: 10px 11px; }
  body[data-page="diagnosis"] .problem-footer { gap: 9px; }
  body[data-page="diagnosis"] .problem-footer button { padding: 8px 10px; }
  body[data-page="diagnosis"] .result-heading { flex-wrap: wrap; gap: 9px; }
}