/* Layout: one phone-width column; a sticky seat bar on top, screens swap below it. */
:root {
  /* A89 (teacher 17 Oct 2026 22:53 «Toggleable light and dark mode»): light = the «Maple» design (S01 · A01 · L01), dark = «Night» (S02 · A02 · L02) */
  --bg: #faf8f4; --surface: #ffffff; --ink: #1c1d1a; --muted: #5f6158; --line: #e6e1d7;
  --maple: #b3261e; --maple-soft: #f8e7e3; --ok: #1f7a4d; --ok-soft: #e3f3ea;
  --on-maple: #ffffff; --soft: #f3ede6; --warn: #8a5100; --warn-soft: #fdf0d9; --focus: #1d5fa8; --loot: #e0a10e;
  --f-display: "Lexend", "Be Vietnam Pro", system-ui, sans-serif;
  --f-body: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
  --r: 12px;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #141412; --surface: #1e1e1b; --ink: #f0eee8; --muted: #a9a69c; --line: #34322d;
  --maple: #ef5b4f; --maple-soft: #3a1f1c; --ok: #5cc98f; --ok-soft: #173126;
  --on-maple: #1a0a08; --soft: #2a2823; --warn: #f2c14e; --warn-soft: #3a2f14; --focus: #7fb2ef; --loot: #f2c14e; color-scheme: dark } }
:root[data-theme="dark"] {
  --bg: #141412; --surface: #1e1e1b; --ink: #f0eee8; --muted: #a9a69c; --line: #34322d;
  --maple: #ef5b4f; --maple-soft: #3a1f1c; --ok: #5cc98f; --ok-soft: #173126;
  --on-maple: #1a0a08; --soft: #2a2823; --warn: #f2c14e; --warn-soft: #3a2f14; --focus: #7fb2ef; --loot: #f2c14e; color-scheme: dark }
* { box-sizing: border-box }
html { scrollbar-gutter: stable }   /* the tab bar jumped 7 px whenever a page grew a scrollbar (teacher 9 Oct) */
body { background: var(--bg); color: var(--ink); font: 15px/1.5 var(--f-body); }
.wrap { max-width: 34rem; margin: 0 auto; padding-inline: 16px; padding-block: 0 48px; display: flex; flex-direction: column; gap: 16px }
h1, h2, h3 { font-family: var(--f-display); font-weight: 600; margin: 0; text-wrap: balance; letter-spacing: -0.01em }
h1 { font-size: 1.45rem } h2 { font-size: 1.15rem } h3 { font-size: 1rem }
p { margin: 0 }
.muted { color: var(--muted) } .small { font-size: .85rem }
.num { font-variant-numeric: tabular-nums }
.bar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: var(--bg); border-bottom: 1px solid var(--line); }
.back-in { max-width: 34rem; margin: 0 auto; padding: 0 16px 8px }
.backbtn { font: 600 .88rem var(--f-body); color: var(--focus); background: transparent; border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; cursor: pointer; min-height: 36px }
.backbtn:hover { border-color: var(--focus) }
.bar-in { max-width: 34rem; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; gap: 10px; justify-content: space-between }
.brand { display: flex; align-items: center; gap: 8px; font-family: var(--f-display); font-weight: 600 }
.brand svg { width: 24px; height: 24px; fill: var(--maple); transform: rotate(12deg) }   /* the logo: the tilted leaf (teacher 9 Oct) */
.tabs { display: flex; gap: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 3px }
.tab { border: 0; background: transparent; color: var(--muted); font: 600 .82rem var(--f-body); padding: 6px 12px; border-radius: 999px; cursor: pointer }
.tab[aria-pressed="true"] { background: var(--ink); color: var(--bg) }
/* SW-96: the Maple Speak / Maple Cards app screens */
.app-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; margin-top: 10px }
.app-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; padding: 14px 16px; min-height: 84px; white-space: normal }
.app-tile b { font-size: 1.02rem }
.ib-now { margin-top: 10px; padding: 12px 14px; border-radius: 10px; background: var(--soft, rgba(0,0,0,.04)) } .ib-q { font-size: 1.25rem; font-weight: 700; margin: 0 0 6px } .ib-cue { margin: 4px 0 8px 18px }
.ib-list details { border-bottom: 1px solid var(--rule, #ddd); padding: 8px 0 } .ib-list summary { cursor: pointer; font-weight: 600 }
.it-bands { font-size: 1.1rem } .it-err { padding-left: 18px } .it-err li { margin: 4px 0 } .it-err li.major s { color: #b3261e } .it-mine { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--rule, #ddd) }   /* SW-97 */
.ib-help .seg { margin-bottom: 10px } .ib-model { line-height: 1.6 } .ib-voc { padding-left: 18px } .ib-voc li { margin: 6px 0 } #ib-notes { width: 100%; box-sizing: border-box }   /* SW-98 */
.ib-find { display: flex; gap: 8px; margin-top: 10px } .ib-find input { flex: 1; min-width: 0 } .ib-hit { display: block; width: 100%; text-align: left; white-space: normal; margin: 4px 0 }   /* SW-98 */
.ib-qs { display: flex; flex-direction: column; gap: 6px; margin-top: 8px } .ib-pick { text-align: left; white-space: normal; justify-content: flex-start } .ib-pick.on { outline: 2px solid currentColor }
/* SW-126 (teacher 23 Oct 2026 «go all out with our theme»): Maple Speak and Maple Cards on their own pages (/speak, /cards).
   Scoped to :root[data-apppage]; the students' tabs keep their look (A3). Within BRAND.md: maple is the only brand colour, the leaf
   never moves; the one moment of motion is the Speak sound band rising once, and it stands still with reduced motion. */
:root[data-apppage] { --ap-w: 70rem; --ap-field: #b3261e; --ap-on: #ffffff; --ap-on-soft: #fde8e5; --ap-wave: #ffffff; --ap-fc: #ffffff; --ap-fc-ink: #1c1d1a; --ap-fc-num: #b3261e; --ap-shadow: 0 14px 30px rgba(84, 14, 9, .32) }
@media (prefers-color-scheme: dark) { :root[data-apppage]:not([data-theme="light"]) { --ap-field: #3a1a17; --ap-on: #fbe7e3; --ap-on-soft: #e9c4be; --ap-wave: #f07167; --ap-fc: #262421; --ap-fc-ink: #f0eee8; --ap-fc-num: #f07167; --ap-shadow: 0 14px 30px rgba(0, 0, 0, .5) } }
:root[data-apppage][data-theme="dark"] { --ap-field: #3a1a17; --ap-on: #fbe7e3; --ap-on-soft: #e9c4be; --ap-wave: #f07167; --ap-fc: #262421; --ap-fc-ink: #f0eee8; --ap-fc-num: #f07167; --ap-shadow: 0 14px 30px rgba(0, 0, 0, .5) }
:root[data-apppage] .bar-in, :root[data-apppage] .back-in, :root[data-apppage] main.wrap { max-width: var(--ap-w) }
:root[data-apppage] main.wrap:not(:has(> .ap)) { max-width: 46rem }   /* an app's own screens (a review, a quiz, a word) keep a reading width */
.ap-head-in { max-width: var(--ap-w); margin: 0 auto; padding: 0 16px 10px; display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center }
.ap-switch { display: flex; gap: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 3px }
.ap-switch a { padding: 7px 16px; border-radius: 999px; font: 600 .92rem var(--f-display); color: var(--muted); text-decoration: none; min-height: 36px; display: inline-flex; align-items: center }
.ap-switch a:hover { color: var(--ink) }
.ap-switch a[aria-current="page"] { background: var(--maple); color: var(--on-maple) }
.ap-seat { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; font-size: .88rem; color: var(--muted) }
.ap-seat select, .ap-seat input[type=number] { width: auto; padding: 6px 8px; font-size: .9rem; min-height: 36px }
.ap-seat input[type=number] { width: 4.5rem }
.ap-crumb { margin-left: auto; font-size: .88rem; color: var(--focus); font-weight: 600 }
/* the hero: one maple field per app, its picture on the right */
.ap-hero { border-radius: 24px; background: var(--ap-field); color: var(--ap-on); padding: clamp(22px, 4vw, 44px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 32px; align-items: center; overflow: hidden; min-height: 230px }
.ap-hero h1 { font: 600 clamp(2.3rem, 5.4vw, 3.6rem)/1.02 var(--f-display); letter-spacing: -.035em; color: var(--ap-on) }
.ap-hero p { max-width: 36ch; font-size: 1.02rem; line-height: 1.55; color: var(--ap-on-soft); margin-top: 12px }
.ap-hero .ap-who { margin: 0 0 10px; font-size: .86rem; font-weight: 600; color: var(--ap-on-soft) }
.ap-wave { width: 100%; height: auto; max-height: 170px; fill: var(--ap-wave) }
@media (prefers-reduced-motion: no-preference) {
  :root:not([data-motion="reduce"]) .ap-wave rect { transform-box: fill-box; transform-origin: center; animation: ap-rise .7s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i) * 14ms) }
  @keyframes ap-rise { from { transform: scaleY(.08); opacity: .3 } }
}
.ap-fan { position: relative; height: 200px; max-width: 400px; width: 100%; justify-self: center }
.ap-fan .fc { position: absolute; left: 50%; top: 50%; width: 176px; height: 124px; margin: -62px 0 0 -88px; border-radius: 16px; background: var(--ap-fc); color: var(--ap-fc-ink); box-shadow: var(--ap-shadow); display: flex; flex-direction: column; justify-content: flex-end; padding: 14px 16px; gap: 2px }
.ap-fan .fc b { font: 600 2rem/1 var(--f-display); color: var(--ap-fc-num); font-variant-numeric: tabular-nums }
.ap-fan .fc span { font-size: .82rem; font-weight: 600 }
.ap-fan .fc2, .ap-fan .fc3 { justify-content: flex-start; align-items: flex-end; text-align: right }
.ap-fan .fc2 b, .ap-fan .fc3 b { font-size: 1.25rem }
.ap-fan .fc2 span, .ap-fan .fc3 span { font-size: .72rem }
.ap-fan .fc3 { transform: translate(132px, -40px) rotate(12deg) }
.ap-fan .fc2 { transform: translate(52px, -18px) rotate(5deg) }
.ap-fan .fc1 { transform: translate(-48px, 10px) rotate(-4deg) }
.ap-fan .fc1 b { font-size: 2.6rem }
/* the tiles: an icon, then what the tile does */
.ap-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; margin-top: 4px }
.ap .app-tile, :root[data-apppage] .lib-grid .app-tile { flex-direction: row; align-items: flex-start; gap: 14px; padding: 18px; min-height: 108px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line) }
.ap .app-tile:not(:disabled):hover, :root[data-apppage] .lib-grid .app-tile:not(:disabled):hover { border-color: var(--maple) }
:root[data-apppage] .app-tile .ap-tt { display: flex; flex-direction: column; gap: 4px; min-width: 0 }
:root[data-apppage] .app-tile b { font: 600 1.1rem/1.25 var(--f-display) }
.ap-ico { flex: none; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--maple-soft); color: var(--maple) }
:root[data-apppage] .app-tile:disabled .ap-ico { background: var(--soft); color: var(--muted) }
.ap .ap-grid .app-tile:first-child { background: var(--maple-soft); border-color: transparent }
.ap .ap-grid .app-tile:first-child .ap-ico { background: var(--maple); color: var(--on-maple) }
:root[data-apppage] main.wrap > .stack > .card, :root[data-apppage] main.wrap > .card, :root[data-apppage] .ap > .card { border-radius: 20px; padding: 20px }
:root[data-apppage] .rv-card { border-radius: 18px; box-shadow: 0 1px 0 var(--line) }
:root[data-apppage] .card h1 { font-size: 1.7rem; letter-spacing: -.02em }
@media (max-width: 720px) {
  .ap-hero { grid-template-columns: minmax(0, 1fr); min-height: 0 }
  .ap-wave { max-height: 96px }
  .ap-fan { height: 170px; max-width: 100% }
  .ap-fan .fc { width: 140px; height: 104px; margin: -52px 0 0 -70px }
  .ap-fan .fc3 { transform: translate(68px, -28px) rotate(10deg) } .ap-fan .fc2 { transform: translate(14px, -12px) rotate(4deg) } .ap-fan .fc1 { transform: translate(-50px, 10px) rotate(-4deg) }
  .ap-fan .fc2 span, .ap-fan .fc3 span { font-size: .68rem }   /* SW-130 look: the fan fitted inside a phone's hero (the third card ran off it) */
  .ap-crumb { margin-left: 0 }
}
@media (min-width: 900px) { .ap-grid.ap-g5 { grid-template-columns: repeat(3, minmax(0, 1fr)) } .ap-grid.ap-g5 > .app-tile:first-child { grid-column: span 2 } }   /* SW-127: five Cards tiles, «Ôn hôm nay» twice as wide */
.dc-entry .wp-ipa { font-size: 1.05rem; color: var(--muted) } .rv-hint { color: var(--ok); font-weight: 600 } .rv-leech { margin-top: 10px } .tk-log { padding-left: 1.2em; margin: 8px 0 } .tk-log li { margin-bottom: 10px; overflow-wrap: anywhere } .tk-q, .tk-a, .tk-now { margin: 4px 0 } .tk-now { font-size: 1.1rem; padding: 10px 12px; background: var(--soft); border-radius: 10px } .tk-topic { font-size: 1.2rem } .pt { margin-top: 10px } .pt-svg { width: 100%; height: auto; max-height: 150px; display: block; background: var(--soft); border-radius: 10px } .pt-svg polyline { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round } .pt-model polyline { stroke: var(--listen); stroke-dasharray: 6 4 } .pt-me polyline { stroke: var(--maple) } .pt-mid { stroke: var(--line); stroke-width: 1 } .pt-k { display: inline-block; width: 18px; height: 0; border-top: 3px solid var(--maple); vertical-align: middle; margin: 0 4px 0 8px } .pt-km { border-top: 3px dashed var(--listen) } .bdg-list { list-style: none; padding: 0; margin: 6px 0; display: flex; flex-wrap: wrap; gap: 6px } .bdg.on { border: 1px solid var(--line, #ccc); border-radius: 999px; padding: 4px 10px; font-size: .85rem } .bdg.on span { color: var(--warn, #c80) } .bdg-cls-l { padding-left: 1.1em; overflow-wrap: anywhere } .bdg-cls summary { min-height: 44px; padding: 11px 0; box-sizing: border-box; cursor: pointer } .rv-pic { display: block; max-width: 100%; max-height: 260px; margin: 8px auto; border-radius: 10px; background: #fff } .rv-pic-s { max-height: 140px } .rv-hintbox { margin-top: 10px } .rv-hintbox summary { cursor: pointer; min-height: 44px; padding: 11px 0; box-sizing: border-box; font-size: .9rem } .rv-hintf textarea { width: 100%; box-sizing: border-box; font: inherit; min-height: 3.2em; padding: 8px } .rv-hintsh { display: flex; gap: 8px; align-items: center; min-height: 44px } .rv-type { margin-top: 8px }
:root[data-apppage] .lib-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)) }
/* an app's own screens: the maple stripe on the screen's title card, maple for the chosen segment, the eyebrow in plain case */
:root[data-apppage] main.wrap:not(:has(> .ap)) .card:has(> h1) { box-shadow: inset 0 5px 0 var(--maple); padding-top: 24px }
:root[data-apppage] .eyebrow { text-transform: none; letter-spacing: 0; font-size: .84rem; color: var(--maple) }
:root[data-apppage] .seg button[aria-pressed="true"] { background: var(--maple); border-color: var(--maple); color: var(--on-maple) }
:root[data-apppage] .ib-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); column-gap: 24px }
/* SW-129 (row 6): the streak and the five-week calendar */
.stk-n { font: 600 1.05rem var(--f-display) } .stk-n b { font-size: 1.6rem; color: var(--maple) }
.stk-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; max-width: 22rem }
.stk-h { font-size: .7rem; color: var(--muted); text-align: center; font-weight: 600 }
.stk-d { text-align: center; font-size: .78rem; padding: 6px 0; border-radius: 8px; background: var(--soft); color: var(--muted); font-variant-numeric: tabular-nums }
.stk-d.on { background: var(--maple); color: var(--on-maple); font-weight: 700 }
.stk-d.today { outline: 2px solid var(--ink); outline-offset: -2px }
.stk-d.later { background: transparent }
.obx { align-self: flex-start }
/* Admin → Test: the two doors */
.ap-entry-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px }
.ap-door { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); text-decoration: none }
.ap-door:hover { border-color: var(--maple) }
.ap-door b { display: block; font: 600 1.05rem var(--f-display) }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; display: flex; flex-direction: column; gap: 12px; min-width: 0 }
.eyebrow { font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted) }
.btn { appearance: none; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: 600 .95rem var(--f-body); padding: 12px 16px; border-radius: 10px; cursor: pointer; min-height: 46px }
.btn.primary { background: var(--maple); border-color: var(--maple); color: var(--on-maple) }
.btn.block { width: 100% }
.btn:disabled { opacity: .5; cursor: default }
.btn.link { border: 0; background: none; padding: 6px 0; min-height: 0; color: var(--focus); font-weight: 500 }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px }
.pick { display: grid; gap: 10px }
.pick .btn { text-align: left; display: flex; justify-content: space-between; align-items: center; gap: 8px }
.chip { display: inline-flex; align-items: center; gap: 4px; font-size: .78rem; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--bg); color: var(--muted); border: 1px solid var(--line); white-space: nowrap }
.chip.ok { background: var(--ok-soft); color: var(--ok); border-color: transparent }
.chip.warn { background: var(--warn-soft); color: var(--warn); border-color: transparent }
.chip.bad { background: var(--maple-soft); color: var(--maple); border-color: transparent }
.note { background: var(--warn-soft); color: var(--warn); border-radius: 10px; padding: 10px 12px; font-size: .85rem }
/* week grid: 7 columns of day + two toggles */
.week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px }
.day { display: flex; flex-direction: column; align-items: stretch; gap: 4px; text-align: center }
.day .d { font-size: .72rem; color: var(--muted); font-weight: 600 }
.day.today .d { color: var(--maple) }
.tick { border: 1px solid var(--line); background: var(--bg); color: var(--muted); border-radius: 8px; font: 700 .8rem var(--f-body); padding: 8px 0; cursor: pointer }
.tick[aria-pressed="true"] { background: var(--ok); border-color: var(--ok); color: #fff }
.tick:disabled { opacity: .35; cursor: default }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: .8rem; color: var(--muted) }
/* form */
.q { display: flex; flex-direction: column; gap: 8px; padding-block: 4px }
.q > label, .q > .ql { font-weight: 600 }
.seg { display: flex; flex-wrap: wrap; gap: 6px }
.seg button { flex: 1 0 auto; min-width: 2.6rem; border: 1px solid var(--line); background: var(--bg); color: var(--ink); font: 600 .95rem var(--f-body); padding: 10px 10px; border-radius: 9px; cursor: pointer }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink) }
.seg.days button { min-width: 0; flex: 1 1 0; padding: 10px 0 }
input[type=text], input[type=password], input[type=number], input[type=search], input[type=date], textarea, select { width: 100%; font: 400 1rem var(--f-body); color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px }
textarea { min-height: 4.5rem; resize: vertical }
.hint { font-size: .8rem; color: var(--muted) }
.prefill { font-size: .78rem; color: var(--ok) }
details > summary { cursor: pointer; font-weight: 600; padding-block: 4px }
.sticky-submit { position: sticky; bottom: 0; padding-block: 10px calc(10px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(transparent, var(--bg) 30%) }
/* aide */
.rows { display: flex; flex-direction: column; gap: 10px }
.row { border: 1px solid var(--line); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 8px; background: var(--surface) }
.row-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap }
.seatcode { font: 600 1.05rem var(--f-display) }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr)); gap: 6px 12px; font-size: .85rem }
.facts b { display: block; font-size: .7rem; color: var(--muted); font-weight: 600; letter-spacing: .04em; text-transform: uppercase }
.facts .mismatch { color: var(--maple); font-weight: 700 }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px }
.checks { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .9rem }
.checks label { display: inline-flex; gap: 6px; align-items: center }
.hw-item { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; padding-block: 8px; border-top: 1px solid var(--line) }
.hw-item:first-of-type { border-top: 0 }
.hw-item .n { font-weight: 700; color: var(--maple); font-size: .8rem; padding-top: 2px }
.words { width: 100%; border-collapse: collapse; font-size: .9rem }
.words td { padding: 6px 4px; border-top: 1px solid var(--line); vertical-align: top }
.words td:first-child { font-weight: 600; white-space: nowrap; padding-right: 10px }
.tablewrap { overflow-x: auto; margin-inline: -4px }
table.aide { width: 100%; border-collapse: collapse; font-size: .85rem; min-width: 0 }
table.aide th, table.aide td { padding: 7px 5px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; white-space: nowrap }
table.aide thead th { font-size: .68rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); line-height: 1.25 }
table.aide thead th .muted { text-transform: none; letter-spacing: 0 }
table.aide tr.flag > th { box-shadow: inset 3px 0 0 var(--maple) }
table.aide tr.detail td { white-space: normal; max-width: 0; background: var(--bg); display: table-cell }
table.aide tr.detail td > * + * { margin-top: 6px }
.seatbtn { border: 0; background: none; color: var(--ink); font: 600 .95rem var(--f-display); padding: 4px 2px 4px 6px; cursor: pointer; text-decoration: underline dotted var(--muted) }
.mark { font-size: .8rem; font-weight: 700; margin-left: 2px } .mark.ok { color: var(--ok) } .mark.warn { color: var(--warn) }
table.aide td > select:not(.appsel) { min-width: 7.5rem }   /* Admin seats: never squeeze a dropdown to «T'» on a phone; the table scrolls instead (9 Oct) */
/* SW-52 (teacher 14 Oct): the global `select { width: 100% }` made each Admin dropdown fill its whole cell, so the «· now / next» line after
   the Lesson dropdown ran out of its nowrap cell over «Projected Schedule», and Track was squeezed to «T1-A · mai». A dropdown in this
   table is as wide as its longest option; the now / next line sits UNDER it (as SW-49 meant). */
