/* ==========================================================================
   Mentora shell: sign-in, sidebar, dashboard, topics, progress, tutor
   ========================================================================== */
.st-brand { display: flex; align-items: center; gap: 10px; }
.st-logo { width: 38px; height: 38px; border-radius: 9px; background: var(--violet); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: .8rem; letter-spacing: .04em; flex-shrink: 0; }
.st-brand strong { display: block; font-family: var(--font-display); font-size: 1.08rem; line-height: 1.15; color: var(--ink); }
.st-brand small { display: block; font-size: .74rem; color: var(--muted); font-weight: 500; }
.st-brand-lg .st-logo { width: 46px; height: 46px; font-size: .9rem; }
.st-brand-lg strong { font-size: 1.3rem; }
.st-label { display: block; font-size: .82rem; font-weight: 600; color: var(--ink-soft); margin: 14px 0 6px; }
.st-note { margin-top: 18px; color: var(--muted); font-size: .88rem; max-width: 760px; }

/* icons (inline SVG masks, no emoji) */
.st-ic { width: 18px; height: 18px; display: inline-block; flex-shrink: 0; background: currentColor; -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
.st-ic[data-icon="home"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5V21H3z'/%3E%3Cpath d='M9 21v-6h6v6'/%3E%3C/svg%3E"); }
.st-ic[data-icon="book"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4.5A2.5 2.5 0 0 1 6.5 2H20v17H6.5A2.5 2.5 0 0 0 4 21.5z'/%3E%3Cpath d='M4 21.5V4.5'/%3E%3C/svg%3E"); }
.st-ic[data-icon="paper"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6M8 13h8M8 17h5'/%3E%3C/svg%3E"); }
.st-ic[data-icon="clock"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
.st-ic[data-icon="chart"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 20V10M10 20V4M16 20v-7M22 20H2'/%3E%3C/svg%3E"); }
.st-ic[data-icon="users"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='9' cy='8' r='4'/%3E%3Cpath d='M2 21a7 7 0 0 1 14 0M16 3.5a4 4 0 0 1 0 8M22 21a7 7 0 0 0-4-6.3'/%3E%3C/svg%3E"); }
.st-ic[data-icon="check"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 10 17 19 7'/%3E%3C/svg%3E"); }
.st-ic[data-icon="play"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 4.5v15l13-7.5z'/%3E%3C/svg%3E"); }
.st-ic[data-icon="file"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6'/%3E%3C/svg%3E"); }
.st-ic[data-icon="link"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M14 4h6v6M20 4l-9 9M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5'/%3E%3C/svg%3E"); }
.st-ic[data-icon="chev"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E"); }

/* ---------- sign in (see "sign in & first-sign-in profile" at the end) */
.login-sub { color: var(--muted); margin-top: 6px; font-size: .92rem; }
.login-card .text-input { width: 100%; font-size: 1rem; padding: 11px 13px; }
.login-btn { width: 100%; margin-top: 22px; }
.login-error { margin-top: 12px; color: var(--coral); background: var(--coral-soft); border-radius: var(--r-sm); padding: 8px 10px; font-size: .88rem; font-weight: 500; }
.login-foot { margin-top: 16px; font-size: .8rem; color: var(--muted); text-align: center; }

/* ---------- studio layout */
.studio { display: grid; grid-template-columns: 252px minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; }
.st-side { position: sticky; top: 0; height: 100vh; height: 100dvh; background: #fff; border-right: 1px solid var(--line); display: flex; flex-direction: column; padding: 20px 14px; gap: 22px; z-index: 30; }
.st-side .st-brand { padding: 0 6px; }
.st-nav { display: grid; gap: 2px; }
.st-nav button { display: flex; align-items: center; gap: 11px; border: none; background: none; cursor: pointer; font: inherit; font-size: .93rem; font-weight: 500; color: var(--ink-soft); padding: 10px 12px; border-radius: var(--r-md); text-align: left; }
.st-nav button:hover { background: #f3f5f8; color: var(--ink); }
.st-nav button.is-active { background: var(--violet-soft); color: var(--violet); font-weight: 600; }
.st-user { margin-top: auto; border-top: 1px solid var(--line); padding: 14px 6px 0; display: grid; gap: 10px; }
.st-who { display: flex; align-items: center; gap: 10px; }
.st-initials { width: 36px; height: 36px; border-radius: 50%; background: var(--violet-soft); color: var(--violet); display: grid; place-items: center; font-weight: 700; font-size: .85rem; flex-shrink: 0; }
.st-who strong { display: block; font-size: .92rem; font-weight: 600; }
.st-who small { display: block; color: var(--muted); font-size: .76rem; }
.st-user-actions { display: flex; gap: 6px; }
.st-user-actions button { flex: 1; border: 1px solid var(--line); background: #fff; border-radius: var(--r-sm); padding: 6px; font: inherit; font-size: .8rem; color: var(--ink-soft); cursor: pointer; }
.st-user-actions button:hover { background: #f3f5f8; }

.st-main { min-width: 0; padding: 0 32px 48px; }
.st-top { display: flex; align-items: center; gap: 14px; padding: 26px 0 20px; }
.st-heading { flex: 1; min-width: 0; }
.st-crumb { font-size: .8rem; color: var(--muted); font-weight: 500; display: flex; gap: 6px; flex-wrap: wrap; }
.st-crumb button { border: none; background: none; padding: 0; font: inherit; color: var(--sea); cursor: pointer; }
.st-crumb button:hover { text-decoration: underline; }
.st-top h1 { font-size: 1.75rem; margin-top: 2px; }
.st-top-actions { display: flex; gap: 8px; }
.st-menu { display: none; width: 40px; height: 40px; border: 1px solid var(--line); background: #fff; border-radius: var(--r-md); cursor: pointer; flex-direction: column; justify-content: center; align-items: center; gap: 4px; }
.st-menu span { width: 18px; height: 2px; background: var(--ink); border-radius: 2px; }
.st-view { animation: screenFade .2s ease; max-width: 1180px; }

/* ---------- cards & common */
.st-grid { display: grid; gap: 16px; }
.st-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.st-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.st-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.st-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px; box-shadow: var(--shadow-sm); min-width: 0; }
.st-card h2 { font-size: 1.15rem; margin-bottom: 4px; }
.st-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.st-card-head p { color: var(--muted); font-size: .85rem; }
.st-section { margin-top: 24px; }
.st-stat { padding: 16px 18px; }
.st-stat-label { font-size: .78rem; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.st-stat-value { font-family: var(--font-display); font-size: 1.9rem; font-weight: 600; line-height: 1.15; margin-top: 4px; }
.st-stat-sub { font-size: .8rem; color: var(--muted); margin-top: 2px; }
.st-empty { color: var(--muted); font-size: .9rem; padding: 14px 0 4px; }
.st-pill { display: inline-flex; align-items: center; gap: 5px; font-size: .74rem; font-weight: 600; padding: 3px 9px; border-radius: 99px; background: #eef1f5; color: var(--ink-soft); white-space: nowrap; }
.st-pill.is-maths { background: var(--maths-soft); color: var(--maths); }
.st-pill.is-english { background: var(--english-soft); color: var(--english); }
.st-pill.is-done { background: var(--go-soft); color: var(--go-deep); }
.st-pill.is-due { background: var(--sun-soft); color: #8a5a12; }
.st-pill.is-late { background: var(--coral-soft); color: var(--coral); }
.st-bar { height: 6px; border-radius: 99px; background: #e8ecf2; overflow: hidden; }
.st-bar > span { display: block; height: 100%; background: var(--go); border-radius: 99px; transition: width .4s; }
.st-list { list-style: none; display: grid; }
.st-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid #edf0f4; }
.st-row:first-child { border-top: none; }
.st-row-main { flex: 1; min-width: 0; }
.st-row-main strong { display: block; font-weight: 600; font-size: .94rem; }
.st-row-main small { display: block; color: var(--muted); font-size: .8rem; margin-top: 1px; }
.st-row .btn { flex-shrink: 0; }
.st-score { font-weight: 600; font-variant-numeric: tabular-nums; }
.st-tabs { display: inline-flex; background: #e9edf2; border-radius: var(--r-md); padding: 3px; gap: 2px; }
.st-tabs button { border: none; background: none; font: inherit; font-size: .88rem; font-weight: 500; padding: 7px 14px; border-radius: 8px; cursor: pointer; color: var(--ink-soft); }
.st-tabs button.is-active { background: #fff; color: var(--ink); font-weight: 600; box-shadow: var(--shadow-sm); }
.st-toolbar { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 20px; }

/* dashboard */
.dash-hello { margin-bottom: 20px; }
.dash-hello p { color: var(--muted); }
.dash-subject { display: flex; flex-direction: column; gap: 10px; cursor: pointer; text-align: left; font: inherit; color: inherit; transition: border-color .15s, box-shadow .15s; }
.dash-subject:hover { border-color: #c4cfdd; box-shadow: var(--shadow-md); }
.dash-subject h3 { font-size: 1.1rem; }
.dash-subject .dsub-next { font-size: .85rem; color: var(--ink-soft); }
.dash-subject .dsub-meta { display: flex; justify-content: space-between; font-size: .8rem; color: var(--muted); }

/* ---------- topics browser */
.tp-terms { display: grid; gap: 28px; }
.tp-term h2 { font-size: 1.25rem; display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.tp-term h2 small { font-family: var(--font-body); font-size: .8rem; color: var(--muted); font-weight: 500; }
.tp-topics { display: grid; gap: 10px; }
.tp-topic { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.tp-topic > summary { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr) 150px 22px; align-items: center; gap: 16px; padding: 16px 18px; cursor: pointer; }
.tp-topic > summary::-webkit-details-marker { display: none; }
.tp-topic > summary:hover { background: #fafbfc; }
.tp-topic-title strong { display: block; font-weight: 600; font-size: 1rem; }
.tp-topic-title small { display: block; color: var(--muted); font-size: .84rem; margin-top: 2px; }
.tp-topic-prog { display: grid; gap: 5px; font-size: .76rem; color: var(--muted); text-align: right; }
.tp-topic .st-ic[data-icon="chev"] { color: var(--muted); transition: transform .2s; }
.tp-topic[open] > summary .st-ic[data-icon="chev"] { transform: rotate(90deg); }
.tp-subs { list-style: none; border-top: 1px solid var(--line); background: #fbfcfd; }
.tp-sub { display: flex; align-items: center; gap: 12px; width: 100%; border: none; background: none; font: inherit; text-align: left; padding: 12px 18px 12px 22px; cursor: pointer; border-top: 1px solid #eef1f5; color: inherit; }
.tp-subs li:first-child .tp-sub { border-top: none; }
.tp-sub:hover { background: #f1f5fa; }
.tp-sub-state { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #c9d2de; flex-shrink: 0; display: grid; place-items: center; color: #fff; }
.tp-sub-state.is-started { border-color: var(--sun); background: linear-gradient(90deg, var(--sun) 50%, transparent 50%); }
.tp-sub-state.is-secure { border-color: var(--go); background: var(--go); }
.tp-sub-state .st-ic { width: 12px; height: 12px; }
.tp-sub-main { flex: 1; min-width: 0; }
.tp-sub-main strong { display: block; font-weight: 600; font-size: .93rem; }
.tp-sub-main small { display: block; color: var(--muted); font-size: .8rem; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-sub-tags { display: flex; gap: 6px; flex-shrink: 0; }
.tp-missing { padding: 28px; text-align: center; color: var(--muted); }

/* ---------- subtopic page */
.sub-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.sub-objectives { list-style: none; display: grid; gap: 8px; }
.sub-objectives li { position: relative; padding-left: 22px; line-height: 1.5; }
.sub-objectives li::before { content: ''; position: absolute; left: 2px; top: .62em; width: 8px; height: 8px; border-radius: 2px; background: var(--violet); }
.sub-nc { margin-top: 14px; padding: 12px 14px; background: #f6f8fb; border-left: 3px solid #c9d2de; border-radius: 0 var(--r-sm) var(--r-sm) 0; font-size: .86rem; color: var(--ink-soft); }
.sub-nc b { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 4px; }
.sub-actions { display: grid; gap: 10px; }
.sub-action { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; border: 1px solid var(--line); background: #fff; border-radius: var(--r-md); padding: 14px 16px; cursor: pointer; font: inherit; color: inherit; transition: border-color .15s, background .15s; }
.sub-action:hover { border-color: var(--violet); background: #fafbfd; }
.sub-action:disabled { cursor: default; opacity: .55; }
.sub-action:disabled:hover { border-color: var(--line); background: #fff; }
.sub-action .sa-ic { width: 38px; height: 38px; border-radius: var(--r-md); background: var(--violet-soft); color: var(--violet); display: grid; place-items: center; flex-shrink: 0; }
.sub-action .sa-main { flex: 1; min-width: 0; }
.sub-action strong { display: block; font-weight: 600; }
.sub-action small { display: block; color: var(--muted); font-size: .82rem; margin-top: 1px; }
.sub-learn { line-height: 1.7; font-size: 1rem; }
.sub-learn h3 { font-size: 1.12rem; margin: 22px 0 8px; }
.sub-learn p { margin-bottom: 12px; }
.sub-learn .frac { font-size: .95em; }
.sub-example { border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px 16px; margin: 12px 0; background: #fbfcfd; }
.sub-example .se-q { font-weight: 600; }
.sub-example ol { margin: 8px 0 6px 20px; }
.sub-example .se-a { color: var(--go-deep); font-weight: 600; }
.sub-vocab { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.sub-res { list-style: none; display: grid; gap: 2px; }
.sub-res a { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-radius: var(--r-sm); color: var(--ink); text-decoration: none; font-size: .88rem; }
.sub-res a:hover { background: #f3f5f8; }
.sub-res a .st-ic { color: var(--muted); }
.sub-res small { color: var(--muted); }
.sub-res-head { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; margin: 14px 0 4px; }
.sub-res-head:first-child { margin-top: 0; }

/* ---------- progress & daily log */
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cal-dow { font-size: .72rem; color: var(--muted); text-align: center; font-weight: 600; }
.cal-day { aspect-ratio: 1; border-radius: var(--r-sm); border: 1px solid var(--line); background: #fff; cursor: pointer; font: inherit; font-size: .78rem; color: var(--ink-soft); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 0; }
.cal-day small { font-size: .66rem; color: inherit; opacity: .85; }
.cal-day.l1 { background: #e6f1ea; border-color: #cfe5d7; }
.cal-day.l2 { background: #b9dcc6; border-color: #a3cfb3; color: #1f4d39; }
.cal-day.l3 { background: #5aa47b; border-color: #4e9670; color: #fff; }
.cal-day.l4 { background: #2d7a55; border-color: #22603f; color: #fff; }
.cal-day.is-sel { outline: 2px solid var(--violet); outline-offset: 1px; }
.cal-day.is-future { visibility: hidden; }
.week-bars { display: flex; align-items: flex-end; gap: 8px; height: 140px; padding-top: 10px; }
.week-bar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; font-size: .72rem; color: var(--muted); }
.week-bar span { width: 100%; max-width: 38px; background: var(--violet); border-radius: 5px 5px 0 0; min-height: 2px; }
.week-bar b { font-weight: 600; color: var(--ink-soft); }
.log-item { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 0; border-top: 1px solid #edf0f4; }
.log-item:first-child { border-top: none; }
.log-time { font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.log-item strong { font-weight: 600; font-size: .92rem; display: block; }
.log-item small { color: var(--muted); font-size: .8rem; }
.cover-row { display: grid; grid-template-columns: 150px minmax(0, 1fr) 48px; gap: 12px; align-items: center; padding: 8px 0; font-size: .88rem; }

/* ---------- tutor panel */
.tt-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.tt-table th { text-align: left; font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tt-table td { padding: 12px 10px; border-bottom: 1px solid #edf0f4; vertical-align: middle; }
.tt-table tbody tr { cursor: pointer; }
.tt-table tbody tr:hover { background: #f8fafc; }
.tt-name { display: flex; align-items: center; gap: 10px; }
.tt-name strong { font-weight: 600; }
.tt-wrap { overflow-x: auto; }
.tt-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; gap: 10px; align-items: end; }
.tt-form label { display: grid; gap: 5px; font-size: .78rem; font-weight: 600; color: var(--ink-soft); }
.tt-form .text-input, .tt-form select, .st-select { font: inherit; font-size: .9rem; padding: 9px 10px; border: 1px solid #cfd7e2; border-radius: var(--r-md); background: #fff; width: 100%; min-width: 0; }
.tt-assign { display: grid; gap: 12px; }
.tt-assign-row { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 10px; align-items: center; }
.tt-assign-row > span { font-size: .82rem; font-weight: 600; color: var(--ink-soft); }
.tt-mini { width: 100%; height: 48px; }

/* ---------- small screens */
@media (max-width: 1080px) {
  .st-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sub-layout { grid-template-columns: 1fr; }
  .tt-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .studio { grid-template-columns: 1fr; }
  .st-side { position: fixed; left: 0; top: 0; width: 272px; transform: translateX(-100%); transition: transform .25s; box-shadow: var(--shadow-lg); }
  .st-side.is-open { transform: none; }
  .st-scrim { position: fixed; inset: 0; background: rgba(15, 23, 42, .35); z-index: 25; }
  .st-menu { display: flex; }
  .st-main { padding: 0 16px 40px; }
  .st-top { padding: 16px 0 14px; }
  .st-top h1 { font-size: 1.35rem; }
  .st-grid-2, .st-grid-3 { grid-template-columns: 1fr; }
  .tp-topic > summary { grid-template-columns: minmax(0, 1fr) 22px; }
  .tp-topic-prog { display: none; }
  .tp-sub-tags { display: none; }
  .tt-form { grid-template-columns: 1fr; }
  .tt-assign-row { grid-template-columns: 1fr; }
  .cover-row { grid-template-columns: 110px minmax(0, 1fr) 40px; }
}
@media (max-width: 420px) {
  .st-grid-4 { grid-template-columns: 1fr 1fr; gap: 10px; }
  .st-stat-value { font-size: 1.5rem; }
}
.st-ic[data-icon="sound"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5 6 9H3v6h3l5 4z'/%3E%3Cpath d='M15.5 8.5a5 5 0 0 1 0 7M18.5 5.5a9 9 0 0 1 0 13'/%3E%3C/svg%3E"); }
.st-ic[data-icon="flag"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 21V4M5 4h11l-2 4 2 4H5'/%3E%3C/svg%3E"); }
.ex-icon { filter: none; color: var(--ink-soft); display: grid; place-items: center; }
.ex-icon.is-on { color: #8a5a12; }
.ex-tl-icon { color: #b45309; display: grid; place-items: center; }

/* ==========================================================================
   Lesson view (lesson-view.js)
   ========================================================================== */
.lv-banner { --b1: #1f3a68; --b2: #2d5590; display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: 20px; align-items: center;
  background: linear-gradient(120deg, var(--b1), var(--b2)); color: #fff; border-radius: var(--r-xl); padding: 26px 30px; margin-bottom: 20px; position: relative; overflow: hidden; }
.lv-banner::after { content: ''; position: absolute; right: -60px; top: -60px; width: 260px; height: 260px; border-radius: 50%; background: rgba(255,255,255,.06); }
.lv-fractions, .lv-number { --b1: #1f3a68; --b2: #2f5c96; }
.lv-calc, .lv-algebra { --b1: #23395b; --b2: #3c5a87; }
.lv-measure, .lv-geometry { --b1: #1d4e5a; --b2: #2f7180; }
.lv-stats { --b1: #2f3d63; --b2: #4b5c8f; }
.lv-reading, .lv-poetry { --b1: #3f2f5c; --b2: #5e4a86; }
.lv-writing, .lv-speaking { --b1: #1d5c63; --b2: #2e7d86; }
.lv-grammar, .lv-spelling { --b1: #5a3d1e; --b2: #87602f; }
.lv-banner-text { position: relative; z-index: 1; min-width: 0; }
.lv-kicker { font-size: .74rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.75); }
.lv-banner h2 { color: #fff; font-size: 1.9rem; line-height: 1.2; margin: 6px 0 6px; }
.lv-banner p { color: rgba(255,255,255,.85); max-width: 640px; }
.lv-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 14px; font-size: .85rem; color: rgba(255,255,255,.9); }
.lv-meta span { display: inline-flex; align-items: center; gap: 6px; }
.lv-meta .st-ic { width: 15px; height: 15px; }
.lv-listen { margin-top: 18px; display: flex; gap: 8px; }
.lv-listen-btn { background: #fff !important; color: var(--ink) !important; display: inline-flex; align-items: center; gap: 8px; }
.lv-listen-btn:hover { background: #eef2f8 !important; }
.lv-stop { background: rgba(255,255,255,.12) !important; color: #fff !important; border-color: rgba(255,255,255,.4) !important; }
.lv-art { width: 190px; height: auto; position: relative; z-index: 1; }
.lv-art g { fill: none; stroke: rgba(255,255,255,.92); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.lv-art .g { stroke: #e2c06b; }
.lv-art .gf { fill: rgba(226,192,107,.55); stroke: #e2c06b; }
.lv-art .d circle { fill: rgba(255,255,255,.85); stroke: none; }
.lv-art text { fill: rgba(255,255,255,.9); stroke: none; font: 600 11px var(--font-body); }
.lv-art text.big { font: 700 26px var(--font-display); }
.lv-art text.g { fill: #e2c06b; }

.lv-layout { align-items: start; }
.lv-side { position: sticky; top: 16px; }
.lv-side-note { color: var(--muted); font-size: .82rem; margin: 2px 0 10px; }
.lv-lesson { padding: 26px 30px; }
.lv-sec { padding: 4px 0 22px; border-bottom: 1px solid #edf0f4; margin-bottom: 20px; }
.lv-sec:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.lv-sec h3 { display: flex; align-items: center; gap: 12px; font-size: 1.22rem; margin: 0 0 14px !important; }
.lv-num { width: 30px; height: 30px; border-radius: 50%; background: var(--violet); color: #fff; display: grid; place-items: center; font: 600 .85rem var(--font-body); flex-shrink: 0; }
.lv-say { border-radius: 8px; transition: background .25s, box-shadow .25s; }
.lv-say.is-reading { background: #fff6d6; box-shadow: 0 0 0 6px #fff6d6; }
.lv-keyidea { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: center; background: linear-gradient(135deg, #f3f6fb, #eaf0f8); border-left: 4px solid var(--violet); border-radius: 0 var(--r-md) var(--r-md) 0; padding: 16px 18px; margin-bottom: 14px; font-size: 1.06rem; }
.lv-keyidea .lv-diagram:empty { display: none; }
.lv-diagram { display: flex; justify-content: center; }
.lv-diagram:empty { display: none; }
.lv-diagram .viz { transform: scale(.9); transform-origin: center; margin: 0; }
.lv-example { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px 18px; margin: 0 0 14px; background: #fff; box-shadow: var(--shadow-sm); transition: box-shadow .2s, border-color .2s; }
.lv-example.is-playing { border-color: var(--violet); box-shadow: 0 0 0 3px var(--violet-soft); }
.lv-ex-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.lv-ex-n { font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sea); }
.lv-ex-play { display: inline-flex; align-items: center; gap: 6px; }
.lv-ex-play .st-ic { width: 12px; height: 12px; }
.lv-example .se-q { font-size: 1.08rem; font-weight: 600; }
.lv-example .lv-diagram { margin: 10px 0 4px; }
.lv-steps { list-style: none; margin: 12px 0 6px; padding: 0; counter-reset: step; }
.lv-steps li { position: relative; padding: 4px 0 10px 40px; counter-increment: step; transition: opacity .35s, transform .35s; }
.lv-steps li::before { content: counter(step); position: absolute; left: 0; top: 3px; width: 26px; height: 26px; border-radius: 50%; background: var(--violet-soft); color: var(--violet); font-weight: 700; font-size: .8rem; display: grid; place-items: center; }
.lv-steps li::after { content: ''; position: absolute; left: 12.5px; top: 30px; bottom: 0; width: 1px; background: #d8dfea; }
.lv-steps li:last-child::after { display: none; }
.lv-steps li.is-hidden, .lv-answer.is-hidden { opacity: 0; transform: translateY(6px); }
.lv-answer { display: inline-flex; align-items: baseline; gap: 10px; background: var(--go-soft); border-radius: var(--r-md); padding: 8px 14px; margin-top: 4px; transition: opacity .35s, transform .35s; }
.lv-ans-label { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--go-deep); }
.lv-answer .se-a { font-weight: 650; color: var(--go-deep); }
.lv-tips { display: grid; gap: 10px; }
.lv-tip { position: relative; padding: 12px 14px 12px 46px; background: #fbf6ea; border: 1px solid #f0e3c4; border-radius: var(--r-md); line-height: 1.55; }
.lv-tip::before { content: '!'; position: absolute; left: 14px; top: 12px; width: 22px; height: 22px; border-radius: 50%; background: #b7791f; color: #fff; font-weight: 800; font-size: .8rem; display: grid; place-items: center; }
.lv-word { border: none; cursor: pointer; font: inherit; font-size: .85rem; padding: 6px 12px; }
.lv-word:hover { background: var(--violet-soft); color: var(--violet); }
.lv-check { background: #f6f8fb; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px 18px; }
.lv-check-q { font-weight: 600; font-size: 1.05rem; margin-bottom: 12px; }
.lv-check-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; }
.lv-check-opt { border: 1px solid #cfd7e2; background: #fff; border-radius: var(--r-md); padding: 10px 12px; font: inherit; text-align: left; cursor: pointer; }
.lv-check-opt:hover { border-color: var(--violet); }
.lv-check-opt.is-on { border-color: var(--violet); background: var(--violet-soft); }
.lv-check-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.lv-check-in { max-width: 220px; }
.lv-check-fb { margin-top: 12px; padding: 10px 12px; border-radius: var(--r-md); font-size: .95rem; animation: screenFade .25s; }
.lv-check-fb.is-right { background: var(--go-soft); color: var(--go-deep); }
.lv-check-fb.is-wrong { background: #fbf3e2; color: #7a4f12; }
.lv-sec-finish p { color: var(--ink-soft); margin-bottom: 12px; }
.lv-finish .btn { display: inline-flex; align-items: center; gap: 8px; }
.lv-finish.is-fresh { animation: screenFade .35s; }
.lv-done { display: flex; gap: 14px; align-items: center; background: var(--go-soft); border-radius: var(--r-lg); padding: 14px 16px; margin-bottom: 14px; }
.lv-done-ic { width: 40px; height: 40px; border-radius: 50%; background: var(--go); color: #fff; display: grid; place-items: center; flex-shrink: 0; }
.lv-done strong { font-size: 1.05rem; color: var(--go-deep); }
.lv-done p { margin: 2px 0 0 !important; color: var(--go-deep) !important; }
.lv-next { display: flex; gap: 10px; flex-wrap: wrap; }
.lv-go-practice { background: var(--go) !important; }
.lv-go-practice:hover { background: var(--go-deep) !important; }
.lv-videos { display: grid; gap: 10px; }
.lv-video { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; align-items: center; text-decoration: none; color: var(--ink); border-radius: var(--r-md); padding: 6px; }
.lv-video:hover { background: #f3f5f8; }
.lv-vthumb { position: relative; height: 56px; border-radius: 8px; background: linear-gradient(120deg, var(--b1, #1f3a68), var(--b2, #2d5590)); display: grid; place-items: center; overflow: hidden; }
.lv-vthumb .lv-art { width: 70px; opacity: .45; }
.lv-vplay { position: absolute; width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,.95); color: var(--ink); display: grid; place-items: center; }
.lv-vplay .st-ic { width: 12px; height: 12px; margin-left: 2px; }
.lv-vtext strong { display: block; font-size: .86rem; font-weight: 600; line-height: 1.3; }
.lv-vtext small { color: var(--muted); font-size: .76rem; }
.lv-more { padding: 4px 6px; color: var(--muted); }
@media (max-width: 1080px) { .lv-side { position: static; } }
@media (max-width: 860px) {
  .lv-banner { grid-template-columns: 1fr; padding: 20px; }
  .lv-art { display: none; }
  .lv-banner h2 { font-size: 1.45rem; }
  .lv-lesson { padding: 18px; }
  .lv-keyidea { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Gamification (practice streaks/points, results stars, dashboard level/goal/achievements)
   ========================================================================== */
.st-ic[data-icon="flame"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c1 4 5 6 5 11a5 5 0 0 1-10 0c0-2 1-3.5 2-4.5 0 2 1 3 2 3 0-3-1-6 1-9.5z'/%3E%3C/svg%3E"); }
.st-ic[data-icon="star"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.8l2.8 5.9 6.4.8-4.7 4.4 1.2 6.4L12 17.2l-5.7 3.1 1.2-6.4L2.8 9.5l6.4-.8z'/%3E%3C/svg%3E"); }
.st-ic[data-icon="medal"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2h4l1 5-3 1zM17 2h-4l-1 5 3 1z'/%3E%3Ccircle cx='12' cy='15' r='7'/%3E%3C/svg%3E"); }

/* practice HUD */
.ex-hud { display: inline-flex; gap: 6px; margin-left: 4px; }
.ex-hud-chip { display: inline-flex; align-items: center; gap: 5px; font-size: .78rem; font-weight: 600; padding: 4px 10px; border-radius: 99px; background: #eef2f8; color: var(--ink-soft); }
.ex-hud-chip .st-ic { width: 13px; height: 13px; color: #b7791f; }
.ex-hud-chip b { color: var(--ink); }
.ex-hud-chip.is-hot { background: #fdf0dc; color: #8a5a12; animation: hudPop .4s ease; }
.ex-hud-chip.is-hot .st-ic { color: #d9822b; }
@keyframes hudPop { 0% { transform: scale(1); } 50% { transform: scale(1.12); } 100% { transform: scale(1); } }
#exNext.is-check { background: var(--violet); }
.ex-answer.is-locked { pointer-events: none; opacity: .85; }
.ex-feedback:empty { display: none; }
.ex-fb { margin-top: 16px; border-radius: var(--r-lg); padding: 14px 16px; border: 1px solid; animation: screenFade .3s; }
.ex-fb.is-right { background: var(--go-soft); border-color: #bfe0cc; }
.ex-fb.is-part { background: #fbf3e2; border-color: #efdcb4; }
.ex-fb.is-wrong { background: #fcefef; border-color: #f0cfcf; }
.ex-fb.is-tutor { background: #eef2f8; border-color: var(--line); }
.ex-fb-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ex-fb-head strong { font-size: 1.05rem; }
.ex-fb.is-right .ex-fb-head strong { color: var(--go-deep); }
.ex-fb.is-wrong .ex-fb-head strong { color: var(--coral); }
.ex-fb-ic { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: .85rem; }
.ex-fb.is-right .ex-fb-ic { background: var(--go); } .ex-fb.is-right .ex-fb-ic::after { content: '✓'; }
.ex-fb.is-part .ex-fb-ic { background: var(--sun); } .ex-fb.is-part .ex-fb-ic::after { content: '½'; }
.ex-fb.is-wrong .ex-fb-ic { background: var(--coral); } .ex-fb.is-wrong .ex-fb-ic::after { content: '✗'; }
.ex-fb.is-tutor .ex-fb-ic { background: var(--muted); } .ex-fb.is-tutor .ex-fb-ic::after { content: 'i'; }
.ex-fb-pts { margin-left: auto; font-weight: 700; font-size: .9rem; color: #8a5a12; background: #fff; border-radius: 99px; padding: 3px 10px; box-shadow: var(--shadow-sm); animation: hudPop .5s ease; }
.ex-fb-key { margin-top: 8px; }
.ex-fb-ms { margin-top: 6px; color: var(--ink-soft); font-size: .95rem; line-height: 1.5; }
.ex-card.pulse-right { animation: pulseRight .6s ease; }
.ex-card.pulse-wrong { animation: pulseWrong .45s ease; }
@keyframes pulseRight { 0% { box-shadow: 0 0 0 0 rgba(45,122,85,.45); } 100% { box-shadow: 0 0 0 14px rgba(45,122,85,0); } }
@keyframes pulseWrong { 0%, 100% { transform: none; } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

/* results */
.rv-game { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 24px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px 22px; margin-top: 14px; box-shadow: var(--shadow-sm); }
.rv-stars { display: flex; gap: 4px; }
.rv-star { width: 40px; height: 40px; fill: #e5e9f0; transition: fill .3s; }
.rv-star.is-on { fill: #d4a52a; animation: starIn .5s cubic-bezier(.3,1.6,.5,1) backwards; }
.rv-star.is-on:nth-child(2) { animation-delay: .15s; } .rv-star.is-on:nth-child(3) { animation-delay: .3s; }
@keyframes starIn { from { transform: scale(0) rotate(-40deg); } to { transform: none; } }
.rv-game-stats { display: flex; flex-wrap: wrap; gap: 8px 26px; }
.rv-game-stats div { display: flex; flex-direction: column; }
.rv-game-stats b { font-family: var(--font-display); font-size: 1.45rem; line-height: 1.1; }
.rv-game-stats span { font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; }
.rv-medals { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.rv-medal { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; font-weight: 600; padding: 5px 12px 5px 8px; border-radius: 99px; animation: screenFade .4s .4s backwards; }
.rv-medal .st-ic { width: 16px; height: 16px; }
.rv-medal.is-gold { background: #fbf1d6; color: #7a5a10; }
.rv-medal.is-navy { background: var(--violet-soft); color: var(--violet); }
.rv-medal.is-green { background: var(--go-soft); color: var(--go-deep); }
.rv-medal.is-amber { background: #fdf0dc; color: #8a5a12; }
.rv-medal-note { color: var(--muted); font-size: .85rem; }

/* dashboard */
.gm-row { grid-template-columns: 1fr 1fr 1.3fr; }
.gm-level { display: flex; gap: 16px; align-items: center; }
.gm-badge { width: 72px; height: 72px; border-radius: 50%; flex-shrink: 0; background: radial-gradient(circle at 30% 30%, #2f5c96, #142848); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 0 0 4px #e9eef7, 0 0 0 5px #d4a52a; }
.gm-badge small { font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; opacity: .8; }
.gm-badge strong { font-family: var(--font-display); font-size: 1.7rem; line-height: 1; }
.gm-lv-main { flex: 1; min-width: 0; }
.gm-lv-main h3, .gm-goal h3 { font-size: 1.1rem; margin: 2px 0 8px; }
.gm-lv-main p, .gm-goal p { font-size: .8rem; color: var(--muted); margin-top: 6px; }
.gm-goal { display: flex; gap: 16px; align-items: center; }
.gm-ring { --p: 0; width: 84px; height: 84px; flex-shrink: 0; border-radius: 50%; background: conic-gradient(var(--go) calc(var(--p) * 1%), #e8ecf2 0); display: grid; place-items: center; }
.gm-ring > div { width: 66px; height: 66px; border-radius: 50%; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.gm-ring strong { font-family: var(--font-display); font-size: 1.3rem; line-height: 1; }
.gm-ring span { font-size: .66rem; color: var(--muted); }
.gm-medals { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.gm-medal { aspect-ratio: 1; border-radius: 50%; background: #eef1f5; color: #c5ccd8; display: grid; place-items: center; }
.gm-medal .st-ic { width: 55%; height: 55%; }
.gm-medal.is-on { background: linear-gradient(145deg, #f7e6b0, #d4a52a); color: #6b4c0c; box-shadow: 0 2px 6px rgba(180,130,20,.3); }
.gm-next { margin-top: 12px; font-size: .84rem; color: var(--ink-soft); }

/* topic stars */
.tp-stars { display: inline-flex; gap: 2px; flex-shrink: 0; }
.tp-star { width: 13px; height: 13px; background: #dfe4ec; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.8l2.8 5.9 6.4.8-4.7 4.4 1.2 6.4L12 17.2l-5.7 3.1 1.2-6.4L2.8 9.5l6.4-.8z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.8l2.8 5.9 6.4.8-4.7 4.4 1.2 6.4L12 17.2l-5.7 3.1 1.2-6.4L2.8 9.5l6.4-.8z'/%3E%3C/svg%3E") center / contain no-repeat; }
.tp-star.is-on { background: #d4a52a; }
@media (max-width: 1080px) { .gm-row { grid-template-columns: 1fr 1fr; } .gm-ach { grid-column: 1 / -1; } }
@media (max-width: 860px) { .gm-row { grid-template-columns: 1fr; } .rv-game { grid-template-columns: 1fr; } .ex-hud { display: none; } }

.st-logo svg { width: 22px; height: 22px; color: #fff; }
.st-brand-lg .st-logo svg { width: 28px; height: 28px; }
.set-about { margin-top: 16px; padding: 12px 14px; background: #f6f8fb; border-radius: var(--r-md); font-size: .85rem; color: var(--ink-soft); line-height: 1.5; word-break: break-all; }

/* ---------- sign in & first-sign-in profile */
#screenLogin, #screenProfile { background: #f3f1ec; }
.auth { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
.auth-side { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-start; gap: 40px; padding: 44px 56px; color: #d9e2ef;
  background: #142848 radial-gradient(120% 80% at 0% 0%, #23457a 0%, rgba(35, 69, 122, 0) 60%); }
.auth-side::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px); background-size: 28px 28px; }
.auth-side > * { position: relative; z-index: 1; }
.auth-brand { display: flex; align-items: center; gap: 20px; }
.auth-brand strong { display: block; font-family: var(--font-display); font-size: 2.6rem; line-height: 1; color: #fff; letter-spacing: .005em; }
.auth-brand small { display: block; font-size: .78rem; color: #aebcd2; margin-top: 2px; letter-spacing: .02em; }
.auth-eyebrow { font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #d4a52a; margin-bottom: 14px; }
.auth-side h1 { color: #fff; font-size: clamp(2rem, 3.4vw, 2.9rem); line-height: 1.18; max-width: 500px; }
.auth-lede { color: #c3cfe0; font-size: 1.05rem; line-height: 1.6; max-width: 470px; margin-top: 16px; }
.auth-points { list-style: none; display: grid; gap: 22px; margin-top: 40px; padding-top: 32px; border-top: 1px solid rgba(255, 255, 255, .12); max-width: 480px; padding: 0; }
.auth-points li { display: flex; gap: 14px; align-items: flex-start; }
.auth-points svg { width: 22px; height: 22px; color: #d4a52a; flex-shrink: 0; margin-top: 2px; }
.auth-points strong { display: block; color: #fff; font-weight: 600; font-size: .98rem; }
.auth-points span { display: block; color: #b9c7dc; font-size: .9rem; line-height: 1.5; margin-top: 2px; }
.auth-side-body { margin: auto 0; }
.auth-side-foot { font-size: .8rem; color: #8fa1bd; border-top: 1px solid rgba(255, 255, 255, .12); padding-top: 18px; }
.auth-main { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 24px; gap: 18px; }
.auth-card { width: 100%; max-width: 420px; background: #fff; border: 1px solid #e4e1d8; border-radius: var(--r-lg); padding: 36px 34px 28px; box-shadow: 0 1px 2px rgba(20, 40, 72, .04), 0 18px 40px rgba(20, 40, 72, .08); border-top: 4px solid var(--violet); }
.auth-kicker { font-size: .74rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--sun); }
.auth-card h2 { font-size: 1.75rem; margin-top: 6px; }
.auth-field { position: relative; display: flex; align-items: center; }
.auth-field > svg { position: absolute; left: 12px; width: 19px; height: 19px; color: #8592a6; pointer-events: none; }
.auth-field .text-input { width: 100%; font-size: 1rem; padding: 12px 13px 12px 40px; background: #fbfbfa; }
.auth-field .text-input:focus { background: #fff; }
.auth-field .text-input::placeholder { color: #a5aebb; font-weight: 400; }
.auth-eye { position: absolute; right: 6px; border: 0; background: none; font: 600 .8rem var(--font-body); color: var(--violet); padding: 8px 10px; border-radius: var(--r-sm); cursor: pointer; }
.auth-eye:hover { background: var(--violet-soft); }
#loginPass { padding-right: 64px; }
.auth-card .login-btn { background: var(--violet); color: #fff; }
.auth-card .login-btn:hover { background: var(--violet-deep); }
.auth-help { margin-top: 16px; font-size: .86rem; color: var(--ink-soft); text-align: center; }
.auth-card .login-foot { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 16px; }
.auth-tutor { font-size: .82rem; color: var(--muted); }
@media (max-width: 900px) {
  .auth { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .auth-side { padding: 20px 20px 18px; gap: 0; }
  .auth-side h1 { font-size: 1.45rem; }
  .auth-side-body, .auth-side-foot, .auth-eyebrow { display: none; }
  .auth-main { justify-content: flex-start; padding: 24px 16px 32px; }
  .auth-card { padding: 28px 22px 22px; }
}

.prof-wrap { max-width: 980px; margin: 0 auto; padding: 22px 24px 48px; }
.prof-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.auth-brand-sm strong { color: var(--ink); font-size: 1.5rem; }
.auth-brand-sm small { color: var(--muted); }
.prof-card { background: #fff; border: 1px solid #e4e1d8; border-top: 4px solid var(--violet); border-radius: var(--r-lg); padding: 32px 34px 30px; box-shadow: 0 18px 40px rgba(20, 40, 72, .07); }
.prof-head h2 { font-size: 1.7rem; margin-top: 6px; }
.prof-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 36px; margin-top: 8px; align-items: start; }
.prof-fields .text-input { width: 100%; font-size: 1rem; padding: 11px 13px; background: #fbfbfa; }
.prof-dob { border: 0; padding: 0; margin: 14px 0 0; min-width: 0; }
.prof-dob legend.st-label { margin-top: 0; padding: 0; }
.prof-dob-row { display: grid; grid-template-columns: 1fr 1.6fr 1.2fr; gap: 10px; }
.prof-idcard { margin-top: 38px; border-radius: 14px; overflow: hidden; background: #fff; border: 1px solid #dfe4ec; box-shadow: 0 10px 26px rgba(20, 40, 72, .12); }
.idc-top { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--violet); color: #fff; font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.idc-body { display: flex; gap: 14px; align-items: center; padding: 20px 16px 16px; }
.idc-emb .emb { width: 64px; height: 64px; border-radius: 14px; }
.idc-emb .emb svg { width: 36px; height: 36px; }
.idc-emb:empty { width: 64px; height: 64px; border-radius: 14px; border: 2px dashed #cdd5e1; }
.idc-text { min-width: 0; display: grid; gap: 3px; }
.idc-text strong { font-family: var(--font-display); font-size: 1.12rem; color: var(--ink); overflow-wrap: anywhere; }
.idc-text span { font-size: .84rem; color: var(--ink-soft); overflow-wrap: anywhere; }
.idc-foot { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; background: #f6f4ee; border-top: 1px solid #ebe7dc; font-size: .74rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.idc-foot code { font: 600 .86rem var(--font-body); color: var(--ink); text-transform: none; letter-spacing: 0; }
.prof-emblems { border: 0; padding: 0; margin: 26px 0 0; min-width: 0; }
.emb-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.emb-opt { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 6px 10px; border: 1.5px solid var(--line); border-radius: var(--r-md); background: #fff; cursor: pointer; font: 500 .8rem var(--font-body); color: var(--ink-soft); transition: border-color .15s, box-shadow .15s, transform .15s; }
.emb-opt:hover { border-color: #b9c4d4; transform: translateY(-1px); }
.emb-opt[aria-checked="true"] { border-color: var(--violet); box-shadow: 0 0 0 3px var(--violet-soft); color: var(--violet); font-weight: 600; }
.emb-opt:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
.prof-actions { display: flex; justify-content: flex-end; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.prof-actions .btn { background: var(--violet); color: #fff; min-width: 220px; }
.prof-actions .btn:hover { background: var(--violet-deep); }
@media (max-width: 860px) {
  .prof-wrap { padding: 16px 16px 40px; }
  .prof-card { padding: 24px 18px 22px; }
  .prof-grid { grid-template-columns: 1fr; gap: 8px; }
  .prof-idcard { margin-top: 18px; order: -1; }
  .emb-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .prof-actions .btn { width: 100%; }
}

/* emblems */
.emb { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0; }
.emb svg { width: 26px; height: 26px; }
.emb-owl { background: #efe9f6; color: #5b3d86; }
.emb-book { background: #e9eef7; color: #1f3a68; }
.emb-compass { background: #fbf0e4; color: #9a5a17; }
.emb-globe { background: #e4f1f1; color: #1d5c63; }
.emb-atom { background: #e8f1fa; color: #2b6cb0; }
.emb-quill { background: #f6e9ee; color: #8b3a62; }
.emb-telescope { background: #ecebf8; color: #3f3d8f; }
.emb-lightbulb { background: #fbf3e2; color: #8a6312; }
.emb-rocket { background: #fbeaea; color: #a33232; }
.emb-leaf { background: #e5f3ec; color: #22603f; }
.emb-knight { background: #eceff3; color: #3a4658; }
.emb-star { background: #fdf5dc; color: #9b7a10; }
.st-who .emb, .tt-name .emb { width: 36px; height: 36px; border-radius: 50%; }
.st-who .emb svg, .tt-name .emb svg { width: 21px; height: 21px; }
.tt-profile { display: flex; gap: 16px; align-items: center; padding: 14px 16px; margin-bottom: 16px; background: #f8f7f3; border: 1px solid #ebe7dc; border-radius: var(--r-md); }
.tt-profile dl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 22px; margin: 0; flex: 1; }
.tt-profile dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.tt-profile dd { margin: 2px 0 0; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.tt-profile-none { margin-bottom: 14px; }
@media (max-width: 860px) { .tt-profile dl { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.auth-field .text-input { height: 48px; border: 1px solid #d5dbe4; }
.auth-field .text-input:hover { border-color: #b8c2d0; }
.auth-field .text-input:focus, .auth-field .text-input:focus-visible { outline: none; border-color: var(--violet); box-shadow: 0 0 0 3px rgba(31, 58, 104, .18); }
.auth-card .login-btn { height: 48px; padding: 0 22px; }
.auth-card .login-btn:focus-visible, .auth-eye:focus-visible { outline: 3px solid rgba(31, 58, 104, .35); outline-offset: 2px; }
.auth-card .login-sub { margin-top: 6px; margin-bottom: 4px; }

/* ---------- Mentora tile logo (sign-in, profile, student card) */
.auth-logo { display: inline-grid; place-items: center; flex-shrink: 0; width: 84px; height: 84px; border-radius: 22px; background: #fff; color: var(--violet); box-shadow: 0 12px 28px rgba(4, 12, 30, .32); }
.auth-logo svg { width: 50px; height: 50px; overflow: visible; }
.auth-brand-sm .auth-logo { width: 50px; height: 50px; border-radius: 14px; background: var(--violet); color: #fff; box-shadow: 0 6px 16px rgba(20, 40, 72, .2); }
.auth-brand-sm .auth-logo svg { width: 29px; height: 29px; }
.idc-top .auth-logo { width: 26px; height: 26px; border-radius: 7px; box-shadow: none; }
.idc-top .auth-logo svg { width: 16px; height: 16px; }
@media (max-width: 900px) {
  .auth-logo { width: 54px; height: 54px; border-radius: 15px; }
  .auth-logo svg { width: 32px; height: 32px; }
  .auth-brand strong { font-size: 1.75rem; }
}

/* ---------- sign-in animations (play each time the screen opens) */
@keyframes mtFadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes mtFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes mtLogoIn { 0% { opacity: 0; transform: scale(.6) rotate(-8deg); } 60% { opacity: 1; transform: scale(1.06) rotate(1deg); } 100% { transform: none; } }
@keyframes mtDraw { to { stroke-dashoffset: 0; } }
@keyframes mtDot { 0% { transform: scale(0); } 70% { transform: scale(1.5); } 100% { transform: scale(1); } }
@keyframes mtGlow { 0%, 100% { transform: translate(0, 0) scale(1); opacity: .55; } 50% { transform: translate(8%, 6%) scale(1.15); opacity: .85; } }
@keyframes mtShake { 0%, 100% { transform: none; } 20% { transform: translateX(-8px); } 40% { transform: translateX(7px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(3px); } }
@keyframes mtOut { to { opacity: 0; transform: translateY(-14px) scale(.98); } }
@keyframes mtSpin { to { transform: rotate(360deg); } }
@keyframes mtPop { 0% { transform: scale(.7); opacity: 0; } 70% { transform: scale(1.08); opacity: 1; } 100% { transform: none; } }

.auth-side::before { content: ''; position: absolute; width: 70%; height: 70%; left: -10%; top: -15%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(76, 122, 196, .45) 0%, rgba(76, 122, 196, 0) 70%); animation: mtGlow 16s ease-in-out infinite; }
.screen.active .auth-side .auth-logo { animation: mtLogoIn .8s cubic-bezier(.2, .8, .2, 1) both; }
.screen.active .lg-m { stroke-dasharray: 60; stroke-dashoffset: 60; animation: mtDraw .9s .35s cubic-bezier(.6, 0, .3, 1) forwards; }
.screen.active .lg-dot { transform-box: fill-box; transform-origin: center; animation: mtDot .55s 1.1s cubic-bezier(.3, 1.6, .5, 1) both; }
.screen.active .auth-brand strong { animation: mtFadeIn .7s .45s both; }
#screenLogin.active .auth-side h1 { animation: mtFadeUp .7s .55s cubic-bezier(.2, .8, .2, 1) both; }
#screenLogin.active .auth-lede { animation: mtFadeUp .7s .7s cubic-bezier(.2, .8, .2, 1) both; }
#screenLogin.active .auth-points li { animation: mtFadeUp .6s cubic-bezier(.2, .8, .2, 1) both; }
#screenLogin.active .auth-points li:nth-child(1) { animation-delay: .85s; }
#screenLogin.active .auth-points li:nth-child(2) { animation-delay: .97s; }
#screenLogin.active .auth-points li:nth-child(3) { animation-delay: 1.09s; }
#screenLogin.active .auth-card { animation: mtFadeUp .7s .25s cubic-bezier(.2, .8, .2, 1) both; }
.auth-card.is-shaking { animation: mtShake .42s ease !important; }
.auth.is-leaving .auth-card { animation: mtOut .4s ease forwards !important; }
.auth.is-leaving .auth-side-body, .auth.is-leaving .auth-brand { transition: opacity .4s ease; opacity: 0; }

/* smooth interaction states */
.auth-field .text-input { transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease; }
.auth-field > svg { transition: color .18s ease; }
.auth-field:focus-within > svg { color: var(--violet); }
.auth-card .login-btn, .prof-actions .btn { position: relative; transition: background-color .18s ease, transform .12s ease, box-shadow .18s ease; }
.auth-card .login-btn:hover, .prof-actions .btn:hover { box-shadow: 0 8px 18px rgba(20, 40, 72, .22); transform: translateY(-1px); }
.auth-card .login-btn:active, .prof-actions .btn:active { transform: translateY(0) scale(.99); box-shadow: none; }
.btn.is-busy { color: transparent !important; pointer-events: none; }
.btn.is-busy::after { content: ''; position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%;
  border: 2.5px solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: mtSpin .7s linear infinite; }
.login-error:not([hidden]) { animation: mtFadeIn .25s ease; }

/* first-sign-in profile */
#screenProfile.active .prof-card { animation: mtFadeUp .7s .1s cubic-bezier(.2, .8, .2, 1) both; }
#screenProfile.active .prof-idcard { animation: mtFadeUp .7s .35s cubic-bezier(.2, .8, .2, 1) both; }
#screenProfile.active .emb-opt { animation: mtFadeUp .45s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(.45s + var(--i, 0) * 40ms); }
.emb-opt .emb { transition: transform .2s cubic-bezier(.3, 1.6, .5, 1); }
.emb-opt:hover .emb { transform: scale(1.08); }
.emb-opt[aria-checked="true"] .emb { transform: scale(1.12); }
.idc-emb .emb { animation: mtPop .4s cubic-bezier(.3, 1.6, .5, 1) both; }
.idc-text strong, .idc-text span { transition: color .2s ease; }

@media (prefers-reduced-motion: reduce) {
  #screenLogin *, #screenLogin *::before, #screenProfile *, #screenProfile *::before, #screenProfile *::after { animation: none !important; transition: none !important; }
  .lg-m { stroke-dashoffset: 0 !important; }
  .btn.is-busy { color: #fff !important; }
}

/* ---------- tutor: content access */
.tt-access { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 24px; align-items: start; }
.tt-access fieldset { border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 14px 10px; margin: 0; min-width: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tt-access legend { font-size: .74rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); padding: 0 6px; }
.tt-check { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border: 1.5px solid var(--line); border-radius: 999px; cursor: pointer; font-size: .9rem; font-weight: 500; color: var(--ink-soft); transition: border-color .15s, background-color .15s, color .15s; }
.tt-check:hover { border-color: #b9c4d4; }
.tt-check input { width: 16px; height: 16px; accent-color: var(--violet); margin: 0; }
.tt-check:has(input:checked) { border-color: var(--violet); background: var(--violet-soft); color: var(--violet); }
.tt-check:has(input:focus-visible) { outline: 3px solid rgba(31, 58, 104, .3); outline-offset: 2px; }
.tt-access-actions { grid-column: 1 / -1; display: flex; gap: 10px; }
.tt-access-note { margin-top: 12px; font-size: .84rem; color: var(--muted); }
.tt-courses .st-pill { margin: 2px 0; white-space: nowrap; }
.st-empty-inline { color: var(--muted); font-size: .85rem; }
@media (max-width: 860px) { .tt-access { grid-template-columns: 1fr; } }

/* ---------- homework */
.st-ic[data-icon="homework"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='4' width='14' height='17' rx='2'/%3E%3Cpath d='M9 4V3h6v1M9 11l2 2 4-4M9 17h6'/%3E%3C/svg%3E"); }
#stNav button { position: relative; }
.st-nav-count { margin-left: auto; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px; background: var(--violet); color: #fff; font-size: .75rem; font-weight: 700; display: inline-grid; place-items: center; }
.st-nav-count.is-late { background: var(--coral); }

.st-top { position: relative; }
.st-bell-wrap { position: relative; margin-left: auto; }
.st-top-actions:not(:empty) + .st-bell-wrap { margin-left: 0; }
.st-bell { position: relative; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--ink); display: grid; place-items: center; cursor: pointer; box-shadow: 0 2px 6px rgba(20, 40, 72, .06); transition: background-color .15s, box-shadow .15s, transform .15s; }
.st-bell:hover { background: var(--violet-soft); box-shadow: 0 6px 16px rgba(20, 40, 72, .12); }
.st-bell[aria-expanded="true"] { background: var(--violet); color: #fff; border-color: var(--violet); }
.st-bell:focus-visible { outline: 3px solid rgba(31, 58, 104, .35); outline-offset: 2px; }
.st-bell svg { width: 22px; height: 22px; }
.st-bell-count { position: absolute; top: -3px; right: -3px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; border: 2px solid #fff; background: var(--violet); color: #fff; font-size: .7rem; font-weight: 700; display: grid; place-items: center; animation: mtPop .4s cubic-bezier(.3, 1.6, .5, 1) both; }
.st-bell-count.is-late { background: var(--coral); }
@keyframes bellRing { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(14deg); } 30% { transform: rotate(-12deg); } 45% { transform: rotate(8deg); } 60% { transform: rotate(-5deg); } }
.st-bell:has(.st-bell-count:not([hidden])) svg { transform-origin: 50% 10%; animation: bellRing 1.1s ease .3s 1; }
.st-bell-panel { position: absolute; right: 0; top: calc(100% + 10px); width: min(380px, calc(100vw - 32px)); background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: 0 22px 50px rgba(20, 40, 72, .18); z-index: 60; overflow: hidden; animation: mtFadeUp .22s cubic-bezier(.2, .8, .2, 1) both; }
.bell-head { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 16px 10px; border-bottom: 1px solid var(--line); }
.bell-head strong { font-family: var(--font-display); font-size: 1.1rem; }
.bell-head span { font-size: .82rem; color: var(--muted); }
.bell-list { list-style: none; margin: 0; padding: 6px; max-height: 360px; overflow: auto; }
.bell-item { width: 100%; display: flex; gap: 12px; align-items: flex-start; text-align: left; padding: 10px; border: 0; background: none; border-radius: var(--r-md); cursor: pointer; font: inherit; color: inherit; }
.bell-item:hover, .bell-item:focus-visible { background: #f4f6f9; outline: none; }
.bell-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--violet); margin-top: 6px; flex-shrink: 0; }
.bell-item.is-late .bell-dot { background: var(--coral); }
.bell-text strong { display: block; font-size: .92rem; color: var(--ink); line-height: 1.35; }
.bell-text small { display: block; font-size: .8rem; color: var(--muted); margin-top: 2px; }
.bell-item.is-late small { color: var(--coral); font-weight: 600; }
.bell-empty { padding: 22px 16px; color: var(--muted); text-align: center; }
.bell-all { width: 100%; border: 0; border-top: 1px solid var(--line); background: #fafbfc; padding: 12px; font: 600 .88rem var(--font-body); color: var(--violet); cursor: pointer; }
.bell-all:hover { background: var(--violet-soft); }

.hw-stats .st-stat.is-alert { border-color: #f0c9c9; background: #fff8f8; }
.hw-stats .st-stat.is-alert .st-stat-value { color: var(--coral); }
.hw-list { list-style: none; margin: 0; padding: 0; }
.hw-row { display: flex; align-items: center; gap: 14px; padding: 14px 4px; border-top: 1px solid var(--line); animation: mtFadeUp .35s cubic-bezier(.2, .8, .2, 1) both; }
.hw-row:first-child { border-top: 0; }
.hw-row.is-done { opacity: .75; }
.hw-kind { width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0; background: var(--violet-soft); position: relative; }
.hw-kind::after { content: ''; position: absolute; inset: 10px; background: var(--violet); -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat;
  --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='4' width='14' height='17' rx='2'/%3E%3Cpath d='M9 4V3h6v1M9 11l2 2 4-4M9 17h6'/%3E%3C/svg%3E"); }
.hw-kind-lesson { background: #e4f1f1; } .hw-kind-lesson::after { background: #1d5c63; --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4.5A2.5 2.5 0 0 1 6.5 2H20v17H6.5A2.5 2.5 0 0 0 4 21.5z'/%3E%3Cpath d='M4 21.5V4.5'/%3E%3C/svg%3E"); }
.hw-kind-paper { background: #fbf3e2; } .hw-kind-paper::after { background: #8a6312; --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6M8 13h8M8 17h5'/%3E%3C/svg%3E"); }
.hw-kind-mtc { background: #e8f1fa; } .hw-kind-mtc::after { background: #2b6cb0; --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
.hw-main { flex: 1; min-width: 0; }
.hw-main strong { display: block; color: var(--ink); line-height: 1.35; }
.hw-main small { display: block; color: var(--muted); margin-top: 3px; }
.hw-due { font-size: .86rem; font-weight: 600; color: var(--ink-soft); white-space: nowrap; }
.hw-due.is-late { color: var(--coral); }
.hw-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.hw-students { align-items: flex-start; }
.hw-filter small { opacity: .7; margin-left: 2px; }
@media (max-width: 860px) {
  .hw-row { flex-wrap: wrap; }
  .hw-main { flex-basis: calc(100% - 60px); }
  .hw-due { margin-left: 54px; }
  .st-bell { width: 42px; height: 42px; }
}
@media (prefers-reduced-motion: reduce) { .st-bell svg, .st-bell-count, .st-bell-panel, .hw-row { animation: none !important; } }