/*
 * 疑似アプリクイズのトークン対応表
 * | Web | Flutter参照元 | 値 |
 * | -- | -- | -- |
 * | --sld-aq-primary | AppColors.primary | #58CC02 |
 * | --sld-aq-correct | AppColors.correct | #58A700 |
 * | --sld-aq-error | AppColors.incorrect | #FF4B4B |
 * | --sld-aq-correct-dark | AppColors.correctOnDark | #89E219 |
 * | --sld-aq-error-dark | AppColors.incorrectOnDark | #FF8C8C |
 * | --sld-aq-quiz-bg / card / border / option | quiz_screen.dart直書き | #F3F4F6 / #EFF6FF / #BFDBFE / #3B82F6 |
 * | --sld-aq-result-bg / text / muted / border | ui_constants.dart | #F7F7F7 / #3C3C3C / #777777 / #E5E5E5 |
 * | --sld-aq-radius-card / option / sheet | quiz_screen.dart | 16px / 12px / 24px |
 * | --sld-aq-progress-duration / --sld-aq-page-duration | quiz_screen.dart | 400ms / 300ms |
 */
.sld-appquiz-ab-root {
  --sld-aq-primary: #58cc02;
  --sld-aq-correct: #58a700;
  --sld-aq-error: #ff4b4b;
  --sld-aq-correct-dark: #89e219;
  --sld-aq-error-dark: #ff8c8c;
  --sld-aq-quiz-bg: #f3f4f6;
  --sld-aq-question-bg: #eff6ff;
  --sld-aq-question-border: #bfdbfe;
  --sld-aq-option: #3b82f6;
  --sld-aq-option-border: #9ca3af;
  --sld-aq-progress-bg: #e5e7eb;
  --sld-aq-progress-answer: #f87171;
  --sld-aq-result-bg: #f7f7f7;
  --sld-aq-text: #3c3c3c;
  --sld-aq-muted: #777777;
  --sld-aq-border: #e5e5e5;
  --sld-aq-radius-card: 16px;
  --sld-aq-radius-option: 12px;
  --sld-aq-radius-sheet: 24px;
  --sld-aq-progress-duration: 400ms;
  --sld-aq-page-duration: 300ms;
  width: 100%;
  min-width: 0;
}
.sld-appquiz-ab-root *, .sld-appquiz-ab-root *::before, .sld-appquiz-ab-root *::after { box-sizing: border-box; }
.sld-appquiz-variant[hidden] { display: none !important; }
.sld-appquiz-variant-b { min-width: 0; margin-top: 16px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Noto Sans JP", sans-serif; }
.sld-appquiz-lead { min-width: 0; margin-bottom: 12px; padding-left: 12px; border-left: 3px solid #0f766e; color: #1f2937; }
.sld-appquiz-lead-title { margin: 0; font-size: 16px; font-weight: 800; line-height: 1.5; }
.sld-appquiz-lead-copy { margin: 4px 0 0; color: #64748b; font-size: 13px; line-height: 1.65; }
.sld-appquiz-device { position: relative; width: 100%; min-width: 0; aspect-ratio: 845 / 1714; overflow: hidden; background: url('/images/app_intro/iphone-quiz-frame-cropped.png') center / 100% 100% no-repeat; filter: drop-shadow(0 10px 16px rgba(0,0,0,.14)); container-type: inline-size; }
.sld-appquiz-status { position: absolute; z-index: 3; top: 2.3337%; left: 5.4438%; width: 89.2308%; height: 3.6182%; display: flex; align-items: center; justify-content: space-between; color: #111; background: transparent; font-size: 10px; font-weight: 800; pointer-events: none; }
.sld-appquiz-status > span { width: 30.5%; padding-inline: 6%; }
.sld-appquiz-status > span:last-child { text-align: right; }
.sld-appquiz-screen { position: absolute; z-index: 2; left: 5.4438%; top: 2.3337%; width: 89.2308%; height: 95.2159%; min-height: 0; overflow: hidden; border-radius: 15.92% / 7.35%; background: transparent; color: #000; }
.sld-appquiz-scroll { position: absolute; inset: 0; min-height: 0; padding-top: 8.225%; overflow-x: hidden; overflow-y: auto; scrollbar-width: none; }
.sld-appquiz-scroll > div { min-height: 100%; background: var(--sld-aq-quiz-bg); }
.sld-appquiz-screen.is-result-screen .sld-appquiz-scroll > div { background: var(--sld-aq-result-bg); }
.sld-appquiz-scroll::-webkit-scrollbar { display: none; }
.sld-appquiz-loading { margin: 0; padding: 72px 16px; text-align: center; color: #6b7280; font-size: 14px; }
.sld-appquiz-intro { min-height: 100%; display: flex; flex-direction: column; background: var(--sld-aq-result-bg); }
.sld-appquiz-intro-body { min-height: 0; padding: 42px 22px 28px; display: flex; flex: 1; flex-direction: column; align-items: center; text-align: center; }
.sld-appquiz-intro-logo { width: 76px; height: 76px; margin-bottom: 18px; border-radius: 18px; box-shadow: 0 4px 0 var(--sld-aq-border); }
.sld-appquiz-intro-kicker { margin: 0 0 10px; color: var(--sld-aq-correct); font-size: 12px; font-weight: 900; letter-spacing: .08em; }
.sld-appquiz-intro h2 { margin: 0; color: var(--sld-aq-text); font-size: 23px; font-weight: 900; line-height: 1.45; }
.sld-appquiz-intro-copy { margin: 16px 0 18px; color: var(--sld-aq-muted); font-size: 15px; line-height: 1.7; text-align: left; }
.sld-appquiz-intro-meta { width: 100%; margin-bottom: 24px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.sld-appquiz-intro-meta span { padding: 9px 4px; border: 2px solid var(--sld-aq-border); border-radius: 10px; background: #fff; color: var(--sld-aq-text); font-size: 12px; font-weight: 800; }
.sld-appquiz-start { margin-top: auto; }
.sld-appquiz-start:disabled { opacity: .65; cursor: wait; }
.sld-appquiz-intro-note { margin: 14px 4px 0; color: var(--sld-aq-muted); font-size: 11px; line-height: 1.55; }
.sld-appquiz-appbar { position: relative; height: 56px; display: flex; align-items: center; justify-content: center; padding: 0 52px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.16); z-index: 2; }
.sld-appquiz-appbar h2 { min-width: 0; margin: 0; overflow: hidden; color: #111; font-size: 16px; font-weight: 700; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.sld-appquiz-community-toggle { position: absolute; right: 4px; top: 6px; min-width: 44px; min-height: 44px; padding: 0 8px; border: 0; background: transparent; color: var(--sld-aq-muted); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.sld-appquiz-community-toggle.is-community { color: var(--sld-aq-primary); }
.sld-appquiz-new-badge { position: absolute; top: 4px; right: 2px; padding: 1px 4px; border-radius: 8px; background: var(--sld-aq-error); color: #fff; font-size: 7px; font-weight: 800; line-height: 1.2; pointer-events: none; }
.sld-appquiz-exit { position: absolute; left: 4px; top: 6px; width: 44px; height: 44px; border: 0; background: transparent; color: #111; font-size: 28px; line-height: 1; cursor: pointer; }
.sld-appquiz-body { padding: 16px 16px 24px; }
.sld-appquiz-progress-row { display: flex; justify-content: space-between; margin-bottom: 8px; color: #000; font-size: 14px; font-weight: 600; }
.sld-appquiz-progress { position: relative; height: 12px; margin-bottom: 18px; overflow: hidden; border-radius: 999px; background: var(--sld-aq-progress-bg); }
.sld-appquiz-progress-answer, .sld-appquiz-progress-correct { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; transition: width var(--sld-aq-progress-duration) ease-in-out; }
.sld-appquiz-progress-answer { background: var(--sld-aq-progress-answer); }
.sld-appquiz-progress-correct { background: var(--sld-aq-correct); }
.sld-appquiz-question { margin-bottom: 24px; padding: 40px 24px 8px; border: 2px solid var(--sld-aq-question-border); border-radius: var(--sld-aq-radius-card); background: var(--sld-aq-question-bg); }
.sld-appquiz-law { margin: 0 0 12px; color: #6b7280; font-size: 14px; font-weight: 600; }
.sld-appquiz-question-text { margin: 0; color: #000; font-size: 18px; font-weight: 400; line-height: 1.55; text-align: left; }
.sld-appquiz-source { margin: 24px 0 0; color: #777; font-size: 9px; font-weight: 700; line-height: 1.4; text-align: right; }
.sld-appquiz-options { display: grid; gap: 16px; }
.sld-appquiz-option { width: 100%; min-height: 56px; margin: 0; padding: 16px 24px; border: 1px solid var(--sld-aq-option-border); border-radius: var(--sld-aq-radius-option); background: #fff; color: var(--sld-aq-option); font: inherit; font-size: 16px; font-weight: 700; line-height: 1.45; text-align: left; cursor: pointer; }
.sld-appquiz-option:focus-visible, .sld-appquiz-next:focus-visible, .sld-appquiz-cta:focus-visible, .sld-appquiz-exit:focus-visible, .sld-appquiz-learning-card:focus-visible, .sld-appquiz-modal-close:focus-visible { outline: 3px solid #1cb0f6; outline-offset: 2px; }
.sld-appquiz-option:disabled { cursor: default; }
.sld-appquiz-option.is-correct { border-color: transparent; background: var(--sld-aq-correct); color: #fff; }
.sld-appquiz-option.is-incorrect { border-color: transparent; background: var(--sld-aq-error); color: #fff; }
.sld-appquiz-option.is-muted { border-color: transparent; background: #e5e7eb; color: #777; }
.sld-appquiz-feedback { position: absolute; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.54); opacity: 0; pointer-events: none; animation: sld-appquiz-feedback 800ms ease-in-out both; }
.sld-appquiz-feedback-mark { font-size: 100px; font-weight: 900; line-height: 1; text-shadow: 2px 2px 8px rgba(0,0,0,.7); }
.sld-appquiz-feedback-mark.is-correct { color: var(--sld-aq-correct-dark); }
.sld-appquiz-feedback-mark.is-incorrect { color: var(--sld-aq-error-dark); }
@keyframes sld-appquiz-feedback { 0%,100% { opacity: 0; } 45%,55% { opacity: 1; } }
.sld-appquiz-sheet { position: absolute; inset: auto 0 0; z-index: 11; max-height: 85%; overflow-y: auto; padding: 22px 18px calc(22px + env(safe-area-inset-bottom)); border-radius: var(--sld-aq-radius-sheet) var(--sld-aq-radius-sheet) 0 0; background: #fff; box-shadow: 0 -8px 28px rgba(0,0,0,.18); transform: translateY(100%); animation: sld-appquiz-sheet-in 300ms ease-out forwards; }
@keyframes sld-appquiz-sheet-in { to { transform: translateY(0); } }
.sld-appquiz-modal { position: absolute; inset: 0; z-index: 12; display: flex; align-items: center; justify-content: center; padding: 24px 20px; background: rgba(0,0,0,.54); animation: sld-appquiz-modal-in 150ms ease-out both; }
@keyframes sld-appquiz-modal-in { from { opacity: 0; } to { opacity: 1; } }
.sld-appquiz-modal-panel { width: 100%; max-height: 100%; overflow-y: auto; padding: 20px; border-radius: 18px; background: #f7f8f4; color: var(--sld-aq-text); text-align: center; }
.sld-appquiz-modal-title { margin: 0 0 10px; font-size: 18px; font-weight: 800; line-height: 1.5; }
.sld-appquiz-modal-copy { margin: 0 0 18px; color: var(--sld-aq-muted); font-size: 14px; line-height: 1.7; text-align: left; }
.sld-appquiz-modal-close { width: 100%; min-height: 44px; margin-top: 10px; border: 0; background: transparent; color: var(--sld-aq-muted); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.sld-appquiz-verdict { margin: 0 0 14px; color: var(--sld-aq-error); font-size: 24px; font-weight: 800; text-align: center; }
.sld-appquiz-verdict.is-correct { color: var(--sld-aq-correct); }
.sld-appquiz-correct-label { margin: 0 0 4px; color: var(--sld-aq-muted); font-size: 14px; text-align: center; }
.sld-appquiz-correct-answer { margin: 0 0 16px; color: var(--sld-aq-text); font-size: 18px; font-weight: 700; text-align: center; }
.sld-appquiz-explanation { margin: 0 0 20px; color: var(--sld-aq-text); font-size: 16px; line-height: 1.65; white-space: pre-line; }
.sld-appquiz-next, .sld-appquiz-cta { display: flex; width: 100%; min-height: 48px; align-items: center; justify-content: center; padding: 13px 18px; border: 0; border-radius: 12px; background: var(--sld-aq-primary); box-shadow: 0 4px 0 var(--sld-aq-correct); color: #fff; font: inherit; font-size: 16px; font-weight: 800; line-height: 1.4; text-align: center; text-decoration: none; cursor: pointer; }
.sld-appquiz-page-enter { animation: sld-appquiz-page-enter var(--sld-aq-page-duration) ease-out both; }
@keyframes sld-appquiz-page-enter { from { transform: translateX(100%); } to { transform: translateX(0); } }
.sld-appquiz-results { min-height: 100%; padding-bottom: 24px; background: var(--sld-aq-result-bg); }
.sld-appquiz-results-body { padding: 20px 12px; }
.sld-appquiz-score { padding: 24px 16px; border: 2px solid var(--sld-aq-border); border-radius: 16px; background: #fff; box-shadow: 0 2px 0 var(--sld-aq-border); text-align: center; }
.sld-appquiz-score-label { margin: 0; color: var(--sld-aq-text); font-size: 16px; }
.sld-appquiz-score-value { margin: 4px 0; color: var(--sld-aq-primary); font-size: 64px; font-weight: 800; line-height: 1.1; }
.sld-appquiz-score-detail { margin: 0; color: var(--sld-aq-muted); font-size: 16px; }
.sld-appquiz-review-title { margin: 26px 0 14px; color: var(--sld-aq-text); font-size: 20px; font-weight: 800; text-align: center; }
.sld-appquiz-review { margin-bottom: 12px; border: 2px solid var(--sld-aq-border); border-radius: 16px; background: #fff; box-shadow: 0 2px 0 var(--sld-aq-border); color: var(--sld-aq-text); overflow: hidden; }
.sld-appquiz-review summary { min-height: 56px; padding: 14px 16px; display: flex; align-items: center; gap: 10px; list-style: none; font-size: 16px; font-weight: 600; cursor: pointer; }
.sld-appquiz-review summary::-webkit-details-marker { display: none; }
.sld-appquiz-review summary::after { content: "›"; margin-left: auto; color: var(--sld-aq-muted); font-size: 24px; transform: rotate(90deg); transition: transform 180ms ease; }
.sld-appquiz-review[open] summary::after { transform: rotate(-90deg); }
.sld-appquiz-review-icon { color: var(--sld-aq-error); font-size: 22px; line-height: 1; }
.sld-appquiz-review-icon.is-correct { color: var(--sld-aq-correct); }
.sld-appquiz-review-body { padding: 0 24px 16px; }
.sld-appquiz-review-label { margin-top: 14px !important; font-size: 16px !important; font-weight: 900; }
.sld-appquiz-review-explanation { margin-top: 20px; padding: 16px; border-radius: 10px; background: rgba(28,176,246,.12); }
.sld-appquiz-review-explanation strong { color: #1899d6; }
.sld-appquiz-review p { margin: 0 0 8px; font-size: 14px; line-height: 1.55; white-space: pre-line; }
.sld-appquiz-review p:last-child { margin-bottom: 0; }
.sld-appquiz-review-question { font-size: 16px !important; font-weight: 700; }
.sld-appquiz-cta-copy { margin: 24px 4px 10px; color: var(--sld-aq-text); font-size: 16px; font-weight: 700; line-height: 1.6; text-align: left; }
.sld-appquiz-noscript { margin: 12px 0 0; text-align: center; }
.sld-appquiz-noscript a { color: #047857; font-weight: 700; }
.sld-appquiz-tab-scroll { bottom: 76px; }
.sld-appquiz-nav { position: absolute; z-index: 8; inset: auto 0 0; height: 76px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 3px 2px 5px; border-top: 1px solid var(--sld-aq-border); background: #fff; }
.sld-appquiz-nav-item { min-width: 0; min-height: 44px; padding: 2px 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; border: 0; background: transparent; color: var(--sld-aq-muted); font: inherit; font-size: 12px; line-height: 1.1; white-space: nowrap; cursor: pointer; }
.sld-appquiz-nav-item.is-active { color: var(--sld-aq-primary); font-size: 13px; font-weight: 700; }
.sld-appquiz-nav-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; }
.sld-appquiz-nav-item.is-active .sld-appquiz-nav-icon { background: rgba(88,204,2,.16); }
.sld-appquiz-nav svg { width: 22px; height: 22px; fill: currentColor; }
.sld-appquiz-tab-body { padding: 16px 20px 28px; }
.sld-appquiz-switch { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; margin-bottom: 24px; padding: 6px; border-radius: 40px; background: #fff; box-shadow: 0 8px 16px rgba(0,0,0,.12); }
.sld-appquiz-switch button { min-height: 44px; border: 0; border-radius: 34px; background: transparent; color: var(--sld-aq-muted); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.sld-appquiz-switch button.is-active { background: var(--sld-aq-primary); color: #fff; }
.sld-appquiz-ranking-subtabs { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0; margin-bottom: 20px; padding: 6px; border-radius: 34px; background: #e8edf2; }
.sld-appquiz-ranking-subtabs[hidden] { display: none; }
.sld-appquiz-ranking-subtabs button { min-width: 0; min-height: 44px; padding: 4px; border: 0; border-radius: 30px; background: transparent; color: var(--sld-aq-muted); font: inherit; font-size: 12px; font-weight: 700; line-height: 1.2; cursor: pointer; }
.sld-appquiz-ranking-subtabs button.is-active { background: #fff; box-shadow: 0 6px 12px rgba(0,0,0,.12); color: var(--sld-aq-primary); }
.sld-appquiz-ranking-label { margin: 0 0 16px; color: #808080; font-size: 16px; }
.sld-appquiz-ranking-heading { margin: 0 0 12px; color: var(--sld-aq-text); font-size: 20px; font-weight: 800; }
.sld-appquiz-ranking-list { display: grid; gap: 12px; }
.sld-appquiz-ranking-divider { height: 1px; margin: 24px 0 20px; background: var(--sld-aq-border); }
.sld-appquiz-rank-item { padding: 18px 20px; border-radius: 28px; background: #fff; box-shadow: 0 8px 16px rgba(0,0,0,.12); color: var(--sld-aq-text); }
.sld-appquiz-rank-item.is-self { background: var(--sld-aq-primary); color: #fff; }
.sld-appquiz-rank-row { display: flex; align-items: center; column-gap: 12px; }
.sld-appquiz-rank-badge { width: 44px; height: 44px; flex: 0 0 44px; display: grid; place-items: center; border-radius: 50%; background: rgba(88,204,2,.12); color: var(--sld-aq-primary); font-size: 16px; font-weight: 800; }
.sld-appquiz-rank-badge { margin-right: 4px; }
.sld-appquiz-rank-badge.rank-1, .sld-appquiz-rank-badge.rank-2, .sld-appquiz-rank-badge.rank-3 { width: 48px; height: 48px; flex-basis: 48px; color: #fff; font-size: 18px; }
.sld-appquiz-rank-badge.rank-1 { background: linear-gradient(135deg,#ffe082,#ffc107); }
.sld-appquiz-rank-badge.rank-2 { background: linear-gradient(135deg,#e0e0e0,#bdbdbd); }
.sld-appquiz-rank-badge.rank-3 { background: linear-gradient(135deg,#f4b183,#ce7a3d); }
.sld-appquiz-rank-item.is-self .sld-appquiz-rank-badge:not(.rank-1):not(.rank-2):not(.rank-3) { background: #fff; }
.sld-appquiz-rank-name { min-width: 0; flex: 1; overflow: hidden; font-size: 16px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.sld-appquiz-rank-row strong { flex: 0 0 auto; font-size: 16px; }
.sld-appquiz-share { width: 100%; min-height: 44px; margin-top: 16px; border: 0; border-radius: 12px; background: #fff; color: var(--sld-aq-primary); font: inherit; font-size: 14px; font-weight: 800; }
.sld-appquiz-community, .sld-appquiz-download { margin: 24px 0; padding: 28px 20px; border-radius: 24px; background: #fff; box-shadow: 0 10px 18px rgba(0,0,0,.12); color: var(--sld-aq-text); text-align: center; }
.sld-appquiz-community[hidden] { display: none; }
.sld-appquiz-community strong, .sld-appquiz-download strong { font-size: 18px; line-height: 1.5; }
.sld-appquiz-community p, .sld-appquiz-download p { margin: 12px 0 0; color: var(--sld-aq-muted); font-size: 14px; line-height: 1.65; }
.sld-appquiz-download { margin: 20px; }
.sld-appquiz-download .sld-appquiz-cta { margin-top: 20px; }
.sld-appquiz-stats-body { padding-bottom: 28px; }
.sld-appquiz-calendar-wrap { padding: 16px 20px; }
.sld-appquiz-stats-tabs { position: sticky; top: 0; z-index: 3; display: flex; min-width: 0; overflow-x: auto; background: var(--sld-aq-result-bg); scrollbar-width: none; }
.sld-appquiz-stats-tabs::-webkit-scrollbar { display: none; }
.sld-appquiz-stats-tabs button { min-width: max-content; min-height: 44px; flex: 1 0 auto; padding: 0 16px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--sld-aq-muted); font: inherit; font-size: 14px; font-weight: 700; white-space: nowrap; cursor: pointer; }
.sld-appquiz-stats-tabs button.is-active { border-bottom-color: var(--sld-aq-primary); color: var(--sld-aq-primary); }
.sld-appquiz-stats-content { display: grid; gap: 16px; padding: 16px 20px 0; }
.sld-appquiz-stats-card { padding: 20px; overflow: hidden; border-radius: 24px; background: #fff; box-shadow: 0 10px 18px rgba(0,0,0,.12); }
.sld-appquiz-stats-card h3 { margin: 0 0 16px; color: var(--sld-aq-text); font-size: 18px; font-weight: 800; }
.sld-appquiz-calendar-title { margin-bottom: 12px; color: var(--sld-aq-text); font-size: 16px; font-weight: 800; text-align: center; }
.sld-appquiz-week, .sld-appquiz-days { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); text-align: center; }
.sld-appquiz-week span { color: var(--sld-aq-muted); font-size: 11px; }
.sld-appquiz-days span { min-width: 0; height: 32px; display: grid; place-items: center; color: #3c4650; font-size: 11px; }
.sld-appquiz-days span.is-learned { border-radius: 50%; background: #2ecc71; color: #fff; font-weight: 800; }
.sld-appquiz-legend { display: flex; gap: 16px; margin-top: 12px; color: #3c4650; font-size: 12px; }
.sld-appquiz-legend span { display: flex; align-items: center; gap: 6px; }
.sld-appquiz-legend i { width: 12px; height: 12px; border-radius: 50%; background: #2ecc71; }
.sld-appquiz-legend b { color: rgba(225,230,236,.8); font-size: 16px; }
.sld-appquiz-chart { height: 180px; min-width: 0; }
.sld-appquiz-bars { height: 180px; display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); align-items: end; gap: 8px; border-bottom: 1px solid var(--sld-aq-border); }
.sld-appquiz-bars span { height: 150px; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 8px; }
.sld-appquiz-bars i { width: 18px; min-height: 5px; border-radius: 8px 8px 2px 2px; background: rgba(88,204,2,.65); box-shadow: 0 -120px 0 rgba(88,204,2,.08) inset; }
.sld-appquiz-bars span:nth-child(6) i { background: var(--sld-aq-primary); }
.sld-appquiz-bars em, .sld-appquiz-chart-days span { color: var(--sld-aq-muted); font-size: 12px; font-style: normal; }
.sld-appquiz-line { width: 100%; height: 152px; overflow: visible; }
.sld-appquiz-line .grid { fill: none; stroke: var(--sld-aq-border); stroke-width: 1; }
.sld-appquiz-line polyline { fill: none; stroke: var(--sld-aq-primary); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.sld-appquiz-line circle { fill: #fff; stroke: var(--sld-aq-primary); stroke-width: 3; }
.sld-appquiz-chart-days { display: grid; grid-template-columns: repeat(7,1fr); text-align: center; }
.sld-appquiz-learning { min-height: 100%; padding: 20px; background: #f4f7fb; }
.sld-appquiz-learning-title { margin: 0; color: #3c3c3c; font-size: 24px; font-weight: 700; }
.sld-appquiz-learning-lead { margin: 4px 0 0; color: #6b7280; font-size: 14px; }
.sld-appquiz-learning-list { display: grid; gap: 16px; margin-top: 16px; }
.sld-appquiz-learning-card { position: relative; width: 100%; min-height: 152px; display: flex; align-items: center; gap: 20px; padding: 24px; border: 0; border-radius: 28px; box-shadow: 0 12px 18px rgba(0,0,0,.26); color: #fff; font: inherit; text-align: left; cursor: pointer; }
.sld-appquiz-learning-card[data-mode="revised_only"] { background: linear-gradient(135deg, #ffc800, #e6b400); color: #3c3c3c; }
.sld-appquiz-learning-card[data-mode="fan_supporter"] { background: linear-gradient(135deg, #2b70c9, #2259a1); }
.sld-appquiz-learning-card[data-mode="challenge"] { background: linear-gradient(180deg, #58cc02, #58a700); }
.sld-appquiz-learning-card[data-mode="binary_choice"] { background: linear-gradient(135deg, #14b8a6, #0d9488); }
.sld-appquiz-learning-card[data-mode="four_choice"] { background: linear-gradient(135deg, #ff9600, #cc7800); }
.sld-appquiz-learning-card[data-mode="case"] { background: linear-gradient(135deg, #ff4b4b, #cc3c3c); }
.sld-appquiz-learning-card[data-mode="category_selector"] { background: linear-gradient(135deg, #1cb0f6, #1899d6); }
.sld-appquiz-learning-card[data-mode="weakness_conquest"] { background: linear-gradient(135deg, #ce82ff, #a568cc); }
.sld-appquiz-learning-card[data-mode="fill_in_blank"] { background: linear-gradient(135deg, #ff6a88, #ff3e6b); }
.sld-appquiz-learning-card[data-mode="fill_in_list"] { background: linear-gradient(135deg, #1cb0f6, #1899d6); }
.sld-appquiz-learning-copy { min-width: 0; flex: 1; }
.sld-appquiz-learning-copy h3 { display: -webkit-box; margin: 0; overflow: hidden; color: inherit; font-size: 22px; font-weight: 700; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.sld-appquiz-learning-label { display: inline-block; margin-top: 8px; padding: 3px 9px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.92); color: #58a700; font-size: 12px; font-weight: 700; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.sld-appquiz-learning-copy p { display: -webkit-box; margin: 10px 0 0; overflow: hidden; color: rgba(255,255,255,.7); font-size: 14px; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.sld-appquiz-learning-card[data-mode="revised_only"] .sld-appquiz-learning-copy p { color: rgba(60,60,60,.7); }
.sld-appquiz-learning-card img { width: 96px; height: 96px; flex: 0 0 auto; border-radius: 20px; object-fit: cover; }
.sld-appquiz-learning-new { position: absolute; top: -8px; right: -8px; padding: 4px 10px; border-radius: 12px; background: #ff4b4b; box-shadow: 0 2px 4px rgba(0,0,0,.26); color: #fff; font-size: 12px; font-weight: 700; }
@supports (font-size: 1cqw) {
  .sld-appquiz-device {
    --sld-aq-radius-card: clamp(10px, 4.103cqw, 16px);
    --sld-aq-radius-option: clamp(8px, 3.077cqw, 12px);
    --sld-aq-radius-sheet: clamp(15px, 6.154cqw, 24px);
  }
  .sld-appquiz-status { font-size: clamp(7px, 2.564cqw, 10px); }
  .sld-appquiz-loading { padding: clamp(48px, 18.462cqw, 72px) clamp(10px, 4.103cqw, 16px); font-size: clamp(10px, 3.59cqw, 14px); }
  .sld-appquiz-intro-body { padding: clamp(24px, 10.769cqw, 42px) clamp(14px, 5.641cqw, 22px) clamp(18px, 7.179cqw, 28px); }
  .sld-appquiz-intro-logo { width: clamp(50px, 19.487cqw, 76px); height: clamp(50px, 19.487cqw, 76px); margin-bottom: clamp(10px, 4.615cqw, 18px); border-radius: clamp(12px, 4.615cqw, 18px); box-shadow: 0 clamp(2px, 1.026cqw, 4px) 0 var(--sld-aq-border); }
  .sld-appquiz-intro-kicker { margin-bottom: clamp(6px, 2.564cqw, 10px); font-size: clamp(9px, 3.077cqw, 12px); }
  .sld-appquiz-intro h2 { font-size: clamp(16px, 5.897cqw, 23px); }
  .sld-appquiz-intro-copy { margin: clamp(9px, 4.103cqw, 16px) 0 clamp(10px, 4.615cqw, 18px); font-size: clamp(11px, 3.846cqw, 15px); }
  .sld-appquiz-intro-meta { margin-bottom: clamp(12px, 6.154cqw, 24px); gap: clamp(4px, 1.795cqw, 7px); }
  .sld-appquiz-intro-meta span { padding: clamp(5px, 2.308cqw, 9px) clamp(2px, 1.026cqw, 4px); border-radius: clamp(6px, 2.564cqw, 10px); font-size: clamp(9px, 3.077cqw, 12px); }
  .sld-appquiz-intro-note { margin: clamp(8px, 3.59cqw, 14px) clamp(2px, 1.026cqw, 4px) 0; font-size: clamp(8px, 2.821cqw, 11px); }
  .sld-appquiz-appbar { height: clamp(44px, 14.359cqw, 56px); padding-inline: clamp(44px, 13.333cqw, 52px); }
  .sld-appquiz-appbar h2 { font-size: clamp(11px, 4.103cqw, 16px); }
  .sld-appquiz-exit { left: clamp(2px, 1.026cqw, 4px); top: max(0px, calc((clamp(44px, 14.359cqw, 56px) - 44px) / 2)); width: 44px; height: 44px; font-size: clamp(22px, 7.179cqw, 28px); }
  .sld-appquiz-body { padding: clamp(10px, 4.103cqw, 16px) clamp(10px, 4.103cqw, 16px) clamp(15px, 6.154cqw, 24px); }
  .sld-appquiz-progress-row { margin-bottom: clamp(5px, 2.051cqw, 8px); font-size: clamp(10px, 3.59cqw, 14px); }
  .sld-appquiz-progress { height: clamp(8px, 3.077cqw, 12px); margin-bottom: clamp(11px, 4.615cqw, 18px); }
  .sld-appquiz-question { margin-bottom: clamp(15px, 6.154cqw, 24px); padding: clamp(22px, 10.256cqw, 40px) clamp(12px, 6.154cqw, 24px) clamp(5px, 2.051cqw, 8px); }
  .sld-appquiz-law { margin-bottom: clamp(7px, 3.077cqw, 12px); font-size: clamp(10px, 3.59cqw, 14px); }
  .sld-appquiz-question-text { font-size: clamp(13px, 4.615cqw, 18px); }
  .sld-appquiz-source { margin-top: clamp(14px, 6.154cqw, 24px); font-size: clamp(7px, 2.308cqw, 9px); }
  .sld-appquiz-options { gap: clamp(8px, 4.103cqw, 16px); }
  .sld-appquiz-option { min-height: 44px; padding: clamp(9px, 4.103cqw, 16px) clamp(12px, 6.154cqw, 24px); font-size: clamp(12px, 4.103cqw, 16px); }
  .sld-appquiz-feedback-mark { font-size: clamp(60px, 25.641cqw, 100px); text-shadow: clamp(1px, .513cqw, 2px) clamp(1px, .513cqw, 2px) clamp(5px, 2.051cqw, 8px) rgba(0,0,0,.7); }
  .sld-appquiz-sheet { padding: clamp(14px, 5.641cqw, 22px) clamp(12px, 4.615cqw, 18px) calc(clamp(14px, 5.641cqw, 22px) + env(safe-area-inset-bottom)); }
  .sld-appquiz-modal { padding: clamp(14px, 5.491cqw, 24px) clamp(12px, 4.576cqw, 20px); }
  .sld-appquiz-modal-panel { padding: clamp(12px, 4.576cqw, 20px); border-radius: clamp(11px, 4.118cqw, 18px); }
  .sld-appquiz-modal-title { margin-bottom: clamp(6px, 2.288cqw, 10px); font-size: clamp(11px, 4.118cqw, 18px); }
  .sld-appquiz-modal-copy { margin-bottom: clamp(11px, 4.118cqw, 18px); font-size: clamp(9px, 3.203cqw, 14px); }
  .sld-appquiz-modal-close { margin-top: clamp(6px, 2.288cqw, 10px); font-size: clamp(9px, 3.203cqw, 14px); }
  .sld-appquiz-verdict { margin-bottom: clamp(8px, 3.59cqw, 14px); font-size: clamp(17px, 6.154cqw, 24px); }
  .sld-appquiz-correct-label { margin-bottom: clamp(2px, 1.026cqw, 4px); font-size: clamp(10px, 3.59cqw, 14px); }
  .sld-appquiz-correct-answer { margin-bottom: clamp(10px, 4.103cqw, 16px); font-size: clamp(13px, 4.615cqw, 18px); }
  .sld-appquiz-explanation { margin-bottom: clamp(12px, 5.128cqw, 20px); font-size: clamp(12px, 4.103cqw, 16px); }
  .sld-appquiz-next, .sld-appquiz-cta { min-height: 44px; padding: clamp(10px, 3.333cqw, 13px) clamp(12px, 4.615cqw, 18px); border-radius: clamp(8px, 3.077cqw, 12px); box-shadow: 0 clamp(3px, 1.026cqw, 4px) 0 var(--sld-aq-correct); font-size: clamp(12px, 4.103cqw, 16px); }
  .sld-appquiz-results { padding-bottom: clamp(15px, 6.154cqw, 24px); }
  .sld-appquiz-results-body { padding: clamp(12px, 5.128cqw, 20px) clamp(8px, 3.077cqw, 12px); }
  .sld-appquiz-score { padding: clamp(15px, 6.154cqw, 24px) clamp(10px, 4.103cqw, 16px); border-radius: clamp(10px, 4.103cqw, 16px); }
  .sld-appquiz-score-label, .sld-appquiz-score-detail { font-size: clamp(12px, 4.103cqw, 16px); }
  .sld-appquiz-score-value { margin-block: clamp(2px, 1.026cqw, 4px); font-size: clamp(38px, 16.41cqw, 64px); }
  .sld-appquiz-review-title { margin: clamp(16px, 6.667cqw, 26px) 0 clamp(9px, 3.59cqw, 14px); font-size: clamp(15px, 5.128cqw, 20px); }
  .sld-appquiz-review { margin-bottom: clamp(8px, 3.077cqw, 12px); border-radius: clamp(10px, 4.103cqw, 16px); }
  .sld-appquiz-review summary { min-height: 44px; padding: clamp(9px, 3.59cqw, 14px) clamp(10px, 4.103cqw, 16px); gap: clamp(6px, 2.564cqw, 10px); font-size: clamp(12px, 4.103cqw, 16px); }
  .sld-appquiz-review summary::after { font-size: clamp(18px, 6.154cqw, 24px); }
  .sld-appquiz-review-icon { font-size: clamp(16px, 5.641cqw, 22px); }
  .sld-appquiz-review-body { padding: 0 clamp(12px, 6.154cqw, 24px) clamp(10px, 4.103cqw, 16px); }
  .sld-appquiz-review-label { margin-top: clamp(9px, 3.59cqw, 14px) !important; font-size: clamp(12px, 4.103cqw, 16px) !important; }
  .sld-appquiz-review-explanation { margin-top: clamp(12px, 5.128cqw, 20px); padding: clamp(10px, 4.103cqw, 16px); border-radius: clamp(6px, 2.564cqw, 10px); }
  .sld-appquiz-review p { margin-bottom: clamp(5px, 2.051cqw, 8px); font-size: clamp(10px, 3.59cqw, 14px); }
  .sld-appquiz-review-question { font-size: clamp(12px, 4.103cqw, 16px) !important; }
  .sld-appquiz-cta-copy { margin: clamp(15px, 6.154cqw, 24px) clamp(2px, 1.026cqw, 4px) clamp(6px, 2.564cqw, 10px); font-size: clamp(12px, 4.103cqw, 16px); }
  .sld-appquiz-tab-scroll { bottom: clamp(60px, 19.487cqw, 76px); }
  .sld-appquiz-nav { height: clamp(60px, 19.487cqw, 76px); }
  .sld-appquiz-nav-item { font-size: clamp(9px, 3.077cqw, 12px); }
  .sld-appquiz-nav-item.is-active { font-size: clamp(9px, 3.333cqw, 13px); }
  .sld-appquiz-nav-icon { width: clamp(28px, 8.718cqw, 34px); height: clamp(28px, 8.718cqw, 34px); }
  .sld-appquiz-nav svg { width: clamp(18px, 5.641cqw, 22px); height: clamp(18px, 5.641cqw, 22px); }
  .sld-appquiz-tab-body { padding: clamp(10px, 4.103cqw, 16px) clamp(12px, 5.128cqw, 20px) clamp(18px, 7.179cqw, 28px); }
  .sld-appquiz-community-toggle { font-size: clamp(9px, 3.333cqw, 13px); }
  .sld-appquiz-switch { margin-bottom: clamp(15px, 6.154cqw, 24px); padding: clamp(4px, 1.538cqw, 6px); gap: clamp(3px, 1.538cqw, 6px); }
  .sld-appquiz-switch button { font-size: clamp(10px, 3.59cqw, 14px); }
  .sld-appquiz-ranking-subtabs { margin-bottom: clamp(12px, 5.128cqw, 20px); padding: clamp(4px, 1.538cqw, 6px); }
  .sld-appquiz-ranking-subtabs button { padding-inline: 2px; font-size: clamp(8px, 3.077cqw, 12px); }
  .sld-appquiz-ranking-label { margin-bottom: clamp(10px, 4.103cqw, 16px); font-size: clamp(11px, 4.103cqw, 16px); }
  .sld-appquiz-ranking-heading { margin-bottom: clamp(8px, 3.077cqw, 12px); font-size: clamp(14px, 5.128cqw, 20px); }
  .sld-appquiz-ranking-list { gap: clamp(8px, 3.077cqw, 12px); }
  .sld-appquiz-ranking-divider { margin: clamp(15px, 6.154cqw, 24px) 0 clamp(12px, 5.128cqw, 20px); }
  .sld-appquiz-rank-item { padding: clamp(12px, 4.615cqw, 18px) clamp(12px, 5.128cqw, 20px); border-radius: clamp(18px, 7.179cqw, 28px); }
  .sld-appquiz-rank-row { gap: clamp(7px, 3.077cqw, 12px); }
  .sld-appquiz-rank-name, .sld-appquiz-rank-row strong { font-size: clamp(11px, 4.103cqw, 16px); }
  .sld-appquiz-stats-card { padding: clamp(12px, 5.128cqw, 20px); border-radius: clamp(16px, 6.154cqw, 24px); }
  .sld-appquiz-stats-card h3 { font-size: clamp(13px, 4.615cqw, 18px); }
  .sld-appquiz-calendar-wrap, .sld-appquiz-stats-content { padding-left: clamp(12px, 5.128cqw, 20px); padding-right: clamp(12px, 5.128cqw, 20px); }
  .sld-appquiz-stats-tabs button { padding-inline: clamp(10px, 4.103cqw, 16px); font-size: clamp(10px, 3.59cqw, 14px); }
  .sld-appquiz-bars { gap: clamp(3px, 2.051cqw, 8px); }
  .sld-appquiz-bars i { width: clamp(10px, 4.615cqw, 18px); }
  .sld-appquiz-bars em, .sld-appquiz-chart-days span { font-size: clamp(8px, 3.077cqw, 12px); }
  .sld-appquiz-learning { padding: clamp(12px, 4.576cqw, 20px); }
  .sld-appquiz-learning-title { font-size: clamp(15px, 5.491cqw, 24px); }
  .sld-appquiz-learning-lead { margin-top: clamp(2px, .915cqw, 4px); font-size: clamp(9px, 3.203cqw, 14px); }
  .sld-appquiz-learning-list { gap: clamp(10px, 3.661cqw, 16px); margin-top: clamp(10px, 3.661cqw, 16px); }
  .sld-appquiz-learning-card { min-height: clamp(92px, 34.777cqw, 152px); gap: clamp(12px, 4.576cqw, 20px); padding: clamp(15px, 5.491cqw, 24px); border-radius: clamp(17px, 6.406cqw, 28px); box-shadow: 0 clamp(7px, 2.745cqw, 12px) clamp(11px, 4.118cqw, 18px) rgba(0,0,0,.26); }
  .sld-appquiz-learning-copy h3 { font-size: clamp(14px, 5.033cqw, 22px); }
  .sld-appquiz-learning-label { margin-top: clamp(5px, 1.83cqw, 8px); padding: clamp(2px, .686cqw, 3px) clamp(5px, 2.059cqw, 9px); font-size: clamp(8px, 2.745cqw, 12px); }
  .sld-appquiz-learning-copy p { margin-top: clamp(6px, 2.288cqw, 10px); font-size: clamp(9px, 3.203cqw, 14px); }
  .sld-appquiz-learning-card img { width: clamp(58px, 21.964cqw, 96px); height: clamp(58px, 21.964cqw, 96px); border-radius: clamp(12px, 4.576cqw, 20px); }
  .sld-appquiz-learning-new { top: clamp(-8px, -1.83cqw, -5px); right: clamp(-8px, -1.83cqw, -5px); padding: clamp(2px, .915cqw, 4px) clamp(6px, 2.288cqw, 10px); border-radius: clamp(7px, 2.745cqw, 12px); font-size: clamp(8px, 2.745cqw, 12px); }
}
@media (prefers-reduced-motion: reduce) {
  .sld-appquiz-progress-answer, .sld-appquiz-progress-correct { transition-duration: 1ms; }
  .sld-appquiz-feedback, .sld-appquiz-sheet, .sld-appquiz-modal, .sld-appquiz-page-enter { animation-duration: 1ms; }
}
@media (min-width: 640px) {
  .sld-appquiz-variant-b { width: 390px; margin: 24px auto 0; }
  .sld-appquiz-device { filter: drop-shadow(0 16px 24px rgba(0,0,0,.18)); }
}