table.aide td > select:not(.appsel) { width: auto }
table.aide .les-cur { display: block; margin-top: 3px }
.td-rc { line-height: 1.15 }
.appsel { width: auto; padding: 4px 6px; font-size: .9rem; margin-left: 4px; border-radius: 7px }
.bad { color: var(--maple); font-weight: 700 }
/* home: one column on phones, two on desktop */
.home-grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr) }
.home-grid .col { display: flex; flex-direction: column; gap: 16px; min-width: 0 }
.hw-item .body { display: flex; flex-direction: column; gap: 6px; min-width: 0 }
.hw-item .body p, .hw-item .body li { overflow-wrap: anywhere }   /* SW-155 (A351): a bare URL in mục 3 pushed the page 8 px sideways at 375 px */
@media (max-width: 479px) { .stk-row { grid-template-columns: minmax(0, 1fr) auto auto } .stk-row .stk-dots { grid-column: 1 / -1; order: 4 } }   /* SW-155: the 14-day row was 415 px wide in a 278 px card */
ul.steps { margin: 0; padding-left: 1.1rem; font-size: .85rem; display: flex; flex-direction: column; gap: 3px }
ul.steps li.no { list-style: none; margin-left: -1.1rem; color: var(--maple) }
ul.steps li.no::before { content: "✗ "; font-weight: 700 }
ul.steps.ex { color: var(--muted) }
.actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center }
.small-btn { min-height: 38px; padding: 7px 12px; font-size: .85rem; text-decoration: none; display: inline-flex; align-items: center }
.proof-wrap { display: flex; flex-direction: column; gap: 4px }
/* SW-64: the site's own card review */
.rv-card { border: 1px solid var(--line); border-radius: 12px; padding: 20px 16px; margin: 12px 0; text-align: center }
.rv-front { font-size: 1.35rem; line-height: 1.5; margin: 6px 0 }
.rv-gap { display: inline-block; min-width: 4ch; border-bottom: 2px solid var(--maple); color: transparent }
.rv-item { font-size: 1.4rem; font-weight: 700; margin: 10px 0 2px; display: flex; gap: 8px; justify-content: center; align-items: center }
.rv-vn { font-size: 1.1rem; margin: 6px 0 }
.cp-bar { display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: var(--soft, rgba(127,127,127,.18)); margin: 8px 0 } .cp-bar .k { background: #2f7a3a } .cp-bar .l { background: #d39b2a } .cp-day { display: inline-block; min-width: 1.6em; text-align: center; font-variant-numeric: tabular-nums }   /* SW-98 */
/* SW-133 (wave 3): shadowing, dictation, read aloud, the sound profile */
.eco-list { padding-left: 20px; margin: 0 } .eco-row { margin: 10px 0; padding-bottom: 8px; border-bottom: 1px solid var(--line) } .eco-row p { margin: 0 0 6px; font-size: 1.05rem }
.dt-line { font-size: 1.1rem; line-height: 1.9 } .dt-line s { margin: 0 4px } mark.dt-bad { background: var(--maple-soft); color: var(--maple); font-weight: 700; padding: 0 3px; border-radius: 4px }
.dt-why, .dt-tally { padding-left: 18px } .dt-why li, .dt-tally li { margin: 4px 0 } #dt-in { font-size: 1.05rem }
.ra-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 8px; margin: 6px 0 12px } .ra-pick { display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 2px; white-space: normal }
.ra-text { font-size: 1.1rem; line-height: 1.7; margin: 8px 0 12px } .ra-text p { margin: 0 0 6px } .ra-wpm b { font: 600 1.8rem var(--f-display); color: var(--maple) } .sp-prof { margin-top: 6px }
/* SW-132 (wave 3): search, real examples, paste → gapped cards, CSV */
.sr-row { display: flex; gap: 8px; align-items: center; margin-top: 6px } .sr-row input { flex: 1 1 auto; min-width: 0 } .sr-sec { margin-top: 14px } .sr-sec h2 { font-size: 1.05rem }
.sr-ibq { display: flex; flex-direction: column; gap: 6px; align-items: flex-start } .sr-ibq .btn { text-align: left; white-space: normal }
.ex-list { padding-left: 18px; margin: 4px 0 } .ex-list li { margin: 4px 0 } .dc-ex { margin: 8px 0 }
.ps-sents { line-height: 2.1 } .ps-s { margin: 6px 0 } .ps-w { font: inherit; border: 1px solid transparent; background: none; color: var(--ink); padding: 2px 3px; border-radius: 6px; cursor: pointer; min-height: 32px }
.ps-w:hover { border-color: var(--line) } .ps-w[aria-pressed="true"] { background: var(--maple); color: var(--on-maple); border-color: var(--maple) } #ps-text { width: 100%; box-sizing: border-box }
.my-acts { flex-wrap: wrap; gap: 6px }
/* SW-131 (wave 3): the forecast, the goals, the timed review, the swipe */
.fc { display: flex; gap: 6px; align-items: stretch; height: 84px; max-width: 24rem; margin: 6px 0 10px }
.fc-d { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 2px; min-width: 0 }
.fc-d i { display: block; width: 100%; min-height: 2px; background: var(--maple); border-radius: 4px 4px 0 0; max-height: 52px } .fc-d b { font-size: .8rem } .fc-d small { font-size: .74rem; color: var(--muted) }
.goal-bar { height: 12px; border-radius: 6px; overflow: hidden; background: var(--soft, rgba(127,127,127,.18)); margin: 6px 0 } .goal-bar i { display: block; height: 100%; background: var(--ok) }
.g2-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px } .g2-form input { width: auto; min-width: 7rem } .cp-g2, .cp-fc { margin: 10px 0 } .rv-timed { align-items: center; margin: 8px 0 }
.rv-card { touch-action: pan-y } .rv-card.rv-swr { box-shadow: inset -6px 0 0 var(--ok) } .rv-card.rv-swl { box-shadow: inset 6px 0 0 var(--maple) } .rv-clock { margin-left: 6px }
.rv-says { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 6px 0 }   /* SW-98 */
.rv-x { text-align: left; max-width: 34rem; margin: 8px auto 4px; line-height: 1.5 } .rv-x p { margin: 3px 0 } .rv-ex i { font-style: italic }   /* SW-96 (A108) */
.rv-grade { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 14px }
.rv-grade .btn { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 4px }
.rv-grade small { font-weight: 400; opacity: .8 }
.rv-grade.rv-grade2 { grid-template-columns: repeat(2, 1fr) }   /* A88: the extra round's two buttons */
.rv-g1 { border-color: var(--maple) } .rv-g4 { border-color: var(--ok) }
/* SW-109: Maple Cards «Học & kiểm tra» */
.qz-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 8px; margin-top: 10px }
.qz-set { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; padding: 10px 12px }
.chip.warn { background: var(--warn-soft); color: var(--warn) }
.qz-opts { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 12px }
@media (min-width: 560px) { .qz-opts { grid-template-columns: 1fr 1fr } }
.qz-gap { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 12px } .qz-gap input { min-width: 0; flex: 1 1 14rem; max-width: 24rem; font-size: 1.1rem; padding: 8px 10px }
.qz-match { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 10px 0; text-align: left } .qz-match > div { display: flex; flex-direction: column; gap: 6px }
.qz-match .btn { text-align: left; white-space: normal; height: auto; display: flex; flex-direction: column; align-items: flex-start } .qz-match small { opacity: .8 }
.qz-on { outline: 3px solid var(--focus); outline-offset: 1px } .qz-paired { opacity: .75 }
.qz-right, .qz-right:disabled { border-color: var(--ok); background: var(--ok-soft); color: var(--ink); opacity: 1 } .qz-wrong, .qz-wrong:disabled { border-color: var(--maple); background: var(--maple-soft); color: var(--ink); opacity: 1 }
.qz-not { color: var(--maple) }
#qz-gram .qz-list { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) } .qz-gset b { font-size: .95rem } .qz-rule { margin: 8px 0 0; padding: 10px 12px; border-left: 3px solid var(--maple); background: var(--soft); border-radius: 6px; line-height: 1.5 } .qz-why { margin: 6px auto 0; max-width: 34rem }   /* SW-111 */
.qz-ahead { margin-top: 12px } .qz-ahead > summary { cursor: pointer; padding: 6px 0 } .qz-rec { color: var(--maple); border-color: var(--maple) }   /* SW-121 */
.mp-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0 } .mp-opt { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 18px 10px; font-size: 1.25rem } .mp-miss p { margin: 4px 0 }   /* SW-122 */
.lib-sets { display: grid; gap: 8px; margin-top: 10px } .lib-set { border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px } .lib-set > summary { cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; padding: 4px 0 }
.lib-cards { list-style: none; padding: 0; margin: 8px 0 12px } .lib-cards li { padding: 6px 0; border-top: 1px solid var(--line) } .lib-body .qz-rule { margin-bottom: 4px }   /* SW-123 */
.wp-hits { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; margin: 10px 0 } .wp-hit { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; white-space: normal }
.wp-word { font-size: 2.2rem; font-weight: 700; margin: 6px 0 0 } .wp-ipa { font-size: 1.3rem; margin: 2px 0 6px } #wp-q { width: 100%; max-width: 28rem }   /* SW-124 */
.qz-fb { font-weight: 700; margin: 12px 0 6px } .qz-fb.good { color: var(--ok) } .qz-fb.bad { color: var(--maple) }
.qz-score { font-size: 1.3rem; margin: 4px 0 } .qz-miss { text-align: left; max-width: 34rem; margin: 10px auto 0 } .qz-miss p { margin: 4px 0 }
/* A61: the endings drill */
.dr-opts { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 10px 0 }
.dr-opt { min-width: 7rem; font-size: 1.05rem }
.dr-opt.right, .dr-opt.right:disabled { background: var(--ok); border-color: var(--ok); color: #fff; opacity: 1 }
.dr-opt.wrong, .dr-opt.wrong:disabled { border-color: var(--maple); color: var(--maple); opacity: 1 }
.dr-fb { margin: 6px 0 } .dr-fb.ok { color: var(--ok); font-weight: 700 } .dr-fb.no { color: var(--maple); font-weight: 700 } .dr-fb .muted { font-weight: 400 }
.dr-q { margin: 14px 0 2px; font-weight: 600 }
.dr-say { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; margin: 14px 0 8px }
.dr-say .rec-audio { width: 100%; max-width: 360px }
.dr-mark { align-items: center; gap: 6px; flex-wrap: wrap }
/* A67: Lessons by track; A66: consent switches */
.les-trk { margin: 12px 0 } .les-trk button { flex: 0 1 auto }
.les-trk button:disabled { opacity: .45; cursor: default }
.les-sk { margin: -4px 0 8px } .les-sk button { flex: 0 1 auto; font-size: .85rem; padding: 6px 10px }
.les-unit-h { font-size: 1.05rem; margin: 18px 4px 8px }
/* SW-172: Lessons drawn as the Roadmap's S · L · W · R cycle (colours from roadmap/t1.html) */
:root { --sk-S: #b0305c; --sk-L: #1d6e8a; --sk-W: #6a4fa3; --sk-R: #3a7a36; --sk-Sbg: #f7e6ec; --sk-Lbg: #e3f0f5; --sk-Wbg: #eee8f7; --sk-Rbg: #e5f1e3; --sk-Tbg: #e6e8ec }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --sk-S: #e0739a; --sk-L: #5fb4d2; --sk-W: #a78be0; --sk-R: #7cc275; --sk-Sbg: #3a1f2a; --sk-Lbg: #18313b; --sk-Wbg: #2a2340; --sk-Rbg: #1e3320; --sk-Tbg: #2a2f39 } }
:root[data-theme="dark"] { --sk-S: #e0739a; --sk-L: #5fb4d2; --sk-W: #a78be0; --sk-R: #7cc275; --sk-Sbg: #3a1f2a; --sk-Lbg: #18313b; --sk-Wbg: #2a2340; --sk-Rbg: #1e3320; --sk-Tbg: #2a2f39 }
.les-cy { display: grid; grid-template-columns: 40px repeat(4, minmax(0, 1fr)); gap: 8px; align-items: stretch }
.les-cy-hd { font-weight: 700; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; text-align: center; padding: 4px 0 }
.les-cy-hd.les-sk-S { color: var(--sk-S) } .les-cy-hd.les-sk-L { color: var(--sk-L) } .les-cy-hd.les-sk-W { color: var(--sk-W) } .les-cy-hd.les-sk-R { color: var(--sk-R) }
.les-cy-rn { font: 500 .75rem/1 ui-monospace, monospace; color: var(--muted); display: flex; align-items: center }
.les-cy-cell > .les-card { height: 100%; margin: 0; border-left: 4px solid transparent }
.les-cy-cell.les-sk-S > .les-card { background: var(--sk-Sbg); border-left-color: var(--sk-S) } .les-cy-cell.les-sk-L > .les-card { background: var(--sk-Lbg); border-left-color: var(--sk-L) }
.les-cy-cell.les-sk-W > .les-card { background: var(--sk-Wbg); border-left-color: var(--sk-W) } .les-cy-cell.les-sk-R > .les-card { background: var(--sk-Rbg); border-left-color: var(--sk-R) }
.les-cy .les-card { padding: 12px } .les-cy .les-card h3 { font-size: .95rem } .les-cy .les-card .actions .btn { padding: 4px 8px; font-size: .78rem }
.les-ftbar { grid-column: 2 / -1; background: var(--sk-Tbg); border-radius: 10px; padding: 10px 14px; display: flex; flex-direction: column; gap: 6px }
.les-ftbar-h { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap } .les-ftbar-h b { letter-spacing: .04em }
.les-ftbar-rows { display: flex; flex-direction: column; gap: 6px } .les-ftbar .ft-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center } .les-ftbar .ft-row b { font-weight: 600; font-size: .9rem; margin-right: 4px }
@media (max-width: 900px) { .les-cy { grid-template-columns: minmax(0, 1fr) } .les-cy-rn, .les-cy-hd, .les-cy-empty { display: none } .les-ftbar { grid-column: 1 } }
.les-guest .actions { display: flex; flex-wrap: wrap; gap: 8px }
.consent-sec { margin-top: 16px } .vc-grid { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 6px } .vc-item { display: inline-flex; gap: 6px; align-items: center }
.rv-done { font-size: 1.3rem; font-weight: 700; color: var(--ok); margin: 18px 0 6px }
/* SW-64: record → listen back (the student's home) */
#rec-card input { margin: 4px 0 10px }
.rec-row [aria-pressed=true] { background: var(--ok-soft); border-color: var(--ok) }
.rec-audio { width: 100%; margin: 6px 0; height: 40px }
.rec-row { display: flex; gap: 8px; flex-wrap: wrap }
.rec-list { list-style: none; padding: 0; margin: 10px 0 0 }
.rec-item { border-top: 1px solid var(--line); padding: 8px 0 }
.rec-on { background: var(--maple); color: var(--on-maple); border-color: var(--maple) }
.rec-on:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px }
.proof { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px; border: 1px dashed var(--line); border-radius: 10px; min-height: 64px; align-items: center }
.proof.over { border-color: var(--focus); background: var(--bg) }
.thumb { position: relative; width: 64px; height: 64px; border-radius: 8px; overflow: hidden; border: 1px solid var(--line) }
.thumb img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; display: block }
.thumb .x { position: absolute; top: 2px; right: 2px; border: 0; border-radius: 6px; background: var(--ink); color: var(--bg); font: 700 .75rem var(--f-body); padding: 1px 6px; cursor: pointer }
.thumb .x.sure { background: var(--maple); color: var(--on-maple) }
.addimg { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 8px; background: var(--bg); color: var(--muted); font: 600 .85rem var(--f-body); cursor: pointer; border: 1px solid var(--line) }
.next { border-top: 1px solid var(--line); padding-top: 12px; display: flex; flex-direction: column; gap: 8px; scroll-margin-top: 64px }
.proof.flat { border: 0; padding: 0; min-height: 0 }
.pfig { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: .72rem; color: var(--muted) }
.lightbox { position: fixed; inset: 0; z-index: 30; background: rgba(0,0,0,.85); display: flex; align-items: center; justify-content: center; padding: 16px; cursor: zoom-out }
.lightbox img { max-width: 100%; max-height: 100%; border-radius: 8px }
.seg.vert { flex-direction: column } .seg.vert button { text-align: left; font-weight: 500 }
.seg button.right { background: var(--ok); border-color: var(--ok); color: #fff }
.seg button.wrong { background: var(--maple); border-color: var(--maple); color: var(--on-maple) }
.quiz fieldset { border: 0; padding: 0; margin: 0; border-top: 1px solid var(--line); padding-top: 12px }
.quiz legend { padding: 0; margin-bottom: 8px }
.unsure { color: var(--muted) } .okc { color: var(--ok); font-weight: 700 }
.linkish { border: 0; background: none; color: var(--focus); font: inherit; cursor: pointer; padding: 0 }
.wide-only { display: none }
.aide-wide { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "table" "side" }
.a-head { grid-area: head } .a-table { grid-area: table; min-width: 0 } .a-side { grid-area: side; display: flex; flex-direction: column; gap: 16px }
@media (min-width: 900px) {
  .wrap, .bar-in, .back-in { max-width: 76rem }
  .home-grid { grid-template-columns: 24rem minmax(0, 1fr); align-items: start }
  .home-grid .col:first-child { position: sticky; top: calc(64px + env(safe-area-inset-top, 0px)) }
  form#rf, form.quiz, form#pwf, .wrap > .card:only-child:not(.rm-card) { max-width: 44rem; width: 100%; margin-inline: auto }
  .hw-item { grid-template-columns: 4rem 1fr; padding-block: 12px }
  .thumb, .addimg { width: 88px; height: 88px }
  .wide-only { display: table-cell }
  .narrow-only { display: none }
  table.aide { font-size: .9rem }
  .aide-wide { grid-template-columns: minmax(0, 1fr) 20rem; grid-template-areas: "table head" "table side"; grid-template-rows: auto 1fr; align-items: start }
}
/* next-session vocabulary + grammar */
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-top: 4px }
ol.vocab { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px }
ol.vocab li { background: var(--bg); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0 }
ol.vocab .w { font: 600 1.02rem var(--f-display); letter-spacing: -0.005em }
ol.vocab .m { font-size: .9rem }
ol.vocab .vnote { font-size: .8rem; color: var(--muted) }
ol.vocab .ex { font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums }
.gram { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px }
.gcard { background: var(--bg); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; min-width: 0 }
.gcard h4 { margin: 0; font: 600 .98rem var(--f-display); display: flex; gap: 8px; align-items: baseline; text-wrap: balance }
.gnum { flex: none; display: inline-grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--ink); color: var(--bg); font-size: .75rem; transform: translateY(-1px) }
.gcard p { line-height: 1.55 }
ul.gex { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px }
ul.gex li.pair { display: grid; grid-template-columns: minmax(0, 1.1fr) auto minmax(0, 1fr); gap: 8px; align-items: baseline; font-size: .88rem }
ul.gex .from { font-style: italic; color: var(--muted); min-width: 0 }
ul.gex .arr { color: var(--maple); font-weight: 700 }
ul.gex .to { font-weight: 700; font-variant-numeric: tabular-nums }
ul.gex li.solo { font-size: .88rem; font-style: italic }
.hw-what { margin: 0; line-height: 1.5 } .hw-done { margin: 0; padding: 6px 10px; border-radius: 8px; background: var(--ok-soft); color: var(--ink) } .hw-done b { color: var(--ok) }
.pw-show { font-size: .82rem; padding: 2px 6px; border-radius: 6px; background: var(--bg); border: 1px solid var(--line); user-select: all }
ol.steps { margin: 0; padding-left: 1.3rem; font-size: .85rem; display: flex; flex-direction: column; gap: 3px }
p.dont { color: var(--maple) }
@media (min-width: 560px) { ol.vocab { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (min-width: 1100px) { .gram { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
ul.gpts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: .9rem; line-height: 1.5 }
ul.gpts li.line { padding-left: 14px; position: relative }
ul.gpts li.line::before { content: ""; position: absolute; left: 2px; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: var(--muted) }
ul.gpts li.pair { display: grid; grid-template-columns: minmax(0, 1.1fr) auto minmax(0, 1fr); column-gap: 8px; align-items: baseline; background: var(--surface); border-radius: 8px; padding: 6px 10px }
ul.gpts .pnote { grid-column: 1 / -1; font-size: .82rem; color: var(--muted); padding-top: 2px }
ul.gpts .from { font-style: italic } ul.gpts .arr { color: var(--maple); font-weight: 700 } ul.gpts .to { font-weight: 700; font-variant-numeric: tabular-nums }
.gex-wrap { display: flex; flex-direction: column; gap: 4px; border-top: 1px solid var(--line); padding-top: 8px }
.pr-frame { width: 100%; height: 34rem; border: 1px solid var(--line); border-radius: 10px; background: #fff }
.vbox:empty { display: none }
.rm-frame { width: 100%; height: calc(100vh / var(--z, 1) - 200px); min-height: 28rem; border: 1px solid var(--line); border-radius: 10px; background: var(--bg) }
@media (min-width: 900px) { .wrap:has(.rm-card) { max-width: 96rem } }
.rm-seg button { flex: 0 0 auto; padding: 7px 12px; font-size: .85rem }
[hidden] { display: none !important }
.tab { white-space: nowrap }
@media (max-width: 480px) { .brand span { display: none } .tab { padding: 6px 9px } }
.t-sm { display: none }
.tabs { min-width: 0; overflow-x: auto; scrollbar-width: none } .tabs::-webkit-scrollbar { display: none }
@media (max-width: 480px) { .tab { padding: 6px 8px; font-size: .78rem } .tabs { gap: 2px } .t-lg { display: none } .t-sm { display: inline !important } .bar-in:has(.tabs:not([hidden])) .brand { display: none } .bar-in:has(.tabs:not([hidden])) { justify-content: center } }
@media (max-width: 420px) { #tabs .tab { padding: 6px 5px; font-size: .7rem } #tabs { gap: 1px } .dispbtn { width: 34px; height: 34px } .bar-right { gap: 6px } }   /* SW-32: five staff tabs (Lessons is back) fit a 360 px phone, Sign out included */
@media (max-width: 380px) { #tabs .tab { padding: 6px 3px; font-size: .68rem } #tabs { gap: 0 } }
.rm-card.rm-max { position: fixed; inset: 0; z-index: 25; border-radius: 0; padding: calc(10px + env(safe-area-inset-top, 0px)) 12px calc(10px + env(safe-area-inset-bottom, 0px)); max-width: none }
.rm-card.rm-max .rm-frame { height: auto; flex: 1; min-height: 0 }
.rm-card.rm-max #rm-back { display: none }
.rg-cards { display: flex; flex-direction: column; gap: 14px }
.rg-kv { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: 6px 12px; margin: 0; align-items: center }
.rg-kv dt { font-size: .78rem; font-weight: 600; color: var(--muted) } .rg-kv dd { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-width: 0 } .rg-kv dd.col { flex-direction: column; align-items: flex-start }
.mono-txt { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .86rem; overflow-wrap: anywhere }
.mono-in { font-family: ui-monospace, Menlo, Consolas, monospace; width: 15rem; max-width: 100% }
.rg-sites { display: grid; grid-template-columns: 9rem repeat(3, minmax(0, 1fr)); gap: 8px 12px; align-items: center; border-top: 1px solid var(--line); padding-top: 10px }
.rg-sites .h { font-size: .7rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted) }
.rg-sites .svc { display: flex; flex-direction: column; gap: 4px; align-items: flex-start }
.rg-date { display: flex; gap: 4px; align-items: center; min-width: 0 } .rg-date input { padding: 6px 8px; min-width: 0 }
.rg-sect > .btn.link { align-self: flex-start }
.rg-cap { display: none; font-size: .72rem; color: var(--muted); font-weight: 600 }
.rg-sect { border-top: 1px solid var(--line); padding-top: 10px; display: flex; flex-direction: column; gap: 6px } .rg-sect h4 { margin: 0; font: 600 .95rem var(--f-display) }
.rg-ho { background: var(--warn-soft); border-radius: 10px; padding: 12px; border: 0 }
.rg-hist { list-style: none; padding-left: 0 }
.chip.muted-chip { background: transparent } .chip.dashed { background: transparent; border: 1.5px dashed var(--warn); color: var(--warn) }
.rg-matrix td, .rg-matrix th { white-space: nowrap }
@media (max-width: 700px) { .rg-cap { display: block; flex-basis: 100% } .rg-date { flex-wrap: wrap } .rg-date input { flex: 1 } .rg-sites { grid-template-columns: minmax(0, 1fr) } .rg-sites .h { display: none } .rg-sites .svc { grid-column: 1 / -1; flex-direction: row } .rg-kv { grid-template-columns: 1fr } }
.who { display: inline-flex; align-items: center; gap: 8px; text-align: left }
.pdot { width: 12px; height: 12px; border-radius: 50%; flex: none; box-shadow: 0 0 0 1px rgba(0,0,0,.12) }
.seatcode-sm { font-size: .72rem; color: var(--muted); font-weight: 500 }
.seatbtn .who b { font-weight: 600 }
.seatgrid { grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)) }
.rg-color { width: auto; padding: 4px 8px; font-size: .85rem }
#tab-out { color: var(--maple) }
/* loading screen (teacher 9 Oct 22:19: "something related to maple leaves"): one leaf drifting down, the brand's own
   leaf and colour. The ONE place the leaf moves (FR 95 says never moving; this exception is the teacher's).
   Reduced motion: the leaf stands still. The page's corner leaf is not added to this card. */
.card.loading { align-items: center; text-align: center; padding-block: 28px 24px }
#app > .card.loading::after { display: none !important }
.leaf-fall { position: relative; width: 84px; height: 84px }
.leaf-fall svg { position: absolute; left: 22px; top: 6px; width: 40px; height: 40px; fill: var(--maple); transform: rotate(12deg) }
@media (prefers-reduced-motion: no-preference) {
  .leaf-fall svg { animation: leaf-drift 2.6s ease-in-out infinite }
  @keyframes leaf-drift {
    0%   { transform: translate(-14px, -6px) rotate(-10deg); opacity: 0 }
    15%  { opacity: 1 }
    35%  { transform: translate(12px, 12px) rotate(26deg) }
    60%  { transform: translate(-10px, 26px) rotate(-6deg) }
    85%  { opacity: 1 }
    100% { transform: translate(8px, 40px) rotate(18deg); opacity: 0 }
  }
}
/* Admin's two views (teacher 9 Oct 14:25): Report · Seats & settings, a pill switch like the tabs */
.subtabs { display: inline-flex; align-self: flex-start; gap: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 3px; margin-top: 12px }
.subtab { border: 0; background: transparent; color: var(--muted); font: 600 .9rem var(--f-body); padding: 8px 16px; border-radius: 999px; cursor: pointer; min-height: 38px; white-space: nowrap }
.subtab[aria-pressed="true"] { background: var(--ink); color: var(--bg) }
/* ---- Lịch dạy (teach.js, W-A53): money-free teaching desk ---- */
.td { display: grid; gap: 18px }
.td-top { display: grid; gap: 18px }
@media (min-width: 900px) { .td-top { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) } }
.td-today { display: grid; gap: 6px; margin-top: 8px }
.td-lesson { display: grid; grid-template-columns: auto minmax(0, 1fr) auto;   /* SW-46: the time is «start–end» now */ gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface) }
.td-who { display: inline-flex; gap: 8px; align-items: center; min-width: 0 }
.td-who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.td-pill { font-size: .72rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; white-space: nowrap; background: var(--bg); color: var(--muted) }
.td-pill.done { background: var(--ok-soft); color: var(--ok) } .td-pill.off { background: var(--maple-soft); color: var(--maple) }
.td-pill.warn { background: var(--warn-soft); color: var(--warn) } .td-pill.now { background: var(--focus); color: var(--surface) }
.td-pill.soon { background: color-mix(in srgb, var(--focus) 14%, var(--surface)); color: var(--focus) }
.td-planner textarea { width: 100%; min-height: 84px; resize: vertical; border: 1px solid var(--line); border-radius: 10px; padding: 10px; background: var(--bg); color: var(--ink); font: inherit }
.td-proposal { border: 1px dashed var(--focus); border-radius: 10px; padding: 12px; display: grid; gap: 8px; background: color-mix(in srgb, var(--focus) 7%, var(--surface)) }
.td-proposal ul { margin: 0; padding-left: 1.1rem; display: grid; gap: 3px }
.td-add { color: var(--ok) } .td-rem { color: var(--maple) } .td-chg { color: var(--focus) } .td-q { color: var(--warn); font-weight: 600; margin: 0 }
/* week grid: a horizontal time axis per day; scrolls sideways on a phone */
.td-week { --lane: 2.9rem; min-width: 760px; display: grid }   /* rem, so lanes grow with «Chữ to» (9 Oct) */
.td-row { display: grid; grid-template-columns: 54px minmax(0, 1fr); border-top: 1px solid var(--line) }
.td-row.weekend { background: color-mix(in srgb, var(--bg) 60%, transparent) }
.td-row.today { background: color-mix(in srgb, var(--focus) 8%, transparent) } .td-row.today .td-lbl b { color: var(--focus) }
.td-head { border-top: 0 } .td-head .td-track { height: 22px }
.td-lbl { display: flex; flex-direction: column; justify-content: center; padding: 2px 6px; font-size: .8rem; line-height: 1.15; cursor: pointer }   /* tight, so the row is exactly one lesson high: blocks no longer float (9 Oct) */
.td-track { position: relative; height: calc(var(--lanes, 1) * var(--lane)) }
.td-hour { position: absolute; top: 2px; transform: translateX(-50%); font-size: .66rem; color: var(--muted) } .td-hour.odd { font-weight: 400 }   /* no fade: it failed contrast (2.3:1), 9 Oct */
.td-gl { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line); opacity: .6 }
.td-now { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--maple); z-index: 2 }
.td-blk, .td-busy { position: absolute; height: var(--lane); border: 0; border-radius: 6px; padding: 3px 6px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 2px; overflow: hidden; line-height: 1.15; text-align: center; font: inherit ; line-height: 1.15}
.td-blk { background: var(--c); z-index: 1; cursor: pointer }
.td-blk.done { background: color-mix(in srgb, var(--c) 34%, #1b2220); color: #eef2f0 !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 70%, #1b2220) }   /* taught = deep, upcoming = bright, in light and dark alike (teacher 9 Oct: light was washed out) */
.td-blk.done .td-t::after { content: " ✓"; font-weight: 800 }   /* taught is marked, not only coloured */
.td-busy .td-t, .td-busy .td-n { background: var(--surface); color: var(--ink); padding: 0 6px; border-radius: 4px }
.td-blk.off { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--c) 22%, var(--surface)) 0 6px, var(--surface) 6px 12px); box-shadow: inset 0 0 0 1px var(--maple) } .td-blk.off .td-n { text-decoration: line-through }
.td-blk.now { box-shadow: inset 0 0 0 2px var(--focus) }
.td-busy { top: 0; bottom: 0; height: auto; background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--c) 70%, var(--surface)) 0 8px, color-mix(in srgb, var(--c) 45%, var(--surface)) 8px 16px) }
.td-t { font-size: .68rem; font-weight: 600; opacity: .85; white-space: nowrap; font-variant-numeric: tabular-nums }
.td-n { font-size: .8rem; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden }
/* the week as a list on phones (10 Oct): same data as the grid, one day under another */
.td-agenda { display: none; gap: 10px } .td-taptip { display: none }
.td-ad { display: grid; gap: 6px; padding-top: 8px; border-top: 1px solid var(--line) }
.td-ad.today .td-adh b { color: var(--focus) }
.td-adh { display: flex; gap: 8px; align-items: center; font-size: .9rem }
.td-ai { display: grid; grid-template-columns: 4px auto minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; width: 100%; text-align: left; font: inherit; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; cursor: pointer }
.td-ai .td-bar { align-self: stretch; border-radius: 2px; background: var(--c) }
.td-at { font-size: .82rem; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums }
.td-an { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.td-ai.done .td-bar { background: color-mix(in srgb, var(--c) 34%, #1b2220) }
.td-ai.off { opacity: .8 } .td-ai.off .td-an { text-decoration: line-through } .td-ai.off .td-bar { background: var(--maple) }
.td-ai.now { box-shadow: inset 0 0 0 2px var(--focus) }
.td-ai.busy { cursor: default; background: repeating-linear-gradient(135deg, var(--surface) 0 8px, color-mix(in srgb, var(--c) 18%, var(--surface)) 8px 16px) }
@media (max-width: 640px) {
  #td-root .tablewrap:has(> #tdWeek) { display: none }
  .td-agenda { display: grid } .td-dragtip { display: none } .td-taptip { display: inline }
  .td-ai { grid-template-columns: 4px minmax(0, 1fr) auto } .td-ai .td-at { grid-column: 2 } .td-ai .td-an { grid-column: 2 } .td-ai .td-pill { grid-column: 3; grid-row: 1 / span 2 } .td-ai .td-bar { grid-row: 1 / span 2 }
}
.td-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px } .td-legend span { display: inline-flex; gap: 6px; align-items: center }
.td-sw { width: 20px; height: 11px; border-radius: 3px; background: var(--c) } .td-sw.done { background: color-mix(in srgb, var(--c) 34%, #1b2220) }
.td-sw.off { background: repeating-linear-gradient(135deg, var(--maple-soft) 0 3px, transparent 3px 6px); box-shadow: inset 0 0 0 1px var(--maple) }
.td-sw.busy { background: repeating-linear-gradient(135deg, #ffcc99 0 3px, color-mix(in srgb, #ffcc99 50%, var(--surface)) 3px 6px) }
.td-missing { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; padding: 10px 12px; border-radius: 10px; background: var(--warn-soft); margin-top: 8px; font-size: .85rem }
.td-chip { font: inherit; font-size: .78rem; padding: 2px 8px; border-radius: 6px; border: 0; border-left: 3px solid var(--c); background: var(--surface); color: var(--ink); cursor: grab }
/* register */
.td-regrow { display: grid; gap: 6px; padding: 10px 0; border-top: 1px solid var(--line) }
@media (min-width: 900px) { .td-regrow { grid-template-columns: 160px minmax(0, 1fr) 150px; align-items: center } }
.td-cells { display: flex; flex-wrap: wrap; gap: 5px }
.td-rc { font: inherit; font-size: .78rem; min-width: 54px; padding: 4px 6px; border-radius: 6px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; line-height: 1.1; font-variant-numeric: tabular-nums }
.td-rc small { display: block; font-size: .62rem; color: var(--muted) }
.td-rc.done { background: var(--ok-soft); border-color: var(--ok); color: var(--ok) }
.td-rc.off { background: var(--maple-soft); border-color: var(--maple); color: var(--maple); text-decoration: line-through }
.td-rc.today { box-shadow: 0 0 0 2px var(--focus) }
.td-paints { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 6px }
.td-paint { font: inherit; font-size: .84rem; font-weight: 600; padding: 6px 14px; border-radius: 999px; cursor: grab; user-select: none; touch-action: manipulation; border: 1.5px solid }
.td-paint.off { background: var(--maple-soft); color: var(--maple); border-color: var(--maple) }
.td-paint.on { background: var(--ok-soft); color: var(--ok); border-color: var(--ok) }
.td-paint[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--focus); transform: scale(1.04) }
.td-armed .td-rc { touch-action: none; cursor: crosshair }
.td-rc.td-over, .td-rc.td-painted { box-shadow: 0 0 0 2px var(--focus); transform: scale(1.06) }
/* calendar + day panel */
.td-calgrid { display: grid; gap: 16px } @media (min-width: 900px) { .td-calgrid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) } }
/* teacher 11 Oct 14:37: Month = calendar (with the picked day under it) beside «Lessons this month»; a student row filters the calendar */
.td-mgrid { display: grid; gap: 18px; margin-top: 10px } @media (min-width: 1000px) { .td-mgrid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start } }
.td-mleft { display: grid; gap: 14px }
.td-mstu { display: grid; gap: 6px }
.td-mrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; text-align: left; font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; cursor: pointer }
.td-mrow:hover { border-color: var(--focus) } .td-mrow.on { border-color: var(--focus); box-shadow: inset 3px 0 0 var(--focus) }
.td-mtot { font-size: 1.15rem } .td-mbar { grid-column: 1 / -1 } .td-mnums { grid-column: 1 / -1 }
.td-mbar { display: flex; width: var(--w, 100%); height: 9px; border-radius: 999px; overflow: hidden; background: var(--bg); gap: 2px }
.td-mbar i { display: block; min-width: 0 } .td-mbar i.d { background: var(--ok) } .td-mbar i.s { background: color-mix(in srgb, var(--focus) 55%, var(--surface)) } .td-mbar i.o { background: color-mix(in srgb, var(--maple) 45%, var(--surface)) }
.td-mbar.sm { height: 7px; margin: 3px 0 }
.td-sw.mb { border-radius: 3px } .td-sw.mb.d { background: var(--ok) } .td-sw.mb.s { background: color-mix(in srgb, var(--focus) 55%, var(--surface)) } .td-sw.mb.o { background: color-mix(in srgb, var(--maple) 45%, var(--surface)) }
/* classes as rows: name · weekly · next · progress · students; ended classes folded */
.td-crow { display: grid; gap: 8px 16px; padding: 10px 12px 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); box-shadow: inset 4px 0 0 var(--c) }
@media (min-width: 1000px) { .td-crow { grid-template-columns: minmax(0, 1.2fr) minmax(0, .9fr) minmax(0, 1.1fr) minmax(0, 1.2fr) minmax(0, 1.4fr); align-items: start } }
.td-cname { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center } .td-cname .small { flex-basis: 100% }
.td-cc { display: grid; gap: 2px; font-size: .88rem; min-width: 0 }
.td-classes { grid-template-columns: 1fr !important }
.td-ended summary { cursor: pointer; color: var(--muted); padding: 6px 2px } .td-ended .td-crow { opacity: .8; margin-top: 8px }
/* add a lesson by hand */
.td-form { display: grid; gap: 8px 12px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); margin-top: 8px }
.td-form label { display: grid; gap: 3px; font-size: .78rem; color: var(--muted); font-weight: 600 }
.td-form select, .td-form input { font: inherit; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 7px 8px; min-height: 38px }
.td-weeks { display: flex; gap: 6px; align-items: center; color: var(--ink); font-weight: 400 } .td-weeks input { width: 4.5rem }
.td-warn { color: var(--warn) }
.td-flash { animation: tdflash 1.2s ease-out } @keyframes tdflash { from { box-shadow: 0 0 0 3px var(--focus) } to { box-shadow: 0 0 0 0 transparent } }
@media (prefers-reduced-motion: reduce) { .td-flash { animation: none } }
.linkbtn { background: none; border: 0; padding: 0; font: inherit; color: var(--focus); text-decoration: underline; cursor: pointer }
.td-track { cursor: cell } .td-track .td-blk, .td-track .td-busy { cursor: grab }
.td-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px }
.td-hd { font-size: .72rem; color: var(--muted); text-align: center; font-weight: 600 }
.td-cday { min-height: 58px; border: 1px solid var(--line); border-radius: 8px; padding: 4px; background: var(--surface); cursor: pointer; display: grid; align-content: start; gap: 3px }
.td-cday.out { background: transparent; border-style: dashed } .td-cday.out .num { color: var(--muted) } .td-cday.out .td-dots { opacity: .5 }   /* was opacity .4: failed contrast, 9 Oct */ .td-cday.today { border-color: var(--focus) } .td-cday.sel { outline: 2px solid var(--focus) }
.td-dots { display: flex; flex-wrap: wrap; gap: 3px } .td-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--c) }
.td-dots i.done { box-shadow: 0 0 0 1.5px var(--ok) } .td-dots i.off { opacity: .3 }
.td-daypanel { display: grid; gap: 8px; align-content: start }
.td-dayitem { display: grid; gap: 6px; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px }
/* classes */
.td-classes { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) }
.td-cls { border: 1px solid var(--line); border-radius: 10px; padding: 12px 12px 12px 16px; background: var(--surface); display: grid; gap: 6px }
.td-cls h3 { margin: 0; font-size: 1rem; display: flex; gap: 8px; align-items: center }
.td-kv { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; font-size: .85rem; margin: 0 } .td-kv dt { color: var(--muted) } .td-kv dd { margin: 0 }
.td-seats summary { cursor: pointer; color: var(--focus) }
.td-seatpick { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 4px 10px; margin-top: 6px }
.td-log { display: grid; gap: 4px; max-height: 240px; overflow: auto }
[draggable="true"] { cursor: grab } .td-dragging { opacity: .4 } .td-over { outline: 2px solid var(--focus) !important }
/* student: my own lessons only */
.lich-next { display: grid; gap: 2px; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--focus) 9%, var(--surface)); border-left: 4px solid var(--focus) }
.lich-next b { font-size: 1.1rem }
.lich-strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin-top: 10px }
.lich-strip > div { border: 1px solid var(--line); border-radius: 8px; padding: 5px 2px; text-align: center; font-size: .72rem; min-height: 54px; display: grid; align-content: start; gap: 3px }
.lich-strip .d { color: var(--muted); font-weight: 600 } .lich-strip .today { border-color: var(--focus) } .lich-strip .today .d { color: var(--focus) }
.lich-strip .t { font-weight: 700; font-variant-numeric: tabular-nums; background: color-mix(in srgb, var(--focus) 14%, var(--surface)); border-radius: 5px; padding: 1px 0 }
.lich-strip .t.off { text-decoration: line-through; color: var(--maple); background: var(--maple-soft) }
ul.lich-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px }
ul.lich-list li { display: flex; justify-content: space-between; gap: 8px; font-size: .88rem; padding: 4px 0; border-top: 1px solid var(--line) }
ul.lich-list li.off span:first-child { text-decoration: line-through; color: var(--muted) }

