/* =====================================================================
   Mentoza — student app preview (Apps section + hero tour phone)
   ---------------------------------------------------------------------
   A faithful HTML/CSS rendition of the Flutter white-label student app
   (mentoza-common-app): AppTokens colour roles, Inter type scale, the
   floating frosted bottom capsule with its sliding gradient pill, the
   tablet/desktop side rail, and the Hub / Learn / Home / Chat / You /
   Leaderboard screens plus academy-code onboarding.

   ONE app DOM renders the phone layout or the rail layout through a
   container query on .ax-app — exactly how the Flutter app switches
   between FloatingBottomNav and AppNavRail by width.

   Scope: everything lives under .aui (tokens) and .ax-* / .apps-demo
   classes so nothing collides with the landing page.
   Theming: set --ax-primary (and optionally --ax-on-primary,
   --ax-hero-a, --ax-hero-b, --ax-hero-accent, --ax-on-hero) on .aui,
   or use data-ax-theme="indigo|gold|emerald|rose".
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Tokens
   --------------------------------------------------------------------- */
.aui {
  /* brand seeds (tenant) */
  --ax-primary: #4f46e5;
  --ax-on-primary: #ffffff;
  --ax-hero-a: var(--ax-primary);
  --ax-hero-b: color-mix(in srgb, var(--ax-primary) 74%, var(--ax-white));
  --ax-hero-accent: var(--ax-gold);
  --ax-on-hero: var(--ax-white);

  /* neutrals + status (AppTokens) */
  --ax-white: #ffffff;
  --ax-black: #000000;
  --ax-bg: #ffffff;
  --ax-surface: #ffffff;
  --ax-ink: #0f172a;
  --ax-ink-muted: #475569;
  --ax-ink-subtle: #94a3b8;
  --ax-inverse: #0f1115;
  --ax-inverse-2: #262a33;
  --ax-danger: #dc2626;
  --ax-success: #16a34a;
  --ax-info: #2563eb;
  --ax-warn: #d97706;
  --ax-gold: #eab308;
  --ax-gold-deep: #a16207;
  --ax-streak: #f97316;
  --ax-on-gold: #1c1917;
  --ax-dark-btn-a: #374151;
  --ax-dark-btn-b: #1f2937;
  --ax-shade: #0f172a;
  --ax-punch-ring: #111418;

  /* avatar pastels */
  --ax-av-a-bg: #fde7d6; --ax-av-a-ink: #9a3412;
  --ax-av-b-bg: #dbeafe; --ax-av-b-ink: #1e40af;
  --ax-av-c-bg: #d1fae5; --ax-av-c-ink: #065f46;
  --ax-av-d-bg: #ede9fe; --ax-av-d-ink: #5b21b6;

  /* theme swatches (Academy colour chips) */
  --ax-sw-indigo: #4f46e5;
  --ax-sw-gold: #f5b400;
  --ax-sw-emerald: #059669;
  --ax-sw-rose: #e11d48;

  /* device chrome */
  --ax-ios-edge-hi: #a1a1a6;
  --ax-ios-edge: #3a3a3c;
  --ax-ios-edge-lo: #1c1c1e;
  --ax-android-edge-hi: #4b515a;
  --ax-android-edge: #1a1d22;
  --ax-bezel: #050506;
  --ax-mac-bar: #2b2b2d;
  --ax-mac-bar-ink: #a1a1a6;
  --ax-mac-red: #ff5f57;
  --ax-mac-amber: #febc2e;
  --ax-mac-green: #28c840;
  --ax-win-bar: #f3f3f3;
  --ax-win-ink: #1f1f1f;
  --ax-win-close: #c42b1c;

  /* derived roles (ColorOps) */
  --ax-primary-soft: color-mix(in srgb, var(--ax-primary) 12%, transparent);
  --ax-primary-tint: color-mix(in srgb, var(--ax-primary) 8%, var(--ax-surface));
  --ax-primary-deep: color-mix(in srgb, var(--ax-primary) 84%, var(--ax-black));
  --ax-ring-arc: color-mix(in srgb, var(--ax-primary) 62%, var(--ax-white));
  --ax-surface-alt: color-mix(in srgb, var(--ax-ink) 4%, var(--ax-surface));
  --ax-surface-sunken: color-mix(in srgb, var(--ax-ink) 7.5%, var(--ax-surface));
  --ax-border-soft: color-mix(in srgb, var(--ax-ink) 8%, var(--ax-surface));
  --ax-border-field: color-mix(in srgb, var(--ax-ink) 16%, var(--ax-surface));
  --ax-brand-grad: linear-gradient(135deg, color-mix(in srgb, var(--ax-primary) 86%, var(--ax-white)), var(--ax-primary) 55%, color-mix(in srgb, var(--ax-primary) 88%, var(--ax-black)));
  --ax-hero-grad: linear-gradient(135deg, var(--ax-hero-a), var(--ax-hero-b));
  --ax-inverse-grad: linear-gradient(135deg, var(--ax-inverse), var(--ax-inverse-2));
  --ax-glow: 0 8px 20px -6px color-mix(in srgb, var(--ax-primary) 42%, transparent);
  --ax-shadow-xs: 0 2px 6px color-mix(in srgb, var(--ax-ink) 5%, transparent);
  --ax-shadow-sm: 0 1px 3px color-mix(in srgb, var(--ax-ink) 5%, transparent), 0 6px 14px color-mix(in srgb, var(--ax-ink) 6%, transparent);
  --ax-shadow-md: 0 2px 6px color-mix(in srgb, var(--ax-ink) 6%, transparent), 0 12px 26px color-mix(in srgb, var(--ax-ink) 9%, transparent);
  --ax-shadow-lg: 0 20px 40px color-mix(in srgb, var(--ax-ink) 10%, transparent), 0 2px 8px color-mix(in srgb, var(--ax-ink) 6%, transparent);
  --ax-dark-shadow: 0 16px 34px -18px color-mix(in srgb, var(--ax-inverse) 70%, transparent);

  /* type + motion (AppType / AppMotion) */
  --ax-font: "Inter", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --ax-font-display: ui-serif, "New York", Georgia, "Times New Roman", serif;
  --ax-font-sys: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  --ax-font-win: "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
  --ax-emph: cubic-bezier(0.05, 0.7, 0.1, 1);
  --ax-enter: cubic-bezier(0.2, 0, 0, 1);
  --ax-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ax-page: 380ms;
}
.aui[data-ax-theme="gold"] {
  --ax-primary: var(--ax-sw-gold);
  --ax-on-primary: var(--ax-on-gold);
  --ax-primary-deep: var(--ax-gold-deep);
  --ax-hero-a: var(--ax-inverse);
  --ax-hero-b: var(--ax-inverse-2);
  --ax-ring-arc: var(--ax-sw-gold);
}
.aui[data-ax-theme="emerald"] { --ax-primary: var(--ax-sw-emerald); }
.aui[data-ax-theme="rose"] { --ax-primary: var(--ax-sw-rose); }

.ax-i { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------------------------------------------------------------------
   2. Section: platform switcher + controls
   --------------------------------------------------------------------- */
.ax-platforms { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 36px 0 0; }
.ax-platform {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 16px;
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--grad-card);
  box-shadow: var(--ring), var(--inner-hi);
  text-align: left;
  color: var(--text);
  cursor: pointer;
  transition: box-shadow 0.4s, transform 0.5s var(--ease-out);
}
.ax-platform:hover { box-shadow: var(--ring-strong), var(--inner-hi), var(--shadow-2); transform: translateY(-2px); }
.ax-platform::after { content: ""; flex: none; width: 8px; height: 8px; margin-left: auto; border-radius: 50%; background: transparent; transition: background 0.3s, box-shadow 0.3s; }
.ax-platform.is-on { box-shadow: inset 0 0 0 1.5px var(--brand-600), var(--inner-hi), var(--shadow-2); }
.ax-platform.is-on::after { background: var(--brand-600); box-shadow: 0 0 0 4px rgb(var(--rgb-brand-600) / 0.16); }
.ax-platform__txt { min-width: 0; }
.ax-platform b { display: block; font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.ax-platform small { font-size: 12.5px; color: var(--text-dim); }

.apps-demo { position: relative; min-width: 0; }
.ax-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 426 / 898;
  max-height: min(740px, 82svh);
  margin-inline: auto;
  container-type: size;
}
.apps-demo[data-platform="windows"] .ax-stage,
.apps-demo[data-platform="macos"] .ax-stage { aspect-ratio: 1080 / 720; }

