/* ==========================================================================
   TIAD Student — learning loop, motivation, safety & sales add-ons
   Same mono + neon language (tokens.css / ui.css / components.css).
   ========================================================================== */

/* ---------- cart: discount code ---------- */
.cart-cp { display: flex; gap: 8px; margin-bottom: 14px; }
.cart-cp .input { flex: 1; min-width: 0; height: 44px; text-transform: uppercase; letter-spacing: .04em; }
.cart-cp .btn { height: 44px; }
.cart-cp-on { flex: 1; display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 8px 0 14px; border-radius: 14px; background: var(--accent-50); color: var(--accent-ink); font-size: 13.5px; }
.cart-cp-on b { color: var(--ink); font-weight: 500; letter-spacing: .04em; }
.cart-cp-on button { margin-left: auto; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-3); }
.cart-cp-on button:hover { background: #fff; color: var(--ink); }
.cart-sum b { font-weight: 400; color: var(--accent-ink); }

/* ---------- sign-in: Google / Zalo, codes, community rules ---------- */
.au-social { display: flex; flex-direction: column; gap: 10px; }
.au-g { min-height: 44px; display: flex; justify-content: center; }
.au-zalo { display: flex; align-items: center; justify-content: center; gap: 10px; height: 48px; border-radius: 99px; background: #0068FF; color: #fff; font-size: var(--fs-sm); transition: filter .2s; }
.au-zalo:hover { filter: brightness(1.08); color: #fff; }
.au-or { display: flex; align-items: center; gap: 12px; color: var(--ink-3); font-size: 12.5px; }
.au-or::before, .au-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.au-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 22px; letter-spacing: .45em; text-align: center; }
.au-link.u { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; font-size: inherit; color: var(--ink); }
.au-go.is-busy { opacity: .7; pointer-events: none; }
.au-rules { max-width: 560px; }
.au-rules h2 { font-size: 26px; font-weight: 400; letter-spacing: -0.03em; margin-bottom: 8px; }
.au-rules ol { margin: 16px 0 22px; padding: 0; list-style: none; counter-reset: r; display: flex; flex-direction: column; gap: 10px; }
.au-rules li { counter-increment: r; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 4px 12px; padding: 12px 14px; border-radius: 16px; background: var(--tile-2); }
.au-rules li::before { content: counter(r); grid-row: span 2; width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: var(--accent); display: grid; place-items: center; font-size: 13px; }
.au-rules li b { font-weight: 500; }
.au-rules li span { font-size: var(--fs-sm); color: var(--ink-2); }

/* ---------- lesson video: frames, lock, moving watermark ---------- */
.player.is-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.player-lock { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 24px; color: #fff; background: rgba(0, 0, 0, .45); }
.player-lock b { font-weight: 400; font-size: 18px; }
.player-lock span { font-size: 13.5px; color: rgba(255, 255, 255, .75); max-width: 380px; }
.player-lock .spin { width: 28px; height: 28px; border-width: 3px; }
.wm { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.wm span { position: absolute; left: 6%; top: 8%; font: 400 12.5px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: rgba(255, 255, 255, .34); text-shadow: 0 0 2px rgba(0, 0, 0, .35); white-space: nowrap; animation: wmMove 42s steps(1) infinite; user-select: none; }
@keyframes wmMove {
  0% { left: 6%; top: 8%; } 14% { left: 58%; top: 18%; } 28% { left: 22%; top: 62%; } 42% { left: 64%; top: 78%; }
  56% { left: 10%; top: 40%; } 70% { left: 48%; top: 46%; } 84% { left: 30%; top: 86%; } 100% { left: 6%; top: 8%; }
}
.ol-rel { display: inline-flex; align-items: center; gap: 4px; color: var(--warn) !important; }

/* ---------- shared kicker ---------- */
.mk-k { display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.mk-k i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }

/* ---------- Sổ lỗi sai ---------- */
.mk-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 28px; align-items: center; padding: clamp(28px, 4vw, 48px); border-radius: 36px; background: var(--ink); color: #fff; position: relative; overflow: hidden; }
.mk-hero::before { content: ""; position: absolute; right: -120px; bottom: -160px; width: 460px; height: 460px; border-radius: 50%; background: radial-gradient(circle, rgba(91, 225, 91, .4), rgba(91, 225, 91, 0) 70%); }
.mk-hero > * { position: relative; }
.mk-hero .mk-k { color: rgba(255, 255, 255, .6); }
.mk-hero h1 { color: #fff; font-size: clamp(36px, 4vw, 60px); font-weight: 300; letter-spacing: -0.05em; line-height: 1; margin: 14px 0 12px; }
.mk-hero h1 b { font-weight: 300; color: var(--accent); }
.mk-hero p { color: rgba(255, 255, 255, .7); max-width: 520px; margin-bottom: 22px; }
.mk-hero p b { color: #fff; font-weight: 400; }
.mk-hero .btn-outline { color: #fff; border-color: rgba(255, 255, 255, .3); background: transparent; }
.mk-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.mk-step { position: relative; padding: 16px 10px; border-radius: 20px; background: rgba(255, 255, 255, .07); text-align: center; display: flex; flex-direction: column; gap: 4px; }
.mk-step b { font-weight: 400; font-size: 16px; }
.mk-step span { font-size: 11.5px; color: rgba(255, 255, 255, .55); }
.mk-step.s1, .mk-step.s2, .mk-step.s3 { background: rgba(91, 225, 91, .12); }
.mk-step.ok { background: var(--accent); color: var(--ink); }
.mk-step.ok span { color: var(--ink-2); }
.mk-step i { position: absolute; right: -11px; top: 50%; transform: translateY(-50%); z-index: 1; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); display: grid; place-items: center; color: var(--accent); }
.mk-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; margin-top: 28px; align-items: start; }
.mk-tabs { margin-bottom: 14px; flex-wrap: wrap; }
.mk-tabs .tab i { font-style: normal; font-size: 11px; margin-left: 4px; padding: 2px 7px; border-radius: 99px; background: var(--tile); }
.mk-tabs .tab.on i { background: var(--accent); color: var(--ink); }
.mk-list { display: flex; flex-direction: column; gap: 8px; }
.mk-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto auto; gap: 14px; align-items: center; padding: 14px 14px 14px 18px; border-radius: 22px; background: var(--surface); }
.mk-dots { display: flex; flex-direction: column; gap: 4px; align-items: center; }
.mk-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--tile); }
.mk-dots i.on { background: var(--accent-600); }
.mk-q { text-align: left; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.mk-stem { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.55; }
.mk-q:hover .mk-stem { color: var(--accent-ink); }
.mk-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12px; color: var(--ink-3); }
.mk-due { font-size: 12.5px; color: var(--ink-3); white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
.mk-due.now { color: var(--ink); background: var(--accent); padding: 4px 10px; border-radius: 99px; }
.mk-due.ok { color: var(--accent-ink); }
.mk-topics, .pl-topics { display: flex; flex-direction: column; gap: 12px; }
.mk-tp, .pl-tp { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; font-size: var(--fs-sm); }
.mk-tp .pbar, .pl-tp .pbar { grid-column: 1 / -1; }
.mk-tp b, .pl-tp b { font-weight: 400; }
.pl-tp.weak .pbar i { background: var(--danger); }
.pl-tp.good .pbar i { background: var(--accent-600); }
.mk-sug { display: flex; flex-direction: column; gap: 8px; }
.mk-sg { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 0 12px; align-items: center; text-align: left; padding: 10px 12px; border-radius: 16px; background: var(--tile-2); }
.mk-sg > span { grid-row: span 2; width: 36px; height: 36px; border-radius: 12px; background: var(--ink); color: var(--accent); display: grid; place-items: center; }
.mk-sg b { font-weight: 400; font-size: var(--fs-sm); }
.mk-sg small { font-size: 12px; color: var(--ink-3); }
.mk-sg:hover { background: var(--tile); }
@media (max-width: 1100px) { .mk-hero, .mk-grid { grid-template-columns: 1fr; } }

/* ---------- practice window ---------- */
.pq { width: min(880px, 100%); height: auto; max-height: 100%; }
.pq-body { display: flex; flex-direction: column; gap: 18px; padding: 26px clamp(20px, 3vw, 40px) 30px; }
.pq-body .qz-qh { flex-wrap: wrap; }
.pq-verdict { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 99px; font-size: 13px; }
.pq-verdict.ok { background: var(--ok-50); color: var(--ok); }
.pq-verdict.no { background: var(--danger-50); color: var(--danger); }
.qz-opt.wrong { border-color: var(--danger); background: var(--danger-50); }
.qz-opt[disabled] { cursor: default; }
.pq-sol { padding: 18px 20px; border-radius: 22px; background: var(--accent-50); display: flex; flex-direction: column; gap: 10px; }
.pq-sol b { font-weight: 500; }
.pq-sol ol { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; line-height: 1.65; }
.pq-sol li.new { animation: auIn .5s var(--ease) both; }
.pq-sol .btn { align-self: flex-start; }

/* ---------- daily question + streak (dashboard) ---------- */
.dc { display: flex; flex-direction: column; gap: 16px; }
.dc-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dc-streak { display: inline-flex; align-items: baseline; gap: 8px; color: var(--ink-3); }
.dc-streak svg { align-self: center; color: var(--ink-4); }
.dc-streak.on svg { color: var(--accent-600); }
.dc-streak b { font-size: 40px; font-weight: 300; letter-spacing: -0.04em; color: var(--ink); line-height: 1; }
.dc-streak span { font-size: 13px; }
.dc-week { display: flex; gap: 5px; }
.dc-week i { width: 12px; height: 28px; border-radius: 6px; background: var(--tile); }
.dc-week i.on { background: var(--accent); }
.dc-week i.now { outline: 2px solid var(--ink); outline-offset: 1px; }
.dc-q { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 18px; background: var(--tile-2); }
.dc-k { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.dc-q b { font-weight: 400; }
.dc-act { display: flex; flex-direction: column; gap: 8px; }

/* ---------- study plan ---------- */
.pl-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; align-items: center; padding: clamp(28px, 4vw, 48px); border-radius: 36px; background: var(--surface); }
.pl-hero h1, .pl-start h1 { font-size: clamp(36px, 4.2vw, 64px); font-weight: 300; letter-spacing: -0.055em; line-height: 1; margin: 14px 0; }
.pl-hero h1 b { font-weight: 300; }
.pl-hero h1 b.neon { background: var(--accent); padding: 0 10px; border-radius: 14px; }
.pl-hero p { color: var(--ink-2); max-width: 620px; margin-bottom: 18px; }
.pl-ring-in { display: flex; flex-direction: column; align-items: center; }
.pl-ring-in b { font-size: 30px; font-weight: 300; }
.pl-ring-in span { font-size: 12px; color: var(--ink-3); }
.pl-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; margin-top: 28px; align-items: start; }
.pl-grid > section { display: flex; flex-direction: column; gap: 14px; }
.pl-week { padding: 18px 20px; border-radius: 26px; background: var(--surface); }
.pl-week.now { background: #fff; border: 1.5px solid var(--ink); }
.pl-week.past { opacity: .72; }
.pl-wh { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.pl-wh b { font-weight: 500; }
.pl-wh > span { font-size: 12.5px; color: var(--ink-3); }
.pl-tasks { display: flex; flex-direction: column; gap: 6px; }
.pl-t { display: grid; grid-template-columns: 26px 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 8px 8px 10px; border-radius: 16px; background: var(--tile-2); }
.pl-week.now .pl-t { background: var(--surface); }
.pl-t.ok .pl-tt b { text-decoration: line-through; text-decoration-color: var(--ink-4); color: var(--ink-3); }
.pl-cb { width: 24px; height: 24px; border-radius: 8px; border: 1.5px solid var(--line-2); background: #fff; display: grid; place-items: center; color: var(--ink); }
.pl-t.ok .pl-cb { background: var(--accent); border-color: var(--accent); }
.pl-ic { width: 34px; height: 34px; border-radius: 12px; background: #fff; display: grid; place-items: center; color: var(--ink-2); }
.pl-tt { display: flex; flex-direction: column; min-width: 0; }
.pl-tt b { font-weight: 400; font-size: var(--fs-sm); }
.pl-tt small { font-size: 12px; color: var(--ink-3); }
.pl-start { max-width: 760px; padding: clamp(28px, 4vw, 56px); border-radius: 36px; background: var(--surface); }
.pl-start p { color: var(--ink-2); margin-bottom: 22px; }
.pl-form { display: flex; flex-direction: column; gap: 16px; }
.pl-form .btn { align-self: flex-start; }
@media (max-width: 1100px) { .pl-hero, .pl-grid { grid-template-columns: 1fr; } }

/* ---------- certificate + public check ---------- */
.ct { max-width: 860px; }
.ct-paper { background: var(--ink); color: #fff; }
.ct-paper .er-k { color: rgba(255, 255, 255, .6); }
.ct-paper .er-cn { color: #fff; }
.ct-paper .er-facts b { color: var(--accent); }
.ct-paper .er-facts span { color: rgba(255, 255, 255, .6); }
.ct-course { margin-top: 10px; color: rgba(255, 255, 255, .75); }
.ct-course b { color: #fff; font-weight: 400; }
.ct-code { margin-top: 28px; font-size: 12.5px; color: rgba(255, 255, 255, .55); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.ct-code b { color: var(--accent); font-weight: 500; }
.vf { max-width: 720px; margin: 60px auto; padding: 0 24px; }
.vf h1 { font-size: clamp(36px, 4vw, 56px); font-weight: 300; letter-spacing: -0.05em; margin: 12px 0 22px; }
.vf-f .input { flex: 1; text-transform: uppercase; }
.vf-ok, .vf-no { display: flex; gap: 16px; align-items: flex-start; }
.vf-ok { background: var(--accent-50); }
.vf-ok svg { color: var(--accent-ink); flex-shrink: 0; }
.vf-no { background: var(--danger-50); }
.vf-no svg { color: var(--danger); flex-shrink: 0; }
.vf-ok > div, .vf-no > div { display: flex; flex-direction: column; gap: 4px; }
.vf-ok b, .vf-no b { font-weight: 500; }
.chip.warn { background: var(--danger-50); color: var(--danger); }
button.chip { cursor: pointer; }

/* ---------- exam report ---------- */
.er-meter { position: relative; }
.er-goal { position: absolute; top: -6px; bottom: -6px; width: 3px; border-radius: 2px; background: var(--ink); transform: translateX(-1px); }
.er-goal::after { content: "Mục tiêu"; position: absolute; top: -20px; left: 50%; transform: translateX(-50%); font-size: 11px; font-style: normal; white-space: nowrap; color: var(--ink-2); }
.er-goalrow { margin-top: 12px; font-size: var(--fs-sm); color: var(--ink-2); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.er-goalrow b { font-weight: 500; }
.er-goalrow svg { color: var(--accent-ink); }
.er-rep { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 24px; }
.rp-list { display: flex; flex-direction: column; gap: 10px; }
.rp-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) 44px; gap: 12px; align-items: center; font-size: var(--fs-sm); }
.rp-row b { font-weight: 400; text-align: right; }
.rp-row.weak .pbar i { background: var(--danger); }
.rp-row.good .pbar i { background: var(--accent-600); }
.rp-hist { display: flex; align-items: flex-end; gap: 3px; height: 120px; }
.rp-hist i { flex: 1; border-radius: 4px 4px 2px 2px; background: var(--tile); }
.rp-hist i.me { background: var(--accent); }
.rp-axis { display: flex; justify-content: space-between; font-size: 11px; color: var(--ink-3); margin-top: 6px; }
@media (max-width: 900px) { .er-rep { grid-template-columns: 1fr; } }
.er-res .er-meter { overflow: visible; }

/* ---------- lesson: marks, notes, ranking mode, certificate ---------- */
.lp-mark { display: inline-flex; padding: 4px; border-radius: 99px; background: var(--surface); }
.lp-mark button { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border-radius: 99px; font-size: 13.5px; color: var(--ink-2); transition: background .2s, color .2s; }
.lp-mark button:hover { color: var(--ink); }
.lp-mark button.on.ok { background: var(--accent); color: var(--ink); }
.lp-mark button.on.rv { background: var(--ink); color: #fff; }
.lp-notes { display: flex; flex-direction: column; gap: 14px; }
.nt-f { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 22px; background: var(--surface); }
.nt-f .textarea { background: #fff; }
.nt-at { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-3); }
.nt-at b { color: var(--ink); font-weight: 500; }
.nt-list { display: flex; flex-direction: column; gap: 8px; max-height: 520px; overflow-y: auto; }
.nt { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 12px; border-radius: 18px; background: var(--tile-2); }
.nt-t { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 10px; border-radius: 99px; background: var(--ink); color: var(--accent); font-size: 12px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.nt-x { font-size: var(--fs-sm); line-height: 1.55; padding-top: 3px; word-break: break-word; }
.nt-empty { padding: 8px 4px; }
.lr-mode { display: flex; padding: 4px; border-radius: 99px; background: var(--surface); margin-bottom: 12px; }
.lr-mode button { flex: 1; height: 36px; border-radius: 99px; font-size: 13px; color: var(--ink-2); }
.lr-mode button.on { background: var(--ink); color: #fff; }
.lr-note { margin-top: 10px; font-size: 12px; color: var(--ink-3); }
.mc-cert { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; height: 34px; padding: 0 14px; border-radius: 99px; background: var(--accent); color: var(--ink); font-size: 13px; }

/* ---------- community safety & learning together ---------- */
.tag.ghost { background: transparent; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.tp-lesson { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 99px; background: var(--surface); font: inherit; font-size: 12.5px; color: var(--ink); border: 0; cursor: pointer; max-width: 360px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-lesson:hover { background: var(--tile); }
.tpo-hidden { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-radius: 22px; background: var(--surface); color: var(--ink-3); font-size: 13.5px; }
.tpo-hidden button { margin-left: auto; border: 0; background: none; font: inherit; color: var(--ink); text-decoration: underline; cursor: pointer; }
.nt-sim { border-radius: 20px; background: var(--surface); padding: 12px; display: flex; flex-direction: column; gap: 4px; }
.nt-sim-h { display: flex; align-items: center; gap: 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); padding: 2px 6px 6px; }
.nt-sim-h .ic { color: var(--accent-ink, var(--ink)); }
.nt-sim button { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 14px; border: 0; background: transparent; font: inherit; font-size: 14px; text-align: left; cursor: pointer; color: var(--ink); }
.nt-sim button:hover { background: #fff; }
.nt-sim small { color: var(--ink-3); font-size: 12px; }
.rl { margin: 0; padding: 0; list-style: none; counter-reset: rl; display: flex; flex-direction: column; gap: 10px; }
.rl li { counter-increment: rl; display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 12px; row-gap: 2px; text-align: left; }
.rl li::before { content: counter(rl); grid-row: span 2; width: 32px; height: 32px; border-radius: 50%; background: var(--ink); color: var(--accent); display: grid; place-items: center; font-size: 13px; }
.rl b { font-weight: 500; font-size: 14.5px; }
.rl span { color: var(--ink-2); font-size: 13.5px; line-height: 1.45; }
.fc-len { display: flex; gap: 6px; margin: 6px 0 2px; }
.fc-len button { height: 34px; min-width: 48px; padding: 0 12px; border-radius: 99px; border: 0; background: #fff; font: inherit; font-size: 14px; cursor: pointer; color: var(--ink); }
.fc-len button.on { background: var(--ink); color: #fff; }
.fc-with { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.fc-with small { margin: 0 !important; }
.fc-av { display: flex; }
.fc-av > * { margin-left: -6px; box-shadow: 0 0 0 2px var(--surface); border-radius: 50%; }
.fc-av > *:first-child { margin-left: 0; }
.fc.on .fc-av > * { box-shadow: 0 0 0 2px var(--ink); }
.chl-n { display: flex; align-items: baseline; gap: 6px; }
.chl-n b { font-size: 40px; font-weight: 300; letter-spacing: -0.04em; line-height: 1; }
.chl-n small { color: var(--ink-3); font-size: 13px; }
.chl-bar { height: 8px; border-radius: 99px; background: #fff; overflow: hidden; }
.chl-bar i { display: block; height: 100%; border-radius: inherit; background: var(--accent); transition: width .6s var(--ease); }
.chl-rows { display: flex; flex-direction: column; gap: 6px; }
.chl-rows div { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; font-size: 13.5px; }
.chl-rows b { font-weight: 500; }
.chl .btn { align-self: flex-start; }
.dm-off { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; padding: 18px; border-top: 1px solid var(--line); color: var(--ink-2); font-size: 14px; text-align: center; }
.bb-rp { border: 0; background: none; padding: 0 2px; color: var(--ink-3); cursor: pointer; opacity: 0; transition: opacity .2s; vertical-align: -2px; }
.bb:hover .bb-rp, .bb-rp:focus-visible { opacity: 1; }
@media (hover: none) { .bb-rp { opacity: .6; } }
.pf-safe { border: 0; background: none; font: inherit; font-size: 13px; color: var(--ink-3); display: inline-flex; align-items: center; gap: 6px; cursor: pointer; margin-top: 4px; }
.pf-safe:hover { color: var(--danger); }
.sf-o { display: flex; align-items: flex-start; gap: 12px; width: 100%; text-align: left; padding: 16px; border-radius: 20px; background: var(--surface); border: 0; font: inherit; color: var(--ink); cursor: pointer; }
.sf-o.col { flex-direction: column; align-items: stretch; cursor: default; gap: 10px; }
.sf-o > span:not(.row) { display: flex; flex-direction: column; gap: 3px; }
.sf-o b { font-weight: 500; }
.sf-o small { color: var(--ink-2); font-size: 13px; line-height: 1.45; }
button.sf-o:hover { background: var(--tile); }

/* ---------- settings (portal) ---------- */
.pt-tabs { flex-wrap: wrap; }
.pt-warn { display: flex; align-items: center; gap: 8px; width: 100%; padding: 12px 16px; border-radius: 16px; background: var(--warn-50); color: var(--ink); border: 0; font: inherit; font-size: 13.5px; cursor: pointer; text-align: left; }
.pt-seg { flex-wrap: wrap; background: var(--surface); }
.pt-sw { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; cursor: pointer; }
.pt-sw > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pt-sw b { font-weight: 400; }
.pt-sw small { color: var(--ink-3); font-size: 13px; }
.pt-sw input { position: absolute; opacity: 0; pointer-events: none; }
.pt-sw i { position: relative; flex-shrink: 0; width: 46px; height: 28px; border-radius: 99px; background: var(--tile-2, var(--tile)); transition: background .25s; }
.pt-sw i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .18); transition: transform .3s var(--ease); }
.pt-sw input:checked + i { background: var(--ink); }
.pt-sw input:checked + i::after { transform: translateX(18px); background: var(--accent); }
.pt-sw input:focus-visible + i { box-shadow: 0 0 0 3px rgba(91, 225, 91, .45); }
.pt-kpi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 900px) { .pt-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.heat.wk { grid-template-columns: none; grid-template-rows: repeat(7, auto); grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.pt-legend { display: flex; align-items: center; justify-content: flex-end; gap: 5px; margin-top: 14px; font-size: 12px; color: var(--ink-3); }
.pt-legend i { width: 13px; height: 13px; border-radius: 3px; background: var(--tile); }
.pt-legend i.l1 { background: #CDF5CD; } .pt-legend i.l2 { background: #8BE88B; } .pt-legend i.l3 { background: #3FCB3F; } .pt-legend i.l4 { background: var(--accent); }
.pt-inv { background: var(--ink); color: #fff; position: relative; overflow: hidden; }
.pt-inv::after { content: ""; position: absolute; right: -120px; top: -120px; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(91, 225, 91, .35), rgba(91, 225, 91, 0) 70%); pointer-events: none; }
.pt-inv > * { position: relative; z-index: 1; }
.pt-inv-k { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: rgba(255, 255, 255, .55); }
.pt-inv-t { font-size: 26px; font-weight: 300; letter-spacing: -0.03em; line-height: 1.25; margin-top: 10px; max-width: 560px; }
.pt-inv-t b { font-weight: 400; color: var(--accent); }
.pt-inv-code { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 26px; padding: 18px 18px 18px 24px; border-radius: 22px; background: rgba(255, 255, 255, .08); }
.pt-inv-code small { display: block; font-size: 12px; color: rgba(255, 255, 255, .55); }
.pt-inv-code b { font-size: 30px; font-weight: 400; letter-spacing: .08em; color: var(--accent); }
.pt-inv-link { margin-top: 10px; font-size: 12.5px; color: rgba(255, 255, 255, .5); }
.pt-steps { list-style: none; counter-reset: st; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pt-steps li { counter-increment: st; display: flex; flex-direction: column; gap: 4px; }
.pt-steps li::before { content: counter(st); width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: var(--ink); display: grid; place-items: center; font-size: 13px; margin-bottom: 6px; }
.pt-steps b { font-weight: 400; }
.pt-steps span { color: rgba(255, 255, 255, .6); font-size: 13px; line-height: 1.45; }
@media (max-width: 760px) { .pt-steps { grid-template-columns: 1fr; } }

/* ---------- rewards: automatic points ---------- */
.rw-auto { margin-top: 24px; border-radius: 28px; background: var(--ink); color: #fff; padding: 26px 28px; display: flex; flex-direction: column; gap: 18px; }
.rw-auto-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.rw-auto-h b { display: block; font-size: 22px; font-weight: 300; letter-spacing: -0.02em; }
.rw-auto-h small { color: rgba(255, 255, 255, .6); font-size: 13px; }
.rw-auto-t { font-size: 13px; color: rgba(255, 255, 255, .6); white-space: nowrap; }
.rw-auto-t b { display: inline; font-size: 28px; color: var(--accent); }
.rw-auto-g { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.rw-auto-g div { border-radius: 18px; background: rgba(255, 255, 255, .07); padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.rw-auto-g span, .rw-auto-ref > span { font-size: 26px; font-weight: 300; letter-spacing: -0.04em; color: var(--accent); }
.rw-auto-g small { color: rgba(255, 255, 255, .75); font-size: 13px; line-height: 1.35; }
.rw-auto-ref { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: center; text-align: left; padding: 14px 18px; border-radius: 18px; border: 0; background: rgba(91, 225, 91, .12); color: #fff; font: inherit; cursor: pointer; transition: background .25s; }
.rw-auto-ref:hover { background: rgba(91, 225, 91, .2); }
.rw-auto-ref small { font-size: 13.5px; color: rgba(255, 255, 255, .8); }
.rw-auto-ref b { color: var(--accent); font-weight: 400; letter-spacing: .06em; }

/* ---------- book QR: scan button + camera window ---------- */
.bl-scan { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; height: 40px; padding: 0 16px; border-radius: 99px; border: 0; background: rgba(255, 255, 255, .1); color: #fff; font: inherit; font-size: 14px; cursor: pointer; transition: background .25s; }
.bl-scan:hover { background: rgba(255, 255, 255, .18); }
.bl-scan .ic { color: var(--accent); }
.sc-bg { position: fixed; inset: 0; z-index: 9000; background: rgba(0, 0, 0, .78); display: grid; place-items: center; padding: 20px; opacity: 0; transition: opacity .3s; }
.sc-bg.in { opacity: 1; }
.sc { position: relative; width: min(520px, 100%); aspect-ratio: 3 / 4; border-radius: 28px; overflow: hidden; background: #000; }
.sc video { width: 100%; height: 100%; object-fit: cover; display: block; }
.sc-frame { position: absolute; left: 50%; top: 44%; width: 62%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 24px; box-shadow: 0 0 0 2px var(--accent), 0 0 0 9999px rgba(0, 0, 0, .35); }
.sc-frame::after { content: ""; position: absolute; left: 8%; right: 8%; height: 2px; top: 10%; background: var(--accent); border-radius: 2px; animation: scLine 2.2s ease-in-out infinite alternate; }
@keyframes scLine { to { top: 88%; } }
@media (prefers-reduced-motion: reduce) { .sc-frame::after { animation: none; top: 50%; } }
.sc-f { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; color: #fff; font-size: 14px; background: linear-gradient(transparent, rgba(0, 0, 0, .7)); }
.pt-t { font-size: 15px; font-weight: 400; color: var(--ink); }
.pt-s { font-size: 13px; color: var(--ink-3); margin-top: 2px; }
/* the lesson side tabs: four short labels on one line */
.lp-side > .seg { display: flex; width: 100%; }
.lp-side > .seg button { flex: 1 1 auto; white-space: nowrap; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; }