.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(18px + env(safe-area-inset-bottom, 0px)); background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 10px; font-weight: 600; font-size: .9rem; z-index: 20; max-width: calc(100% - 32px) }
.toast.bad { background: var(--maple); color: var(--on-maple) }
@media (prefers-reduced-motion: no-preference) { .toast { animation: up .2s ease-out } @keyframes up { from { transform: translate(-50%, 8px); opacity: 0 } } }

/* ---- display settings (teacher 9 Oct: "design for people with disability in mind"; FR 42 «Chữ to», A302) ----
   One SETTINGS button for everyone (a gear; was «Aa» until 10 Oct, teacher: "turn the Aa button into the setting button and
   put all the accessibility options in it"): theme, text size, and how motion and read-aloud behave; this device only. */
.bar-right { display: flex; align-items: center; gap: 8px; min-width: 0; position: relative }
.dispbtn { flex: none; display: inline-grid; place-items: center; min-width: 40px; min-height: 40px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: 700 .9rem var(--f-display); cursor: pointer }
.dispbtn[aria-expanded="true"] { border-color: var(--focus) }
.themebtn .sun { display: none } :root[data-theme="dark"] .themebtn .sun { display: block } :root[data-theme="dark"] .themebtn .moon { display: none }   /* A89: the icon shows what a press switches TO */
.disp { position: absolute; top: calc(100% + 8px); right: 0; z-index: 30; width: min(19rem, calc(100vw / var(--z, 1) - 32px)); box-shadow: 0 8px 28px rgba(0,0,0,.18) }
.disp { max-height: calc(100vh - var(--hdr, 64px) - 24px); overflow-y: auto; overscroll-behavior: contain }   /* SW-129: Settings grew (Maple Cards); it scrolls inside itself instead of running off the screen */
.disp h2 { font-size: 1rem }
.disp .eyebrow { margin-top: 2px }
.disp .seg button { flex: 1 1 0 }
.disp .disp-done { align-self: flex-end; min-height: 38px; padding: 8px 18px }
/* Settings switches (teacher 10 Oct 16:48): each accessibility option is on/off; the state is the knob's side AND its colour */
.sw-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line) }
.sw-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0 }
.switch { flex: none; position: relative; width: 46px; height: 26px; border-radius: 999px; border: 1px solid var(--line); background: var(--line); cursor: pointer; padding: 0 }
.switch .knob { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 2px rgba(0,0,0,.25) }
.switch[aria-checked="true"] { background: var(--focus); border-color: var(--focus) } .switch[aria-checked="true"] .knob { left: 22px }
@media (prefers-reduced-motion: no-preference) { :root:not([data-motion="reduce"]) .switch .knob { transition: left .15s } }
:root[data-motion="reduce"] *, :root[data-motion="reduce"] *::before, :root[data-motion="reduce"] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important }
:root[data-contrast="more"] { --muted: var(--ink); --line: var(--ink) }
:root[data-contrast="more"] body { font-weight: 500 }
:root[data-say="off"] button.say { display: none !important }
/* Admin clock (teacher 10 Oct 16:48) */
.clock-now { font-size: 1rem; margin: 4px 0 6px } .clock-now b { font: 600 2rem/1 var(--f-display); margin-right: 6px }
.clock-dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 0 0 6px } .clock-dl dt { color: var(--muted) } .clock-dl dd { margin: 0 } .clock-dl b { white-space: nowrap }
/* Schedule: lessons per student in the month */
.td-monthsum { margin-top: 14px; display: flex; flex-direction: column; gap: 8px }
.td-monthsum .tbl { overflow-x: auto }
.td-sum { border-collapse: collapse; width: 100%; font-size: .88rem } .td-sum th, .td-sum td { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--line) }
.td-sum th { font-size: .74rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em } .td-sum .num { text-align: right; font-variant-numeric: tabular-nums }
:root[data-size="lg"] { font-size: 18px }
:root[data-size="lg"] body { font-size: 20px; line-height: 1.9 }
:root[data-size="lg"] .small, :root[data-size="lg"] .hint { font-size: .95rem }
@media (max-width: 480px) { .bar-in:has(.tabs:not([hidden])) .bar-right { width: 100%; justify-content: center } }
/* ---- maple leaf (teacher 9 Oct, FR 95): the logo's leaf, once at the top-right of the FIRST box of each
   column on every screen. Never in the background, never on labels or lists, never moving. ---- */