.ax-controls { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 22px; }
.ax-themes, .ax-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.ax-controls__label { width: 100%; font-size: 12px; font-weight: 700; letter-spacing: var(--tracking-caps, 0.14em); text-align: center; text-transform: uppercase; color: var(--text-dim); }
.ax-theme, .ax-note, .ax-replay {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: var(--chip-bg);
  box-shadow: var(--ring);
  font: 600 13px/1 var(--font-body);
  color: var(--chip-text);
  white-space: nowrap;
}
.ax-theme, .ax-replay { cursor: pointer; transition: box-shadow 0.3s, transform 0.3s var(--ease-out); }
.ax-theme { padding-left: 8px; }
.ax-theme:hover, .ax-replay:hover { box-shadow: var(--ring-strong); transform: translateY(-1px); }
.ax-theme i { width: 22px; height: 22px; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ax-white) 55%, transparent); }
.ax-theme[data-ax-theme-set="indigo"] { --sw: var(--ax-sw-indigo); }
.ax-theme[data-ax-theme-set="gold"] { --sw: var(--ax-sw-gold); }
.ax-theme[data-ax-theme-set="emerald"] { --sw: var(--ax-sw-emerald); }
.ax-theme[data-ax-theme-set="rose"] { --sw: var(--ax-sw-rose); }
.ax-theme.is-on { box-shadow: inset 0 0 0 2px var(--sw), var(--shadow-1, none); color: var(--text); }
.ax-note { background: transparent; box-shadow: none; font-weight: 500; color: var(--text-muted); white-space: normal; text-align: center; }
.ax-note .ax-i { width: 16px; height: 16px; color: var(--text-accent); }
.ax-replay .ax-i { width: 15px; height: 15px; }
.no-js .ax-themes { display: none; }
.ax-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 1023px) {
  .apps-demo { margin-top: 8px; }
}
@media (max-width: 640px) {
  .ax-platforms { gap: 10px; }
  .ax-platform { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; }
  .ax-platform::after { position: absolute; top: 16px; right: 16px; }
  .ax-stage { max-height: min(700px, 80svh); }
}
@media (max-width: 420px) {
  .ax-themes { gap: 6px; }
  .ax-theme { gap: 6px; min-height: 36px; padding: 0 10px 0 6px; font-size: 12.5px; }
  .ax-theme i { width: 18px; height: 18px; }
  .ax-meta { flex-direction: column; }
}
@media (max-width: 700px) {
  .apps-demo[data-platform="windows"] .ax-stage,
  .apps-demo[data-platform="macos"] .ax-stage { aspect-ratio: 760 / 620; }
}

/* ---------------------------------------------------------------------
   3. Devices
   --------------------------------------------------------------------- */
.ax-device {
  --ax-dev-w: 426px;
  --ax-dev-h: 898px;
  --ax-s: min(tan(atan2(100cqw, var(--ax-dev-w))), tan(atan2(100cqh, var(--ax-dev-h))));
  --ax-status-h: 54px;
  --ax-safe-b: 30px;
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  flex-direction: column;
  width: var(--ax-dev-w);
  height: var(--ax-dev-h);
  transform: translate(-50%, -50%) scale(var(--ax-s));
  transform-origin: 50% 50%;
  transition: opacity 0.2s var(--ax-ease, ease), transform 0.55s cubic-bezier(0.05, 0.7, 0.1, 1);
}
.apps-demo.is-switching .ax-device { opacity: 0; transform: translate(-50%, -50%) scale(calc(var(--ax-s) * 0.95)); }

.ax-screen { position: relative; flex: 1; min-height: 0; overflow: hidden; background: var(--ax-bg); isolation: isolate; }

/* iOS */
.ax-device--ios {
  padding: 12px;
  border-radius: 62px;
  background: linear-gradient(145deg, var(--ax-ios-edge-hi) 0%, var(--ax-ios-edge) 16%, var(--ax-ios-edge-lo) 50%, var(--ax-ios-edge) 84%, var(--ax-ios-edge-hi) 100%);
  box-shadow: inset 0 0 0 1.5px var(--ax-ios-edge-lo), inset 0 0 0 3.5px var(--ax-bezel), 0 50px 90px -40px color-mix(in srgb, var(--ax-shade) 55%, transparent), 0 22px 40px -24px color-mix(in srgb, var(--ax-shade) 40%, transparent);
}
.ax-device--ios .ax-screen { border-radius: 50px; }
.ax-device--android {
  --ax-status-h: 38px;
  --ax-safe-b: 16px;
  padding: 10px;
  border-radius: 48px;
  background: linear-gradient(160deg, var(--ax-android-edge-hi), var(--ax-android-edge) 38%, var(--ax-android-edge) 70%, var(--ax-android-edge-hi));
  box-shadow: inset 0 0 0 3px var(--ax-bezel), 0 50px 90px -40px color-mix(in srgb, var(--ax-shade) 55%, transparent), 0 22px 40px -24px color-mix(in srgb, var(--ax-shade) 40%, transparent);
}
.ax-device--android .ax-screen { border-radius: 38px; }
.ax-device__btn { position: absolute; display: none; width: 4px; border-radius: 2px; background: var(--ax-ios-edge); }
.ax-device--ios .ax-device__btn, .ax-device--android .ax-device__btn { display: block; }
.ax-device--ios .ax-device__btn--a { top: 150px; left: -3px; height: 32px; }
.ax-device--ios .ax-device__btn--b { top: 212px; left: -3px; height: 62px; }
.ax-device--ios .ax-device__btn--c { top: 250px; right: -3px; height: 96px; }
.ax-device--android .ax-device__btn { right: -3px; left: auto; background: var(--ax-android-edge-hi); }
.ax-device--android .ax-device__btn--a { top: 170px; height: 58px; }
.ax-device--android .ax-device__btn--b { top: 250px; height: 110px; }
.ax-device--android .ax-device__btn--c { display: none; }

/* desktop windows */
.ax-device--windows, .ax-device--macos { --ax-dev-w: 1080px; --ax-dev-h: 720px; --ax-status-h: 0px; --ax-safe-b: 0px; overflow: hidden; }
.ax-device--windows { border-radius: 9px; background: var(--ax-win-bar); box-shadow: 0 0 0 1px color-mix(in srgb, var(--ax-black) 16%, transparent), 0 50px 100px -40px color-mix(in srgb, var(--ax-shade) 50%, transparent), 0 22px 44px -26px color-mix(in srgb, var(--ax-shade) 35%, transparent); }
.ax-device--macos { border-radius: 13px; background: var(--ax-mac-bar); box-shadow: 0 0 0 1px color-mix(in srgb, var(--ax-black) 50%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--ax-white) 12%, transparent), 0 50px 100px -40px color-mix(in srgb, var(--ax-shade) 55%, transparent), 0 22px 44px -26px color-mix(in srgb, var(--ax-shade) 38%, transparent); }
.ax-device--macos .ax-screen { margin: 0 1px 1px; border-radius: 0 0 12px 12px; }
@media (max-width: 700px) {
  .ax-device--windows, .ax-device--macos { --ax-dev-w: 760px; --ax-dev-h: 620px; }
}
.ax-titlebar { display: none; flex: none; align-items: center; }
.ax-device--macos .ax-titlebar--mac { display: flex; gap: 14px; height: 30px; padding: 0 12px; color: var(--ax-mac-bar-ink); font: 600 13px/1 var(--ax-font-sys); }
.ax-lights { display: flex; gap: 8px; }
.ax-lights i { width: 12px; height: 12px; border-radius: 50%; background: var(--ax-mac-red); box-shadow: inset 0 0 0 0.5px color-mix(in srgb, var(--ax-black) 25%, transparent); }
.ax-lights i:nth-child(2) { background: var(--ax-mac-amber); }
.ax-lights i:nth-child(3) { background: var(--ax-mac-green); }
.ax-device--windows .ax-titlebar--win { display: flex; gap: 10px; height: 34px; padding-left: 12px; color: var(--ax-win-ink); font: 400 12px/1 var(--ax-font-win); }
.ax-titlebar__icon { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 4px; background: var(--ax-brand-grad); font: 800 6.5px/1 var(--ax-font); color: var(--ax-on-primary); }
.ax-wincaps { display: flex; height: 100%; margin-left: auto; }
.ax-wincap { position: relative; width: 46px; height: 100%; }
.ax-wincap::before, .ax-wincap::after { content: ""; position: absolute; top: 50%; left: 50%; }
.ax-wincap--min::before { width: 10px; height: 1px; background: var(--ax-win-ink); transform: translate(-50%, -50%); }
.ax-wincap--max::before { width: 9px; height: 9px; border: 1px solid var(--ax-win-ink); border-radius: 2px; transform: translate(-50%, -50%); }
.ax-wincap--close::before, .ax-wincap--close::after { width: 12px; height: 1px; background: var(--ax-win-ink); transform: translate(-50%, -50%) rotate(45deg); }
.ax-wincap--close::after { transform: translate(-50%, -50%) rotate(-45deg); }

