/* ═══════════════════════════════════════════════════════════════════════════
   SURF-STUDENT — the authenticated student register.
   Source: Mini Student (§6.S, S.1–S.11, S0) is CANONICAL for product structure
   and section order. PC is ADAPTATION (ADJ-001): it may widen, add a rail and
   raise density — it may NOT delete a Mini section.

   The legacy Mini carried NO media queries at all, so every breakpoint here is
   product design, not a port. Rule applied throughout: a canonical module never
   silently disappears at a breakpoint.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Me hero (student) — Mini's grad-hero identity band ─────────────────── */
.me-hero { background: var(--grad-hero); padding: var(--sp-4) var(--sp-4) var(--sp-6); }
.me-hero .mh-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-4); }
.me-hero .mh-title { font-size: var(--fs-h2); font-weight: var(--fw-bold); color: var(--c-ink); }
.user-card { background: var(--c-surface); border-radius: var(--r-lg); padding: var(--sp-4);
  box-shadow: var(--sh-sm); }
.user-card .uc-top { display: flex; gap: var(--sp-3); align-items: center; }
.user-card .uc-name { font-size: var(--fs-h3); font-weight: var(--fw-semibold); color: var(--c-ink);
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.user-card .uc-desc { font-size: var(--fs-sm); color: var(--c-mute); margin-top: 3px; }
.stat-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
.stat-col { text-align: center; position: relative; }
.stat-col + .stat-col::before { content: ''; position: absolute; left: 0; top: 4px; bottom: 4px;
  width: 1px; background: var(--c-line); }
.stat-col .sc-num { font-size: var(--fs-h2); font-weight: var(--fw-bold); color: var(--c-ink);
  font-variant-numeric: tabular-nums; }
.stat-col .sc-label { font-size: var(--fs-xs); color: var(--c-mute); margin-top: 2px; }

/* ── Today card — the student schedule's PRIMARY module (Mini S.1 B4) ───── */
.today-card { background: var(--grad-primary); color: #fff; border-radius: var(--r-lg);
  padding: var(--sp-4); box-shadow: var(--sh-primary); }
.today-card .tc-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.today-card h3 { font-size: var(--fs-h3); color: #fff; font-weight: var(--fw-semibold); margin-top: var(--sp-3); line-height: 1.35; }
.today-card .tcc-tutor { display: flex; align-items: center; gap: 7px; color: rgba(255, 255, 255, 0.88);
  font-size: var(--fs-sm); margin-top: var(--sp-3); }
.today-card .tcc-divider { height: 1px; background: rgba(255, 255, 255, 0.18); margin: var(--sp-4) 0; }
.check-item { display: flex; align-items: center; gap: 9px; font-size: var(--fs-sm); padding: 5px 0; }
.check-item .ci-dot { width: 17px; height: 17px; border-radius: 50%; border: 1.6px solid rgba(255, 255, 255, 0.6);
  display: inline-flex; align-items: center; justify-content: center; flex: none; }
.check-item.is-done .ci-dot { background: #fff; border-color: #fff; color: var(--c-primary-600); }
.check-item.is-done { color: rgba(255, 255, 255, 0.9); }
.check-item:not(.is-done) { color: rgba(255, 255, 255, 0.7); }

/* ── Todo matrix ────────────────────────────────────────────────────────── */
.todo-card { display: flex; gap: var(--sp-3); align-items: center; padding: var(--sp-3) var(--sp-4);
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-md); }
.todo-card .td-title { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--c-ink); }
.todo-card .td-desc { font-size: var(--fs-xs); color: var(--c-mute); margin-top: 2px; }

/* ── Lesson rows ────────────────────────────────────────────────────────── */
.lesson-row { display: flex; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); align-items: center;
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-md); }
.lesson-row .lr-day { width: 44px; flex: none; text-align: center; }
.lesson-row .lr-day .d-num { font-size: var(--fs-h3); font-weight: var(--fw-bold); color: var(--c-ink); }
.lesson-row .lr-day .d-wk { font-size: 10px; color: var(--c-mute); }
.lesson-row .lr-rule { width: 1px; align-self: stretch; background: var(--c-line); }
.lesson-row .lr-main { flex: 1; min-width: 0; }
.lesson-row .lr-title { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--c-ink); }
.lesson-row .lr-meta { font-size: var(--fs-xs); color: var(--c-mute); margin-top: 3px; }

/* ── Recording / homework / AI note ─────────────────────────────────────── */
.rec-card { display: flex; gap: var(--sp-3); padding: var(--sp-3); align-items: center;
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-md); }
.rec-thumb { width: 64px; height: 48px; border-radius: var(--r-sm); background: var(--grad-dark); flex: none;
  display: inline-flex; align-items: center; justify-content: center; color: #fff; }
.ai-note-card { background: var(--c-ai-bg); border: 1px solid #e6dafb; border-radius: var(--r-md); padding: var(--sp-4); }
.ai-note-card .anc-head { display: flex; align-items: center; gap: 8px; margin-bottom: var(--sp-2); }
.ai-note-card .anc-title { font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--c-ai-ink); }
.ai-note-card .anc-sub { font-size: var(--fs-sm); color: #8a6bc4; margin-top: var(--sp-1); }

/* ── Conversation rows — the ctx tag is the differentiator ──────────────── */
.conv-row { display: flex; gap: var(--sp-3); padding: var(--sp-4); align-items: flex-start;
  background: var(--c-surface); cursor: pointer; transition: background var(--dur-fast) var(--ease); }
.conv-row:hover { background: var(--c-surface-2); }
.conv-row + .conv-row { border-top: 1px solid var(--c-line-soft); }
.conv-row .cr-main { flex: 1; min-width: 0; }
.conv-row .cr-top { display: flex; align-items: center; gap: 8px; }
.conv-row .cr-name { font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--c-ink); }
.conv-row .cr-time { font-size: var(--fs-xs); color: var(--c-faint); margin-left: auto; flex: none; }
.conv-row .cr-last { font-size: var(--fs-sm); color: var(--c-mute); margin-top: 5px; }
.online-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--c-success);
  border: 2px solid #fff; position: absolute; right: 0; bottom: 0; }
.av-wrap { position: relative; flex: none; }

