/* TalentJR Design System v1 — tokens + base components (see README.md). Light theme only. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Poppins:wght@600;700&family=Noto+Sans+Devanagari:wght@400;600&display=swap');

:root {
  --tj-brand-50: #FFF4EC;
  --tj-brand-100: #FFE4D1;
  --tj-brand-500: #F26A1B;   /* logo orange: brand surfaces only, never behind small white text */
  --tj-action: #C2410C;      /* buttons, links (white text 4.78:1) */
  --tj-action-hover: #9A3412;
  --tj-ink: #1F2A44;
  --tj-ink-muted: #5B6478;
  --tj-line: #E8E2DC;
  --tj-surface: #FFF8F3;
  --tj-card: #FFFFFF;
  --tj-accent: #6C63FF;
  --tj-accent-text: #5149E0;
  --tj-success: #15803D;
  --tj-warning: #B45309;
  --tj-danger: #B91C1C;
  --tj-info: #1D4ED8;
  --tj-footer-text: #C9CFDB;

  --tj-font-body: 'Inter', 'Noto Sans Devanagari', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --tj-font-heading: 'Poppins', 'Noto Sans Devanagari', 'Inter', system-ui, sans-serif;

  --tj-radius-sm: 8px;
  --tj-radius-btn: 10px;
  --tj-radius-card: 14px;
  --tj-shadow-card: 0 1px 2px rgba(31, 42, 68, .06), 0 4px 16px rgba(31, 42, 68, .06);
  --tj-header-h: 64px;
}

/* Base components — prefixed so they never collide with existing app CSS */
.tj-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px;
  padding: 0 18px; border-radius: var(--tj-radius-btn); font: 600 15px/1 var(--tj-font-body);
  text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: background .15s, border-color .15s; }
