/* Screenshot reference approved 05.10.2026: bold Georgia headings and Arial text. PT Serif is a local fallback where Georgia is unavailable. */
@font-face { font-family:'PT Serif'; src:url('assets/fonts/pt-serif-regular.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap; }
html[data-appearance] { --display:Georgia,'PT Serif',serif; --body:Arial,sans-serif; }
html[data-appearance] body,
html[data-appearance] :is(.admin-console,.portal-nav a,.menu-dialog nav a) { font-family:var(--body); }
html[data-appearance] :is(h1,h2,h3,h4,h5,h6,.studio-intro h1,.brand) { font-family:var(--display); font-weight:700; letter-spacing:-.025em; }
html[data-appearance] :is(.catalog-cover-placeholder strong,.catalog-node-number,.catalog-slot-code) { font-family:var(--display); }
html[data-appearance] :is(.page-heading h1,.studio-intro h1,.library-heading h1) { font-size:clamp(28px,3vw,36px); line-height:1.2; }
/* Approved concepts 07 / 08. Both keep the reading surface light. */
html[data-theme="light"][data-appearance] .grammar-manage-links {
 display:inline-flex; flex-direction:column; align-items:flex-start; gap:2px;
 margin:12px 0 20px; padding:12px 18px; min-height:52px;
 font-family:var(--body); font-size:16px; font-weight:600; line-height:1.4;
 white-space:normal; border-color:var(--accent); color:var(--accent);
}
html[data-appearance] .grammar-manage-links small { font-size:13px; font-weight:400; color:var(--muted); }
html[data-theme="light"][data-appearance] .anki-export > .anki-export-trigger {
 min-height:48px; padding:12px 18px; font-family:var(--body); font-size:16px;
 font-weight:600; line-height:1.4; white-space:normal;
 background:#24503d; border-color:#24503d; color:#fffcf5;
}
html[data-theme="light"][data-appearance] .anki-export > .anki-export-trigger:hover,
html[data-theme="light"][data-appearance] .anki-export[open] > .anki-export-trigger { background:#173e2d; color:#fffcf5; }
html[data-theme="light"][data-appearance] {
  color-scheme:light;
  --bg:#f6f1e9; --panel:#fffcf5; --text:#372c25; --muted:#726154;
  --line:#dcd1c1; --accent:#79533d; --danger:#a5263e;
  --appearance-tint:#eee5d7; --appearance-hover:#e8dac8;
  --appearance-nav:#eee8dd; --appearance-nav-text:#44372b;
  --appearance-nav-muted:#6d5e50; --appearance-selected:#ded1bf;
  --appearance-primary-hover:#60402e; --control-radius:12px;
}
html[data-theme="light"][data-appearance="matcha"] {
  --bg:#f0eadf; --panel:#fffcf5; --text:#332d24; --muted:#68614f;
  --line:#d7d0bf; --accent:#24503d;
  --appearance-tint:#e6e8da; --appearance-hover:#dbe2cf;
  --appearance-nav:#193c30; --appearance-nav-text:#fffcf0;
  --appearance-nav-muted:#d1ddcc; --appearance-selected:#335642;
  --appearance-primary-hover:#173e2d;
}
html[data-appearance] body { background:var(--bg); color:var(--text); }
html[data-appearance] ::selection { background:var(--accent); color:var(--panel); }
html[data-appearance] :is(input,textarea) { caret-color:var(--accent); }
html[data-appearance] :focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
html[data-appearance] :is(h1,h2,h3) { text-wrap:balance; }
html[data-appearance] :is(.portal-page,.teaching-main) { line-height:1.6; }
html[data-theme="light"][data-appearance] :is(.btn,.round,.admin-tabs button) { background:var(--panel); color:var(--text); border-color:var(--line); }
html[data-theme="light"][data-appearance] :is(.btn,.round,.admin-tabs button):hover { background:var(--appearance-hover); border-color:var(--accent); }
html[data-theme="light"][data-appearance] :is(.btn.primary,.mark,.ui-success) { background:var(--accent); color:var(--panel); border-color:var(--accent); }
html[data-theme="light"][data-appearance] .btn.primary:hover { background:var(--appearance-primary-hover); }
html[data-theme="light"][data-appearance] :is(.notice:not(.error),.day i,.admin-flow i,.admin-counter,.admin-source,.card-original,.admin-upload,.admin-intro,.admin-source-text,.answer-side,.bubble,.chat-form,.home-lesson) { background:var(--appearance-tint); color:var(--text); border-color:var(--line); }
html[data-theme="light"][data-appearance] :is(.menu-dialog nav a.active,.nav a.active,.steps .current,.chip.active,.admin-tabs button.active,.admin-flow .active,.language-tabs a[aria-current]) { background:var(--appearance-tint); color:var(--accent); border-color:var(--accent); }
html[data-theme="light"][data-appearance] :is(input:not([type=checkbox]):not([type=radio]):not([type=file]),textarea,select) { background:var(--panel); color:var(--text); border-color:#9b8b77; }
html[data-theme="light"][data-appearance] :is(input,textarea)::placeholder { color:var(--muted); }
html[data-theme="light"][data-appearance] .lesson-library { --library-tint:var(--appearance-tint); --library-border:var(--line); --library-book:var(--appearance-tint); }
html[data-theme="light"][data-appearance] :is(.scope-choice-main,.scope-choice-basic,.scope-choice-all) { --scope-bg:var(--panel); --scope-ink:var(--text); --scope-border:var(--line); --scope-selected:var(--appearance-tint); --scope-selected-ink:var(--accent); --scope-selected-border:var(--accent); }
html[data-theme="light"][data-appearance] .memory-page { --memory-tint:var(--appearance-tint); --memory-accent-ink:var(--panel); }
html[data-appearance] .journey-resume { border-left-width:1px; background:var(--panel); padding:28px 32px; }
html[data-appearance] .journey-book { background:var(--panel); }
html[data-appearance] .journey-heading h1 { font-family:var(--display); font-weight:700; }
html[data-appearance] :is(.portal-header,.teaching-sidebar,.admin-sidebar,.admin-mobile-bar) {
  background:var(--appearance-nav); color:var(--appearance-nav-text);
}
html[data-theme="light"][data-appearance] :is(.portal-header,.admin-sidebar,.admin-mobile-bar) { background:var(--appearance-nav); }
html[data-appearance] :is(.portal-header,.teaching-sidebar,.admin-sidebar) .brand { color:var(--appearance-nav-text); }
html[data-appearance] :is(.learner-brand-copy small,.teaching-brand small,.teaching-sidebar-caption,.teaching-sidebar-bottom>a,.teaching-nav a) { color:var(--appearance-nav-muted); }
html[data-appearance] .teaching-nav a:hover,html[data-appearance] .teaching-nav a[aria-current="page"] { color:var(--appearance-nav-text); background:var(--appearance-selected); }
html[data-appearance] .teaching-sidebar-bottom .teaching-switch { color:var(--appearance-nav-text); border-color:var(--appearance-nav-muted); }
/* Navigation must use its own surface's ink, including the mobile drawer. */
html[data-appearance] .teaching-menu-dialog { background:var(--appearance-nav); color:var(--appearance-nav-text); }
html[data-appearance] .teaching-menu-dialog :focus-visible { outline-color:var(--appearance-nav-text); }
html[data-appearance] .admin-sidebar :is(nav a,.admin-sidebar-bottom a) { color:var(--appearance-nav-text); }
html[data-appearance] .admin-sidebar :is(.admin-sidebar-caption,.admin-marketing-caption,.brand small,nav>p) { color:var(--appearance-nav-muted); }
html[data-theme="light"][data-appearance] .admin-sidebar nav a[aria-current],
html[data-appearance] .admin-sidebar nav a:hover { background:var(--appearance-selected); color:var(--appearance-nav-text); border-color:var(--appearance-nav-muted); }
html[data-appearance] :is(.admin-sidebar,.teaching-sidebar,.portal-header) :focus-visible { outline-color:var(--appearance-nav-text); }
html[data-appearance] .admin-sidebar nav a { min-height:44px; padding:10px 12px; }
html[data-appearance] .admin-sidebar nav { gap:3px; }
html[data-appearance] .admin-sidebar-caption { margin-top:24px; }
html[data-appearance] :is(.admin-sidebar,.teaching-sidebar,.teaching-menu-dialog) { scrollbar-width:thin; scrollbar-color:var(--appearance-nav-muted) var(--appearance-nav); }
html[data-appearance] :is(.admin-main,.teaching-main) { overflow-wrap:anywhere; }
html[data-appearance] :is(.admin-main,.teaching-main) :is(.btn,.text-link) { white-space:normal; }
html[data-appearance] .admin-topline { gap:12px; flex-wrap:wrap; }
html[data-appearance] :is(.admin-main,.teaching-main) :is(input,select,textarea) { max-width:100%; }
html[data-appearance] .admin-main .page-heading h1 { font-size:clamp(30px,3.2vw,42px); letter-spacing:-.025em; }
html[data-appearance] .admin-main :is(.admin-cost-overview,.admin-user-create) { border-left-width:1px; }
html[data-appearance] :is(.nl-palette,.nl-inspector,.nl-stage-tools) { background:var(--panel); color:var(--text); border-color:var(--line); }
html[data-appearance] .nl-workspace button:focus-visible { outline-color:var(--accent); }
html[data-appearance] .portal-header :is(.portal-environment-switch,.portal-sign-in,.portal-nav a,.portal-user-menu summary) { color:var(--appearance-nav-text); }
html[data-appearance] .portal-user-menu summary { border-color:var(--appearance-nav-muted); }
html[data-appearance] .portal-user-dropdown { background:var(--panel); color:var(--text); }
html[data-theme="light"][data-appearance] .portal-nav a.active { background:var(--appearance-selected); border:0; color:var(--appearance-nav-text); border-radius:8px; }
html[data-appearance] .portal-nav a:hover { background:var(--appearance-selected); color:var(--appearance-nav-text); }
html[data-appearance] .brand-logo { filter:grayscale(1) sepia(.7) brightness(.6); }
html[data-appearance="matcha"] :is(.portal-header,.teaching-sidebar,.admin-sidebar,.admin-mobile-bar) .brand-logo { filter:grayscale(1) brightness(0) invert(.94) sepia(.15); }
html[data-appearance] .appearance-settings { padding:26px 0 32px; margin-bottom:28px; border-bottom:1px solid var(--line); }
.appearance-settings h2 { font-family:var(--display); font-size:28px; font-weight:400; margin-bottom:10px; }
.appearance-settings>p { max-width:65ch; color:var(--muted); }
.appearance-settings fieldset { padding:0; border:0; margin:22px 0 0; min-width:0; }
.appearance-legend { font-size:14px; font-weight:600; margin-bottom:12px; }
.appearance-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; max-width:900px; }
.appearance-option { position:relative; display:grid; grid-template-columns:22px 100px 1fr; align-items:center; gap:16px; padding:20px; border:1px solid var(--line); border-radius:12px; background:var(--panel); cursor:pointer; color:var(--text); }
.appearance-option:has(input:checked) { border-color:var(--accent); outline:1px solid var(--accent); }
.appearance-option:focus-within { outline:3px solid var(--accent); outline-offset:3px; }
.appearance-option input { width:20px; height:20px; min-height:20px; padding:0; margin:0; accent-color:var(--accent); }
.appearance-copy { display:grid; gap:5px; }
.appearance-copy strong { font-size:17px; }
.appearance-copy>span,.appearance-copy small { font-size:13px; color:var(--muted); line-height:1.5; }
.appearance-preview { display:grid; grid-template-columns:24px 1fr; height:76px; overflow:hidden; border:1px solid #cbbfaa; border-radius:6px; background:#fffcf5; }
.appearance-preview>i { background:#e2d8c9; }
.appearance-preview>span { display:grid; align-content:center; gap:8px; padding:10px; }
.appearance-preview b { display:block; height:5px; background:#d6c9b7; }
.appearance-preview b:last-child { background:#79533d; width:65%; height:12px; border-radius:3px; }
.appearance-preview-matcha>i { background:#193c30; }
.appearance-preview-matcha b:last-child { background:#24503d; }
#appearance-status { min-height:1.6em; margin-top:14px; }
@media(min-width:1201px) {
  html[data-appearance] .portal-owner .portal-header { margin:0; flex-wrap:nowrap; justify-content:flex-start; }
  html[data-appearance] .portal-owner { display:grid; grid-template-columns:224px minmax(0,1fr); min-height:100dvh; }
  html[data-appearance] .portal-owner .portal-header { grid-column:1; grid-row:1 / span 2; position:sticky; top:0; align-self:start; height:100dvh; width:224px; padding:30px 18px; display:flex; flex-direction:column; align-items:stretch; gap:32px; border:0; border-right:1px solid var(--line); overflow-y:auto; }
  html[data-appearance] .portal-owner .portal-header .brand { font-size:24px; gap:6px; }
  html[data-appearance] .portal-owner .portal-header .brand-logo { width:32px; height:32px; }
  html[data-appearance] .portal-owner .portal-nav { display:grid; gap:8px; width:100%; margin:0; }
  html[data-appearance] .portal-owner .portal-nav a { padding:13px 16px; min-height:48px; }
  html[data-appearance] .portal-owner .portal-header-actions { display:flex; flex-direction:column; align-items:stretch; margin-top:auto; gap:18px; }
  html[data-appearance] .portal-owner .portal-header-actions .portal-environment-switch { padding:12px 4px; }
  html[data-appearance] .portal-owner .portal-user-menu summary { width:100%; }
  html[data-appearance] .portal-owner .portal-user-dropdown { position:static; margin-top:8px; min-width:0; width:100%; }
  html[data-appearance] .portal-owner .portal-page { grid-column:2; grid-row:2; width:100%; max-width:1440px; margin:0 auto; padding:40px clamp(28px,4vw,64px); }
  html[data-appearance] .portal-owner>#sync-status { grid-column:2; grid-row:1; }
  html[data-appearance] .portal-owner>#sync-status:empty { margin:0; padding:0; }
}
@media(max-width:1200px) {
  html[data-appearance] .portal-header { padding:16px 24px; gap:16px; }
  html[data-appearance] .portal-header-actions { margin-left:auto; }
  html[data-appearance] .portal-header .portal-environment-switch { display:none; }
}
@media(max-width:600px) {
  html[data-appearance] .portal-header { padding:14px 16px; flex-wrap:nowrap; min-height:72px; }
  html[data-appearance] .portal-header .brand { font-size:22px; }
  html[data-appearance] .portal-header .brand-logo { width:28px; height:28px; }
  html[data-appearance] .learner-brand-copy small { display:none; }
  html[data-appearance] .portal-user-menu summary { width:44px; height:44px; padding:12px; }
  html[data-appearance] .portal-header .portal-user-menu { flex:0 0 44px; width:44px; min-width:44px; }
  html[data-appearance] .portal-page .page-heading h1 { overflow-wrap:anywhere; }
  html[data-appearance] .portal-user-menu summary>span { display:none; }
  html[data-appearance] .portal-user-menu summary svg { width:18px; height:18px; }
  html[data-appearance] .portal-header-actions { width:auto; flex-shrink:0; gap:8px; }
  html[data-appearance] .portal-page { padding:26px 18px; }
  html[data-appearance] .journey-resume { padding:22px; }
  .appearance-options { grid-template-columns:1fr; }
  .appearance-option { grid-template-columns:20px 76px 1fr; gap:12px; padding:16px; }
  .appearance-copy strong { font-size:16px; }
  html[data-appearance] .memory-page>.notice { font-size:12px; line-height:1.5; padding:10px 12px; margin:10px 0 14px; }
  html[data-appearance] .memory-sidebar { padding-bottom:12px; }
  html[data-appearance] .memory-sidebar h1 { font-size:24px; margin-bottom:8px; }
  html[data-appearance] .memory-stages { margin:12px 0; }
  html[data-appearance] .memory-reference { margin-top:10px; }
  html[data-appearance] .memory-reference summary { min-height:44px; padding:8px 0; }
  html[data-appearance] .memory-meta { margin-bottom:12px; }
  html[data-appearance] .memory-task-heading { margin-bottom:14px; }
  html[data-appearance] .memory-task-heading h2 { font-size:26px; }
  html[data-appearance] .memory-task-heading p { font-size:13px; line-height:1.5; }
  html[data-appearance] :is(.admin-main,.teaching-main) .btn { min-height:44px; }
}
@media(max-width:760px) {
  html[data-appearance] .teaching-topbar { background:var(--appearance-nav); color:var(--appearance-nav-text); }
  html[data-appearance] .teaching-mobile-brand { color:var(--appearance-nav-text); }
  html[data-appearance="matcha"] .teaching-mobile-brand .brand-logo { filter:grayscale(1) brightness(0) invert(.94) sepia(.15); }
  html[data-appearance] .teaching-menu-dialog { max-height:calc(100dvh - 32px); overflow:auto; }
  html[data-appearance] .teaching-menu-dialog .teaching-sidebar-bottom { padding-top:18px; }
  html[data-appearance] .admin-main .admin-table-wrap { position:relative; scrollbar-width:thin; }
}

/* Approved compact header; the owner's management sidebar remains separate. */
html[data-appearance] .portal-compact {display:block;min-height:100dvh;--portal-content-width:1200px;--portal-page-gutter:clamp(24px,4vw,64px)}
html[data-appearance] .portal-compact .portal-header {display:flex;position:sticky;top:0;z-index:50;max-width:none;width:100%;height:auto;min-height:88px;margin:0;padding:16px max(var(--portal-page-gutter),calc((100% - var(--portal-content-width))/2));gap:22px;flex-wrap:nowrap;align-items:center}
html[data-appearance] .portal-compact .portal-nav {display:flex;flex:1;gap:3px;width:auto;order:0;justify-content:center}
html[data-appearance] .portal-compact .portal-nav a {padding:10px 9px;font-size:15px;white-space:nowrap}
html[data-appearance] .portal-compact .portal-header-actions {display:flex;flex-direction:row;margin:0 0 0 auto;align-items:center;gap:10px;width:auto}
html[data-appearance] .portal-compact .portal-page {max-width:1440px;margin:auto;padding:40px clamp(24px,4vw,64px)}
html[data-appearance] .portal-user-menu[open] summary {color:var(--text);background:var(--panel)}
.portal-register {display:inline-flex;align-items:center;min-height:44px;padding:8px 14px;background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:var(--control-radius);font-size:15px;white-space:nowrap}
.portal-register:focus-visible {outline:3px solid var(--accent);outline-offset:3px}
.account-settings-nav,.account-entry-tabs {display:flex;flex-wrap:wrap;gap:10px;margin:0 0 24px}
.account-settings-nav a,.account-entry-tabs a {padding:10px 14px;border:1px solid var(--line);border-radius:8px;min-height:44px}
.account-entry-tabs [aria-current] {background:var(--accent);color:var(--bg)}
/* Approved central sign-in card; isolated from signed-in account settings. */
html[data-appearance] .account-entry-card {
 width:min(100%,560px);max-width:560px;margin:8px auto 48px;padding:32px;
 background:var(--panel);border:1px solid var(--line);border-radius:12px;
 display:block;min-width:0;box-shadow:none;
}
html[data-appearance] .account-entry-card h1 {text-align:center;font-size:40px;line-height:1.2;margin:0 0 24px}
html[data-appearance] .account-entry-card .account-entry-tabs {justify-content:center;gap:16px;margin:0 auto 24px;flex-wrap:nowrap}
html[data-appearance] .account-entry-card .account-entry-tabs a {
 min-width:110px;text-align:center;padding:10px 16px;border:0;border-bottom:2px solid var(--line);
 border-radius:0;background:transparent;color:var(--muted);text-decoration:none;
}
html[data-appearance] .account-entry-card .account-entry-tabs [aria-current] {border-bottom-color:var(--accent);color:var(--accent);font-weight:600}
html[data-appearance] .account-entry-card .account-entry-tabs a:hover {color:var(--accent);border-bottom-color:var(--accent)}
html[data-appearance] .account-entry-card .account-entry-intro {text-align:center;margin:0 0 24px;font-size:16px;line-height:1.5;color:var(--muted)}
html[data-appearance] .account-entry-card form {display:block;margin:0;max-width:none}
html[data-appearance] .account-entry-card .account-field {display:grid;gap:8px;margin:0 0 20px;font-size:16px;line-height:1.5;color:var(--text)}
html[data-appearance] .account-entry-card input:not([type="checkbox"]) {width:100%;min-width:0;min-height:50px;margin:0;font-size:18px}
html[data-appearance] .account-entry-card .email-consent {gap:12px;margin:16px 0;font-size:16px;line-height:1.5;color:var(--text)}
html[data-appearance] .account-entry-card .email-consent input {margin:3px 0 0;accent-color:var(--accent)}
html[data-appearance] .account-entry-card .email-consent a {color:var(--accent);text-decoration:underline;text-underline-offset:3px}
html[data-appearance] .account-entry-card .newsletter-choice small {display:block;color:var(--muted);font-size:14px}
html[data-appearance] .account-entry-card form > .btn {width:100%;min-height:48px;margin:8px 0 0}
html[data-appearance] .account-entry-card .account-method-link {display:block;min-height:44px;margin:12px auto 0;padding:10px 16px;text-decoration:underline;text-underline-offset:3px;font-size:16px}
html[data-appearance] .account-entry-card :is(a,button,input):focus-visible {outline:2px solid var(--accent);outline-offset:3px}
html[data-appearance] .account-entry-card [role="status"]:empty {display:none}
html[data-appearance] .account-entry-card [role="status"] {margin:12px 0;overflow-wrap:anywhere}
html[data-appearance] .account-entry-card .help {margin:12px 0 0;font-size:13px;line-height:1.5}
html[data-appearance] .account-entry-card #account-login-pane h2 {font-size:24px;margin:0 0 12px}
html[data-appearance] .account-entry-card #login-form > label:not(.email-consent) {display:block;margin:16px 0 8px;font-size:16px}
html[data-appearance] .account-entry-card .account-password-control {margin:0}
@media(max-width:1100px){
 html[data-appearance] .portal-compact:has(.account-entry-card) .portal-header-actions > a {display:none}
}
@media(max-width:600px){
 html[data-appearance] .portal-compact:has(.account-entry-card) .portal-header {flex-wrap:nowrap;min-height:76px}
 html[data-appearance] .portal-compact .portal-page:has(.account-entry-card) {padding:24px 16px}
 html[data-appearance] .account-entry-card {margin:0 auto 32px;padding:24px 20px}
 html[data-appearance] .account-entry-card h1 {font-size:34px;margin-bottom:20px}
 html[data-appearance] .account-entry-card .account-entry-tabs {gap:8px;margin-bottom:20px}
 html[data-appearance] .account-entry-card .account-entry-tabs a {min-width:0;flex:1;padding-inline:8px}
}
/* Email first; calm stacked provider buttons remain available below it. */
html[data-appearance] .account-social-entry {margin-top:26px}
html[data-appearance] .account-social-divider {display:flex;align-items:center;gap:14px;margin:0 0 22px;color:var(--muted);font-size:14px;text-align:center}
html[data-appearance] .account-social-divider::before,html[data-appearance] .account-social-divider::after {content:"";height:1px;flex:1;background:var(--line)}
html[data-appearance] .account-social-buttons {display:grid;gap:12px}
html[data-appearance] .account-social-button {display:grid;grid-template-columns:26px 1fr 26px;align-items:center;gap:12px;min-height:56px;width:100%;padding:12px 18px;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--text);font-size:16px;font-weight:600;line-height:1.4;white-space:normal}
html[data-appearance] .account-social-button:hover {border-color:var(--accent);background:var(--bg)}
html[data-appearance] .account-social-button:disabled {opacity:.6;cursor:wait}
html[data-appearance] .account-provider-icon {font-family:Arial,sans-serif;font-size:24px;line-height:1;font-weight:700;text-align:center}
html[data-appearance] .account-provider-google {color:#4285f4}
html[data-appearance] .account-provider-yandex {color:#df3434}
html[data-appearance] .account-social-consent {font-size:12px;line-height:1.6;color:var(--muted);text-align:center;margin:22px 0 0}
html[data-appearance] .account-social-consent a {color:inherit;text-decoration:underline;text-underline-offset:2px}
@media(max-width:600px){
 html[data-appearance] .account-social-button {grid-template-columns:24px 1fr;gap:10px;padding-inline:14px}
}
.account-profile {margin-bottom:24px;scroll-margin-top:120px}
.account-profile form {max-width:620px;display:grid;gap:18px}
.account-profile input {width:100%}
.account-profile .account-field {display:grid;gap:6px}
:is(#account-security,#newsletter-settings,#appearance-settings,#learner-profile-settings) {scroll-margin-top:120px}
.admin-topline .portal-user-menu {margin-left:auto;max-width:240px;text-transform:none;letter-spacing:normal}
.teaching-topbar .portal-user-menu {margin-left:auto}
.tutor-compact .teaching-main {max-width:1500px;margin:auto}
@media(min-width:1101px){html[data-appearance] .portal-compact .menu-toggle {display:none}}
@media(max-width:1100px){html[data-appearance] .portal-compact .portal-nav {display:none}html[data-appearance] .portal-compact .menu-toggle {display:inline-flex}}
@media(max-width:600px){
 html[data-appearance] .portal-compact .portal-header {display:flex;flex-wrap:wrap;padding:12px 18px;gap:12px}
 html[data-appearance] .portal-compact .portal-header .brand {font-size:22px;margin-right:0}
 html[data-appearance] .portal-compact .portal-header-actions {margin-left:auto;flex-wrap:wrap;justify-content:flex-end;gap:8px;max-width:100%}
 html[data-appearance] .portal-header .portal-user-menu {flex:0 1 auto;width:auto;max-width:160px;min-width:0}
 html[data-appearance] .portal-user-menu summary {width:auto;height:auto;min-height:44px;padding:8px 10px}
 html[data-appearance] .portal-user-menu summary>span {display:block;max-width:130px}
 html[data-appearance] .portal-user-dropdown {position:absolute;right:0;width:230px;min-width:0;max-width:calc(100vw - 32px)}
 html[data-appearance] .portal-compact .portal-page {padding:26px 18px}
 .portal-register {padding:8px 10px;font-size:14px}
 .account-settings-nav {gap:6px}.account-settings-nav a {padding:8px 10px}
}

.portal-header-actions :is(.menu-toggle,[data-studio-menu]) {order:-1}
.admin-topline {position:sticky;top:0;z-index:45;background:var(--bg);min-height:72px}
.teaching-topbar {position:sticky;top:0;z-index:45;background:var(--bg)}
@media(max-width:760px){.admin-topline {top:76px}}

/* Shared text-field finish. These properties intentionally override legacy page/ID rules. */
html[data-appearance] :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=hidden]):not([type=button]):not([type=submit]):not([type=reset]):not([type=image]),textarea,select){
 background-color:#fff !important;color:#173c2e !important;
 border:1px solid #8a9e90 !important;border-radius:10px !important;
 outline:none !important;box-shadow:none !important;caret-color:#173c2e;
}
html[data-appearance] :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=hidden]):not([type=button]):not([type=submit]):not([type=reset]):not([type=image]),textarea,select):focus{
 border-color:#173c2e !important;outline:none !important;box-shadow:none !important;
}
html[data-appearance] :is(input,textarea,select)[aria-invalid=true]{border-color:#a63827 !important}
html[data-appearance] :is(input,textarea)::placeholder{color:#596b61 !important;opacity:1}
@media(forced-colors:active){html[data-appearance] :is(input,textarea,select):focus-visible{border-color:Highlight !important}}

/* Editor controls inherit the same portal typography; authored email previews retain their own document styles. */
html[data-appearance] :is(.ql-toolbar,.ql-tooltip,.ql-container){font-family:var(--body)}

/* Shared reference scale; keep compact exercise labels at their existing size. */
html[data-appearance] body {font-size:16px;line-height:1.55}
html[data-appearance] :is(.studio-page-heading,.journey-heading,.page-heading,.library-heading,.studio-intro) h1 {font-size:clamp(32px,3.4vw,50px);font-weight:700;line-height:1.12;letter-spacing:-.03em}
html[data-appearance] .admin-main .page-heading h1 {font-size:clamp(32px,3.4vw,50px)}
html[data-appearance] .studio-workspace-page h2 {font-size:28px;line-height:1.25}
html[data-appearance] .studio-workspace-page h3 {font-size:22px;line-height:1.3}
html[data-appearance] .studio-workspace-page :is(.studio-path,.studio-table,.studio-table td p) {font-size:14px}
html[data-appearance] .teaching-nav a {font-size:16px}
html[data-appearance] .studio-tools .teaching-nav a {font-size:14px}
html[data-appearance] .brand {font-weight:700}
@media(max-width:700px){
 html[data-appearance] .studio-workspace-page h2 {font-size:25px}
 html[data-appearance] .teaching-nav a {font-size:15px}
}