.b4a-pos-academy{
  --b4a-ink:#24304a;
  --b4a-muted:#667085;
  --b4a-purple:#7257d9;
  --b4a-blue:#3d8bfd;
  --b4a-teal:#16a6a1;
  --b4a-gold:#f4b942;
  --b4a-pink:#ee6f9f;
  --b4a-green:#38a169;
  --b4a-red:#d64545;
  --b4a-orange:#e89a22;
  --b4a-shadow:0 14px 34px rgba(54,59,105,.16);
  width:100%;
  color:var(--b4a-ink);
  font-family:ui-rounded,"Trebuchet MS",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  line-height:1.5;
}
.b4a-pos-academy *{box-sizing:border-box}
.b4a-pos-academy button,.b4a-pos-academy select{font:inherit}
.b4a-pos-academy button{cursor:pointer}
.b4a-pos-academy .b4a-app{
  width:min(1120px,100%);
  margin:0 auto;
  padding:18px;
  border-radius:30px;
  background:
    radial-gradient(circle at 8% 0%,rgba(114,87,217,.12),transparent 30%),
    radial-gradient(circle at 100% 12%,rgba(61,139,253,.12),transparent 28%),
    linear-gradient(180deg,#fbf9ff,#f7fbff 55%,#fffaf3);
}
.b4a-pos-academy .b4a-hero{
  position:relative;
  overflow:hidden;
  background:linear-gradient(135deg,#5e48c8,#3f83eb 58%,#20a5a1);
  color:#fff;
  border-radius:28px;
  padding:26px;
  box-shadow:var(--b4a-shadow);
  margin-bottom:18px;
}
.b4a-pos-academy .b4a-hero:after{
  content:"★  ✦  ★  ✦  ★";
  position:absolute;right:18px;top:8px;
  font-size:36px;letter-spacing:8px;opacity:.13;transform:rotate(-8deg)
}
.b4a-pos-academy .b4a-eyebrow{font-weight:900;letter-spacing:.08em;text-transform:uppercase;font-size:.76rem;opacity:.9}
.b4a-pos-academy .b4a-hero h2{font-size:clamp(2rem,5vw,3.45rem);line-height:1;margin:.35rem 0 .65rem;color:#fff}
.b4a-pos-academy .b4a-hero p{margin:0;max-width:780px;font-size:1.03rem;line-height:1.55;color:#fff}
.b4a-pos-academy .b4a-nav{display:flex;flex-wrap:wrap;gap:9px;margin:16px 0}
.b4a-pos-academy .b4a-tab{
  border:0;border-radius:999px;padding:11px 15px;font-weight:900;
  background:#fff;color:var(--b4a-ink);box-shadow:0 6px 18px rgba(40,44,84,.09)
}
.b4a-pos-academy .b4a-tab[aria-selected="true"]{background:var(--b4a-ink);color:#fff}
.b4a-pos-academy .b4a-tab:focus-visible,.b4a-pos-academy .b4a-btn:focus-visible,.b4a-pos-academy .b4a-token:focus-visible,.b4a-pos-academy .b4a-group-btn:focus-visible{outline:4px solid rgba(61,139,253,.35);outline-offset:2px}
.b4a-pos-academy .b4a-panel{display:none}
.b4a-pos-academy .b4a-panel.is-active{display:block}
.b4a-pos-academy .b4a-shell{
  background:rgba(255,255,255,.84);border:1px solid rgba(84,93,140,.12);
  border-radius:26px;padding:18px;box-shadow:var(--b4a-shadow)
}
.b4a-pos-academy .b4a-toolbar{display:flex;gap:10px;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-top:14px}
.b4a-pos-academy .b4a-toolbar-group{display:flex;flex-wrap:wrap;gap:8px}
.b4a-pos-academy .b4a-btn{
  border:0;border-radius:14px;padding:10px 14px;font-weight:900;background:#eef3ff;color:#31405d
}
.b4a-pos-academy .b4a-btn:hover{filter:brightness(.985)}
.b4a-pos-academy .b4a-btn.is-primary{background:var(--b4a-purple);color:#fff}
.b4a-pos-academy .b4a-btn.is-good{background:#e6f7ed;color:#1f7449}
.b4a-pos-academy .b4a-btn.is-warn{background:#fff2d8;color:#8c5e00}
.b4a-pos-academy .b4a-btn.is-danger{background:#fff0f0;color:#a53d3d}
.b4a-pos-academy .b4a-btn:disabled{opacity:.55;cursor:not-allowed}
.b4a-pos-academy .b4a-select,.b4a-pos-academy .b4a-input{
  padding:10px 12px;border-radius:12px;border:2px solid #e1e5ef;background:#fff;color:var(--b4a-ink);font-weight:800
}
.b4a-pos-academy .b4a-progress{background:#e9ecf4;height:12px;border-radius:999px;overflow:hidden;margin:9px 0 2px}
.b4a-pos-academy .b4a-progress>span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--b4a-purple),var(--b4a-blue),var(--b4a-teal));transition:width .25s}
.b4a-pos-academy .b4a-mini{color:var(--b4a-muted);font-size:.91rem}
.b4a-pos-academy .b4a-chip{display:inline-flex;padding:6px 10px;border-radius:999px;font-weight:900;background:#edf1ff;color:#4f46a5;margin-bottom:10px}
.b4a-pos-academy .b4a-level-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 12px}
.b4a-pos-academy .b4a-level-pill{border:2px solid #e2e7f2;background:#fff;border-radius:999px;padding:8px 12px;font-weight:900;color:#43506b}
.b4a-pos-academy .b4a-level-pill.is-active{background:#eae6ff;border-color:#8e79e6;color:#4e3ca7}

/* Learn cards */
.b4a-pos-academy .b4a-flash-area{min-height:430px;display:grid;place-items:center;padding:8px}
.b4a-pos-academy .b4a-flashcard{width:min(700px,100%);height:385px;perspective:1200px}
.b4a-pos-academy .b4a-flash-inner{width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform .52s cubic-bezier(.2,.8,.2,1)}
.b4a-pos-academy .b4a-flashcard.is-flipped .b4a-flash-inner{transform:rotateY(180deg)}
.b4a-pos-academy .b4a-face{
  position:absolute;inset:0;backface-visibility:hidden;border-radius:28px;padding:25px;
  display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;
  box-shadow:0 16px 30px rgba(43,51,103,.17);border:3px solid rgba(255,255,255,.85)
}
.b4a-pos-academy .b4a-front{background:linear-gradient(145deg,#fff,#f2f5ff)}
.b4a-pos-academy .b4a-back{background:linear-gradient(145deg,#fff8ef,#fff);transform:rotateY(180deg)}
.b4a-pos-academy .b4a-term{font-size:clamp(2.25rem,7vw,4.65rem);font-weight:1000;letter-spacing:-.035em;margin:0;color:var(--b4a-ink)}
.b4a-pos-academy .b4a-definition{font-size:clamp(1.12rem,2.8vw,1.55rem);font-weight:900;line-height:1.38;max-width:610px}
.b4a-pos-academy .b4a-example{margin-top:14px;font-size:1.02rem;line-height:1.5;color:#4f5d75;max-width:620px}
.b4a-pos-academy .b4a-trap{margin-top:10px;padding:9px 12px;border-radius:12px;background:#fff4df;color:#7d580f;font-size:.91rem;max-width:620px}
.b4a-pos-academy .b4a-hint{margin-top:11px;font-size:.91rem;color:var(--b4a-muted)}

/* Mission cards and practice */
.b4a-pos-academy .b4a-mode-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(225px,1fr));gap:12px;margin:14px 0}
.b4a-pos-academy .b4a-mode-card{border:2px solid #e6eaf3;background:#fff;border-radius:20px;padding:16px;text-align:left;color:var(--b4a-ink)}
.b4a-pos-academy .b4a-mode-card strong{display:block;font-size:1.08rem;margin-bottom:5px}
.b4a-pos-academy .b4a-mode-card.is-selected{border-color:#8e79e6;background:#f6f3ff}
.b4a-pos-academy .b4a-quiz-box{max-width:900px;margin:0 auto;background:#fff;border-radius:24px;padding:22px;border:1px solid #e9ebf4;box-shadow:0 10px 24px rgba(41,50,103,.08)}
.b4a-pos-academy .b4a-quiz-meta{display:flex;justify-content:space-between;gap:10px;color:var(--b4a-muted);font-weight:800;margin-bottom:12px}
.b4a-pos-academy .b4a-question{font-size:clamp(1.25rem,3vw,1.8rem);font-weight:1000;line-height:1.3;margin:12px 0 6px;color:var(--b4a-ink)}
.b4a-pos-academy .b4a-question-sub{color:#4f5d75;font-weight:750;margin-bottom:12px;line-height:1.45}
.b4a-pos-academy .b4a-sentence-box{background:#fbfcff;border:1px solid #e7ebf5;border-radius:22px;padding:18px;margin:10px 0 16px}
.b4a-pos-academy .b4a-sentence{display:flex;flex-wrap:wrap;gap:12px 8px;align-items:flex-end;line-height:1.9}
.b4a-pos-academy .b4a-word-unit{display:inline-flex;align-items:flex-end;white-space:nowrap}
.b4a-pos-academy .b4a-attached-punc{font-weight:1000;font-size:1.08rem;margin-left:2px;padding-bottom:9px}
.b4a-pos-academy .b4a-token{
  border:2px solid #dfe5f3;background:#fff;color:var(--b4a-ink);border-radius:12px;
  padding:10px 12px;font-weight:900;position:relative;min-width:46px;transition:.18s transform,.18s border-color,.18s background
}
.b4a-pos-academy .b4a-token:hover{border-color:#9db4ff;background:#f7f9ff}
.b4a-pos-academy .b4a-token.is-selected{border-color:var(--b4a-purple);background:#f0edff;transform:translateY(-1px)}
.b4a-pos-academy .b4a-token.is-wrong{border-color:#e48686;background:#fff0f0}
.b4a-pos-academy .b4a-token.is-missed{border-color:#ffca80;background:#fff8eb}
.b4a-pos-academy .b4a-feedback{min-height:54px;margin-top:14px;padding:12px 14px;border-radius:14px;font-weight:850;line-height:1.45}
.b4a-pos-academy .b4a-feedback.is-good{background:#eaf9ef;color:#246e43}
.b4a-pos-academy .b4a-feedback.is-bad{background:#fff2f2;color:#a13b3b}
.b4a-pos-academy .b4a-feedback.is-neutral{background:#f4f6fb;color:#46536c}

/* Visual grammar marks */
.b4a-pos-academy .b4a-mark-verb::before{content:"✓";position:absolute;top:-1.05em;left:50%;transform:translateX(-50%);color:var(--b4a-green);font-weight:1000;font-size:1em}
.b4a-pos-academy .b4a-mark-adjective{text-decoration:underline 4px solid var(--b4a-purple);text-underline-offset:4px}
.b4a-pos-academy .b4a-mark-adverb{text-decoration:underline 4px dotted var(--b4a-teal);text-underline-offset:4px}
.b4a-pos-academy .b4a-mark-article{outline:3px solid rgba(232,154,34,.55);border-radius:8px;background:rgba(232,154,34,.11)}
.b4a-pos-academy .b4a-mark-noun{background:rgba(61,139,253,.12);box-shadow:inset 0 0 0 2px rgba(61,139,253,.36)}
.b4a-pos-academy .b4a-mark-pronoun{background:rgba(114,87,217,.14);border-radius:999px;box-shadow:inset 0 0 0 2px rgba(114,87,217,.28)}
.b4a-pos-academy .b4a-mark-preposition{text-decoration:overline 3px solid var(--b4a-green)}
.b4a-pos-academy .b4a-mark-conjunction{box-shadow:inset 0 -5px 0 rgba(244,185,66,.58)}
.b4a-pos-academy .b4a-mark-interjection{background:rgba(238,111,159,.15);border:2px dashed rgba(238,111,159,.62)}
.b4a-pos-academy .b4a-mark-proper-noun{background:linear-gradient(transparent 56%,rgba(244,185,66,.38) 56%)}

/* Full sentence exam palette */
.b4a-pos-academy .b4a-exam-help{background:#f6f8fc;border-radius:16px;padding:12px 14px;color:#526079;margin-bottom:14px}
.b4a-pos-academy .b4a-group-palette{display:grid;grid-template-columns:repeat(auto-fit,minmax(125px,1fr));gap:8px;margin:12px 0 16px}
.b4a-pos-academy .b4a-group-btn{border:2px solid #e2e7f0;background:#fff;border-radius:13px;padding:9px 8px;font-weight:900;color:#34425d}
.b4a-pos-academy .b4a-group-btn.is-active{background:#242f48;color:#fff;border-color:#242f48}
.b4a-pos-academy .b4a-token[data-label="Noun"]{background:rgba(61,139,253,.12);box-shadow:inset 0 0 0 2px rgba(61,139,253,.36)}
.b4a-pos-academy .b4a-token[data-label="Pronoun"]{background:rgba(114,87,217,.14);border-radius:999px;box-shadow:inset 0 0 0 2px rgba(114,87,217,.28)}
.b4a-pos-academy .b4a-token[data-label="Verb"]::before{content:"✓";position:absolute;top:-1.05em;left:50%;transform:translateX(-50%);color:var(--b4a-green);font-weight:1000}
.b4a-pos-academy .b4a-token[data-label="Adjective"]{text-decoration:underline 4px solid var(--b4a-purple);text-underline-offset:4px}
.b4a-pos-academy .b4a-token[data-label="Adverb"]{text-decoration:underline 4px dotted var(--b4a-teal);text-underline-offset:4px}
.b4a-pos-academy .b4a-token[data-label="Article"]{outline:3px solid rgba(232,154,34,.55);background:rgba(232,154,34,.11)}
.b4a-pos-academy .b4a-token[data-label="Preposition"]{text-decoration:overline 3px solid var(--b4a-green)}
.b4a-pos-academy .b4a-token[data-label="Conjunction"]{box-shadow:inset 0 -5px 0 rgba(244,185,66,.58)}
.b4a-pos-academy .b4a-token[data-label="Interjection"]{background:rgba(238,111,159,.15);border:2px dashed rgba(238,111,159,.62)}
.b4a-pos-academy .b4a-token.is-correct{border-color:#5db77e}
.b4a-pos-academy .b4a-token.is-incorrect{border-color:#e06464;background-color:#fff0f0}

/* Progress */
.b4a-pos-academy .b4a-summary-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:10px;margin:12px 0 16px}
.b4a-pos-academy .b4a-summary-card{background:#fff;border:1px solid #e7eaf2;border-radius:16px;padding:14px;text-align:center}
.b4a-pos-academy .b4a-summary-card strong{display:block;font-size:1.65rem;color:var(--b4a-purple)}
.b4a-pos-academy .b4a-mastery-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(185px,1fr));gap:11px;margin-top:14px}
.b4a-pos-academy .b4a-mastery-item{background:#fff;border:1px solid #e8eaf2;border-radius:17px;padding:13px}
.b4a-pos-academy .b4a-mastery-item strong{display:block;margin-bottom:7px}
.b4a-pos-academy .b4a-dots{display:flex;gap:5px}
.b4a-pos-academy .b4a-dot{width:18px;height:8px;border-radius:999px;background:#e5e7ef}
.b4a-pos-academy .b4a-dot.is-on{background:var(--b4a-teal)}
.b4a-pos-academy .b4a-level-heading{margin:20px 0 8px;font-size:1.15rem;color:#394660}
.b4a-pos-academy .b4a-practice-list{display:grid;gap:9px;text-align:left;margin:16px auto;max-width:650px}
.b4a-pos-academy .b4a-practice-row{background:#f6f8fc;border-radius:13px;padding:11px 13px}
.b4a-pos-academy .b4a-score-big{font-size:4rem;font-weight:1000;color:var(--b4a-purple);line-height:1;text-align:center}
.b4a-pos-academy .b4a-stars{text-align:center;font-size:1.8rem;letter-spacing:3px;margin:8px 0}
.b4a-pos-academy .b4a-center{text-align:center}
.b4a-pos-academy .b4a-footer-note{text-align:center;color:var(--b4a-muted);font-size:.88rem;margin-top:16px}

@media (max-width:640px){
  .b4a-pos-academy .b4a-app{padding:9px;border-radius:22px}
  .b4a-pos-academy .b4a-hero{border-radius:21px;padding:19px}
  .b4a-pos-academy .b4a-shell{padding:12px;border-radius:21px}
  .b4a-pos-academy .b4a-flash-area{min-height:405px;padding:4px}
  .b4a-pos-academy .b4a-flashcard{height:385px}
  .b4a-pos-academy .b4a-face{padding:18px}
  .b4a-pos-academy .b4a-toolbar{align-items:stretch}
  .b4a-pos-academy .b4a-toolbar-group{width:100%}
  .b4a-pos-academy .b4a-toolbar .b4a-btn{flex:1 1 30%}
  .b4a-pos-academy .b4a-token{padding:10px 10px}
  .b4a-pos-academy .b4a-quiz-box{padding:15px}
  .b4a-pos-academy .b4a-sentence-box{padding:14px}
  .b4a-pos-academy .b4a-group-palette{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:390px){
  .b4a-pos-academy .b4a-tab{padding:10px 12px;font-size:.93rem}
  .b4a-pos-academy .b4a-toolbar .b4a-btn{flex:1 1 46%}
  .b4a-pos-academy .b4a-group-palette{grid-template-columns:repeat(2,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .b4a-pos-academy *,.b4a-pos-academy *:before,.b4a-pos-academy *:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}
@media print{
  .b4a-pos-academy .b4a-hero,.b4a-pos-academy .b4a-nav,.b4a-pos-academy .b4a-panel:not([data-panel="progress"]),.b4a-pos-academy .b4a-print-hide,.b4a-pos-academy .b4a-footer-note{display:none!important}
  .b4a-pos-academy .b4a-panel[data-panel="progress"]{display:block!important}
  .b4a-pos-academy .b4a-app,.b4a-pos-academy .b4a-shell{box-shadow:none;background:#fff;border:0;padding:0}
  .b4a-pos-academy .b4a-mastery-grid{grid-template-columns:repeat(3,1fr)}
}