/* status bars + home indicator */
.ax-status { position: absolute; top: 0; right: 0; left: 0; z-index: 30; display: none; align-items: center; justify-content: space-between; color: var(--ax-ink); pointer-events: none; }
.ax-status__icons { display: flex; align-items: center; gap: 6px; }
.ax-status svg { fill: currentColor; }
.ax-device--ios .ax-status--ios { display: flex; height: 54px; padding: 4px 30px 0 46px; font: 600 16.5px/1 var(--ax-font-sys); letter-spacing: -0.2px; }
.ax-status--ios svg { width: 18px; height: 12px; }
.ax-status--ios svg.ax-bat { width: 27px; height: 13px; }
.ax-island { position: absolute; top: 11px; left: 50%; width: 124px; height: 36px; border-radius: 20px; background: var(--ax-black); transform: translateX(-50%); }
.ax-device--android .ax-status--android { display: flex; height: 38px; padding: 2px 24px 0; font: 500 14px/1 var(--ax-font-sys); }
.ax-status--android svg { width: 14px; height: 14px; }
.ax-status--android svg.ax-bat { width: 8px; }
.ax-punch { position: absolute; top: 11px; left: 50%; width: 16px; height: 16px; border-radius: 50%; background: var(--ax-black); box-shadow: inset 0 0 0 3px var(--ax-punch-ring); transform: translateX(-50%); }
.ax-homebar { position: absolute; bottom: 8px; left: 50%; z-index: 35; display: none; height: 5px; border-radius: 3px; background: var(--ax-ink); transform: translateX(-50%); pointer-events: none; }
.ax-device--ios .ax-homebar { display: block; width: 138px; }
.ax-device--android .ax-homebar { display: block; bottom: 6px; width: 104px; height: 4px; opacity: 0.7; }

/* ---------------------------------------------------------------------
   4. App base
   --------------------------------------------------------------------- */
.ax-app {
  position: absolute;
  inset: 0;
  container: axapp / inline-size;
  overflow: hidden;
  background: var(--ax-bg);
  font-family: var(--ax-font);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ax-ink);
  text-align: left;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv11", "ss01";
}
.ax-app p { margin: 0; }
.ax-app button { font-family: inherit; -webkit-tap-highlight-color: transparent; }
.ax-app img { display: block; max-width: none; }

.ax-scr {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, 14px, 0);
  transition: opacity 0.26s var(--ax-ease), transform var(--ax-page) var(--ax-emph), visibility 0s linear var(--ax-page);
}
.ax-scr.is-active { opacity: 1; visibility: visible; transform: none; transition: opacity 0.32s var(--ax-ease) 0.04s, transform var(--ax-page) var(--ax-emph), visibility 0s; }
.ax-scr--board { transform: translate3d(32px, 0, 0); }
.ax-scr [data-ax-in] { opacity: 0; transform: translate3d(0, 14px, 0) scale(0.985); transition: opacity 0.42s var(--ax-enter), transform 0.65s var(--ax-emph); }
.ax-scr.is-active [data-ax-in] { opacity: 1; transform: none; transition-delay: calc(min(var(--ax-i, 0), 6) * 55ms + 70ms); }

.ax-scroll { flex: 1; min-height: 0; overflow: hidden; scrollbar-width: none; }
.ax-scroll::-webkit-scrollbar { display: none; }
.apps-demo.is-engaged .ax-scroll { overflow-y: auto; overscroll-behavior: contain; }
.ax-page { padding: 20px 18px 140px; }

.ax-over { display: block; font-size: 10.5px; font-weight: 700; line-height: 1.2; letter-spacing: 1.6px; text-transform: uppercase; color: var(--ax-ink-muted); }
.ax-over--gold { color: var(--ax-gold); }
.ax-over--info { color: var(--ax-info); }
.ax-link { padding: 0; border: 0; background: none; font-size: 12.5px; font-weight: 600; color: var(--ax-primary-deep); cursor: pointer; }

.ax-logo { display: grid; flex: none; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--ax-brand-grad); box-shadow: 0 3px 8px -3px color-mix(in srgb, var(--ax-primary) 55%, transparent); font-size: 10.5px; font-weight: 800; letter-spacing: -0.02em; color: var(--ax-on-primary); }
.ax-lockup { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.ax-lockup__name { font-size: 15px; font-weight: 800; letter-spacing: -0.03em; color: var(--ax-primary-deep); white-space: nowrap; }

.ax-iconbtn { position: relative; display: grid; flex: none; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--ax-border-soft); border-radius: 14px; background: var(--ax-surface); color: var(--ax-ink); cursor: pointer; }
.ax-iconbtn .ax-i { width: 20px; height: 20px; }
.ax-iconbtn--gold { border-color: transparent; background: color-mix(in srgb, var(--ax-gold) 16%, var(--ax-surface)); color: var(--ax-gold-deep); }
.ax-badge { position: absolute; top: 6px; right: 6px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--ax-danger); box-shadow: 0 0 0 2px var(--ax-surface); font-size: 9.5px; font-style: normal; font-weight: 700; line-height: 16px; text-align: center; color: var(--ax-white); }

.ax-avatar { position: relative; display: grid; flex: none; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--ax-surface-sunken); font-size: 13px; font-weight: 700; letter-spacing: -0.02em; color: var(--ax-ink); }
.ax-avatar--brand { background: var(--ax-brand-grad); color: var(--ax-on-primary); }
.ax-avatar--a { background: var(--ax-av-a-bg); color: var(--ax-av-a-ink); }
.ax-avatar--b { background: var(--ax-av-b-bg); color: var(--ax-av-b-ink); }
.ax-avatar--c { background: var(--ax-av-c-bg); color: var(--ax-av-c-ink); }
.ax-avatar--d { background: var(--ax-av-d-bg); color: var(--ax-av-d-ink); }
.ax-avatar--group { border-radius: 16px; background: var(--ax-primary-tint); color: var(--ax-primary-deep); }
.ax-avatar--group .ax-i { width: 20px; height: 20px; }
.ax-avatar.is-online::after { content: ""; position: absolute; right: 1px; bottom: 1px; width: 11px; height: 11px; border-radius: 50%; background: var(--ax-success); box-shadow: 0 0 0 2px var(--ax-surface); }

.ax-tile-sm { --c: var(--ax-primary); display: grid; flex: none; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: color-mix(in srgb, var(--c) 12%, var(--ax-surface)); color: color-mix(in srgb, var(--c) 88%, var(--ax-black)); }
.ax-tile-sm .ax-i { width: 19px; height: 19px; }
.ax-tile-sm--success { --c: var(--ax-success); }
.ax-tile-sm--info { --c: var(--ax-info); }
.ax-tile-sm--warn { --c: var(--ax-warn); }
.ax-tile-sm--gold { --c: var(--ax-gold); }
.ax-tile-sm--danger { --c: var(--ax-danger); }

.ax-orb { position: absolute; border-radius: 50%; background: var(--ax-white); opacity: 0.07; pointer-events: none; }
.ax-orb--a { top: -46px; right: -40px; width: 150px; height: 150px; }
.ax-orb--b { bottom: -64px; left: -34px; width: 110px; height: 110px; opacity: 0.05; }

.ax-sechead { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 30px 0 12px; }
.ax-sechead p { font-size: 17px; font-weight: 700; line-height: 1.3; letter-spacing: -0.2px; }
.ax-sechead--icon { align-items: center; justify-content: flex-start; }
.ax-sechead--icon .ax-tile-sm { width: 34px; height: 34px; border-radius: 10px; }
.ax-sechead--icon .ax-tile-sm .ax-i { width: 17px; height: 17px; }
.ax-sechead--icon p { font-size: 20px; line-height: 1.2; }

/* ---------------------------------------------------------------------
   5. Onboarding
   --------------------------------------------------------------------- */
