html { color-scheme:light dark; }
body { margin:0; background:#F5F5F5; }
button, input, textarea, select { font-family:inherit; }
button:not(:disabled), summary { cursor:pointer; }
/* Shared palette, type and spacing for every screen. */
#connected-english-preview { --x-surface:#FFFFFF; --x-ink:#252525; --x-muted:#5C5C5C; --x-line:#DEDEDE; --x-control:#808080; --x-gold:#FFD700; --x-on-gold:#252525; --x-accent:#252525; --x-soft:#F5F5F5; --x-error:#A32929; --x-body:20px; --x-font-12:calc(var(--x-body) * .75); --x-font-15:calc(var(--x-body) * .8); --x-font-16:calc(var(--x-body) * .85); --x-font-17:calc(var(--x-body) * .9); --x-font-18:calc(var(--x-body) * .9); --x-heading:calc(var(--x-body) * 1.5); --x-display:calc(var(--x-body) * 2.6); --x-subheading:calc(var(--x-body) * 1.15); --x-emphasis:calc(var(--x-body) * 1.1); --x-radius:12px; --x-radius-sm:10px; --x-radius-lg:18px; --x-control-height:56px; --x-button-height:58px; --x-section-gap:32px; --x-panel-padding:24px; --x-content-gutter:32px; padding:28px 16px; color:var(--x-ink); font-family:system-ui,-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif; font-size:var(--x-body); line-height:1.65; text-align:left; }
#connected-english-preview * { box-sizing:border-box; }
#connected-english-preview [hidden] { display:none !important; }
#connected-english-preview .x-app { width:100%; max-width:960px; min-height:360px; margin:0 auto; background:var(--x-surface); border:1px solid var(--x-line); border-radius:24px; box-shadow:0 8px 32px rgb(0 0 0 / 4%); font-size:var(--x-body); }
/* The complete account toolbar stays on one line at all font sizes. */
#connected-english-preview .x-header { padding:14px var(--x-content-gutter); display:flex; flex-wrap:nowrap; align-items:center; justify-content:space-between; gap:24px; min-width:0; max-width:100%; overflow-x:auto; overscroll-behavior-inline:contain; scrollbar-width:thin; scrollbar-color:var(--x-control) var(--x-soft); font-size:var(--x-font-18); border-bottom:1px solid var(--x-line); }
#connected-english-preview #x-brand { display:inline-flex; align-items:center; gap:12px; flex:0 0 auto; min-width:0; max-width:none; overflow-wrap:normal; white-space:nowrap; font-weight:600; }
#connected-english-preview .x-row { display:flex; align-items:center; justify-content:space-between; gap:12px 16px; flex-wrap:wrap; }
#connected-english-preview .x-header .x-header-actions { flex:0 0 auto; min-width:0; width:auto; max-width:none; flex-wrap:nowrap; justify-content:flex-start; gap:16px; padding:6px 0; }
#connected-english-preview .x-header .x-header-actions > * { flex:0 0 auto; max-width:none; overflow-wrap:normal; }
#connected-english-preview .x-header .x-header-actions .x-text-button { white-space:nowrap; overflow-wrap:normal; }
#connected-english-preview .x-header::-webkit-scrollbar { height:8px; }
#connected-english-preview .x-header::-webkit-scrollbar-track { background:var(--x-soft); border-radius:8px; }
#connected-english-preview .x-header::-webkit-scrollbar-thumb { background:var(--x-control); border-radius:8px; }
#connected-english-preview :focus-visible { outline:3px solid var(--x-accent); outline-offset:3px; box-shadow:0 0 0 3px var(--x-gold); }
#connected-english-preview .x-text-button { max-width:100%; min-height:48px; padding:10px 4px; border:0; border-radius:6px; background:none; color:var(--x-accent); font:inherit; font-size:var(--x-font-17); font-weight:600; line-height:1.5; white-space:normal; overflow-wrap:anywhere; text-underline-offset:4px; }
#connected-english-preview .x-text-button:disabled { color:var(--x-muted); cursor:default; }
#connected-english-preview h2[tabindex="-1"]:focus { outline:none; box-shadow:none; }
#connected-english-preview .x-nav { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; padding:16px var(--x-content-gutter); border-bottom:1px solid var(--x-line); background:var(--x-soft); }
#connected-english-preview .x-nav[data-role="teacher"] { grid-template-columns:repeat(4,minmax(0,1fr)); }
#connected-english-preview .x-nav[data-role="learner"] { grid-template-columns:repeat(4,minmax(0,1fr)); }
#connected-english-preview .x-nav button { margin:0; min-width:0; min-height:56px; padding:12px 8px; border:1px solid transparent; border-radius:var(--x-radius); background:transparent; color:var(--x-muted); font:inherit; font-size:var(--x-font-18); font-weight:600; line-height:1.5; word-break:keep-all; overflow-wrap:anywhere; }
#connected-english-preview .x-nav button[aria-current="page"] { border-color:var(--x-control); background:var(--x-gold); color:var(--x-on-gold); }
#connected-english-preview .x-nav button:disabled { opacity:.55; cursor:default; }
#connected-english-preview .x-content { min-width:0; width:100%; max-width:840px; margin:0 auto; padding:32px var(--x-content-gutter) 40px; }
#connected-english-preview .x-page-loading { margin:0 0 20px; min-height:1.65em; }
#connected-english-preview .x-teacher-sections { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:8px; min-width:0; margin:0 0 24px; border-bottom:1px solid var(--x-line); }
#connected-english-preview .x-teacher-sections[data-count="6"] { grid-auto-flow:row; grid-template-columns:repeat(3,minmax(0,1fr)); }
#connected-english-preview .x-teacher-sections > .x-button { min-width:0; min-height:var(--x-control-height); margin:0; padding:12px 8px; border:0; border-bottom:3px solid transparent; border-radius:0; background:transparent; color:var(--x-muted); font-size:var(--x-font-18); }
#connected-english-preview .x-teacher-sections > .x-button[aria-current="page"], #connected-english-preview .x-teacher-sections > .x-button[aria-pressed="true"] { border-bottom-color:var(--x-ink); color:var(--x-ink); font-weight:700; }
#connected-english-preview .x-study-source { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-bottom:24px; }
#connected-english-preview .x-study-source .x-button { margin:0; }
#connected-english-preview .x-study-source .x-button[aria-pressed="true"] { background:var(--x-gold); color:var(--x-on-gold); border-color:var(--x-on-gold); }
#connected-english-preview .x-record-subjects { margin-bottom:16px; }
#connected-english-preview .x-record-source { gap:10px; padding:16px; border:1px solid var(--x-line); border-left:3px solid var(--x-gold); border-radius:var(--x-radius); background:var(--x-soft); }
#connected-english-preview .x-record-source-label { grid-column:1 / -1; color:var(--x-muted); font-size:var(--x-font-18); font-weight:600; }
#connected-english-preview .x-feedback-filters { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:16px 0; }
#connected-english-preview .x-feedback-filters > .x-button { min-width:0; margin:0; padding-inline:8px; font-size:var(--x-font-18); }
#connected-english-preview .x-feedback-filters > .x-button[aria-pressed="true"] { background:var(--x-gold); border-color:var(--x-on-gold); color:var(--x-on-gold); }
/* Align the account bar and navigation with the centered reading column. */
#connected-english-preview .x-header, #connected-english-preview .x-nav { padding-inline:max(var(--x-content-gutter), calc((100% - 840px) / 2 + var(--x-content-gutter))); }
#connected-english-preview[data-screen="login"] .x-content, #connected-english-preview[data-screen="setup"] .x-content, #connected-english-preview[data-screen="password"] .x-content, #connected-english-preview[data-screen="recover-password"] .x-content, #connected-english-preview[data-screen="change-password"] .x-content { max-width:560px; }
#connected-english-preview .x-row > *, #connected-english-preview .x-header > * { min-width:0; max-width:100%; overflow-wrap:anywhere; }
#connected-english-preview input, #connected-english-preview select, #connected-english-preview textarea { min-width:0; max-width:100%; }
#connected-english-preview input::placeholder, #connected-english-preview textarea::placeholder { color:var(--x-muted); opacity:1; }
/* Clear title, content and supporting-text hierarchy. */
#connected-english-preview h2 { margin:0 0 20px; font-size:var(--x-heading); line-height:1.4; font-weight:600; letter-spacing:-.02em; }
#connected-english-preview h3 { margin:0 0 16px; font-size:var(--x-subheading); line-height:1.5; font-weight:600; }
#connected-english-preview h4 { margin:0 0 12px; font-size:var(--x-body); line-height:1.6; font-weight:600; }
#connected-english-preview h2, #connected-english-preview h3, #connected-english-preview h4 { word-break:keep-all; overflow-wrap:anywhere; }
#connected-english-preview strong { font-weight:600; }
#connected-english-preview p { margin:12px 0; word-break:keep-all; overflow-wrap:anywhere; }
#connected-english-preview .x-title { margin-bottom:20px; }
#connected-english-preview .x-hint { margin:12px 0; color:var(--x-muted); font-size:var(--x-font-17); line-height:1.65; word-break:keep-all; overflow-wrap:anywhere; }
#connected-english-preview .x-metric { color:var(--x-ink); font-size:var(--x-body); font-weight:600; font-variant-numeric:tabular-nums; }
#connected-english-preview .x-section { margin-top:var(--x-section-gap); padding-top:28px; border-top:1px solid var(--x-line); }
#connected-english-preview .x-summary, #connected-english-preview .x-answer { margin:24px 0; padding:var(--x-panel-padding); border:1px solid var(--x-line); border-radius:var(--x-radius-lg); background:var(--x-soft); overflow-wrap:anywhere; }
#connected-english-preview .x-summary > strong { display:block; color:var(--x-ink); font-size:var(--x-emphasis); }
#connected-english-preview .x-summary p, #connected-english-preview .x-answer p { margin:8px 0; }
#connected-english-preview .x-summary > :first-child, #connected-english-preview .x-answer > :first-child { margin-top:0; }
#connected-english-preview .x-summary > :last-child, #connected-english-preview .x-answer > :last-child { margin-bottom:0; }
#connected-english-preview .x-answer { box-shadow:inset 4px 0 0 var(--x-gold); }
#connected-english-preview .x-question { color:var(--x-ink); font-size:var(--x-heading); font-weight:600; line-height:1.65; }
#connected-english-preview .x-answer-label { color:var(--x-ink); font-size:var(--x-font-17); font-weight:600; }
#connected-english-preview .x-english { color:var(--x-ink); font-size:var(--x-emphasis); line-height:1.7; white-space:pre-wrap; word-break:normal; overflow-wrap:anywhere; }
/* Shared forms and actions; gold marks the primary action. */
#connected-english-preview .x-button { display:block; width:100%; min-height:var(--x-button-height); margin-top:12px; padding:13px 16px; border:1px solid var(--x-control); border-radius:var(--x-radius); background:var(--x-surface); color:var(--x-accent); font:inherit; font-weight:600; line-height:1.5; word-break:keep-all; white-space:normal; overflow-wrap:anywhere; }
#connected-english-preview a.x-button { text-align:center; text-decoration:none; }
#connected-english-preview a.x-pronunciation-link { display:inline-flex; align-items:center; justify-content:center; width:auto; max-width:100%; min-height:48px; margin:8px 0 0; padding:9px 12px; font-size:var(--x-font-17); gap:6px; }
#connected-english-preview .x-answer-heading { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px 16px; min-width:0; margin-bottom:8px; }
#connected-english-preview .x-answer-heading > * { min-width:0; max-width:100%; margin:0; }
#connected-english-preview .x-answer-heading > .x-answer-label { margin:0; }
#connected-english-preview .x-answer-heading > a.x-pronunciation-link { flex:0 1 auto; margin:0 0 0 auto; }
#connected-english-preview .x-button:disabled, #connected-english-preview .x-button[aria-disabled="true"] { opacity:.55; cursor:default; }
#connected-english-preview .x-primary { background:var(--x-gold); color:var(--x-on-gold); border-color:var(--x-on-gold); }
#connected-english-preview .x-danger-button { border-color:var(--x-error); color:var(--x-error); }
#connected-english-preview .x-input { display:block; width:100%; min-height:var(--x-control-height); padding:12px 14px; border:1px solid var(--x-control); border-radius:var(--x-radius); background:var(--x-surface); color:var(--x-ink); font:inherit; line-height:1.65; }
#connected-english-preview select.x-input, #connected-english-preview #excel-import-gold .i-field select { padding-inline-end:44px; text-overflow:ellipsis; }
#connected-english-preview textarea.x-input { min-height:156px; resize:vertical; }
#connected-english-preview input.x-input[type="file"] { min-height:var(--x-control-height); padding:0; border:0; border-radius:0; background:transparent; color:var(--x-muted); font-size:var(--x-font-17); white-space:normal; }
#connected-english-preview input.x-input[type="file"]::file-selector-button { max-width:100%; min-height:var(--x-control-height); margin-right:12px; padding:12px 16px; border:1px solid var(--x-control); border-radius:var(--x-radius); background:var(--x-surface); color:var(--x-ink); font:inherit; font-size:var(--x-body); font-weight:600; white-space:normal; cursor:pointer; }
#connected-english-preview input.x-input[type="file"]:disabled::file-selector-button { background:var(--x-soft); color:var(--x-muted); cursor:default; }
#connected-english-preview .x-input[readonly] { background:var(--x-soft); }
#connected-english-preview .x-input:disabled { color:var(--x-muted); background:var(--x-soft); cursor:default; }
#connected-english-preview .x-input:focus, #connected-english-preview #student-picker:focus { border-color:var(--x-accent); }
#connected-english-preview .x-input[aria-invalid="true"], #connected-english-preview #excel-import-gold .i-field :is(input,textarea)[aria-invalid="true"] { border-color:var(--x-error); box-shadow:inset 0 0 0 1px var(--x-error); }
#connected-english-preview .x-label { display:block; margin:24px 0 10px; color:var(--x-ink); font-size:var(--x-font-18); font-weight:600; }
#connected-english-preview .x-content > .x-label:first-child { margin-top:0; }
#connected-english-preview .x-password-toggle, #connected-english-preview .x-login-help { display:block; margin-top:12px; }
#connected-english-preview .x-login-help { width:100%; margin-top:20px; text-align:center; }
#connected-english-preview .x-check { display:flex; align-items:center; gap:12px; min-height:52px; padding:12px 0; cursor:pointer; }
#connected-english-preview .x-check input { width:24px; height:24px; margin:0; flex:0 0 24px; accent-color:var(--x-accent); }
#connected-english-preview .x-check:has(input:disabled), #connected-english-preview .x-check input:disabled { cursor:default; }
#connected-english-preview .x-check input[aria-invalid="true"] { outline:2px solid var(--x-error); outline-offset:3px; }
#connected-english-preview .x-check span { min-width:0; word-break:keep-all; overflow-wrap:anywhere; }
#connected-english-preview .x-check small { display:block; color:var(--x-muted); font-size:var(--x-font-17); }
#connected-english-preview summary { min-height:52px; padding:12px 0; color:var(--x-accent); font-weight:600; word-break:keep-all; overflow-wrap:anywhere; }
/* Disclosures keep the title on the left and one fixed action on the right. */
#connected-english-preview summary.x-disclosure { --x-disclosure-inset:0px; --x-disclosure-block:12px; position:relative; display:block; min-height:52px; padding:var(--x-disclosure-block) calc(var(--x-disclosure-inset) + 4em) var(--x-disclosure-block) var(--x-disclosure-inset); list-style:none; }
#connected-english-preview summary.x-disclosure::marker { content:""; }
#connected-english-preview summary.x-disclosure::-webkit-details-marker { display:none; }
#connected-english-preview summary.x-disclosure::after { content:"펼치기"; position:absolute; inset-inline-end:var(--x-disclosure-inset); top:50%; transform:translateY(-50%); color:var(--x-accent); font-size:var(--x-font-17); font-weight:600; line-height:1.5; white-space:nowrap; }
#connected-english-preview details[open] > summary.x-disclosure::after { content:"접기"; }
#connected-english-preview button.x-disclosure-toggle { flex:0 0 auto; min-width:3em; min-height:52px; margin:0; padding:12px 0; text-align:right; white-space:nowrap; }
#connected-english-preview .x-error { margin:16px 0; padding-left:12px; border-left:3px solid var(--x-error); color:var(--x-error); font-size:var(--x-font-18); font-weight:500; }
#connected-english-preview .x-error:empty { display:none; }
#connected-english-preview .x-form-error { margin:12px 0; }
#connected-english-preview .x-record { margin-top:24px; padding:24px 0; border-bottom:1px solid var(--x-line); overflow-wrap:anywhere; }
#connected-english-preview .x-record p { margin:10px 0; white-space:pre-wrap; }
#connected-english-preview .x-progress-name { margin:0; }
#connected-english-preview .x-progress-status { display:inline-block; padding:6px 12px; border:1px solid var(--x-line); border-radius:var(--x-radius-sm); background:var(--x-soft); color:var(--x-ink); font-size:var(--x-font-17); font-weight:600; word-break:keep-all; overflow-wrap:anywhere; }
#connected-english-preview .x-progress-status[data-state="complete"] { box-shadow:inset 4px 0 0 var(--x-gold); }
#connected-english-preview .x-progress-status[data-state="suspended"] { border-color:var(--x-error); }
#connected-english-preview .x-progress-course { background:var(--x-gold); border-color:var(--x-gold); color:var(--x-on-gold); }
#connected-english-preview .x-header-courses { display:inline-flex; align-items:center; gap:8px; flex:0 0 auto; }
#connected-english-preview .x-header-courses .x-progress-status { flex:0 0 auto; white-space:nowrap; overflow-wrap:normal; }
#connected-english-preview .x-record .x-answer { margin:16px 0; }
#connected-english-preview .x-track { height:8px; margin:16px 0 28px; background:var(--x-line); border-radius:8px; }
#connected-english-preview .x-fill { height:100%; background:var(--x-gold); border-radius:8px; box-shadow:inset 0 0 0 1px var(--x-ink); }
/* Every activity uses the same numbered instruction cards. */
#connected-english-preview .x-study-help { margin:0 0 24px; border:1px solid var(--x-line); border-radius:var(--x-radius-lg); background:var(--x-surface); }
#connected-english-preview .x-study-help > summary { --x-disclosure-inset:var(--x-panel-padding); --x-disclosure-block:16px; }
#connected-english-preview .x-study-guide { padding:8px var(--x-panel-padding) var(--x-panel-padding); }
#connected-english-preview .x-guide-steps { display:grid; gap:16px; margin:0; padding:0; list-style:none; }
#connected-english-preview .x-guide-step { display:grid; grid-template-columns:36px minmax(0,1fr); align-items:start; gap:12px; padding:20px; border:1px solid var(--x-line); border-radius:var(--x-radius-lg); }
#connected-english-preview .x-guide-step-number { display:grid; place-items:center; width:36px; height:36px; border-radius:50%; background:var(--x-gold); color:var(--x-on-gold); font-weight:600; line-height:1; }
#connected-english-preview .x-guide-step-body { min-width:0; }
#connected-english-preview .x-guide-steps :is(h3,h4) { margin:0 0 8px; font-size:var(--x-emphasis); line-height:1.5; }
#connected-english-preview .x-guide-steps p { margin:0; }
#connected-english-preview .x-guide-ratings { margin:16px 0 0; padding:0; }
#connected-english-preview .x-guide-ratings > div { display:grid; grid-template-columns:3.2em minmax(0,1fr); gap:12px; padding:12px 0; }
#connected-english-preview .x-guide-ratings > div + div { border-top:1px solid var(--x-line); }
#connected-english-preview .x-guide-ratings dt { font-weight:600; }
#connected-english-preview .x-guide-ratings dd { margin:0; word-break:keep-all; overflow-wrap:anywhere; }
#connected-english-preview .x-guide-note { margin:16px 0 0; }
/* Calendar uses gold for completion, an outline for the selected date. */
#connected-english-preview .x-calendar { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:6px; margin:20px 0; }
#connected-english-preview .x-calendar > span { margin:0; padding:8px 0; text-align:center; color:var(--x-muted); font-size:var(--x-font-15); font-weight:600; }
#connected-english-preview .x-day { min-width:0; min-height:80px; padding:8px 3px; border:1px solid var(--x-line); border-radius:var(--x-radius-sm); color:var(--x-ink); background:var(--x-surface); font:inherit; font-size:var(--x-font-16); line-height:1.5; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
#connected-english-preview .x-day small { display:block; margin-top:4px; color:inherit; font-size:var(--x-font-12); overflow-wrap:anywhere; }
#connected-english-preview .x-day[data-complete="true"] { background:var(--x-gold); color:var(--x-on-gold); border-color:var(--x-control); }
#connected-english-preview .x-day[data-active="true"] { outline:2px solid var(--x-ink); outline-offset:1px; }
#connected-english-preview .x-day:disabled { color:var(--x-muted); background:var(--x-soft); cursor:default; }
#connected-english-preview .x-nav button:focus-visible, #connected-english-preview .x-day:focus-visible { outline:3px solid var(--x-accent); outline-offset:3px; box-shadow:0 0 0 3px var(--x-gold); }
#connected-english-preview #student-picker-field { width:100%; max-width:840px; margin:0 auto; padding:24px var(--x-content-gutter) 0; }
#connected-english-preview #student-picker-field .x-label { margin:0 0 10px; }
#connected-english-preview #student-picker { display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%; min-height:var(--x-control-height); padding:12px 14px; border:1px solid var(--x-control); border-radius:var(--x-radius); background:var(--x-surface); color:var(--x-ink); font:inherit; line-height:1.65; text-align:left; }
#connected-english-preview #student-picker-current { min-width:0; overflow-wrap:anywhere; }
#connected-english-preview #student-picker-action { flex:0 0 auto; font-size:var(--x-font-17); font-weight:600; white-space:nowrap; }
#connected-english-preview #student-picker:disabled { color:var(--x-muted); cursor:default; }
#connected-english-preview #student-picker:disabled #student-picker-action { display:none; }
#connected-english-preview #student-picker[aria-expanded="true"] { border-bottom-left-radius:0; border-bottom-right-radius:0; }
#connected-english-preview #student-picker-panel { width:100%; padding:14px; border:1px solid var(--x-control); border-top:0; border-radius:0 0 var(--x-radius) var(--x-radius); background:var(--x-surface); }
#connected-english-preview .x-student-search { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
#connected-english-preview .x-student-course-filters { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin:0 0 16px; }
#connected-english-preview .x-student-course-filters .x-button { min-width:0; min-height:48px; margin:0; padding:10px 8px; font-size:var(--x-font-18); }
#connected-english-preview .x-student-course-filters .x-button[aria-pressed="true"] { border-color:var(--x-control); background:var(--x-gold); color:var(--x-on-gold); }
@media (max-width:420px) {
#connected-english-preview .x-student-course-filters { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
#connected-english-preview .x-student-search .x-input { flex:1 1 12em; width:auto; min-width:0; }
#connected-english-preview .x-student-search .x-text-button { flex:0 0 auto; }
#connected-english-preview #student-search-status { margin:12px 0; }
#connected-english-preview #student-results { max-height:320px; max-height:min(40dvh,400px); overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scroll-padding:4px; padding:4px; }
#connected-english-preview .x-student-option { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 12px; width:100%; min-height:70px; padding:12px; border:1px solid transparent; border-radius:var(--x-radius-sm); background:var(--x-surface); color:var(--x-ink); font:inherit; line-height:1.5; text-align:left; overflow-wrap:anywhere; }
#connected-english-preview .x-student-option + .x-student-option { margin-top:4px; }
#connected-english-preview .x-student-option-name { grid-column:1; font-weight:600; }
#connected-english-preview .x-student-option-id { grid-column:1; font-size:var(--x-font-17); color:var(--x-muted); }
#connected-english-preview .x-student-option-selected { grid-column:2; grid-row:1 / 3; align-self:center; font-size:var(--x-font-17); font-weight:600; white-space:nowrap; }
#connected-english-preview .x-student-option[aria-selected="true"] { box-shadow:inset 4px 0 0 var(--x-gold); background:var(--x-soft); }
#connected-english-preview .x-student-option[data-active="true"] { border-color:var(--x-accent); outline:1px solid var(--x-accent); }
#connected-english-preview .x-app-status { width:100%; max-width:840px; margin:0 auto; padding:0 var(--x-content-gutter); }
#connected-english-preview .x-app-status:not(:empty) { padding:16px var(--x-content-gutter) 0; }
#connected-english-preview .x-app-status.x-error:not(:empty) { margin-top:16px; border-left:0; }
#connected-english-preview .x-content #student-picker-field { max-width:none; margin:0 0 24px; padding:0; }
#connected-english-preview .x-content .x-app-status { max-width:none; margin:0; padding:0; }
#connected-english-preview .x-content .x-app-status:not(:empty) { margin-bottom:16px; }
#connected-english-preview .x-content .x-app-status.x-error:not(:empty) { margin-top:0; padding-left:12px; border-left:3px solid var(--x-error); }
#connected-english-preview .x-sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
@media (hover:hover) {
#connected-english-preview .x-button:not(:disabled):not([aria-disabled="true"]):not(.x-primary):not(.x-danger-button):not([aria-pressed="true"]):not([aria-current]):hover, #connected-english-preview .x-nav button:not(:disabled):not([aria-current="page"]):hover { background:var(--x-soft); border-color:var(--x-accent); color:var(--x-ink); }
#connected-english-preview .x-danger-button:not(:disabled):hover { background:var(--x-soft); border-color:var(--x-error); color:var(--x-error); }
#connected-english-preview .x-text-button:not(:disabled):hover { text-decoration:underline; }
#connected-english-preview input.x-input[type="file"]:not(:disabled)::file-selector-button:hover { background:var(--x-soft); border-color:var(--x-accent); }
#connected-english-preview .x-primary:not(:disabled):hover { box-shadow:inset 0 0 0 1px var(--x-on-gold); }
#connected-english-preview .x-day:not(:disabled):hover { border-color:var(--x-accent); }
#connected-english-preview .x-student-option:hover { background:var(--x-soft); border-color:var(--x-control); }
}
@media (prefers-color-scheme:dark) {
body { background:#111111; }
#connected-english-preview { --x-surface:#1C1C1C; --x-ink:#F5F5F5; --x-muted:#C2C2C2; --x-line:#444444; --x-control:#929292; --x-accent:#F5F5F5; --x-soft:#282828; --x-error:#FFB4B4; }
}
@media(max-width:600px) {
#connected-english-preview { --x-content-gutter:20px; --x-panel-padding:20px; padding:12px 8px; }
#connected-english-preview .x-app { border-radius:18px; }
#connected-english-preview .x-content { padding-top:28px; padding-bottom:32px; }
#connected-english-preview .x-teacher-sections, #connected-english-preview .x-teacher-sections[data-count="6"] { grid-auto-flow:row; grid-template-columns:repeat(2,minmax(0,1fr)); }
#connected-english-preview .x-nav[data-role="teacher"] { grid-template-columns:repeat(2,minmax(0,1fr)); }
#connected-english-preview .x-nav[data-role="learner"] { grid-template-columns:repeat(2,minmax(0,1fr)); }
#connected-english-preview .x-calendar { gap:4px; }
}
@media(max-width:400px) {
#connected-english-preview { --x-content-gutter:16px; --x-panel-padding:16px; padding:0; }
#connected-english-preview .x-app { min-height:100vh; border:0; border-radius:0; box-shadow:none; }
#connected-english-preview .x-header { gap:20px; padding-top:12px; padding-bottom:12px; }
#connected-english-preview .x-nav { gap:6px; padding-top:12px; padding-bottom:12px; }
#connected-english-preview .x-calendar { gap:3px; }
#connected-english-preview .x-guide-step { grid-template-columns:30px minmax(0,1fr); gap:10px; padding:16px 12px; }
#connected-english-preview .x-guide-step-number { width:30px; height:30px; }
}
/* Recovery is separate from everyday sign-in and password changes. */
#connected-english-preview .x-recovery-fields { min-width:0; margin:0; padding:0; border:0; }
#connected-english-preview textarea.x-recovery-key { min-height:104px; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:var(--x-body); letter-spacing:.03em; overflow-wrap:anywhere; }
/* A page-owned confirmation also works when browser dialogs are unavailable. */
#connected-english-preview .x-leave-backdrop{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px;background:rgb(0 0 0 / 40%)}
#connected-english-preview .x-leave-dialog{width:min(100%,480px);max-height:calc(100dvh - 40px);overflow:auto;padding:var(--x-panel-padding);background:var(--x-surface);color:var(--x-ink);border:1px solid var(--x-line);border-radius:var(--x-radius-lg);box-shadow:0 20px 60px rgb(0 0 0 / 18%)}
#connected-english-preview .x-leave-dialog h2{margin:0 0 12px;font-size:var(--x-subheading);line-height:1.5}
#connected-english-preview .x-leave-dialog p{margin:0 0 24px}
#connected-english-preview .x-leave-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px}
#connected-english-preview .x-leave-actions .x-button{width:100%;min-width:0;margin:0;white-space:normal}
@media(max-width:480px){#connected-english-preview .x-leave-actions{grid-template-columns:minmax(0,1fr)}}