.tj-btn:focus-visible { outline: 3px solid var(--tj-action); outline-offset: 2px; }
.tj-btn-primary { background: var(--tj-action); color: #fff; }
.tj-btn-primary:hover { background: var(--tj-action-hover); color: #fff; }
.tj-btn-secondary { background: var(--tj-card); color: var(--tj-ink); border-color: var(--tj-line); }
.tj-btn-secondary:hover { background: var(--tj-brand-50); color: var(--tj-ink); }
.tj-btn-google { background: #fff; color: #1f1f1f; border-color: #DADCE0; }
.tj-btn-google:hover { box-shadow: 0 1px 6px rgba(0, 0, 0, .12); }
.tj-card { background: var(--tj-card); border: 1px solid var(--tj-line); border-radius: var(--tj-radius-card);
  box-shadow: var(--tj-shadow-card); }
.tj-input { width: 100%; min-height: 44px; padding: 0 12px; border: 1px solid var(--tj-line);
  border-radius: var(--tj-radius-sm); font: 400 16px var(--tj-font-body); color: var(--tj-ink); background: #fff; }
.tj-input:focus { outline: none; border-color: var(--tj-action); box-shadow: 0 0 0 3px rgba(194, 65, 12, .18); }
.tj-badge { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--tj-brand-50);
  color: var(--tj-action-hover); font: 600 12px/1.6 var(--tj-font-body); }
.tj-badge-ai { background: #EEEDFF; color: var(--tj-accent-text); }

/* ===================== talentjr.in (Bootstrap 3) overrides =====================
   Loaded LAST in every header so the legacy pages adopt TalentJR Design System v1
   without template rewrites. Inline colours are overridden with !important on purpose. */

body { font-family: var(--tj-font-body); color: var(--tj-ink); background: var(--tj-surface); }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3 { font-family: var(--tj-font-heading); color: var(--tj-ink); }
a { color: var(--tj-action); }
a:hover, a:focus { color: var(--tj-action-hover); }
a:focus-visible, button:focus-visible, .btn:focus-visible, input:focus-visible { outline: 3px solid var(--tj-action); outline-offset: 2px; }

/* ---- Header: white bar, logo tile, ink text ---- */
.navbar-default { background: var(--tj-card) !important; border: 0; border-bottom: 1px solid var(--tj-line) !important;
  min-height: var(--tj-header-h); box-shadow: none; }
.navbar-default .navbar-brand { padding: 14px 15px; height: var(--tj-header-h); }
.navbar-default .navbar-brand img.tj-logo { height: 34px; width: auto; border-radius: 6px; display: block; }
.navbar-default .navbar-nav > li > a, .navbar-default .navbar-nav > li > a span { color: var(--tj-ink) !important; font-family: var(--tj-font-body); }
.navbar-default .navbar-nav > li > a i { color: var(--tj-ink) !important; } /* keep the FontAwesome font on icons */
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:hover span { color: var(--tj-action) !important; }
.navbar-default .navbar-toggle, .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus,
.navbar-toggle1, .navbar-toggle1:hover, .navbar-toggle1:focus { background: var(--tj-card) !important; border: 1px solid var(--tj-line) !important; border-radius: var(--tj-radius-sm); }
.navbar-toggle1 .icon-bar { background-color: var(--tj-ink) !important; }
.navbar-default .navbar-toggle .icon-bar { background-color: var(--tj-ink); }

/* second row (product nav): one colour, uniform badges */
.nav_bottom { background: var(--tj-card) !important; border-bottom: 1px solid var(--tj-line); }
.nav_bottom .nav_1 > li > a, .nav_bottom .nav_1 > li > a[style] { color: var(--tj-ink) !important; font-weight: 600 !important;
  font-family: var(--tj-font-body); }
.nav_bottom .nav_1 > li > a:hover, .nav_bottom .nav_1 > li > a[style]:hover { color: var(--tj-action) !important; }
.nav_bottom .nav_1 > li > a i { color: var(--tj-brand-500) !important; }

/* pill badges written inline across nav, footer and cards (MAIN / BETA / NEW / UPDATED ...) */
span[style*="border-radius:20px"], span[style*="border-radius: 20px"],
span[style*="border-radius:10px"], span[style*="border-radius: 10px"] {
  background: var(--tj-brand-50) !important; color: var(--tj-action-hover) !important;
  font-family: var(--tj-font-body) !important; font-weight: 600 !important; letter-spacing: .02em; }

/* ---- Buttons: one action colour for every call-to-action ---- */
.btn { border-radius: var(--tj-radius-btn); font-family: var(--tj-font-body); font-weight: 600; }
.btn-primary, .btn-success, .btn-info, .btn-warning, .btn-default.btn-cta,
a.btn[style*="background"], button.btn[style*="background"] {
  background: var(--tj-action) !important; border-color: var(--tj-action) !important; color: #fff !important; }
.btn-primary:hover, .btn-success:hover, .btn-info:hover, .btn-warning:hover,
a.btn[style*="background"]:hover, button.btn[style*="background"]:hover {
  background: var(--tj-action-hover) !important; border-color: var(--tj-action-hover) !important; color: #fff !important; }
.btn-outline-primary { color: var(--tj-action) !important; border-color: var(--tj-action) !important; background: #fff !important; }
.lt-blue-btn, .lt-grey-btn, .membership-btn1 { background: var(--tj-action) !important; color: #fff !important;
  border-radius: var(--tj-radius-btn) !important; }

/* ---- Cards & highlighted cards ---- */
.card, .panel { border-color: var(--tj-line) !important; border-radius: var(--tj-radius-card) !important; }
[style*="border: 2px solid #0EA5A5"], [style*="border:2px solid #0EA5A5"] {
  border-color: var(--tj-brand-500) !important; background: var(--tj-card) !important;
  box-shadow: 0 6px 18px rgba(242, 106, 27, .18) !important; }
.label-primary, .label-success, .label-info { background-color: var(--tj-action); }

/* feature icons written with inline colours (home cards) -> brand orange */
.fa-2x[style*="color"] { color: var(--tj-brand-500) !important; }

/* ---- Forms ---- */
.form-control { border-color: var(--tj-line); border-radius: var(--tj-radius-sm); min-height: 40px; color: var(--tj-ink); }
.form-control:focus { border-color: var(--tj-action); box-shadow: 0 0 0 3px rgba(194, 65, 12, .18); }

/* ---- Solution pages (views/solution/questions_structured.php) ---- */
body .question-block h1, body .question-block h2, body .question-block h3 { color: var(--tj-ink); border-color: var(--tj-line); }
body .question-block { border-left-color: var(--tj-brand-500); }
body .breadcrumb a { color: var(--tj-action); }
body .breadcrumb-wrapper { background: var(--tj-brand-50); }

/* ---- Footer: ink background ---- */
.footer { background: var(--tj-ink) !important; color: var(--tj-footer-text); }
.footer h3 { color: #fff !important; font-family: var(--tj-font-heading); }
.footer p, .footer li, .footer a, .footer a[style], .footer a span, .footer i { color: var(--tj-footer-text) !important; }
.footer a:hover, .footer a[style]:hover { color: #fff !important; }
.footer span[style] { background: rgba(255, 255, 255, .12) !important; color: #fff !important; }

/* ecosystem strip (views/common/tj_ecosystem.php) */
.tj-eco { background: #172036; color: var(--tj-footer-text); font: 400 14px/1.6 var(--tj-font-body); padding: 20px 0; }
.tj-eco .tj-eco-inner { max-width: 1170px; margin: 0 auto; padding: 0 15px; display: flex; flex-wrap: wrap;
  gap: 8px 24px; align-items: center; justify-content: space-between; }
.tj-eco strong { color: #fff; font-family: var(--tj-font-heading); font-weight: 600; }
.tj-eco nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.tj-eco a { color: var(--tj-footer-text); text-decoration: none; }
.tj-eco a:hover { color: #fff; text-decoration: underline; }
.tj-eco .tj-eco-legal { width: 100%; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px;
  border-top: 1px solid rgba(255, 255, 255, .12); padding-top: 10px; margin-top: 6px; }

/* ---- Breadcrumb (SEO.md §4): directly under the header, above the H1 ---- */
.tj-breadcrumb { background: var(--tj-card); border-bottom: 1px solid var(--tj-line); font: 400 14px/1.5 var(--tj-font-body); }
.tj-breadcrumb .tj-breadcrumb-list { max-width: 1170px; margin: 0 auto; padding: 8px 15px; list-style: none;
  display: flex; flex-wrap: wrap; align-items: center; row-gap: 2px; }
.tj-breadcrumb li { display: inline-flex; align-items: center; min-width: 0; overflow-wrap: anywhere; }
.tj-breadcrumb a { color: var(--tj-action); text-decoration: none; display: inline-block; padding: 2px 0; }
.tj-breadcrumb a:hover { color: var(--tj-action-hover); text-decoration: underline; }
.tj-breadcrumb [aria-current="page"] { color: var(--tj-ink); font-weight: 600; }
.tj-breadcrumb .tj-bc-sep { color: var(--tj-ink-muted); margin: 0 8px; }

/* ---- "Keep learning" block (SEO.md §5) ---- */
.tj-keep { padding: 8px 15px 32px; }
.tj-keep .tj-keep-inner { max-width: 1140px; margin: 0 auto; padding: 20px 24px; }
.tj-keep .tj-keep-h { margin: 0 0 12px; font: 600 20px/1.2 var(--tj-font-heading); color: var(--tj-ink); }
.tj-keep .tj-keep-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.tj-keep .tj-keep-list a { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 44px; height: 100%;
  padding: 10px 14px; border: 1px solid var(--tj-line); border-radius: var(--tj-radius-btn); background: var(--tj-card);
  text-decoration: none; transition: background .15s, border-color .15s; box-sizing: border-box; }
.tj-keep .tj-keep-list a:hover { background: var(--tj-brand-50); border-color: var(--tj-brand-100); }
.tj-keep .tj-keep-label { color: var(--tj-action); font: 600 15px/1.35 var(--tj-font-body); }
.tj-keep .tj-keep-note { color: var(--tj-ink-muted); font: 400 13px/1.4 var(--tj-font-body); }

/* ---- Hub link lists (listing pages / home) ---- */
.tj-hub { max-width: 1140px; margin: 0 auto 24px; padding: 0 15px; }
.tj-hub h2 { font: 600 20px/1.2 var(--tj-font-heading); margin: 0 0 10px; }
.tj-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tj-chips a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px;
  background: var(--tj-brand-50); color: var(--tj-action-hover); font: 600 14px/1 var(--tj-font-body); text-decoration: none; }
.tj-chips a:hover, .tj-chips a[aria-current="page"] { background: var(--tj-action); color: #fff; }

/* ---- 404 ---- */
.tj-404 { padding: 48px 15px 64px; }
.tj-404 .tj-404-card { max-width: 640px; margin: 0 auto; padding: 32px 24px; text-align: center; }
.tj-404 .tj-404-code { font: 700 56px/1 var(--tj-font-heading); color: var(--tj-brand-500); margin: 0 0 8px; }
.tj-404 h1 { margin: 0 0 8px; font-size: 30px; }
.tj-404 .tj-404-lead { color: var(--tj-ink-muted); margin-bottom: 16px; }
.tj-404 .tj-404-links { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px; }
.tj-404 .tj-404-links a { display: inline-block; padding: 10px 4px; }

/* ---- Solution chapter: previous / next ---- */
.tj-prevnext { max-width: 1140px; margin: 16px auto; padding: 0 15px; display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; }
.tj-prevnext a { flex: 1 1 260px; display: flex; flex-direction: column; gap: 2px; min-height: 44px; padding: 10px 14px;
  border: 1px solid var(--tj-line); border-radius: var(--tj-radius-btn); background: var(--tj-card); text-decoration: none; }
.tj-prevnext a:hover { background: var(--tj-brand-50); }
.tj-prevnext .tj-keep-label { color: var(--tj-action); font: 600 15px/1.35 var(--tj-font-body); }
.tj-prevnext .tj-keep-note { color: var(--tj-ink-muted); font: 400 13px/1.4 var(--tj-font-body); }

/* ---- Hub pages (board solutions: main / class / subject lists) ---- */
.tj-hub { padding-top: 24px; padding-bottom: 8px; }
.tj-hub-hero { margin: 0 0 24px; }
.tj-hub-hero h1 { font: 700 30px/1.2 var(--tj-font-heading); color: var(--tj-ink); margin: 10px 0 8px; }
@media (min-width: 768px) { .tj-hub-hero h1 { font-size: 36px; } }
.tj-hub-lead { font: 400 17px/1.6 var(--tj-font-body); color: var(--tj-ink-muted); max-width: 70ch; margin: 0 0 16px; }
.tj-hub-jump { display: flex; flex-wrap: wrap; gap: 8px; }
.tj-hub-jump a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px;
  background: var(--tj-card); border: 1px solid var(--tj-line); color: var(--tj-ink); font: 600 14px var(--tj-font-body);
  text-decoration: none; }
.tj-hub-jump a:hover { border-color: var(--tj-action); color: var(--tj-action); background: var(--tj-brand-50); text-decoration: none; }
.tj-hub-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 992px) { .tj-hub-grid { grid-template-columns: 1fr 1fr; } }
.tj-hub-card { padding: 20px; display: flex; flex-direction: column; scroll-margin-top: 80px; }
.tj-hub-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.tj-hub-card-head h2 { margin: 0; font: 600 22px/1.2 var(--tj-font-heading); }
.tj-hub-card-head h2 a { color: var(--tj-ink); text-decoration: none; }
.tj-hub-card-head h2 a:hover { color: var(--tj-action); }
.tj-hub-count { font: 500 13px var(--tj-font-body); color: var(--tj-ink-muted); white-space: nowrap; }
.tj-hub-chips { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tj-hub-chips a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border-radius: 999px;
  background: var(--tj-brand-50); color: var(--tj-action-hover); font: 600 14px/1.2 var(--tj-font-body); text-decoration: none; }
.tj-hub-chips a:hover { background: var(--tj-brand-100); color: var(--tj-action-hover); text-decoration: none; }
.tj-hub-more { margin-top: auto; align-self: flex-start; color: var(--tj-action); font: 600 14px var(--tj-font-body); }
.tj-hub-why { margin: 32px 0 8px; }
.tj-hub-why h2 { font: 600 22px/1.2 var(--tj-font-heading); color: var(--tj-ink); margin: 0 0 14px; }
.tj-hub-why ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 768px) { .tj-hub-why ul { grid-template-columns: repeat(3, 1fr); } }
.tj-hub-why li { background: var(--tj-card); border: 1px solid var(--tj-line); border-radius: var(--tj-radius-card); padding: 16px; }
.tj-hub-why strong { display: block; font: 600 16px var(--tj-font-heading); color: var(--tj-ink); margin-bottom: 4px; }
.tj-hub-why span { font: 400 14px/1.5 var(--tj-font-body); color: var(--tj-ink-muted); }
/* chapter / item lists inside hub cards */
.tj-hub-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tj-hub-list a { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px 14px; border: 1px solid var(--tj-line);
  border-radius: var(--tj-radius-sm); background: var(--tj-card); color: var(--tj-ink); font: 500 15px/1.4 var(--tj-font-body); text-decoration: none; }
.tj-hub-list a:hover { border-color: var(--tj-action); color: var(--tj-action); text-decoration: none; }
.tj-hub-list .tj-hub-num { flex: none; min-width: 28px; height: 28px; display: inline-grid; place-items: center; border-radius: 999px;
  background: var(--tj-brand-50); color: var(--tj-action-hover); font: 600 13px var(--tj-font-body); }
.tj-hub-chno { color: var(--tj-action); }
.tj-hub-wide { margin-top: 16px; }
.tj-hub-list a { justify-content: space-between; }
.tj-hub-list .tj-hub-arrow { color: var(--tj-ink-muted); }
.tj-hub-list a:hover .tj-hub-arrow { color: var(--tj-action); }
.tj-hub-list .tj-hub-num + * , .tj-hub-list a .tj-hub-num { margin-right: 2px; }
.tj-hub-list-2col a { justify-content: flex-start; }
@media (min-width: 768px) { .tj-hub-list-2col { grid-template-columns: 1fr 1fr; } }
.tj-hub-tiles { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.tj-hub-tiles a { display: flex; flex-direction: column; gap: 4px; padding: 18px; min-height: 92px; text-decoration: none; }
.tj-hub-tiles a:hover { border-color: var(--tj-action) !important; text-decoration: none; }
.tj-hub-tiles strong { font: 600 18px/1.25 var(--tj-font-heading); color: var(--tj-ink); }
.tj-hub-tiles span { font: 500 14px var(--tj-font-body); color: var(--tj-action); }

/* ---- Chapter (solution) pages: content inside the site container ---- */
.tj-chapter { padding-top: 20px; padding-bottom: 8px; }
body .tj-chapter .action-buttons { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; background: transparent;
  padding: 0; margin: 0 0 14px; border: 0; }
body .tj-chapter .action-buttons button { background: var(--tj-card); color: var(--tj-ink); border: 1px solid var(--tj-line);
  border-radius: var(--tj-radius-btn); min-height: 40px; padding: 0 14px; font: 600 14px var(--tj-font-body); }
body .tj-chapter .action-buttons button:hover { background: var(--tj-brand-50); border-color: var(--tj-action); color: var(--tj-ink); }
body .tj-chapter .question-block { background: var(--tj-card); border: 1px solid var(--tj-line); border-left: 1px solid var(--tj-line);
  border-radius: var(--tj-radius-card); box-shadow: var(--tj-shadow-card); padding: 24px; margin: 0 0 20px; max-width: none;
  font: 400 17px/1.7 var(--tj-font-body); color: var(--tj-ink); }
@media (min-width: 768px) { body .tj-chapter .question-block { padding: 32px 40px; } }
body .tj-chapter .question-block h1 { font: 700 30px/1.25 var(--tj-font-heading); }
body .tj-chapter .question-block h2 { font: 600 22px/1.3 var(--tj-font-heading); }
body .tj-chapter .question-block h3 { font: 600 19px/1.35 var(--tj-font-heading); }
/* scraped question emphasis (inline blue) -> bold ink question text */
body .tj-chapter .question-block [style*="#0000ff"], body .tj-chapter .question-block [style*="color: blue"],
body .tj-chapter .question-block [style*="color:blue"] { color: var(--tj-ink) !important; font-weight: 600; }
/* source-site promo banner embedded between answers: not content */
body .tj-chapter .question-block img[src*="Maharashtra-Board-Solutions.png"],
body .tj-chapter .question-block img[data-src*="Maharashtra-Board-Solutions.png"] { display: none !important; }
body .tj-chapter .question-block img { border-radius: var(--tj-radius-sm); }
.tj-chapter-h1 { font: 700 30px/1.25 var(--tj-font-heading); color: var(--tj-ink); margin: 0 0 14px; }
.tj-chapter .tj-prevnext { margin: 0 0 8px; }
body { background: var(--tj-surface) !important; } /* legacy per-view backgrounds (grey) -> brand surface */
@media (max-width: 767px) {
  body .tj-chapter .action-buttons { justify-content: flex-start; gap: 6px; }
  body .tj-chapter .action-buttons button { min-height: 36px; padding: 0 10px; font-size: 13px; }
  body .tj-chapter .question-block h1, .tj-chapter-h1 { font-size: 24px; }
  body .tj-chapter .question-block h2 { font-size: 20px; }
  body .tj-chapter .question-block { padding: 18px; font-size: 16px; }
}

/* =====================================================================
   Shared page components (legacy templates sweep 2: games, flashcards,
   worksheets, schools, CBSE, blog, static pages). Use inside .container.tj-hub
   with a .tj-hub-hero (badge + H1 + .tj-hub-lead).
   ===================================================================== */
/* filter bar: design-system selects / inputs in one row (no grey sidebars) */
.tj-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin: 0 0 20px; padding: 16px; }
.tj-filters .tj-field { display: flex; flex-direction: column; gap: 4px; flex: 1 1 180px; min-width: 0; }
.tj-filters label, .tj-label { font: 600 13px var(--tj-font-body); color: var(--tj-ink-muted); margin: 0; }
.tj-select, select.tj-input { width: 100%; min-height: 44px; padding: 0 36px 0 12px; border: 1px solid var(--tj-line);
  border-radius: var(--tj-radius-sm); background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235B6478' stroke-width='1.6' fill='none'/%3E%3C/svg%3E") no-repeat right 12px center;
  -webkit-appearance: none; appearance: none; font: 400 15px var(--tj-font-body); color: var(--tj-ink); }
.tj-select:focus { outline: none; border-color: var(--tj-action); box-shadow: 0 0 0 3px rgba(194, 65, 12, .18); }
.tj-filters .tj-btn { flex: none; }
/* chip row used as a filter (links): reuse .tj-hub-jump look, current item filled */
.tj-chiprow { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; padding: 0; list-style: none; }
.tj-chiprow a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px;
  background: var(--tj-card); border: 1px solid var(--tj-line); color: var(--tj-ink); font: 600 14px var(--tj-font-body); text-decoration: none; }
.tj-chiprow a:hover { border-color: var(--tj-action); color: var(--tj-action); background: var(--tj-brand-50); text-decoration: none; }
.tj-chiprow a[aria-current="page"], .tj-chiprow a.is-active { background: var(--tj-action); border-color: var(--tj-action); color: #fff; }

/* media cards: image + title + meta + one primary action */
.tj-media-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.tj-media-grid > li { display: flex; min-width: 0; }
.tj-media-card { display: flex; flex-direction: column; gap: 8px; width: 100%; padding: 14px; min-width: 0; }
.tj-media-thumb { display: block; aspect-ratio: 4 / 3; width: 100%; border-radius: var(--tj-radius-sm); overflow: hidden; background: var(--tj-brand-50); }
.tj-media-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: var(--tj-radius-sm); }
.tj-media-thumb.is-contain img { object-fit: contain; background: #fff; }
.tj-media-card h2, .tj-media-card h3 { margin: 4px 0 0; font: 600 17px/1.3 var(--tj-font-heading); color: var(--tj-ink); }
.tj-media-card h2 a, .tj-media-card h3 a { color: var(--tj-ink); text-decoration: none; }
.tj-media-card h2 a:hover, .tj-media-card h3 a:hover { color: var(--tj-action); }
.tj-media-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font: 400 13px/1.4 var(--tj-font-body); color: var(--tj-ink-muted); margin: 0; }
.tj-media-desc { font: 400 14px/1.5 var(--tj-font-body); color: var(--tj-ink-muted); margin: 0;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tj-media-actions { margin-top: auto; padding-top: 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.tj-media-actions .tj-btn { flex: 1 1 auto; }
.tj-link { color: var(--tj-action); font: 600 14px var(--tj-font-body); text-decoration: none; }
.tj-link:hover { color: var(--tj-action-hover); text-decoration: underline; }
/* placeholder thumbnail: neutral brand-50 tile with an icon / label instead of a logo */
.tj-thumb-ph { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 100%;
  min-height: 100%; background: var(--tj-brand-50); color: var(--tj-action-hover); text-align: center; padding: 12px;
  font: 600 15px/1.3 var(--tj-font-heading); box-sizing: border-box; }
.tj-thumb-ph .fa, .tj-thumb-ph svg { font-size: 34px; color: var(--tj-brand-500); }

/* detail pages: main column + aside */
.tj-layout { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 992px) { .tj-layout { grid-template-columns: minmax(0, 1fr) 320px; } .tj-layout.is-left { grid-template-columns: 300px minmax(0, 1fr); } }
.tj-panel { padding: 20px; min-width: 0; }
@media (min-width: 768px) { .tj-panel { padding: 24px 28px; } }
.tj-panel > h2, .tj-aside h2 { font: 600 20px/1.3 var(--tj-font-heading); color: var(--tj-ink); margin: 0 0 12px; }
.tj-aside { padding: 18px; }
.tj-aside + .tj-aside { margin-top: 16px; }
.tj-aside .tj-hub-list a { justify-content: flex-start; font-size: 14px; }
.tj-aside .tj-hub-list img { width: 40px; height: 40px; border-radius: var(--tj-radius-sm); object-fit: cover; flex: none; }
.tj-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; }
.tj-detail-media { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 768px) { .tj-detail-media { grid-template-columns: 280px minmax(0, 1fr); } }
.tj-detail-media > img, .tj-detail-media .tj-media-thumb { border-radius: var(--tj-radius-sm); width: 100%; height: auto; }
.tj-facts { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tj-facts li { background: var(--tj-brand-50); color: var(--tj-action-hover); border-radius: 999px; padding: 4px 12px; font: 600 13px/1.5 var(--tj-font-body); }
.tj-dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; margin: 0; font: 400 15px/1.5 var(--tj-font-body); }
.tj-dl dt { color: var(--tj-ink-muted); font-weight: 500; }
.tj-dl dd { margin: 0; color: var(--tj-ink); overflow-wrap: anywhere; }

/* long-form text (static/legal pages, news, school descriptions) */
.tj-prose { font: 400 16px/1.7 var(--tj-font-body); color: var(--tj-ink); overflow-wrap: break-word; }
.tj-prose > :first-child { margin-top: 0; }
.tj-prose h2 { font: 600 22px/1.3 var(--tj-font-heading); margin: 28px 0 10px; color: var(--tj-ink); }
.tj-prose h3 { font: 600 18px/1.35 var(--tj-font-heading); margin: 22px 0 8px; color: var(--tj-ink); }
.tj-prose p, .tj-prose ul, .tj-prose ol { margin: 0 0 14px; max-width: 75ch; }
.tj-prose img { max-width: 100%; height: auto; border-radius: var(--tj-radius-sm); }
.tj-prose table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; }
.tj-prose td, .tj-prose th { border: 1px solid var(--tj-line); padding: 8px 10px; }

/* pagination (Bootstrap .pagination inside design-system pages) */
.tj-hub .pagination, .tj-pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 24px 0 8px; padding: 0; list-style: none; border-radius: 0; }
.tj-hub .pagination > li > a, .tj-hub .pagination > li > span, .tj-pager a, .tj-pager span {
  float: none; display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; padding: 0 12px; margin: 0;
  border: 1px solid var(--tj-line) !important; border-radius: var(--tj-radius-sm) !important; background: var(--tj-card) !important;
  color: var(--tj-ink) !important; font: 600 14px var(--tj-font-body); text-decoration: none; }
.tj-hub .pagination > li > a:hover, .tj-pager a:hover { border-color: var(--tj-action) !important; color: var(--tj-action) !important; background: var(--tj-brand-50) !important; }
.tj-hub .pagination > .active > a, .tj-hub .pagination > .active > span, .tj-pager .is-active, .tj-pager [aria-current="page"] {
  background: var(--tj-action) !important; border-color: var(--tj-action) !important; color: #fff !important; }
.tj-hub .pagination > .disabled > a, .tj-hub .pagination > .disabled > span { color: var(--tj-ink-muted) !important; opacity: .6; }
/* legacy ShowPagination markup marks the current page with li.current */
.tj-hub .pagination > .current > a, .tj-hub .pagination > .current > span { background: var(--tj-action) !important;
  border-color: var(--tj-action) !important; color: #fff !important; }
.tj-hub .pagination:empty { display: none; }
/* one content edge: breadcrumb, hub/chapter content and the Keep learning card all start where the logo does */
.tj-breadcrumb .tj-breadcrumb-list { max-width: 1140px; }
.tj-keep .tj-keep-inner { max-width: 1110px; }
@media (max-width: 767px) { .tj-breadcrumb .tj-breadcrumb-list, .tj-keep, .tj-prevnext { padding-left: 16px; padding-right: 16px; } }
.tj-empty { padding: 32px 20px; text-align: center; color: var(--tj-ink-muted); }
.tj-empty strong { display: block; font: 600 18px var(--tj-font-heading); color: var(--tj-ink); margin-bottom: 6px; }
@media (max-width: 767px) {
  .tj-hub { padding-left: 16px; padding-right: 16px; }
  .tj-media-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
  .tj-media-card { padding: 10px; }
  .tj-media-card h2, .tj-media-card h3 { font-size: 15px; }
  .tj-filters { padding: 12px; }
}
/* ==== sweep2:A games (start) ==== */
/* games, puzzles, scramble, alphabet (views/listing/{games,puzzle,scramble,alphabet}.php, views/profile/{games,play,*_detail}.php) */
.tj-games .tj-chiprow { margin-bottom: 24px; }
.tj-games .tj-media-thumb.is-contain, .tj-games a.tj-media-thumb { background: var(--tj-card); border: 1px solid var(--tj-line); }
.tj-games .tj-media-thumb img { object-fit: contain; padding: 8px; box-sizing: border-box; }
.tj-games .tj-media-actions .tj-btn { flex: 0 1 auto; }
.tj-games .tj-thumb-ph { font-size: 14px; }
/* puzzle / scramble / alphabet tiles: icon + topic badge, title, one primary action */
.tj-game-tiles .tj-media-card { gap: 10px; padding: 16px; }
.tj-game-icon { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: var(--tj-radius-sm);
  background: var(--tj-brand-50); color: var(--tj-brand-500); font-size: 15px; margin-right: 2px; }
.tj-game-tiles .tj-media-card h2 { margin: 0; }
.tj-games-benefits { margin: 32px 0 8px; }
.tj-games-benefits h2 { font: 600 20px/1.2 var(--tj-font-heading); margin: 0 0 12px; }
.tj-games-benefits .tj-facts li::before { content: "✓ "; }
/* game detail */
.tj-game-h2 { font: 600 22px/1.3 var(--tj-font-heading); color: var(--tj-ink); margin: 0 0 6px; }
.tj-game-desc { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--tj-line); }
.tj-games .tj-detail-media .tj-media-thumb { aspect-ratio: 1 / 1; }
.tj-games .tj-aside .tj-hub-list .tj-hub-num { width: 40px; height: 40px; border-radius: var(--tj-radius-sm); }
.tj-games .tj-aside .tj-hub-more { display: inline-block; margin-top: 14px; }
/* play pages: light hero + game in a rounded card */
.tj-play-hero { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; }
.tj-play-hero > div { min-width: 0; flex: 1 1 420px; }
.tj-play-hero .tj-hub-lead { margin-bottom: 0; }
.tj-play-frame { padding: 8px; overflow: hidden; }
.tj-play-frame .iframe-container { position: relative; padding-top: 56.25%; border-radius: var(--tj-radius-sm); overflow: hidden; background: var(--tj-ink); }
.tj-play-frame .iframe-container iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.tj-edugame iframe { display: block; width: 100%; height: 780px; border: 0; border-radius: var(--tj-radius-sm); }
@media (max-width: 767px) {
  .tj-play-frame .iframe-container { padding-top: 0; height: 70vh; min-height: 420px; }
  .tj-play-hero .tj-btn { width: 100%; }
  .tj-edugame { padding: 0; }
  .tj-game-tiles { grid-template-columns: 1fr 1fr; }
  .tj-game-tiles .tj-media-card { padding: 12px; gap: 8px; }
  .tj-game-tiles .tj-media-card h2 { font-size: 15px; }
  .tj-game-tiles .tj-btn { min-height: 40px; font-size: 14px; padding: 0 10px; }
  .tj-game-tiles .tj-media-meta { gap: 4px; }
  .tj-games .tj-media-actions .tj-btn { flex: 1 1 100%; }
}
/* ==== sweep2:A games (end) ==== */
/* ==== sweep2:B flashcards-worksheets-schools (start) ==== */
/* flashcard topic tiles (views/flashcards/listing.php) */
.tj-fc-tile { text-decoration: none; color: var(--tj-ink); transition: border-color .15s; }
.tj-fc-tile:hover, .tj-fc-tile:focus { border-color: var(--tj-action); text-decoration: none; color: var(--tj-ink); }
.tj-fc-tile:hover h2 { color: var(--tj-action); }
.tj-fc-go { margin-top: auto; color: var(--tj-action); font: 600 14px var(--tj-font-body); }
/* flashcard play page (views/flashcards/flashcard.php) — ids/classes used by the page JS kept */
.tj-fc-play .d-none { display: none !important; }
.tj-fc-stage { max-width: 560px; margin: 0 auto 28px; }
.tj-fc-play .flashcard-box { overflow: hidden; transition: opacity .3s ease; }
.tj-fc-play .flashcard-box.fade-out { opacity: .1; }
.tj-fc-play .flashcard-box.fade-in { opacity: 1; }
.tj-fc-play #cardImage { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; background: var(--tj-brand-50);
  border-radius: 0; }
.tj-fc-body { padding: 20px 24px 22px; text-align: center; }
.tj-fc-play .card-title { margin: 0 0 8px; font: 600 20px/1.35 var(--tj-font-heading); color: var(--tj-ink); }
.tj-fc-play .card-text { margin: 0 0 12px; font: 400 16px/1.6 var(--tj-font-body); color: var(--tj-ink-muted); }
.tj-fc-play #cardAudio { display: block; width: 100%; max-width: 360px; height: 40px; margin: 4px auto 0; }
.tj-fc-progress { display: flex; justify-content: center; align-items: center; gap: 8px; margin: 12px 0 0;
  font: 500 14px var(--tj-font-body); color: var(--tj-ink-muted); }
.tj-fc-play .tj-badge#seenStatus { background: #E8F5EC; color: var(--tj-success); }
.tj-fc-nav { display: flex; gap: 12px; margin-top: 14px; }
.tj-fc-nav .tj-btn { flex: 1 1 0; }
.tj-fc-nav .tj-btn[disabled] { opacity: .5; cursor: not-allowed; }
.tj-fc-list { margin: 0; padding-left: 22px; display: grid; gap: 12px; font: 400 15px/1.55 var(--tj-font-body); color: var(--tj-ink); }
.tj-fc-list li::marker { color: var(--tj-action); font-weight: 600; }
.tj-fc-list strong { display: block; font-weight: 600; }
.tj-fc-list span { color: var(--tj-ink-muted); }
.tj-fc-play .tj-panel { margin-bottom: 16px; }
/* worksheets (views/listing/worksheet.php, views/profile/worksheet.php) */
.tj-ws .tj-hub-hero .tj-chiprow { margin: 0 0 10px; }
.tj-ws .tj-hub-hero nav:last-of-type .tj-chiprow { margin-bottom: 0; }
.tj-ws-thumb { aspect-ratio: 3 / 4; border: 1px solid var(--tj-line); background: #fff; }
.tj-ws-thumb img { padding: 6px; }
.tj-ws .tj-media-meta .tj-badge { white-space: nowrap; }
.tj-ws-benefits { margin: 24px 0 8px; }
.tj-ws-sheet { display: block; width: 100%; max-width: 720px; height: auto; margin: 0 auto; border: 1px solid var(--tj-line);
  border-radius: var(--tj-radius-sm); }
.tj-ws-detail .tj-hub-list span { min-width: 0; }
.tj-ws-detail .tj-hub-more { display: inline-block; margin-top: 12px; }
@media print { .tj-ws-detail .tj-aside, .tj-ws-detail .tj-actions, .tj-ws-detail .tj-hub-hero .tj-badge { display: none; } }
@media (max-width: 767px) {
  .tj-ws .tj-media-actions .tj-btn { padding: 0 10px; font-size: 14px; white-space: nowrap; }
}
.tj-layout.is-single { grid-template-columns: minmax(0, 1fr); }
/* schools (views/listing/school.php, views/profile/school.php) */
.tj-school-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 992px) { .tj-school-list { grid-template-columns: 1fr 1fr; } }
.tj-school-card { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; padding: 16px; height: 100%; }
.tj-school-thumb { aspect-ratio: 1 / 1; }
.tj-school-thumb .tj-thumb-ph .fa { font-size: 36px; }
.tj-school-body { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.tj-school-body h2 { margin: 0; font: 600 18px/1.3 var(--tj-font-heading); }
.tj-school-body h2 a { color: var(--tj-ink); text-decoration: none; }
.tj-school-body h2 a:hover { color: var(--tj-action); }
.tj-school-body .tj-dl { font-size: 14px; gap: 2px 12px; }
.tj-school-body .tj-media-actions { padding-top: 4px; }
.tj-school-body .tj-media-actions .tj-btn { flex: 0 0 auto; }
.tj-school-list > li { display: flex; }
.tj-school-list > li > .tj-school-card { width: 100%; }
@media (max-width: 575px) {
  .tj-school-card { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 16px; }
  .tj-school-thumb { display: none; }
  .tj-school-body .tj-dl { font-size: 14px; }
  .tj-school-body .tj-media-actions .tj-btn { flex: 1 1 auto; }
}
.tj-school-detail .tj-prose p { max-width: 80ch; }
.tj-school-main { display: grid; gap: 16px; min-width: 0; }
.tj-school-photo { display: block; width: 100%; max-height: 360px; object-fit: cover; border-radius: var(--tj-radius-sm); margin-bottom: 16px; }
.tj-school-dl { margin-bottom: 14px; }
.tj-disclosure { padding: 0; }
.tj-disclosure > summary { list-style: none; cursor: pointer; padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; }
.tj-disclosure > summary::-webkit-details-marker { display: none; }
.tj-disclosure > summary h2 { margin: 0; font: 600 18px/1.3 var(--tj-font-heading); color: var(--tj-ink); }
.tj-disclosure > summary::after { content: '+'; font: 600 22px/1 var(--tj-font-body); color: var(--tj-action); }
.tj-disclosure[open] > summary::after { content: '−'; }
.tj-disclosure > summary:focus-visible { outline: 3px solid var(--tj-action); outline-offset: 2px; border-radius: var(--tj-radius-card); }
.tj-disclosure > .tj-prose { padding: 0 20px 18px; }
@media (min-width: 768px) { .tj-disclosure > summary { padding: 18px 28px; } .tj-disclosure > .tj-prose { padding: 0 28px 22px; } }
.tj-fac { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tj-fac-yes li { background: #E8F5EC; color: var(--tj-success); border-radius: 999px; padding: 4px 12px; font: 600 13px/1.5 var(--tj-font-body); }
.tj-fac-more { margin-top: 14px; }
.tj-fac-more > summary { cursor: pointer; color: var(--tj-action); font: 600 14px var(--tj-font-body); min-height: 32px; }
.tj-fac-no { margin-top: 10px; }
.tj-fac-no li { border: 1px solid var(--tj-line); color: var(--tj-ink-muted); border-radius: 999px; padding: 3px 10px; font: 400 13px/1.5 var(--tj-font-body); }
.tj-school-detail .tj-aside .tj-hub-list a { align-items: flex-start; }
.tj-school-detail .tj-aside strong { display: block; font: 600 14px/1.35 var(--tj-font-body); }
.tj-school-detail .tj-aside small { display: block; color: var(--tj-ink-muted); font-size: 12px; margin-top: 2px; }
.tj-school-ico { flex: none; width: 40px; height: 40px; border-radius: var(--tj-radius-sm); background: var(--tj-brand-50); color: var(--tj-brand-500);
  display: inline-grid; place-items: center; font-size: 18px; }
.tj-school-detail .tj-hub-more { display: inline-block; margin-top: 12px; }
/* ==== sweep2:B flashcards-worksheets-schools (end) ==== */
/* ==== sweep2:C cbse-blog-static (start) ==== */
/* CBSE on talentjr.in (views/solution/cbse_*.php) */
.tj-cbse-chapter .tj-cbse-block { margin: 0 0 20px; }
.tj-cbse-chapter .tj-prose h2 { margin-top: 0; }
.tj-cbse-chapter .tj-prose h3 { font-size: 19px; margin-top: 24px; }
.tj-cbse-chapter .tj-prose ul ul, .tj-cbse-chapter .tj-prose ul ol { margin: 4px 0 6px; }
.tj-cbse-chapter .tj-prose li { margin: 2px 0; }
.tj-cbse-qa > h2 { font: 600 19px/1.4 var(--tj-font-heading); margin: 0 0 10px; }
.tj-cbse-q { color: var(--tj-action); }
.tj-empty .tj-actions { justify-content: center; }
.tj-empty p { margin: 0 auto 4px; max-width: 60ch; }
/* static / legal pages (views/listing/about_us|contact_us|privacy|terms|services|refund.php) */
.tj-static .tj-prose h2:first-child { margin-top: 0; }
.tj-static .tj-prose ol[type="a"] { list-style-type: lower-alpha; }
.tj-contact-grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); max-width: 720px; }
.tj-contact-grid address { margin: 0; font-style: normal; }
.tj-contact-grid .tj-dl { font-size: 16px; gap: 10px 24px; }
/* education news (views/listing/news.php, views/profile/news_detail.php) */
.tj-news-list { display: grid; gap: 16px; }
.tj-news-item h2 { font: 600 20px/1.3 var(--tj-font-heading); color: var(--tj-ink); margin: 0 0 10px; }
.tj-news-item .tj-prose p { margin-bottom: 8px; }
/* blog mini-app (Bootstrap 5: blog/header.php, index.php, post.php) — container matches the main site (1140 + 15px gutters) */
.tj-blog-header { background: var(--tj-card); border-bottom: 1px solid var(--tj-line); position: relative; z-index: 1020; }
.tj-blog-header .container { max-width: 1140px; padding: 12px 15px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; min-height: var(--tj-header-h); }
.tj-blog-brand { display: inline-flex; align-items: center; text-decoration: none; flex: none; }
.tj-blog-brand img { height: 34px; width: auto; border-radius: 6px; display: block; }
.tj-blog-nav { display: flex; flex-wrap: wrap; gap: 0 16px; }
.tj-blog-nav a { color: var(--tj-ink); font: 500 15px var(--tj-font-body); text-decoration: none; padding: 10px 0; }
.tj-blog-nav a:hover { color: var(--tj-action); }
.tj-blog-search { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.tj-blog-search .tj-input { width: 220px; min-height: 40px; font-size: 15px; }
.tj-blog-search .tj-select { width: auto; min-height: 40px; }
.tj-blog-search .tj-btn { min-height: 40px; }
@media (max-width: 991px) {
  .tj-blog-search { margin-left: 0; width: 100%; }
  .tj-blog-search .tj-input { flex: 1 1 auto; width: auto; min-width: 0; }
}
@media (max-width: 767px) { .tj-blog-header .container { padding: 10px 16px; gap: 4px 16px; } .tj-blog-nav { gap: 0 14px; } .tj-blog-nav a { padding: 6px 0; font-size: 14px; }
  .tj-blog-search .tj-select { max-width: 120px; } .tj-blog-grid .tj-media-thumb:has(.tj-thumb-ph) { aspect-ratio: 16 / 7; } }
.tj-blog a.tj-badge, .tj-blog .tj-media-thumb { text-decoration: none; }
.tj-blog a.tj-badge:hover { background: var(--tj-brand-100); }
.tj-blog .tj-chiprow { margin-bottom: 24px; }
.tj-blog-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.tj-blog-grid .tj-media-thumb { aspect-ratio: 16 / 10; }
.tj-blog-grid .tj-thumb-ph svg { width: 36px; height: 36px; }
.tj-blog .pagination { margin-top: 28px; }
.tj-blog-post .tj-hub-hero h1 { max-width: 30ch; }
.tj-blog-meta { color: var(--tj-ink-muted); font: 400 15px var(--tj-font-body); margin: 0; }
.tj-blog-meta a { color: var(--tj-action); }
.tj-blog-post .tj-card { max-width: 880px; }
.tj-blog-post .tj-blog-hero { display: block; width: 100%; max-height: 460px; object-fit: cover; border-radius: var(--tj-radius-sm); margin: 0 0 24px; }
.tj-blog-post .tj-prose { font-size: 17px; max-width: 75ch; }
.tj-blog-share { border-top: 1px solid var(--tj-line); margin-top: 24px; padding-top: 16px; }
.tj-blog-share strong { font: 600 15px var(--tj-font-heading); color: var(--tj-ink); }
.tj-blog-share .tj-actions { margin-top: 10px; }
@media (max-width: 767px) { .tj-blog-share .tj-btn { flex: 1 1 100%; } .tj-blog-post .tj-prose { font-size: 16px; } }
/* ==== sweep2:C cbse-blog-static (end) ==== */

/* ===================== Shared site header (views/common/tj_site_header.php) ===================== */
.tj-sh { position: sticky; top: 0; z-index: 1000; background: var(--tj-card); border-bottom: 1px solid var(--tj-line);
  font-family: var(--tj-font-body); }
.tj-sh * { box-sizing: border-box; }
.tj-sh-in { max-width: 1170px; margin: 0 auto; padding: 0 15px; height: var(--tj-header-h); display: flex; align-items: center; gap: 24px; }
.tj-sh-logo { flex: none; display: flex; align-items: center; }
.tj-sh-logo img { height: 34px; width: auto; border-radius: 6px; display: block; }
.tj-sh-nav { display: flex; align-items: center; gap: 4px; flex: 1; min-width: 0; }
.tj-sh-nav > a, .tj-sh-dd > summary { display: inline-flex; align-items: center; height: 40px; padding: 0 12px; border-radius: 8px;
  color: var(--tj-ink) !important; font: 500 15px/1 var(--tj-font-body); text-decoration: none !important; white-space: nowrap; }
.tj-sh-nav > a:hover, .tj-sh-dd > summary:hover { background: var(--tj-brand-50); color: var(--tj-action) !important; }
.tj-sh-nav > a.is-active { color: var(--tj-action) !important; box-shadow: inset 0 -2px 0 var(--tj-action); border-radius: 0; }
.tj-sh-dd { position: relative; }
.tj-sh-dd > summary { cursor: pointer; list-style: none; gap: 6px; }
.tj-sh-dd > summary::-webkit-details-marker { display: none; }
.tj-sh-dd > summary::after { content: ''; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px); margin-left: 2px; }
.tj-sh-dd > ul { position: absolute; top: calc(100% + 6px); left: 0; min-width: 200px; margin: 0; padding: 6px; list-style: none;
  background: var(--tj-card); border: 1px solid var(--tj-line); border-radius: 12px; box-shadow: 0 12px 32px rgba(31,42,68,.14); }
.tj-sh-dd > ul li { list-style: none; margin: 0; padding: 0; }
.tj-sh-dd > ul a { display: block; padding: 10px 12px; border-radius: 8px; color: var(--tj-ink) !important; text-decoration: none !important;
  font: 500 15px/1.3 var(--tj-font-body); }
.tj-sh-dd > ul a:hover { background: var(--tj-brand-50); color: var(--tj-action) !important; }
.tj-sh-right { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.tj-sh-signin { min-height: 40px !important; }
.tj-sh-user > summary { padding: 0 8px 0 4px; gap: 8px; }
.tj-sh-user > ul { left: auto; right: 0; }
.tj-sh-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex: none; }
.tj-sh-initial { display: inline-grid; place-items: center; background: var(--tj-brand-100); color: var(--tj-action-hover); font: 700 14px var(--tj-font-body); }
.tj-sh-name { max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
.tj-sh-dot { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--tj-action); color: #fff;
  font: 700 12px/20px var(--tj-font-body); text-align: center; }
.tj-sh-sep { border-top: 1px solid var(--tj-line); margin-top: 4px; padding-top: 4px !important; }
.tj-sh-burger { display: none; }
.tj-sh-burger > summary { width: 44px; height: 44px; padding: 0; flex-direction: column; justify-content: center; gap: 4px;
  border: 1px solid var(--tj-line); border-radius: 10px; }
.tj-sh-burger > summary::after { display: none; }
.tj-sh-burger > summary span { width: 18px; height: 2px; background: var(--tj-ink); border-radius: 2px; }
.tj-sh-burger > ul { left: auto; right: 0; width: min(280px, calc(100vw - 32px)); }
@media (max-width: 991px) {
  .tj-sh-nav { display: none; }
  .tj-sh-burger { display: block; }
  .tj-sh-in { gap: 12px; }
}
@media (max-width: 480px) { .tj-sh-name { display: none; } .tj-sh-logo img { height: 30px; } }

/* ===================== Site search (assets/js/tj-search.js, 2026-10-10) ===================== */
.tj-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tj-sh-sbtn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border: 1px solid var(--tj-line); border-radius: 999px;
  background: var(--tj-card); color: var(--tj-ink); font: 600 15px var(--tj-font-body); cursor: pointer; }
.tj-sh-sbtn:hover, .tj-sh-sbtn[aria-expanded="true"] { border-color: var(--tj-action); color: var(--tj-action); }
.tj-sh-search { position: absolute; left: 0; right: 0; top: 100%; z-index: 1001; border-top: 1px solid var(--tj-line); border-bottom: 1px solid var(--tj-line);
  background: var(--tj-card); padding: 12px 15px; box-shadow: 0 12px 24px rgba(15, 23, 42, .10); }
.tj-sh-search[hidden] { display: none; }
.tj-sh-search .tj-search { max-width: 760px; margin: 0 auto; }
.tj-search { position: relative; display: flex; gap: 8px; }
.tj-search input[type="search"] { flex: 1; min-width: 0; height: 48px; padding: 0 16px; border: 2px solid var(--tj-line); border-radius: 12px;
  font: 400 17px var(--tj-font-body); color: var(--tj-ink); background: #fff; -webkit-appearance: none; appearance: none; }
.tj-search input[type="search"]:focus { outline: none; border-color: var(--tj-action); box-shadow: 0 0 0 3px var(--tj-brand-50); }
.tj-search > .tj-btn { height: 48px; min-height: 48px; padding: 0 20px; }
.tj-sr-drop { position: absolute; z-index: 1100; top: calc(100% + 6px); left: 0; right: 0; max-height: min(70vh, 520px); overflow: auto; background: #fff;
  border: 1px solid var(--tj-line); border-radius: 14px; box-shadow: 0 16px 40px rgba(15, 23, 42, .18); padding: 6px; text-align: left; }
.tj-sr-drop[hidden] { display: none; }
.tj-sr-head { padding: 10px 10px 4px; font: 700 12px var(--tj-font-body); letter-spacing: .04em; text-transform: uppercase; color: var(--tj-ink-muted, #64748B); }
.tj-sr-head span { font-weight: 500; }
.tj-sr-item { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 10px; color: var(--tj-ink) !important; text-decoration: none !important; }
.tj-sr-item:hover, .tj-sr-item.is-sel { background: var(--tj-brand-50); }
.tj-sr-ic { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; background: #F8FAFC; font-size: 19px; }
.tj-sr-tx { min-width: 0; display: flex; flex-direction: column; }
.tj-sr-tx strong { font: 600 15px/1.35 var(--tj-font-body); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.tj-sr-tx strong mark { background: #FEF3C7; color: inherit; padding: 0 1px; border-radius: 3px; }
.tj-sr-tx small { font: 400 13px var(--tj-font-body); color: var(--tj-ink-muted, #64748B); }
.tj-sr-all { display: block; margin: 4px 0 0; padding: 10px; border-top: 1px solid var(--tj-line); font: 600 15px var(--tj-font-body); color: var(--tj-action) !important; text-decoration: none !important; border-radius: 0 0 10px 10px; }
.tj-sr-all:hover, .tj-sr-all.is-sel { background: var(--tj-brand-50); }
.tj-sr-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 6px 10px 10px; }
.tj-sr-chips button, .tj-home-search-chips a { padding: 7px 12px; border: 1px solid var(--tj-line); border-radius: 999px; background: #fff; color: var(--tj-ink);
  font: 500 14px var(--tj-font-body); cursor: pointer; text-decoration: none !important; }
.tj-sr-chips button:hover, .tj-home-search-chips a:hover { border-color: var(--tj-action); color: var(--tj-action) !important; }
.tj-sr-empty { padding: 14px 12px; font: 400 15px/1.5 var(--tj-font-body); }
/* home hero search */
.tj-home-search { margin: 18px 0 6px; max-width: none; }   /* hero uses the full width (owner 2026-10-10) */
.tj-home-search .tj-search input[type="search"] { height: 56px; font-size: 18px; border-radius: 14px; box-shadow: var(--tj-shadow-card); }
.tj-home-search .tj-search > .tj-btn { height: 56px; min-height: 56px; border-radius: 14px; font-size: 17px; }
.tj-home-search-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 0; font: 500 14px var(--tj-font-body); }
.tj-home-search-chips > span { color: var(--tj-ink-muted, #64748B); }
/* /search page */
.tj-sp-count { font: 600 16px var(--tj-font-body); margin: 16px 0 6px; }
.tj-sp-jump { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 0 0 8px; font-weight: 600; }
.tj-sp-group h2 { margin: 22px 0 8px; font: 700 20px var(--tj-font-heading); }
.tj-sp-group h2 span { font: 500 15px var(--tj-font-body); color: var(--tj-ink-muted, #64748B); }
.tj-sp-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 6px 14px; }
.tj-sp-list .tj-sr-item { border: 1px solid var(--tj-line); background: #fff; }
.tj-sp-more { grid-column: 1 / -1; margin-top: 6px; }
.tj-sp-more summary { cursor: pointer; font-weight: 600; color: var(--tj-action); padding: 6px 0; }
@media (max-width: 1199px) { .tj-sh-sbtn span { display: none; } .tj-sh-sbtn { width: 44px; padding: 0; justify-content: center; } }
@media (max-width: 767px) { .tj-search > .tj-btn { padding: 0 14px; } .tj-home-search .tj-search > .tj-btn { display: none; } .tj-sr-drop { max-height: 60vh; } }

/* ===================== Shared site footer (views/common/tj_site_footer.php) ===================== */
.tj-sf { background: var(--tj-ink); color: var(--tj-footer-text); font: 400 15px/1.6 var(--tj-font-body); margin-top: 40px; }
.tj-sf-in { max-width: 1170px; margin: 0 auto; padding: 40px 15px 28px; display: grid; gap: 28px; grid-template-columns: 1fr; }
@media (min-width: 768px) { .tj-sf-in { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.tj-sf-about img { height: 32px; width: auto; border-radius: 6px; margin-bottom: 12px; }
.tj-sf-about p { margin: 0 0 10px; color: var(--tj-footer-text); max-width: 34ch; }
.tj-sf-contact { font-size: 14px; }
.tj-sf h2 { margin: 0 0 10px; font: 600 15px var(--tj-font-heading); color: #fff; letter-spacing: .02em; }
.tj-sf-col { display: flex; flex-direction: column; gap: 6px; }
.tj-sf a { color: var(--tj-footer-text) !important; text-decoration: none; }
.tj-sf a:hover { color: #fff !important; text-decoration: underline; }
.tj-sf + .tj-eco { border-top: 1px solid rgba(255,255,255,.08); }

/* full-bleed footer even when a legacy page leaves a .container/.row open around it */
.tj-sf, .tj-sf + .tj-eco, .tj-keep { width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; }
html, body { overflow-x: hidden; }

/* ===================== Signed-in feed pages (feed, profile, invite) ===================== */
.tj-continue { padding: 16px 18px; margin-bottom: 16px; }
.tj-continue h2 { margin: 0 0 10px; font: 600 17px var(--tj-font-heading); color: var(--tj-ink); }
.tj-continue ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.tj-continue a { display: block; padding: 6px 0; font: 500 15px var(--tj-font-body); color: var(--tj-action); }
.profile-box, .left-panel-box, .right-panel-box { background: var(--tj-card) !important; border: 1px solid var(--tj-line) !important;
  border-radius: var(--tj-radius-card) !important; box-shadow: var(--tj-shadow-card) !important; }
.left-panelbox-title, .quiz-title, .result-title { color: var(--tj-ink) !important; font: 600 16px var(--tj-font-heading) !important; }
.left-panelbox-title + a, .find-more, a.find-more { color: var(--tj-action) !important; }
.quiz-result-list { list-style: none !important; padding-left: 0 !important; margin: 8px 0 0 !important; }
.quiz-result-list li { list-style: none !important; }
.quiz-result-list li a { display: block; padding: 7px 10px; border-radius: 8px; color: var(--tj-ink) !important; font: 500 15px var(--tj-font-body); }
.quiz-result-list li a:hover { background: var(--tj-brand-50); color: var(--tj-action) !important; text-decoration: none; }
.quiz-result-list li a.tj-panel-btn { display: inline-flex; padding: 0 14px; margin: 2px 0 6px; min-height: 36px; font-size: 14px; }
.profile-photo-Box img, .follow-left-box img { border-radius: 50%; object-fit: cover; }

.follow-left-box { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 8px 0 !important;
  border-bottom: 1px solid var(--tj-line) !important; border-radius: 0 !important; width: 100% !important; }
.follow-left-box:last-child { border-bottom: 0 !important; }
/* legacy feed markup nests .row directly in .row (double negative margin -> panels touch the screen edge) */
.margin_top30 > .row > .row { margin-left: 0; margin-right: 0; }
/* feed pages on phones/tablets: the post composer + feed (#content) first, sidebars after */
@media (max-width: 991px) {
  .margin_top30 > .row > .row { display: flex; flex-direction: column; }
  .margin_top30 > .row > .row > #content { order: -1; }
}

/* "Your TalentJR" cross-app panel (views/common/tj_product_hub.php) */
.tj-apps-panel { padding: 16px 18px; margin-bottom: 16px; }
.tj-apps-panel h2 { margin: 0; font: 600 17px var(--tj-font-heading); color: var(--tj-ink); }
.tj-apps-sub { margin: 2px 0 10px; font-size: 13px; color: var(--tj-ink-muted); }
.tj-apps-panel ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.tj-apps-item { display: block; padding: 8px 10px; margin: 0 -10px; border-radius: 8px; text-decoration: none; }
.tj-apps-item strong { font: 600 15px var(--tj-font-body); color: var(--tj-action); }
.tj-apps-item span { display: block; font-size: 13px; line-height: 1.35; color: var(--tj-ink-muted); }
a.tj-apps-item:hover, a.tj-apps-item:focus { background: var(--tj-surface); text-decoration: none; }
a.tj-apps-item:hover strong { color: var(--tj-action-hover); }
.tj-apps-item.is-here { background: var(--tj-surface); }
.tj-apps-item.is-here strong { color: var(--tj-ink); }
.tj-apps-item .tj-apps-badge { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: #FFEDD5; color: #9A3412; font-size: 11px; font-weight: 600; vertical-align: 2px; }

/* Header "Apps" switcher (same list as every TalentJR app) */
.tj-sh-apps > summary { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; min-width: 44px; justify-content: center; padding: 0 8px; border-radius: 8px; color: var(--tj-ink); font-weight: 500; }
.tj-sh-apps > summary::after { display: none; }
.tj-sh-apps > summary:hover { background: var(--tj-surface); }
.tj-sh-apps-label { font-size: 15px; }
.tj-sh-apps-panel { position: absolute; right: 0; top: calc(100% + 8px); width: 22rem; max-width: calc(100vw - 16px); background: #fff; border: 1px solid var(--tj-line); border-radius: 14px; box-shadow: 0 8px 24px rgba(31,42,68,.12); padding: 12px; z-index: 1001; }
.tj-sh-apps-panel > p { margin: 0 0 6px; padding: 2px 8px; font: 600 14px var(--tj-font-heading); color: var(--tj-ink); }
.tj-sh-apps-panel ul { list-style: none; margin: 0; padding: 0; }
.tj-sh-apps-panel a, .tj-sh-apps-panel .is-here { display: block; padding: 8px; border-radius: 8px; text-decoration: none; }
.tj-sh-apps-panel a:hover, .tj-sh-apps-panel a:focus { background: var(--tj-surface); text-decoration: none; }
.tj-sh-apps-panel strong { font-size: 14px; font-weight: 600; color: var(--tj-action); }
.tj-sh-apps-panel .is-here { background: #FFEDD5; }
.tj-sh-apps-panel .is-here strong { color: var(--tj-ink); }
.tj-sh-apps-panel em { font-style: normal; font-size: 11px; font-weight: 600; color: #9A3412; margin-left: 6px; }
.tj-sh-apps-panel small { display: block; font-size: 12px; color: var(--tj-ink-muted); line-height: 1.35; }
@media (max-width: 991px) { .tj-sh-apps-label { display: none; } }
@media (max-width: 600px) { .tj-sh-apps { position: static; } .tj-sh-apps-panel { position: fixed; left: 8px; right: 8px; top: 68px; width: auto; } }

/* Feed pagination (views/feed/feed.php) */
.tj-pager { display: flex; clear: both; width: 100%; align-items: center; justify-content: space-between; gap: 8px; margin: 20px 0 4px; padding: 4px 15px 0; box-sizing: border-box; }
.tj-pager ul { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; }
.tj-pager li { margin: 0; }
.tj-pager a, .tj-pager span { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--tj-line); background: #fff; color: var(--tj-ink) !important; font-weight: 600; text-decoration: none !important; }
.tj-pager a:hover { border-color: var(--tj-action); color: var(--tj-action) !important; }
.tj-pager [aria-current="page"] { background: var(--tj-action); border-color: var(--tj-action); color: #fff !important; }
.tj-pager .is-off { color: var(--tj-ink-muted) !important; opacity: .5; }
.tj-pager-info { clear: both; text-align: center; font-size: 13px; color: var(--tj-ink-muted); margin: 0 0 16px; }
.tj-feed-empty { clear: both; padding: 18px; margin-top: 12px; }
.tj-feed-empty p { margin: 0; color: var(--tj-ink); }
@media (max-width: 480px) { .tj-pager ul li:not(:has([aria-current])) { display: none; } }

/* ---- /apps "How TalentJR works" guide (views/apps/index.php) ---- */
.tj-guide { padding-bottom: 32px; }
.tj-guide-section { margin: 40px 0 0; scroll-margin-top: 80px; }
.tj-guide-section > h2 { font: 700 24px/1.25 var(--tj-font-heading); color: var(--tj-ink); margin: 0 0 8px; }
.tj-guide-intro { color: var(--tj-ink-muted); margin: 0 0 16px; font-size: 16px; }
.tj-guide-needs { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 600px) { .tj-guide-needs { grid-template-columns: 1fr 1fr; } }
@media (min-width: 992px) { .tj-guide-needs { grid-template-columns: repeat(4, 1fr); } }
.tj-guide-needs a { display: flex; flex-direction: column; justify-content: space-between; gap: 8px; height: 100%; min-height: 92px;
  padding: 16px; background: var(--tj-card); border: 1px solid var(--tj-line); border-radius: 14px; text-decoration: none !important; }
.tj-guide-needs a:hover, .tj-guide-needs a:focus { border-color: var(--tj-action); background: var(--tj-brand-50); }
.tj-guide-need { font: 600 16px/1.35 var(--tj-font-heading); color: var(--tj-ink); }
.tj-guide-need-app { font: 600 14px var(--tj-font-body); color: var(--tj-action); }
.tj-guide-steps { counter-reset: tjstep; list-style: none; margin: 16px 0; padding: 0; display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 768px) { .tj-guide-steps { grid-template-columns: 1fr 1fr; } }
.tj-guide-steps li { counter-increment: tjstep; position: relative; padding: 16px 16px 16px 60px; background: var(--tj-card);
  border: 1px solid var(--tj-line); border-radius: 14px; color: var(--tj-ink-muted); line-height: 1.55; }
.tj-guide-steps li::before { content: counter(tjstep); position: absolute; left: 16px; top: 16px; width: 30px; height: 30px; border-radius: 999px;
  display: grid; place-items: center; background: var(--tj-action); color: #fff; font: 700 15px var(--tj-font-heading); }
.tj-guide-steps strong { display: block; color: var(--tj-ink); font: 600 16px var(--tj-font-heading); margin-bottom: 2px; }
.tj-guide-apps { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border: 1px solid var(--tj-line); border-radius: 8px;
  background: #fff; color: var(--tj-ink); font-weight: 600; white-space: nowrap; }
.tj-guide-apps-list { display: grid; gap: 16px; grid-template-columns: 1fr; margin-top: 16px; }
@media (min-width: 992px) { .tj-guide-apps-list { grid-template-columns: 1fr 1fr; } }
.tj-guide-app { padding: 20px; scroll-margin-top: 80px; display: flex; flex-direction: column; }
.tj-guide-app:target { border-color: var(--tj-action); box-shadow: 0 0 0 3px rgba(194, 65, 12, .15); }
.tj-guide-app-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.tj-guide-app-head h3 { margin: 0; font: 700 22px/1.25 var(--tj-font-heading); color: var(--tj-ink); }
.tj-guide-host { font: 500 13px var(--tj-font-body); color: var(--tj-ink-muted); }
.tj-guide-summary { margin: 8px 0; font-size: 16px; line-height: 1.55; color: var(--tj-ink); }
.tj-guide-meta { margin: 0 0 12px; font-size: 14px; color: var(--tj-ink-muted); }
.tj-guide-meta strong { color: var(--tj-ink); }
.tj-guide-cols { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 600px) { .tj-guide-cols { grid-template-columns: 1fr 1fr; } }
.tj-guide-cols h4 { margin: 0 0 6px; font: 600 14px var(--tj-font-heading); color: var(--tj-ink); text-transform: none; }
.tj-guide-does, .tj-guide-start { margin: 0; padding-left: 20px; color: var(--tj-ink-muted); font-size: 14px; line-height: 1.55; }
.tj-guide-does li, .tj-guide-start li { margin-bottom: 4px; }
.tj-guide-signin { margin: 12px 0 0; padding: 8px 12px; border-radius: 10px; background: var(--tj-surface); color: var(--tj-ink); font-size: 14px; }
.tj-guide-cta { margin: 16px 0 0; margin-top: auto; padding-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.tj-guide-free { padding: 20px; background: var(--tj-brand-50); border-color: #FED7AA; }
.tj-guide-free h2 { margin-top: 0 !important; }
.tj-guide-free p { margin: 0; color: var(--tj-ink); line-height: 1.6; }
.tj-guide-faq { display: grid; gap: 8px; margin-top: 12px; max-width: 820px; }
.tj-guide-faq details { background: var(--tj-card); border: 1px solid var(--tj-line); border-radius: 12px; }
.tj-guide-faq summary { cursor: pointer; list-style: none; min-height: 52px; padding: 14px 44px 14px 16px; position: relative;
  font: 600 16px/1.4 var(--tj-font-heading); color: var(--tj-ink); }
.tj-guide-faq summary::-webkit-details-marker { display: none; }
.tj-guide-faq summary::after { content: '+'; position: absolute; right: 16px; top: 12px; font: 400 22px var(--tj-font-body); color: var(--tj-action); }
.tj-guide-faq details[open] summary::after { content: '–'; }
.tj-guide-faq details p { margin: 0; padding: 0 16px 16px; color: var(--tj-ink-muted); line-height: 1.6; }
.tj-guide-end p { color: var(--tj-ink-muted); max-width: 70ch; }
.tj-guide-end .tj-btn { margin: 4px 8px 4px 0; }
.tj-sh-apps-panel .tj-sh-apps-all { display: block; margin-top: 6px; padding: 10px 8px 4px; border-top: 1px solid var(--tj-line); border-radius: 0; font: 600 13px var(--tj-font-body); color: var(--tj-action) !important; }
.tj-apps-guide { display: inline-block; margin-top: 10px; font: 600 13px var(--tj-font-body); color: var(--tj-action); }
.tj-guide-aka { margin: 2px 0 0; font-size: 13px; color: var(--tj-ink-muted); }
.tj-guide-why { margin: 4px 0 12px; padding: 12px 14px; border-left: 4px solid var(--tj-brand-500); background: var(--tj-brand-50); border-radius: 0 10px 10px 0; }
.tj-guide-why h4 { margin: 0 0 4px; font: 600 14px var(--tj-font-heading); color: var(--tj-ink); }
.tj-guide-why p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--tj-ink); }
/* Home feature cards: "Know more" → the app's section on /apps */
.feature-box .tj-know-more { display: inline-flex; align-items: center; min-height: 44px; margin-top: 4px; font: 600 13px var(--tj-font-body); color: var(--tj-action) !important; text-decoration: underline; text-underline-offset: 3px; }
.feature-box .tj-know-more:hover { color: var(--tj-action-hover) !important; }

/* Feed: "Finish your TalentJR profile" (shown only when the Welcome step was skipped) */
.tj-finish-profile { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; margin: 12px 15px 4px; border-color: #FED7AA; background: var(--tj-brand-50); }
.tj-finish-profile strong { display: block; font: 600 16px var(--tj-font-heading); color: var(--tj-ink); }
.tj-finish-profile span { font-size: 14px; color: var(--tj-ink-muted); }

/* ---- Member profile (views/profile/member.php) ---- */
.tj-member { padding-top: 24px; padding-bottom: 32px; }
.tj-member-grid { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 992px) { .tj-member-grid { grid-template-columns: minmax(0, 1fr) 320px; } }
.tj-member-head { display: flex; gap: 20px; align-items: center; padding: 24px; flex-wrap: wrap; }
.tj-member-avatar { width: 96px; height: 96px; border-radius: 999px; object-fit: cover; flex: none; border: 3px solid #fff; box-shadow: 0 0 0 1px var(--tj-line); }
.tj-member-initial { display: inline-grid; place-items: center; background: var(--tj-brand-50); color: var(--tj-action-hover); font: 700 36px var(--tj-font-heading); }
.tj-member-id { flex: 1; min-width: 220px; }
.tj-member-id h1 { margin: 0 0 6px; font: 700 28px/1.2 var(--tj-font-heading); color: var(--tj-ink); }
.tj-member-meta { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 0 0 14px; color: var(--tj-ink-muted); font-size: 15px; }
.tj-member-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.tj-member-state { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 10px; background: var(--tj-surface); color: var(--tj-ink); font-weight: 600; }
.tj-member-about, .tj-member-empty { padding: 24px; margin-top: 20px; }
.tj-member-about h2 { margin: 0 0 10px; font: 600 20px var(--tj-font-heading); color: var(--tj-ink); }
.tj-member-bio { margin: 0 0 16px; line-height: 1.6; color: var(--tj-ink); }
.tj-member-facts { display: grid; gap: 12px; grid-template-columns: 1fr; margin: 0; }
@media (min-width: 600px) { .tj-member-facts { grid-template-columns: 1fr 1fr; } }
.tj-member-facts div { padding: 12px 14px; background: var(--tj-surface); border-radius: 10px; }
.tj-member-facts dt { font: 600 13px var(--tj-font-body); color: var(--tj-ink-muted); margin: 0 0 2px; }
.tj-member-facts dd { margin: 0; color: var(--tj-ink); font-weight: 500; }
.tj-member-empty p { margin: 0; color: var(--tj-ink); line-height: 1.6; }
.tj-member-people { padding: 18px; margin-bottom: 16px; }
.tj-member-people h2 { margin: 0 0 10px; font: 600 16px var(--tj-font-heading); color: var(--tj-ink); }
.tj-member-people ul { list-style: none; margin: 0; padding: 0; }
.tj-member-people li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 0; border-top: 1px solid var(--tj-line); }
.tj-member-people li:first-child { border-top: 0; }
.tj-member-person { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 44px; color: var(--tj-ink) !important; font-weight: 500; text-decoration: none !important; }
.tj-member-person span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tj-member-person img, .tj-member-person .tj-member-initial { width: 40px; height: 40px; border-radius: 999px; object-fit: cover; flex: none; font-size: 16px; }
.tj-member-person:hover span:last-child { color: var(--tj-action); }
.tj-member-mini { flex: none; min-height: 36px; padding: 0 12px; border: 1px solid var(--tj-line); border-radius: 999px; background: #fff; color: var(--tj-action); font: 600 13px var(--tj-font-body); cursor: pointer; }
.tj-member-mini:hover { border-color: var(--tj-action); background: var(--tj-brand-50); }
.tj-member-back { display: inline-block; margin-top: 4px; font-weight: 600; color: var(--tj-action); }


/* Home feature cards: equal-height rows (Bootstrap 3 floats stacked uneven cards) */
.tight-grid { display: flex; flex-wrap: wrap; justify-content: center; }
.tight-grid::before, .tight-grid::after { display: none; }
.tight-grid > [class*='col-'] { display: flex; float: none; }
.tight-grid .feature-box { display: flex; flex-direction: column; align-items: center; width: 100%; height: 100%; }
.tight-grid .feature-box .feature-text { flex-grow: 1; }
.tight-grid .feature-box > .tj-know-more:first-of-type { margin-top: 6px; }
@media (min-width: 600px) and (max-width: 991px) { .tight-grid > [class*='col-'] { width: 50%; } }
.tight-grid .feature-box > br { display: none; }
.tight-grid .feature-box .btn { margin-top: 8px; }
.tight-grid .feature-box .tj-know-more { min-height: 36px; margin-top: 2px; }
.tight-grid > [class*='col-'] { margin-bottom: 16px; }

/* ---- AI tutor on Maharashtra Board chapter pages (views/solution/board_tutor.php) ---- */
.tj-bt { margin: 24px 0; padding: 20px; border-color: #C7C4FF; }
.tj-bt-badge { display: inline-block; padding: 3px 10px; border-radius: 999px; background: #F1F0FF; color: #5149E0; font: 600 12px var(--tj-font-body); }
.tj-bt-head h2 { margin: 8px 0 4px; font: 700 20px/1.3 var(--tj-font-heading); color: var(--tj-ink); }
.tj-bt-head p { margin: 0 0 12px; color: var(--tj-ink-muted); line-height: 1.55; }
.tj-bt-starters { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tj-bt-chip { min-height: 40px; padding: 6px 14px; border: 1px solid #FDBA74; border-radius: 999px; background: var(--tj-brand-50); color: #9A3412; font: 600 13px var(--tj-font-body); cursor: pointer; text-align: left; }
.tj-bt-chip:hover { background: #FFEDD5; }
.tj-bt-gate { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 14px; border-radius: 12px; background: var(--tj-surface); }
.tj-bt-gate p { margin: 0; color: var(--tj-ink); }
.tj-bt-log { display: flex; flex-direction: column; gap: 10px; max-height: 480px; overflow-y: auto; margin-bottom: 10px; }
.tj-bt-log:empty { display: none; }
.tj-bt-msg { max-width: 88%; padding: 10px 14px; border-radius: 14px; font-size: 15px; line-height: 1.55; word-wrap: break-word; }
.tj-bt-msg.is-me { align-self: flex-end; background: var(--tj-action); color: #fff; border-bottom-right-radius: 4px; }
.tj-bt-msg.is-ai { align-self: flex-start; background: #F6F7FB; color: var(--tj-ink); border-bottom-left-radius: 4px; }
.tj-bt-msg.is-wait { color: var(--tj-ink-muted); font-style: italic; }
.tj-bt-form { display: flex; gap: 8px; align-items: flex-end; }
.tj-bt-form textarea { flex: 1; min-height: 48px; padding: 10px 12px; border: 1px solid var(--tj-line); border-radius: 10px; font: 15px var(--tj-font-body); resize: vertical; }
.tj-bt-form textarea:focus { outline: 3px solid rgba(194,65,12,.2); border-color: var(--tj-action); }
.tj-bt-note { margin: 8px 0 0; font-size: 12px; color: var(--tj-ink-muted); }
.tj-bt-left { font-weight: 600; color: var(--tj-ink); }
.tj-bt-more { margin: 10px 0 0; font-size: 14px; }
.tj-bt-more a { font-weight: 600; color: var(--tj-action); }
.tj-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.tj-bt-snap { flex: none; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-width: 56px; min-height: 48px; padding: 4px 8px; border: 1px solid var(--tj-line); border-radius: 10px; background: #fff; cursor: pointer; font-size: 20px; line-height: 1; }
.tj-bt-snap:hover, .tj-bt-snap:focus-within { border-color: var(--tj-action); background: var(--tj-brand-50); }
.tj-bt-snap-text { font: 600 11px var(--tj-font-body); color: var(--tj-ink-muted); margin-top: 2px; }
.tj-bt-preview { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 8px; border: 1px dashed #FDBA74; border-radius: 10px; background: var(--tj-brand-50); font-size: 13px; color: var(--tj-ink); }
.tj-bt-preview[hidden] { display: none; }
.tj-bt-preview img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; }
.tj-bt-unsnap { margin-left: auto; min-width: 36px; min-height: 36px; border: 0; border-radius: 8px; background: #fff; cursor: pointer; }
.tj-bt-thumb { display: block; max-width: 220px; max-height: 160px; margin-top: 6px; border-radius: 8px; }
.tj-bt-mic.is-on { border-color: #DC2626; background: #FEF2F2; animation: tjbtpulse 1.2s infinite; }
@keyframes tjbtpulse { 50% { box-shadow: 0 0 0 4px rgba(220,38,38,.15); } }
.tj-bt-voice { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 8px 0 0; font-size: 13px; color: var(--tj-ink-muted); }
.tj-bt-voice[hidden] { display: none; }
.tj-bt-voice select { margin-left: 6px; min-height: 32px; padding: 2px 6px; border: 1px solid var(--tj-line); border-radius: 8px; background: #fff; font: 13px var(--tj-font-body); }
.tj-bt-listening { color: #DC2626; font-weight: 600; }
.tj-bt-listen { display: flex; width: fit-content; align-items: center; margin-top: 10px; min-height: 34px; padding: 0 12px; border: 1px solid var(--tj-line); border-radius: 999px; background: #fff; color: var(--tj-ink); font: 600 13px var(--tj-font-body); cursor: pointer; }
.tj-bt-listen:hover { border-color: var(--tj-action); color: var(--tj-action); }
/* Feed: daily practice streak card (views/common/tj_streak.php) */
.tj-streak { display: flex; align-items: center; gap: 12px; padding: 14px 16px; margin-bottom: 16px; border-color: #FDBA74; background: linear-gradient(90deg, #FFF4EC, #fff); color: var(--tj-ink) !important; text-decoration: none !important; }
.tj-streak:hover { border-color: var(--tj-action); }
.tj-streak-flame { font-size: 28px; line-height: 1; }
.tj-streak-text { flex: 1; min-width: 0; }
.tj-streak-text strong { display: block; font: 600 15px var(--tj-font-heading); }
.tj-streak-text span { display: block; font-size: 13px; color: var(--tj-ink-muted); line-height: 1.35; }
.tj-streak-cta { flex: none; font: 700 14px var(--tj-font-body); color: var(--tj-action); }
.tj-streak { flex-wrap: wrap; align-items: flex-start; }
.tj-streak-text { flex: 1 1 140px; }
.tj-streak-cta { flex-basis: 100%; padding-left: 40px; }

/* /teach — tutor programme (Phase 0) */
.tj-teach-why { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.tj-teach-why li { padding: 18px; }
.tj-teach-why h3 { margin: 0 0 6px; font: 600 17px var(--tj-font-heading); color: var(--tj-ink); }
.tj-teach-why p { margin: 0; color: var(--tj-ink-muted); }
.tj-teach-box { padding: 20px; max-width: 760px; }
.tj-teach-box h3 { margin: 0 0 6px; font: 700 20px var(--tj-font-heading); color: var(--tj-ink); }
.tj-teach-summary { color: var(--tj-ink-muted); font-size: 14px; margin: 0; }
.tj-teach-form { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; }
.tj-teach-form > label, .tj-teach-row label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; color: var(--tj-ink); margin: 0; }
.tj-teach-form small { font-weight: 400; color: var(--tj-ink-muted); }
.tj-teach-form input:not([type=checkbox]), .tj-teach-form select, .tj-teach-form textarea {
  font: 400 15px var(--tj-font-body); padding: 10px 12px; border: 1px solid var(--tj-line); border-radius: 8px; background: #fff; color: var(--tj-ink); width: 100%; }
.tj-teach-form input:focus, .tj-teach-form select:focus, .tj-teach-form textarea:focus { outline: 2px solid var(--tj-action); outline-offset: 1px; }
.tj-teach-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tj-teach-form fieldset { border: 0; padding: 0; margin: 0; }
.tj-teach-form legend { font-weight: 600; font-size: 15px; color: var(--tj-ink); border: 0; margin: 0 0 6px; }
.tj-teach-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tj-teach-chips label, .tj-teach-modes label { margin: 0; cursor: pointer; font-weight: 400; }
.tj-teach-chips input, .tj-teach-modes input { position: absolute; opacity: 0; }
.tj-teach-chips span { display: inline-block; padding: 7px 14px; border: 1px solid var(--tj-line); border-radius: 999px; background: #fff; color: var(--tj-ink); }
.tj-teach-modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; }
.tj-teach-modes span { display: block; padding: 10px 14px; border: 1px solid var(--tj-line); border-radius: 10px; background: #fff; height: 100%; }
.tj-teach-modes strong { display: block; color: var(--tj-ink); }
.tj-teach-modes small { display: block; }
.tj-teach-chips input:checked + span, .tj-teach-modes input:checked + span { border-color: var(--tj-action); background: #FFF4EC; box-shadow: inset 0 0 0 1px var(--tj-action); }
.tj-teach-chips input:focus-visible + span, .tj-teach-modes input:focus-visible + span { outline: 2px solid var(--tj-action); outline-offset: 2px; }
.tj-teach-check { flex-direction: row !important; align-items: flex-start; gap: 8px !important; font-weight: 400 !important; }
.tj-teach-check input { margin-top: 4px; }
.tj-teach-error { color: #B91C1C; margin: 0; }
@media (max-width: 600px) { .tj-teach-row { grid-template-columns: 1fr; } }
/* "Want a teacher?" card on Maharashtra Board chapter pages (tutor programme Phase 0) */
.tj-want { padding: 20px; margin: 24px 0; }
.tj-want h2 { margin: 0 0 6px; font: 700 20px var(--tj-font-heading); color: var(--tj-ink); }
.tj-want p { color: var(--tj-ink-muted); }
.tj-want .tj-want-done { color: var(--tj-ink); margin: 0; }
.tj-want .tj-teach-form { margin-top: 12px; }
/* [hidden] must win over component display rules (flex buttons/forms toggled by JS) */
.tj-teach [hidden], .tj-want [hidden], .tj-teach-form[hidden], .tj-teach-box[hidden] { display: none !important; }
.tj-teach-alt { margin-left: 16px; font-weight: 600; color: var(--tj-action); white-space: nowrap; }
.tj-find-cta { margin: 10px 0 0 !important; }
.tj-find-cta a { font-weight: 600; color: var(--tj-action); }
.tj-teach-flow { margin: 0 0 16px; padding-left: 20px; color: var(--tj-ink); }
.tj-teach-flow li { margin-bottom: 6px; }
.tj-tutor-card[hidden] { display: none !important; }


/* Maharashtra Board chapter pages: compact AI tutor bar at the top (full panel #ai-tutor stays after the answers) */
.tj-bt-top { margin: 12px 0 18px; padding: 12px 16px; border: 1px solid #C9C5FF; border-radius: 12px; background: #F6F5FF; }
.tj-bt-top-text { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 10px; font-size: 15px; line-height: 1.45; color: var(--tj-ink); }
.tj-bt-top-badge { flex: none; padding: 3px 10px; border-radius: 999px; background: #6C63FF; color: #fff; font: 600 12px var(--tj-font-body); }
.tj-bt-top-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tj-bt-top-chips a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 1px solid #C9C5FF; border-radius: 999px;
  background: #fff; font: 600 14px var(--tj-font-body); color: #5149E0; text-decoration: none; }
.tj-bt-top-chips a:hover { background: #6C63FF; border-color: #6C63FF; color: #fff; text-decoration: none; }
.tj-bt-top-chips .tj-bt-top-own { border-style: dashed; }
@media print { .tj-bt-top { display: none; } }
@media (max-width: 600px) {
  .tj-bt-top { padding: 10px 12px; }
  .tj-bt-top-text { font-size: 14px; margin-bottom: 8px; }
  .tj-bt-top-chips { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin-right: -12px; padding-right: 12px; }
  .tj-bt-top-chips::-webkit-scrollbar { display: none; }
  .tj-bt-top-chips a { white-space: nowrap; min-height: 38px; font-size: 13px; }
}
/* the bar sits inside scraped answer HTML: win over its ul/li/a/p styles */
.tj-chapter .tj-bt-top .tj-bt-top-chips { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.tj-chapter .tj-bt-top .tj-bt-top-chips li { margin: 0 !important; padding: 0 !important; list-style: none !important; }
.tj-chapter .tj-bt-top .tj-bt-top-chips li::before, .tj-chapter .tj-bt-top .tj-bt-top-chips li::marker { content: none !important; }
.tj-chapter .tj-bt-top .tj-bt-top-chips a { color: #5149E0 !important; font: 600 14px var(--tj-font-body) !important; text-decoration: none !important; }
.tj-chapter .tj-bt-top .tj-bt-top-chips a:hover { color: #fff !important; }
.tj-chapter .tj-bt-top .tj-bt-top-text { margin: 0 0 10px !important; color: var(--tj-ink) !important; }
@media (max-width: 600px) { .tj-chapter .tj-bt-top .tj-bt-top-chips { margin-right: -12px !important; padding-right: 12px !important; }
  .tj-chapter .tj-bt-top .tj-bt-top-chips a { font-size: 13px !important; } }

.tj-ai-note { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 16px; padding: 10px 14px; border: 1px solid #C9C5FF;
  border-radius: 12px; background: #F6F5FF; font-size: 14px; color: var(--tj-ink); }

/* /rewards — TalentJR Rewards (one points / badges / certificates system for every app) */
.tj-rw-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; padding: 20px; }
.tj-rw-points { display: flex; flex-direction: column; min-width: 140px; }
.tj-rw-points span { font: 700 40px/1 var(--tj-font-heading); color: var(--tj-action); }
.tj-rw-points small { margin-top: 4px; font-size: 13px; color: var(--tj-ink-muted); }
.tj-rw-month { flex: 1 1 320px; }
.tj-rw-month p { margin: 0 0 8px; }
.tj-rw-bar { height: 12px; border-radius: 999px; background: var(--tj-brand-50); overflow: hidden; }
.tj-rw-bar span { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--tj-action); transition: width .4s; }
.tj-rw-muted { color: var(--tj-ink-muted); font-size: 14px; }
.tj-rw-h3 { margin: 22px 0 10px; font: 600 18px var(--tj-font-heading); color: var(--tj-ink); }
.tj-rw-parts { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tj-rw-parts li { background: #fff; border: 1px solid var(--tj-border, #E8E2DC); border-radius: 999px; padding: 6px 12px; font-size: 0.9rem; }
.tj-rw-parts li.on { border-color: var(--tj-brand, #C2410C); background: #FFF4EC; }
.tj-rw-badges { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.tj-rw-badges li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; padding: 14px 10px; border: 1px solid var(--tj-line);
  border-radius: 12px; background: #fff; }
.tj-rw-badges li span { font-size: 30px; }
.tj-rw-badges li strong { font: 600 14px var(--tj-font-heading); color: var(--tj-ink); }
.tj-rw-badges li small { font-size: 12px; color: var(--tj-ink-muted); }
.tj-rw-badges li.on { border-color: var(--tj-action); background: var(--tj-brand-50); }
.tj-rw-badges li.off span { filter: grayscale(1); opacity: .45; }
.tj-rw-certs, .tj-rw-top { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.tj-rw-certs li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; padding: 12px 16px; }
.tj-rw-certs a { font-weight: 600; color: var(--tj-action); }
.tj-rw-win { margin-top: 14px; padding: 18px 20px; border-color: var(--tj-action); background: #FFF4EC; }
.tj-rw-win h3 { margin: 0 0 6px; font: 700 20px var(--tj-font-heading); color: var(--tj-ink); }
.tj-rw-earn, .tj-rw-levels { list-style: none; margin: 0 0 10px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.tj-rw-earn li { display: flex; gap: 12px; align-items: flex-start; padding: 16px; }
.tj-rw-emoji { flex: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 10px; background: var(--tj-brand-50); font-size: 22px; }
.tj-rw-earn strong { display: block; color: var(--tj-ink); }
.tj-rw-earn em { display: block; font-style: normal; font-weight: 700; color: var(--tj-action); }
.tj-rw-earn a { font-size: 13px; font-weight: 600; color: var(--tj-action); }
.tj-rw-levels li { padding: 18px; text-align: center; }
.tj-rw-level-emoji { font-size: 40px; }
.tj-rw-levels h3 { margin: 4px 0; font: 700 20px var(--tj-font-heading); color: var(--tj-ink); }
.tj-rw-levels p { margin: 0; color: var(--tj-ink-muted); font-size: 14px; }
.tj-rw-levels .tj-rw-gift { margin-top: 8px; color: var(--tj-ink); }
.tj-rw-top li { display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
.tj-rw-top li > span:nth-child(2) { flex: 1; }
.tj-rw-top small { display: block; color: var(--tj-ink-muted); font-size: 13px; }
.tj-rw-rank { font: 700 20px var(--tj-font-heading); color: var(--tj-action); min-width: 40px; }
.tj-rw-tag { padding: 3px 10px; border-radius: 999px; background: var(--tj-brand-50); font-size: 13px; font-weight: 600; white-space: nowrap; }
.tj-rw [hidden] { display: none !important; }

.tj-rw-note { margin: 0 0 12px; padding: 10px 14px; border-radius: 10px; background: var(--tj-brand-50); font-size: 14px; color: var(--tj-ink); }
.tj-rw-tag.soft { background: #F1F0EE; color: var(--tj-ink-muted); font-weight: 500; }
.tj-rw-example { position: relative; opacity: .75; border-style: dashed; }
.tj-rw-ex { position: absolute; top: -9px; right: 12px; padding: 1px 8px; border-radius: 999px; background: var(--tj-ink-muted); color: #fff; font-size: 11px; font-weight: 600; }
/* Rewards gifts with value (2026-10-03) */
.tj-rw-giftbox { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-top: 12px; padding: 12px; border-radius: 12px; background: var(--tj-brand-50); }
.tj-rw-gift-label { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--tj-ink-muted); }
.tj-rw-giftbox strong { font: 700 16px var(--tj-font-heading); color: var(--tj-ink); }
.tj-rw-worth { padding: 1px 10px; border-radius: 999px; background: var(--tj-action); color: #fff; font-size: 12px; font-weight: 700; }
.tj-rw-giftbox small { margin-top: 4px; font-size: 12px; line-height: 1.4; color: var(--tj-ink-muted); }

/* "Students asked the AI tutor" — saved AI answers on chapter pages (crawlable) */
.tj-asked { padding: 20px; margin: 24px 0; }
.tj-asked h2 { margin: 0 0 4px; font: 700 20px var(--tj-font-heading); color: var(--tj-ink); }
.tj-asked-sub { margin: 0 0 8px; font-size: 14px; color: var(--tj-ink-muted); }
.tj-asked-item { border-top: 1px solid var(--tj-line); padding: 10px 0; }
.tj-asked-item summary { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; cursor: pointer; list-style: none; }
.tj-asked-item summary::-webkit-details-marker { display: none; }
.tj-asked-item summary h3 { margin: 0; font: 600 16px var(--tj-font-heading); color: var(--tj-ink); }
.tj-asked-item summary span { color: var(--tj-action); font-weight: 700; transition: transform .15s; }
.tj-asked-item[open] summary span { transform: rotate(45deg); }
.tj-asked-answer { margin-top: 8px; font-size: 15px; line-height: 1.6; color: var(--tj-ink); }
.tj-asked-answer p { margin: 0 0 8px; }
.tj-asked-answer ul, .tj-asked-answer ol { margin: 0 0 8px; padding-left: 22px; }
.tj-asked-more { margin: 4px 0 0; font-size: 14px; }
.tj-asked-more a { font-weight: 600; color: #5149E0; }
.tj-asked-more span { color: var(--tj-ink-muted); }

/* ── TalentJR Abacus (2026-10-04): engine assets/js/tj-abacus.js + /abacus pages ── */
.tj-abacus svg { display: block; width: 100%; height: auto; max-width: 100%; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.tj-ab-bead { cursor: pointer; transition: transform .18s cubic-bezier(.3,.7,.4,1), filter .15s; stroke: #7C2D12; stroke-width: 1; }
.tj-ab-bead:hover { filter: brightness(1.12) drop-shadow(0 0 3px rgba(251,146,60,.8)); }
.tj-ab-rod { outline: none; }
.tj-ab-rod:focus-visible rect:first-child { fill: rgba(194,65,12,.08); stroke: #C2410C; stroke-width: 2; stroke-dasharray: 4 3; }
.tj-ab-rod.is-hl rect:first-child { fill: rgba(250,204,21,.18); }
.tj-ab-box { width: 100%; }
.tj-ab-page { max-width: 1140px; margin: 0 auto; padding: 20px 16px 8px; }
.tj-ab-hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: 28px; align-items: center; }
.tj-ab-hero h1, .tj-ab-head h1 { margin: 10px 0 8px; font: 700 34px/1.2 var(--tj-font-heading); color: var(--tj-ink); }
.tj-ab-lead { margin: 0 0 16px; font-size: 16px; line-height: 1.6; color: var(--tj-ink-muted); max-width: 720px; }
.tj-ab-cta { display: flex; flex-wrap: wrap; gap: 10px; }
.tj-ab-try { background: #fff; border: 1px solid var(--tj-line); border-radius: 16px; padding: 14px; box-shadow: 0 8px 24px rgba(31,42,68,.06); }
.tj-ab-readout { margin: 8px 0 0; text-align: center; font-size: 15px; color: var(--tj-ink-muted); }
.tj-ab-readout strong { color: var(--tj-ink); font-size: 18px; }
.tj-ab-section { margin-top: 34px; }
.tj-ab-section h2 { margin: 0 0 6px; font: 700 24px var(--tj-font-heading); color: var(--tj-ink); }
.tj-ab-sub { margin: 0 0 12px; color: var(--tj-ink-muted); font-size: 15px; }
.tj-ab-h3 { margin: 18px 0 8px; font: 600 18px var(--tj-font-heading); color: var(--tj-ink); }
.tj-ab-levels { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.tj-ab-levels a { position: relative; display: flex; flex-direction: column; gap: 2px; height: 100%; padding: 12px 14px; border: 1px solid var(--tj-line);
  border-radius: 12px; background: #fff; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.tj-ab-levels a:hover { border-color: var(--tj-action); box-shadow: 0 4px 14px rgba(194,65,12,.12); text-decoration: none; }
.tj-ab-lvl-n { font: 600 12px var(--tj-font-body); letter-spacing: .05em; text-transform: uppercase; color: var(--tj-action); }
.tj-ab-levels strong { font: 600 16px var(--tj-font-heading); color: var(--tj-ink); }
.tj-ab-levels small { font-size: 13px; color: var(--tj-ink-muted); }
.tj-ab-tick { margin-top: 4px; font-size: 12px; font-weight: 700; color: #15803D; }
.tj-ab-steps { margin: 0; padding-left: 22px; line-height: 1.6; }
.tj-ab-steps li { margin-bottom: 6px; }
.tj-ab-more { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tj-ab-more a { display: flex; gap: 12px; align-items: flex-start; padding: 16px; text-decoration: none; color: var(--tj-ink-muted); font-size: 14px; }
.tj-ab-more a > span:first-child { font-size: 26px; }
.tj-ab-more strong { display: block; color: var(--tj-ink); font-size: 16px; }
.tj-ab-tool { background: #fff; border: 1px solid var(--tj-line); border-radius: 16px; padding: 14px; }
.tj-ab-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-bottom: 10px; font-size: 14px; }
.tj-ab-toolbar select { padding: 4px 8px; border: 1px solid var(--tj-line); border-radius: 6px; }
.tj-ab-total { font-size: 16px; } .tj-ab-total strong { font: 700 24px var(--tj-font-heading); color: var(--tj-action); }
.tj-ab-switch { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-weight: 400; }
.tj-ab-big { max-width: 980px; margin: 0 auto; }
.tj-ab-show { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; margin-top: 12px; }
.tj-ab-show input, .tj-ab-answer input { font: 600 18px var(--tj-font-body); padding: 8px 12px; border: 1px solid var(--tj-line); border-radius: 8px; width: 160px; }
.tj-ab-gamebar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.tj-ab-target { font-size: 18px; } .tj-ab-target strong { font: 700 28px var(--tj-font-heading); color: var(--tj-action); }
.tj-ab-streak { font-weight: 600; }
.tj-ab-link { margin-left: 14px; font-weight: 600; color: var(--tj-action); }
.tj-ab-lvlnav { display: flex; gap: 16px; font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.tj-ab-lvlnav a { color: var(--tj-action); }
.tj-ab-passed { display: inline-block; margin: 0; padding: 4px 12px; border-radius: 999px; background: #DCFCE7; color: #166534; font-weight: 700; font-size: 14px; }
.tj-ab-rules { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.tj-ab-rules li { padding: 8px 12px; border: 1px solid var(--tj-line); border-radius: 10px; background: #fff; font: 600 15px var(--tj-font-body); font-variant-numeric: tabular-nums; }
.tj-ab-rules strong { color: var(--tj-action); }
.tj-ab-demo { display: grid; grid-template-columns: minmax(0, 420px) 1fr; gap: 20px; align-items: center; }
.tj-ab-demo-ctl .tj-ab-readout { text-align: left; margin-bottom: 10px; }
.tj-ab-work { display: grid; grid-template-columns: 300px 1fr; gap: 18px; align-items: start; }
.tj-ab-sumcard { padding: 16px; text-align: center; }
.tj-ab-sum { min-height: 120px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.tj-ab-rows { font: 700 26px/1.25 var(--tj-font-body); font-variant-numeric: tabular-nums; border-collapse: collapse; }
.tj-ab-rows td { text-align: right; padding: 0 4px; }
.tj-ab-rows td:first-child { color: var(--tj-ink-muted); width: 26px; }
.tj-ab-rows .tj-ab-line td { border-top: 2px solid var(--tj-ink); color: var(--tj-action); }
.tj-ab-op, .tj-ab-flash { font: 700 32px var(--tj-font-heading); color: var(--tj-ink); font-variant-numeric: tabular-nums; }
.tj-ab-flash { font-size: 54px; color: var(--tj-action); }
.tj-ab-answer { display: flex; gap: 8px; justify-content: center; margin-top: 10px; }
.tj-ab-actions { display: flex; justify-content: center; gap: 14px; margin: 8px 0 0; }
.tj-ab-linkbtn { background: none; border: 0; padding: 4px 2px; font: 600 14px var(--tj-font-body); color: var(--tj-action); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.tj-ab-feedback { min-height: 22px; margin: 8px 0 0; font-weight: 600; }
.tj-ab-score { margin: 4px 0 0; font-size: 13px; color: var(--tj-ink-muted); }
.tj-ab-test { padding: 18px; text-align: center; }
.tj-ab-tprog { margin: 0 0 6px; color: var(--tj-ink-muted); font-weight: 600; }
.tj-ab-result { font-size: 20px; }
.tj-ab-tutor { padding: 20px; }
.tj-ab-starters { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tj-ab-starters button { min-height: 40px; padding: 0 14px; border: 1px solid #C9C5FF; border-radius: 999px; background: #F6F5FF; color: #5149E0; font: 600 14px var(--tj-font-body); cursor: pointer; text-align: left; }
.tj-ab-log { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.tj-ab-msg { padding: 10px 14px; border-radius: 12px; max-width: 90%; font-size: 15px; line-height: 1.55; }
.tj-ab-msg.me { align-self: flex-end; background: var(--tj-action); color: #fff; }
.tj-ab-msg.ai { align-self: flex-start; background: #fff; border: 1px solid var(--tj-line); }
.tj-ab-msg p { margin: 0 0 6px; } .tj-ab-msg ul { margin: 0 0 6px; padding-left: 20px; }
.tj-ab-ask { display: flex; gap: 8px; } .tj-ab-ask textarea { flex: 1; padding: 10px; border: 1px solid var(--tj-line); border-radius: 8px; font: 15px var(--tj-font-body); }
.tj-ab-page [hidden] { display: none !important; }
@media (max-width: 991px) { .tj-ab-levels { grid-template-columns: repeat(3, 1fr); } .tj-ab-work { grid-template-columns: 1fr; } }
@media (max-width: 767px) {
  .tj-ab-hero, .tj-ab-demo, .tj-ab-more { grid-template-columns: 1fr; }
  .tj-ab-hero h1, .tj-ab-head h1 { font-size: 26px; }
  .tj-ab-levels { grid-template-columns: repeat(2, 1fr); }
  .tj-ab-section h2 { font-size: 21px; }
}
.tj-ab-work .tj-ab-box { max-width: 520px; }
.tj-ab-work > div:last-child { display: flex; flex-direction: column; align-items: center; }
/* practice: sum + answer on the left, abacus on the right; phones: sum → abacus → answer */
.tj-ab-work { grid-template-columns: 300px 1fr; grid-template-areas: "sum abacus" "ans abacus"; align-items: start; }
.tj-ab-a-sum { grid-area: sum; } .tj-ab-a-abacus { grid-area: abacus; } .tj-ab-a-ans { grid-area: ans; }
.tj-ab-a-sum .tj-ab-sum { min-height: 140px; }
@media (max-width: 991px) { .tj-ab-work { grid-template-columns: 1fr; grid-template-areas: "sum" "abacus" "ans"; } }
.tj-ab-howsteps { text-align: left; margin: 10px 0 0; padding-left: 20px; font-size: 14px; line-height: 1.45; }
.tj-ab-howsteps li { padding: 3px 6px; border-radius: 6px; color: var(--tj-ink-muted); }
.tj-ab-howsteps li.head { list-style: none; margin-left: -18px; font-weight: 600; color: var(--tj-ink); }
.tj-ab-howsteps li.now { background: #FEF3C7; color: var(--tj-ink); font-weight: 600; }
.tj-ab-howsteps { list-style: none; padding-left: 0; }
.tj-ab-howsteps li:not(.head)::before { content: "• "; color: var(--tj-action); font-weight: 700; }
.tj-ab-howsteps li.head { margin-left: 0; }
.tj-ab-toolbar label:not(.tj-ab-switch) { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-weight: 600; }
.tj-ab-toolbar select { -webkit-appearance: menulist; appearance: auto; background: #fff; color: var(--tj-ink); opacity: 1; height: 34px; }
/* level test: abacus-first (Check → Next), progress dots */
.tj-ab-test { text-align: left; }
.tj-ab-test > .tj-btn { display: block; margin: 0 auto; }
.tj-ab-tdots { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-bottom: 14px; }
.tj-ab-tdots span { width: 14px; height: 14px; border-radius: 50%; background: var(--tj-line); }
.tj-ab-tdots span.now { outline: 2px solid var(--tj-action); outline-offset: 1px; }
.tj-ab-tdots span.ok { background: #16A34A; } .tj-ab-tdots span.no { background: #DC2626; }
.tj-ab-test .tj-ab-a-ans { text-align: center; }
.tj-ab-test .tj-ab-result { text-align: center; }
/* abacus level badges + certificates */
.tj-ab-lvl-badge { position: absolute; top: 10px; right: 12px; font-size: 22px; filter: grayscale(1); opacity: .4; }
.tj-ab-levels a.is-passed { border-color: #86EFAC; background: #F0FDF4; }
.tj-ab-levels a.is-passed .tj-ab-lvl-badge { filter: none; opacity: 1; }
.tj-ab-certnote { margin: 0 0 12px; padding: 10px 14px; border-radius: 10px; background: #FFF4EC; font-size: 14px; color: var(--tj-ink); }
.tj-ab-certnote a { font-weight: 600; color: var(--tj-action); }
.tj-ab-certwin { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 16px; margin: 10px 0 14px; padding: 14px;
  border: 2px solid #FCD34D; border-radius: 14px; background: #FFFBEB; text-align: left; }
.tj-ab-badgebig { font-size: 44px; line-height: 1; }
.tj-ab-passed a { color: #166534; text-decoration: underline; }
/* abacus teacher enquiry */
.tj-ab-modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.tj-ab-modes .tj-card { padding: 14px; display: flex; flex-direction: column; gap: 2px; }
.tj-ab-modes span { font-size: 26px; } .tj-ab-modes strong { color: var(--tj-ink); } .tj-ab-modes small { color: var(--tj-ink-muted); font-size: 13px; }
.tj-ab-enq { padding: 18px; display: flex; flex-direction: column; gap: 12px; max-width: 860px; }
.tj-ab-enq label { display: flex; flex-direction: column; gap: 4px; margin: 0; font-weight: 600; color: var(--tj-ink); }
.tj-ab-enq small { font-weight: 400; color: var(--tj-ink-muted); }
.tj-ab-enq input:not([type=radio]):not([type=checkbox]), .tj-ab-enq select { font: 400 15px var(--tj-font-body); padding: 10px 12px; border: 1px solid var(--tj-line); border-radius: 8px; background: #fff; color: var(--tj-ink); width: 100%; height: auto; }
.tj-ab-enq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tj-ab-enq fieldset { border: 0; padding: 0; margin: 0; } .tj-ab-enq legend { font-weight: 600; font-size: 15px; border: 0; margin: 0 0 6px; color: var(--tj-ink); }
.tj-ab-enq-modes { display: flex; flex-wrap: wrap; gap: 8px; }
.tj-ab-enq-modes label { flex-direction: row; font-weight: 400; cursor: pointer; }
.tj-ab-enq-modes input { position: absolute; opacity: 0; }
.tj-ab-enq-modes span { padding: 8px 14px; border: 1px solid var(--tj-line); border-radius: 999px; background: #fff; }
.tj-ab-enq-modes input:checked + span { border-color: var(--tj-action); background: var(--tj-brand-50); box-shadow: inset 0 0 0 1px var(--tj-action); font-weight: 600; }
.tj-ab-enq-modes input:focus-visible + span { outline: 2px solid var(--tj-action); outline-offset: 2px; }
.tj-ab-consent { flex-direction: row !important; align-items: flex-start; gap: 8px !important; font-weight: 400 !important; }
.tj-ab-consent input { margin-top: 4px; }
.tj-ab-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.tj-ab-enq .tj-btn { align-self: flex-start; }
@media (max-width: 767px) { .tj-ab-modes, .tj-ab-enq-grid { grid-template-columns: 1fr; } }
@media (max-width: 767px) {
  .tj-ab-modes { gap: 6px; }
  .tj-ab-modes .tj-card { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0 10px; padding: 10px 12px; }
  .tj-ab-modes span { font-size: 22px; } .tj-ab-modes small { flex-basis: 100%; padding-left: 32px; }
}

/* ── Teacher call-back ("<Subject> classes near you — online or at home"), every subject: views/common/tj_teacher_enquiry.php ── */
.tj-teq { margin: 32px 0 8px; }
.tj-teq h2 { margin: 0 0 6px; font: 700 24px var(--tj-font-heading); color: var(--tj-ink); }
.tj-teq-sub { margin: 0 0 12px; color: var(--tj-ink-muted); font-size: 15px; }
.tj-teq-modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.tj-teq-modes .tj-card { padding: 14px; display: flex; flex-direction: column; gap: 2px; }
.tj-teq-modes span { font-size: 26px; } .tj-teq-modes strong { color: var(--tj-ink); } .tj-teq-modes small { color: var(--tj-ink-muted); font-size: 13px; }
.tj-teq-form { padding: 18px; display: flex; flex-direction: column; gap: 12px; max-width: 860px; }
.tj-teq-form[hidden], .tj-teq-open[hidden] { display: none !important; }
.tj-teq-form label { display: flex; flex-direction: column; gap: 4px; margin: 0; font-weight: 600; color: var(--tj-ink); }
.tj-teq-form small { font-weight: 400; color: var(--tj-ink-muted); }
.tj-teq-form input:not([type=radio]):not([type=checkbox]), .tj-teq-form select { font: 400 15px var(--tj-font-body); padding: 10px 12px; border: 1px solid var(--tj-line);
  border-radius: 8px; background: #fff; color: var(--tj-ink); width: 100%; height: auto; }
.tj-teq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tj-teq-form fieldset { border: 0; padding: 0; margin: 0; } .tj-teq-form legend { font-weight: 600; font-size: 15px; border: 0; margin: 0 0 6px; color: var(--tj-ink); }
.tj-teq-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tj-teq-chips label { flex-direction: row; font-weight: 400; cursor: pointer; }
.tj-teq-chips input { position: absolute; opacity: 0; }
.tj-teq-chips span { padding: 8px 14px; border: 1px solid var(--tj-line); border-radius: 999px; background: #fff; }
.tj-teq-chips input:checked + span { border-color: var(--tj-action); background: var(--tj-brand-50); box-shadow: inset 0 0 0 1px var(--tj-action); font-weight: 600; }
.tj-teq-chips input:focus-visible + span { outline: 2px solid var(--tj-action); outline-offset: 2px; }
.tj-teq-consent { flex-direction: row !important; align-items: flex-start; gap: 8px !important; font-weight: 400 !important; }
.tj-teq-consent input { margin-top: 4px; }
.tj-teq-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.tj-teq-form .tj-btn { align-self: flex-start; }
.tj-teq-msg { min-height: 0; margin: 0; color: #B91C1C; font-weight: 600; }
.tj-teq-done { font-size: 18px; margin: 0; }
/* compact (chapter pages): smaller heading and cards, button opens the form */
.tj-teq-compact { padding: 18px 20px; border: 1px solid var(--tj-line); border-radius: 14px; background: #fff; }
.tj-teq-compact h2 { font-size: 20px; }
.tj-teq-compact .tj-teq-modes .tj-card { padding: 10px 12px; box-shadow: none; }
.tj-teq-compact .tj-teq-modes span { font-size: 20px; }
.tj-teq-compact .tj-teq-form { padding: 0; border: 0; box-shadow: none; max-width: none; }
@media (max-width: 767px) {
  .tj-teq-modes, .tj-teq-grid { grid-template-columns: 1fr; }
  .tj-teq-modes { gap: 6px; }
  .tj-teq-modes .tj-card { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0 10px; padding: 10px 12px; }
  .tj-teq-modes span { font-size: 22px; } .tj-teq-modes small { flex-basis: 100%; padding-left: 32px; }
  .tj-teq h2 { font-size: 21px; }
}
@media (max-width: 767px) { .tj-teq-compact .tj-teq-modes small { display: none; } .tj-teq-compact .tj-teq-modes .tj-card { padding: 8px 12px; } }
/* abacus quick start (TJAbacus.guide) + bead key */
.tj-ab-key { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; margin: 6px 0 0; font-size: 13px; color: var(--tj-ink-muted); }
.tj-ab-key span { display: inline-flex; align-items: center; gap: 6px; }
.tj-ab-k { display: inline-block; width: 22px; height: 11px; background: linear-gradient(#FDBA74, #EA580C 50%, #9A3412);
  clip-path: polygon(0 50%, 30% 0, 70% 0, 100% 50%, 70% 100%, 30% 100%); }
.tj-ab-k-up { background: linear-gradient(#FED7AA, #F97316 50%, #C2410C); }
.tj-abg { margin-top: 12px; padding: 14px 16px; border: 2px solid #FCD34D; border-radius: 14px; background: #FFFBEB; text-align: left; }
.tj-abg[hidden], .tj-abg-again[hidden], .tj-abg-start[hidden] { display: none !important; }
.tj-abg-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px; margin-bottom: 6px; }
.tj-abg-head strong { font: 700 15px var(--tj-font-heading); color: #92400E; }
.tj-abg-dots { display: inline-flex; gap: 5px; }
.tj-abg-dots span { width: 9px; height: 9px; border-radius: 50%; background: #FDE68A; }
.tj-abg-dots span.on { background: #D97706; } .tj-abg-dots span.now { background: #fff; box-shadow: 0 0 0 2px #D97706; }
.tj-abg-text { margin: 0 0 6px; font-size: 15px; line-height: 1.5; color: var(--tj-ink); }
.tj-abg-ok { min-height: 20px; margin: 0 0 6px; font-size: 14px; color: var(--tj-ink-muted); }
.tj-abg-ok.good { color: #166534; font-weight: 600; }
.tj-abg-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 0; }
.tj-abg-link { background: none; border: 0; padding: 4px 2px; font: 600 13px var(--tj-font-body); color: var(--tj-ink-muted); text-decoration: underline; cursor: pointer; }
.tj-abg-again { margin: 8px 0 0; text-align: center; font-size: 13px; color: #166534; }
.tj-abg-start { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 12px; margin: 0 0 12px; padding: 10px;
  border: 1px dashed #FCD34D; border-radius: 12px; background: #FFFBEB; font-weight: 600; color: #92400E; }
.tj-ab-rod.is-hl rect:first-child { fill: rgba(250,204,21,.28); stroke: #F59E0B; stroke-width: 2; }

/* ── Vedic maths (2026-10-05): views/vedic/*, engine assets/js/tj-vedic.js (reuses .tj-ab-* layout) ── */
.tj-vm-sutra { margin: 0 0 10px; padding: 8px 14px; border-left: 4px solid var(--tj-action); background: #FFF4EC; border-radius: 6px; }
.tj-vm-example { padding: 16px 18px; }
.tj-vm-example ol { margin: 0 0 8px; padding-left: 22px; line-height: 1.7; }
.tj-vm-example li.now, .tj-vm-work li.now { background: #FEF3C7; border-radius: 6px; font-weight: 600; }
.tj-vm-check { margin: 0 0 10px; color: #166534; font-weight: 600; font-size: 14px; }
.tj-vm-card { padding: 18px; text-align: center; max-width: 640px; }
.tj-vm-q { font: 700 34px var(--tj-font-heading); color: var(--tj-ink); font-variant-numeric: tabular-nums; margin: 4px 0 10px; }
.tj-vm-ans { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: flex-end; }
.tj-vm-ans label { display: flex; flex-direction: column; gap: 2px; margin: 0; font-size: 13px; color: var(--tj-ink-muted); font-weight: 600; }
.tj-vm-ans input { font: 600 20px var(--tj-font-body); padding: 8px 12px; border: 1px solid var(--tj-line); border-radius: 8px; width: 170px; }
.tj-vm-ans label input { width: 120px; }
.tj-vm-work { margin-top: 12px; text-align: left; }
.tj-vm-work[hidden] { display: none !important; }
.tj-vm-board { padding: 12px 16px; border-radius: 10px; background: #1F2A44; color: #FDE68A; font: 700 24px ui-monospace, SFMono-Regular, Menlo, monospace; text-align: center; }
.tj-vm-try { text-align: center; }
.tj-vm-try-h { margin: 0 0 4px; color: var(--tj-ink-muted); }
.tj-vm-levels small { font-variant-numeric: tabular-nums; }
.tj-vm-part { margin: 20px 0 2px; font-size: 1.1rem; }
.tj-vm-partprog { font: 500 0.85rem var(--tj-font-body, Inter, sans-serif); color: var(--tj-ink-muted); }
.tj-vm-part:first-of-type { margin-top: 8px; }
.tj-vm-ans [data-v] { min-width: 88px; }
.tj-vm-ans [data-v]:disabled { opacity: .55; cursor: default; }
.tj-vm-ans [data-v].ok, .tj-vm-ans [data-v].no { opacity: 1; }
.tj-vm-ans [data-v].ok { border-color: #16A34A; background: #DCFCE7; color: #14532D; box-shadow: 0 0 0 2px #16A34A inset; }
.tj-vm-ans [data-v].no { border-color: #DC2626; background: #FEE2E2; color: #7F1D1D; box-shadow: 0 0 0 2px #DC2626 inset; }
.tj-vm-ans [data-v].ok::after { content: " ✓"; font-weight: 800; }
.tj-vm-ans [data-v].no::after { content: " ✗"; font-weight: 800; }
.tj-vbar { text-decoration: overline; text-decoration-thickness: 2px; }
.tj-vm-ans input.tj-vm-alg { width: min(300px, 100%); max-width: none; }
.tj-vm-ans label input[name="x"], .tj-vm-ans label input[name="y"] { width: 72px; }
@media (max-width: 767px) { .tj-vm-q { font-size: 28px; } .tj-vm-board { font-size: 19px; } }
/* /courses catalogue */
.tj-courses-table { width: 100%; border-collapse: separate; border-spacing: 0 8px; }
.tj-courses-table th { text-align: left; font: 600 12px var(--tj-font-body); text-transform: uppercase; letter-spacing: .05em; color: var(--tj-ink-muted); padding: 0 12px; }
.tj-courses-table td { background: #fff; padding: 14px 12px; border-top: 1px solid var(--tj-line); border-bottom: 1px solid var(--tj-line); vertical-align: middle; }
.tj-courses-table td:first-child { border-left: 1px solid var(--tj-line); border-radius: 12px 0 0 12px; font: 700 18px var(--tj-font-heading); color: var(--tj-action); width: 44px; text-align: center; }
.tj-courses-table td:last-child { border-right: 1px solid var(--tj-line); border-radius: 0 12px 12px 0; text-align: right; }
.tj-courses-table td a strong { color: var(--tj-ink); font: 600 17px var(--tj-font-heading); }
.tj-courses-table td small { display: block; margin-top: 2px; color: var(--tj-ink-muted); font-size: 13px; }
.tj-courses-table td.age { white-space: nowrap; font-weight: 700; color: var(--tj-ink); }
@media (max-width: 640px) {
  .tj-courses-table thead { display: none; }
  .tj-courses-table tr { display: grid; grid-template-columns: 40px 1fr; background: #fff; border: 1px solid var(--tj-line); border-radius: 12px; margin-bottom: 8px; }
  .tj-courses-table td { border: 0 !important; padding: 8px 10px; border-radius: 0 !important; }
  .tj-courses-table td:first-child { grid-row: span 3; }
  .tj-courses-table td.age::before { content: "Ideal age: "; font-weight: 400; color: var(--tj-ink-muted); }
  .tj-courses-table td:last-child { text-align: left; }
}
.tj-courses-table th, .tj-courses-table td.go .tj-btn { white-space: nowrap; }

/* ── My learning dashboard (/my-learning, views/mylearning/index.php) ── */
.tj-ml { max-width: 1120px; margin: 0 auto; padding: 24px 16px 48px; }
.tj-ml-head h1 { margin: 8px 0 4px; font: 700 clamp(1.6rem, 3vw, 2.1rem) var(--tj-font-heading); color: var(--tj-ink); }
.tj-ml-h2 { margin: 28px 0 12px; font: 600 1.25rem var(--tj-font-heading); color: var(--tj-ink); }
.tj-ml-muted { color: var(--tj-ink-muted); font-size: 0.9rem; }
.tj-ml-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 18px 0; }
.tj-ml-stats .tj-card { padding: 14px 16px; }
.tj-ml-stats small { display: block; color: var(--tj-ink-muted); font-size: 0.85rem; }
.tj-ml-stats strong { font: 700 1.5rem var(--tj-font-heading); color: var(--tj-ink); }
.tj-ml-continue { display: flex; gap: 16px; align-items: flex-start; padding: 18px 20px; border-left: 4px solid var(--tj-action); }
.tj-ml-continue h2 { margin: 0 0 6px; font: 600 1.15rem var(--tj-font-heading); }
.tj-ml-continue p { margin: 6px 0; }
.tj-ml-icon { font-size: 1.8rem; line-height: 1; }
.tj-ml-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.tj-ml-course { padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; }
.tj-ml-course header { display: flex; align-items: center; gap: 10px; }
.tj-ml-course h3 { margin: 0; flex: 1; font: 600 1.1rem var(--tj-font-heading); }
.tj-ml-course h3 a { color: var(--tj-ink); text-decoration: none; }
.tj-ml-pct { font: 700 1.6rem var(--tj-font-heading); color: var(--tj-ink); }
.tj-ml-meter { display: block; height: 8px; border-radius: 4px; background: var(--tj-line); overflow: hidden; }
.tj-ml-meter span { display: block; height: 100%; border-radius: 4px; background: var(--tj-action); min-width: 0; }
.tj-ml-course p { margin: 0; }
.tj-ml-parts { list-style: none; margin: 4px 0; padding: 0; display: grid; gap: 6px; }
.tj-ml-parts li { display: grid; grid-template-columns: minmax(0, 1.4fr) 1fr auto; align-items: center; gap: 8px; font-size: 0.88rem; color: var(--tj-ink); }
.tj-ml-parts li span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tj-ml-parts small { color: var(--tj-ink-muted); min-width: 44px; text-align: right; }
.tj-ml-open { background: #FFF4EC; border-radius: var(--tj-radius-sm); padding: 6px 10px; font-size: 0.9rem; }
.tj-ml-next { font-size: 0.95rem; }
.tj-ml-time { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: end; padding-top: 6px; border-top: 1px solid var(--tj-line); }
.tj-ml-time > div:first-child small { display: block; color: var(--tj-ink-muted); font-size: 0.8rem; }
.tj-ml-time > div:first-child strong { font: 700 1.15rem var(--tj-font-heading); color: var(--tj-ink); }
.tj-ml-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; height: 64px; align-items: end; }
.tj-ml-day { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; outline: none; }
.tj-ml-bar { display: block; width: 100%; max-width: 18px; border-radius: 4px 4px 0 0; background: var(--tj-action); }
.tj-ml-day small { font-size: 0.7rem; color: var(--tj-ink-muted); margin-top: 2px; }
.tj-ml-tip { display: none; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); white-space: nowrap; background: var(--tj-ink);
  color: #fff; font-size: 0.75rem; padding: 3px 7px; border-radius: 6px; z-index: 2; }
.tj-ml-day:hover .tj-ml-tip, .tj-ml-day:focus .tj-ml-tip { display: block; }
.tj-ml-badges { font-size: 1.25rem; letter-spacing: 2px; }
.tj-ml-badges small { letter-spacing: 0; }
.tj-ml-certs { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 0.9rem; }
.tj-ml-start { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.tj-ml-start a { display: flex; gap: 12px; padding: 14px 16px; color: var(--tj-ink); text-decoration: none; }
.tj-ml-start a[hidden] { display: none !important; }
.tj-ml-start small { color: var(--tj-ink-muted); }
.tj-ml-signin { padding: 20px; margin: 18px 0; }
.tj-ml-local { margin: 8px 0 0; padding-left: 18px; }
@media (max-width: 720px) { .tj-ml-stats { grid-template-columns: repeat(2, 1fr); } .tj-ml-grid { grid-template-columns: 1fr; } }
.tj-continue { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; margin: 12px 0 4px; border-left: 4px solid var(--tj-action); }
.tj-continue > div { flex: 1; min-width: 220px; color: var(--tj-ink); }
.tj-continue small { color: var(--tj-ink-muted); }
.tj-continue-icon { font-size: 1.5rem; }
.tj-continue-dash { font-weight: 600; font-size: 0.9rem; }
.tj-continue .tj-btn-primary, .tj-continue .tj-btn-primary:hover { color: #fff; display: inline-flex; align-items: center; }
.tj-ml-continue .tj-btn-primary, .tj-ml-continue .tj-btn-primary:hover { color: #fff; }
.tj-continue[hidden] { display: none !important; }
.tj-mt-chart { overflow-x: auto; }
.tj-mt-chart table { border-collapse: collapse; font-variant-numeric: tabular-nums; min-width: 640px; width: 100%; background: var(--tj-card); }
.tj-mt-chart th, .tj-mt-chart td { border: 1px solid var(--tj-line); padding: 4px 6px; text-align: center; font-size: 0.85rem; }
.tj-mt-chart thead th, .tj-mt-chart tbody th { background: #FFF4EC; color: var(--tj-ink); font-weight: 700; }
#vm-clock.late { color: var(--tj-danger); font-weight: 700; }


/* ── Spoken English lesson (views/english/_lesson.php) ── */
.tj-en h2 { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tj-en-polly { display: flex; align-items: flex-end; gap: 10px; margin-bottom: 8px; }
.tj-en-parrot { font-size: 3rem; line-height: 1; display: inline-block; transform-origin: bottom center; }
.tj-en-parrot.hop { animation: tjEnHop .6s ease; }
@keyframes tjEnHop { 0% { transform: translateY(0) } 30% { transform: translateY(-14px) rotate(-6deg) } 60% { transform: translateY(0) rotate(4deg) } 100% { transform: none } }
.tj-en-bubble { position: relative; margin: 0 0 18px; padding: 10px 14px; background: var(--tj-card); border: 2px solid var(--tj-action); border-radius: 16px 16px 16px 4px;
  font-weight: 600; color: var(--tj-ink); max-width: 520px; }
.tj-en-tools { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin-bottom: 6px; color: var(--tj-ink-muted); font-size: .9rem; }
.tj-en-speed { display: inline-flex; gap: 6px; align-items: center; font-weight: 600; color: var(--tj-ink); }
.tj-en-cards { list-style: none; margin: 0 0 8px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; }
.tj-en-card { position: relative; width: 100%; height: 150px; border: 0; padding: 0; background: none; cursor: pointer; perspective: 600px; }
.tj-en-card .tj-en-front, .tj-en-card .tj-en-back { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  border-radius: 16px; border: 2px solid var(--tj-line); background: var(--tj-card); backface-visibility: hidden; transition: transform .5s ease, border-color .2s; }
.tj-en-card .tj-en-back { transform: rotateY(180deg); background: #FFF4EC; }
.tj-en-card.flipped .tj-en-front { transform: rotateY(-180deg); }
.tj-en-card.flipped .tj-en-back { transform: rotateY(0); }
.tj-en-card.heard .tj-en-front, .tj-en-card.lit .tj-en-front { border-color: var(--tj-action); }
.tj-en-card.lit { animation: tjEnPop .5s ease; }
.tj-en-card.pop .tj-en-pic { animation: tjEnPop .45s ease; }
@keyframes tjEnPop { 0% { transform: scale(1) } 40% { transform: scale(1.18) } 100% { transform: scale(1) } }
.tj-en-pic { font-size: 3.2rem; line-height: 1.1; display: inline-block; }
.tj-en-card strong { font: 700 1.05rem var(--tj-font-heading); color: var(--tj-ink); }
.tj-en-card small { font-size: 1rem; color: var(--tj-ink); }
.tj-en-sents { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 8px; }
.tj-en-sents li { display: flex; align-items: center; gap: 12px; padding: 10px 14px; transition: box-shadow .2s; }
.tj-en-sents li.playing { box-shadow: 0 0 0 3px #FDBA74; }
.tj-en-semoji { font-size: 1.8rem; }
.tj-en-stext { flex: 1; font-size: 1.15rem; color: var(--tj-ink); line-height: 1.5; }
.tj-en-stext span { padding: 1px 2px; border-radius: 6px; transition: background .15s, color .15s; }
.tj-en-stext span.on { background: var(--tj-action); color: #fff; }
.tj-en-play { border: 0; background: #FFF4EC; border-radius: 50%; width: 44px; height: 44px; font-size: 1.3rem; cursor: pointer; flex: none; }
.tj-en-chat { display: flex; flex-direction: column; gap: 8px; min-height: 120px; padding: 14px; }
.tj-en-msg { max-width: 78%; padding: 8px 12px; border-radius: 14px; background: #EEF2FF; color: var(--tj-ink); }
.tj-en-msg b { display: block; font-size: .78rem; color: var(--tj-ink-muted); }
.tj-en-msg.r { align-self: flex-end; background: #FFF4EC; border-radius: 14px 14px 4px 14px; }
.tj-en-msg.l { border-radius: 14px 14px 14px 4px; }
.tj-en-msg.me { border: 2px dashed var(--tj-action); }
.tj-en-got { display: block; font-style: normal; margin-top: 2px; }
.tj-en-chat-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.tj-en-say { text-align: center; padding: 18px; }
.tj-en-say-pic { font-size: 5rem; line-height: 1.1; display: inline-block; }
.tj-en-say-pic.pop { animation: tjEnPop .5s ease; }
.tj-en-say-text { font: 700 1.5rem var(--tj-font-heading); color: var(--tj-ink); margin: 6px 0 12px; }
.tj-en-say p { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.tj-en-mic.listening { animation: tjEnPulse 1s infinite; }
@keyframes tjEnPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(194, 65, 12, .5) } 50% { box-shadow: 0 0 0 10px rgba(194, 65, 12, 0) } }
.tj-en-stars { font-size: 1.6rem; min-height: 2rem; }
.tj-en-privacy { font-size: .85rem; }
/* test / practice: listen mode + picture options + sentence-builder tiles (views/skill/level.php) */
.tj-vm-ans .tj-en-opt { display: inline-flex; align-items: center; gap: 6px; }
.tj-vm-ans .tj-en-opt span { font-size: 1.5rem; }
.tj-en-listen { font-size: 1.1rem; }
.tj-en-tiles { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 8px 0; min-height: 46px; }
.tj-en-tiles button { border: 2px solid var(--tj-line); background: var(--tj-card); border-radius: 10px; padding: 8px 12px; font: 600 1rem var(--tj-font-body); cursor: pointer; }
.tj-en-line { border-bottom: 2px dashed var(--tj-action); min-height: 46px; width: 100%; }
.tj-en-line button { border-color: var(--tj-action); background: #FFF4EC; }
@media (prefers-reduced-motion: reduce) { .tj-en-parrot.hop, .tj-en-card.lit, .tj-en-card.pop .tj-en-pic, .tj-en-say-pic.pop, .tj-en-mic.listening { animation: none; }
  .tj-en-card .tj-en-front, .tj-en-card .tj-en-back { transition: none; } }
@media (max-width: 600px) { .tj-en-cards { grid-template-columns: repeat(2, 1fr); } .tj-en-msg { max-width: 92%; } }


/* courses page featured card */
.tj-courses-featured { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; margin: 4px 0 18px; padding: 16px 18px;
  border: 2px solid #A7F3D0; background: linear-gradient(120deg, #ECFDF5, var(--tj-card) 70%); color: var(--tj-ink); text-decoration: none; }
.tj-courses-featured-icon { font-size: 2.6rem; }
.tj-courses-featured strong { font: 700 1.2rem var(--tj-font-heading); }
.tj-courses-featured small { color: var(--tj-ink-muted); }
.tj-courses-featured .tj-btn-primary { color: #fff; }
@media (max-width: 640px) { .tj-courses-featured { grid-template-columns: auto 1fr; } .tj-courses-featured .tj-btn { grid-column: 1 / -1; justify-self: start; } }
/* ── learning games (/games, views/playgames/*, assets/js/tj-gameplay.js) ── */
.tj-gm-hero { margin: 8px 0 14px; }
.tj-gm-hero h1 { margin: 8px 0 6px; font: 700 clamp(1.5rem, 4vw, 2.1rem)/1.2 var(--tj-font-heading); }
.tj-gm-stage { position: relative; overflow: hidden; padding: 14px 16px 18px; min-height: 340px; border: 2px solid var(--tj-brand-100);
  background: linear-gradient(180deg, #FFFFFF, #FFF8F3); }
.tj-gm-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-bottom: 10px; margin-bottom: 12px; border-bottom: 1px solid var(--tj-line); }
.tj-gm-bar strong { font: 700 1.05rem var(--tj-font-heading); }
.tj-gm-sub { color: var(--tj-ink-muted); font-size: .9rem; }
.tj-gm-tools { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.tj-gm-mute { border: 1px solid var(--tj-line); background: var(--tj-card); border-radius: 999px; width: 40px; height: 40px; font-size: 1.1rem; cursor: pointer; }
.tj-gm-lbl { margin: 10px 0 6px; font: 600 1rem var(--tj-font-heading); }
.tj-gm-lbl small { font: 400 .85rem var(--tj-font-body); color: var(--tj-ink-muted); margin-left: 6px; }
.tj-gm-note { color: var(--tj-ink-muted); font-size: .92rem; margin: 10px 0 0; }
.tj-gm-best { min-height: 1.4em; margin: 12px 0 0; font-weight: 500; }
.tj-gm-go { margin: 14px 0 0; display: flex; gap: 10px; flex-wrap: wrap; }
.tj-gm-start { min-height: 52px; padding: 0 28px; font-size: 1.1rem; }
.tj-gm-presets { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-bottom: 8px; }
.tj-gm-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); gap: 8px; max-width: 560px; }
.tj-gm-chip { min-height: 46px; border: 2px solid var(--tj-line); background: var(--tj-card); border-radius: 12px; font: 700 1.05rem var(--tj-font-heading); color: var(--tj-ink); cursor: pointer; }
.tj-gm-chip[aria-pressed="true"] { background: var(--tj-action); border-color: var(--tj-action); color: #fff; }
.tj-gm-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.tj-gm-pill { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 48px; padding: 8px 14px; border: 2px solid var(--tj-line); background: var(--tj-card);
  border-radius: 12px; font: 600 1rem var(--tj-font-body); color: var(--tj-ink); cursor: pointer; text-align: left; }
.tj-gm-pill small { font-weight: 400; font-size: .8rem; color: var(--tj-ink-muted); }
.tj-gm-pill[aria-checked="true"] { border-color: var(--tj-action); background: var(--tj-brand-50); box-shadow: 0 0 0 2px rgba(194, 65, 12, .15); }
.tj-gm-select { max-width: 420px; }
.tj-gm-row { display: flex; flex-wrap: wrap; gap: 0 16px; }
.tj-gm-row > div { flex: 1 1 240px; }
.tj-gm-wait { text-align: center; padding: 60px 0; color: var(--tj-ink-muted); }
.tj-gm-count { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 240px; }
.tj-gm-count span { font: 800 5rem/1 var(--tj-font-heading); color: var(--tj-action); animation: tjGmPop .7s ease; }
.tj-gm-count small { margin-top: 10px; color: var(--tj-ink-muted); }
@keyframes tjGmPop { 0% { transform: scale(.4); opacity: 0 } 60% { transform: scale(1.15); opacity: 1 } 100% { transform: scale(1) } }
.tj-gm-hud { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 10px; font: 600 1rem var(--tj-font-body); }
.tj-gm-clock { font-variant-numeric: tabular-nums; }
.tj-gm-clock.low { color: var(--tj-danger); animation: tjGmPulse 1s infinite; }
@keyframes tjGmPulse { 50% { opacity: .55 } }
.tj-gm-track { position: relative; padding: 6px 34px 6px 0; margin-bottom: 12px; border-radius: 12px; background: repeating-linear-gradient(90deg, #EEF2F7 0 18px, #F6F8FB 18px 36px); }
.tj-gm-lane { position: relative; height: 44px; border-bottom: 2px dashed #CBD5E1; }
.tj-gm-lane:last-of-type { border-bottom: 0; }
.tj-gm-lane.ghost { opacity: .55; }
.tj-gm-car { position: absolute; left: 0; top: 4px; font-size: 2rem; line-height: 1; transition: left .35s ease; }
.tj-gm-car.flip { transform: scaleX(-1); }   /* the racing-car emoji faces left */
.tj-gm-lname { position: absolute; right: 4px; top: 12px; font-size: .75rem; color: var(--tj-ink-muted); }
.tj-gm-flag { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-size: 1.6rem; }
.tj-gm-q { text-align: center; font: 800 clamp(2rem, 7vw, 2.8rem)/1.2 var(--tj-font-heading); color: var(--tj-ink); margin: 6px 0; min-height: 1.3em; }
.tj-gm-q.bad { color: var(--tj-danger); animation: tjGmShake .4s; }
@keyframes tjGmShake { 25% { transform: translateX(-6px) } 75% { transform: translateX(6px) } }
.tj-gm-typed { text-align: center; font: 700 2rem/1.3 var(--tj-font-heading); color: var(--tj-action); min-height: 1.4em; margin-bottom: 8px; letter-spacing: 2px; }
.tj-gm-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; max-width: 320px; margin: 0 auto; }
.tj-gm-pad button { min-height: 54px; border: 2px solid var(--tj-line); border-radius: 14px; background: var(--tj-card); font: 700 1.4rem var(--tj-font-heading); color: var(--tj-ink); cursor: pointer; touch-action: manipulation; }
.tj-gm-pad button:active { background: var(--tj-brand-50); transform: scale(.96); }
.tj-gm-pad button[data-k="✓"] { background: var(--tj-action); border-color: var(--tj-action); color: #fff; }
.tj-gm-dots { display: inline-flex; gap: 5px; }
.tj-gm-dots span { width: 12px; height: 12px; border-radius: 50%; background: #E2E8F0; }
.tj-gm-dots span.now { background: var(--tj-brand-500); }
.tj-gm-dots span.ok { background: var(--tj-success); }
.tj-gm-dots span.bad { background: var(--tj-danger); }
.tj-gm-card-q { text-align: center; margin: 4px 0 10px; }
.tj-gm-card-q p { margin: 4px 0 0; font-weight: 600; }
.tj-gm-big { display: block; font-size: 5rem; line-height: 1.1; animation: tjGmPop .5s ease; }
.tj-gm-hear { width: 84px; height: 84px; border-radius: 50%; border: 0; background: var(--tj-action); color: #fff; font-size: 2.4rem; cursor: pointer; box-shadow: var(--tj-shadow-card); }
.tj-gm-hear.sm { width: 40px; height: 40px; font-size: 1.1rem; vertical-align: middle; }
.tj-gm-opts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; max-width: 520px; margin: 0 auto; }
.tj-gm-opts button { min-height: 56px; padding: 8px; border: 2px solid var(--tj-line); border-radius: 14px; background: var(--tj-card); font: 700 1.15rem var(--tj-font-heading); color: var(--tj-ink); cursor: pointer; }
.tj-gm-opts.pics button span { font-size: 3rem; line-height: 1.1; }
.tj-gm-opts button.ok { border-color: var(--tj-success); background: #DCFCE7; }
.tj-gm-opts button.bad { border-color: var(--tj-danger); background: #FEE2E2; animation: tjGmShake .4s; }
.tj-gm-opts button:disabled { cursor: default; color: var(--tj-ink); }
.tj-gm-meaning { text-align: center; min-height: 1.6em; margin: 10px 0 0; font-size: 1.05rem; }
.tj-gm-slots { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 6px 0 12px; }
.tj-gm-slots span { width: 40px; height: 48px; border-bottom: 3px solid var(--tj-ink-muted); display: flex; align-items: center; justify-content: center; font: 800 1.6rem var(--tj-font-heading); text-transform: lowercase; }
.tj-gm-slots span.extra { border-color: var(--tj-danger); color: var(--tj-danger); }
.tj-gm-slots span.ok { border-color: var(--tj-success); color: var(--tj-success); }
.tj-gm-slots span.bad { border-color: var(--tj-danger); color: var(--tj-danger); }
.tj-gm-tiles { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 520px; margin: 0 auto; }
.tj-gm-tiles button { width: 50px; height: 54px; border: 2px solid var(--tj-brand-500); border-radius: 12px; background: var(--tj-brand-50); font: 800 1.5rem var(--tj-font-heading); color: var(--tj-ink); cursor: pointer; box-shadow: 0 3px 0 var(--tj-brand-100); }
.tj-gm-tiles button:disabled { opacity: .25; box-shadow: none; cursor: default; }
.tj-gm-tiles + .tj-gm-go { justify-content: center; }
.tj-gm-type { display: flex; gap: 8px; max-width: 420px; margin: 0 auto; }
.tj-gm-type .tj-input { font-size: 1.3rem; text-align: center; letter-spacing: 2px; }
.tj-gm-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; max-width: 520px; margin: 0 auto; perspective: 800px; }
.tj-gm-grid.g6 { grid-template-columns: repeat(4, 1fr); }
.tj-gm-mcard { position: relative; aspect-ratio: 4 / 5; border: 0; padding: 0; background: none; cursor: pointer; transform-style: preserve-3d; transition: transform .35s ease; }
.tj-gm-mcard > span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 4px; border-radius: 12px; backface-visibility: hidden; -webkit-backface-visibility: hidden; text-align: center; overflow-wrap: anywhere; }
.tj-gm-back { background: linear-gradient(135deg, var(--tj-action), var(--tj-brand-500)); color: #fff; font: 800 1.8rem var(--tj-font-heading); box-shadow: var(--tj-shadow-card); }
.tj-gm-face { background: var(--tj-card); border: 2px solid var(--tj-line); transform: rotateY(180deg); font: 700 clamp(.85rem, 3.2vw, 1.15rem)/1.2 var(--tj-font-heading); color: var(--tj-ink); }
.tj-gm-face.big { font-size: clamp(2rem, 8vw, 2.8rem); }
.tj-gm-mcard.up { transform: rotateY(180deg); }
.tj-gm-mcard.match .tj-gm-face { border-color: var(--tj-success); background: #DCFCE7; }
.tj-gm-result { text-align: center; }
.tj-gm-result h2 { margin: 4px 0; font: 800 1.6rem var(--tj-font-heading); }
.tj-gm-stars { margin: 0; font-size: 2.6rem; letter-spacing: 6px; }
.tj-gm-stars span { color: #E2E8F0; }
.tj-gm-stars span.on { color: #F59E0B; animation: tjGmPop .5s ease both; }
.tj-gm-stars span.on:nth-child(2) { animation-delay: .15s; } .tj-gm-stars span.on:nth-child(3) { animation-delay: .3s; }
.tj-gm-meta { color: var(--tj-ink-muted); margin: 4px 0; }
.tj-gm-newbest { font: 700 1.15rem var(--tj-font-heading); color: var(--tj-success); margin: 8px 0; }
.tj-gm-vs { font: 700 1.1rem var(--tj-font-heading); margin: 10px 0 6px; }
.tj-gm-reward { margin: 10px auto 0; padding: 8px 12px; max-width: 520px; border-radius: 10px; background: #FEF3C7; color: #78350F; font-weight: 600; }
.tj-gm-save { font-size: .9rem; color: var(--tj-ink-muted); min-height: 1.2em; }
.tj-gm-missed { text-align: left; max-width: 520px; margin: 12px auto 0; padding: 10px 14px; border: 1px dashed var(--tj-line); border-radius: 12px; background: var(--tj-card); }
.tj-gm-missed h3 { margin: 0 0 6px; font: 700 1rem var(--tj-font-heading); }
.tj-gm-missed ul { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 6px; padding: 0; list-style: none; }
.tj-gm-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 14px 0 0; }
.tj-gm-actions .tj-btn-primary { color: #fff; }
.tj-gm-sharebox { text-align: left; max-width: 560px; margin: 14px auto 0; padding: 14px; }
.tj-gm-link .tj-input { font-size: .95rem; }
.tj-gm-board { max-width: 520px; margin: 10px auto 0; text-align: left; }
.tj-gm-board h3 { margin: 0 0 6px; font: 700 1rem var(--tj-font-heading); }
.tj-gm-board ol { list-style: none; margin: 0; padding: 0; border: 1px solid var(--tj-line); border-radius: 12px; overflow: hidden; background: var(--tj-card); }
.tj-gm-board li { display: grid; grid-template-columns: 40px 1fr auto; gap: 8px; align-items: center; padding: 8px 12px; border-top: 1px solid var(--tj-line); }
.tj-gm-board li:first-child { border-top: 0; }
.tj-gm-board li.you { background: var(--tj-brand-50); font-weight: 600; }
.tj-gm-rank { text-align: center; font-weight: 700; }
.tj-gm-chal { text-align: center; }
.tj-gm-chal-h { font: 700 1.4rem var(--tj-font-heading); margin: 6px 0; }
.tj-gm-chal .tj-gm-go { justify-content: center; }
.tj-gm-confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.tj-gm-confetti span { position: absolute; top: -30px; animation: tjGmFall 2s ease-in forwards; }
@keyframes tjGmFall { to { transform: translateY(420px) rotate(320deg); opacity: 0 } }
.tj-gm-how { padding-left: 20px; } .tj-gm-how li { margin: 4px 0; }
.tj-gm-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tj-gm-skills { padding: 14px 16px; } .tj-gm-skills h2 { margin: 0 0 6px; font-size: 1.15rem; } .tj-gm-skills ul { list-style: none; margin: 0; padding: 0; }
.tj-gm-course { display: flex; gap: 12px; align-items: center; padding: 14px 16px; color: var(--tj-ink); text-decoration: none; }
.tj-gm-course > span:first-child { font-size: 2.4rem; }
.tj-gm-course strong { display: block; color: var(--tj-action); }
.tj-gm-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.tj-gm-cardlink { display: flex; gap: 10px; align-items: center; padding: 12px 14px; color: var(--tj-ink); text-decoration: none; }
.tj-gm-cardlink small { display: block; color: var(--tj-ink-muted); }
.tj-gm-ic { font-size: 2rem; }
.tj-gm-hubgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.tj-gm-tile { display: flex; flex-direction: column; gap: 4px; padding: 16px; color: var(--tj-ink); text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; }
.tj-gm-tile:hover { transform: translateY(-3px); color: var(--tj-ink); }
.tj-gm-tile-ic { font-size: 2.8rem; line-height: 1; }
.tj-gm-tile strong { font: 700 1.2rem var(--tj-font-heading); }
.tj-gm-tile small { color: var(--tj-ink-muted); }
.tj-gm-tile-best { color: var(--tj-success); font-weight: 600; font-size: .9rem; }
.tj-gm-tile-go { margin-top: auto; align-self: flex-start; color: #fff; }
.tj-gm-whylist { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.tj-gm-whylist li { display: flex; gap: 10px; } .tj-gm-whylist li > span:first-child { font-size: 1.8rem; }
@media (max-width: 640px) {
  .tj-gm-stage { padding: 10px 10px 14px; margin: 0 -4px; }
  .tj-gm-two { grid-template-columns: 1fr; }
  .tj-gm-grid { gap: 6px; }
  .tj-gm-grid.g6 { grid-template-columns: repeat(3, 1fr); }
  .tj-gm-mcard { aspect-ratio: 1 / 1; }
  .tj-gm-slots span { width: 30px; height: 42px; font-size: 1.3rem; }
  .tj-gm-tiles button { width: 44px; height: 50px; }
  .tj-gm-big { font-size: 4rem; }
}
@media (prefers-reduced-motion: reduce) { .tj-gm-car, .tj-gm-mcard { transition: none; } .tj-gm-count span, .tj-gm-big, .tj-gm-q.bad, .tj-gm-stars span.on, .tj-gm-clock.low, .tj-gm-opts button.bad { animation: none; } }
/* My learning: games block */
.tj-ml-games { margin-top: 18px; }
.tj-ml-gbest { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; margin: 8px 0 0; padding: 0; list-style: none; }
.tj-ml-gbest li { display: flex; justify-content: space-between; gap: 8px; padding: 8px 10px; border: 1px solid var(--tj-line); border-radius: 10px; background: var(--tj-card); }
.tj-ml-gbadges { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.tj-ml-gbadges span { padding: 4px 8px; border-radius: 999px; background: #F1F5F9; font-size: .85rem; color: var(--tj-ink-muted); }
.tj-ml-gbadges span.on { background: #DCFCE7; color: #14532D; font-weight: 600; }
/* games batch 2 + sign-in prompt (2026-10-06) */
.tj-gm-signin { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 12px; padding: 12px 14px; border-radius: 12px;
  border: 2px solid #FCD34D; background: #FFFBEB; color: var(--tj-ink); text-align: left; }
.tj-gm-signin > div { flex: 1 1 260px; font-size: .95rem; }
.tj-gm-signin-ic { font-size: 1.8rem; }
.tj-gm-signin .tj-btn-primary { color: #fff; }
.tj-gm-result .tj-gm-signin { max-width: 560px; margin: 14px auto 0; }
.tj-gm-tbar { display: block; height: 6px; border-radius: 6px; background: #E2E8F0; overflow: hidden; margin: 0 0 10px; }
.tj-gm-tbar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--tj-danger), #F59E0B, var(--tj-success)); }
.tj-gm-q.sm { font-size: clamp(1.6rem, 6vw, 2.2rem); }
.tj-gm-war { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; margin-bottom: 4px; }
.tj-gm-hand { text-align: center; } .tj-gm-hand small { display: block; color: var(--tj-ink-muted); font-weight: 600; }
.tj-gm-hand b { display: block; min-height: 1.4em; font: 700 1.1rem var(--tj-font-heading); }
.tj-gm-pc { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 72px; margin: 4px 3px; border-radius: 10px;
  background: #fff; border: 2px solid var(--tj-ink); box-shadow: 2px 3px 0 rgba(31, 42, 68, .25); font: 800 1.6rem var(--tj-font-heading); color: var(--tj-ink); animation: tjGmPop .35s ease; }
.tj-gm-pc.down { background: repeating-linear-gradient(45deg, var(--tj-action), var(--tj-action) 6px, var(--tj-brand-500) 6px, var(--tj-brand-500) 12px); color: #fff; font-size: 1.1rem; }
.tj-gm-hand.cpu .tj-gm-pc:not(.down) { border-color: var(--tj-accent-text); color: var(--tj-accent-text); }
.tj-gm-pot { max-width: 110px; text-align: center; font-weight: 700; color: var(--tj-danger); }
.tj-gm-caller { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 4px 0 8px; }
.tj-gm-callq { font: 800 clamp(1.8rem, 7vw, 2.4rem) var(--tj-font-heading); }
.tj-gm-bingo { display: grid; gap: 6px; max-width: 420px; margin: 0 auto; }
.tj-gm-bingo.s3 { grid-template-columns: repeat(3, 1fr); max-width: 300px; } .tj-gm-bingo.s4 { grid-template-columns: repeat(4, 1fr); max-width: 360px; }
.tj-gm-bingo.s5 { grid-template-columns: repeat(5, 1fr); }
.tj-gm-bcell { aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 2px solid var(--tj-line); border-radius: 12px;
  background: var(--tj-card); font: 800 clamp(1rem, 4.4vw, 1.4rem) var(--tj-font-heading); color: var(--tj-ink); cursor: pointer; touch-action: manipulation; }
.tj-gm-bcell small { font-size: .6rem; }
.tj-gm-bcell.free { background: #FEF3C7; border-color: #F59E0B; cursor: default; }
.tj-gm-bcell.on { background: var(--tj-success); border-color: var(--tj-success); color: #fff; animation: tjGmPop .35s ease; }
.tj-gm-bcell.on:disabled { color: #fff; }
.tj-gm-bcell.bad { background: #FEE2E2; border-color: var(--tj-danger); animation: tjGmShake .4s; }
.tj-gm-bcell.hint { border-color: var(--tj-info); box-shadow: 0 0 0 3px rgba(29, 78, 216, .3); }
.tj-gm-bingo.bingo { animation: tjGmPulse .5s 3; }
.tj-gm-life { display: flex; gap: 6px; } .tj-gm-life .tj-btn { min-height: 36px; padding: 0 10px; font-size: .9rem; }
.tj-gm-quiz { display: grid; grid-template-columns: 56px 1fr; gap: 12px; }
.tj-gm-ladder { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.tj-gm-ladder li { text-align: center; font: 700 .8rem/1.6 var(--tj-font-heading); border-radius: 6px; background: #F1F5F9; color: var(--tj-ink-muted); }
.tj-gm-ladder li.done { background: #DCFCE7; color: #14532D; }
.tj-gm-ladder li.now { background: var(--tj-action); color: #fff; transform: scale(1.08); }
.tj-gm-quizq { font: 700 1.15rem/1.45 var(--tj-font-heading); margin: 4px 0 12px; }
.tj-gm-opts button.gone { display: none; }
.tj-gm-center { justify-content: center; }
.tj-gm-line { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; min-height: 56px; padding: 8px; margin: 4px auto 10px; max-width: 620px;
  border-bottom: 3px dashed var(--tj-action); }
.tj-gm-line.ok { border-color: var(--tj-success); background: #F0FDF4; } .tj-gm-line.bad { border-color: var(--tj-danger); background: #FEF2F2; }
.tj-gm-ph { color: var(--tj-ink-muted); align-self: center; }
.tj-gm-words { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 620px; margin: 0 auto; }
.tj-gm-words button, .tj-gm-line button { min-height: 44px; padding: 6px 12px; border: 2px solid var(--tj-brand-500); border-radius: 10px; background: var(--tj-brand-50);
  font: 700 1.05rem var(--tj-font-body); color: var(--tj-ink); cursor: pointer; }
.tj-gm-line button { background: var(--tj-card); border-color: var(--tj-ink-muted); }
.tj-gm-words button:disabled { opacity: .2; cursor: default; }
.tj-gm-sky { position: relative; height: 260px; overflow: hidden; border-radius: 12px; margin-bottom: 10px; background: linear-gradient(180deg, #DBEAFE, #EFF6FF 70%); }
.tj-gm-ground { position: absolute; left: 0; right: 0; bottom: 0; height: 12px; background: #86EFAC; }
.tj-gm-drop { position: absolute; top: 6px; left: 50%; transform: translate(-50%, 0); display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px;
  background: #fff; border: 2px solid var(--tj-accent); box-shadow: var(--tj-shadow-card); font: 700 1.25rem var(--tj-font-heading); white-space: nowrap; }
.tj-gm-drop u { text-decoration: none; color: var(--tj-success); }
.tj-gm-drop.pop { animation: tjGmBurst .45s ease forwards; }
.tj-gm-drop.land { border-color: var(--tj-danger); background: #FEE2E2; }
@keyframes tjGmBurst { to { opacity: 0; scale: 1.6; } }
@media (max-width: 640px) {
  .tj-gm-pc { width: 42px; height: 60px; font-size: 1.3rem; }
  .tj-gm-quiz { grid-template-columns: 1fr; } .tj-gm-ladder { flex-direction: row-reverse; flex-wrap: wrap; } .tj-gm-ladder li { flex: 1 0 18px; }
  .tj-gm-sky { height: 200px; }
}
@media (prefers-reduced-motion: reduce) { .tj-gm-pc, .tj-gm-bcell.on, .tj-gm-bcell.bad, .tj-gm-bingo.bingo, .tj-gm-drop.pop { animation: none; } }
/* fun-game listing (/games/display): link back to the /games catalogue */
.tj-games-hubnote { margin: 0 0 14px; padding: 10px 14px; border-radius: 12px; background: var(--tj-brand-50); color: var(--tj-ink); font-size: 15px; }
.tj-games-hubnote a { font-weight: 700; color: var(--tj-action); }
.tj-gm-page > .tj-gm-signin { margin-top: 4px; }
/* games batch 3 (2026-10-06): daily, riddles, make the target, odd one out, magic square, balloon pop, abacus flash,
   number crossword, say it! — screens in assets/js/tj-gameplay.js */
.tj-gm-streak { margin: 8px 0 0; font-weight: 700; color: var(--tj-warning); }
.tj-gm-dailycta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 8px; padding: 14px 16px; color: var(--tj-ink); text-decoration: none;
  border: 2px solid #FCD34D; background: linear-gradient(120deg, #FFFBEB, #FFF8F3); }
.tj-gm-dailycta > span:first-child { font-size: 2.2rem; } .tj-gm-dailycta > span:nth-child(2) { flex: 1 1 260px; }
.tj-gm-dailycta strong { display: block; font: 700 1.1rem var(--tj-font-heading); } .tj-gm-dailycta .tj-btn { color: #fff; }
.tj-gm-qbox { min-height: 96px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.tj-gm-riddle { display: flex; gap: 12px; align-items: flex-start; max-width: 560px; margin: 0 auto; text-align: left; }
.tj-gm-riddle ul { margin: 0 0 6px; padding-left: 18px; font-size: 1.05rem; line-height: 1.5; } .tj-gm-riddle p { margin: 4px 0 0; }
.tj-gm-riddle small { color: var(--tj-ink-muted); font-weight: 400; }
.tj-gm-owl { font-size: 2.6rem; line-height: 1; }
.tj-gm-tgoal { text-align: center; margin: 2px 0 10px; font: 600 1.1rem var(--tj-font-heading); }
.tj-gm-tgoal b { font-size: 1.6rem; color: var(--tj-action); }
.tj-gm-tcards { display: flex; justify-content: center; gap: 10px; margin-bottom: 10px; }
.tj-gm-tcards button { width: 64px; height: 76px; border-radius: 12px; border: 2px solid var(--tj-ink); background: #fff; box-shadow: 2px 3px 0 rgba(31, 42, 68, .25);
  font: 800 1.7rem var(--tj-font-heading); color: var(--tj-ink); cursor: pointer; touch-action: manipulation; }
.tj-gm-tcards button:disabled { opacity: .25; box-shadow: none; cursor: default; }
.tj-gm-expr { min-height: 52px; max-width: 520px; margin: 0 auto; padding: 8px 12px; border-bottom: 3px dashed var(--tj-action); text-align: center;
  font: 700 1.6rem/1.4 var(--tj-font-heading); letter-spacing: 1px; overflow-wrap: anywhere; }
.tj-gm-expr.ok { border-color: var(--tj-success); background: #F0FDF4; } .tj-gm-expr.bad { border-color: var(--tj-danger); background: #FEF2F2; animation: tjGmShake .4s; }
.tj-gm-exval { text-align: center; color: var(--tj-ink-muted); font-weight: 600; margin: 4px 0 8px; min-height: 1.3em; }
.tj-gm-ops { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; max-width: 420px; margin: 0 auto; }
.tj-gm-ops button { min-height: 50px; border: 2px solid var(--tj-line); border-radius: 12px; background: var(--tj-card); font: 700 1.4rem var(--tj-font-heading); color: var(--tj-ink); cursor: pointer; touch-action: manipulation; }
.tj-gm-ops button:active, .tj-gm-tcards button:active { transform: scale(.95); }
.tj-gm-oddq { text-align: center; font: 600 1.1rem var(--tj-font-heading); margin: 4px 0 10px; }
.tj-gm-odd button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 76px; font-size: 1.3rem; }
.tj-gm-odd button span { font-size: 2rem; line-height: 1.1; }
.tj-gm-magic { display: grid; gap: 6px; max-width: 330px; margin: 0 auto; }
.tj-gm-magic.s3 { grid-template-columns: repeat(3, 1fr) 48px; } .tj-gm-magic.s4 { grid-template-columns: repeat(4, 1fr) 48px; max-width: 400px; }
.tj-gm-mcell, .tj-gm-xcell { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border: 2px solid var(--tj-ink-muted); border-radius: 10px;
  background: #fff; font: 800 clamp(1.2rem, 5vw, 1.6rem) var(--tj-font-heading); color: var(--tj-ink); }
.tj-gm-msum { display: flex; align-items: center; justify-content: center; font: 700 .95rem var(--tj-font-heading); color: var(--tj-ink-muted); }
.tj-gm-msum.ok, #gm-anti b.ok { color: var(--tj-success); } .tj-gm-msum.bad, #gm-anti b.bad { color: var(--tj-danger); }
.tj-gm-cellin { width: 100%; height: 100%; border: 0; border-radius: 8px; background: var(--tj-brand-50); text-align: center; font: inherit; color: var(--tj-action); }
.tj-gm-cellin:focus { outline: 3px solid var(--tj-accent); outline-offset: -3px; }
.tj-gm-cellin.ok { background: #DCFCE7; color: #14532D; } .tj-gm-cellin.shown { background: #FEF3C7; color: #78350F; }
.tj-gm-cross { display: grid; grid-template-columns: 1fr 32px 1fr 32px 1fr; gap: 4px; max-width: 320px; margin: 0 auto; align-items: center; }
.tj-gm-xop { text-align: center; font: 800 1.3rem var(--tj-font-heading); color: var(--tj-accent-text); }
.tj-gm-balq { text-align: center; min-height: 64px; font: 700 1.3rem var(--tj-font-heading); }
.tj-gm-balq b { display: block; margin-top: 4px; }
.tj-gm-count-objs { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; max-width: 360px; margin: 0 auto; font-size: 2rem; }
.tj-gm-count-objs i { font-style: normal; }
.tj-gm-bond { font-size: 2.2rem; } .tj-gm-bond span { color: var(--tj-action); }
.tj-gm-bigl { font-size: 2.4rem; color: var(--tj-action); }
.tj-gm-balsky { height: auto; min-height: 220px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; align-items: end; padding: 18px 10px 26px; }
.tj-gm-balloon { position: relative; justify-self: center; width: min(100%, 110px); aspect-ratio: 4 / 5; border: 0; border-radius: 50% 50% 46% 46%; cursor: pointer; touch-action: manipulation;
  display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; font: 800 clamp(1.4rem, 6vw, 2rem) var(--tj-font-heading);
  box-shadow: inset -8px -10px 0 rgba(0, 0, 0, .12); animation: tjGmBob 2.8s ease-in-out infinite; }
.tj-gm-balloon::after { content: ''; position: absolute; left: 50%; bottom: -22px; width: 2px; height: 22px; background: #94A3B8; }
.tj-gm-balloon .e { font-size: 1.8rem; line-height: 1; } .tj-gm-balloon small { font-size: .8rem; font-weight: 700; }
.tj-gm-balloon.red { background: #DC2626; } .tj-gm-balloon.blue { background: #2563EB; } .tj-gm-balloon.green { background: #15803D; } .tj-gm-balloon.yellow { background: #B45309; }
.tj-gm-balloon:disabled { cursor: default; color: #fff; }
.tj-gm-balloon.pop { animation: tjGmBurst .5s ease forwards; } .tj-gm-balloon.bad { animation: tjGmShake .4s; opacity: .45; }
.tj-gm-balloon.hint { box-shadow: 0 0 0 4px #FDE68A, inset -8px -10px 0 rgba(0, 0, 0, .12); }
@keyframes tjGmBob { 50% { transform: translateY(-12px); } }
.tj-gm-flashab { width: min(100%, 260px); margin: 0 auto; pointer-events: none; }
.tj-gm-flashnum { min-height: 1.2em; font: 800 clamp(3rem, 14vw, 4.4rem)/1.2 var(--tj-font-heading); color: var(--tj-action); text-align: center; }
.tj-gm-say .tj-gm-saytxt { font: 700 clamp(1.3rem, 5vw, 1.8rem)/1.35 var(--tj-font-heading); margin: 6px 0 0; }
.tj-gm-heard { text-align: center; min-height: 1.6em; font-size: 1.05rem; margin: 8px 0 0; }
.tj-gm-stars.sm { font-size: 1.4rem; letter-spacing: 2px; vertical-align: middle; }
.tj-gm-mic { min-height: 52px; padding: 0 22px; }
@media (max-width: 640px) {
  .tj-gm-tcards button { width: 56px; height: 66px; font-size: 1.5rem; }
  .tj-gm-ops { gap: 4px; } .tj-gm-ops button { min-height: 46px; font-size: 1.2rem; }
  .tj-gm-balsky { gap: 6px; padding: 14px 6px 24px; }
}
@media (prefers-reduced-motion: reduce) { .tj-gm-balloon, .tj-gm-balloon.pop, .tj-gm-balloon.bad, .tj-gm-expr.bad { animation: none; } }
/* games batch 4: memory & focus (sequence recall, number recall, spot the change, focus grid) */
.tj-gm-seqmsg { text-align: center; font: 700 1.15rem var(--tj-font-heading); min-height: 1.5em; margin: 6px 0 12px; }
.tj-gm-seq { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; max-width: 340px; margin: 0 auto; }
.tj-gm-seq.p6 { grid-template-columns: repeat(3, 1fr); max-width: 420px; }
.tj-gm-spad { aspect-ratio: 1 / 1; min-height: 80px; border: 4px solid rgba(0,0,0,.12); border-radius: 22px; cursor: pointer; opacity: .55; touch-action: manipulation;
  display: flex; align-items: flex-end; justify-content: flex-end; padding: 8px 10px; font: 700 1rem var(--tj-font-heading); color: rgba(255,255,255,.9); transition: opacity .12s, transform .12s, box-shadow .12s; }
.tj-gm-spad.red { background: #DC2626; } .tj-gm-spad.blue { background: #2563EB; } .tj-gm-spad.green { background: #16A34A; }
.tj-gm-spad.yellow { background: #EAB308; } .tj-gm-spad.purple { background: #9333EA; } .tj-gm-spad.orange { background: #EA580C; }
.tj-gm-seq.on .tj-gm-spad { opacity: .8; }
.tj-gm-spad:disabled { cursor: default; }
.tj-gm-spad.lit { opacity: 1; transform: scale(1.05); box-shadow: 0 0 0 4px #fff, 0 0 22px 6px rgba(0,0,0,.25); }
.tj-gm-spad.bad { animation: tjGmShake .4s; }
.tj-gm-spad:focus-visible { outline: 3px solid var(--tj-ink); outline-offset: 3px; }
.tj-gm-sdot { display: inline-block; width: 16px; height: 16px; border-radius: 50%; margin: 0 2px; vertical-align: middle; }
.tj-gm-sdot.red { background: #DC2626; } .tj-gm-sdot.blue { background: #2563EB; } .tj-gm-sdot.green { background: #16A34A; }
.tj-gm-sdot.yellow { background: #EAB308; } .tj-gm-sdot.purple { background: #9333EA; } .tj-gm-sdot.orange { background: #EA580C; }
.tj-gm-digits { text-align: center; font: 800 clamp(2rem, 9vw, 3.4rem)/1.25 var(--tj-font-heading); letter-spacing: 3px; color: var(--tj-action); margin: 4px 0 10px; overflow-wrap: anywhere; }
.tj-gm-dslots { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.tj-gm-dslot { width: 24px; height: 34px; border-bottom: 3px solid var(--tj-line); font: 700 1.4rem/34px var(--tj-font-heading); text-align: center; }
.tj-gm-dslot.on { border-color: var(--tj-action); }
.tj-gm-chg { display: grid; gap: 8px; max-width: 420px; margin: 0 auto; min-height: 200px; }
.tj-gm-chg.s3 { grid-template-columns: repeat(3, 1fr); max-width: 300px; } .tj-gm-chg.s4 { grid-template-columns: repeat(4, 1fr); max-width: 380px; }
.tj-gm-chg.s5 { grid-template-columns: repeat(5, 1fr); }
.tj-gm-chcell { aspect-ratio: 1 / 1; min-height: 52px; border: 2px solid var(--tj-line); border-radius: 12px; background: var(--tj-card); cursor: pointer; touch-action: manipulation;
  display: flex; align-items: center; justify-content: center; font-size: clamp(1.6rem, 8vw, 2.4rem); line-height: 1; padding: 0; color: var(--tj-ink); }
.tj-gm-chg.s5 .tj-gm-chcell { font-size: clamp(1.4rem, 6.5vw, 2rem); }
.tj-gm-chcell:disabled { cursor: default; }
.tj-gm-chcell.ok { border-color: var(--tj-success); background: #DCFCE7; }
.tj-gm-chcell.bad { border-color: var(--tj-danger); background: #FEE2E2; animation: tjGmShake .4s; }
.tj-gm-cover { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; min-height: 200px; font-size: 4rem; background: var(--tj-brand-50); border-radius: 16px; }
.tj-gm-sch { display: grid; gap: 6px; max-width: 440px; margin: 0 auto; }
.tj-gm-sch.s4 { grid-template-columns: repeat(4, 1fr); max-width: 360px; } .tj-gm-sch.s5 { grid-template-columns: repeat(5, 1fr); } .tj-gm-sch.s6 { grid-template-columns: repeat(6, 1fr); }
.tj-gm-schcell { aspect-ratio: 1 / 1; min-height: 44px; border: 2px solid var(--tj-line); border-radius: 10px; background: var(--tj-card); cursor: pointer; touch-action: manipulation;
  font: 700 clamp(1.1rem, 5vw, 1.6rem) var(--tj-font-heading); color: var(--tj-ink); padding: 0; }
.tj-gm-schcell.done { background: #DCFCE7; border-color: #86EFAC; color: #166534; cursor: default; }
.tj-gm-schcell.bad { animation: tjGmShake .4s; border-color: var(--tj-danger); }
.tj-gm-schnext { display: inline-block; min-width: 1.6em; text-align: center; font-size: 1.2em; color: var(--tj-action); }
.tj-gm-chcell:focus-visible, .tj-gm-schcell:focus-visible { outline: 3px solid var(--tj-action); outline-offset: 2px; }
@media (max-width: 640px) { .tj-gm-seq { gap: 10px; } .tj-gm-sch, .tj-gm-chg { gap: 5px; } }
@media (prefers-reduced-motion: reduce) { .tj-gm-spad, .tj-gm-spad.lit { transition: none; transform: none; } .tj-gm-spad.bad, .tj-gm-chcell.bad, .tj-gm-schcell.bad { animation: none; } }


/* signed-in home /feed/feed (views/feed/home.php, 2026-10-06): classes, friends, continue learning.
   px, not rem: header_old1 (Bootstrap 3) sets html { font-size: 10px } */
.tj-hm { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 20px; max-width: 1180px; margin: 18px auto 40px; padding: 0 16px; }
.tj-hm-side { display: flex; flex-direction: column; gap: 12px; }
.tj-hm-side .tj-streak { margin: 0; }
.tj-hm-me { display: flex; align-items: center; gap: 12px; padding: 14px; }
.tj-hm-me strong { display: block; font: 700 17.6px var(--tj-font-heading); } .tj-hm-me small { color: var(--tj-ink-muted); }
.tj-hm-avatar { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--tj-brand-50);
  color: var(--tj-action); font: 800 22.4px var(--tj-font-heading); flex: none; }
.tj-hm-nav { display: flex; flex-direction: column; padding: 8px; }
.tj-hm-nav a { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 10px; color: var(--tj-ink); font-weight: 600; text-decoration: none; }
.tj-hm-nav a:hover { background: var(--tj-brand-50); color: var(--tj-ink); }
.tj-hm-nav a.on { background: var(--tj-action); color: #fff; }
.tj-hm-nav hr { border: 0; border-top: 1px solid var(--tj-line); margin: 6px 4px; }
.tj-hm-count { margin-left: auto; min-width: 22px; padding: 0 6px; border-radius: 999px; background: var(--tj-danger); color: #fff; font-size: 12px; text-align: center; line-height: 1.6; }
.tj-hm-nav a.on .tj-hm-count { background: #fff; color: var(--tj-action); }
.tj-hm-code { padding: 14px; text-align: center; } .tj-hm-code h2 { margin: 0; font: 600 15.2px var(--tj-font-heading); }
.tj-hm-bigcode { margin: 6px 0; font: 800 24px var(--tj-font-heading); letter-spacing: 3px; color: var(--tj-action); }
.tj-hm-bigcode.sm { font-size: 16.8px; letter-spacing: 2px; }
.tj-hm-actions { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center; }
.tj-hm-actions .tj-btn { min-height: 36px; padding: 0 12px; font-size: 14.4px; }
.tj-hm-actions .tj-btn-primary, .tj-hm-form .tj-btn-primary, .tj-hm-compose .tj-btn-primary, .tj-hm-row .tj-btn-primary { color: #fff; }
.tj-hm-note { color: var(--tj-ink-muted); font-size: 13.6px; margin: 6px 0 0; }
.tj-hm-muted { color: var(--tj-ink-muted); }
.tj-hm-loading { color: var(--tj-ink-muted); padding: 30px 0; text-align: center; }
.tj-hm-hero h1, .tj-hm-h1 { margin: 0 0 4px; font: 700 25.6px var(--tj-font-heading); }
.tj-hm-hero p { margin: 0 0 14px; }
.tj-hm-h2 { margin: 18px 0 8px; font: 700 18.4px var(--tj-font-heading); }
.tj-hm-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 12px; }
.tj-hm-tile { display: flex; flex-direction: column; gap: 2px; padding: 14px; color: var(--tj-ink); text-decoration: none; }
.tj-hm-tile span { font-size: 25.6px; } .tj-hm-tile small { color: var(--tj-ink-muted); }
.tj-hm-tile:hover { border-color: var(--tj-action); color: var(--tj-ink); }
.tj-hm-todo { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 10px 14px; background: #FFFBEB; border-color: #FCD34D; font-weight: 600; }
.tj-hm-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.tj-hm-form { padding: 14px 16px; } .tj-hm-form h3 { margin: 0 0 4px; font: 700 16.8px var(--tj-font-heading); }
.tj-hm-row { display: flex; gap: 8px; margin-top: 8px; } .tj-hm-row .tj-input { flex: 1; min-width: 0; }
.tj-hm-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; margin-top: 8px; } .tj-hm-grid2 label { font-weight: 600; font-size: 14.4px; }
.tj-hm-grid2 label:first-child { grid-column: 1 / -1; }
.tj-hm-msg { min-height: 1em; margin: 6px 0 0; font-weight: 600; } .tj-hm-msg.ok { color: var(--tj-success); } .tj-hm-msg.bad { color: var(--tj-danger); }
.tj-hm-compose { padding: 12px; margin-bottom: 12px; } .tj-hm-compose textarea { min-height: 64px; resize: vertical; padding: 10px; }
.tj-hm-compose .tj-hm-row select { max-width: 60%; }
.tj-hm-post { display: flex; gap: 12px; padding: 12px 14px; margin-bottom: 10px; }
.tj-hm-post-body { flex: 1; min-width: 0; } .tj-hm-post-h { margin: 0; } .tj-hm-post-text { margin: 6px 0; white-space: normal; overflow-wrap: anywhere; }
.tj-hm-post-tools { margin: 0; text-align: right; } .tj-hm-post-tools .tj-ab-linkbtn { font-size: 12.8px; color: var(--tj-ink-muted); }
.tj-hm-av { width: 38px; height: 38px; flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #E0E7FF; color: var(--tj-accent-text);
  font: 700 16px var(--tj-font-heading); vertical-align: middle; }
.tj-hm-av.teacher { background: var(--tj-brand-100); color: var(--tj-action-hover); } .tj-hm-av.lg { width: 48px; height: 48px; font-size: 19.2px; }
.tj-hm-chip { display: inline-block; padding: 0 8px; border-radius: 999px; background: var(--tj-brand-50); color: var(--tj-action-hover); font-size: 11.52px; font-weight: 700; vertical-align: middle; }
.tj-hm-empty { padding: 16px; color: var(--tj-ink-muted); }
.tj-hm-classes { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.tj-hm-class { display: flex; gap: 12px; padding: 14px; color: var(--tj-ink); text-decoration: none; }
.tj-hm-class:hover { border-color: var(--tj-action); color: var(--tj-ink); }
.tj-hm-class-ic { font-size: 28.8px; } .tj-hm-class strong { display: block; } .tj-hm-class small { display: block; color: var(--tj-ink-muted); }
.tj-hm-reqs { padding: 12px 16px; margin: 10px 0; } .tj-hm-reqs h2 { margin: 0 0 8px; font: 700 16.8px var(--tj-font-heading); }
.tj-hm-reqs ul, .tj-hm-members ul { list-style: none; margin: 0; padding: 0; }
.tj-hm-reqs li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--tj-line); } .tj-hm-reqs li:first-child { border-top: 0; }
.tj-hm-reqs li > span:nth-child(2) { flex: 1; }
.tj-hm-classhead { padding: 14px 16px; margin-bottom: 12px; } .tj-hm-classhead h1 { margin: 0; font: 700 22.4px var(--tj-font-heading); }
.tj-hm-codebox { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 8px 0 0; } .tj-hm-codebox b { font-size: 19.2px; letter-spacing: 2px; color: var(--tj-action); }
.tj-hm-classgrid { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 14px; align-items: start; }
.tj-hm-members { padding: 12px 14px; } .tj-hm-members h2 { margin: 0 0 8px; font-size: 16.8px; } .tj-hm-members h3 { margin: 12px 0 4px; font-size: 14.4px; color: var(--tj-ink-muted); }
.tj-hm-members li { display: flex; align-items: center; gap: 8px; padding: 5px 0; } .tj-hm-members li .tj-hm-actions { margin-left: auto; }
.tj-hm-members .tj-hm-av { width: 30px; height: 30px; font-size: 13.6px; }
.tj-hm-friends { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.tj-hm-friends li { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px; text-align: center; }
.tj-hm-search { margin: 8px 0; }
.tj-hm-teachers { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; margin-top: 10px; }
.tj-hm-teacher { padding: 14px; } .tj-hm-teacher header { display: flex; gap: 10px; align-items: center; } .tj-hm-teacher header small { display: block; }
.tj-hm-teacher ul { list-style: none; margin: 10px 0 0; padding: 0; }
.tj-hm-teacher li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 0; border-top: 1px solid var(--tj-line); }
.tj-hm-teacher li small { display: block; } .tj-hm-teacher .tj-btn { min-height: 34px; padding: 0 10px; font-size: 13.6px; }
@media (max-width: 900px) {
  .tj-hm { grid-template-columns: 1fr; margin-top: 10px; }
  .tj-hm-side { display: grid; grid-template-columns: 1fr 1fr; }
  .tj-hm-nav { grid-column: 1 / -1; flex-direction: row; flex-wrap: nowrap; overflow-x: auto; }
  .tj-hm-nav a { white-space: nowrap; } .tj-hm-nav hr { display: none; }
  .tj-hm-classgrid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .tj-hm-side { grid-template-columns: 1fr; } .tj-hm-code { display: none; }
  .tj-hm-cards, .tj-hm-two, .tj-hm-grid2 { grid-template-columns: 1fr; }
  .tj-hm-reqs li { flex-wrap: wrap; } .tj-hm-reqs .tj-hm-actions { width: 100%; justify-content: flex-start; }
}
.tj-hm .tj-hm-me strong { font: 700 17.6px var(--tj-font-heading); }
.tj-hm .tj-hm-me small { font-size: 13.6px; }
.tj-hm .tj-hm-form h3, .tj-hm .tj-hm-code h2 { font: 700 16.8px/1.3 var(--tj-font-heading); }
.tj-hm .tj-hm-note { font-size: 13.6px; }
.tj-hm .tj-hm-actions .tj-btn { font-size: 14.4px; }
.tj-hm .tj-hm-h2 { font: 700 18.4px var(--tj-font-heading); }
.tj-hm .tj-hm-post-tools .tj-ab-linkbtn { font-size: 13.6px; }
.tj-hm .tj-hm-chip { font-size: 11.52px; }
.tj-hm [hidden] { display: none !important; }
/* home: tutors (Teaching tab, Find a teacher) — px (see above) */
.tj-hm .tj-hm-subjs { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.tj-hm .tj-hm-subjs span { padding: 3px 10px; border-radius: 999px; background: #EEF2FF; color: var(--tj-accent-text); font-size: 13px; font-weight: 600; }
.tj-hm .tj-hm-bio { margin: 8px 0 0; color: var(--tj-ink-muted); font-size: 14px; }
.tj-hm .tj-hm-tact { margin: 10px 0 0; }
.tj-hm .tj-hm-ok { color: var(--tj-success); font-weight: 700; }
.tj-hm .tj-hm-connect { display: grid; gap: 8px; margin-top: 10px; padding: 10px; border-radius: 10px; background: var(--tj-surface); }
.tj-hm .tj-hm-connect label { font-weight: 600; font-size: 14px; display: grid; gap: 4px; }
.tj-hm .tj-hm-board { flex: 0 0 220px; }
.tj-hm .tj-hm-srow { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 8px 0; border-top: 1px solid var(--tj-line); }
.tj-hm .tj-hm-srow .tj-input { width: auto; min-height: 40px; }
.tj-hm .tj-hm-srow [data-f="subject"] { flex: 1 1 160px; }
.tj-hm .tj-hm-cls { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; }
.tj-hm .tj-hm-addsel { min-height: 36px; font-size: 14px; }
@media (max-width: 600px) { .tj-hm .tj-hm-board { flex: 1 1 100%; } .tj-hm-search { flex-wrap: wrap; } }
/* home: parents (px — see above) */
.tj-hm .tj-hm-kids { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; margin-bottom: 14px; }
.tj-hm .tj-hm-kid { display: flex; gap: 12px; padding: 16px; color: var(--tj-ink); text-decoration: none; }
.tj-hm .tj-hm-kid:hover { border-color: var(--tj-action); color: var(--tj-ink); }
.tj-hm .tj-hm-kid strong { display: block; font: 700 18px var(--tj-font-heading); } .tj-hm .tj-hm-kid small { display: block; margin-top: 2px; font-size: 14px; }
.tj-hm .tj-hm-warn { color: #92400E; font-weight: 700; }
.tj-hm .tj-hm-approve { border: 2px solid #FCD34D; background: #FFFBEB; }
.tj-hm .tj-hm-toggle { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; margin: 10px 0; cursor: pointer; font-size: 15px; }
.tj-hm .tj-hm-toggle input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--tj-action); }
.tj-hm .tj-hm-week { display: flex; align-items: flex-end; gap: 8px; height: 110px; padding: 12px 16px 8px; margin-top: 10px; }
.tj-hm .tj-hm-week span { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; }
.tj-hm .tj-hm-week i { display: block; width: 100%; max-width: 34px; border-radius: 6px 6px 0 0; background: var(--tj-brand-500); }
.tj-hm .tj-hm-week small { margin-top: 4px; font-size: 12px; color: var(--tj-ink-muted); }
.tj-hm .tj-hm-courses { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.tj-hm .tj-hm-courses li { display: grid; grid-template-columns: 1fr 160px 44px; gap: 12px; align-items: center; padding: 10px 14px; }
.tj-hm .tj-hm-courses small { display: block; font-size: 13px; }
.tj-hm .tj-hm-bar { height: 8px; border-radius: 8px; background: #E2E8F0; overflow: hidden; } .tj-hm .tj-hm-bar i { display: block; height: 100%; background: var(--tj-success); }
.tj-hm .tj-hm-list { list-style: none; margin: 8px 0; padding: 0; } .tj-hm .tj-hm-list li { display: flex; align-items: center; gap: 8px; padding: 6px 0; flex-wrap: wrap; }
.tj-hm .tj-hm-list .tj-hm-av { width: 30px; height: 30px; font-size: 13px; }
.tj-hm .tj-hm-h3 { margin: 12px 0 6px; font: 700 15px var(--tj-font-heading); }
.tj-hm .tj-hm-parents { list-style: none; margin: 8px 0 0; padding: 0; font-size: 14px; text-align: left; }
@media (max-width: 600px) { .tj-hm .tj-hm-courses li { grid-template-columns: 1fr 44px; } .tj-hm .tj-hm-courses .tj-hm-bar { grid-column: 1 / -1; grid-row: 2; } }
/* home: class chat + ratings (px) */
.tj-hm .tj-hm-chat { max-height: 520px; overflow-y: auto; padding: 14px; margin-bottom: 12px; display: flex; flex-direction: column; gap: 10px; background: #F8FAFC; }
.tj-hm .tj-hm-msgrow { display: flex; } .tj-hm .tj-hm-msgrow.mine { justify-content: flex-end; }
.tj-hm .tj-hm-bub { max-width: 78%; padding: 8px 12px; border-radius: 14px; background: #fff; border: 1px solid var(--tj-line); font-size: 15px; }
.tj-hm .tj-hm-bub.tutor { border-color: var(--tj-brand-100); } .tj-hm .tj-hm-bub.parent { background: #F0FDF4; border-color: #BBF7D0; }
.tj-hm .tj-hm-msgrow.mine .tj-hm-bub { background: var(--tj-brand-50); border-color: var(--tj-brand-100); }
.tj-hm .tj-hm-bub b { font-size: 13px; } .tj-hm .tj-hm-bub p { margin: 4px 0; overflow-wrap: anywhere; } .tj-hm .tj-hm-bub small { color: var(--tj-ink-muted); font-size: 12px; }
.tj-hm .tj-hm-bub .tj-ab-linkbtn { font-size: 12px; color: var(--tj-ink-muted); }
.tj-hm .tj-hm-rating { display: block; font-size: 14px; color: #92400E; font-weight: 600; margin: 2px 0 0; }
.tj-hm .tj-hm-rate { flex-basis: 100%; margin-top: 8px; padding: 10px; border-radius: 10px; background: var(--tj-surface); }
.tj-hm .tj-hm-rate p { margin: 4px 0; }
.tj-hm .tj-hm-starpick button { border: 0; background: none; font-size: 30px; line-height: 1; color: #CBD5E1; cursor: pointer; padding: 0 2px; }
.tj-hm .tj-hm-starpick button.on { color: #F59E0B; }
.tj-hm .tj-hm-reqs li, .tj-hm .tj-hm-list li { flex-wrap: wrap; }
/* /how-tutoring-works (views/tutorflow) + home band */
.tj-tf-hero { margin: 8px 0 16px; } .tj-tf-hero h1 { margin: 8px 0 6px; font: 700 clamp(1.5rem, 4vw, 2.2rem)/1.2 var(--tj-font-heading); }
.tj-tf-cta { display: flex; flex-wrap: wrap; gap: 8px; } .tj-tf-cta .tj-btn-primary { color: #fff; }
.tj-tf-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; counter-reset: none; }
.tj-tf-steps li { position: relative; padding: 16px 16px 14px; }
.tj-tf-num { position: absolute; top: 12px; right: 14px; width: 28px; height: 28px; border-radius: 50%; background: var(--tj-action); color: #fff; font: 700 .9rem/28px var(--tj-font-heading); text-align: center; }
.tj-tf-ic { display: block; font-size: 2rem; } .tj-tf-steps strong { display: block; font: 700 1.05rem var(--tj-font-heading); margin: 4px 0; }
.tj-tf-steps p { margin: 0 0 6px; color: var(--tj-ink); } .tj-tf-steps small { color: var(--tj-accent-text); font-weight: 600; }
.tj-tf-roles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.tj-tf-roles article { padding: 16px; } .tj-tf-roles h3 { margin: 0 0 8px; font: 700 1.1rem var(--tj-font-heading); } .tj-tf-roles ul { margin: 0 0 10px; padding-left: 18px; }
.tj-tf-pay { padding: 18px; border-radius: var(--tj-radius-card); background: linear-gradient(120deg, #ECFDF5, #FFF8F3 70%); border: 1px solid #A7F3D0; }
.tj-tf-grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 10px 0; }
.tj-tf-grid4 .tj-card { padding: 12px; } .tj-tf-grid4 span { font-size: 1.6rem; } .tj-tf-grid4 strong { display: block; } .tj-tf-grid4 p { margin: 4px 0 0; font-size: .92rem; }
.tj-tf-money { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.tj-tf-money .tj-card { padding: 10px 14px; font-weight: 600; } .tj-tf-money small { display: block; font-weight: 400; color: var(--tj-ink-muted); }
.tj-tf-arrow { font-size: 1.4rem; color: var(--tj-action); }
.tj-tf-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.tj-tf-list { margin: 0; padding-left: 20px; } .tj-tf-list li { margin: 6px 0; }
.tj-tf-safe { list-style: none; padding: 0; } .tj-tf-safe li::before { content: "✓ "; color: var(--tj-success); font-weight: 700; }

@media (max-width: 900px) { .tj-tf-steps, .tj-tf-roles { grid-template-columns: 1fr 1fr; } .tj-tf-grid4 { grid-template-columns: 1fr 1fr; }  }
@media (max-width: 600px) { .tj-tf-steps, .tj-tf-roles, .tj-tf-two { grid-template-columns: 1fr; }   }
/* home: Getting started checklist (px) */
.tj-hm .tj-hm-ck { padding: 14px 16px; margin-bottom: 14px; border: 2px solid #C7D2FE; background: linear-gradient(120deg, #EEF2FF, #fff 70%); }
.tj-hm .tj-hm-ck header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.tj-hm .tj-hm-ck h2 { margin: 0; font: 700 17px var(--tj-font-heading); flex: 1; } .tj-hm .tj-hm-ck header span { font-weight: 600; font-size: 14px; color: var(--tj-ink-muted); }
.tj-hm .tj-hm-ck .tj-hm-bar { display: block; margin-bottom: 8px; }
.tj-hm .tj-hm-ck ol { list-style: none; margin: 0 0 6px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; }
.tj-hm .tj-hm-ck li { display: flex; gap: 8px; align-items: flex-start; padding: 4px 0; font-size: 15px; }
.tj-hm .tj-hm-ck li a { color: var(--tj-ink); font-weight: 600; } .tj-hm .tj-hm-ck li.done a { color: var(--tj-ink-muted); text-decoration: line-through; font-weight: 400; }
.tj-hm .tj-hm-ck li.next a { color: var(--tj-action); } .tj-hm .tj-hm-ck small { display: block; color: var(--tj-ink-muted); font-size: 13px; }
.tj-hm .tj-hm-ckmark { width: 20px; height: 20px; flex: none; border-radius: 50%; border: 2px solid #CBD5E1; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; color: #fff; }
.tj-hm .tj-hm-ck li.done .tj-hm-ckmark { background: var(--tj-success); border-color: var(--tj-success); }
.tj-hm .tj-hm-ck li.next .tj-hm-ckmark { border-color: var(--tj-action); }
.tj-hm .tj-hm-flash { box-shadow: 0 0 0 4px #FDBA74; transition: box-shadow .3s; }
@media (max-width: 600px) { .tj-hm .tj-hm-ck ol { grid-template-columns: 1fr; } }
/* English Speaking Course in Hindi — lesson activities (views/speak/_lesson.php); px so the signed-in header can't shrink it */
.tj-sp-tools { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; margin-bottom: 8px; font-size: 15px; }
.tj-sp-tools input { accent-color: var(--tj-action); margin-right: 4px; }
.tj-sp-note { color: var(--tj-ink-muted); font-size: 14px; }
.tj-sp-sents { list-style: none; counter-reset: sp; margin: 0; padding: 0; display: grid; gap: 8px; }
.tj-sp-sents li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; counter-increment: sp; }
.tj-sp-sents li.playing { border-color: var(--tj-action); background: var(--tj-brand-50); }
.tj-sp-play { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--tj-action); color: #fff; font-size: 17px; cursor: pointer; }
.tj-sp-en { display: block; font: 600 17px/1.45 var(--tj-font-body); color: var(--tj-ink); }
.tj-sp-en span.on { background: #FDE68A; border-radius: 4px; }
.tj-sp-hi { display: block; color: var(--tj-ink-muted); font-size: 15px; margin-top: 2px; }
.tj-sp.no-hi .tj-sp-sents .tj-sp-hi, .tj-sp.no-hi .tj-sp-words .tj-sp-hi { visibility: hidden; }
.tj-sp-words { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tj-sp-word { display: inline-flex; gap: 6px; align-items: baseline; padding: 8px 12px; border: 1px solid var(--tj-line); border-radius: 999px; background: var(--tj-card); font-size: 15px; color: var(--tj-ink); cursor: pointer; }
.tj-sp-word .tj-sp-hi { display: inline; margin: 0; font-size: 14px; }
.tj-sp-word.pop { border-color: var(--tj-action); background: var(--tj-brand-50); }
.tj-sp-chat { min-height: 120px; max-height: 460px; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; background: #F8FAFC; }
.tj-sp-msg { max-width: 80%; padding: 8px 12px; border-radius: 14px; background: #fff; border: 1px solid var(--tj-line); font-size: 15px; }
.tj-sp-msg.r { align-self: flex-end; background: var(--tj-brand-50); border-color: var(--tj-brand-100); }
.tj-sp-msg.me { border: 2px dashed var(--tj-action); }
.tj-sp-msg b { display: block; font-size: 13px; color: var(--tj-ink-muted); } .tj-sp-msg span { display: block; }
.tj-sp-got { font-style: normal; margin-left: 4px; }
.tj-sp-done { align-self: center; font-weight: 700; color: var(--tj-success); }
.tj-sp-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0 0; }
.tj-sp-actions .tj-btn { min-height: 42px; font-size: 15px; } .tj-sp-actions .tj-btn-primary { color: #fff; }
.tj-sp-say { padding: 16px; text-align: center; }
.tj-sp-say-hi { font: 600 20px/1.5 var(--tj-font-body); margin: 0; }
.tj-sp-say-en { font: 700 20px/1.4 var(--tj-font-heading); color: var(--tj-action); margin: 8px 0 0; }
.tj-sp-say .tj-sp-actions { justify-content: center; }
.tj-sp-stars { font-size: 22px; min-height: 30px; margin: 8px 0 0; }
.tj-sp-tip { margin-top: 14px; padding: 12px 16px; background: #FFFBEB; border-color: #FCD34D; font-size: 16px; line-height: 1.6; }
.tj-sp-privacy { margin-top: 10px; }
@media (max-width: 600px) { .tj-sp-msg { max-width: 92%; } .tj-sp-en { font-size: 16px; } }

/* long questions (word problems, logic puzzles) on skill pages: readable, not the big sum size (2026-10-06) */
.tj-vm-q.long { font: 600 20px/1.5 var(--tj-font-body); text-align: left; letter-spacing: 0; }
@media (max-width: 600px) { .tj-vm-q.long { font-size: 17px; } }

/* ── Home page v3 (views/register/index.php, 2026-10-08): "what do you want to do?" hero, find by class, boards + AI tutor,
   popular courses, games, tutoring, rewards, about, "More to explore". All .tj-home* rules live in this one block. ── */
.tj-home { box-sizing: border-box; max-width: 1200px; margin: 0 auto; padding: 24px 16px 40px; }
.tj-home *, .tj-home *::before, .tj-home *::after { box-sizing: border-box; }
.tj-home a:focus-visible, .tj-home summary:focus-visible { outline: 3px solid var(--tj-action); outline-offset: 2px; border-radius: 8px; }
.tj-home h2, .tj-home h3 { color: var(--tj-ink); }
/* hero */
.tj-home-hero { padding: 28px 28px 22px; border: 1px solid var(--tj-line); border-radius: 20px;
  background: linear-gradient(160deg, var(--tj-brand-50) 0%, #FFFFFF 55%); box-shadow: var(--tj-shadow-card); }
.tj-home-hero h1 { margin: 10px 0 10px; max-width: none; font: 700 40px/1.18 var(--tj-font-heading); color: var(--tj-ink); letter-spacing: -.01em; }
.tj-home-lead { max-width: none; margin: 0 0 14px; font-size: 17.5px; line-height: 1.55; color: var(--tj-ink-muted); }
.tj-home-trust { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tj-home-trust li { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; background: #fff;
  border: 1px solid var(--tj-line); font: 600 14px/1.5 var(--tj-font-body); color: var(--tj-ink); }
.tj-home-trust span { color: var(--tj-success); font-weight: 700; }
.tj-home-ask { margin: 26px 0 12px; font: 700 20px/1.3 var(--tj-font-heading); }
.tj-home-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.tj-home-tile { position: relative; display: flex; align-items: center; gap: 12px; height: 100%; min-height: 84px; padding: 14px 30px 14px 14px;
  border: 1px solid var(--tj-line); border-radius: var(--tj-radius-card); background: var(--tj-card); color: var(--tj-ink);
  text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s; }
.tj-home-tile:hover, .tj-home-tile:focus-visible { border-color: var(--tj-action); box-shadow: 0 6px 18px rgba(194,65,12,.14); transform: translateY(-2px); color: var(--tj-ink); text-decoration: none; }
.tj-home-tile-ic { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: var(--tj-brand-50); font-size: 26px; line-height: 1; }
.tj-home-tile-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tj-home-tile-tx strong { font: 600 16px/1.3 var(--tj-font-heading); color: var(--tj-ink); }
.tj-home-tile-tx > span { font-size: 13.5px; line-height: 1.4; color: var(--tj-ink-muted); }
.tj-home-tile-go { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-weight: 700; color: var(--tj-action); }
.tj-home-tag { margin-left: 4px; padding: 1px 8px; border-radius: 999px; background: var(--tj-action); color: #fff; font: 600 11px/1.6 var(--tj-font-body);
  font-style: normal; vertical-align: 2px; white-space: nowrap; }
.tj-home-also { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 14px 0 0; font-size: 14px; }
.tj-home-also > span { margin-right: 4px; font-weight: 600; color: var(--tj-ink-muted); }
.tj-home-also a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; border-radius: 999px; font-weight: 600; color: var(--tj-action); text-decoration: none; }
.tj-home-also a:hover { background: var(--tj-brand-50); color: var(--tj-action-hover); }
/* sections */
.tj-home-sec { margin-top: 40px; }
.tj-home-sec-head { margin-bottom: 14px; }
.tj-home-sec-head h2 { margin: 0 0 4px; font: 700 24px/1.25 var(--tj-font-heading); }
.tj-home-sec-head p { margin: 0; max-width: none; font-size: 15px; line-height: 1.5; color: var(--tj-ink-muted); }
.tj-home-sec-head-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; }
.tj-home-sec-head-row .tj-btn { flex: none; }
/* find by class */
.tj-home-chips { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.tj-home-chips a, .tj-home-chip2 { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; min-height: 60px;
  padding: 8px 6px; border: 1px solid var(--tj-line); border-radius: 12px; background: var(--tj-card); color: var(--tj-ink); text-align: center; text-decoration: none; }
.tj-home-chips a:hover { border-color: var(--tj-action); background: var(--tj-brand-50); color: var(--tj-ink); text-decoration: none; }
.tj-home-chips strong { font: 600 15px/1.3 var(--tj-font-heading); }
.tj-home-chips small { font-size: 12px; color: var(--tj-ink-muted); }
.tj-home-chip2 { padding: 6px; background: #F6F5FF; border-color: #DCD9FF; }
.tj-home-chip2 > span { display: flex; gap: 4px; width: 100%; margin-top: 4px; }
.tj-home-chips .tj-home-chip2 a { flex: 1; min-height: 44px; padding: 0 4px; border-radius: 8px; font: 700 13px var(--tj-font-body); color: var(--tj-action); }
/* boards */
.tj-home-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.tj-home-pick-col { padding: 16px 18px; }
.tj-home-pick-col h3 { margin: 0 0 10px; font: 600 18px var(--tj-font-heading); }
.tj-home-classes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.tj-home-classes-4 { grid-template-columns: repeat(4, 1fr); }
.tj-home-classes a { display: flex; align-items: center; justify-content: center; gap: 4px; min-height: 44px; border: 1px solid var(--tj-line);
  border-radius: 10px; background: #fff; font: 600 15px var(--tj-font-body); color: var(--tj-ink); text-decoration: none; }
.tj-home-classes a span { font-weight: 400; font-size: 12px; color: var(--tj-ink-muted); }
.tj-home-classes a:hover { border-color: var(--tj-action); background: var(--tj-brand-50); color: var(--tj-action); text-decoration: none; }
.tj-home-all { display: inline-flex; align-items: center; min-height: 44px; margin-top: 4px; font-weight: 600; font-size: 14px; color: var(--tj-action); }
.tj-home-ai { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 16px; padding: 16px 20px; border: 1px solid #C9C5FF;
  border-radius: var(--tj-radius-card); background: linear-gradient(90deg, #F1F0FF, #FFF8F3); }
.tj-home-ai .tj-badge { align-self: flex-start; margin-top: 3px; }
.tj-home-ai-text { flex: 1 1 380px; }
.tj-home-ai-text h3 { margin: 0 0 4px; font: 700 18px var(--tj-font-heading); }
.tj-home-ai-text p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--tj-ink-muted); }
.tj-home-ai-links { display: flex; flex-wrap: wrap; gap: 8px; }
.tj-home .tj-btn-primary, .tj-home .tj-btn-primary:hover { color: #fff; text-decoration: none; }
.tj-home .tj-btn-secondary:hover { text-decoration: none; }
/* courses */
.tj-home-ages { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tj-home-ages a { display: inline-flex; align-items: baseline; gap: 6px; min-height: 44px; padding: 10px 14px; border-radius: 999px; border: 1px solid #BAE6FD;
  background: #F0F9FF; color: #075985; text-decoration: none; font-size: 14px; }
.tj-home-ages a:hover { border-color: #0369A1; color: #0C4A6E; text-decoration: none; }
.tj-home-ages small { font-size: 12px; color: #0369A1; }
.tj-home-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.tj-home-card { position: relative; display: flex; flex-direction: column; height: 100%; padding: 16px; background: var(--tj-card);
  border: 1px solid var(--tj-line); border-radius: var(--tj-radius-card); box-shadow: var(--tj-shadow-card); transition: border-color .15s, transform .15s; }
.tj-home-card:hover, .tj-home-card:focus-within { border-color: var(--tj-action); transform: translateY(-2px); }
.tj-home-card-top { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 8px; }
.tj-home-card-ic { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--tj-surface); font-size: 28px; line-height: 1; }
.tj-home-card h3 { margin: 0 0 6px; font: 700 16px/1.3 var(--tj-font-heading); }
.tj-home-card h3 a { color: inherit; text-decoration: none; }
.tj-home-card h3 a::after { content: ''; position: absolute; inset: 0; border-radius: var(--tj-radius-card); }   /* whole card clickable */
.tj-home-card h3 a:focus-visible { outline: none; }
.tj-home-card:focus-within { outline: 3px solid var(--tj-action); outline-offset: 2px; }
.tj-home-card-age { display: inline-block; padding: 2px 8px; border-radius: 999px; background: #E0F2FE; color: #075985; font-size: 12.5px; font-weight: 600; }
.tj-home-card p { margin: 0 0 12px; font-size: 14.5px; line-height: 1.5; color: var(--tj-ink-muted);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tj-home-card-go { margin-top: auto; display: flex; justify-content: space-between; gap: 8px; font-size: 14px; font-weight: 700; }
.tj-home-card-go span:first-child { color: var(--tj-success); }
.tj-home-card-go span:last-child { color: var(--tj-action); }
.tj-home-searches { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 16px 0 0; font-size: 14px; }
.tj-home-searches > span { margin-right: 4px; font-weight: 600; color: var(--tj-ink-muted); }
.tj-home-searches a, .tj-home-games-all a { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border-radius: 999px;
  border: 1px solid var(--tj-line); background: var(--tj-card); color: var(--tj-ink); font-weight: 500; text-decoration: none; }
.tj-home-searches a:hover, .tj-home-games-all a:hover { border-color: var(--tj-action); color: var(--tj-action); text-decoration: none; }
/* games */
.tj-home-games { padding: 20px 22px; border-radius: var(--tj-radius-card); border: 1px solid #C7D2FE; background: linear-gradient(120deg, #EEF2FF, #FFF8F3 70%); }
.tj-home-games-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.tj-home-games-list a { display: flex; flex-direction: column; align-items: center; gap: 2px; height: 100%; padding: 14px 8px; border-radius: 12px;
  background: var(--tj-card); border: 1px solid var(--tj-line); color: var(--tj-ink); text-align: center; text-decoration: none; transition: transform .15s; }
.tj-home-games-list a:hover { transform: translateY(-2px); border-color: var(--tj-accent); color: var(--tj-ink); text-decoration: none; }
.tj-home-games-list span { display: block; height: 40px; font-size: 32px; line-height: 40px; }
.tj-home-games-list strong { font: 600 14.5px/1.3 var(--tj-font-heading); }
.tj-home-games-list small { font-size: 12.5px; color: var(--tj-ink-muted); }
.tj-home-games-all { margin-top: 12px; }
.tj-home-games-all summary { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 4px; cursor: pointer; list-style: none; font-weight: 600; color: var(--tj-action); }
.tj-home-games-all summary::-webkit-details-marker { display: none; }
.tj-home-games-all summary::after { content: '▾'; transition: transform .15s; }
.tj-home-games-all[open] summary::after { transform: rotate(180deg); }
.tj-home-games-all ul { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; font-size: 14px; }
.tj-home-games-more { display: flex; flex-wrap: wrap; gap: 0 18px; margin: 6px 0 0; font-size: 14px; }
.tj-home-games-more a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
/* tutoring flow */
.tj-home-tf { padding: 20px 22px; border-radius: var(--tj-radius-card); border: 1px solid #A7F3D0; background: linear-gradient(120deg, #ECFDF5, #FFF8F3 70%); }
.tj-home-tf-head h2 { margin: 8px 0 4px; font: 700 22px/1.3 var(--tj-font-heading); }
.tj-home-tf-head p { margin: 0; color: var(--tj-ink-muted); }
.tj-home-tf-steps { list-style: none; margin: 14px 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.tj-home-tf-steps li { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 6px; border-radius: 12px; background: var(--tj-card);
  border: 1px solid var(--tj-line); text-align: center; }
.tj-home-tf-steps span { font-size: 26px; line-height: 1.2; }
.tj-home-tf-steps strong { font-size: 13.5px; font-weight: 600; color: var(--tj-ink); }
.tj-home-tf-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0; }
.tj-home-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
/* rewards */
.tj-home-rw { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; padding: 18px 22px; border: 1px solid #F6C9A6;
  border-radius: var(--tj-radius-card); background: linear-gradient(135deg, #FFF4EC, #FFFFFF); }
.tj-home-rw-text { flex: 1 1 420px; }
.tj-home-rw-text h2 { margin: 8px 0 4px; font: 700 20px var(--tj-font-heading); }
.tj-home-rw-text p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--tj-ink-muted); }
.tj-home-rw-text p strong { color: var(--tj-ink); }
.tj-home-rw-levels { list-style: none; margin: 0; padding: 0; display: flex; gap: 10px; flex: 0 1 auto; }
.tj-home-rw-levels li { display: flex; flex-direction: column; align-items: center; min-width: 108px; padding: 10px 12px; border: 1px solid var(--tj-line);
  border-radius: 12px; background: #fff; text-align: center; }
.tj-home-rw-levels span { font-size: 26px; line-height: 1.2; }
.tj-home-rw-levels strong { font: 600 14px var(--tj-font-heading); color: var(--tj-ink); }
.tj-home-rw-levels small { font-size: 12px; line-height: 1.3; color: var(--tj-ink-muted); }
.tj-home-rw-levels em { margin-top: 4px; padding: 1px 8px; border-radius: 999px; background: var(--tj-action); color: #fff; font: 700 11px/1.6 var(--tj-font-body); font-style: normal; }
/* about + more to explore */
.tj-home-about { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--tj-line); }
.tj-home-about h2 { margin: 0 0 8px; font: 600 18px var(--tj-font-heading); }
.tj-home-about p { max-width: none; margin: 0 0 10px; font-size: 15px; line-height: 1.7; color: var(--tj-ink-muted); }
.tj-home-explore-end { margin-top: 28px; padding: 18px 20px; border-radius: var(--tj-radius-card); background: var(--tj-card); border: 1px solid var(--tj-line); }
.tj-home-explore-end > h2 { margin: 0 0 12px; font: 600 17px var(--tj-font-heading); }
.tj-home-explore-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.tj-home-explore-end h3 { margin: 0 0 8px; font: 600 14.5px var(--tj-font-heading); color: var(--tj-ink-muted); }
.tj-home-explore-end ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tj-home-explore-end a { display: inline-block; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--tj-line); background: var(--tj-surface);
  font-weight: 500; font-size: 13.5px; color: var(--tj-ink); text-decoration: none; }
.tj-home-explore-end a:hover { border-color: var(--tj-action); color: var(--tj-action); text-decoration: none; }
/* responsive */
@media (max-width: 1080px) { .tj-home-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tj-home-games-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 960px) { .tj-home-explore-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tj-home-tf-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .tj-home { padding-top: 12px; }
  .tj-home-hero { padding: 18px 16px 12px; border-radius: 16px; }
  .tj-home-hero h1 { font-size: 27px; }
  .tj-home-lead { font-size: 15.5px; }
  .tj-home-trust li { font-size: 13px; padding: 3px 10px; }
  .tj-home-ask { margin-top: 18px; font-size: 18px; }
  .tj-home-tiles { gap: 8px; }
  .tj-home-tile { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px; min-height: 0; }
  .tj-home-tile-ic { width: 40px; height: 40px; font-size: 22px; }
  .tj-home-tile-tx strong { font-size: 15px; }
  .tj-home-tile-tx > span { font-size: 12.5px; }
  .tj-home-tile-go { display: none; }
  .tj-home-sec { margin-top: 32px; }
  .tj-home-sec-head h2 { font-size: 21px; }
  .tj-home-pick { grid-template-columns: 1fr; gap: 12px; }
  .tj-home-classes { grid-template-columns: repeat(4, 1fr); }
  .tj-home-chips { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tj-home-games, .tj-home-tf, .tj-home-rw, .tj-home-ai { padding: 14px; }
  .tj-home-ai-links, .tj-home-ai-links .tj-btn { width: 100%; } .tj-home-ai-links .tj-btn { justify-content: center; }
  .tj-home-cards { grid-template-columns: 1fr; gap: 10px; }
  .tj-home-card { padding: 12px 14px; }
  .tj-home-card p { -webkit-line-clamp: 2; margin-bottom: 8px; font-size: 14px; }
  .tj-home-also > span { flex-basis: 100%; }
  .tj-home-also a { padding: 0 8px; }
  .tj-home-rw-levels { width: 100%; } .tj-home-rw-levels li { flex: 1; min-width: 0; padding: 8px 6px; }
  .tj-home-explore-end { padding: 14px; }
  .tj-home-explore-cols { grid-template-columns: 1fr; gap: 14px; }
  .tj-home-explore-end a { padding: 8px 12px; }
}
@media (max-width: 520px) { .tj-home-games-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tj-home-tf-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* ===================== Home v4 (views/register/index.php, 2026-10-10): one question per section ===================== */
.tj-home-v4 .tj-home-hero { padding: 26px 28px 20px; }
.tj-home-v4 .tj-home-hero h1 { font-size: 36px; }
.tj-home-v4 .tj-home-lead { font-size: 18px; margin-bottom: 6px; color: var(--tj-ink); }
.tj-home-need h2, .tj-home-cls h2, .tj-home-par h2 { margin: 0 0 12px; font: 700 24px var(--tj-font-heading); color: var(--tj-ink); }
.tj-home-need-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.tj-home-need-tiles a { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; height: 100%; padding: 18px 10px 16px;
  border-radius: 16px; border: 1px solid var(--tj-line); background: var(--tj-card); box-shadow: var(--tj-shadow-card); color: var(--tj-ink); text-decoration: none;
  transition: transform .15s, border-color .15s; }
.tj-home-need-tiles a:hover { transform: translateY(-2px); border-color: var(--tj-action); text-decoration: none; color: var(--tj-ink); }
.tj-home-need-ic { font-size: 34px; line-height: 1.1; }
.tj-home-need-tiles strong { font: 700 16px/1.25 var(--tj-font-heading); }
.tj-home-need-tiles small { font: 400 13px/1.35 var(--tj-font-body); color: var(--tj-ink-muted); }
.tj-home-also2 { margin-top: 14px !important; }
.tj-home-also2 a .tj-home-tag { margin-left: 2px; }
.tj-home-cls-sub { margin: -6px 0 12px; color: var(--tj-ink-muted); font-size: 15px; }
.tj-home-cls-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.tj-home-cls-tabs button { min-width: 74px; height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--tj-line); background: var(--tj-card);
  font: 600 15px var(--tj-font-body); color: var(--tj-ink); cursor: pointer; }
.tj-home-cls-tabs button:hover { border-color: var(--tj-action); color: var(--tj-action); }
.tj-home-cls-tabs button.is-on { background: var(--tj-action); border-color: var(--tj-action); color: #fff; }
.tj-home-cls-hint { margin: 12px 0 0; font: 600 15px var(--tj-font-body); color: var(--tj-ink-muted); }
.tj-home-cls-panel { margin-top: 14px; padding: 16px 18px; border-radius: 16px; background: var(--tj-brand-50); border: 1px solid #FED7AA; }
.tj-home-cls.is-js .tj-home-cls-panel:not(.is-on) { display: none; }
.tj-home-cls-panel h3 { margin: 0 0 10px; font: 700 18px var(--tj-font-heading); }
.tj-home-cls-acts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tj-home-cls-acts a { display: flex; align-items: center; gap: 10px; padding: 14px 16px; font: 700 16px var(--tj-font-heading); color: var(--tj-ink) !important; text-decoration: none !important; }
.tj-home-cls-acts a span { font-size: 24px; }
.tj-home-cls-acts a:hover { border-color: var(--tj-action); }
.tj-home-cls-panel .tj-home-search-chips { margin-top: 12px; }
.tj-home-make { display: flex; align-items: center; gap: 14px; margin-top: 16px; padding: 14px 18px; border-radius: 14px; border: 1px solid #FED7AA;
  background: linear-gradient(120deg, #FFF7ED, #FFF8F3 70%); color: var(--tj-ink) !important; text-decoration: none !important; }
.tj-home-make:hover { border-color: var(--tj-action); }
.tj-home-make-ic { font-size: 32px; }
.tj-home-make strong { display: block; font: 700 17px var(--tj-font-heading); }
.tj-home-make small { display: block; font-size: 14px; color: var(--tj-ink-muted); }
.tj-home-make-go { margin-left: auto; white-space: nowrap; font-weight: 700; color: var(--tj-action); }
.tj-home-ages2 small { font-size: 12px; color: var(--tj-ink-muted); margin-left: 4px; }
.tj-home-par-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tj-home-par-card { padding: 18px 20px; }
.tj-home-par-card h3 { margin: 0 0 6px; font: 700 18px var(--tj-font-heading); }
.tj-home-par-card p { margin: 0 0 10px; font-size: 15px; line-height: 1.55; color: var(--tj-ink-muted); }
.tj-home-par-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.tj-home-v4 .tj-home-ai { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding: 18px 22px; }
.tj-home-v4 .tj-home-ai h2 { margin: 6px 0 4px; font: 700 20px var(--tj-font-heading); }
.tj-home-v4 .tj-home-ai p { margin: 0; }
.tj-home-v4 .tj-home-ai-text { flex: 1 1 420px; }
@media (max-width: 1080px) { .tj-home-need-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .tj-home-v4 .tj-home-hero { padding: 16px 16px 12px; }
  .tj-home-v4 .tj-home-hero h1 { font-size: 23px; line-height: 1.22; margin: 8px 0 6px; }
  .tj-home-v4 .tj-home-lead { font-size: 15.5px; }
  .tj-home-v4 .tj-home-hero .tj-badge { font-size: 11.5px; }
  .tj-home-need h2, .tj-home-cls h2, .tj-home-par h2 { font-size: 20px; }
  .tj-home-need-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .tj-home-need-tiles a { flex-direction: row; text-align: left; align-items: center; gap: 10px; padding: 12px; }
  .tj-home-need-tiles a > strong, .tj-home-need-tiles a > small { display: block; }
  .tj-home-need-ic { font-size: 28px; flex: none; }
  .tj-home-need-tiles a { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; row-gap: 2px; }
  .tj-home-need-ic { grid-row: 1 / 3; }
  .tj-home-need-tiles strong { font-size: 15px; }
  .tj-home-need-tiles small { font-size: 12px; }
  .tj-home-cls-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -16px; padding-right: 16px; padding-bottom: 2px; }
  .tj-home-cls-tabs::-webkit-scrollbar { display: none; }
  .tj-home-cls-tabs button { flex: none; min-width: 0; }
  .tj-home-cls-acts { grid-template-columns: 1fr; }
  .tj-home-cls-panel { padding: 14px; }
  .tj-home-make { align-items: flex-start; padding: 12px 14px; }
  .tj-home-make-ic { font-size: 28px; }
  .tj-home-make-go { display: none; }   /* the whole strip is the link */
  .tj-home-make strong::after { content: ' →'; color: var(--tj-action); }
  .tj-home-need-tiles small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .tj-home-par-cards { grid-template-columns: 1fr; }
  .tj-home-v4 .tj-home-ai { padding: 14px; }
  .tj-home-v4 .tj-home-ai-links, .tj-home-v4 .tj-home-ai-links .tj-btn { width: 100%; justify-content: center; }
}
/* header: switch to the menu button before the 7 links + search start to overlap (tablets, 992–1099 px) */
@media (max-width: 1099px) { .tj-sh-nav { display: none; } .tj-sh-burger { display: block; } .tj-sh-in { gap: 12px; } }

.tj-sh-tag { display: inline-block; margin-left: 4px; padding: 1px 7px; border-radius: 999px; background: var(--tj-action); color: #fff; font: 700 11px/1.6 var(--tj-font-body); font-style: normal; vertical-align: 1px; }
.tj-home-head-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.tj-gm-mode { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.tj-gm-mode a { display: inline-flex; align-items: center; gap: 4px; min-height: 42px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--tj-line);
  background: var(--tj-card); font: 600 15px var(--tj-font-body); color: var(--tj-ink) !important; text-decoration: none !important; }
.tj-gm-mode a.is-on { background: var(--tj-ink); border-color: var(--tj-ink); color: #fff !important; }
.tj-gm-mode a:not(.is-on):hover { border-color: var(--tj-action); color: var(--tj-action) !important; }
/* catalogue pager + 'also on TalentJR' line (assets/js/tj-catalog.js; /courses, /worksheets, /games, /flashcards, /make-games) */
/* pager (buttons, no URLs: all cards stay on one crawlable page) + "also found" line — 2026-10-10 */
.tj-cat-pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 22px 0 6px; }
.tj-cat-pager button { min-width: 44px; height: 44px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--tj-line, #E2E8F0); background: #fff;
  font: 600 15px var(--tj-font-body, Inter, sans-serif); color: var(--tj-ink, #1F2A44); cursor: pointer; }
.tj-cat-pager button:hover:not([disabled]) { border-color: var(--tj-action, #C2410C); color: var(--tj-action, #C2410C); }
.tj-cat-pager button[aria-current="page"] { background: var(--tj-action, #C2410C); border-color: var(--tj-action, #C2410C); color: #fff; }
.tj-cat-pager button[disabled] { opacity: .45; cursor: default; }
.tj-cat-pager .gap { display: inline-flex; align-items: flex-end; padding: 0 2px 8px; color: var(--tj-ink-muted, #64748B); }
@media (max-width: 480px) { .tj-cat-pager button span { display: none; } .tj-cat-pager { gap: 5px; } .tj-cat-pager button { min-width: 40px; padding: 0 8px; } }
.tj-cat-also { margin: 10px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--tj-brand-50, #FFF7ED); font-size: 15px; text-align: center; }

/* home review 2026-10-10: spacing on desktop; on phones swipeable chip rows and card carousels (every link stays in the HTML) */
.tj-home-search + .tj-home-trust { margin-top: 14px; }
@media (max-width: 767px) {
  .tj-home-search-chips, .tj-home-searches, .tj-home-trust { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    margin-right: -16px; padding-right: 16px; padding-bottom: 2px; }
  .tj-home-search-chips::-webkit-scrollbar, .tj-home-searches::-webkit-scrollbar, .tj-home-trust::-webkit-scrollbar,
  .tj-home-cards::-webkit-scrollbar, .tj-home-games-list::-webkit-scrollbar { display: none; }
  .tj-home-search-chips > *, .tj-home-searches > *, .tj-home-trust > li { flex: none; white-space: nowrap; }
  .tj-home-cards, .tj-home-games-list { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    margin-right: -16px; padding: 2px 16px 6px 0; gap: 10px; }
  .tj-home-cards > li { flex: 0 0 82%; scroll-snap-align: start; }
  .tj-home-games-list > li { flex: 0 0 40%; scroll-snap-align: start; }
  .tj-home-ex > summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-top: 1px solid var(--tj-line); }
  .tj-home-ex > summary::after { content: '+'; font: 600 20px var(--tj-font-body); color: var(--tj-action); }
  .tj-home-ex[open] > summary::after { content: '−'; }
  .tj-home-ex > summary h3 { margin: 0 !important; }
  .tj-home-ex > ul { padding-bottom: 10px !important; }
}
@media (min-width: 768px) { .tj-home-ex > summary { list-style: none; pointer-events: none; } .tj-home-ex > summary::-webkit-details-marker { display: none; } }
.tj-home-ex > summary::-webkit-details-marker { display: none; }
@media (max-width: 520px) { .tj-home-mk-ways { grid-template-columns: 1fr !important; } }
@media (prefers-reduced-motion: reduce) { .tj-home-tile, .tj-home-card, .tj-home-games-list a { transition: none; } .tj-home-tile:hover, .tj-home-card:hover, .tj-home-games-list a:hover { transform: none; } }
/* "▶ Watch how it works" whiteboard (lessons) + "How this course works" tour (course homes) — assets/js/tj-explain.js */
.tj-xp { padding: 18px 20px; margin: 18px 0 8px; background: linear-gradient(180deg, #FFFFFF, #FFF8F3); }
.tj-xp-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.tj-xp-top h2 { margin: 0; font-size: 20px; }
.tj-xp-n { color: var(--tj-ink-muted); font-size: 14px; font-weight: 600; }
.tj-xp-stage { position: relative; min-height: 230px; margin: 12px 0 10px; padding: 18px; border-radius: 14px; background: #1F3A2E;
  background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px); background-size: 14px 14px; color: #F8FAF5; overflow: hidden;
  box-shadow: inset 0 0 0 6px #8B5E3C, inset 0 0 0 8px #6F4A2F; }
.tj-xp-title { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 194px; text-align: center; gap: 12px; }
.tj-xp-big { font: 800 clamp(26px, 5vw, 40px)/1.15 var(--tj-font-heading); color: #FDE68A; animation: tjXpZoom .6s cubic-bezier(.2,1.4,.4,1) both; }
.tj-xp-motto { font-size: 18px; line-height: 1.5; max-width: 560px; color: #E2F0E6; min-height: 1.5em; }
.tj-xp-q { padding: 10px 14px; border-radius: 10px; background: rgba(255,255,255,.08); margin-bottom: 10px; }
.tj-xp-lab { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #FDBA74; }
.tj-xp-qt { font: 700 20px/1.4 var(--tj-font-heading); color: #FFFFFF; margin-top: 2px; }
.tj-xp-steps { display: flex; flex-direction: column; gap: 6px; }
.tj-xp-step { display: flex; gap: 10px; align-items: flex-start; font-size: 17px; line-height: 1.45; opacity: .55; transition: opacity .3s; }
.tj-xp-step.is-now { opacity: 1; }
.tj-xp-step.is-in { animation: tjXpIn .45s ease-out both; }
.tj-xp-sn { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; font-weight: 800; background: #FDE68A; color: #1F3A2E; margin-top: 1px; }
.tj-xp-num { background: linear-gradient(transparent 55%, rgba(253,224,71,.55) 55%); background-size: 0 100%; background-repeat: no-repeat; color: #FFFFFF; font-weight: 800;
  padding: 0 2px; animation: tjXpMark .5s ease-out both; }
.tj-xp-ans { position: relative; display: inline-block; margin-top: 12px; padding: 10px 18px; border-radius: 12px; background: #FDE68A; color: #1F3A2E; font-size: 20px; }
.tj-xp-ans b { font: 800 24px var(--tj-font-heading); }
.tj-xp-al { font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.tj-xp-chk { margin-top: 4px; font-size: 14px; color: #14532D; font-weight: 600; }
.tj-xp-ans.is-pop { animation: tjXpZoom .55s cubic-bezier(.2,1.5,.4,1) both; }
.tj-xp-spark { position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; border-radius: 50%; background: #F97316; animation: tjXpSpark .9s ease-out both; }
.tj-xp-spark:nth-child(odd) { background: #22C55E; }
.tj-xp-dots { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 10px; }
.tj-xp-dots span { width: 9px; height: 9px; border-radius: 50%; background: #E2E8F0; }
.tj-xp-dots span.done { background: #FDBA74; } .tj-xp-dots span.now { background: var(--tj-action); transform: scale(1.3); }
.tj-xp-ctl { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tj-xp-go { margin-left: auto; font-weight: 700; }
@keyframes tjXpZoom { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes tjXpIn { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes tjXpMark { to { background-size: 100% 100%; } }
@keyframes tjXpSpark { from { transform: translate(-50%, -50%) rotate(var(--a)) translateY(0); opacity: 1; } to { transform: translate(-50%, -50%) rotate(var(--a)) translateY(-70px); opacity: 0; } }
.tj-howc { margin: 18px 0 6px; padding: 16px 18px; }
.tj-howc h2 { margin: 0 0 12px; font-size: 19px; }
.tj-howc ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; counter-reset: hc; }
.tj-howc li { position: relative; padding: 12px 10px; border-radius: 12px; border: 2px solid var(--tj-line); background: var(--tj-card); text-align: center; font-size: 14px;
  line-height: 1.35; transition: transform .3s, border-color .3s, background .3s; }
.tj-howc li span { display: block; font-size: 28px; margin-bottom: 4px; transition: transform .3s; }
.tj-howc li b { display: block; font-size: 15px; }
.tj-howc li.is-done { border-color: #FDBA74; }
.tj-howc li.is-now { border-color: var(--tj-action); background: var(--tj-brand-50); transform: translateY(-4px); box-shadow: 0 8px 18px rgba(194,65,12,.15); }
.tj-howc li.is-now span { transform: scale(1.25); animation: tjXpZoom .5s cubic-bezier(.2,1.5,.4,1); }
@media (max-width: 900px) { .tj-howc ol { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .tj-howc ol { grid-template-columns: repeat(2, 1fr); } .tj-xp-stage { padding: 14px; } .tj-xp-qt { font-size: 18px; } .tj-xp-step { font-size: 16px; } }
@media (prefers-reduced-motion: reduce) { .tj-xp-big, .tj-xp-step.is-in, .tj-xp-ans.is-pop, .tj-xp-num, .tj-howc li, .tj-howc li span { animation: none !important; transition: none; } .tj-xp-num { background-size: 100% 100%; } .tj-xp-spark { display: none; } }
.tj-xp-stage .tj-vbar { text-decoration: none; border-top: 3px solid #FDE68A; padding-top: 1px; display: inline-block; line-height: 1.1; }
/* blog: shared site header + a slim blog bar (title + search) underneath — blog/header.php */
.tj-blog-bar { background: var(--tj-surface); border-bottom: 1px solid var(--tj-line); }
.tj-blog-bar .container { max-width: 1170px; padding: 8px 15px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.tj-blog-title { font: 700 16px var(--tj-font-heading); color: var(--tj-ink); text-decoration: none; }
.tj-blog-title:hover { color: var(--tj-action); text-decoration: none; }
@media (max-width: 640px) { .tj-blog-bar .tj-blog-search { margin-left: 0; width: 100%; } .tj-blog-bar .tj-blog-search .tj-input { flex: 1; width: auto; } }

/* ---- games batch 5: Names in English word list, Grammar Sort (2026-10-08) ---- */
.tj-gm-wordtable { overflow-x: auto; max-width: 640px; }
.tj-gm-wordtable table { width: 100%; border-collapse: collapse; background: var(--tj-card); border: 1px solid var(--tj-line); border-radius: 12px; overflow: hidden; }
.tj-gm-wordtable th, .tj-gm-wordtable td { padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--tj-line); font-size: 16px; }
.tj-gm-wordtable th { background: var(--tj-brand-50); font: 700 14px var(--tj-font-heading); }
.tj-gm-wordtable td.pic { font-size: 28px; line-height: 1; }
.tj-gm-wordtable tr:last-child td { border-bottom: 0; }
.tj-gm-sent { text-align: center; font: 600 1.35rem/1.5 var(--tj-font-heading); max-width: 560px; margin: 0 auto 14px; }
.tj-gm-sent mark, .tj-gm-oddq mark { background: #FDE68A; color: inherit; padding: 0 4px; border-radius: 6px; }
.tj-gm-pos button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 76px; }
.tj-gm-pos button small { font: 500 12px var(--tj-font-body); color: var(--tj-ink-muted); }

/* home sliders on phones (2026-10-10, owner: "users can't tell the rows scroll"): ‹ › buttons, dots and a swipe hint
   added by the home page script around .tj-home-games-list / .tj-home-cards; hidden on desktop (grid there). */
.tj-slide-ui, .tj-slide-hint { display: none; }
@media (max-width: 767px) {
  .tj-slide-ui { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 8px 0 0; }
  .tj-slide-ui button { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--tj-line); background: #fff; color: var(--tj-ink);
    font: 700 22px/1 var(--tj-font-body); display: grid; place-items: center; cursor: pointer; box-shadow: var(--tj-shadow-card); }
  .tj-slide-ui button:disabled { opacity: .35; cursor: default; box-shadow: none; }
  .tj-slide-ui button:focus-visible { outline: 3px solid var(--tj-accent); outline-offset: 2px; }
  .tj-slide-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; flex: 1; }
  .tj-slide-dots i { width: 8px; height: 8px; border-radius: 999px; background: #CBD5E1; transition: width .2s, background .2s; }
  .tj-slide-dots i.on { width: 22px; background: var(--tj-action); }
  .tj-slide-hint { display: block; margin: 6px 0 0; text-align: center; font-size: 13px; font-weight: 600; color: var(--tj-ink-muted); }
  .tj-slide-ui.is-off, .tj-slide-hint.is-off, .tj-slide-hint[hidden] { display: none; }
  .tj-home-games-list > li { flex: 0 0 42%; }
  .tj-home-games-list a { min-height: 112px; justify-content: center; }
}
@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
  .tj-slide-nudge { animation: tj-slide-nudge 1.1s ease-in-out .6s 1; }
  @keyframes tj-slide-nudge { 0%, 100% { transform: translateX(0); } 45% { transform: translateX(-34px); } }
}

/* home "Your child's own portfolio" (2026-10-10, v2): pitch + steps + CTA on the left, a real student's portfolio
   picture on the right (switch between featured students). Phones: stacked, picture first after the heading. */
.tj-home-pf { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 28px; align-items: center; padding: 28px;
  border-radius: 20px; border: 1px solid #FDE68A; background: radial-gradient(circle at 100% 0, #FFE4D1 0, rgba(255,228,209,0) 45%), linear-gradient(120deg, #FFFBEB, #FFF8F3 70%); }
.tj-home-pf-copy h2 { margin: 0 0 8px; }
.tj-home-pf-copy > p { margin: 0 0 16px; color: var(--tj-ink-muted); font-size: 16px; line-height: 1.55; }
.tj-home-pf-steps { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 10px; }
.tj-home-pf-steps li { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.85); border: 1px solid var(--tj-line); }
.tj-home-pf-steps b { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--tj-action); color: #fff; font: 700 14px/1 var(--tj-font-heading); }
.tj-home-pf-steps span { display: flex; flex-direction: column; font-size: 14px; color: var(--tj-ink-muted); line-height: 1.4; }
.tj-home-pf-steps strong { color: var(--tj-ink); font: 600 15px/1.35 var(--tj-font-heading); }
.tj-home-pf-cta { min-height: 48px; padding: 0 22px; font-size: 16px; }
.tj-home-pf-show { min-width: 0; }
.tj-home-pf-preview { position: relative; display: block; border-radius: 16px; overflow: hidden; background: #FFF8F3; border: 1px solid var(--tj-line);
  box-shadow: 0 14px 40px rgba(31, 42, 68, .14); transform: rotate(-1deg); transition: transform .2s, box-shadow .2s; }
.tj-home-pf-preview:hover, .tj-home-pf-preview:focus-visible { transform: rotate(0) translateY(-3px); box-shadow: 0 18px 46px rgba(31, 42, 68, .2); }
.tj-home-pf-preview img { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; }
.tj-home-pf-open { position: absolute; right: 12px; bottom: 12px; padding: 7px 14px; border-radius: 999px; background: var(--tj-action); color: #fff; font-weight: 700; font-size: 14px; }
.tj-home-pf-pick { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; }
.tj-home-pf-pick button { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 4px 14px 4px 4px; border-radius: 999px;
  border: 1px solid var(--tj-line); background: #fff; color: var(--tj-ink); font: 600 14px var(--tj-font-body); cursor: pointer; }
.tj-home-pf-pick button span { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--tj-brand-100); color: var(--tj-action); font-size: 12px; font-weight: 800; }
.tj-home-pf-pick button[aria-pressed="true"] { border-color: var(--tj-action); box-shadow: 0 0 0 2px var(--tj-brand-100); }
.tj-home-pf-pick button[aria-pressed="true"] span { background: var(--tj-action); color: #fff; }
.tj-home-pf-pick button:focus-visible { outline: 3px solid var(--tj-accent); outline-offset: 2px; }
.tj-home-pf-note { margin: 10px 0 0; font-size: 13px; color: var(--tj-ink-muted); }
@media (max-width: 900px) {
  .tj-home-pf { grid-template-columns: 1fr; gap: 18px; padding: 18px 16px; }
  .tj-home-pf-show { order: -1; }                       /* the picture right under… */
  .tj-home-pf-copy { display: contents; }               /* …the heading: heading, picture, steps, button */
  .tj-home-pf-copy h2 { order: -3; } .tj-home-pf-copy > p { order: -2; margin: 0; }
  .tj-home-pf-preview { transform: none; }
  .tj-home-pf-open { right: 8px; bottom: 8px; padding: 4px 10px; font-size: 12px; }
  .tj-home-pf-steps { margin: 0; } .tj-home-pf-cta { justify-self: stretch; justify-content: center; }
  .tj-home-pf-pick { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -16px; padding-right: 16px; }
  .tj-home-pf-pick::-webkit-scrollbar { display: none; }
  .tj-home-pf-pick button { flex: none; }
}
@media (prefers-reduced-motion: reduce) { .tj-home-pf-preview, .tj-home-pf-preview:hover { transform: none; transition: none; } }

/* home "Learn every day, win gifts" (2026-10-10): the reward ladder as 3 tiles (Bronze → Silver → Gold) */
.tj-home-par-card { display: flex; flex-direction: column; }
.tj-home-par-card .tj-home-par-acts { margin-top: auto; }
.tj-home-par-card p strong { color: var(--tj-ink); }
.tj-home-gift-tiers { list-style: none; margin: 4px 0 16px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; counter-reset: none; }
.tj-home-gift-tiers li { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px;
  padding: 12px 8px 10px; border-radius: 14px; border: 1px solid var(--tj-line); background: #fff; }
.tj-home-gift-tiers li:not(:last-child)::after { content: '→'; position: absolute; right: -10px; top: 26px; z-index: 1; width: 18px; height: 18px;
  display: grid; place-items: center; border-radius: 50%; background: #fff; color: var(--tj-ink-muted); font-size: 12px; box-shadow: 0 0 0 1px var(--tj-line); }
.tj-home-gift-medal { font-size: 30px; line-height: 1.15; }
.tj-home-gift-tiers b { font: 700 14px/1.3 var(--tj-font-heading); color: var(--tj-ink); }
.tj-home-gift-tiers small { font-size: 12px; line-height: 1.35; color: var(--tj-ink-muted); }
.tj-home-gift-prize { margin-top: 6px; font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--tj-ink); }
.tj-home-gift-tiers em { margin-top: 6px; padding: 2px 10px; border-radius: 999px; font: 700 13px/1.6 var(--tj-font-body); font-style: normal; }
.tj-home-gift-tiers .is-bronze { background: linear-gradient(180deg, #FFF4EC, #fff 60%); border-color: #F6C9A6; }
.tj-home-gift-tiers .is-bronze em { background: #FFE4D1; color: #9A3412; }
.tj-home-gift-tiers .is-silver { background: linear-gradient(180deg, #F1F5F9, #fff 60%); border-color: #CBD5E1; }
.tj-home-gift-tiers .is-silver em { background: #E2E8F0; color: #334155; }
.tj-home-gift-tiers .is-gold { background: linear-gradient(180deg, #FEF9C3, #fff 60%); border-color: #FACC15; box-shadow: 0 4px 14px rgba(202, 138, 4, .15); }
.tj-home-gift-tiers .is-gold em { background: #CA8A04; color: #fff; }
@media (max-width: 767px) {
  .tj-home-par-cards { grid-template-columns: 1fr; }
  .tj-home-gift-tiers { gap: 8px; }
  .tj-home-gift-tiers li { padding: 10px 4px 8px; }
  .tj-home-gift-tiers li:not(:last-child)::after { right: -9px; }
  .tj-home-gift-prize { font-size: 12px; }
}
.tj-home-safe { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; }
.tj-home-safe li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: var(--tj-surface); border: 1px solid var(--tj-line);
  font-size: 14px; line-height: 1.45; color: var(--tj-ink-muted); }
.tj-home-safe li > span:first-child { flex: none; font-size: 18px; line-height: 1.2; }
.tj-home-safe strong { color: var(--tj-ink); }