.ax-scr--code, .ax-scr--login { z-index: 5; padding-top: var(--ax-status-h); }
.ax-scr--code { background: radial-gradient(closest-side, color-mix(in srgb, var(--ax-ink) 6%, transparent), transparent) -120px -60px / 380px 380px no-repeat, radial-gradient(closest-side, color-mix(in srgb, var(--ax-ink) 5%, transparent), transparent) calc(100% + 120px) calc(100% + 40px) / 360px 360px no-repeat, var(--ax-bg); }
.ax-code { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; padding: 0 24px 64px; text-align: center; }
.ax-code__logo { width: 210px; height: auto; margin-bottom: 26px; }
.ax-code__title { font-size: 30px; font-weight: 800; line-height: 1.1; letter-spacing: -0.8px; }
.ax-code__sub { max-width: 290px; margin: 8px 0 26px !important; font-size: 14.5px; line-height: 1.5; color: var(--ax-ink-muted); }
.ax-code__card { width: 100%; max-width: 350px; padding: 18px; border: 1px solid var(--ax-border-soft); border-radius: 20px; background: var(--ax-surface); box-shadow: var(--ax-shadow-sm); text-align: left; }
.ax-code__card .ax-over { margin-bottom: 10px; }
.ax-codefield { display: flex; align-items: center; justify-content: center; height: 52px; border: 1.5px solid transparent; border-radius: 14px; background: var(--ax-surface-alt); font-size: 16px; font-weight: 600; letter-spacing: 0.4px; color: var(--ax-ink); transition: border-color 0.2s, box-shadow 0.2s, background 0.2s; }
.ax-codefield__ph, .ax-field__ph { font-weight: 400; letter-spacing: 0; color: var(--ax-ink-subtle); }
.has-value .ax-codefield__ph, .has-value .ax-field__ph { display: none; }
.ax-caret { display: none; width: 2px; height: 19px; margin-left: 1px; border-radius: 1px; background: var(--ax-primary); }
.is-focus .ax-caret { display: inline-block; animation: ax-blink 1s steps(1) infinite; }
.is-focus.ax-codefield, .is-focus.ax-field { border-color: var(--ax-primary); background: var(--ax-surface); box-shadow: 0 0 0 4px var(--ax-primary-soft); }
@keyframes ax-blink { 50% { opacity: 0; } }
.ax-darkbtn { display: flex; align-items: center; justify-content: center; gap: 8px; height: 52px; margin-top: 14px; border-radius: 14px; background: linear-gradient(180deg, var(--ax-dark-btn-a), var(--ax-dark-btn-b)); box-shadow: 0 10px 20px -10px color-mix(in srgb, var(--ax-inverse) 70%, transparent); font-size: 15px; font-weight: 600; color: var(--ax-white); transition: transform 0.16s var(--ax-ease), filter 0.2s; }
.ax-darkbtn .ax-i, .ax-cta .ax-i { width: 17px; height: 17px; }
.is-pressed { transform: scale(0.96); filter: brightness(1.12); }
.ax-code__hint { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 18px !important; font-size: 12px; color: var(--ax-ink-subtle); }
.ax-code__hint .ax-i { width: 14px; height: 14px; }

.ax-scr--login { background: radial-gradient(120% 55% at 50% 0%, color-mix(in srgb, var(--ax-primary) 16%, var(--ax-surface)), transparent 72%), radial-gradient(70% 45% at 100% 100%, color-mix(in srgb, var(--ax-primary) 12%, var(--ax-surface)), transparent 70%), var(--ax-bg); }
.ax-login { position: relative; display: flex; flex: 1; align-items: center; justify-content: center; padding: 0 18px 40px; }
.ax-doodle { position: absolute; width: 38px; height: 38px; color: var(--ax-primary); opacity: 0.12; stroke-width: 1.6; }
.ax-doodle--a { top: 7%; left: 10%; transform: rotate(-14deg); }
.ax-doodle--b { top: 16%; right: 12%; transform: rotate(18deg); }
.ax-doodle--c { bottom: 8%; left: 14%; transform: rotate(10deg); }
.ax-doodle--d { right: 9%; bottom: 13%; transform: rotate(-10deg); }
.ax-login__card { position: relative; width: 100%; max-width: 380px; padding: 24px 22px 18px; border: 1px solid color-mix(in srgb, var(--ax-surface) 80%, transparent); border-radius: 28px; background: color-mix(in srgb, var(--ax-surface) 74%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: var(--ax-shadow-lg); text-align: center; }
.ax-login__card .ax-logo { width: 40px; height: 40px; border-radius: 12px; font-size: 14px; }
.ax-login__card .ax-lockup__name { font-size: 19px; }
.ax-login__rule { display: block; width: 36px; height: 3px; margin: 14px auto; border-radius: 2px; background: var(--ax-primary); }
.ax-login__brand { font-family: var(--ax-font-display); font-size: 24px; font-weight: 700; line-height: 1.15; letter-spacing: -0.2px; }
.ax-login__tag { margin-top: 4px !important; font-size: 9.5px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--ax-ink-muted); }
.ax-login__title { margin-top: 18px !important; font-size: 19px; font-weight: 700; letter-spacing: -0.3px; }
.ax-login__sub { margin: 2px 0 18px !important; font-size: 12.5px; color: var(--ax-ink-muted); }
.ax-label { margin-bottom: 6px !important; font-size: 13px; font-weight: 600; text-align: left; }
.ax-label--row { display: flex; justify-content: space-between; }
.ax-label--row .ax-link { font-size: 12px; }
.ax-field { display: flex; align-items: center; gap: 10px; height: 50px; margin-bottom: 14px; padding: 0 14px; border: 1.5px solid var(--ax-border-field); border-radius: 14px; background: var(--ax-surface); text-align: left; font-size: 14px; color: var(--ax-ink); transition: border-color 0.2s, box-shadow 0.2s; }
.ax-field > .ax-i { width: 17px; height: 17px; color: var(--ax-ink-subtle); }
.ax-field__end { margin-left: auto; }
.ax-typed--dots { letter-spacing: 2px; }
.ax-cta { position: relative; display: flex; align-items: center; justify-content: center; height: 52px; margin-top: 6px; border-radius: 16px; background: var(--ax-brand-grad); box-shadow: var(--ax-glow); font-size: 15px; font-weight: 700; color: var(--ax-on-primary); transition: transform 0.16s var(--ax-ease), filter 0.2s; }
.ax-cta__label { display: inline-flex; align-items: center; gap: 8px; transition: opacity 0.2s; }
.ax-spin { position: absolute; top: 50%; left: 50%; display: none; width: 20px; height: 20px; margin: -10px 0 0 -10px; border: 2px solid color-mix(in srgb, var(--ax-on-primary) 35%, transparent); border-top-color: var(--ax-on-primary); border-radius: 50%; animation: ax-spin 0.7s linear infinite; }
.is-loading .ax-cta__label { opacity: 0; }
.is-loading .ax-spin { display: block; }
@keyframes ax-spin { to { transform: rotate(360deg); } }
.ax-login__new { margin-top: 14px !important; font-size: 12.5px; color: var(--ax-ink-muted); }
.ax-login__new .ax-link { font-weight: 700; }
.ax-login__switch { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 8px !important; font-size: 12px; font-weight: 600; color: var(--ax-ink-muted); }
.ax-login__switch .ax-i { width: 14px; height: 14px; }

/* shell visibility by phase */
.ax-shell { position: absolute; inset: var(--ax-status-h) 0 0 0; transition: opacity 0.3s var(--ax-ease); }
.ax-app[data-phase="onboard"] .ax-shell { opacity: 0; visibility: hidden; }

/* ---------------------------------------------------------------------
   6. Navigation — floating capsule (phones) and side rail (wide)
   --------------------------------------------------------------------- */
