/* MOONGATE override sheet for the /b/ institution console (public/b/index.html). Loads after the inline <style>; wins by cascade order only.
   月门 / MOONGATE whole-site visual base — Wyns decision 2026-10-21. v2 (Phase 2: bilingual page titles, eyebrows, gold step numbers, phone nav fix).
   Tokens come from /css/moongate.css (--mg-*); this file re-values the shell's legacy --b-* names and restyles its existing selectors.
   The inline legacy token literals are intentionally left in place (tests read them). */

/* ---- 1. legacy token re-values ------------------------------------------------ */
:root{
  --b-bg:var(--mg-ground);
  --b-card:var(--mg-card);
  --b-border:var(--mg-glass-line);
  --b-accent:var(--mg-blue);
  --b-accent-rgb:46,139,255;
  --b-ok:var(--mg-ok);--b-warn:var(--mg-warn);--b-danger:var(--mg-bad);--b-neutral:var(--mg-muted);
  --b-shadow:0 10px 30px rgba(0,0,0,.45);
  --b-shadow-hover:0 14px 36px rgba(0,0,0,.55),0 0 40px rgba(46,139,255,.12);
  --b-num-font:'Barlow Condensed',Roboto,'Noto Sans SC',system-ui,sans-serif;
  --cyan:var(--mg-blue-text);--cyan2:var(--mg-blue-text);
  --gold:var(--mg-gold);
  --text:var(--mg-text);--muted:var(--mg-muted);--line:var(--mg-line);
  --r-sm:8px;--r-md:10px;--r-lg:12px;
}

/* ---- 2. ground + type ---------------------------------------------------------- */
html,body{font-family:var(--mg-font-body)}
body::before{background:var(--mg-ground-wash)}
a{color:var(--mg-blue-text)}
a:hover{color:var(--mg-blue-hover)}
h1,h2,h3,h4,.brand h1,.brand b,.course-title,.acct-id h2,.empty strong{font-family:var(--mg-font-zh)}
h3,.topbar h2,.top h1,#pageTitle{letter-spacing:0}
.muted,.empty{color:var(--mg-text-2)}
input[type=checkbox],input[type=radio]{accent-color:var(--mg-blue)}
::placeholder{color:var(--mg-muted)}

/* ---- 3. shell: side nav + topbar ------------------------------------------------ */
.side{background:var(--mg-slate);border-right-color:var(--mg-slate-line)}
.brand .tag{color:var(--mg-blue-text);border-color:var(--mg-glass-line);background:var(--mg-blue-soft-2);border-radius:var(--mg-r-pill)}
.brand .tag::before{background:var(--mg-gold-text)}
.navbtn{color:var(--mg-text-2)}
.navbtn:hover{color:var(--mg-text);background:var(--mg-blue-soft-2)}
.navbtn.on{color:var(--mg-text);font-weight:700;border-left-color:var(--mg-blue);background:var(--mg-blue-soft)}
.navbtn.on .ni{color:var(--mg-blue-text)}
.navbtn[data-page=settings]::before{background:var(--mg-slate-line)}
.nav-badge{background:var(--mg-bad);border-radius:var(--mg-r-pill)}
.topbar,.top{background:rgba(11,19,34,.55);border-bottom-color:var(--mg-line)}
/* Phase 2 phone fix (pre-existing bug the restyle exposed): at <900px .side is a flex ROW whose .foot text wrapped
   one character per line, making the row ~260px tall and stretching every .navbtn to that height. Keep the foot on
   one line and stop stretching the nav buttons. No size/box declaration is changed. */
@media(max-width:900px){
  .side{align-items:center}
  .side .foot{white-space:nowrap}
}

