.cp-account-nav { position: relative; display: inline-flex; flex-shrink: 0; }
.cp-account-nav [hidden] { display: none !important; }
.cp-account-button, .cp-account-signin { display: inline-flex; gap: 8px; align-items: center; min-height: 36px; padding: 4px 10px 4px 5px; border: 1px solid #c9d6de; border-radius: 4px; background: #fff; color: #263b48; font: 600 13px/1 "ClassPlay Round", Arial, sans-serif; white-space: nowrap; cursor: pointer; text-decoration: none; }
.cp-account-signin { padding: 4px 14px; }
.cp-account-button:hover, .cp-account-button[aria-expanded=true], .cp-account-signin:hover { background: #eef7fd; border-color: #8cc4e6; }
.cp-account-label { max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
.cp-account-avatar { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 4px; color: #fff; background: linear-gradient(135deg, #46b4f0, #2783c4); font-size: 14px; font-weight: 800; }
.cp-account-caret { width: 0; height: 0; border: 5px solid transparent; border-top: 6px solid #445; border-bottom: 0; margin-top: 3px; }
.cp-account-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 80; min-width: 210px; padding: 6px 0; background: #fff; border: 1px solid #c9c9c9; border-radius: 4px; box-shadow: 0 8px 24px rgba(20,50,70,.2); }
.cp-account-menu button { display: block; width: 100%; padding: 10px 18px; border: 0; background: none; text-align: left; font: 500 14.5px/1.2 "ClassPlay Round", Arial, sans-serif; color: #222; cursor: pointer; }
.cp-account-menu button:hover, .cp-account-menu button:focus-visible { background: #e9f5fd; color: #1474b3; outline: none; }
.cp-account-menu button[data-account-action=logout] { border-top: 1px solid #eee; margin-top: 4px; padding-top: 12px; }
@media (max-width: 800px) { .site-header-inner { flex-wrap: wrap; gap: 10px; padding-top: 8px; padding-bottom: 8px; } .site-nav { gap: 14px; } .cp-account-label { max-width: 100px; } }
@media (max-width: 500px) { .cp-account-label { max-width: 70px; } .site-nav { margin-left: auto; } .cp-language-switch { margin-left: auto; } }

/* Public tools share teacher destinations without loading or requiring a cloud
   library. Only their explicitly marked headers use the mobile disclosure. */
.site-header .site-header-inner[data-teacher-nav] { position: relative; }
.site-header .site-header-inner[data-teacher-nav] .site-nav { margin-left: auto; gap: 4px; }
.site-header .site-header-inner[data-teacher-nav] .site-nav > a { display: flex; align-items: center; min-height: 44px; padding: 10px 11px; border: 0; border-radius: 9px; font: 700 14px/1.35 "ClassPlay Round", "PingFang SC", "Microsoft YaHei", sans-serif; color: var(--cp-muted, #526976); }
.site-header .site-header-inner[data-teacher-nav] .site-nav > a:hover { color: var(--cp-action, #176b9b); background: #edf5f8; }
.site-header .site-header-inner[data-teacher-nav] .site-nav > a[aria-current] { color: var(--cp-action, #176b9b); background: #eaf3f7; box-shadow: inset 0 -2px #176b9b; }
.site-header .site-header-inner[data-teacher-nav].teacher-nav-enhanced .cp-teacher-account-link { display: none; }
.site-header .site-header-inner[data-teacher-nav] [hidden] { display: none !important; }
.cp-teacher-nav-toggle { align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 9px 12px; background: #fff; border: 1px solid var(--cp-line, #d7e3e7); border-radius: 9px; color: var(--cp-ink, #183747); font: 700 13px/1.35 "ClassPlay Round", "PingFang SC", "Microsoft YaHei", sans-serif; cursor: pointer; }
.cp-teacher-nav-toggle svg { display: block; width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.cp-teacher-nav-toggle:hover, .cp-teacher-nav-toggle[aria-expanded=true] { border-color: #83acbe; background: #edf5f8; }
@media (min-width: 961px) { .site-header .site-header-inner[data-teacher-nav] { gap: 14px; flex-wrap: nowrap; }.site-header .site-header-inner[data-teacher-nav] .cp-account-label { max-width: 120px; } }
@media (max-width: 960px) {
  .site-header .site-header-inner[data-teacher-nav].teacher-nav-enhanced { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px; min-height: 66px; padding: 10px 16px; }
  .site-header .site-header-inner[data-teacher-nav].teacher-nav-enhanced > .site-brand { grid-column: 1; grid-row: 1; font-size: 24px; min-width: 0; }
  .site-header .site-header-inner[data-teacher-nav].teacher-nav-enhanced > .cp-language-switch { grid-column: 2; grid-row: 1; margin: 0; }
  .site-header .site-header-inner[data-teacher-nav].teacher-nav-enhanced > .cp-language-switch button { min-width: 36px; min-height: 40px; padding: 6px; }
  .site-header .site-header-inner[data-teacher-nav].teacher-nav-enhanced > .cp-teacher-nav-toggle { display: inline-flex; grid-column: 3; grid-row: 1; }
  .site-header .site-header-inner[data-teacher-nav].teacher-nav-enhanced > .site-nav { position: absolute; z-index: 90; top: calc(100% + 6px); left: 12px; right: 12px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: 5px; width: auto; min-height: 0; margin: 0; padding: 10px; border: 1px solid var(--cp-line, #d7e3e7); border-radius: 12px; background: #fff; box-shadow: 0 10px 30px #15374724; }
  .site-header .site-header-inner[data-teacher-nav].teacher-nav-enhanced .site-nav > a { justify-content: flex-start; min-height: 44px; padding: 10px 11px; white-space: normal; }
  .site-header .site-header-inner[data-teacher-nav].teacher-nav-enhanced .cp-teacher-account-link { display: flex; }
  .site-header .site-header-inner[data-teacher-nav].teacher-nav-enhanced .cp-account-nav { margin: 0; justify-self: end; max-width: 100%; }
  .site-header .site-header-inner[data-teacher-nav].teacher-nav-enhanced .cp-account-signin { display: none; }
  .site-header .site-header-inner[data-teacher-nav].teacher-nav-enhanced .cp-account-label { max-width: 74px; }
  .site-header .site-header-inner[data-teacher-nav].teacher-nav-enhanced .cp-account-button { min-height: 44px; max-width: 100%; gap: 5px; font-size: 12px; padding-right: 8px; }
  .site-header .site-header-inner[data-teacher-nav].teacher-nav-enhanced .cp-account-avatar { width: 24px; height: 24px; font-size: 12px; }
  .site-header .site-header-inner[data-teacher-nav].teacher-nav-enhanced .cp-account-menu { min-width: 210px; }
}
@media (max-width: 370px) { .site-header .site-header-inner[data-teacher-nav].teacher-nav-enhanced > .site-brand { font-size: 21px; }.cp-teacher-nav-toggle { padding: 9px; }.cp-teacher-nav-toggle > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } }

/* ── One top bar for the whole site ───────────────────────────────────────────
   Every app and tool page uses this bar. The header says who it is for
   (data-audience: teacher or visitor; js/account-nav.js); links marked
   data-teacher-only or data-visitor-only follow it, so a parent on the tracing
   tool never meets "Class results", and a teacher never meets "Sign up".
   Order on wide screens: logo · links · New activity · account · language. */
.site-header .site-header-inner[data-teacher-nav]:not([data-audience=teacher]) [data-teacher-only],
.site-header .site-header-inner[data-teacher-nav]:not([data-audience=visitor]) [data-visitor-only] { display: none !important; }
.site-header .site-header-inner[data-teacher-nav] > .site-brand { order: 0; margin-right: auto; }
.site-header .site-header-inner[data-teacher-nav] > .cp-teacher-nav-toggle { order: 5; }
.site-header .site-header-inner[data-teacher-nav] > .site-nav { order: 1; margin-left: 0; }
.site-header .site-header-inner[data-teacher-nav] > .site-create { order: 2; }
.site-header .site-header-inner[data-teacher-nav] > .cp-account-nav { order: 3; }
.site-header .site-header-inner[data-teacher-nav] > .cp-language-switch { order: 4; }
.site-header .site-header-inner[data-teacher-nav] .site-logo { flex: none; }
.site-header .site-header-inner[data-teacher-nav].teacher-nav-enhanced .cp-teacher-account-link { display: none !important; }
.site-header .site-header-inner[data-teacher-nav] .site-create { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 42px; padding: 0 16px; border-radius: 10px; white-space: nowrap; }
.site-create-icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; flex: none; }
.site-header .site-header-inner[data-teacher-nav] .cp-account-nav { align-items: center; gap: 8px; }
.site-header .site-header-inner[data-teacher-nav] .cp-account-signin,
.site-header .site-header-inner[data-teacher-nav] .cp-account-signup { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 16px; border-radius: 10px; font: 800 14px/1 "ClassPlay Round", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; text-decoration: none; white-space: nowrap; }
.site-header .site-header-inner[data-teacher-nav] .cp-account-signin { background: #fff; border: 1px solid #c5d6d3; color: #173b43; }
.site-header .site-header-inner[data-teacher-nav] .cp-account-signin:hover { background: #f1f6f2; border-color: #9fbab3; }
.site-header .site-header-inner[data-teacher-nav] .cp-account-signup { background: #155f69; border: 1px solid #155f69; color: #fff; box-shadow: 0 3px 0 #0a424c; }
.site-header .site-header-inner[data-teacher-nav] .cp-account-signup:hover { background: #114e57; }
.site-header .site-header-inner[data-teacher-nav] .cp-account-nav [hidden] { display: none !important; }
.site-header .site-header-inner[data-teacher-nav] .cp-account-button { min-height: 42px; border-radius: 10px; border-color: #c5d6d3; color: #173b43; }
.site-header .site-header-inner[data-teacher-nav] .cp-account-button:hover,
.site-header .site-header-inner[data-teacher-nav] .cp-account-button[aria-expanded=true] { background: #f1f6f2; border-color: #9fbab3; }
.site-header .site-header-inner[data-teacher-nav] .cp-account-avatar { border-radius: 8px; background: linear-gradient(135deg, #2f8a78, #155f69); }
.site-header .site-header-inner[data-teacher-nav] .cp-account-menu { border-radius: 12px; border-color: #d7e3e7; overflow: hidden; }
.site-header .site-header-inner[data-teacher-nav] .cp-account-menu button:hover,
.site-header .site-header-inner[data-teacher-nav] .cp-account-menu button:focus-visible { background: #eef5f1; color: #155f69; }
.site-header .site-header-inner[data-teacher-nav] > .cp-language-switch { margin-left: 0; border: 1px solid #c5d6d3; border-radius: 10px; }
.site-header .site-header-inner[data-teacher-nav] > .cp-language-switch button { min-height: 40px; min-width: 42px; font-weight: 700; color: #4e6265; }
.site-header .site-header-inner[data-teacher-nav] > .cp-language-switch button[aria-pressed=true] { background: #155f69; color: #fff; }
.site-header .site-header-inner[data-teacher-nav] .site-nav > a[aria-current] { color: #155f69; background: #edf4ef; box-shadow: inset 0 -2px #155f69; }
.site-header .site-header-inner[data-teacher-nav] .site-nav > a:hover { color: #155f69; background: #f1f6f2; }

@media (max-width: 960px) {
  /* One row: logo · ＋ · language · Menu. Everything else lives in the Menu. */
  .site-header .site-header-inner[data-teacher-nav].teacher-nav-enhanced { grid-template-columns: minmax(0, 1fr) auto auto auto; min-height: 64px; padding: 10px 16px; }
  .site-header .site-header-inner[data-teacher-nav].teacher-nav-enhanced > .site-create { grid-column: 2; grid-row: 1; }
  .site-header .site-header-inner[data-teacher-nav].teacher-nav-enhanced > .cp-language-switch { grid-column: 3; }
  .site-header .site-header-inner[data-teacher-nav].teacher-nav-enhanced > .cp-teacher-nav-toggle { grid-column: 4; border-radius: 10px; border-color: #c5d6d3; }
  .site-header .site-header-inner[data-teacher-nav].teacher-nav-enhanced > .site-brand { margin: 0; }
  .site-header .site-header-inner[data-teacher-nav].teacher-nav-enhanced > .site-nav { grid-template-columns: minmax(0, 1fr); padding: 8px; border-radius: 14px; }
  .site-header .site-header-inner[data-teacher-nav].teacher-nav-enhanced .site-nav > a { min-height: 48px; font-size: 15px; }
  /* Account sits at the foot of the menu: Log in and Sign up side by side, or the teacher's account button. */
  .site-header .site-header-inner[data-teacher-nav].teacher-nav-enhanced .site-nav > .cp-account-nav { display: flex; gap: 8px; margin-top: 4px; padding-top: 10px; border-top: 1px solid #e3ebe6; justify-self: stretch; }
  .site-header .site-header-inner[data-teacher-nav].teacher-nav-enhanced .site-nav > .cp-account-nav .cp-account-signin,
  .site-header .site-header-inner[data-teacher-nav].teacher-nav-enhanced .site-nav > .cp-account-nav .cp-account-signup { display: inline-flex; flex: 1; min-height: 46px; }
  .site-header .site-header-inner[data-teacher-nav].teacher-nav-enhanced .site-nav > .cp-account-nav .cp-account-signin[hidden],
  .site-header .site-header-inner[data-teacher-nav].teacher-nav-enhanced .site-nav > .cp-account-nav .cp-account-signup[hidden] { display: none !important; }
  .site-header .site-header-inner[data-teacher-nav].teacher-nav-enhanced .site-nav > .cp-account-nav .cp-account-button { flex: 1; justify-content: flex-start; min-height: 46px; }
  .site-header .site-header-inner[data-teacher-nav].teacher-nav-enhanced .site-nav > .cp-account-nav .cp-account-label { max-width: none; }
}
@media (max-width: 600px) {
  /* New activity becomes a ＋ button; the language switch shows only the other language. */
  .site-header .site-header-inner[data-teacher-nav].teacher-nav-enhanced > .site-create { width: 44px; min-height: 44px; padding: 0; }
  .site-header .site-header-inner[data-teacher-nav].teacher-nav-enhanced > .site-create > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .site-header .site-header-inner[data-teacher-nav].teacher-nav-enhanced > .site-create .site-create-icon { width: 22px; height: 22px; }
  .site-header .site-header-inner[data-teacher-nav].teacher-nav-enhanced > .cp-language-switch button[aria-pressed=true] { display: none; }
  .site-header .site-header-inner[data-teacher-nav].teacher-nav-enhanced > .cp-language-switch button { min-width: 44px; min-height: 44px; border: 0; }
  .site-header .site-header-inner[data-teacher-nav].teacher-nav-enhanced > .cp-teacher-nav-toggle > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .site-header .site-header-inner[data-teacher-nav].teacher-nav-enhanced > .cp-teacher-nav-toggle { width: 44px; padding: 0; }
  .site-header .site-header-inner[data-teacher-nav].teacher-nav-enhanced > .site-brand { font-size: 22px; }
}
.site-header .site-header-inner[data-teacher-nav] .site-nav > a { text-decoration: none; }

/* My library, always one tap away for teachers. On wide screens it is the first link
   in the bar; narrower than that it gets its own button beside ＋ instead of hiding
   in the Menu. */
.site-library-quick { display: none; }
.site-library-icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linejoin: round; flex: none; }
@media (max-width: 960px) {
  .site-header .site-header-inner[data-teacher-nav][data-audience=teacher] > .site-library-quick { display: inline-flex; }
  .site-header .site-header-inner[data-teacher-nav] > .site-library-quick { grid-column: 2; grid-row: 1; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 0 14px; border: 1px solid #c5d6d3; border-radius: 10px; background: #fff; color: #173b43; font: 800 14px/1 "ClassPlay Round", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; text-decoration: none; white-space: nowrap; }
  .site-header .site-header-inner[data-teacher-nav] > .site-library-quick:hover { background: #f1f6f2; border-color: #9fbab3; }
  .site-header .site-header-inner[data-teacher-nav] > .site-library-quick:focus-visible { outline: 3px solid #173b43; outline-offset: 2px; }
  .site-header .site-header-inner[data-teacher-nav].teacher-nav-enhanced { grid-template-columns: minmax(0, 1fr) auto auto auto auto; }
  .site-header .site-header-inner[data-teacher-nav].teacher-nav-enhanced > .site-create { grid-column: 3; }
  .site-header .site-header-inner[data-teacher-nav].teacher-nav-enhanced > .cp-language-switch { grid-column: 4; }
  .site-header .site-header-inner[data-teacher-nav].teacher-nav-enhanced > .cp-teacher-nav-toggle { grid-column: 5; }
}
@media (max-width: 600px) {
  .site-header .site-header-inner[data-teacher-nav] > .site-library-quick { width: 44px; padding: 0; }
  .site-header .site-header-inner[data-teacher-nav] > .site-library-quick > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .site-header .site-header-inner[data-teacher-nav] > .site-library-quick .site-library-icon { width: 22px; height: 22px; }
  .site-header .site-header-inner[data-teacher-nav].teacher-nav-enhanced { gap: 6px; padding: 10px 12px; }
}
@media (max-width: 380px) {
  .site-header .site-header-inner[data-teacher-nav].teacher-nav-enhanced > .site-brand { font-size: 19px; gap: 6px; }
  .site-header .site-header-inner[data-teacher-nav].teacher-nav-enhanced > .site-library-quick,
  .site-header .site-header-inner[data-teacher-nav].teacher-nav-enhanced > .site-create,
  .site-header .site-header-inner[data-teacher-nav].teacher-nav-enhanced > .cp-teacher-nav-toggle { width: 42px; min-height: 42px; }
  .site-header .site-header-inner[data-teacher-nav].teacher-nav-enhanced > .cp-language-switch button { min-width: 42px; min-height: 42px; }
}