.ax-main { position: absolute; inset: 0; }
.ax-rail { display: none; }
.ax-nav {
  position: absolute;
  right: 34px;
  bottom: calc(var(--ax-safe-b) + 4px);
  left: 34px;
  z-index: 20;
  display: grid;
  grid-template-columns: 1fr 1fr 2.3fr 1fr 1fr;
  align-items: stretch;
  height: 68px;
  padding: 6px;
  border: 1px solid var(--ax-border-soft);
  border-radius: 32px;
  background: color-mix(in srgb, var(--ax-surface) 80%, transparent);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  backdrop-filter: blur(22px) saturate(1.4);
  box-shadow: var(--ax-shadow-md);
  transition: grid-template-columns 0.42s var(--ax-emph);
}
.ax-nav__pill { position: absolute; top: 6px; bottom: 6px; left: 0; display: none; border-radius: 24px; background: var(--ax-brand-grad); box-shadow: 0 6px 14px -4px color-mix(in srgb, var(--ax-primary) 45%, transparent); transition: transform 0.42s var(--ax-emph), width 0.42s var(--ax-emph); }
.ax-nav.is-js .ax-nav__pill { display: block; }
.ax-nav__item { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; min-width: 0; padding: 0; border: 0; border-radius: 24px; background: none; color: var(--ax-ink-subtle); cursor: pointer; transition: color 0.25s var(--ax-ease); }
.ax-nav__item > .ax-i, .ax-nav__ic .ax-i { width: 22px; height: 22px; }
.ax-nav__ic { position: relative; display: grid; place-items: center; }
.ax-nav__ic .ax-badge { top: -6px; right: -9px; }
.ax-nav__label { max-width: 0; overflow: hidden; font-size: 12px; font-weight: 700; line-height: 1; white-space: nowrap; opacity: 0; transition: max-width 0.42s var(--ax-emph), margin 0.42s var(--ax-emph), opacity 0.2s; }
.ax-nav__item.is-on { color: var(--ax-on-primary); }
.ax-nav__item.is-on .ax-nav__label { max-width: 90px; margin-left: 7px; opacity: 1; transition-delay: 0s, 0s, 0.1s; }
.ax-nav:not(.is-js) .ax-nav__item.is-on { background: var(--ax-brand-grad); box-shadow: 0 6px 14px -4px color-mix(in srgb, var(--ax-primary) 45%, transparent); }
.ax-nav__item.is-on .ax-badge { box-shadow: 0 0 0 2px var(--ax-primary); }

/* ---------------------------------------------------------------------
   7. Hub
   --------------------------------------------------------------------- */
.ax-appbar { display: flex; flex: none; align-items: center; height: 61px; padding: 8px 18px; border-bottom: 1px solid var(--ax-border-soft); }
.ax-lockup--bar { flex: 1; }
.ax-hero { position: relative; overflow: hidden; padding: 20px; border-radius: 24px; background: var(--ax-hero-grad); box-shadow: 0 12px 30px -10px color-mix(in srgb, var(--ax-hero-a) 55%, transparent); color: var(--ax-on-hero); }
.ax-hero__row { position: relative; display: flex; align-items: center; gap: 12px; }
.ax-hero__icon { display: grid; flex: none; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: color-mix(in srgb, var(--ax-on-hero) 13%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ax-on-hero) 16%, transparent); color: var(--ax-hero-accent); }
.ax-hero__icon .ax-i { width: 26px; height: 26px; }
.ax-hero__over { display: block; font-size: 10.5px; font-weight: 700; line-height: 1.2; letter-spacing: 1.6px; text-transform: uppercase; color: var(--ax-hero-accent); }
.ax-hero__title { display: block; margin-top: 5px; font-size: 20px; font-weight: 700; line-height: 1.25; letter-spacing: -0.35px; }
.ax-hero__sub { position: relative; margin-top: 12px !important; font-size: 12.5px; line-height: 1.45; opacity: 0.78; }
.ax-hero__btn { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 48px; margin-top: 16px; border: 0; border-radius: 14px; background: var(--ax-on-hero); box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--ax-black) 45%, transparent); font-size: 14px; font-weight: 600; color: var(--ax-hero-a); cursor: pointer; transition: transform 0.16s var(--ax-ease); }
.ax-hero__btn .ax-i { width: 16px; height: 16px; }
.ax-hero__btn:active, .ax-qa:active, .ax-btn:active, .ax-chip:active, .ax-li:active { transform: scale(0.94); }

.ax-quick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 24px; }
.ax-qa { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; padding: 0; border: 0; background: none; font-size: 11.5px; font-weight: 500; line-height: 1.3; text-align: center; color: var(--ax-ink); cursor: pointer; transition: transform 0.16s var(--ax-ease); }
.ax-tile { --c: var(--ax-primary); display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; background: linear-gradient(135deg, color-mix(in srgb, var(--c) 80%, var(--ax-white)), var(--c) 55%, color-mix(in srgb, var(--c) 86%, var(--ax-black))); box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--c) 65%, transparent); color: var(--ax-white); }
.ax-tile .ax-i { width: 24px; height: 24px; }
.ax-tile--primary { color: var(--ax-on-primary); }
.ax-tile--danger { --c: var(--ax-danger); }
.ax-tile--info { --c: var(--ax-info); }
.ax-tile--success { --c: var(--ax-success); }

.ax-carousel { display: flex; gap: 12px; margin: 0 -18px; padding: 0 18px 8px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 18px; scrollbar-width: none; }
.ax-carousel::-webkit-scrollbar { display: none; }
.ax-ccard { display: flex; flex: 0 0 190px; flex-direction: column; overflow: hidden; border: 1px solid var(--ax-border-soft); border-radius: 18px; background: var(--ax-surface); scroll-snap-align: start; }
.ax-ccard__thumb, .ax-course__thumb { position: relative; display: block; overflow: hidden; height: 104px; background: var(--ax-surface-sunken); }
.ax-ccard__thumb > svg, .ax-course__thumb > svg { display: block; width: 100%; height: 100%; }
.ax-chip-sm { position: absolute; bottom: 10px; left: 10px; display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 10px; background: var(--ax-surface); font-size: 10.5px; font-style: normal; font-weight: 600; line-height: 1.1; color: var(--ax-primary-deep); }
.ax-chip-sm .ax-i { width: 11px; height: 11px; }
.ax-chip-sm--done { color: color-mix(in srgb, var(--ax-success) 85%, var(--ax-black)); }
.ax-chip-sm--tl { top: 10px; bottom: auto; font-size: 9.5px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--ax-ink); }
.ax-chip-sm--tr { top: 10px; right: 10px; bottom: auto; left: auto; font-size: 9.5px; letter-spacing: 0.5px; text-transform: uppercase; }
.ax-chip-sm--br { right: 10px; bottom: 12px; left: auto; color: var(--ax-ink); }
.ax-ccard__body { display: flex; flex-direction: column; gap: 8px; padding: 12px; }
.ax-ccard__body b { display: -webkit-box; height: 38px; overflow: hidden; font-size: 14.5px; font-weight: 700; line-height: 1.3; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ax-ccard__body small { display: flex; align-items: center; gap: 4px; overflow: hidden; font-size: 11.5px; color: var(--ax-ink-muted); white-space: nowrap; }
.ax-ccard__body small .ax-i, .ax-by .ax-i { width: 12px; height: 12px; color: var(--ax-ink-subtle); }
.ax-bar { display: block; height: 5px; overflow: hidden; border-radius: 3px; background: var(--ax-surface-sunken); }
.ax-bar i { display: block; width: calc(var(--p) * 100%); height: 100%; border-radius: inherit; background: var(--ax-primary); }
.ax-bar--done i { background: var(--ax-success); }

.ax-feed { display: grid; gap: 12px; }
.ax-row { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--ax-border-soft); border-radius: 18px; background: var(--ax-surface); }
.ax-row__txt { display: flex; flex-direction: column; min-width: 0; }
.ax-row__txt b { font-size: 14px; font-weight: 600; line-height: 1.35; }
.ax-row__txt small { font-size: 12px; color: var(--ax-ink-subtle); }
.ax-plus { display: inline-flex; flex: none; align-items: center; gap: 3px; margin-left: auto; padding: 4px 8px; border-radius: 10px; background: color-mix(in srgb, var(--ax-success) 12%, var(--ax-surface)); font-size: 11.5px; font-style: normal; font-weight: 700; color: color-mix(in srgb, var(--ax-success) 90%, var(--ax-black)); }
.ax-plus .ax-i { width: 12px; height: 12px; }

/* ---------------------------------------------------------------------
   8. Learn
   --------------------------------------------------------------------- */