:root { --leaf: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50%202%20L56%2015%20L62%2011%20L59%2033%20L71%2021%20L74%2029%20L89%2025%20L84%2041%20L92%2045%20L70%2061%20L73%2068%20L53%2065%20L52%2092%20L47%2065%20L27%2068%20L30%2061%20L8%2045%20L16%2041%20L11%2025%20L26%2029%20L29%2021%20L41%2033%20L38%2011%20L44%2015%20L50%202%20Z'/%3E%3C/svg%3E"); --leaf-tint: var(--maple) }
.leafy, #app > .card:first-child:not(.rm-card), .home-grid > .col > .card:first-child, .aide-wide > .card:first-child,
.aide-wide > .a-side > .card:first-child, .td-top > .card { position: relative }
#app > .card:first-child:not(.rm-card)::after, .home-grid > .col > .card:first-child::after, #app:has(> .aide-wide, > .td)::before {
  content: ""; position: absolute; width: 30px; height: 30px; top: 14px; right: 14px; transform: rotate(12deg); pointer-events: none;
  background: var(--leaf-tint); -webkit-mask: var(--leaf) center / contain no-repeat; mask: var(--leaf) center / contain no-repeat }
#app > .card:first-child:not(.rm-card) > :first-child, .home-grid > .col > .card:first-child > :first-child, .aide-wide > .card:first-child > :first-child,
.aide-wide > .a-side > .card:first-child > :first-child, .td-top > .card > :first-child { padding-right: 40px }
/* staff pages: the leaf belongs to the PAGE, not a box: same spot on Week, Schedule and Admin (teacher 9 Oct) */
#app:has(> .aide-wide, > .td) { position: relative }
#app:has(> .aide-wide, > .td)::before { z-index: 2; right: 30px }
@media (min-width: 900px) { .aide-wide:not(:has(> .a-head)) > .a-side { grid-area: auto; grid-column: 2; grid-row: 1 / span 2 } }   /* Admin's right column started 16 px low */
/* Admin: track + lane diagram (teacher 9 Oct: "could be visually explained better") */
.lanes-fig { min-width: 560px } .lanes-fig svg { width: 100%; height: auto; display: block }
.lanes-fig text { font: 600 13px var(--f-body); fill: var(--ink) } .lanes-fig .sub { font-weight: 400; fill: var(--muted); font-size: 12px }
.lanes-fig .box { fill: var(--bg); stroke: var(--line) } .lanes-fig .a { stroke: var(--ink) } .lanes-fig .b { stroke: var(--focus) } .lanes-fig .c { stroke: var(--maple) }
.lanes-fig .ah-a { fill: var(--ink) } .lanes-fig .ah-b { fill: var(--focus) } .lanes-fig .ah-c { fill: var(--maple) }
.lanes-fig .lab-b { fill: var(--focus) } .lanes-fig .lab-c { fill: var(--maple) }
label.follow { display: inline-flex; gap: 6px; align-items: center; white-space: nowrap }
table.aide td, table.aide th[scope=row] { vertical-align: middle }
.remind { border-top: 1px solid var(--line); padding-top: 10px; display: grid; gap: 6px } .remind h3 { font-size: .95rem }
/* SW-89 FR 104: the streak card */
.stk-row { display: grid; grid-template-columns: 6.5rem 1fr auto auto; gap: 8px; align-items: center; margin: 6px 0 } .stk-dots { display: flex; gap: 3px } .stk-dots i { width: 12px; height: 12px; border-radius: 3px; background: var(--line) } .stk-dots i.on { background: var(--brand, #b8432b) } .stk-dots i.today { outline: 1.5px solid var(--ink); outline-offset: 1px }
/* SW-89: the weekly check as a table */
.wk-table { width: 100%; border-collapse: collapse; font-size: .86rem } .wk-table th, .wk-table td { text-align: left; padding: 5px 6px; border-bottom: 1px solid var(--line); vertical-align: top }
.wk-table thead th { font-size: .74rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted) } .wk-table tr.flag th { box-shadow: inset 3px 0 0 var(--warn, #b26b00) }
/* SW-92: the Weekly check spans the page under the tiles; one line per seat */
.wk-full { margin: 12px 0 } .wk-full > .row-head { align-items: center } .wk-full .wk-nav { display: flex; align-items: center; gap: 8px } .wk-full .wk-nav h2 { margin: 0; font-size: 1.05rem }
.wk-full .wk-table { min-width: 640px } .wk-full .wk-table th, .wk-full .wk-table td { vertical-align: middle; white-space: nowrap } .wk-full .wk-miss { white-space: normal }
.wk-full .wk-miss .chip { margin: 1px 2px 1px 0 } .wk-full .remind h3 { margin: 6px 0 4px; font-size: .95rem }
.rm-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 10px; padding: 6px 0; border-top: 1px solid var(--line) }
/* SW-87 (A94): the pronunciation course */
.pr-list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px }
.pr-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; color: inherit; font: inherit; cursor: pointer }
.pr-row:disabled { cursor: default; opacity: .55 } .pr-row:not(:disabled):hover { border-color: var(--maple) }
.pr-n { font-weight: 800; min-width: 2ch; text-align: right; color: var(--maple) } .pr-t { flex: 1; min-width: 0 }
.chip.hot { background: var(--maple); color: var(--on-maple); border-color: var(--maple) }
.pr-sec { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 14px }
.pr-sec h2 { font-size: 1.15rem; display: flex; align-items: center; gap: 8px; margin: 0 0 8px }
.pr-k { display: inline-grid; place-items: center; width: 1.6em; height: 1.6em; border-radius: 50%; background: var(--soft); font-size: .85rem }
.pr-guide { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: 6px; line-height: 1.6 }
.pr-trick { background: var(--soft); border-radius: 8px; padding: 8px 12px; margin: 10px 0 0 }
.pr-pair { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; margin: 8px 0; display: flex; flex-direction: column; gap: 6px }
.pr-pair-w { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px } .pr-vs { color: var(--muted, inherit); opacity: .6 }
.pr-side, .pr-word { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px }
.pr-words { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px }
.pr-self { display: flex; flex-wrap: wrap; align-items: center; gap: 6px } .pr-self [aria-pressed="true"] { background: var(--maple); color: var(--on-maple); border-color: var(--maple) }
.pr-nosay { opacity: .75; cursor: default }
.pr-sent { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin: 8px 0 }
.pr-en { font-size: 1.12rem; font-weight: 600; margin: 0 } .pr-vi { margin: 2px 0 8px; color: var(--muted, inherit) }
.pr-audio { height: 34px; max-width: 220px }
.pr-foot { display: flex; flex-direction: column; gap: 8px; margin-top: 16px }
/* SW-87 Report: a reminder is one line — seat · what is missing · a quiet button */
.rm-list { display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; list-style: none }
.rm-list .rm-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; flex-wrap: nowrap; align-items: center; gap: 10px; padding: 7px 0 }
.rm-row .rm-miss { line-height: 1.35 }
.rm-row .rm-btn { padding: 4px 10px; font-size: .78rem; white-space: nowrap; background: transparent; border: 1px solid var(--line); color: inherit }
.rm-row .rm-btn:hover { border-color: var(--maple); color: var(--maple) }
.rm-more summary { cursor: pointer; padding: 6px 0; color: var(--muted, inherit) }
#saveall:disabled { background: var(--soft); border-color: var(--line); color: var(--muted, inherit); opacity: 1; cursor: default }
.dash-body .a-table table { font-size: .95rem }
ul.keyline { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; font-size: .88rem }




