.words-main { width:min(900px,calc(100% - 2rem)); margin:1rem auto 4rem; }
.words-nav { display:flex; flex-wrap:wrap; gap:1rem; font-weight:700; }
.words-nav a { color:var(--purple); }
.words-hero { max-width:720px; padding:1.5rem 0; }
.words-hero h1 { font-size:clamp(2rem,5vw,3rem); line-height:1.15; margin:.5rem 0 1rem; }
.words-hero p { line-height:1.65; }
.words-panel { background:white; border:1px solid #e1dbef; border-radius:24px; padding:clamp(1.1rem,4vw,2rem); margin-bottom:1.5rem; }
.words-panel h2 { margin:0 0 1rem; }
.words-paid-label { display:inline-block; padding:.5rem .8rem; border-radius:999px; background:#fff0b2; color:#604908; font-size:.85rem; font-weight:700; }
.words-locked h2 { margin-top:1rem; }.words-locked p { line-height:1.7; }
.words-settings { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.words-settings label { display:grid; gap:.5rem; color:var(--ink); font-weight:700; }
.words-settings select { width:100%; padding:.8rem; min-height:48px; border:2px solid #ddd5f2; border-radius:12px; color:var(--ink); background:white; font:inherit; }
.words-progress-note { padding:.8rem 1rem; background:#f5f2ff; border-radius:12px; font-size:.92rem; line-height:1.6; }
.words-preview,.words-lesson-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; margin:1.5rem 0; }
.words-preview article,.words-flashcard { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1rem; border:1px solid #e1dbef; border-radius:18px; padding:1.2rem .8rem; text-align:center; }
.words-preview article>strong { font-size:1.3rem; }.words-preview small { color:var(--muted); }
.words-target { font:700 clamp(1.15rem,3vw,1.65rem)/1.6 system-ui,sans-serif; overflow-wrap:anywhere; color:var(--purple-dark); }
.words-graphic { min-height:100px; display:flex; flex-direction:column; gap:1rem; align-items:center; justify-content:center; }
.words-number { font:400 3rem/1.2 "Courier New",monospace; color:var(--purple-dark); }
.words-swedish { font-size:.9rem; color:var(--muted); }
.words-audio { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:.5rem .8rem; border:1px solid #ddd5f2; background:#faf8ff; color:var(--purple); border-radius:12px; font:700 .85rem/1.3 system-ui,sans-serif; cursor:pointer; }
.words-exercise { max-width:740px; margin-inline:auto; text-align:center; }
.words-exercise-heading { display:flex; justify-content:space-between; gap:1rem; color:var(--muted); font-size:.9rem; }
.words-exercise progress { width:100%; height:12px; margin:1rem 0 1.5rem; accent-color:var(--purple); }
.words-prompt { min-height:160px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.5rem; margin:1rem 0; }
.words-prompt>.words-target { font-size:clamp(1.7rem,5vw,2.5rem); }
.words-choices { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.8rem; margin:1.5rem 0; align-items:stretch; }
.words-choice-wrap { display:flex; flex-direction:column; gap:.5rem; min-width:0; }
.words-choice { min-height:90px; flex:1; padding:.8rem .4rem; border:2px solid #ddd5f2; background:white; border-radius:16px; box-shadow:0 3px 0 #e3dcef; cursor:pointer; }
.words-choice.is-selected { border-color:var(--purple); background:#f1edff; }
.words-choice.is-correct { border-color:#39846b; background:#e6f5ef; }
.words-choice.is-learning { border-color:#b08724; background:#fff5cf; }
.words-choice .shape-figure { width:58px; height:58px; }.words-choice .shape-rectangle { width:80px;height:50px; }
.words-choice .words-target { font-size:clamp(1rem,2.5vw,1.3rem); }
.words-check { min-width:150px; }.words-check:disabled { opacity:.4;cursor:default; }
.words-feedback { display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:.5rem; padding:1rem; background:#f2effc; border-radius:16px; margin:1rem 0; }
.words-feedback>strong { flex-basis:100%; }
.words-text-button { min-height:44px; border:0; background:transparent; color:var(--muted); font:inherit; text-decoration:underline; cursor:pointer; }
.words-review-row { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:.5rem 1rem; border-bottom:1px solid #eee8f5; padding:.8rem 0; }
.words-result p { line-height:1.65; }
.words-main button:focus-visible,.words-main select:focus-visible,.words-main a:focus-visible { outline:3px solid var(--purple); outline-offset:4px; }
@media(max-width:550px) { .words-settings{grid-template-columns:1fr;}.words-preview,.words-lesson-grid{grid-template-columns:repeat(2,minmax(0,1fr));}.words-choices{gap:.45rem;}.words-choice{padding:.6rem .3rem;}.words-choice .words-target{font-size:.98rem;}.words-choice .shape-figure{width:44px;height:44px;}.words-choice .shape-rectangle{width:62px;height:40px;}.words-exercise-heading{font-size:.8rem;}.words-preview article:last-child{grid-column:1/-1;} }
@media(max-width:550px){.words-choices.is-long-words{grid-template-columns:1fr;}.is-long-words .words-choice-wrap{display:grid;grid-template-columns:1fr auto;align-items:center;}.is-long-words .words-choice{min-height:58px;}.is-long-words .words-choice .words-target{font-size:1.1rem;}}