.ax-display { font-family: var(--ax-font-display); font-size: 28px; font-weight: 700; line-height: 1.12; letter-spacing: -0.4px; }
.ax-pagesub { margin: 6px 0 18px !important; font-size: 14px; color: var(--ax-ink-muted); }
.ax-summary, .ax-level, .ax-rank { position: relative; overflow: hidden; border-radius: 24px; background: var(--ax-inverse-grad); box-shadow: var(--ax-dark-shadow); color: var(--ax-white); }
.ax-summary { padding: 18px; }
.ax-summary__top { position: relative; display: flex; align-items: center; gap: 22px; }
.ax-ring, .ax-lvlring { position: relative; display: grid; flex: none; place-items: center; width: 84px; height: 84px; }
.ax-ring svg, .ax-lvlring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.ax-ring circle, .ax-lvlring circle { fill: none; stroke: color-mix(in srgb, var(--ax-white) 12%, transparent); stroke-width: 7; }
.ax-ring circle + circle, .ax-lvlring circle + circle { stroke: var(--ax-ring-arc); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc((1 - var(--p)) * 100); }
.ax-lvlring circle + circle { stroke: var(--ax-gold); }
.ax-ring span, .ax-lvlring span { position: relative; display: flex; flex-direction: column; align-items: center; line-height: 1; }
.ax-ring b { font-size: 20px; font-weight: 800; letter-spacing: -0.5px; }
.ax-ring small, .ax-lvlring small { margin-top: 3px; font-size: 8px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; opacity: 0.62; }
.ax-summary__stats { display: grid; gap: 12px; }
.ax-summary__stats > span { display: flex; align-items: center; gap: 10px; }
.ax-summary__stats i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: color-mix(in srgb, var(--ax-white) 10%, transparent); }
.ax-summary__stats i .ax-i { width: 15px; height: 15px; }
.ax-summary__stats b { display: block; font-size: 17px; font-weight: 800; line-height: 1; }
.ax-summary__stats small { font-size: 11px; opacity: 0.62; }
.ax-summary__foot { position: relative; display: flex; align-items: center; gap: 8px; margin-top: 14px !important; padding-top: 12px; border-top: 1px solid color-mix(in srgb, var(--ax-white) 10%, transparent); font-size: 12px; color: color-mix(in srgb, var(--ax-white) 78%, transparent); }
.ax-summary__foot .ax-i { width: 14px; height: 14px; color: var(--ax-ring-arc); }

.ax-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.ax-chip { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 13px; border: 1px solid var(--ax-border-soft); border-radius: 17px; background: var(--ax-surface); font-size: 12.5px; font-weight: 600; color: var(--ax-ink-muted); cursor: pointer; transition: background 0.25s, color 0.25s, box-shadow 0.25s, transform 0.16s var(--ax-ease); }
.ax-chip .ax-i { width: 14px; height: 14px; }
.ax-chip.is-on { border-color: transparent; background: var(--ax-primary); box-shadow: var(--ax-glow); color: var(--ax-on-primary); }

.ax-courses { display: grid; gap: 14px; }
.ax-course { overflow: hidden; border: 1px solid var(--ax-border-soft); border-radius: 20px; background: var(--ax-surface); box-shadow: var(--ax-shadow-xs); }
.ax-course__thumb { height: 168px; }
.ax-course__thumb .ax-chip-sm { background: color-mix(in srgb, var(--ax-surface) 92%, transparent); }
.ax-course__play { position: absolute; bottom: 12px; left: 12px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: color-mix(in srgb, var(--ax-surface) 90%, transparent); color: var(--ax-primary-deep); }
.ax-course__play .ax-i { width: 14px; height: 14px; }
.ax-course__play use[href="#ax-i-play"] { fill: currentColor; }
.ax-course__body { padding: 14px 16px 16px; }
.ax-course__body > b { display: block; font-size: 17px; font-weight: 700; line-height: 1.3; letter-spacing: -0.2px; }
.ax-by { display: flex; align-items: center; gap: 5px; margin-top: 4px; font-size: 12.5px; color: var(--ax-ink-muted); }
.ax-course__body p { display: -webkit-box; margin: 8px 0 12px !important; overflow: hidden; font-size: 13px; line-height: 1.45; color: var(--ax-ink-muted); -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ax-seg { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 4px; }
.ax-seg i { height: 4px; border-radius: 2px; background: var(--ax-surface-sunken); }
.ax-seg i.on { background: var(--ax-primary); }
.ax-seg--done i.on { background: var(--ax-success); }
.ax-course__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; }
.ax-course__foot small { font-size: 12.5px; color: var(--ax-ink-muted); }
.ax-course__foot .ax-ok { font-weight: 600; color: color-mix(in srgb, var(--ax-success) 88%, var(--ax-black)); }
.ax-btn { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 16px; border: 0; border-radius: 12px; background: var(--ax-brand-grad); box-shadow: var(--ax-glow); font-size: 13.5px; font-weight: 700; color: var(--ax-on-primary); cursor: pointer; transition: transform 0.16s var(--ax-ease); }
.ax-btn .ax-i { width: 15px; height: 15px; }
.ax-btn--soft { background: var(--ax-primary-tint); box-shadow: none; color: var(--ax-primary-deep); }
.ax-empty { padding: 30px 0; font-size: 13px; text-align: center; color: var(--ax-ink-subtle); }

/* ---------------------------------------------------------------------
   9. Home (dashboard / my progress)
   --------------------------------------------------------------------- */
.ax-greet { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.ax-greet .ax-avatar { width: 46px; height: 46px; font-size: 15px; }
.ax-greet b { display: block; margin-top: 3px; font-size: 22px; font-weight: 800; line-height: 1.15; letter-spacing: -0.5px; }
.ax-greet__lvl { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; padding: 6px 10px; border-radius: 12px; background: color-mix(in srgb, var(--ax-gold) 16%, var(--ax-surface)); font-size: 11.5px; font-weight: 700; color: var(--ax-gold-deep); }
.ax-greet__lvl .ax-i { width: 13px; height: 13px; }
.ax-level { padding: 18px; }
.ax-level__trophy { position: absolute; top: 20px; right: 18px; width: 44px; height: 44px; color: var(--ax-gold); stroke-width: 1.6; }
.ax-level__top { position: relative; display: flex; align-items: center; gap: 16px; }
.ax-lvlring { width: 80px; height: 80px; }
.ax-lvlring b { font-size: 26px; font-weight: 800; line-height: 1; }
.ax-lvlring small { order: -1; margin: 0 0 2px; }
.ax-level__xp { display: flex; flex-direction: column; }
.ax-level__num { display: flex; align-items: baseline; gap: 4px; margin-top: 3px; }
.ax-level__num b { font-size: 34px; font-weight: 800; line-height: 1; letter-spacing: -1px; }
.ax-level__num small { font-size: 12px; opacity: 0.6; }
.ax-level__xp > small { margin-top: 3px; font-size: 11px; opacity: 0.55; }
.ax-level__chip { position: relative; display: inline-block; margin-top: 12px; padding: 3px 10px; border-radius: 8px; background: var(--ax-gold); font-size: 11px; font-weight: 700; color: var(--ax-on-gold); }
.ax-level__bar { position: relative; display: block; height: 6px; margin-top: 14px; overflow: hidden; border-radius: 3px; background: color-mix(in srgb, var(--ax-white) 14%, transparent); }
.ax-level__bar i { display: block; width: calc(var(--p) * 100%); height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--ax-gold), var(--ax-streak)); }
.ax-level__foot { position: relative; display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.ax-level__foot small { font-size: 11px; opacity: 0.72; }
.ax-level__foot b { font-size: 12px; font-weight: 800; color: var(--ax-gold); }

.ax-tiles3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.ax-stat { --c: var(--ax-streak); position: relative; display: flex; flex-direction: column; justify-content: flex-end; height: 102px; padding: 12px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--c) 20%, transparent); border-radius: 18px; background: color-mix(in srgb, var(--c) 8%, var(--ax-surface)); }
.ax-stat--xp { --c: var(--ax-info); }
.ax-stat--badge { --c: var(--ax-gold); }
.ax-spark { position: absolute; right: 0; bottom: 0; left: 0; width: 100%; height: 58%; fill: color-mix(in srgb, var(--c) 17%, transparent); }
.ax-stat__ic { position: absolute; top: 12px; left: 12px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: color-mix(in srgb, var(--c) 15%, var(--ax-surface)); color: color-mix(in srgb, var(--c) 88%, var(--ax-black)); }
.ax-stat__ic .ax-i { width: 15px; height: 15px; }
.ax-stat b { position: relative; font-size: 22px; font-weight: 800; line-height: 1; letter-spacing: -0.5px; color: color-mix(in srgb, var(--c) 82%, var(--ax-black)); }
.ax-stat small { position: relative; margin-top: 3px; font-size: 10.5px; font-weight: 600; color: var(--ax-ink-muted); }