/* unfinished = a "dropped item" glow (teacher 9 Oct). Colour is never the only cue: a «Chưa xong» chip says it in words.
   Reduced motion: a still ring, no pulse. */
.todo { position: relative; box-shadow: 0 0 0 2px var(--loot), 0 0 14px 2px color-mix(in srgb, var(--loot) 55%, transparent); border-radius: 12px }
.hw-item.todo { padding-inline: 10px; margin-block: 6px; border-top-color: transparent }
.tick.todo { border-color: var(--loot) }
@media (prefers-reduced-motion: no-preference) {
  .todo { animation: loot 1.8s ease-in-out infinite }
  @keyframes loot { 0%, 100% { box-shadow: 0 0 0 2px var(--loot), 0 0 6px 0 color-mix(in srgb, var(--loot) 35%, transparent) }
                    50% { box-shadow: 0 0 0 2px var(--loot), 0 0 20px 5px color-mix(in srgb, var(--loot) 65%, transparent) } } }
.chip.todo-chip { background: color-mix(in srgb, var(--loot) 22%, transparent); color: var(--ink); border: 1px solid var(--loot) }
/* mục 4's reading as an expand */
details.fold { padding: 12px; border: 1px solid var(--line); border-radius: 12px; margin-top: 10px }
details.fold > summary { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; list-style: none }
details.fold > summary::-webkit-details-marker { display: none }
details.fold > summary::before { content: "▸"; color: var(--maple); transition: transform .15s }
details.fold[open] > summary::before { transform: rotate(90deg) }
details.fold > summary .fold-t { font: 600 1.02rem var(--f-display) }
/* the weekly report: questions that must be answered vs the optional part */
.q.req { border-left: 4px solid var(--loot); background: color-mix(in srgb, var(--loot) 9%, transparent); border-radius: 0 10px 10px 0; padding: 10px 12px }
.req-key { display: flex; align-items: center; gap: 8px; color: var(--muted) }
.req-dot { width: 14px; height: 14px; border-left: 4px solid var(--loot); background: color-mix(in srgb, var(--loot) 18%, transparent); border-radius: 0 3px 3px 0; flex: none }
summary.opt-sum { display: flex; flex-direction: column; gap: 2px; padding: 10px 0 }
summary.opt-sum .opt-t { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: var(--focus) }
/* read aloud + Vietnamese under each example */
.w-row { display: flex; align-items: center; gap: 6px; justify-content: space-between }
button.say { flex: none; display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--focus); cursor: pointer; padding: 0 }
button.say:hover { border-color: var(--focus) }
.vi { display: block; font-size: .82rem; color: var(--muted); font-style: normal; font-weight: 400; border-left: 3px solid color-mix(in srgb, var(--focus) 45%, transparent); padding-left: 8px; margin-top: 2px }
ul.gex li.pair .vi { grid-column: 1 / -1 }
/* Admin seats: one line per row */
table.aide td, table.aide th[scope=row] { vertical-align: middle }

/* ---- SW-30 (teacher 11 Oct 2026 15:49) ---- */
/* #8 ONE Admin page: a sticky bar of its parts (Report · Seats · Accounts · Finances · Tools) */
.adm { display: flex; flex-direction: column; gap: 22px }
.adm-nav { position: sticky; top: calc(var(--hdr, 62px)); z-index: 4; display: flex; flex-wrap: wrap; gap: 4px; align-self: flex-start; margin-top: 12px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 3px; box-shadow: 0 4px 14px rgba(0, 0, 0, .25) }
.adm-part { display: flex; flex-direction: column; gap: 16px; scroll-margin-top: 120px }
.adm-part:focus { outline: none }
.adm-part:empty { display: none }
/* #10 a seat password copies on click */
.pw-copy { display: inline-flex; align-items: center; gap: 6px; border: 1px dashed var(--line); background: var(--bg); color: var(--ink); border-radius: 6px; padding: 3px 8px; cursor: copy }
.pw-copy:hover { border-color: var(--focus) } .pw-copy:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px }
.pw-copy .pw-ico { color: var(--muted); font-family: var(--f-body) } .pw-copy.copied { border-style: solid; border-color: var(--ok) } .pw-copy.copied .pw-ico::after { content: " ✓"; color: var(--ok) }
td.proj { white-space: nowrap } td.proj .chip { margin-left: 4px }
/* #13 Finances (owner only) */
.fin { display: flex; flex-direction: column; gap: 14px }
.fin-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden }
.fin-tiles > div { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-right: 1px solid var(--line); min-width: 0 }
.fin-tiles > div:last-child { border-right: 0 } .fin-tiles b { font: 600 1.5rem/1.15 var(--f-display) } .fin-tiles b.hi { color: var(--maple) }
.fin-table tr.ended th, .fin-table tr.ended td { color: var(--muted) } .fin-table tfoot th, .fin-table tfoot td { border-top: 2px solid var(--ink); font-weight: 700 }
.fin-rates summary { cursor: pointer; padding: 4px 0 } .fin-rgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 8px; margin: 10px 0 }
.fin-rgrid label { display: grid; grid-template-columns: minmax(0, 1fr) 7rem; gap: 8px; align-items: center; font-size: .9rem }
/* #9 the interactive lessons on Schedule */
.td-les { display: flex; flex-wrap: wrap; gap: 6px }
.td-logd > summary { cursor: pointer; list-style: none } .td-logd > summary::-webkit-details-marker { display: none } .td-logd > summary h2::after { content: " ▾"; color: var(--muted); font-size: .8em }
.td-logd[open] > summary h2::after { content: " ▴" } .td-logd .td-log { margin-top: 8px }
/* #5 SCHEDULE ON ONE SCREEN (teacher: «placing class information side-by-side, ensuring everything fits within a single fullscreen
   view without requiring scrolling»). From 1400 × 720 px: three columns over the whole window — the day and the classes (left), the
   week and the attendance (middle), the month (right). Each panel scrolls inside itself if its content is longer; the page never does.
   Below that size the panels stack as before (phones and small laptops). */