/* ---- 4. cards (glass) ----------------------------------------------------------- */
.glass{background:var(--mg-card);background-image:var(--mg-glass);border-color:var(--mg-glass-line);border-radius:var(--mg-r-card);box-shadow:var(--mg-glass-shadow)}
.glass:hover{border-color:rgba(120,185,255,.45);box-shadow:var(--b-shadow-hover),inset 0 1px 0 rgba(255,255,255,.14)}
.glass .glass{background:var(--mg-slate);background-image:none;border-color:var(--mg-slate-line);box-shadow:none}
.glass .glass::after{background:none}
/* gold corner ornament on the two hero panels (revenue card, invite-code card): one per screen */
#dashRevenue::before,[data-b-045]::before{content:"";position:absolute;inset:6px;pointer-events:none;border-radius:2px;
  background-image:linear-gradient(var(--mg-gold-corner),var(--mg-gold-corner)),linear-gradient(var(--mg-gold-corner),var(--mg-gold-corner)),linear-gradient(var(--mg-gold-corner),var(--mg-gold-corner)),linear-gradient(var(--mg-gold-corner),var(--mg-gold-corner)),linear-gradient(var(--mg-gold-corner),var(--mg-gold-corner)),linear-gradient(var(--mg-gold-corner),var(--mg-gold-corner)),linear-gradient(var(--mg-gold-corner),var(--mg-gold-corner)),linear-gradient(var(--mg-gold-corner),var(--mg-gold-corner));
  background-repeat:no-repeat;background-size:14px 1px,1px 14px,14px 1px,1px 14px,14px 1px,1px 14px,14px 1px,1px 14px;
  background-position:left top,left top,right top,right top,left bottom,left bottom,right bottom,right bottom}

/* ---- 5. KPI + labels ----------------------------------------------------------- */
.kpi .glass b,.glass > b.kpi-n{color:var(--mg-text);letter-spacing:0}
/* Phase 2: cockpit KPI numerals 34px -> 38px where the six tiles have room (>=1440 wide); the inline
   max-height:800px rule that drops them to 22px on short viewports is left in charge below 801px tall.
   Direct-child <b> only, so the nested count / trend <b> are not enlarged. */
@media(min-width:1440px) and (min-height:801px){.kpi-main > .glass > b{font-size:38px}}
.kpi .glass span,.glass .hint,.hint{color:var(--mg-text)}
.hint[aria-live],.hint[id$="Status"],#qualHint{color:var(--mg-blue-text)}
.kpi .glass .lab,.lab{color:var(--mg-blue-text)}
.trend{color:var(--mg-muted)}
.perf-grid b,.sw b{font-weight:700;font-variant-numeric:tabular-nums;color:var(--mg-text)}
.code,.invite-code{font-family:var(--mg-font-display);color:var(--mg-gold-text);border-color:var(--mg-gold-line);background:linear-gradient(135deg,rgba(212,168,87,.16),rgba(212,168,87,.05))}
.access-box legend,.cal-month .d .cal-more{color:var(--mg-gold-text)}
.course-kicker,.chat-sec-lab,.meta,.field label,.stu-dl dt{color:var(--mg-muted)}
.prog{background:var(--mg-line)}
.prog i{background:linear-gradient(90deg,var(--mg-blue),var(--mg-blue-text))}
.chart7 i{background:linear-gradient(180deg,rgba(46,139,255,.9),rgba(46,139,255,.14))}
.sw{border-bottom-color:var(--mg-line)}
/* radar SVG: Phase 2 moved the colours into the radarSVG() presentation attributes themselves (strings only). */