.ax-badges { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ax-badgecard { position: relative; display: flex; flex-direction: column; gap: 3px; min-height: 116px; padding: 12px 10px; border: 1px solid var(--ax-border-soft); border-radius: 16px; background: var(--ax-surface); }
.ax-badgecard__ic { display: grid; place-items: center; width: 30px; height: 30px; margin-bottom: 6px; border-radius: 10px; background: var(--ax-surface-sunken); color: var(--ax-ink-subtle); }
.ax-badgecard__ic .ax-i { width: 15px; height: 15px; }
.ax-badgecard b { font-size: 11.5px; font-weight: 700; line-height: 1.25; }
.ax-badgecard small { font-size: 9.5px; line-height: 1.3; color: var(--ax-ink-muted); }
.ax-badgecard.is-won { border-color: transparent; background: var(--ax-inverse-grad); color: var(--ax-white); }
.ax-badgecard.is-won .ax-badgecard__ic { background: var(--ax-gold); color: var(--ax-on-gold); }
.ax-badgecard.is-won small { color: color-mix(in srgb, var(--ax-white) 60%, transparent); }
.ax-badgecard__ok { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--ax-gold); color: var(--ax-on-gold); }
.ax-badgecard__ok .ax-i { width: 10px; height: 10px; stroke-width: 3; }

/* ---------------------------------------------------------------------
   10. Chat + You + Leaderboard
   --------------------------------------------------------------------- */
.ax-titlerow { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.ax-titlerow small { font-size: 13px; color: var(--ax-ink-muted); }
.ax-h1 { font-size: 24px; font-weight: 800; line-height: 1.2; letter-spacing: -0.5px; }
.ax-search { display: flex; align-items: center; gap: 10px; height: 44px; margin-bottom: 6px; padding: 0 14px; border-radius: 14px; background: var(--ax-surface-alt); font-size: 13.5px; color: var(--ax-ink-subtle); }
.ax-search .ax-i { width: 17px; height: 17px; }
.ax-convo { display: flex; align-items: center; gap: 12px; padding: 12px 2px; border-bottom: 1px solid var(--ax-border-soft); }
.ax-convo:last-child { border-bottom: 0; }
.ax-convo .ax-avatar { width: 48px; height: 48px; font-size: 14px; }
.ax-convo__txt { flex: 1; min-width: 0; }
.ax-convo__top, .ax-convo__msg { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ax-convo__top b { overflow: hidden; font-size: 14.5px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.ax-convo__top small { flex: none; font-size: 11.5px; color: var(--ax-ink-subtle); }
.ax-convo__msg { margin-top: 3px; }
.ax-convo__msg > span { min-width: 0; overflow: hidden; font-size: 13px; color: var(--ax-ink-muted); white-space: nowrap; text-overflow: ellipsis; }
.ax-count { flex: none; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--ax-primary); font-size: 11px; font-style: normal; font-weight: 700; line-height: 20px; text-align: center; color: var(--ax-on-primary); }
.ax-voice { display: inline-flex !important; align-items: center; gap: 6px; font-weight: 600; color: var(--ax-primary-deep) !important; }
.ax-voice .ax-i { width: 14px; height: 14px; }
.ax-wave { display: inline-flex; align-items: center; gap: 2px; height: 16px; }
.ax-wave i { width: 2.5px; height: 40%; border-radius: 2px; background: var(--ax-primary); transform-origin: 50% 50%; animation: ax-wave 1.3s ease-in-out infinite; }
.ax-wave i:nth-child(3n) { height: 85%; animation-delay: -0.3s; }
.ax-wave i:nth-child(3n+1) { height: 60%; animation-delay: -0.6s; }
.ax-wave i:nth-child(4n) { height: 100%; animation-delay: -0.9s; }
@keyframes ax-wave { 50% { transform: scaleY(0.45); } }

.ax-profile { position: relative; overflow: hidden; padding: 22px 18px 18px; border: 1px solid var(--ax-border-soft); border-radius: 24px; background: var(--ax-surface); box-shadow: var(--ax-shadow-sm); text-align: center; }
.ax-orb--tint { top: -90px; right: -70px; width: 240px; height: 240px; background: var(--ax-primary-soft); opacity: 1; }
.ax-avatar--xl { width: 72px; height: 72px; margin: 0 auto 10px; box-shadow: 0 0 0 3px var(--ax-surface), 0 0 0 5px var(--ax-primary); font-size: 24px; }
.ax-profile__name { position: relative; font-size: 20px; font-weight: 800; letter-spacing: -0.4px; }
.ax-profile__meta { position: relative; font-size: 12.5px; color: var(--ax-ink-muted); }
.ax-profile__chips { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 12px; }
.ax-pchip { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border-radius: 10px; background: var(--ax-primary-soft); font-size: 11px; font-style: normal; font-weight: 700; color: var(--ax-primary-deep); }
.ax-pchip--gold { background: color-mix(in srgb, var(--ax-gold) 16%, var(--ax-surface)); color: var(--ax-gold-deep); }
.ax-pchip .ax-i { width: 12px; height: 12px; }
.ax-profile__info { position: relative; display: grid; gap: 6px; margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--ax-border-soft); font-size: 12.5px; color: var(--ax-ink-muted); }
.ax-profile__info span { display: flex; align-items: center; justify-content: center; gap: 6px; }
.ax-profile__info .ax-i { width: 14px; height: 14px; color: var(--ax-ink-subtle); }
.ax-group { display: flex; align-items: center; gap: 10px; margin: 22px 4px 8px !important; font-size: 10.5px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--ax-ink-subtle); }
.ax-group::after { content: ""; flex: 1; height: 1px; background: var(--ax-border-soft); }
.ax-list { overflow: hidden; border: 1px solid var(--ax-border-soft); border-radius: 18px; background: var(--ax-surface); }
.ax-list + .ax-list { margin-top: 14px; }
.ax-li { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border: 0; border-bottom: 1px solid var(--ax-border-soft); background: none; font-size: 14px; text-align: left; color: var(--ax-ink); transition: background 0.2s, transform 0.16s var(--ax-ease); }
.ax-li:last-child { border-bottom: 0; }
button.ax-li { cursor: pointer; }
button.ax-li:hover { background: var(--ax-primary-tint); }
.ax-li .ax-tile-sm { width: 38px; height: 38px; }
.ax-li__txt { display: flex; flex-direction: column; min-width: 0; }
.ax-li__txt b { font-size: 14px; font-weight: 600; line-height: 1.35; }
.ax-li__txt small { font-size: 12px; color: var(--ax-ink-muted); }
.ax-chev { width: 16px; height: 16px; margin-left: auto; color: var(--ax-ink-subtle); }
.ax-li--danger b { color: var(--ax-danger); }