.td-col { display: contents }
.td-top { order: 1 } .td-s-week { order: 2 } .td-s-reg { order: 3 } .td-s-month { order: 4 } .td-s-les { order: 6 } .td-s-log { order: 7 }
@media (min-width: 1400px) and (min-height: 720px) {
  .wrap:has(> .td) { max-width: min(98vw, 140rem) }
  .bar-in { max-width: min(98vw, 140rem) }   /* SW-62 (teacher 15 Oct «make sure this bar doesnt jump between tabs»): the bar is as wide on every page as on Schedule (it jumped 121 px at 1920 px) */
  .wrap:has(> .td) { padding-bottom: 12px }
  #td-root.td { height: calc((100dvh - var(--tdtop, calc(var(--hdr, 62px) + 10px))) / var(--z, 1) - 22px);   /* SW-54: --tdtop is measured on screen, 100dvh too; both are divided by the zoom */ grid-template-columns: minmax(300px, 1fr) minmax(0, 2.35fr) minmax(360px, 1.3fr); gap: 12px; margin-top: 10px }
  #td-root .td-col { display: flex; flex-direction: column; gap: 12px; min-height: 0; min-width: 0 }
  #td-root .td-c1 { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin }   /* the left column scrolls inside itself on a short screen; the page never scrolls */
  #td-root .td-top { display: flex; flex-direction: column; gap: 12px }
  #td-root .card { min-height: 0; overflow: auto; padding: 12px 14px; flex: 0 0 auto }
  #td-root .td-s-plan { display: none }
  #td-root .td-s-reg, #td-root .td-s-month { flex: 1 1 0 }
  #td-root .td-c1 > .card, #td-root .td-c1 .td-top > .card { overflow: visible }   /* SW-32: only the left COLUMN scrolls, never a box inside it (two scrollbars) */
  #td-root h2 { font-size: 1.02rem }
  #td-root .row-head { gap: 6px 10px }
  #td-root .td-s-add .row-head .muted, #td-root .td-s-add .actions .muted, #td-root .td-s-les .row-head .muted { display: none }
  #td-root .td-s-add .td-form { grid-template-columns: 1fr 1fr; gap: 4px 8px }
  #td-root .td-s-add input, #td-root .td-s-add select { min-height: 32px; padding-block: 3px }
  #td-root .td-s-add > p.small:empty { display: none }
  #td-root .td-s-week .td-week { --lane: 2.35rem; min-width: 0 } #td-root .td-s-week .td-legend { font-size: .72rem }
  #td-root .td-s-week .tablewrap { overflow: visible }
  #td-root .td-today { margin-top: 4px } #td-root .td-lesson { padding: 5px 8px }
  #td-root .td-mgrid { display: grid; grid-template-columns: 1fr; gap: 10px } #td-root .td-cal { gap: 3px }
  #td-root .td-blk { padding: 2px 3px }
}
/* ---- SW-32 (teacher 11 Oct 19:28) ---- */
/* the timetable's blocks: name first, start time always, end time only where it fits (a container query on the block) */
#td-root .td-blk, #td-root .td-busy { align-items: flex-start; text-align: left; padding: 3px 6px; container-type: inline-size }
.td-blk .td-n, .td-blk .td-t, .td-busy .td-n, .td-busy .td-t { display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.td-blk .td-n { font-weight: 700; font-size: .76rem; line-height: 1.08; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: normal; word-break: normal; hyphens: none } .td-blk .td-t { font-size: .7rem; font-variant-numeric: tabular-nums; opacity: .92 } .td-blk .td-t b { font-weight: 600 }
/* SW-46 (teacher 13 Oct: «The timetable tab should also display when the class would be finished as well, «10:00 - 11:30»»): the end
   time is never dropped; a narrow block sets start–end in a smaller, tighter figure instead (was: the end hidden under 74 px) */
@container (max-width: 74px) { .td-blk .td-t, .td-busy .td-t { font-size: .6rem; letter-spacing: -.03em; text-overflow: clip } .td-blk .td-t b { font-weight: 700 } }
@container (max-width: 62px) { .td-blk .td-n { font-size: .66rem; letter-spacing: -.01em } .td-blk .td-t, .td-busy .td-t { font-size: .55rem; letter-spacing: -.04em } }
@media (min-width: 1400px) and (max-height: 900px) { #td-root .td-s-week .td-week { --lane: 2.6rem } #td-root .td-blk { padding: 2px 4px } #td-root .td-s-week .td-dragtip, #td-root .td-s-week .td-taptip { display: none } #td-root .td-s-week .td-legend { margin-top: 4px } #td-root .td-s-reg .row-head .muted { display: none } }   /* a laptop screen: Attendance keeps its room */
.td-busy { align-items: flex-start } .td-busy .td-t, .td-busy .td-n { width: fit-content }
.td-blk.td-dragging { opacity: .35 } .td-blk.td-lift { transform: scale(1.05); box-shadow: 0 6px 16px rgba(0, 0, 0, .4) }
.td-blk.td-ghost { z-index: 6; pointer-events: none; opacity: .95; outline: 2px solid var(--focus); outline-offset: 1px; box-shadow: 0 8px 20px rgba(0, 0, 0, .45); width: auto; min-width: 7.5rem }
.td-blk.td-ghost.td-clash { outline-color: var(--maple); background: color-mix(in srgb, var(--maple) 30%, var(--c)) }
.td-blk.td-ghost.td-copy { outline-style: dashed }
.td-blk.td-painted, .td-blk.td-over, .td-ai.td-painted { box-shadow: 0 0 0 3px var(--focus) !important; transform: scale(1.04) }
.td-armed .td-blk, .td-armed .td-ai { cursor: crosshair; touch-action: none }
.td-arm-off .td-armed .td-blk:not(.off):hover, .td-arm-off .td-armed .td-rc:not(.off):hover { box-shadow: 0 0 0 2px var(--maple) }
.td-arm-on .td-armed .td-blk.off:hover, .td-arm-on .td-armed .td-rc.off:hover { box-shadow: 0 0 0 2px var(--ok) }
.td-s-week .td-paints { margin: 2px 0 8px } .td-s-week .td-paint { padding: 4px 12px }
#td-root .td-s-week .td-week { --lane: 3rem } #td-root .td-blk { justify-content: center; gap: 1px }
/* Classes: one compact row per class */
#td-root .td-classes, .td-classes { display: grid; grid-template-columns: 1fr !important; gap: 8px }
.td-crow { display: flex !important; flex-direction: column; gap: 5px; padding: 9px 12px 9px 14px; font-size: .86rem }
.td-c-top { display: flex; align-items: center; gap: 8px; min-width: 0 } .td-c-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .95rem }
.td-c-prog { font-size: .9rem; white-space: nowrap; margin-left: auto } .td-c-prog b { font-size: 1.02rem }
.td-crow .td-mbar.sm { height: 6px }
.td-c-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; min-width: 0 }
.td-c-slots { display: flex; flex-wrap: wrap; gap: 4px; flex: 1; min-width: 0 }
.td-slot { font-size: .76rem; font-variant-numeric: tabular-nums; padding: 1px 7px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--c) 55%, var(--line)); background: color-mix(in srgb, var(--c) 14%, transparent) }
.td-c-who { color: var(--ink) } .td-c-st { white-space: nowrap } .td-c-st + .td-c-st::before { content: "· "; color: var(--muted) }
.td-c-who .td-seats { flex-basis: 100% } .td-c-who .td-seats summary { cursor: pointer; color: var(--focus); font-size: .8rem }
/* the leaf (FR 95; teacher 11 Oct 19:28 «The leaf should move with the scrollable section … add leaves wherever appropriate»):
   it sits in the FIRST box of each column or section and scrolls with that box — never pinned to the page */
#app:has(> .td)::before { content: none !important }
.leafbox, #adm-hub > section.adm-part:first-of-type > .card:first-child, #adm-hub > section.adm-part:first-of-type > div:first-child > .card:first-child { position: relative }
@media (max-width: 1399.98px), (max-height: 719.98px) { #td-root .td-s-week.leafbox::after, #td-root .td-s-month.leafbox::after, #td-root .fin.leafbox::after { content: none } }   /* stacked: one leaf, on the first box */
#adm-hub > section.adm-part:first-of-type > .card:first-child::after, #adm-hub > section.adm-part:first-of-type > div:first-child > .card:first-child::after,
.leafbox::after { content: ""; position: absolute; width: 28px; height: 28px; top: 12px; right: 12px; transform: rotate(12deg); pointer-events: none; z-index: 1;
  background: var(--leaf-tint); -webkit-mask: var(--leaf) center / contain no-repeat; mask: var(--leaf) center / contain no-repeat }
.leafbox > :first-child, #adm-hub > section.adm-part:first-of-type > .card:first-child > :first-child, #adm-hub > section.adm-part:first-of-type > div:first-child > .card:first-child > :first-child { padding-right: 40px }
/* SW-46 (teacher 13 Oct 11:49): Finances on Schedule (owner only), under the Month, and a grip on every border of the one-screen
   Schedule (tdlayout.js): drag, snap, double-click to reset. The grips exist only in the one-screen layout. */
.td-s-fin { order: 4; min-width: 0 } .td-s-fin > .card { margin: 0; min-width: 0 }   /* min-width 0: the 9-column table scrolls inside its box, it never widens the page */ #td-root .fin > * { flex-shrink: 0 }   /* the panel scrolls; its parts never squash */
#td-root .fin-tiles { grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)) } #td-root .fin-tiles > div { padding: 8px 10px } #td-root .fin-tiles b { font-size: 1.2rem }
#td-root:not(.tdl-on) .tdl-grip { display: none }
@media (min-width: 1400px) and (min-height: 720px) {
  #td-root .td-top { display: contents }   /* the left column's boxes are the column's own, so a grip sits between any two */
  #td-root .td-s-month { flex: 1.35 1 0 }   /* the Month keeps the larger share until a grip says otherwise */
  #td-root .td-s-fin { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column } #td-root .td-s-fin > .card { flex: 1 1 auto; min-height: 0; overflow: auto }
  #td-root .td-s-fin[data-tdl-h] > .card { height: 100% }
  #td-root.tdl-on { position: relative }
}
.tdl-grip { position: relative; z-index: 4; touch-action: none; outline-offset: -2px; border-radius: 6px }
.tdl-grip::before { content: ""; position: absolute; background: var(--line); opacity: .55; border-radius: 2px; transition: opacity .12s }
.tdl-grip:hover::before, .tdl-grip:focus-visible::before, .tdl-grip.tdl-drag::before { opacity: 1; background: var(--focus) }
.tdl-grip.tdl-snap::before { opacity: 1; background: var(--maple) }
.tdl-row { flex: 0 0 12px; margin: -12px 0; cursor: row-resize }
.tdl-row::before { left: 30%; right: 30%; top: 4px; height: 4px }
.tdl-col { position: absolute; top: 0; bottom: 0; width: 12px; cursor: col-resize }
.tdl-col::before { top: 30%; bottom: 30%; left: 4px; width: 4px }
.tdl-tip { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font: 700 .7rem var(--f-body, inherit); padding: 1px 6px; border-radius: 999px; background: var(--maple); color: #fff; white-space: nowrap; pointer-events: none }
.tdl-tip:empty { display: none }
body.tdl-dragging, body.tdl-dragging * { user-select: none !important }
body.tdl-dragging:has(.tdl-row.tdl-drag) * { cursor: row-resize !important } body.tdl-dragging:has(.tdl-col.tdl-drag) * { cursor: col-resize !important }
details.left-seats { margin-top: 12px } details.left-seats summary { cursor: pointer }
/* SW-46b (teacher 13 Oct 17:43): every segment NAMED by a letter (A Today · B Classes · C Change log · D Timetable · E Attendance ·
   F Lessons per student · G Month · H the day · I Finances · J Tuition; P the assistant), the add form as a pop-over on the Timetable,
   ⌫ Delete beside ✗ Cancel / ✓ Restore, one layout for every class row */
.seg-id { display: inline-grid; place-items: center; min-width: 1.35em; height: 1.35em; padding: 0 .3em; margin-right: .45em; border-radius: 5px; font: 700 .72em/1 var(--f-body, inherit); letter-spacing: 0;
  color: var(--bg, #111); background: var(--muted); vertical-align: .12em }
h3 .seg-id, b .seg-id { font-size: .78em }
.td-s-week { position: relative }
.td-qadd { position: absolute; z-index: 8; width: min(25rem, calc(100% - 16px)); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px 12px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .45) }
.td-qadd .row-head { margin: 0 } .td-qadd .td-form { grid-template-columns: 1fr 1fr; gap: 6px 10px } .td-qadd .td-form input, .td-qadd .td-form select { min-height: 34px; padding-block: 4px }
.td-qadd > p.small:empty { display: none } .td-qx { padding: 2px 9px }
.td-paint.del { background: color-mix(in srgb, var(--warn, #e0a33a) 16%, transparent); color: var(--warn, #e0a33a); border-color: var(--warn, #e0a33a) }
.td-arm-del .td-armed .td-blk:hover, .td-arm-del .td-armed .td-rc:hover { box-shadow: 0 0 0 2px var(--warn, #e0a33a) }
.td-c-grid { display: grid; grid-template-columns: 4.4rem minmax(0, 1fr); gap: 5px 8px; align-items: baseline }
.td-c-k { color: var(--muted); font-size: .78rem } .td-c-who .td-c-k { margin-right: 2px }
.td-c-slots { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0 } .td-slot { white-space: nowrap; border-radius: 6px; line-height: 1.5 }
.td-s-reg .td-monthsum { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px }
#td-root .td-s-month .td-mgrid, .td-s-month .td-mgrid { grid-template-columns: minmax(0, 1fr) }
.tdl-seg { flex: 0 0 12px; margin: -6px 0; cursor: row-resize; position: relative; z-index: 4; touch-action: none; border-radius: 6px }
.tdl-seg::before { content: ""; position: absolute; left: 35%; right: 35%; top: 4px; height: 4px; border-radius: 2px; background: var(--line); opacity: .55 }
.tdl-seg:hover::before, .tdl-seg.tdl-drag::before { opacity: 1; background: var(--focus) } .tdl-seg.tdl-snap::before { opacity: 1; background: var(--maple) }
[data-tdl-sh] { overflow: auto; min-height: 40px }
/* A36: a moved lesson in Attendance — dashed, not struck through (it was not cancelled; it happens on another day) */
.td-rc.off.moved { text-decoration: none; border-style: dashed; background: transparent; border-color: var(--line); color: var(--muted) } .td-rc.off.moved small { text-decoration: none }
/* J · Tuition (SW-46b) */
.fin-tu { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--line); padding-top: 12px }
.fin-tu b.ok { color: var(--ok) } .fin-tu b.warn { color: var(--warn) } .fin-tu b.bad { color: var(--maple) }
.fin-tu-t input.tu-in { width: 5.2rem; font: inherit; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 3px 6px }
.fin-tu-t input.tu-full { width: 1.15rem; height: 1.15rem; accent-color: var(--ok) } .td-tu-cls { display: block; margin-top: 1px }
.fin-tu-t td, .fin-tu-t th { vertical-align: middle; padding-inline: 5px } .tu-mb { padding: 3px 9px; font-size: 1rem }
.sr-only { position: absolute; top: 0; left: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
#td-root .card { position: relative }   /* an absolutely placed piece inside a box (a screen-reader label, the add box) stays inside that box's scroll, never below the page */
.tu-msg { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 0; padding: 12px } .tu-pick { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: end }
.tu-pick .q { display: grid; gap: 2px; margin: 0 } .tu-pick select { font: inherit; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 4px 6px }
#tu-txt { width: 100%; font: inherit; line-height: 1.5; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; resize: vertical }
/* Admin: one part per page */
.adm-nav .subtab[aria-pressed="true"] { cursor: default }
.adm-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); align-items: start }
.rg-hit { box-shadow: 0 0 0 3px var(--focus) !important; transition: box-shadow .3s }
.linkbtn.small { font-size: .78rem; margin-left: 4px }
/* Lessons page */
.les-page { display: flex; flex-direction: column; gap: 16px }
/* SW-49 (13 Oct 2026) #11: the student's three lessons (review · learn · look ahead) */
.les3-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px }
.les3-row { display: flex; flex-direction: column; gap: 2px; padding-top: 8px; border-top: 1px solid var(--line, rgba(127, 127, 127, .3)) }
.les3-row .actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px } .les3-row .actions:empty { display: none }
/* SW-60: every completed lesson, folded under the three rows */
.les-past { margin-top: 12px; border-top: 1px solid var(--line, rgba(127, 127, 127, .3)); padding-top: 8px }
.les-past > summary { cursor: pointer; font-weight: 600; display: flex; gap: 8px; align-items: center; min-height: 36px }
.les-past-list { list-style: none; margin: 6px 0 0; padding: 0; max-height: 420px; overflow-y: auto; display: grid; gap: 2px }
.les-past-list li { display: grid; grid-template-columns: 6.5em minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 4px 0; border-top: 1px solid var(--line, rgba(127, 127, 127, .18)) }
.les-past-list .num { font-weight: 600; font-variant-numeric: tabular-nums }
.les-grid { display: grid; gap: 12px; grid-template-columns: repeat(4, minmax(0, 1fr)) }   /* SW-43 (teacher 13 Oct): one row = one S L W R cycle */
@media (max-width: 1100px) { .les-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (max-width: 600px) { .les-grid { grid-template-columns: 1fr } }
.les-grid .les-card { padding: 14px } .les-grid .les-card .actions .btn { padding: 4px 8px; font-size: .8rem }   /* SW-43: three buttons fit one row at 4 columns */
.les-card { display: flex; flex-direction: column; gap: 6px } .les-card h3 { font-size: 1.02rem; margin: 0 } .les-card .actions { margin-top: auto; padding-top: 6px }
.les-h { display: flex; align-items: center; gap: 8px; justify-content: space-between } .les-id { font: 700 1.25rem/1 var(--f-display); color: var(--maple) }
.les-card.les-due { box-shadow: inset 0 0 0 2px var(--focus) } .les-card .actions { flex-wrap: wrap; gap: 6px } .les-card .actions .btn { padding: 5px 10px; font-size: .85rem; white-space: nowrap }
.les-next .seatcode-sm { padding: 1px 6px 1px 8px; border-radius: 4px; background: var(--bg); color: var(--ink) }
#adm-seats > .aide-wide { grid-template-columns: minmax(0, 1fr) !important; max-width: 72rem } .les-next { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center }
/* SW-53 (teacher 14 Oct): Schedule regrouped. Left = the day (A, with the month calendar behind «▦ Calendar») and the classes (B, the
   month's lessons on each row, details on a click); middle = the week (D, every lesson's tools in one pop-over) and Attendance (E);
   right = the money (I with K · the year, J). G, H and F are gone into A, D and B. */
.td-calwrap { display: flex; flex-direction: column; gap: 6px; padding: 8px 0 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px }
.td-calwrap[hidden] { display: none } .td-calhead { margin: 0 } .td-calhint { font-size: .74rem }
.td-calbtn.on { background: var(--ink); color: var(--bg); border-color: var(--ink) }
button.td-lesson { width: 100%; font: inherit; color: var(--ink); text-align: left; cursor: pointer; min-height: 0 }
button.td-lesson:hover { border-color: var(--focus) }
.td-today { display: flex; flex-direction: column; gap: 6px }
.td-les { position: fixed; z-index: 30; width: min(23rem, calc(100vw / var(--z, 1) - 16px)); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px 12px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .45); display: flex; flex-direction: column; gap: 8px; font-size: .9rem }
.td-les[hidden] { display: none } .td-les .row-head { margin: 0; align-items: center } .td-les .row-head .td-who { flex: 1; min-width: 0 }
.td-les-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px } .td-les-row label { min-width: 4.4rem; font-weight: 600; font-size: .82rem }
.td-les-row input { width: auto; min-height: 34px; padding: 4px 8px; font-size: .9rem } .td-les-row input[type=date] { flex: 1 1 9rem }
.td-les .actions { flex-wrap: wrap; gap: 6px } .td-les .td-paint { padding: 5px 12px }
.td-les p.small:empty { display: none } .td-warn { color: var(--warn) }
/* B · one row per class: the month first, details on a click */
.td-crow { padding: 0 !important; gap: 0 !important; border-left: 4px solid var(--c); border-radius: 10px; background: var(--surface); border-top: 1px solid var(--line); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line) }
.td-c-head { all: unset; box-sizing: border-box; display: flex; flex-direction: column; gap: 5px; padding: 9px 12px; cursor: pointer; border-radius: 0 9px 9px 0; width: 100% }
.td-c-head:hover { background: color-mix(in srgb, var(--c) 8%, transparent) } .td-c-head:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px }
.td-c-chev { color: var(--muted); transition: transform .15s } .td-crow.open .td-c-chev { transform: rotate(180deg) }
.td-crow.focus { box-shadow: 0 0 0 2px var(--focus) }
.td-c-head .td-mnums { font-size: .78rem } .td-c-head .td-c-who { display: flex; flex-wrap: wrap; gap: 2px 6px; color: var(--ink) }
.td-c-more { display: flex; flex-direction: column; gap: 8px; padding: 2px 12px 11px; border-top: 1px dashed var(--line) } .td-c-more[hidden] { display: none }
.td-c-more .td-c-grid { margin-top: 8px } .td-c-allbar { display: inline-flex; width: 5rem; vertical-align: middle; margin-left: 6px }
.td-c-more .actions { flex-wrap: wrap; gap: 6px; align-items: center } .td-c-more .td-seats { flex-basis: 100% }
.td-s-clsin .row-head .actions { gap: 4px; align-items: center }
/* SW-61: B · Classes inside A, under the day */
.td-s-clsin { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line) } .td-s-clsin h3 { margin: 0 }
.td-pill.day { background: color-mix(in srgb, var(--focus) 22%, var(--surface)); color: var(--ink); font-variant-numeric: tabular-nums; margin-right: 6px }
.td-pill.day.off { background: transparent; color: var(--muted); text-decoration: line-through }
.td-csep { margin: 10px 0 4px; letter-spacing: .04em; text-transform: uppercase; font-size: .72rem }
/* K · the year (in I) */
.fin-year { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--line); padding-top: 10px }
.fin-year .row-head { margin: 0 } .fin-year-tot { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: .82rem }
.fin-year-tot b { font-size: 1.05rem } .fin-ychart { position: relative } .fin-ychart svg { display: block; width: 100%; height: auto; overflow: visible }
.fin-ychart .yb-e { fill: var(--focus) } .fin-ychart .yb-s { fill: color-mix(in srgb, var(--focus) 45%, var(--surface)) } .fin-ychart .yb-x { fill: url(#yhatch); stroke: color-mix(in srgb, var(--focus) 55%, var(--surface)); stroke-width: 1 }
.fin-ychart .yax { fill: var(--muted); font: 500 15px var(--f-body) } .fin-ychart .ygl { stroke: var(--line); stroke-width: 1 } .fin-ychart .ycur { fill: var(--ink); font-weight: 700 }
/* SW-60: only the month columns take the pointer; the bars, labels and gridlines drawn over them used to swallow hover and click */
.fin-ychart svg * { pointer-events: none } .fin-ychart .yhit { fill: transparent; cursor: pointer; pointer-events: all } .fin-ychart .yhit:hover + g rect, .fin-ychart .yhit.on + g rect { filter: brightness(1.15) }
.fin-ytip { position: absolute; pointer-events: none; z-index: 5; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 6px 9px; font-size: .78rem; box-shadow: 0 6px 18px rgba(0,0,0,.35); white-space: nowrap }
.fin-ytip[hidden] { display: none } .fin-ylegend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .76rem; color: var(--muted) }
.fin-ylegend i { display: inline-block; width: 11px; height: 11px; border-radius: 3px; vertical-align: -1px; margin-right: 5px }
.fin-ylegend .e { background: var(--focus) } .fin-ylegend .s { background: color-mix(in srgb, var(--focus) 45%, var(--surface)) } .fin-ylegend .x { border: 1px dashed color-mix(in srgb, var(--focus) 70%, var(--surface)) }
@media (min-width: 1400px) and (min-height: 720px) {
  #td-root .td-c2 { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin }   /* SW-54: when the week is taller than its column (a zoomed page), the column scrolls, never the page */
  html:has(#td-root.td) { overflow-y: hidden }   /* SW-54: the one-screen Schedule never scrolls the page (a zoomed page reported 9 px of phantom scroll at 1.15×) */
  #td-root .td-c3:empty { display: none } #td-root:has(> .td-c3:empty) { grid-template-columns: minmax(320px, 1fr) minmax(0, 2.6fr) !important }
}
/* SW-54 (teacher 14 Oct «Scale things appropriately up to 135% … to have the texts and content fill the entire screen»; ruled: big
   screens only). A big screen draws the whole site 1.35× (as the browser's own 135% zoom would), so a 1920 × 1080 screen lays out
   like a 1422 px one; a mid screen gets 1.15×; laptops and phones are unchanged. --z is read by the few measurements that need it. */
:root { --z: 1 }
/* SW-87 (teacher 18 Oct II.1 «Revert the sizing changes made to Lessons and Admin»): no zoom on any screen; --z stays 1 so every
   measurement that divides by it is unchanged. */
/* SW-87: SW-54's «packs tighter at 1.35×» block went with the zoom (it squeezed a real 1920 px Schedule and hid its hints) */
#td-root .td-today .td-lesson { grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px }   /* SW-53: time and state on top, the class under it, never cut */
#td-root .td-today .td-lesson > .num { grid-column: 1; grid-row: 1 } #td-root .td-today .td-lesson > .td-pill { grid-column: 2; grid-row: 1 } #td-root .td-today .td-lesson > .td-who { grid-column: 1 / -1; grid-row: 2 }
/* SW-55: Admin → Seats, laid out to the frame (no sideways scroll) + the Track buttons */
#adm-seats > .aide-wide:has(.seats2) { max-width: none }
.seats-t { width: 100%; table-layout: fixed; border-collapse: collapse }
.seats-t col.c-seat { width: 27% } .seats-t col.c-trk { width: 15% } .seats-t col.c-les { width: 15% } .seats-t col.c-proj { width: 25% } .seats-t col.c-pw { width: 18% }
table.aide.seats-t th, table.aide.seats-t td { white-space: normal; padding: 8px 8px; vertical-align: top }   /* top: both dropdowns on one line, «now / next» under the Lesson one */
table.aide.seats-t td.proj, table.aide.seats-t td.pw { padding-top: 13px }
table.aide.seats-t th[scope=row] { padding-left: 14px }
table.aide.seats-t td > select:not(.appsel) { width: 100%; min-width: 0; padding: 7px 8px; font-size: .9rem; text-overflow: ellipsis }
.seats-t .st-name .who { flex-wrap: wrap } .seats-t .st-name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px }
.seats-t .st-links { display: flex; flex-wrap: wrap; gap: 2px 12px; margin-top: 3px; padding-left: 18px } .seats-t .st-links .linkbtn.small { margin-left: 0 }
.seats-t .st-rm { color: var(--muted) } .seats-t .st-rm:hover { color: var(--maple) }
.seats-t td.proj { white-space: normal } .seats-t td.proj .chip { margin: 2px 0 0 0 } .seats-t td.proj > .small:first-child { margin-right: 6px }
.seats-t td.pw .pw-copy { max-width: 100%; font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: clip } .seats-t td.pw .chip { margin-top: 3px }
.seats-t tr.seat-left { opacity: .62 }
.seats-t .les-cur { font-size: .76rem }
.trk-sec { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--line); padding-top: 14px; margin-top: 4px }
.trk-sec .row-head { margin: 0 }
.trk-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px }
@media (max-width: 720px) { .trk-grid { grid-template-columns: minmax(0, 1fr) } }
.trk-card { all: unset; box-sizing: border-box; position: relative; display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); cursor: pointer; color: var(--ink); text-decoration: none; transition: border-color .15s, transform .15s }
.trk-card:hover { border-color: var(--focus); transform: translateY(-1px) } .trk-card:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px }
.trk-top { display: flex; align-items: baseline; gap: 8px } .trk-id { font: 700 1.5rem/1 var(--f-display); color: var(--maple) } .trk-book { font-weight: 600 } .trk-go { margin-left: auto; color: var(--focus); font-weight: 700 }
.trk-stage { font-weight: 600; font-size: .92rem } .trk-facts { display: flex; gap: 14px; font-size: .86rem } .trk-facts b { font-size: 1.05rem }
.trk-now { line-height: 1.35 } .trk-step { position: absolute; right: 14px; bottom: 10px; font-size: .7rem; color: var(--muted) }
.trk-lanes { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 18px; color: var(--muted) } .trk-lanes b { color: var(--ink); margin-right: 4px }
.trk-lanes .ln { display: inline-block; width: 18px; height: 3px; border-radius: 2px; vertical-align: middle; margin-right: 6px } .trk-lanes .ln.a { background: var(--ink) } .trk-lanes .ln.b { background: var(--focus) } .trk-lanes .ln.c { background: var(--maple) }
.seat-help summary { cursor: pointer; color: var(--focus) }
#td-root .fin.leafbox > .row-head:first-child { padding-right: 40px }   /* SW-53: Finances is the right column's first box, so it carries the leaf */
.td-les-perm { display: flex; gap: 8px; align-items: flex-start; line-height: 1.35; cursor: pointer } .td-les-perm input { width: auto; margin-top: 2px; accent-color: var(--maple) }   /* SW-58 */

