:root {
  --ink: #24352e;
  --green: #285944;
  --green-hover: #1e4836;
  --mint: #edf3ee;
  --bg: #f6f7f5;
  --line: #e4e8e2;
  --muted: #647168;
  --white: #fff;
  --amber: #825811;
  --danger: #aa3836;
  --shadow: 0 1px 2px #20382a06, 0 0 0 1px #20382a0e;
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  font-size: 16px;
}

/* Colour scheme: follows the device, or the per-device choice in Fiók → Megjelenés (static/theme.js).
   Every fixed colour is paired as light-dark(light, dark) by scripts/dark_theme.py. The projected board,
   document pages and slides stay light (they stand for paper and the classroom board), and so does print. */
:root { color-scheme: light; }
@media (prefers-color-scheme: dark) { :root:not([data-theme=light]) { color-scheme: dark; } }
:root[data-theme=dark] { color-scheme: dark; }
.mt-projector-shell, .projector-page, .doc-page, .presentation-slide, .slide-show, .slide-thumb { color-scheme: light; }
@media print { :root, :root[data-theme] { color-scheme: light; } }
@supports (color: light-dark(#000, #fff)) { :root { --ink: light-dark(#24352e, #e8eeea); --green: light-dark(#285944, #9cc1a4); --green-hover: light-dark(#1e4836, #b5d3bc); --mint: light-dark(#edf3ee, #1f2d27); --bg: light-dark(#f6f7f5, #111816); --line: light-dark(#e4e8e2, #2c3a34); --muted: light-dark(#647168, #a3b0a8); --white: light-dark(#fff, #1a2420); --amber: light-dark(#825811, #e2b45e); --danger: light-dark(#aa3836, #e07a76); } }
* { box-sizing: border-box; }
html { -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; scroll-padding-top: 6rem; }
body { margin: 0; background: var(--bg); color: var(--ink); font: .9375rem/1.6 system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
svg { flex-shrink: 0; vertical-align: middle; }
a { color: var(--green); text-decoration: none; overflow-wrap: anywhere; }
button, a, summary, [role=button] { touch-action: manipulation; }
button, .button, summary, .primary-nav a { user-select: none; -webkit-user-select: none; }
button, input, select, textarea { font: inherit; }
button, .button {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 2.75rem; max-width: 100%; padding: .7rem 1rem;
  border: 1px solid transparent; border-radius: .65rem; background: var(--green); color: #fff; color: light-dark(#fff, #10201a);
  font-size: .875rem; font-weight: 600; line-height: 1.35; text-align: center;
  cursor: pointer; text-decoration: none; transition: transform 120ms var(--ease-out);
}
button:disabled { opacity: .5; cursor: not-allowed; }
button[aria-busy=true] { opacity: .8; cursor: progress; }
.secondary { background: var(--white); background: var(--light-dark(white, #1a2420)); color: var(--ink); border-color: var(--line); box-shadow: 0 1px 2px #00000003; }
.quiet { background: transparent; color: var(--muted); border-color: transparent; }
.danger { background: var(--danger); color: white; color: light-dark(white, #10201a); }
.danger-link { color: var(--danger); }
:root[data-input=pointer] :is(button,.button):not(:disabled):active { transform: scale(.975); }
:root[data-input=keyboard] :is(button,.button) { transition: none; }
:is(button,.button):not(:disabled):active { background: var(--green-hover); color: #fff; color: light-dark(#fff, #10201a); }
:is(.secondary,.quiet):not(:disabled):active { background: var(--mint); color: var(--ink); }
.danger:not(:disabled):active { background: #8f2d2b; background: light-dark(#8f2d2b, #ff9c94); }
:focus-visible { outline: 3px solid #739a83; outline: 3px solid light-dark(#739a83, #739a83); outline-offset: 3px; }
#main-content:focus { outline: none; }
.skip-link { position: fixed; top: .75rem; left: .75rem; z-index: 200; padding: .75rem 1rem; background: var(--green); color: white; color: light-dark(white, #10201a); border-radius: .5rem; transform: translateY(-180%); }
.skip-link:focus { transform: none; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; padding: 1.25rem max(1.5rem, calc((100vw - 1160px) / 2)); background: white; background: light-dark(white, #1a2420); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: .65rem; color: var(--ink); font-size: 1.1rem; letter-spacing: -.035em; white-space: nowrap; font-weight: 450; }
.brand strong { font-weight: 720; }
.roster-remove { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem; padding-block: .5rem; border-bottom: 1px solid var(--line); }
.roster-remove span { min-width: 0; overflow-wrap: anywhere; }
.roster-dialog { width: min(65rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); padding: 1rem; border: 1px solid var(--line); border-radius: 1rem; background: var(--white); background: var(--light-dark(white, #1a2420)); color: var(--ink); }
.roster-dialog::backdrop { background: #12271e91; }
.roster-dialog-content { padding: 1rem; }
.brand { min-width: 0; max-width: 100%; }
.brand>span { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.brand-copy { display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; }
.brand-name { white-space: nowrap; }
.brand-rank { display: block; max-width: 100%; color: var(--green); font-size: .625rem; font-weight: 600; line-height: 1.35; letter-spacing: 0; }
.brandmark { display: grid; place-items: center; width: 2.375rem; height: 2.375rem; flex-shrink: 0; background: var(--green); color: white; color: light-dark(white, #10201a); border-radius: .75rem; box-shadow: inset 0 1px 1px #ffffff25; }
.brand-note { font-size: .8125rem; color: var(--muted); }
.public-account-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: .5rem; max-width: 100%; }
:is(.app-shell,.admin-shell) .topbar { position: fixed; inset: 0 auto 0 0; width: 236px; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; padding: 2rem 1.125rem 1.25rem; border-bottom: 0; border-right: 1px solid var(--line); z-index: 30; height: 100dvh; overflow-y: auto; }
:is(.app-shell,.admin-shell) .brand { margin: 0 .375rem 2.75rem; }
.nav-caption { font-size: .625rem; letter-spacing: .1em; font-weight: 650; color: var(--muted); padding: 0 .8rem; margin-bottom: .65rem; }
.primary-nav { display: flex; flex-direction: column; gap: .35rem; }
.primary-nav a { display: flex; align-items: center; gap: .8rem; min-height: 2.875rem; padding: .7rem .8rem; border-radius: .65rem; color: var(--muted); font-weight: 550; font-size: .875rem; }
.primary-nav a[aria-current=page] { background: var(--mint); color: var(--green); font-weight: 650; }
.account-block { display: flex; align-items: center; gap: .6rem; margin: auto 0 .75rem; padding: 1rem .55rem 0; border-top: 1px solid var(--line); font-size: .75rem; }
.account-block>div { min-width: 0; }
.account-mark { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--mint); color: var(--green); flex-shrink: 0; }
.account-block strong { font-size: .75rem; font-weight: 600; }
.account-email { display: block; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: .6875rem; }
.logout-form { margin: 0; }
.logout-form .quiet { justify-content: start; width: 100%; }
.admin-shell .logout-form { margin-top: auto; }
main { max-width: 1160px; margin: auto; padding: 2.5rem 1.75rem 3.5rem; min-height: calc(100dvh - 170px); }
:is(.app-shell,.admin-shell) main { width: calc(100% - 236px); max-width: 1196px; margin-left: max(236px, calc(236px + (100vw - 1432px) / 2)); padding: 2.75rem 2.5rem 4rem; }
h1,h2,h3 { line-height: 1.25; margin: 0 0 1rem; letter-spacing: -.035em; font-weight: 650; overflow-wrap: anywhere; text-wrap: balance; }
h1 { font-size: clamp(1.8rem, 2.8vw, 2.5rem); }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.0625rem; }
p { margin: 0 0 1.1rem; overflow-wrap: anywhere; }
.muted,.hint { color: var(--muted); }
.hint { font-size: .8125rem; line-height: 1.6; }
.eyebrow { display: block; color: var(--green); font-size: .6875rem; letter-spacing: .08em; font-weight: 650; margin-bottom: .6rem; overflow-wrap: anywhere; }
.hero { display: flex; align-items: center; justify-content: space-between; gap: 2rem; margin-bottom: 2rem; }
.hero h1 { margin-bottom: .6rem; }
.hero p { max-width: 42rem; margin-bottom: 0; }
.hero .button { flex-shrink: 0; }
.stats { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1rem; margin: 0 0 2.5rem; }
.stats>div { padding: 1.125rem 1.25rem; background: white; background: light-dark(white, #1a2420); border-radius: .8rem; box-shadow: var(--shadow); min-width: 0; }
.stats strong { display: block; font-size: clamp(1.25rem,2vw,1.8rem); font-weight: 650; line-height: 1.4; letter-spacing: -.035em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.stats span { display: block; margin-top: .25rem; font-size: .75rem; color: var(--muted); }
.dashboard-year { margin-bottom: 1.5rem; }
.dashboard-stats>div { padding: 1.5rem; }
.stats.dashboard-stats strong { font-size: clamp(1.8rem,3vw,2.6rem); }
.dashboard-stats span { font-size: .875rem; }
.archive-search { flex: 1 1 18rem; min-width: 0; }
.search-form .archive-search input { flex: 0 1 auto; }
.archive-year-field { display: grid; gap: .35rem; }
.archive-search,.archive-year-field label { margin-bottom: 0; }
.archive-filters .search-form { margin-bottom: 1.25rem; }
.subject-tags { display: flex; flex-wrap: wrap; gap: .5rem; }
.subject-tag { min-height: 44px; border-radius: 2rem; padding: .55rem 1rem; background: white; background: light-dark(white, #1a2420); color: var(--green); border: 1px solid var(--line); box-shadow: none; overflow-wrap: anywhere; }
.subject-tag[aria-pressed=true] { background: var(--green); color: white; color: light-dark(white, #10201a); border-color: var(--green); }
.subject-section { margin: 1.5rem 0 2rem; }
.subject-section>summary { display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: .75rem; min-height: 48px; padding: .6rem 0; font-size: 1.15rem; }
.subject-section>summary::before { content: '›'; transform: rotate(0); }
.subject-section[open]>summary::before { transform: rotate(90deg); }
.subject-section>summary::after,.subject-section[open]>summary::after { content: none; }
.subject-count { font-size: .875rem; color: var(--muted); font-weight: 400; }
.subject-section .cards { margin-top: .75rem; }
.group-card h3 { font-size: 1.35rem; margin: .65rem 0; }
.exam-list { display: grid; gap: .75rem; }
.exam-list-item { display: flex; align-items: center; gap: 1rem; margin: 0; color: var(--ink); }
.exam-list-item>div { flex: 1; min-width: 0; }
.exam-list-item h3 { font-size: 1rem; margin: .4rem 0; overflow-wrap: anywhere; }
.exam-list-item p { margin: .25rem 0; overflow-wrap: anywhere; }
.exam-list-item time { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.exam-list-item>svg { flex-shrink: 0; }
.archive-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem; margin: 1.5rem 0; }
@media (hover:hover) and (pointer:fine) {
  .exam-list-item:hover { text-decoration: none; background: var(--mint); }
  .subject-tags .subject-tag[aria-pressed=false]:hover { background: var(--mint); }
}
@media(max-width: 600px) {
  .exam-list-item { flex-wrap: wrap; gap: .5rem; }
  .exam-list-item>div { flex-basis: 100%; }
  .exam-list-item>svg { margin-left: auto; }
  .stats.dashboard-stats strong { font-size: 1.8rem; }
  .dashboard-stats>div { padding: 1rem; }
  .dashboard-stats span { font-size: .8rem; }
}
.stats.statistics-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.statistics-grid small { display: block; margin-top: .5rem; font-size: .75rem; color: var(--muted); line-height: 1.5; }
@media(max-width: 900px) { .stats.statistics-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(max-width: 480px) { .stats.statistics-grid { grid-template-columns: minmax(0,1fr); } }
section { margin-bottom: 2rem; }
.section-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.25rem; }
.section-head>div { min-width: 0; flex: 1; }
.section-head :is(h1,h2,h3,p) { margin-bottom: 0; }
.section-head :is(.eyebrow,.muted) { margin-top: .35rem; }
.section-head form,.actions,.inline-form,.search-form { display: flex; align-items: end; gap: .75rem; flex-wrap: wrap; min-width: 0; }
.section-head form { align-items: center; }
.section-head form select { width: auto; max-width: 100%; }
.actions { justify-content: end; }
.master-menu { position: relative; }
.master-menu>summary::after { content: '⌄'; font-size: 1rem; color: inherit; }
.master-menu[open]>summary { margin-bottom: 0; }
.master-menu[open]>summary::after { content: '⌃'; }
.master-menu-panel { position: absolute; inset-inline-end: 0; top: calc(100% + .5rem); z-index: 35; width: 22rem; max-width: calc(100vw - 2rem); max-height: min(30rem,65vh); overflow-y: auto; padding: .5rem; background: var(--white); background: var(--light-dark(white, #1a2420)); border: 1px solid var(--line); border-radius: .8rem; box-shadow: 0 12px 36px #182b2320; }
.master-menu-caption { margin: .4rem .6rem .5rem; color: var(--muted); font-size: .65rem; letter-spacing: .08em; }
.master-menu-panel ul,.makeup-list { list-style: none; padding: 0; margin: 0; }
.master-menu-panel a,.master-menu-missing { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: 3.4rem; padding: .65rem .7rem; border-radius: .5rem; color: var(--ink); }
.master-menu-panel a:hover,.master-menu-panel a:focus-visible { background: var(--mint); }
.master-menu-panel strong,.makeup-list strong { display: block; font-size: .875rem; font-weight: 600; }
.master-menu-panel small,.makeup-list small { display: block; margin-top: .15rem; color: var(--muted); font-size: .75rem; }
.master-menu-missing { color: var(--muted); }
.exam-variants { display: flex; flex-wrap: wrap; gap: .65rem; margin-bottom: 1.5rem; }
.exam-variants a { display: grid; min-height: 2.75rem; gap: .1rem; padding: .65rem 1rem; border: 1px solid var(--line); border-radius: .65rem; background: var(--white); background: var(--light-dark(white, #1a2420)); color: var(--muted); }
.exam-variants a[aria-current=page] { color: var(--green); border-color: #b8cfc1; border-color: light-dark(#b8cfc1, #304037); background: var(--mint); }
.exam-variants strong { font-size: .875rem; font-weight: 600; }
.exam-variants span { font-size: .75rem; }
.makeup-list { display: grid; gap: .5rem; margin-block: 1.25rem; }
.makeup-list a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.5rem; padding: .8rem 1rem; border: 1px solid var(--line); border-radius: .65rem; color: var(--ink); }
.makeup-list a[aria-current=page] { background: var(--mint); border-color: #b8cfc1; border-color: light-dark(#b8cfc1, #304037); }
@media (max-width: 600px) {
  .master-menu { flex: 1 1 100%; width: 100%; }
  .master-menu>summary { width: 100%; }
  .master-menu-panel { position: static; width: 100%; max-width: none; margin-top: .5rem; }
  .exam-variants a { flex: 1 1 9rem; }
}
.cards { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.card { min-width: 0; padding: 1.5rem; background: white; background: light-dark(white, #1a2420); border-radius: .9rem; border: 1px solid transparent; box-shadow: var(--shadow); }
.group-card { display: flex; flex-direction: column; color: var(--ink); min-height: 10rem; }
.group-card h2 { font-size: 1.7rem; }
.group-card p { font-size: .8125rem; color: var(--muted); margin-bottom: 0; }
.card-arrow { display: block; margin-top: auto; padding-top: 1.5rem; font-size: .8125rem; color: var(--green); font-weight: 600; }
.action-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; margin-bottom: 2rem; }
.action-grid.three { grid-template-columns: repeat(3,minmax(0,1fr)); }
.action-grid.four { grid-template-columns: repeat(4,minmax(0,1fr)); }
@media (max-width: 1180px) { .action-grid.four { grid-template-columns: repeat(2,minmax(0,1fr)); } }
.action-card { display: flex; align-items: flex-start; gap: 1rem; color: var(--ink); min-width: 0; }
.action-card .action-icon { background: var(--mint); color: var(--green); border-radius: .7rem; padding: .7rem; flex-shrink: 0; }
.action-card h2 { font-size: 1rem; margin: 0 0 .4rem; }
.action-card p { font-size: .8125rem; color: var(--muted); margin: 0; }
.empty { grid-column: 1/-1; padding: 2rem; border: 1px dashed #cbd5cb; border: 1px dashed light-dark(#cbd5cb, #2f352f); border-radius: .85rem; background: #f0f4ee; background: light-dark(#f0f4ee, #1f221e); color: var(--muted); font-size: .875rem; text-align: center; }
.badge { display: inline-flex; align-items: center; min-height: 1.6rem; padding: .25rem .65rem; border-radius: .4rem; background: #eef1ed; background: light-dark(#eef1ed, #202220); color: #59685d; color: light-dark(#59685d, #a7b7ab); font-size: .6875rem; font-weight: 600; line-height: 1.35; white-space: nowrap; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.complete { background: #e9f3eb; background: light-dark(#e9f3eb, #1d231e); color: #306342; color: light-dark(#306342, #93c9a3); }
.pending { background: #fff3da; background: light-dark(#fff3da, #261f10); color: var(--amber); }
details { margin-bottom: 1rem; min-width: 0; }
summary { display: flex; align-items: center; justify-content: space-between; gap: .8rem; min-height: 2.75rem; cursor: pointer; font-weight: 600; font-size: .875rem; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::after { content: '+'; color: var(--muted); font-weight: 400; font-size: 1.3rem; flex-shrink: 0; }
details[open]>summary::after { content: '−'; }
details[open]>summary { margin-bottom: 1.25rem; }
label { display: flex; flex-direction: column; gap: .45rem; font-size: .8125rem; font-weight: 550; margin-bottom: 1.125rem; min-width: 0; }
input,select,textarea { width: 100%; min-width: 0; max-width: 100%; min-height: 2.75rem; padding: .65rem .8rem; border: 1px solid #cbd4cb; border: 1px solid light-dark(#cbd4cb, #303530); border-radius: .6rem; background: white; background: light-dark(white, #1a2420); color: var(--ink); font-size: 1rem; line-height: 1.4; }
input::placeholder { color: var(--muted); opacity: 1; }
input:focus,select:focus,textarea:focus { border-color: var(--green); }
input[type=file] { padding: .65rem; font-size: 1rem; background: #fafbf9; background: light-dark(#fafbf9, #1f1f1e); cursor: pointer; }
input[type=file]::file-selector-button { padding: .4rem .65rem; border: 1px solid var(--line); border-radius: .4rem; background: white; background: light-dark(white, #1a2420); font: inherit; font-size: .8125rem; color: var(--ink); cursor: pointer; margin-right: .65rem; }
input[type=checkbox] { width: 1.2rem; height: 1.2rem; min-height: 0; padding: 0; flex-shrink: 0; accent-color: var(--green); }
.checkbox { display: flex; flex-direction: row; align-items: flex-start; gap: .65rem; min-height: 2.75rem; padding: .6rem 0; font-weight: 400; margin-bottom: .35rem; grid-column: 1/-1; }
.checkbox input { margin: .1rem 0 0; }
.form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 1.25rem; margin-top: 1.25rem; }
.form-grid button { justify-self: start; align-self: end; }
.full { grid-column: 1/-1; }
.inline-form { margin-bottom: 1.125rem; }
.inline-form label { flex: 1 1 180px; min-width: 0; margin-bottom: 0; }
.table-wrap { width: 100%; overflow-x: auto; overscroll-behavior-x: contain; background: white; background: light-dark(white, #1a2420); border: 1px solid var(--line); border-radius: .85rem; }
table { width: 100%; border-collapse: collapse; text-align: left; font-size: .875rem; }
th { padding: .8rem 1.125rem; font-size: .6875rem; font-weight: 600; color: var(--muted); background: #fafbf9; background: light-dark(#fafbf9, #1f1f1e); }
td { padding: 1rem 1.125rem; border-top: 1px solid var(--line); vertical-align: top; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
td small { display: block; color: var(--muted); font-size: .6875rem; margin-top: .2rem; }
td:last-child { text-align: right; }
td a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.breadcrumb { display: flex; flex-wrap: wrap; gap: .3rem; font-size: .75rem; color: var(--muted); margin-bottom: 1.5rem; overflow-wrap: anywhere; }
.roster { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .25rem 1.25rem; margin: 1.25rem 0; }
.roster-name { min-width: 0; min-height: 2.75rem; padding: .6rem 0; overflow-wrap: anywhere; }
.notice { display: flex; align-items: flex-start; gap: .7rem; padding: 1rem 1.1rem; background: #eaf3e9; background: light-dark(#eaf3e9, #1e231d); color: #345a3a; color: light-dark(#345a3a, #a1cba6); border: 1px solid #d3e5d1; border: 1px solid light-dark(#d3e5d1, #222d21); border-radius: .7rem; margin-bottom: 1.5rem; font-size: .875rem; }
.notice svg { margin-top: .15rem; }
.notice.error { background: #fcf0ed; background: light-dark(#fcf0ed, #261f1d); color: #8a3830; color: light-dark(#8a3830, #fb9d91); border-color: #efdbd5; border-color: light-dark(#efdbd5, #322623); }
.login { max-width: 490px; margin: 4vh auto; padding: 2rem; }
.login h1 { font-size: clamp(1.7rem,3vw,2.25rem); }
.login form>button,.login>a.button { width: 100%; margin-bottom: .75rem; }
.login form+p { margin-top: .35rem; }
.auth-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; max-width: 1020px; margin: 4vh auto; }
.auth-layout .login { width: 100%; max-width: 460px; margin: 0; }
.auth-story h2 { font-size: clamp(2rem,3.4vw,3rem); line-height: 1.16; letter-spacing: -.045em; margin-bottom: 1.1rem; }
.auth-story p { color: var(--muted); max-width: 380px; }
.auth-paper { position: relative; width: 240px; margin: 0 0 2rem 1rem; padding: 1.5rem; border-radius: .8rem; background: white; background: light-dark(white, #1a2420); box-shadow: 0 8px 30px #20382a0a, 0 0 0 1px #20382a0c; transform: rotate(-3deg); }
.auth-paper::before { content: ''; position: absolute; z-index: -1; inset: 0; border-radius: inherit; border: 1px solid var(--line); background: #edf3ee; background: light-dark(#edf3ee, #1f2d27); transform: translate(10px,8px) rotate(5deg); }
.auth-paper-top { display: flex; gap: .65rem; align-items: center; font-size: .75rem; font-weight: 650; }
.auth-paper .badge { margin: .9rem 0; }
.auth-lines { height: 90px; background: repeating-linear-gradient(transparent,transparent 20px,#edf0ec 20px,#edf0ec 21px); background: repeating-linear-gradient(transparent,transparent 20px,light-dark(#edf0ec, #202220) 20px,light-dark(#edf0ec, #202220) 21px); }
.auth-benefit { display: flex; align-items: center; gap: .6rem; margin-bottom: .6rem; color: var(--green); font-size: .8125rem; }
.review-grid,.page-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1.25rem; }
.scan-card { border-top: 3px solid #87ac8c; border-top: 3px solid light-dark(#87ac8c, #4c6f52); }
.upload-form>p[role=status] { width: 100%; color: var(--muted); font-size: .8125rem; margin: .25rem 0 0; min-height: 1.3rem; }
.review-grid .scan-thumb { display: block; width: 100%; height: 280px; object-fit: contain; background: #f5f6f2; background: light-dark(#f5f6f2, #20201e); border: 1px solid var(--line); border-radius: .6rem; margin-bottom: 1rem; }
.page-image { width: 100%; height: auto; aspect-ratio: 210/297; object-fit: contain; border: 1px solid var(--line); border-radius: .5rem; margin-bottom: 1rem; background: #fafbf9; background: light-dark(#fafbf9, #1f1f1e); }
.page-grid .actions { justify-content: flex-start; margin-bottom: 1rem; }
.camera-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; margin-bottom: 1rem; }
.camera-label { position: relative; margin: 0; overflow: hidden; cursor: pointer; }
.camera-label input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.camera-label:focus-within { outline: 3px solid #739a83; outline: 3px solid light-dark(#739a83, #739a83); outline-offset: 3px; }
.camera-label:has(input:disabled) { opacity: .5; cursor: not-allowed; }
.camera-previews { display: flex; gap: .75rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.camera-previews>div { width: 140px; max-width: 100%; }
.camera-previews img { width: 100%; height: 160px; object-fit: contain; border: 1px solid var(--line); border-radius: .5rem; background: #fafbf9; background: light-dark(#fafbf9, #1f1f1e); }
.camera-previews button { font-size: .75rem; width: 100%; padding: .5rem; margin-top: .4rem; }
.brand-logo { width: 2.375rem; height: 2.375rem; flex-shrink: 0; object-fit: contain; }
.capture-next { font-weight: 650; padding: .85rem 1rem; border-radius: .65rem; background: var(--green-soft, #edf3ee); background: var(--green-soft, light-dark(#edf3ee, #1f2d27)); margin: 1rem 0; overflow-wrap: anywhere; }
.capture-view { position: relative; background: #17241d; border-radius: .75rem; overflow: hidden; margin-bottom: 1rem; }
.capture-view canvas { display: block; width: 100%; height: min(42svh, 420px); object-fit: contain; }
/* Keep the source video on screen and nonzero-opacity for iOS playback.
   The canvas underneath displays frames without Safari's video compositor. */
.capture-view video { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: .01; pointer-events: none; }
.capture-loading { display: none; position: absolute; inset: 0; z-index: 1; margin: 0; align-items: center; justify-content: center; gap: .75rem; background: var(--mint); color: var(--green); }
.capture-view:is([data-state=starting],[data-state=waiting]) .capture-loading { display: flex; }
.capture-shutter { min-height: 56px; padding-inline: 1.5rem; }
.capture-roster { display: grid; gap: .3rem; max-height: 20rem; overflow-y: auto; }
.capture-roster label { min-height: 44px; overflow-wrap: anywhere; }
#camera-panel fieldset { min-width: 0; }
.capture-settings { margin: 1rem 0; padding: 1rem; border: 1px solid var(--line); border-radius: .7rem; background: #fafbf9; background: light-dark(#fafbf9, #1f1f1e); }
.capture-settings legend { padding: 0 .45rem; font-size: .8125rem; font-weight: 600; }
.capture-guide { padding: 1rem; border-radius: .65rem; background: var(--mint); line-height: 1.55; }
.capture-guide ol { padding-left: 1.25rem; margin: .5rem 0; }
.capture-guide li + li { margin-top: .4rem; }
.capture-guide .hint { margin-bottom: 0; }
#camera-next:empty { display: none; }
.camera-previews .hint { margin: .4rem 0; overflow-wrap: anywhere; }
.photo-upload { margin-bottom: 1.5rem; }
.photo-upload>.checkbox { margin-top: 1rem; }
.photo-review { width: min(1000px, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); padding: 0; border: 1px solid var(--line); border-radius: 1rem; color: var(--ink); background: var(--white); background: var(--light-dark(white, #1a2420)); overflow: hidden; }
.photo-review[open] { display: flex; flex-direction: column; }
.photo-review::backdrop { background: #17241db3; }
.photo-review-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding: 1.25rem; border-bottom: 1px solid var(--line); }
.photo-review-head h2 { margin: 0; }
.photo-review-head>div { min-width: 0; overflow-wrap: anywhere; }
.photo-review-head p { margin: .4rem 0 0; }
.photo-review-head button { flex-shrink: 0; }
.photo-review-content { padding: 1.25rem; overflow: auto; min-height: 0; overscroll-behavior: contain; }
.photo-review-student { padding-bottom: 1.25rem; margin-bottom: 1.25rem; border-bottom: 1px solid var(--line); }
.photo-review-student:last-child { margin-bottom: 0; border: 0; }
.photo-review-student-head { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; }
.photo-review-student-head h3 { margin: 0; }
.photo-review-student-head label { flex: 0 1 320px; margin: 0; min-width: 0; }
.photo-review-pages { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px,100%), 1fr)); gap: 1rem; }
.photo-review-page { min-width: 0; padding: .75rem; border: 1px solid var(--line); border-radius: .75rem; background: var(--bg); }
.photo-review-page p { margin: .5rem 0; }
.photo-review-image { position: relative; }
.photo-review-image img { display: block; width: 100%; height: 220px; object-fit: contain; background: var(--white); background: var(--light-dark(white, #1a2420)); border-radius: .4rem; }
.photo-review-image>span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.photo-review-image[data-state=ready]>span { display: none; }
.photo-review-image[data-state=error]>span { display: none; }
.photo-review-image[data-state=loading] img { visibility: hidden; }
.photo-review-filename { overflow-wrap: anywhere; }
.photo-review-order { display: flex; flex-wrap: wrap; gap: .5rem; }
.photo-review-order button { flex: 1 1 auto; min-height: 44px; padding: .5rem .75rem; }
.photo-review-foot { flex-shrink: 0; padding: 1rem 1.25rem; border-top: 1px solid var(--line); background: var(--white); background: var(--light-dark(white, #1a2420)); }
.photo-review-foot p { margin: 0 0 .5rem; }
.photo-review-foot p:empty { display: none; }
.photo-review-foot .actions { margin: 0; }
@media (max-width: 600px) {
  .photo-review { width: calc(100vw - 1rem); max-height: calc(100dvh - 1rem); }
  .photo-review-head,.photo-review-content,.photo-review-foot { padding: .85rem; }
  .photo-review-head h2 { font-size: 1.1rem; }
  .photo-review-head { gap: .5rem; }
  .photo-review-head button { padding: .5rem; }
  .photo-review-foot .actions { flex-direction: column-reverse; align-items: stretch; gap: .5rem; }
}
.search-form { margin-bottom: 1.5rem; }
.search-form input { flex: 1 1 180px; min-width: 0; }
.filters { margin-bottom: 1.75rem; }
.header-options { min-width: 0; margin: .25rem 0 1.25rem; padding: 1rem; border: 1px solid var(--line); border-radius: .7rem; background: #fafbf9; background: light-dark(#fafbf9, #1f1f1e); }
.header-options legend { padding: 0 .45rem; font-size: .8125rem; font-weight: 600; }
.header-options [hidden],[hidden] { display: none !important; }
.header-options input[type=number] { max-width: 230px; }
.header-options p { margin: .75rem 0 0; background: white; background: light-dark(white, #1a2420); padding: .75rem; border-radius: .5rem; border: 1px dashed #d6dfd2; border: 1px dashed light-dark(#d6dfd2, #282d25); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
pre { font-size: .8125rem; white-space: pre-wrap; overflow-wrap: anywhere; }
footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .75rem; max-width: 1160px; margin: auto; padding: 1.5rem 1.75rem; font-size: .6875rem; color: var(--muted); border-top: 1px solid var(--line); }
:is(.app-shell,.admin-shell) footer { width: calc(100% - 236px); margin-left: max(236px, calc(236px + (100vw - 1432px) / 2)); max-width: 1196px; padding-inline: 2.5rem; }
@media (hover: hover) and (pointer: fine) {
  a:hover { text-decoration: underline; text-underline-offset: .2em; }
  :is(button,.button):not(:disabled):hover { background: var(--green-hover); text-decoration: none; }
  :is(.secondary,.quiet):not(:disabled):hover { background: #f1f4ef; background: light-dark(#f1f4ef, #20211e); color: var(--ink); }
  .danger:not(:disabled):hover { background: #8f2d2b; background: light-dark(#8f2d2b, #ff9c94); }
  .brand:hover,.primary-nav a:hover,.group-card:hover,.action-card:hover { text-decoration: none; }
  .primary-nav a:hover { background: #f5f7f3; background: light-dark(#f5f7f3, #1f201e); color: var(--green); }
  .primary-nav a[aria-current=page]:hover { background: var(--mint); }
  :is(.group-card,.action-card):hover { border-color: #9bb79e; border-color: light-dark(#9bb79e, #435c46); }
}
@media (max-width:1100px) {
  .cards { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .stats { grid-template-columns: repeat(2,minmax(0,1fr)); }
  :is(.app-shell,.admin-shell) main { padding-inline: 1.75rem; }
}
@media (max-width:800px) {
  .topbar,:is(.app-shell,.admin-shell) .topbar { position: sticky; top: 0; inset-inline: auto; width: 100%; height: auto; overflow: visible; padding: calc(.8rem + env(safe-area-inset-top,0px)) max(1rem, env(safe-area-inset-right,0px)) .8rem max(1rem, env(safe-area-inset-left,0px)); border: 0; border-bottom: 1px solid var(--line); flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; }
  :is(.app-shell,.admin-shell) .brand { margin: 0; }
  .brand { font-size: 1rem; gap: .5rem; }
  .brandmark { width: 2.1rem; height: 2.1rem; border-radius: .65rem; }
  .brand-logo { width: 2.1rem; height: 2.1rem; }
  .nav-caption,.account-block,.brand-note { display: none; }
  .primary-nav { position: fixed; inset: auto 0 0; flex-direction: row; align-items: stretch; gap: .2rem; background: white; background: light-dark(white, #1a2420); border-top: 1px solid var(--line); box-shadow: 0 -3px 18px #20382a04; padding: .45rem max(.5rem,env(safe-area-inset-right,0px)) calc(.4rem + env(safe-area-inset-bottom,0px)) max(.5rem,env(safe-area-inset-left,0px)); z-index: 40; }
  .primary-nav a { flex: 1 1 0; min-width: 0; min-height: 3.3rem; flex-direction: column; justify-content: center; gap: .25rem; padding: .4rem .1rem; font-size: .75rem; line-height: 1.25; text-align: center; }
  .primary-nav a span { overflow-wrap: anywhere; }
  .logout-form .quiet { font-size: .75rem; min-height: 2.75rem; padding: .5rem; }
  .admin-shell .logout-form { margin: 0; }
  main,:is(.app-shell,.admin-shell) main { width: 100%; max-width: 100%; margin: 0; padding: 1.75rem max(1rem,env(safe-area-inset-right,0px)) 2rem max(1rem,env(safe-area-inset-left,0px)); min-height: calc(100dvh - 140px); }
  :is(.app-shell,.admin-shell) main { min-height: calc(100dvh - 200px); }
  footer,:is(.app-shell,.admin-shell) footer { width: 100%; margin: 0; padding: 1.25rem 1rem calc(1.25rem + env(safe-area-inset-bottom,0px)); }
  :is(.app-shell,.admin-shell) footer { padding-bottom: calc(6rem + env(safe-area-inset-bottom,0px)); }
  .hero { align-items: flex-start; flex-direction: column; gap: 1.25rem; }
  .hero .button { width: 100%; }
  .auth-layout { display: block; margin: 1vh auto; max-width: 490px; }
  .auth-story { display: none; }
  .auth-layout .login { max-width: none; }
  .card { padding: 1.25rem; }
  .action-grid, .action-grid.three, .action-grid.four { grid-template-columns: 1fr; }
  .form-grid,.review-grid,.page-grid { grid-template-columns: 1fr; }
  .roster { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .section-head { align-items: flex-start; }
  .section-head>div { flex-basis: 100%; }
  .actions { justify-content: flex-start; }
  .actions .button { flex: 1 1 160px; }
  .login { margin: 2vh auto; padding: 1.5rem; }
}
@media (max-width:640px) {
  .cards { grid-template-columns: 1fr; }
  .stats { gap: .75rem; margin-bottom: 2rem; }
  .stats>div { padding: 1rem; }
  .stats strong { font-size: 1.4rem; }
  .section-head form { width: 100%; }
  .section-head form select { flex: 1; min-width: 0; }
  .inline-form>button,.form-grid>button,.search-form>button { width: 100%; justify-self: stretch; }
  .inline-form>label { flex-basis: 100%; }
  .table-wrap table,.table-wrap tbody { display: block; }
  .table-wrap thead { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
  .table-wrap tr { display: grid; grid-template-columns: minmax(0,1fr); padding: .9rem 1rem; border-bottom: 1px solid var(--line); }
  .table-wrap tr:last-child { border-bottom: 0; }
  .table-wrap td { display: block; width: 100%; border: 0; padding: .3rem 0; text-align: left; min-width: 0; }
  .table-wrap td[data-label]::before { content: attr(data-label); display: block; color: var(--muted); font-size: .6875rem; font-weight: 550; margin-bottom: .15rem; }
  .table-wrap td:last-child { padding-top: .65rem; }
  .table-wrap td:last-child a { min-height: 2.75rem; }
  .table-wrap td[colspan]::before { content: none; }
  .table-wrap td label { margin-bottom: .45rem; }
  .table-wrap td select { max-width: 100%; }
}
@media (max-width:360px) {
  .roster { grid-template-columns: 1fr; }
  .brand { font-size: .875rem; }
  .logout-form .quiet svg { display: none; }
  .card { padding: 1rem; }
  .stats { gap: .5rem; }
  .stats>div { padding: .8rem; }
  .primary-nav a { font-size: .6875rem; }
}
@media (prefers-reduced-motion:reduce) {
  :is(button,.button) { transition: none; }
  :root[data-input=pointer] :is(button,.button):not(:disabled):active { transform: none; }
  html { scroll-behavior: auto; }
}

.upload-form progress { display: block; width: 100%; height: .4rem; border: none; border-radius: 1rem; accent-color: var(--green); overflow: hidden; background: var(--mint); }
.upload-form progress::-webkit-progress-bar { background: var(--mint); }
.upload-form progress::-webkit-progress-value { background: var(--green); }
.upload-form progress::-moz-progress-bar { background: var(--green); }
button[aria-busy=true]::after { content: '…'; font-weight: 700; }
.stats:has(>div:nth-child(3)):not(:has(>div:nth-child(4))) { grid-template-columns: repeat(3,minmax(0,1fr)); }
@media (max-width:640px) {
  :is(.exam-table,.student-table) tr { grid-template-columns: minmax(0,1fr) auto; column-gap: .8rem; }
  :is(.exam-table,.student-table) td:first-child { grid-column: 1; grid-row: 1; font-weight: 600; }
  :is(.exam-table,.student-table) td:first-child::before { content: none; }
  :is(.exam-table,.student-table) td:nth-child(2) { grid-column: 1; grid-row: 2; }
  :is(.exam-table,.student-table) td:nth-child(3) { grid-column: 2; grid-row: 1; text-align: right; }
  :is(.exam-table,.student-table) td:nth-child(4) { grid-column: 2; grid-row: 2; align-self: end; text-align: right; padding-top: .3rem; }
  .exam-table td:nth-child(3)::before { content: none; }
  :is(.exam-table,.student-table) td[colspan] { grid-column: 1/-1; font-weight: 400; }
  .stats:has(>div:nth-child(3)):not(:has(>div:nth-child(4))) { grid-template-columns: 1fr; }
}

footer a { text-decoration: underline; text-underline-offset: .2em; }
footer nav { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
footer nav a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.legal-page { max-width: 78ch; margin-inline: auto; }
.legal-page section { scroll-margin-top: 6rem; }
.legal-page :is(td,th) { overflow-wrap: anywhere; }
.legal-page code { overflow-wrap: anywhere; white-space: normal; }
.legal-toc { display: flex; flex-wrap: wrap; gap: .5rem 1rem; padding-block: 1rem; border-block: 1px solid var(--line); margin-block: 1.5rem; }
.legal-toc a { display: inline-flex; align-items: center; min-height: 2.75rem; text-decoration: underline; text-underline-offset: .2em; }
.legal-form { white-space: pre-wrap; font: inherit; padding: 1rem; border: 1px solid var(--line); border-radius: .5rem; background: var(--surface, transparent); }
.legal-identity { margin-block: 1.5rem; padding: 1rem; background: var(--mint); border-radius: .65rem; }
.legal-identity dt { font-size: .8125rem; color: var(--muted); }
.legal-identity dd { margin: 0 0 1rem; overflow-wrap: anywhere; white-space: pre-line; }
.legal-identity dd:last-child { margin-bottom: 0; }
.legal-page .notice p { margin-bottom: 0; }
.home-actions { justify-content: flex-start; margin-bottom: 2rem; }
.analysis-question { margin-block: 1.25rem; min-width: 0; }
.analysis-question legend { overflow-wrap: anywhere; }
.analysis-list { display: grid; gap: .75rem; padding-inline-start: 1.25rem; }

.card-arrow { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }

.legal-page p a,.hint a { text-decoration: underline; text-underline-offset: .18em; }

/* Public product presentation; the existing login block stays above it. */
.product-page { margin-top: 3.5rem; }
.product-page :is(section,article,figure) { min-width: 0; }
.product-nav { display: flex; flex-wrap: wrap; gap: .25rem 2rem; padding: .75rem 0; margin-bottom: 2.5rem; border-block: 1px solid var(--line); }
.product-nav a { display: inline-flex; align-items: center; min-height: 2.75rem; font-size: .8125rem; font-weight: 600; }
.product-intro { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,1fr); gap: 3rem; align-items: center; padding: 3rem; background: var(--green); color: white; color: light-dark(white, #10201a); border-radius: 1.25rem; }
.product-intro .eyebrow { color: #dce9df; color: light-dark(#dce9df, #212923); }
.product-intro h2 { font-size: clamp(2rem,3.3vw,3.1rem); line-height: 1.13; letter-spacing: -.045em; }
.product-intro-copy p { color: #e1eae4; color: light-dark(#e1eae4, #212723); max-width: 39ch; }
.product-text-link { display: inline-flex; align-items: center; gap: .35rem; min-height: 2.75rem; text-decoration: underline; text-underline-offset: .2em; font-size: .8125rem; font-weight: 600; }
.product-intro .product-text-link { color: white; color: light-dark(white, #10201a); }
.product-preview { margin: 0; padding: 1.25rem; border-radius: .85rem; color: var(--ink); background: var(--white); background: var(--light-dark(white, #1a2420)); box-shadow: 0 12px 32px #142f2326; }
.product-preview figcaption { font-size: .6875rem; color: var(--muted); margin-bottom: 1rem; }
.product-preview .eyebrow { color: var(--green); }
.product-page .badge { white-space: normal; max-width: 100%; }
.delete-confirm { max-width: 46rem; margin-inline: auto; }
.delete-summary { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; padding: 1rem; border-radius: .7rem; background: var(--mint); margin-block: 1.5rem; }
.delete-summary dt { color: var(--muted); font-size: .8125rem; overflow-wrap: anywhere; }
.delete-summary dd { margin: .2rem 0 0; font-size: 1.5rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.delete-actions { margin-top: 1rem; }
.product-preview-bar { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; padding-bottom: .85rem; border-bottom: 1px solid var(--line); font-size: .8125rem; }
.product-preview-bar>span { margin-left: auto; color: var(--muted); font-size: .75rem; }
.product-preview-heading { padding-block: 1.25rem .25rem; }
.product-preview-heading h3 { font-size: 1.15rem; margin-bottom: .35rem; }
.product-preview-heading p { font-size: .75rem; color: var(--muted); }
.product-preview-roster { padding: 0; margin: 0; list-style: none; }
.product-preview-roster li { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem; padding-block: .7rem; border-top: 1px solid var(--line); font-size: .8125rem; }
.product-preview-roster li>span:first-child { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.product-preview-roster strong { font-weight: 550; overflow-wrap: anywhere; }
.product-preview-note { margin: 1rem 0 0; font-size: .6875rem; color: var(--muted); }
.product-section { margin-top: 4.5rem; scroll-margin-top: 2rem; }
.product-section-heading { max-width: 46rem; margin-bottom: 2rem; }
.product-section-heading h2,.product-drive h2,.product-cta h2 { font-size: clamp(1.5rem,2.5vw,2.1rem); margin-bottom: .65rem; }
.product-section-heading p { margin: 0; }
.product-steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 2rem; padding: 0; margin: 0; list-style: none; }
.product-steps li { min-width: 0; padding-top: 1.25rem; border-top: 1px solid #cbd5cb; border-top: 1px solid light-dark(#cbd5cb, #2f352f); }
.product-step-number { display: block; font-size: .75rem; font-weight: 650; color: var(--green); margin-bottom: 1.25rem; font-variant-numeric: tabular-nums; }
.product-steps h3 { font-size: 1.15rem; margin-bottom: .65rem; }
.product-steps p { font-size: .875rem; color: var(--muted); margin: 0; }
.product-features { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; }
.product-feature { padding: 1.75rem; background: white; background: light-dark(white, #1a2420); border: 1px solid var(--line); border-radius: .9rem; }
.product-feature-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; background: var(--mint); color: var(--green); border-radius: .65rem; margin: 0 .75rem 1.25rem 0; vertical-align: middle; }
.product-feature h3 { font-size: 1.125rem; margin-bottom: .75rem; }
.product-feature p { font-size: .875rem; }
.product-feature .product-feature-detail { color: var(--muted); font-size: .8125rem; margin-bottom: 0; }
.product-points { white-space: nowrap; font-variant-numeric: tabular-nums; }
.product-feature-ai { background: #f0f5ef; background: light-dark(#f0f5ef, #1f211e); border-color: #d9e4d8; border-color: light-dark(#d9e4d8, #252b24); }
.product-feature-ai .product-feature-icon { background: white; background: light-dark(white, #1a2420); }
.product-drive { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,1fr); gap: 3rem; padding: 2.5rem; border-radius: 1rem; background: var(--mint); }
.product-drive p { font-size: .875rem; }
.product-drive>div>p:last-child { margin-bottom: 0; }
.product-drive-notes { align-self: center; display: grid; gap: 1.25rem; }
.product-drive-notes>div { display: flex; align-items: flex-start; gap: .85rem; }
.product-drive-notes svg { color: var(--green); margin-top: .2rem; }
.product-drive-notes p { margin: 0; }
.product-drive-notes strong { display: block; margin-bottom: .3rem; font-weight: 600; }
.product-drive-notes span { display: block; color: var(--muted); font-size: .8125rem; }
.product-faq { max-width: 800px; margin-inline: auto; }
.product-faq details { padding: 1rem 0; margin: 0; border-bottom: 1px solid var(--line); }
.product-faq details:first-of-type { border-top: 1px solid var(--line); }
.product-faq summary { font-size: .9375rem; }
.product-faq p { max-width: 70ch; color: var(--muted); font-size: .875rem; margin: 0; }
.product-faq p a { text-decoration: underline; text-underline-offset: .2em; }
.product-cta { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 2.5rem; border: 1px solid #d5dfd4; border: 1px solid light-dark(#d5dfd4, #272d27); background: white; background: light-dark(white, #1a2420); border-radius: 1rem; margin: 4.5rem 0 0; }
.product-cta>div { min-width: 0; }
.product-cta>div:first-child { max-width: 37rem; }
.product-cta p { margin: 0; color: var(--muted); font-size: .875rem; }
.product-cta-actions { display: flex; flex-direction: column; align-items: center; gap: .5rem; flex-shrink: 0; max-width: 100%; }
@media (max-width:800px) {
  .product-page { margin-top: 2.5rem; }
  .product-nav { gap: .25rem 1.25rem; margin-bottom: 2rem; }
  .product-intro,.product-drive { grid-template-columns: minmax(0,1fr); gap: 2rem; padding: 2rem; }
  .product-intro-copy p { max-width: none; }
  .product-section { margin-top: 3rem; }
  .product-steps { gap: 1.25rem; }
  .product-cta { flex-direction: column; align-items: flex-start; padding: 2rem; margin-top: 3rem; }
  .product-cta-actions { align-items: flex-start; }
}
@media (max-width:640px) {
  .product-intro,.product-drive { padding: 1.5rem; }
  .product-intro h2 { font-size: 2rem; }
  .product-features,.product-steps { grid-template-columns: minmax(0,1fr); }
  .product-steps { gap: 1.75rem; }
  .product-step-number { margin-bottom: .75rem; }
  .product-feature { padding: 1.5rem; }
  .product-preview { padding: 1rem; }
  .product-preview-roster li>span:first-child { flex: 1 1 100%; }
  .product-cta { padding: 1.5rem; }
}

/* Parallel work stays in a compact floating panel, without a blocking scrim. */
.upload-panel{position:fixed;right:1.25rem;bottom:1.25rem;width:min(24rem,calc(100vw - 2rem));z-index:30;background:rgba(255,255,255,.97); background: light-dark(rgba(255,255,255,.97), rgba(26, 36, 32, 0.97));border:1px solid #c8d8d1; border: 1px solid light-dark(#c8d8d1, #2a3430);border-radius:16px;box-shadow:0 12px 40px #193d3024;overflow:hidden;backdrop-filter:blur(16px)}
.upload-panel[hidden]{display:none}.upload-panel-head{display:flex;align-items:center;gap:.25rem;background:#eef5f1; background: light-dark(#eef5f1, #1e221f);border-bottom:1px solid #d8e4dd; border-bottom: 1px solid light-dark(#d8e4dd, #242b27);padding:.3rem .5rem}.upload-panel-toggle{display:flex;flex:1;align-items:center;justify-content:space-between;gap:.75rem;text-align:left;font-weight:650;min-width:0}.upload-panel-head .quiet{padding:.6rem .5rem;min-height:44px;color:#214d3c; color: light-dark(#214d3c, #addcc7);}.upload-panel-head #upload-clear{min-width:44px;font-size:1.5rem}
#upload-tasks{max-height:min(45vh,22rem);overflow:auto;overscroll-behavior:contain}.upload-task{padding:.9rem 1rem;border-bottom:1px solid #e4ebe7; border-bottom: 1px solid light-dark(#e4ebe7, #212623);}.upload-task:last-child{border:0}.upload-task-heading{display:flex;align-items:center;gap:.65rem;min-width:0}.upload-task-heading strong{font-size:.95rem;overflow-wrap:anywhere}.upload-task-symbol{display:grid;place-items:center;flex:none;width:1.75rem;height:1.75rem;border-radius:50%;background:#e8f2ec; background: light-dark(#e8f2ec, #1d2320);color:#24513f; color: light-dark(#24513f, #a7d7c1);font-weight:700}.upload-task[data-state=error] .upload-task-symbol{background:#fff0df; background: light-dark(#fff0df, #281f15);color:#85531f; color: light-dark(#85531f, #dfa775);}.upload-task-status{margin:.4rem 0;font-size:.85rem;color:#475e54; color: light-dark(#475e54, #a6c0b4);}.upload-task progress{display:block;width:100%;height:7px;accent-color:#2c6550; accent-color: light-dark(#2c6550, #8dc7af);border:0;border-radius:6px}.upload-task progress[hidden]{display:none}.upload-task-actions{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;font-size:.88rem}.upload-task-actions .quiet{min-height:44px;padding:.5rem .65rem}.upload-task-actions a{display:inline-flex;align-items:center;min-height:44px}.upload-panel-note{font-size:.78rem;line-height:1.45;color:#4e6359; color: light-dark(#4e6359, #a5bcb1);padding:.65rem 1rem;margin:0;border-top:1px solid #e4ebe7; border-top: 1px solid light-dark(#e4ebe7, #212623);}
.scan-preview{position:relative;margin-bottom:1rem;background:#f0f3f1; background: light-dark(#f0f3f1, #202120);border:1px solid #d5dfd9; border: 1px solid light-dark(#d5dfd9, #272d29);border-radius:12px;overflow:hidden}.scan-preview-link{display:block;text-decoration:none;color:#244d3c; color: light-dark(#244d3c, #aedbc6);}.review-grid .scan-preview .scan-thumb,.page-grid .scan-preview .scan-thumb{display:block;width:100%;height:clamp(280px,34vw,420px);object-fit:contain;padding:.5rem;background:#e9eeeb; background: light-dark(#e9eeeb, #202322);border:0;border-radius:0;aspect-ratio:auto}.scan-preview-caption{display:block;padding:.6rem .75rem;background:#fff; background: light-dark(#fff, #1a2420);font-size:.87rem;font-weight:600;text-align:center}.scan-preview-loading{position:absolute;top:45%;left:0;right:0;text-align:center;padding:.5rem;background:#f0f3f1; background: light-dark(#f0f3f1, #202120);color:#52685c; color: light-dark(#52685c, #a2baad);}.scan-preview:not([data-state=loading]) .scan-preview-loading{display:none}.scan-preview[data-state=error] .scan-preview-link{display:none}.scan-preview-error{padding:1.25rem;min-height:15rem;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:.75rem;text-align:center}.scan-preview-error[hidden]{display:none}
.scan-dialog{padding:0;border:1px solid #d6e1da; border: 1px solid light-dark(#d6e1da, #262c28);border-radius:18px;width:min(76rem,calc(100vw - 2rem));max-width:none;height:min(90vh,54rem);max-height:calc(100dvh - 2rem);background:#fff; background: light-dark(#fff, #1a2420);color:#203c30; color: light-dark(#203c30, #cceddd);box-shadow:0 24px 80px #112b3040;overflow:hidden}.scan-dialog::backdrop{background:#12271e91}.scan-dialog-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;border-bottom:1px solid #dfe7e2; border-bottom: 1px solid light-dark(#dfe7e2, #232825);padding:.65rem 1rem;min-height:4rem}.scan-dialog-head h2{font-size:1.05rem;margin:0;line-height:1.3}.scan-dialog-head button{min-height:44px;flex-shrink:0}.scan-dialog-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(16rem,21rem);height:calc(100% - 4rem);min-height:0}.scan-view{display:flex;flex-direction:column;min-width:0;min-height:0;background:#edf1ee; background: light-dark(#edf1ee, #202220);padding:.7rem}.scan-toolbar{display:flex;flex-direction:column;gap:.5rem;flex-shrink:0}.scan-navigation,.scan-image-tools{display:flex;gap:.35rem;flex-wrap:wrap}.scan-toolbar [data-next]{flex-direction:column;gap:.1rem;min-width:6rem}.scan-toolbar [data-next] span:first-child{font-size:1.2rem;line-height:1}.scan-toolbar [data-next] span:last-child{font-size:.75rem}.scan-toolbar button{padding:.5rem .7rem;min-width:44px;min-height:44px;font-size:.85rem}.scan-dialog-status{font-size:.83rem;min-height:1.4rem;margin:.5rem 0;color:#496155; color: light-dark(#496155, #a4bfb1);}.scan-viewport{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;touch-action:none;user-select:none;-webkit-user-select:none;border-radius:8px;background:#dce4de; background: light-dark(#dce4de, #252a26);padding:12px}.scan-canvas{position:relative;margin:auto;min-width:1px;min-height:1px}.scan-canvas img{-webkit-user-drag:none;position:absolute;top:50%;left:50%;max-width:none;max-height:none;object-fit:contain}.scan-dialog-sidebar{padding:1.25rem;overflow:auto;overscroll-behavior:contain;border-left:1px solid #dce4de; border-left: 1px solid light-dark(#dce4de, #252a26);}.scan-dialog-sidebar form{margin-bottom:1.25rem}.scan-dialog-sidebar select{width:100%;min-width:0}.scan-dialog-sidebar button{width:100%}.scan-dialog-sidebar> a{display:inline-flex;align-items:center;min-height:44px}
@media(max-width:760px){.upload-panel{right:.75rem;bottom:calc(.75rem + env(safe-area-inset-bottom));width:min(23rem,calc(100vw - 1.5rem))}.upload-panel-note{font-size:.75rem}.scan-dialog{width:calc(100vw - 1rem);height:calc(100dvh - 1rem);max-height:calc(100dvh - 1rem);border-radius:14px}.scan-dialog-body{display:block;overflow:auto;overscroll-behavior:contain}.scan-view{height:62dvh;min-height:23rem}.scan-dialog-sidebar{border-left:0;border-top:1px solid #dce4de; border-top: 1px solid light-dark(#dce4de, #252a26);overflow:visible;padding:1rem}.scan-dialog-head{padding:.5rem .75rem}.scan-dialog-head h2{font-size:.95rem}}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more){.upload-panel{background:#fff; background: light-dark(#fff, #1a2420);backdrop-filter:none;border-color:#738c7e; border-color: light-dark(#738c7e, #789183);}}
.has-uploads footer{padding-bottom:calc(var(--upload-panel-height,6rem) + 2rem)}
.has-uploads main :is(a,button,input,select,textarea){scroll-margin-bottom:calc(var(--upload-panel-height,6rem) + 2rem)}
.upload-task-symbol,.upload-task[data-state=error] .upload-task-symbol{width:2.75rem;height:2.75rem;min-height:2.75rem;padding:0;border:0;background:transparent;box-shadow:none}
.upload-task-glyph{display:grid;place-items:center;width:1.75rem;height:1.75rem;border-radius:50%;background:#e8f2ec; background: light-dark(#e8f2ec, #1d2320);color:#24513f; color: light-dark(#24513f, #a7d7c1);overflow:hidden}
.upload-task[data-state=error] .upload-task-glyph{background:#fff0df; background: light-dark(#fff0df, #281f15);color:#85531f; color: light-dark(#85531f, #dfa775);}
.upload-task[data-state=completed] .upload-task-glyph{background:var(--green);color:#fff; color: light-dark(#fff, #10201a);}
.upload-task[data-state=uploading] .upload-task-arrow{animation:upload-task-rise 1.2s linear infinite}
.upload-task-dots{display:flex;align-items:center;justify-content:center;gap:3px}
.upload-task-dots span{width:4px;height:4px;border-radius:50%;background:currentColor;animation:upload-task-dot 1.2s var(--ease-out) infinite}
.upload-task-dots span:nth-child(2){animation-delay:.16s}.upload-task-dots span:nth-child(3){animation-delay:.32s}
.upload-task-dismiss:focus-visible{outline:2px solid var(--green);outline-offset:2px}
@keyframes upload-task-rise{0%{transform:translateY(30%);opacity:0}20%,75%{opacity:1}100%{transform:translateY(-30%);opacity:0}}
@keyframes upload-task-dot{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-70%);opacity:1}}
@keyframes upload-task-soft-pulse{0%,100%{opacity:.7}50%{opacity:1}}
@media(hover:hover) and (pointer:fine){.upload-task-dismiss:hover .upload-task-glyph{background:var(--green-hover)}}
@media(prefers-reduced-motion:reduce){.upload-task[data-state=uploading] .upload-task-arrow,.upload-task-dots span{animation:upload-task-soft-pulse 1.8s linear infinite;transform:none}}
.scan-preview .scan-thumb{margin-bottom:0}
.scan-preview[data-state=loading] img[data-preview-src]{visibility:hidden}
/* Leave the phone's bottom navigation reachable, including enlarged text. */
@media(max-width:800px){.upload-panel{bottom:calc(.75rem + var(--mobile-nav-height,4.5rem));z-index:29}.has-uploads footer{padding-bottom:calc(var(--upload-panel-height,6rem) + var(--mobile-nav-height,4.5rem) + 2rem)}}
/* Status appears in the click's frame; it never covers the working area. */
.navigation-status{position:fixed;top:max(.75rem,env(safe-area-inset-top));right:.75rem;z-index:45;display:flex;align-items:center;gap:.6rem;max-width:min(34rem,calc(100vw - 1.5rem));padding:.65rem .9rem;border:1px solid #cbdacf; border: 1px solid light-dark(#cbdacf, #29322c);border-radius:12px;background:#fff; background: light-dark(#fff, #1a2420);color:#24352e; color: light-dark(#24352e, #e8eeea);box-shadow:0 4px 20px #20382a18;font-size:.9rem;line-height:1.4;overflow-wrap:anywhere}
.navigation-status[hidden]{display:none}.navigation-status[data-state=error]{border-color:#c88b80; border-color: light-dark(#c88b80, #92594f);}.navigation-status[data-state=error] .busy-symbol{display:none}.navigation-status button{flex:none;min-height:44px}.navigation-status button[hidden]{display:none}
.busy-symbol,button[data-busy]::after{content:'';display:inline-block;flex:none;width:1rem;height:1rem;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:busy-turn .7s linear infinite}
button[data-busy]::after{margin-left:.5rem;vertical-align:middle}a[aria-busy=true]{outline:2px solid #91b5a0; outline: 2px solid light-dark(#91b5a0, #40624f);outline-offset:3px}.drive-check-form{margin-bottom:1.5rem}
@keyframes busy-turn{to{transform:rotate(360deg)}}
@media(max-width:800px){.navigation-status{left:.75rem;right:.75rem;max-width:none;font-size:.85rem;flex-wrap:wrap}.navigation-status button{margin-left:auto}}
@media(prefers-reduced-motion:reduce){.busy-symbol,button[data-busy]::after{animation:none;border-style:dotted}}
.student-selection { max-height: 26rem; overflow-y: auto; }
.selection-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.word-render-frame { position: fixed; left: -12000px; top: 0; width: 1100px; height: 1200px; border: 0; }
.word-review-dialog { width: min(60rem, 94vw); max-height: 90dvh; border: 1px solid var(--line); border-radius: 1.25rem; padding: 1.5rem; overflow: auto; }
.word-review-dialog::backdrop { background: rgb(14 32 25 / .5); }
.word-preview-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(16rem,100%),1fr)); gap: 1rem; margin: 1rem 0; }
.word-preview-grid img { width: 100%; border: 1px solid var(--line); }
/* A and B are configured together; hidden controls do not validate or upload. */
.package-mode { border: 0; padding: 0; margin: 0; }
.package-mode legend { font-size: .875rem; font-weight: 650; margin-bottom: .65rem; }
.package-mode-choices { display: flex; flex-wrap: wrap; gap: .5rem; }
.package-mode-choices label { display: flex; align-items: center; gap: .5rem; min-height: 2.75rem; padding: .6rem .85rem; border: 1px solid var(--line); border-radius: .7rem; cursor: pointer; font-size: .9rem; }
.package-mode-choices label:has(input:checked) { background: var(--mint); border-color: var(--green); }
.package-mode-choices input, .variant-choice input { width: 1.1rem; height: 1.1rem; margin: 0; flex-shrink: 0; accent-color: var(--green); }
.package-master-grid, .package-score-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(17rem,100%),1fr)); gap: 1rem; min-width: 0; }
.package-master-grid input[type=file] { width: 100%; min-width: 0; }
.package-assignments { min-width: 0; }
.package-roster { max-height: 26rem; overflow-y: auto; }
.package-roster-head, .package-roster-row { display: grid; grid-template-columns: minmax(0,1fr) 3.25rem 3.25rem; gap: .25rem; align-items: center; }
.package-roster-head { margin-top: 1rem; padding: .5rem 0; color: var(--muted); font-size: .8rem; font-weight: 650; }
.package-roster-head > span:not(:first-child) { text-align: center; }
.package-roster-row { padding: .4rem 0; border-top: 1px solid var(--line); }
.package-roster-row > span { overflow-wrap: anywhere; padding-right: .4rem; }
.package-roster-row small { display: block; color: var(--muted); font-size: .7rem; }
.variant-choice { display: flex; gap: .3rem; justify-content: center; align-items: center; min-height: 2.75rem; margin: 0; border: 1px solid transparent; border-radius: .6rem; cursor: pointer; }
.variant-choice:has(input:checked) { background: var(--mint); border-color: var(--line); }
.package-mode-choices label, .variant-choice { flex-direction: row; }
.package-assignments { padding: 1rem; border: 1px solid var(--line); border-radius: .7rem; margin: .25rem 0 1.25rem; }
.package-assignments legend { padding: 0 .45rem; font-size: .8125rem; font-weight: 600; }
/* Room planning shares the original assignment controls and a private group layout. */
.seating-editor { min-width:0; margin:.5rem 0 1rem; }
.seating-view-switch,.seating-actions { display:flex;flex-wrap:wrap;gap:.5rem;margin:.75rem 0; }
.seating-view-switch button[aria-pressed=true] { background:var(--mint);border-color:var(--green);color:var(--green); }
.seating-setup { display:flex;flex-wrap:wrap;align-items:end;gap:.75rem; }
.seating-setup label { flex:1 1 6rem;margin:0;max-width:12rem; }
.seating-setup label:has(select) { flex-basis:8rem; }
.seating-setup input { max-width:7rem; }
.seating-column-settings { display:flex;flex-wrap:wrap;gap:.65rem; }
.seating-column-settings label { flex:0 1 7rem;margin:.5rem 0; }
.seating-room { display:grid;grid-template-columns:2rem minmax(0,1fr) 2rem;grid-template-rows:2.5rem minmax(0,1fr) 2.5rem;min-width:0;border:1px solid var(--line);border-radius:1rem;background:#f2f5f1; background: light-dark(#f2f5f1, #1f211f);overflow:hidden;margin:1rem 0; }
.seating-blackboard { grid-column:2;grid-row:1;justify-self:center;align-self:center;width:min(17rem,90%);border-radius:.35rem;background:#285740; background: light-dark(#285740, #9ed0b5);color:white; color: light-dark(white, #10201a);text-align:center;font-size:.8rem;letter-spacing:.08em; }
.seating-room[data-seating-front-side=bottom] .seating-blackboard { grid-row:3; }
.seating-room[data-seating-front-side=left] .seating-blackboard,.seating-room[data-seating-front-side=right] .seating-blackboard { grid-row:2;grid-column:1;writing-mode:vertical-rl;width:1.5rem;height:min(17rem,90%); }
.seating-room[data-seating-front-side=right] .seating-blackboard { grid-column:3; }
.seating-scroll { grid-column:2;grid-row:2;overflow:auto;max-height:32rem;min-width:0;overscroll-behavior:contain;touch-action:pan-x pan-y; }
.seating-canvas { position:relative;background-image:radial-gradient(#cdd9cd .7px,transparent .7px); background-image: radial-gradient(light-dark(#cdd9cd, #2b322b) .7px,transparent .7px);background-size:16px 16px; }
.seating-column-heading { position:absolute;top:8px;width:144px;text-align:center;color:#586a5e; color: light-dark(#586a5e, #a4b8aa);font-size:.75rem; }
.seating-desk { position:absolute;top:0;left:0;display:flex;width:144px;height:88px;border:1px solid #c8d5cb; border: 1px solid light-dark(#c8d5cb, #2e3630);border-bottom-width:4px;border-radius:.75rem;background:white; background: light-dark(white, #1a2420);box-shadow:0 2px 5px #193c2510; }
.seating-desk[data-variant=A] { border-color:#85ab94; border-color: light-dark(#85ab94, #4b6f5a);background:#eef6ef; background: light-dark(#eef6ef, #1d221e); }
.seating-desk[data-variant=B] { border-color:#9caac7; border-color: light-dark(#9caac7, #4e5a74);background:#f0f3fa; background: light-dark(#f0f3fa, #1f2125); }
.seating-desk[data-inactive=true] { opacity:.6; }
.seating-desk[data-dragging=true] { z-index:3;box-shadow:0 8px 18px #193c2530;will-change:transform; }
.seating-person { flex:1;min-width:0;min-height:44px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:.25rem;padding:.5rem .55rem;background:transparent;color:var(--ink);text-align:left;border:0;border-radius:.65rem 0 0 .65rem; }
.seating-person-name { display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;font-size:.79rem;font-weight:650;line-height:1.3; }
.seating-person-note { font-size:.67rem;color:#4a6053; color: light-dark(#4a6053, #a6bfb0);font-weight:450; }
.seating-drag-handle { flex:none;align-self:stretch;width:44px;min-width:44px;min-height:44px;padding:0;border:0;border-left:1px solid #c8d5cb; border-left: 1px solid light-dark(#c8d5cb, #2e3630);border-radius:0 .6rem .6rem 0;background:transparent;color:#496353; color: light-dark(#496353, #a2bfad);font-size:1.2rem;cursor:grab;touch-action:none; }
.seating-drag-handle:active { cursor:grabbing; }
.seating-dialog { width:min(34rem,calc(100vw - 2rem));max-height:85dvh;overflow:auto;padding:1.5rem;border:1px solid var(--line);border-radius:1rem;color:var(--ink);background:white; background: light-dark(white, #1a2420);box-shadow:0 18px 65px #17362935; }
.seating-dialog::backdrop { background:#122b205e; }
.seating-dialog h2 { font-size:1.25rem;margin:0 0 1rem; }
.seating-dialog label { margin-bottom:.6rem; }
.seating-search-results { display:flex;flex-direction:column;gap:.3rem; }
.seating-search-option { display:flex;flex-direction:column;align-items:flex-start;gap:.15rem;width:100%;min-height:44px;padding:.65rem .8rem;text-align:left;background:#f5f7f3; background: light-dark(#f5f7f3, #1f201e);color:var(--ink);border:1px solid transparent; }
.seating-search-option[aria-selected=true] { border-color:var(--green);background:var(--mint); }
.seating-search-option strong { font-size:.9rem;overflow-wrap:anywhere; }
.seating-search-option small { color:var(--muted);font-size:.75rem; }
.seating-individual { min-width:0;margin:.75rem 0;padding:.75rem;border:1px solid var(--line);border-radius:.75rem; }
.seating-individual legend { font-size:.8rem;font-weight:600; }
@media(max-width:600px) { .seating-room { grid-template-columns:1.3rem minmax(0,1fr) 1.3rem; }.seating-dialog { padding:1.1rem; }.seating-actions button { flex:1 1 10rem; }.seating-view-switch button { flex:1; } }
@media(prefers-reduced-motion:reduce) { .seating-editor button,.seating-dialog button { transition:none; } }
@media(prefers-contrast:more) { .seating-desk { border-color:var(--ink); }.seating-blackboard { background:#133d28; background: light-dark(#133d28, #c6f3d8); } }

/* Room names and teaching weekdays stay together above the room editor. */
.seating-plan-picker,.seating-plan-details{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1rem;align-items:center;margin:1rem 0}
.seating-plan-picker>label,.seating-plan-details>label{min-width:0}
.seating-plan-picker select{width:100%;min-width:0;max-width:100%}
.seating-weekdays{display:flex;flex-wrap:wrap;gap:.25rem .9rem;margin:0;padding:.65rem .85rem;min-width:0}
.seating-weekdays legend{font-size:.85rem}.seating-weekdays .check{min-height:44px;margin:0;font-size:.85rem}
@media(max-width:640px){.seating-plan-picker,.seating-plan-details{grid-template-columns:minmax(0,1fr)}.seating-plan-picker select{font-size:.9rem}}
.seating-plan-picker .check,.seating-weekdays .check{display:flex;flex-direction:row;align-items:center;gap:.5rem;font-weight:400}
.seating-plan-picker .check{min-height:44px;margin:0}

.exam-builder { border: 1px solid var(--line); border-radius: .8rem; padding: 1rem; background: var(--mint); min-width: 0; }
.exam-builder [hidden] { display: none !important; }
.builder-entry { width: 100%; justify-content: flex-start; background: var(--white); background: var(--light-dark(white, #1a2420)); }
.task-dropzone { display: grid; justify-items: center; gap: .6rem; padding: 1.4rem .8rem; border: 2px dashed var(--line); border-radius: .7rem; background: var(--white); background: var(--light-dark(white, #1a2420)); text-align: center; }
.task-dropzone.dragging { border-color: var(--green); background: var(--mint); }
.task-dropzone span { color: var(--muted); font-size: .85rem; }
.task-dropzone input { max-width: 100%; }
.task-dropzone label { display: grid; gap: .5rem; }
.task-source-list { padding: 0; list-style: none; }
.task-source-list li { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; padding: .5rem 0; border-bottom: 1px solid var(--line); }
.task-source-list li span { flex: 1 1 12rem; min-width: 0; overflow-wrap: anywhere; }
.task-source-list button { min-width: 2.75rem; }
.generation-task-review { display: grid; gap: .6rem; margin-block: 1rem; }
.generation-task-review > details { padding: .75rem; background: var(--white); background: var(--light-dark(white, #1a2420)); border: 1px solid var(--line); border-radius: .6rem; }
.task-transcript { white-space: pre-wrap; overflow-wrap: anywhere; }
.generation-page-previews { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,20rem),1fr)); gap: .8rem; margin-block: 1rem; }
.generation-page-previews img { display: block; width: 100%; min-width: 0; border: 1px solid var(--line); background: white; background: light-dark(white, #1a2420); }
.package-master-grid > [data-b-master] { display: grid; align-content: start; gap: .6rem; min-width: 0; }

.generation-tabs { display: flex; gap: .5rem; margin: 1rem 0; }
.generation-tabs [aria-selected=true] { background: var(--green); color: var(--white); color: var(--light-dark(white, #10201a)); border-color: var(--green); }
.generation-editor-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 1rem; align-items: start; }
.generation-editor-grid > fieldset { min-width: 0; padding: 0; margin: 0; border: 0; }
.generation-editor-grid legend { font-weight: 650; padding: 0; margin-bottom: .75rem; }
.generation-edit-task { display: grid; gap: .7rem; margin-bottom: 1rem; padding: 1rem; border: 1px solid var(--line); border-radius: .7rem; background: var(--white); background: var(--light-dark(white, #1a2420)); min-width: 0; }
.generation-edit-task h4,.generation-edit-task p { margin: 0; }
.generation-edit-task label { min-width: 0; }
.generation-edit-task textarea { width: 100%; resize: vertical; min-height: 5rem; }
.generation-task-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .6rem; }
.generation-live-preview { position: sticky; top: 1rem; max-height: 75dvh; overflow-y: auto; overscroll-behavior: contain; min-width: 0; }
.generation-live-preview h4 { margin: 0 0 .75rem; }
.generation-live-preview img { display: block; width: 100%; height: auto; margin-bottom: .8rem; border: 1px solid var(--line); background: white; background: light-dark(white, #1a2420); }
.generation-download-options { margin-block: 1rem; }
@media(max-width:760px) {
  .generation-editor-grid { grid-template-columns: minmax(0,1fr); }
  .generation-live-preview { position: static; max-height: 65dvh; grid-row: 1; }
}

/* Shared entry and explicit registration choices. Native details works without JS. */
.registration-choice { position: relative; }
.registration-trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; }
.registration-trigger>span { font-size: 1.15rem; line-height: 1; transition: transform 160ms var(--ease-out); }
.registration-trigger[aria-expanded=true]>span { transform: rotate(180deg); }
.launch-signup>summary:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.registration-options { display: grid; gap: .4rem; }
.registration-options a { display: grid; gap: .2rem; padding: .85rem; border-radius: .4rem; background: var(--mint); }
.registration-options span { font-size: .8125rem; color: var(--muted); }
.student-registration { width: 100%; margin-top: .5rem; }
.launch-signup { margin-block: 1.5rem; }
.launch-signup>summary { cursor: pointer; min-height: 2.75rem; color: var(--green); text-decoration: underline; text-underline-offset: .2em; }
.launch-consent { display: flex; gap: .75rem; align-items: flex-start; font-size: .8125rem; font-weight: 400; line-height: 1.6; }
.launch-consent input { flex: 0 0 auto; width: 1.15rem; height: 1.15rem; margin-top: .2rem; accent-color: var(--green); }
.product-journal { padding: 1rem; margin-bottom: 1.25rem; background: var(--white); background: var(--light-dark(white, #1a2420)); border: 1px solid var(--line); border-radius: .85rem; overflow-x: auto; }
.product-journal table { min-width: 38rem; }
.product-journal caption { text-align: left; color: var(--muted); font-size: .8125rem; padding-bottom: 1rem; }
.product-journal td:not(:first-child) { color: var(--green); font-variant-numeric: tabular-nums; }
.product-journal th:first-child { min-width: 10rem; }
.product-journal .grade-double { font-weight: 850; }
.product-section:is(#jegynaplo,#diakfelulet) .product-features { grid-template-columns: repeat(3,minmax(0,1fr)); }
@media (max-width:800px) {
  .product-section:is(#jegynaplo,#diakfelulet) .product-features { grid-template-columns: minmax(0,1fr); }
}

/* Floating menus occupy their own layer and animate from their trigger. */
.floating-panel { display: none; position: fixed; inset: auto; margin: 0; padding: .5rem; width: min(21rem,calc(100vw - 1.5rem)); max-height: calc(100dvh - 1.5rem); overflow: auto; overscroll-behavior: contain; z-index: 90; border: 1px solid var(--line); border-radius: .85rem; background: var(--white); background: var(--light-dark(white, #1a2420)); color: var(--ink); box-shadow: 0 8px 28px #142b221a,0 2px 6px #142b220a; opacity: 0; transform: translateY(-5px) scale(.98); transform-origin: top right; transition: opacity 160ms var(--ease-out),transform 160ms var(--ease-out),display 160ms allow-discrete,overlay 160ms allow-discrete; }
.floating-panel:popover-open { display: block; opacity: 1; transform: none; }
.floating-panel[data-open] { display: block; opacity: 1; transform: none; }
.floating-panel::backdrop { background: transparent; }
.floating-panel [hidden] { display: none !important; }
.registration-panel { transform-origin: top left; }
.floating-panel[data-side=top] { transform: translateY(5px) scale(.98); transform-origin: bottom right; }
.floating-panel[data-side=top]:popover-open,.floating-panel[data-side=top][data-open] { transform: none; }
.registration-panel[data-side=top] { transform-origin: bottom left; }
.floating-panel[data-keyboard] { transition: none; }
@starting-style {
  .floating-panel:popover-open { opacity: 0; transform: translateY(-5px) scale(.98); }
  .floating-panel[data-side=top]:popover-open { transform: translateY(5px) scale(.98); }
  .floating-panel[data-keyboard]:popover-open { opacity: 1; transform: none; }
}
.roster-student { display: flex; align-items: center; justify-content: space-between; min-width: 0; gap: .25rem; border-bottom: 1px solid var(--line); }
.roster-student>.roster-name { flex: 1; }
.roster-more { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 2.75rem; width: 2.75rem; height: 2.75rem; padding: .5rem; border-radius: .5rem; color: var(--muted); }
.roster-more[aria-expanded=true] { color: var(--green); background: var(--mint); }
.floating-menu-heading { margin: .25rem .5rem .5rem; padding-bottom: .65rem; border-bottom: 1px solid var(--line); font-weight: 650; font-size: .8125rem; overflow-wrap: anywhere; }
.student-menu form { margin: 0; }
.floating-menu-item { display: flex; align-items: center; justify-content: flex-start; gap: .65rem; width: 100%; min-height: 2.75rem; padding: .75rem .6rem; border: 0; border-radius: .5rem; background: transparent; color: var(--ink); text-align: left; font-weight: 500; }
.floating-menu-item svg { flex: 0 0 auto; }
button.floating-menu-danger { color: var(--danger); }
.floating-menu-item:not(:disabled):active { background: var(--mint); color: var(--ink); }
.floating-menu-danger:not(:disabled):active { background: #fcf0ed; background: light-dark(#fcf0ed, #261f1d); color: var(--danger); }
.student-menu [data-menu-view]:not([data-menu-view=actions]) { padding: 0 .5rem .35rem; }
.floating-menu-back { display: inline-flex; align-items: center; min-height: 2.75rem; padding: .5rem 0; background: none; border: 0; color: var(--muted); font-size: .8125rem; font-weight: 500; }
.student-menu label { font-size: .8125rem; margin-bottom: .75rem; }
.student-menu .hint { margin-bottom: .75rem; font-size: .75rem; }
.student-menu form>button,.student-menu [data-copy-invite] { width: 100%; }
.floating-menu-help { display: inline-flex; align-items: center; min-height: 2.75rem; font-size: .75rem; color: var(--muted); text-decoration: underline; text-underline-offset: .2em; }
.floating-menu-error { color: var(--danger); font-size: .8125rem; margin-bottom: .75rem; }
.invite-success { display: flex; align-items: center; gap: .5rem; font-weight: 600; color: var(--green); margin-block: .35rem 1rem; }
@media (hover:hover) and (pointer:fine) {
  .floating-menu-item:not(:disabled):hover { background: var(--mint); color: var(--ink); }
  .floating-menu-danger:not(:disabled):hover { color: var(--danger); background: #fcf0ed; background: light-dark(#fcf0ed, #261f1d); }
  .registration-options a:hover { background: #e3eee5; background: light-dark(#e3eee5, #1f2620); }
}
@media (prefers-reduced-motion:reduce) {
  .floating-panel,.registration-trigger>span { transition: none; }
  @starting-style { .floating-panel:popover-open,.floating-panel[data-side=top]:popover-open { opacity: 1; transform: none; } }
}

.absence-list { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 8px; }
.absence-list li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line, #e5e7eb); border-bottom: 1px solid var(--line, light-dark(#e5e7eb, #242528)); }
.absence-list li span { display: grid; min-width: 0; overflow-wrap: anywhere; }
.absence-list small { color: var(--muted, #6b7280); color: var(--muted, light-dark(#6b7280, #9ea5b4)); }
.absence-list form { margin: 0; flex: none; }

.trend { padding: 12px 0; border-top: 1px solid var(--line); }
.trend:first-of-type { border-top: 0; }
.trend-chart { width: 100%; max-width: 480px; height: auto; display: block; margin: 8px 0 12px; }
.trend-grid { stroke: var(--line); stroke-width: 1; }
.trend-axis { fill: var(--muted); font-size: 9px; }
.trend-line { stroke: var(--muted); stroke-width: 1.5; }
.trend-point { fill: var(--green); }
.trend-label { margin: 4px 0; }
.trend-up { color: #1f6b3a; color: light-dark(#1f6b3a, #82cb95); }
.trend-down { color: #a3341f; color: light-dark(#a3341f, #ff937c); }

.onboarding { max-width: 760px; }
.onboarding-steps { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; padding: 0; margin: 0 0 16px; }
.onboarding-steps a { display: grid; justify-items: center; gap: 4px; text-decoration: none; color: var(--muted); padding: 6px 2px; border-radius: 10px; min-height: 44px; }
.onboarding-steps span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--line); font-variant-numeric: tabular-nums; }
.onboarding-steps small { font-size: .78rem; text-align: center; overflow-wrap: anywhere; }
.onboarding-steps li.done span { background: var(--green); border-color: var(--green); color: #fff; color: light-dark(#fff, #10201a); }
.onboarding-steps li[aria-current="step"] span { border-color: var(--green); color: var(--green); font-weight: 700; }
.onboarding-steps li[aria-current="step"] a { color: inherit; }
.onboarding-flow, .onboarding-tips { padding-left: 1.2em; display: grid; gap: 8px; }
.onboarding-status { color: var(--muted); }
.onboarding-status.ready { color: var(--green); font-weight: 600; display: flex; align-items: center; gap: 6px; }
.onboarding-nav { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.onboarding-nav form { margin: 0; }
@media (max-width: 560px) { .onboarding-nav form:first-of-type:not(:last-child) { order: 3; flex-basis: 100%; text-align: center; } }
.onboarding-banner { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
@media (max-width: 480px) { .onboarding-steps small { display: none; } }

/* Exam date: lesson-day calendar (static/lesson_calendar.js) */
.lesson-calendar{display:grid;gap:6px;max-width:320px;padding:10px;border:1px solid #dce4d9; border: 1px solid light-dark(#dce4d9, #252a24);border-radius:12px;background:#fff; background: light-dark(#fff, #1a2420);}
.lesson-calendar-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.lesson-calendar-head button{min-height:0;padding:2px 10px}
.lesson-calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;text-align:center}
.lesson-calendar-dow{font-size:11px;color:#6b776f; color: light-dark(#6b776f, #9aa69e);}
.lesson-calendar-day{min-height:32px;padding:0;border:1px solid transparent;border-radius:8px;background:#f3f5f2; background: light-dark(#f3f5f2, #20211f);color:#9aa49d; color: light-dark(#9aa49d, #5f6861);font-variant-numeric:tabular-nums;cursor:pointer;transition:transform 120ms ease-out}
.lesson-calendar-day:active{transform:scale(.94)}
.lesson-calendar-day.lesson{background:#111;color:#fff;font-weight:600}
.lesson-calendar-day.today{border-color:#478269; border-color: light-dark(#478269, #75b196);}
.lesson-calendar-day.selected{outline:2px solid #2f8a5c; outline: 2px solid light-dark(#2f8a5c, #5bb383);outline-offset:1px}
.lesson-calendar-day.lesson.selected{background:#1f6b47; background: light-dark(#1f6b47, #81caa1);}
.lesson-calendar-legend{display:flex;align-items:center;gap:6px;margin:0;font-size:12px;color:#5d6b63; color: light-dark(#5d6b63, #a6b5ac);}
.lesson-calendar-legend .dot{display:inline-block;width:10px;height:10px;border-radius:3px;background:#f3f5f2; background: light-dark(#f3f5f2, #20211f);border:1px solid #dce4d9; border: 1px solid light-dark(#dce4d9, #252a24);}
.lesson-calendar-legend .dot.lesson{background:#111;border-color:#111}
.lesson-calendar-info{margin:0}
@media (prefers-reduced-motion:reduce){.lesson-calendar-day{transition:none}}
/* QR sign-in with the mobile app */
.qr-login h2 { font-size: 1.15rem; margin: 0 0 .5rem; }
.qr-login-page { max-width: 34rem; }
.login-methods { display: grid; gap: 1.5rem; }
.password-login label { display: grid; gap: .3rem; margin-bottom: .75rem; }
.password-login label.checkbox { display: flex; align-items: center; gap: .5rem; font-size: .92rem; }
.login-or { display: flex; align-items: center; gap: .75rem; color: var(--muted, #667); color: var(--muted, light-dark(#667, #aeaec1)); font-size: .85rem; margin: .25rem 0 .75rem; }
.login-or::before, .login-or::after { content: ""; flex: 1; border-top: 1px solid var(--line, #dde); border-top: 1px solid var(--line, light-dark(#dde, #292933)); }
.login-qr { border-top: 1px solid var(--line, #dde); border-top: 1px solid var(--line, light-dark(#dde, #292933)); padding-top: 1.25rem; }
.login-qr .qr-login-steps { font-size: .9rem; }
.auth-layout.with-qr { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); max-width: 1180px; gap: 3rem; }
.auth-layout.with-qr .login { max-width: 720px; }
@media (min-width: 760px) {
  .auth-layout.with-qr .login-methods { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; }
  .auth-layout.with-qr .login-qr { border-top: 0; padding-top: 0; border-left: 1px solid var(--line, #dde); border-left: 1px solid var(--line, light-dark(#dde, #292933)); padding-left: 2rem; }
}
/* Staging login: password card and phone QR side by side. */
.staging-auth.with-qr { display: grid; gap: 1.5rem; max-width: 1000px; margin-inline: auto; align-items: start; }
.staging-auth.with-qr .login { max-width: none; margin: 0; }
.staging-auth.with-qr .login-qr { border-top: 0; padding-top: 1.25rem; }
@media (min-width: 760px) { .staging-auth.with-qr { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.qr-login-steps { padding-left: 1.2rem; line-height: 1.6; }
.qr-login-code { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.5rem; margin: 1rem 0; }
.qr-login-code img { width: min(200px, 60vw); height: auto; background: #fff; background: light-dark(#fff, #1a2420); border-radius: 12px; padding: 6px; }
.qr-login-match { display: grid; text-align: center; gap: .25rem; }
.qr-login-match span { font-size: .85rem; color: var(--muted, #667); color: var(--muted, light-dark(#667, #aeaec1)); }
.qr-login-match strong { font-size: 2.6rem; letter-spacing: .08em; font-variant-numeric: tabular-nums; }

/* Fiók és belépés: tárhely foglaltsága */
.storage-card .storage-meter { display: block; width: 100%; height: .6rem; margin: .5rem 0 1rem; border: 0; border-radius: 999px; overflow: hidden; background: #e6ece3; background: light-dark(#e6ece3, #222520); accent-color: var(--green); }
.storage-card .storage-meter::-webkit-progress-bar { background: #e6ece3; background: light-dark(#e6ece3, #222520); border-radius: 999px; }
.storage-card .storage-meter::-webkit-progress-value { background: var(--green); border-radius: 999px; }
.storage-card .storage-meter::-moz-progress-bar { background: var(--green); border-radius: 999px; }
.storage-years { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .35rem; }
.storage-years li { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem .75rem; border-radius: .6rem; background: #f6f8f4; background: light-dark(#f6f8f4, #1f201e); font-size: .9375rem; }