.jpq-app {
    --jpq-bg: #f4f7f6;
    --jpq-panel: #fff;
    --jpq-soft: #edf3f2;
    --jpq-ink: #17262c;
    --jpq-muted: #64747a;
    --jpq-line: #dce5e3;
    --jpq-coral: #f05a47;
    --jpq-teal: #168d88;
    --jpq-yellow: #e8ad27;
    --jpq-blue: #287ab7;
    --jpq-green: #4f9654;
    background: var(--jpq-bg);
    border: 1px solid var(--jpq-line);
    color: var(--jpq-ink);
    font-family: Inter, "Noto Sans", "Noto Sans JP", system-ui, sans-serif;
    margin: 24px auto;
    max-width: 980px;
    min-height: 680px;
    overflow: clip;
    position: relative;
}

.jpq-app *, .jpq-app *::before, .jpq-app *::after { box-sizing: border-box; }
.jpq-header {
    align-items: center;
    background: var(--jpq-panel);
    border-bottom: 4px solid var(--jpq-primary);
    display: grid;
    gap: 13px;
    grid-template-columns: auto 1fr auto;
    min-height: 76px;
    padding: 14px 24px;
}
.jpq-header-simple { grid-template-columns: auto minmax(0, 1fr) auto; }
.jpq-logo { height: 46px; max-width: 150px; object-fit: contain; }
.jpq-brand-mark { align-items: center; background: var(--jpq-primary); color: #fff; display: inline-flex; font-family: serif; font-size: 25px; height: 44px; justify-content: center; width: 44px; }
.jpq-title { font-size: 18px; font-weight: 800; }
.jpq-fullscreen-button { font-size: 24px; justify-self: end; }
.jpq-menu, .jpq-icon-button {
    align-items: center; background: var(--jpq-panel); border: 1px solid var(--jpq-line); color: var(--jpq-ink); cursor: pointer; display: inline-flex; height: 44px; justify-content: center; padding: 0; width: 44px;
}
.jpq-menu { border: 0; display: grid; gap: 3px; grid-template-columns: repeat(2, 8px); place-content: center; }
.jpq-menu span { background: var(--jpq-primary); border-radius: 50%; display: block; height: 8px; width: 8px; }
.jpq-menu span:nth-child(2) { background: var(--jpq-coral); }.jpq-menu span:nth-child(3) { background: var(--jpq-yellow); }.jpq-menu span:nth-child(4) { background: var(--jpq-teal); }
.jpq-screen { margin: 0 auto; max-width: 900px; padding: 42px 30px 78px; }
.jpq-screen-heading { margin: 0 0 28px; text-align: center; }
.jpq-screen-heading h2 { color: var(--jpq-ink); font-size: 34px; line-height: 1.25; margin: 7px 0 0; }
.jpq-kicker { color: var(--jpq-coral); font-size: 13px; font-weight: 900; letter-spacing: .12em; }

.jpq-level-grid { display: grid; gap: 17px; margin: 0 auto; max-width: 700px; }
.jpq-onboarding-section { margin: 0 auto 30px; max-width: 820px; }.jpq-onboarding-section > h2 { font-size: 20px; margin: 0 0 14px; }
.jpq-language-grid { display: grid; gap: 9px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.jpq-language { align-items: center; background: var(--jpq-panel); border: 2px solid var(--jpq-line); color: var(--jpq-ink); cursor: pointer; display: grid; gap: 9px; grid-template-columns: 34px 1fr 22px; min-height: 64px; padding: 9px 12px; text-align: left; }.jpq-language:hover, .jpq-language:focus, .jpq-language.is-selected { border-color: var(--jpq-primary); outline: none; }.jpq-flag { font-size: 25px; line-height: 1; }.jpq-language strong { font-size: 14px; }.jpq-selected-dot { align-items: center; background: var(--jpq-primary); border-radius: 50%; color: #fff; display: none; font-size: 12px; height: 20px; justify-content: center; width: 20px; }.jpq-language.is-selected .jpq-selected-dot { display: flex; }
.jpq-theme-list { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 520px; }.jpq-theme-choice { align-items: center; background: var(--jpq-panel); border: 2px solid var(--jpq-line); color: var(--jpq-ink); cursor: pointer; display: grid; gap: 10px; grid-template-columns: 1fr auto; min-height: 82px; padding: 12px; text-align: left; }.jpq-theme-choice.is-selected { border-color: var(--jpq-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--jpq-primary) 16%, transparent); }.jpq-swatches { display: flex; grid-column: 1 / -1; height: 22px; overflow: hidden; }.jpq-swatches i { flex: 1; }.jpq-theme-choice .jpq-selected-dot { display: none; }.jpq-theme-choice.is-selected .jpq-selected-dot { display: flex; }.jpq-welcome-continue { display: flex; justify-content: center; margin-top: 32px; }.jpq-welcome-continue .jpq-action { font-size: 17px; min-width: 180px; }
.jpq-flag { background: #fff; border: 1px solid rgba(0,0,0,.12); display: block; font-size: 0; height: 22px; overflow: hidden; position: relative; width: 32px; }
.jpq-flag-ja::after, .jpq-flag-bn::after, .jpq-flag-lo::after { background: #d8293d; border-radius: 50%; content: ""; height: 12px; left: 9px; position: absolute; top: 4px; width: 12px; }
.jpq-flag-bn { background: #096a45; }.jpq-flag-bn::after { left: 8px; }.jpq-flag-id { background: linear-gradient(#d92735 0 50%,#fff 50%); }
.jpq-flag-zh-hans, .jpq-flag-vi { background: #d6202f; }.jpq-flag-zh-hans::after, .jpq-flag-vi::after { color: #ffd34d; content: "★"; font-size: 12px; left: 4px; position: absolute; top: 1px; }.jpq-flag-vi::after { font-size: 15px; left: 9px; top: 0; }
.jpq-flag-en { background: linear-gradient(33deg,transparent 42%,#fff 42% 48%,#c92339 48% 53%,#fff 53% 59%,transparent 59%),linear-gradient(-33deg,#19437c 42%,#fff 42% 48%,#c92339 48% 53%,#fff 53% 59%,#19437c 59%); }.jpq-flag-en::after { background: linear-gradient(90deg,transparent 39%,#fff 39% 45%,#c92339 45% 57%,#fff 57% 63%,transparent 63%),linear-gradient(transparent 32%,#fff 32% 40%,#c92339 40% 61%,#fff 61% 69%,transparent 69%); content:""; inset:0; position:absolute; }
.jpq-flag-km { background: linear-gradient(#2455a5 0 25%,#cb283c 25% 75%,#2455a5 75%); }.jpq-flag-mn { background: linear-gradient(90deg,#c92e3d 0 33%,#1760a8 33% 67%,#c92e3d 67%); }.jpq-flag-my { background: linear-gradient(#f2cf35 0 33%,#3d9450 33% 67%,#d33c3c 67%); }.jpq-flag-ne { background: linear-gradient(135deg,#cf2444 0 66%,#194b87 66%); clip-path: polygon(0 0,100% 50%,45% 50%,100% 100%,0 100%); }.jpq-flag-th { background: linear-gradient(#b5283e 0 17%,#fff 17% 33%,#253c85 33% 67%,#fff 67% 83%,#b5283e 83%); }.jpq-flag-lo { background: linear-gradient(#c72c42 0 25%,#21458b 25% 75%,#c72c42 75%); }.jpq-flag-lo::after { background:#fff; }
.jpq-level-card {
    align-items: center; background: var(--jpq-panel); border: 0; border-left: 7px solid var(--jpq-blue); box-shadow: 0 7px 18px rgba(24, 54, 62, .1); color: var(--jpq-ink); cursor: pointer; display: grid; gap: 16px; grid-template-columns: 54px 1fr 42px; min-height: 112px; padding: 20px; text-align: left; transition: transform .18s ease, box-shadow .18s ease;
}
.jpq-level-card:hover, .jpq-level-card:focus { box-shadow: 0 12px 25px rgba(24, 54, 62, .16); outline: 2px solid transparent; transform: translateY(-2px); }
.jpq-level-card.jpq-accent-2 { border-left-color: var(--jpq-coral); }
.jpq-level-card.jpq-accent-3 { border-left-color: var(--jpq-teal); }
.jpq-level-mark { align-items: center; background: var(--jpq-soft); border-radius: 50%; color: var(--jpq-primary); display: flex; font-size: 22px; font-weight: 900; height: 50px; justify-content: center; width: 50px; }
.jpq-level-copy { display: grid; gap: 6px; }
.jpq-level-copy strong { font-size: 22px; font-weight: 900; }
.jpq-level-copy small { color: var(--jpq-muted); font-size: 14px; }
.jpq-level-arrow { color: var(--jpq-coral); font-size: 32px; font-weight: 500; }

.jpq-selection-tools { display: flex; gap: 10px; justify-content: center; margin: 0 0 22px; }
.jpq-action { background: var(--jpq-primary); border: 1px solid var(--jpq-primary); color: #fff; cursor: pointer; font-size: 15px; font-weight: 800; min-height: 44px; padding: 10px 18px; }
.jpq-action:hover, .jpq-action:focus { filter: brightness(.94); outline: 3px solid color-mix(in srgb, var(--jpq-primary) 25%, transparent); }
.jpq-action-secondary { background: var(--jpq-panel); border-color: var(--jpq-line); color: var(--jpq-ink); }

.jpq-topic-list { display: grid; gap: 10px; }
.jpq-topic { align-items: stretch; background: var(--jpq-panel); border-left: 5px solid var(--jpq-blue); display: grid; grid-template-columns: 1fr minmax(150px, auto); min-height: 105px; }
.jpq-topic-color-2 { border-left-color: var(--jpq-coral); }.jpq-topic-color-3 { border-left-color: var(--jpq-teal); }.jpq-topic-color-4 { border-left-color: #785795; }.jpq-topic-color-5 { border-left-color: #b33b4f; }.jpq-topic-color-6 { border-left-color: var(--jpq-green); }
.jpq-topic-info { align-self: center; padding: 16px 20px; }
.jpq-topic-info > small { color: var(--jpq-muted); display: block; font-weight: 800; margin-bottom: 5px; }
.jpq-topic-title { display: grid; gap: 2px; font-size: 17px; font-weight: 800; }
.jpq-topic-title .text-ja { font-size: 19px; }
.jpq-topic-title .text-translate { color: var(--jpq-muted); font-size: 14px; font-weight: 600; }
.jpq-lesson-choices { align-items: center; background: var(--jpq-soft); display: flex; gap: 17px; justify-content: center; padding: 16px; }
.jpq-check, .jpq-method { cursor: pointer; }
.jpq-check { align-items: center; display: flex; gap: 8px; font-weight: 800; }
.jpq-check input, .jpq-method input, .jpq-toggle-row input { accent-color: var(--jpq-coral); height: 21px; width: 21px; }

.jpq-category-grid { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.jpq-category { background: var(--jpq-panel); border-top: 5px solid var(--jpq-blue); padding: 22px; }
.jpq-category-2 { border-top-color: var(--jpq-coral); }.jpq-category-3 { border-top-color: var(--jpq-teal); }.jpq-category-4 { border-top-color: #785795; }.jpq-category-5 { border-top-color: var(--jpq-yellow); }
.jpq-category h3 { font-size: 21px; margin: 0 0 14px; }
.jpq-method { align-items: center; border-top: 1px solid var(--jpq-line); display: grid; gap: 10px; grid-template-columns: 24px 1fr auto; min-height: 54px; }
.jpq-method-name { font-size: 15px; font-weight: 700; }
.jpq-method strong { background: var(--jpq-soft); color: var(--jpq-muted); font-size: 12px; padding: 4px 8px; }
.jpq-footer-nav { align-items: center; display: flex; justify-content: space-between; margin-top: 28px; }
.jpq-screen[data-jpq-view="lessons"] .jpq-footer-nav {
    background: var(--jpq-bg);
    border-top: 1px solid var(--jpq-line);
    bottom: 0;
    box-shadow: 0 -10px 24px rgba(20, 42, 48, .1);
    margin: 28px -30px -78px;
    padding: 14px 30px calc(14px + env(safe-area-inset-bottom));
    position: sticky;
    z-index: 12;
}
.jpq-screen[data-jpq-view="lessons"] .jpq-footer-nav .jpq-icon-button { height: 50px; width: 50px; }
.jpq-icon-button { border-radius: 50%; font-size: 25px; font-weight: 900; }
.jpq-icon-primary { background: var(--jpq-coral); border-color: var(--jpq-coral); color: #fff; }

.jpq-practice-head { align-items: center; display: grid; gap: 12px; grid-template-columns: 48px 1fr auto; margin-bottom: 18px; }
.jpq-practice-context { display: flex; flex-wrap: wrap; gap: 8px 12px; }.jpq-practice-context span, .jpq-count { color: var(--jpq-muted); font-weight: 700; }
.jpq-progress { background: var(--jpq-line); height: 5px; margin-bottom: 24px; overflow: hidden; }.jpq-progress span { background: var(--jpq-teal); display: block; height: 100%; transition: width .25s ease; }
.jpq-practice-stage { background: var(--jpq-panel); box-shadow: 0 8px 24px rgba(27, 52, 59, .09); min-height: 430px; padding: 30px; }
.jpq-directive { border-bottom: 2px solid var(--jpq-line); font-size: 21px; line-height: 1.45; margin: 0 0 25px; padding-bottom: 12px; }
.jpq-question { background: #fff9e8; border: 2px solid #f0d78f; color: #20292d; font-size: 30px; font-weight: 750; line-height: 1.8; margin: 20px 0; min-height: 125px; padding: 30px 22px; text-align: center; }
ruby { ruby-position: over; } .jpq-app rt { color: inherit; font-size: .48em; font-weight: 500; }
.jpq-app .text-deco-u { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .2em; }.jpq-app .text-em { color: var(--jpq-coral); font-weight: 850; }
.jpq-media { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin: 18px 0; }
.jpq-media img, .jpq-media video { height: auto; max-height: 360px; max-width: 100%; object-fit: contain; }.jpq-media audio, .jpq-answer audio, .jpq-choice audio { width: 100%; }
.jpq-pattern-hint { background: color-mix(in srgb, var(--jpq-yellow) 18%, var(--jpq-panel)); border-left: 4px solid var(--jpq-yellow); font-size: 17px; font-weight: 750; line-height: 1.55; margin: 14px 0; padding: 12px 15px; }
.jpq-choices { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 22px 0; }
.jpq-choice { align-items: center; background: var(--jpq-panel); border: 2px solid var(--jpq-line); color: var(--jpq-ink); cursor: pointer; display: grid; gap: 10px; grid-template-columns: 35px 1fr; min-height: 65px; padding: 11px; text-align: left; }
.jpq-choice b { align-items: center; background: var(--jpq-soft); border-radius: 50%; display: flex; height: 30px; justify-content: center; width: 30px; }.jpq-choice img { grid-column: 1 / -1; height: auto; max-width: 100%; }.jpq-choice audio { grid-column: 1 / -1; min-width: 0; width: 100%; }.jpq-choice.is-selected { border-color: var(--jpq-coral); box-shadow: inset 0 0 0 1px var(--jpq-coral); }
.jpq-choice.is-correct { background: #e8f6ef; border-color: #16855a; box-shadow: inset 0 0 0 1px #16855a; color: #123d2e; }.jpq-choice.is-correct b { background: #16855a; color: #fff; }.jpq-choice.is-wrong { background: #fff0ee; border-color: #d84d3f; color: #67251f; }
.jpq-image-choices { grid-template-columns: repeat(3, minmax(0, 1fr)); }.jpq-image-choices .jpq-choice { grid-template-columns: 34px 1fr; grid-template-rows: auto 1fr; min-height: 190px; }.jpq-image-choices .jpq-choice img { align-self: center; justify-self: center; max-height: 240px; object-fit: contain; }
.jpq-answer { background: #e9f5f1; border-left: 5px solid var(--jpq-teal); margin: 22px 0; padding: 17px; }.jpq-answer small { color: var(--jpq-muted); font-weight: 800; }.jpq-answer > div { font-size: 22px; font-weight: 800; line-height: 1.7; margin-top: 5px; }
.jpq-answer img { display: block; height: auto; margin: 12px auto; max-height: 300px; max-width: 100%; }
.jpq-flashcard { cursor: pointer; margin: 22px auto; max-width: 760px; perspective: 1600px; width: 100%; }
.jpq-flashcard:focus-visible { outline: 4px solid color-mix(in srgb, var(--jpq-primary) 28%, transparent); outline-offset: 5px; }
.jpq-flashcard-inner { display: grid; transform-style: preserve-3d; transition: transform .55s cubic-bezier(.2, .75, .25, 1); }
.jpq-flashcard.is-flipped .jpq-flashcard-inner { transform: rotateY(180deg); }
.jpq-flashcard-face { align-content: center; backface-visibility: hidden; background: #fffaf0; border: 2px solid #eed690; box-shadow: 0 12px 28px rgba(28, 50, 56, .12); display: grid; gap: 18px; grid-area: 1 / 1; min-height: 330px; overflow: hidden; padding: 30px; text-align: center; transform: rotateY(0deg); -webkit-backface-visibility: hidden; }
.jpq-flashcard-back { background: #e9f5f1; border-color: color-mix(in srgb, var(--jpq-teal) 62%, #fff); transform: rotateY(180deg); }
.jpq-flashcard-text { color: #20292d; font-size: 32px; font-weight: 800; line-height: 1.75; overflow-wrap: anywhere; }
.jpq-flashcard-face > img { height: auto; margin: 0 auto; max-height: 270px; max-width: 100%; object-fit: contain; }
.jpq-flashcard-face audio { width: 100%; }
.jpq-flashcard-face .jpq-media { margin: 0; }
.jpq-flashcard-face .jpq-media img { max-height: 235px; }
.jpq-answer:not([hidden]), .jpq-feedback:not([hidden]), .jpq-rate-action:not([hidden]), .jpq-next-action:not([hidden]) { animation: jpq-reveal .28s ease both; }
.jpq-choice { transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .16s ease; }
.jpq-choice.is-selected { transform: translateY(-2px); }
.jpq-writing-answer:not([hidden]), .jpq-writing-guide:not([hidden]) { animation: jpq-reveal .32s ease both; }
@keyframes jpq-reveal { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.jpq-dialogue { display: grid; gap: 12px; margin: 20px 0; }.jpq-bubble { background: var(--jpq-soft); max-width: 78%; padding: 13px 17px; }.jpq-bubble-1 { justify-self: end; }
.jpq-writing { align-items: center; display: flex; flex-direction: column; gap: 12px; margin: 22px auto; max-width: 420px; }.jpq-writing canvas { background-color: #fff; background-image: linear-gradient(#d6dadd 1px, transparent 1px), linear-gradient(90deg, #d6dadd 1px, transparent 1px); background-position: center; background-size: 50% 50%; border: 3px solid #aeb8bb; cursor: crosshair; height: auto; max-width: 100%; touch-action: none; }.jpq-writing .jpq-action { min-height: 38px; padding: 7px 14px; }
.jpq-text-input { background: var(--jpq-panel); border: 2px solid var(--jpq-line); color: var(--jpq-ink); display: block; font-size: 22px; margin: 20px auto; max-width: 480px; min-height: 54px; padding: 10px 14px; text-align: center; width: 100%; }.jpq-text-input:focus { border-color: var(--jpq-primary); outline: 3px solid color-mix(in srgb, var(--jpq-primary) 20%, transparent); }.jpq-text-input.is-correct { background: #e8f6ef; border-color: #16855a; color: #123d2e; }.jpq-text-input.is-wrong { background: #fff0ee; border-color: #d84d3f; color: #67251f; }
.jpq-practice-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; margin-top: 24px; }

.jpq-finish { background: var(--jpq-panel); margin: 60px auto; max-width: 520px; padding: 40px; text-align: center; }.jpq-finish-mark { align-items: center; background: var(--jpq-teal); border-radius: 50%; color: #fff; display: flex; font-size: 38px; height: 76px; justify-content: center; margin: 0 auto 16px; width: 76px; }.jpq-finish h2 { margin: 0 0 18px; }.jpq-score strong { color: var(--jpq-coral); font-size: 54px; }.jpq-score span { color: var(--jpq-muted); font-size: 24px; }.jpq-finish .jpq-action { margin: 8px 4px 0; }
.jpq-loading { align-items: center; display: flex; flex-direction: column; gap: 14px; justify-content: center; min-height: 400px; }.jpq-loading span { animation: jpq-spin .8s linear infinite; border: 4px solid var(--jpq-line); border-top-color: var(--jpq-coral); border-radius: 50%; height: 48px; width: 48px; } @keyframes jpq-spin { to { transform: rotate(360deg); } }
.jpq-toast { background: #17262c; bottom: 30px; color: #fff; font-weight: 700; left: 50%; max-width: calc(100% - 30px); padding: 13px 18px; position: absolute; transform: translateX(-50%); z-index: 20; }

.jpq-drawer-layer { background: rgba(12, 24, 29, .52); inset: 5px 0; position: absolute; z-index: 30; }.jpq-drawer { background: var(--jpq-panel); box-shadow: -8px 0 28px rgba(0,0,0,.18); height: 100%; margin-left: auto; max-width: 380px; padding: 34px 28px; position: relative; width: 88%; }.jpq-drawer h2 { margin: 0 0 30px; }.jpq-field { display: grid; gap: 10px; }.jpq-field span, .jpq-toggle-row span { font-weight: 800; }.jpq-field select { background: var(--jpq-panel); border: 1px solid var(--jpq-line); color: var(--jpq-ink); font-size: 16px; min-height: 46px; padding: 8px 12px; width: 100%; }.jpq-toggle-row { align-items: center; border-top: 1px solid var(--jpq-line); display: flex; justify-content: space-between; margin-top: 24px; padding-top: 20px; }.jpq-drawer-close { bottom: 30px; left: 50%; position: absolute; transform: translateX(-50%); }

.jpq-app.jpq-theme-light { color-scheme: light; }
.jpq-app.jpq-theme-dark { --jpq-primary: #25a6a1 !important; --jpq-coral: #ef7758; --jpq-teal: #39b8ae; --jpq-yellow: #e9b84a; --jpq-bg: #172226; --jpq-panel: #233238; --jpq-soft: #304248; --jpq-ink: #f2f6f5; --jpq-muted: #b3c1c3; --jpq-line: #405158; color-scheme: dark; }.jpq-app.jpq-theme-dark .jpq-question { background: #343328; border-color: #71673f; color: #fff; }.jpq-app.jpq-theme-dark .jpq-answer { background: #24423c; }.jpq-app.jpq-theme-dark .jpq-choice.is-correct, .jpq-app.jpq-theme-dark .jpq-text-input.is-correct { background: #23483d; color: #eafaf3; }.jpq-app.jpq-theme-dark .jpq-choice.is-wrong, .jpq-app.jpq-theme-dark .jpq-text-input.is-wrong { background: #4b2b2b; color: #fff1ef; }
.jpq-app.jpq-theme-dark .jpq-flashcard-front { background: #343328; border-color: #71673f; }.jpq-app.jpq-theme-dark .jpq-flashcard-back { background: #24423c; border-color: #38786c; }.jpq-app.jpq-theme-dark .jpq-flashcard-text { color: #fff; }

/* Full app controls and practice flows. */
html.jpq-page-locked, html.jpq-page-locked body { overflow: hidden !important; }
.jpq-app:fullscreen, .jpq-app:-webkit-full-screen, .jpq-app.jpq-pseudo-fullscreen {
    border: 0; height: 100dvh; margin: 0; max-width: none; overflow-x: hidden; overflow-y: auto; width: 100%;
}
.jpq-app.jpq-pseudo-fullscreen { inset: 0; position: fixed; z-index: 2147483000; }
.jpq-app:fullscreen .jpq-header, .jpq-app:-webkit-full-screen .jpq-header, .jpq-app.jpq-pseudo-fullscreen .jpq-header {
    position: sticky; top: 0; z-index: 25;
}
.jpq-app:fullscreen .jpq-screen, .jpq-app:-webkit-full-screen .jpq-screen, .jpq-app.jpq-pseudo-fullscreen .jpq-screen { max-width: 1120px; }
.jpq-app [hidden] { display: none !important; }
.jpq-app button:focus-visible, .jpq-app input:focus-visible { outline: 3px solid color-mix(in srgb, var(--jpq-primary) 35%, transparent); outline-offset: 2px; }

.jpq-session-summary { background: var(--jpq-panel); border-top: 5px solid var(--jpq-teal); margin: 0 auto; max-width: 720px; padding: 28px; }
.jpq-session-summary h3 { font-size: 16px; margin: 0 0 12px; }
.jpq-session-summary h3:not(:first-child) { border-top: 1px solid var(--jpq-line); margin-top: 24px; padding-top: 22px; }
.jpq-summary-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.jpq-summary-tags span { background: var(--jpq-soft); color: var(--jpq-ink); font-size: 14px; font-weight: 850; padding: 7px 10px; }
.jpq-summary-methods { display: grid; gap: 8px; }
.jpq-summary-methods > div, .jpq-score-breakdown > div { align-items: center; border-bottom: 1px solid var(--jpq-line); display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr) auto; padding: 9px 0; }
.jpq-summary-methods strong { background: var(--jpq-soft); color: var(--jpq-muted); font-size: 12px; padding: 4px 8px; }
.jpq-session-directive, .jpq-result-directive { color: var(--jpq-muted); font-weight: 650; line-height: 1.6; margin: 24px 0 0; text-align: center; }

.jpq-stop-button { color: var(--jpq-coral); font-size: 14px; }
.jpq-practice-context { min-width: 0; }
.jpq-practice-context strong, .jpq-practice-context span { overflow-wrap: anywhere; }
.jpq-practice-actions { align-items: center; background: color-mix(in srgb, var(--jpq-panel) 92%, transparent); border-top: 1px solid var(--jpq-line); bottom: 0; margin: 28px -8px -8px; padding: 14px 8px 8px; position: sticky; z-index: 10; }
.jpq-practice-actions .jpq-next-action { margin-left: auto; }
.jpq-feedback { border-left: 5px solid var(--jpq-teal); font-size: 16px; font-weight: 850; margin-top: 18px; padding: 13px 16px; }
.jpq-feedback.is-correct { background: #e8f6ef; border-color: #16855a; color: #123d2e; }
.jpq-feedback.is-wrong { background: #fff0ee; border-color: #d84d3f; color: #67251f; }
.jpq-app.jpq-theme-dark .jpq-feedback.is-correct { background: #23483d; color: #eafaf3; }
.jpq-app.jpq-theme-dark .jpq-feedback.is-wrong { background: #4b2b2b; color: #fff1ef; }
.jpq-choice:disabled { cursor: default; opacity: 1; }

.jpq-speaking-models { display: grid; gap: 11px; margin-top: 12px; }
.jpq-speaking-models > div { align-items: center; background: color-mix(in srgb, var(--jpq-panel) 70%, var(--jpq-soft)); display: grid; gap: 12px; grid-template-columns: minmax(150px, 1fr) minmax(180px, 1fr); padding: 12px; }
.jpq-speaking-models span { font-size: 18px; font-weight: 750; }
.jpq-answer .jpq-romaji { color: var(--jpq-muted); font-size: 14px; font-weight: 700; letter-spacing: 0; margin-top: 2px; }

.jpq-writing-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin: 24px auto; max-width: 820px; }
.jpq-writing-pad { align-items: center; display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.jpq-canvas-surface { aspect-ratio: 1; background-color: #fff; background-image: linear-gradient(transparent calc(50% - .5px), #d6dadd calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .5px)), linear-gradient(90deg, transparent calc(50% - .5px), #d6dadd calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .5px)); border: 3px solid #aeb8bb; display: grid; max-width: 230px; overflow: hidden; width: 100%; }
.jpq-canvas-surface > * { grid-area: 1 / 1; }
.jpq-canvas-surface canvas { cursor: crosshair; height: 100%; position: relative; touch-action: none; width: 100%; z-index: 3; }
.jpq-writing-guide { align-self: stretch; height: 100%; justify-self: stretch; object-fit: contain; opacity: .55; pointer-events: none; width: 100%; z-index: 1; }
.jpq-writing-answer { align-items: center; color: #273338; display: flex; font-size: clamp(54px, 10cqw, 92px); font-weight: 500; justify-content: center; opacity: .22; pointer-events: none; z-index: 1; }
.jpq-writing-tools { display: flex; gap: 8px; }
.jpq-writing-tools .jpq-icon-button { border-color: var(--jpq-coral); color: var(--jpq-coral); height: 38px; width: 38px; }
.jpq-app.jpq-theme-dark .jpq-canvas-surface { background-color: #18272c; background-image: linear-gradient(transparent calc(50% - .5px), #526166 calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .5px)), linear-gradient(90deg, transparent calc(50% - .5px), #526166 calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .5px)); }
.jpq-app.jpq-theme-dark .jpq-writing-answer { color: #fff; }

.jpq-dialog-layer { align-items: center; background: rgba(12, 24, 29, .68); display: flex; inset: 0; justify-content: center; padding: 20px; position: absolute; z-index: 50; }
.jpq-app:fullscreen .jpq-dialog-layer, .jpq-app:-webkit-full-screen .jpq-dialog-layer, .jpq-app.jpq-pseudo-fullscreen .jpq-dialog-layer { position: fixed; }
.jpq-confirm-dialog { background: var(--jpq-panel); border-top: 5px solid var(--jpq-coral); box-shadow: 0 18px 50px rgba(0,0,0,.28); max-width: 500px; padding: 28px; width: 100%; }
.jpq-confirm-dialog p { font-size: 17px; line-height: 1.55; margin: 0 0 22px; }
.jpq-confirm-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.jpq-mode-result { margin-top: 28px; }
.jpq-mode-result .jpq-footer-nav { justify-content: flex-end; }
.jpq-score-breakdown { border-top: 1px solid var(--jpq-line); margin: 22px 0; text-align: left; }
.jpq-score-breakdown span { font-size: 14px; overflow-wrap: anywhere; }

@media (max-width: 650px) {
    .jpq-app { border-left: 0; border-right: 0; margin: 0; min-height: 100vh; }
    .jpq-header { min-height: 66px; padding: 10px 16px; }.jpq-brand-mark { height: 40px; width: 40px; }.jpq-title { font-size: 16px; }
    .jpq-screen { padding: 30px 18px 72px; }.jpq-screen-heading h2 { font-size: 25px; }
    .jpq-language-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.jpq-theme-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .jpq-level-card { gap: 12px; grid-template-columns: 44px 1fr 28px; min-height: 98px; padding: 16px 14px; }.jpq-level-mark { font-size: 18px; height: 42px; width: 42px; }.jpq-level-copy strong { font-size: 18px; }
    .jpq-topic { grid-template-columns: 1fr; }.jpq-lesson-choices { justify-content: flex-start; padding: 12px 20px; }
    .jpq-screen[data-jpq-view="lessons"] .jpq-footer-nav { margin: 24px -18px -72px; padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); }
    .jpq-category-grid, .jpq-choices { grid-template-columns: 1fr; }.jpq-image-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }.jpq-category { padding: 18px; }
    .jpq-practice-stage { box-shadow: none; margin-left: -18px; margin-right: -18px; padding: 24px 18px; }.jpq-question { font-size: 25px; padding: 28px 14px; }.jpq-directive { font-size: 18px; }
    .jpq-flashcard-face { min-height: 300px; padding: 20px 14px; }.jpq-flashcard-text { font-size: 26px; }.jpq-flashcard-face .jpq-media img { max-height: 190px; }
    .jpq-practice-head { grid-template-columns: 44px minmax(0, 1fr) auto; }.jpq-practice-context { display: grid; gap: 2px; }.jpq-count { font-size: 13px; }
    .jpq-practice-actions { align-items: stretch; flex-direction: row; flex-wrap: wrap; }.jpq-practice-actions .jpq-action { flex: 1 1 130px; width: auto; }.jpq-practice-actions .jpq-next-action { flex: 0 0 44px; }
    .jpq-session-summary { padding: 20px 16px; }.jpq-speaking-models > div { grid-template-columns: 1fr; }.jpq-speaking-models audio { min-width: 0; width: 100%; }
    .jpq-writing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.jpq-canvas-surface { max-width: 190px; }
    .jpq-confirm-actions { display: grid; grid-template-columns: 1fr; }.jpq-confirm-actions .jpq-action { width: 100%; }
}

@media (min-width: 651px) and (max-width: 900px) {
    .jpq-app { margin: 16px auto; max-width: calc(100% - 24px); }
    .jpq-screen { padding-left: 24px; padding-right: 24px; }
    .jpq-screen[data-jpq-view="lessons"] .jpq-footer-nav { margin-left: -24px; margin-right: -24px; padding-left: 24px; padding-right: 24px; }
    .jpq-language-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .jpq-question { font-size: 27px; }
    .jpq-writing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 540px; }
}

@media (prefers-reduced-motion: reduce) {
    .jpq-flashcard-inner, .jpq-choice, .jpq-progress span { transition-duration: .01ms; }
    .jpq-answer:not([hidden]), .jpq-feedback:not([hidden]), .jpq-rate-action:not([hidden]), .jpq-next-action:not([hidden]), .jpq-writing-answer:not([hidden]), .jpq-writing-guide:not([hidden]) { animation: none; }
}

/* v0.7 focused study workspace */
.jpq-app {
    --jpq-bg: #f3f6f5;
    --jpq-panel: #ffffff;
    --jpq-soft: #eaf0ef;
    --jpq-ink: #132c32;
    --jpq-muted: #52686d;
    --jpq-line: #cfdad8;
    --jpq-coral: #d94f3d;
    --jpq-teal: #16877f;
    --jpq-yellow: #d59b26;
    --jpq-blue: #2875a8;
    --jpq-green: #447f51;
    --jpq-purple: #73568f;
    --jpq-danger: #ba3d35;
    --jpq-success: #18714f;
    --jpq-shadow-sm: 0 2px 8px rgba(20, 46, 52, .08);
    --jpq-shadow-md: 0 14px 34px rgba(20, 46, 52, .11);
    background: var(--jpq-bg);
    border-color: var(--jpq-line);
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(20, 46, 52, .08);
    font-size: 16px;
    line-height: 1.5;
    max-width: 1120px;
    min-height: 720px;
    touch-action: manipulation;
}

.jpq-app button,
.jpq-app input,
.jpq-app select { font: inherit; }
.jpq-app button { touch-action: manipulation; }
.jpq-app button:active { transform: translateY(1px); }
.jpq-app button:disabled { transform: none; }
.jpq-app .jpq-icon { display: block; height: 22px; width: 22px; }

.jpq-header {
    background: var(--jpq-panel);
    border-bottom: 1px solid var(--jpq-line);
    gap: 16px;
    min-height: 72px;
    padding: 12px 24px;
    position: relative;
}
.jpq-header::after {
    background: linear-gradient(90deg, var(--jpq-primary) 0 40%, var(--jpq-coral) 40% 65%, var(--jpq-yellow) 65% 82%, var(--jpq-purple) 82% 100%);
    bottom: -1px;
    content: "";
    height: 4px;
    left: 0;
    position: absolute;
    right: 0;
}
.jpq-brand-mark {
    background: var(--jpq-primary);
    border-radius: 6px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
    font-family: "Noto Sans JP", system-ui, sans-serif;
    font-size: 21px;
    height: 46px;
    width: 46px;
}
.jpq-logo { height: 46px; max-width: 180px; }
.jpq-title { color: var(--jpq-ink); font-size: 17px; font-weight: 800; letter-spacing: 0; min-width: 0; overflow-wrap: anywhere; }
.jpq-icon-button {
    align-items: center;
    background: var(--jpq-panel);
    border: 1px solid var(--jpq-line);
    border-radius: 50%;
    color: var(--jpq-ink);
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 auto;
    height: 48px;
    justify-content: center;
    padding: 0;
    transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease, transform .12s ease;
    width: 48px;
}
.jpq-icon-button:hover { background: var(--jpq-soft); border-color: color-mix(in srgb, var(--jpq-primary) 45%, var(--jpq-line)); }
.jpq-fullscreen-button { font-size: inherit; height: 46px; width: 46px; }

.jpq-screen {
    max-width: 1040px;
    min-width: 0;
    padding: 48px 40px 88px;
}
.jpq-screen > * { animation: jpq-view-in .26s cubic-bezier(.2,.7,.2,1) both; }
.jpq-screen-heading { margin: 0 0 30px; text-align: left; }
.jpq-screen-heading h2 { font-size: 30px; line-height: 1.25; margin: 6px 0 0; }
.jpq-kicker { color: var(--jpq-coral); font-size: 12px; font-weight: 850; letter-spacing: 0; text-transform: uppercase; }

.jpq-screen[data-jpq-view="welcome"] {
    display: grid;
    gap: 24px 36px;
    grid-template-columns: minmax(0, 1.65fr) minmax(250px, .75fr);
}
.jpq-screen[data-jpq-view="welcome"] .jpq-screen-heading { grid-column: 1 / -1; margin-bottom: 4px; }
.jpq-onboarding-section { margin: 0; max-width: none; }
.jpq-onboarding-section > h2 { font-size: 16px; line-height: 1.4; margin: 0 0 12px; }
.jpq-language-grid { gap: 8px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.jpq-language {
    border: 1px solid var(--jpq-line);
    border-radius: 6px;
    gap: 10px;
    grid-template-columns: 34px minmax(0, 1fr) 22px;
    min-height: 58px;
    padding: 8px 10px;
    transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .12s ease;
}
.jpq-language strong { font-size: 13px; line-height: 1.25; overflow-wrap: anywhere; }
.jpq-language:hover { background: color-mix(in srgb, var(--jpq-primary) 5%, var(--jpq-panel)); }
.jpq-language.is-selected {
    background: color-mix(in srgb, var(--jpq-primary) 8%, var(--jpq-panel));
    border-color: var(--jpq-primary);
    box-shadow: inset 3px 0 0 var(--jpq-primary);
}
.jpq-selected-dot { background: var(--jpq-primary); height: 22px; width: 22px; }
.jpq-selected-dot .jpq-icon { height: 15px; width: 15px; }
.jpq-flag { border-radius: 3px; height: 23px; width: 34px; }

.jpq-theme-section {
    align-self: start;
    background: var(--jpq-panel);
    border: 1px solid var(--jpq-line);
    border-radius: 8px;
    box-shadow: var(--jpq-shadow-sm);
    padding: 20px;
}
.jpq-theme-list {
    background: var(--jpq-soft);
    border: 1px solid var(--jpq-line);
    border-radius: 7px;
    display: grid;
    gap: 4px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: none;
    padding: 4px;
}
.jpq-theme-choice {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 5px;
    color: var(--jpq-muted);
    display: flex;
    gap: 8px;
    justify-content: center;
    min-height: 46px;
    padding: 8px 10px;
    text-align: center;
    transition: background-color .18s ease, box-shadow .18s ease, color .18s ease, transform .12s ease;
}
.jpq-theme-choice .jpq-icon { height: 18px; width: 18px; }
.jpq-theme-choice.is-selected {
    background: var(--jpq-panel);
    border-color: transparent;
    box-shadow: 0 1px 4px rgba(20, 46, 52, .14);
    color: var(--jpq-ink);
}
.jpq-welcome-continue { align-self: end; justify-content: stretch; margin: 0; }
.jpq-welcome-continue .jpq-action { min-width: 0; width: 100%; }

.jpq-action {
    background: var(--jpq-primary);
    border: 1px solid var(--jpq-primary);
    border-radius: 6px;
    min-height: 48px;
    padding: 11px 18px;
    transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease, transform .12s ease;
}
.jpq-action:hover { box-shadow: 0 7px 16px color-mix(in srgb, var(--jpq-primary) 20%, transparent); filter: none; }
.jpq-action-secondary { background: var(--jpq-panel); border-color: var(--jpq-line); color: var(--jpq-ink); }
.jpq-action-secondary:hover { background: var(--jpq-soft); box-shadow: none; }

.jpq-level-grid { gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; }
.jpq-level-card {
    align-content: start;
    background: var(--jpq-panel);
    border: 1px solid var(--jpq-line);
    border-left: 1px solid var(--jpq-line);
    border-radius: 8px;
    box-shadow: var(--jpq-shadow-sm);
    gap: 18px;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto 1fr;
    min-height: 210px;
    padding: 24px;
    position: relative;
    transition: border-color .2s ease, box-shadow .2s ease, transform .16s ease;
}
.jpq-level-card::before { background: var(--jpq-blue); content: ""; height: 5px; left: -1px; position: absolute; right: -1px; top: -1px; }
.jpq-level-card.jpq-accent-2::before { background: var(--jpq-coral); }
.jpq-level-card.jpq-accent-3::before { background: var(--jpq-teal); }
.jpq-level-card:hover, .jpq-level-card:focus { border-color: color-mix(in srgb, var(--jpq-primary) 50%, var(--jpq-line)); box-shadow: var(--jpq-shadow-md); transform: translateY(-2px); }
.jpq-level-mark {
    background: var(--jpq-soft);
    border-radius: 6px;
    font-size: 15px;
    height: auto;
    min-height: 40px;
    padding: 8px 10px;
    width: max-content;
}
.jpq-level-copy { align-self: end; gap: 8px; grid-column: 1 / -1; }
.jpq-level-copy strong { font-size: 20px; line-height: 1.3; }
.jpq-level-copy small { font-size: 13px; line-height: 1.5; }
.jpq-level-arrow { align-self: center; color: var(--jpq-primary); }
.jpq-level-arrow .jpq-icon { height: 24px; width: 24px; }

.jpq-selection-tools { justify-content: flex-start; margin-bottom: 20px; }
.jpq-selection-tools .jpq-action { min-height: 44px; padding: 8px 14px; }
.jpq-topic-list { gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.jpq-topic {
    background: var(--jpq-panel);
    border: 1px solid var(--jpq-line);
    border-left: 5px solid var(--jpq-blue);
    border-radius: 6px;
    box-shadow: var(--jpq-shadow-sm);
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 1fr auto;
    min-height: 150px;
    overflow: hidden;
}
.jpq-topic.jpq-topic-color-2 { border-left-color: var(--jpq-coral); }
.jpq-topic.jpq-topic-color-3 { border-left-color: var(--jpq-teal); }
.jpq-topic.jpq-topic-color-4 { border-left-color: var(--jpq-purple); }
.jpq-topic.jpq-topic-color-5 { border-left-color: #a43e52; }
.jpq-topic.jpq-topic-color-6 { border-left-color: var(--jpq-green); }
.jpq-topic-info { padding: 18px 18px 14px; }
.jpq-topic-info > small { font-size: 12px; }
.jpq-topic-title { font-size: 16px; }
.jpq-topic-title .text-ja { font-size: 18px; }
.jpq-lesson-choices { border-top: 1px solid var(--jpq-line); gap: 8px; justify-content: flex-start; padding: 10px 14px; }
.jpq-check {
    border: 1px solid transparent;
    border-radius: 5px;
    min-height: 44px;
    padding: 7px 9px;
    transition: background-color .18s ease, border-color .18s ease;
}
.jpq-check:hover { background: var(--jpq-panel); border-color: var(--jpq-line); }
.jpq-check.is-selected { background: color-mix(in srgb, var(--jpq-primary) 9%, var(--jpq-panel)); color: var(--jpq-primary); }
.jpq-check input, .jpq-method input, .jpq-toggle-row input { height: 22px; width: 22px; }

.jpq-category-grid { gap: 14px; }
.jpq-category {
    border: 1px solid var(--jpq-line);
    border-top: 5px solid var(--jpq-blue);
    border-radius: 6px;
    box-shadow: var(--jpq-shadow-sm);
    padding: 20px;
}
.jpq-category.jpq-category-2 { border-top-color: var(--jpq-coral); }
.jpq-category.jpq-category-3 { border-top-color: var(--jpq-teal); }
.jpq-category.jpq-category-4 { border-top-color: var(--jpq-purple); }
.jpq-category.jpq-category-5 { border-top-color: var(--jpq-yellow); }
.jpq-category h3 { font-size: 19px; }
.jpq-method {
    border: 1px solid transparent;
    border-top-color: var(--jpq-line);
    border-radius: 4px;
    gap: 12px;
    grid-template-columns: 24px minmax(0, 1fr) auto;
    min-height: 56px;
    padding: 4px 6px;
    transition: background-color .18s ease, border-color .18s ease;
}
.jpq-method:hover { background: var(--jpq-soft); }
.jpq-method.is-selected { background: color-mix(in srgb, var(--jpq-primary) 7%, var(--jpq-panel)); }
.jpq-method strong { border-radius: 4px; min-width: 28px; text-align: center; }

.jpq-footer-nav {
    align-items: center;
    display: grid;
    gap: 12px;
    grid-template-columns: 52px minmax(0, 1fr) 52px;
    margin-top: 32px;
}
.jpq-footer-status { color: var(--jpq-muted); font-size: 13px; font-weight: 750; min-width: 0; text-align: center; }
.jpq-icon-primary { background: var(--jpq-primary); border-color: var(--jpq-primary); color: #ffffff; }
.jpq-icon-primary:hover { background: color-mix(in srgb, var(--jpq-primary) 90%, #000000); border-color: var(--jpq-primary); }
.jpq-screen[data-jpq-view="lessons"] .jpq-footer-nav {
    background: color-mix(in srgb, var(--jpq-panel) 96%, transparent);
    border-top: 1px solid var(--jpq-line);
    box-shadow: 0 -10px 22px rgba(20, 46, 52, .07);
    margin: 30px -40px -88px;
    padding: 14px 40px calc(14px + env(safe-area-inset-bottom));
}
.jpq-screen[data-jpq-view="lessons"] .jpq-footer-nav .jpq-icon-button { height: 50px; width: 50px; }

.jpq-session-summary {
    border: 1px solid var(--jpq-line);
    border-top: 5px solid var(--jpq-teal);
    border-radius: 8px;
    box-shadow: var(--jpq-shadow-sm);
    max-width: 840px;
    padding: 26px;
}
.jpq-summary-tags span { border: 1px solid var(--jpq-line); border-radius: 4px; padding: 6px 10px; }
.jpq-summary-methods { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.jpq-summary-methods > div {
    background: var(--jpq-soft);
    border: 1px solid var(--jpq-line);
    border-radius: 5px;
    min-width: 0;
    padding: 9px 10px;
}
.jpq-summary-methods > div span { font-size: 14px; min-width: 0; overflow-wrap: anywhere; }

.jpq-practice-head {
    background: var(--jpq-panel);
    border: 1px solid var(--jpq-line);
    border-radius: 8px 8px 0 0;
    margin-bottom: 0;
    padding: 14px 16px;
}
.jpq-practice-context { align-items: baseline; }
.jpq-practice-context strong { font-size: 16px; }
.jpq-practice-context span, .jpq-count { font-size: 13px; }
.jpq-progress { margin-bottom: 18px; }
.jpq-progress span { background: var(--jpq-primary); }
.jpq-practice-stage {
    border: 1px solid var(--jpq-line);
    border-radius: 8px;
    box-shadow: var(--jpq-shadow-md);
    min-height: 480px;
    padding: 34px;
}
.jpq-directive { font-size: 20px; line-height: 1.45; }
.jpq-question {
    background: color-mix(in srgb, var(--jpq-yellow) 10%, var(--jpq-panel));
    border: 0;
    border-left: 5px solid var(--jpq-yellow);
    border-radius: 6px;
    font-size: 28px;
    min-height: 120px;
    padding: 26px 22px;
}
.jpq-media img, .jpq-media video { border-radius: 5px; }
.jpq-pattern-hint { border-radius: 5px; }
.jpq-choice {
    border: 1px solid var(--jpq-line);
    border-radius: 6px;
    box-shadow: var(--jpq-shadow-sm);
    min-height: 66px;
    padding: 12px;
}
.jpq-choice:hover:not(:disabled) { border-color: color-mix(in srgb, var(--jpq-primary) 55%, var(--jpq-line)); box-shadow: 0 7px 16px rgba(20, 46, 52, .10); }
.jpq-choice b { border-radius: 50%; flex: 0 0 auto; }
.jpq-choice.is-selected { border-color: var(--jpq-primary); box-shadow: inset 0 0 0 1px var(--jpq-primary); transform: none; }
.jpq-choice.is-correct { background: #e4f3eb; border-color: var(--jpq-success); color: #123b2c; }
.jpq-choice.is-wrong { background: #fbeae8; border-color: var(--jpq-danger); color: #5c211d; }
.jpq-answer { border-radius: 5px; }
.jpq-flashcard-face { border-radius: 8px; box-shadow: var(--jpq-shadow-md); }
.jpq-dialogue { gap: 10px; }
.jpq-bubble { border: 1px solid var(--jpq-line); border-radius: 8px 8px 2px 8px; }
.jpq-bubble-1 { border-radius: 8px 8px 8px 2px; }
.jpq-text-input { border-radius: 6px; }
.jpq-practice-actions {
    background: var(--jpq-panel);
    border-radius: 0 0 6px 6px;
    margin: 30px -10px -10px;
    padding: 14px 10px 10px;
}
.jpq-feedback { border-radius: 5px; }
.jpq-finish {
    border: 1px solid var(--jpq-line);
    border-radius: 8px;
    box-shadow: var(--jpq-shadow-md);
    margin: 34px auto;
}
.jpq-finish-mark { background: var(--jpq-success); }
.jpq-finish-mark .jpq-icon { height: 36px; width: 36px; }
.jpq-score strong { color: var(--jpq-primary); }
.jpq-toast { border-radius: 6px; box-shadow: var(--jpq-shadow-md); }
.jpq-confirm-dialog { border-radius: 8px; }
.jpq-writing-tools .jpq-icon-button { height: 44px; width: 44px; }

.jpq-app.jpq-theme-dark {
    --jpq-primary: #237f84 !important;
    --jpq-coral: #ff806d;
    --jpq-teal: #55bcb3;
    --jpq-yellow: #e6b856;
    --jpq-blue: #69a9d2;
    --jpq-green: #79ae7f;
    --jpq-purple: #aa8ec4;
    --jpq-bg: #131d20;
    --jpq-panel: #1d2a2e;
    --jpq-soft: #29393e;
    --jpq-ink: #f4f8f7;
    --jpq-muted: #b9c8ca;
    --jpq-line: #42545a;
    --jpq-danger: #ef746b;
    --jpq-success: #5cc795;
    --jpq-shadow-sm: 0 2px 8px rgba(0,0,0,.18);
    --jpq-shadow-md: 0 14px 34px rgba(0,0,0,.26);
}
.jpq-app.jpq-theme-dark .jpq-icon-primary { background: #237f84; color: #ffffff; }
.jpq-app.jpq-theme-dark .jpq-question { background: #302f27; border-color: var(--jpq-yellow); color: #ffffff; }
.jpq-app.jpq-theme-dark .jpq-choice.is-correct { background: #21483a; color: #effbf5; }
.jpq-app.jpq-theme-dark .jpq-choice.is-wrong { background: #4a2928; color: #fff2f1; }
.jpq-app.jpq-theme-dark .jpq-theme-choice.is-selected { background: #34464b; }

@keyframes jpq-view-in {
    from { transform: translateY(6px); }
    to { transform: translateY(0); }
}

@media (max-width: 860px) {
    .jpq-screen[data-jpq-view="welcome"] { display: block; }
    .jpq-screen[data-jpq-view="welcome"] .jpq-onboarding-section { margin-bottom: 24px; }
    .jpq-theme-section { max-width: 420px; }
    .jpq-welcome-continue { max-width: 420px; }
    .jpq-level-grid { grid-template-columns: 1fr; }
    .jpq-level-card {
        align-items: center;
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-rows: 1fr;
        min-height: 112px;
        padding: 20px;
    }
    .jpq-level-copy { align-self: center; grid-column: auto; }
    .jpq-topic-list { grid-template-columns: 1fr; }
}

@media (max-width: 650px) {
    .jpq-app { border-radius: 0; box-shadow: none; min-height: 100dvh; }
    .jpq-header { gap: 12px; min-height: 66px; padding: 10px 16px; }
    .jpq-brand-mark { height: 40px; width: 40px; }
    .jpq-title { font-size: 15px; }
    .jpq-logo { max-width: 92px; }
    .jpq-fullscreen-button { height: 44px; width: 44px; }
    .jpq-screen { padding: 32px 16px 82px; }
    .jpq-screen-heading { margin-bottom: 24px; }
    .jpq-screen-heading h2 { font-size: 25px; }
    .jpq-language-grid { gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .jpq-language { min-height: 60px; }
    .jpq-theme-section { padding: 16px; }
    .jpq-level-card { gap: 12px; min-height: 104px; padding: 16px; }
    .jpq-level-mark { font-size: 13px; min-height: 38px; padding: 8px; }
    .jpq-level-copy strong { font-size: 18px; }
    .jpq-level-copy small { font-size: 12px; }
    .jpq-topic-info { padding: 16px 16px 12px; }
    .jpq-lesson-choices { padding: 10px 12px; }
    .jpq-category-grid, .jpq-choices { grid-template-columns: 1fr; }
    .jpq-category { padding: 16px; }
    .jpq-screen[data-jpq-view="lessons"] .jpq-footer-nav { margin: 26px -16px -82px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
    .jpq-session-summary { padding: 20px 16px; }
    .jpq-summary-methods { grid-template-columns: 1fr; }
    .jpq-practice-head { border-left: 0; border-radius: 0; border-right: 0; margin-left: -16px; margin-right: -16px; padding: 12px 16px; }
    .jpq-progress { margin-left: -16px; margin-right: -16px; }
    .jpq-practice-stage { border-left: 0; border-radius: 0; border-right: 0; margin-left: -16px; margin-right: -16px; min-height: calc(100dvh - 186px); padding: 24px 16px; }
    .jpq-question { font-size: 24px; padding: 24px 14px; }
    .jpq-directive { font-size: 18px; }
    .jpq-image-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .jpq-flashcard-face { min-height: 310px; }
    .jpq-practice-actions { margin-left: -4px; margin-right: -4px; padding-left: 4px; padding-right: 4px; }
    .jpq-finish { margin-top: 16px; padding: 30px 20px; }
}

@media (max-width: 360px) {
    .jpq-language-grid { grid-template-columns: 1fr; }
    .jpq-title { font-size: 14px; }
    .jpq-screen { padding-left: 12px; padding-right: 12px; }
    .jpq-practice-head, .jpq-progress, .jpq-practice-stage { margin-left: -12px; margin-right: -12px; }
    .jpq-screen[data-jpq-view="lessons"] .jpq-footer-nav { margin-left: -12px; margin-right: -12px; padding-left: 12px; padding-right: 12px; }
}

@media (prefers-reduced-motion: reduce) {
    .jpq-screen > * { animation: none; }
    .jpq-app button, .jpq-icon-button, .jpq-action, .jpq-language, .jpq-theme-choice, .jpq-level-card { transition-duration: .01ms; }
}