/* ---- 6. buttons + segmented control -------------------------------------------- */
.btn{color:#fff;background:var(--mg-blue-grad);box-shadow:0 8px 24px var(--mg-blue-glow),inset 0 1px 0 rgba(255,255,255,.25)}
.btn:hover{background:linear-gradient(180deg,#4EA3FF,#2A7FEF)}
.btn:focus-visible{outline:2px solid var(--mg-blue-text);outline-offset:2px}
.btn.sm{box-shadow:0 4px 12px rgba(46,139,255,.22),inset 0 1px 0 rgba(255,255,255,.2)}
.btn.ghost{background:var(--mg-blue-soft-2);color:var(--mg-text);border-color:var(--mg-blue-line);box-shadow:none}
.btn.ghost:hover{background:var(--mg-blue-soft);border-color:var(--mg-blue-text)}
.btn.danger{background:transparent;color:var(--mg-bad);border-color:rgba(242,109,109,.45);box-shadow:none}
.btn.danger:hover{background:var(--mg-bad-soft)}
.seg{background:var(--mg-slate);border-color:var(--mg-slate-line)}
.seg button{color:var(--mg-text-2)}
.seg button:hover{color:var(--mg-text)}
.seg button.on{color:#fff;background:var(--mg-blue-grad);box-shadow:0 6px 18px var(--mg-blue-glow),inset 0 1px 0 rgba(255,255,255,.2)}
.wx-tool{border-color:rgba(120,185,255,.22);color:var(--mg-text-2)}
.wx-tool.on{border-color:var(--mg-blue-line);color:var(--mg-blue-text);background:var(--mg-blue-soft)}

/* ---- 7. inputs ----------------------------------------------------------------- */
.field input,.field select,.field textarea,.search,.stu-search,.chat-compose input,
.ymd-inline select,.ymd-time select,.hw-bank-tools select,.hw-bank-tools input,.cl-form input,.cl-form select,
.chat-detail-panel input,.chat-detail-panel textarea,.chat-search,
.row > select,.row > input:not([type]),.row > input[type=text],.row > input[type=search],.row > input[type=number]{background:var(--mg-slate);border-color:rgba(120,185,255,.22);color:var(--mg-text);color-scheme:dark}
.row > select,.row > input:not([type]),.row > input[type=text],.row > input[type=number]{border-radius:var(--mg-r-ctl)}
.field input:focus,.field select:focus,.field textarea:focus,.search:focus,.stu-search:focus,.chat-compose input:focus,
.ymd-inline select:focus,.ymd-time select:focus,.hw-bank-tools select:focus,.hw-bank-tools input:focus,.cl-form input:focus,.cl-form select:focus,
.chat-detail-panel input:focus,.chat-detail-panel textarea:focus,.chat-search:focus,
.row > select:focus,.row > input:focus{border-color:var(--mg-blue);box-shadow:0 0 0 3px var(--mg-blue-soft);outline:none}
.dropzone{border-color:rgba(120,185,255,.4);background:rgba(46,139,255,.05)}
.hw-attach-box,.hw-bank-box,#hwBankPreview{background:rgba(46,139,255,.05);border-color:var(--mg-line)}
.hw-bank-thumb{background:var(--mg-slate);border-color:var(--mg-slate-line)}
.hw-bank-list,.hw-bank-row,.access-box{border-color:var(--mg-line)}

/* ---- 8. tags / pills / badges --------------------------------------------------- */
.badge,.pill{border-radius:var(--mg-r-pill);background:var(--mg-blue-soft-2);color:var(--mg-text-2);border-color:var(--mg-glass-line)}
.tag-success,.act-green,.badge.act-green{background:var(--mg-ok-soft);color:var(--mg-ok);border-color:rgba(57,194,122,.35)}
.tag-warn,.act-yellow,.badge.act-yellow{background:var(--mg-warn-soft);color:var(--mg-warn);border-color:rgba(240,163,58,.35)}
.tag-danger,.act-red,.badge.act-red{background:var(--mg-bad-soft);color:var(--mg-bad);border-color:rgba(242,109,109,.35)}
.tag-muted{background:rgba(127,143,168,.14);color:var(--mg-muted);border-color:rgba(127,143,168,.32)}
.class-chip{border-radius:var(--mg-r-pill);color:var(--mg-blue-text);border-color:var(--mg-blue-line);background:var(--mg-blue-soft-2)}
.live-dot{color:var(--mg-bad);background:var(--mg-bad-soft);border-color:rgba(242,109,109,.35);border-radius:var(--mg-r-pill)}
.live-dot::before{background:var(--mg-bad)}
.unrecorded-flag{background:var(--mg-warn-soft);border-color:rgba(240,163,58,.35);border-radius:var(--mg-r-pill)}
.chat-unread{background:var(--mg-blue);color:#fff;border-radius:var(--mg-r-pill)}
.portal-mismatch{background:var(--mg-warn-soft);border-color:rgba(240,163,58,.35)}

/* ---- 9. tables ----------------------------------------------------------------- */
.table{font-variant-numeric:tabular-nums}
.table th{color:var(--mg-muted);border-bottom-color:var(--mg-glass-line)}
.table td{border-bottom-color:var(--mg-line)}
.table tbody tr:nth-child(even) td{background:transparent}
.table tr:hover td{background:var(--mg-blue-soft-2)}

/* ---- 10. calendar ---------------------------------------------------------------- */
.cal .d{border-color:var(--mg-slate-line);background:rgba(46,139,255,.05);color:var(--mg-muted)}
.cal .d.has{border-color:var(--mg-blue-line);color:var(--mg-blue-text);background:var(--mg-blue-soft)}
.cal-month-wrap h4,.cal-month .d small,.cal-month .d .cal-pop small,.ended-date-h{color:var(--mg-blue-text)}
.cal-pop{background:var(--mg-card);background-image:var(--mg-glass);border-color:var(--mg-glass-line);box-shadow:var(--mg-float-shadow);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}

/* ---- 11. chat -------------------------------------------------------------------- */
.chat-item:hover{background:var(--mg-blue-soft-2)}
.chat-item.on{background:var(--mg-blue-soft);border-color:var(--mg-blue-line)}
.chat-item.pinned .who{color:var(--mg-blue-text)}
.bubble.them{background:var(--mg-slate);box-shadow:inset 0 0 0 1px var(--mg-slate-line)}
.bubble.me{background:rgba(46,139,255,.18);box-shadow:inset 0 0 0 1px rgba(120,185,255,.25)}
.chat-compose{background:rgba(11,19,34,.72)}
.chat-detail{background:rgba(6,11,20,.72)}
.chat-detail-panel{background:var(--mg-card);background-image:var(--mg-glass);border-left-color:var(--mg-glass-line)}
.chat-member .av{background:var(--mg-blue-soft);color:var(--mg-blue-text);box-shadow:inset 0 0 0 1px var(--mg-blue-line);border-radius:50%}
.wx-voice-bar{background:var(--mg-bad-soft);border-color:rgba(242,109,109,.35)}
.wx-quote{border-left-color:var(--mg-blue-text);background:rgba(46,139,255,.08)}
.wx-quote-bar{border-color:var(--mg-blue-line)}
.wx-menu,.wx-fwd-bar,.wx-sheet-card{background:var(--mg-card);background-image:var(--mg-glass);color:var(--mg-text);border-color:var(--mg-glass-line);box-shadow:var(--mg-float-shadow);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}

/* ---- 12. floating layers: drawer, modal, toast ----------------------------------- */
.stu-drawer{background:linear-gradient(180deg,var(--mg-slate),var(--mg-ground));border-left-color:var(--mg-glass-line);box-shadow:-24px 0 64px rgba(0,0,0,.55),0 0 40px rgba(46,139,255,.10)}
.acct-avatar{background:var(--mg-blue-soft);color:var(--mg-blue-text);box-shadow:inset 0 0 0 1px var(--mg-blue-line);border-radius:50%}
.modal{background:var(--mg-card);background-image:var(--mg-glass);border-color:var(--mg-glass-line);box-shadow:var(--mg-float-shadow);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.b-toast{background:var(--mg-card);background-image:var(--mg-glass);border-color:var(--mg-glass-line);box-shadow:var(--mg-float-shadow);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.b-replay-board svg{box-shadow:var(--mg-board-shadow)}

/* ---- 13. Phase 2: bilingual page title (deck pattern ENGLISH / 中文) --------------- */
/* go() rewrites #pageTitle.textContent with the Chinese title on every navigation, so the English half is pure CSS:
   one ::before per page id keyed on the .page.on state. Browsers without :has() simply show the Chinese title. */
#pageTitle{font-family:var(--mg-font-zh);color:var(--mg-blue-text)}
#pageTitle::before{font-family:var(--mg-font-display);font-weight:700;font-size:26px;line-height:1;letter-spacing:.03em;text-transform:uppercase;color:var(--mg-text);margin-right:.12em;vertical-align:-1px}
.app:has(#page-dash.on) #pageTitle::before{content:"DASHBOARD / "}
.app:has(#page-students.on) #pageTitle::before{content:"STUDENTS / "}
.app:has(#page-teach.on) #pageTitle::before{content:"TEACHING / "}
.app:has(#page-live.on) #pageTitle::before{content:"LIVE CLASSROOM / "}
.app:has(#page-enroll.on) #pageTitle::before{content:"ENROLLMENT / "}
.app:has(#page-chat.on) #pageTitle::before{content:"MESSAGES / "}
.app:has(#page-settings.on) #pageTitle::before{content:"SETTINGS / "}
@media(max-width:900px){#pageTitle::before{font-size:22px}}
/* phones: LIVE CLASSROOM / would wrap the topbar, so phones keep the Phase 1 Chinese-only title */
@media(max-width:560px){#pageTitle::before{display:none}}

/* ---- 14. Phase 2: eyebrows (gold step numbers removed 2026-10-23, Luluu msg 3cf3ed92) ---- */
/* .mg-eyebrow / .mg-divider come from moongate.css; inside .glass they sit above the card's decorative ::after glow. */
.glass .mg-eyebrow,.glass .mg-divider{position:relative;z-index:1}