/* SW-80 (canvas S01 / S02 «stack»): the student's week, one column on a phone — report, daily, what is missing, lessons, then the rest;
   the long homework card last. Ticks fill with the maple when done; the cards are softer and the title is bigger. */
@media (max-width: 899px) {
  .home-grid.stack > .col { display: contents }
  .home-grid.stack > .col > * { order: 6 }
  .home-grid.stack .h-rep { order: 1 } .home-grid.stack .h-daily { order: 2 } .home-grid.stack .h-miss { order: 3 }
  .home-grid.stack #les3 { order: 4 } .home-grid.stack #hw { order: 9 }
}
.home-grid.stack .card { border-radius: 18px }
:root:not([data-theme="dark"]) .home-grid.stack .card { box-shadow: 0 12px 28px -22px rgba(28, 29, 26, .45) }
.home-grid.stack .h-rep .row-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 4px 8px }
.home-grid.stack .h-rep .row-head > div { display: contents }
.home-grid.stack .h-rep .row-head .eyebrow { grid-column: 1 / -1; padding-right: 40px }
.home-grid.stack .h-rep h1 { font-size: 1.9rem; font-weight: 800; line-height: 1.1 }
.home-grid.stack .h-rep #go-report { border-radius: 999px }
.home-grid.stack .tick { border-radius: 8px; padding: 7px 0 }
.home-grid.stack .tick[aria-pressed="true"] { background: var(--maple); border-color: var(--maple); color: var(--on-maple) }
.home-grid.stack .day.today .tick:not(:disabled) { border-width: 2px; border-color: var(--ink) }
.home-grid.stack .tick.todo { border-color: var(--loot) }
/* ---- SW-80 (17 Oct 2026, A89 layouts · canvas A01 / A02): Admin = left sidebar + the teacher's day ---- */
.dash { display: flex; flex-direction: column; gap: 16px }
.dash-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 4px }
.dash-top h1 { font-size: 1.9rem; font-weight: 800 }
.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px }
.kpi { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); min-width: 0 }
.kpi b { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .85 }
.kpi strong { font-family: var(--f-display); font-size: 1.9rem; font-weight: 800; line-height: 1.1 }
.kpi span { font-size: .82rem; opacity: .9; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.kpi.hot { background: var(--maple); border-color: var(--maple); color: var(--on-maple) }
.kpi.soft { background: var(--soft); border-color: transparent }
.dash-list, .dash-needs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px }
.dash-list li { display: flex; gap: 12px; align-items: baseline; padding: 10px 12px; border-radius: 12px; background: var(--soft) }
.dash-list li b { color: var(--maple) }
:root[data-theme="dark"] .dash-list li b { color: var(--loot) }
.dash-needs li { display: flex; justify-content: space-between; gap: 8px; padding: 8px 0; border-top: 1px solid var(--line); font-size: .92rem }
.dash-needs li b { color: var(--maple) }
.dash-today h3 { margin-top: 6px }
.dash-today #dash-sched { align-self: flex-start }
.dash-body > .a-side { grid-area: side }
.aide-wide.dash-body { grid-template-areas: "side" "table" }
@media (max-width: 719px) { .kpi span { white-space: normal } .kpi strong { font-size: 1.6rem } }
@media (min-width: 720px) { .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)) } }
@media (min-width: 900px) {
  .aide-wide.dash-body { grid-template-columns: minmax(16rem, 1fr) minmax(0, 2.4fr); grid-template-areas: "side table"; grid-template-rows: auto }
  .aide-wide.dash-body > .a-side { grid-area: side !important; grid-column: auto !important; grid-row: auto !important }
}
@media (min-width: 1100px) {
  #adm-hub.adm { display: grid; grid-template-columns: 196px minmax(0, 1fr); column-gap: 24px; row-gap: 22px; align-items: start }
  #adm-hub > .adm-nav { grid-column: 1; grid-row: 1 / span 9; flex-direction: column; flex-wrap: nowrap; align-self: start; border-radius: 16px; padding: 10px;
    box-shadow: none; top: calc(var(--hdr, 62px) + 12px); gap: 4px }
  #adm-hub > .adm-nav .subtab { text-align: left; border-radius: 10px; padding: 10px 12px; font-size: .95rem }
  #adm-hub > .adm-nav .subtab[aria-pressed="true"] { background: var(--maple); color: var(--on-maple) }
  #adm-hub > section { grid-column: 2; min-width: 0 }
  #adm-hub > section:first-of-type { margin-top: 12px }
}
/* SW-83: «Thẻ của em» and the class's hardest cards */
.my-list, .dash-hcards { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px }
.my-row, .dash-hcards li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--line) }
.my-act { display: flex; gap: 6px; flex: none }
.dash-hcards li > span:last-child { flex: none; text-align: right }
/* SW-85: a spoken answer's measure on the seat's recordings */
.sp-out { margin-top: 4px } .sp-out .num { font-variant-numeric: tabular-nums } .sp-text { margin: 4px 0 0 }
/* SW-80: SW-79's sun/moon button made the staff bar 40 px wider; on a 360 px phone «Out» fell off the edge (test_sw32 failed since SW-79).
   With the staff tabs showing, the two round buttons are 32 px there (SW-32's own rule meant 34 px, but .dispbtn's min-width 40 won). */
