:root {
  color-scheme: light;
  --ink: #1d2939;
  --muted: #667085;
  --line: #e7ebf1;
  --soft: #f6f8fb;
  --blue: #3d64e8;
  --blue-soft: #eef2ff;
  --green: #168a61;
  --green-soft: #e8f7f0;
  --orange: #bf7414;
  --orange-soft: #fff6e8;
  --red: #c44444;
  --shadow: 0 16px 42px rgba(30, 44, 75, .08);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --ink: #e8edf7;
  --muted: #9aa8bd;
  --line: #2d3a50;
  --soft: #111827;
  --blue-soft: #1d2b59;
  --green-soft: #14392f;
  --orange-soft: #3b2a17;
  --shadow: 0 18px 48px rgba(0, 0, 0, .28);
}

[hidden] { display: none !important; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: var(--soft); color: var(--ink); font-family: Inter, "Segoe UI", "Noto Sans KR", sans-serif; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.eyebrow { color: #8b97a9; font-size: 11px; font-weight: 800; letter-spacing: .13em; }
.error { color: var(--red); font-size: 13px; margin: 0; }
.login-shell { align-items: center; background: radial-gradient(circle at 20% 10%, #e9efff 0, transparent 38%), #f8faff; display: flex; justify-content: center; min-height: 100vh; }
.login-card { background: white; border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow); padding: 44px; width: 430px; }
.login-card h1 { font-size: 31px; letter-spacing: -.04em; line-height: 1.2; margin: 13px 0 12px; }
.login-card > .muted { line-height: 1.6; margin-bottom: 30px; }
.stack { display: grid; gap: 16px; }
label { color: #344054; display: grid; font-size: 13px; font-weight: 700; gap: 8px; }
input, textarea, select { background: white; border: 1px solid #d8dee8; border-radius: 10px; color: var(--ink); outline: none; padding: 11px 13px; }
input:focus, textarea:focus, select:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(61,100,232,.12); }
.wide { width: 100%; }
.primary, .secondary, .danger-outline, .ghost-button { border-radius: 9px; border: 0; font-weight: 750; padding: 10px 14px; transition: transform .15s, box-shadow .15s, background .15s; }
.primary { background: var(--blue); box-shadow: 0 7px 16px rgba(61,100,232,.2); color: white; }
.primary:hover { background: #3157d5; transform: translateY(-1px); }
.secondary { background: white; border: 1px solid #dbe2ed; color: #344054; }
.secondary:hover { background: var(--blue-soft); border-color: #b9c7f6; color: #294dc8; }
.danger-outline { background: white; border: 1px solid #efbcbc; color: var(--red); }
.ghost-button { background: transparent; color: #8a95a5; padding: 7px 0; text-align: left; }
.login-hint { color: #98a2b3; font-size: 11px; line-height: 1.6; margin: 25px 0 0; }
code { background: #f0f2f6; border-radius: 4px; color: #475467; padding: 2px 5px; }
.app-shell { display: grid; grid-template-columns: 230px minmax(0, 1fr); min-height: 100vh; }
.sidebar { background: #202c42; color: white; display: flex; flex-direction: column; padding: 29px 18px 20px; }
.brand { align-items: center; display: flex; font-size: 18px; font-weight: 800; gap: 10px; padding: 0 12px; }
.brand-mark { align-items: center; background: #5e7af1; border-radius: 10px; display: inline-flex; font-size: 15px; height: 30px; justify-content: center; width: 30px; }
.nav { display: grid; gap: 7px; margin-top: 60px; }
.nav-item { align-items: center; background: transparent; border: 0; border-radius: 9px; color: #aebbd1; display: flex; font-size: 14px; gap: 13px; padding: 12px 14px; text-align: left; }
.nav-item span { font-size: 17px; opacity: .9; width: 20px; }
.nav-item:hover, .nav-item.active { background: rgba(116, 143, 231, .2); color: white; }
.sidebar-bottom { border-top: 1px solid rgba(255,255,255,.1); margin-top: auto; padding: 18px 12px 0; }
.teacher-chip { align-items: center; display: flex; gap: 10px; }
.teacher-chip strong, .teacher-chip small { display: block; }
.teacher-chip strong { font-size: 13px; }
.teacher-chip small { color: #9eadc6; font-size: 11px; margin-top: 2px; }
.avatar { align-items: center; background: #d9e0ff; border-radius: 50%; color: #3d52bb; display: inline-flex; font-size: 12px; font-weight: 800; height: 33px; justify-content: center; width: 33px; }
.main-content { max-width: 1500px; padding: 35px 48px 60px; width: 100%; }
.topbar { align-items: flex-start; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; padding-bottom: 24px; }
.teacher-heading { min-width: 0; }
.teacher-greeting { color: var(--ink); font-size: 15px; font-weight: 700; margin-top: 9px; }
.class-picker { align-items: center; display: flex; gap: 13px; margin-top: 10px; }
.class-select-wrap { display: block; position: relative; }
.class-select-wrap select { appearance: none; background: #eef1f5; border: 1px solid #e4e8ee; border-radius: 10px; color: var(--ink); font-size: 25px; font-weight: 850; min-width: 178px; padding: 8px 37px 8px 14px; }
.class-select-wrap select:focus { border-color: #b7c5ee; box-shadow: 0 0 0 3px rgba(61,100,232,.1); }
.select-chevron { color: #7d899b; font-size: 18px; pointer-events: none; position: absolute; right: 13px; top: 50%; transform: translateY(-55%); }
.class-subject { color: var(--blue); font-size: 22px; letter-spacing: -.04em; }
.top-actions { align-items: center; display: flex; gap: 10px; padding-top: 3px; }
.hero-row { align-items: flex-start; display: flex; justify-content: space-between; margin: 38px 0 22px; }
h2 { font-size: 24px; letter-spacing: -.03em; margin: 0 0 7px; }
.hero-row p { margin: 0; }
.hero-stat { background: white; border: 1px solid var(--line); border-radius: 13px; min-width: 125px; padding: 13px 18px; text-align: right; }
.hero-stat strong, .hero-stat span { display: block; }
.hero-stat strong { font-size: 22px; }
.hero-stat span { color: var(--muted); font-size: 11px; margin-top: 3px; }
.notice { align-items: center; background: var(--orange-soft); border: 1px solid #f5deb2; border-radius: 12px; color: #895514; display: flex; gap: 11px; margin-bottom: 22px; padding: 12px 15px; }
.notice-icon { align-items: center; background: #f2b456; border-radius: 50%; color: white; display: inline-flex; font-weight: 900; height: 21px; justify-content: center; width: 21px; }
.notice .primary { margin-left: auto; padding: 8px 12px; }
.toolbar { align-items: center; display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; margin-bottom: 18px; }
.filters, .bulk-actions { display: flex; gap: 6px; }
.filter { background: transparent; border: 0; border-radius: 8px; color: var(--muted); font-size: 13px; padding: 8px 12px; }
.filter.active { background: var(--blue-soft); color: #3157d5; font-weight: 800; }
.bulk-actions { align-items: center; gap: 8px; }
.bulk-actions .secondary { font-size: 12px; padding: 8px 11px; }
.student-search { margin-left: auto; }
.student-search input { min-width: 180px; padding: 8px 11px; }
.selection-caption { color: var(--muted); font-size: 11px; white-space: nowrap; }
.student-grid { display: grid; gap: 15px; grid-template-columns: repeat(4, minmax(185px, 1fr)); }
.student-card { background: white; border: 1px solid var(--line); border-radius: 15px; cursor: pointer; display: flex; flex-direction: column; min-height: 180px; padding: 17px; position: relative; transition: box-shadow .15s, transform .15s; }
.student-card:hover { box-shadow: 0 10px 28px rgba(31, 49, 83, .1); transform: translateY(-2px); }
.student-card.selected { border-color: #5271e8; box-shadow: 0 0 0 2px rgba(82, 113, 232, .16); }
.student-selector { align-items: center; display: flex; height: 25px; justify-content: center; left: 10px; position: absolute; top: 10px; width: 25px; z-index: 1; }
.student-selector input { accent-color: #5271e8; height: 16px; margin: 0; width: 16px; }
.student-card .student-head { padding-left: 20px; }
.student-head { align-items: flex-start; display: flex; gap: 10px; justify-content: space-between; }
.student-head > div:first-child { min-width: 0; }
.student-name { font-size: 15px; font-weight: 800; }
.student-device { color: var(--muted); font-size: 11px; margin-top: 4px; overflow-wrap: anywhere; word-break: break-word; }
.status-dot { align-items: center; display: flex; font-size: 11px; gap: 4px; white-space: nowrap; }
.status-dot::before { background: #aab3c1; border-radius: 50%; content: ""; display: inline-block; height: 8px; width: 8px; }
.status-dot.online { color: var(--green); }
.status-dot.online::before { background: #36b37e; }
.status-dot.focus { color: #7553ce; }
.status-dot.focus::before { background: #8f6ad9; }
.status-dot.attention { color: var(--red); }
.status-dot.attention::before { background: var(--red); }
.student-activity { align-items: flex-start; display: flex; gap: 8px; margin-top: 24px; min-width: 0; }
.app-icon { align-items: center; background: #f0f3f8; border-radius: 9px; color: #60708a; display: inline-flex; font-size: 14px; height: 31px; justify-content: center; width: 31px; }
.activity-copy { flex: 1; min-width: 0; }
.activity-label { color: var(--muted); font-size: 10px; font-weight: 700; margin-bottom: 3px; }
.activity-app, .activity-domain { overflow-wrap: anywhere; word-break: break-word; white-space: normal; }
.activity-app { font-size: 13px; font-weight: 700; line-height: 1.35; }
.activity-domain { color: var(--muted); font-size: 10px; line-height: 1.4; margin-top: 3px; }
.student-meta { align-items: center; border-top: 1px solid #f0f2f5; color: var(--muted); display: flex; flex-wrap: wrap; font-size: 11px; gap: 7px 11px; margin-top: auto; padding-top: 11px; }
.policy-tag { background: #f1ecff; border-radius: 4px; color: #6e54b6; font-size: 10px; padding: 3px 5px; }
.empty-state { background: white; border: 1px dashed #cbd3df; border-radius: 15px; color: var(--muted); grid-column: 1 / -1; padding: 55px; text-align: center; }
.detail-pane { background: white; border-left: 1px solid var(--line); box-shadow: -12px 0 30px rgba(31,49,83,.06); min-width: 330px; max-height: 100vh; overflow-y: auto; padding: 34px 25px; position: fixed; right: 0; top: 0; width: 350px; min-height: 100vh; }
.close-button { background: transparent; border: 0; color: #98a2b3; font-size: 26px; position: absolute; right: 20px; top: 18px; }
.detail-title { font-size: 22px; margin: 22px 0 4px; }
.detail-status { margin-bottom: 28px; }
.detail-section { border-top: 1px solid var(--line); padding: 20px 0; }
.detail-section h3 { font-size: 12px; letter-spacing: .04em; margin: 0 0 15px; text-transform: uppercase; }
.detail-row { align-items: flex-start; display: flex; font-size: 13px; gap: 12px; justify-content: space-between; margin: 11px 0; }
.detail-row span:first-child { color: var(--muted); }
.detail-row strong, .detail-row code { min-width: 0; overflow-wrap: anywhere; text-align: right; white-space: normal; word-break: break-word; }
.table-card, .audit-list { background: white; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.activity-row { align-items: center; border-bottom: 1px solid #f0f2f5; display: grid; gap: 15px; grid-template-columns: 1.3fr 1fr 1fr 100px; padding: 15px 18px; }
.activity-row:last-child { border-bottom: 0; }
.activity-row.header { color: var(--muted); font-size: 11px; font-weight: 800; }
.activity-row div { font-size: 13px; }
.activity-row .sub { color: var(--muted); font-size: 11px; margin-top: 3px; }
.audit-item { align-items: center; border-bottom: 1px solid #f0f2f5; display: grid; gap: 15px; grid-template-columns: 150px 180px 1fr 90px; padding: 15px 18px; }
.audit-item:last-child { border-bottom: 0; }
.audit-time { color: var(--muted); font-size: 11px; }
.audit-action { font-size: 12px; font-weight: 800; }
.audit-reason { color: var(--muted); font-size: 12px; }
.result-pill { border-radius: 20px; font-size: 10px; font-weight: 800; justify-self: end; padding: 4px 8px; }
.result-pill.good { background: var(--green-soft); color: var(--green); }
.result-pill.bad { background: #fff0f0; color: var(--red); }
.result-pill.neutral { background: #f0f2f5; color: var(--muted); }
.settings-grid { display: grid; gap: 15px; grid-template-columns: repeat(3, 1fr); }
.settings-card { background: white; border: 1px solid var(--line); border-radius: 15px; padding: 22px; }
.password-card { grid-column: 1 / -1; grid-template-columns: repeat(3, 1fr); }
.password-card > div:first-child { grid-column: 1 / -1; }
.password-card > button { justify-self: start; }
.password-card > .error { grid-column: 1 / -1; }
.password-card.compact-setting { align-items: center; display: flex; gap: 16px; justify-content: space-between; }
.password-card.compact-setting > div:first-child { flex: 1; }
.password-card.compact-setting h3 { margin-top: 8px; }
.password-card.compact-setting > button { flex: 0 0 auto; }
.password-card.compact-setting > span { flex: 0 1 240px; text-align: right; }
.settings-icon { color: var(--blue); font-size: 20px; }
.settings-card h3 { font-size: 15px; margin: 19px 0 8px; }
.settings-card p { color: var(--muted); font-size: 12px; line-height: 1.65; margin: 0; }
.command-dialog { border: 0; border-radius: 17px; box-shadow: 0 24px 80px rgba(20, 31, 54, .25); padding: 28px; width: 430px; }
.command-dialog::backdrop { background: rgba(20, 31, 54, .35); }
.dialog-heading h2 { margin-top: 8px; }
.dialog-copy { font-size: 12px; line-height: 1.6; margin: -2px 0 0; }
.dialog-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 6px; }
.enrollment-dialog { width: 560px; }
.optional-label { color: var(--muted); font-size: 10px; font-weight: 500; margin-left: 5px; }
.enrollment-result { align-items: center; background: #f7f9ff; border: 1px solid #dfe6fb; border-radius: 13px; display: grid; gap: 13px; grid-template-columns: 38px 1fr; padding: 16px; }
.enrollment-result p { font-size: 11px; margin: 4px 0 0; }
.success-mark { align-items: center; background: var(--green); border-radius: 50%; color: white; display: flex; font-size: 18px; font-weight: 900; height: 34px; justify-content: center; width: 34px; }
.enrollment-code-box { align-items: center; background: white; border: 1px solid #dbe3f3; border-radius: 11px; display: grid; gap: 7px; grid-column: 1 / -1; grid-template-columns: auto 1fr auto; padding: 10px 12px; }
.enrollment-code-box span { color: var(--muted); font-size: 11px; font-weight: 750; }
.enrollment-code-box strong { color: var(--blue); font-size: 23px; letter-spacing: .18em; text-align: center; }
.enrollment-code-box .secondary { font-size: 11px; padding: 7px 9px; }
.enrollment-steps { display: grid; gap: 9px 10px; grid-column: 1 / -1; grid-template-columns: 25px 1fr; margin-top: 5px; }
.enrollment-steps span { align-items: center; background: var(--blue-soft); border-radius: 50%; color: var(--blue); display: flex; font-size: 11px; font-weight: 900; height: 23px; justify-content: center; width: 23px; }
.enrollment-steps p { color: #475467; font-size: 12px; line-height: 1.5; margin: 1px 0 0; }
.command-preview { background: #202c42; border-radius: 8px; color: #e8edff; display: block; font-size: 11px; grid-column: 1 / -1; line-height: 1.55; overflow-wrap: anywhere; padding: 12px; }
.code-toolbar { align-items: center; display: flex; gap: 12px; justify-content: space-between; margin: -5px 0 18px; }
.code-toolbar .student-search { margin-left: 0; }
.code-toolbar .student-search input { min-width: 260px; }
.student-codes-list { display: grid; gap: 18px; }
.student-code-group { background: white; border: 1px solid var(--line); border-radius: 15px; overflow: hidden; }
.student-code-group-heading { align-items: center; background: var(--blue-soft); display: flex; justify-content: space-between; padding: 16px 19px; }
.student-code-group-heading h3 { font-size: 18px; letter-spacing: -.03em; margin: 5px 0 0; }
.class-subject-small { color: var(--blue); font-size: 12px; font-weight: 750; }
.student-code-grid { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 13px; }
.student-code-card { border: 1px solid var(--line); border-radius: 11px; padding: 13px; }
.student-code-student { align-items: center; display: flex; gap: 9px; }
.student-code-student .avatar { flex: 0 0 31px; height: 31px; width: 31px; }
.student-code-student strong, .student-code-student small { display: block; }
.student-code-student strong { font-size: 13px; }
.student-code-student small { color: var(--muted); font-size: 10px; margin-top: 3px; }
.student-code-value { align-items: center; background: var(--soft); border-radius: 8px; display: flex; gap: 8px; justify-content: space-between; margin-top: 12px; padding: 8px 9px; }
.student-code-value code { background: transparent; color: var(--blue); font-size: 19px; font-weight: 850; letter-spacing: .16em; padding: 0; }
.code-copy-button { font-size: 10px; padding: 6px 8px; }
.student-code-meta { align-items: center; color: var(--muted); display: flex; font-size: 10px; justify-content: space-between; margin-top: 8px; }
.code-reissue-button { color: var(--red); font-size: 10px; padding: 0; }
.admin-grant-form { align-items: end; background: white; border: 1px solid var(--line); border-radius: 14px; display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr) auto; margin-bottom: 18px; padding: 16px; }
.admin-grant-form label { min-width: 0; }
.admin-grant-form .error { grid-column: 1 / -1; }
.admin-list { background: white; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.admin-list-heading { align-items: center; background: var(--soft); border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; padding: 13px 16px; }
.pending-heading { border-top: 1px solid var(--line); }
.admin-row { align-items: center; border-bottom: 1px solid var(--line); display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr) auto auto; padding: 13px 16px; }
.admin-row:last-child { border-bottom: 0; }
.admin-row strong, .admin-row small { display: block; }
.admin-row strong { font-size: 13px; }
.admin-row small { color: var(--muted); font-size: 10px; margin-top: 3px; }
.admin-badge { background: var(--soft); border-radius: 20px; color: var(--muted); font-size: 10px; font-weight: 800; padding: 5px 8px; white-space: nowrap; }
.admin-badge.active { background: var(--green-soft); color: var(--green); }
.admin-row.pending { background: #fffaf0; }
.admin-remove-button { color: var(--red); font-size: 10px; padding: 5px 0; }
.danger-action { background: #fff4f4; border: 1px solid #f2c7c7; border-radius: 9px; color: var(--red); font-weight: 750; padding: 10px 14px; }
.sr-only { clip: rect(0, 0, 0, 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; white-space: nowrap; width: 1px; }
.toast { background: #25334d; border-radius: 8px; bottom: 25px; box-shadow: var(--shadow); color: white; font-size: 13px; left: 50%; opacity: 0; padding: 11px 16px; pointer-events: none; position: fixed; transform: translate(-50%, 12px); transition: opacity .2s, transform .2s; z-index: 10; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 1250px) { .main-content { padding-left: 30px; padding-right: 30px; } .student-grid { grid-template-columns: repeat(3, minmax(185px, 1fr)); } }

/* Public landing and account experience */
body { min-width: 320px; }
.landing-page { background: #fbfcff; min-height: 100vh; overflow: hidden; }
.landing-nav, .landing-hero, .landing-section, .principles-section, .landing-cta, .landing-footer { margin: 0 auto; max-width: 1240px; }
.landing-nav { align-items: center; display: flex; justify-content: space-between; padding: 27px 34px; }
.landing-brand { align-items: center; color: var(--ink); display: inline-flex; font-size: 18px; font-weight: 850; gap: 10px; text-decoration: none; }
.landing-links { display: flex; gap: 32px; margin-left: 95px; }
.landing-links a, .text-link { color: #667085; font-size: 13px; font-weight: 650; text-decoration: none; }
.landing-links a:hover, .text-link:hover { color: var(--blue); }
.landing-hero { align-items: center; display: grid; gap: 66px; grid-template-columns: .84fr 1.16fr; min-height: 620px; padding: 48px 34px 94px; }
.hero-copy { position: relative; z-index: 1; }
.hero-copy h1 { color: #18243a; font-size: clamp(42px, 5vw, 68px); letter-spacing: -.07em; line-height: 1.08; margin: 18px 0 24px; }
.hero-copy h1 em, .principles-copy h2 em { color: var(--blue); font-style: normal; }
.hero-copy > p { color: #667085; font-size: 16px; line-height: 1.85; margin: 0; max-width: 480px; }
.landing-actions { align-items: center; display: flex; gap: 23px; margin-top: 34px; }
.landing-actions .primary, .landing-cta .primary { font-size: 13px; padding: 14px 18px; }
.landing-actions .primary span, .landing-cta .primary span, .principles-section .secondary span { font-size: 18px; margin-left: 14px; vertical-align: -1px; }
.text-link { padding: 8px 0; }
.text-link span { color: var(--blue); font-size: 18px; margin-left: 7px; }
.landing-trust { align-items: center; color: #98a2b3; display: flex; font-size: 11px; gap: 9px; margin-top: 47px; }
.trust-dot { background: #3eb786; border-radius: 50%; height: 7px; width: 7px; }
.trust-divider { background: #dce2eb; height: 14px; margin: 0 5px; width: 1px; }
.hero-visual { min-width: 0; perspective: 1000px; position: relative; }
.visual-glow { background: radial-gradient(circle, rgba(128,153,255,.27), transparent 68%); height: 550px; left: -30px; position: absolute; top: -65px; width: 650px; }
.console-preview { background: #fff; border: 1px solid #e2e7f3; border-radius: 18px; box-shadow: 0 30px 80px rgba(47, 70, 130, .15), 0 5px 12px rgba(47,70,130,.06); padding: 22px; position: relative; transform: rotate(2.5deg); z-index: 1; }
.preview-top, .preview-heading, .preview-toolbar, .preview-footer { align-items: center; display: flex; justify-content: space-between; }
.preview-brand { align-items: center; color: #273653; display: flex; font-size: 12px; gap: 7px; }
.mini-mark { align-items: center; background: #526ee5; border-radius: 6px; color: #fff; display: inline-flex; font-size: 10px; font-weight: 800; height: 22px; justify-content: center; width: 22px; }
.preview-pill, .preview-kicker { color: #a0aabd; font-size: 8px; font-weight: 800; letter-spacing: .11em; }
.preview-heading { align-items: flex-end; margin: 52px 2px 22px; }
.preview-heading strong { color: #24324e; display: block; font-size: 21px; letter-spacing: -.04em; margin-top: 7px; }
.preview-online { text-align: right; }.preview-online b { color: #24324e; display: block; font-size: 20px; }.preview-online small { color: #8d98aa; font-size: 9px; }
.preview-toolbar { border-bottom: 1px solid #edf0f5; color: #9ba6b8; font-size: 9px; gap: 10px; padding-bottom: 13px; }
.preview-filter { padding: 5px 8px; }.preview-filter.active { background: #eef2ff; border-radius: 5px; color: #506ce1; font-weight: 800; }.preview-search { border: 1px solid #edf0f5; border-radius: 5px; margin-left: auto; padding: 6px 10px; }
.preview-grid { display: grid; gap: 9px; grid-template-columns: repeat(2, 1fr); margin-top: 15px; }
.preview-student { border: 1px solid #edf0f5; border-radius: 9px; display: grid; gap: 8px; grid-template-columns: 25px 1fr auto; padding: 11px; }
.preview-student > div { min-width: 0; }.preview-student b { color: #33415e; display: block; font-size: 10px; }.preview-student small { color: #a4adbd; display: block; font-size: 7px; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.student-avatar { align-items: center; border-radius: 50%; color: #fff; display: inline-flex; font-size: 9px; font-weight: 800; height: 25px; justify-content: center; width: 25px; }.student-avatar.blue { background: #6d86eb; }.student-avatar.violet { background: #9b7be2; }.student-avatar.orange { background: #e5a664; }.student-avatar.green { background: #59b28d; }
.preview-status { color: #9ea8b7; font-size: 7px; white-space: nowrap; }.preview-status::before { background: #b8c0cb; border-radius: 50%; content: ""; display: inline-block; height: 5px; margin-right: 3px; width: 5px; }.preview-status.online { color: #2c9a70; }.preview-status.online::before { background: #49bf8b; }.preview-status.focus { color: #8063c7; }.preview-status.focus::before { background: #a282dc; }
.preview-app { align-items: center; color: #56637b; display: flex; font-size: 8px; gap: 5px; grid-column: 1 / -1; }.preview-app small { margin: 0 0 0 auto; }.muted-card { opacity: .67; }
.preview-footer { border-top: 1px solid #edf0f5; color: #42a67f; font-size: 8px; margin-top: 17px; padding-top: 14px; }.preview-footer button { background: #f0f3ff; border: 0; border-radius: 5px; color: #506ce1; font-size: 8px; font-weight: 800; padding: 7px 9px; }
.landing-section { padding: 65px 34px 92px; }.section-intro { margin-bottom: 30px; }.section-intro h2, .landing-cta h2 { color: #23314c; font-size: 31px; letter-spacing: -.05em; margin: 12px 0 8px; }.section-intro p { color: #8a95a7; font-size: 13px; margin: 0; }
.feature-grid { display: grid; gap: 15px; grid-template-columns: repeat(3, 1fr); }.feature-card { background: #fff; border: 1px solid #e9edf4; border-radius: 14px; min-height: 255px; padding: 24px; position: relative; }.feature-card.highlighted { background: #f3f5ff; border-color: #dce3ff; }.feature-number { color: #c3cbd8; font-size: 10px; font-weight: 800; position: absolute; right: 24px; top: 26px; }.feature-icon { align-items: center; border-radius: 9px; display: inline-flex; font-size: 16px; height: 34px; justify-content: center; width: 34px; }.blue-icon { background: #eaf0ff; color: #5472e5; }.violet-icon { background: #eee9ff; color: #8969d4; }.green-icon { background: #e6f7f0; color: #38a47b; }.feature-card h3 { color: #2c3953; font-size: 16px; margin: 25px 0 9px; }.feature-card p { color: #7e8a9f; font-size: 12px; line-height: 1.7; margin: 0; max-width: 260px; }.feature-card a { bottom: 24px; color: #536fe1; font-size: 11px; font-weight: 800; position: absolute; text-decoration: none; }.feature-card a span { font-size: 15px; margin-left: 6px; }
.principles-section { align-items: center; border-top: 1px solid #edf0f5; display: grid; gap: 100px; grid-template-columns: 1fr 1fr; padding: 112px 34px; }.principles-copy h2 { color: #23314c; font-size: 35px; letter-spacing: -.06em; line-height: 1.2; margin: 13px 0 20px; }.principles-copy > p { color: #7d899b; font-size: 13px; line-height: 1.8; margin: 0 0 29px; max-width: 410px; }.principles-copy .secondary { font-size: 12px; padding: 12px 15px; }.principles-list { display: grid; gap: 28px; }.principles-list > div { align-items: flex-start; display: flex; gap: 15px; }.principle-check { align-items: center; background: #e9f7f1; border-radius: 50%; color: #37a57b; display: inline-flex; flex: 0 0 26px; font-size: 12px; font-weight: 900; height: 26px; justify-content: center; }.principles-list strong { color: #34415b; font-size: 14px; }.principles-list p { color: #8b96a7; font-size: 11px; line-height: 1.6; margin: 5px 0 0; }
.landing-cta { align-items: center; background: #232f48; border-radius: 17px; color: white; display: flex; justify-content: space-between; margin-bottom: 60px; padding: 36px 42px; }.landing-cta .eyebrow { color: #9facc6; }.landing-cta h2 { color: white; font-size: 24px; margin-bottom: 0; }.landing-cta .primary { background: #637ff0; }.landing-cta .primary:hover { background: #7390ff; }.landing-footer { border-top: 1px solid #edf0f5; color: #a1aaba; display: flex; font-size: 10px; justify-content: space-between; padding: 22px 34px 28px; }
.auth-shell { background: radial-gradient(circle at 0 0, #eef2ff 0, transparent 34%), #f9fbff; min-height: 100vh; }.auth-topbar { align-items: center; display: flex; justify-content: space-between; margin: 0 auto; max-width: 1240px; padding: 27px 34px; }.auth-topnote { color: #9aa5b6; font-size: 11px; }.auth-layout { align-items: center; display: grid; gap: 100px; grid-template-columns: 1fr 430px; margin: 0 auto; max-width: 980px; min-height: calc(100vh - 100px); padding: 42px 34px 80px; }.auth-copy h1 { color: #22304a; font-size: 50px; letter-spacing: -.07em; line-height: 1.1; margin: 18px 0 18px; }.auth-copy > p { color: #7e8b9e; font-size: 14px; line-height: 1.8; max-width: 360px; }.auth-benefits { color: #60708a; display: grid; font-size: 12px; gap: 12px; margin-top: 34px; }.auth-benefits span::first-letter { color: #4c6be3; }.auth-card { padding: 32px; width: 100%; }.auth-card-heading { align-items: flex-start; display: flex; justify-content: space-between; }.auth-card-heading h2 { color: #23314c; font-size: 25px; letter-spacing: -.05em; margin: 9px 0 0; }.auth-lock { align-items: center; background: #eef2ff; border-radius: 10px; color: #5873e2; display: inline-flex; height: 34px; justify-content: center; width: 34px; }.auth-tabs { border-bottom: 1px solid #edf0f5; display: flex; gap: 19px; margin: 25px 0 22px; }.auth-tab { background: transparent; border: 0; border-bottom: 2px solid transparent; color: #9aa5b5; font-size: 12px; font-weight: 800; padding: 0 2px 11px; }.auth-tab.active { border-color: var(--blue); color: var(--blue); }.auth-panel { min-height: 214px; }.form-row { display: flex; justify-content: flex-end; margin-top: -5px; }.inline-link { background: transparent; border: 0; color: #7181ba; font-size: 10px; padding: 0; }.inline-link:hover { color: var(--blue); }.google-button { align-items: center; background: #fff; border: 1px solid #d8dee8; border-radius: 9px; color: #344054; display: flex; font-size: 12px; font-weight: 750; gap: 10px; justify-content: center; padding: 11px 14px; width: 100%; }.google-button:hover { background: #fafbff; border-color: #b9c7f6; }.google-button:disabled, button:disabled { cursor: wait; opacity: .55; }.google-g { color: #4285f4; font-size: 17px; font-weight: 900; }.auth-divider { align-items: center; color: #b1bac8; display: flex; font-size: 10px; gap: 9px; margin: 17px 0; }.auth-divider::before, .auth-divider::after { background: #edf0f5; content: ""; flex: 1; height: 1px; }.auth-footnote { color: #9da7b6; font-size: 10px; line-height: 1.6; margin: 17px 0 0; text-align: center; }.auth-footnote.error { color: var(--red); }.auth-card .login-hint { margin: 16px 0 0; }.auth-card .primary { padding: 12px 14px; }
@media (max-width: 900px) { .landing-links { display: none; }.landing-hero { gap: 20px; grid-template-columns: 1fr; padding-top: 35px; }.hero-visual { margin: 5px auto 0; max-width: 630px; width: 100%; }.console-preview { transform: rotate(0); }.principles-section { gap: 50px; grid-template-columns: 1fr; }.auth-layout { gap: 45px; grid-template-columns: 1fr; max-width: 580px; }.auth-copy { text-align: center; }.auth-copy > p { margin-left: auto; margin-right: auto; }.auth-benefits { text-align: left; width: max-content; margin-left: auto; margin-right: auto; } }
@media (max-width: 620px) { .landing-nav, .landing-hero, .landing-section, .principles-section, .landing-footer, .auth-topbar { padding-left: 20px; padding-right: 20px; }.landing-nav { padding-top: 19px; }.landing-nav .secondary { padding: 8px 10px; }.hero-copy h1 { font-size: 43px; }.hero-copy > p { font-size: 14px; }.landing-trust { align-items: flex-start; flex-wrap: wrap; line-height: 1.5; }.feature-grid { grid-template-columns: 1fr; }.feature-card { min-height: 215px; }.principles-copy h2 { font-size: 30px; }.landing-cta { align-items: flex-start; flex-direction: column; gap: 22px; margin-left: 20px; margin-right: 20px; padding: 27px; }.landing-cta h2 { font-size: 21px; }.landing-footer { gap: 8px; flex-direction: column; }.auth-topnote { display: none; }.auth-layout { padding: 30px 20px 55px; }.auth-copy h1 { font-size: 39px; }.auth-card { padding: 25px 20px; }.preview-toolbar { overflow: hidden; }.preview-filter:nth-child(3), .preview-search { display: none; }.preview-grid { grid-template-columns: 1fr; }.preview-student:nth-child(n+3) { display: none; } }

/* Classroom operations workspace */
.icon-button { align-items: center; background: var(--blue-soft); border: 1px solid transparent; border-radius: 9px; color: var(--blue); display: inline-flex; font-size: 12px; font-weight: 800; gap: 5px; padding: 9px 11px; }
.icon-button:hover { border-color: #b9c7f6; }
.hero-actions { align-items: center; display: flex; gap: 13px; }
.hero-actions .primary { display: none; }
.class-metrics { display: grid; gap: 10px; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 20px; }
.metric-card { background: white; border: 1px solid var(--line); border-radius: 12px; min-height: 74px; padding: 11px 14px; }
.metric-card strong, .metric-card small, .metric-label { display: block; }
.metric-label { color: var(--muted); font-size: 11px; font-weight: 750; }
.metric-card strong { font-size: 22px; letter-spacing: -.04em; margin-top: 5px; }
.metric-card small { color: var(--muted); font-size: 10px; margin-top: 2px; }
.metric-online strong { color: var(--green); }
.metric-offline strong { color: var(--orange); }
.metric-focus strong { color: #7553ce; }
.metric-attention strong { color: #d05c39; }
.activity-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 15px; }
.activity-insights { display: flex; flex-wrap: wrap; gap: 9px; margin: 0 0 15px; }
.insight-item { align-items: center; background: var(--blue-soft); border-radius: 8px; color: var(--muted); display: inline-flex; font-size: 12px; gap: 5px; padding: 9px 12px; }
.insight-item strong { color: var(--ink); }
.insight-dot { background: #36b37e; border-radius: 50%; height: 8px; width: 8px; }
.insight-dot.warning { background: #e5a642; }
.insight-dot.focus { background: #8f6ad9; }
.quick-panel, .lesson-note-card { background: white; border: 1px solid var(--line); border-radius: 15px; padding: 18px 20px; }
.class-workbench { display: none; }
.quick-panel { align-items: center; display: flex; justify-content: space-between; }
.quick-panel h3 { font-size: 15px; margin: 8px 0 5px; }
.quick-panel p { color: var(--muted); font-size: 12px; margin: 0; }
.quick-actions { display: flex; flex-wrap: wrap; gap: 7px; justify-content: flex-end; }
.quick-actions .secondary { font-size: 11px; padding: 8px 10px; }
.lesson-note-card label { display: flex; justify-content: space-between; }
.lesson-note-card textarea { font-size: 12px; line-height: 1.5; margin-top: 10px; resize: vertical; }
.lesson-note-status { display: block; font-size: 10px; margin-top: 7px; }
.dialog-audience { background: var(--blue-soft); border-radius: 8px; color: var(--blue); font-size: 11px; margin: 0; padding: 9px 11px; }
.message-presets { align-items: center; display: flex; flex-wrap: wrap; gap: 6px; margin-top: -5px; }
.preset-button { background: var(--soft); border: 1px solid var(--line); border-radius: 7px; color: var(--muted); font-size: 10px; padding: 6px 8px; }
.preset-button:hover { background: var(--blue-soft); color: var(--blue); }
.theme-options { display: flex; gap: 7px; margin-top: 15px; }
.theme-options .secondary { font-size: 11px; padding: 7px 10px; }
.theme-options .secondary.active { background: var(--blue-soft); border-color: #aabbf3; color: var(--blue); font-weight: 850; }
.enrollment-dialog .dialog-actions { flex-wrap: wrap; }

/* Explicit dark palette keeps every authenticated view readable. */
html[data-theme="dark"] body { background: #111827; }
html[data-theme="dark"] .main-content { background: #111827; }
html[data-theme="dark"] .secondary,
html[data-theme="dark"] .student-card,
html[data-theme="dark"] .hero-stat,
html[data-theme="dark"] .metric-card,
html[data-theme="dark"] .quick-panel,
html[data-theme="dark"] .lesson-note-card,
html[data-theme="dark"] .settings-card,
html[data-theme="dark"] .table-card,
html[data-theme="dark"] .audit-list,
html[data-theme="dark"] .command-dialog,
html[data-theme="dark"] .google-button { background: #182235; border-color: #2d3a50; color: var(--ink); }
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select { background: #111a2b; border-color: #35445c; color: var(--ink); }
html[data-theme="dark"] .class-select-wrap select { background: #202b3d; border-color: #35445c; }
html[data-theme="dark"] .app-shell { background: #111827; }
html[data-theme="dark"] .activity-row,
html[data-theme="dark"] .audit-item,
html[data-theme="dark"] .student-meta { border-color: #2d3a50; }
html[data-theme="dark"] .empty-state { background: #182235; border-color: #40516c; }
html[data-theme="dark"] .app-icon { background: #243149; color: #b3c0d5; }
html[data-theme="dark"] .notice { border-color: #6d5126; color: #f2c777; }
html[data-theme="dark"] .dialog-copy,
html[data-theme="dark"] .enrollment-steps p { color: #aab6c9; }
html[data-theme="dark"] .enrollment-result { background: #1a2944; border-color: #354c7e; }
html[data-theme="dark"] .student-code-group,
html[data-theme="dark"] .admin-grant-form,
html[data-theme="dark"] .admin-list { background: #182235; border-color: #2d3a50; }
html[data-theme="dark"] .student-code-card { border-color: #2d3a50; }
html[data-theme="dark"] .student-code-group-heading { background: #1d2b59; }
html[data-theme="dark"] .student-code-value,
html[data-theme="dark"] .admin-list-heading { background: #111a2b; }
html[data-theme="dark"] .admin-row,
html[data-theme="dark"] .pending-heading { border-color: #2d3a50; }
html[data-theme="dark"] .admin-row.pending { background: #302719; }
html[data-theme="dark"] .result-pill.bad { background: #43252b; }
html[data-theme="dark"] .result-pill.neutral { background: #263248; }
html[data-theme="dark"] .landing-page,
html[data-theme="dark"] .auth-shell { background: #111827; }
html[data-theme="dark"] .landing-brand,
html[data-theme="dark"] .auth-copy h1,
html[data-theme="dark"] .hero-copy h1,
html[data-theme="dark"] .section-intro h2 { color: #edf2fb; }
html[data-theme="dark"] .hero-copy > p,
html[data-theme="dark"] .landing-links a,
html[data-theme="dark"] .text-link { color: #aab6c9; }
html[data-theme="dark"] .landing-footer { border-color: #2d3a50; }
html[data-theme="dark"] .console-preview { background: #182235; border-color: #2d3a50; }

@media (max-width: 1000px) {
  .topbar { align-items: flex-start; flex-direction: column; gap: 18px; }
  .top-actions { flex-wrap: wrap; gap: 8px; }
  .student-grid { grid-template-columns: repeat(2, minmax(180px, 1fr)); }
}

@media (max-width: 820px) {
  .app-shell { display: block; }
  .sidebar { min-height: auto; padding: 15px 16px; }
  .nav { display: flex; gap: 4px; margin-top: 16px; overflow-x: auto; }
  .nav-item { flex: 1 0 auto; justify-content: center; padding: 9px 10px; }
  .sidebar-bottom { align-items: center; border-top: 0; display: flex; gap: 15px; justify-content: space-between; margin-top: 12px; padding: 12px 0 0; }
  .main-content { padding: 25px 18px 40px; }
  .class-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .toolbar { align-items: stretch; }
  .student-search { margin-left: 0; width: 100%; }
  .student-search input { width: 100%; }
  .bulk-actions { flex-wrap: wrap; }
  .code-toolbar { align-items: stretch; flex-direction: column; }
  .code-toolbar .student-search, .code-toolbar .student-search input { width: 100%; }
  .student-code-grid { grid-template-columns: 1fr; }
  .admin-grant-form { align-items: stretch; grid-template-columns: 1fr; }
  .activity-row { gap: 8px; grid-template-columns: 1.2fr 1fr; }
  .activity-row.header div:nth-child(n+3), .activity-row div:nth-child(n+3) { display: none; }
  .audit-item { gap: 8px; grid-template-columns: 1fr auto; }
  .audit-reason { grid-column: 1 / -1; }
  .detail-pane { min-width: 0; width: min(350px, 92vw); }
}

@media (max-width: 480px) {
  .student-grid { grid-template-columns: 1fr; }
  .enrollment-code-box { grid-template-columns: 1fr auto; }
  .enrollment-code-box strong { grid-column: 1 / -1; grid-row: 1; }
  .enrollment-code-box span { grid-row: 2; }
  .enrollment-code-box .secondary { grid-row: 2; }
  .top-actions .small { width: 100%; }
  .student-code-meta { align-items: flex-start; flex-direction: column; gap: 7px; }
  .admin-row { gap: 7px; grid-template-columns: minmax(0, 1fr) auto; }
  .admin-row .admin-remove-button { grid-column: 1 / -1; justify-self: start; }
}

/* Installable teacher console and account/legal settings. */
.landing-nav-actions { align-items: center; display: flex; gap: 8px; }
.legal-links { align-items: center; display: inline-flex; gap: 11px; }
.legal-links button { background: transparent; border: 0; color: inherit; cursor: pointer; font: inherit; padding: 0; }
.legal-links button:hover { color: var(--blue); }
.install-app-prompt { align-items: center; background: #fff; border: 1px solid #dfe5f1; border-radius: 16px; bottom: 20px; box-shadow: 0 18px 46px rgba(28, 48, 92, .2); display: grid; gap: 11px; grid-template-columns: 38px minmax(190px, 1fr) auto 26px; left: 50%; max-width: calc(100vw - 34px); padding: 11px 12px; position: fixed; transform: translateX(-50%); width: 470px; z-index: 30; }
.install-app-prompt[hidden] { display: none; }
.install-app-icon { align-items: center; background: linear-gradient(135deg, #7b91ff, #425bd4); border-radius: 11px; color: #fff; display: inline-flex; font-size: 17px; font-weight: 900; height: 38px; justify-content: center; width: 38px; }
.install-app-prompt strong, .install-app-prompt small { display: block; }
.install-app-prompt strong { color: var(--ink); font-size: 12px; }
.install-app-prompt small { color: var(--muted); font-size: 10px; margin-top: 2px; }
.install-app-prompt .primary { font-size: 11px; padding: 8px 13px; }
.consent-check { align-items: flex-start; color: var(--muted); display: flex; font-size: 11px; gap: 8px; line-height: 1.55; }
.consent-check input { accent-color: var(--blue); margin: 3px 0 0; min-height: auto; width: auto; }
.consent-check .inline-link { font-size: inherit; text-decoration: underline; }
.consent-stack { gap: 9px; }
.profile-card { margin-bottom: 14px; }
.profile-card h3, .legal-card h3 { font-size: 15px; margin: 8px 0 5px; }
.profile-card p, .legal-card p { color: var(--muted); font-size: 12px; line-height: 1.7; margin: 0; }
.profile-fields { display: grid; gap: 11px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.profile-fields label { min-width: 0; }
.legal-dialog { max-width: 690px; }
.legal-content { color: var(--muted); font-size: 12px; line-height: 1.8; max-height: min(58vh, 570px); overflow: auto; padding-right: 8px; }
.legal-content > p:first-child { color: #7f8ca3; font-size: 11px; margin-top: 0; }
.legal-content h3 { color: var(--ink); font-size: 13px; margin: 19px 0 5px; }
.legal-content p { margin: 0; }
.onboarding-dialog { max-width: 530px; }
.password-dialog, .account-lookup-dialog { max-width: 470px; }
.verification-row { align-items: center; display: flex; gap: 10px; }
.verification-row .secondary { flex: 0 0 auto; font-size: 12px; }
.verification-row .small { line-height: 1.45; }
.account-lookup-result { background: var(--green-soft); border-radius: 9px; color: var(--green); font-size: 12px; line-height: 1.55; margin: 0; padding: 10px 12px; }
html[data-theme="dark"] .account-lookup-result { background: #14392f; color: #83d6b0; }
html[data-theme="dark"] .install-app-prompt { background: #182235; border-color: #2d3a50; }
html[data-theme="dark"] .install-app-prompt strong, html[data-theme="dark"] .legal-content h3 { color: var(--ink); }
html[data-theme="dark"] .legal-content { color: #b7c3d7; }
html[data-theme="dark"] .legal-links button { color: #aab6c9; }

@media (max-width: 760px) {
  .profile-fields { grid-template-columns: 1fr; }
  .install-app-prompt { grid-template-columns: 38px minmax(0, 1fr) auto 22px; bottom: 13px; }
  .install-app-prompt small { display: none; }
}

.auth-tab { cursor: pointer; }

/* Focused teacher workspace: the daily decisions stay in the header and the
   admin-only provisioning work stays out of the class view. */
.school-name { color: var(--blue); font-size: 13px; font-weight: 800; letter-spacing: -.02em; margin-top: 13px; }
.school-name.unconfigured { color: var(--orange); }
.brand-area { display: grid; gap: 9px; }
.sidebar-console-label { color: #8e9bb3; font-size: 9px; font-weight: 850; letter-spacing: .14em; padding: 0 12px; }
.sidebar-school-name { color: #b6c2d8; font-size: 11px; overflow: hidden; padding: 0 12px; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-school-name.unconfigured { color: #e8bd79; }
.teacher-greeting { font-size: 24px; letter-spacing: -.045em; margin-top: 4px; }
.teacher-chip > div { min-width: 0; }
.teacher-chip small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 135px; }
.teacher-chip .admin-badge { display: inline-block; font-size: 9px; margin-top: 5px; padding: 3px 7px; }
.class-status-actions { align-items: center; display: flex; gap: 8px; }
.today-info { border-right: 1px solid var(--line); display: grid; gap: 3px; margin-right: 5px; padding-right: 15px; text-align: right; }
.today-info strong { font-size: 13px; }
.today-info span { color: var(--muted); font-size: 11px; white-space: nowrap; }
.class-status-actions .primary, .class-status-actions .secondary, .class-status-actions .danger-outline { font-size: 12px; padding: 10px 12px; white-space: nowrap; }
.class-metrics { gap: 9px; }
.metric-card { min-height: 69px; padding: 10px 13px; }
.metric-card strong { font-size: 20px; }
.metric-card small { font-size: 9px; }
.risk-tag { background: #fff1e8; border-radius: 5px; color: #b8582c; font-size: 10px; font-weight: 800; padding: 3px 5px; }
.risk-callout { background: #fff7ed; border: 1px solid #f4d3aa; border-radius: 10px; color: #9a5a1b; display: grid; gap: 3px; padding: 10px 11px; }
.risk-callout strong { font-size: 12px; }
.risk-callout span, .privacy-note { color: var(--muted); font-size: 11px; line-height: 1.5; }
.privacy-note { background: var(--soft); border-radius: 9px; padding: 9px 10px; }
.code-toolbar { align-items: end; flex-wrap: wrap; justify-content: flex-start; }
.code-toolbar > label { min-width: 110px; }
.code-toolbar .student-search { flex: 1 1 210px; }
.code-toolbar .student-search input { min-width: 0; width: 100%; }
.student-code-student { min-width: 0; }
.student-code-student .student-number { align-items: center; background: var(--blue-soft); border-radius: 7px; color: var(--blue); display: inline-flex; flex: 0 0 29px; font-size: 11px; font-weight: 850; height: 29px; justify-content: center; }
.student-code-student > div:last-child { min-width: 0; }
.admin-actions { display: flex; gap: 8px; }
.admin-actions button { white-space: nowrap; }
.admin-management-grid { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; margin-bottom: 18px; }
.operations-card { align-items: center; display: grid; gap: 16px; grid-template-columns: minmax(220px, 1fr) minmax(360px, 1.4fr) auto; margin-bottom: 18px; padding: 17px; }
.operations-card > div:first-child { min-width: 0; }
.operations-card h3 { margin-top: 8px; }
.operations-card > button { white-space: nowrap; }
.operations-status { display: grid; gap: 8px; min-width: 0; }
.operation-item { align-items: center; background: var(--soft); border: 1px solid var(--line); border-radius: 10px; display: flex; gap: 9px; min-width: 0; padding: 9px 10px; }
.operation-item > div { display: grid; gap: 2px; min-width: 0; }
.operation-item strong { font-size: 12px; }
.operation-item small { color: var(--muted); font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.operation-indicator { align-items: center; border-radius: 50%; display: inline-flex; flex: 0 0 22px; font-size: 12px; font-weight: 900; height: 22px; justify-content: center; }
.operation-indicator.ready { background: var(--green-soft); color: var(--green); }
.operation-indicator.pending { background: var(--orange-soft); color: var(--orange); }
.operation-state { font-size: 10px; font-weight: 800; margin-left: auto; white-space: nowrap; }
.operation-state.ready { color: var(--green); }
.operation-state.pending { color: var(--orange); }
.operations-unavailable { background: var(--orange-soft); border-radius: 10px; color: var(--orange); font-size: 11px; line-height: 1.5; padding: 10px; }
.compact-form { display: grid; gap: 13px; padding: 17px; }
.compact-form h3 { margin: 8px 0 5px; }
.compact-form > div:first-child p { max-width: 420px; }
.inline-fields { align-items: end; display: grid; gap: 8px; grid-template-columns: 100px 90px minmax(120px, 1fr); }
.inline-fields label { min-width: 0; }
.inline-fields button { white-space: nowrap; }
.roster-card .inline-fields { grid-template-columns: 1fr 1.2fr auto; }
.file-field input { font-size: 11px; padding: 9px; }
.school-picker { position: relative; }
.required-label { color: var(--red); font-size: 10px; margin-left: 5px; }
.school-results { background: var(--soft); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); left: 0; max-height: 220px; overflow: auto; position: absolute; right: 0; top: calc(100% + 5px); z-index: 8; }
.school-result { background: transparent; border: 0; border-bottom: 1px solid var(--line); display: grid; gap: 3px; padding: 10px 12px; text-align: left; width: 100%; }
.school-result:last-child { border-bottom: 0; }
.school-result:hover { background: var(--blue-soft); }
.school-result strong { color: var(--ink); font-size: 12px; }
.school-result small, .school-search-status { color: var(--muted); font-size: 10px; line-height: 1.45; }
.school-search-status { padding: 12px; }
html[data-theme="dark"] .school-results { background: #182235; }
html[data-theme="dark"] .school-result:hover { background: #1d2b59; }
html[data-theme="dark"] .risk-callout { background: #382b1d; border-color: #6d5126; color: #f2c777; }
html[data-theme="dark"] .risk-tag { background: #432d22; color: #f2a06c; }
html[data-theme="dark"] label { color: #c5cfdf; }

@media (max-width: 1000px) {
  .class-status-actions { align-items: flex-start; flex-wrap: wrap; }
  .today-info { text-align: left; }
  .admin-management-grid { grid-template-columns: 1fr; }
  .operations-card { grid-template-columns: 1fr; }
  .operations-card > button { justify-self: start; }
}

@media (max-width: 620px) {
  .teacher-greeting { font-size: 21px; }
  .class-status-actions { width: 100%; }
  .today-info { border-right: 0; flex: 1 1 100%; margin: 0; padding: 0 0 3px; }
  .today-info span { white-space: normal; }
  .admin-actions { width: 100%; }
  .admin-actions button { flex: 1; }
  .inline-fields, .roster-card .inline-fields { grid-template-columns: 1fr; }
  .password-card.compact-setting { align-items: stretch; flex-direction: column; }
  .password-card.compact-setting > span { flex-basis: auto; text-align: left; }
}

/* Header context and compact teacher identity */
.teacher-heading { align-items: flex-start; display: flex; flex: 1 1 auto; gap: 34px; justify-content: space-between; }
.teacher-heading-main { min-width: 0; }
.topbar .header-context { flex: 0 0 auto; margin: 30px 0 0 auto; }
.teacher-name-line { align-items: center; display: flex; gap: 6px; min-width: 0; }
.teacher-chip .admin-badge { display: inline-flex; font-size: 9px; margin: 0; padding: 3px 7px; }
.logout-button { color: #ed8585; font-size: 10px; padding: 6px 0 0; }
.logout-button:hover { color: #ffb0b0; }
.class-status-actions .primary, .class-status-actions .secondary, .class-status-actions .danger-outline { font-size: 14px; min-height: 45px; padding: 12px 19px; }

/* Student code directory */
.code-toolbar { align-items: center; }
.code-toolbar .student-code-permission { margin-right: auto; }
.grade-roster-group { background: white; border: 1px solid var(--line); border-radius: 15px; overflow: hidden; }
.grade-roster-group + .grade-roster-group { margin-top: 14px; }
.grade-roster-heading { align-items: center; background: var(--soft); border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; padding: 15px 18px; }
.grade-roster-heading h3 { font-size: 18px; letter-spacing: -.03em; margin: 5px 0 0; }
.roster-class-grid { display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 13px; }
.roster-class-card { appearance: none; background: white; border: 1px solid var(--line); border-radius: 11px; color: var(--ink); display: grid; gap: 5px; padding: 15px; text-align: left; transition: border-color .15s, box-shadow .15s, transform .15s; }
.roster-class-card:hover { border-color: #aabbf3; box-shadow: 0 8px 20px rgba(31, 49, 83, .08); transform: translateY(-1px); }
.roster-class-number { font-size: 19px; font-weight: 850; letter-spacing: -.04em; }
.roster-class-meta { color: var(--muted); font-size: 11px; }
.roster-class-action { color: var(--blue); font-size: 11px; font-weight: 800; margin-top: 7px; }
.admin-access-grid { align-items: start; display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 18px; }
.admin-access-grid .admin-grant-form { margin-bottom: 0; min-height: 100%; }

/* Printable roster dialog */
.student-roster-dialog { max-height: min(760px, calc(100vh - 28px)); width: min(780px, calc(100vw - 28px)); }
.student-roster-dialog:fullscreen, .student-roster-dialog.fullscreen-mode { border-radius: 0; height: 100vh; max-height: none; max-width: none; width: 100vw; }
.student-roster-dialog:fullscreen .student-roster-content, .student-roster-dialog.fullscreen-mode .student-roster-content { max-height: calc(100vh - 190px); }
.student-roster-content { min-height: 80px; overflow: auto; }
.student-roster-table-wrap { border: 1px solid var(--line); border-radius: 10px; overflow: auto; }
.student-roster-table { border-collapse: collapse; min-width: 590px; width: 100%; }
.student-roster-table th, .student-roster-table td { border-bottom: 1px solid var(--line); padding: 11px 13px; text-align: left; }
.student-roster-table th { background: var(--soft); color: var(--muted); font-size: 10px; font-weight: 800; }
.student-roster-table td { font-size: 12px; }
.student-roster-table tbody tr:last-child td { border-bottom: 0; }
.student-roster-table td:first-child { color: var(--blue); font-weight: 850; width: 66px; }
.student-roster-table td:nth-child(3) code { color: var(--blue); font-size: 15px; font-weight: 850; letter-spacing: .12em; }
.roster-row-actions { align-items: center; display: flex; gap: 8px; justify-content: flex-end; white-space: nowrap; }
.roster-code-copy { font-size: 10px; padding: 6px 8px; }
html[data-theme="dark"] .grade-roster-group,
html[data-theme="dark"] .roster-class-card { background: #182235; border-color: #2d3a50; }
html[data-theme="dark"] .grade-roster-heading { background: #111a2b; border-color: #2d3a50; }
html[data-theme="dark"] .roster-class-card:hover { border-color: #627ce2; }
html[data-theme="dark"] .student-roster-table-wrap { border-color: #2d3a50; }
html[data-theme="dark"] .student-roster-table th, html[data-theme="dark"] .student-roster-table td { border-color: #2d3a50; }
html[data-theme="dark"] .student-roster-table th { background: #111a2b; }

@media (max-width: 1000px) {
  .teacher-heading { gap: 18px; width: 100%; }
  .admin-access-grid { grid-template-columns: 1fr; }
  .roster-class-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .teacher-heading { flex-wrap: wrap; }
  .topbar .header-context { margin: 8px 0 0 auto; }
  .roster-class-grid { grid-template-columns: 1fr; }
  .class-status-actions .primary, .class-status-actions .secondary, .class-status-actions .danger-outline { flex: 1 1 auto; padding-left: 12px; padding-right: 12px; }
}

@media print {
  body.printing-roster > * { display: none !important; }
  body.printing-roster > #student-roster-dialog { background: white; box-shadow: none; display: block !important; height: auto; left: 0; margin: 0; max-height: none; max-width: none; position: static; top: 0; width: 100%; }
  body.printing-roster #student-roster-dialog form { display: block; }
  body.printing-roster #student-roster-dialog .dialog-actions { display: none; }
  body.printing-roster #student-roster-dialog .student-roster-content { max-height: none; overflow: visible; }
  body.printing-roster .student-roster-table { min-width: 0; }
}

/* Admin access targets are deliberately explicit: the identifier/search field
   owns the wide area and the action stays beside it for quick classroom use. */
.admin-grant-form { align-items: stretch; display: grid; gap: 12px; grid-template-columns: 1fr; }
.admin-grant-heading { display: grid; gap: 0; }
.admin-grant-heading h3 { margin-bottom: 5px; }
.admin-grant-tabs { border-bottom: 1px solid var(--line); display: flex; gap: 6px; }
.admin-grant-tab { background: transparent; border: 0; border-bottom: 2px solid transparent; color: var(--muted); font-size: 12px; font-weight: 800; padding: 8px 10px 9px; }
.admin-grant-tab.active { border-color: var(--blue); color: var(--blue); }
.admin-grant-panel { align-items: end; display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr) auto; }
.admin-grant-panel label { min-width: 0; }
.admin-grant-panel input { min-height: 47px; }
.admin-grant-panel .primary { min-height: 47px; min-width: 154px; }
.admin-grant-panel[hidden] { display: none; }
.student-admin-panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto; }
.student-admin-panel .privacy-note { grid-column: 1 / -1; margin: 0; }
.admin-grant-form > .error { min-height: 0; }

/* Date and weather share one compact header context; the weather label sits
   below its icon so the board view remains scannable from a distance. */
.topbar .header-context.today-info { align-items: center; display: flex; gap: 16px; }
.today-info strong { font-size: 18px; letter-spacing: -.025em; white-space: nowrap; }
.weather-info { align-items: center; display: inline-flex; flex-direction: column; gap: 1px; min-width: 66px; }
.weather-icon { font-size: 21px; line-height: 1; }
.weather-description { color: var(--ink) !important; font-size: 11px !important; font-weight: 750; line-height: 1.2; white-space: nowrap; }
.weather-temperature { color: var(--muted); font-size: 10px; line-height: 1.2; }

html[data-theme="dark"] .admin-grant-tab { color: #aab6c9; }
html[data-theme="dark"] .admin-grant-tab.active { color: #9fb1ff; }

@media (max-width: 760px) {
  .admin-grant-panel, .student-admin-panel { grid-template-columns: 1fr; }
  .admin-grant-panel .primary { width: 100%; }
  .topbar .header-context.today-info { gap: 11px; }
  .today-info strong { font-size: 16px; }
}

/* 0.5.13 classroom workspace — resilient cards, readable activity, and a
   familiar screen-thumbnail wall. All grids are allowed to shrink before
   native form controls can escape their card. */
.section-view,
.settings-card,
.compact-form,
.inline-fields,
.inline-fields > *,
.admin-grant-form,
.admin-grant-panel,
.admin-grant-panel > *,
.student-card,
.student-head,
.student-activity,
.activity-copy { min-width: 0; }

.compact-form input,
.compact-form select,
.compact-form button,
.admin-grant-panel input,
.admin-grant-panel select,
.admin-grant-panel button { max-width: 100%; }

.admin-management-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 560px), 1fr));
}

.admin-access-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr));
}

.inline-fields {
  grid-template-columns: minmax(82px, .75fr) minmax(72px, .65fr) minmax(0, 2fr);
}

.inline-fields input,
.inline-fields select,
.file-field input { min-width: 0; width: 100%; }

.roster-card .inline-fields {
  grid-template-columns: minmax(130px, .8fr) minmax(0, 1.2fr);
}

.roster-card .inline-fields button {
  grid-column: 1 / -1;
  width: 100%;
}

.student-admin-panel {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.student-admin-panel .primary,
.student-admin-panel .privacy-note { grid-column: 1 / -1; width: 100%; }

.teacher-greeting {
  font-size: clamp(27px, 2vw, 34px);
  line-height: 1.18;
}

.class-select-wrap select {
  font-size: clamp(17px, 1.35vw, 21px);
  min-width: 160px;
  padding-bottom: 9px;
  padding-top: 9px;
}

.class-subject { font-size: clamp(17px, 1.35vw, 20px); }

.topbar .header-context.today-info {
  align-items: center;
  border-right: 0;
  gap: 20px;
  margin-top: 24px;
  padding-right: 0;
}

.today-info strong { font-size: clamp(18px, 1.45vw, 23px); }
.weather-info { display: grid; gap: 1px 7px; grid-template-columns: auto auto; min-width: 104px; text-align: left; }
.weather-icon { font-size: 30px; grid-row: 1 / 3; }
.weather-description { font-size: 15px !important; line-height: 1.1; }
.weather-temperature { font-size: 13px; font-weight: 700; }

.student-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.student-card { min-height: 220px; overflow: hidden; }
.student-head { align-items: flex-start; }
.student-head .status-dot { flex: 0 0 auto; }
.student-activity { background: var(--soft); border-radius: 11px; margin-top: 18px; padding: 11px; }
.activity-label { color: var(--muted); font-size: 9px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.activity-app { color: var(--ink); font-size: 14px; line-height: 1.4; margin-top: 4px; }
.activity-domain { display: -webkit-box; font-size: 11px; line-height: 1.45; margin-top: 4px; overflow: hidden; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.student-meta { line-height: 1.35; }
.screen-wall-open { border-color: #9baded; color: var(--blue); font-weight: 850; }

.password-dialog { max-width: 410px; width: min(410px, calc(100vw - 28px)); }
.password-dialog form { gap: 11px; }
.password-dialog .dialog-copy { font-size: 11px; margin: -2px 0 2px; }
.password-dialog input { padding-bottom: 9px; padding-top: 9px; }
.password-dialog .verification-row { align-items: flex-start; flex-direction: column; gap: 6px; }

.screen-wall-dialog {
  height: min(820px, calc(100vh - 28px));
  max-height: none;
  max-width: none;
  padding: 0;
  width: min(1240px, calc(100vw - 28px));
}

.screen-wall-shell { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100%; }
.screen-wall-heading { align-items: flex-start; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; padding: 20px 22px 16px; }
.screen-wall-heading h2 { font-size: 25px; margin: 5px 0 3px; }
.screen-wall-heading p { font-size: 11px; margin: 0; }
.screen-wall-close { font-size: 24px; height: 38px; padding: 0; width: 38px; }
.screen-wall-grid { align-content: start; background: var(--soft); display: grid; gap: 13px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); overflow: auto; padding: 18px; }
.screen-tile { background: white; border: 1px solid var(--line); border-radius: 13px; box-shadow: 0 5px 16px rgba(30, 44, 75, .06); min-width: 0; overflow: hidden; }
.screen-frame-wrap { align-items: center; aspect-ratio: 16 / 9; background: #182235; display: flex; justify-content: center; overflow: hidden; }
.screen-frame-wrap img { display: block; height: 100%; object-fit: contain; width: 100%; }
.screen-frame-empty { color: #cad3e2; font-size: 12px; padding: 20px; text-align: center; }
.screen-tile-footer { align-items: center; display: flex; gap: 9px; justify-content: space-between; padding: 10px 12px; }
.screen-tile-footer > div { min-width: 0; }
.screen-tile-footer strong { display: block; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.screen-tile-footer small { color: var(--muted); display: block; font-size: 10px; margin-top: 2px; }
.screen-live-dot { color: var(--green); flex: 0 0 auto; font-size: 10px; font-weight: 850; }
.screen-wall-actions { align-items: center; border-top: 1px solid var(--line); display: flex; gap: 14px; justify-content: space-between; padding: 14px 18px; }
.screen-sharing-notice { color: var(--muted); font-size: 11px; line-height: 1.45; }

html[data-theme="dark"] .screen-tile { background: #182235; border-color: #2d3a50; }

@media (max-width: 1180px) {
  .admin-management-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .student-admin-panel { grid-template-columns: 1fr; }
  .student-admin-panel .primary,
  .student-admin-panel .privacy-note { grid-column: auto; }
  .topbar .header-context.today-info { margin-top: 8px; }
  .weather-icon { font-size: 26px; }
  .weather-description { font-size: 13px !important; }
  .screen-wall-grid { grid-template-columns: 1fr; padding: 12px; }
  .screen-wall-actions { align-items: stretch; flex-direction: column; }
  .screen-wall-actions button { width: 100%; }
}

@media (max-width: 520px) {
  .inline-fields,
  .roster-card .inline-fields { grid-template-columns: 1fr; }
  .roster-card .inline-fields button { grid-column: auto; }
  .student-grid { grid-template-columns: 1fr; }
}