/* ═══════════════════════════════════════════════════════════════════════════
 AMA American Academy | AMA Speaking Program
 ═══════════════════════════════════════════════════════════════════════════ */
:root {
 --ama-css-ready: 1;
 --ama-blue: #1f3f9f;
 --ama-blue-mid: #3159be;
 --ama-blue-light: #edf2ff;
 --ama-red: #e31b23;
 --ama-red-dark: #b8151c;
 --ama-red-light: #fde8ea;
 --ama-white: #ffffff;
 --navy: #25489c;
 --navy2: #3e5fb4;
 --navy3: #5a76c7;
 --gold: #c9952a;
 --gold2: #f5c842;
 --teal: #483aa3;
 --teal2: #6257bb;
 --green: #1a7a4a;
 --red: #c41e3a;
 --light: #f4f7fc;
 --mint: #e2f3e6;
 --mint2: #d4edda;
 --mint-page: #ecf7ef;
 --border: #c5d4e8;
 --text: #0f2044;
 --dim: #5a6b82;
 --white: #ffffff;
 --card-bg: linear-gradient(145deg, #ffffff 0%, #eef4fc 100%);
 --card-border: rgba(13, 50, 104, 0.12);
 --font: 'Libre Baskerville', 'Times New Roman', Times, Georgia, serif;
 --serif: 'Libre Baskerville', 'Times New Roman', Times, Georgia, serif;
 --display: 'Libre Baskerville', 'Times New Roman', Times, Georgia, serif;
 --ui: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
 --shadow-sm: 0 2px 12px rgba(13, 50, 104, 0.08);
 --shadow-md: 0 12px 36px rgba(13, 50, 104, 0.14);
 --shadow-lg: 0 20px 50px rgba(196, 30, 58, 0.12);
 --radius: 14px;
 --gold-solid: #ffd700;
 --royal-blue: #002366;
 --royal-blue-btn: #003087;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html {
 scroll-behavior: auto;
 -webkit-text-size-adjust: 100%;
 /* Keep vertical scroll on the document - do NOT lock overflow-y on html.
 Locking both html+body overflow-x breaks laptop trackpad scroll in Chrome. */
 overflow-x: hidden;
 overflow-y: auto;
 height: auto;
}
body {
 font-family: var(--font);
 background: var(--royal-blue);
 color: var(--text);
 line-height: 1.65;
 min-height: 100vh;
 overflow-x: hidden;
 overflow-y: visible;
 overscroll-behavior-y: auto;
 touch-action: pan-x pan-y pinch-zoom;
}
#app-main {
 position: relative;
 z-index: 1;
 max-width: 100vw;
 overflow-x: hidden;
 overflow-y: visible;
}
a, button, [role="button"], .pathway-card, .unit-card-pro, .platform-chip {
 touch-action: manipulation;
 -webkit-tap-highlight-color: rgba(255, 213, 79, 0.35);
}
button, .btn-install, .cta-main, .cta-ghost, .platform-chip, .pathway-card {
 cursor: pointer;
 min-height: 44px;
}
.vi-reveal.show-vi { display: block !important; animation: fadeUp 0.3s ease; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ── Page background - solid professional navy ── */
.bg-mesh {
 display: block !important;
 position: fixed;
 inset: 0;
 z-index: 0;
 pointer-events: none;
 background:
 linear-gradient(180deg, #e8c547 0%, #d4af37 3px, #1a3560 3px, #1a3560 6px, transparent 6px),
 radial-gradient(ellipse 110% 70% at 50% 0%, rgba(255, 255, 255, 0.08) 0%, transparent 52%),
 radial-gradient(ellipse 55% 45% at 8% 55%, rgba(227, 27, 35, 0.11) 0%, transparent 55%),
 radial-gradient(ellipse 50% 40% at 92% 65%, rgba(247, 215, 122, 0.12) 0%, transparent 50%),
 linear-gradient(165deg, #243f6e 0%, #2f5082 38%, #3a5f92 62%, #2a4878 100%);
}
.bg-mesh::before {
 display: block;
 content: "";
 position: absolute;
 inset: 0;
 background:
 repeating-linear-gradient(
 125deg,
 transparent 0,
 transparent 48px,
 rgba(212, 175, 55, 0.04) 48px,
 rgba(212, 175, 55, 0.04) 49px
 );
 opacity: 0.9;
 mask-image: radial-gradient(ellipse 95% 85% at 50% 35%, black 20%, transparent 78%);
}
.bg-mesh::after {
 display: block;
 content: "";
 position: absolute;
 inset: 0;
 background:
 linear-gradient(90deg, rgba(227, 27, 35, 0.12) 0%, transparent 22%),
 linear-gradient(270deg, rgba(212, 175, 55, 0.14) 0%, transparent 30%),
 radial-gradient(ellipse 100% 100% at 50% 100%, rgba(0, 0, 0, 0.45) 0%, transparent 55%);
 opacity: 1;
}
.bg-orb { display: none; }
.bg-grid {
 display: block;
 position: absolute;
 inset: 0;
 opacity: 0.35;
 background-image:
 linear-gradient(rgba(212, 175, 55, 0.12) 1px, transparent 1px),
 linear-gradient(90deg, rgba(212, 175, 55, 0.08) 1px, transparent 1px);
 background-size: 56px 56px;
 mask-image: radial-gradient(ellipse 90% 80% at 50% 20%, black, transparent);
}

@media (max-width: 900px) {
 .bg-orb { display: none; }
 .bg-grid { opacity: 0.25; }
 .topbar--pro { backdrop-filter: none; }
}

@media (prefers-reduced-motion: reduce) {
 html { scroll-behavior: auto; }
 *, *::before, *::after {
 animation: none !important;
 transition: none !important;
 }
 .bg-orb { display: none; }
 .topbar--pro { backdrop-filter: none; }
}
.bg-grid {
 position: absolute;
 inset: 0;
 background-image:
 linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
 linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
 background-size: 48px 48px;
 mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, black, transparent);
}

#app-main, .site-header, .site-foot { position: relative; z-index: 1; }

.site-header {
 position: sticky;
 top: 0;
 z-index: 200;
}

/* ── Topbar - luxury enterprise ── */
.topbar--pro {
 padding: 0;
 background: var(--royal-blue);
 backdrop-filter: none;
 border-bottom: 2px solid var(--gold-solid);
 box-shadow: 0 8px 24px rgba(0, 20, 60, 0.35);
}
.topbar__inner {
 max-width: 1320px;
 margin: 0 auto;
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 16px;
 padding: 14px 24px 10px;
 flex-wrap: nowrap;
}
.topbar--pro .brand-logo-frame {
 display: inline-flex;
 align-items: center;
 padding: 5px 10px;
 background: #fff;
 border-radius: 8px;
 border: 1px solid rgba(255, 215, 0, 0.5);
 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.topbar--pro .brand-logo {
 height: 48px;
 max-width: 130px;
 width: auto;
 object-fit: contain;
 filter: none;
}
.topbar--pro .brand-program {
 font-size: .95rem;
 font-weight: 800;
 color: #fff;
 letter-spacing: 0.06em;
 text-transform: uppercase;
}
.topbar--pro .brand-teacher {
 font-size: .78rem;
 font-weight: 700;
 color: rgba(255, 255, 255, 0.95);
 letter-spacing: 0.04em;
 margin-top: 2px;
}
.topbar--pro .brand-founder {
 display: block;
 font-size: .72rem;
 font-weight: 600;
 color: rgba(255, 213, 79, 0.98);
 letter-spacing: 0.03em;
 margin-top: 3px;
 line-height: 1.3;
}
.landing-centre-line {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 flex-wrap: wrap;
 justify-content: center;
 margin: 10px auto 0;
 padding: 0;
 max-width: 680px;
 color: rgba(255, 255, 255, 0.82);
 font-size: .9rem;
 font-weight: 500;
 line-height: 1.55;
 text-align: center;
}
.landing-centre-line i { color: rgba(255, 255, 255, 0.65); font-size: .85rem; }
.site-foot__developer {
 font-size: .82rem;
 color: rgba(255, 255, 255, 0.65);
 margin-top: 8px;
}
.site-foot__developer-name {
 color: #ffd54f;
 font-weight: 800;
 font-style: normal;
 letter-spacing: 0.02em;
}
.nav-toggle {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 0;
 width: 42px;
 height: 42px;
 padding: 0;
 border: 1px solid rgba(255,255,255,.42);
 border-radius: 12px;
 background: linear-gradient(135deg, #ffd86a, #c89624);
 cursor: pointer;
 color: #1a1200;
 font-size: .95rem;
 font-weight: 800;
 letter-spacing: 0;
 position: fixed;
 top: 78px;
 left: 10px;
 z-index: 260;
 box-shadow: 0 10px 22px rgba(24, 40, 96, 0.28);
}
.nav-toggle i { font-size: .95rem; }
.nav-toggle__text { display: none; }

.top-main-nav-wrap {
 position: sticky;
 top: 0;
 z-index: 190;
 background: var(--royal-blue);
 border-top: 1px solid rgba(255, 215, 0, 0.35);
 border-bottom: 2px solid var(--gold-solid);
 box-shadow: 0 8px 20px rgba(0, 20, 60, 0.35);
 overflow: visible;
}
.top-main-nav.topnav--pro button {
 border-radius: 10px;
 border: 2px solid var(--gold-solid);
 background: var(--royal-blue-btn);
 color: #fff;
 padding: 9px 12px;
 font-size: .73rem;
 font-weight: 700;
 box-shadow: none;
}
.top-main-nav.topnav--pro button i {
 font-size: .88rem;
 color: #fff;
}
.top-main-nav.topnav--pro button:hover {
 background: #003da5;
 border-color: var(--gold-solid);
}
.top-main-nav.topnav--pro button.active {
 background: var(--gold-solid);
 border-color: var(--gold-solid);
 color: var(--royal-blue);
 box-shadow: 0 4px 12px rgba(255, 215, 0, 0.35);
}
.top-main-nav {
 display: grid !important;
 grid-template-columns: repeat(6, minmax(0, 1fr));
 gap: 6px;
 padding: 8px 10px 10px;
 justify-content: stretch;
 align-items: stretch;
 width: 100%;
 max-width: 100%;
}
.top-main-nav.topnav--pro button span {
 display: block !important;
 font-size: .62rem;
 line-height: 1.15;
 text-align: center;
 word-break: break-word;
}
.main-nav-strip.top-main-nav {
 flex-wrap: unset;
 overflow: visible;
}
.main-nav-strip {
 width: 100%;
 max-width: 100%;
 margin: 0 auto;
 display: flex;
 align-items: stretch;
 justify-content: center;
 gap: 6px;
 padding: 0 16px 0;
 flex-wrap: wrap;
 overflow-x: visible;
 overflow-y: visible;
 scrollbar-width: none;
 -ms-overflow-style: none;
}
.main-nav-strip::-webkit-scrollbar { display: none; }

.topnav--lux button {
 display: inline-flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 gap: 6px;
 padding: 12px 10px 14px;
 min-width: 72px;
 flex: 1 1 calc(16.666% - 6px);
 max-width: 132px;
 border: none;
 border-radius: 0;
 background: transparent;
 color: #fff;
 font-size: .82rem;
 font-weight: 800;
 cursor: pointer;
 font-family: var(--display);
 transition: all .22s ease;
 letter-spacing: 0.05em;
 text-transform: uppercase;
 white-space: normal;
 text-align: center;
 line-height: 1.15;
 border-bottom: 4px solid transparent;
 position: relative;
}
.topnav--lux button i {
 font-size: 1.45rem;
 color: #fff;
 opacity: 1;
 line-height: 1;
}
.topnav--lux button span {
 font-size: .78rem;
 font-weight: 800;
}
.topnav--lux button:hover {
 background: rgba(255, 255, 255, 0.08);
 color: #ffd54f;
}
.topnav--lux button:hover i { color: #ffd54f; }
.topnav--lux button.active {
 background: linear-gradient(180deg, rgba(255, 213, 79, 0.22) 0%, rgba(255, 213, 79, 0.06) 100%);
 color: #ffd54f;
 border-bottom-color: #ffd54f;
 box-shadow: inset 0 -2px 0 rgba(255, 213, 79, 0.3);
}
.topnav--lux button.active i { color: #ffd54f; }

.topnav--pro {
 display: flex;
 align-items: center;
 gap: 4px;
 padding: 0;
 background: transparent;
 border: none;
 border-radius: 0;
 flex: none;
 min-width: 0;
 justify-content: center;
 flex-wrap: wrap;
}
.topnav--pro button {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 6px;
 padding: 10px 10px;
 min-height: 44px;
 border: none;
 border-radius: 999px;
 background: transparent;
 color: rgba(255, 255, 255, 0.88);
 font-size: .72rem;
 font-weight: 600;
 cursor: pointer;
 font-family: var(--font);
 transition: all .22s ease;
 letter-spacing: 0.03em;
 white-space: normal;
 text-align: center;
 flex: 1 1 auto;
 max-width: none;
}
.top-main-nav.topnav--pro button {
 flex: unset;
 width: 100%;
 max-width: none;
 min-height: 52px;
 border-radius: 10px;
 flex-direction: column;
 gap: 4px;
 padding: 8px 4px;
 font-size: .68rem;
}
.topnav--pro button i { font-size: .78rem; opacity: 0.92; color: rgba(255, 255, 255, 0.9); }
.topnav--pro button:hover {
 background: rgba(255, 255, 255, 0.12);
 color: #fff;
}
.topnav--pro button.active {
 background: linear-gradient(135deg, #c9952a, #ffd54f);
 color: #1a1200;
 box-shadow: 0 4px 16px rgba(201, 149, 42, 0.4);
 font-weight: 700;
}
.topnav--pro button.active i { opacity: 1; color: #1a1200; }

.topbar-actions {
 display: flex;
 align-items: center;
 gap: 8px;
 flex-shrink: 0;
}
.btn-install {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 padding: 11px 18px;
 border-radius: 999px;
 border: 1px solid rgba(255, 213, 79, 0.45);
 background: rgba(255, 255, 255, 0.1);
 color: #fff;
 font-size: .78rem;
 font-weight: 800;
 font-family: var(--display);
 cursor: pointer;
 text-decoration: none;
 transition: all .2s;
 letter-spacing: 0.05em;
 text-transform: uppercase;
 white-space: nowrap;
}
.btn-install:hover {
 background: rgba(255, 213, 79, 0.18);
 border-color: rgba(255, 213, 79, 0.55);
 color: #ffd54f;
}
.btn-install--primary {
 background: linear-gradient(135deg, #c9952a, #ffd54f);
 border-color: transparent;
 color: #1a1200;
}
.btn-install--primary:hover {
 box-shadow: 0 6px 20px rgba(201, 149, 42, 0.45);
 color: #1a1200;
}
.btn-install[hidden] { display: none !important; }

.app-refresh-btn {
 display: inline-flex !important;
 align-items: center;
 justify-content: center;
 gap: 6px;
 min-width: 44px;
 min-height: 44px;
 padding: 10px 14px;
 border-radius: 999px;
 border: 2px solid rgba(255, 213, 79, 0.75);
 background: linear-gradient(135deg, #ffd54f, #ffe082);
 color: var(--royal-blue);
 font-family: var(--ui);
 font-size: .74rem;
 font-weight: 900;
 cursor: pointer;
 white-space: nowrap;
 position: relative;
 flex-shrink: 0;
 box-shadow: 0 4px 14px rgba(255, 213, 79, 0.35);
}
.app-refresh-btn i { color: var(--royal-blue); }
.app-refresh-btn:hover:not(:disabled) {
 filter: brightness(1.05);
}
.app-refresh-btn:disabled {
 opacity: .7;
 cursor: wait;
}
.app-refresh-btn.is-spinning i {
 animation: app-refresh-spin 0.75s linear infinite;
}
.app-refresh-btn__label {
 display: none;
}
@media (min-width: 520px) {
 .app-refresh-btn__label { display: inline; }
}
@keyframes app-refresh-spin {
 from { transform: rotate(0deg); }
 to { transform: rotate(360deg); }
}
.app-refresh-toast {
 position: fixed;
 left: 50%;
 bottom: calc(18px + env(safe-area-inset-bottom, 0px));
 transform: translateX(-50%);
 z-index: 1600;
 padding: 12px 18px;
 border-radius: 999px;
 background: rgba(26, 37, 112, 0.94);
 color: #fff;
 font-size: .84rem;
 font-weight: 700;
 box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
 pointer-events: none;
}
.app-sync-dot {
 position: absolute;
 top: 3px;
 right: 3px;
 width: 9px;
 height: 9px;
 border-radius: 50%;
 background: #157a40;
 box-shadow: 0 0 0 2px rgba(255, 213, 79, 0.95);
}

.admin-trash-panel {
 margin-top: 22px;
 padding: 16px 18px;
 border-radius: 14px;
 background: rgba(255, 255, 255, 0.06);
 border: 1px solid rgba(255, 255, 255, 0.14);
}
.admin-trash-panel h3 {
 margin: 0 0 8px;
 font-size: 1rem;
 color: #fff;
}
.admin-trash-lead {
 margin: 0 0 14px;
 font-size: .82rem;
 line-height: 1.5;
 color: rgba(255, 255, 255, 0.78);
}
.admin-trash-list { display: flex; flex-direction: column; gap: 10px; }
.admin-trash-row {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 justify-content: space-between;
 gap: 10px;
 padding: 12px 14px;
 border-radius: 10px;
 background: rgba(0, 0, 0, 0.18);
 border: 1px solid rgba(255, 255, 255, 0.1);
}
.admin-trash-row__info { color: rgba(255, 255, 255, 0.92); font-size: .84rem; line-height: 1.45; }
.admin-trash-row__actions { display: flex; flex-wrap: wrap; gap: 8px; }

.quick-nav-controls {
 position: fixed;
 right: 14px;
 bottom: 14px;
 z-index: 520;
 display: flex;
 flex-direction: column;
 gap: 8px;
}
.quick-nav-btn {
 width: 44px;
 height: 44px;
 border: 1px solid rgba(255, 255, 255, 0.55);
 border-radius: 12px;
 background: linear-gradient(135deg, rgba(255,255,255,.92), rgba(230, 240, 255, .92));
 color: #204377;
 box-shadow: 0 10px 22px rgba(21, 48, 101, 0.25);
 font-size: 1rem;
}
.quick-nav-btn:hover {
 transform: translateY(-1px);
 background: linear-gradient(135deg, #ffffff, #e8f0ff);
}
.quick-nav-btn:disabled {
 opacity: .45;
 cursor: not-allowed;
}

.desktop-sidebar {
 display: none;
}
.mobile-sidebar-backdrop {
 position: fixed;
 inset: 0;
 background: rgba(9, 20, 47, .55);
 z-index: 170;
}

@media (min-width: 961px) {
 .nav-toggle {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 }
 .desktop-sidebar {
 display: flex;
 flex-direction: column;
 gap: 14px;
 position: fixed;
 top: 96px;
 left: 12px;
 bottom: 12px;
 width: 264px;
 padding: 16px 12px;
 border-radius: 18px;
 border: 1px solid rgba(255, 255, 255, 0.16);
 background: linear-gradient(180deg, rgba(255, 255, 255, 0.97) 0%, rgba(245, 248, 255, 0.96) 100%);
 box-shadow: 0 16px 36px rgba(54, 64, 140, 0.28);
 z-index: 200;
 backdrop-filter: blur(10px);
 transition: transform .25s ease;
 transform: translateX(calc(-100% - 24px));
 }
 body.nav-drawer-open .desktop-sidebar {
 transform: translateX(0);
 }
 body.nav-drawer-open .mobile-sidebar-backdrop {
 display: block !important;
 }
 .mobile-sidebar-backdrop { display: none !important; }
 .desktop-sidebar__head {
 padding: 10px;
 border-radius: 12px;
 background: rgba(255, 255, 255, 0.85);
 border: 1px solid rgba(57, 102, 176, 0.2);
 }
 .desktop-sidebar__eyebrow {
 font-size: .62rem;
 letter-spacing: .12em;
 text-transform: uppercase;
 color: rgba(47, 87, 152, 0.76);
 margin-bottom: 4px;
 }
 .desktop-sidebar__head h3 {
 color: #234b8b;
 font-size: .95rem;
 margin-bottom: 4px;
 font-family: var(--display);
 }
 .desktop-sidebar__head p {
 color: rgba(50, 85, 142, 0.82);
 font-size: .73rem;
 line-height: 1.45;
 }
 .sidebar-nav {
 display: flex;
 flex-direction: column;
 align-items: stretch;
 justify-content: flex-start;
 gap: 6px;
 margin: 0;
 max-width: none;
 width: 100%;
 padding: 0;
 flex: 1;
 overflow-y: auto;
 overflow-x: hidden;
 scrollbar-width: thin;
 max-height: none;
 }
 .sidebar-nav::-webkit-scrollbar {
 width: 8px;
 }
 .sidebar-nav::-webkit-scrollbar-thumb {
 background: rgba(58, 101, 171, 0.35);
 border-radius: 999px;
 }
 .sidebar-nav.topnav--lux button {
 width: 100%;
 min-width: 0;
 display: flex;
 flex-direction: row;
 justify-content: flex-start;
 align-items: center;
 gap: 10px;
 text-transform: none;
 letter-spacing: .02em;
 border: 2px solid var(--gold-solid);
 border-radius: 10px;
 padding: 11px 12px;
 background: var(--royal-blue-btn);
 color: #fff;
 font-size: .86rem;
 font-weight: 700;
 }
 .sidebar-nav.topnav--lux button i {
 width: 28px;
 height: 28px;
 border-radius: 6px;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 font-size: .95rem;
 background: rgba(255, 255, 255, 0.12);
 color: #fff;
 }
 .sidebar-nav.topnav--lux button span {
 font-size: .83rem;
 font-family: var(--ui);
 font-weight: 700;
 }
 .sidebar-nav.topnav--lux button:hover {
 background: #003da5;
 transform: none;
 border-color: var(--gold-solid);
 }
 .sidebar-nav.topnav--lux button.active {
 border-color: var(--gold-solid);
 background: var(--gold-solid);
 color: var(--royal-blue);
 box-shadow: 0 4px 14px rgba(255, 215, 0, 0.35);
 }
 .sidebar-nav.topnav--lux button.active i {
 background: rgba(0, 35, 102, 0.12);
 color: var(--royal-blue);
 }
 #app-main {
 padding-left: 0 !important;
 transition: padding-left .24s ease;
 }
}

.topbar--pro .vi-pill {
 padding: 9px 12px;
 border-radius: 10px;
 border: 1px solid rgba(255, 255, 255, 0.18);
 background: rgba(255, 255, 255, 0.06);
 color: rgba(255, 255, 255, 0.85);
 font-size: .72rem;
 font-weight: 700;
}
.topbar--pro .vi-pill:hover { background: rgba(255, 255, 255, 0.12); }
.topbar--pro .vi-pill.on {
 background: var(--ama-blue);
 border-color: var(--ama-blue);
 color: #fff;
}

.cta-ghost--link {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 text-decoration: none;
 color: inherit;
}
.cta-ghost--light {
 color: #fff !important;
 border-color: rgba(255,255,255,.35) !important;
 background: rgba(255,255,255,.1) !important;
}
.cta-ghost--light:hover {
 background: rgba(255,255,255,.18) !important;
 border-color: rgba(255,213,79,.5) !important;
}

.mobile-bottom-nav { display: none; }

@media (max-width: 960px) {
 .desktop-sidebar {
 display: flex !important;
 flex-direction: column;
 gap: 10px;
 position: fixed;
 top: 70px;
 left: 0;
 bottom: 0;
 width: min(82vw, 320px);
 padding: 12px 10px 14px;
 border-radius: 0 16px 16px 0;
 border: 1px solid rgba(255,255,255,.42);
 border-left: none;
 background: linear-gradient(180deg, rgba(255, 255, 255, .99), rgba(243, 246, 255, .99));
 box-shadow: 16px 0 36px rgba(31, 64, 122, .26);
 z-index: 185;
 transform: translateX(-104%);
 transition: transform .25s ease;
 }
 body.mobile-sidebar-open .desktop-sidebar {
 transform: translateX(0);
 }
 body.nav-drawer-open .desktop-sidebar,
 body.mobile-sidebar-open .desktop-sidebar {
 transform: translateX(0);
 }
 .mobile-sidebar-backdrop[hidden] { display: none !important; }
 body.mobile-sidebar-open .mobile-sidebar-backdrop {
 display: block;
 }
 .desktop-sidebar__head {
 padding: 10px;
 border-radius: 10px;
 background: rgba(255,255,255,.92);
 border: 1px solid rgba(65,108,179,.2);
 }
 .desktop-sidebar__eyebrow { color: #355f9f; }
 .desktop-sidebar__head h3 { color: #234e8e; font-size: .9rem; }
 .desktop-sidebar__head p { color: #385b92; font-size: .73rem; }
 .sidebar-nav {
 flex: 1;
 min-height: 0;
 overflow-y: auto;
 overflow-x: hidden;
 -webkit-overflow-scrolling: touch;
 scrollbar-width: thin;
 max-height: calc(100vh - 180px);
 }
 .sidebar-nav.topnav--lux button {
 width: 100%;
 min-width: 0;
 display: flex;
 flex-direction: row;
 justify-content: flex-start;
 align-items: center;
 gap: 10px;
 text-transform: none;
 letter-spacing: .02em;
 border: 2px solid var(--gold-solid);
 border-radius: 10px;
 padding: 10px 11px;
 background: var(--royal-blue-btn);
 color: #fff;
 font-size: .86rem;
 min-height: 0;
 font-weight: 700;
 }
 .sidebar-nav.topnav--lux button i {
 width: 27px;
 height: 27px;
 border-radius: 6px;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 font-size: .92rem;
 color: #fff;
 background: rgba(255, 255, 255, 0.12);
 }
 .sidebar-nav.topnav--lux button span {
 font-size: .83rem;
 font-family: var(--ui);
 font-weight: 700;
 }
 .sidebar-nav.topnav--lux button.active {
 border-color: var(--gold-solid);
 background: var(--gold-solid);
 color: var(--royal-blue);
 box-shadow: 0 4px 14px rgba(255, 215, 0, 0.35);
 }
 .sidebar-nav.topnav--lux button.active i {
 background: rgba(0, 35, 102, 0.12);
 color: var(--royal-blue);
 }
 .nav-toggle {
 display: inline-flex !important;
 width: 40px;
 height: 40px;
 padding: 0;
 border-radius: 10px;
 background: var(--royal-blue-btn);
 border: 2px solid var(--gold-solid);
 color: #fff;
 top: 74px;
 left: 8px;
 }
 .main-nav-strip.top-main-nav { display: grid !important; }
 .top-main-nav {
 padding: 6px 8px 8px;
 gap: 5px;
 grid-template-columns: repeat(4, minmax(0, 1fr));
 }
 .top-main-nav.topnav--pro button {
 min-height: 50px;
 padding: 8px 4px;
 font-size: .64rem;
 border-radius: 10px;
 }
 .topbar--pro { position: relative; }
 .topbar__inner { position: relative; }
 .topbar--pro .brand-text-block {
 display: flex;
 flex-direction: column;
 min-width: 0;
 max-width: calc(100vw - 120px);
 }
 .topbar--pro .brand-program { font-size: .68rem; line-height: 1.2; }
 .topbar--pro .brand-teacher {
 display: block;
 font-size: .62rem;
 line-height: 1.25;
 white-space: normal;
 }
 .topbar--pro .brand-logo { height: 40px; max-width: 110px; }
 .topbar--pro .brand-logo-frame { padding: 4px 8px; }
 .landing-centre-line { font-size: .8rem; padding: 0 12px; }
 .site-header { position: sticky; }
 #app-main { padding-left: 0 !important; padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
 .mobile-bottom-nav { display: none !important; }
 body.mobile-sidebar-open .desktop-sidebar {
 display: flex !important;
 }
 .quick-nav-controls {
 right: 10px;
 bottom: calc(12px + env(safe-area-inset-bottom, 0px));
 flex-direction: column;
 gap: 6px;
 }
 .quick-nav-btn {
 width: 38px;
 height: 38px;
 min-height: 38px;
 padding: 0;
 font-size: 0.85rem;
 border-radius: 10px;
 }
 .site-foot { padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
 .lesson-view { padding-bottom: env(safe-area-inset-bottom, 0px); }

 .mobile-bottom-nav {
 display: none !important;
 }

 .mobile-install-bar {
 display: flex;
 align-items: center;
 gap: 10px;
 position: fixed;
 bottom: calc(10px + env(safe-area-inset-bottom, 0px));
 left: 10px;
 right: 10px;
 z-index: 550;
 background: linear-gradient(135deg, #1a2570, #2e3192);
 border: 1px solid rgba(255, 213, 79, 0.4);
 border-radius: 14px;
 padding: 10px 14px;
 box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
 }
 .mobile-install-bar[hidden] { display: none !important; }
 .mobile-install-bar__text {
 flex: 1;
 min-width: 0;
 }
 .mobile-install-bar__text strong {
 display: block;
 font-size: .82rem;
 color: #fff;
 }
 .mobile-install-bar__text span {
 font-size: .72rem;
 color: rgba(255, 255, 255, 0.72);
 }
 .mobile-install-bar__btn {
 flex-shrink: 0;
 padding: 10px 16px;
 border-radius: 999px;
 border: 1px solid rgba(255, 255, 255, 0.3);
 background: rgba(255, 255, 255, 0.12);
 color: #fff;
 font-weight: 800;
 font-size: .75rem;
 text-decoration: none;
 font-family: var(--display);
 }
 .mobile-install-bar__btn--gold {
 background: linear-gradient(135deg, #c9952a, #ffd54f);
 color: #1a1200;
 border: none;
 }
}

/* Topbar sticky - handled by .site-header */
.brand {
 display: flex;
 align-items: center;
 gap: 12px;
 background: none;
 border: none;
 cursor: pointer;
 padding: 10px 0;
 text-align: left;
}
.brand-ama {
 font-family: var(--display);
 font-size: 1.35rem;
 font-weight: 800;
 color: var(--ama-blue);
 letter-spacing: 0.02em;
 line-height: 1.1;
}
.brand-ama span { color: var(--ama-red); }
.brand-program {
 display: block;
 font-family: var(--display);
 font-size: .92rem;
 font-weight: 800;
 color: var(--ama-blue);
 letter-spacing: 0.03em;
 line-height: 1.2;
}
.brand-teacher {
 display: block;
 font-family: var(--display);
 font-size: 1.2rem;
 font-weight: 800;
 color: var(--ama-red);
 letter-spacing: 0.02em;
 line-height: 1.15;
 margin-top: 2px;
}
.brand-logo {
 height: 64px;
 width: auto;
 max-width: 148px;
 object-fit: contain;
 flex-shrink: 0;
 display: block;
}
.brand-text-block {
 display: flex;
 flex-direction: column;
 gap: 2px;
 text-align: left;
}
.hero-logo-wrap {
 margin-bottom: 24px;
 display: flex;
 justify-content: center;
}
.hero-logo {
 max-width: min(320px, 90vw);
 height: auto;
 filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.35));
}
.footer-logo {
 display: block;
 margin: 0 auto 16px;
 height: 56px;
 width: auto;
 object-fit: contain;
}
.topnav:not(.topnav--pro) { display: flex; gap: 4px; flex-wrap: wrap; }
.topnav:not(.topnav--pro) button {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 padding: 8px 12px;
 border: none;
 border-radius: 8px;
 background: transparent;
 color: var(--ama-blue);
 font-size: .75rem;
 font-weight: 600;
 cursor: pointer;
 font-family: var(--font);
 transition: all .2s;
}
.topnav:not(.topnav--pro) button:hover { background: var(--ama-blue-light); color: var(--ama-red); }
.topnav:not(.topnav--pro) button.active { background: var(--ama-red); color: var(--ama-white); }
.topbar-actions { display: flex; align-items: center; gap: 10px; }
.vi-pill {
 padding: 8px 14px;
 border-radius: 8px;
 border: 2px solid var(--ama-blue);
 background: #fff;
 color: #0f2044;
 font-size: .78rem;
 font-weight: 700;
 cursor: pointer;
 font-family: var(--font);
 display: inline-flex;
 align-items: center;
 gap: 6px;
 transition: all .2s;
}
.vi-pill:hover { background: var(--ama-blue-light); }
.vi-pill.on { background: var(--ama-blue); color: #fff; border-color: var(--ama-blue); }

/* ── Views ── */
.view { display: none; padding-bottom: 40px; }
.view--active { display: block; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px 48px; }

/* ── Hero ── */
.hero-pro {
 padding: 56px 24px 72px;
 position: relative;
}
.hero-pro__inner { max-width: 900px; margin: 0 auto; text-align: center; }
.hero-pro__badges { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 28px; }
.pill {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 padding: 6px 14px;
 border-radius: 20px;
 font-size: .68rem;
 font-weight: 700;
 letter-spacing: .06em;
 text-transform: uppercase;
}
.pill--teal { background: rgba(30,74,138,.4); border: 1px solid rgba(255,255,255,.3); color: #b8d4f8; }
.pill--ama-red { background: rgba(196,30,58,.45); border: 1px solid rgba(255,255,255,.35); color: #fff; }
.pill--ama-blue { background: rgba(13,50,104,.55); border: 1px solid rgba(255,255,255,.3); color: #dbeafe; }
.pill--gold { background: rgba(201,149,42,.25); border: 1px solid rgba(201,149,42,.45); color: var(--gold2); }
.pill--white { background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.35); color: #fff; }
.hero-pro__title {
 font-family: var(--serif);
 font-size: clamp(1.85rem, 5vw, 3rem);
 font-weight: 900;
 color: #fff;
 line-height: 1.15;
 margin-bottom: 18px;
}
.hero-pro__title em { color: var(--gold2); font-style: italic; }
.hero-pro__sub {
 font-size: 1.05rem;
 color: rgba(255,255,255,.78);
 line-height: 1.75;
 margin-bottom: 32px;
}
.hero-pro__stats {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
 gap: 14px;
 margin-bottom: 36px;
 max-width: 640px;
 margin-left: auto;
 margin-right: auto;
}
.stat-card {
 background: var(--card-bg);
 border-radius: var(--radius);
 padding: 18px;
 border: 2px solid var(--card-border);
 border-top: 3px solid var(--ama-red);
 box-shadow: var(--shadow-md);
}
.stat-card__n { display: block; font-family: var(--serif); font-size: 1.75rem; font-weight: 900; color: var(--ama-blue); }
.stat-card__l { font-size: .62rem; text-transform: uppercase; letter-spacing: .1em; color: var(--dim); font-weight: 700; margin-top: 4px; }
.cta-main {
 display: inline-flex;
 align-items: center;
 gap: 10px;
 padding: 16px 32px;
 border: none;
 border-radius: 12px;
 background: linear-gradient(135deg, #274ea8, #1f3f89);
 color: var(--ama-white);
 font-family: var(--display);
 font-size: 1rem;
 font-weight: 800;
 cursor: pointer;
 box-shadow: 0 8px 26px rgba(25, 53, 124, 0.38);
 transition: transform .2s, box-shadow .2s;
}
.cta-main:hover { transform: translateY(-3px); box-shadow: 0 14px 36px rgba(25, 53, 124, 0.48); }

/* ── Section heads ── */
.section-head {
 font-family: var(--serif);
 font-size: 1.5rem;
 color: #fff;
 margin-bottom: 8px;
 display: flex;
 align-items: center;
 gap: 10px;
}
.section-head--mt { margin-top: 48px; }
.section-lead { color: rgba(255,255,255,.65); font-size: .92rem; margin-bottom: 24px; }

/* ── Zone hub cards ── */
.zone-hub {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
 gap: 16px;
}
.zone-card {
 background: var(--card-bg);
 border: 2px solid var(--card-border);
 border-radius: var(--radius-lg);
 padding: 22px;
 cursor: pointer;
 text-align: left;
 font-family: var(--font);
 transition: all .3s;
 box-shadow: var(--shadow-sm);
 position: relative;
 overflow: hidden;
}
.zone-card::before {
 content: '';
 position: absolute;
 top: 0; left: 0; right: 0;
 height: 4px;
 background: var(--zc, var(--teal));
}
.zone-card:hover {
 transform: translateY(-6px);
 box-shadow: var(--shadow-lg);
 border-color: rgba(255,255,255,.4);
}
.zone-card__icon {
 width: 52px; height: 52px;
 border-radius: 14px;
 background: var(--zc, var(--teal));
 color: #fff;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 1.35rem;
 margin-bottom: 14px;
 box-shadow: 0 6px 20px rgba(0,0,0,.15);
}
.zone-card h3 { font-family: var(--display); font-size: 1.1rem; color: var(--navy); margin-bottom: 6px; }
.zone-card p { font-size: .82rem; color: var(--dim); }

/* ── Level cards ── */
.level-hub { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.level-card-pro {
 background: var(--card-bg);
 border-radius: var(--radius-lg);
 padding: 28px;
 border: 2px solid var(--card-border);
 border-left: 5px solid var(--ama-red);
 cursor: pointer;
 text-align: left;
 font-family: var(--font);
 transition: all .3s;
 box-shadow: var(--shadow-md);
}
.level-card-pro.mindset1 { border-left-color: var(--ama-blue); }
.level-card-pro:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.level-card-pro h3 { font-family: var(--serif); font-size: 1.4rem; color: var(--navy); margin-bottom: 8px; }
.level-card-pro .tag { font-size: .72rem; font-weight: 800; color: var(--teal); text-transform: uppercase; letter-spacing: .08em; }
.level-card-pro p { font-size: .88rem; color: var(--dim); margin: 12px 0; }
.level-card-pro .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
 padding: 4px 12px;
 border-radius: 20px;
 font-size: .68rem;
 font-weight: 700;
 background: var(--light);
 color: var(--dim);
}

.anti-mem {
 display: flex;
 gap: 20px;
 align-items: flex-start;
 background: linear-gradient(135deg, rgba(94,58,138,.25), rgba(13,115,119,.2));
 border: 1px solid rgba(255,255,255,.15);
 border-radius: var(--radius-lg);
 padding: 28px;
 margin-top: 40px;
}
.anti-mem__icon {
 width: 56px; height: 56px;
 border-radius: 50%;
 background: var(--purple);
 color: #fff;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 1.5rem;
 flex-shrink: 0;
}
.anti-mem h3 { font-family: var(--display); color: #fff; margin-bottom: 8px; }
.anti-mem p { color: rgba(255,255,255,.8); font-size: .9rem; }
.vi-reveal {
 display: none;
 margin-top: 8px;
 padding: 10px 14px;
 background: #eef6fb;
 border-radius: 8px;
 font-size: .85rem;
 color: #1a4d6e;
 border-left: 3px solid #3d8fc4;
}
.panel-sm .vi-reveal.show-vi {
 background: #eef6fb;
 color: #1a4d6e;
}
.vi-inline-btn {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 margin-top: 8px;
 padding: 6px 10px;
 border: 1px solid rgba(46, 49, 146, .25);
 border-radius: 999px;
 background: #f4f8ff;
 color: var(--ama-blue);
 font-size: .72rem;
 font-weight: 800;
 letter-spacing: .03em;
 text-transform: uppercase;
 min-height: auto;
}
.vi-inline-btn:hover {
 background: var(--ama-blue);
 color: #fff;
}

/* ── Sub hero ── */
.sub-hero-pro {
 padding: 40px 24px;
 background: linear-gradient(135deg, var(--navy2), var(--navy3));
 border-bottom: 3px solid var(--teal);
}
.sub-hero-pro h2 { font-family: var(--serif); font-size: 1.75rem; color: #fff; display: flex; align-items: center; gap: 12px; }
.sub-hero-pro p { color: rgba(255,255,255,.75); margin-top: 10px; max-width: 640px; }
.sub-hero-pro--purple { border-color: var(--purple); }
.sub-hero-pro--gold { border-color: var(--gold); }
.sub-hero-pro--green { border-color: var(--green); }
.sub-hero-pro--orange { border-color: var(--orange); }
.sub-hero-pro--red { border-color: var(--red); }

.breadcrumb { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; font-size: .82rem; align-items: center; }
.breadcrumb button { background: none; border: none; color: var(--ama-blue); font-weight: 700; cursor: pointer; font-family: var(--font); padding: 0; }
.breadcrumb span { color: var(--dim); }
.breadcrumb .sep { opacity: .45; }

.page-nav-bar {
 display: flex;
 align-items: center;
 gap: 16px;
 flex-wrap: wrap;
 max-width: 1180px;
 margin: 0 auto;
 padding: 14px 24px;
 background: #fff;
 border-bottom: 2px solid rgba(46, 49, 146, .12);
 box-shadow: 0 4px 16px rgba(46, 49, 146, .08);
 position: sticky;
 top: 0;
 z-index: 120;
}
.page-back-btn {
 display: inline-flex;
 align-items: center;
 gap: 10px;
 padding: 10px 18px;
 border-radius: 10px;
 border: 2px solid var(--ama-blue);
 background: var(--ama-blue-light, #e8eef9);
 color: var(--ama-blue);
 font-weight: 800;
 font-size: .88rem;
 cursor: pointer;
 font-family: var(--font);
 transition: all .2s;
}
.page-back-btn i { font-size: 1rem; }
.page-back-btn:hover { background: var(--ama-blue); color: #fff; }
.page-crumb {
 display: flex;
 gap: 8px;
 flex-wrap: wrap;
 align-items: center;
 font-size: .82rem;
 color: var(--dim);
}
.page-crumb button {
 background: none;
 border: none;
 color: var(--ama-blue);
 font-weight: 700;
 cursor: pointer;
 font-family: var(--font);
 padding: 0;
}
.page-crumb .sep { opacity: .45; }

.games-stage-nav { margin: 16px 0 8px; }
.games-pick-hint {
 padding: 28px 20px;
 text-align: center;
 color: var(--dim);
 font-size: .92rem;
 background: rgba(255, 255, 255, .7);
 border: 2px dashed rgba(46, 49, 146, .18);
 border-radius: var(--radius);
}

.book-switch { display: flex; gap: 12px; margin-bottom: 24px; flex-wrap: wrap; position: relative; z-index: 10; }
.book-switch--hero { margin-top: 18px; margin-bottom: 0; max-width: 720px; }
.book-pill {
 flex: 1 1 160px;
 min-height: 56px;
 padding: 12px 18px;
 border-radius: 12px;
 border: 2px solid rgba(46, 49, 146, .22);
 background: #fff;
 color: var(--navy);
 font-weight: 800;
 font-size: .88rem;
 cursor: pointer;
 font-family: var(--font);
 transition: all .2s;
 text-align: left;
 touch-action: manipulation;
 -webkit-tap-highlight-color: transparent;
 box-shadow: 0 2px 10px rgba(46, 49, 146, .08);
}
.book-pill__tag {
 display: block;
 font-size: .68rem;
 font-weight: 800;
 text-transform: uppercase;
 letter-spacing: .07em;
 color: var(--teal);
 margin-bottom: 3px;
}
.book-pill__title { display: block; font-size: .95rem; line-height: 1.25; }
.book-pill:not(.active):hover,
.book-pill:not(.active):focus-visible {
 border-color: var(--ama-blue);
 background: var(--ama-blue-light, #e8eef9);
 transform: translateY(-1px);
}
.book-pill.active {
 background: linear-gradient(135deg, var(--ama-blue), #1a2570);
 border-color: var(--gold);
 color: #fff;
 box-shadow: 0 4px 16px rgba(46, 49, 146, .28);
}
.book-pill.active .book-pill__tag { color: rgba(255,255,255,.85); }
.book-switch--hero .book-pill {
 background: rgba(255,255,255,.1);
 border-color: rgba(255,255,255,.35);
 color: #fff;
 box-shadow: none;
}
.book-switch--hero .book-pill__tag { color: var(--gold); }
.book-switch--hero .book-pill:not(.active):hover,
.book-switch--hero .book-pill:not(.active):focus-visible {
 background: rgba(255,255,255,.18);
 border-color: rgba(255,255,255,.55);
}
.book-switch--hero .book-pill.active {
 background: var(--gold);
 border-color: var(--gold);
 color: var(--navy);
 box-shadow: 0 4px 14px rgba(0,0,0,.2);
}
.book-switch--hero .book-pill.active .book-pill__tag { color: var(--navy); opacity: .75; }

.unit-hub { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.unit-card-pro {
 background: var(--card-bg);
 border-radius: var(--radius);
 padding: 22px;
 border: 2px solid var(--card-border);
 cursor: pointer;
 text-align: left;
 font-family: var(--font);
 transition: all .25s;
 border-left: 4px solid var(--teal);
}
.unit-card-pro:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.unit-card-pro__icon { font-size: 2rem; margin-bottom: 10px; }
.unit-card-pro h4 { font-family: var(--display); font-size: 1.05rem; color: var(--navy); }
.unit-card-pro p { font-size: .8rem; color: var(--dim); margin-top: 6px; }
.unit-card-pro .meta { font-size: .72rem; font-weight: 700; color: var(--teal); margin-top: 10px; }

/* ── Lesson view (fullscreen) ── */
.lesson-view {
 position: fixed;
 inset: 0;
 z-index: 400;
 background: var(--light);
 overflow-y: auto;
 overflow-x: hidden;
 -webkit-overflow-scrolling: touch;
 overscroll-behavior: contain;
 touch-action: pan-y;
 display: flex;
 flex-direction: column;
}
.lesson-view[hidden] { display: none !important; }
.lv-top {
 display: flex;
 flex-direction: column;
 gap: 10px;
 padding: 12px 20px;
 background: var(--navy);
 border-bottom: 2px solid var(--gold);
 position: sticky;
 top: 0;
 z-index: 10;
}
.lv-top-row {
 display: flex;
 align-items: center;
 gap: 14px;
 width: 100%;
}
.lv-back {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 padding: 10px 16px;
 border-radius: 8px;
 border: 2px solid rgba(255,255,255,.25);
 background: rgba(255,255,255,.1);
 color: #fff;
 font-size: .85rem;
 font-weight: 800;
 cursor: pointer;
 font-family: var(--font);
 flex-shrink: 0;
 transition: all .2s;
}
.lv-back:hover { background: rgba(255,255,255,.18); border-color: var(--gold2); }
.lv-crumb {
 display: flex;
 gap: 8px;
 flex-wrap: wrap;
 align-items: center;
 font-size: .78rem;
 color: rgba(255,255,255,.75);
 padding-left: 2px;
}
.lv-crumb button {
 background: none;
 border: none;
 color: var(--gold2);
 font-weight: 700;
 cursor: pointer;
 font-family: var(--font);
 padding: 0;
}
.lv-crumb .sep { opacity: .45; }
.lv-crumb-current { color: #fff; font-weight: 700; }
.lv-top-title { flex: 1; font-family: var(--serif); color: var(--gold2); font-weight: 700; font-size: .95rem; }
.lv-top-prog { display: flex; align-items: center; gap: 10px; }
.lv-top-bar { width: 120px; height: 6px; background: rgba(255,255,255,.15); border-radius: 3px; overflow: hidden; }
.lv-top-fill { height: 100%; background: linear-gradient(90deg, var(--teal), var(--teal2)); transition: width .4s; }
.lv-top-pct { font-size: .72rem; color: rgba(255,255,255,.7); font-weight: 700; }

.lv-hero {
 padding: 40px 28px;
 background: linear-gradient(135deg, var(--navy2), var(--navy3), var(--teal));
 color: #fff;
 position: relative;
 overflow: hidden;
}
.lv-hero::after {
 content: '';
 position: absolute;
 top: -80px; right: -80px;
 width: 300px; height: 300px;
 border-radius: 50%;
 background: rgba(201,149,42,.08);
}
.lv-hero-logo {
 height: 48px;
 width: auto;
 margin-bottom: 16px;
 position: relative;
 filter: brightness(0) invert(1);
 opacity: 0.95;
}
.lv-hero h2 { font-family: var(--serif); font-size: clamp(1.5rem, 4vw, 2.2rem); font-weight: 900; margin-bottom: 10px; position: relative; }
.lv-hero h2 em { color: var(--gold2); font-style: italic; }
.lv-hero-tag { font-size: 1rem; opacity: .85; margin-bottom: 16px; position: relative; }
.lv-hero-obj { display: flex; flex-wrap: wrap; gap: 10px; position: relative; }
.lv-obj-chip {
 display: flex;
 align-items: center;
 gap: 8px;
 padding: 8px 14px;
 background: rgba(255,255,255,.08);
 border: 1px solid rgba(255,255,255,.12);
 border-radius: 8px;
 font-size: .8rem;
}

.lv-layout {
 display: grid;
 grid-template-columns: 240px 1fr;
 flex: 1;
 max-width: 1400px;
 margin: 0 auto;
 width: 100%;
}
.lv-side {
 background: var(--white);
 border-right: 1px solid var(--border);
 padding: 20px 12px;
 position: sticky;
 top: 52px;
 height: calc(100vh - 52px);
 overflow-y: auto;
}
.lvs-label { font-size: .62rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; color: var(--dim); margin-bottom: 12px; padding: 0 8px; }
.lvs-btn {
 display: flex;
 align-items: center;
 gap: 10px;
 width: 100%;
 padding: 10px 12px;
 border: none;
 border-radius: 8px;
 background: transparent;
 text-align: left;
 font-size: .8rem;
 font-weight: 600;
 color: var(--dim);
 cursor: pointer;
 font-family: var(--font);
 margin-bottom: 4px;
 transition: all .15s;
}
.lvs-btn i { width: 20px; text-align: center; color: var(--teal); }
.lvs-btn:hover { background: var(--light); color: var(--navy); }
.lvs-btn.active { background: rgba(13,115,119,.1); color: var(--teal); border-left: 3px solid var(--teal); }

.lv-main { padding: 32px 40px 80px; background: linear-gradient(180deg, #f4f7fc 0%, #eef4fc 100%); min-height: 60vh; }

/* Lesson sections */
.ls { margin-bottom: 48px; }
.ls-head {
 display: flex;
 align-items: center;
 gap: 14px;
 margin-bottom: 22px;
 padding-bottom: 14px;
 border-bottom: 2px solid var(--border);
}
.ls-head-num {
 width: 44px; height: 44px;
 border-radius: 50%;
 background: var(--navy);
 color: #fff;
 font-family: var(--serif);
 font-weight: 700;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 1.1rem;
}
.ls-head h3 { font-family: var(--serif); font-size: 1.35rem; color: var(--navy); }
.ls-head p { font-size: .8rem; color: var(--dim); margin-top: 2px; }

.tbox {
 background: var(--card-bg);
 border: 2px solid var(--card-border);
 border-radius: var(--radius);
 padding: 22px;
 margin-bottom: 16px;
 box-shadow: var(--shadow-sm);
 border-top: 3px solid var(--ama-blue);
}
.tbox h4 { font-size: .95rem; font-weight: 800; color: var(--navy); margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.tbox p, .tbox li { font-size: .88rem; color: var(--slate, #475569); line-height: 1.75; }

.vocab-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.vocab-card {
 background: var(--card-bg);
 border: 2px solid var(--card-border);
 border-radius: var(--radius);
 padding: 18px;
 border-left: 4px solid var(--ama-blue);
 transition: box-shadow .2s;
}
.vocab-card:hover { box-shadow: var(--shadow-md); border-left-color: var(--ama-red); }
.vocab-card.bonus, .vocab-card.stretch { border-left-color: var(--ama-red); background: linear-gradient(145deg, #fff 0%, #fde8ec 100%); }
.vocab-word { font-family: var(--serif); font-size: 1.15rem; font-weight: 700; color: var(--ama-blue); }
.vocab-ipa { font-size: .75rem; color: var(--dim); margin-left: 8px; }
.vocab-vi {
 display: none;
 font-size: .88rem;
 font-weight: 600;
 color: #1a4d6e;
 margin: 8px 0 6px;
 padding: 8px 12px;
 background: linear-gradient(135deg, #eef6fb 0%, #e3f0f8 100%);
 border-radius: 8px;
 border-left: 3px solid #3d8fc4;
}
.vocab-vi.show-vi { display: block; animation: fadeUp 0.3s ease; }
.vocab-vi::before {
 content: 'VI ';
 font-size: .62rem;
 font-weight: 800;
 letter-spacing: .06em;
 color: #3d8fc4;
 margin-right: 4px;
}
.speak-btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 32px;
 height: 32px;
 margin-left: 8px;
 padding: 0;
 border: none;
 border-radius: 50%;
 background: var(--ama-blue-light);
 color: var(--ama-blue);
 cursor: pointer;
 vertical-align: middle;
 transition: all .2s;
 flex-shrink: 0;
}
.speak-btn:hover {
 background: var(--ama-blue);
 color: #fff;
 transform: scale(1.05);
}
.speak-btn--playing {
 background: var(--ama-blue);
 color: #fff;
 animation: speakPulse .5s ease;
}
.speak-btn--error {
 background: var(--ama-red-light);
 color: var(--ama-red);
}
.snd-pace-btns {
 display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; align-items: center;
}
.speak-btn--pace {
 display: inline-flex; align-items: center; gap: 6px;
 padding: 6px 10px; font-size: .72rem; font-weight: 700; border-radius: 8px;
 min-height: auto; width: auto;
}
.speak-btn--pace span { letter-spacing: .02em; }
.speak-btn--pace--slow,
.speak-btn--pace--beginner { background: #ecfdf5; border-color: #6ee7b7; color: #047857; }
.speak-btn--pace--clear { background: #eff6ff; border-color: #93c5fd; color: #1d4ed8; }
.speak-btn--pace--natural { background: #fff7ed; border-color: #fdba74; color: #c2410c; }
.speak-btn--pace--slow:hover,
.speak-btn--pace--beginner:hover { background: #d1fae5; color: #047857; }
.speak-btn--pace--clear:hover { background: #dbeafe; color: #1d4ed8; }
.speak-btn--pace--natural:hover { background: #ffedd5; color: #c2410c; }
.snd-pace-legend {
 display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 16px;
}
.snd-pace-legend__item {
 font-size: .72rem; font-weight: 700; padding: 6px 12px; border-radius: 999px;
}
.snd-pace-legend__item--slow { background: #ecfdf5; color: #047857; }
.snd-pace-legend__item--clear { background: #eff6ff; color: #1d4ed8; }
.snd-pace-legend__item--natural { background: #fff7ed; color: #c2410c; }
.snd-pace-legend__item i { margin-right: 4px; }
@keyframes speakPulse {
 0%, 100% { box-shadow: 0 0 0 0 rgba(46, 49, 146, .4); }
 50% { box-shadow: 0 0 0 8px rgba(46, 49, 146, 0); }
}
.vocab-word-row {
 display: flex;
 align-items: center;
 flex-wrap: wrap;
 gap: 4px;
}
.vocab-ex-row {
 display: flex;
 align-items: flex-start;
 gap: 8px;
 margin-top: 8px;
}
.vocab-ex-row .vocab-ex { flex: 1; margin-top: 0; }
.dline-text-wrap { display: flex; align-items: flex-start; gap: 8px; flex: 1; }
.dline-text-wrap .dline-text { flex: 1; }
.phrase-up-wrap { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.vocab-mean { font-size: .85rem; color: var(--text); margin: 6px 0; font-weight: 500; }
.vocab-ex { font-size: .82rem; color: var(--ama-blue-mid); font-style: italic; background: var(--ama-blue-light); padding: 8px 10px; border-radius: 6px; margin-top: 8px; }
.vocab-lvl {
 font-size: .62rem;
 font-weight: 800;
 text-transform: uppercase;
 letter-spacing: .08em;
 margin-top: 8px;
 display: inline-block;
 padding: 3px 10px;
 border-radius: 20px;
}
.vocab-lvl--core { background: var(--ama-blue-light); color: var(--ama-blue); }
.vocab-lvl--bonus, .vocab-lvl--stretch { background: var(--ama-red-light); color: var(--ama-red-dark); }

.phrase-table { width: 100%; border-collapse: collapse; background: var(--white); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); font-size: .85rem; }
.phrase-table th { background: var(--navy); color: #fff; padding: 12px 14px; text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; }
.phrase-table td { padding: 14px; border-bottom: 1px solid var(--border); vertical-align: top; }
.phrase-table tr:hover td { background: rgba(13,115,119,.04); }
.phrase-basic { color: var(--dim); text-decoration: line-through; opacity: .7; }
.phrase-up { font-weight: 700; color: var(--teal); }
.phrase-note { font-size: .78rem; color: var(--dim); margin-top: 4px; }

.dialogue {
 background: var(--white);
 border: 1px solid var(--border);
 border-radius: var(--radius);
 padding: 20px;
 margin-bottom: 18px;
}
.dialogue-head {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 12px;
 flex-wrap: wrap;
 margin-bottom: 6px;
}
.dialogue h4 { font-weight: 800; color: var(--navy); margin-bottom: 0; }
.speak-dialogue-btn {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 padding: 8px 14px;
 border-radius: 8px;
 border: 2px solid var(--ama-blue);
 background: var(--ama-blue-light, #e8eef9);
 color: var(--ama-blue);
 font-size: .78rem;
 font-weight: 800;
 cursor: pointer;
 font-family: var(--font);
 transition: all .2s;
}
.speak-dialogue-btn:hover { background: var(--ama-blue); color: #fff; }
.speak-dialogue-btn.speak-btn--playing { background: var(--teal); border-color: var(--teal); color: #fff; }
.dialogue .sit { font-size: .82rem; color: var(--dim); margin-bottom: 14px; font-style: italic; }
.dline { display: flex; gap: 12px; margin-bottom: 10px; align-items: flex-start; }
.dline-speaker {
 min-width: 52px;
 font-weight: 800;
 font-size: .75rem;
 color: var(--white);
 background: var(--teal);
 padding: 4px 8px;
 border-radius: 6px;
 text-align: center;
}
.dline--female1 .dline-speaker { background: #c2185b; }
.dline--female2 .dline-speaker { background: #8e24aa; }
.dline--male1 .dline-speaker { background: var(--navy); }
.dline--male2 .dline-speaker { background: #1565c0; }
.dline:nth-child(even) .dline-speaker { filter: brightness(0.95); }
.dline-text { font-size: .88rem; flex: 1; padding-top: 2px; }

.ex-card {
 background: var(--white);
 border: 1px solid var(--border);
 border-radius: var(--radius);
 padding: 20px;
 margin-bottom: 14px;
 border-left: 4px solid var(--gold);
}
.ex-type { font-size: .65rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--gold); margin-bottom: 8px; }
.ex-card h4 { color: var(--navy); margin-bottom: 8px; }
.ex-card p, .ex-card li { font-size: .86rem; color: var(--dim); }

.q-acc { margin-bottom: 12px; }
.q-acc-item {
 background: var(--white);
 border: 1px solid var(--border);
 border-radius: var(--radius);
 overflow: hidden;
 margin-bottom: 10px;
}
.q-acc-speak { margin-left: auto; flex-shrink: 0; }
.q-acc-speak .speak-btn { margin-left: 0; }
.game-word--audio { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.q-acc-head {
 width: 100%;
 padding: 16px 20px;
 display: flex;
 align-items: center;
 gap: 14px;
 border: none;
 background: none;
 cursor: pointer;
 text-align: left;
 font-family: var(--font);
}
.q-acc-num {
 width: 36px; height: 36px;
 border-radius: 50%;
 background: var(--navy);
 color: #fff;
 font-weight: 800;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: .85rem;
 flex-shrink: 0;
}
.q-acc-item.open .q-acc-num { background: var(--teal); }
.q-acc-q { flex: 1; font-weight: 700; color: var(--navy); font-size: .95rem; }
.q-acc-body { display: none; padding: 0 20px 20px 70px; border-top: 1px solid var(--border); }
.q-acc-item.open .q-acc-body { display: block; padding-top: 18px; }

.panel-sm {
 background: var(--light);
 border-radius: 10px;
 padding: 14px 16px;
 margin-bottom: 12px;
 border-left: 4px solid var(--teal);
}
.panel-sm.think { border-left-color: var(--purple); background: #f8f5fc; }
.panel-sm.struct { border-left-color: var(--gold); background: #fffbeb; }
.panel-sm.sample { border-left-color: var(--green); background: #f0fdf4; }
.panel-sm h5 { font-size: .65rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--dim); margin-bottom: 6px; }
.hint-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.hint-tag { padding: 5px 12px; border-radius: 20px; background: var(--white); border: 1px solid var(--border); font-size: .78rem; font-weight: 600; color: var(--navy); }
.sample-btn {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 margin-top: 12px;
 padding: 12px 18px;
 font-size: .85rem;
 font-weight: 700;
 color: #fff;
 background: linear-gradient(135deg, #059669, #10b981);
 border: none;
 border-radius: 10px;
 cursor: pointer;
 text-decoration: none;
 font-family: var(--font);
 box-shadow: 0 4px 12px rgba(16, 185, 129, .35);
 transition: transform .15s, filter .15s;
}
.sample-btn:hover { filter: brightness(1.06); transform: translateY(-1px); }
.sample-btn:focus-visible { outline: 3px solid #86efac; outline-offset: 2px; }
.sample-box { display: none; margin-top: 14px; font-size: .9rem; line-height: 1.75; }
.sample-box.show {
 display: block;
 background: #fff;
 border: 2px solid #86efac;
 border-radius: 12px;
 padding: 16px 18px;
}
.sample-answer-text, .part2-sample-answer { white-space: normal; word-wrap: break-word; }
.part2-sample-box {
 margin-bottom: 20px;
 background: #f0fdf4;
 border: 2px solid #86efac;
 border-radius: 14px;
 padding: 16px 18px;
}
.part2-sample-text { display: none; margin-top: 12px; }
.part2-sample-text.show { display: block; }
.q-vi-banner { margin-bottom: 12px; font-weight: 600; }
.struct-vi, .cue-vi { font-size: .82rem; color: #1a4d6e; }
li .vi-reveal.cue-vi.show-vi,
li .vi-reveal.struct-vi.show-vi { display: inline; }
.phrase-vi-line, .phrase-note-vi { font-size: .82rem; margin-top: 6px; }
.oref-vi { margin-top: 10px; font-size: .82rem; line-height: 1.7; }
.oref-vi p { margin: 4px 0; }

.disc-list { list-style: none; }
.disc-list li {
 padding: 12px 16px;
 background: var(--white);
 border: 1px solid var(--border);
 border-radius: 8px;
 margin-bottom: 8px;
 font-size: .88rem;
 display: flex;
 gap: 10px;
}
.disc-list li::before { content: '💬'; }

.hub-unit-block {
 background: var(--card-bg);
 border-radius: var(--radius);
 padding: 20px;
 margin-bottom: 20px;
 border: 2px solid var(--card-border);
 border-left: 4px solid var(--ama-red);
}
.hub-unit-block h3 { font-family: var(--serif); color: var(--ama-blue); margin-bottom: 14px; font-size: 1.1rem; }

.fun-grid { display: grid; gap: 20px; }
.fun-block {
 background: var(--card-bg);
 border-radius: var(--radius-lg);
 padding: 24px;
 border: 2px solid var(--card-border);
 border-top: 4px solid var(--ama-blue);
}
.fun-block h3 { color: var(--ama-blue); font-family: var(--display); margin-bottom: 16px; display: flex; align-items: center; gap: 10px; }
.fun-item {
 background: var(--ama-white);
 border: 1px solid var(--border);
 border-radius: 10px;
 padding: 16px;
 margin-bottom: 10px;
}
.fun-item p { font-weight: 700; color: var(--navy); margin-bottom: 6px; }
.fun-item span { font-size: .82rem; color: var(--dim); font-style: italic; }

.improve-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.improve-card {
 background: var(--card-bg);
 border-radius: var(--radius);
 padding: 22px;
 border: 2px solid var(--card-border);
 border-bottom: 3px solid var(--ama-red);
}
.improve-card i { font-size: 1.5rem; color: var(--ama-red); margin-bottom: 12px; }
.improve-card h4 { color: var(--ama-blue); font-family: var(--display); margin-bottom: 8px; }
.improve-card p { color: var(--text); font-size: .88rem; }

.ama-strip {
 display: flex;
 height: 6px;
 width: 100%;
}
.ama-strip span { flex: 1; }
.ama-strip .s-red { background: var(--ama-red); }
.ama-strip .s-white { background: var(--ama-white); }
.ama-strip .s-blue { background: var(--ama-blue); }

/* ── Practice Studio (interactive) ── */
.practice-intro {
 max-width: 720px;
 margin: 0 auto 28px;
 padding: 18px 20px;
 background: #fff;
 border-radius: var(--radius);
 border: 2px solid #b8dfc4;
 font-size: .92rem;
 color: var(--text);
 line-height: 1.65;
}
.practice-zone {
 background: #fff;
 border-radius: var(--radius-lg);
 padding: 24px;
 margin-bottom: 24px;
 border: 2px solid #b8dfc4;
 border-top: 4px solid var(--ama-blue);
}
.practice-zone h3 {
 color: var(--ama-blue);
 font-family: var(--display);
 margin-bottom: 18px;
 display: flex;
 align-items: center;
 gap: 10px;
}
.practice-card {
 background: var(--mint-page);
 border: 2px solid #c5e6cc;
 border-radius: var(--radius);
 margin-bottom: 20px;
 overflow: hidden;
}
.practice-card__head {
 padding: 18px 20px;
 background: linear-gradient(135deg, #e8f5ec, #fff);
 border-bottom: 1px solid #c5e6cc;
}
.practice-card__head h4 { color: var(--ama-blue); font-family: var(--display); font-size: 1.05rem; margin-bottom: 8px; }
.practice-card__prompt { font-size: .88rem; color: var(--text); line-height: 1.6; margin-bottom: 10px; }
.practice-workspace { padding: 20px; }
.practice-label {
 display: flex;
 align-items: center;
 gap: 8px;
 font-size: .82rem;
 font-weight: 800;
 color: var(--ama-blue);
 text-transform: uppercase;
 letter-spacing: .06em;
 margin-bottom: 10px;
}
.practice-label--speak { margin-top: 20px; }
.practice-textarea {
 width: 100%;
 padding: 14px 16px;
 border: 2px solid #b8dfc4;
 border-radius: 10px;
 font-family: var(--font);
 font-size: .95rem;
 line-height: 1.6;
 resize: vertical;
 min-height: 120px;
 background: #fff;
 color: var(--text);
}
.practice-textarea:focus {
 outline: none;
 border-color: var(--ama-blue);
 box-shadow: 0 0 0 3px rgba(46, 49, 146, .15);
}
.practice-meta { margin-top: 8px; font-size: .75rem; color: var(--dim); font-weight: 600; }
.practice-hint { font-size: .82rem; color: var(--dim); margin-bottom: 12px; font-style: italic; }
.practice-audio-bar {
 display: flex;
 flex-wrap: wrap;
 gap: 10px;
 align-items: center;
}
.practice-record { font-size: .85rem; padding: 12px 18px; }
.practice-record i { color: #ff6b6b; }
.practice-stop, .practice-play {
 padding: 12px 16px;
 border-radius: 10px;
 border: 2px solid var(--ama-blue);
 background: #fff;
 color: var(--ama-blue);
 font-weight: 700;
 font-size: .82rem;
 cursor: pointer;
 font-family: var(--font);
}
.practice-stop:disabled, .practice-play:disabled { opacity: .45; cursor: not-allowed; }
.practice-stop:not(:disabled):hover, .practice-play:not(:disabled):hover { background: var(--ama-blue-light); }
.practice-clear-audio {
 padding: 10px 14px;
 border: 1px solid var(--border);
 background: #fff;
 border-radius: 8px;
 font-size: .78rem;
 font-weight: 600;
 color: var(--dim);
 cursor: pointer;
 font-family: var(--font);
}
.cta-ghost-sm:hover { border-color: var(--ama-blue); color: var(--ama-blue); }
.practice-timer {
 font-family: var(--display);
 font-weight: 800;
 font-size: 1.1rem;
 color: var(--ama-blue);
 margin-left: auto;
}
.practice-status { font-size: .8rem; font-weight: 600; margin-top: 10px; min-height: 1.2em; color: var(--dim); }
.practice-status--ok { color: var(--green); }
.practice-status--warn { color: #b45309; }
.practice-status--rec { color: var(--ama-red); }
.practice-audio { width: 100%; margin-top: 12px; }
.practice-audio.hidden { display: none; }
.sub-hero-pro--green { border-color: #3d9a5c; }

.site-foot {
 text-align: center;
 padding: 28px 20px;
 background: linear-gradient(180deg, #e8f5ec, #fff);
 border-top: 4px solid var(--ama-blue);
 color: var(--text);
 font-size: .88rem;
}
.site-foot--lux {
 text-align: left;
 padding: 0;
 background: linear-gradient(180deg, #0a1028 0%, #121d45 40%, #1a2570 100%);
 color: rgba(255,255,255,.88);
 border-top: none;
}
.site-foot__ribbon {
 display: flex;
 height: 5px;
}
.site-foot__ribbon .s-red { flex: 1; background: var(--ama-red); }
.site-foot__ribbon .s-white { flex: 1; background: #fff; }
.site-foot__ribbon .s-blue { flex: 1; background: var(--ama-blue); }
.site-foot__hero {
 display: flex;
 align-items: center;
 gap: 28px;
 max-width: 1100px;
 margin: 0 auto;
 padding: 40px 28px 32px;
 border-bottom: 1px solid rgba(255,255,255,.1);
}
.site-foot__logo {
 width: min(160px, 32vw);
 height: auto;
 filter: drop-shadow(0 8px 24px rgba(0,0,0,.35));
 flex-shrink: 0;
}
.site-foot__eyebrow {
 font-size: .72rem;
 font-weight: 700;
 letter-spacing: .16em;
 text-transform: uppercase;
 color: var(--gold2);
 margin-bottom: 8px;
}
.site-foot__title {
 font-family: var(--serif);
 font-size: clamp(1.5rem, 4vw, 2rem);
 font-weight: 700;
 color: #fff;
 line-height: 1.15;
 margin-bottom: 8px;
}
.site-foot__tagline {
 font-size: .95rem;
 color: rgba(255,255,255,.72);
 max-width: 520px;
 line-height: 1.6;
}
.site-foot__grid {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 28px;
 max-width: 1100px;
 margin: 0 auto;
 padding: 36px 28px;
}
.site-foot__col h3 {
 font-family: var(--serif);
 font-size: .95rem;
 font-weight: 700;
 color: #fff;
 margin-bottom: 14px;
 display: flex;
 align-items: center;
 gap: 8px;
}
.site-foot__col h3 i { color: var(--gold2); font-size: .85rem; }
.site-foot__col p {
 font-size: .86rem;
 line-height: 1.65;
 color: rgba(255,255,255,.68);
 margin-bottom: 14px;
}
.site-foot__badges {
 list-style: none;
 display: flex;
 flex-wrap: wrap;
 gap: 8px;
}
.site-foot__badges li {
 font-size: .72rem;
 font-weight: 700;
 padding: 6px 12px;
 border-radius: 999px;
 background: rgba(255,255,255,.08);
 border: 1px solid rgba(255,255,255,.12);
 color: rgba(255,255,255,.85);
}
.site-foot__badges li i { color: var(--gold2); margin-right: 4px; }
.site-foot__links,
.site-foot__highlights {
 list-style: none;
 font-size: .84rem;
 line-height: 1.7;
 color: rgba(255,255,255,.68);
}
.site-foot__links li,
.site-foot__highlights li {
 padding: 6px 0;
 border-bottom: 1px solid rgba(255,255,255,.06);
}
.site-foot__links strong { color: rgba(255,255,255,.92); }
.site-foot__nav {
 display: flex;
 flex-direction: column;
 gap: 6px;
}
.site-foot__nav button {
 display: flex;
 align-items: center;
 gap: 10px;
 padding: 10px 14px;
 border: 1px solid rgba(255,255,255,.1);
 border-radius: 10px;
 background: rgba(255,255,255,.04);
 color: rgba(255,255,255,.85);
 font-family: var(--font);
 font-size: .84rem;
 font-weight: 600;
 cursor: pointer;
 text-align: left;
 transition: background .2s, border-color .2s, transform .2s;
}
.site-foot__nav button:hover {
 background: rgba(255,255,255,.1);
 border-color: var(--gold);
 transform: translateX(4px);
}
.site-foot__nav button i { color: var(--gold2); width: 18px; }
.site-foot__bottom {
 text-align: center;
 padding: 24px 28px 32px;
 border-top: 1px solid rgba(255,255,255,.08);
 background: rgba(0,0,0,.2);
}
.site-foot__copy { font-size: .78rem; color: rgba(255,255,255,.5); }
.site-foot__version {
 font-size: .7rem;
 color: rgba(255,255,255,.38);
 margin-top: 6px;
 letter-spacing: .06em;
 text-transform: uppercase;
}
.site-foot__brand { font-family: var(--serif); font-size: 1.1rem; font-weight: 700; color: var(--ama-blue); margin-top: 12px; }
.site-foot__program { color: var(--dim); margin-top: 4px; }
.site-foot__credit { margin-top: 10px; font-weight: 600; color: var(--ama-red); }

/* ── Landing hero (first page) ── */
.landing-hero {
 position: relative;
 padding: 48px 30px 60px;
 overflow: hidden;
 background: var(--royal-blue) url('assets/classroom-hero-bg.png') center center / cover no-repeat;
 border-bottom: 3px solid var(--gold-solid);
}
.landing-hero::before {
 content: '';
 position: absolute;
 inset: 0;
 background: linear-gradient(180deg, rgba(0, 28, 82, 0.78) 0%, rgba(0, 18, 55, 0.88) 100%);
 z-index: 0;
}
.landing-hero::after,
.landing-hero__glow { display: none; }
.landing-hero__inner {
 position: relative;
 z-index: 2;
 max-width: 900px;
 margin: 0 auto;
 text-align: center;
}
.landing-logo {
 margin-bottom: 22px;
 display: flex;
 justify-content: center;
}
.landing-logo-frame {
 display: inline-block;
 padding: 16px 22px;
 background: #ffffff;
 border-radius: 14px;
 border: 1px solid rgba(255, 215, 0, 0.55);
 box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
}
.landing-logo__img {
 width: min(280px, 78vw);
 height: auto;
 object-fit: contain;
 display: block;
}
.landing-prose {
 max-width: 680px;
 margin: 0 auto 26px;
 padding: 0 8px;
 text-align: center;
}
.landing-prose__welcome {
 font-family: 'Times New Roman', Times, Georgia, serif;
 font-size: clamp(1.35rem, 3.8vw, 1.85rem);
 font-weight: 400;
 font-style: normal;
 color: rgba(255, 255, 255, 0.96);
 line-height: 1.45;
 margin-bottom: 14px;
 letter-spacing: 0.02em;
}
.landing-prose__welcome em {
 font-style: italic;
 font-weight: 400;
 color: #ffe566;
}
.landing-prose__lead {
 font-family: 'Times New Roman', Times, Georgia, serif;
 font-size: clamp(1rem, 2.4vw, 1.12rem);
 font-weight: 400;
 font-style: italic;
 line-height: 1.75;
 color: rgba(255, 255, 255, 0.88);
 margin: 0 auto;
 max-width: 620px;
 position: relative;
 padding: 16px 0 0;
}
.landing-prose__lead::before {
 content: '';
 display: block;
 width: 72px;
 height: 2px;
 background: var(--gold-solid);
 margin: 0 auto 16px;
 opacity: 0.85;
}
.landing-welcome { display: none; }
.landing-eyebrow {
 font-family: var(--ui);
 font-size: .72rem;
 font-weight: 600;
 letter-spacing: .08em;
 text-transform: uppercase;
 color: rgba(255,255,255,.82);
 margin-bottom: 10px;
}
.landing-title {
 font-family: 'Times New Roman', Times, Georgia, serif;
 font-size: clamp(1.65rem, 4.2vw, 2.35rem);
 font-weight: 400;
 color: #fff;
 line-height: 1.35;
 margin-bottom: 12px;
 text-shadow: 0 2px 16px rgba(0, 0, 0, 0.4);
 letter-spacing: 0.01em;
}
.landing-tagline {
 font-family: 'Times New Roman', Times, Georgia, serif;
 font-size: clamp(.88rem, 2vw, 1rem);
 font-weight: 400;
 font-style: italic;
 color: rgba(255, 255, 255, 0.82);
 letter-spacing: 0.04em;
 margin-bottom: 26px;
}
.landing-official-link {
 font-size: clamp(.78rem, 1.8vw, .92rem);
 color: rgba(255, 255, 255, 0.9);
 margin: -14px 0 22px;
 line-height: 1.45;
}
.landing-official-link a {
 color: #ffd700;
 font-weight: 700;
 text-decoration: underline;
 text-underline-offset: 2px;
}
.landing-official-link strong { color: #fff; }
.cta-royal {
 border: 2px solid var(--gold-solid) !important;
 background: var(--royal-blue-btn) !important;
 color: #fff !important;
 font-family: var(--ui);
 font-weight: 700;
 border-radius: 10px;
}
.cta-royal:hover {
 background: #003da5 !important;
 border-color: var(--gold-solid) !important;
 color: #fff !important;
}
.cta-main.cta-royal {
 box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}
.landing-cta-row {
 display: flex;
 flex-wrap: wrap;
 gap: 12px;
 justify-content: flex-start;
 margin-bottom: 36px;
}
.cta-main--lg { padding: 18px 36px; font-size: 1.05rem; }
.cta-ghost {
 padding: 16px 28px;
 border-radius: 12px;
 border: 2px solid rgba(255,255,255,.5);
 background: rgba(255,255,255,.08);
 color: #fff;
 font-weight: 700;
 font-size: .95rem;
 cursor: pointer;
 font-family: var(--font);
 transition: all .2s;
}
.cta-ghost:hover { background: rgba(255,255,255,.18); border-color: #fff; }
.landing-stats {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 12px;
 max-width: 680px;
 margin: 0;
}
.landing-stat {
 background: rgba(0, 35, 102, 0.55);
 border: 2px solid var(--gold-solid);
 border-radius: 8px;
 padding: 14px 8px;
}
.landing-stat span {
 display: block;
 font-family: var(--ui);
 font-size: 1.45rem;
 font-weight: 700;
 color: var(--gold-solid);
}
.landing-stat small {
 font-family: var(--ui);
 font-size: .68rem;
 color: #fff;
 font-weight: 500;
}

.landing-hero .landing-centre-line {
 justify-content: flex-start;
 margin-left: 0;
 margin-right: 0;
 text-align: left;
}

@media (max-width: 980px) {
 .landing-hero {
 padding: 32px 14px 40px;
 }
 .landing-hero::before { display: none; }
 .landing-hero__inner {
 max-width: 720px;
 text-align: center;
 }
 .landing-hero .landing-centre-line {
 justify-content: center;
 text-align: center;
 margin-left: auto;
 margin-right: auto;
 }
 .landing-cta-row {
 justify-content: center;
 }
 .landing-stats {
 margin: 0 auto;
 max-width: 520px;
 }
 .landing-message-card {
 margin-left: auto;
 margin-right: auto;
 text-align: left;
 background: #ffffff;
 border-color: #d8e2f2;
 padding: 12px 14px;
 }
 .landing-title { font-size: clamp(1.7rem, 7.5vw, 2.3rem); line-height: 1.25; }
 .landing-tagline { font-size: .88rem; letter-spacing: .02em; margin-bottom: 14px; }
 .landing-lead { font-size: .92rem; color: #0f2044; }
 .landing-lead-sub { font-size: .82rem; color: #4a5d78; }
}

.wrap--light {
 background: linear-gradient(180deg, #f8fafc 0%, #ecf7ef 40%, #e8f5ec 100%);
 border-radius: 32px 32px 0 0;
 margin-top: -20px;
 position: relative;
 z-index: 2;
 padding-top: 56px;
 padding-bottom: 64px;
}
.leadership-panel,
.teacher-test-panel,
.lux-features,
.how-it-works,
.ielts-parts {
 background: linear-gradient(180deg, #ffffff 0%, #f6f9ff 100%);
 border: 1px solid rgba(13, 50, 104, 0.12);
 border-radius: 18px;
 box-shadow: 0 10px 30px rgba(13, 50, 104, 0.08);
 padding: 24px;
 margin-bottom: 24px;
}
.leadership-panel { border-left: 4px solid #2e3192; }
.teacher-test-panel { border-left: 4px solid #0ea5e9; }
.lux-features { border-left: 4px solid #7c3aed; }
.how-it-works { border-left: 4px solid #16a34a; }
.ielts-parts { border-left: 4px solid #ef4444; }
.section-intro { margin-bottom: 36px; }
.section-intro--center { text-align: center; }
.section-intro--center p { margin-left: auto; margin-right: auto; }
.section-eyebrow {
 font-size: .75rem;
 font-weight: 800;
 letter-spacing: .14em;
 text-transform: uppercase;
 color: var(--ama-red);
 margin-bottom: 10px;
}
.section-intro h2 {
 font-family: var(--serif);
 font-size: clamp(1.75rem, 4vw, 2.35rem);
 color: var(--navy);
 margin-bottom: 12px;
 line-height: 1.2;
 text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
}
.section-intro p { color: var(--dim); font-size: 1.05rem; max-width: 680px; line-height: 1.7; }
.section-intro--mt { margin-top: 56px; }

.major-orec {
 margin-bottom: 26px;
 padding: 24px;
 border-radius: 18px;
 background: linear-gradient(145deg, #ffffff 0%, #eef3ff 100%);
 border: 2px solid rgba(46, 49, 146, .22);
 box-shadow: 0 12px 34px rgba(13, 50, 104, .12);
}
.major-orec__head h2 {
 margin: 6px 0 10px;
 font-family: var(--display);
 color: var(--ama-blue);
 font-size: 1.65rem;
}
.major-orec__head p {
 margin: 0;
 color: var(--text);
 line-height: 1.7;
}
.major-orec__grid {
 margin-top: 16px;
 display: grid;
 grid-template-columns: repeat(4, minmax(140px, 1fr));
 gap: 10px;
}
.major-orec__grid article {
 background: #fff;
 border: 1px solid rgba(46, 49, 146, .2);
 border-radius: 12px;
 padding: 12px;
}
.major-orec__grid span {
 width: 30px;
 height: 30px;
 border-radius: 50%;
 background: var(--ama-blue);
 color: #fff;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 font-weight: 800;
}
.major-orec__grid h3 {
 margin: 8px 0 6px;
 color: var(--ama-blue);
 font-size: .95rem;
}
.major-orec__grid p {
 margin: 0;
 color: var(--text);
 font-size: .85rem;
}
.major-orec__template {
 margin-top: 14px;
 padding: 12px 14px;
 border-radius: 12px;
 background: #fffaf0;
 border: 1px solid rgba(201, 149, 42, .45);
}
.major-orec__template p {
 margin: 0 0 10px;
 color: #624700;
 font-size: .88rem;
}

@media (max-width: 980px) {
 .major-orec__grid { grid-template-columns: repeat(2, minmax(140px, 1fr)); }
}
@media (max-width: 640px) {
 .major-orec { padding: 18px; }
 .major-orec__grid { grid-template-columns: 1fr; }
}

.pathway-grid {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
 gap: 16px;
}
.pathway-card {
 background: var(--card-bg);
 border: 2px solid var(--card-border);
 border-radius: var(--radius-lg);
 padding: 22px;
 text-align: left;
 cursor: pointer;
 font-family: var(--font);
 transition: all .25s;
 border-top: 4px solid var(--pc, var(--ama-blue));
 box-shadow: var(--shadow-sm);
 position: relative;
 overflow: hidden;
}
.pathway-card::after {
 content: '';
 position: absolute;
 inset: auto -30% -70% auto;
 width: 180px;
 height: 180px;
 border-radius: 50%;
 background: radial-gradient(circle, rgba(46, 49, 146, .13), transparent 68%);
 pointer-events: none;
}
.pathway-card:hover {
 transform: translateY(-4px);
 box-shadow: var(--shadow-md);
 border-color: var(--ama-red);
}
.pathway-grid .pathway-card:nth-child(2)::after { background: radial-gradient(circle, rgba(91, 33, 182, .14), transparent 68%); }
.pathway-grid .pathway-card:nth-child(3)::after { background: radial-gradient(circle, rgba(3, 105, 161, .14), transparent 68%); }
.pathway-grid .pathway-card:nth-child(4)::after { background: radial-gradient(circle, rgba(5, 150, 105, .16), transparent 68%); }
.pathway-grid .pathway-card:nth-child(5)::after { background: radial-gradient(circle, rgba(220, 38, 38, .15), transparent 68%); }
.pathway-grid .pathway-card:nth-child(6)::after { background: radial-gradient(circle, rgba(13, 148, 136, .14), transparent 68%); }
.pathway-card__icon {
 width: 48px; height: 48px;
 border-radius: 12px;
 color: #fff;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 1.2rem;
 margin-bottom: 14px;
}
.pathway-card h3 { font-family: var(--display); font-size: 1.15rem; font-weight: 800; color: var(--ama-blue); margin-bottom: 8px; }
.pathway-card p { font-size: .92rem; color: var(--dim); line-height: 1.6; }
.pathway-card__go {
 display: inline-block;
 margin-top: 14px;
 font-size: .78rem;
 font-weight: 700;
 color: var(--ama-red);
}

.promise-card {
 display: flex;
 gap: 20px;
 align-items: flex-start;
 background: var(--card-bg);
 border: 2px solid var(--card-border);
 border-left: 5px solid var(--ama-blue);
 border-radius: var(--radius-lg);
 padding: 28px;
 margin-top: 40px;
 box-shadow: var(--shadow-sm);
}
.promise-card__icon {
 width: 52px; height: 52px;
 border-radius: 50%;
 background: linear-gradient(135deg, var(--ama-blue), var(--ama-red));
 color: #fff;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 1.3rem;
 flex-shrink: 0;
}
.promise-card h3 { font-family: var(--display); color: var(--ama-blue); margin-bottom: 8px; }
.promise-card p { color: var(--text); font-size: .9rem; }

.sub-hero-pro--play { border-color: var(--ama-red); }
.sub-hero-pro--orec {
 border-color: rgba(46, 49, 146, .55);
 background: linear-gradient(135deg, rgba(46, 49, 146, .16), rgba(201, 149, 42, .14));
}

.orec-connectors,
.orec-samples,
.orec-practice {
 margin-top: 28px;
 background: #fff;
 border: 1px solid rgba(46, 49, 146, .16);
 border-radius: 16px;
 padding: 20px;
 box-shadow: 0 8px 20px rgba(13, 50, 104, .08);
}
.orec-connectors__grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
 gap: 12px;
}
.orec-connectors__grid article {
 background: #f8fbff;
 border: 1px solid rgba(46, 49, 146, .14);
 border-radius: 12px;
 padding: 12px;
}
.orec-connectors__grid h3 {
 margin: 0 0 6px;
 color: var(--ama-blue);
 font-size: .92rem;
}
.orec-connectors__grid p {
 margin: 0;
 color: var(--text);
 line-height: 1.6;
 font-size: .84rem;
}
.orec-samples__grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
 gap: 12px;
}
.orec-sample-card {
 border-radius: 12px;
 border: 1px solid rgba(201, 149, 42, .35);
 background: #fffdf6;
 padding: 14px;
}
.orec-sample-card h3 {
 margin: 0 0 10px;
 color: var(--ama-blue);
 font-size: .94rem;
}
.orec-sample-card p {
 margin: 0;
 color: var(--text);
 line-height: 1.75;
 font-size: .86rem;
}
.orec-practice__list {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
 gap: 12px;
 margin-bottom: 14px;
}
.orec-practice__list article {
 border-radius: 12px;
 border: 1px solid rgba(46, 49, 146, .18);
 background: #f8fbff;
 padding: 12px;
}
.orec-practice__list h3 {
 margin: 0 0 8px;
 color: var(--ama-blue);
 font-size: .92rem;
}
.orec-practice__list p {
 margin: 0;
 color: var(--text);
 font-size: .84rem;
 line-height: 1.6;
}

.install-guide-overlay {
 position: fixed;
 inset: 0;
 background: rgba(8, 14, 34, 0.68);
 z-index: 5000;
 display: flex;
 align-items: center;
 justify-content: center;
 padding: 16px;
}
.install-guide-card {
 width: min(560px, 100%);
 background: #fff;
 border-radius: 16px;
 border: 1px solid rgba(46, 49, 146, .22);
 box-shadow: 0 22px 50px rgba(0, 0, 0, 0.3);
 padding: 18px 18px 16px;
 position: relative;
}
.install-guide-close {
 position: absolute;
 right: 10px;
 top: 8px;
 border: 0;
 background: transparent;
 color: #334;
 font-size: 1.4rem;
 cursor: pointer;
}
.install-guide-card h3 {
 margin: 0 0 8px;
 color: var(--ama-blue);
 font-family: var(--display);
}
.install-guide-card p {
 margin: 0 0 8px;
 color: var(--text);
}
.install-guide-card ol {
 margin: 0 0 10px 18px;
 color: var(--text);
 line-height: 1.7;
 font-size: .92rem;
}
.install-guide-actions {
 display: flex;
 gap: 10px;
 flex-wrap: wrap;
}
.install-guide-link,
.install-guide-ok {
 border: 0;
 border-radius: 10px;
 padding: 10px 14px;
 font-weight: 700;
 text-decoration: none;
 cursor: pointer;
}
.install-guide-link {
 background: rgba(46, 49, 146, .1);
 color: var(--ama-blue);
}
.install-guide-ok {
 background: linear-gradient(135deg, #c9952a, #ffd54f);
 color: #201500;
}

.teacher-test-panel {
 margin-bottom: 30px;
}
.teacher-test-panel__box {
 background: #fff;
 border: 1px solid rgba(46, 49, 146, .18);
 border-radius: 16px;
 padding: 18px;
 box-shadow: 0 10px 24px rgba(13, 50, 104, .1);
}
.teacher-test-panel__list {
 list-style: none;
 margin: 14px 0 8px;
 padding: 0;
 display: grid;
 gap: 8px;
}
.teacher-test-panel__list li {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 12px;
 padding: 10px 12px;
 border-radius: 10px;
 border: 1px solid rgba(46, 49, 146, .16);
 background: #f9fbff;
 font-size: .86rem;
}
.teacher-test-panel__list li strong {
 color: #36425f;
 font-size: .82rem;
 text-align: right;
}
.teacher-test-panel__list li.pass {
 border-color: rgba(39, 174, 96, .45);
 background: #f0fff6;
}
.teacher-test-panel__list li.pass strong { color: #1f7a44; }
.teacher-test-panel__list li.warn {
 border-color: rgba(201, 149, 42, .55);
 background: #fffaf0;
}
.teacher-test-panel__list li.warn strong { color: #8a5b00; }
.teacher-test-panel__list li.fail {
 border-color: rgba(227, 27, 35, .45);
 background: #fff4f4;
}
.teacher-test-panel__list li.fail strong { color: #a9141e; }
.teacher-test-panel__hint {
 margin: 8px 0 0;
 font-size: .78rem;
 color: var(--dim);
}

.admin-feedback-badge {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 margin-top: 6px;
 padding: 3px 8px;
 border-radius: 999px;
 font-size: .72rem;
 font-weight: 700;
 text-transform: capitalize;
}
.admin-feedback-badge--excellent { background: #eaf8ef; color: #1d7f42; }
.admin-feedback-badge--good { background: #eef4ff; color: #1f4f9c; }
.admin-feedback-badge--fair { background: #fff8ea; color: #946200; }
.admin-feedback-badge--need-improvement { background: #fff0f0; color: #a51d24; }

.admin-assess-modal {
 position: fixed;
 inset: 0;
 z-index: 1400;
 background: rgba(8, 14, 34, .68);
 display: flex;
 align-items: center;
 justify-content: center;
 padding: 16px;
}
.admin-assess-modal[hidden] { display: none !important; }
.admin-assess-modal__card {
 width: min(760px, 100%);
 max-height: 92vh;
 overflow: auto;
 background: #fff;
 border-radius: 14px;
 border: 1px solid rgba(46, 49, 146, .22);
 box-shadow: 0 20px 44px rgba(0, 0, 0, .32);
 padding: 16px;
}
.admin-assess-modal__head {
 display: flex;
 justify-content: space-between;
 gap: 10px;
 align-items: flex-start;
 margin-bottom: 10px;
}
.admin-assess-modal__head h3 {
 margin: 0 0 4px;
 color: var(--ama-blue);
 font-family: var(--display);
}
.admin-assess-meta {
 margin: 0;
 color: var(--dim);
 font-size: .8rem;
}
.admin-assess-close {
 border: 0;
 background: transparent;
 color: #223;
 font-size: 1.4rem;
 cursor: pointer;
 line-height: 1;
}
.admin-assess-audio {
 margin: 10px 0 14px;
}
.admin-assess-audio audio {
 width: 100%;
}
.admin-assess-grid {
 display: grid;
 grid-template-columns: repeat(2, minmax(0, 1fr));
 gap: 10px;
}
.admin-assess-field {
 display: flex;
 flex-direction: column;
 gap: 6px;
}
.admin-assess-field label {
 font-size: .78rem;
 font-weight: 700;
 color: #2b3550;
}
.admin-assess-field select,
.admin-assess-field textarea {
 border: 1px solid rgba(46, 49, 146, .22);
 border-radius: 8px;
 padding: 9px 10px;
 font: inherit;
 font-size: .85rem;
}
.admin-assess-field textarea {
 min-height: 90px;
 resize: vertical;
}
.admin-assess-field--full {
 grid-column: 1 / -1;
}
.admin-assess-comment-head {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 justify-content: space-between;
 gap: 8px;
}
.admin-assess-comment-head select {
 border: 1px solid rgba(46, 49, 146, .22);
 border-radius: 8px;
 padding: 7px 10px;
 font: inherit;
 font-size: .78rem;
 background: #fff;
}
.admin-assess-comment-wrap {
 position: relative;
}
.admin-assess-comment-wrap textarea {
 width: 100%;
 box-sizing: border-box;
 padding-right: 52px;
 padding-bottom: 44px;
}
.admin-assess-comment-wrap.is-listening textarea {
 border-color: #d32f2f;
 box-shadow: 0 0 0 2px rgba(211, 47, 47, 0.15);
}
.admin-assess-dictate--inbox {
 position: absolute;
 right: 10px;
 bottom: 10px;
 width: 42px;
 height: 42px;
 padding: 0;
 border-radius: 50%;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 border: 2px solid rgba(46, 49, 146, .25);
 background: linear-gradient(135deg, #eef2ff, #dce4ff);
 color: #1a2570;
 font-size: 1rem;
 cursor: pointer;
 box-shadow: 0 4px 10px rgba(46, 49, 146, 0.12);
}
.admin-assess-dictate--inbox:hover:not(:disabled) {
 filter: brightness(1.03);
}
.admin-assess-dictate--inbox.is-listening {
 background: linear-gradient(135deg, #d32f2f, #b71c1c);
 border-color: #ff8a80;
 color: #fff;
 animation: assess-mic-pulse 1.2s ease-in-out infinite;
}
.admin-assess-dictate--inbox:disabled {
 opacity: .55;
 cursor: not-allowed;
}
.admin-assess-dictate {
 display: inline-flex;
 align-items: center;
 gap: 7px;
 padding: 8px 14px;
 border: 2px solid rgba(46, 49, 146, .25);
 border-radius: 999px;
 background: linear-gradient(135deg, #eef2ff, #dce4ff);
 color: #1a2570;
 font-family: var(--ui);
 font-size: .78rem;
 font-weight: 800;
 cursor: pointer;
}
.admin-assess-dictate:hover:not(:disabled) {
 filter: brightness(1.03);
}
.admin-assess-dictate.is-listening {
 background: linear-gradient(135deg, #d32f2f, #b71c1c);
 border-color: #ff8a80;
 color: #fff;
 animation: assess-mic-pulse 1.2s ease-in-out infinite;
}
.admin-assess-dictate:disabled {
 opacity: .55;
 cursor: not-allowed;
}
@keyframes assess-mic-pulse {
 0%, 100% { box-shadow: 0 0 0 0 rgba(211, 47, 47, 0.35); }
 50% { box-shadow: 0 0 0 8px rgba(211, 47, 47, 0); }
}
.admin-assess-dictate-hint {
 margin: 6px 0 0;
 font-size: .72rem;
 color: #5c6680;
 line-height: 1.45;
}
.admin-assess-actions {
 display: flex;
 justify-content: flex-end;
 gap: 10px;
 margin-top: 14px;
}
@media (max-width: 760px) {
 .admin-assess-grid {
 grid-template-columns: 1fr;
 }
}

/* ── Games (shared + arcade) ── */
.game-panel {
 background: var(--card-bg);
 border: 2px solid var(--card-border);
 border-radius: var(--radius-lg);
 padding: 24px;
 border-top: 4px solid var(--ama-blue);
}
.game-hud {
 display: flex;
 flex-wrap: wrap;
 gap: 16px;
 margin-bottom: 20px;
 padding-bottom: 14px;
 border-bottom: 1px solid var(--border);
 font-size: .82rem;
 font-weight: 600;
 color: var(--ama-blue);
}
.game-hud strong { color: var(--ama-red); }
.game-prompt { font-size: .8rem; color: var(--dim); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; margin-bottom: 8px; }
.game-word { font-family: var(--serif); font-size: 1.35rem; color: var(--ama-blue); margin-bottom: 18px; }
.game-choices { display: grid; gap: 10px; }
.game-choice {
 padding: 14px 18px;
 border: 2px solid var(--border);
 border-radius: 10px;
 background: #fff;
 font-size: .95rem;
 font-weight: 600;
 color: var(--text);
 cursor: pointer;
 text-align: left;
 font-family: var(--font);
 transition: all .15s;
}
.game-choice:hover { border-color: var(--ama-blue); background: var(--ama-blue-light); }
.game-feedback { margin-top: 14px; min-height: 24px; font-weight: 700; }
.game-ok { color: var(--green); }
.game-bad { color: var(--ama-red); }
.game-done { text-align: center; padding: 24px; }
.game-done-score { font-size: 1.2rem; margin: 12px 0; }
.game-new-record { color: var(--ama-red); font-weight: 700; margin-bottom: 16px; }

/* Arcade game cards & stages */
.games-intro { text-align: center; max-width: 640px; margin: 0 auto 28px; color: var(--dim); font-size: 1.02rem; line-height: 1.7; }
.games-picker {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
 gap: 16px;
 margin-bottom: 28px;
}
.game-card {
 background: linear-gradient(145deg, #fff 0%, #f8faff 100%);
 border: 2px solid var(--card-border);
 border-radius: var(--radius-lg);
 padding: 22px;
 text-align: left;
 cursor: pointer;
 font-family: var(--font);
 transition: transform .25s, box-shadow .25s, border-color .25s;
 box-shadow: var(--shadow-sm);
}
.game-card:hover, .game-card.active {
 border-color: var(--gold);
 box-shadow: var(--shadow-md);
 transform: translateY(-4px);
}
.game-card.active { background: linear-gradient(145deg, #fffef5 0%, #fff8e8 100%); }
.game-card__icon {
 width: 52px; height: 52px;
 border-radius: 14px;
 color: #fff;
 display: flex;
 align-items: center;
 justify-content: center;
 margin-bottom: 14px;
 font-size: 1.25rem;
 box-shadow: 0 6px 16px rgba(0,0,0,.15);
}
.game-card h3 { font-size: 1.08rem; font-weight: 700; color: var(--navy); margin-bottom: 8px; font-family: var(--serif); }
.game-card p { font-size: .88rem; color: var(--dim); line-height: 1.55; }
.game-card__best { display: block; margin-top: 12px; font-size: .78rem; color: var(--ama-red); font-weight: 700; }
.games-stage { min-height: 280px; }
.game-arcade {
 background: linear-gradient(160deg, #fff 0%, #f4f7ff 100%);
 border: 2px solid rgba(46, 49, 146, 0.12);
 border-radius: var(--radius-lg);
 padding: 28px;
 border-top: 5px solid var(--gold);
 box-shadow: var(--shadow-md);
}
.game-arcade__head {
 display: flex;
 align-items: center;
 gap: 14px;
 margin-bottom: 18px;
}
.game-arcade__emoji { font-size: 2rem; line-height: 1; }
.game-arcade__title { font-family: var(--serif); font-size: 1.35rem; color: var(--navy); font-weight: 700; }
.game-hud--arcade {
 display: flex;
 flex-wrap: wrap;
 gap: 14px 20px;
 margin-bottom: 22px;
 padding: 14px 18px;
 background: rgba(46, 49, 146, 0.06);
 border-radius: 12px;
 font-size: .88rem;
 font-weight: 700;
 color: var(--ama-blue);
 border: none;
}
.game-hud--arcade strong { color: var(--ama-red); }
.game-timer { color: var(--ama-red); }
.game-combo { color: var(--gold); }
.game-unit-tag { font-size: .82rem; color: var(--dim); margin-bottom: 12px; font-style: italic; }
.game-hint-box {
 background: #fffef0;
 border-left: 4px solid var(--gold);
 padding: 12px 16px;
 margin: 14px 0;
 font-size: .92rem;
 border-radius: 0 10px 10px 0;
}
.game-feedback--arcade { min-height: 28px; font-size: .95rem; }
.game-choice--arcade { font-family: var(--font); font-size: 1rem; }
.game-choice--correct { border-color: var(--green) !important; background: #e8f5ec !important; }
.game-choice--wrong { border-color: var(--ama-red) !important; background: var(--ama-red-light) !important; }
.game-choices--2 { grid-template-columns: repeat(2, 1fr); }
.game-choices--3 { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.game-listen-btn {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 padding: 12px 20px;
 margin-bottom: 16px;
 border: 2px solid var(--ama-blue);
 border-radius: 999px;
 background: var(--ama-blue-light);
 color: var(--ama-blue);
 font-weight: 700;
 font-family: var(--font);
 cursor: pointer;
}
.game-done--arcade { padding: 32px 20px; }
.game-done__burst { font-size: 3rem; margin-bottom: 12px; animation: gamePop .5s ease; }
@keyframes gamePop {
 0% { transform: scale(0.5); opacity: 0; }
 70% { transform: scale(1.15); }
 100% { transform: scale(1); opacity: 1; }
}
.memory-grid {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 10px;
 max-width: 480px;
 margin: 0 auto;
}
.memory-card {
 aspect-ratio: 1;
 border: none;
 border-radius: 12px;
 cursor: pointer;
 position: relative;
 perspective: 600px;
 background: transparent;
 padding: 0;
}
.memory-card__back, .memory-card__front {
 position: absolute;
 inset: 0;
 display: flex;
 align-items: center;
 justify-content: center;
 border-radius: 12px;
 padding: 8px;
 font-size: .78rem;
 font-weight: 700;
 font-family: var(--font);
 backface-visibility: hidden;
 transition: transform .35s;
}
.memory-card__back {
 background: linear-gradient(135deg, var(--ama-blue), var(--navy2));
 color: #fff;
 transform: rotateY(0deg);
}
.memory-card__front {
 background: #fff;
 border: 2px solid var(--gold);
 color: var(--navy);
 transform: rotateY(180deg);
}
.memory-card.is-flipped .memory-card__back { transform: rotateY(180deg); }
.memory-card.is-flipped .memory-card__front { transform: rotateY(0deg); }
.memory-card.is-matched .memory-card__front { background: #e8f5ec; border-color: var(--green); }
.phrase-slots {
 min-height: 48px;
 padding: 14px;
 background: rgba(46, 49, 146, 0.06);
 border-radius: 12px;
 margin-bottom: 14px;
 font-size: 1.05rem;
 font-weight: 700;
 color: var(--navy);
}
.phrase-slot-empty { color: var(--dim); font-weight: 400; font-style: italic; }
.phrase-bank { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.phrase-chip {
 padding: 10px 14px;
 border: 2px solid var(--border);
 border-radius: 999px;
 background: #fff;
 font-family: var(--font);
 font-weight: 700;
 cursor: pointer;
 transition: all .2s;
}
.phrase-chip:hover { border-color: var(--ama-blue); }
.phrase-chip.is-used { opacity: 0.35; pointer-events: none; }
.roulette-wheel {
 width: 80px;
 height: 80px;
 margin: 0 auto 20px;
 border-radius: 50%;
 background: linear-gradient(135deg, var(--ama-red), var(--gold));
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 2rem;
 box-shadow: var(--shadow-md);
}
.roulette-wheel--spin { animation: rouletteSpin 1.1s cubic-bezier(.2,.8,.2,1); }
@keyframes rouletteSpin {
 from { transform: rotate(0deg) scale(1); }
 to { transform: rotate(720deg) scale(1.08); }
}
.roulette-card { text-align: center; }
.roulette-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 20px; }
.debate-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 18px 0; }
.debate-btn {
 padding: 18px 14px;
 border: 2px solid var(--border);
 border-radius: 14px;
 background: #fff;
 font-family: var(--font);
 font-size: .88rem;
 font-weight: 700;
 cursor: pointer;
 transition: all .2s;
 text-align: left;
}
.debate-btn--a:hover, .debate-btn--a.is-picked { border-color: var(--ama-blue); background: var(--ama-blue-light); }
.debate-btn--b:hover, .debate-btn--b.is-picked { border-color: var(--ama-red); background: var(--ama-red-light); }
.game-word--sentence { font-size: 1.15rem; line-height: 1.6; }
.game-word--debate { font-size: 1.1rem; line-height: 1.55; }

@media (max-width: 640px) {
 .memory-grid { grid-template-columns: repeat(3, 1fr); }
 .debate-pick { grid-template-columns: 1fr; }
 .game-choices--2 { grid-template-columns: 1fr; }
}

.lv-hero-logo { filter: brightness(0) invert(1); opacity: .95; }

@media (max-width: 900px) {
 .lv-layout { grid-template-columns: 1fr; }
 .lv-side {
 position: relative;
 height: auto;
 top: 0;
 display: flex;
 flex-wrap: wrap;
 gap: 6px;
 padding: 12px;
 }
 .lvs-btn { width: auto; flex: 1 1 auto; min-width: 140px; }
 .lv-main { padding: 20px 16px 60px; }
 .q-acc-body { padding-left: 20px; }
 .sidebar-nav.topnav button span { display: none; }
 .top-main-nav.topnav--pro button span { display: inline; font-size: .58rem; }
 .landing-stats { grid-template-columns: repeat(2, 1fr); }
}

/* ── Part 2 long turn ── */
.part2-banner {
 background: linear-gradient(90deg, var(--ama-blue), var(--ama-red));
 color: #fff; padding: 12px 16px; border-radius: var(--radius);
 font-weight: 700; margin-bottom: 20px; font-size: .9rem;
}
.part2-cue-card {
 background: #fff; border: 2px solid var(--ama-blue); border-radius: var(--radius-lg);
 padding: 24px; margin-bottom: 20px; box-shadow: var(--shadow-md);
}
.part2-cue-label {
 font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em;
 color: var(--ama-red); margin-bottom: 8px;
}
.part2-cue-card h4, .part2-cue-card h5 { font-family: var(--serif); color: var(--navy); margin-bottom: 10px; }
.part2-cue-intro { font-weight: 700; margin: 14px 0 6px; font-size: .9rem; color: var(--navy); }
.part2-cue-card ul, .part2-cue-points { margin: 0 0 12px 20px; line-height: 1.8; font-size: .9rem; }
.part2-timing { font-size: .82rem; color: var(--dim); font-weight: 600; margin-top: 12px; }
.part2-guide-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-bottom: 16px; }
.part2-guide-box {
 background: var(--light); border-radius: var(--radius); padding: 18px;
 border-left: 4px solid var(--ama-blue);
}
.part2-guide-box h5, .part2-guide-box h6 { color: var(--ama-blue); margin-bottom: 10px; font-size: .92rem; }
.part2-guide-box ol, .part2-guide-box ul { margin-left: 18px; font-size: .85rem; line-height: 1.75; }
.part2-must-use { margin-bottom: 16px; font-size: .88rem; }

/* ── Homework Centre ── */
.sub-hero-pro--homework { background: linear-gradient(135deg, #1a5276, #2e3192); }
.hw-submit-guide__note strong {
 color: #1a2570;
}

.hw-week-written {
 margin-bottom: 24px;
}

.hw-week-written__head {
 background: #fff;
 border: 2px solid rgba(26, 37, 112, 0.12);
 border-radius: var(--radius-lg);
 padding: 18px 20px;
 margin-bottom: 16px;
 box-shadow: 0 6px 24px rgba(14, 30, 78, 0.08);
}

.hw-week-written__eyebrow {
 margin: 0 0 6px;
 font-size: 0.72rem;
 font-weight: 700;
 letter-spacing: 0.08em;
 text-transform: uppercase;
 color: #b8860b;
}

.hw-week-written__head h3 {
 margin: 0 0 8px;
 color: #0e1e4e;
 font-size: 1.15rem;
}

.hw-week-written__lead {
 margin: 0 0 10px;
 color: #243047;
 line-height: 1.6;
}

.hw-week-written__reminder {
 margin: 0;
 padding: 10px 12px;
 border-radius: 10px;
 background: rgba(255, 215, 0, 0.14);
 border: 1px solid rgba(184, 134, 11, 0.25);
 color: #243047;
 font-size: 0.92rem;
 line-height: 1.55;
}

.hw-week-written__reminder i { color: #b8860b; margin-right: 6px; }

.hw-week-written__reminder-vi {
 margin: 8px 0 0;
 font-size: 0.85rem;
 color: #4a5568;
}

/* Week 5+ Part 2 cue-card homework board */
.hw-cue-week-card__head {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 justify-content: space-between;
 gap: 8px;
 margin-bottom: 12px;
}
.hw-cue-week-card__badge {
 font-size: 0.78rem;
 font-weight: 800;
 letter-spacing: 0.06em;
 text-transform: uppercase;
 color: #c9a227;
}
.hw-cue-week-card__board {
 background: #fff;
 border: 2px solid #254ea8;
 border-radius: 14px;
 padding: 18px 18px 16px;
 margin-bottom: 12px;
}
.hw-cue-week-card__title {
 font-family: var(--serif, Georgia, serif);
 font-size: 1.15rem;
 line-height: 1.45;
 color: #0e1e4e;
 margin: 0 0 12px;
}
.hw-cue-week-card__say {
 font-weight: 700;
 color: #c9a227;
 margin: 0 0 6px;
 font-size: 0.95rem;
}
.hw-cue-week-card__bullets {
 margin: 0 0 4px 1.15rem;
 padding: 0;
 color: #1a2744;
 line-height: 1.75;
 font-size: 0.95rem;
}
.hw-cue-week-card__bar {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 gap: 8px 12px;
 background: #0e1e4e;
 color: #fff;
 border-radius: 10px;
 padding: 12px 14px;
 font-size: 0.86rem;
 margin-bottom: 10px;
}
.hw-cue-week-card__time {
 color: #c9a227;
 font-weight: 800;
}
.hw-cue-week-card__sep {
 opacity: 0.45;
}
.hw-cue-week-card__structure {
 font-weight: 600;
 letter-spacing: 0.01em;
}
.hw-cue-week-card__tip {
 margin: 0 0 14px;
 font-size: 0.88rem;
 font-style: italic;
 color: #5c6478;
 line-height: 1.5;
}

.hw-written-card {
 background: #fff;
 border: 2px solid rgba(26, 37, 112, 0.14);
 border-radius: var(--radius-lg);
 padding: 18px 18px 16px;
 margin-bottom: 16px;
 box-shadow: 0 8px 28px rgba(14, 30, 78, 0.08);
}

.hw-written-card__top {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 justify-content: space-between;
 gap: 8px;
 margin-bottom: 8px;
}

.hw-written-card__topic {
 font-size: 0.72rem;
 font-weight: 700;
 letter-spacing: 0.08em;
 text-transform: uppercase;
 color: #b8860b;
}

.hw-written-card__round {
 font-size: 0.78rem;
 font-weight: 600;
 color: #1a5276;
}

.hw-written-card__task {
 margin: 0 0 10px;
 font-size: 1.05rem;
 color: #0e1e4e;
}

.hw-written-card__question {
 margin: 0 0 14px;
 padding: 14px 16px;
 border-radius: 12px;
 background: linear-gradient(135deg, #0e1e4e, #1a3a7a);
 color: #fff;
 font-size: 1rem;
 line-height: 1.55;
 font-weight: 600;
}

.hw-written-card__sparks-label {
 display: block;
 margin-bottom: 8px;
 font-size: 0.68rem;
 font-weight: 700;
 letter-spacing: 0.08em;
 text-transform: uppercase;
 color: #b8860b;
}

.hw-written-card__chips {
 display: flex;
 flex-wrap: wrap;
 gap: 8px;
 margin-bottom: 12px;
}

.hw-written-chip {
 display: inline-block;
 padding: 6px 12px;
 border-radius: 999px;
 background: #f1f5f9;
 border: 1px solid #dbe3ef;
 color: #243047;
 font-size: 0.82rem;
}

.hw-written-card__use {
 margin: 0 0 14px;
 font-size: 0.92rem;
 color: #243047;
}

.hw-written-card__use strong { color: #0e1e4e; }

.hw-written-card__label {
 display: block;
 margin-bottom: 8px;
 font-size: 0.88rem;
 font-weight: 600;
 color: #1a2570;
}

.hw-written-card__textarea {
 width: 100%;
 min-height: 140px;
 padding: 12px 14px;
 border: 2px solid #dbe3ef;
 border-radius: 12px;
 font-size: 1rem;
 line-height: 1.55;
 resize: vertical;
 font-family: inherit;
 color: #243047;
 background: #fafbfd;
}

.hw-written-card__textarea:focus {
 outline: none;
 border-color: var(--ama-blue, #1a5276);
 box-shadow: 0 0 0 3px rgba(26, 82, 118, 0.12);
}

.hw-written-card__actions {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 gap: 10px;
 margin-top: 12px;
}

.hw-written-msg {
 font-size: 0.88rem;
 color: #4a5568;
}

.hw-written-msg--ok { color: #0f7a3a; font-weight: 600; }

.hw-written-msg--err { color: #b42318; font-weight: 600; }

.hw-unit-head--optional h3 {
 font-size: 1rem;
 color: #4a5568;
}

.hw-optional-note {
 margin: 6px 0 0;
 font-size: 0.88rem;
 color: #5f6b7a;
}

.hw-profile-bar { margin-bottom: 20px; }

.hw-submit-guide {
 background: #ffffff;
 border: 2px solid rgba(26, 37, 112, 0.14);
 border-radius: var(--radius-lg);
 padding: 20px 22px;
 margin-bottom: 20px;
 color: #243047;
 box-shadow: 0 6px 24px rgba(14, 30, 78, 0.1);
}

.hw-submit-guide h3 {
 margin: 0 0 14px;
 font-size: 1.08rem;
 color: #1a2570;
 font-weight: 700;
}

.hw-submit-guide h3 i { color: var(--ama-red); margin-right: 8px; }

.hw-submit-guide__steps {
 margin: 0 0 14px;
 padding-left: 22px;
 line-height: 1.7;
 font-size: 0.95rem;
 color: #243047;
}

.hw-submit-guide__steps strong {
 color: #0e1e4e;
}

.hw-submit-guide__steps em {
 color: #1a5276;
 font-style: normal;
 font-weight: 600;
}

.hw-submit-guide__note {
 margin: 0;
 font-size: 0.88rem;
 color: #4a5568;
 line-height: 1.55;
}

.hw-submit-guide__note i { color: var(--ama-blue); margin-right: 6px; }

.hw-submit-guide__note strong {
 color: #1a2570;
}

.hw-profile-bar__inner {
 display: flex;
 flex-wrap: wrap;
 align-items: flex-end;
 gap: 10px 12px;
}
.hw-profile-field {
 display: flex;
 flex-direction: column;
 gap: 4px;
 font-size: .72rem;
 font-weight: 700;
 color: #35508e;
 text-transform: uppercase;
 letter-spacing: .04em;
}
.hw-profile-field select {
 min-width: 110px;
 padding: 10px 12px;
 border-radius: 10px;
 border: 1px solid rgba(37, 72, 156, 0.25);
 font-family: var(--font);
 font-size: .88rem;
 font-weight: 600;
 color: #1f3f89;
 background: #fff;
}
.hw-profile-tasks-row {
 margin-top: 14px;
 padding-top: 14px;
 border-top: 1px dashed rgba(37, 72, 156, 0.2);
}
.hw-profile-field--tasks {
 width: 100%;
 flex: 1 1 100%;
}
.hw-profile-field__label {
 display: block;
 font-size: .72rem;
 font-weight: 700;
 color: #35508e;
 text-transform: uppercase;
 letter-spacing: .04em;
 margin-bottom: 10px;
}
.hw-profile-field__hint {
 font-style: normal;
 font-weight: 600;
 text-transform: none;
 letter-spacing: 0;
 color: #5a7099;
 font-size: .78rem;
}
.hw-task-picker {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
 gap: 8px;
 max-width: 100%;
 position: relative;
 z-index: 5;
}
.hw-task-chip {
 min-width: 44px;
 height: 44px;
 padding: 0;
 border: 2px solid rgba(37, 72, 156, 0.28);
 border-radius: 10px;
 background: #fff;
 color: #1f3f89;
 font-family: var(--font);
 font-size: .92rem;
 font-weight: 800;
 cursor: pointer;
 position: relative;
 z-index: 2;
 touch-action: manipulation;
 -webkit-tap-highlight-color: rgba(255, 215, 0, 0.35);
 transition: background .15s, border-color .15s, color .15s, transform .12s;
}
.hw-task-chip:hover {
 border-color: var(--royal-blue-btn);
 transform: translateY(-1px);
}
.hw-task-chip.is-selected {
 background: var(--royal-blue-btn);
 border-color: var(--gold-solid);
 color: #fff;
 box-shadow: 0 4px 12px rgba(0, 48, 135, 0.28);
}
.hw-task-picker-summary {
 margin: 12px 0 0;
 font-size: .88rem;
 font-weight: 700;
 color: #157a40;
}
.hw-mode-switch {
 display: flex;
 align-items: center;
 gap: 10px;
 margin-bottom: 16px;
 padding: 10px;
 border-radius: 12px;
 background: linear-gradient(135deg, #edf2fb, #f7f9fd);
 border: 1px solid rgba(37, 72, 156, 0.22);
 position: sticky;
 top: 0;
 z-index: 20;
 box-shadow: 0 4px 12px rgba(15, 32, 68, 0.08);
}
.hw-current-part-note {
 margin: -8px 0 16px;
 padding: 10px 14px;
 border-radius: 10px;
 background: #fff8e6;
 border: 1px solid #ffd700;
 font-size: .88rem;
 color: #1f3f89;
 line-height: 1.45;
}
.hw-current-part-note strong { color: #002366; }
.hw-mode-btn {
 border: 1px solid rgba(40, 67, 137, 0.25);
 border-radius: 999px;
 background: #fff;
 color: #1f3f89;
 font-family: var(--font);
 font-size: .82rem;
 font-weight: 700;
 padding: 8px 14px;
 cursor: pointer;
}
.hw-mode-btn.active {
 border-color: transparent;
 background: linear-gradient(135deg, #274ea8, #1f3f89);
 color: #fff;
 box-shadow: 0 8px 20px rgba(26, 53, 122, 0.25);
}
.hw-mode-note {
 margin-left: auto;
 font-size: .76rem;
 font-weight: 700;
 color: #35508e;
}
.hw-selectors {
 display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 24px;
 background: var(--white); padding: 16px 18px; border-radius: var(--radius);
 border: 2px solid var(--border);
}
.hw-selectors label { font-weight: 700; font-size: .88rem; color: var(--navy); }
.hw-selectors select {
 margin-left: 8px; padding: 8px 12px; border-radius: 8px; border: 2px solid var(--border);
 font-family: var(--font); min-width: 280px; max-width: 100%;
}
#hw-unit-select { min-width: 320px; }
.hw-unit-head {
 background: var(--card-bg); border-radius: var(--radius-lg); padding: 20px 24px;
 margin-bottom: 20px; border-left: 5px solid var(--ama-red);
}
.hw-unit-head h3 { font-family: var(--serif); color: var(--navy); margin-bottom: 6px; }
.hw-unit-icon { font-size: 1.4rem; margin-right: 8px; }
.hw-tasks { overflow-anchor: none; }
.hw-part-block {
 background: var(--white); border-radius: var(--radius-lg); padding: 24px;
 margin-bottom: 24px; border: 2px solid var(--card-border); box-shadow: var(--shadow-sm);
}
.hw-part-block--part2 { border-color: var(--ama-blue); border-top: 4px solid var(--ama-blue); }
.hw-part-title { color: var(--ama-red); font-family: var(--display); margin-bottom: 8px; }
.hw-part-title--part2 { color: var(--ama-blue); }
.hw-part-desc { font-size: .88rem; color: var(--dim); margin-bottom: 20px; }
.hw-q-list { display: flex; flex-direction: column; gap: 20px; }
.hw-q-card {
 border: 2px solid var(--border); border-radius: var(--radius); overflow: hidden;
}
.hw-q-card--selected {
 border-color: #c77a00;
 box-shadow: 0 0 0 2px rgba(199, 122, 0, 0.22);
}
.hw-q-card--flash {
 animation: hw-q-card-flash 2.2s ease-out 1;
}
@keyframes hw-q-card-flash {
 0%, 100% { box-shadow: 0 0 0 0 rgba(37, 78, 168, 0); }
 20% { box-shadow: 0 0 0 6px rgba(37, 78, 168, 0.28); }
 50% { box-shadow: 0 0 0 3px rgba(199, 122, 0, 0.2); }
}
.hw-q-head { padding: 16px 18px; background: var(--light); border-bottom: 1px solid var(--border); }
.hw-q-num {
 display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center;
 background: var(--ama-blue); color: #fff; border-radius: 50%; font-size: .75rem; font-weight: 800;
 margin-right: 10px;
}
.hw-q-text { display: inline; font-weight: 700; color: var(--navy); font-size: .95rem; }
.hw-q-vi { font-size: .82rem; margin-top: 6px; color: var(--dim); }
.hw-empty { text-align: center; padding: 40px; color: var(--dim); }
.hw-submit-msg--ok { color: var(--green); font-weight: 600; }

@media (max-width: 900px) {
 .hw-selectors { gap: 10px; padding: 12px; }
 .hw-selectors label { width: 100%; }
 .hw-selectors select, #hw-unit-select { width: 100%; min-width: 0; margin-left: 0; margin-top: 6px; }
 .hw-mode-switch { padding: 8px; gap: 8px; }
 .hw-mode-btn { min-height: 36px; }
 .hw-mode-note { margin-left: 0; }
 .hw-part-block { padding: 14px; border-radius: 12px; }
 .hw-q-head { padding: 12px; }
 .practice-workspace { padding: 14px; }
 .practice-audio-bar { gap: 8px; }
 .practice-record, .practice-stop, .practice-play { min-height: 38px; padding: 10px 12px; font-size: .78rem; }
 .practice-clear-audio { min-height: 38px; padding: 9px 12px; }
 .practice-timer { margin-left: 0; width: 100%; text-align: right; font-size: 1rem; }
 .practice-submit-row { padding: 12px; border-radius: 10px; }
}

@media print {
 .bg-mesh, .topbar, .lv-side, .site-foot { display: none !important; }
 .lesson-view { position: static; }
 body { background: #fff; }
}

/* ── Student profile bar ── */
.student-profile-bar {
 background: linear-gradient(135deg, #e8f5ec, #fff);
 border: 2px solid #b8dfc4;
 border-radius: var(--radius);
 padding: 16px 18px;
 margin-bottom: 24px;
}
.student-profile-bar__inner {
 display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
}
.student-profile-bar__label {
 font-size: .78rem; font-weight: 800; color: var(--ama-blue);
 text-transform: uppercase; letter-spacing: .06em;
}
.student-profile-bar input {
 padding: 10px 12px; border: 2px solid var(--border); border-radius: 8px;
 font-family: var(--font); min-width: 140px;
}
.student-profile-save { font-size: .82rem; padding: 10px 18px; }
.student-profile-msg { font-size: .8rem; color: var(--green); font-weight: 600; }

.hub-announcement {
 background: linear-gradient(90deg, var(--ama-blue), var(--ama-red));
 color: #fff; text-align: center; padding: 12px 16px;
 border-radius: var(--radius); font-weight: 700; margin-bottom: 24px;
}

/* ── Lesson / practice submit ── */
.lesson-submit-box, .practice-submit-row {
 margin-top: 20px; padding: 20px;
 background: var(--ama-blue-light);
 border: 2px solid var(--ama-blue);
 border-radius: var(--radius);
}
.lesson-submit-box h4 { color: var(--ama-blue); margin-bottom: 8px; }
.lesson-submit-text, .practice-submit-row { width: 100%; }
.lesson-submit-text {
 width: 100%; padding: 12px; border-radius: 8px; border: 2px solid var(--border);
 font-family: var(--font); margin: 10px 0;
}
.practice-submit-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; background: #e8f5ec; border-color: #7bc49a; }
.practice-submit-msg { font-size: .82rem; font-weight: 600; color: var(--ama-blue); }
.practice-submit-msg--ok { color: var(--green); font-weight: 700; }
.practice-submit-hw--green {
 border: none;
 border-radius: 12px;
 padding: 12px 20px;
 font-family: var(--font);
 font-size: .88rem;
 font-weight: 700;
 color: #fff;
 cursor: pointer;
 background: linear-gradient(135deg, #1fa855, #157a40);
 box-shadow: 0 8px 20px rgba(21, 122, 64, 0.28);
 min-height: 44px;
 display: inline-flex;
 align-items: center;
 gap: 8px;
}
.practice-submit-hw--green:hover { filter: brightness(1.05); }
.practice-submit-hw--green:disabled,
.practice-submit-hw--sent {
 background: linear-gradient(135deg, #157a40, #0f5c30);
 box-shadow: 0 6px 16px rgba(15, 92, 48, 0.35);
 cursor: default;
 opacity: 1;
}
.practice-submit-hw--pending {
 display: none !important;
}

.ama-app-version-badge {
 display: none !important;
}
.ama-update-prompt {
 display: none !important;
}

/* Official Update Available - full-screen gate (all devices / PWAs) */
.ama-update-gate {
 position: fixed;
 inset: 0;
 z-index: 2147483000;
 display: flex;
 align-items: center;
 justify-content: center;
 padding: 24px 16px;
 background: linear-gradient(160deg, #001a4d 0%, #002366 45%, #0a3a8f 100%);
}
.ama-update-gate__card {
 width: 100%;
 max-width: 400px;
 background: #fff;
 border-radius: 18px;
 padding: 28px 24px 22px;
 text-align: center;
 box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
 border-top: 5px solid var(--ama-red);
}
.ama-update-gate__brand {
 font-weight: 800;
 font-size: 1.05rem;
 color: var(--ama-blue);
 letter-spacing: 0.01em;
}
.ama-update-gate__school {
 margin: 4px 0 18px;
 font-size: 0.78rem;
 color: #5a6a88;
}
.ama-update-gate h1,
.ama-update-gate__card h1 {
 margin: 0 0 10px;
 font-family: var(--serif, "Libre Baskerville", Georgia, serif);
 font-size: 1.55rem;
 color: var(--text);
 font-weight: 800;
}
.ama-update-gate__copy {
 margin: 0 0 14px;
 font-size: 0.95rem;
 line-height: 1.45;
 color: #3a4a66;
}
.ama-update-gate__ver {
 margin: 0 0 18px;
 font-size: 0.8rem;
 color: #5a6a88;
}
.ama-update-gate__ver strong { color: var(--text); }
.ama-update-gate__btn {
 width: 100%;
 border: 0;
 border-radius: 12px;
 padding: 16px 18px;
 font-size: 1.05rem;
 font-weight: 800;
 cursor: pointer;
 background: linear-gradient(135deg, var(--ama-red), var(--ama-red-dark));
 color: #fff;
 box-shadow: 0 8px 20px rgba(227, 27, 35, 0.35);
 font-family: inherit;
}
.ama-update-gate__btn:disabled {
 opacity: 0.75;
 cursor: wait;
}
.ama-update-gate__btn:hover:not(:disabled) {
 filter: brightness(1.05);
}
.ama-update-gate__hint {
 margin: 14px 0 0;
 font-size: 0.72rem;
 color: #7a8aa8;
}

/* ── Admin / Owner dashboard ── */
.view#view-admin { background: #0f2044; min-height: 80vh; }
.admin-gate {
 display: flex; align-items: center; justify-content: center;
 min-height: 70vh; padding: 40px 20px;
}
.admin-gate__card {
 max-width: 400px; width: 100%; background: #fff;
 border-radius: var(--radius-lg); padding: 36px 28px;
 text-align: center; box-shadow: var(--shadow-lg);
 border-top: 5px solid var(--ama-red);
}
.admin-gate__icon { font-size: 2.5rem; color: var(--ama-blue); margin-bottom: 12px; }
.admin-gate__card h2 { font-family: var(--serif); color: var(--ama-blue); margin-bottom: 8px; }
.admin-gate__card label { display: block; text-align: left; font-size: .75rem; font-weight: 700; margin: 16px 0 6px; color: var(--dim); }
.admin-gate__card input {
 width: 100%; padding: 14px; border: 2px solid var(--border); border-radius: 10px;
 font-size: 1.1rem; letter-spacing: .2em; text-align: center;
}
.admin-login-error { color: var(--ama-red); font-size: .82rem; min-height: 1.2em; margin: 8px 0; }
.admin-gate__hint { font-size: .72rem; color: var(--dim); margin-top: 16px; }

.admin-panel { max-width: 1100px; margin: 0 auto; padding: 32px 20px 60px; color: #fff; }
.admin-head {
 display: flex; justify-content: space-between; align-items: flex-start;
 margin-bottom: 28px; flex-wrap: wrap; gap: 16px;
 flex-direction: column;
 align-items: stretch;
}
.admin-eyebrow { font-size: .72rem; text-transform: uppercase; letter-spacing: .14em; opacity: .7; margin-bottom: 4px; }
.admin-head h1 { font-family: var(--serif); font-size: 1.75rem; margin: 0; }
.admin-head__actions {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
 gap: 10px;
 align-items: stretch;
 width: 100%;
 max-width: 640px;
}
.admin-head__actions .admin-btn-sm,
.admin-head__actions .admin-logout-btn {
 width: 100%;
 justify-content: center;
 min-height: 48px;
}
.admin-refresh-head {
 font-size: .82rem;
 padding: 10px 16px;
}
.admin-btn-sm--refresh.is-syncing i {
 animation: admin-refresh-spin 0.85s linear infinite;
}
@keyframes admin-refresh-spin {
 from { transform: rotate(0deg); }
 to { transform: rotate(360deg); }
}
.admin-logout-btn {
 padding: 10px 16px; border-radius: 8px; border: 2px solid rgba(255,255,255,.3);
 background: transparent; color: #fff; font-weight: 700; cursor: pointer; font-family: var(--font);
}

.admin-stats {
 display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
 gap: 12px; margin-bottom: 24px;
}
.admin-stat {
 background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15);
 border-radius: 12px; padding: 18px; text-align: center;
}
.admin-stat strong { display: block; font-size: 1.8rem; color: #ffd54f; font-family: var(--serif); }
.admin-stat span { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; opacity: .8; }
.admin-stat--alert { border-color: var(--ama-red); background: rgba(227, 27, 35, .15); }

.admin-tabs {
 display: grid;
 grid-template-columns: repeat(3, minmax(0, 1fr));
 gap: 8px;
 margin-bottom: 20px;
}
.admin-tab {
 padding: 12px 10px;
 border-radius: 8px;
 border: 2px solid rgba(255,255,255,.2);
 background: transparent;
 color: #fff;
 font-weight: 700;
 cursor: pointer;
 font-family: var(--font);
 font-size: .82rem;
 min-height: 48px;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 6px;
 text-align: center;
}
.admin-tab.active { background: var(--ama-red); border-color: var(--ama-red); }

#admin-gate[hidden],
#admin-panel[hidden],
.admin-tab-panel[hidden] { display: none !important; }

.admin-tab-panel {
 display: block;
 background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
 border-radius: var(--radius-lg); padding: 20px;
}
.admin-toolbar {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
 gap: 10px;
 align-items: stretch;
 margin-bottom: 16px;
}
.admin-toolbar label {
 font-size: .82rem;
 font-weight: 600;
 display: flex;
 flex-direction: column;
 gap: 4px;
 margin: 0;
}
.admin-toolbar select {
 padding: 10px 8px;
 border-radius: 6px;
 margin-left: 0;
 width: 100%;
 min-height: 44px;
}
.admin-toolbar .admin-btn-sm {
 width: 100%;
 justify-content: center;
 min-height: 48px;
}
.admin-btn-sm {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 6px;
 padding: 10px 12px;
 border-radius: 8px;
 border: 1px solid rgba(190, 209, 255, 0.3);
 background: linear-gradient(135deg, #3558ad, #2a4182);
 color: #fff;
 font-weight: 700;
 font-size: .78rem;
 cursor: pointer;
 min-height: 44px;
}
.admin-btn-sm i {
 font-size: .74rem;
}
.admin-btn-sm--assess {
 background: linear-gradient(135deg, #3f63bf, #2c4693);
}
.admin-btn-sm--listen {
 background: linear-gradient(135deg, #3558ad, #27407f);
}
.admin-btn-sm--download {
 background: linear-gradient(135deg, #3a5b9f, #2a4479);
}
.admin-btn-sm--check {
 background: linear-gradient(135deg, #39455f, #2e374d);
}
.admin-btn-sm--check.is-checked {
 background: linear-gradient(135deg, #23945c, #1b7c4d);
 border-color: rgba(132, 236, 177, 0.42);
}
.admin-btn-sm--danger {
 background: linear-gradient(135deg, #d12f43, #b51f33);
 border-color: rgba(255, 176, 187, 0.4);
}
.admin-btn-sm--demo { background: linear-gradient(135deg, #b8860b, #ffd54f); color: #1a2570; }

.admin-btn-sm--refresh {
 background: linear-gradient(135deg, #157a40, #1b9a52);
 border-color: rgba(255,255,255,.2);
 color: #fff;
}
.admin-btn-sm--refresh:disabled { opacity: .6; cursor: wait; }
.admin-get-newest {
 display: inline-flex;
 align-items: center;
 gap: 10px;
 border: 0;
 cursor: pointer;
 font-family: inherit;
 color: #fff;
 background: linear-gradient(135deg, #0d6e3f 0%, #1bb15a 55%, #148a48 100%);
 box-shadow: 0 10px 28px rgba(16, 120, 64, 0.35);
 transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.admin-get-newest:hover {
 transform: translateY(-1px);
 box-shadow: 0 14px 32px rgba(16, 120, 64, 0.45);
}
.admin-get-newest:disabled {
 opacity: .65;
 cursor: wait;
 transform: none;
}
.admin-get-newest--head {
 padding: 10px 16px;
 border-radius: 12px;
 font-weight: 800;
 font-size: .92rem;
}
.admin-get-newest--head i { font-size: 1.05rem; }
.admin-get-newest--banner {
 width: 100%;
 margin: 0 0 14px;
 padding: 16px 18px;
 border-radius: 14px;
 text-align: left;
 font-size: 1rem;
}
.admin-get-newest--banner span {
 display: flex;
 flex-direction: column;
 gap: 2px;
 align-items: flex-start;
}
.admin-get-newest--banner strong {
 font-size: 1.05rem;
 font-weight: 800;
 letter-spacing: .01em;
}
.admin-get-newest--banner small {
 font-size: .82rem;
 opacity: .9;
 font-weight: 500;
 line-height: 1.35;
}
.admin-get-newest--banner i {
 font-size: 1.45rem;
 flex-shrink: 0;
}
@media (max-width: 720px) {
 .admin-get-newest--head .admin-get-newest__label { display: none; }
 .admin-head__actions { flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
}
.admin-class-intro {
 font-size: .88rem;
 line-height: 1.55;
 color: rgba(255,255,255,.82);
 margin: 0 0 14px;
 padding: 12px 14px;
 border-radius: 10px;
 background: rgba(255,255,255,.06);
 border: 1px solid rgba(255,255,255,.12);
}
.admin-class-table-wrap { margin-bottom: 24px; }
.admin-class-table td { vertical-align: middle; }
.admin-course-tag {
 display: inline-block;
 padding: 4px 8px;
 border-radius: 999px;
 font-size: .68rem;
 font-weight: 700;
 background: rgba(46, 49, 146, 0.35);
 border: 1px solid rgba(255,255,255,.15);
}
.admin-yes { color: #7dffb0; font-weight: 800; }
.admin-no { color: rgba(255,255,255,.45); font-weight: 600; }
.admin-muted { color: rgba(255,255,255,.35); }
.admin-check-toggle {
 border: 2px solid rgba(255,255,255,.25);
 border-radius: 999px;
 padding: 7px 12px;
 background: rgba(255,255,255,.08);
 color: #fff;
 font-size: .72rem;
 font-weight: 700;
 cursor: pointer;
}
.admin-check-toggle.is-checked {
 background: #157a40;
 border-color: #7dffb0;
 color: #fff;
}
.admin-rate-row {
 display: flex;
 flex-wrap: wrap;
 gap: 4px;
 min-width: 180px;
}
.admin-rate-pill {
 border: 1px solid rgba(255,255,255,.22);
 border-radius: 999px;
 padding: 5px 8px;
 font-size: .62rem;
 font-weight: 700;
 background: rgba(255,255,255,.08);
 color: rgba(255,255,255,.88);
 cursor: pointer;
 white-space: nowrap;
}
.admin-rate-pill.is-active {
 background: var(--gold-solid);
 color: var(--royal-blue);
 border-color: var(--gold-solid);
}
.admin-rate-pill--excellent.is-active { background: #ffd54f; }
.admin-rate-pill--good.is-active { background: #8fd694; color: #0f3d1a; }
.admin-rate-pill--fair.is-active { background: #ffe082; color: #5c4a00; }
.admin-rate-pill--need-improvement.is-active { background: #ffb4a2; color: #5c1a00; }
@media (max-width: 760px) {
 .admin-rate-row { min-width: 0; }
 .admin-class-table th:nth-child(3),
 .admin-class-table td:nth-child(3) { display: none; }
}

.admin-week-tabs {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(68px, 1fr));
 gap: 8px;
 margin-bottom: 18px;
 padding: 12px;
 border-radius: 12px;
 background: rgba(255, 215, 0, 0.12);
 border: 2px solid rgba(255, 215, 0, 0.35);
 max-height: none;
 overflow: visible;
}
.admin-week-tab {
 flex: 0 1 auto;
 min-width: 0;
 min-height: 44px;
 padding: 10px 8px;
 border: 2px solid rgba(255,255,255,.25);
 border-radius: 10px;
 background: rgba(255,255,255,.08);
 color: #fff;
 font-family: var(--ui);
 font-size: .82rem;
 font-weight: 800;
 cursor: pointer;
 text-align: center;
}
.admin-week-tab.active {
 background: var(--gold-solid);
 color: var(--royal-blue);
 border-color: var(--gold-solid);
 box-shadow: 0 6px 16px rgba(255, 215, 0, 0.35);
}
.admin-submitted-toggle {
 display: flex;
 flex-direction: column;
 gap: 6px;
 min-width: 130px;
}
.admin-sub-btn {
 border: 2px solid rgba(255,255,255,.22);
 border-radius: 8px;
 padding: 7px 10px;
 font-size: .68rem;
 font-weight: 700;
 cursor: pointer;
 background: rgba(255,255,255,.06);
 color: rgba(255,255,255,.85);
 text-align: left;
}
.admin-sub-btn--yes.is-active {
 background: #157a40;
 border-color: #7dffb0;
 color: #fff;
}
.admin-sub-btn--no.is-active {
 background: #8b2e2e;
 border-color: #ffb4a2;
 color: #fff;
}
.admin-auto-hint {
 display: block;
 margin-top: 4px;
 font-size: .62rem;
 color: rgba(125, 255, 176, 0.85);
}
.admin-reminder-editor label {
 display: block;
 font-size: .78rem;
 font-weight: 700;
 margin: 12px 0 6px;
 color: rgba(255,255,255,.85);
}
.admin-reminder-editor input,
.admin-reminder-editor textarea,
.admin-reminder-editor select {
 width: 100%;
 max-width: 560px;
 padding: 10px 12px;
 border-radius: 8px;
 border: 1px solid rgba(255,255,255,.2);
 background: rgba(255,255,255,.08);
 color: #fff;
 font-family: var(--font);
}
.admin-reminder-lead {
 font-size: .88rem;
 line-height: 1.55;
 color: rgba(255,255,255,.82);
 margin-bottom: 12px;
}
.admin-check--block { display: block; margin-bottom: 8px; }
.admin-reminder-actions {
 display: flex;
 flex-wrap: wrap;
 gap: 10px;
 margin-top: 18px;
}
.admin-reminder-preview {
 margin-top: 20px;
 padding-top: 16px;
 border-top: 1px solid rgba(255,255,255,.12);
}
.admin-reminder-preview-card {
 margin-top: 10px;
 padding: 16px;
 border-radius: 14px;
 background: linear-gradient(135deg, rgba(255,215,0,.15), rgba(46,49,146,.35));
 border: 2px solid rgba(255,215,0,.4);
 color: #fff;
}
.admin-reminder-preview-week {
 display: inline-block;
 padding: 4px 10px;
 border-radius: 999px;
 background: var(--gold-solid);
 color: var(--royal-blue);
 font-weight: 800;
 font-size: .72rem;
 margin-bottom: 8px;
}
.admin-reminder-preview-deadline {
 margin: 10px 0 0;
 font-size: 1.35rem;
 font-weight: 900;
 color: #d32f2f;
 letter-spacing: .02em;
}

/* ── Teacher audio download (prominent) ── */
.admin-btn-download-lg {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 8px;
 padding: 10px 16px;
 margin: 4px 6px 4px 0;
 border: 2px solid #7dffb0;
 border-radius: 10px;
 background: linear-gradient(135deg, #157a40, #1b9a52);
 color: #fff;
 font-family: var(--ui);
 font-size: .82rem;
 font-weight: 800;
 cursor: pointer;
 white-space: nowrap;
 box-shadow: 0 4px 12px rgba(21, 122, 64, 0.35);
}
.admin-btn-download-lg:hover:not(:disabled) {
 filter: brightness(1.08);
 transform: translateY(-1px);
}
.admin-btn-download-lg:disabled {
 opacity: .65;
 cursor: wait;
}
.admin-btn-download-lg--inline {
 display: flex;
 width: 100%;
 max-width: 320px;
 margin-top: 10px;
}
.admin-class-listen {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 gap: 6px;
}

/* ── Student homework reminder card ── */
.homework-reminder {
 margin-bottom: 24px;
}
.homework-reminder__inner {
 width: 100%;
 text-align: left;
 border: none;
 cursor: pointer;
 display: block;
 padding: 22px 24px;
 border-radius: 18px;
 background: linear-gradient(135deg, #fff8e1 0%, #ffe082 45%, #ffd54f 100%);
 border: 3px solid var(--royal-blue);
 box-shadow: 0 12px 32px rgba(0, 35, 102, 0.18);
 transition: transform .2s, box-shadow .2s;
 font-family: 'Times New Roman', Times, Georgia, serif;
 color: #0a1a3a;
}
.homework-reminder__inner:hover {
 transform: translateY(-2px);
 box-shadow: 0 16px 40px rgba(0, 35, 102, 0.22);
}
.homework-reminder__inner--pulse {
 animation: reminder-pulse .6s ease;
}
@keyframes reminder-pulse {
 0%, 100% { transform: scale(1); }
 50% { transform: scale(1.02); }
}
.homework-reminder__bell {
 float: right;
 width: 44px;
 height: 44px;
 border-radius: 50%;
 background: var(--royal-blue);
 color: var(--gold-solid);
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 1.2rem;
 animation: bell-ring 2s ease-in-out infinite;
}
@keyframes bell-ring {
 0%, 100% { transform: rotate(0); }
 10%, 30% { transform: rotate(12deg); }
 20%, 40% { transform: rotate(-12deg); }
 50% { transform: rotate(0); }
}
.homework-reminder__week {
 display: inline-block;
 padding: 4px 12px;
 border-radius: 999px;
 background: var(--royal-blue);
 color: #fff;
 font-size: .72rem;
 font-weight: 800;
 letter-spacing: .04em;
 margin-bottom: 10px;
}
.homework-reminder__title {
 display: block;
 font-size: 1.25rem;
 font-weight: 700;
 margin: 8px 0;
 line-height: 1.35;
 clear: both;
}
.homework-reminder__brief,
.homework-reminder__brief-vi {
 font-size: 1.02rem;
 line-height: 1.65;
 margin: 0 0 8px;
}
.homework-reminder__brief-vi {
 font-style: italic;
 color: #234b8b;
}
.homework-reminder__deadline {
 margin: 14px 0 0;
 font-size: clamp(1.35rem, 4vw, 1.75rem);
 font-weight: 900;
 color: #c62828;
 line-height: 1.25;
 letter-spacing: .02em;
 text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
}
.homework-reminder__meta {
 display: flex;
 flex-wrap: wrap;
 gap: 12px;
 font-size: .82rem;
 font-weight: 700;
 color: #35508e;
 margin-top: 10px;
}
.homework-reminder__cta {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 margin-top: 14px;
 padding: 10px 16px;
 border-radius: 999px;
 background: var(--royal-blue);
 color: #fff;
 font-size: .82rem;
 font-weight: 800;
}

/* ── Student teacher feedback panel ── */
.student-feedback-notify {
 display: flex;
 align-items: center;
 gap: .65rem;
 margin: 0 0 1rem;
 padding: .85rem 1rem;
 border-radius: 12px;
 background: linear-gradient(135deg, #fff8e8 0%, #fff3f3 100%);
 border: 1px solid #f0c878;
 color: #5c3d00;
 font-size: .92rem;
}
.student-feedback-notify[hidden] { display: none !important; }
.student-feedback-notify .fa-bell { color: #c77a00; font-size: 1.1rem; }
.student-feedback-title-badge {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-width: 1.35rem;
 height: 1.35rem;
 padding: 0 .35rem;
 margin-left: .35rem;
 border-radius: 999px;
 background: #d32f2f;
 color: #fff;
 font-size: .72rem;
 font-weight: 800;
 vertical-align: middle;
}
.student-feedback-title-badge[hidden] { display: none !important; }
.student-feedback-notify:not([hidden]) {
 animation: student-feedback-notify-pulse 2.4s ease-in-out infinite;
}
@keyframes student-feedback-notify-pulse {
 0%, 100% { box-shadow: 0 0 0 0 rgba(199, 122, 0, 0); }
 50% { box-shadow: 0 0 0 6px rgba(199, 122, 0, 0.12); }
}
.student-feedback-entry-toast {
 background: #1a237e;
 color: #fff;
 border: 1px solid rgba(255,255,255,.15);
 box-shadow: 0 8px 28px rgba(26,35,126,.35);
}
.student-feedback-entry-toast .fa-comment-dots { margin-right: .5rem; }
.student-feedback-example {
 margin-top: 1rem;
 text-align: left;
}
.student-feedback-example summary {
 cursor: pointer;
 color: #2e3192;
 font-weight: 600;
 font-size: .88rem;
}
.student-feedback-card--example {
 margin-top: .75rem;
 opacity: .92;
 border-style: dashed;
}
.student-feedback-panel {
 margin: 0 0 28px;
 padding: 22px 24px;
 border-radius: 18px;
 background: linear-gradient(135deg, #f0f4ff 0%, #e8eefc 100%);
 border: 2px solid rgba(46, 49, 146, 0.22);
 box-shadow: 0 10px 28px rgba(46, 49, 146, 0.08);
}
.student-feedback-panel__head {
 display: flex;
 flex-wrap: wrap;
 align-items: flex-start;
 justify-content: space-between;
 gap: 14px;
 margin-bottom: 12px;
}
.student-feedback-panel__head h3 {
 margin: 0 0 6px;
 font-size: 1.2rem;
 color: var(--royal-blue);
}
.student-feedback-panel__lead {
 margin: 0;
 font-size: .92rem;
 font-weight: 700;
 color: #1a2570;
}
.student-feedback-panel__hint {
 margin: 6px 0 0;
 font-size: .82rem;
 line-height: 1.5;
 color: #4a5688;
 max-width: 640px;
}
.student-feedback-refresh {
 white-space: nowrap;
 font-size: .82rem;
}
.student-feedback-status {
 min-height: 1.2em;
 margin: 0 0 12px;
 font-size: .78rem;
 font-weight: 700;
 color: #157a40;
}

/* ── Student ↔ Teacher private messaging ── */
.student-messages-panel {
 margin: 0 0 28px;
 padding: 22px 24px;
 border-radius: 18px;
 background: linear-gradient(135deg, #e8f5e9 0%, #f1f8e9 100%);
 border: 2px solid rgba(46, 125, 50, 0.22);
 box-shadow: 0 10px 28px rgba(46, 125, 50, 0.08);
}
.student-messages-panel__head {
 display: flex;
 flex-wrap: wrap;
 align-items: flex-start;
 justify-content: space-between;
 gap: 14px;
 margin-bottom: 14px;
}
.student-messages-panel__head h3 {
 margin: 0 0 6px;
 font-size: 1.2rem;
 color: #1b5e20;
}
.student-messages-badge {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-width: 22px;
 height: 22px;
 padding: 0 7px;
 margin-left: 6px;
 border-radius: 999px;
 background: #d32f2f;
 color: #fff;
 font-size: .72rem;
 font-weight: 800;
 vertical-align: middle;
}
.student-messages-badge[hidden] { display: none !important; }
.student-messages-panel__lead {
 margin: 0;
 font-size: .92rem;
 font-weight: 700;
 color: #1b5e20;
}
.student-messages-panel__hint {
 margin: 6px 0 0;
 font-size: .82rem;
 line-height: 1.5;
 color: #4a6848;
 max-width: 640px;
}
.student-messages-thread {
 max-height: 340px;
 min-height: 120px;
 overflow-y: auto;
 padding: 14px 12px;
 margin-bottom: 14px;
 border-radius: 14px;
 background: #fff;
 border: 1px solid rgba(46, 125, 50, 0.15);
 display: flex;
 flex-direction: column;
 gap: 10px;
}
.student-messages-compose {
 display: flex;
 flex-wrap: wrap;
 gap: 10px;
 align-items: flex-end;
}
.student-messages-compose textarea {
 flex: 1 1 220px;
 min-height: 56px;
 padding: 12px 14px;
 border-radius: 14px;
 border: 2px solid rgba(46, 125, 50, 0.25);
 font-family: inherit;
 font-size: .92rem;
 resize: vertical;
}
.student-messages-send {
 white-space: nowrap;
}
.student-messages-status {
 min-height: 1.2em;
 margin: 10px 0 0;
 font-size: .78rem;
 font-weight: 700;
 color: #157a40;
}
.ama-msg-empty {
 margin: 0;
 padding: 20px 10px;
 text-align: center;
 font-size: .88rem;
 color: #5c6680;
 line-height: 1.55;
}
.ama-msg-bubble-row {
 display: flex;
}
.ama-msg-bubble-row--mine { justify-content: flex-end; }
.ama-msg-bubble-row--theirs { justify-content: flex-start; }
.ama-msg-bubble {
 max-width: min(88%, 340px);
 padding: 8px 12px 6px;
 border-radius: 18px;
 box-shadow: none;
 font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
}
.ama-msg-bubble--mine:not(.ama-msg-bubble--colored) {
 background: #0084ff;
 color: #fff;
 border-bottom-right-radius: 4px;
}
.ama-msg-bubble--theirs:not(.ama-msg-bubble--colored) {
 background: #e4e6eb;
 color: #050505;
 border-bottom-left-radius: 4px;
}
.ama-msg-bubble--teacher:not(.ama-msg-bubble--colored) {
 background: #fff;
 border: 1px solid #d0d4dc;
 border-left: 3px solid #c9a962;
}
.ama-msg-bubble--mine:not(.ama-msg-bubble--colored) .ama-msg-bubble__who { color: rgba(255, 255, 255, 0.92); }
.ama-msg-bubble--mine:not(.ama-msg-bubble--colored) .ama-msg-bubble__text { color: #fff; }
.ama-msg-bubble--mine:not(.ama-msg-bubble--colored) .ama-msg-bubble__time { color: rgba(255, 255, 255, 0.75); }
.ama-msg-bubble--mine:not(.ama-msg-bubble--colored) .ama-msg-react-toggle { color: rgba(255, 255, 255, 0.8); }
.ama-msg-bubble__text {
 margin: 0;
 font-size: .92rem;
 line-height: 1.45;
 white-space: pre-wrap;
 word-break: break-word;
}
.ama-msg-bubble__time {
 display: block;
 margin-top: 4px;
 font-size: .68rem;
 opacity: .75;
}
.ama-msg-bubble--mine .ama-msg-bubble__time { text-align: right; }
.ama-msg-bubble__who {
 margin: 0 0 6px;
 font-size: .72rem;
 font-weight: 800;
 opacity: .88;
 line-height: 1.3;
}
.ama-msg-bubble__media { display: block; margin: 6px 0 4px; }
.ama-msg-bubble__media--img {
 overflow: hidden;
 border-radius: 12px;
 background: #000;
 min-height: 80px;
}
.ama-msg-bubble__media--img img {
 max-width: 100%;
 max-height: 280px;
 width: 100%;
 height: auto;
 border-radius: 12px;
 display: block;
 object-fit: cover;
}
.ama-msg-bubble__media--img.is-broken {
 min-height: 72px;
 display: flex;
 align-items: center;
 justify-content: center;
 background: #eef0f3;
 color: #65676b;
 font-size: .78rem;
 padding: 12px;
}
.ama-msg-bubble__media--audio audio,
.ama-msg-bubble__media--video video {
 width: 100%;
 max-width: 100%;
 min-height: 48px;
 border-radius: 10px;
 display: block;
 background: #000;
}
.ama-msg-bubble__media--video video {
 min-height: 160px;
 max-height: 240px;
}
.ama-msg-bubble__media--file {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 padding: 10px 12px;
 border-radius: 10px;
 background: rgba(0, 0, 0, 0.08);
 color: inherit;
 text-decoration: none;
 font-weight: 700;
 font-size: .82rem;
}
.ama-msg-bubble--mine .ama-msg-bubble__media--file { background: rgba(255, 255, 255, 0.15); }
.ama-msg-bubble__media-missing {
 margin: 0 0 6px;
 font-size: .78rem;
 opacity: .85;
}

.group-chat {
 display: flex;
 flex-direction: column;
 min-height: min(72vh, 720px);
 background: #fff;
 border-radius: var(--radius-lg);
 border: 1px solid rgba(26, 37, 112, 0.12);
 box-shadow: 0 8px 28px rgba(14, 30, 78, 0.08);
 overflow: hidden;
}

/* Left-side full-height chat dock (slides in - never replaces the whole app) */
.chat-dock,
.chat-dock-scrim {
 display: none;
}
body.chat-dock-open .chat-dock {
 display: flex;
}
body.chat-dock-open .chat-dock-scrim {
 display: block;
}
body.chat-dock-open .ama-chat-fab {
 display: none !important;
}
body.chat-dock-open {
 overflow-x: hidden;
}

.chat-dock-scrim {
 position: fixed;
 inset: 0;
 background: rgba(0, 20, 60, 0.35);
 z-index: 680;
}
.chat-dock {
 position: fixed;
 left: 0;
 top: 0;
 bottom: 0;
 width: min(440px, 100vw);
 height: 100dvh;
 max-height: 100dvh;
 flex-direction: column;
 z-index: 690;
 padding: 0;
 background: #0084ff;
 border-right: 1px solid #0064c8;
 box-shadow: 4px 0 24px rgba(0, 0, 0, 0.08);
 font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
}
@media (min-width: 961px) {
 body.chat-dock-open #app-main,
 body.chat-dock-open .site-header,
 body.chat-dock-open .site-foot {
 margin-left: min(440px, 100vw);
 }
 body.chat-dock-open .chat-dock-scrim {
 display: none;
 }
}
@media (max-width: 960px) {
 body.chat-dock-open .chat-dock {
 width: 100vw;
 }
}
.chat-dock .messenger {
 flex: 1;
 min-height: 0;
 display: flex;
 flex-direction: column;
 margin: 0;
 border-radius: 0;
 border: none;
 background: #0084ff;
 box-shadow: none;
 overflow: hidden;
}
.messenger-head {
 display: flex;
 align-items: center;
 gap: 10px;
 padding: 10px 12px;
 background: #0084ff;
 color: #fff;
 flex-shrink: 0;
}
.messenger-head__close {
 width: 36px;
 height: 36px;
 border: none;
 border-radius: 50%;
 background: rgba(255, 255, 255, 0.15);
 color: #fff;
 cursor: pointer;
 font-size: 1rem;
 flex-shrink: 0;
}
.messenger-head__close:hover { background: rgba(255, 255, 255, 0.28); }
.messenger-head__avatar {
 width: 44px;
 height: 44px;
 border-radius: 50%;
 background: rgba(255, 255, 255, 0.18);
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 1.2rem;
 flex-shrink: 0;
}
.messenger-head__info { flex: 1; min-width: 0; }
.messenger-head h3 {
 margin: 0 0 2px;
 font-size: .95rem;
 font-weight: 700;
 font-family: inherit;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}
.messenger-head .group-chat-ver {
 background: rgba(255, 255, 255, 0.2);
 font-size: .58rem;
 font-weight: 700;
}
.messenger-head p {
 margin: 0;
 font-size: .72rem;
 opacity: .9;
 line-height: 1.3;
}
.messenger-head__refresh {
 width: 36px;
 height: 36px;
 border: none;
 border-radius: 50%;
 background: rgba(255, 255, 255, 0.15);
 color: #fff;
 cursor: pointer;
 font-size: .95rem;
 flex-shrink: 0;
}
.messenger-head__refresh:hover { background: rgba(255, 255, 255, 0.28); }
.messenger-head__share {
 width: 36px;
 height: 36px;
 border: none;
 border-radius: 50%;
 background: rgba(255, 255, 255, 0.15);
 color: #fff;
 cursor: pointer;
 font-size: .9rem;
 flex-shrink: 0;
}
.messenger-head__share:hover { background: rgba(255, 255, 255, 0.28); }
.group-chat-cloud-banner,
#group-chat-cloud-banner,
.messenger-head__share,
#group-chat-share-link {
 display: none !important;
 visibility: hidden !important;
 height: 0 !important;
 margin: 0 !important;
 padding: 0 !important;
 overflow: hidden !important;
 pointer-events: none !important;
}
.ama-msg-receipt {
 display: inline-flex;
 align-items: center;
 margin-left: 4px;
 font-size: .72rem;
 line-height: 1;
 opacity: .75;
}
.ama-msg-receipt--read { color: #53bdeb; opacity: 1; }
.ama-msg-receipt--delivered { opacity: .9; }
.ama-msg-receipt--sent { opacity: .65; }
.ama-msg-receipt--pending { opacity: .45; }
.messenger-feed {
 flex: 1;
 min-height: 0;
 max-height: none;
 overflow-y: auto;
 overflow-x: hidden;
 padding: 12px 10px;
 background: #0084ff;
 background: linear-gradient(180deg, #0064d8 0%, #0084ff 40%, #0099ff 100%);
 overscroll-behavior: contain;
 -webkit-overflow-scrolling: touch;
}
.messenger-compose {
 flex-shrink: 0;
 background: #0064c8;
 border-top: 2px solid #004a94;
 padding: 10px 12px 12px;
 box-shadow: 0 -4px 16px rgba(0, 50, 120, 0.2);
}
.messenger-compose__hint {
 margin: 0 0 8px;
 font-size: .8rem;
 font-weight: 700;
 color: #fff;
 font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
}
.messenger-compose__hint i { margin-right: 6px; opacity: .9; }
.messenger-compose__send {
 background: #fff;
 color: #0084ff;
 box-shadow: none;
 width: auto;
 min-width: 52px;
 height: 48px;
 padding: 0 14px;
 border-radius: 24px;
 display: inline-flex;
 align-items: center;
 gap: 6px;
 font-size: .82rem;
 font-weight: 800;
 font-family: system-ui, sans-serif;
}
.messenger-compose__send span { display: inline; }
.messenger-compose__send i { font-size: .9rem; }
.messenger-compose__send:hover { background: #e8f4ff; }
.messenger-attach-sheet[hidden],
.messenger-emoji-panel[hidden] {
 display: none !important;
}
.messenger-attach-sheet:not([hidden]) {
 display: grid;
 grid-template-columns: repeat(4, minmax(0, 1fr));
 gap: 8px;
 margin-top: 10px;
 padding: 10px;
 background: rgba(255, 255, 255, 0.95);
 border-radius: 14px;
 box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
}
.messenger-emoji-panel:not([hidden]) {
 display: flex;
 flex-wrap: wrap;
 gap: 4px;
 max-height: 120px;
 overflow-y: auto;
 margin-top: 8px;
 padding: 8px;
 background: rgba(255, 255, 255, 0.95);
 border-radius: 14px;
}
.messenger-attach-opt {
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 4px;
 min-height: 56px;
 padding: 8px 4px;
 border: none;
 border-radius: 10px;
 background: #eef4fc;
 color: #1a2570;
 font-size: .65rem;
 font-weight: 700;
 cursor: pointer;
 font-family: system-ui, sans-serif;
}
.messenger-attach-opt i { font-size: 1.1rem; }
.messenger-attach-opt:hover { background: #dce8f8; }
.messenger-attach-opt.is-recording {
 background: #ffe8e8;
 color: #b71c1c;
}
.messenger-compose__bar {
 display: flex;
 align-items: flex-end;
 gap: 8px;
}
.messenger-compose__icon {
 width: 44px;
 height: 48px;
 flex-shrink: 0;
 border: none;
 border-radius: 50%;
 background: rgba(255, 255, 255, 0.2);
 color: #fff;
 font-size: 1.1rem;
 cursor: pointer;
}
.messenger-compose__icon:hover { background: rgba(255, 255, 255, 0.35); }
.messenger-compose__bar textarea {
 flex: 1;
 min-height: 48px;
 max-height: 120px;
 padding: 12px 16px;
 border: 2px solid #fff;
 border-radius: 24px;
 background: #fff;
 font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
 font-size: 1rem;
 resize: none;
 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.messenger-compose__bar textarea::placeholder { color: #8a8d91; }
.messenger-compose__bar textarea:focus {
 outline: none;
 border-color: #fff;
 box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.45);
}
.messenger-online {
 padding: 8px 12px;
 background: rgba(0, 80, 160, 0.4);
 border-bottom: 1px solid rgba(255, 255, 255, 0.12);
 flex-shrink: 0;
 min-height: 48px;
 max-height: 56px;
 overflow: hidden;
}
.messenger-online__empty { color: rgba(255, 255, 255, 0.92); }
.messenger-typing {
 background: rgba(255, 255, 255, 0.92);
 color: #0064c8;
 flex-shrink: 0;
 min-height: 34px;
}
.messenger-typing__dots i { background: #0064c8; }
.group-chat-profile {
 padding: 8px 10px;
 background: rgba(0, 80, 160, 0.45);
 border-bottom: 1px solid rgba(255, 255, 255, 0.12);
 flex-shrink: 0;
}
.group-chat-profile .student-profile-bar__label { color: #fff; }
.messenger-emoji-pick {
 width: 36px;
 height: 36px;
 border: none;
 border-radius: 8px;
 background: transparent;
 font-size: 1.25rem;
 cursor: pointer;
}
.messenger-emoji-pick:hover { background: #eef2f8; }
.chat-dock .messenger {
 background: #0084ff;
}
.ama-msg-bubble--colored {
 box-shadow: 0 1px 4px rgba(0, 0, 0, 0.14);
}
.ama-msg-bubble--colored .ama-msg-bubble__who { color: inherit; opacity: 0.85; font-weight: 800; }
.ama-msg-bubble--colored .ama-msg-bubble__text,
.ama-msg-bubble--colored .ama-msg-bubble__time,
.ama-msg-bubble--colored .ama-msg-react-toggle {
 color: inherit;
}
.ama-msg-bubble--colored .ama-msg-bubble__time { opacity: 0.75; }
.group-chat-day span {
 background: rgba(255, 255, 255, 0.95);
 color: #0084ff;
 font-weight: 800;
}
#group-chat-feed .ama-msg-empty {
 color: #fff;
 text-shadow: 0 1px 3px rgba(0, 40, 100, 0.4);
}
.ama-msg-bubble-wrap {
 position: relative;
 max-width: min(85%, 420px);
}
.ama-msg-bubble__foot {
 display: flex;
 align-items: center;
 justify-content: flex-end;
 gap: 6px;
 margin-top: 2px;
}
.ama-msg-react-toggle {
 border: none;
 background: transparent;
 color: inherit;
 opacity: .65;
 cursor: pointer;
 padding: 0 2px;
 font-size: .85rem;
}
.ama-msg-react-toggle:hover { opacity: 1; }
.ama-msg-react-bar {
 display: none;
 position: absolute;
 top: -38px;
 left: 0;
 z-index: 3;
 gap: 2px;
 padding: 4px 6px;
 border-radius: 999px;
 background: #fff;
 box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}
.ama-msg-bubble-row--mine .ama-msg-react-bar { left: auto; right: 0; }
.ama-msg-react-bar--open { display: flex; }
.ama-msg-react-pick {
 width: 32px;
 height: 32px;
 border: none;
 border-radius: 50%;
 background: transparent;
 font-size: 1.15rem;
 cursor: pointer;
}
.ama-msg-react-pick:hover { background: #f0f2f5; transform: scale(1.15); }
.ama-msg-reactions {
 display: flex;
 flex-wrap: wrap;
 gap: 4px;
 margin-top: 4px;
}
.ama-msg-reaction {
 display: inline-flex;
 align-items: center;
 gap: 3px;
 padding: 2px 8px;
 border-radius: 999px;
 border: 1px solid rgba(0, 0, 0, 0.08);
 background: #fff;
 font-size: .85rem;
 cursor: pointer;
 box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}
.ama-msg-reaction--mine {
 border-color: #128c7e;
 background: #e7f8f0;
}
.ama-msg-reaction__count {
 font-size: .68rem;
 font-weight: 800;
 color: #54656f;
}
.ama-msg-empty i {
 display: block;
 font-size: 2rem;
 margin-bottom: 10px;
 opacity: .45;
}
.group-chat-profile {
 padding: 8px 10px 0;
 flex-shrink: 0;
}
.group-chat-profile .student-profile-bar__inner {
 flex-wrap: wrap;
 gap: 6px;
}
.group-chat-status {
 min-height: 1.2em;
 margin: 0;
 padding: 4px 12px 8px;
 font-size: .74rem;
 flex-shrink: 0;
}
@media (max-width: 640px) {
 .messenger-attach-sheet { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Top bar Chat button - always visible, clear */
.topbar-chat-btn {
 position: relative;
 display: inline-flex;
 align-items: center;
 gap: 6px;
 padding: 8px 14px;
 border: none;
 border-radius: 999px;
 background: #0084ff;
 color: #fff;
 font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
 font-size: .82rem;
 font-weight: 700;
 cursor: pointer;
 box-shadow: 0 2px 8px rgba(0, 132, 255, 0.35);
}
.topbar-chat-btn:hover { background: #0073e6; }
.topbar-chat-btn i { font-size: 1rem; }
.topbar-chat-btn__badge {
 position: absolute;
 top: -4px;
 right: -4px;
 min-width: 18px;
 height: 18px;
 padding: 0 5px;
 border-radius: 999px;
 background: #e41e3f;
 color: #fff;
 font-size: .62rem;
 font-weight: 800;
 line-height: 18px;
 text-align: center;
 border: 2px solid #002366;
}
.topbar-chat-btn__badge[hidden] { display: none !important; }
body.chat-dock-open .topbar-chat-btn {
 background: #0064c8;
 box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35);
}

/* Floating Chat shortcut - top-right, clear */
.ama-chat-fab {
 position: fixed;
 right: 16px;
 top: calc(72px + env(safe-area-inset-top, 0px));
 bottom: auto;
 z-index: 540;
 display: inline-flex;
 flex-direction: column;
 align-items: center;
 gap: 4px;
 padding: 10px 12px;
 border: none;
 border-radius: 14px;
 background: #0084ff;
 color: #fff;
 font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
 font-size: .72rem;
 font-weight: 700;
 cursor: pointer;
 box-shadow: 0 4px 16px rgba(0, 132, 255, 0.4);
 transition: transform .15s ease;
}
.ama-chat-fab:hover { transform: translateY(-1px); background: #0073e6; }
.ama-chat-fab--hidden { display: none !important; }
.ama-chat-fab--pulse { animation: chat-fab-pulse 2s ease infinite; }
@keyframes chat-fab-pulse {
 0%, 100% { box-shadow: 0 4px 16px rgba(0, 132, 255, 0.4); }
 50% { box-shadow: 0 4px 22px rgba(0, 132, 255, 0.65); }
}
.ama-chat-fab__icon {
 width: 32px;
 height: 32px;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 1.15rem;
}
.ama-chat-fab__badge {
 position: absolute;
 top: -4px;
 right: -4px;
 min-width: 18px;
 height: 18px;
 padding: 0 5px;
 border-radius: 999px;
 background: #e41e3f;
 color: #fff;
 font-size: .62rem;
 font-weight: 800;
 line-height: 18px;
 text-align: center;
 border: 2px solid #fff;
}
.ama-chat-fab__badge[hidden] { display: none !important; }
.ama-chat-fab__live {
 position: absolute;
 top: 8px;
 left: 38px;
 width: 12px;
 height: 12px;
 border-radius: 50%;
 background: #25d366;
 border: 2px solid #fff;
 box-shadow: 0 0 0 2px rgba(37, 211, 102, 0.35);
}
.ama-chat-fab__live[hidden] { display: none !important; }

.messenger-online {
 padding: 8px 12px;
 background: linear-gradient(90deg, #ede9fe, #fce7f3);
 border-bottom: 1px solid rgba(124, 58, 237, 0.12);
 flex-shrink: 0;
}
.messenger-online__list {
 display: flex;
 flex-wrap: nowrap;
 gap: 10px;
 overflow-x: auto;
 padding-bottom: 2px;
}
.messenger-online__empty {
 font-size: .74rem;
 color: #667781;
 white-space: nowrap;
}
.messenger-online__user {
 position: relative;
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 3px;
 min-width: 52px;
 flex-shrink: 0;
}
.messenger-online__avatar {
 width: 40px;
 height: 40px;
 border-radius: 50%;
 background: linear-gradient(135deg, #128c7e, #075e54);
 color: #fff;
 font-size: .72rem;
 font-weight: 800;
 display: flex;
 align-items: center;
 justify-content: center;
}
.messenger-online__user--in-chat .messenger-online__avatar {
 box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.45);
}
.messenger-online__dot {
 position: absolute;
 top: 0;
 right: 4px;
 width: 11px;
 height: 11px;
 border-radius: 50%;
 background: #25d366;
 border: 2px solid #f0f2f5;
}
.messenger-online__user--in-chat .messenger-online__dot {
 background: #25d366;
 animation: online-pulse 1.8s ease infinite;
}
@keyframes online-pulse {
 0%, 100% { transform: scale(1); opacity: 1; }
 50% { transform: scale(1.15); opacity: .85; }
}
.messenger-online__name {
 font-size: .62rem;
 font-weight: 700;
 color: #54656f;
 max-width: 56px;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}

.messenger-typing {
 display: flex;
 align-items: center;
 gap: 8px;
 padding: 6px 14px 2px;
 background: #faf5ff;
 font-size: .78rem;
 font-weight: 700;
 color: #9333ea;
 flex-shrink: 0;
}
.messenger-typing[hidden] { display: none !important; }
.messenger-typing__dots {
 display: inline-flex;
 gap: 3px;
 align-items: center;
}
.messenger-typing__dots i {
 display: block;
 width: 6px;
 height: 6px;
 border-radius: 50%;
 background: #128c7e;
 animation: typing-dot 1.2s ease infinite;
}
.messenger-typing__dots i:nth-child(2) { animation-delay: .15s; }
.messenger-typing__dots i:nth-child(3) { animation-delay: .3s; }
@keyframes typing-dot {
 0%, 60%, 100% { transform: translateY(0); opacity: .45; }
 30% { transform: translateY(-4px); opacity: 1; }
}

.ama-msg-reaction {
 transition: transform .12s ease;
}
.ama-msg-reaction:active { transform: scale(1.2); }
.ama-msg-react-pick:active { transform: scale(1.25); }

@media (max-width: 640px) {
 .ama-chat-fab {
 right: 10px;
 top: calc(64px + env(safe-area-inset-top, 0px));
 padding: 8px 10px;
 }
 .topbar-chat-btn span:not(.topbar-chat-btn__badge) { display: none; }
 .topbar-chat-btn { padding: 8px 10px; }
}
.group-chat-profile { padding: 12px 14px 0; }
.group-chat-profile__bar { margin-bottom: 0; }
.group-chat-head {
 display: flex;
 flex-wrap: wrap;
 align-items: flex-start;
 justify-content: space-between;
 gap: 10px;
 padding: 14px 16px;
 border-bottom: 1px solid rgba(26, 37, 112, 0.1);
 background: linear-gradient(180deg, #f7f9ff, #fff);
}
.group-chat-head h3 {
 margin: 0 0 4px;
 font-size: 1.05rem;
 color: #1a2570;
}
.group-chat-ver {
 display: inline-block;
 margin-left: 6px;
 padding: 2px 8px;
 border-radius: 999px;
 background: #157a40;
 color: #fff;
 font-size: .62rem;
 font-weight: 800;
 vertical-align: middle;
}
.group-chat-head p {
 margin: 0;
 font-size: .82rem;
 color: #5c6680;
 line-height: 1.45;
}
.group-chat-feed {
 flex: 1;
 min-height: 280px;
 max-height: min(52vh, 520px);
 overflow-y: auto;
 padding: 16px;
 background: linear-gradient(180deg, #eef2f8 0%, #f8fafc 100%);
}
.group-chat-day {
 display: flex;
 justify-content: center;
 margin: 12px 0;
}
.group-chat-day span {
 padding: 4px 12px;
 border-radius: 999px;
 background: rgba(255, 255, 255, 0.85);
 border: 1px solid rgba(0, 0, 0, 0.06);
 font-size: .72rem;
 font-weight: 700;
 color: #5c6680;
}
.group-chat-compose {
 padding: 12px 14px 14px;
 border-top: 1px solid rgba(26, 37, 112, 0.1);
 background: #fff;
}
.group-chat-attach {
 display: grid;
 grid-template-columns: repeat(4, minmax(0, 1fr));
 gap: 8px;
 margin-bottom: 10px;
}
.group-chat-attach-btn {
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 gap: 4px;
 min-height: 52px;
 padding: 8px 4px;
 border-radius: 12px;
 border: 2px solid rgba(26, 37, 112, 0.14);
 background: #f4f7fc;
 color: #1a2570;
 font-size: .68rem;
 font-weight: 800;
 cursor: pointer;
 font-family: var(--font);
}
.group-chat-attach-btn i { font-size: 1.1rem; }
.group-chat-attach-btn:hover { background: #e8eef9; border-color: #274ea8; }
.group-chat-attach-btn.is-recording {
 background: #ffe8e8;
 border-color: #d32f2f;
 color: #b71c1c;
 animation: chat-rec-pulse 1s ease infinite;
}
@keyframes chat-rec-pulse {
 0%, 100% { opacity: 1; }
 50% { opacity: .75; }
}
.group-chat-compose__row {
 display: grid;
 grid-template-columns: 1fr auto;
 gap: 10px;
 align-items: end;
}
.group-chat-compose__row textarea {
 width: 100%;
 min-height: 52px;
 padding: 12px 14px;
 border-radius: 14px;
 border: 2px solid rgba(26, 37, 112, 0.16);
 font-family: var(--font);
 font-size: .92rem;
 resize: vertical;
}
.group-chat-send {
 min-height: 52px;
 min-width: 88px;
 white-space: nowrap;
}
.group-chat-status {
 min-height: 1.2em;
 margin: 8px 14px 12px;
 font-size: .78rem;
 font-weight: 700;
 color: #157a40;
}
.group-chat-status--error { color: #c62828; }
.group-chat-status--ok { color: #157a40; }
.group-chat-status--busy { color: #1f3f89; }
.group-chat-status--warn { color: #b36b00; }
@media (max-width: 640px) {
 .group-chat-compose__row { grid-template-columns: 1fr; }
 .group-chat-send { width: 100%; }
 .group-chat-attach { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.admin-tab-badge {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-width: 18px;
 height: 18px;
 padding: 0 5px;
 margin-left: 6px;
 border-radius: 999px;
 background: #ffd54f;
 color: #1a1a1a;
 font-size: .62rem;
 font-weight: 800;
}
.admin-tab-badge[hidden] { display: none !important; }
.admin-messages-intro {
 margin: 0 0 14px;
 font-size: .88rem;
 opacity: .9;
}
.admin-messages-layout {
 display: grid;
 grid-template-columns: minmax(220px, 280px) 1fr;
 gap: 16px;
 min-height: 420px;
}
@media (max-width: 860px) {
 .admin-messages-layout { grid-template-columns: 1fr; }
}
.admin-messages-sidebar {
 display: flex;
 flex-direction: column;
 gap: 8px;
 max-height: 520px;
 overflow-y: auto;
 padding: 8px;
 border-radius: 12px;
 background: rgba(255, 255, 255, 0.06);
 border: 1px solid rgba(255, 255, 255, 0.1);
}
.ama-msg-thread {
 display: flex;
 flex-direction: column;
 align-items: flex-start;
 gap: 2px;
 width: 100%;
 padding: 12px 14px;
 border: 1px solid rgba(255, 255, 255, 0.12);
 border-radius: 12px;
 background: rgba(255, 255, 255, 0.04);
 color: inherit;
 font-family: inherit;
 text-align: left;
 cursor: pointer;
 position: relative;
}
.ama-msg-thread:hover { background: rgba(255, 255, 255, 0.08); }
.ama-msg-thread--active {
 border-color: var(--ama-red);
 background: rgba(198, 40, 40, 0.15);
}
.ama-msg-thread__name {
 font-weight: 800;
 font-size: .9rem;
}
.ama-msg-thread__class {
 font-size: .72rem;
 opacity: .75;
}
.ama-msg-thread__preview {
 font-size: .78rem;
 opacity: .85;
 margin-top: 4px;
 line-height: 1.35;
}
.ama-msg-thread__unread {
 position: absolute;
 top: 10px;
 right: 10px;
 min-width: 20px;
 height: 20px;
 padding: 0 6px;
 border-radius: 999px;
 background: #ffd54f;
 color: #1a1a1a;
 font-size: .68rem;
 font-weight: 800;
 line-height: 20px;
 text-align: center;
}
.admin-messages-main {
 display: flex;
 flex-direction: column;
 min-height: 420px;
 border-radius: 12px;
 background: rgba(255, 255, 255, 0.04);
 border: 1px solid rgba(255, 255, 255, 0.1);
 overflow: hidden;
}
.admin-messages-chat {
 flex: 1;
 overflow-y: auto;
 padding: 16px;
 display: flex;
 flex-direction: column;
 gap: 10px;
 max-height: 380px;
}
.admin-messages-compose {
 display: flex;
 flex-wrap: wrap;
 gap: 10px;
 align-items: flex-end;
 padding: 12px 14px;
 border-top: 1px solid rgba(255, 255, 255, 0.1);
 background: rgba(0, 0, 0, 0.15);
}
.admin-messages-compose textarea {
 flex: 1 1 220px;
 min-height: 52px;
 padding: 10px 12px;
 border-radius: 10px;
 border: 1px solid rgba(255, 255, 255, 0.2);
 background: rgba(255, 255, 255, 0.08);
 color: inherit;
 font-family: inherit;
 font-size: .88rem;
 resize: vertical;
}
.admin-messages-empty {
 padding: 24px;
 text-align: center;
}
.ama-msg-bubble-row--admin .ama-msg-bubble--mine {
 background: linear-gradient(135deg, #c62828, #8e0000);
}
.nav-messages-dot {
 position: absolute;
 top: 4px;
 right: 4px;
 width: 10px;
 height: 10px;
 border-radius: 50%;
 background: #d32f2f;
 box-shadow: 0 2px 6px rgba(211, 47, 47, 0.45);
}
.nav-messages-dot[hidden] { display: none !important; }

.nav-messages-dot[hidden] { display: none !important; }

/* ── Dedicated Messages area ── */
.sub-hero-pro--messages {
 background: linear-gradient(135deg, #1b5e20 0%, #2e7d32 50%, #388e3c 100%);
}
.wrap--messages { padding-top: 8px; }
.messages-panel-head {
 display: flex;
 flex-wrap: wrap;
 align-items: flex-start;
 justify-content: space-between;
 gap: 14px;
 margin-bottom: 14px;
}
.messages-panel-head h3 {
 margin: 0 0 6px;
 font-size: 1.15rem;
 color: var(--royal-blue);
}
.messages-panel-head__lead {
 margin: 0;
 font-size: .9rem;
 font-weight: 700;
 color: #1a2570;
}
.messages-panel-head__hint {
 margin: 6px 0 0;
 font-size: .82rem;
 color: #4a5688;
}
.messages-profile-bar { margin-bottom: 16px; }
.messages-student-panel,
.messages-teacher-panel {
 padding: 20px;
 border-radius: 16px;
 background: #fff;
 border: 1px solid rgba(46, 49, 146, 0.12);
 box-shadow: 0 8px 24px rgba(46, 49, 146, 0.06);
}
.messages-layout {
 display: grid;
 grid-template-columns: minmax(220px, 280px) 1fr;
 gap: 16px;
 min-height: 420px;
}
@media (max-width: 860px) {
 .messages-layout { grid-template-columns: 1fr; }
}
.messages-sidebar {
 display: flex;
 flex-direction: column;
 gap: 8px;
 max-height: 480px;
 overflow-y: auto;
 padding: 8px;
 border-radius: 12px;
 background: #f4f7fc;
 border: 1px solid rgba(46, 49, 146, 0.1);
}
.messages-main {
 display: flex;
 flex-direction: column;
 min-height: 420px;
 border-radius: 12px;
 background: #fafbfd;
 border: 1px solid rgba(46, 49, 146, 0.1);
 overflow: hidden;
}
.messages-main-empty { padding: 24px; }
.messages-chat {
 flex: 1;
 overflow-y: auto;
 padding: 16px;
 display: flex;
 flex-direction: column;
 gap: 10px;
 min-height: 280px;
 max-height: 420px;
}
.messages-chat--student {
 background: #fff;
 border-radius: 14px;
 border: 1px solid rgba(46, 125, 50, 0.15);
 margin-bottom: 14px;
}
.messages-compose {
 display: flex;
 flex-wrap: wrap;
 gap: 10px;
 align-items: flex-end;
}
.messages-compose--teacher {
 padding: 12px 14px;
 border-top: 1px solid rgba(46, 49, 146, 0.1);
 background: #f0f4ff;
}
.messages-compose textarea {
 flex: 1 1 220px;
 min-height: 56px;
 padding: 12px 14px;
 border-radius: 14px;
 border: 2px solid rgba(46, 125, 50, 0.25);
 font-family: inherit;
 font-size: .92rem;
 resize: vertical;
}
.messages-compose--teacher textarea {
 border-color: rgba(46, 49, 146, 0.2);
}
.messages-send-btn { white-space: nowrap; }
.messages-status {
 min-height: 1.2em;
 margin: 10px 0 0;
 font-size: .78rem;
 font-weight: 700;
 color: #157a40;
}
.messages-nav-badge {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-width: 22px;
 height: 22px;
 padding: 0 7px;
 margin-left: 6px;
 border-radius: 999px;
 background: #d32f2f;
 color: #fff;
 font-size: .72rem;
 font-weight: 800;
 vertical-align: middle;
}
.messages-nav-badge[hidden] { display: none !important; }
.messages-nav-badge--teacher { background: #f57c00; }
.ama-msg-thread {
 display: flex;
 flex-direction: column;
 align-items: flex-start;
 gap: 2px;
 width: 100%;
 padding: 12px 14px;
 border: 1px solid rgba(46, 49, 146, 0.12);
 border-radius: 12px;
 background: #fff;
 color: inherit;
 font-family: inherit;
 text-align: left;
 cursor: pointer;
 position: relative;
}
.ama-msg-thread:hover { background: #eef2ff; }
.ama-msg-thread--active {
 border-color: var(--royal-blue);
 background: #e8eefc;
 box-shadow: 0 0 0 2px rgba(46, 49, 146, 0.15);
}
.ama-msg-thread__name { font-weight: 800; font-size: .9rem; color: #1a2570; }
.ama-msg-thread__class { font-size: .72rem; color: #5c6680; }
.ama-msg-thread__preview {
 font-size: .78rem;
 color: #4a5688;
 margin-top: 4px;
 line-height: 1.35;
}
.ama-msg-thread__unread {
 position: absolute;
 top: 10px;
 right: 10px;
 min-width: 20px;
 height: 20px;
 padding: 0 6px;
 border-radius: 999px;
 background: #d32f2f;
 color: #fff;
 font-size: .68rem;
 font-weight: 800;
 line-height: 20px;
 text-align: center;
}
.hub-messages-card { margin-bottom: 20px; }
.hub-messages-card--launch { margin-bottom: 24px; }
.hub-messages-card--launch .hub-messages-card__btn {
 border: 1px solid #dce0e8;
 background: #fff;
 color: #050505;
 box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
 padding: 18px 20px;
}
.hub-messages-card--launch .hub-messages-card__icon {
 width: 52px;
 height: 52px;
 border-radius: 14px;
 background: #0084ff;
 font-size: 1.35rem;
}
.hub-messages-card--launch .hub-messages-card__text strong {
 font-size: 1.1rem;
 font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
}
.hub-messages-card--launch .hub-messages-card__go {
 background: #0084ff;
 color: #fff;
 padding: 8px 14px;
 border-radius: 999px;
}
.hub-messages-card__btn {
 width: 100%;
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 gap: 14px;
 padding: 18px 20px;
 border: 2px solid rgba(46, 125, 50, 0.35);
 border-radius: 16px;
 background: linear-gradient(135deg, #e8f5e9, #f1f8e9);
 color: #1b5e20;
 font-family: inherit;
 text-align: left;
 cursor: pointer;
 box-shadow: 0 8px 22px rgba(46, 125, 50, 0.12);
}
.hub-messages-card__btn:hover { transform: translateY(-1px); }
.hub-messages-card__icon {
 width: 52px;
 height: 52px;
 border-radius: 14px;
 background: #2e7d32;
 color: #fff;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 1.35rem;
 flex-shrink: 0;
}
.hub-messages-card__text { flex: 1; min-width: 200px; }
.hub-messages-card__text strong { display: block; font-size: 1.05rem; margin-bottom: 4px; }
.hub-messages-card__text span { display: block; font-size: .85rem; line-height: 1.45; opacity: .92; }
.hub-messages-card__go {
 font-weight: 800;
 font-size: .88rem;
 white-space: nowrap;
}
.top-main-nav button[data-view="messages"],
.mobile-bottom-nav button[data-view="messages"],
.desktop-sidebar button[data-view="messages"],
.sidebar-nav button[data-view="messages"] {
 position: relative;
}
.nav-messages-count {
 position: absolute;
 top: 2px;
 right: 2px;
 min-width: 16px;
 height: 16px;
 padding: 0 4px;
 border-radius: 999px;
 background: #d32f2f;
 color: #fff;
 font-size: .58rem;
 font-weight: 800;
 line-height: 16px;
 text-align: center;
 pointer-events: none;
}
.nav-messages-count[hidden] { display: none !important; }

.student-feedback-list {
 display: flex;
 flex-direction: column;
 gap: 14px;
}
.student-feedback-section__title {
 margin: 0 0 10px;
 font-size: .92rem;
 color: #2e3192;
}
.student-feedback-section--muted .student-feedback-section__title {
 color: #5c6680;
}
.student-feedback-card {
 padding: 16px 18px;
 border-radius: 14px;
 background: #fff;
 border: 1px solid rgba(46, 49, 146, 0.14);
 box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
}
.student-feedback-card--new {
 border-color: #ffd54f;
 box-shadow: 0 0 0 2px rgba(255, 213, 79, 0.45);
}
.student-feedback-card--pending {
 background: #fafbfd;
 border-style: dashed;
}
.student-feedback-new-pill {
 display: inline-block;
 margin-bottom: 8px;
 padding: 3px 10px;
 border-radius: 999px;
 background: #ffd54f;
 color: #1a2570;
 font-size: .68rem;
 font-weight: 800;
 letter-spacing: .04em;
 text-transform: uppercase;
}
.student-feedback-card__title {
 margin: 0 0 4px;
 font-size: 1rem;
 line-height: 1.35;
 color: #10223f;
}
.student-feedback-card__meta {
 margin: 0;
 font-size: .78rem;
 color: #5c6680;
}
.student-feedback-overall {
 margin: 12px 0 8px;
 font-size: .92rem;
}
.student-feedback-grid {
 display: grid;
 grid-template-columns: repeat(2, minmax(0, 1fr));
 gap: 10px;
 margin: 12px 0;
}
@media (min-width: 640px) {
 .student-feedback-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.student-feedback-score {
 padding: 10px;
 border-radius: 10px;
 background: #f7f9ff;
 border: 1px solid #e2e8f5;
}
.student-feedback-score__label {
 display: block;
 margin-bottom: 6px;
 font-size: .68rem;
 font-weight: 800;
 text-transform: uppercase;
 letter-spacing: .03em;
 color: #5c6680;
}
.student-feedback-score__empty {
 font-size: .78rem;
 color: #9aa3b8;
 font-style: italic;
}
.student-feedback-badge {
 display: inline-flex;
 align-items: center;
 padding: 4px 10px;
 border-radius: 999px;
 font-size: .78rem;
 font-weight: 800;
 text-transform: capitalize;
}
.student-feedback-badge--excellent { background: #eaf8ef; color: #1d7f42; }
.student-feedback-badge--good { background: #eef4ff; color: #1f4f9c; }
.student-feedback-badge--fair { background: #fff8ea; color: #946200; }
.student-feedback-badge--need-improvement { background: #fff0f0; color: #a51d24; }
.student-feedback-comment {
 margin-top: 12px;
 padding: 12px 14px;
 border-radius: 10px;
 background: #fff8e1;
 border-left: 4px solid var(--gold-solid);
}
.student-feedback-comment strong {
 display: block;
 margin-bottom: 6px;
 font-size: .78rem;
 color: #7a5a00;
 text-transform: uppercase;
 letter-spacing: .03em;
}
.student-feedback-comment p {
 margin: 0;
 font-size: .95rem;
 line-height: 1.6;
 color: #3d3200;
 white-space: pre-wrap;
}
.student-feedback-pending-msg {
 margin: 10px 0 0;
 font-size: .88rem;
 color: #5c6680;
}
.student-feedback-empty {
 padding: 14px;
 border-radius: 12px;
 background: rgba(255, 255, 255, 0.65);
 font-size: .9rem;
 line-height: 1.55;
 color: #4a5688;
}
.student-feedback-more {
 margin: 0;
 font-size: .82rem;
 color: #5c6680;
}
.student-feedback-hub-banner {
 margin-bottom: 24px;
}
.student-feedback-hub-banner__inner {
 width: 100%;
 display: flex;
 align-items: center;
 gap: 14px;
 padding: 16px 20px;
 border: 2px solid #ffd54f;
 border-radius: 16px;
 background: linear-gradient(135deg, #fff8e1, #ffe082);
 color: #1a2570;
 font-family: inherit;
 font-size: .92rem;
 text-align: left;
 cursor: pointer;
 box-shadow: 0 8px 24px rgba(255, 193, 7, 0.2);
}
.student-feedback-hub-banner__inner:hover {
 transform: translateY(-1px);
}
.student-feedback-hub-banner__icon {
 width: 44px;
 height: 44px;
 border-radius: 50%;
 background: var(--royal-blue);
 color: #fff;
 display: flex;
 align-items: center;
 justify-content: center;
 flex-shrink: 0;
}
.nav-feedback-dot[hidden] {
 display: none !important;
}
.nav-feedback-dot {
 position: absolute;
 top: 4px;
 right: 4px;
 min-width: 18px;
 height: 18px;
 padding: 0 5px;
 border-radius: 999px;
 background: #d32f2f;
 color: #fff;
 font-size: .62rem;
 font-weight: 800;
 line-height: 18px;
 text-align: center;
 box-shadow: 0 2px 6px rgba(211, 47, 47, 0.45);
}
.top-main-nav button[data-view="homework"],
.mobile-bottom-nav button[data-view="homework"],
.desktop-sidebar button[data-view="homework"] {
 position: relative;
}

.admin-table-wrap {
 overflow-x: auto;
 -webkit-overflow-scrolling: touch;
 isolation: isolate;
}
.admin-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.admin-table th, .admin-table td { padding: 12px 10px; text-align: left; border-bottom: 1px solid rgba(255,255,255,.1); }
.admin-table th { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; opacity: .75; }
.admin-actions {
 min-width: 0;
 display: flex;
 flex-direction: column;
 gap: 10px;
 align-items: stretch;
}
.admin-text-preview { max-width: 320px; opacity: .95; }
.admin-inline-audio {
 margin-top: 8px;
 min-width: 0;
 max-width: 100%;
}
.admin-audio-label {
 margin: 0 0 8px;
 font-size: .84rem;
 font-weight: 800;
 color: #ffd54f;
}
.admin-audio-label--idle {
 color: rgba(255, 255, 255, 0.92);
 font-weight: 700;
}
.admin-audio-actions {
 display: grid;
 grid-template-columns: repeat(2, minmax(0, 1fr));
 gap: 8px;
 width: 100%;
}
.admin-btn-listen-audio,
.admin-btn-download-track {
 width: 100%;
 max-width: 100%;
 justify-content: center;
 min-height: 44px;
 position: relative;
 z-index: 1;
}
.admin-row-actions {
 display: grid;
 grid-template-columns: repeat(2, minmax(0, 1fr));
 gap: 8px;
 align-items: stretch;
 width: 100%;
}
.admin-row-actions .admin-badge {
 grid-column: 1 / -1;
 justify-self: start;
 position: relative;
 z-index: 1;
}
.admin-row-actions .admin-btn-sm {
 width: 100%;
 position: relative;
 z-index: 1;
 white-space: nowrap;
}
.admin-action-toast--ok {
 background: linear-gradient(135deg, #157a40, #1b9a52);
}
.admin-action-toast--error {
 background: linear-gradient(135deg, #8b1a1a, #b91c1c);
}
.admin-action-toast--info {
 background: linear-gradient(135deg, #1f3f89, #274ea8);
}

.admin-submission-notify-bar,
.admin-feedback-success-bar {
 position: fixed;
 left: 12px;
 right: 12px;
 bottom: calc(16px + env(safe-area-inset-bottom, 0px));
 z-index: 10002;
 animation: fadeUp 0.35s ease;
}
.admin-submission-notify-bar__btn,
.admin-feedback-success-bar__btn {
 display: flex;
 align-items: center;
 gap: 12px;
 width: 100%;
 padding: 18px 16px;
 border: none;
 border-radius: 16px;
 font-size: 0.92rem;
 line-height: 1.45;
 text-align: left;
 cursor: pointer;
 box-shadow: 0 14px 40px rgba(15, 32, 68, 0.35);
}
.admin-submission-notify-bar__btn {
 background: linear-gradient(135deg, #1f3f89, #274ea8);
 color: #fff;
 border: 3px solid rgba(212, 175, 55, 0.55);
}
.admin-submission-notify-bar__btn i:last-child {
 margin-left: auto;
 opacity: 0.9;
}
.admin-feedback-success-bar__btn {
 background: linear-gradient(135deg, #157a40, #1fa857);
 color: #fff;
 border: 3px solid rgba(255, 255, 255, 0.35);
}
.admin-feedback-success-bar__btn i {
 font-size: 1.35rem;
 flex-shrink: 0;
}
.student-feedback-voice-prompt {
 position: fixed;
 left: 12px;
 right: 12px;
 bottom: calc(16px + env(safe-area-inset-bottom, 0px));
 z-index: 10001;
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 10px;
 width: calc(100% - 24px);
 padding: 16px 14px;
 border: 3px solid #c77a00;
 border-radius: 14px;
 background: linear-gradient(135deg, #fff8eb, #ffeccc);
 color: #5c3a00;
 font-size: 0.9rem;
 font-weight: 700;
 box-shadow: 0 12px 32px rgba(92, 58, 0, 0.22);
 cursor: pointer;
 animation: fadeUp 0.35s ease;
}
.student-feedback-voice-prompt i {
 color: #c77a00;
 font-size: 1.1rem;
}

.ama-direct-download-bar {
 position: fixed;
 left: 12px;
 right: 12px;
 bottom: calc(12px + env(safe-area-inset-bottom, 0px));
 z-index: 99999;
 padding: 14px 16px;
 border-radius: 14px;
 background: #fff;
 border: 2px solid #1f3f89;
 box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
 text-align: center;
}
.ama-direct-download-bar__title {
 margin: 0 0 10px;
 font-weight: 700;
 color: #1f3f89;
 font-size: 0.95rem;
}
.ama-direct-download-bar__btn {
 display: block;
 width: 100%;
 padding: 14px 12px;
 border-radius: 10px;
 background: linear-gradient(135deg, #1f3f89, #274ea8);
 color: #fff !important;
 text-decoration: none !important;
 font-size: 0.88rem;
 line-height: 1.4;
}
.ama-direct-download-bar__btn strong {
 font-size: 0.82rem;
 word-break: break-all;
}
.ama-direct-download-bar__close {
 margin-top: 10px;
 padding: 8px 16px;
 border: 0;
 border-radius: 8px;
 background: #eef2fb;
 color: #1f3f89;
 font-weight: 600;
 cursor: pointer;
}

.admin-inline-audio audio {
 width: 100%;
 height: 32px;
}
.admin-inline-audio small {
 opacity: .85;
}
.admin-badge { display: inline-block; padding: 3px 8px; border-radius: 999px; font-size: .65rem; font-weight: 800; text-transform: uppercase; margin-right: 6px; }
.admin-badge--new { background: var(--ama-red); }
.admin-badge--reviewed { background: var(--green); }
.admin-badge--imported { background: var(--ama-blue); }
.admin-empty { padding: 24px; text-align: center; opacity: .8; }

@media (max-width: 900px) {
 /* Teacher homework: stop sticky header/nav from covering submission cards */
 body.view-admin .site-header,
 body.view-admin .top-main-nav-wrap,
 body:has(#view-admin.view--active) .site-header,
 body:has(#view-admin.view--active) .top-main-nav-wrap {
 position: relative !important;
 top: auto !important;
 z-index: 5;
 }
 body.view-admin .nav-toggle,
 body:has(#view-admin.view--active) .nav-toggle {
 position: absolute;
 top: 12px;
 left: 10px;
 z-index: 6;
 }
 body.view-admin #app-main,
 body:has(#view-admin.view--active) #app-main {
 overflow: visible;
 }
 body.view-admin .admin-panel,
 #view-admin.view--active .admin-panel {
 padding: 16px 12px 48px;
 max-width: 100%;
 }
 body.view-admin .admin-head,
 #view-admin.view--active .admin-head {
 flex-wrap: wrap;
 gap: 10px;
 }
 body.view-admin .admin-toolbar,
 #view-admin.view--active .admin-toolbar {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 8px;
 }
 body.view-admin .admin-toolbar .admin-btn-sm,
 #view-admin.view--active .admin-toolbar .admin-btn-sm {
 width: 100%;
 }
 body.view-admin .admin-table-wrap,
 #view-admin.view--active .admin-table-wrap {
 overflow: visible;
 }
 .admin-table thead {
 display: none;
 }
 .admin-table,
 .admin-table tbody,
 .admin-table tr,
 .admin-table td {
 display: block;
 width: 100%;
 max-width: 100%;
 box-sizing: border-box;
 }
 .admin-table tr {
 position: relative;
 background: rgba(255,255,255,.08);
 border: 1px solid rgba(255,255,255,.16);
 border-radius: 14px;
 padding: 12px;
 margin-bottom: 14px;
 overflow: hidden;
 isolation: isolate;
 }
 .admin-table td {
 border: none;
 padding: 4px 2px;
 overflow-wrap: anywhere;
 word-break: break-word;
 }
 .admin-text-preview {
 max-width: 100%;
 }
 .admin-inline-audio {
 min-width: 0;
 }
 .admin-actions {
 margin-top: 10px;
 gap: 10px;
 clear: both;
 }
 .admin-audio-actions,
 .admin-row-actions {
 grid-template-columns: 1fr 1fr;
 gap: 8px;
 }
 .admin-btn-sm,
 .admin-btn-download-lg,
 .admin-btn-listen-audio,
 .admin-btn-download-track {
 min-height: 42px;
 font-size: .76rem;
 padding: 8px 10px;
 overflow: hidden;
 text-overflow: ellipsis;
 }
 .admin-row-actions .admin-badge {
 margin: 0 0 2px;
 }
}

.admin-info-box {
 background: rgba(255,255,255,.08); padding: 18px; border-radius: 12px; margin-bottom: 20px;
 font-size: .88rem; line-height: 1.6;
}
.admin-info-box h3 { margin-bottom: 8px; font-size: 1rem; }
.admin-progress-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.admin-progress-card {
 background: rgba(255,255,255,.08); padding: 18px; border-radius: 12px;
}
.admin-progress-card--wide { grid-column: 1 / -1; }
.admin-progress-card h4 { margin-bottom: 8px; color: #ffd54f; }
.admin-score-list { list-style: none; padding: 0; margin: 0; }
.admin-score-list li { padding: 4px 0; }

.admin-settings label { display: block; font-weight: 700; margin-bottom: 8px; font-size: .88rem; }
.admin-settings textarea {
 width: 100%; padding: 12px; border-radius: 8px; border: none; margin-bottom: 16px;
 font-family: var(--font);
}
.admin-check { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; font-weight: 600; }

.site-foot__owner {
 margin-top: 14px;
 padding: 8px 16px;
 border: 1px solid rgba(255,255,255,.15);
 border-radius: 999px;
 background: rgba(255,255,255,.06);
 color: rgba(255,255,255,.55);
 font-size: .72rem;
 font-weight: 600;
 cursor: pointer;
 font-family: var(--font);
 transition: all .2s;
}
.site-foot--lux .site-foot__owner {
 border-color: rgba(255,255,255,.2);
 color: rgba(255,255,255,.5);
}
.site-foot__owner:hover { background: rgba(255,255,255,.12); color: #fff; }

body.maintenance-mode .landing-hero::after {
 content: 'Scheduled maintenance - some features may be limited';
 position: absolute; top: 0; left: 0; right: 0; z-index: 10;
 background: var(--ama-red); color: #fff; text-align: center; padding: 8px; font-size: .8rem; font-weight: 700;
}

/* ═══ Presentation upgrade - director showcase & natural speaking ═══ */
.landing-badges {
 display: flex;
 flex-wrap: wrap;
 gap: 10px;
 justify-content: center;
 margin-bottom: 18px;
}
.landing-badges .pill {
 font-size: .65rem;
 padding: 7px 14px;
 border-radius: 999px;
}

/* ── App download - app-store style card ── */
.app-download {
 display: grid;
 grid-template-columns: auto 1fr auto;
 gap: 24px;
 align-items: center;
 background: linear-gradient(135deg, #0d1a3a 0%, #1a2570 45%, #2e3192 100%);
 border: 1px solid rgba(255, 213, 79, 0.25);
 border-radius: var(--radius-lg);
 padding: 28px 32px;
 margin-bottom: 28px;
 box-shadow: 0 16px 48px rgba(13, 26, 58, 0.35);
 color: #f0f4ff;
}
.app-download__icon {
 width: 72px;
 height: 72px;
 border-radius: 18px;
 background: #fff;
 padding: 8px;
 box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
.app-download__icon img {
 width: 100%;
 height: 100%;
 object-fit: contain;
}
.app-download__eyebrow {
 font-size: .68rem;
 font-weight: 800;
 letter-spacing: .14em;
 text-transform: uppercase;
 color: #ffd54f;
 margin-bottom: 6px;
}
.app-download__body h2 {
 font-family: var(--serif);
 font-size: clamp(1.35rem, 3vw, 1.75rem);
 color: #fff;
 margin-bottom: 10px;
 line-height: 1.25;
}
.app-download__body p {
 font-size: 1rem;
 color: rgba(255, 255, 255, 0.82);
 line-height: 1.7;
 margin-bottom: 16px;
}
.app-download__platforms {
 display: flex;
 flex-wrap: wrap;
 gap: 10px;
}
.app-download__platforms .platform-chip {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 padding: 10px 16px;
 border-radius: 12px;
 background: rgba(255, 255, 255, 0.1);
 border: 1px solid rgba(255, 255, 255, 0.18);
 font-size: .82rem;
 font-weight: 700;
 color: #fff;
 text-decoration: none;
 cursor: pointer;
 transition: transform .2s, background .2s, border-color .2s, box-shadow .2s;
}
.app-download__platforms .platform-chip i {
 font-size: 1.1rem;
}
.app-download__platforms .platform-chip:hover {
 transform: translateY(-2px);
 background: rgba(255, 255, 255, 0.16);
 border-color: rgba(255, 213, 79, 0.5);
 box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
 color: #ffd54f;
}
.app-download__platforms .platform-chip:active {
 transform: translateY(0);
}
.platform-chip--ios:hover i { color: #fff; }
.platform-chip--android:hover i { color: #a4c639; }
.platform-chip--windows:hover i { color: #00a4ef; }
.platform-chip--pc:hover i { color: #ffd54f; }
.app-download__platforms span {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 padding: 5px 12px;
 border-radius: 999px;
 background: rgba(255, 255, 255, 0.08);
 border: 1px solid rgba(255, 255, 255, 0.12);
 font-size: .72rem;
 font-weight: 600;
 color: rgba(255, 255, 255, 0.9);
}
.app-download__actions {
 display: flex;
 flex-direction: column;
 gap: 10px;
 min-width: 200px;
}
.app-download__btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 8px;
 padding: 14px 20px;
 border-radius: 12px;
 font-family: var(--display);
 font-size: .88rem;
 font-weight: 700;
 text-decoration: none;
 border: none;
 cursor: pointer;
 transition: transform .2s, box-shadow .2s;
 white-space: nowrap;
}
.app-download__btn:hover { transform: translateY(-2px); }
.app-download__btn--primary {
 background: linear-gradient(135deg, #c9952a, #ffd54f);
 color: #1a1200;
 box-shadow: 0 6px 20px rgba(201, 149, 42, 0.35);
}
.app-download__btn--secondary {
 background: rgba(255, 255, 255, 0.1);
 color: #fff;
 border: 1px solid rgba(255, 255, 255, 0.22);
}
.app-download__btn--secondary:hover {
 background: rgba(255, 255, 255, 0.16);
 box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}
.app-download__btn[hidden] { display: none !important; }
.app-download__link-note {
 font-size: .72rem;
 color: rgba(255, 255, 255, 0.55);
 text-align: center;
 margin-top: 4px;
}
.app-download__link-note a {
 color: #ffd54f;
 text-decoration: none;
}
.app-download__link-note a:hover { text-decoration: underline; }

/* ── PC download only (honest, one real link) ── */
.pc-download-card {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 justify-content: space-between;
 gap: 20px;
 background: #fff;
 border: 2px solid rgba(46, 49, 146, 0.14);
 border-left: 5px solid var(--ama-blue);
 border-radius: var(--radius-lg);
 padding: 28px 32px;
 margin-bottom: 48px;
 box-shadow: var(--shadow-sm);
}
.pc-download-card__eyebrow {
 font-size: .72rem;
 font-weight: 800;
 letter-spacing: .12em;
 text-transform: uppercase;
 color: var(--ama-red);
 margin-bottom: 8px;
}
.pc-download-card__body h2 {
 font-family: var(--serif);
 font-size: clamp(1.2rem, 3vw, 1.5rem);
 color: var(--navy);
 margin-bottom: 8px;
}
.pc-download-card__body p {
 font-size: .95rem;
 color: var(--dim);
 line-height: 1.65;
 max-width: 560px;
}
.pc-download-card__btn {
 display: inline-flex;
 align-items: center;
 gap: 10px;
 padding: 16px 28px;
 border-radius: 12px;
 background: linear-gradient(135deg, var(--ama-blue), var(--navy2));
 color: #fff;
 font-family: var(--display);
 font-size: .95rem;
 font-weight: 800;
 text-decoration: none;
 box-shadow: var(--shadow-md);
 white-space: nowrap;
 flex-shrink: 0;
}
.pc-download-card__btn:hover {
 transform: translateY(-2px);
 box-shadow: 0 12px 32px rgba(46, 49, 146, 0.35);
}

.director-showcase {
 display: grid;
 grid-template-columns: auto 1fr;
 gap: 24px;
 align-items: start;
 background: linear-gradient(135deg, #fff 0%, #f0f4ff 55%, #fff8f0 100%);
 border: 2px solid rgba(46, 49, 146, 0.14);
 border-left: 6px solid var(--gold);
 border-radius: var(--radius-lg);
 padding: 28px 32px;
 margin-bottom: 28px;
 box-shadow: var(--shadow-md);
}

/* ── Leadership panel - large, premium, for directors ── */
.leadership-panel {
 background: linear-gradient(135deg, #0d1a3a 0%, #1a2570 50%, #2e3192 100%);
 border-radius: 24px;
 padding: 48px 44px;
 margin-bottom: 48px;
 box-shadow: 0 24px 64px rgba(13, 26, 58, 0.35);
 border: 1px solid rgba(255, 213, 79, 0.2);
 color: #fff;
}
.leadership-panel__head {
 text-align: center;
 max-width: 820px;
 margin: 0 auto 40px;
}
.leadership-panel__eyebrow {
 font-size: .8rem;
 font-weight: 800;
 letter-spacing: .16em;
 text-transform: uppercase;
 color: #ffd54f;
 margin-bottom: 14px;
}
.leadership-panel__head h2 {
 font-family: var(--serif);
 font-size: clamp(1.75rem, 4.5vw, 2.5rem);
 color: #fff;
 line-height: 1.2;
 margin-bottom: 18px;
}
.leadership-panel__lead {
 font-size: clamp(1rem, 2vw, 1.15rem);
 color: rgba(255, 255, 255, 0.82);
 line-height: 1.75;
}
.leadership-panel__grid {
 list-style: none;
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 gap: 20px;
}
.leadership-panel__grid li {
 display: flex;
 gap: 16px;
 align-items: flex-start;
 background: rgba(255, 255, 255, 0.07);
 border: 1px solid rgba(255, 255, 255, 0.12);
 border-radius: 16px;
 padding: 24px;
 transition: background .25s, transform .25s;
}
.leadership-panel__grid li:hover {
 background: rgba(255, 255, 255, 0.11);
 transform: translateY(-3px);
}
.leadership-panel__check {
 width: 44px;
 height: 44px;
 border-radius: 50%;
 background: linear-gradient(135deg, #1a7a4a, #2ecc71);
 color: #fff;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 1.1rem;
 flex-shrink: 0;
}
.leadership-panel__grid strong {
 display: block;
 font-family: var(--display);
 font-size: 1.08rem;
 font-weight: 800;
 color: #fff;
 margin-bottom: 8px;
 line-height: 1.3;
}
.leadership-panel__grid p {
 font-size: .95rem;
 color: rgba(255, 255, 255, 0.78);
 line-height: 1.65;
}
.program-leadership {
 margin-top: 28px;
 padding: 22px 24px;
 border-radius: 14px;
 background: rgba(255, 255, 255, 0.08);
 border: 1px solid rgba(255, 255, 255, 0.14);
 text-align: center;
}
.program-leadership__org {
 font-size: .88rem;
 font-weight: 700;
 color: rgba(255, 255, 255, 0.92);
 margin-bottom: 8px;
}
.program-leadership__credit {
 font-family: var(--serif);
 font-size: 1.05rem;
 color: #fff;
 margin-bottom: 8px;
}
.program-leadership__note {
 font-size: .84rem;
 color: rgba(255, 255, 255, 0.72);
 line-height: 1.6;
 max-width: 640px;
 margin: 0 auto;
}
.admin-org-line {
 font-size: .88rem;
 color: var(--dim);
 margin-top: 6px;
 font-weight: 600;
}

/* ── Luxury features grid ── */
.lux-features {
 margin-bottom: 56px;
}
.lux-features__grid {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 20px;
}
.lux-feature {
 background: #fff;
 border-radius: 20px;
 padding: 32px 28px;
 border: 1px solid rgba(46, 49, 146, 0.1);
 box-shadow: var(--shadow-sm);
 transition: transform .25s, box-shadow .25s;
}
.lux-feature:hover {
 transform: translateY(-6px);
 box-shadow: var(--shadow-md);
}
.lux-feature__icon {
 width: 56px;
 height: 56px;
 border-radius: 14px;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 1.45rem;
 color: #fff;
 margin-bottom: 18px;
}
.lux-feature__icon--blue { background: linear-gradient(135deg, var(--ama-blue), var(--navy2)); }
.lux-feature__icon--purple { background: linear-gradient(135deg, #5b21b6, #7c3aed); }
.lux-feature__icon--gold { background: linear-gradient(135deg, #c9952a, #ffd54f); color: #1a1200; }
.lux-feature__icon--green { background: linear-gradient(135deg, #1a7a4a, #2ecc71); }
.lux-feature__icon--red { background: linear-gradient(135deg, var(--ama-red), #c41e3a); }
.lux-feature__icon--teal { background: linear-gradient(135deg, #0d9488, #14b8a6); }
.lux-feature h3 {
 font-family: var(--display);
 font-size: 1.15rem;
 font-weight: 800;
 color: var(--navy);
 margin-bottom: 10px;
}
.lux-feature p {
 font-size: .95rem;
 color: var(--dim);
 line-height: 1.65;
}

/* ── How it works ── */
.how-it-works {
 margin-bottom: 56px;
 padding: 48px 40px;
 background: #fff;
 border-radius: 24px;
 box-shadow: var(--shadow-md);
 border: 1px solid rgba(46, 49, 146, 0.08);
}
.how-steps {
 list-style: none;
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 24px;
 counter-reset: none;
}
.how-steps li {
 text-align: center;
 padding: 0 12px;
}
.how-steps__num {
 display: flex;
 align-items: center;
 justify-content: center;
 width: 52px;
 height: 52px;
 border-radius: 50%;
 background: linear-gradient(135deg, var(--ama-blue), var(--ama-red));
 color: #fff;
 font-family: var(--display);
 font-size: 1.35rem;
 font-weight: 800;
 margin: 0 auto 16px;
}
.how-steps h3 {
 font-family: var(--display);
 font-size: 1.05rem;
 font-weight: 800;
 color: var(--navy);
 margin-bottom: 10px;
}
.how-steps p {
 font-size: .92rem;
 color: var(--dim);
 line-height: 1.65;
}

/* ── IELTS parts ── */
.ielts-parts {
 margin-bottom: 56px;
}
.ielts-parts__grid {
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 gap: 24px;
}
.ielts-part-card {
 background: #fff;
 border-radius: 20px;
 padding: 36px 32px;
 border: 2px solid rgba(46, 49, 146, 0.12);
 box-shadow: var(--shadow-sm);
}
.ielts-part-card--highlight {
 border-color: var(--gold);
 background: linear-gradient(145deg, #fff 0%, #fffbf0 100%);
 box-shadow: 0 12px 36px rgba(201, 149, 42, 0.15);
}
.ielts-part-card__badge {
 display: inline-block;
 padding: 5px 14px;
 border-radius: 999px;
 background: var(--ama-blue-light);
 color: var(--ama-blue);
 font-size: .72rem;
 font-weight: 800;
 letter-spacing: .06em;
 text-transform: uppercase;
 margin-bottom: 16px;
}
.ielts-part-card--highlight .ielts-part-card__badge {
 background: linear-gradient(135deg, #c9952a, #ffd54f);
 color: #1a1200;
}
.ielts-part-card h3 {
 font-family: var(--serif);
 font-size: 1.35rem;
 color: var(--navy);
 margin-bottom: 14px;
 display: flex;
 align-items: center;
 gap: 10px;
}
.ielts-part-card h3 i { color: var(--ama-red); font-size: 1.1rem; }
.ielts-part-card > p {
 font-size: 1rem;
 color: var(--text);
 line-height: 1.7;
 margin-bottom: 18px;
}
.ielts-part-card ul {
 list-style: none;
 display: grid;
 gap: 10px;
}
.ielts-part-card ul li {
 font-size: .92rem;
 color: var(--dim);
 padding-left: 22px;
 position: relative;
 line-height: 1.55;
}
.ielts-part-card ul li::before {
 content: '✓';
 position: absolute;
 left: 0;
 color: var(--green);
 font-weight: 800;
}

/* ── Final CTA band ── */
.final-cta-band {
 margin-top: 56px;
 background: linear-gradient(135deg, #0d1a3a, #1a2570, #2e3192);
 border-radius: 24px;
 padding: 48px 44px;
 box-shadow: 0 20px 56px rgba(13, 26, 58, 0.3);
 border: 1px solid rgba(255, 213, 79, 0.2);
}
.final-cta-band__inner {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 32px;
 flex-wrap: wrap;
}
.final-cta-band h2 {
 font-family: var(--serif);
 font-size: clamp(1.5rem, 3vw, 2rem);
 color: #fff;
 margin-bottom: 10px;
}
.final-cta-band p {
 font-size: 1.05rem;
 color: rgba(255, 255, 255, 0.78);
 max-width: 480px;
 line-height: 1.65;
}
.final-cta-band__actions {
 display: flex;
 flex-wrap: wrap;
 gap: 12px;
}

.anti-memo-grid--lux {
 margin-bottom: 48px;
}
.anti-memo-grid--lux .anti-memo-card {
 padding: 32px 28px;
}
.anti-memo-grid--lux .anti-memo-card__icon {
 width: 56px;
 height: 56px;
 font-size: 1.35rem;
 margin-bottom: 18px;
}
.anti-memo-grid--lux .anti-memo-card h3 {
 font-size: 1.15rem;
 font-weight: 800;
}
.anti-memo-grid--lux .anti-memo-card p {
 font-size: .95rem;
}

.promise-card--lux {
 padding: 36px 32px;
 margin-top: 48px;
}
.promise-card--lux h3 {
 font-size: 1.25rem;
 font-weight: 800;
}
.promise-card--lux p {
 font-size: 1rem;
 line-height: 1.7;
}

.director-showcase__icon {
 width: 64px;
 height: 64px;
 border-radius: 16px;
 background: linear-gradient(135deg, var(--ama-blue), var(--navy2));
 color: var(--gold2);
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 1.6rem;
 box-shadow: 0 8px 24px rgba(46, 49, 146, 0.25);
}
.director-showcase__eyebrow {
 font-size: .72rem;
 font-weight: 800;
 letter-spacing: .12em;
 text-transform: uppercase;
 color: var(--ama-red);
 margin-bottom: 8px;
}
.director-showcase__body h2 {
 font-family: var(--serif);
 font-size: clamp(1.25rem, 3vw, 1.65rem);
 color: var(--navy);
 margin-bottom: 12px;
 line-height: 1.25;
}
.director-showcase__body > p {
 color: var(--dim);
 font-size: .95rem;
 line-height: 1.7;
 margin-bottom: 16px;
}
.director-showcase__list {
 list-style: none;
 display: grid;
 gap: 10px;
}
.director-showcase__list li {
 display: flex;
 align-items: flex-start;
 gap: 10px;
 font-size: .88rem;
 color: var(--text);
 font-weight: 500;
}
.director-showcase__list li i {
 color: var(--green);
 margin-top: 3px;
 flex-shrink: 0;
}

.anti-memo-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
 gap: 16px;
 margin-bottom: 36px;
}
.anti-memo-card {
 background: #fff;
 border-radius: var(--radius-lg);
 padding: 22px;
 border: 1px solid rgba(46, 49, 146, 0.1);
 box-shadow: var(--shadow-sm);
 transition: transform .25s, box-shadow .25s;
}
.anti-memo-card:hover {
 transform: translateY(-4px);
 box-shadow: var(--shadow-md);
}
.anti-memo-card__icon {
 width: 44px;
 height: 44px;
 border-radius: 12px;
 background: linear-gradient(135deg, var(--ama-red), #c41e3a);
 color: #fff;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 1.1rem;
 margin-bottom: 14px;
}
.anti-memo-card h3 {
 font-family: var(--display);
 font-size: 1rem;
 color: var(--ama-blue);
 margin-bottom: 8px;
}
.anti-memo-card p {
 font-size: .85rem;
 color: var(--dim);
 line-height: 1.6;
}

.natural-builder {
 background: linear-gradient(135deg, #eef3ff 0%, #fff 100%);
 border: 2px solid rgba(46, 49, 146, 0.18);
 border-radius: var(--radius-lg);
 padding: 22px 24px;
 margin-bottom: 18px;
}
.natural-builder h4 {
 font-family: var(--display);
 color: var(--ama-blue);
 font-size: 1.05rem;
 margin-bottom: 10px;
 display: flex;
 align-items: center;
 gap: 8px;
}
.natural-builder__lead {
 font-size: .9rem;
 color: var(--text);
 margin-bottom: 14px;
}
.natural-builder__steps {
 margin: 0 0 14px 20px;
 font-size: .88rem;
 line-height: 1.85;
 color: var(--text);
}
.natural-builder__steps strong {
 color: var(--ama-red);
 font-size: 1rem;
}
.natural-builder__tip {
 font-size: .82rem;
 color: var(--dim);
 padding: 12px 14px;
 background: rgba(201, 149, 42, 0.12);
 border-radius: 10px;
 border-left: 4px solid var(--gold);
}
.response-framework {
 background: linear-gradient(135deg, #eef3ff 0%, #fff 100%);
 border: 2px solid rgba(46, 49, 146, 0.2);
 border-radius: var(--radius-lg);
 padding: 20px 22px;
 margin-bottom: 18px;
}
.response-framework__hero h4 {
 font-family: var(--display);
 color: var(--ama-blue);
 margin-bottom: 8px;
 display: flex;
 align-items: center;
 gap: 8px;
}
.response-framework__hero p {
 color: var(--text);
 font-size: .9rem;
 line-height: 1.7;
 margin-bottom: 14px;
}
.rf-grid {
 display: grid;
 grid-template-columns: repeat(4, minmax(160px, 1fr));
 gap: 10px;
 margin-bottom: 12px;
}
.rf-card {
 background: #fff;
 border: 1px solid rgba(46, 49, 146, .18);
 border-radius: 12px;
 padding: 12px;
}
.rf-letter {
 display: inline-flex;
 width: 28px;
 height: 28px;
 border-radius: 50%;
 align-items: center;
 justify-content: center;
 background: var(--ama-blue);
 color: #fff;
 font-weight: 800;
 margin-bottom: 8px;
}
.rf-card h5 {
 margin: 0 0 6px;
 color: var(--ama-blue);
 font-size: .88rem;
}
.rf-card p {
 margin: 0 0 6px;
 font-size: .82rem;
 color: var(--text);
 line-height: 1.5;
}
.rf-card .rf-line {
 color: var(--dim);
 font-style: italic;
}
.rf-template {
 background: #fffdf4;
 border: 1px solid rgba(201, 149, 42, .45);
 border-radius: 12px;
 padding: 12px 14px;
 margin-bottom: 10px;
}
.rf-template h5 {
 margin: 0 0 8px;
 color: #8a5b00;
 font-size: .86rem;
 display: flex;
 gap: 8px;
 align-items: center;
}
.rf-template ol {
 margin: 0 0 8px 18px;
 color: var(--text);
 font-size: .85rem;
 line-height: 1.7;
}
.rf-coach {
 margin: 0;
 font-size: .8rem;
 color: #755100;
 font-weight: 700;
}
.rf-alt {
 background: #f5f8ff;
 border-left: 4px solid var(--ama-blue);
 border-radius: 8px;
 padding: 10px 12px;
}
.rf-alt p {
 margin: 0;
 color: var(--text);
 font-size: .82rem;
 line-height: 1.6;
}
@media (max-width: 980px) {
 .rf-grid { grid-template-columns: repeat(2, minmax(160px, 1fr)); }
}
@media (max-width: 640px) {
 .rf-grid { grid-template-columns: 1fr; }
}
.tbox--warn {
 border-left: 4px solid var(--ama-red) !important;
 background: #fff5f5;
 margin-bottom: 18px;
}
.builder-mini {
 font-size: .78rem;
 color: var(--dim);
 margin-top: 8px;
 font-style: italic;
}

.speak-btn--playing {
 background: var(--green) !important;
 color: #fff !important;
 animation: speakPulse 0.6s ease;
}
@keyframes speakPulse {
 0%, 100% { transform: scale(1); }
 50% { transform: scale(1.08); }
}

@media (max-width: 900px) {
 .app-download {
 grid-template-columns: 1fr;
 text-align: center;
 padding: 24px 20px;
 }
 .app-download__icon { margin: 0 auto; }
 .app-download__platforms { justify-content: center; }
 .app-download__actions { min-width: 0; width: 100%; }
 .lux-features__grid { grid-template-columns: repeat(2, 1fr); }
 .how-steps { grid-template-columns: repeat(2, 1fr); }
 .leadership-panel__grid { grid-template-columns: 1fr; }
 .ielts-parts__grid { grid-template-columns: 1fr; }
 .topnav--lux button { min-width: 90px; padding: 12px 14px 14px; }
 .topnav--lux button i { font-size: 1.25rem; }
}

@media (max-width: 640px) {
 .lux-features__grid { grid-template-columns: 1fr; }
 .how-steps { grid-template-columns: 1fr; }
 .leadership-panel { padding: 32px 24px; }
 .how-it-works { padding: 32px 24px; }
 .final-cta-band { padding: 32px 24px; }
 .final-cta-band__inner { flex-direction: column; text-align: center; }
 .final-cta-band__actions { justify-content: center; width: 100%; }
 .director-showcase {
 grid-template-columns: 1fr;
 padding: 20px;
 }
 .director-showcase__icon {
 margin: 0 auto;
 }
 .director-showcase__body { text-align: center; }
 .director-showcase__list li { text-align: left; }
 .site-foot__grid { grid-template-columns: 1fr; }
 .site-foot__hero { flex-direction: column; text-align: center; }
 .site-foot__tagline { margin: 0 auto; }
 .parent-trust__grid { grid-template-columns: 1fr; }
 .play-level-tabs { flex-direction: column; }
 .games-picker--pro { grid-template-columns: 1fr; }
}

/* ═══ v4 Premium - Challenge Arena & parent trust ═══ */
.parent-trust {
 margin: 48px 0 32px;
 padding: 0;
}
.parent-trust__inner {
 background: linear-gradient(135deg, #fff 0%, #f4f8ff 50%, #fff8f0 100%);
 border: 2px solid rgba(46, 49, 146, 0.1);
 border-radius: var(--radius-lg);
 padding: 40px 36px;
 box-shadow: var(--shadow-md);
 border-top: 4px solid var(--gold);
}
.parent-trust__head { text-align: center; max-width: 640px; margin: 0 auto 32px; }
.parent-trust__grid {
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 gap: 20px;
 list-style: none;
}
.parent-trust__grid li {
 display: flex;
 flex-direction: column;
 gap: 6px;
 padding: 20px;
 background: #fff;
 border-radius: 14px;
 border: 1px solid var(--border);
 box-shadow: var(--shadow-sm);
}
.parent-trust__grid li i {
 font-size: 1.25rem;
 color: var(--ama-blue);
 margin-bottom: 4px;
}
.parent-trust__grid li strong {
 font-family: var(--serif);
 color: var(--navy);
 font-size: 1rem;
}
.parent-trust__grid li span {
 font-size: .86rem;
 color: var(--dim);
 line-height: 1.55;
}

.sub-hero-pro__eyebrow {
 font-size: .72rem;
 font-weight: 700;
 letter-spacing: .14em;
 text-transform: uppercase;
 color: var(--gold);
 margin-bottom: 8px;
}

.play-arena-head {
 text-align: center;
 max-width: 720px;
 margin: 0 auto 28px;
 padding-top: 8px;
}
.play-arena-head__eyebrow {
 font-size: .72rem;
 font-weight: 700;
 letter-spacing: .14em;
 text-transform: uppercase;
 color: var(--ama-red);
 margin-bottom: 10px;
}
.play-arena-head__title {
 font-family: var(--serif);
 font-size: 1.45rem;
 color: var(--navy);
 margin-bottom: 12px;
}
.play-arena-head__lead {
 font-size: .95rem;
 color: var(--dim);
 line-height: 1.7;
}

.play-level-tabs {
 display: flex;
 gap: 12px;
 justify-content: center;
 margin-bottom: 12px;
}
.play-level-tab {
 flex: 1;
 max-width: 280px;
 padding: 16px 20px;
 border: 2px solid var(--border);
 border-radius: var(--radius-lg);
 background: #fff;
 cursor: pointer;
 font-family: var(--font);
 text-align: left;
 transition: all .25s;
 box-shadow: var(--shadow-sm);
}
.play-level-tab.is-active {
 border-color: var(--ama-blue);
 background: linear-gradient(145deg, #fff 0%, var(--ama-blue-light) 100%);
 box-shadow: var(--shadow-md);
}
.play-level-tab__label {
 display: block;
 font-weight: 700;
 font-size: 1.05rem;
 color: var(--navy);
 font-family: var(--serif);
}
.play-level-tab__book {
 display: block;
 font-size: .78rem;
 color: var(--dim);
 margin-top: 4px;
}
.play-level-desc {
 text-align: center;
 font-size: .88rem;
 color: var(--dim);
 font-style: italic;
 margin-bottom: 24px;
}

.games-picker--pro {
 grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
 gap: 18px;
}
.game-card--pro {
 background: linear-gradient(160deg, #fff 0%, #f8faff 100%);
 border: 2px solid rgba(46, 49, 146, 0.12);
 border-radius: var(--radius-lg);
 padding: 22px;
 position: relative;
 overflow: hidden;
}
.game-card--pro::before {
 content: '';
 position: absolute;
 top: 0; left: 0; right: 0;
 height: 3px;
 background: linear-gradient(90deg, var(--ama-blue), var(--gold));
 opacity: 0;
 transition: opacity .25s;
}
.game-card--pro:hover::before,
.game-card--pro.active::before { opacity: 1; }
.game-card--pro.active {
 border-color: var(--ama-blue);
 background: linear-gradient(160deg, #fff 0%, #eef3ff 100%);
}
.game-card__top {
 display: flex;
 justify-content: space-between;
 align-items: center;
 margin-bottom: 12px;
}
.game-card__tier {
 font-size: .68rem;
 font-weight: 700;
 letter-spacing: .08em;
 text-transform: uppercase;
 color: var(--ama-red);
}
.game-card__diff { font-size: .65rem; color: var(--gold); }
.game-star--dim { opacity: .25; }
.game-card__icon--pro {
 width: 48px; height: 48px;
 border-radius: 12px;
 background: linear-gradient(135deg, var(--navy2), var(--ama-blue));
 color: #fff;
 display: flex;
 align-items: center;
 justify-content: center;
 margin-bottom: 14px;
 font-size: 1.1rem;
}
.game-card--pro h3 {
 font-family: var(--serif);
 font-size: 1.1rem;
 color: var(--navy);
 margin-bottom: 6px;
}
.game-card__level-tag {
 font-size: .75rem;
 color: var(--dim);
 margin-bottom: 10px;
}
.games-stage--pro { min-height: 320px; }
.games-pick-hint--pro {
 text-align: center;
 padding: 48px 24px;
 color: var(--dim);
 font-size: .95rem;
}
.games-pick-hint--pro i { color: var(--ama-blue); margin-right: 8px; }

/* Game session - professional */
.game-pro {
 background: linear-gradient(165deg, #fff 0%, #f6f9ff 100%);
 border: 2px solid rgba(46, 49, 146, 0.14);
 border-radius: var(--radius-lg);
 padding: 28px;
 box-shadow: var(--shadow-md);
 border-top: 4px solid var(--navy2);
}
.game-pro__head {
 display: flex;
 align-items: center;
 gap: 16px;
 margin-bottom: 18px;
 padding-bottom: 16px;
 border-bottom: 1px solid var(--border);
}
.game-pro__icon {
 width: 52px; height: 52px;
 border-radius: 14px;
 background: linear-gradient(135deg, var(--navy), var(--ama-blue));
 color: #fff;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 1.2rem;
}
.game-pro__level {
 font-size: .68rem;
 font-weight: 700;
 letter-spacing: .1em;
 text-transform: uppercase;
 color: var(--ama-red);
 margin-bottom: 2px;
}
.game-pro__title {
 font-family: var(--serif);
 font-size: 1.3rem;
 color: var(--navy);
 font-weight: 700;
}
.game-hud--pro {
 display: flex;
 flex-wrap: wrap;
 gap: 14px 22px;
 padding: 14px 18px;
 background: rgba(46, 49, 146, 0.06);
 border-radius: 12px;
 margin-bottom: 22px;
 font-size: .84rem;
 font-weight: 700;
 color: var(--ama-blue);
 border: none;
}
.game-hud--pro strong { color: var(--navy); }
.game-streak { color: var(--gold); }
.game-lives { color: var(--ama-red); }
.game-prompt--pro {
 font-size: .78rem;
 font-weight: 700;
 letter-spacing: .06em;
 text-transform: uppercase;
 color: var(--dim);
 margin-bottom: 14px;
}
.game-quote {
 font-family: var(--serif);
 font-size: 1.15rem;
 line-height: 1.65;
 color: var(--navy);
 padding: 18px 22px;
 margin: 14px 0;
 background: rgba(46, 49, 146, 0.05);
 border-left: 4px solid var(--ama-blue);
 border-radius: 0 12px 12px 0;
}
.game-quote--speak { font-size: 1.05rem; }
.game-quote mark { background: rgba(201, 149, 42, 0.25); padding: 0 4px; border-radius: 4px; }
.game-word--pro { font-size: 1.4rem; }
.game-meta { font-size: .88rem; color: var(--dim); margin-bottom: 14px; font-style: italic; }
.game-choices--4 { grid-template-columns: repeat(2, 1fr); }
.game-choice--pro {
 font-family: var(--font);
 font-size: .92rem;
 padding: 16px;
 border-radius: 12px;
}
.game-clue-row {
 display: flex;
 flex-wrap: wrap;
 gap: 8px;
 margin: 16px 0;
}
.game-clue-chip {
 padding: 8px 14px;
 background: var(--ama-blue-light);
 border: 1px solid rgba(46, 49, 146, 0.15);
 border-radius: 999px;
 font-size: .82rem;
 font-weight: 700;
 color: var(--ama-blue);
}
.game-checklist {
 display: flex;
 flex-direction: column;
 gap: 10px;
 margin: 18px 0;
}
.game-check {
 display: flex;
 align-items: center;
 gap: 10px;
 font-size: .9rem;
 cursor: pointer;
 padding: 10px 14px;
 background: #fff;
 border: 1px solid var(--border);
 border-radius: 10px;
}
.game-check input { width: 18px; height: 18px; accent-color: var(--ama-blue); }
.game-speak-actions {
 display: flex;
 flex-wrap: wrap;
 gap: 12px;
 margin-top: 16px;
}
.game-connector-bank {
 display: flex;
 flex-wrap: wrap;
 gap: 8px;
 margin: 16px 0;
}
.game-connector {
 padding: 10px 16px;
 border: 2px solid var(--border);
 border-radius: 999px;
 background: #fff;
 font-family: var(--font);
 font-weight: 700;
 font-size: .85rem;
 cursor: pointer;
 transition: all .2s;
}
.game-connector:hover { border-color: var(--ama-blue); }
.game-connector.is-used { opacity: .35; pointer-events: none; }
.game-connector-slots {
 min-height: 44px;
 padding: 14px;
 background: rgba(46, 49, 146, 0.05);
 border-radius: 12px;
 margin-bottom: 16px;
 font-size: .9rem;
}
.game-slot-filled { display: block; padding: 4px 0; color: var(--navy); font-weight: 600; }
.game-slot-empty { color: var(--dim); font-style: italic; }
.game-listen-btn--pro {
 margin-bottom: 14px;
}
.game-hint-box--pro { font-size: .88rem; }
.game-feedback--pro { margin-top: 16px; min-height: 28px; }
.game-done--pro { padding: 40px 24px; text-align: center; }
.game-done__seal {
 width: 72px; height: 72px;
 margin: 0 auto 16px;
 border-radius: 50%;
 background: linear-gradient(135deg, var(--gold), var(--gold2));
 color: var(--navy);
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 2rem;
 box-shadow: 0 8px 24px rgba(201, 149, 42, 0.35);
}
.game-done-grade {
 font-family: var(--serif);
 font-size: 1.25rem;
 font-weight: 700;
 color: var(--ama-blue);
 margin: 8px 0;
}

/* Play hero + arena */
.play-hero {
 background: linear-gradient(135deg, #0a1028 0%, #1a2570 50%, #2e3192 100%);
 padding: 44px 28px 40px;
 border-bottom: 4px solid var(--gold);
 text-align: center;
}
.play-hero__inner { max-width: 680px; margin: 0 auto; }
.play-hero__eyebrow {
 font-size: .72rem;
 font-weight: 700;
 letter-spacing: .16em;
 text-transform: uppercase;
 color: var(--gold2);
 margin-bottom: 10px;
}
.play-hero h2 {
 font-family: var(--serif);
 font-size: clamp(1.5rem, 4vw, 2rem);
 color: #fff;
 margin-bottom: 12px;
}
.play-hero h2 i { color: var(--gold2); margin-right: 8px; }
.play-hero p {
 color: rgba(255,255,255,.78);
 font-size: .95rem;
 line-height: 1.65;
}
.wrap--arena {
 background: linear-gradient(180deg, #eef2fa 0%, #fff 120px);
 padding: 32px 24px 48px;
 max-width: 1100px;
}
.game-loading {
 text-align: center;
 padding: 56px 24px;
 color: var(--ama-blue);
 font-weight: 700;
 font-size: 1rem;
}
.game-loading i { margin-right: 10px; color: var(--gold); }
.game-card__desc {
 font-size: .84rem;
 color: var(--dim);
 line-height: 1.55;
 margin-bottom: 8px;
}
.game-card__play {
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 8px;
 margin-top: 14px;
 padding: 10px;
 border-radius: 10px;
 background: linear-gradient(135deg, var(--ama-blue), var(--navy2));
 color: #fff;
 font-size: .82rem;
 font-weight: 700;
 letter-spacing: .04em;
}
.game-card--pro:hover .game-card__play,
.game-card--pro.active .game-card__play {
 background: linear-gradient(135deg, var(--ama-red), #b8151c);
}
.game-card--pro {
 cursor: pointer;
 text-align: left;
 width: 100%;
}
.game-card--pro:active { transform: scale(0.98); }
.games-stage--pro {
 margin-top: 8px;
 scroll-margin-top: 100px;
}

/* Full-screen game overlay - game MUST be visible when card is tapped */
.game-overlay {
 position: fixed;
 inset: 0;
 z-index: 800;
 background: linear-gradient(180deg, #eef2fa 0%, #fff 30%);
 display: flex;
 flex-direction: column;
 overflow: hidden;
}
.game-overlay[hidden] { display: none !important; }
body.game-overlay-open { overflow: hidden; }
.game-overlay__bar {
 display: flex;
 align-items: center;
 gap: 16px;
 padding: 14px 18px;
 background: linear-gradient(135deg, #0a1028, #1a2570);
 border-bottom: 3px solid var(--gold);
 flex-shrink: 0;
}
.game-overlay__close {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 padding: 10px 16px;
 border: 2px solid rgba(255,255,255,.25);
 border-radius: 999px;
 background: rgba(255,255,255,.08);
 color: #fff;
 font-family: var(--font);
 font-weight: 700;
 font-size: .88rem;
 cursor: pointer;
}
.game-overlay__close:hover { background: rgba(255,255,255,.18); }
.game-overlay__title {
 flex: 1;
 font-family: var(--serif);
 font-weight: 700;
 color: #fff;
 font-size: .95rem;
 text-align: center;
 padding-right: 80px;
}
.game-overlay__stage {
 flex: 1;
 overflow-y: auto;
 padding: 20px 16px 40px;
 -webkit-overflow-scrolling: touch;
}
.game-overlay__stage .game-pro {
 max-width: 720px;
 margin: 0 auto;
}
@media (max-width: 768px) {
 .game-overlay__title { font-size: .82rem; padding-right: 0; }
 .game-overlay__stage { padding-bottom: calc(40px + env(safe-area-inset-bottom)); }
}

.game-learn-panel {
 text-align: left;
 margin: 24px 0;
 padding: 20px;
 background: rgba(46, 49, 146, 0.05);
 border-radius: 14px;
 border: 1px solid rgba(46, 49, 146, 0.12);
}
.game-learn-panel h4 {
 font-family: var(--serif);
 color: var(--navy);
 font-size: 1rem;
 margin: 16px 0 10px;
}
.game-learn-panel h4:first-child { margin-top: 0; }
.game-learn-list, .game-practice-list {
 list-style: none;
 font-size: .88rem;
 line-height: 1.65;
 color: var(--text);
}
.game-learn-list li { padding: 8px 0; border-bottom: 1px solid var(--border); }
.game-learn-vi { color: var(--ama-red); font-weight: 600; }
.game-learn-note { color: var(--dim); font-size: .82rem; }
.game-practice-list { counter-reset: practice; }
.game-practice-list li {
 display: flex;
 gap: 10px;
 padding: 10px 0;
 align-items: flex-start;
}
.game-practice-num {
 flex-shrink: 0;
 width: 26px; height: 26px;
 border-radius: 50%;
 background: var(--ama-blue);
 color: #fff;
 font-size: .78rem;
 font-weight: 700;
 display: flex;
 align-items: center;
 justify-content: center;
}
.game-learn-tip {
 font-size: .82rem;
 color: var(--dim);
 font-style: italic;
 margin-top: 12px;
}
.game-overlay__voices {
 margin-left: auto;
 font-size: .72rem;
 color: rgba(255,255,255,.65);
}

/* ── Homework task numbering ── */
.hw-task-label {
 display: inline-block;
 padding: 4px 10px;
 border-radius: 999px;
 background: linear-gradient(135deg, #274ea8, #1f3f89);
 color: #fff;
 font-size: .72rem;
 font-weight: 800;
 letter-spacing: .04em;
 text-transform: uppercase;
 margin-right: 8px;
 cursor: pointer;
 touch-action: manipulation;
}
.hw-unit-tag {
 display: inline-block;
 padding: 3px 8px;
 border-radius: 6px;
 background: #eef2fa;
 color: #1f3f89;
 font-size: .72rem;
 font-weight: 700;
 margin-bottom: 8px;
}
.hw-q-head { padding: 16px 18px; background: #f4f7fc; border-bottom: 1px solid #d8e2f2; }
.hw-q-card--part2 .part2-cue-card--hw { margin-top: 10px; border: 1px solid rgba(37, 78, 168, 0.2); }

/* ── Student guide (zero to hero) ── */
.lang-vi { display: none; }
.guide-vi .lang-en { display: none !important; }
.guide-vi .lang-vi { display: block; }
.guide-vi h2 .lang-vi,
.guide-vi h3 .lang-vi { display: inline; }
.guide-vi h2 .lang-en,
.guide-vi h3 .lang-en { display: none; }
.guide-vi .student-guide__icon-card .lang-vi { display: block; }
.guide-vi .student-guide__icon-card .lang-en { display: none; }

.vi-guide-toggle {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 padding: 8px 12px;
 border: 2px solid var(--gold-solid);
 border-radius: 999px;
 background: rgba(255, 255, 255, 0.12);
 color: #fff;
 font-family: var(--ui);
 font-size: .78rem;
 font-weight: 700;
 cursor: pointer;
 white-space: nowrap;
}
.vi-guide-toggle:hover { background: rgba(255, 255, 255, 0.2); }
.vi-guide-toggle--on {
 background: var(--gold-solid);
 color: var(--royal-blue);
}

.student-guide {
 background: linear-gradient(180deg, #ffffff 0%, #eef1f5 100%);
 border: 2px solid var(--gold-solid);
 border-radius: 20px;
 padding: 32px 28px 36px;
 margin-bottom: 32px;
 box-shadow: 0 16px 44px rgba(0, 35, 102, 0.14);
}
.student-guide__head { margin-bottom: 20px; text-align: center; }
.student-guide__head h2 {
 font-family: 'Times New Roman', Times, Georgia, serif;
 font-size: clamp(1.65rem, 4.2vw, 2.25rem);
 font-weight: 400;
 color: var(--royal-blue);
 margin: 8px 0 0;
}
.student-guide__mission {
 max-width: 720px;
 margin: 0 auto 28px;
 padding: 22px 24px;
 background: #e8eaee;
 border: 1px solid #d0d4dc;
 border-left: 5px solid var(--royal-blue-btn);
 border-radius: 14px;
}
.student-guide__mission p {
 font-family: 'Times New Roman', Times, Georgia, serif;
 font-size: 1.12rem;
 line-height: 1.85;
 color: #000;
 margin: 0;
}
.student-guide__steps {
 list-style: none;
 margin: 0 0 32px;
 padding: 0;
 display: flex;
 flex-direction: column;
 gap: 16px;
}
.student-guide__steps li {
 display: flex;
 gap: 18px;
 align-items: flex-start;
 padding: 22px 22px 22px 20px;
 background: #e8eaee;
 border: 1px solid #d0d4dc;
 border-left: 5px solid var(--royal-blue-btn);
 border-radius: 14px;
}
.student-guide__num {
 flex-shrink: 0;
 width: 42px;
 height: 42px;
 border-radius: 50%;
 background: var(--royal-blue-btn);
 border: 2px solid var(--gold-solid);
 color: #fff;
 font-family: var(--ui);
 font-weight: 800;
 font-size: 1.05rem;
 display: flex;
 align-items: center;
 justify-content: center;
}
.student-guide__steps h3 {
 font-family: 'Times New Roman', Times, Georgia, serif;
 font-size: 1.22rem;
 font-weight: 700;
 color: #000;
 margin-bottom: 10px;
 line-height: 1.45;
}
.student-guide__steps p {
 font-family: 'Times New Roman', Times, Georgia, serif;
 font-size: 1.08rem;
 line-height: 1.9;
 color: #000;
 margin: 0 0 10px;
}
.student-guide__steps p:last-child { margin-bottom: 0; }
.student-guide__icons-title {
 font-family: 'Times New Roman', Times, Georgia, serif;
 font-size: 1.2rem;
 color: var(--royal-blue);
 text-align: center;
 margin-bottom: 16px;
}
.student-guide__icon-grid {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
 gap: 12px;
}
.student-guide__icon-card {
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 6px;
 padding: 16px 12px;
 border: 2px solid var(--gold-solid);
 border-radius: 12px;
 background: var(--royal-blue-btn);
 color: #fff;
 cursor: pointer;
 font-family: var(--ui);
 text-align: center;
 transition: filter .2s, transform .2s;
}
.student-guide__icon-card:hover {
 filter: brightness(1.08);
 transform: translateY(-2px);
}
.student-guide__icon-card--key {
 background: #157a40;
 border-color: var(--gold-solid);
 box-shadow: 0 8px 20px rgba(21, 122, 64, 0.25);
}
.student-guide__icon {
 width: 44px;
 height: 44px;
 border-radius: 10px;
 background: rgba(255, 255, 255, 0.15);
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 1.25rem;
}
.student-guide__icon-card strong {
 font-size: .82rem;
 letter-spacing: .02em;
}
.student-guide__icon-card span:last-child {
 font-size: .72rem;
 opacity: 0.9;
 line-height: 1.35;
}
.site-foot--pro {
 background: linear-gradient(180deg, #001a4d 0%, #002366 100%);
 padding: 0 0 calc(16px + env(safe-area-inset-bottom, 0px));
}
.site-foot--pro .site-foot__main {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 justify-content: space-between;
 gap: 24px;
 max-width: 1100px;
 margin: 0 auto;
 padding: 28px 24px 20px;
}
.site-foot--pro .site-foot__brand-block {
 display: flex;
 align-items: center;
 gap: 16px;
}
.site-foot--pro .site-foot__logo {
 width: 120px;
 height: auto;
 filter: drop-shadow(0 4px 12px rgba(0,0,0,.25));
}
.site-foot--pro .site-foot__title {
 font-family: var(--serif);
 font-size: 1.15rem;
 color: #fff;
 margin: 4px 0;
}
.site-foot--pro .site-foot__tagline {
 font-size: .82rem;
 color: rgba(255,255,255,.72);
 margin: 0;
}
.site-foot--pro .site-foot__nav--compact {
 display: flex;
 flex-wrap: wrap;
 gap: 8px;
}
.site-foot--pro .site-foot__bottom {
 border-top: 1px solid rgba(255,255,255,.12);
 padding: 16px 24px 8px;
 text-align: center;
 max-width: 1100px;
 margin: 0 auto;
}
.site-foot--pro .site-foot__copy,
.site-foot--pro .site-foot__developer,
.site-foot--pro .site-foot__version {
 font-size: .78rem;
 color: rgba(255,255,255,.55);
 margin: 4px 0;
}
.site-foot--pro .site-foot__developer-name { color: var(--gold2); }

.major-orec--compact {
 padding: 20px 22px;
 margin-bottom: 24px;
}
.major-orec--compact .major-orec__grid {
 grid-template-columns: repeat(4, 1fr);
 gap: 10px;
}
@media (max-width: 760px) {
 .student-guide { padding: 22px 16px; }
 .student-guide__icon-grid { grid-template-columns: repeat(2, 1fr); }
 .major-orec--compact .major-orec__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Premium mobile website feel ── */
@media (max-width: 960px) {
 body {
 background: transparent;
 font-family: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
 color: #eef2fa;
 }
 .bg-mesh {
 display: block !important;
 }
 .bg-orb { display: none; }
 .topbar--pro {
 background: var(--royal-blue);
 border-bottom: 2px solid var(--gold-solid);
 }
 .top-main-nav-wrap {
 background: var(--royal-blue);
 border-bottom: 2px solid var(--gold-solid);
 }
 .top-main-nav.topnav--pro button {
 background: var(--royal-blue-btn);
 border: 2px solid var(--gold-solid);
 font-size: .62rem;
 padding: 7px 9px;
 color: #fff;
 }
 .top-main-nav.topnav--pro button.active {
 background: var(--gold-solid);
 color: var(--royal-blue);
 border-color: var(--gold-solid);
 }
 .wrap, .wrap--light {
 background: rgba(232, 240, 252, 0.94);
 border-radius: 0;
 margin-top: 0;
 padding-top: 20px;
 padding-bottom: 32px;
 border-top: 2px solid rgba(212, 175, 55, 0.45);
 color: #0f2044;
 }
 .sub-hero-pro, .sub-hero-pro--homework, .sub-hero-pro--green {
 padding: 22px 16px;
 border-radius: 0;
 background: var(--royal-blue);
 border-bottom: 2px solid var(--gold-solid);
 }
 .sub-hero-pro h2 { font-size: 1.15rem; }
 .landing-hero {
 padding: 28px 14px 36px;
 min-height: auto;
 background: var(--royal-blue) url('assets/classroom-hero-bg.png') center center / cover no-repeat;
 }
 .landing-welcome { display: none; }
 .landing-prose { padding: 0 4px; margin-bottom: 18px; }
 .landing-prose__welcome { font-size: 1.25rem; }
 .landing-prose__lead { font-size: .95rem; padding-top: 12px; }
 .landing-logo-frame { padding: 12px 16px; }
 .landing-logo__img { max-width: 240px; }
 .landing-badges { justify-content: center; gap: 6px; }
 .landing-badges .pill { font-size: .62rem; padding: 6px 10px; }
 .landing-message-card {
 background: #ffffff;
 border: 1px solid #d8e2f2;
 }
 .hw-q-card {
 border-radius: 12px;
 border: 1px solid #d8e2f2;
 box-shadow: 0 4px 14px rgba(26, 53, 122, 0.08);
 }
 .practice-workspace {
 padding: 14px;
 background: #fff;
 }
 .practice-record {
 width: 100%;
 justify-content: center;
 background: linear-gradient(135deg, #274ea8, #1f3f89);
 box-shadow: none;
 }
 .practice-stop, .practice-play, .practice-clear-audio {
 flex: 1 1 calc(50% - 4px);
 min-height: 42px;
 }
 .practice-submit-row {
 flex-direction: column;
 align-items: stretch;
 }
 .practice-submit-hw {
 width: 100%;
 justify-content: center;
 }
 #app-main { padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
 .admin-gate__card input[type="password"],
 .admin-gate__card input[type="text"] {
 font-size: 16px;
 -webkit-appearance: none;
 appearance: none;
 }
@media (max-width: 960px) {
 html { scroll-behavior: auto; }
 .topbar__inner {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 8px;
 }
 .topbar-actions {
 gap: 6px;
 flex-shrink: 0;
 }
 .topbar-actions .app-refresh-btn__label { display: none; }
 .topbar-actions .vi-guide-toggle span { display: none; }
 .topbar-actions .vi-guide-toggle { min-width: 44px; padding: 10px 12px; }
}
@media (max-width: 960px) {
 .top-main-nav-wrap {
 overflow: visible;
 }
 .top-main-nav.topnav--pro {
 grid-template-columns: repeat(4, minmax(0, 1fr));
 min-width: 0;
 width: 100%;
 justify-content: stretch;
 gap: 5px;
 }
 .top-main-nav.topnav--pro button {
 flex: unset;
 min-width: 0;
 width: 100%;
 max-width: none;
 }
}
 .hw-task-label { font-size: .78rem; padding: 6px 12px; }
 .hw-q-text { display: block; margin-top: 8px; font-size: 1rem; line-height: 1.55; }
}

.app-update-toast {
 position: fixed;
 top: calc(12px + env(safe-area-inset-top, 0px));
 left: 50%;
 transform: translateX(-50%);
 z-index: 9999;
 max-width: min(92vw, 420px);
 padding: 12px 16px;
 border-radius: 12px;
 background: linear-gradient(135deg, #1f3f89, #274ea8);
 color: #fff;
 font-size: .82rem;
 font-weight: 600;
 text-align: center;
 box-shadow: 0 12px 32px rgba(15, 32, 68, 0.35);
 border: 1px solid rgba(212, 175, 55, 0.45);
 animation: fadeUp 0.35s ease;
}
.app-refresh-btn.is-syncing i,
.app-refresh-btn.is-spinning i {
 animation: admin-refresh-spin 0.85s linear infinite;
}
.app-update-toast--ok {
 background: #e8f7ee;
 border-color: #8fd4a8;
 color: #145c2e;
}
.app-update-toast--warn {
 background: #fff8e6;
 border-color: #f5d78e;
 color: #7a4d00;
}
.app-update-toast--info {
 background: #eef4ff;
 border-color: #b8ccf5;
 color: #1f3f89;
}
.app-load-warn {
 margin: 0 0 16px;
 padding: 12px 14px;
 border-radius: 10px;
 background: #fff4e5;
 border: 1px solid #f0c36d;
 color: #7a4b00;
 font-size: .88rem;
 font-weight: 600;
 text-align: center;
}
.admin-audio-warn {
 display: block;
 margin: 8px 0 0;
 padding: 10px 12px;
 border-radius: 8px;
 background: #fff0f0;
 border: 1px solid #f5c2c2;
 color: #8b1a1a;
 font-size: .78rem;
 line-height: 1.45;
}
.admin-audio-hint {
 margin: 6px 0 0;
 font-size: .72rem;
 color: var(--text-muted, #5a6478);
}
.admin-inline-audio audio {
 width: 100%;
 max-width: 320px;
 margin-top: 8px;
}
.admin-inbox-sync {
 margin: 0 0 12px;
 padding: 10px 14px;
 border-radius: 10px;
 font-size: .82rem;
 line-height: 1.45;
}
.admin-inbox-sync--ok {
 background: #e8f7ee;
 border: 1px solid #8fd4a8;
 color: #145c2e;
}
.admin-inbox-sync--warn {
 background: #fff0f0;
 border: 1px solid #f5c2c2;
 color: #8b1a1a;
}
.admin-inbox-sync--info {
 background: #eef4ff;
 border: 1px solid #b8ccf5;
 color: #1f3f89;
}
.admin-cloud-setup {
 margin: 0 0 14px;
 padding: 12px 14px;
 border-radius: 10px;
 background: #fff8e6;
 border: 1px solid #e8c96a;
}
.admin-cloud-setup label {
 display: block;
 font-size: .82rem;
 font-weight: 700;
 margin-bottom: 8px;
 color: #5c4a00;
}
.admin-cloud-setup__row {
 display: grid;
 grid-template-columns: 1fr;
 gap: 8px;
}
@media (min-width: 640px) {
 .admin-cloud-setup__row {
 grid-template-columns: 1fr repeat(2, minmax(100px, 1fr));
 }
}
.admin-cloud-setup__row .admin-btn-sm {
 width: 100%;
 min-height: 48px;
 justify-content: center;
}
.admin-cloud-setup__row input {
 flex: 1 1 220px;
 min-width: 0;
 padding: 8px 10px;
 border-radius: 8px;
 border: 1px solid #d4bc6a;
}
.admin-cloud-setup__hint {
 margin: 8px 0 0;
 font-size: .78rem;
 color: #6b5a20;
 line-height: 1.45;
}
.admin-cloud-setup--open {
 box-shadow: 0 0 0 2px #1f3f89;
}
.admin-empty-device {
 text-align: left;
 max-width: 520px;
 margin: 0 auto;
 line-height: 1.55;
}
.admin-empty-device p { margin: 0 0 10px; }
.admin-empty-device__tv {
 margin-top: 12px;
 padding: 10px 12px;
 border-radius: 8px;
 background: #eef2fb;
 color: #1f3f89;
 font-weight: 600;
}
.ama-download-sheet {
 position: fixed;
 inset: 0;
 z-index: 10050;
 background: rgba(8, 18, 40, 0.72);
 display: flex;
 align-items: flex-end;
 justify-content: center;
 padding: 16px;
 padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
}
.ama-download-sheet__card {
 width: min(100%, 420px);
 background: #fff;
 border-radius: 16px 16px 12px 12px;
 padding: 18px 16px 20px;
 box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}
.ama-download-sheet__close {
 float: right;
 border: 0;
 background: transparent;
 font-size: 1.5rem;
 line-height: 1;
 cursor: pointer;
 color: #5a6478;
}
.ama-download-sheet__card h3 {
 margin: 0 0 8px;
 font-size: 1.05rem;
}
.ama-download-sheet__lead {
 margin: 0 0 12px;
 font-size: .84rem;
 color: #5a6478;
 line-height: 1.45;
}
.ama-download-sheet__card audio {
 width: 100%;
 margin: 0 0 12px;
}
.ama-download-sheet__link,
.ama-download-sheet__share {
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 8px;
 width: 100%;
 margin-top: 8px;
 padding: 12px 14px;
 border-radius: 10px;
 font-weight: 700;
 font-size: .88rem;
 text-decoration: none;
 border: 0;
 cursor: pointer;
}
.ama-download-sheet__link {
 background: #1f3f89;
 color: #fff;
}
.ama-download-sheet__share {
 background: #eef4ff;
 color: #1f3f89;
 border: 1px solid #b8ccf5;
}

/* ── Sentence Forge mark (3 bars + gold spark) ── */
.ama-forge-mark {
 display: inline-flex;
 flex-direction: column;
 align-items: flex-start;
 justify-content: center;
 gap: 3px;
 position: relative;
 flex-shrink: 0;
}
.ama-forge-mark__bar {
 display: block;
 height: 3px;
 border-radius: 2px;
 background: linear-gradient(90deg, #c9a227, #f4e4a6);
}
.ama-forge-mark__bar--1 { width: 14px; opacity: 0.55; }
.ama-forge-mark__bar--2 { width: 18px; opacity: 0.78; }
.ama-forge-mark__bar--3 { width: 22px; }
.ama-forge-mark__spark {
 position: absolute;
 top: -2px;
 right: -4px;
 width: 6px;
 height: 6px;
 border-radius: 50%;
 background: radial-gradient(circle, #ffe08a 0%, #d4af37 70%);
 box-shadow: 0 0 6px rgba(212, 175, 55, 0.8);
}
.ama-forge-mark--nav { gap: 2px; margin-right: 2px; }
.ama-forge-mark--nav .ama-forge-mark__bar { height: 2px; }
.ama-forge-mark--nav .ama-forge-mark__bar--1 { width: 8px; }
.ama-forge-mark--nav .ama-forge-mark__bar--2 { width: 10px; }
.ama-forge-mark--nav .ama-forge-mark__bar--3 { width: 12px; }
.ama-forge-mark--nav .ama-forge-mark__spark { width: 4px; height: 4px; top: -1px; right: -2px; }
.ama-forge-mark--hub { transform: scale(1.35); }
.ama-forge-mark--hero { transform: scale(1.6); margin-right: 10px; vertical-align: middle; }
.ama-forge-mark--hero-inline { transform: scale(0.95); vertical-align: middle; margin-right: 6px; }
.ama-forge-mark--lg { transform: scale(2.2); margin: 0 auto 16px; }
.grammar-crown-hero h2 .ama-forge-mark { vertical-align: middle; }

/* ── Grammar Studio (A2-B1 academic programme) ── */
.view--grammar { background: #f7f5f1; }
.grammar-crown-hero {
 background: linear-gradient(165deg, #1a1814 0%, #2c2820 38%, #3d4a5c 100%);
 border-bottom: 1px solid rgba(201, 169, 98, 0.45);
 padding: 48px 24px 52px;
 position: relative;
 overflow: hidden;
}
.grammar-crown-hero::before {
 content: '';
 position: absolute;
 inset: 0;
 background:
 radial-gradient(ellipse 80% 60% at 100% 0%, rgba(201, 169, 98, 0.12), transparent 55%),
 linear-gradient(180deg, rgba(255,255,255,.03) 0%, transparent 40%);
 pointer-events: none;
}
.grammar-crown-hero__inner { max-width: 920px; margin: 0 auto; position: relative; z-index: 1; }
.grammar-crown-hero__eyebrow {
 font-size: .7rem;
 font-weight: 700;
 text-transform: uppercase;
 letter-spacing: .18em;
 color: rgba(201, 169, 98, 0.92);
 margin-bottom: 16px;
}
.grammar-crown-hero h2 {
 font-family: var(--serif);
 font-size: clamp(1.75rem, 4.5vw, 2.5rem);
 font-weight: 600;
 color: #faf8f5;
 letter-spacing: -0.02em;
 line-height: 1.15;
}
.grammar-crown-hero p {
 color: rgba(250, 248, 245, 0.78);
 margin-top: 16px;
 max-width: 640px;
 line-height: 1.65;
 font-size: 1rem;
}
.grammar-crown-hero__badge {
 display: inline-block;
 margin-top: 20px;
 padding: 8px 16px;
 border-radius: 4px;
 background: rgba(255, 255, 255, 0.06);
 border: 1px solid rgba(201, 169, 98, 0.35);
 color: rgba(201, 169, 98, 0.95);
 font-size: .72rem;
 font-weight: 700;
 letter-spacing: .08em;
 text-transform: uppercase;
}

.hub-grammar-crown {
 margin-bottom: 28px;
 border-radius: 8px;
 overflow: hidden;
 border: 1px solid rgba(201, 169, 98, 0.28);
 box-shadow: 0 8px 32px rgba(26, 24, 20, 0.12);
}
.hub-grammar-crown__btn {
 display: flex;
 align-items: center;
 gap: 20px;
 width: 100%;
 padding: 24px 26px;
 border: none;
 cursor: pointer;
 text-align: left;
 font-family: var(--font);
 background: linear-gradient(135deg, #1a1814, #2c2820 55%, #3d4a5c);
 color: #faf8f5;
 transition: transform .2s, box-shadow .2s;
}
.hub-grammar-crown__btn:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(26, 24, 20, 0.28); }
.hub-grammar-crown__icon {
 width: 52px;
 height: 52px;
 border-radius: 8px;
 background: rgba(201, 169, 98, 0.15);
 border: 1px solid rgba(201, 169, 98, 0.4);
 color: #c9a962;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 1.25rem;
 flex-shrink: 0;
}
.hub-grammar-crown__text strong {
 display: block;
 font-family: var(--serif);
 font-size: 1.15rem;
 font-weight: 600;
 margin-bottom: 4px;
 letter-spacing: -0.01em;
}
.hub-grammar-crown__text span { font-size: .84rem; opacity: .82; line-height: 1.45; }
.hub-grammar-crown__go {
 margin-left: auto;
 font-weight: 700;
 font-size: .8rem;
 color: #c9a962;
 white-space: nowrap;
 letter-spacing: .04em;
}

.wrap--grammar {
 background: #f7f5f1;
 padding: 36px 24px 56px;
 min-height: 360px;
}
.gc-root { min-height: 240px; max-width: 920px; margin: 0 auto; }

/* Buttons */
.gc-btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 8px;
 padding: 12px 22px;
 border-radius: 6px;
 font-family: var(--font);
 font-size: .88rem;
 font-weight: 700;
 cursor: pointer;
 touch-action: manipulation;
 border: 1px solid transparent;
 transition: background .2s, border-color .2s, transform .15s;
}
.gc-btn--primary {
 background: #2c2820;
 color: #faf8f5;
 border-color: #2c2820;
}
.gc-btn--primary:hover { background: #3d3830; transform: translateY(-1px); }
.gc-btn--ghost {
 background: #fff;
 color: #2c2820;
 border-color: rgba(44, 40, 32, 0.2);
}
.gc-btn--ghost:hover { border-color: #2c2820; background: #faf8f5; }

.gc-loading { text-align: center; padding: 48px 24px; color: #5c5348; font-weight: 600; }
.gc-error {
 text-align: center;
 padding: 40px 28px;
 max-width: 440px;
 margin: 0 auto;
 background: #fff;
 border-radius: 8px;
 border: 1px solid #c0392b;
 box-shadow: 0 4px 20px rgba(0,0,0,.06);
}
.gc-error p { color: #922b21; font-weight: 600; margin-bottom: 16px; line-height: 1.5; }
.gc-error__title { font-size: 1.05rem; font-weight: 700; color: #922b21 !important; margin-bottom: 8px !important; }

/* Home */
.gc-home { max-width: 920px; margin: 0 auto; }
.gc-home-header {
 text-align: center;
 margin-bottom: 36px;
 padding-bottom: 28px;
 border-bottom: 1px solid rgba(44, 40, 32, 0.1);
}
.gc-home-kicker {
 font-size: .68rem;
 font-weight: 700;
 text-transform: uppercase;
 letter-spacing: .16em;
 color: #8a7f72;
 margin-bottom: 10px;
}
.gc-section-title {
 font-family: var(--serif);
 color: #1a1814;
 font-size: clamp(1.35rem, 3vw, 1.75rem);
 font-weight: 600;
 margin-bottom: 10px;
 letter-spacing: -0.02em;
}
.gc-section-lead {
 color: #5c5348;
 font-size: .92rem;
 margin-bottom: 20px;
 line-height: 1.55;
 max-width: 520px;
 margin-left: auto;
 margin-right: auto;
}
.gc-progress-bar {
 height: 4px;
 background: rgba(44, 40, 32, 0.1);
 border-radius: 2px;
 overflow: hidden;
 max-width: 320px;
 margin: 0 auto 12px;
}
.gc-progress-bar__fill {
 height: 100%;
 background: linear-gradient(90deg, #5c4d3c, #c9a962);
 border-radius: 2px;
 transition: width .4s ease;
}
.gc-progress-summary {
 text-align: center;
 color: #8a7f72;
 font-size: .82rem;
 font-weight: 600;
 letter-spacing: .02em;
}

.gc-module-grid {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
 gap: 18px;
}
.gc-module-card {
 position: relative;
 text-align: left;
 padding: 24px 22px 20px;
 border-radius: 8px;
 border: 1px solid rgba(44, 40, 32, 0.12);
 background: #fff;
 cursor: pointer;
 touch-action: manipulation;
 -webkit-tap-highlight-color: transparent;
 font-family: var(--font);
 border-top: 3px solid var(--gc-accent, #5c4d3c);
 box-shadow: 0 2px 12px rgba(26, 24, 20, 0.04);
 transition: transform .2s, box-shadow .2s, border-color .2s;
}
.gc-module-card:hover {
 transform: translateY(-3px);
 box-shadow: 0 12px 28px rgba(26, 24, 20, 0.1);
 border-color: rgba(44, 40, 32, 0.18);
}
.gc-module-card--done { border-top-color: #c9a962; background: linear-gradient(180deg, #fffdf8 0%, #fff 100%); }
.gc-module-card__code {
 display: block;
 font-size: .65rem;
 font-weight: 700;
 text-transform: uppercase;
 letter-spacing: .14em;
 color: var(--gc-accent, #5c4d3c);
 margin-bottom: 10px;
}
.gc-module-card__done {
 position: absolute;
 top: 16px;
 right: 16px;
 color: #c9a962;
 font-size: .9rem;
}
.gc-module-card h3 {
 font-family: var(--serif);
 font-size: 1.08rem;
 font-weight: 600;
 color: #1a1814;
 line-height: 1.3;
 letter-spacing: -0.01em;
}
.gc-module-card__sub {
 font-size: .8rem;
 color: #5c5348;
 margin: 10px 0 16px;
 line-height: 1.5;
}
.gc-module-card__go {
 font-size: .72rem;
 font-weight: 700;
 color: #5c4d3c;
 letter-spacing: .04em;
 text-transform: uppercase;
}

.gc-back-btn {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 padding: 10px 14px;
 margin-bottom: 20px;
 border-radius: 6px;
 border: 1px solid rgba(44, 40, 32, 0.15);
 background: #fff;
 font-weight: 700;
 font-size: .82rem;
 cursor: pointer;
 font-family: var(--font);
 color: #5c5348;
 transition: border-color .15s, color .15s;
}
.gc-back-btn:hover { border-color: #2c2820; color: #1a1814; }

/* Module hub */
.gc-module-hero {
 padding: 32px 28px;
 border-radius: 8px;
 background: linear-gradient(145deg, var(--gc-accent, #5c4d3c) 0%, #1a1814 100%);
 color: #faf8f5;
 margin-bottom: 22px;
 box-shadow: 0 8px 28px rgba(26, 24, 20, 0.18);
}
.gc-module-hero__code {
 font-size: .68rem;
 font-weight: 700;
 text-transform: uppercase;
 letter-spacing: .14em;
 opacity: .75;
}
.gc-module-hero h2 {
 font-family: var(--serif);
 font-size: clamp(1.35rem, 3vw, 1.65rem);
 font-weight: 600;
 margin-top: 8px;
 letter-spacing: -0.02em;
}
.gc-module-hero__sub { opacity: .85; margin-top: 8px; font-size: .9rem; line-height: 1.5; }
.gc-module-hero__intro {
 margin-top: 14px;
 padding-top: 14px;
 border-top: 1px solid rgba(255,255,255,.15);
 font-size: .88rem;
 line-height: 1.6;
 opacity: .9;
}
.gc-module-hero__status {
 margin-top: 14px;
 color: #c9a962;
 font-weight: 700;
 font-size: .82rem;
 letter-spacing: .04em;
}

.gc-rule-card {
 background: #fff;
 border-radius: 8px;
 padding: 22px 24px;
 border: 1px solid rgba(44, 40, 32, 0.1);
 margin-bottom: 22px;
 border-left: 3px solid #c9a962;
}
.gc-rule-card h3 {
 font-family: var(--display);
 color: #1a1814;
 margin-bottom: 12px;
 font-size: .78rem;
 font-weight: 800;
 text-transform: uppercase;
 letter-spacing: .1em;
}
.gc-rule-text { font-size: .94rem; line-height: 1.65; color: #2c2820; }

.gc-section-grid { display: grid; gap: 10px; }
.gc-section-btn {
 display: flex;
 align-items: center;
 gap: 16px;
 width: 100%;
 padding: 18px 20px;
 border-radius: 8px;
 border: 1px solid rgba(44, 40, 32, 0.1);
 background: #fff;
 cursor: pointer;
 touch-action: manipulation;
 text-align: left;
 font-family: var(--font);
 transition: border-color .2s, box-shadow .2s, transform .15s;
}
.gc-section-btn:hover {
 border-color: rgba(44, 40, 32, 0.25);
 box-shadow: 0 4px 16px rgba(26, 24, 20, 0.06);
 transform: translateX(2px);
}
.gc-section-btn__icon {
 width: 44px;
 height: 44px;
 border-radius: 6px;
 background: #f7f5f1;
 color: #5c4d3c;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 1.05rem;
 flex-shrink: 0;
}
.gc-section-btn__text strong {
 display: block;
 color: #1a1814;
 font-size: .92rem;
 font-weight: 700;
}
.gc-section-btn__sub {
 display: block;
 font-size: .76rem;
 color: #8a7f72;
 margin-top: 3px;
 line-height: 1.4;
}
.gc-section-btn__arrow { margin-left: auto; color: #b8afa3; font-size: .75rem; }

/* Lesson */
.gc-lesson-article {
 background: #fff;
 border-radius: 8px;
 border: 1px solid rgba(44, 40, 32, 0.1);
 padding: 28px 26px;
 margin-bottom: 20px;
 box-shadow: 0 2px 16px rgba(26, 24, 20, 0.04);
}
.gc-lesson-head { margin-bottom: 8px; }
.gc-lesson-code {
 font-size: .65rem;
 font-weight: 700;
 text-transform: uppercase;
 letter-spacing: .14em;
 color: #8a7f72;
}
.gc-lesson-head h2 {
 font-family: var(--serif);
 font-size: 1.45rem;
 font-weight: 600;
 color: #1a1814;
 margin: 8px 0 12px;
 letter-spacing: -0.02em;
}
.gc-lesson-intro { font-size: .95rem; line-height: 1.65; color: #2c2820; margin-bottom: 8px; }
.gc-rule-box {
 background: #faf8f5;
 border-radius: 6px;
 padding: 18px 20px;
 margin: 22px 0;
 border-left: 3px solid #5c4d3c;
}
.gc-rule-box h3 {
 font-size: .72rem;
 font-weight: 800;
 text-transform: uppercase;
 letter-spacing: .1em;
 color: #5c5348;
 margin-bottom: 10px;
}
.gc-rule-box p { font-size: .92rem; line-height: 1.6; color: #2c2820; }
.gc-lesson-block {
 background: #faf8f5;
 border: 1px solid rgba(44, 40, 32, 0.08);
 border-radius: 6px;
 padding: 20px 22px;
 margin-bottom: 14px;
}
.gc-lesson-block h3 {
 font-family: var(--serif);
 color: #1a1814;
 font-size: .95rem;
 font-weight: 600;
 margin-bottom: 12px;
}
.gc-lesson-block h3 i { color: #5c4d3c; margin-right: 8px; font-size: .85rem; }
.gc-pattern-list, .gc-example-list, .gc-mistake-list { list-style: none; margin: 0; padding: 0; }
.gc-pattern-list li, .gc-example-list li {
 padding: 11px 0;
 border-bottom: 1px solid rgba(44, 40, 32, 0.08);
 line-height: 1.55;
 font-size: .9rem;
}
.gc-pattern-label {
 display: inline-block;
 min-width: 7.5rem;
 font-size: .72rem;
 font-weight: 700;
 text-transform: uppercase;
 letter-spacing: .06em;
 color: #5c4d3c;
 margin-right: 10px;
}
.gc-pattern-text { color: #2c2820; }
.gc-mistake-list li { padding: 14px 0; border-bottom: 1px solid rgba(44, 40, 32, 0.08); }
.gc-mistake-wrong { display: block; color: #922b21; font-size: .86rem; margin-bottom: 6px; text-decoration: line-through; opacity: .85; }
.gc-mistake-right { display: block; color: #1e5631; font-size: .9rem; font-weight: 700; margin-bottom: 4px; }
.gc-mistake-note { display: block; font-size: .8rem; color: #8a7f72; font-style: italic; line-height: 1.45; }
.gc-models { margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(44, 40, 32, 0.1); }
.gc-models h3 {
 font-family: var(--serif);
 color: #1a1814;
 font-size: .95rem;
 font-weight: 600;
 margin-bottom: 12px;
}
.gc-lesson-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }

/* Drills */
.gc-drill-head {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 gap: 12px;
 margin-bottom: 18px;
}
.gc-drill-label {
 font-size: .72rem;
 font-weight: 700;
 text-transform: uppercase;
 letter-spacing: .1em;
 color: #8a7f72;
}
.gc-drill-bar {
 flex: 1;
 min-width: 100px;
 height: 3px;
 background: rgba(44, 40, 32, 0.1);
 border-radius: 2px;
 overflow: hidden;
}
.gc-drill-bar__fill {
 height: 100%;
 background: #5c4d3c;
 border-radius: 2px;
 transition: width .3s;
}
.gc-drill-card {
 background: #fff;
 border-radius: 8px;
 padding: 26px 24px;
 border: 1px solid rgba(44, 40, 32, 0.1);
 box-shadow: 0 2px 16px rgba(26, 24, 20, 0.04);
}
.gc-drill-card h3 {
 font-family: var(--serif);
 color: #1a1814;
 font-size: 1.05rem;
 font-weight: 600;
 margin-bottom: 16px;
 line-height: 1.45;
}
.gc-options { display: grid; gap: 8px; margin-top: 8px; }
.gc-option {
 padding: 14px 18px;
 border-radius: 6px;
 border: 1px solid rgba(44, 40, 32, 0.12);
 background: #faf8f5;
 text-align: left;
 font-size: .9rem;
 cursor: pointer;
 font-family: var(--font);
 transition: all .15s;
}
.gc-option:hover:not(:disabled) { border-color: #5c4d3c; background: #fff; }
.gc-option--ok { border-color: #1e5631 !important; background: #eef6f0 !important; }
.gc-option--bad { border-color: #922b21 !important; background: #fdf2f1 !important; }
.gc-option:disabled { cursor: default; }
.gc-wrong-line {
 padding: 12px 16px;
 background: #fdf2f1;
 border-radius: 6px;
 border-left: 3px solid #922b21;
 color: #922b21;
 font-size: .88rem;
 margin-bottom: 14px;
}
.gc-build-target {
 min-height: 52px;
 padding: 14px 16px;
 border-radius: 6px;
 border: 1px dashed rgba(44, 40, 32, 0.25);
 background: #faf8f5;
 margin: 12px 0;
 font-size: .92rem;
 line-height: 1.55;
}
.gc-build-bank { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.gc-build-chip {
 padding: 9px 14px;
 border-radius: 6px;
 border: 1px solid rgba(44, 40, 32, 0.2);
 background: #fff;
 font-weight: 600;
 font-size: .85rem;
 cursor: pointer;
 font-family: var(--font);
 transition: border-color .15s, background .15s;
}
.gc-build-chip:hover:not(:disabled) { border-color: #5c4d3c; }
.gc-build-chip--used { opacity: .35; pointer-events: none; }
.gc-build-clear {
 background: none;
 border: none;
 color: #5c5348;
 font-weight: 700;
 font-size: .82rem;
 cursor: pointer;
 font-family: var(--font);
 margin-bottom: 12px;
 text-decoration: underline;
 text-underline-offset: 3px;
}
.gc-build-check { margin-top: 8px; }
.gc-drill-feedback {
 margin-top: 18px;
 padding: 14px 16px;
 border-radius: 6px;
 font-size: .86rem;
 line-height: 1.55;
}
.gc-drill-feedback--ok { background: #eef6f0; color: #1e5631; border-left: 3px solid #1e5631; }
.gc-drill-feedback--bad { background: #faf6eb; color: #6b5a2e; border-left: 3px solid #c9a962; }
.gc-next-btn {
 margin-left: 8px;
 padding: 6px 14px;
 border-radius: 4px;
 border: none;
 background: #2c2820;
 color: #faf8f5;
 font-weight: 700;
 font-size: .78rem;
 cursor: pointer;
 font-family: var(--font);
}

/* Speak lab */
.gc-speak-lab h2 {
 font-family: var(--serif);
 color: #1a1814;
 font-size: 1.35rem;
 font-weight: 600;
 margin-bottom: 8px;
}
.gc-speak-lab__lead {
 color: #5c5348;
 font-size: .9rem;
 line-height: 1.55;
 margin-bottom: 20px;
}
.gc-speak-list { list-style: none; margin: 0; padding: 0; }
.gc-speak-list li {
 display: flex;
 align-items: center;
 gap: 12px;
 flex-wrap: wrap;
 padding: 14px 0;
 border-bottom: 1px solid rgba(44, 40, 32, 0.08);
 font-size: .9rem;
 line-height: 1.5;
}
.gc-speak-list--lab li { align-items: flex-start; }
.gc-speak-list--lab li p { flex: 1; margin: 0; color: #2c2820; }
.gc-speak-num {
 font-weight: 700;
 font-size: .75rem;
 color: #c9a962;
 min-width: 22px;
 letter-spacing: .04em;
}

/* Complete */
.gc-complete {
 text-align: center;
 padding: 48px 24px;
 max-width: 440px;
 margin: 0 auto;
 background: #fff;
 border-radius: 8px;
 border: 1px solid rgba(44, 40, 32, 0.1);
 box-shadow: 0 4px 24px rgba(26, 24, 20, 0.06);
}
.gc-complete__icon {
 width: 56px;
 height: 56px;
 margin: 0 auto 20px;
 border-radius: 50%;
 background: #eef6f0;
 border: 2px solid #1e5631;
 color: #1e5631;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 1.35rem;
}
.gc-complete h2 {
 font-family: var(--serif);
 color: #1a1814;
 font-size: 1.25rem;
 font-weight: 600;
 margin-bottom: 8px;
}
.gc-complete p { color: #5c5348; font-size: .9rem; line-height: 1.5; }
.gc-complete__actions { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }

.gc-module-card__course {
 font-size: .72rem;
 font-weight: 600;
 color: #2563eb;
 margin: 6px 0 4px;
 line-height: 1.35;
}
.gc-module-hero__course {
 display: inline-block;
 margin-top: 6px;
 padding: 4px 10px;
 border-radius: 4px;
 background: rgba(255,255,255,.12);
 font-size: .72rem;
 font-weight: 600;
}
.gc-lesson-course {
 display: inline-block;
 margin-left: 8px;
 padding: 3px 8px;
 border-radius: 4px;
 background: #eff6ff;
 color: #2563eb;
 font-size: .68rem;
 font-weight: 700;
}

/* Visual structure blocks */
.gc-structures { display: flex; flex-direction: column; gap: 20px; margin-bottom: 24px; }
.gc-struct {
 background: #fff;
 border: 1px solid rgba(44, 40, 32, 0.1);
 border-radius: 10px;
 padding: 20px 18px;
 box-shadow: 0 2px 12px rgba(26, 24, 20, 0.04);
}
.gc-struct__title {
 font-family: var(--serif);
 font-size: 1rem;
 font-weight: 700;
 color: #1a1814;
 margin-bottom: 12px;
 letter-spacing: -0.01em;
}
.gc-struct__hint {
 font-size: .82rem;
 color: #5c5348;
 line-height: 1.5;
 margin: -4px 0 14px;
 padding: 10px 12px;
 background: #fef9e7;
 border-radius: 6px;
 border-left: 3px solid #d97706;
}

/* Compare: simple vs complex */
.gc-compare-grid {
 display: grid;
 grid-template-columns: 1fr auto 1fr;
 gap: 12px;
 align-items: stretch;
}
.gc-compare-col {
 padding: 16px 14px;
 border-radius: 8px;
 border: 2px solid transparent;
}
.gc-compare-col--simple {
 background: #f8fafc;
 border-color: #cbd5e1;
}
.gc-compare-col--complex {
 background: #ecfdf5;
 border-color: #059669;
}
.gc-compare-label {
 display: block;
 font-size: .65rem;
 font-weight: 800;
 text-transform: uppercase;
 letter-spacing: .12em;
 margin-bottom: 8px;
 color: #64748b;
}
.gc-compare-col--complex .gc-compare-label { color: #059669; }
.gc-compare-sentence {
 font-size: .95rem;
 font-weight: 700;
 color: #1a1814;
 line-height: 1.45;
 margin-bottom: 8px;
}
.gc-compare-note { font-size: .78rem; color: #64748b; line-height: 1.4; margin: 0; }
.gc-compare-arrow {
 display: flex;
 align-items: center;
 justify-content: center;
 color: #059669;
 font-size: 1.1rem;
}

/* Flow: step columns */
.gc-flow-track { display: flex; flex-direction: column; gap: 0; }
.gc-flow-step {
 padding: 14px 16px;
 background: linear-gradient(135deg, #f8fafc 0%, #fff 100%);
 border: 1px solid #e2e8f0;
 border-radius: 8px;
 border-left: 4px solid var(--gc-accent, #2563eb);
}
.gc-flow-tag {
 display: inline-block;
 font-size: .65rem;
 font-weight: 800;
 text-transform: uppercase;
 letter-spacing: .1em;
 color: #2563eb;
 margin-bottom: 6px;
}
.gc-flow-formula {
 font-size: .92rem;
 font-weight: 800;
 color: #1e293b;
 margin: 0 0 6px;
 font-family: var(--display);
}
.gc-flow-example {
 font-size: .88rem;
 color: #475569;
 margin: 0;
 line-height: 1.45;
}
.gc-flow-arrow {
 text-align: center;
 padding: 6px 0;
 color: #94a3b8;
 font-weight: 800;
 font-size: .85rem;
}

/* Column cards */
.gc-col-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
 gap: 10px;
 margin-bottom: 12px;
}
.gc-col-card {
 padding: 14px 12px;
 background: #f1f5f9;
 border-radius: 8px;
 border-top: 3px solid #2563eb;
 text-align: center;
}
.gc-col-head {
 display: block;
 font-size: .68rem;
 font-weight: 800;
 text-transform: uppercase;
 letter-spacing: .08em;
 color: #2563eb;
 margin-bottom: 8px;
}
.gc-col-body {
 font-size: .82rem;
 font-weight: 600;
 color: #334155;
 line-height: 1.45;
 margin: 0;
}
.gc-col-example {
 padding: 12px 14px;
 background: #1e293b;
 border-radius: 8px;
 color: #f8fafc;
}
.gc-col-example span {
 display: block;
 font-size: .62rem;
 font-weight: 800;
 text-transform: uppercase;
 letter-spacing: .1em;
 opacity: .7;
 margin-bottom: 4px;
}
.gc-col-example p {
 font-size: .92rem;
 font-weight: 700;
 margin: 0;
 line-height: 1.45;
}

/* Formula rows */
.gc-formula-block {
 background: #1e293b;
 border-radius: 8px;
 padding: 16px 18px;
}
.gc-formula-row {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 gap: 8px 10px;
 padding: 8px 0;
 border-bottom: 1px solid rgba(255,255,255,.08);
}
.gc-formula-row:last-child { border-bottom: none; }
.gc-formula-part {
 font-size: .88rem;
 font-weight: 700;
 color: #f8fafc;
 padding: 4px 10px;
 background: rgba(255,255,255,.1);
 border-radius: 4px;
}
.gc-formula-op {
 font-size: .78rem;
 font-weight: 800;
 color: #fbbf24;
}

.grammar-crown-hero__stamp {
 margin-top: 14px;
 font-size: .85rem;
 color: rgba(250, 248, 245, 0.75);
 line-height: 1.5;
}
.grammar-crown-hero__stamp strong { color: #fbbf24; }
.gc-version-stamp {
 text-align: center;
 font-size: .72rem;
 font-weight: 800;
 letter-spacing: .06em;
 text-transform: uppercase;
 color: #059669;
 background: #ecfdf5;
 border: 1px solid #6ee7b7;
 border-radius: 6px;
 padding: 8px 12px;
 margin-bottom: 20px;
}

.top-main-nav.topnav--pro button[data-view="grammar-crown"] i { color: #c9a962; }

@media (max-width: 960px) {
 .hub-grammar-crown__go { display: none; }
 .hub-grammar-crown__btn { flex-wrap: wrap; }
 .gc-module-grid { grid-template-columns: 1fr; }
 .grammar-crown-hero { padding: 36px 20px 40px; }
 .gc-lesson-article { padding: 22px 18px; }
 .gc-compare-grid { grid-template-columns: 1fr; }
 .gc-compare-arrow { transform: rotate(90deg); padding: 4px 0; }
 .gc-col-grid { grid-template-columns: 1fr; }
}

/* ── AMA Grammar Workshop (2.0) ── */
.ama-g-workshop-root { min-height: 280px; max-width: 920px; margin: 0 auto; }
.ama-g-workshop-hero { border-bottom: 2px solid rgba(212, 175, 55, 0.4); }
.ama-g-workshop-version {
 text-align: center; font-size: .7rem; font-weight: 800; letter-spacing: .08em;
 text-transform: uppercase; color: #059669; background: #ecfdf5; border: 1px solid #6ee7b7;
 border-radius: 6px; padding: 8px 12px; margin-bottom: 20px;
}
.ama-g-workshop-home-head { text-align: center; margin-bottom: 24px; }
.ama-g-workshop-home-head h3 { font-family: var(--serif); color: var(--navy); font-size: 1.4rem; }
.ama-g-workshop-home-head p { color: var(--dim); font-size: .9rem; margin-top: 8px; }
.ama-g-workshop-unit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.ama-g-workshop-unit-card {
 position: relative; text-align: left; padding: 20px; border-radius: 10px;
 border: 1px solid rgba(46, 49, 146, 0.12); background: #fff; cursor: pointer;
 touch-action: manipulation; min-height: 44px; border-top: 4px solid var(--g-accent, #2563eb);
 box-shadow: 0 2px 12px rgba(15, 26, 58, 0.06); transition: transform .15s, box-shadow .15s;
}
.ama-g-workshop-unit-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(15, 26, 58, 0.1); }
.ama-g-workshop-unit-card__num { font-size: .65rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: var(--g-accent); }
.ama-g-workshop-unit-card__check { position: absolute; top: 14px; right: 14px; color: var(--gold); }
.ama-g-workshop-unit-card h3 { font-family: var(--serif); font-size: 1.02rem; color: var(--navy); margin: 8px 0 6px; }
.ama-g-workshop-unit-card__course { font-size: .72rem; color: #2563eb; margin-bottom: 10px; line-height: 1.35; }
.ama-g-workshop-unit-card__go { font-size: .72rem; font-weight: 800; color: var(--ama-blue); text-transform: uppercase; }
.ama-g-workshop-pillars { display: grid; gap: 12px; margin: 20px 0; }
.ama-g-workshop-pillar-card {
 display: block; width: 100%; text-align: left; padding: 18px 20px; min-height: 44px;
 border-radius: 10px; border: 1px solid rgba(46, 49, 146, 0.12); background: #fff; cursor: pointer;
 touch-action: manipulation; transition: border-color .15s, box-shadow .15s;
}
.ama-g-workshop-pillar-card:hover { border-color: var(--ama-blue); box-shadow: 0 4px 16px rgba(15, 26, 58, 0.08); }
.ama-g-workshop-pillar-card strong { display: block; color: var(--navy); font-size: .95rem; margin: 6px 0 4px; }
.ama-g-workshop-pillar-card span:last-child { font-size: .78rem; color: var(--dim); }
.ama-g-workshop-pillar {
 display: inline-block; font-size: .65rem; font-weight: 800; text-transform: uppercase;
 letter-spacing: .1em; padding: 4px 10px; border-radius: 4px;
}
.ama-g-workshop-pillar--study { background: #eff6ff; color: #2563eb; }
.ama-g-workshop-pillar--practice { background: #ecfdf5; color: #059669; }
.ama-g-workshop-pillar--hw { background: #fef3c7; color: #b45309; }
.ama-g-workshop-section-head { margin-bottom: 18px; }
.ama-g-workshop-section-head h2 { font-family: var(--serif); color: var(--navy); font-size: 1.25rem; margin: 10px 0 6px; }
.ama-g-workshop-course { display: inline-block; font-size: .72rem; font-weight: 700; color: #2563eb; margin-bottom: 6px; }
.ama-g-workshop-focus { font-size: .88rem; color: var(--dim); line-height: 1.5; }
.ama-g-workshop-panel { background: #fff; border: 1px solid rgba(46, 49, 146, 0.1); border-radius: 10px; padding: 18px; margin-bottom: 16px; }
.ama-g-workshop-panel--drill h3 { font-family: var(--serif); color: var(--navy); margin-bottom: 14px; }
.ama-g-workshop-panel--hw .ama-g-workshop-hw-prompt { font-size: .92rem; line-height: 1.55; margin-bottom: 16px; padding: 14px; background: #f8fafc; border-left: 3px solid var(--gold); border-radius: 6px; }
.ama-g-workshop-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 14px; }
.ama-g-workshop-col { padding: 14px; background: #f1f5f9; border-radius: 8px; border-top: 3px solid #2563eb; text-align: center; }
.ama-g-workshop-col__head { display: block; font-size: .68rem; font-weight: 800; text-transform: uppercase; color: #2563eb; margin-bottom: 8px; }
.ama-g-workshop-col__body { font-size: .82rem; font-weight: 600; color: #334155; margin: 0; line-height: 1.4; }
.ama-g-workshop-example { padding: 12px 14px; background: #0f172a; border-radius: 8px; color: #f8fafc; margin-bottom: 14px; }
.ama-g-workshop-example span { display: block; font-size: .62rem; text-transform: uppercase; opacity: .7; margin-bottom: 4px; }
.ama-g-workshop-example p { font-weight: 700; margin: 0; font-size: .92rem; }
.ama-g-workshop-formula { background: #0f172a; border-radius: 8px; padding: 16px; margin-bottom: 14px; }
.ama-g-workshop-formula__row { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.ama-g-workshop-formula__row:last-child { border-bottom: none; }
.ama-g-workshop-formula__part { font-weight: 700; color: #f8fafc; padding: 4px 10px; background: rgba(255,255,255,.1); border-radius: 4px; font-size: .88rem; }
.ama-g-workshop-formula__op { font-weight: 800; color: #fbbf24; font-size: .85rem; }
.ama-g-workshop-compare { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: stretch; margin-bottom: 14px; }
.ama-g-workshop-compare__box { padding: 16px; border-radius: 8px; border: 2px solid transparent; }
.ama-g-workshop-compare__box--weak { background: #f8fafc; border-color: #cbd5e1; }
.ama-g-workshop-compare__box--target { background: #ecfdf5; border-color: #059669; }
.ama-g-workshop-compare__tag { font-size: .65rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }
.ama-g-workshop-compare__sent { font-weight: 700; font-size: .9rem; margin: 8px 0; line-height: 1.45; color: var(--navy); }
.ama-g-workshop-compare__note { font-size: .78rem; color: var(--dim); margin: 0; }
.ama-g-workshop-compare__arrow { display: flex; align-items: center; color: #059669; }
.ama-g-workshop-flow__step { padding: 14px; background: #f8fafc; border-radius: 8px; border-left: 4px solid #2563eb; margin-bottom: 0; }
.ama-g-workshop-flow__arrow { text-align: center; padding: 6px; color: #64748b; font-weight: 800; }
.ama-g-workshop-flow__tag { font-size: .65rem; font-weight: 800; text-transform: uppercase; color: #2563eb; }
.ama-g-workshop-flow__formula { font-weight: 800; color: var(--navy); margin: 6px 0; font-size: .9rem; }
.ama-g-workshop-flow__ex { font-size: .85rem; color: var(--dim); margin: 0; }
.ama-g-workshop-options { display: grid; gap: 8px; }
.ama-g-workshop-option {
 min-height: 44px; padding: 12px 16px; border-radius: 8px; border: 1px solid rgba(46, 49, 146, 0.15);
 background: #fafbfd; text-align: left; font-size: .88rem; cursor: pointer; touch-action: manipulation;
}
.ama-g-workshop-option.is-ok { border-color: #059669; background: #ecfdf5; }
.ama-g-workshop-option.is-bad { border-color: #dc2626; background: #fef2f2; }
.ama-g-workshop-fix__wrong { padding: 12px; background: #fef2f2; border-left: 3px solid #dc2626; border-radius: 6px; color: #991b1b; margin-bottom: 8px; }
.ama-g-workshop-fix__arrow { text-align: center; color: var(--dim); font-size: .78rem; margin-bottom: 10px; }
.ama-g-workshop-build-target { min-height: 52px; padding: 14px; border: 1px dashed rgba(46, 49, 146, 0.25); border-radius: 8px; background: #fafbfd; margin: 12px 0; }
.ama-g-workshop-build-bank { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.ama-g-workshop-chip {
 min-height: 44px; padding: 10px 14px; border-radius: 8px; border: 1px solid var(--ama-blue);
 background: #fff; font-weight: 700; cursor: pointer; touch-action: manipulation;
}
.ama-g-workshop-chip.is-used { opacity: .35; pointer-events: none; }
.ama-g-workshop-link { background: none; border: none; color: var(--ama-blue); font-weight: 700; cursor: pointer; margin-bottom: 10px; text-decoration: underline; }
.ama-g-workshop-feedback { margin-top: 14px; padding: 12px; border-radius: 6px; font-size: .86rem; }
.ama-g-workshop-feedback--ok { background: #ecfdf5; color: #065f46; }
.ama-g-workshop-feedback--bad { background: #fef3c7; color: #92400e; }
.ama-g-workshop-bar { height: 4px; background: rgba(46, 49, 146, 0.1); border-radius: 2px; overflow: hidden; margin-top: 8px; }
.ama-g-workshop-bar__fill { height: 100%; background: var(--gold); transition: width .3s; }
.ama-g-workshop-say-list { list-style: none; margin: 0; padding: 0; }
.ama-g-workshop-say-list li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid rgba(46, 49, 146, 0.08); flex-wrap: wrap; }
.ama-g-workshop-say-list p { flex: 1; margin: 0; font-size: .9rem; }
.ama-g-workshop-say-num { font-weight: 800; color: var(--gold); min-width: 22px; }
.ama-g-workshop-textarea { width: 100%; padding: 12px; border-radius: 8px; border: 1px solid rgba(46, 49, 146, 0.2); font-family: var(--font); font-size: .9rem; margin-bottom: 14px; }
.ama-g-workshop-label { display: block; font-size: .78rem; font-weight: 700; color: var(--navy); margin-bottom: 6px; }
.ama-g-workshop-hw-note { font-size: .78rem; color: var(--dim); margin-top: 12px; }
.ama-g-workshop-submit-msg { font-size: .85rem; font-weight: 700; color: #059669; margin-top: 10px; }
.ama-g-workshop-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.ama-g-workshop-btn {
 min-height: 44px; padding: 12px 20px; border-radius: 8px; font-weight: 700; font-size: .88rem;
 cursor: pointer; touch-action: manipulation; border: none; font-family: var(--font);
}
.ama-g-workshop-btn--gold { background: linear-gradient(135deg, var(--gold), #c9a227); color: var(--navy); }
.ama-g-workshop-btn--ghost { background: #fff; border: 1px solid rgba(46, 49, 146, 0.2); color: var(--navy); }
.ama-g-workshop-done { color: #059669; font-weight: 700; font-size: .85rem; margin-top: 8px; }
.ama-g-workshop-banner { padding: 12px; background: #ecfdf5; border-radius: 8px; color: #065f46; font-size: .88rem; margin-bottom: 14px; }
.ama-g-workshop-error { text-align: center; padding: 32px 20px; background: #fff; border-radius: 10px; border: 1px solid #dc2626; max-width: 400px; margin: 0 auto; }
@media (max-width: 960px) {
 .ama-g-workshop-compare { grid-template-columns: 1fr; }
 .ama-g-workshop-compare__arrow { transform: rotate(90deg); justify-content: center; }
 .ama-g-workshop-unit-grid { grid-template-columns: 1fr; }
 .ama-g-lesson-areas { grid-template-columns: 1fr; }
}

/* ── Hub grammar spotlight ── */
.hub-grammar-spotlight {
 max-width: var(--wrap, 1100px);
 margin: 0 auto 0;
 padding: 0 20px 28px;
}
.hub-grammar-spotlight__btn {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 gap: 18px 24px;
 width: 100%;
 padding: 28px 32px;
 border: none;
 border-radius: 16px;
 cursor: pointer;
 text-align: left;
 font-family: var(--font);
 background: linear-gradient(135deg, #0f1a3a 0%, #1e3a5f 45%, #2d4a6f 100%);
 color: #f8fafc;
 box-shadow: 0 16px 48px rgba(15, 26, 58, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08);
 transition: transform .2s, box-shadow .2s;
 touch-action: manipulation;
 min-height: 44px;
}
.hub-grammar-spotlight__btn:hover {
 transform: translateY(-3px);
 box-shadow: 0 22px 56px rgba(15, 26, 58, 0.42);
}
.hub-grammar-spotlight__badge {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 padding: 6px 14px;
 border-radius: 999px;
 background: rgba(212, 175, 55, 0.18);
 border: 1px solid rgba(212, 175, 55, 0.45);
 color: #f5d76e;
 font-size: .72rem;
 font-weight: 800;
 letter-spacing: .08em;
 text-transform: uppercase;
 flex-shrink: 0;
}
.hub-grammar-spotlight__main { flex: 1 1 280px; min-width: 0; }
.hub-grammar-spotlight__title {
 display: block;
 font-family: var(--serif);
 font-size: clamp(1.35rem, 4vw, 1.75rem);
 font-weight: 700;
 letter-spacing: -0.02em;
 margin-bottom: 8px;
 color: #fff;
}
.hub-grammar-spotlight__sub {
 display: block;
 font-size: .92rem;
 line-height: 1.55;
 opacity: .88;
 max-width: 52ch;
}
.hub-grammar-spotlight__cta {
 display: inline-flex;
 align-items: center;
 gap: 10px;
 padding: 14px 22px;
 border-radius: 10px;
 background: linear-gradient(135deg, var(--gold), #c9a227);
 color: var(--navy);
 font-size: .82rem;
 font-weight: 800;
 text-transform: uppercase;
 letter-spacing: .06em;
 flex-shrink: 0;
 min-height: 44px;
}
@media (max-width: 720px) {
 .hub-grammar-spotlight__btn { flex-direction: column; align-items: stretch; padding: 22px 20px; }
 .hub-grammar-spotlight__cta { justify-content: center; }
}

/* ── Grammar lesson UI (2.1) ── */
.ama-g-lesson-areas {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 14px;
 margin: 22px 0;
}
.ama-g-lesson-area {
 display: flex;
 align-items: center;
 gap: 16px;
 width: 100%;
 padding: 22px 20px;
 min-height: 44px;
 border-radius: 12px;
 border: 2px solid rgba(46, 49, 146, 0.12);
 background: #fff;
 cursor: pointer;
 text-align: left;
 font-family: var(--font);
 touch-action: manipulation;
 transition: border-color .15s, box-shadow .15s, transform .15s;
}
.ama-g-lesson-area:hover {
 transform: translateY(-2px);
 box-shadow: 0 8px 28px rgba(15, 26, 58, 0.1);
}
.ama-g-lesson-area--study:hover { border-color: #2563eb; }
.ama-g-lesson-area--practice:hover { border-color: #059669; }
.ama-g-lesson-area__icon {
 width: 52px;
 height: 52px;
 border-radius: 12px;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 1.2rem;
 flex-shrink: 0;
}
.ama-g-lesson-area--study .ama-g-lesson-area__icon { background: #eff6ff; color: #2563eb; }
.ama-g-lesson-area--practice .ama-g-lesson-area__icon { background: #ecfdf5; color: #059669; }
.ama-g-lesson-area__body { flex: 1; min-width: 0; }
.ama-g-lesson-area__body strong { display: block; font-size: 1.05rem; color: var(--navy); margin-bottom: 4px; }
.ama-g-lesson-area__body span { font-size: .8rem; color: var(--dim); line-height: 1.45; }
.ama-g-lesson-area__go { color: var(--ama-blue); opacity: .6; }
.ama-g-lesson-intro-panel {
 background: #fff;
 border: 1px solid rgba(46, 49, 146, 0.1);
 border-radius: 12px;
 padding: 22px;
 margin-bottom: 18px;
}
.ama-g-lesson-intro { font-size: .95rem; line-height: 1.65; color: var(--navy); margin-bottom: 16px; }
.ama-g-lesson-subhead { font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--dim); margin-bottom: 10px; }
.ama-g-lesson-objectives { margin: 0; padding-left: 1.2rem; }
.ama-g-lesson-objectives li { font-size: .9rem; line-height: 1.55; color: var(--navy); margin-bottom: 6px; }
.ama-g-lesson-duration { font-size: .8rem; color: var(--dim); margin-top: 6px; }
.ama-g-lesson-lead { font-size: .92rem; line-height: 1.6; color: var(--dim); margin-top: 8px; }
.ama-g-lesson-dots { display: flex; gap: 8px; margin: 12px 0 4px; }
.ama-g-lesson-dot {
 width: 10px; height: 10px; border-radius: 50%;
 background: rgba(46, 49, 146, 0.15);
}
.ama-g-lesson-dot.is-active { background: var(--ama-blue); transform: scale(1.15); }
.ama-g-lesson-dot.is-done { background: #059669; }
.ama-g-lesson-panel {
 background: #fff;
 border: 1px solid rgba(46, 49, 146, 0.1);
 border-radius: 12px;
 padding: 22px;
 margin-bottom: 16px;
}
.ama-g-lesson-points { margin: 0 0 18px; padding-left: 1.2rem; }
.ama-g-lesson-points li { font-size: .9rem; line-height: 1.6; color: var(--navy); margin-bottom: 8px; }
.ama-g-lesson-examples { display: flex; flex-direction: column; gap: 12px; }
.ama-g-lesson-example {
 padding: 14px 16px;
 border-radius: 10px;
 background: #f8fafc;
 border-left: 4px solid var(--ama-blue);
}
.ama-g-lesson-example__text { font-size: .95rem; color: var(--navy); font-weight: 600; margin: 0 0 4px; line-height: 1.5; }
.ama-g-lesson-example__note { font-size: .78rem; color: var(--dim); margin: 0; }
.ama-g-lesson-tip {
 display: flex;
 gap: 12px;
 align-items: flex-start;
 margin-top: 16px;
 padding: 14px 16px;
 border-radius: 10px;
 background: #fffbeb;
 border: 1px solid #fcd34d;
}
.ama-g-lesson-tip i { color: #d97706; margin-top: 2px; }
.ama-g-lesson-tip p { margin: 0; font-size: .88rem; line-height: 1.55; color: #92400e; }
.ama-g-lesson-rule {
 background: #0f172a;
 color: #f8fafc;
 border-radius: 12px;
 padding: 20px 22px;
 margin-bottom: 18px;
}
.ama-g-lesson-rule h4 {
 font-size: .72rem;
 font-weight: 800;
 text-transform: uppercase;
 letter-spacing: .12em;
 color: #f5d76e;
 margin: 0 0 12px;
}
.ama-g-lesson-rule__line {
 font-family: ui-monospace, monospace;
 font-size: .88rem;
 line-height: 1.7;
 margin: 0 0 6px;
 color: #e2e8f0;
}
.ama-g-workshop-actions--split {
 display: flex;
 justify-content: space-between;
 align-items: center;
 gap: 12px;
 flex-wrap: wrap;
}
.ama-g-workshop-unit-card__meta {
 display: block;
 font-size: .7rem;
 color: var(--dim);
 margin-bottom: 8px;
}
.ama-g-lesson-complete {
 text-align: center;
 padding: 18px;
 margin: 16px 0;
 border-radius: 10px;
 background: #ecfdf5;
 border: 1px solid #6ee7b7;
 color: #065f46;
 font-weight: 700;
 font-size: .92rem;
}
.ama-g-lesson-complete i { margin-right: 8px; color: #059669; }

.ama-g-lesson-usage {
 margin: 14px 0;
 padding: 14px 16px;
 border-radius: 10px;
 background: #eff6ff;
 border-left: 4px solid #2563eb;
}
.ama-g-lesson-usage strong { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: #1e40af; margin-bottom: 6px; }
.ama-g-lesson-usage p { margin: 0; font-size: .9rem; line-height: 1.55; color: var(--navy); }
.ama-g-form-table {
 margin: 16px 0;
 border: 1px solid rgba(46, 49, 146, 0.12);
 border-radius: 10px;
 overflow: hidden;
 background: #fff;
}
.ama-g-form-table h4 {
 margin: 0;
 padding: 12px 16px;
 font-size: .78rem;
 text-transform: uppercase;
 letter-spacing: .08em;
 background: #f8fafc;
 border-bottom: 1px solid rgba(46, 49, 146, 0.1);
 color: var(--navy);
}
.ama-g-form-table__heads {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 0;
 background: #0f172a;
 color: #f8fafc;
}
.ama-g-form-table__head {
 padding: 10px 12px;
 font-size: .75rem;
 font-weight: 800;
 text-align: center;
}
.ama-g-form-table__row {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 border-top: 1px solid rgba(46, 49, 146, 0.08);
}
.ama-g-form-table__cell {
 padding: 12px;
 font-size: .78rem;
 line-height: 1.45;
 border-right: 1px solid rgba(46, 49, 146, 0.06);
}
.ama-g-form-table__cell:last-child { border-right: none; }
.ama-g-lesson-mistakes {
 margin: 16px 0;
 padding: 14px 16px;
 border-radius: 10px;
 background: #fef2f2;
 border: 1px solid #fecaca;
}
.ama-g-lesson-mistakes strong { display: block; color: #991b1b; margin-bottom: 8px; font-size: .85rem; }
.ama-g-lesson-mistakes li { font-size: .85rem; line-height: 1.5; color: #7f1d1d; margin-bottom: 4px; }
.practice-submit-hw--busy { opacity: .85; }
.practice-submit-msg--err { color: #dc2626; font-weight: 600; }
.admin-report-preview {
 margin: 16px 0 24px;
 padding: 18px 20px;
 border-radius: 10px;
 background: #fff;
 border: 1px solid rgba(46, 49, 146, 0.12);
 font-size: .9rem;
 line-height: 1.55;
}
.admin-report-preview h1 { font-size: 1.1rem; margin: 0 0 8px; }
.admin-report-preview h2 { font-size: .95rem; margin: 16px 0 8px; color: var(--navy); }
.admin-report-preview ul { margin: 0; padding-left: 1.2rem; }

/* ── Grammar Studio (3.1) - inside AMA app | 30 themed lessons ── */
.gram-root { min-height: 320px; max-width: 820px; margin: 0 auto; }
.grammar-crown-hero h2 i { margin-right: 10px; color: #c9a962; }
.gram-home__head { text-align: center; margin-bottom: 28px; padding: 0 8px; }
.gram-home__level {
 display: inline-block;
 background: linear-gradient(135deg, #1a1814, #3d4a5c);
 color: #c9a962;
 font-size: .65rem;
 font-weight: 800;
 letter-spacing: .14em;
 text-transform: uppercase;
 padding: 5px 14px;
 border-radius: 999px;
 margin-bottom: 12px;
}
.gram-home__head h3 { font-family: var(--serif); color: var(--navy); font-size: 1.55rem; margin: 0 0 10px; }
.gram-home__head p { color: var(--dim); font-size: .92rem; line-height: 1.65; max-width: 58ch; margin: 0 auto; }
.gram-home__stats {
 display: flex;
 justify-content: center;
 gap: 24px;
 margin-top: 18px;
 font-size: .82rem;
 color: var(--dim);
}
.gram-home__stats strong { display: block; font-size: 1.35rem; color: var(--navy); font-family: var(--serif); }
.gram-topic-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.gram-topic {
 --gram-accent: #312e81;
 --gram-light: #eef2ff;
 --gram-dark: #1e1b4b;
 position: relative;
 display: block;
 width: 100%;
 text-align: left;
 padding: 20px 20px 18px 24px;
 min-height: 44px;
 border: 1px solid rgba(15, 23, 42, 0.08);
 border-radius: 12px;
 background: #fff;
 cursor: pointer;
 touch-action: manipulation;
 font-family: var(--font);
 transition: box-shadow .18s, transform .18s;
 overflow: hidden;
 box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
}
.gram-topic__stripe {
 position: absolute;
 left: 0;
 top: 0;
 bottom: 0;
 width: 5px;
 background: linear-gradient(180deg, var(--gram-accent), var(--gram-dark));
}
.gram-topic:hover {
 box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12);
 transform: translateY(-2px);
}
.gram-topic__num { font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--gram-accent); }
.gram-topic__done { position: absolute; top: 16px; right: 16px; color: var(--gram-accent); font-size: 1.1rem; }
.gram-topic h3 { font-size: 1.05rem; color: var(--navy); margin: 10px 0 6px; font-family: var(--serif); line-height: 1.35; }
.gram-topic p { font-size: .8rem; color: var(--dim); margin: 0 0 12px; line-height: 1.45; }
.gram-topic__go { font-size: .68rem; font-weight: 800; color: var(--gram-accent); text-transform: uppercase; letter-spacing: .06em; }
.gram-lesson {
 --gram-accent: #312e81;
 --gram-light: #eef2ff;
 --gram-dark: #1e1b4b;
 --gram-grad: 135deg, #4338ca 0%, #1e1b4b 100%;
 padding-bottom: 28px;
}
.gram-lesson-hero {
 background: linear-gradient(var(--gram-grad));
 color: #fff;
 margin: -4px -4px 22px;
 padding: 22px 20px;
 border-radius: 12px;
}
.gram-crumb { font-size: .68rem; font-weight: 700; opacity: .85; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 8px; }
.gram-lesson__title { font-family: var(--serif); font-size: 1.45rem; color: inherit; margin: 0 0 8px; line-height: 1.3; }
.gram-lesson-hero .gram-lesson__title { color: #fff; }
.gram-lesson__topic { margin: 0; font-size: .88rem; opacity: .9; }
.gram-objective {
 background: var(--gram-light);
 border-left: 4px solid var(--gram-accent);
 padding: 16px 18px;
 margin-bottom: 18px;
 border-radius: 0 10px 10px 0;
}
.gram-objective strong {
 display: block;
 font-size: .68rem;
 text-transform: uppercase;
 letter-spacing: .1em;
 color: var(--gram-accent);
 margin-bottom: 6px;
}
.gram-objective p { margin: 0; line-height: 1.6; color: #334155; font-size: .92rem; }
.gram-we-use { font-size: .95rem; line-height: 1.7; color: #334155; margin-bottom: 20px; }
.gram-grammar-box {
 background: var(--gram-light);
 border-left: 4px solid var(--gram-accent);
 padding: 18px 20px;
 margin-bottom: 18px;
 border-radius: 0 10px 10px 0;
}
.gram-grammar-box strong {
 display: block;
 font-size: .68rem;
 text-transform: uppercase;
 letter-spacing: .1em;
 color: var(--gram-accent);
 margin-bottom: 10px;
}
.gram-grammar-box pre {
 margin: 0;
 font-family: var(--font);
 font-size: .9rem;
 line-height: 1.65;
 white-space: pre-wrap;
 color: #0f172a;
}
.gram-mistakes {
 background: #fef2f2;
 border: 1px solid #fecaca;
 border-radius: 10px;
 padding: 14px 16px;
 margin-bottom: 16px;
}
.gram-mistakes strong { display: block; color: #991b1b; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 8px; }
.gram-mistakes ul { margin: 0; padding-left: 18px; font-size: .86rem; line-height: 1.55; color: #7f1d1d; }
.gram-exam-tip {
 display: flex;
 gap: 12px;
 align-items: flex-start;
 background: #fffbeb;
 border: 1px solid #fcd34d;
 border-radius: 10px;
 padding: 14px 16px;
 margin-bottom: 18px;
}
.gram-exam-tip i { color: #b45309; margin-top: 2px; }
.gram-exam-tip strong { display: block; color: #92400e; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 4px; }
.gram-exam-tip p { margin: 0; line-height: 1.55; color: #78350f; font-size: .88rem; }
.gram-block-label {
 font-size: .68rem;
 font-weight: 800;
 text-transform: uppercase;
 letter-spacing: .1em;
 color: var(--gram-accent);
 margin: 18px 0 8px;
}
.gram-structures {
 background: #fff;
 border: 1px solid color-mix(in srgb, var(--gram-accent) 20%, #e2e8f0);
 border-radius: 10px;
 padding: 16px 18px;
 margin: 18px 0;
}
.gram-structures strong {
 display: block;
 font-size: .68rem;
 text-transform: uppercase;
 letter-spacing: .1em;
 color: var(--gram-accent);
 margin-bottom: 12px;
}
.gram-structures ul { list-style: none; margin: 0; padding: 0; }
.gram-structures li {
 padding: 12px 0;
 border-bottom: 1px solid #f1f5f9;
}
.gram-structures li:last-child { border-bottom: none; }
.gram-structures__pat {
 display: block;
 font-family: ui-monospace, monospace;
 font-size: .78rem;
 background: var(--gram-light);
 color: var(--gram-dark);
 padding: 6px 10px;
 border-radius: 6px;
 margin-bottom: 8px;
}
.gram-structures__ex { margin: 0 0 4px; font-weight: 600; color: var(--navy); font-size: .9rem; }
.gram-structures__note { font-size: .76rem; color: var(--dim); font-style: italic; }
.gram-phrases {
 background: var(--gram-light);
 border-radius: 10px;
 padding: 16px 18px;
 margin: 18px 0;
 border: 1px solid color-mix(in srgb, var(--gram-accent) 18%, #e2e8f0);
}
.gram-phrases strong {
 display: block;
 font-size: .68rem;
 text-transform: uppercase;
 letter-spacing: .1em;
 color: var(--gram-accent);
 margin-bottom: 12px;
}
.gram-phrases ul { list-style: none; margin: 0; padding: 0; }
.gram-phrases li { padding: 10px 0; border-bottom: 1px dashed color-mix(in srgb, var(--gram-accent) 25%, #cbd5e1); }
.gram-phrases li:last-child { border-bottom: none; }
.gram-phrases__en { margin: 0 0 4px; font-weight: 700; color: var(--navy); font-size: .92rem; }
.gram-phrases__use { font-size: .78rem; color: var(--dim); line-height: 1.45; }
.gram-models {
 margin: 20px 0;
}
.gram-models > strong {
 display: block;
 font-size: .68rem;
 text-transform: uppercase;
 letter-spacing: .1em;
 color: var(--gram-accent);
 margin-bottom: 12px;
}
.gram-models__item {
 background: #fff;
 border: 1px solid #e2e8f0;
 border-left: 4px solid var(--gram-accent);
 border-radius: 0 10px 10px 0;
 padding: 16px 18px;
 margin-bottom: 12px;
}
.gram-models__q { margin: 0 0 10px; font-size: .88rem; color: var(--dim); line-height: 1.5; }
.gram-models__q span {
 display: inline-block;
 background: var(--gram-accent);
 color: #fff;
 font-size: .65rem;
 font-weight: 800;
 padding: 2px 8px;
 border-radius: 4px;
 margin-right: 6px;
}
.gram-models__a { margin: 0; font-size: .9rem; line-height: 1.65; color: var(--navy); font-weight: 500; }
.gram-hub-preview {
 display: flex;
 flex-wrap: wrap;
 gap: 8px;
 margin-bottom: 18px;
}
.gram-hub-preview span {
 font-size: .68rem;
 font-weight: 700;
 text-transform: uppercase;
 letter-spacing: .06em;
 background: var(--gram-light);
 color: var(--gram-accent);
 padding: 5px 10px;
 border-radius: 999px;
 border: 1px solid color-mix(in srgb, var(--gram-accent) 20%, #e2e8f0);
}
.gram-topic__meta {
 display: block;
 font-size: .68rem;
 color: var(--dim);
 margin-bottom: 8px;
}
.gram-dots { display: flex; gap: 6px; margin-bottom: 14px; }
.gram-dot { width: 8px; height: 8px; border-radius: 999px; background: #e2e8f0; }
.gram-dot.is-on { background: var(--gram-accent); }
.gram-mode-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 22px 0; }
.gram-mode {
 display: flex;
 flex-direction: column;
 align-items: flex-start;
 gap: 8px;
 padding: 22px 18px;
 min-height: 44px;
 border: 2px solid #e2e8f0;
 border-radius: 12px;
 background: #fff;
 cursor: pointer;
 text-align: left;
 font-family: var(--font);
 touch-action: manipulation;
 transition: border-color .15s, box-shadow .15s;
}
.gram-mode:hover { box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08); }
.gram-mode i { font-size: 1.3rem; color: var(--gram-accent); }
.gram-mode--study { border-color: color-mix(in srgb, var(--gram-accent) 35%, #e2e8f0); }
.gram-mode--practice { border-color: color-mix(in srgb, var(--gram-accent) 55%, #6ee7b7); }
.gram-mode strong { font-size: 1.02rem; color: var(--navy); }
.gram-mode span { font-size: .78rem; color: var(--dim); line-height: 1.45; }
.gram-pill {
 display: inline-block;
 font-size: .62rem;
 font-weight: 800;
 text-transform: uppercase;
 letter-spacing: .1em;
 padding: 5px 12px;
 border-radius: 999px;
 margin-bottom: 10px;
}
.gram-pill--study { background: var(--gram-light); color: var(--gram-accent); }
.gram-pill--practice { background: color-mix(in srgb, var(--gram-accent) 12%, #ecfdf5); color: var(--gram-dark); }
.gram-body { font-size: .93rem; line-height: 1.7; color: #334155; margin-bottom: 16px; }
.gram-examples { list-style: none; margin: 0 0 20px; padding: 0; }
.gram-examples li {
 padding: 16px 18px;
 margin-bottom: 10px;
 background: #f8fafc;
 border-radius: 10px;
 border-left: 4px solid var(--gram-accent);
}
.gram-examples__t { margin: 0 0 4px; font-weight: 600; color: var(--navy); font-size: .93rem; }
.gram-examples__n { margin: 0; font-size: .76rem; color: var(--dim); font-style: italic; }
.gram-form { margin: 20px 0; border: 1px solid #e2e8f0; border-radius: 10px; overflow: hidden; }
.gram-form__heads {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 background: var(--gram-dark);
 color: #fff;
 font-size: .74rem;
 font-weight: 800;
 text-align: center;
}
.gram-form__heads span { padding: 11px 8px; border-right: 1px solid rgba(255,255,255,.12); }
.gram-form__heads span:last-child { border-right: none; }
.gram-form__row { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid #e2e8f0; }
.gram-form__cell { padding: 12px 10px; font-size: .78rem; line-height: 1.5; border-right: 1px solid #f1f5f9; }
.gram-form__cell:last-child { border-right: none; }
.gram-form__row:nth-child(even) .gram-form__cell { background: var(--gram-light); }
.gram-speak-focus {
 background: var(--gram-light);
 border: 1px solid color-mix(in srgb, var(--gram-accent) 25%, #e2e8f0);
 border-radius: 10px;
 padding: 18px;
 margin-bottom: 20px;
}
.gram-speak-focus strong { display: block; color: var(--gram-accent); margin-bottom: 8px; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; }
.gram-speak-focus p { margin: 0; line-height: 1.6; color: #334155; }
.gram-q { font-size: 1.05rem; color: var(--navy); margin: 0 0 18px; line-height: 1.5; font-family: var(--serif); }
.gram-fix { color: #dc2626; font-weight: 600; margin-bottom: 14px; padding: 14px; background: #fef2f2; border-radius: 10px; border-left: 4px solid #dc2626; }
.gram-opts { display: flex; flex-direction: column; gap: 10px; }
.gram-opt {
 display: block;
 width: 100%;
 text-align: left;
 padding: 15px 16px;
 min-height: 44px;
 border: 2px solid #e2e8f0;
 border-radius: 10px;
 background: #fff;
 cursor: pointer;
 font-family: var(--font);
 font-size: .9rem;
 touch-action: manipulation;
 transition: border-color .12s;
}
.gram-opt.is-ok { border-color: #22c55e; background: #ecfdf5; }
.gram-opt.is-bad { border-color: #ef4444; background: #fef2f2; }
.gram-build {
 min-height: 56px;
 padding: 16px;
 background: var(--gram-dark);
 color: #f8fafc;
 border-radius: 10px;
 margin-bottom: 14px;
 font-size: .95rem;
 line-height: 1.55;
}
.gram-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.gram-chip {
 padding: 10px 14px;
 min-height: 44px;
 border: 1px solid color-mix(in srgb, var(--gram-accent) 30%, #cbd5e1);
 border-radius: 999px;
 background: #fff;
 cursor: pointer;
 font-size: .88rem;
 touch-action: manipulation;
}
.gram-chip:disabled { opacity: .45; }
.gram-fb { min-height: 1.5em; margin: 14px 0; font-size: .88rem; font-weight: 600; }
.gram-fb--ok { color: #047857; }
.gram-fb--bad { color: #dc2626; }
.gram-say { list-style: none; margin: 0 0 20px; padding: 0; }
.gram-say li {
 display: flex;
 align-items: flex-start;
 gap: 12px;
 padding: 16px 0;
 border-bottom: 1px solid #e2e8f0;
}
.gram-say li span {
 width: 30px;
 height: 30px;
 border-radius: 50%;
 background: var(--gram-accent);
 color: #fff;
 font-size: .75rem;
 font-weight: 800;
 display: flex;
 align-items: center;
 justify-content: center;
 flex-shrink: 0;
}
.gram-say li p { margin: 0; flex: 1; font-size: .93rem; line-height: 1.55; color: var(--navy); }
.gram-done { text-align: center; color: var(--gram-accent); font-weight: 700; margin: 18px 0; font-size: 1rem; }
.gram-btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-height: 44px;
 padding: 12px 24px;
 border-radius: 10px;
 border: none;
 cursor: pointer;
 font-family: var(--font);
 font-weight: 700;
 font-size: .88rem;
 touch-action: manipulation;
}
.gram-btn--primary { background: var(--gram-accent); color: #fff; }
.gram-btn--primary:hover { filter: brightness(1.08); }
.gram-btn--ghost { background: #fff; border: 1px solid #cbd5e1; color: var(--navy); }
.gram-link-btn {
 display: inline-block;
 margin-top: 14px;
 padding: 10px 0;
 min-height: 44px;
 border: none;
 background: none;
 color: var(--gram-accent);
 font-weight: 700;
 cursor: pointer;
 font-family: var(--font);
}
.gram-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 24px; flex-wrap: wrap; }
.gram-error { text-align: center; padding: 36px; background: #fff; border-radius: 12px; border: 1px solid #fecaca; }
.wrap--grammar { padding-top: 24px; padding-bottom: 40px; }
@media (max-width: 640px) {
 .gram-mode-grid { grid-template-columns: 1fr; }
 .gram-topic-grid { grid-template-columns: 1fr; }
 .gram-form__heads, .gram-form__row { grid-template-columns: 1fr !important; }
 .gram-form__heads span, .gram-form__cell { border-right: none; border-bottom: 1px solid #f1f5f9; }
 .gram-hero h2 { font-size: 1.55rem; }
 .gram-lesson-hero { margin-left: 0; margin-right: 0; }
}

/* ═══ Hub: Real Speaking Lab + Pronunciation & Sounds ═══ */
.hub-speak-labs {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 14px;
 margin-bottom: 28px;
}
.hub-speak-lab {
 display: flex;
 align-items: center;
 gap: 16px;
 width: 100%;
 padding: 20px 22px;
 border: none;
 cursor: pointer;
 text-align: left;
 font-family: var(--font);
 border-radius: 8px;
 color: #f0fdfa;
 transition: transform .2s, box-shadow .2s;
}
.hub-speak-lab:hover { transform: translateY(-2px); }
.hub-speak-lab--fluency {
 background: linear-gradient(135deg, #92400e, #d97706 55%, #b45309);
 border: 1px solid rgba(251, 191, 36, 0.45);
 box-shadow: 0 8px 28px rgba(180, 83, 9, 0.22);
}
.hub-speak-lab--fluency:hover { box-shadow: 0 14px 36px rgba(180, 83, 9, 0.32); }
.hub-speak-lab--pron {
 background: linear-gradient(135deg, #064e3b, #0f766e 55%, #134e4a);
 border: 1px solid rgba(13, 148, 136, 0.35);
 box-shadow: 0 8px 28px rgba(13, 148, 136, 0.12);
}
.hub-speak-lab--pron:hover { box-shadow: 0 14px 36px rgba(6, 78, 59, 0.28); }
.hub-speak-lab__icon {
 width: 48px; height: 48px; border-radius: 8px;
 background: rgba(255,255,255,.12);
 border: 1px solid rgba(255,255,255,.25);
 color: #fde68a;
 display: flex; align-items: center; justify-content: center;
 font-size: 1.2rem; flex-shrink: 0;
}
.hub-speak-lab--pron .hub-speak-lab__icon { color: #5eead4; }
.hub-speak-lab__text strong {
 display: block; font-family: var(--serif); font-size: 1.05rem;
 font-weight: 600; margin-bottom: 4px;
}
.hub-speak-lab__text span { font-size: .8rem; opacity: .9; line-height: 1.4; display: block; }
.hub-speak-lab__go {
 margin-left: auto; font-weight: 700; font-size: .78rem;
 white-space: nowrap; opacity: .95;
}
.hub-speak-lab--fluency .hub-speak-lab__go { color: #fde68a; }
.hub-speak-lab--pron .hub-speak-lab__go { color: #5eead4; }

/* legacy single-button hub card (kept for older bookmarks) */
.hub-sounds-studio {
 margin-bottom: 28px;
 border-radius: 8px;
 overflow: hidden;
 border: 1px solid rgba(13, 148, 136, 0.35);
 box-shadow: 0 8px 32px rgba(13, 148, 136, 0.12);
}
.hub-sounds-studio__btn {
 display: flex;
 align-items: center;
 gap: 20px;
 width: 100%;
 padding: 24px 26px;
 border: none;
 cursor: pointer;
 text-align: left;
 font-family: var(--font);
 background: linear-gradient(135deg, #064e3b, #0f766e 55%, #134e4a);
 color: #f0fdfa;
 transition: transform .2s, box-shadow .2s;
}
.hub-sounds-studio__btn:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(6, 78, 59, 0.28); }
.hub-sounds-studio__icon {
 width: 52px; height: 52px; border-radius: 8px;
 background: rgba(255,255,255,.12);
 border: 1px solid rgba(255,255,255,.25);
 color: #5eead4;
 display: flex; align-items: center; justify-content: center;
 font-size: 1.25rem; flex-shrink: 0;
}
.hub-sounds-studio__text strong {
 display: block; font-family: var(--serif); font-size: 1.15rem;
 font-weight: 600; margin-bottom: 4px;
}
.hub-sounds-studio__text span { font-size: .84rem; opacity: .88; line-height: 1.45; }
.hub-sounds-studio__go {
 margin-left: auto; font-weight: 700; font-size: .8rem;
 color: #5eead4; white-space: nowrap;
}
.view--sounds { background: #f0fdfa; }
.sounds-studio-hero {
 position: relative; padding: 48px 24px 52px;
 background: linear-gradient(135deg, #064e3b 0%, #0f766e 45%, #134e4a 100%);
 color: #f0fdfa; overflow: hidden;
}
.sounds-studio-hero::before {
 content: ''; position: absolute; inset: 0;
 background: radial-gradient(circle at 85% 20%, rgba(94,234,212,.2), transparent 45%);
 pointer-events: none;
}
.sounds-studio-hero__inner { max-width: 920px; margin: 0 auto; position: relative; z-index: 1; }
.sounds-studio-hero__eyebrow {
 font-size: .72rem; text-transform: uppercase; letter-spacing: .14em; opacity: .85; margin: 0 0 10px;
}
.sounds-studio-hero h2 {
 font-family: var(--serif); font-size: clamp(1.5rem, 4vw, 2rem); margin: 0 0 12px;
}
.sounds-studio-hero h2 i { margin-right: 10px; color: #5eead4; }
.sounds-studio-hero p { max-width: 62ch; line-height: 1.65; opacity: .92; margin: 0 0 16px; }
.sounds-studio-hero__badge {
 display: inline-block; padding: 8px 14px; border-radius: 999px;
 background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2);
 font-size: .75rem; font-weight: 700;
}
.wrap--sounds { padding: 28px 20px 56px; min-height: 360px; }
.snd-root { max-width: 920px; margin: 0 auto; }
.snd-loading { text-align: center; padding: 32px 20px; color: #64748b; font-size: .92rem; }
.snd-home__head { text-align: center; margin-bottom: 24px; }
.snd-home__level {
 font-size: .72rem; text-transform: uppercase; letter-spacing: .12em;
 color: #0d9488; font-weight: 700; margin-bottom: 8px;
}
.snd-home__head h3 { font-family: var(--serif); color: var(--navy); font-size: 1.5rem; margin: 0 0 8px; }
.snd-home__head p { color: var(--dim); font-size: .92rem; line-height: 1.6; max-width: 58ch; margin: 0 auto 16px; }
.snd-home__stats {
 display: flex; justify-content: center; gap: 24px; flex-wrap: wrap;
}
.snd-home__stats strong { display: block; font-size: 1.35rem; color: var(--navy); font-family: var(--serif); }
.snd-method {
 background: #fff; border: 1px solid #ccfbf1; border-radius: 12px;
 padding: 16px 18px; margin-bottom: 24px;
}
.snd-method strong { display: block; margin-bottom: 10px; color: var(--navy); }
.snd-method ol { margin: 0; padding-left: 0; list-style: none; display: grid; gap: 8px; }
.snd-method li { font-size: .88rem; color: var(--dim); }
.snd-method li i { color: #0d9488; margin-right: 8px; width: 18px; text-align: center; }
.snd-topic-grid {
 display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px;
}
.snd-topic {
 position: relative; text-align: left; padding: 20px 18px 18px;
 border: 1px solid #e2e8f0; border-radius: 14px; background: #fff;
 cursor: pointer; font-family: var(--font);
 box-shadow: 0 4px 16px rgba(15, 23, 42, .06);
 transition: transform .18s, box-shadow .18s;
}
.snd-topic:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(15, 23, 42, .1); }
.snd-topic__stripe {
 position: absolute; top: 0; left: 0; right: 0; height: 4px;
 border-radius: 14px 14px 0 0; background: var(--snd-grad);
}
.snd-topic__num { font-size: .68rem; font-weight: 700; text-transform: uppercase; color: var(--snd-accent); letter-spacing: .06em; }
.snd-topic__done { position: absolute; top: 14px; right: 14px; color: #059669; font-size: 1.1rem; }
.snd-topic h3 { font-family: var(--serif); font-size: 1.05rem; color: var(--navy); margin: 8px 0 6px; line-height: 1.35; }
.snd-topic p { font-size: .82rem; color: var(--dim); margin: 0 0 8px; }
.snd-topic__ipa { display: block; font-size: .78rem; color: var(--snd-accent); font-weight: 700; margin-bottom: 6px; }
.snd-topic__unit { display: block; font-size: .72rem; color: #64748b; margin-bottom: 8px; }
.snd-topic__unit i { color: #0d9488; }
.snd-topic__go { font-size: .78rem; font-weight: 700; color: var(--snd-accent); }
.snd-lesson {
 background: #fff; border-radius: 16px; border: 1px solid #e2e8f0;
 padding: 24px 22px 28px; box-shadow: 0 8px 28px rgba(15, 23, 42, .06);
}
.snd-pill {
 display: inline-block; padding: 6px 12px; border-radius: 999px;
 background: var(--snd-light); color: var(--snd-dark);
 font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
 margin-bottom: 12px;
}
.snd-dots { display: flex; gap: 8px; margin-bottom: 16px; }
.snd-dot { width: 10px; height: 10px; border-radius: 50%; background: #e2e8f0; }
.snd-dot.is-active { background: var(--snd-accent); transform: scale(1.15); }
.snd-dot.is-done { background: #6ee7b7; }
.snd-lesson-hero { margin-bottom: 18px; }
.snd-crumb { font-size: .72rem; font-weight: 700; color: var(--snd-accent); text-transform: uppercase; letter-spacing: .06em; }
.snd-lesson__title { font-family: var(--serif); color: var(--navy); font-size: 1.45rem; margin: 8px 0 6px; }
.snd-lesson__topic { color: var(--dim); margin: 0 0 6px; }
.snd-lesson__ipa { font-weight: 700; color: var(--snd-accent); font-size: .9rem; }
.snd-linked {
 padding: 10px 14px; border-radius: 10px; background: #f0fdfa;
 border: 1px solid #99f6e4; font-size: .84rem; margin-bottom: 14px;
}
.snd-linked i { color: #0d9488; margin-right: 6px; }
.snd-tip {
 border-radius: 12px; padding: 14px 16px; margin-bottom: 12px; font-size: .88rem; line-height: 1.55;
}
.snd-tip--vn { background: #fff7ed; border: 1px solid #fed7aa; }
.snd-tip--mouth { background: #f0f9ff; border: 1px solid #bae6fd; }
.snd-tip strong { display: block; margin-bottom: 6px; color: var(--navy); }
.snd-tip strong i { margin-right: 6px; color: #d97706; }
.snd-tip--mouth strong i { color: #0284c7; }
.snd-steps-preview {
 display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 20px;
}
.snd-steps-preview span {
 font-size: .72rem; font-weight: 700; padding: 6px 10px; border-radius: 999px;
 background: #f1f5f9; color: #475569;
}
.snd-steps-preview span:first-child { background: var(--snd-light); color: var(--snd-dark); }
.snd-btn {
 display: inline-flex; align-items: center; justify-content: center; gap: 8px;
 padding: 12px 20px; border-radius: 10px; border: none; cursor: pointer;
 font-family: var(--font); font-weight: 700; font-size: .88rem; touch-action: manipulation;
}
.snd-btn--primary { background: var(--snd-accent); color: #fff; }
.snd-btn--primary:hover { filter: brightness(1.06); }
.snd-btn--ghost { background: #fff; border: 1px solid #cbd5e1; color: var(--navy); }
.snd-btn--lg { width: 100%; max-width: 320px; padding: 14px 22px; font-size: .95rem; }
.snd-btn--rec { background: #dc2626; color: #fff; }
.snd-btn--stop { background: #1e293b; color: #fff; }
.snd-btn:disabled { opacity: .5; cursor: not-allowed; }
.snd-link-btn {
 display: inline-block; margin-top: 14px; padding: 10px 0; border: none; background: none;
 color: var(--snd-accent); font-weight: 700; cursor: pointer; font-family: var(--font);
}
.snd-step-title { font-family: var(--serif); color: var(--navy); font-size: 1.2rem; margin: 0 0 10px; }
.snd-body { color: var(--dim); line-height: 1.6; font-size: .9rem; margin-bottom: 16px; }
.snd-pairs { display: grid; gap: 14px; }
.snd-pair {
 border: 1px solid #e2e8f0; border-radius: 12px; padding: 14px;
 display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: start;
}
.snd-pair__word strong { display: block; font-size: 1.1rem; color: var(--navy); }
.snd-pair__word code { font-size: .78rem; color: var(--snd-accent); }
.snd-pair__label { font-size: .65rem; font-weight: 800; color: #94a3b8; text-transform: uppercase; }
.snd-pair__vs { align-self: center; font-weight: 800; color: #cbd5e1; font-size: .8rem; }
.snd-pair__note { grid-column: 1 / -1; font-size: .78rem; color: #64748b; margin: 4px 0 0; }
.snd-shadow-count { font-size: .78rem; font-weight: 700; color: var(--snd-accent); margin-bottom: 10px; }
.snd-shadow-card {
 text-align: center; padding: 28px 20px; border-radius: 14px;
 background: linear-gradient(180deg, var(--snd-light), #fff);
 border: 1px solid #ccfbf1; margin-bottom: 20px;
}
.snd-shadow__text { font-size: 1.5rem; font-family: var(--serif); color: var(--navy); margin: 0 0 8px; }
.snd-shadow__ipa { display: block; color: var(--snd-accent); font-weight: 700; margin-bottom: 12px; }
.snd-shadow__hint { font-size: .84rem; color: var(--dim); margin: 0; }
.snd-compare-phrase {
 text-align: center; padding: 20px; border-radius: 12px;
 background: #f8fafc; border: 1px solid #e2e8f0; margin-bottom: 18px;
}
.snd-compare-phrase p { font-size: 1.15rem; font-family: var(--serif); color: var(--navy); margin: 0 0 10px; }
.snd-compare-grid {
 display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px;
}
.snd-compare-col {
 padding: 16px; border-radius: 12px; border: 1px solid #e2e8f0; background: #fafafa;
}
.snd-compare-col strong { display: block; margin-bottom: 12px; font-size: .88rem; color: var(--navy); }
.snd-rec-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.snd-rec-status { font-size: .84rem; color: var(--dim); margin: 0 0 16px; }
.snd-rec-status--rec { color: #dc2626; font-weight: 700; }
.snd-rec-status--ok { color: #059669; font-weight: 700; }
.snd-rec-status--warn { color: #b45309; font-weight: 700; }
.snd-rec-live {
 display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
 margin: 12px 0; padding: 12px 16px; background: #f8fafc;
 border-radius: 12px; border: 2px solid #e2e8f0;
}
.snd-rec-live.is-recording {
 border-color: #f87171; background: linear-gradient(135deg, #fef2f2 0%, #fff1f2 100%);
 box-shadow: 0 0 0 3px rgba(239, 68, 68, .12);
}
.snd-rec-live__dot {
 width: 12px; height: 12px; border-radius: 50%; background: #94a3b8; flex-shrink: 0;
}
.snd-rec-live__dot.is-recording {
 background: #ef4444;
 animation: snd-rec-pulse 1s ease-in-out infinite;
}
.snd-rec-live__time {
 font-size: 1.35rem; font-weight: 800; font-variant-numeric: tabular-nums;
 color: var(--navy); min-width: 4.5ch; letter-spacing: .02em;
}
.snd-rec-live.is-recording .snd-rec-live__time { color: #dc2626; }
.snd-rec-live__label { font-size: .84rem; font-weight: 700; color: #64748b; flex: 1; min-width: 140px; }
.snd-rec-live.is-recording .snd-rec-live__label { color: #b91c1c; }
@keyframes snd-rec-pulse {
 0%, 100% { opacity: 1; transform: scale(1); }
 50% { opacity: .4; transform: scale(.92); }
}
.snd-you-audio { width: 100%; margin-top: 10px; }
.snd-apply-context { font-size: .84rem; color: #64748b; margin-bottom: 12px; }
.snd-apply-card {
 padding: 20px; border-radius: 12px; background: var(--snd-light);
 border: 1px solid #99f6e4; margin-bottom: 16px;
}
.snd-apply__text { font-size: 1.1rem; font-family: var(--serif); color: var(--navy); margin: 0 0 10px; line-height: 1.55; }
.snd-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 20px; }
.snd-actions--center { justify-content: center; }
.snd-done { text-align: center; font-size: 3rem; color: #059669; margin-bottom: 8px; }
.snd-error { text-align: center; padding: 36px; background: #fff; border-radius: 12px; border: 1px solid #fecaca; }

/* ── Pronunciation premium UI ── */
.snd-progress-bar {
 max-width: 320px; margin: 0 auto 20px; height: 8px; border-radius: 999px;
 background: #e2e8f0; overflow: hidden;
}
.snd-progress-bar span {
 display: block; height: 100%; border-radius: 999px;
 background: linear-gradient(90deg, #0d9488, #059669); transition: width .4s ease;
}
.snd-ipa-board {
 margin-bottom: 22px; padding: 18px 20px; border-radius: 14px;
 background: linear-gradient(135deg, #f0fdfa, #ecfeff); border: 1px solid #99f6e4;
}
.snd-ipa-board h4 { font-size: .88rem; color: #0f766e; margin: 0 0 12px; }
.snd-ipa-board h4 i { margin-right: 8px; }
.snd-ipa-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.snd-ipa-chip {
 display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
 padding: 10px 12px; border-radius: 10px; border: 1px solid #cbd5e1;
 background: #fff; cursor: pointer; font-family: var(--font); text-align: left;
 min-width: 88px; transition: transform .15s, box-shadow .15s;
}
.snd-ipa-chip:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(13, 148, 136, .15); }
.snd-ipa-chip code { font-size: 1rem; font-weight: 800; color: #0d9488; }
.snd-ipa-chip span { font-size: .72rem; font-weight: 700; color: var(--navy); }
.snd-ipa-chip em { font-size: .65rem; color: #64748b; font-style: normal; }
.snd-topic__emoji { position: absolute; top: 42px; right: 14px; font-size: 1.4rem; opacity: .85; }
.snd-spotlight { margin-bottom: 18px; }
.snd-spotlight__hero {
 text-align: center; padding: 24px 20px; border-radius: 16px;
 background: linear-gradient(180deg, var(--snd-light), #fff);
 border: 2px solid var(--snd-accent); margin-bottom: 14px;
}
.snd-spotlight__emoji { font-size: 2.2rem; display: block; margin-bottom: 8px; }
.snd-spotlight__ipa-big {
 font-size: clamp(2rem, 6vw, 2.8rem); font-weight: 800; color: var(--snd-accent);
 font-family: 'Libre Baskerville', Georgia, serif; letter-spacing: .02em; line-height: 1.1;
}
.snd-spotlight__name { font-weight: 700; color: var(--navy); margin: 10px 0 6px; font-size: 1rem; }
.snd-spotlight__letters { font-size: .84rem; color: var(--dim); margin: 0 0 10px; }
.snd-spotlight__letters span {
 display: inline-block; font-size: .65rem; font-weight: 800; text-transform: uppercase;
 letter-spacing: .06em; color: var(--snd-accent); margin-right: 6px;
}
.snd-spotlight__sample { font-size: 1.05rem; font-family: var(--serif); color: var(--navy); margin: 0; }
.snd-spotlight__sample code { display: block; font-size: .82rem; color: var(--snd-accent); margin: 6px 0; }
.snd-mouth-card {
 padding: 16px 18px; border-radius: 12px; background: #f0f9ff; border: 1px solid #bae6fd;
}
.snd-mouth-card strong { display: block; margin-bottom: 10px; color: #0369a1; font-size: .88rem; }
.snd-mouth-card strong i { margin-right: 6px; }
.snd-mouth-steps { margin: 0; padding-left: 0; list-style: none; counter-reset: mouth; }
.snd-mouth-steps li {
 display: flex; gap: 10px; align-items: flex-start; font-size: .86rem;
 color: var(--dim); line-height: 1.55; margin-bottom: 8px;
}
.snd-mouth-num {
 flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
 background: var(--snd-accent); color: #fff; font-size: .72rem; font-weight: 800;
 display: inline-flex; align-items: center; justify-content: center;
}
.snd-tip--pro { background: #f5f3ff; border: 1px solid #ddd6fe; }
.snd-tip--pro strong i { color: #7c3aed; }
.snd-tip--trap { background: #fff1f2; border: 1px solid #fecdd3; }
.snd-tip--trap strong i { color: #e11d48; }
.snd-fun {
 margin: 14px 0; padding: 14px 16px; border-radius: 12px;
 background: linear-gradient(135deg, #fef9c3, #fde68a); border: 1px solid #fcd34d;
}
.snd-fun strong { display: block; margin-bottom: 6px; color: #92400e; font-size: .88rem; }
.snd-fun strong i { margin-right: 6px; }
.snd-fun p { margin: 0; font-size: .86rem; color: #78350f; line-height: 1.55; }
.snd-fun--inline { margin-top: 14px; }
.snd-hl {
 background: linear-gradient(180deg, transparent 55%, rgba(13, 148, 136, .35) 55%);
 color: inherit; padding: 0 2px; border-radius: 2px; font-weight: 800;
}
.snd-ipa-line { display: block; font-size: .82rem; color: var(--snd-accent); font-weight: 700; margin: 4px 0 6px; }
.snd-pair__spell { font-size: 1.15rem; }
.snd-compare-phrase-ipa, .snd-apply-ipa {
 display: block; font-size: .82rem; color: var(--snd-accent); font-weight: 700;
 margin: 8px 0 10px; line-height: 1.5; word-break: break-word;
}
.snd-pair__vs i { color: var(--snd-accent); font-size: 1rem; }

/* ── Shadowing Studio ── */
.snd-shad-promo {
 display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
 margin-bottom: 22px; padding: 20px 22px; border-radius: 16px;
 background: linear-gradient(135deg, #0f766e, #134e4a); color: #fff;
 box-shadow: 0 12px 32px rgba(13, 148, 136, 0.25);
}
.snd-shad-promo h4 { margin: 0 0 8px; font-family: var(--serif); font-size: 1.15rem; }
.snd-shad-promo h4 i { margin-right: 8px; color: #5eead4; }
.snd-shad-promo p { margin: 0 0 10px; font-size: .88rem; opacity: .92; max-width: 52ch; line-height: 1.55; }
.snd-shad-promo__badge {
 display: inline-block; font-size: .72rem; font-weight: 700; padding: 4px 10px;
 border-radius: 999px; background: rgba(255,255,255,.15);
}
.snd-shad-promo .snd-btn--primary { background: #fff; color: #0f766e; flex-shrink: 0; }
.snd-shad-promo .snd-btn--primary:hover { filter: brightness(1.05); }
.snd-shad-home { max-width: 920px; margin: 0 auto; }
.snd-shad-method {
 margin-bottom: 16px; padding: 16px 18px; border-radius: 12px;
 background: #f0fdfa; border: 1px solid #99f6e4;
}
.snd-shad-method strong { display: block; margin-bottom: 10px; color: #0f766e; }
.snd-shad-note {
 font-size: .84rem; color: #64748b; margin: 0 0 18px; padding: 10px 14px;
 background: #f8fafc; border-radius: 8px; border-left: 3px solid #0d9488;
}
.snd-shad-note i { color: #0d9488; margin-right: 6px; }
.snd-shad-grid {
 display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin-bottom: 20px;
}
.snd-shad-track { margin-bottom: 28px; }
.snd-shad-track__head { margin-bottom: 14px; }
.snd-shad-track__head h4 {
 font-family: var(--serif); font-size: 1.05rem; color: var(--navy); margin: 0 0 6px;
}
.snd-shad-track__head h4 i { color: #0d9488; margin-right: 8px; }
.snd-shad-track__head p { margin: 0; font-size: .84rem; color: var(--dim); max-width: 58ch; line-height: 1.5; }
.snd-shad-progress-note { font-size: .82rem; color: #0f766e; margin: 8px 0 0; font-weight: 600; }
.snd-shad-progress-note i { margin-right: 6px; }
.snd-shad-stage { margin-bottom: 22px; padding-left: 12px; border-left: 4px solid #99f6e4; }
.snd-shad-stage--starter { border-left-color: #34d399; }
.snd-shad-stage--elementary { border-left-color: #2dd4bf; }
.snd-shad-stage--challenge { border-left-color: #f472b6; }
.snd-shad-stage__head { margin-bottom: 12px; }
.snd-shad-stage__head h5 { font-family: var(--serif); font-size: .95rem; color: var(--navy); margin: 0 0 4px; }
.snd-shad-stage__head p { margin: 0; font-size: .78rem; color: var(--dim); }
.snd-shad-card__stage {
 display: inline-block; font-size: .62rem; font-weight: 800; text-transform: uppercase;
 letter-spacing: .06em; padding: 3px 8px; border-radius: 5px; margin-bottom: 6px;
}
.snd-shad-card__stage--starter { background: #d1fae5; color: #047857; }
.snd-shad-card__stage--elementary { background: #ccfbf1; color: #0f766e; }
.snd-shad-card__stage--a2 { background: #e0f2fe; color: #0369a1; }
.snd-shad-card__stage--challenge { background: #fce7f3; color: #9d174d; }
.snd-shad-card__unit { display: block; font-size: .72rem; color: #0f766e; margin-bottom: 4px; font-weight: 600; }
.snd-shad-promo--fluency { border-left: 4px solid #f59e0b; background: linear-gradient(135deg, #fffbeb 0%, #fff7ed 100%); }
.snd-shad-promo--pron { border-left: 4px solid #0d9488; background: linear-gradient(135deg, #f0fdfa 0%, #ecfeff 100%); }
.snd-version-stamp {
 margin: 10px 0 0;
 font-size: .72rem;
 font-weight: 600;
 letter-spacing: .02em;
 opacity: .65;
 color: #64748b;
}
.snd-version-stamp--fluency { color: #b45309; opacity: .85; }

/* ── Practice focus - hide chrome while practising ── */
.practice-focus-bar {
 position: relative;
 z-index: 500;
 display: none;
 align-items: center;
 gap: 10px;
 padding: 8px 12px;
 min-height: 48px;
 background: linear-gradient(135deg, #064e3b, #0f766e);
 color: #f0fdfa;
 box-shadow: 0 4px 20px rgba(0, 0, 0, 0.22);
 border-bottom: 1px solid rgba(94, 234, 212, 0.35);
}
body.practice-session .practice-focus-bar { display: flex; }
body.practice-focus .practice-focus-bar {
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
}
body.practice-focus #app-main { padding-top: 48px; }
body.practice-session:not(.practice-focus) #app-main { padding-top: 0; }
body.practice-focus .site-header,
body.practice-focus .desktop-sidebar,
body.practice-focus .quick-nav-controls,
body.practice-focus .mobile-bottom-nav,
body.practice-focus .site-foot,
body.practice-focus .bg-mesh { display: none !important; }
body.practice-session.practice-focus--sounds .sounds-studio-hero,
body.practice-session.practice-focus--sounds #view-sounds-studio .page-nav-bar { display: none !important; }
body.practice-session:not(.practice-focus).practice-focus--sounds .sounds-studio-hero,
body.practice-session:not(.practice-focus).practice-focus--sounds #view-sounds-studio .page-nav-bar {
 display: block !important;
}
body.practice-focus--sounds .view--sounds { padding-bottom: 0; }
body.practice-focus--sounds .wrap--sounds {
 padding: 8px 12px 20px;
 min-height: calc(100dvh - 52px);
 max-width: none;
}
body.practice-session:not(.practice-focus).practice-focus--sounds .wrap--sounds {
 min-height: 360px;
}
body.practice-focus--sounds .snd-root,
body.practice-focus--sounds .snd-shad-room,
body.practice-focus--sounds .snd-shad-home,
body.practice-focus--sounds .snd-end-room,
body.practice-focus--sounds .snd-lesson {
 max-width: none;
}
body.practice-focus--sounds .snd-lesson-hero {
 margin-bottom: 8px;
 padding-bottom: 0;
}
body.practice-focus .snd-lesson-hero .snd-crumb,
body.practice-focus .snd-lesson__topic { display: none; }
body.practice-focus--sounds .snd-lesson-hero h2 {
 font-size: 1.1rem;
 margin: 0 0 4px;
}
body.practice-focus .snd-shad-situation,
body.practice-focus .snd-tip--pro { display: none; }
body.practice-focus--sounds .snd-shad-video-sync {
 margin-bottom: 8px;
 padding: 8px 10px;
 font-size: .76rem;
}
body.practice-focus--sounds .snd-shad-video-wrap {
 margin-bottom: 12px;
 max-width: 960px;
 margin-left: auto;
 margin-right: auto;
}
/* Keep normal 16:9 video - do not squash height in practice mode */
body.practice-focus--sounds .snd-shad-video {
 position: relative;
 width: 100%;
 padding-bottom: 56.25%;
 height: 0;
 overflow: hidden;
}
body.practice-focus--sounds .snd-shad-split {
 gap: 12px;
 margin: 10px 0;
}
body.practice-focus--sounds .snd-shad-lines {
 max-height: min(42vh, 440px);
}
body.practice-focus--sounds .snd-shad-script,
body.practice-focus--sounds .snd-shad-recorder {
 padding: 14px;
}
body.practice-focus .snd-focus-toggle,
body.practice-focus .snd-practice-toolbar { display: none !important; }
body.practice-session:not(.practice-focus) .snd-practice-toolbar { display: none !important; }
.practice-focus-bar__back,
.practice-focus-bar__menu {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 padding: 8px 12px;
 border-radius: 8px;
 border: 1px solid rgba(255, 255, 255, 0.25);
 background: rgba(255, 255, 255, 0.1);
 color: #f0fdfa;
 font-family: var(--font);
 font-size: .78rem;
 font-weight: 700;
 cursor: pointer;
 white-space: nowrap;
}
.practice-focus-bar__back:hover,
.practice-focus-bar__menu:hover {
 background: rgba(255, 255, 255, 0.18);
}
.practice-focus-bar__title {
 flex: 1;
 margin: 0;
 text-align: center;
 font-size: .82rem;
 font-weight: 700;
 line-height: 1.3;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}
.snd-practice-toolbar {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 12px;
 flex-wrap: wrap;
 margin-bottom: 12px;
 padding: 10px 14px;
 border-radius: 12px;
 background: linear-gradient(135deg, #ecfdf5, #f0fdfa);
 border: 2px solid #5eead4;
 position: sticky;
 top: 0;
 z-index: 120;
 box-shadow: 0 6px 20px rgba(13, 148, 136, 0.12);
}
.snd-practice-toolbar__hint {
 margin: 0;
 flex: 1;
 min-width: 180px;
 font-size: .8rem;
 font-weight: 600;
 color: #0f766e;
 line-height: 1.4;
}
.snd-practice-toolbar__hint i { margin-right: 6px; color: #0d9488; }
.snd-focus-toggle {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 padding: 10px 16px;
 border-radius: 999px;
 border: none;
 background: linear-gradient(135deg, #064e3b, #0f766e);
 color: #f0fdfa;
 font-family: var(--font);
 font-size: .8rem;
 font-weight: 800;
 cursor: pointer;
 box-shadow: 0 6px 18px rgba(6, 78, 59, 0.28);
 flex-shrink: 0;
}
.snd-focus-toggle:hover { filter: brightness(1.06); transform: translateY(-1px); }
.snd-focus-toggle i { color: #fde68a; }
.snd-shad-note--fluency { color: #b45309; background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px; padding: 10px 12px; }
.snd-shad-note--pron { color: #0f766e; background: #ecfdf5; border: 1px solid #99f6e4; border-radius: 8px; padding: 10px 12px; }
.snd-shad-video-sync--pron { color: #0f766e; background: #f0fdfa; border-color: #5eead4; }
.snd-shad-card--pron-lab { border-color: #99f6e4; }
.snd-shad-video-sync {
 font-size: .84rem; color: #0f766e; background: #ecfdf5; border: 1px solid #99f6e4;
 border-radius: 10px; padding: 10px 14px; margin: 0 0 14px; line-height: 1.5;
}
.snd-shad-video-sync i { margin-right: 6px; }
.snd-shad-video-sync--audio { color: #0369a1; background: #f0f9ff; border-color: #bae6fd; }
.snd-shad-card__track {
 display: inline-flex; align-items: center; gap: 6px;
 font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
 color: #0f766e; background: #ccfbf1; padding: 4px 8px; border-radius: 6px; margin-bottom: 6px;
}
.snd-shad-card--daily-speaking { border-color: #99f6e4; }
.snd-shad-card--daily-speaking:hover { border-color: #2dd4bf; }
.snd-shad-card__situation {
 display: block; font-size: .74rem; color: #475569; font-style: italic; margin: 0 0 8px; line-height: 1.4;
}
.snd-shad-situation {
 background: linear-gradient(135deg, #f0fdfa 0%, #ecfeff 100%);
 border: 2px solid #99f6e4; border-radius: 14px; padding: 14px 16px; margin-bottom: 16px;
}
.snd-shad-situation__scene { margin: 0 0 10px; font-size: .88rem; color: var(--navy); line-height: 1.5; }
.snd-shad-situation__scene strong { color: #0f766e; margin-right: 6px; }
.snd-shad-situation__qs strong { display: block; font-size: .78rem; color: #0f766e; margin-bottom: 8px; }
.snd-shad-situation__qs ul { margin: 0; padding: 0; list-style: none; }
.snd-shad-situation__qs li {
 font-size: .84rem; color: var(--navy); padding: 6px 0; border-top: 1px solid rgba(13, 148, 136, .15);
}
.snd-shad-situation__qs li:first-child { border-top: none; }
.snd-shad-situation__qs li i { color: #0d9488; margin-right: 8px; font-size: .72rem; }
.snd-shad-line__q {
 grid-column: 2; font-size: .68rem; font-weight: 800; text-transform: uppercase;
 letter-spacing: .04em; color: #0d9488;
}
.snd-shad-card {
 text-align: left; padding: 18px 16px; border: 1px solid #e2e8f0; border-radius: 14px;
 background: #fff; cursor: pointer; font-family: var(--font);
 box-shadow: 0 4px 14px rgba(15, 23, 42, .06); transition: transform .18s, box-shadow .18s;
}
.snd-shad-card:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(13, 148, 136, .12); border-color: #99f6e4; }
.snd-shad-card__num { font-size: .68rem; font-weight: 800; text-transform: uppercase; color: #0d9488; letter-spacing: .06em; }
.snd-shad-card h3 { font-family: var(--serif); font-size: 1rem; color: var(--navy); margin: 8px 0 6px; line-height: 1.35; }
.snd-shad-card p { font-size: .8rem; color: var(--dim); margin: 0 0 8px; }
.snd-shad-card__meta { display: block; font-size: .72rem; color: #64748b; margin-bottom: 8px; }
.snd-shad-card__go { font-size: .78rem; font-weight: 700; color: #0d9488; }
.snd-shad-room { max-width: 960px; margin: 0 auto; }
.snd-shad-video-wrap { margin-bottom: 16px; }
.snd-shad-video {
 position: relative; width: 100%; padding-bottom: 56.25%; height: 0; overflow: hidden;
 border-radius: 14px; background: #0f172a; box-shadow: 0 8px 28px rgba(15, 23, 42, .15);
}
.snd-shad-video iframe {
 position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;
}
.snd-shad-source {
 font-size: .78rem; color: #64748b; margin: 10px 0 0; text-align: center;
}
.snd-shad-source i { color: #0d9488; margin-right: 4px; }
.snd-shad-split {
 display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 18px 0;
}
.snd-shad-script, .snd-shad-recorder {
 padding: 18px; border-radius: 14px; border: 1px solid #e2e8f0; background: #fff;
}
.snd-shad-script h4, .snd-shad-recorder h4 {
 font-size: .88rem; color: var(--navy); margin: 0 0 12px;
}
.snd-shad-script h4 i, .snd-shad-recorder h4 i { color: #0d9488; margin-right: 6px; }
.snd-shad-lines { display: flex; flex-direction: column; gap: 8px; max-height: 320px; overflow-y: auto; }
.snd-shad-line {
 display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; align-items: start;
 text-align: left; padding: 10px 12px; border-radius: 10px; border: 1px solid #e2e8f0;
 background: #f8fafc; cursor: pointer; font-family: var(--font); width: 100%;
 transition: border-color .15s, background .15s;
}
.snd-shad-line.is-active { border-color: #0d9488; background: #f0fdfa; box-shadow: 0 0 0 2px rgba(13, 148, 136, .15); }
.snd-shad-line__n {
 grid-row: span 2; width: 24px; height: 24px; border-radius: 50%; background: #0d9488; color: #fff;
 font-size: .72rem; font-weight: 800; display: flex; align-items: center; justify-content: center;
}
.snd-shad-line__text { font-weight: 600; color: var(--navy); font-size: .9rem; }
.snd-shad-line code { grid-column: 2; font-size: .75rem; color: #0d9488; }
.snd-shad-full {
 margin-top: 14px; padding-top: 14px; border-top: 1px dashed #cbd5e1;
}
.snd-shad-full h5 { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: #64748b; margin: 0 0 8px; }
.snd-shad-full p { font-family: var(--serif); color: var(--navy); margin: 0 0 6px; line-height: 1.5; font-size: .92rem; }
.snd-shad-active-line {
 font-size: 1.2rem; font-family: var(--serif); color: var(--navy); margin: 0 0 8px; line-height: 1.45;
}
.snd-shad-recorder__tools {
 display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px;
}
.snd-shad-timer {
 font-variant-numeric: tabular-nums; font-weight: 800; font-size: 1rem; color: #dc2626;
 padding: 6px 12px; border-radius: 8px; background: #fef2f2;
}
.snd-shad-line-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; gap: 10px; }
.snd-shad-done-line { font-size: .84rem; font-weight: 700; color: #059669; }
.snd-shad-back-sounds { margin-top: 8px; }
.snd-shad-link-lesson { width: 100%; max-width: 420px; margin-bottom: 12px; }

/* ── Ending Sounds Lab ── */
.snd-end-promo {
 display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
 margin-bottom: 22px; padding: 20px 22px; border-radius: 16px;
 background: linear-gradient(135deg, #9a3412, #c2410c); color: #fff;
 box-shadow: 0 12px 32px rgba(194, 65, 12, 0.25);
}
.snd-end-promo h4 { margin: 0 0 8px; font-family: var(--serif); font-size: 1.15rem; }
.snd-end-promo h4 i { margin-right: 8px; color: #fed7aa; }
.snd-end-promo p { margin: 0 0 10px; font-size: .88rem; opacity: .92; max-width: 52ch; line-height: 1.55; }
.snd-end-promo__badge {
 display: inline-block; font-size: .72rem; font-weight: 700; padding: 4px 10px;
 border-radius: 999px; background: rgba(255,255,255,.15);
}
.snd-end-promo .snd-btn--primary { background: #fff; color: #c2410c; flex-shrink: 0; }
.snd-end-home { max-width: 920px; margin: 0 auto; }
.snd-end-method { margin-bottom: 18px; }
.snd-end-section-title {
 font-size: .92rem; color: var(--navy); margin: 20px 0 12px;
}
.snd-end-section-title i { color: #c2410c; margin-right: 8px; }
.snd-end-grid {
 display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin-bottom: 8px;
}
.snd-end-card {
 text-align: left; padding: 18px 16px; border: 1px solid #fed7aa; border-radius: 14px;
 background: #fff; cursor: pointer; font-family: var(--font);
 box-shadow: 0 4px 14px rgba(194, 65, 12, .06); transition: transform .18s, box-shadow .18s;
}
.snd-end-card:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(194, 65, 12, .12); }
.snd-end-card__num { font-size: .68rem; font-weight: 800; text-transform: uppercase; color: #c2410c; letter-spacing: .06em; }
.snd-end-card h3 { font-family: var(--serif); font-size: 1rem; color: var(--navy); margin: 8px 0 6px; }
.snd-end-card p { font-size: .8rem; color: var(--dim); margin: 0 0 8px; line-height: 1.5; }
.snd-end-card__go { font-size: .78rem; font-weight: 700; color: #c2410c; }
.snd-hard-grid {
 display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin-bottom: 20px;
}
.snd-hard-card {
 display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
 padding: 14px; border-radius: 12px; border: 1px solid #e2e8f0; background: #fff;
 cursor: pointer; font-family: var(--font); text-align: left;
 transition: border-color .15s, box-shadow .15s;
}
.snd-hard-card:hover { border-color: #0d9488; box-shadow: 0 6px 18px rgba(13, 148, 136, .12); }
.snd-hard-card code { font-size: .85rem; font-weight: 800; color: #0d9488; }
.snd-hard-card strong { font-size: .88rem; color: var(--navy); }
.snd-hard-card span { font-size: .68rem; color: #64748b; font-weight: 600; }
.snd-end-room { max-width: 920px; margin: 0 auto; }
.snd-end-drills { display: grid; gap: 14px; margin-bottom: 18px; }
.snd-end-pair {
 display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 14px;
 border-radius: 12px; background: #f8fafc; border: 1px solid #e2e8f0;
}
.snd-end-pair__good, .snd-end-pair__bad { padding: 10px; border-radius: 10px; }
.snd-end-pair__good { background: #f0fdf4; border: 1px solid #bbf7d0; }
.snd-end-pair__bad { background: #fef2f2; border: 1px solid #fecaca; opacity: .9; }
.snd-end-tag { font-size: .65rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; display: block; margin-bottom: 6px; }
.snd-end-tag--good { color: #15803d; }
.snd-end-tag--bad { color: #b91c1c; }
.snd-end-pair strong { display: block; font-size: 1.1rem; font-family: var(--serif); color: var(--navy); }
.snd-end-pair code, .snd-end-word code { display: block; font-size: .78rem; color: #0d9488; margin: 4px 0; }
.snd-end-ending, .snd-end-note { font-size: .72rem; color: #64748b; display: block; margin-bottom: 4px; }
.snd-end-word {
 padding: 14px 16px; border-radius: 12px; border: 1px solid #e2e8f0; background: #fff;
}
.snd-end-word strong { font-size: 1.1rem; font-family: var(--serif); color: var(--navy); display: block; }
.snd-end-phrase {
 padding: 18px; border-radius: 14px; background: linear-gradient(180deg, #fff7ed, #fff);
 border: 2px solid #fdba74; margin-bottom: 16px;
}
.snd-end-phrase h4 { margin: 0 0 10px; font-size: .88rem; color: #9a3412; }
.snd-end-phrase p { font-family: var(--serif); font-size: 1.05rem; color: var(--navy); margin: 0 0 8px; line-height: 1.5; }
.snd-end-recorder { margin-top: 14px; padding-top: 14px; border-top: 1px dashed #fdba74; }
.snd-end-recorder h5 { font-size: .82rem; margin: 0 0 10px; color: #9a3412; }
.snd-hard-items { display: grid; gap: 12px; margin-bottom: 18px; }
.snd-hard-item {
 display: flex; gap: 12px; padding: 14px; border-radius: 12px;
 border: 1px solid #e2e8f0; background: #fff;
}
.snd-hard-item__n {
 flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
 background: #0d9488; color: #fff; font-weight: 800; font-size: .78rem;
 display: flex; align-items: center; justify-content: center;
}
.snd-hard-item__body strong { display: block; font-size: 1rem; font-family: var(--serif); color: var(--navy); margin-bottom: 4px; }

@media (max-width: 640px) {
 .hub-sounds-studio__go { display: none; }
 .hub-sounds-studio__btn { flex-wrap: wrap; }
 .hub-speak-labs { grid-template-columns: 1fr; }
 .hub-speak-lab__go { display: none; }
 .hub-speak-lab { flex-wrap: wrap; }
 .snd-topic-grid { grid-template-columns: 1fr; }
 .snd-pair { grid-template-columns: 1fr; }
 .snd-pair__vs { display: none; }
 .snd-compare-grid { grid-template-columns: 1fr; }
 .snd-shad-split { grid-template-columns: 1fr; }
 .snd-shad-promo { flex-direction: column; align-items: stretch; }
 .snd-shad-promo .snd-btn--primary { width: 100%; }
 .snd-end-promo { flex-direction: column; align-items: stretch; }
 .snd-end-promo .snd-btn--primary { width: 100%; }
 .snd-end-pair { grid-template-columns: 1fr; }
 .snd-end-grid, .snd-hard-grid { grid-template-columns: 1fr; }
 .snd-pace-btns { flex-direction: column; align-items: stretch; }
 .speak-btn--pace { justify-content: center; width: 100%; }
 .snd-shad-grid { grid-template-columns: 1fr; }
 .sounds-studio-hero { padding: 36px 20px 40px; }
 .snd-practice-toolbar {
 flex-direction: column;
 align-items: stretch;
 top: 0;
 }
 .snd-focus-toggle { width: 100%; justify-content: center; }
 body.practice-focus--sounds .snd-shad-lines { max-height: min(36vh, 320px); }
 .practice-focus-bar__back span,
 .practice-focus-bar__menu span { display: none; }
}

/* My Homework Submissions - student history */
.hw-my-submissions {
 margin: 20px 0 24px;
 padding: 20px 22px;
 border-radius: 16px;
 background: linear-gradient(145deg, rgba(0, 51, 102, 0.07), rgba(26, 122, 74, 0.05));
 border: 1px solid rgba(0, 51, 102, 0.16);
 box-shadow: 0 4px 18px rgba(0, 35, 102, 0.07);
}

.hw-my-submissions__head {
 display: flex;
 flex-direction: column;
 gap: 12px;
 margin-bottom: 14px;
}

.hw-my-submissions__intro h3 {
 margin: 0 0 8px;
 font-size: 1.12rem;
 color: var(--ama-blue, #003366);
}

.hw-my-submissions__intro p {
 margin: 0;
 font-size: 0.92rem;
 color: var(--ama-muted, #5a6b82);
 line-height: 1.45;
}

.hw-my-submissions__actions {
 display: flex;
 flex-wrap: wrap;
 gap: 10px;
 align-items: center;
}

.hw-my-submissions__status {
 margin: 0;
 font-size: 0.9rem;
 color: var(--ama-muted, #5a6b82);
}

.hw-my-submissions__list {
 display: flex;
 flex-direction: column;
 gap: 12px;
}

.hw-my-submissions__empty {
 margin: 0;
 padding: 18px;
 text-align: center;
 font-size: 0.92rem;
 color: var(--ama-muted, #5a6b82);
 background: rgba(255, 255, 255, 0.65);
 border-radius: 12px;
}

.hw-my-submissions__recover {
 margin: 14px 0 0;
 font-size: 0.85rem;
 color: var(--ama-muted, #5a6b82);
}

.hw-my-submissions__recover a {
 color: var(--ama-blue, #003366);
 font-weight: 700;
}

.hw-sub-item {
 padding: 14px 16px;
 border-radius: 12px;
 background: #fff;
 border: 1px solid rgba(0, 0, 0, 0.08);
 box-shadow: 0 2px 10px rgba(0, 35, 102, 0.06);
}

.hw-sub-item__head {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 gap: 8px 12px;
 margin-bottom: 8px;
}

.hw-sub-item__title {
 flex: 1 1 100%;
 font-size: 0.98rem;
}

.hw-sub-item__meta {
 color: var(--ama-muted, #5a6b82);
 font-size: 0.84rem;
}

.hw-sub-tag {
 font-size: 0.74rem;
 font-weight: 700;
 padding: 3px 8px;
 border-radius: 999px;
 background: rgba(0, 51, 102, 0.1);
 color: var(--ama-blue, #003366);
}

.hw-sub-tag--ok {
 background: rgba(26, 122, 74, 0.12);
 color: #1a7a4a;
}

.hw-sub-tag--pending {
 background: rgba(180, 83, 9, 0.12);
 color: #b45309;
}

.hw-sub-tag--warn {
 background: rgba(196, 30, 58, 0.1);
 color: #c41e3a;
}

.hw-sub-audio {
 width: 100%;
 margin: 8px 0;
}

.hw-sub-item__actions {
 display: flex;
 flex-wrap: wrap;
 gap: 8px;
}

.hw-sub-item__msg {
 margin: 8px 0 0;
 font-size: 0.88rem;
 color: var(--ama-blue, #003366);
}

@media (max-width: 600px) {
 .hw-my-submissions__actions .cta-main,
 .hw-my-submissions__actions .cta-ghost,
 .hw-sub-item__actions .cta-main,
 .hw-sub-item__actions .cta-ghost {
 flex: 1 1 100%;
 }
}

/* Link to standalone Homework Recovery app */
.hw-recover-link {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 justify-content: space-between;
 gap: 16px;
 margin: 20px 0 24px;
 padding: 18px 20px;
 border-radius: 14px;
 background: linear-gradient(135deg, rgba(26, 122, 74, 0.08), rgba(0, 51, 102, 0.06));
 border: 1px solid rgba(26, 122, 74, 0.22);
}

.hw-recover-link__copy h3 {
 margin: 0 0 6px;
 font-size: 1.08rem;
 color: var(--ama-blue, #003366);
}

.hw-recover-link__copy p {
 margin: 0;
 font-size: 0.92rem;
 color: var(--ama-muted, #5a6b82);
 max-width: 52ch;
 line-height: 1.45;
}

.hw-recover-link__btn {
 white-space: nowrap;
 text-decoration: none;
}

@media (max-width: 600px) {
 .hw-recover-link__btn {
 width: 100%;
 text-align: center;
 }
}

/* Recover old homework submissions (standalone app styles kept for deploy cache) */
.hw-recovery-panel {
 margin: 20px 0 24px;
 padding: 20px 22px;
 border-radius: 16px;
 background: linear-gradient(145deg, rgba(0, 51, 102, 0.07), rgba(196, 30, 58, 0.04));
 border: 1px solid rgba(0, 51, 102, 0.16);
 box-shadow: 0 4px 18px rgba(0, 35, 102, 0.07);
}

.hw-recovery-panel__head {
 display: flex;
 flex-direction: column;
 gap: 14px;
}

.hw-recovery-panel__intro h3 {
 margin: 0 0 8px;
 font-size: 1.15rem;
 color: var(--ama-blue, #003366);
}

.hw-recovery-panel__intro p {
 margin: 0;
 font-size: 0.92rem;
 color: var(--ama-muted, #5a6b82);
 line-height: 1.45;
}

.hw-recovery-panel__actions {
 display: flex;
 flex-wrap: wrap;
 gap: 10px;
 align-items: center;
}

.hw-recovery-scan {
 min-width: min(100%, 280px);
}

.hw-recovery-status {
 margin: 0;
 font-size: 0.9rem;
 color: var(--ama-muted, #5a6b82);
}

.hw-recovery-status--busy { color: var(--ama-blue, #003366); }
.hw-recovery-status--ok { color: #1a7a4a; }
.hw-recovery-status--warn { color: #b45309; }

.hw-recovery-list {
 display: flex;
 flex-direction: column;
 gap: 12px;
 margin-top: 16px;
}

.hw-recovery-empty {
 margin: 0;
 padding: 16px;
 text-align: center;
 font-size: 0.92rem;
 color: var(--ama-muted, #5a6b82);
 border-radius: 12px;
 background: rgba(255, 255, 255, 0.65);
}

.hw-recovery-empty--busy {
 color: var(--ama-blue, #003366);
}

.hw-recovery-item {
 padding: 14px 16px;
 border-radius: 12px;
 background: #fff;
 border: 1px solid rgba(0, 0, 0, 0.08);
 box-shadow: 0 2px 10px rgba(0, 35, 102, 0.06);
}

.hw-recovery-item__head {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 gap: 8px 12px;
 margin-bottom: 10px;
}

.hw-recovery-item__title {
 flex: 1 1 100%;
 font-size: 0.98rem;
}

.hw-recovery-item__source {
 font-size: 0.78rem;
 font-weight: 600;
 text-transform: uppercase;
 letter-spacing: 0.04em;
 color: var(--ama-muted, #5a6b82);
}

.hw-recovery-item__meta {
 color: var(--ama-muted, #5a6b82);
 font-size: 0.85rem;
}

.hw-recovery-tag {
 font-size: 0.75rem;
 font-weight: 700;
 padding: 3px 8px;
 border-radius: 999px;
 background: rgba(0, 51, 102, 0.1);
 color: var(--ama-blue, #003366);
}

.hw-recovery-tag--sent {
 background: rgba(26, 122, 74, 0.12);
 color: #1a7a4a;
}

.hw-recovery-tag--pending {
 background: rgba(180, 83, 9, 0.12);
 color: #b45309;
}

.hw-recovery-audio {
 width: 100%;
 margin: 8px 0 10px;
}

.hw-recovery-item__actions {
 display: flex;
 flex-wrap: wrap;
 gap: 8px;
}

.hw-recovery-item__msg {
 margin: 8px 0 0;
 font-size: 0.88rem;
 color: var(--ama-blue, #003366);
}

@media (max-width: 600px) {
 .hw-recovery-panel__actions .cta-main,
 .hw-recovery-panel__actions .cta-ghost,
 .hw-recovery-item__actions .cta-main,
 .hw-recovery-item__actions .cta-ghost {
 flex: 1 1 100%;
 }
}

/* TV / touch - no sideways scrolling; big tap targets; all nav buttons visible */
@media (hover: none), (pointer: coarse), (min-width: 1200px) {
 .top-main-nav,
 .top-main-nav.topnav--pro {
 display: grid !important;
 grid-template-columns: repeat(6, minmax(0, 1fr));
 overflow: visible;
 }
 .top-main-nav.topnav--pro button,
 .topnav--lux button {
 min-height: 52px;
 width: 100%;
 max-width: none;
 }
 .top-main-nav-wrap {
 overflow: visible;
 max-height: none;
 }
 .sidebar-nav {
 max-height: none;
 overflow: visible;
 }
 .sidebar-nav.topnav--lux button {
 min-height: 48px;
 }
 .admin-tabs {
 grid-template-columns: repeat(3, minmax(0, 1fr));
 }
 .admin-toolbar {
 grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
 }
 .admin-rate-row {
 display: grid;
 grid-template-columns: repeat(2, minmax(0, 1fr));
 gap: 6px;
 min-width: 0;
 }
 .admin-rate-pill {
 width: 100%;
 text-align: center;
 min-height: 40px;
 padding: 8px 6px;
 white-space: normal;
 line-height: 1.15;
 }
 .admin-trash-row__actions {
 display: grid;
 grid-template-columns: repeat(2, minmax(0, 1fr));
 gap: 8px;
 }
 .admin-trash-row__actions .admin-btn-sm {
 width: 100%;
 justify-content: center;
 }
}
@media (max-width: 520px) {
 .admin-tabs {
 grid-template-columns: 1fr;
 }
 .top-main-nav,
 .top-main-nav.topnav--pro {
 grid-template-columns: repeat(3, minmax(0, 1fr));
 }
}

/* ═══ Chat dock - Messenger blue (overrides legacy white/pink chat styles) ═══ */
.chat-dock,
.chat-dock .messenger,
.chat-dock .messenger-feed,
.chat-dock #group-chat-feed {
 background: #0084ff !important;
 background: linear-gradient(180deg, #0064d8 0%, #0084ff 45%, #0099ff 100%) !important;
}
.chat-dock .messenger-online {
 background: rgba(0, 70, 140, 0.5) !important;
 border-bottom: 1px solid rgba(255, 255, 255, 0.14) !important;
 min-height: 48px !important;
 max-height: 56px !important;
 overflow: hidden !important;
}
.chat-dock .messenger-online__list {
 overflow-x: auto;
 overflow-y: hidden;
 scrollbar-width: none;
}
.chat-dock .messenger-online__list::-webkit-scrollbar { display: none; }
.chat-dock .messenger-online__empty {
 color: rgba(255, 255, 255, 0.92) !important;
}
.chat-dock .messenger-online__avatar {
 background: rgba(255, 255, 255, 0.22) !important;
 color: #fff !important;
 box-shadow: none !important;
}
.chat-dock .messenger-online__user--in-chat .messenger-online__avatar {
 box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.55) !important;
}
.chat-dock .messenger-online__name {
 color: rgba(255, 255, 255, 0.92) !important;
}
.chat-dock .messenger-online__dot {
 border-color: #0064c8 !important;
 animation: none !important;
}
.chat-dock .messenger-head p {
 min-height: 1.25em;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}
.chat-dock .group-chat-profile {
 background: rgba(0, 70, 140, 0.45) !important;
}
.chat-dock .group-chat-status {
 flex-shrink: 0;
 margin: 0;
 padding: 4px 12px 8px;
 min-height: 0;
 background: rgba(0, 60, 120, 0.35);
 color: rgba(255, 255, 255, 0.95);
}
.chat-dock .group-chat-status--ok { color: #b9f6ca !important; }
.chat-dock .group-chat-status--warn { color: #ffe082 !important; }
.chat-dock .group-chat-status--error { color: #ffcdd2 !important; }
.chat-dock .group-chat-status--busy { color: #bbdefb !important; }
.chat-dock #group-chat-feed .ama-msg-empty {
 color: #fff !important;
 text-shadow: 0 1px 4px rgba(0, 40, 100, 0.35);
}
.chat-dock .messenger-compose,
.chat-dock .messenger-typing {
 flex-shrink: 0;
}
.chat-dock .messenger-typing {
 min-height: 34px;
}

/* Never show sync setup banner in class chat */
.group-chat-cloud-banner,
#group-chat-cloud-banner,
.messenger-head__share,
#group-chat-share-link {
 display: none !important;
 visibility: hidden !important;
 height: 0 !important;
 margin: 0 !important;
 padding: 0 !important;
 overflow: hidden !important;
 pointer-events: none !important;
}


/* Clean homework: task grid + one active workspace */
.hw-wrap-clean { max-width: 920px; }
.hw-tasks--clean .hw-unit-head h3 { margin-bottom: 4px; }
.hw-task-grid {
 display: grid;
 grid-template-columns: repeat(5, minmax(0, 1fr));
 gap: 8px;
 margin: 14px 0 18px;
}
@media (min-width: 700px) {
 .hw-task-grid { grid-template-columns: repeat(10, minmax(0, 1fr)); }
}
.hw-task-num {
 border: 2px solid rgba(31, 63, 159, 0.25);
 background: #fff;
 color: #0f2044;
 border-radius: 10px;
 padding: 10px 4px;
 font-weight: 800;
 font-size: 0.78rem;
 cursor: pointer;
 min-height: 44px;
 font-family: inherit;
}
.hw-task-num.is-active,
.hw-task-num:hover {
 background: var(--ama-blue);
 border-color: var(--ama-blue);
 color: #fff;
}
.hw-active-workspace { margin-top: 8px; }
.hw-q-card--active {
 border: 2px solid rgba(31, 63, 159, 0.2);
 border-radius: 16px;
 padding: 16px;
 background: #fff;
 box-shadow: 0 8px 28px rgba(15, 32, 68, 0.08);
}
.hw-submit-guide--clean { border-top: 4px solid var(--ama-red); }
.hw-profile-tasks-row { display: none !important; }