.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 #bae6fd; border-radius: 23px; background: linear-gradient(135deg,#f0f9ff,#e0f2fe); box-shadow: 0 14px 32px rgba(2,132,199,.10); }
.kanji-test-overview-badge { display:grid; width:62px; height:62px; place-items:center; border-radius:19px; color:#fff; background:linear-gradient(145deg,#38bdf8,#0284c7); font-family:"Noto Sans JP",sans-serif; font-size:25px; font-weight:900; }
.kanji-test-overview span { color:#0369a1; 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:#64748b; font-size:10px; }
.kanji-test-overview button { min-height:44px; padding:0 16px; border:0; border-radius:13px; color:#fff; background:linear-gradient(145deg,#38bdf8,#0284c7); font-size:10px; font-weight:800; cursor:pointer; box-shadow:0 9px 20px rgba(2,132,199,.22); }
.kanji-test-overview button:hover { transform:translateY(-1px); }

.kanji-test-sections { display:grid; gap:20px; scroll-margin-top:96px; }
.kanji-test-section { overflow:hidden; border:1px solid #dbeafe; border-radius:23px; background:#fff; box-shadow:0 14px 32px rgba(15,78,122,.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 #e5edf5; background:linear-gradient(180deg,#fbfdff,#f3f9ff); }
.kanji-test-section-number { display:grid; width:42px; height:42px; place-items:center; border-radius:13px; color:#fff; background:linear-gradient(145deg,#38bdf8,#0284c7); 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-family:"Noto Sans JP",sans-serif; font-size:9px; line-height:1.55; }
.kanji-test-section-header > strong { min-width:64px; padding:7px 10px; border-radius:999px; color:#0369a1; background:#e0f2fe; font-size:9px; text-align:center; }

.kanji-test-question-list { display:grid; gap:10px; padding:14px; background:#f4f7fb; }
.kanji-test-question-row { padding:15px 16px; border:1px solid #e4eaf1; border-radius:16px; background:#fff; transition:border-color .2s ease, box-shadow .2s ease, background .2s ease; }
.kanji-test-question-heading { display:grid; grid-template-columns:34px minmax(0,1fr); gap:11px; align-items:start; }
.kanji-test-question-number { display:grid; width:31px; height:31px; place-items:center; border-radius:10px; color:#64748b; background:#f1f5f9; font-size:10px; font-weight:900; }
.kanji-test-question-sentence { padding-top:3px; font-family:"Noto Sans JP",sans-serif; font-size:13px; line-height:1.8; }
.kanji-test-question-sentence mark { padding:1px 3px; border-radius:4px; color:#075985; background:#e0f2fe; font-weight:900; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }
.kanji-test-choice-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin:12px 0 0 45px; }
.kanji-test-choice { display:grid; grid-template-columns:29px minmax(0,1fr); gap:9px; align-items:center; min-height:45px; padding:7px 11px; border:1px solid #dbe3ec; border-radius:12px; color:#1e293b; background:#fff; font-family:"Noto Sans JP",sans-serif; font-size:12px; text-align:left; cursor:pointer; transition:transform .15s ease,border-color .2s ease,background .2s ease,box-shadow .2s ease; }
.kanji-test-choice:hover { transform:translateY(-1px); border-color:#7dd3fc; box-shadow:0 6px 14px rgba(2,132,199,.09); }
.kanji-test-choice-number { display:grid; width:27px; height:27px; place-items:center; border-radius:8px; color:#475569; background:#f1f5f9; font-family:"Poppins",sans-serif; font-size:10px; font-weight:900; }
.kanji-test-choice.is-selected { border-color:#38bdf8; background:#f0f9ff; }
.kanji-test-choice.is-correct { border-color:#4ade80; color:#166534; background:#f0fdf4; box-shadow:0 0 0 2px rgba(74,222,128,.08); }
.kanji-test-choice.is-correct .kanji-test-choice-number { color:#fff; background:#22c55e; }
.kanji-test-choice.is-wrong { border-color:#f87171; color:#991b1b; background:#fef2f2; }
.kanji-test-choice.is-wrong .kanji-test-choice-number { color:#fff; background:#ef4444; }
.kanji-test-question-feedback { min-height:18px; margin:9px 0 0 45px; font-size:9px; font-weight:700; }
.kanji-test-question-row.is-correct .kanji-test-question-feedback { color:#15803d; }
.kanji-test-question-row.is-wrong .kanji-test-question-feedback { color:#b91c1c; }

.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,#38bdf8,#0284c7); font-size:11px; font-weight:800; cursor:pointer; box-shadow:0 11px 24px rgba(2,132,199,.22); }
.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(#0ea5e9 var(--test-progress),#edf2f7 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; }
.kanji-test-structure-card li { display:grid; grid-template-columns:58px 1fr; gap:9px; align-items:center; padding:10px; border-radius:12px; background:#f0f9ff; }
.kanji-test-structure-card li strong { color:#0369a1; font-size:10px; }
.kanji-test-structure-card li span { color:#687280; font-size:9px; }

html.dark .kanji-test-overview { border-color:#075985; background:linear-gradient(135deg,#082f49,#0c4a6e); }
html.dark .kanji-test-overview h2, html.dark .kanji-test-section-header h2 { color:#edf2f7; }
html.dark .kanji-test-overview p, html.dark .kanji-test-section-header p { color:#a7b0be; }
html.dark .kanji-test-section { border-color:#2c333d; background:#171b22; }
html.dark .kanji-test-section-header { border-color:#2d343e; background:#17202a; }
html.dark .kanji-test-question-list { background:#111827; }
html.dark .kanji-test-question-row { color:#edf2f7; border-color:#303846; background:#1b2028; }
html.dark .kanji-test-choice { color:#e5e7eb; border-color:#3a434f; background:#202630; }
html.dark .kanji-test-choice-number { color:#cbd5e1; background:#334155; }
html.dark .kanji-test-choice.is-selected { border-color:#38bdf8; background:#0c4a6e; }
html.dark .kanji-test-choice.is-correct { color:#bbf7d0; border-color:#22c55e; background:#15351f; }
html.dark .kanji-test-choice.is-wrong { color:#fecaca; border-color:#ef4444; background:#3f1d24; }
html.dark .kanji-test-result-ring::before { background:#171b22; }
html.dark .kanji-test-structure-card li { background:#172c3c; }

@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-choice-grid { grid-template-columns:1fr; }
}
@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-question-row { padding:13px 11px; }
  .kanji-test-choice-grid, .kanji-test-question-feedback { margin-left:0; }
}