:root {
  --ink: #17233f;
  --muted: #77819b;
  --muted-light: #a3abc0;
  --line: #e8ebf3;
  --surface: #fff;
  --canvas: #f7f8fc;
  --navy: #1e3477;
  --blue: #496bd7;
  --blue-soft: #eef2ff;
  --orange: #ed9a51;
  --orange-soft: #fff4e8;
  --purple: #916fd7;
  --purple-soft: #f4efff;
  --green: #31ae85;
  --shadow: 0 16px 38px rgba(30, 52, 119, .07);
  --radius: 18px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--canvas); font-family: "DM Sans", "Noto Sans SC", sans-serif; font-size: 14px; }
button, a { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
.app-shell { min-height: 100vh; display: flex; }
.sidebar { width: 238px; flex: 0 0 238px; min-height: 100vh; padding: 27px 15px 18px; display: flex; flex-direction: column; color: #dbe4ff; background: var(--navy); }
.brand { display: flex; align-items: center; gap: 11px; padding: 0 9px; }
.brand-mark { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 11px; color: #fff; background: linear-gradient(145deg, #7e97f2, #526ed1); font-weight: 800; box-shadow: 0 7px 16px rgba(5, 16, 54, .26); }
.brand strong, .brand small, .side-footer strong, .side-footer small { display: block; }
.brand strong { color: #fff; font-size: 14px; letter-spacing: .2px; }
.brand small { color: #91a1d1; font-size: 10px; margin-top: 4px; }
.side-nav { display: grid; gap: 5px; margin-top: 48px; }
.side-link { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 10px; color: #aab9e6; transition: .2s; }
.side-link:hover, .side-link.active { color: #fff; background: rgba(255,255,255,.1); }
.side-link.active { box-shadow: inset 3px 0 0 #9cb1ff; }
.side-icon { width: 17px; text-align: center; color: #9bb0ee; font-size: 17px; }
.side-link.active .side-icon { color: #fff; }
.sidebar-tip { margin: auto 8px 28px; padding: 16px 14px; border: 1px solid rgba(255,255,255,.12); border-radius: 13px; background: rgba(255,255,255,.06); }
.tip-spark { display: block; color: #f3bf83; font-size: 17px; margin-bottom: 10px; }
.sidebar-tip strong { color: #fff; font-size: 12px; }
.sidebar-tip p { margin: 8px 0 0; color: #9eadd7; font-size: 11px; line-height: 1.7; }
.side-footer { display: flex; align-items: center; gap: 9px; padding: 14px 9px 0; border-top: 1px solid rgba(255,255,255,.1); }
.side-footer strong { color: #eef2ff; font-size: 11px; }.side-footer small { color: #91a1d1; font-size: 10px; margin-top: 3px; }.more-button { margin-left: auto; border: 0; color: #9baddd; background: transparent; }
.avatar { width: 29px; height: 29px; display: inline-grid; place-items: center; flex: 0 0 29px; border-radius: 50%; color: #7c4d28; background: #f2d5b7; font-size: 11px; font-weight: 700; }.small-avatar { width: 28px; height: 28px; }
.main { min-width: 0; flex: 1; }.topbar { height: 70px; display: flex; align-items: center; justify-content: space-between; padding: 0 42px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.88); backdrop-filter: blur(12px); }.mobile-brand { display: none; }.breadcrumb { display: flex; gap: 10px; align-items: center; color: #a2a9ba; font-size: 12px; }.breadcrumb b { color: #cad0df; font-weight: 400; }.breadcrumb strong { color: #45506d; font-weight: 600; }.top-actions { display: flex; align-items: center; gap: 18px; }.top-icon { position: relative; border: 0; color: #8190ae; background: transparent; font-size: 20px; }.top-icon i { position: absolute; right: 0; top: 1px; width: 5px; height: 5px; border-radius: 50%; background: #eb7c71; }.profile-chip { display: flex; align-items: center; gap: 8px; border: 0; background: transparent; color: var(--ink); }.profile-copy { display: grid; gap: 3px; text-align: left; }.profile-copy strong { font-size: 11px; }.profile-copy small { color: #a4acc0; font-size: 10px; }.chevron { color: #a6afc2; margin-left: 3px; }
.page-wrap { max-width: 1380px; margin: 0 auto; padding: 38px 42px 36px; }.hero-section { min-height: 309px; display: grid; grid-template-columns: 1.08fr .92fr; gap: 25px; align-items: center; padding: 30px 37px; overflow: hidden; border: 1px solid #e4e9f6; border-radius: 23px; background: linear-gradient(120deg, #f9fbff 0%, #f1f5ff 70%, #edf1ff 100%); position: relative; }.hero-section::after { content: ""; position: absolute; width: 380px; height: 380px; right: -120px; top: -180px; border-radius: 50%; border: 1px solid rgba(73,107,215,.13); box-shadow: 0 0 0 20px rgba(73,107,215,.025), 0 0 0 40px rgba(73,107,215,.02); }.eyebrow, .panel-kicker, .modal-kicker { color: var(--blue); font-size: 10px; font-weight: 800; letter-spacing: 1.8px; }.hero-section h1 { margin: 12px 0 14px; font-size: clamp(30px, 3.5vw, 45px); line-height: 1.17; letter-spacing: -1.8px; }.hero-section h1 em { color: var(--blue); font-style: normal; }.hero-copy { max-width: 480px; color: #78839d; font-size: 13px; line-height: 1.9; margin: 0; }.hero-actions { display: flex; align-items: center; gap: 20px; margin-top: 25px; }.button { height: 42px; padding: 0 17px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: #57627b; font-weight: 700; }.button-primary { color: #fff; border-color: var(--blue); background: var(--blue); box-shadow: 0 9px 17px rgba(73,107,215,.22); }.button-primary:hover { background: #3d5fce; }.button span { margin-left: 9px; font-size: 18px; }.text-link { color: #7080a6; font-size: 12px; }.text-link span { margin-left: 5px; color: var(--blue); }.hero-visual { min-height: 242px; position: relative; display: grid; place-items: center; }.hero-card { position: relative; z-index: 2; width: min(280px, 88%); padding: 20px 20px 17px; border: 1px solid rgba(255,255,255,.9); border-radius: 17px; background: rgba(255,255,255,.92); box-shadow: 0 20px 36px rgba(44,69,142,.13); }.hero-card-top, .hero-card-foot { display: flex; justify-content: space-between; align-items: center; color: #9ca8bf; font-size: 10px; }.hero-card-top b { color: var(--blue); font-size: 10px; letter-spacing: 1.3px; }.pulse-dot { width: 7px; height: 7px; margin-right: 5px; display: inline-block; border-radius: 50%; background: #55c59c; box-shadow: 0 0 0 5px rgba(85,197,156,.12); }.hero-score { margin: 21px 0 14px; }.hero-score strong { font-size: 43px; letter-spacing: -2px; }.hero-score span { color: #a1aabd; font-size: 12px; margin-left: 4px; }.mini-progress { height: 8px; overflow: hidden; border-radius: 8px; background: #eef1f7; }.mini-progress i { height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg, #6887e4, #9bb1ff); }.hero-card-foot { margin-top: 16px; }.orbit { position: absolute; border: 1px solid rgba(73,107,215,.18); border-radius: 50%; }.orbit-one { width: 260px; height: 150px; transform: rotate(-26deg); }.orbit-two { width: 325px; height: 205px; transform: rotate(30deg); border-color: rgba(237,154,81,.16); }.float-note { position: absolute; z-index: 3; padding: 10px 12px; border-radius: 10px; box-shadow: 0 10px 19px rgba(41,57,106,.12); background: #fff; }.float-note span, .float-note small { display: block; }.float-note span { color: var(--ink); font-size: 13px; font-weight: 800; }.float-note small { color: #9aa5bb; font-size: 10px; margin-top: 3px; }.note-one { top: 11px; right: 4px; transform: rotate(6deg); }.note-two { bottom: 13px; left: 1px; transform: rotate(-5deg); }.note-two span { color: var(--orange); font-size: 11px; }
.section-block { margin-top: 39px; }.section-heading, .panel-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }.section-heading h2, .panel-heading h2 { margin: 8px 0 0; font-size: 19px; letter-spacing: -.5px; }.section-note { color: #a2aabc; font-size: 11px; padding-top: 21px; }.checkpoint-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 17px; margin-top: 19px; }.checkpoint-card { position: relative; min-height: 189px; padding: 21px 21px 17px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); }.checkpoint-card::after { content: ""; position: absolute; width: 105px; height: 105px; right: -27px; bottom: -53px; border-radius: 50%; background: var(--blue-soft); }.checkpoint-card.warm::after { background: var(--orange-soft); }.checkpoint-card.purple::after { background: var(--purple-soft); }.checkpoint-icon { position: relative; z-index: 1; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; color: var(--blue); background: var(--blue-soft); font-size: 20px; }.warm .checkpoint-icon { color: var(--orange); background: var(--orange-soft); }.purple .checkpoint-icon { color: var(--purple); background: var(--purple-soft); }.checkpoint-number { position: absolute; top: 20px; right: 21px; color: #c2c8d7; font-size: 10px; font-weight: 800; letter-spacing: 1px; }.checkpoint-card h3 { margin: 18px 0 7px; font-size: 15px; }.checkpoint-card p { max-width: 290px; min-height: 40px; margin: 0; color: #8a94a9; font-size: 11px; line-height: 1.75; }.checkpoint-bottom { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; margin-top: 13px; padding-top: 12px; border-top: 1px solid #f0f2f6; color: #9da6b9; font-size: 10px; }.checkpoint-bottom b { color: #8995b0; font-size: 17px; }
.dashboard-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: 17px; margin-top: 37px; }.panel { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); }.panel-heading { padding: 21px 22px 16px; }.panel-kicker { color: #a0a9bd; letter-spacing: 1.5px; }.panel-heading h2 { font-size: 15px; }.ghost-button, .guide-badge { border: 0; color: var(--blue); background: transparent; font-size: 11px; }.guide-badge { padding: 5px 8px; border-radius: 7px; color: var(--green); background: #edf9f4; }.record-content { min-height: 152px; }.record-empty { display: grid; place-items: center; min-height: 152px; padding: 25px; color: #a2aabd; text-align: center; font-size: 12px; line-height: 1.8; }.record-empty span { display: block; color: #d3d8e4; font-size: 26px; margin-bottom: 4px; }.record-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 16px; padding: 14px 22px; border-top: 1px solid #f1f3f7; }.record-row strong, .record-row small { display: block; }.record-row strong { font-size: 12px; }.record-row small { color: #a2aabc; font-size: 10px; margin-top: 4px; }.record-score { color: var(--blue); font-size: 15px; font-weight: 800; }.record-status { padding: 5px 7px; border-radius: 6px; color: #36a983; background: #edf9f4; font-size: 10px; }.guide-list { padding: 0 22px 14px; }.guide-item { display: flex; gap: 13px; padding: 12px 0; border-top: 1px solid #f1f3f7; }.guide-index { width: 26px; height: 26px; flex: 0 0 26px; display: grid; place-items: center; border-radius: 8px; color: var(--blue); background: var(--blue-soft); font-size: 10px; font-weight: 800; }.guide-item strong { font-size: 12px; }.guide-item p { margin: 5px 0 0; color: #9aa4b8; font-size: 11px; line-height: 1.5; }
.page-footer { display: flex; justify-content: space-between; margin-top: 38px; padding-top: 17px; border-top: 1px solid var(--line); color: #aeb5c5; font-size: 10px; }
.modal-backdrop { position: fixed; z-index: 20; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(20,31,65,.5); backdrop-filter: blur(5px); }.modal-backdrop[hidden] { display: none; }.assessment-modal { width: min(680px, 100%); max-height: min(760px, calc(100vh - 40px)); overflow: auto; border-radius: 20px; background: #fff; box-shadow: 0 30px 80px rgba(13,25,66,.28); }.modal-topbar { display: flex; justify-content: space-between; align-items: flex-start; padding: 24px 27px 19px; border-bottom: 1px solid var(--line); }.modal-topbar h2 { margin: 7px 0 0; font-size: 19px; }.close-button { width: 31px; height: 31px; border: 0; border-radius: 8px; color: #8c96ab; background: #f5f6fa; font-size: 22px; line-height: 1; }.modal-content { padding: 22px 27px 27px; }.question-progress { display: flex; justify-content: space-between; align-items: center; color: #98a2b6; font-size: 11px; }.question-progress strong { color: var(--blue); }.question-track { height: 6px; margin: 11px 0 27px; overflow: hidden; border-radius: 6px; background: #edf0f6; }.question-track i { display: block; height: 100%; border-radius: inherit; background: var(--blue); transition: width .25s; }.question-category { color: var(--orange); font-size: 10px; font-weight: 800; letter-spacing: 1.2px; }.question-title { margin: 10px 0 22px; font-size: 20px; line-height: 1.5; letter-spacing: -.4px; }..option-list { display: grid; gap: 10px; }.option { position: relative; display: flex; align-items: flex-start; gap: 11px; padding: 14px 15px; border: 1px solid #e3e7ef; border-radius: 11px; color: #65708a; cursor: pointer; transition: .15s; }.option:hover { border-color: #b8c6ef; background: #fafbff; }.option.selected { border-color: var(--blue); background: var(--blue-soft); color: #3554ad; }.option input { position: absolute; opacity: 0; }.option-letter { width: 23px; height: 23px; flex: 0 0 23px; display: grid; place-items: center; border-radius: 7px; color: #9ba5b8; background: #f1f3f7; font-size: 11px; font-weight: 800; }.selected .option-letter { color: #fff; background: var(--blue); }.option-text { font-size: 13px; line-height: 1.55; }.question-footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 28px; }.question-footer small { color: #a3abbb; font-size: 10px; }.modal-buttons { display: flex; gap: 9px; }.modal-button { height: 38px; padding: 0 15px; border: 1px solid var(--line); border-radius: 9px; color: #69748b; background: #fff; font-size: 12px; font-weight: 700; }.modal-button.primary { color: #fff; border-color: var(--blue); background: var(--blue); }.modal-button:disabled { opacity: .45; cursor: not-allowed; }.result-view { padding: 24px 27px 30px; }.result-hero { display: grid; grid-template-columns: 130px 1fr; gap: 24px; align-items: center; padding: 22px; border-radius: 15px; background: linear-gradient(135deg,#f2f5ff,#f8faff); }.result-ring { width: 116px; height: 116px; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(var(--blue) var(--score), #e5eaf8 0); position: relative; }.result-ring::after { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: #f7f9ff; }.result-ring span { position: relative; z-index: 1; color: var(--ink); font-size: 28px; font-weight: 800; }.result-copy h3 { margin: 0 0 8px; font-size: 20px; }.result-copy p { margin: 0; color: #7e89a1; font-size: 12px; line-height: 1.75; }.result-bars { display: grid; gap: 14px; margin-top: 25px; }.result-bar-head { display: flex; justify-content: space-between; margin-bottom: 6px; color: #66718a; font-size: 11px; }.result-bar-head strong { color: var(--ink); }.result-bar-track { height: 7px; overflow: hidden; border-radius: 7px; background: #edf0f6; }.result-bar-track i { display: block; height: 100%; border-radius: inherit; background: var(--blue); }.result-bar:nth-child(2) i { background: var(--orange); }.result-bar:nth-child(3) i { background: var(--purple); }.result-message { margin-top: 23px; padding: 13px 15px; border-left: 3px solid var(--orange); border-radius: 7px; color: #77829b; background: #fff9f2; font-size: 12px; line-height: 1.75; }.result-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; }
.toast { position: fixed; z-index: 30; left: 50%; bottom: 22px; padding: 10px 15px; border-radius: 9px; color: #fff; background: #1f2d51; box-shadow: 0 10px 25px rgba(21,32,67,.25); transform: translate(-50%, 25px); opacity: 0; pointer-events: none; transition: .25s; font-size: 12px; }.toast.show { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 980px) { .sidebar { width: 205px; flex-basis: 205px; }.topbar, .page-wrap { padding-left: 27px; padding-right: 27px; }.hero-section { grid-template-columns: 1fr .8fr; padding-left: 27px; padding-right: 27px; }.dashboard-grid { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .app-shell { display: block; }.sidebar { display: none; }.topbar { height: 62px; padding: 0 16px; }.mobile-brand { display: flex; align-items: center; gap: 8px; color: var(--ink); font-size: 12px; }.mobile-brand .brand-mark { width: 29px; height: 29px; border-radius: 9px; }.breadcrumb { display: none; }.top-actions { gap: 10px; }.profile-copy, .chevron { display: none; }.page-wrap { padding: 19px 15px 25px; }.hero-section { display: block; min-height: auto; padding: 25px 20px 0; border-radius: 18px; }.hero-section h1 { font-size: 31px; letter-spacing: -1.2px; }.hero-copy { font-size: 12px; }.hero-actions { display: grid; gap: 13px; justify-items: start; margin-top: 20px; }.hero-visual { min-height: 215px; margin-top: 12px; }.hero-card { width: 250px; }.note-one { right: 4px; }.note-two { left: 0; }.section-block { margin-top: 30px; }.section-heading h2 { font-size: 17px; }.section-note { display: none; }.checkpoint-grid { grid-template-columns: 1fr; gap: 11px; }.checkpoint-card { min-height: 0; padding: 17px; }.checkpoint-card h3 { margin-top: 13px; }.checkpoint-card p { min-height: 0; }.checkpoint-bottom { margin-top: 12px; }.dashboard-grid { gap: 13px; margin-top: 30px; }.panel-heading { padding: 18px 17px 13px; }.guide-list { padding: 0 17px 10px; }.record-row { padding-left: 17px; padding-right: 17px; gap: 9px; }.record-status { display: none; }.page-footer { margin-top: 28px; }.modal-backdrop { padding: 10px; align-items: end; }.assessment-modal { max-height: calc(100vh - 20px); border-radius: 18px 18px 0 0; }.modal-topbar { padding: 19px 18px 15px; }.modal-content, .result-view { padding: 19px 18px 23px; }.question-title { font-size: 17px; }.question-footer { align-items: flex-end; }.result-hero { grid-template-columns: 90px 1fr; gap: 14px; padding: 15px; }.result-ring { width: 86px; height: 86px; }.result-ring span { font-size: 22px; }.result-copy h3 { font-size: 17px; } }

.option-list { display: grid; gap: 10px; }
.page-footer a { color: var(--blue); }
.portal-topbar { height: 70px; display: flex; align-items: center; justify-content: space-between; padding: 0 42px; border-bottom: 1px solid var(--line); background: #fff; }.portal-topbar .brand { color: var(--ink); }.portal-topbar .brand strong { color: var(--ink); }.portal-topbar .brand small { color: #9aa5bc; }.portal-user { color: #7d879b; margin-right: 12px; font-size: 11px; }.employee-body { min-height: 100vh; background: var(--canvas); }.employee-main { max-width: 1260px; margin: 0 auto; padding: 38px 42px 55px; }.employee-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }.employee-heading h1 { margin: 9px 0 8px; font-size: 29px; }.employee-heading p { margin: 0; color: var(--muted); font-size: 12px; }.link-card { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 28px; padding: 20px 22px; border: 1px solid #dfe7fb; border-radius: 15px; background: #f4f7ff; }.link-card h2 { margin: 8px 0 6px; font-size: 16px; }.link-card p { margin: 0; color: var(--blue); font-size: 12px; word-break: break-all; }.employee-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 17px; margin-top: 20px; }.portal-list { padding: 0 22px 15px; }.portal-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 0; border-top: 1px solid #f1f3f7; }.portal-row strong, .portal-row small { display: block; }.portal-row strong { color: var(--ink); font-size: 12px; }.portal-row small { color: #9da7b9; font-size: 10px; margin-top: 4px; }.attempt-meta { display: flex !important; align-items: center; gap: 8px; flex-wrap: wrap; }.contact-copy { min-height: 20px; padding: 0; border: 0; color: #496bd7; background: transparent; font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; white-space: nowrap; }.contact-copy:hover { color: #203b83; }.portal-score { flex: 0 0 auto; color: var(--blue); font-size: 15px; font-weight: 800; }.portal-empty { padding: 30px 0; color: #a1aabd; text-align: center; font-size: 11px; line-height: 1.7; }.attempt-list { padding: 0 22px 18px; }.attempt-row { padding: 11px 0; border-top: 1px solid #f1f3f7; }.attempt-row strong, .attempt-row span, .attempt-row small { display: block; }.attempt-row strong { font-size: 12px; }.attempt-row span { color: #68748c; font-size: 10px; margin-top: 4px; }.attempt-row small { color: #a3acbc; font-size: 10px; margin-top: 3px; }
@media (max-width: 700px) { .portal-topbar { height: 62px; padding: 0 15px; }.portal-topbar .brand small, .portal-user { display: none; }.employee-main { padding: 25px 15px 35px; }.employee-heading { display: block; }.employee-heading h1 { font-size: 25px; }.employee-heading button { margin-top: 16px; }.employee-grid { grid-template-columns: 1fr; }.link-card { display: block; padding: 17px; }.link-card button { margin-top: 15px; } }

.wrong-answer-section { margin-top: 22px; padding-top: 21px; border-top: 1px solid var(--line); }
.wrong-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.wrong-heading h3 { margin: 8px 0 0; font-size: 16px; }
.wrong-heading h3 small { color: #a0a9ba; font-size: 10px; font-weight: 500; margin-left: 5px; }
.wrong-count, .correct-mark { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 9px; color: #d66f62; background: #fff0ed; font-weight: 800; }
.correct-mark { color: var(--green); background: #edf9f4; font-size: 17px; }
.all-correct p { margin: 10px 0 0; color: #8a95a9; font-size: 12px; line-height: 1.7; }
.wrong-list { display: grid; gap: 13px; margin-top: 16px; }
.wrong-item { padding: 15px; border: 1px solid #edf0f5; border-radius: 12px; background: #fcfdff; }
.wrong-item-top { display: flex; align-items: center; gap: 8px; }.wrong-index { color: #d66f62; font-size: 11px; font-weight: 800; }.wrong-category { color: #9ca5b8; font-size: 10px; }
.wrong-item h4 { margin: 9px 0 13px; color: var(--ink); font-size: 13px; line-height: 1.6; }
.answer-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }.your-answer, .right-answer { padding: 9px 10px; border-radius: 8px; }.your-answer { background: #fff1ef; }.right-answer { background: #edf9f4; }.your-answer span, .right-answer span { display: block; color: #9ba4b6; font-size: 10px; }.your-answer strong, .right-answer strong { display: block; margin-top: 5px; color: #5d6880; font-size: 11px; line-height: 1.5; }.right-answer strong { color: #247c61; }
.explanation { display: flex; gap: 8px; margin-top: 10px; padding: 10px; border-radius: 8px; color: #7d879c; background: #fff9f0; font-size: 11px; line-height: 1.65; }.explanation b { flex: 0 0 auto; color: var(--orange); font-size: 10px; }
.participant-copy { margin: -7px 0 20px; color: #8a95a9; font-size: 12px; line-height: 1.75; }.participant-form { display: grid; gap: 14px; }.participant-form label { display: grid; gap: 6px; color: #68748c; font-size: 11px; font-weight: 600; }.participant-form input { height: 40px; padding: 0 11px; border: 1px solid #e1e5ef; border-radius: 9px; outline: 0; font-size: 12px; }.participant-form input:focus { border-color: #91a8ec; box-shadow: 0 0 0 3px rgba(73,107,215,.1); }
.save-status { margin-top: 16px; color: #9ba5b7; text-align: right; font-size: 10px; }.save-status.saved { color: var(--green); }.save-status.failed { color: var(--red); }
@media (max-width: 700px) { .answer-compare { grid-template-columns: 1fr; gap: 7px; }.wrong-item { padding: 13px; } }