/* ── Chat ───────────────────────────────────────────────────────────────── */
.chat-scroll { background: var(--c-bg); padding: var(--sp-4); }
.ctx-card { display: flex; gap: var(--sp-3); padding: var(--sp-3); background: var(--c-surface);
  border-radius: var(--r-md); box-shadow: var(--sh-xs); align-items: center; }
.ctx-card .cc-thumb { width: 46px; height: 36px; border-radius: var(--r-xs); background: var(--grad-hero); flex: none;
  display: inline-flex; align-items: center; justify-content: center; color: var(--c-primary-300); }
.day-label { text-align: center; font-size: var(--fs-xs); color: var(--c-faint); margin: var(--sp-5) 0 var(--sp-4); }

/* ── Order detail ───────────────────────────────────────────────────────── */
.order-hero { background: var(--grad-primary); color: #fff; padding: 60px var(--sp-4) var(--sp-5);
  border-radius: 0 0 var(--r-lg) var(--r-lg); }
.order-hero h2 { font-size: var(--fs-h2); color: #fff; font-weight: var(--fw-bold); }
.order-hero .oh-desc { font-size: var(--fs-sm); color: rgba(255, 255, 255, 0.86); margin-top: 6px; line-height: 1.6; }
.order-hero .oh-ico { width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, 0.2);
  display: inline-flex; align-items: center; justify-content: center; margin-bottom: var(--sp-4); }
.thumbs { display: flex; gap: var(--sp-3); align-items: center; }
.thumb { width: 88px; height: 66px; border-radius: var(--r-sm); background: var(--grad-hero); flex: none;
  display: inline-flex; align-items: center; justify-content: center; color: var(--c-primary-200); }
.link-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-2); }

/* ── Profile edit ───────────────────────────────────────────────────────── */
.av-edit { position: relative; display: inline-block; }
.av-edit .cam { position: absolute; right: -2px; bottom: -2px; width: 28px; height: 28px; border-radius: 50%;
  background: var(--c-primary-500); color: #fff; display: inline-flex; align-items: center;
  justify-content: center; border: 2px solid #fff; }

/* ── Protection ─────────────────────────────────────────────────────────── */
.prot-card { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-4);
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-md); }

/* ── Explore ────────────────────────────────────────────────────────────── */
.explore-head { background: var(--grad-hero); padding: var(--sp-5) var(--sp-4) var(--sp-4); }
.subj-entry { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
.subj-card { height: 88px; border-radius: var(--r-md); padding: var(--sp-3); color: #fff;
  display: flex; flex-direction: column; justify-content: space-between; text-align: left; }
.subj-card .sc-tag { font-size: 10px; opacity: 0.85; }
.subj-card .sc-name { font-size: var(--fs-md); font-weight: var(--fw-semibold); }
.ai-card { background: var(--grad-ai); border-radius: var(--r-lg); padding: var(--sp-4); color: #fff; }
.ai-card .ac-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px;
  border-radius: var(--r-xs); background: rgba(255, 255, 255, 0.22); font-size: var(--fs-xs);
  font-weight: var(--fw-semibold); }
.ai-pick { display: flex; gap: 9px; align-items: center; padding: 9px 11px; border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.14); }
.ai-pick .ap-name { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: #fff; }
.ai-pick .ap-reason { font-size: 10px; color: rgba(255, 255, 255, 0.82); margin-top: 1px; }

/* ── PC adaptation: a rail is ADDED, Mini sections are preserved ────────── */
.stu-split { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--sp-6); align-items: start; }
@container (max-width: 1000px) { .stu-split { grid-template-columns: minmax(0,1fr); } }
.stu-rail { position: sticky; top: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-4); }
/* On a wide container the 4-up entry grid becomes 8-up so the whole grid stays
   one visual row — Mini's 9-tile grid regrouped, not reduced. */
