.kanji-test-workspace { display: grid; align-content: start; gap: 20px; }
.kanji-test-overview {
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr) auto;
  gap: 17px;
  align-items: center;
  padding: 21px 23px;
  border: 1px solid #cfe8d3;
  border-radius: 23px;
  background: linear-gradient(135deg, #f4fff5, #e6f8e9);
  box-shadow: 0 14px 32px rgba(46, 110, 58, .08);
}
.kanji-test-overview-badge { display: grid; width: 62px; height: 62px; place-items: center; border-radius: 19px; color: #fff; background: linear-gradient(145deg, #6fda7a, #2ea94a); font-family: "Noto Sans JP", sans-serif; font-size: 25px; font-weight: 900; }
.kanji-test-overview span { color: #29823d; font-family: "Noto Sans JP", sans-serif; font-size: 11px; font-weight: 900; }
.kanji-test-overview h2 { margin: 3px 0 2px; font-size: 18px; }
.kanji-test-overview p { margin: 0; color: #6e7885; font-size: 10px; }
.kanji-test-overview button { min-height: 44px; padding: 0 16px; border: 0; border-radius: 13px; color: #fff; background: linear-gradient(145deg, #5bd069, #279d42); font-size: 10px; font-weight: 800; cursor: pointer; box-shadow: 0 9px 20px rgba(46, 169, 74, .2); }

.kanji-test-sections { display: grid; gap: 20px; scroll-margin-top: 96px; }
.kanji-test-section { overflow: hidden; border: 1px solid #dce9de; border-radius: 23px; background: #fff; box-shadow: 0 14px 32px rgba(47, 92, 57, .07); scroll-margin-top: 96px; }
.kanji-test-section-header { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 13px; align-items: center; padding: 18px 20px; border-bottom: 1px solid #e7eee8; background: linear-gradient(180deg, #fbfffb, #f7fcf8); }
.kanji-test-section-number { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 13px; color: #fff; background: linear-gradient(145deg, #73dd7d, #2ea94a); font-size: 15px; font-weight: 900; }
.kanji-test-section-header h2 { margin: 0; font-family: "Noto Sans JP", sans-serif; font-size: 16px; }
.kanji-test-section-header p { margin: 3px 0 0; color: #7b8592; font-size: 9px; }
.kanji-test-section-header > strong { min-width: 64px; padding: 7px 10px; border-radius: 999px; color: #287a3b; background: #e8f8eb; font-size: 9px; text-align: center; }

.kanji-test-question-list { display: grid; gap: 1px; padding: 12px; background: #edf1ee; }
.kanji-test-question-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) minmax(165px, 220px) 32px; gap: 12px; align-items: center; min-height: 66px; padding: 10px 12px; background: #fff; transition: background .2s ease; }
.kanji-test-question-number { display: grid; width: 31px; height: 31px; place-items: center; border-radius: 10px; color: #657080; background: #f2f5f3; font-size: 10px; font-weight: 900; }
.kanji-test-question-sentence { font-family: "Noto Sans JP", sans-serif; font-size: 12px; line-height: 1.75; }
.kanji-test-question-sentence mark { padding: 2px 4px; border-radius: 5px; color: #196d30; background: #dff5e3; font-weight: 900; }
.kanji-test-writing-prompt { display: inline-flex; align-items: center; min-height: 40px; width: fit-content; padding: 0 15px; border-radius: 12px; color: #2f5d38; background: #f1f8f2; font-family: "Noto Sans JP", sans-serif; font-size: 18px; font-weight: 800; }
.kanji-test-answer-input { width: 100%; min-height: 42px; padding: 0 12px; border: 1px solid #d7dee0; border-radius: 11px; color: #1c2533; background: #fff; font-family: "Noto Sans JP", sans-serif; font-size: 13px; outline: none; transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; }
.kanji-test-answer-input:focus { border-color: #65c875; box-shadow: 0 0 0 3px rgba(79, 207, 102, .13); }
.kanji-test-answer-status { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 50%; color: #a3abb6; background: #f3f5f7; font-size: 15px; font-weight: 900; }
.kanji-test-question-row.is-correct, .kanji-test-mixed-row.is-correct { background: #f3fcf5; }
.kanji-test-question-row.is-correct .kanji-test-answer-input, .kanji-test-mixed-row.is-correct .kanji-test-answer-input { border-color: #71ce82; background: #f8fff9; }
.kanji-test-question-row.is-correct .kanji-test-answer-status, .kanji-test-mixed-row.is-correct .kanji-test-answer-status { color: #fff; background: #36af51; }
.kanji-test-question-row.is-wrong, .kanji-test-mixed-row.is-wrong { background: #fff7f7; }
.kanji-test-question-row.is-wrong .kanji-test-answer-input, .kanji-test-mixed-row.is-wrong .kanji-test-answer-input { border-color: #ef9a9a; background: #fffafa; }
.kanji-test-question-row.is-wrong .kanji-test-answer-status, .kanji-test-mixed-row.is-wrong .kanji-test-answer-status { color: #fff; background: #e14949; }

.kanji-test-passage { margin: 18px 18px 0; padding: 23px 25px; border: 1px solid #dce6de; border-radius: 18px; background: #fcfefc; }
.kanji-test-passage h3 { margin: 0 0 18px; text-align: center; font-family: "Noto Sans JP", sans-serif; font-size: 18px; }
.kanji-test-passage p { margin: 0 0 14px; font-family: "Noto Sans JP", sans-serif; font-size: 12px; line-height: 2.05; }
.kanji-test-passage p:last-child { margin-bottom: 0; }
.kanji-test-passage-mark { padding: 2px 4px; border-radius: 5px; color: #17682d; background: #dff5e3; font-weight: 800; }
.kanji-test-passage-mark sup { margin-right: 2px; color: #e25c47; font-size: 9px; }
.kanji-test-mixed-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 18px; border: 1px solid #e2e8e3; border-radius: 16px; overflow: hidden; background: #e8ede9; }
.kanji-test-mixed-row { display: grid; grid-template-columns: 32px minmax(90px, .7fr) minmax(120px, 1fr) 30px; gap: 9px; align-items: center; min-height: 63px; padding: 9px 11px; background: #fff; }
.kanji-test-mixed-prompt { min-width: 0; }
.kanji-test-mixed-prompt strong { display: block; overflow: hidden; font-family: "Noto Sans JP", sans-serif; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.kanji-test-mixed-prompt small { display: block; margin-top: 2px; color: #8a939f; font-size: 8px; }

.kanji-test-bottom-actions { display: flex; justify-content: center; padding: 5px 0 12px; }
.kanji-test-reset-button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-width: 210px; min-height: 50px; border: 0; border-radius: 15px; color: #fff; background: linear-gradient(145deg, #64d671, #299f43); font-size: 11px; font-weight: 800; cursor: pointer; box-shadow: 0 11px 24px rgba(46,169,74,.2); }
.kanji-test-reset-button svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.kanji-test-result-card { text-align: center; }
.kanji-test-result-ring { --test-progress: 0deg; position: relative; display: grid; width: 150px; height: 150px; place-items: center; margin: 22px auto 15px; border-radius: 50%; background: conic-gradient(#43bd5b var(--test-progress), #edf0ef 0); }
.kanji-test-result-ring::before { content: ""; position: absolute; inset: 13px; border-radius: 50%; background: #fff; }
.kanji-test-result-ring > div { position: relative; z-index: 1; display: grid; }
.kanji-test-result-ring strong { font-size: 27px; }
.kanji-test-result-ring span { color: #7a8492; font-size: 9px; }
.kanji-test-result-list { padding: 0 17px 16px; }
.kanji-test-result-list > div { display: flex; justify-content: space-between; gap: 10px; padding: 11px 0; border-top: 1px solid #edf0f2; font-size: 10px; }
.kanji-test-result-list span { color: #727c89; }
.kanji-test-structure-card ol { display: grid; gap: 9px; margin: 0; padding: 14px 15px 17px; list-style: none; counter-reset: structure; }
.kanji-test-structure-card li { display: grid; grid-template-columns: 58px 1fr; gap: 9px; align-items: center; padding: 10px; border-radius: 12px; background: #f6faf7; }
.kanji-test-structure-card li strong { color: #27803b; font-size: 10px; }
.kanji-test-structure-card li span { color: #687280; font-size: 9px; }

html.dark .kanji-test-overview { border-color: #34583d; background: linear-gradient(135deg,#1d3323,#20392a); }
html.dark .kanji-test-overview h2 { color: #edf2f7; }
html.dark .kanji-test-overview p { color: #a7b0be; }
html.dark .kanji-test-section { border-color: #2c333d; background: #171b22; }
html.dark .kanji-test-section-header { border-color: #2d343e; background: #19201b; }
html.dark .kanji-test-question-list, html.dark .kanji-test-mixed-grid { background: #303640; border-color: #343c47; }
html.dark .kanji-test-question-row, html.dark .kanji-test-mixed-row { color: #edf2f7; background: #1b2028; }
html.dark .kanji-test-writing-prompt { color: #d9eadc; background: #233128; }
html.dark .kanji-test-answer-input { color: #edf2f7; border-color: #3a434f; background: #202630; }
html.dark .kanji-test-passage { color: #edf2f7; border-color: #343c47; background: #1b2028; }
html.dark .kanji-test-result-ring::before { background: #171b22; }
html.dark .kanji-test-structure-card li { background: #1e2520; }
html.dark .kanji-test-question-row.is-correct, html.dark .kanji-test-mixed-row.is-correct { background: #18281c; }
html.dark .kanji-test-question-row.is-wrong, html.dark .kanji-test-mixed-row.is-wrong { background: #2c1c1e; }

@media (max-width: 760px) {
  .kanji-test-overview { grid-template-columns: 54px minmax(0, 1fr); padding: 17px; }
  .kanji-test-overview-badge { width: 52px; height: 52px; border-radius: 16px; }
  .kanji-test-overview button { grid-column: 1 / -1; }
  .kanji-test-question-row { grid-template-columns: 32px minmax(0, 1fr) 30px; }
  .kanji-test-answer-input { grid-column: 2 / 3; }
  .kanji-test-answer-status { grid-column: 3; grid-row: 1 / 3; }
  .kanji-test-mixed-grid { grid-template-columns: 1fr; margin: 12px; }
  .kanji-test-passage { margin: 12px 12px 0; padding: 18px; }
}

@media (max-width: 480px) {
  .kanji-test-section-header { grid-template-columns: 40px minmax(0, 1fr); }
  .kanji-test-section-header > strong { grid-column: 2; width: fit-content; }
  .kanji-test-mixed-row { grid-template-columns: 30px minmax(0, 1fr) 30px; }
  .kanji-test-mixed-prompt { grid-column: 2; }
  .kanji-test-mixed-row .kanji-test-answer-input { grid-column: 2; }
  .kanji-test-mixed-row .kanji-test-answer-status { grid-column: 3; grid-row: 1 / 3; }
}