.ax-topbar { display: flex; flex: none; align-items: center; gap: 12px; padding: 10px 18px; }
.ax-topbar .ax-iconbtn { width: 40px; height: 40px; border-radius: 12px; }
.ax-topbar__title { display: flex; flex-direction: column; line-height: 1.2; }
.ax-topbar__title b { font-size: 17px; font-weight: 700; }
.ax-topbar__title small { font-size: 12px; color: var(--ax-ink-muted); }
.ax-topbar .ax-iconbtn--gold { margin-left: auto; }
.ax-rank { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 22px; }
.ax-rank > span:not(.ax-orb):not(.ax-rank__shield) { position: relative; }
.ax-rank b { display: block; margin-top: 3px; font-size: 16px; font-weight: 700; }
.ax-rank__shield { position: relative; display: grid; flex: none; place-items: center; width: 44px; height: 50px; background: linear-gradient(180deg, var(--ax-gold), var(--ax-gold-deep)); clip-path: polygon(50% 0, 100% 14%, 100% 62%, 50% 100%, 0 62%, 0 14%); font-size: 15px; font-weight: 800; color: var(--ax-on-gold); }
.ax-rank__trophy { position: relative; width: 32px; height: 32px; margin-left: auto; color: var(--ax-gold); stroke-width: 1.7; }
.ax-podium { position: relative; display: grid; grid-template-columns: 1fr 1.12fr 1fr; align-items: end; gap: 8px; margin: 22px 0 6px; padding-top: 26px; }
.ax-confetti { position: absolute; top: var(--y); left: var(--x); width: 6px; height: 11px; border-radius: 2px; background: var(--c); opacity: 0.8; transform: rotate(var(--r)); }
.ax-pod { --c: var(--ax-info); position: relative; display: flex; flex-direction: column; align-items: center; }
.ax-pod--1 { --c: var(--ax-gold); }
.ax-pod--3 { --c: var(--ax-streak); }
.ax-pod__card { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; padding: 12px 6px 10px; border: 1px solid color-mix(in srgb, var(--c) 26%, transparent); border-bottom: 0; border-radius: 16px 16px 0 0; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 10%, var(--ax-surface)), color-mix(in srgb, var(--c) 24%, var(--ax-surface))); }
.ax-pod--1 .ax-pod__card { padding-top: 20px; padding-bottom: 16px; }
.ax-pod__card .ax-avatar { width: 44px; height: 44px; margin-bottom: 6px; box-shadow: 0 0 0 2px var(--ax-surface), 0 0 0 4px color-mix(in srgb, var(--c) 70%, var(--ax-surface)); }
.ax-pod--1 .ax-pod__card .ax-avatar { width: 54px; height: 54px; font-size: 16px; }
.ax-pod__card .ax-avatar i { position: absolute; bottom: -7px; left: 50%; display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px var(--ax-surface); font-size: 9.5px; font-style: normal; font-weight: 800; color: var(--ax-white); transform: translateX(-50%); }
.ax-pod__card b { max-width: 100%; overflow: hidden; font-size: 11.5px; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
.ax-pod__card small { padding: 1px 7px; border-radius: 8px; background: color-mix(in srgb, var(--c) 16%, var(--ax-surface)); font-size: 9.5px; font-weight: 700; color: color-mix(in srgb, var(--c) 70%, var(--ax-black)); }
.ax-pod__base { display: block; width: 112%; height: 30px; border-radius: 4px; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 45%, var(--ax-surface)), color-mix(in srgb, var(--c) 62%, var(--ax-surface))); clip-path: polygon(7% 0, 93% 0, 100% 40%, 100% 100%, 0 100%, 0 40%); }
.ax-pod--1 .ax-pod__base { height: 44px; }
.ax-pod--3 .ax-pod__base { height: 22px; }
.ax-pod__crown { position: absolute; top: -22px; z-index: 1; width: 24px; height: 24px; color: var(--ax-gold); fill: var(--ax-gold); }
.ax-select { display: inline-flex; align-items: center; gap: 4px; height: 30px; margin-left: auto; padding: 0 10px; border: 1px solid var(--ax-border-soft); border-radius: 15px; font-size: 11.5px; font-weight: 600; color: var(--ax-ink-muted); }
.ax-select .ax-i { width: 12px; height: 12px; }
.ax-ranks { display: grid; gap: 8px; }
.ax-rrow { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--ax-border-soft); border-left: 3px solid var(--rc); border-radius: 16px; background: var(--ax-surface); }
.ax-rrow > em { width: 26px; font-size: 12px; font-style: normal; font-weight: 700; color: var(--rc); }
.ax-rrow .ax-avatar { width: 34px; height: 34px; font-size: 12px; }
.ax-rrow__txt { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.ax-rrow__txt b { font-size: 14px; font-weight: 600; line-height: 1.3; }
.ax-rrow__txt > span { display: flex; gap: 6px; margin-top: 2px; }
.ax-lv { padding: 1px 6px; border-radius: 6px; background: var(--ax-primary-soft); font-size: 9.5px; font-style: normal; font-weight: 700; color: var(--ax-primary-deep); }
.ax-fl { display: inline-flex; align-items: center; gap: 2px; font-size: 10px; font-style: normal; font-weight: 700; color: var(--ax-streak); }
.ax-fl .ax-i { width: 10px; height: 10px; }
.ax-xp { display: flex; align-items: baseline; gap: 2px; }
.ax-xp b { font-size: 16px; font-weight: 800; letter-spacing: -0.3px; }
.ax-xp small { font-size: 9px; font-weight: 700; color: var(--ax-ink-subtle); }
.ax-rrow .ax-chev { margin-left: 0; }

/* in-app SnackBar */
.ax-snack { position: absolute; right: 18px; bottom: calc(var(--ax-safe-b) + 86px); left: 18px; z-index: 40; padding: 12px 14px; border-radius: 14px; background: color-mix(in srgb, var(--ax-ink) 94%, transparent); box-shadow: var(--ax-shadow-lg); font-size: 13px; font-weight: 500; line-height: 1.4; color: var(--ax-white); opacity: 0; transform: translateY(10px); transition: opacity 0.25s var(--ax-ease), transform 0.4s var(--ax-emph); pointer-events: none; }
.ax-snack.is-on { opacity: 1; transform: none; }

/* ---------------------------------------------------------------------
   11. Wide layout — AppNavRail + centred content (tablet / desktop)
   --------------------------------------------------------------------- */
@container axapp (min-width: 640px) {
  .ax-shell { display: grid; grid-template-columns: 196px minmax(0, 1fr); }
  .ax-nav { display: none; }
  .ax-rail { display: flex; flex-direction: column; gap: 6px; padding: 22px 14px; border-right: 1px solid var(--ax-border-soft); background: var(--ax-surface); }
  .ax-rail__brand { display: flex; align-items: center; gap: 10px; padding: 2px 8px 22px; font-size: 15px; font-weight: 800; letter-spacing: -0.03em; color: var(--ax-primary-deep); white-space: nowrap; }
  .ax-rail__item { position: relative; display: flex; align-items: center; gap: 12px; height: 46px; padding: 0 14px; border: 0; border-radius: 14px; background: none; font-size: 14px; font-weight: 600; color: var(--ax-ink-muted); cursor: pointer; transition: background 0.3s var(--ax-emph), color 0.25s, box-shadow 0.3s; }
  .ax-rail__item .ax-i { width: 20px; height: 20px; }
  .ax-rail__item:hover { background: var(--ax-primary-tint); color: var(--ax-ink); }
  .ax-rail__item.is-on { background: var(--ax-brand-grad); box-shadow: 0 6px 14px -4px color-mix(in srgb, var(--ax-primary) 45%, transparent); color: var(--ax-on-primary); }
  .ax-rail__item .ax-badge { top: 6px; right: auto; left: 28px; }
  .ax-main { position: relative; inset: auto; min-width: 0; }
  .ax-page { max-width: 700px; margin: 0 auto; padding: 28px 32px 48px; }
  .ax-page--wide { max-width: 980px; }
  .ax-appbar { padding: 8px 28px; }
  .ax-topbar { padding: 14px 28px; }
  .ax-courses { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
  .ax-course__thumb { height: 150px; }
  .ax-carousel { margin: 0; padding: 0 0 6px; scroll-padding-inline: 0; }
  .ax-hero { padding: 22px 24px; }
  .ax-hero__btn { height: 46px; }
  .ax-tiles3 { gap: 12px; }
  .ax-badges { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .ax-snack { right: auto; bottom: 22px; left: 50%; max-width: 420px; transform: translate(-50%, 10px); }
  .ax-snack.is-on { transform: translate(-50%, 0); }
  .ax-scr--code .ax-code__card, .ax-login__card { max-width: 400px; }
}
@container axapp (min-width: 640px) and (max-width: 860px) {
  .ax-shell { grid-template-columns: 84px minmax(0, 1fr); }
  .ax-rail { align-items: center; padding: 20px 10px; }
  .ax-rail__brand { padding: 2px 0 20px; }
  .ax-rail__brand > span:last-child, .ax-rail__item > span { display: none; }
  .ax-rail__item { justify-content: center; width: 56px; height: 52px; padding: 0; }
  .ax-rail__item .ax-badge { left: 30px; }
  .ax-page--wide { padding-inline: 24px; }
  .ax-courses { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ax-course:nth-child(3) { display: none; }
}

/* ---------------------------------------------------------------------
   12. Hero tour phone — static, no JS (see partials/tour-phone.html)
   --------------------------------------------------------------------- */
.aui--static { position: relative; width: 300px; height: 632px; pointer-events: none; }
.aui--static .ax-device { top: 0; left: 0; --ax-s: 0.7042; transform: scale(var(--ax-s)); transform-origin: 0 0; transition: none; }
.aui--static .ax-scr, .aui--static [data-ax-in] { transition: background 0.4s; }

/* ---------------------------------------------------------------------
   13. Motion preferences + offscreen
   --------------------------------------------------------------------- */
.apps-demo.is-offscreen *, .apps-demo.is-offscreen *::before, .apps-demo.is-offscreen *::after { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  .aui *, .aui *::before, .aui *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; }
  .ax-device { transition: none; }
}
@media (pointer: coarse) {
  .ax-hero__btn:hover, .ax-platform:hover, .ax-theme:hover, .ax-replay:hover { transform: none; }
}