.shell { max-width: 1280px; }
main { grid-template-columns: 240px minmax(0, 1fr); gap: 28px; }
[hidden] { display: none !important; }
a:focus-visible { outline: 3px solid #0069a6; outline-offset: 3px; }
.topics-nav { position: sticky; top: 20px; max-height: calc(100dvh - 40px); overflow-y: auto; border: 1px solid #c8dbe0; border-radius: 20px; background: #fff; padding: 16px; }
.topics-nav > details > summary { font-size: 1rem; font-weight: 850; cursor: pointer; padding: 8px 0; }
.menu-all { display: block; margin: 10px 0 12px; padding: 12px; border-radius: 10px; color: #102c49; font-weight: 800; text-decoration: none; background: #eef5f6; }
.theme-group { border-top: 1px solid #dce9ec; padding: 6px 0; }
.theme-group > summary { padding: 12px 4px; font-weight: 800; cursor: pointer; line-height: 1.4; }
.theme-exercises, .theme-card-exercises { padding: 0; margin: 0; list-style: none; }
.theme-exercises { padding-bottom: 6px; }
.word-group { margin: 4px 0 8px 4px; border-left: 2px solid #c8dbe0; padding-left: 8px; }
.word-group > summary { padding: 10px 4px; min-height: 44px; cursor: pointer; color: #23556c; font-weight: 750; font-size: .9375rem; line-height: 1.4; }
.overview-word-group { margin-top: 12px; border: 1px solid #c8dbe0; border-radius: 12px; padding: 0 12px 12px; }
.overview-word-group > summary { padding: 13px 0; cursor: pointer; color: #102c49; font-weight: 800; line-height: 1.4; }
.overview-word-group:not([open]) { padding-bottom: 0; }
.theme-card .pack-word-list { font-size: .9375rem; line-height: 1.6; margin-bottom: 12px; }
.menu-exercise { display: block; min-height: 44px; margin: 3px 0; padding: 11px 12px; border-radius: 10px; text-decoration: none; color: #315c71; font-size: .9375rem; line-height: 1.4; }
.menu-exercise:hover, .menu-all:hover { background: #dff2f3; }
.menu-exercise[aria-current], .menu-all[aria-current] { background: #102c49; color: #fff; font-weight: 800; }
.overview-heading { font-size: clamp(2rem, 5vw, 3.6rem); margin-top: 0; }
.overview-intro { color: #456575; line-height: 1.55; margin-bottom: 24px; }
.theme-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.theme-card { background: #fff; border: 1px solid #c8dbe0; border-radius: 20px; padding: 23px; scroll-margin-top: 20px; }
.theme-card:first-child { grid-row: span 2; border-top: 5px solid #218e9a; }
.theme-number { display: block; color: #315c71; font-size: .875rem; font-weight: 800; letter-spacing: .08em; margin-bottom: 12px; }
.theme-card h2 { font-size: 1.55rem; }
.theme-card p { color: #456575; line-height: 1.5; margin: 0 0 18px; }
.theme-choice { display: block; color: #102c49; text-decoration: none; background: #f2f8fa; border: 1px solid #c8dbe0; border-radius: 10px; margin-top: 8px; min-height: 48px; padding: 12px 14px; line-height: 1.4; font-weight: 750; }
.theme-choice:hover { background: #dff2f3; border-color: #218e9a; }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 18px; font-size: .9375rem; line-height: 1.5; color: #456575; }
.breadcrumbs a { color: #23556c; font-weight: 750; }
.breadcrumbs span[aria-hidden] { color: #728b98; }
#page-title { font-size: clamp(2rem, 4.5vw, 3.5rem); }
.side { grid-column: 2; margin-top: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.tip { margin-bottom: 0; }
.menu-support { display: block; margin-top: 5px; font-size: .875rem; font-weight: 400; line-height: 1.5; color: #456575; letter-spacing: 0; }
.menu-exercise[aria-current] .menu-support, .menu-all[aria-current] .menu-support { color: #d9edf0; }
.overview-heading .menu-support { font-size: 1rem; margin-top: 12px; }
.top-actions { align-items: flex-end; gap: 12px; }
.voice-settings-compact { position: relative; padding: 0; margin: 0; border: 0; background: transparent; border-radius: 0; }
.voice-settings-compact > summary { min-height: 44px; padding: 10px 12px; border: 2px solid #9cc1c8; border-radius: 11px; background: #fff; font-size: .875rem; line-height: 1.4; color: #315c71; }
.voice-popover { position: absolute; right: 0; top: calc(100% + 8px); z-index: 5; width: min(310px, calc(100vw - 32px)); padding: 16px; border: 1px solid #c8dbe0; border-radius: 16px; background: #fff; box-shadow: 0 12px 30px rgba(16,44,73,.14); }
.voice-popover p:first-child { margin-top: 0; }
.voice-popover #voice-status { margin-bottom: 0; }
@media (max-width: 1050px) { .topbar { flex-wrap: wrap; } .top-actions { margin-left: auto; } }
@media (max-width: 560px) { .top-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); width: 100%; gap: 10px; } .top-actions .language-picker { min-width: 0; width: auto; font-size: .875rem; } .top-actions .language-picker select { min-width: 0; width: 100%; font-size: .875rem; } .voice-settings-compact > summary { padding: 10px 9px; } }
@media (max-width: 1050px) { .theme-cards { grid-template-columns: 1fr; } .theme-card:first-child { grid-row: auto; } }
@media (max-width: 899px) { main { grid-template-columns: minmax(0, 1fr); gap: 20px; } .topics-nav { position: static; max-height: none; padding: 12px 16px; } .side { grid-column: 1; } .theme-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .theme-card:first-child { grid-row: span 2; } }
@media (max-width: 600px) { .theme-cards, .side { grid-template-columns: minmax(0, 1fr); } .theme-card:first-child { grid-row: auto; } .theme-card { padding: 20px; } }