/* Shared display preferences and translator detail layout. */
:root{--night-bg:#141318;--night-panel:#211e27;--night-raised:#2b2632;--night-text:#f3edf7;--night-muted:#bbb0c6;--night-line:#403747}
.display-controls{display:flex;align-items:center;gap:8px;flex-shrink:0;order:2;margin-left:auto}
.display-segment{display:flex;gap:2px;padding:3px;border:1px solid #ffffff30;background:#ffffff0a;border-radius:30px}
.display-segment button{width:34px;height:32px;min-height:32px;border:0;border-radius:50%;padding:7px;background:transparent;color:inherit;display:grid;place-items:center;font:700 11px/1 Manrope,Arial,sans-serif;cursor:pointer;transition:background .18s,color .18s}
.display-segment button svg{width:17px;height:17px}.display-segment button[aria-pressed=true]{background:#ffd15b;color:#201c26}.display-segment button:hover:not([aria-pressed=true]){background:#8c75952b}.display-segment button:focus-visible{outline:2px solid #af83d4;outline-offset:3px}
.topbar-right .display-controls{order:0;margin:0;color:#62556d}.topbar-right .display-segment{border-color:#e5dce9;background:#f7f3f9}
.header-inner>.brand{order:0}.header-inner>.menu-toggle{order:3}.header-inner>nav{order:1}.header-inner>.login-link{order:4}.header-inner{gap:18px}
.display-controls-floating{position:absolute;right:24px;top:20px;z-index:30;color:#62556d}.display-controls-floating .display-segment{border-color:#dfd5e7;background:#fffdfb}
.translator-details{margin-top:28px}.translator-details-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:0 0 20px}.translator-details-heading .eyebrow{font-size:10px;letter-spacing:1.4px;color:#7b608d;margin:0 0 7px}.translator-details-heading h2{font-size:24px;line-height:1.3;margin:0}.translator-ai-label{padding:7px 12px;border:1px solid #e4d9ec;border-radius:20px;font-size:10px;color:#796489;white-space:nowrap}.translator-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.translator-detail-card,.translator-examples{background:#fffdfb;border:1px solid #e6ded8;border-radius:20px;padding:24px}.translator-detail-card h3,.translator-examples h3{font-size:17px;margin:0 0 18px}.translator-detail-card ul{list-style:none;padding:0;margin:0}.translator-detail-card li{padding:15px 0;border-top:1px solid #eee7f1;display:grid;gap:5px}.translator-detail-card li:first-child{border:0;padding-top:0}.translator-detail-card li strong{font-size:17px;color:#70478c}.translator-detail-card li span{font-size:14px}.translator-detail-card li small{font-size:12px;color:#726b76;line-height:1.7}.translator-examples{margin-top:18px}.translator-examples article{display:flex;align-items:start;gap:15px;border-top:1px solid #eee7f1;padding:17px 0}.translator-examples article:last-child{padding-bottom:0}.translator-examples article>div{flex:1}.translator-examples p{margin:0 0 5px;font-size:14px;line-height:1.8}.translator-examples p+p{font-size:13px;color:#726b76}.translator-example-number{font-size:11px;color:#8c729c;padding-top:4px}.translator-usage{margin-top:18px;border-left:3px solid #b395c7;padding:13px 20px;background:#eee5f563;border-radius:0 14px 14px 0}.translator-usage strong{font-size:12px}.translator-usage p{font-size:13px;line-height:1.8;margin:6px 0}
html[data-theme=dark]{color-scheme:dark;--muted:var(--night-muted);--line:var(--night-line)}
html[data-theme=dark] body,html[data-theme=dark] .student-app{background:var(--night-bg);color:var(--night-text);--muted:var(--night-muted);--student-border:var(--night-line);--purple:#c4a0e7;--lavender:#34293f}
html[data-theme=dark] .student-app .student-topbar{background:#1b181f;border-color:var(--night-line)}
html[data-theme=dark] :is(.student-app .panel,.student-app .portal-row,.login-card,.translator-shell,.translator-detail-card,.translator-examples){background:var(--night-panel);border-color:var(--night-line);box-shadow:0 6px 24px #00000012}
html[data-theme=dark] :is(.translator-output,.translator-usage,.student-app .learning-progress-card){background:#29232f}
html[data-theme=dark] :is(input,textarea,select){color:var(--night-text)!important;background:#1b181f!important;border-color:#574562!important}
html[data-theme=dark] :is(input,textarea)::placeholder{color:#a99bb4;opacity:1}
html[data-theme=dark] :is(.topbar-path strong,.page-heading h1,.panel h2,.panel h3,.portal-row h2,.portal-row h3,.translator-detail-card strong){color:var(--night-text)}
html[data-theme=dark] :is(.portal-meta,.portal-note,.portal-row small,.portal-date,.subtle,.translator-detail-card small,.translator-examples p+p,.translator-ai-label,.translator-details .eyebrow){color:var(--night-muted)!important}
html[data-theme=dark] :is(.translator-detail-card li,.translator-examples article){border-color:var(--night-line)}
html[data-theme=dark] :is(.student-sidebar,.student-footer,.dark,.header){background:#19171e;color:#faf6f1}
html[data-theme=dark] .student-button{color:#201c26}
html[data-theme=dark] :is(.portal-actions .primary,.btn-yellow,.button-primary){color:#201c26}
html[data-theme=dark] .student-button.outline{color:var(--night-text)!important;background:transparent}
html[data-theme=dark] :is(.student-button.purple,.login-button){background:#7951a1;color:#fff!important}
html[data-theme=dark] :is(.student-button.dark,.next-lesson,.student-app .billing-package-card){background:#19171e;color:#fff!important}
html[data-theme=dark] :is(.goal-card,.course-card,.quiz-intro,.quiz-banner,.quiz-teaser){color:#201c26}
html[data-theme=dark] .goal-card :is(h3,p){color:inherit}
html[data-theme=dark] .goal-card:nth-child(1),html[data-theme=dark] .goal-card:nth-child(6){color:#fff}
html[data-theme=dark] :is(.sticker,.word-card,.phrase-card){background:#fffdfb;color:#201c26}
html[data-theme=dark] :is(.sticker,.word-card,.phrase-card) *{color:inherit}
html[data-theme=dark] .display-controls{color:#e5d7ef}.display-controls button[aria-pressed=true]{color:#201c26}
html[data-theme=dark] .display-segment{border-color:#4a3c55;background:#2b2333}
html[data-theme=dark] .display-segment button[aria-pressed=true]{background:#ffd15b;color:#201c26}
html[data-theme=dark] dialog::backdrop{background:#050409b8}
html[data-theme=dark] :is(a,button,input,textarea,select):focus-visible{outline-color:#d0aafa}
html[data-language=de] .page-heading h1{letter-spacing:-.6px;overflow-wrap:anywhere}
@media(max-width:850px){.student-topbar{flex-wrap:wrap;height:auto!important;min-height:82px;padding-top:12px!important;padding-bottom:12px!important}.topbar-right{gap:10px}.topbar-path{flex:1}.topbar-right .display-controls{gap:5px}.header-inner{flex-wrap:wrap}.header-inner .display-controls{margin-left:auto}.header-inner>nav{order:5}.translator-detail-grid{grid-template-columns:1fr}.translator-details-heading{align-items:start;flex-direction:column;gap:10px}}
@media(max-width:550px){.display-controls{gap:5px}.display-segment button{width:29px;height:29px;min-height:29px;padding:6px}.header-inner>.brand{margin-right:auto}.header-inner>.display-controls{order:5;margin:0 auto}.header-inner>.menu-toggle{margin-left:auto}.header-inner>nav{order:6}.header-inner{row-gap:12px}.topbar-right{width:100%;justify-content:flex-end}.topbar-right .display-controls{margin-right:auto}.display-controls-floating{top:15px;right:15px}.login-page{padding-top:88px!important}.translator-detail-card,.translator-examples{padding:20px}.translator-details-heading h2{font-size:21px}}
@media(prefers-reduced-motion:reduce){.display-controls *{transition:none}}
.translator-detail-card li>div{display:flex;flex-wrap:wrap;align-items:baseline;gap:7px 14px}.translator-detail-card li p{margin:3px 0 0;font-size:12px;line-height:1.8;color:#726b76}
html[data-theme=dark] .translator-detail-card li p{color:var(--night-muted)}
html[data-theme=dark] #student-nav button[aria-current=page]{color:#201c26}
html[data-theme=dark] .student-app .portal-actions :is(button,a){background:#2d2635;color:var(--night-text);border-color:#584664}
html[data-theme=dark] .student-app .portal-actions .primary{background:#ffd15b;color:#201c26}
html[data-theme=dark] .icon-button{background:#2b2333;color:var(--night-text);border-color:var(--night-line)}
html[data-theme=dark] :is(.translator-pane textarea,.translator-language-select select,.portal-search-shell input){background:transparent!important}
html[data-theme=dark] .translator-swap{background:#392c47;color:#dbbcf6;border-color:#584168}
html[data-theme=dark] .levels{background:#211e27;color:#f3edf7}
html[data-theme=dark] .levels :is(h2,h3,p){color:inherit}
html[data-theme=dark] .levels .level-number{color:#ffd15b}
html[data-theme=dark] :is(.quiz-banner,.group-course,.individual-course,.goal-card:nth-child(2),.goal-card:nth-child(3),.goal-card:nth-child(4),.goal-card:nth-child(5)){color:#201c26}
html[data-theme=dark] :is(.quiz-banner,.group-course,.individual-course) :is(h2,h3,p,.course-title,.course-topline,.course-bottomline){color:#201c26}
html[data-theme=dark] :is(.quiz-banner,.group-course,.individual-course) .phrase-card{background:#fffdfb;color:#201c26}
html[data-theme=dark] .phrase-slot .sticker{background:#fffdfb;color:#201c26}
html[data-theme=dark] .button{color:#201c26}
html[data-theme=dark] .hero-actions>.button:first-child{color:#fff}
html[data-theme=dark] .quiz-banner .button{background:#201c26;color:#fff}
html[data-theme=dark] .login-card .button{color:#fff}
html[data-theme=dark] .login-page{background:var(--night-bg)}
html[data-theme=dark] .hero .hero-actions>.catalog-cta,
html[data-theme=dark] .hero .hero-actions>.catalog-cta:hover{color:#201c26}
/* Dark surfaces keep foregrounds paired through hover, selection and expansion. */
html[data-theme=dark] .goal-card:nth-child(n){--goal-accent:#ffd45f;background:#24212a;color:#f6f1f8;border:1px solid #443c4d;box-shadow:0 10px 24px #00000012}
html[data-theme=dark] .goal-card:nth-child(3n){--goal-accent:#ffa28c;background:#2d2225;border-color:#573d41}
html[data-theme=dark] .goal-card:nth-child(3n+2){--goal-accent:#d2b1f2;background:#282230;border-color:#4c3c5a}
html[data-theme=dark] .goal-card:nth-child(n):is(:hover,:focus-within){background:#342d3c;border-color:var(--goal-accent);color:#fff;box-shadow:0 12px 30px #00000028}
html[data-theme=dark] .goal-card:nth-child(n) h3{color:#faf5ff}
html[data-theme=dark] .goal-card:nth-child(n) p{color:#d1c8d7}
html[data-theme=dark] .goal-card:nth-child(n) .goal-icon{color:var(--goal-accent);border-color:var(--goal-accent);background:#ffffff05}
html[data-theme=dark] .course-card .price-content{background:#211e27;color:#f3edf7;border:1px solid #4b4055}
html[data-theme=dark] .course-card .price-content :is(h3,p,strong,small,.price,.price-caption,.plan){color:#f3edf7}
html[data-theme=dark] .course-card .price-content .gift{background:#393222;color:#ffe2a0;border:1px solid #635131}
html[data-theme=dark] .course-card .price-content .gift :is(strong,p){color:inherit}
html[data-theme=dark] .course-card.group-course{--course-accent:#ffdb79;background:#2c2722;border-color:#67573a}
html[data-theme=dark] .course-card.individual-course{--course-accent:#ffad94;background:#302329;border-color:#67424a}
html[data-theme=dark] .course-card .course-toggle{color:#f6f0f9}
html[data-theme=dark] .course-card :is(.course-title,.course-topline,.course-bottomline){color:#f6f0f9}
html[data-theme=dark] .course-card .course-topline{color:var(--course-accent)}
html[data-theme=dark] .course-card .round-arrow{color:var(--course-accent);border-color:var(--course-accent)}
html[data-theme=dark] .course-card .course-bottomline{border-color:#756579}
html[data-theme=dark] .course-card .individual-art{color:var(--course-accent)}
html[data-theme=dark] .segmented button{color:#d7ccdf;border:1px solid transparent}
html[data-theme=dark] .segmented button[aria-pressed=true]{background:#ffd45f;color:#211b28;border-color:#ffe49a;box-shadow:0 2px 8px #0003}
html[data-theme=dark] .segmented button:hover:not([aria-pressed=true]){background:#44374f;color:#fff}
html[data-theme=dark] .quiz-shell .button{background:#ffd45f;color:#211b28;border:1px solid #ffe49a}
html[data-theme=dark] .quiz-shell .button:disabled{opacity:1;background:#39313f;color:#c8bcd1;border-color:#685674;box-shadow:none;cursor:not-allowed}
html[data-theme=dark] .quiz-option:has(input:checked){background:#3b2f48;border-color:#d3a9f4;box-shadow:0 0 0 1px #d3a9f4}
html[data-theme=dark] .quiz-option:hover{background:#312938;border-color:#9577ab}
html[data-theme=dark] .analytics-setting{background:#2b2532;color:#e2c6f7;border:1px solid #61506f}
html[data-theme=dark] .skip{color:#201c26}
html[data-theme=dark] .button.dark-button{background:#211b28;color:#faf5ff}
html[data-theme=dark] .course-next{background:#292230;color:#f3edf7;border-block:1px solid #483b54}
html[data-theme=dark] .course-word-art{background:#332c23;color:#ffe19c;box-shadow:10px 10px 0 #201b26;border:1px solid #665136}
html[data-theme=dark] .course-word-art :is(.word-star,.phrase-de,.phrase-ru){color:inherit}
html[data-theme=dark] .vocab-app{color:#f3edf7;--vocab-border:#51435d}
html[data-theme=dark] .chat-avatar{color:#241e2b}
.translator-audio-settings{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:18px;font-size:12px;color:#6d6177}
.translator-audio-settings label{display:flex;gap:8px;align-items:center}.translator-audio-settings select{max-width:250px;padding:8px 10px;border:1px solid #dfd4e6;border-radius:10px;background:#fff;color:#302638;font:inherit}
html[data-theme=dark] .translator-audio-settings{color:#d1c4db}
.translator-details-loading{padding:18px 22px;border:1px solid #c8b7d7;border-radius:16px;color:#73568b;background:#f4eef9;display:flex;align-items:center;gap:12px}
html[data-theme=dark] .translator-details-loading{background:#292230;color:#dfc7f1;border-color:#594268}