.grid-entry-grid.is-wide { grid-template-columns: repeat(8, minmax(0, 1fr)); }
@container (max-width: 900px) { .grid-entry-grid.is-wide { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* The App shell centered at a mobile measure on a wide container: the phone
   paradigm is a real product state, not a shrunken desktop. */
@media (min-width: 1001px) {
  .app-shell.is-narrow .app-body { max-width: 720px; margin: 0 auto; width: 100%; }
  .app-shell.is-narrow .app-topbar { max-width: 720px; margin: 0 auto; }
  .app-shell.is-narrow .tabbar { max-width: 460px; margin: 0 auto var(--sp-3); }
}

/* Lane B root family: pinned Mini page composition, not a dashboard expansion.
   Only domain scopes; shared token/chrome differences are Director requests. */
.mini-root { padding: 14px 16px 20px; }
.mini-root .mt-6 { margin-top: 24px; }
.mini-root .mt-5 { margin-top: 20px; }
.mini-root .col.g-3 { gap: 10px; }
.mini-root .today-card { padding: 16px; border-radius: 18px; }
.mini-root .today-card .badge { background: rgba(255,255,255,.22); color: #fff; }
.mini-root .today-card .status-live { color: #ffd2d2; }
.mini-root .today-card .tcc-tutor { margin-top: 4px; }
.mini-root .today-card .check-item { padding: 4px 0; }
.mini-root .today-card .ci-dot { width: 14px; height: 14px; }
.mini-root .lesson-row { padding: 14px; }
.mini-root .ai-note-card { padding: 14px; }
.mini-root .anc-sub { font-size: 11px; text-align: left; }
.mini-grid-four { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px 8px; }
.mini-grid-four .grid-entry { padding: 0; }
.mini-grid-four .ge-ico { width: 44px; height: 44px; border-radius: 12px; }
.me-root .growth-band { background: var(--grad-ai); }
.messages-root .mini-conversations { border: 0; border-radius: 0; }
.messages-root .conv-row { padding: 16px 0; }
.messages-root .cr-last { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.messages-root .conv-row .badge { font-size: 10px; }
.messages-root .unread-badge { align-self: flex-end; margin-bottom: 2px; }

/* Repair wave: exact Mini DS 784–814 / 2249–2374, scoped to owned roots. */
.sessions-root .seg-tabs { border-radius: 999px; padding: 4px; gap: 4px; }
.sessions-root .seg-tabs > button { border-radius: 999px; padding: 9px 4px; }
.sessions-root .today-card { box-shadow: none; }
.sessions-root .session-checklist { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.sessions-root .today-card .check-item { padding: 9px 0; gap: 8px; border-bottom: 1px solid var(--c-line-soft); }
.sessions-root .today-card .check-item:last-child { border-bottom: none; }
.sessions-root .today-card .ci-dot { width: 18px; height: 18px; }
.sessions-root .todo-card, .sessions-root .rec-card { padding: 13px; border-radius: 18px; }
.sessions-root .todo-card .icon-tile, .sessions-root .rec-card .icon-tile { width: 40px; height: 40px; border-radius: 10px; }
.sessions-root .lesson-row { padding: 13px; background: none; border: none; border-radius: 0; }
.sessions-root .lesson-row .lr-day { width: 52px; }
.sessions-root .lesson-row .d-wk { font-size: var(--fs-xs); }
.sessions-root .ai-note-card { padding: 16px; border-radius: 18px; text-align: left; }
.sessions-root .anc-title { color: #6b3fb8; font-weight: var(--fw-bold); }
.sessions-root .anc-sub { font-size: var(--fs-xs); }
.student-me-hero { padding: 8px 16px 22px; }
.student-me-hero .mh-bar { padding: 6px 0 14px; margin-bottom: 0; }
.me-root .mini-grid-four .grid-entry { padding: 6px 0; }
.me-root .mini-grid-four .ge-ico { width: 46px; height: 46px; border-radius: 14px; }
.me-root > .mt-3 { margin-top: 12px; }
.plain-setting-icon { display: inline-flex; color: #5b54ec; }
.mini-settings .list-row { padding: 13px 0; }
.messages-root .conv-row { padding: 13px 0; align-items: center; border-top: none; border-bottom: 1px solid var(--c-line-soft); background: none; }
.messages-root .mini-ctx-tag { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs); padding: 2px 7px; border-radius: var(--r-xs); background: var(--c-info-bg); color: var(--c-primary-600); margin-top: 4px; }
.messages-root .cr-preview { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; }
.messages-root .cr-last { flex: 1; min-width: 0; margin: 0 8px 0 0; }
.messages-root .unread-badge { align-self: auto; margin: 0; flex-shrink: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; font-size: 10px; }

/* Pinned Mini typography/spacing, scoped to repaired roots. */
.sessions-root .mini-today-cta { margin-top: 14px; }
.me-root .mini-settings .lr-title { font-size: 13px; font-weight: 400; }

/* Mini fidelity wave — page-local source geometry only. */
.sessions-root .today-card h3 { margin-top: 10px; }
.sessions-root .today-card .tcc-tutor { gap: 8px; }
.sessions-root .today-card .tcc-divider { margin: 14px 0; }
.sessions-root .mini-local-mt { margin-top: 10px; }
/* TT ds.scss:1554–1565 surface-2 is #f7f8fc, not the Web token #f9fafe. */
.app-shell-mini .messages-root .mini-search { background: #f7f8fc; }
.messages-root .mini-search { margin-bottom: 12px; }
.messages-root .mini-conduct-gap { margin-top: 12px; }
.me-root .mini-grid-four { gap: 8px; }
.student-me-hero .uc-desc { margin-top: 4px; }
.student-me-hero .uc-name { gap: 8px; }

/* Source .badge (ds.scss:382–390), not shared compact badge-sm options.
   Messages context/unread have their own source metrics and are excluded. */
.app-shell-mini .sessions-root .badge-sm,
.app-shell-mini .student-me-hero .badge-sm,
.app-shell-mini .me-root .badge-sm { font-size: 11px; padding: 3px 8px; }

/* tx5: transaction family only; no root selectors or shell overrides. */
.tx5 { max-width: 780px; margin: 0 auto; }
.tx5-stepper { padding: 20px 24px; background: var(--c-surface); }
.tx5-stepper h2 { font-size: var(--fs-h3); font-weight: 700; }
.tx5-stepper p { font-size: var(--fs-xs); color: var(--c-muted); margin-top: 4px; }
.tx5-steps { display: flex; gap: 8px; margin-top: 18px; }
.tx5-steps i { height: 4px; border-radius: 8px; flex: 1; background: var(--c-line); }
.tx5-steps .done { background: var(--c-primary-300); }
.tx5-steps .active { background: var(--c-primary-600); }
.tx5-slots { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.tx5-slot { padding: 14px 6px; border: 1px solid var(--c-line); border-radius: 12px; background: var(--c-surface); display: flex; flex-direction: column; gap: 5px; }
.tx5-slot span { font-size: var(--fs-xs); color: var(--c-muted); }
.tx5-slot b { font-size: var(--fs-md); }
.tx5-slot.is-selected { background: var(--c-primary-50); border-color: var(--c-primary-600); color: var(--c-primary-600); }
.tx5-slot:disabled { opacity: .45; cursor: not-allowed; }
.tx5-footer { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; margin-top: 20px; border-top: 1px solid var(--c-line); }
.tx5-footer small { color: var(--c-muted); }
.tx5-pay { width: 100%; border: 1px solid var(--c-line); border-radius: 12px; padding: 16px; display: flex; gap: 12px; align-items: center; margin-bottom: 12px; background: var(--c-surface); text-align: left; }
.tx5-pay[aria-pressed="true"] { border-color: var(--c-primary-600); background: var(--c-primary-50); }
.tx5-pay small { display: block; color: var(--c-muted); margin-top: 4px; }
.tx5-pay-logo { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; color: #fff; font-weight: 700; }
.tx5-pay-logo.wechat { background: #07c160; }
.tx5-pay-logo.alipay { background: #1677ff; }
.tx5-search { display: block; margin-bottom: 16px; font-size: var(--fs-xs); color: var(--c-muted); }
.tx5-search input { margin-top: 6px; width: 100%; }
.tx5 [data-tx5-section="lesson-related"] { margin-bottom: 24px; }
@container (max-width: 420px) { .tx5-stepper { padding: 16px; } .tx5-footer { gap: 10px; flex-wrap: wrap; } .tx5-footer .btn { flex: 1; } }
/* tx5 transaction repair: domain-only source anatomy, no root selectors. */
.tx5 .tx5-course-thumb{width:84px;height:64px;object-fit:cover;border-radius:var(--r-sm);flex:none}
.tx5 .tx5-avatar{width:48px;height:48px;object-fit:cover;border-radius:50%}
.tx5 .tx5-lesson-hero{background:var(--grad-primary);color:white;padding:16px;border-radius:var(--r-md);margin:12px 0}
.tx5 .tx5-footer{position:sticky;bottom:0;z-index:2;background:var(--c-surface);box-shadow:0 -2px 10px #0001;padding:16px;margin-top:24px}
.tx5 .tx5-radio{width:20px;height:20px;border:2px solid var(--c-line);border-radius:50%;margin-left:auto}
.tx5 .tx5-pay[aria-checked="true"] .tx5-radio{border:6px solid var(--c-primary-600)}
.tx5 [aria-disabled="true"]{cursor:default}
.tx5 .tx5-ai svg,.tx5 [data-tx5-section="lesson-related"] svg{width:24px;height:24px;flex:none}
/* Task19 source composition: transaction descendants only. */
.tx5 .tx5-related-row { display:flex; align-items:center; gap:12px; padding:14px 0; border-bottom:1px solid var(--c-line); }
.tx5 .tx5-related-row > svg { flex-shrink:0; }
.tx5 .tx5-related-row p, .tx5 .tx5-related-row small { margin-top:4px; color:var(--c-muted); font-size:var(--fs-xs); }
.tx5 .tx5-classroom { background:linear-gradient(120deg,#6553df,#4130b5); color:white; }
.tx5 .tx5-sticky-actions { position:sticky; bottom:0; display:flex; gap:12px; align-items:center; padding:14px; background:var(--c-surface); border-top:1px solid var(--c-line); z-index:2; }
.tx5 .tx5-sticky-actions > .btn:last-child { flex:1; }
.tx5 .tx5-slot[aria-pressed="true"] { border-color:var(--c-primary-600); background:var(--c-primary-50); }
.tx5 [data-tx5-result] { white-space:pre-wrap; overflow-wrap:anywhere; }
.tx5 .check-item { display:flex; align-items:center; gap:10px; }
.tx5 .check-item > .t-sm { flex:1; }

/* Whole transaction source grammar repair. Source declarations above untouched. */
.dq-frame:has(.tx5) { transform: translateZ(0); }
.tx5 { font-family: inherit; padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
.tx5 .tx5-footer, .tx5 .tx5-sticky-actions { position: fixed; left: 0; right: 0; bottom: 0; margin: 0; z-index: 30; background: #fff; border-top: 1px solid var(--c-line); padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); display: flex; gap: 10px; align-items: center; }
.tx5 .tx5-sticky-actions > .btn:last-child { flex: 1; }
.tx5 .tx5-source-nav { height: 50px; padding: 8px; display: flex; align-items: center; justify-content: space-between; background: #fff; }
.tx5.tx5-student-order .tx5-source-nav { color: #fff; background: var(--grad-primary); }
.tx5.tx5-student-order .tx5-source-nav .btn { color: #fff; background: rgba(255,255,255,.22); }
.tx5 .tx5-source-status { background: var(--grad-primary); color: #fff; padding: 14px 16px 18px; }
.tx5 .tx5-source-status h2 { display: flex; gap: 8px; align-items: center; color: #fff; }
.tx5 .tx5-source-status p { color: rgba(255,255,255,.85); }
.tx5 .tx5-source-order-hero { background: var(--grad-hero); padding: 14px 16px 18px; }
.tx5 .tx5-lesson-hero { margin: 0; border-radius: 0; padding: 16px; background: var(--grad-primary); color: #fff; }
.tx5 .tx5-lesson-hero h2 { color: #fff; }
.tx5 .tx5-ai { padding: 16px; border-radius: var(--r-lg); background: var(--grad-ai, linear-gradient(135deg,#9b6df5,#6b3fb8)); color: #fff; }
.tx5 .tx5-ai h3 { color: #fff; margin: 8px 0 4px; }
.tx5 .tx5-white-badge { background: rgba(255,255,255,.22); padding: 4px 8px; border-radius: 6px; }
.tx5 .tx5-white-cta { background: #fff; color: #6b3fb8; padding: 9px 18px; }
.tx5 .tx5-ai .tx5-white-cta { width: 100%; margin-top: 12px; }
.tx5 .tx5-classroom { background: var(--grad-primary); color: #fff; }
.tx5 .tx5-classroom h3 { color: #fff; }
.tx5 .tx5-source-order .tx5-course-thumb { width: 84px; height: 64px; border-radius: var(--r-sm); }
.tx5 .tx5-note { background: var(--c-surface-2); padding: 10px; margin-top: 12px; border-radius: var(--r-sm); }
.tx5 .tx5-related-row { display: flex; width: 100%; gap: 10px; padding: 12px 0; align-items: center; text-align: left; background: transparent; border: 0; border-bottom: 1px solid var(--c-line-soft); }
.tx5 .tx5-related-row span { flex: 1; }
.tx5 .tx5-related-row small { display: block; color: var(--c-mute); }
.tx5 .tx5-related-row:disabled { opacity: .7; cursor: not-allowed; }
.tx5 .tx5-goals { white-space: pre-line; line-height: 1.7; }
.tx5 .tx5-boundary { display: block; color: var(--c-mute); margin-top: 12px; font-size: 11px; }
.tx5 .tx5-check { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--c-line); display: inline-flex; align-items: center; justify-content: center; }
.tx5 .tx5-check.done { background: var(--c-success); color: #fff; border-color: var(--c-success); }
.tx5 .tx5-coupon { display: flex; gap: 12px; align-items: center; }
.tx5 .tx5-coupon > div { flex: 1; }
.tx5 .tx5-coupon strong { color: var(--c-danger); font-size: 20px; }
.tx5 .tx5-gift { padding: 12px; background: var(--c-accent-100); color: var(--c-accent-600); border-radius: var(--r-sm); }
.tx5 .tx5-pay[aria-checked="true"] .tx5-radio { background: var(--c-primary-600); border-color: var(--c-primary-600); box-shadow: inset 0 0 0 4px #fff; }
.tx5 .tx5-coupon strong { color: var(--c-accent-600); }
.tx5 .btn { border-radius: var(--r-sm); font-size: var(--fs-sm); }
.tx5.tx5-student-order { position: relative; }
.tx5.tx5-student-order .tx5-source-nav { position: absolute; inset: 0 0 auto; z-index: 2; background: transparent; }
.tx5.tx5-student-order .tx5-source-status { padding-top: 64px; }

/* tx5 exact source row grammar; append-only, no first-App5 override. */
.tx5 .tx5-sec-title{margin-top:16px;margin-bottom:10px}
.tx5 .tx5-sec-title h3{margin:0}
.tx5 .tx5-sec-title + [data-tx5-section]{margin-top:0}
.tx5 .tx5-source-kv .kv,.tx5 .tx5-current-projection{display:flex;justify-content:space-between;gap:16px;padding:8px 0}
.tx5 .tx5-source-kv .k,.tx5 .tx5-current-projection .k{color:var(--c-mute);font-size:13px}
.tx5 .tx5-source-kv .v,.tx5 .tx5-current-projection .v{text-align:right;font-size:13px}
.tx5 .tx5-source-kv .tx5-value-danger{color:var(--danger,#dc4545)}
.tx5 .tx5-source-kv .tx5-value-warning,.tx5 .tx5-status-pending{color:#b8791a}
.tx5 .tx5-icon-tile{display:flex;align-items:center;justify-content:center;flex:0 0 36px;width:36px;height:36px;border-radius:10px}
.tx5 .tx5-related-row > span:not(.tx5-icon-tile):not(.tx5-chev){flex:1;min-width:0}
.tx5 .tx5-chev{flex:none;color:var(--c-mute);display:flex}
.tx5 .tx5-tone-info,.tx5 .tx5-tone-primary{background:#edf0ff;color:#5546d8}
.tx5 .tx5-tone-danger{background:#fff0ef;color:#db4545}
.tx5 .tx5-tone-teal{background:#e7f7f4;color:#178b7e}
.tx5 .tx5-tone-ai{background:#f2ebff;color:#9b6df5}
.tx5 .tx5-tone-success{background:#eaf7ef;color:#249e64}
.tx5 .tx5-tone-accent{background:#fff0e6;color:#f15f1f}
.tx5 .tx5-tone-warn{background:#fff6e3;color:#b8791a}
.tx5 .tx5-tone-mute,.tx5 .tx5-tone-neutral{background:#f3f3f6;color:#8b8fa3}
.tx5 .tx5-hero-status{color:#ffd9c4}
.tx5 .tx5-projection-authority{display:block;color:var(--c-mute);font-size:11px;line-height:1.6}

/* SharedLesson source checklist is on white, not the first-App5 dark card.
   Source label stays ink even when done; only the completion annotation is faint. */
.tx5 [data-tx5-section="checklist"] .check-item { color: var(--c-ink); }
.tx5 [data-tx5-section="checklist"] .check-item > span:nth-child(2) { flex: 1; color: var(--c-ink); }
.tx5 [data-tx5-section="checklist"] .check-item.is-done > small { color: var(--c-faint); }
.tx5 [data-tx5-section="checklist"] .check-item > .btn { color: var(--c-primary-600); }

/* Task32 source media only. Task30 frame action slot pending: flow footer,
   not a viewport-fixed workaround. All original stylesheet bytes preserved. */
.media-canon-screen { position:relative; display:flex; flex-direction:column; background:#fff; color:#4a4d63; line-height:1.5; }
.media-canon-pad { padding:16px; }
.media-canon-nav { display:flex; align-items:center; justify-content:space-between; height:50px; padding:0 8px; border-bottom:1px solid #ebecf3; }
.media-canon-float { position:absolute; inset:0 0 auto; z-index:2; color:#fff; border:0; background:transparent; }
.media-canon-float .btn { background:rgba(0,0,0,.35); color:#fff; }
.media-canon-player { position:relative; height:212px; width:100%; background:#1a1c2e; color:#fff; overflow:hidden; }
.media-canon-cover { width:100%; height:100%; object-fit:cover; opacity:.7; }
.media-canon-cover-unknown { display:flex; height:100%; align-items:center; justify-content:center; }
.media-canon-play { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:60px; height:60px; border-radius:50%; border:0; background:rgba(255,255,255,.92); color:#5b54ec; }
.media-canon-player-bar { position:absolute; inset:auto 0 0; padding:10px 14px; background:linear-gradient(transparent,rgba(0,0,0,.7)); font-size:11px; }
.media-canon-track { height:3px; background:rgba(255,255,255,.3); border-radius:2px; margin-bottom:8px; }
.media-canon-track i { display:block; height:100%; width:0; background:#ff7a3d; }
.media-canon-avatar { width:26px; height:26px; border-radius:50%; object-fit:cover; background:#dde2ff; text-align:center; }
.media-canon-ai { padding:16px; border-radius:18px; color:#fff; background:linear-gradient(135deg,#6a5cf0 0%,#9b6df5 50%,#c66ff0 100%); }
.media-canon-ai p { line-height:1.7; font-size:13px; }
.media-canon-ai h3 { color:#fff; }
.media-canon-white-badge { display:inline-block; padding:3px 8px; border-radius:999px; font-size:11px; background:rgba(255,255,255,.22); }
.media-canon-ai-btn { width:100%; background:#fff; color:#6b3fb8; margin-top:12px; padding:10px; }
.media-canon-chapter { display:flex; gap:12px; align-items:center; width:100%; padding:13px 0; border:0; border-bottom:1px solid #f3f4f9; background:transparent; text-align:left; }
.media-canon-chapter:last-child { border-bottom:0; }
.media-canon-time { font-size:11px; font-weight:600; color:#4c3fd6; background:#eef1ff; padding:3px 7px; border-radius:6px; }
.media-canon-proc-player { height:212px; background:#23253a; color:#fff; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:12px; }
.media-canon-proc-player small { color:rgba(255,255,255,.6); }
.media-canon-proc-ring { width:54px; height:54px; border:4px solid rgba(255,255,255,.18); border-top-color:#9b6df5; border-radius:50%; }
.media-canon-timeline { padding-left:22px; margin-top:12px; }
.media-canon-step { position:relative; padding-bottom:16px; }
.media-canon-step small { display:block; color:#8b8fa3; }
.media-canon-step::before { content:''; position:absolute; left:-22px; top:2px; width:11px; height:11px; background:#ebecf3; border-radius:50%; border:2.5px solid #fff; box-shadow:0 0 0 1px #ebecf3; }
.media-canon-step::after { content:''; position:absolute; left:-17px; top:13px; bottom:0; width:2px; background:#ebecf3; }
.media-canon-step:last-child::after { display:none; }
.media-canon-done::before,.media-canon-done::after { background:#16b896; }
.media-canon-active::before { background:#5b54ec; }
.media-canon-active { color:#4c3fd6; }
.media-canon-skeleton { height:12px; margin-bottom:8px; width:60%; background:#edeef4; border-radius:10px; }
.media-canon-skeleton:nth-child(2) { width:80%; }
.media-canon-skeleton:nth-child(3) { width:40%; }
.media-canon-file-preview { height:200px; border-radius:18px; background:#f7f8fc; border:1px solid #ebecf3; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; }
.media-canon-file-badge { width:64px; height:78px; border-radius:10px; background:#fff; box-shadow:0 6px 22px rgba(26,28,46,.09); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; color:#ef4d6a; }
.media-canon-expired { filter:grayscale(1); opacity:.55; color:#8b8fa3; }
.media-canon-danger { color:#ef4d6a; }
.media-canon-boundary { display:block; margin:8px 0; font-size:11px; color:#8b8fa3; }
.media-canon-action-bar { position:static; display:flex; align-items:center; gap:12px; padding:12px 16px; padding-bottom:calc(12px + env(safe-area-inset-bottom)); border-top:1px solid #ebecf3; background:#fff; }
.media-canon-action-bar .btn-primary { flex:1; min-width:0; }
.media-canon-screen button:disabled { cursor:not-allowed; }

/* Task32 finite source animation/expired tone and derived failure repair. */
.media-canon-proc-ring { animation:media-canon-spin 1s linear infinite; }
@keyframes media-canon-spin { to { transform:rotate(360deg); } }
.media-canon-skeleton { background:linear-gradient(90deg,#edeef4 25%,#f6f7fb 50%,#edeef4 75%); background-size:200% 100%; animation:media-canon-shimmer 1.4s infinite; }
@keyframes media-canon-shimmer { to { background-position:-200% 0; } }
.media-canon-faint { color:#aeb1c4; }
.media-canon-muted-title { color:#8b8fa3; }
.media-canon-failure-marker { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; background:rgba(26,28,46,.55); color:#fff; }
.media-canon-failure-marker .dq-wot-icon { color:#ef4d6a; }

/* Task32 frame binding: recording float stays above the unmoved player; file top is flow.
   Only the frame-owned slot containing this family’s float nav is overlaid. */
.dq-frame.dq-source-frame > .dq-source-top:has(> .media-canon-float) { position:absolute; inset:0 0 auto; z-index:101; }
.media-canon-nav[data-dq-frame-top] { flex-shrink:0; }
.media-canon-action-bar[data-dq-frame-bottom] { box-sizing:border-box; }
/* No pb-bar/90px source reserve: the mounted bottom is already a frame sibling. */
.dq-source-frame:has(> .dq-source-bottom > .media-canon-action-bar) .media-canon-screen > .media-canon-pad { padding-bottom:16px; }

/* Recording native P2 repair: pinned fg-navbar float is source-absolute and
   scrolls with its player. Legacy extracted-float slot rule above is retained
   as historical metadata, now inert for recording (no top ownership marker).
   FILE normal-flow nav and mounted bottom/safe-area rules are untouched. */
.media-canon-screen:has(> .media-canon-float) { position:relative; }
.media-canon-screen:has(> .media-canon-float) > .media-canon-float { position:absolute; top:0; left:0; right:auto; bottom:auto; width:100%; height:50px; z-index:101; border:0; background:transparent; }

/* Partial recording only: truthful unknown-cover caption in a separate band
   below the source-centered 60px play disk, above the source timer bar.
   Unknown neutral background, known covers and all source controls unchanged. */
.media-canon-player:has(> .media-canon-cover-unknown) > .media-canon-cover-unknown { box-sizing:border-box; height:170px; padding:145px 8px 0; align-items:flex-start; justify-content:center; line-height:20px; }

/* Student utility: exact pinned Mini descendants only. Existing siblings unchanged.
   TT ds.scss 1–100,125–192,223–245,256–330,640–670,730–755,
   784–813,1589–1613,2377–2406,2447–2473,2551–2591. */
.su-screen { --su-primary:#4c3fd6; --su-mute:#8b8fa3; --su-ink:#1a1c2e; --su-line:#ebecf3; --su-grad:linear-gradient(135deg,#5b54ec 0%,#7079f8 100%); background:#fff; color:#4a4d63; font-size:13px; line-height:1.5; font-family:inherit; }
.su-screen button,.su-screen input,.su-screen textarea { font-family:inherit; }
.su-screen button { cursor:pointer; }
.su-screen b { font-size:13px; font-weight:700; color:var(--su-ink); }
.su-screen p,.su-screen h1,.su-screen h2 { margin:0; }
.su-screen small { display:block; font-size:11px; color:var(--su-mute); }
.su-screen .su-faint { color:#aeb1c4; }
.su-screen .su-muted { display:block; color:var(--su-mute); }
.su-screen .su-flex { flex:1; min-width:0; }
.su-screen .su-row,.su-screen .su-between { display:flex; gap:12px; align-items:center; }
.su-screen .su-between { justify-content:space-between; gap:8px; }
.su-screen .su-gap2 { gap:8px; }
.su-screen .su-pad { padding:16px; }
.su-screen .su-pad-x { padding:0 16px; }
.su-screen .su-review-pad { padding-top:14px; }
.su-screen .su-review-panel { margin-top:14px; }
.su-screen .su-mt1 { margin-top:4px; }
.su-screen .su-mt2 { margin-top:8px; }
.su-screen .su-mt3 { margin-top:12px; }
.su-screen .su-mt4 { margin-top:16px; }
.su-screen .su-mt5 { margin-top:20px; }
.su-screen .su-mb3 { margin-bottom:12px; }
.su-screen .su-card { display:block; padding:16px; background:#fff; border:1px solid var(--su-line); border-radius:18px; box-shadow:0 1px 3px rgba(26,28,46,.05); color:#4a4d63; text-align:left; }
.su-screen hr { margin:14px 0; border:0; border-top:1px solid var(--su-line); }
.su-screen .su-nav { display:flex; align-items:center; gap:8px; height:calc(50px + env(safe-area-inset-top,0px)); padding:env(safe-area-inset-top,0px) 8px 0; box-sizing:border-box; background:rgba(255,255,255,.92); border-bottom:1px solid var(--su-line); position:sticky; top:0; z-index:100; backdrop-filter:blur(14px); }
.su-screen .su-nav h1 { flex:1; text-align:center; font-size:17px; font-weight:600; color:var(--su-ink); }
.su-screen .su-back,.su-screen .su-nav-action { display:flex; align-items:center; justify-content:center; width:36px; height:36px; border:0; border-radius:12px; background:transparent; color:var(--su-ink); padding:0; flex-shrink:0; }
.su-screen .su-nav-dark { background:transparent; color:#fff; border:0; backdrop-filter:none; padding-top:calc(8px + env(safe-area-inset-top,0px)); }
.su-screen .su-nav-dark h1 { color:#fff; }
.su-screen .su-nav-dark .su-back { color:#fff; background:rgba(255,255,255,.2); margin-left:-4px; }
.su-screen .su-btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:13px 22px; font-size:15px; font-weight:600; border-radius:999px; border:1.5px solid transparent; background:#fff; color:var(--su-ink); box-sizing:border-box; white-space:nowrap; }
.su-screen .su-primary { background:var(--su-grad); color:#fff; box-shadow:0 8px 22px rgba(91,84,236,.32); }
.su-screen .su-ghost { border-color:var(--su-line); }
.su-screen .su-danger-soft { background:#ffecef; color:#ef4d6a; }
.su-screen .su-block { width:100%; }
.su-screen .su-lg { padding:15px 26px; font-size:16px; }
.su-screen .su-bar { position:static; display:flex; flex-wrap:nowrap; align-items:center; gap:12px; padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px)); border-top:1px solid var(--su-line); background:#fff; box-sizing:border-box; }
.su-screen .su-bar .su-block { flex:1; }
.su-screen .su-bar .su-ghost { flex-shrink:0; }
.su-screen .su-avatar { border-radius:50%; object-fit:cover; flex-shrink:0; }
.su-screen .su-av-sm { width:38px; height:38px; }
.su-screen .su-av-md { width:52px; height:52px; }
.su-screen .su-av-xl { width:92px; height:92px; border:3px solid #fff; box-shadow:0 2px 10px rgba(26,28,46,.06); }
.su-screen .su-tabs { display:flex; gap:4px; background:#f7f8fc; padding:4px; border-radius:999px; overflow:hidden; }
.su-screen .su-tab { flex:1 1 0; min-width:0; padding:9px 4px; border:0; border-radius:999px; font-size:13px; font-weight:500; color:var(--su-mute); background:transparent; }
.su-screen .su-tab.active { background:#fff; color:var(--su-primary); box-shadow:0 1px 3px rgba(26,28,46,.05); }
.su-screen .su-star-pick { display:flex; gap:4px; }
.su-screen .su-star { padding:0; border:0; background:transparent; font-size:24px; color:#f5a623; line-height:1; }
.su-screen .su-star.off { color:var(--su-line); }
.su-screen .su-score { display:flex; align-items:center; gap:2px; white-space:nowrap; color:#f5a623; }
.su-screen .su-input,.su-screen .su-textarea { width:100%; font-size:15px; border:1.5px solid var(--su-line); border-radius:10px; background:#fff; color:var(--su-ink); box-sizing:border-box; }
.su-screen .su-input { height:48px; padding:0 14px; line-height:48px; }
.su-screen .su-textarea { height:82px; min-height:82px; padding:13px 14px; line-height:1.5; resize:vertical; }
.su-screen .su-textarea-sm { height:64px; min-height:64px; }
.su-screen .su-textarea-lg { height:100px; min-height:100px; }
.su-screen .su-field { display:block; margin-bottom:16px; }
.su-screen .su-field:last-child { margin-bottom:0; }
.su-screen .su-field > span { display:block; margin-bottom:8px; font-size:13px; font-weight:500; color:var(--su-ink); }
.su-screen .su-select { display:flex; align-items:center; justify-content:space-between; padding:13px 14px; border:1.5px solid var(--su-line); border-radius:10px; background:#fff; width:100%; color:var(--su-ink); font-size:15px; }
.su-screen .su-chips { display:flex; gap:8px; flex-wrap:wrap; }
.su-screen .su-chip { display:inline-flex; align-items:center; gap:5px; padding:7px 13px; border:1.5px solid var(--su-line); border-radius:999px; color:#3d4159; background:#fff; font-size:13px; font-weight:500; white-space:nowrap; flex-shrink:0; }
.su-screen .su-chip.active { background:#5b54ec; border-color:#5b54ec; color:#fff; }
.su-screen .su-notice { display:flex; align-items:flex-start; gap:8px; padding:12px 14px; border-radius:10px; background:#eef1ff; color:var(--su-primary); font-size:13px; }
.su-screen .su-notice svg { flex-shrink:0; }
.su-screen .su-section-title { font-size:17px; font-weight:600; color:var(--su-ink); margin:16px 0 10px; }
.su-screen .su-badge { display:inline-flex; align-items:center; padding:3px 8px; font-size:11px; font-weight:600; border-radius:999px; white-space:nowrap; }
.su-screen .su-tone-success { background:#e8fbf6; color:#16b896; }
.su-screen .su-tone-danger { background:#ffecef; color:#ef4d6a; }
.su-screen .su-tone-info { background:#eef1ff; color:#4c3fd6; }
.su-screen .su-tone-ai { background:#f3eefe; color:#9b6df5; }
.su-screen .su-tone-primary { background:var(--su-grad); color:#fff; }
.su-screen .su-tone-warn,.su-screen .su-tone-warning { background:#fff5e3; color:#b8791a; }
.su-screen .su-foot-link { font-size:11px; color:var(--su-primary); }
.su-notifications { background:#f5f6fa; }
.su-screen .su-notification-tabs { padding-top:12px; }
.su-screen .su-line-tabs { display:flex; gap:18px; border-bottom:1px solid var(--su-line); overflow-x:auto; }
.su-screen .su-line-tab { flex-shrink:0; padding:11px 0; font-size:15px; font-weight:500; color:var(--su-mute); border:0; border-bottom:2px solid transparent; background:transparent; white-space:nowrap; }
.su-screen .su-line-tab.active { color:var(--su-primary); border-bottom-color:#5b54ec; }
.su-screen .su-noti-row { display:flex; width:100%; gap:12px; padding:14px 0; border:0; border-bottom:1px solid #f3f4f9; background:transparent; position:relative; text-align:left; font-size:13px; }
.su-screen .su-noti-row:last-child { border-bottom:0; }
.su-screen .su-noti-row.unread::after { content:''; position:absolute; left:-2px; top:18px; width:7px; height:7px; background:#ef4d6a; border-radius:50%; }
.su-screen .su-noti-icon { width:42px; height:42px; border-radius:14px; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.su-screen .su-av-edit { position:relative; display:block; width:fit-content; margin:0 auto; padding:0; border:0; background:transparent; }
.su-screen .su-camera { position:absolute; right:0; bottom:0; width:28px; height:28px; border-radius:50%; background:#5b54ec; border:2px solid #fff; display:flex; align-items:center; justify-content:center; color:#fff; }
.su-screen .su-avatar-hint { text-align:center; margin-top:8px; font-size:11px; color:var(--su-mute); }
.su-screen .su-group-title { font-size:11px; font-weight:600; color:var(--su-mute); letter-spacing:.04em; margin:18px 4px 8px; }
.su-screen .su-list-row { display:flex; align-items:center; gap:12px; padding:13px 0; border:0; border-bottom:1px solid #f3f4f9; background:transparent; text-align:left; width:100%; font-size:13px; color:var(--su-ink); }
.su-screen .su-list-row:last-child { border-bottom:0; }
.su-screen .su-switch { width:46px; height:26px; border-radius:999px; background:#ebecf3; position:relative; flex-shrink:0; }
.su-screen .su-switch.on { background:#5b54ec; }
.su-screen .su-switch::after { content:''; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.15); }
.su-screen .su-switch.on::after { left:23px; }
.su-protection { position:relative; }
.su-screen .su-prot-hero { background:var(--su-grad); color:#fff; padding:20px 16px 26px; text-align:center; }
.su-screen .su-prot-hero h2 { font-size:19px; font-weight:600; color:#fff; }
.su-screen .su-prot-hero p { font-size:13px; color:rgba(255,255,255,.85); }
.su-screen .su-prot-shield { width:64px; height:64px; margin:0 auto 12px; border-radius:50%; background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.3); display:flex; align-items:center; justify-content:center; }
.su-screen .su-prot-card { display:flex; gap:12px; }
.su-screen .su-prot-icon { width:46px; height:46px; border-radius:14px; flex-shrink:0; display:flex; align-items:center; justify-content:center; }

/* ONE SU closure wave. Source self-owned slots keep tokens/typography after
   runtime extraction. No root shell/global responsive or frozen selectors.
   Director bounded usability override: Protection transparent white nav owns
   the stationary gradient top band, continuous with the unchanged hero below. */
.su-screen[data-su-page] { display:flex; flex-direction:column; min-height:100vh; box-sizing:border-box; }
.su-screen.su-slot { display:block; min-height:0; width:100%; flex-shrink:0; }
.su-screen .su-scroll { flex:1; min-width:0; }
.su-screen .su-nav { position:static; top:auto; }
.su-screen .su-review-panel { margin-top:0; }
.su-screen .su-tab { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:.18s; }
.su-screen .su-pb-bar { padding-bottom:92px; }
.su-screen.su-protection-top { background:var(--su-grad); }
.su-screen .su-nav-dark { background:transparent; }
.su-screen .su-notice { border-radius:14px; color:#4133b3; }
.su-screen .su-badge { font-weight:500; }
.su-screen .su-section-title { margin-bottom:12px; }
.su-screen .su-prot-hero h2 { font-weight:700; }
.su-screen .su-design-input { display:block; font-size:11px; color:#6f7389; line-height:1.5; margin:6px 0; font-weight:400; white-space:normal; }
.su-screen .su-inline-error { color:#d72d50; font-size:11px; margin-top:4px; }
.su-screen .su-inline-error:empty { display:none; }
.su-screen [aria-invalid="true"] { border-color:#ef4d6a; }
.su-screen [role="tab"]:focus-visible,.su-screen [role="radio"]:focus-visible { outline:2px solid #4133b3; outline-offset:2px; }
.su-screen.su-overlay-root { min-height:0; display:block; }
.su-screen .su-review-pad { touch-action:pan-y; }
.su-screen.su-notifications { background:#f5f6fa; }
.su-screen .su-bar { position:static; margin:0; width:100%; }
/* Mounted height excludes stationary source slots. No duplicated 92px reserve
   when the runtime has allocated a real footer sibling. Narrow conditional
   selectors match only a frame containing this family, not global chrome. */
.dq-source-frame:has(> .dq-source-top > .su-slot-top) .su-screen[data-su-page] { min-height:var(--su-available-height,calc(100dvh - var(--dq-source-top-height,50px) - var(--dq-source-bottom-height,0px))); }
.dq-source-frame:has(> .dq-source-bottom > .su-slot-bottom) .su-screen .su-pb-bar { padding-bottom:16px; }
/* Residual R3: measured actual scroll content height, not browser width.
   R5 Director accepts desktop adaptive white hierarchy band; no reordering. */
.su-screen.su-dispute-foot { display:flex; flex-direction:row; width:100%; gap:12px; }
.su-screen.su-dispute-foot > button { flex:1 1 0; width:0; min-width:0; }
.su-screen .su-nav { position:static; }

/* Approved product §18.5 supplement ONLY the three Student lists. */
.su-screen .su-product3 { margin-bottom:16px; padding:12px; border:1px solid #ebecf3; border-radius:14px; background:#f7f8fc; }
.su-screen .su-product-kpis { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:8px 0 12px; }
.su-screen .su-product-kpis > div { display:flex; flex-direction:column; padding:8px; background:#fff; border-radius:10px; }
.su-screen .su-product-kpis b { font-size:19px; }
.su-screen .su-product-kpis span { font-size:11px; color:#8b8fa3; }
.su-screen .su-product-tabs { display:flex; gap:8px; flex-wrap:wrap; margin:10px 0; }
.su-screen .su-product-tabs button { border:1px solid #ebecf3; padding:7px 12px; border-radius:999px; font-size:13px; background:#fff; }
.su-screen .su-product-tabs [aria-selected="true"] { background:#5b54ec; color:#fff; }
.su-screen [data-su-product-row][hidden] { display:none; }
/* Product3 closure: complete read-only union, separate source draft panel. */
.su-screen .su-product-review-union { margin-bottom:16px; }
.su-screen .su-source-conflict { border-color:#e5bd65; background:#fff9ec; }
.su-screen .su-source-conflict ul { margin:8px 0; padding-left:20px; }