@media (max-width: 420px) { .bar-in:has(.tabs:not([hidden])) .dispbtn { min-width: 32px; min-height: 32px; width: 32px; height: 32px } .bar-in:has(.tabs:not([hidden])) .bar-right { gap: 4px } .bar-in:has(.tabs:not([hidden])) #tabs .tab { padding: 6px 3px; font-size: .64rem } .bar-in:has(.tabs:not([hidden])) { padding-inline: 10px } }
/* SW-136: «Nhập bản ghi cũ» + «Thêm câu hỏi» — compact dropdowns, rows that wrap; under 720 px each row becomes a card (no sideways scroll) */
#it-imp .imp-t, #it-qadd .qa-t { width: 100%; table-layout: auto }
#it-imp .imp-t td, #it-qadd .qa-t td { vertical-align: top; overflow-wrap: anywhere; white-space: normal }   /* table.aide cells are nowrap */
#it-imp .imp-t td:first-child { width: 45% } #it-imp .imp-t td:last-child { width: 30% }
#it-imp .imp-t select, #it-qadd .qa-t select, #it-blind select { width: auto; min-width: 0; padding: 5px 6px; min-height: 34px; font-size: .9rem }
#it-imp .imp-mine { display: inline-flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; font-size: .85rem }
#it-imp .imp-q { width: 100%; margin-top: 4px; font-size: .9rem; padding: 6px 8px }
#it-imp .imp-audio { width: 100%; max-width: 300px; height: 36px; margin-top: 4px }
#it-imp tr.imp-saved td { opacity: .75 }
#it-qadd .qa-t input[type=text] { min-width: 10rem; padding: 6px 8px; font-size: .9rem }
#it-qadd textarea { min-height: 6rem }
@media (max-width: 720px) {
  #it-imp .imp-t thead, #it-qadd .qa-t thead { display: none }
  #it-imp .imp-t tr, #it-imp .imp-t td, #it-qadd .qa-t tr, #it-qadd .qa-t td { display: block; width: auto }
  #it-imp .imp-t tr, #it-qadd .qa-t tr { border-bottom: 1px solid var(--line); padding: 8px 0 }
  #it-imp .imp-t td, #it-qadd .qa-t td { border: 0; padding: 3px 0 }
  #it-imp .tablewrap, #it-qadd .tablewrap { overflow: visible }
}
/* ---- SW-146 / SW-147 (A346, 26 Oct 2026): the Maple apps' look (Design canvas «Maple Cards & Maple Speak — app screens»): big
   rounded surfaces, Lexend headings, Listening = blue, Reading = ochre, one primary action in the thumb zone, a feedback sheet
   after each answer. Colours are the site's tokens, so light and dark both hold. */
:root { --listen: #1d5fa8; --listen-ink: #164b85; --listen-soft: #e4eef9; --read-ink: #7a4700 }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --listen: #7fb2ef; --listen-ink: #a9cbf4; --listen-soft: #182a3f; --read-ink: #f2c14e } }
:root[data-theme="dark"] { --listen: #7fb2ef; --listen-ink: #a9cbf4; --listen-soft: #182a3f; --read-ink: #f2c14e }
.app-screen .card { border-radius: 20px }
.app-screen h1 { font-family: var(--f-display); font-weight: 600; letter-spacing: -.01em }
.app-screen .app-tile { border-radius: 18px; min-height: 76px }
.app-screen .app-tile[data-px] { background: var(--listen-soft); border-color: transparent }
.app-screen .app-tile[data-px] b { color: var(--listen-ink) }
.app-screen .app-tile[data-app-spkmine] { background: var(--ok-soft); border-color: transparent }
/* Luyện kiểu IELTS: the hub */
.px-pool { display: flex; align-items: center; gap: 8px } .px-pool select { flex: 1; min-height: 44px; border-radius: 12px }
.px-sec { display: flex; flex-direction: column; gap: 8px } .px-h { margin: 4px 4px 0; font-size: .78rem; letter-spacing: .1em; font-weight: 700 }
.px-hL { color: var(--listen-ink) } .px-hR { color: var(--read-ink) }
.px-list { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; overflow: hidden }
.px-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px }
.px-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; min-height: 64px; border: 0; background: var(--surface); color: var(--ink); text-align: left; font: inherit; cursor: pointer; width: 100% }
.px-list .px-row + .px-row { border-top: 1px solid var(--line) }
.px-grid .px-row { border: 1px solid var(--line); border-radius: 16px; flex-direction: column; align-items: flex-start; gap: 6px }
.px-row:disabled { opacity: .55; cursor: default } .px-row:not(:disabled):hover { background: var(--soft) }
.rv-mc { display: grid; grid-template-columns: 1fr; gap: 8px; margin: 12px 0 4px }   /* SW-170: the four choices, one per row on a phone */
@media (min-width: 560px) { .rv-mc { grid-template-columns: 1fr 1fr } }
.rv-mco { display: flex; align-items: center; gap: 10px; text-align: left; min-height: 48px; padding: 10px 12px; white-space: normal; overflow-wrap: anywhere }
.rv-mck { flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; background: var(--soft); color: var(--muted); font-size: .8rem; font-weight: 700 }
.paid-line { margin: 0; padding: 10px 14px; background: var(--surface); border-top: 1px solid var(--line, rgba(127,127,127,.2)) }   /* SW-168 (A355): the tier line inside the IELTS Speaking list */
.px-ic { width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; flex: none; font: 700 .9rem var(--f-display) }
.px-L .px-ic { background: var(--listen-soft); color: var(--listen-ink) } .px-R .px-ic { background: var(--warn-soft); color: var(--read-ink) }
.px-grid .px-ic { display: none }
.px-tt { display: flex; flex-direction: column; flex: 1 } .px-tt b { font-weight: 600 } .px-tt .small { color: var(--muted) }
.px-mix { display: flex; align-items: center; gap: 12px; justify-content: space-between; padding: 16px; border-radius: 20px; border: 0; background: var(--ink); color: var(--bg); text-align: left; font: inherit; cursor: pointer; min-height: 64px }
.px-mix b { font-family: var(--f-display); font-weight: 600; font-size: 1.05rem; display: block } .px-mix .small { opacity: .85 } .px-mix:disabled { opacity: .5 }
/* a question */
.px-top { display: flex; align-items: center; gap: 12px } .px-bar { flex: 1; height: 10px; border-radius: 99px; background: var(--soft); overflow: hidden }
.px-bar i { display: block; height: 100%; border-radius: 99px; background: var(--maple) }
.px-instr { border: 1.5px solid var(--ink); border-radius: 14px; padding: 12px 14px; background: var(--surface); display: flex; flex-direction: column; gap: 4px }
.px-instr p { margin: 0 } .px-instr .small { color: var(--muted) }
.px-tag { font-size: .72rem; font-weight: 700; letter-spacing: .08em } .px-tL { color: var(--listen-ink) } .px-tR { color: var(--read-ink) }
.px-play { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 6px 0 }
.px-pbtn { width: 88px; height: 88px; border-radius: 50%; border: 0; background: var(--listen); color: var(--surface); font-size: 2rem; cursor: pointer; box-shadow: 0 10px 24px -10px var(--listen) }
.px-card { gap: 12px } .px-card p { margin: 0 } .px-f { font-size: 1.1rem; line-height: 1.55 } .px-big { font-family: var(--f-display); font-size: 1.6rem; font-weight: 600 }
.px-gap { display: inline-block; min-width: 72px; border-bottom: 2px solid var(--ink) }
.px-num { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; border: 1.5px solid var(--ink); border-radius: 6px; font-weight: 700; font-size: .85rem; margin-right: 6px; flex: none }
.px-in { display: flex; align-items: center; gap: 8px } .px-in input { flex: 1; min-height: 50px; border-radius: 12px; font-size: 1.1rem; padding: 0 14px }
.px-opts { display: flex; flex-direction: column; gap: 8px } .px-tf { flex-direction: row } .px-tf .px-opt { flex: 1; justify-content: center }
.px-opt { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 10px 14px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); text-align: left; font: inherit; cursor: pointer }
.px-opt b { min-width: 18px } .px-opt.on { border-color: var(--ink); background: var(--soft) }
.px-opt.right, .px-slot.right { border-color: var(--ok); background: var(--ok-soft) } .px-opt.wrong, .px-slot.wrong { border-color: var(--maple); background: var(--maple-soft) }
.px-left { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px }
.px-slot { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 8px 12px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; text-align: left; cursor: pointer }
.px-slot.sel { border-color: var(--warn); background: var(--warn-soft) } .px-slot span { flex: 1 } .px-v { min-width: 24px; text-align: center }
.px-sum li { display: flex; gap: 10px; line-height: 1.9 } .px-sum .px-n { min-width: 22px }
.px-inl { display: inline-flex; width: auto; min-width: 54px; min-height: 34px; padding: 0 10px; justify-content: center; font-weight: 700; vertical-align: middle }
.px-box { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg) }
.px-w { min-height: 44px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; text-align: left; padding: 0 10px; cursor: pointer }
.px-w.used { text-decoration: line-through; color: var(--muted); background: var(--soft) }
.px-fix { color: var(--ok); font-weight: 700 }
.px-act { position: sticky; bottom: 0; padding: 10px 0 14px; background: var(--bg); display: flex; flex-direction: column; gap: 8px }
.px-fb { position: sticky; bottom: 0; border-radius: 22px 22px 0 0; padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 8px; margin: 0 -2px }
.px-fb p { margin: 0 } .px-fbh { font-family: var(--f-display); font-weight: 600; font-size: 1.15rem }
.px-fb.ok { background: var(--ok-soft) } .px-fb.ok .px-fbh { color: var(--ok) }
.px-fb.bad { background: var(--maple-soft) } .px-fb.bad .px-fbh { color: var(--maple) }
.px-fb.part { background: var(--warn-soft) } .px-fb.part .px-fbh { color: var(--read-ink) }
/* the result */
.px-score { align-items: center; text-align: center } .px-big-n { margin: 0; font-family: var(--f-display); line-height: 1 } .px-big-n b { font-size: 4rem } .px-big-n span { font-size: 1.8rem; color: var(--muted) }
.px-sks { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; width: 100% }
.px-sk { border-radius: 16px; padding: 12px; display: flex; flex-direction: column; gap: 4px } .px-sk b { font-family: var(--f-display); font-size: 1.6rem }
.px-skL { background: var(--listen-soft) } .px-skR { background: var(--warn-soft) }
.px-miss { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px }
/* Maple Speak: the machine's feedback */
.spk-wait { align-items: center; text-align: center } .spk-pulse { display: flex; gap: 8px; height: 40px; align-items: center }
.spk-pulse i { width: 8px; height: 16px; border-radius: 4px; background: var(--maple); animation: spkp 1s ease-in-out infinite } .spk-pulse i:nth-child(2) { animation-delay: .15s } .spk-pulse i:nth-child(3) { animation-delay: .3s }
@keyframes spkp { 50% { height: 40px } } @media (prefers-reduced-motion: reduce) { .spk-pulse i { animation: none } }
.spk-meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px } .spk-meta span { background: var(--bg); border: 1px solid var(--line); border-radius: 14px; padding: 8px; text-align: center; font-size: .8rem; color: var(--muted) }
.spk-meta b { display: block; font-family: var(--f-display); font-size: 1.15rem; color: var(--ink) }
.spk-sec { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 16px; display: flex; flex-direction: column; gap: 8px } .spk-sec h2 { margin: 0; font-size: 1.02rem } .spk-sec p { margin: 0 }
.spk-tr { font-size: 1.05rem; line-height: 1.8 } .spk-w { border: 0; background: none; padding: 0 1px; font: inherit; color: inherit; cursor: pointer; border-radius: 5px } .spk-w:hover, .spk-w:focus-visible { background: var(--listen-soft) }
.spk-dict { border: 1px solid var(--line); background: var(--listen-soft); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 6px }
.spk-errs { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px } .spk-err { border-radius: 14px; background: var(--soft); padding: 12px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start }
.spk-err.major { background: var(--warn-soft) } .spk-err s { color: var(--ink); text-decoration-color: var(--maple); text-decoration-thickness: 2px } .spk-err p b { color: var(--ok) }
.spk-bands { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px } .spk-band { background: var(--warn-soft); border-radius: 14px; padding: 8px; text-align: center; display: flex; flex-direction: column }
.spk-band b { font-family: var(--f-display); font-size: 1.4rem } .spk-band span { font-size: .75rem; color: var(--muted) }
.spk-att { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px } .spk-att li { padding: 6px 8px; border-radius: 10px; font-size: .9rem } .spk-att li[aria-current] { background: var(--maple-soft) }
.spk-mine { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px } .spk-mine p { margin: 0 }
.spk-foot { text-align: center }
/* SW-147: the learners' two homes */
.cx-hero { gap: 14px } .cx-hrow { display: flex; align-items: center; gap: 16px } .cx-hrow h1 { margin: 2px 0; font-size: 1.45rem } .cx-hrow p { margin: 0 }
.cx-ring { flex: none } .cx-r0 { fill: none; stroke: var(--soft); stroke-width: 10 } .cx-r1 { fill: none; stroke: var(--maple); stroke-width: 10; stroke-linecap: round; transition: stroke-dasharray .4s }
.cx-rn { font: 700 20px var(--f-display); fill: var(--ink) } .cx-rs { font: 11px var(--f-body); fill: var(--muted) }
.cx .cx-gowrap { display: block; margin: 0 } .cx-go { min-height: 52px; border-radius: 16px; font-size: 1.05rem; font-weight: 700 }
.cx-sec { display: flex; flex-direction: column; gap: 8px } .cx-h { display: flex; align-items: baseline; justify-content: space-between; margin: 2px 4px 0 } .cx-h h2 { margin: 0; font-size: 1.05rem; font-family: var(--f-display); font-weight: 600 }
.cx-quick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px }
.cx-q { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-height: 92px; padding: 14px; border-radius: 18px; border: 1px solid transparent; text-align: left; font: inherit; color: var(--ink); cursor: pointer }
.cx-q b { font-weight: 600; line-height: 1.3 } .cx-qL { background: var(--listen-soft) } .cx-qR { background: var(--warn-soft) } .cx-qM { background: var(--surface); border-color: var(--line) } .cx-qM .px-tag { color: var(--maple) }
.cx-q:disabled { opacity: .55; cursor: default }
.sx .dq { background: var(--maple-soft); border-color: transparent } .sx .dq .ib-q { font-family: var(--f-display); font-weight: 500 }
.sx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) } .sx-grid .app-tile { padding: 12px; min-height: 76px } .sx-grid .app-tile .small { font-size: .78rem }
.cx-r1[data-zero] { opacity: 0 } .px-fb.flow { position: static; border-radius: 22px }
.sx-ic { background: var(--maple-soft); color: var(--maple); font-size: .78rem } .sx-ok { background: var(--ok-soft); color: var(--ok) }
/* SW-148 (teacher 27 Oct 10:06 «implement the new look as well for both apps and both pc + mobile»): one look on the phone, the PC and
   the staff pages. Phone: one column. PC (≥ 900 px): the homes take two columns (the work on the left, the progress on the right);
   a question, a review card or a feedback page keeps a reading width. */
.cx, .sx { display: flex; flex-direction: column; gap: 16px } .cx-main, .cx-side, .sx-main, .sx-side { min-width: 0 }
.cx-main, .cx-side, .sx-main, .sx-side { display: flex; flex-direction: column; gap: 16px } .cx-pfirst .cx-main > .cx-sec { order: -1 }   /* A348: today's review done → the IELTS practice first */
.cx-pfirst .cx-hero h1 { font-size: 1.15rem } .cx-pfirst .cx-ring { width: 64px; height: 64px }
:root[data-apppage] main.wrap:has(> .cx), :root[data-apppage] main.wrap:has(> .sx) { max-width: var(--ap-w) }
:root[data-apppage] main.wrap:not(:has(> .ap)) .cx .card:has(> h1), :root[data-apppage] main.wrap:not(:has(> .ap)) .sx .card:has(> h1) { box-shadow: none; padding-top: 20px }
@media (min-width: 900px) {
  main.wrap:has(> .cx), main.wrap:has(> .sx), main.wrap:has(> .px-hub), .back-in:has(+ main.wrap > .cx) { max-width: 68rem }
  .cx, .sx { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; gap: 20px }
  .cx-quick { grid-template-columns: repeat(4, minmax(0, 1fr)) } .cx-q { min-height: 112px }
  .cx-more { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .px-hub { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start }
  .px-hub > .card { grid-column: 1 / -1 } .px-hub > .px-mix { grid-column: 1 / -1 }
  main.wrap:has(> .px-q), main.wrap:has(> .px-res), main.wrap:has(> .spk-res), main.wrap:has(> .spk-wait) { max-width: 44rem }
  .px-fb { border-radius: 22px; margin: 0 }
  main.wrap:has(> .card.rv) { max-width: 44rem }
  main.wrap:has(.ib-list) { max-width: 60rem } .ib-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; align-items: start }
}
/* the review card in the same look */
.card.rv { border-radius: 22px; padding: 18px }
.rv-card { border-radius: 22px; border: 1px solid var(--line); background: var(--surface); box-shadow: 0 10px 30px -18px rgba(60, 40, 20, .35); padding: 24px 18px }
.rv-front { font-family: var(--f-display); font-weight: 500; font-size: 1.5rem; line-height: 1.4 }
.rv-gap { display: inline-block; min-width: 3.2em; border-bottom: 2px solid var(--ink) }
.rv-grade { gap: 8px } .rv-grade .btn { min-height: 64px; border-radius: 16px; border: 0; font-weight: 600 }
.rv-grade .rv-g1 { background: var(--maple-soft); color: var(--maple) } .rv-grade .rv-g2 { background: var(--warn-soft); color: var(--read-ink) }
.rv-grade .rv-g3 { background: var(--ok-soft); color: var(--ok) } .rv-grade .rv-g4 { background: var(--listen-soft); color: var(--listen-ink) }
#rv-show { min-height: 52px; border-radius: 16px; font-weight: 700 }
/* Maple Speak: a question and its recorder */
.ib-now { border-radius: 18px; padding: 16px } .ib-now .ib-q { font-family: var(--f-display); font-weight: 600; font-size: 1.45rem; line-height: 1.3 }
#rec-card { border-radius: 22px } #rec-card #rec-go, #rec-card #rec-stop { min-height: 56px; border-radius: 18px; font-size: 1.05rem; font-weight: 700 }
#rec-card #rec-go { background: var(--maple); color: var(--on-maple); border-color: var(--maple) }
#rec-card [data-spk].primary { min-height: 44px; padding: 0 16px; border-radius: 14px; font-weight: 700 }
.rec-item { border-radius: 16px }
/* SW-152: Lessons → the term tests, one row per paper: name · Làm thử · Results */
.ft-rows { display: flex; flex-direction: column; gap: 6px } .ft-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px } .ft-row b { flex: 1 1 14rem; font-weight: 600 }