:root {
  color-scheme: light;
  --ink: #101828;
  --muted: #667085;
  --soft: #f7f9fc;
  --panel: rgba(255, 255, 255, 0.78);
  --panel-strong: rgba(255, 255, 255, 0.92);
  --line: rgba(16, 24, 40, 0.1);
  --blue: #1769ff;
  --green: #11a36a;
  --orange: #d97706;
  --red: #dc2626;
  --violet: #5b5bd6;
  --gold: #d6a84f;
  --shadow: 0 18px 60px rgba(16, 24, 40, 0.12);
  --shadow-lift: 0 28px 90px rgba(16, 24, 40, 0.18);
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

body.dark-mode {
  color-scheme: dark;
  --ink: #f8fafc;
  --muted: #aab5c6;
  --soft: #0b111d;
  --panel: rgba(15, 23, 42, 0.76);
  --panel-strong: rgba(15, 23, 42, 0.92);
  --line: rgba(226, 232, 240, 0.16);
  --shadow: 0 18px 64px rgba(0, 0, 0, 0.36);
  --shadow-lift: 0 30px 100px rgba(0, 0, 0, 0.42);
  background:
    linear-gradient(135deg, #080d14 0%, #101827 52%, #07130f 100%);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at 14% 8%, rgba(77, 177, 255, 0.16), transparent 28%),
    radial-gradient(circle at 82% 0%, rgba(214, 168, 79, 0.13), transparent 22%),
    linear-gradient(135deg, #ffffff 0%, #f7fbff 42%, #fdfcf8 100%);
  overflow-x: hidden;
  scroll-behavior: smooth;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent),
    linear-gradient(rgba(8, 153, 223, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(8, 153, 223, 0.032) 1px, transparent 1px);
  background-size: 46% 100%, 54px 54px, 54px 54px;
  opacity: 0.62;
  animation: ambientSweep 12s var(--ease) infinite alternate;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 20% 26%, rgba(214, 168, 79, 0.18) 0 1px, transparent 2px),
    radial-gradient(circle at 72% 18%, rgba(8, 153, 223, 0.16) 0 1px, transparent 2px),
    radial-gradient(circle at 84% 70%, rgba(17, 163, 106, 0.1) 0 1px, transparent 2px);
  background-size: 180px 180px, 220px 220px, 260px 260px;
  opacity: 0.52;
  animation: particleDrift 18s linear infinite alternate;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

.app-shell {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  padding: 18px 0 112px;
  position: relative;
}

.topbar,
.section-title,
.quiz-status,
.admin-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.topbar {
  position: sticky;
  top: 8px;
  z-index: 20;
  margin-bottom: 14px;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.76);
  backdrop-filter: blur(22px);
  box-shadow: 0 10px 28px rgba(16, 24, 40, 0.07);
}

.brand-lockup {
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  color: white;
  font-weight: 900;
  background: linear-gradient(145deg, #101828, #1677ff);
  box-shadow: 0 12px 34px rgba(22, 119, 255, 0.28);
}

.brand-logo {
  width: 34px;
  height: 34px;
  object-fit: cover;
  object-position: center 62%;
  border-radius: 9px;
  border: 1px solid rgba(214, 168, 79, 0.42);
  box-shadow: 0 10px 28px rgba(214, 168, 79, 0.18);
}

.eyebrow {
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 0;
  font-size: clamp(0.98rem, 2.4vw, 1.18rem);
}

.topbar .eyebrow {
  margin-bottom: 1px;
  font-size: 0.58rem;
}

.top-actions,
.result-actions,
.admin-toolbar,
.mode-actions,
.battle-join,
.leaderboard-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.profile-menu {
  position: relative;
  z-index: 80;
}

.profile-button {
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px 5px 5px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.66);
  box-shadow: 0 12px 34px rgba(16, 24, 40, 0.08);
  backdrop-filter: blur(18px);
}

.profile-avatar {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: white;
  font-size: 0.74rem;
  font-weight: 900;
  background: linear-gradient(145deg, #101828, #1769ff, #11a36a);
}

.profile-copy {
  display: grid;
  gap: 1px;
  text-align: left;
}

.profile-copy strong {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.78rem;
}

.profile-copy small {
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 800;
}

.profile-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  z-index: 90;
  display: grid;
  min-width: 220px;
  max-height: min(420px, calc(100vh - 120px));
  overflow-y: auto;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--panel-strong);
  box-shadow: var(--shadow-lift);
  backdrop-filter: blur(24px);
  animation: riseIn 180ms var(--ease) both;
  pointer-events: auto;
}

.profile-dropdown button {
  min-height: 42px;
  border: 0;
  border-radius: 12px;
  color: var(--ink);
  background: transparent;
  text-align: left;
  font-weight: 800;
}

.profile-dropdown button:hover {
  background: rgba(23, 105, 255, 0.1);
  transform: none;
}

.icon-button,
.ghost-button,
.primary-button,
.danger-button {
  min-height: 44px;
  border: 0;
  border-radius: 10px;
  font-weight: 800;
  transition: transform 180ms var(--ease), box-shadow 180ms var(--ease), background 180ms var(--ease), border-color 180ms var(--ease);
}

.icon-button {
  width: 44px;
  color: var(--ink);
  background: var(--panel-strong);
  border: 1px solid var(--line);
}

.ghost-button {
  padding: 0 16px;
  color: var(--ink);
  background: var(--panel-strong);
  border: 1px solid var(--line);
}

.primary-button {
  padding: 0 18px;
  color: white;
  background: linear-gradient(135deg, #1769ff, #0f9f6e);
  box-shadow: 0 12px 28px rgba(23, 105, 255, 0.2);
  position: relative;
  overflow: hidden;
}

.primary-button::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.32), transparent);
  transform: translateX(-110%);
  transition: transform 520ms var(--ease);
}

.danger-button {
  padding: 0 16px;
  color: white;
  background: var(--red);
}

button:hover {
  transform: translateY(-2px);
}

.primary-button:hover::after {
  transform: translateX(110%);
}

.screen {
  display: none;
}

.screen.active {
  display: block;
  animation: riseIn 420ms var(--ease) both;
}

.hero-grid {
  display: none;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
  gap: 26px;
  align-items: stretch;
}

.hero-grid.active {
  display: grid;
}

.lobby-hero {
  min-height: 280px;
  padding: clamp(28px, 6vw, 56px);
  border: 1px solid var(--line);
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(10, 18, 32, 0.93), rgba(17, 39, 62, 0.82)),
    url("Assets/logo.PNG") right 46px center / 190px auto no-repeat;
  color: white;
  box-shadow: var(--shadow);
  overflow: hidden;
  position: relative;
  isolation: isolate;
  animation: heroReveal 700ms var(--ease) both;
}

.lobby-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, 0.12) 46%, transparent 62%);
  transform: translateX(-55%);
  animation: heroSheen 8s var(--ease) infinite;
}

.lobby-hero .lede {
  color: rgba(255, 255, 255, 0.78);
}

.lobby-hero h2 {
  max-width: 680px;
  margin-bottom: 16px;
  font-size: clamp(2.25rem, 6.5vw, 4.8rem);
  line-height: 1;
  letter-spacing: 0;
}

.battle-tabs {
  display: flex;
  gap: 10px;
  margin: 18px 0;
  padding: 6px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.48);
  backdrop-filter: blur(18px);
}

.battle-tab {
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--ink);
  background: transparent;
  font-weight: 900;
  white-space: nowrap;
  transition: background 180ms var(--ease), color 180ms var(--ease), transform 180ms var(--ease);
}

.battle-tab.active {
  color: white;
  border-color: transparent;
  background: linear-gradient(135deg, #1769ff, #0f9f6e);
  box-shadow: 0 10px 24px rgba(23, 105, 255, 0.18);
}

.battle-lobby-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.lobby-card {
  display: grid;
  gap: 10px;
  min-height: 270px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--panel-strong);
  box-shadow: var(--shadow);
  backdrop-filter: blur(24px);
  position: relative;
  overflow: hidden;
  animation: cardRise 560ms var(--ease) both;
  transition: transform 220ms var(--ease), box-shadow 220ms var(--ease), border-color 220ms var(--ease);
}

.lobby-card:nth-child(2) {
  animation-delay: 80ms;
}

.lobby-card:nth-child(3) {
  animation-delay: 160ms;
}

.lobby-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--blue), var(--green));
}

.lobby-card.friend::before {
  background: linear-gradient(90deg, var(--gold), var(--blue));
}

.lobby-card.daily::before {
  background: linear-gradient(90deg, var(--red), var(--green));
}

.lobby-card:hover {
  transform: translateY(-5px);
  border-color: rgba(22, 119, 255, 0.35);
  box-shadow: var(--shadow-lift);
}

.lobby-card .primary-button {
  justify-self: start;
  min-width: 118px;
}

.lobby-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: #101828;
  font-size: 1.55rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.lobby-card h3 {
  margin-bottom: 0;
  font-size: 1.35rem;
}

.lobby-card p:not(.eyebrow) {
  color: var(--muted);
  line-height: 1.55;
}

.lobby-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(248, 250, 252, 0.82);
}

.lobby-meta span {
  color: var(--muted);
  font-weight: 800;
}

.module-page {
  display: none;
  margin-bottom: 22px;
}

.module-page.active {
  display: block;
  animation: riseIn 320ms var(--ease) both;
}

.season-banner {
  display: grid;
  gap: 5px;
  margin-bottom: 14px;
  padding: 14px;
  border-radius: 12px;
  color: #075985;
  border: 1px solid rgba(14, 165, 233, 0.24);
  background: rgba(14, 165, 233, 0.08);
}

.resume-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  padding: 18px;
  border: 1px solid rgba(247, 144, 9, 0.28);
  border-radius: 16px;
  background: var(--panel-strong);
  box-shadow: var(--shadow);
  backdrop-filter: blur(24px);
  animation: cardRise 420ms var(--ease) both;
}

.resume-panel h3 {
  margin-bottom: 4px;
}

.resume-panel p:not(.eyebrow) {
  margin-bottom: 0;
  color: var(--muted);
  font-weight: 700;
}

.resume-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.season-banner span {
  color: var(--muted);
  font-weight: 700;
}

.season-detail-grid,
.friend-stats {
  margin-bottom: 16px;
}

.friend-battle-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.7fr);
  gap: 18px;
}

.pulse-dot.amber {
  background: var(--orange);
  box-shadow: 0 0 0 6px rgba(217, 119, 6, 0.12);
}

.pulse-dot.flame {
  background: var(--red);
  box-shadow: 0 0 0 6px rgba(220, 38, 38, 0.12);
}

.battle-history {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.history-row {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(248, 250, 252, 0.82);
}

.history-row span,
.history-row em {
  color: var(--muted);
  font-style: normal;
  font-weight: 800;
}

.hero-copy,
.entry-panel,
.question-stage,
.live-panel,
.result-hero,
.result-metrics,
.leaderboard-section,
.admin-shell {
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: var(--shadow);
  backdrop-filter: blur(24px);
}

.entry-panel,
.info-panel,
.review-section,
.hall-section,
.leaderboard-section,
.question-stage,
.live-panel,
.result-hero,
.result-metrics {
  animation: cardRise 460ms var(--ease) both;
}

.hero-copy {
  min-height: 520px;
  padding: clamp(28px, 6vw, 62px);
  border-radius: 28px;
  background:
    linear-gradient(140deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.64)),
    linear-gradient(45deg, rgba(22, 119, 255, 0.12), rgba(18, 183, 106, 0.1));
}

.pill {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  margin-bottom: 22px;
  border-radius: 999px;
  color: #075985;
  background: rgba(14, 165, 233, 0.12);
  font-size: 0.85rem;
  font-weight: 900;
}

.hero-copy h2,
.result-hero h2 {
  max-width: 780px;
  margin-bottom: 18px;
  font-size: clamp(2.2rem, 6vw, 5.25rem);
  line-height: 0.96;
  letter-spacing: 0;
}

.lede {
  max-width: 650px;
  color: var(--muted);
  font-size: clamp(1rem, 2vw, 1.18rem);
  line-height: 1.7;
}

.stat-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 48px;
}

.stat-strip div,
.mini-score div,
.result-metrics div {
  padding: 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.68);
  border: 1px solid var(--line);
}

.stat-strip strong,
.mini-score strong,
.result-metrics strong {
  display: block;
  margin-bottom: 4px;
  font-size: 1.4rem;
}

.stat-strip span,
.mini-score span,
.result-metrics span {
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 700;
}

.entry-panel {
  align-self: center;
  padding: 24px;
  border-radius: 18px;
  background: var(--panel-strong);
}

.mode-actions {
  margin-top: 12px;
}

.battle-join {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  margin-top: 12px;
}

.battle-code-display {
  display: grid;
  gap: 6px;
  margin: 14px 0;
  padding: 18px;
  border-radius: 16px;
  color: #78350f;
  background: linear-gradient(135deg, rgba(255, 251, 235, 0.94), rgba(239, 246, 255, 0.92));
  border: 1px solid rgba(214, 168, 79, 0.38);
  box-shadow: 0 16px 38px rgba(214, 168, 79, 0.14);
  animation: codePop 420ms var(--ease) both;
}

.battle-code-display span,
.battle-code-display em {
  color: var(--muted);
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
}

.battle-code-display strong {
  display: block;
  color: #101828;
  font-size: clamp(2.2rem, 8vw, 4rem);
  line-height: 1;
  letter-spacing: 0.08em;
  text-shadow: 0 12px 30px rgba(16, 24, 40, 0.12);
}

.battle-code-display small {
  color: #0f766e;
  font-weight: 900;
  letter-spacing: 0.01em;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 22px 0;
}

.info-panel,
.review-section,
.hall-section {
  border: 1px solid var(--line);
  background: var(--panel-strong);
  box-shadow: var(--shadow);
  backdrop-filter: blur(24px);
  border-radius: 18px;
  padding: 20px;
}

.section-title.compact {
  align-items: flex-start;
  margin-bottom: 14px;
}

.section-title.compact h2 {
  margin-bottom: 0;
  font-size: 1.2rem;
}

.metric-grid {
  display: grid;
  gap: 10px;
}

.metric-grid.small {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.metric-grid div,
.hall-row {
  padding: 12px;
  border-radius: 12px;
  background: rgba(248, 250, 252, 0.82);
  border: 1px solid var(--line);
  transition: transform 180ms var(--ease), border-color 180ms var(--ease), background 180ms var(--ease);
}

.metric-grid div:hover,
.hall-row:hover {
  transform: translateY(-2px);
  border-color: rgba(23, 105, 255, 0.24);
}

body.dark-mode .metric-grid div,
body.dark-mode .hall-row,
body.dark-mode .stat-strip div,
body.dark-mode .mini-score div,
body.dark-mode .result-metrics div,
body.dark-mode input,
body.dark-mode select,
body.dark-mode textarea,
body.dark-mode .ghost-button,
body.dark-mode .icon-button,
body.dark-mode .admin-question-row,
body.dark-mode .question-editor,
body.dark-mode .option-button,
body.dark-mode .lobby-card,
body.dark-mode .lobby-meta,
body.dark-mode .history-row,
body.dark-mode .resume-panel,
body.dark-mode .battle-code-display {
  background: rgba(15, 23, 42, 0.72);
  color: var(--ink);
}

body.dark-mode .battle-code-display strong {
  color: var(--ink);
}

.metric-grid span {
  display: block;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
}

.metric-grid strong {
  display: block;
  margin-top: 4px;
  font-size: 1.15rem;
}

.xp-bubble {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  color: #087443;
  background: rgba(18, 183, 106, 0.13);
  font-weight: 900;
}

.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.badge-row span {
  padding: 8px 10px;
  border-radius: 999px;
  color: #075985;
  background: rgba(14, 165, 233, 0.12);
  font-size: 0.78rem;
  font-weight: 900;
}

.panel-heading {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 20px;
}

.panel-heading h3 {
  margin-bottom: 4px;
}

.panel-heading p,
.form-note {
  color: var(--muted);
  margin-bottom: 0;
}

.pulse-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 6px rgba(17, 163, 106, 0.12);
  animation: softPulse 2.4s var(--ease) infinite;
}

label {
  display: grid;
  gap: 8px;
  margin-bottom: 16px;
  color: #344054;
  font-weight: 800;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 13px 14px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.9);
  outline: none;
  transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease), background 160ms var(--ease);
}

input:focus,
select:focus,
textarea:focus {
  border-color: rgba(23, 105, 255, 0.55);
  box-shadow: 0 0 0 4px rgba(23, 105, 255, 0.12);
}

.form-note {
  margin-top: 16px;
  font-size: 0.85rem;
  line-height: 1.5;
}

.quiz-screen.active {
  display: block;
}

.quiz-status {
  margin-bottom: 18px;
}

.progress-track {
  width: min(680px, 58vw);
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(17, 24, 39, 0.08);
}

.progress-fill {
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #1769ff, #11a36a, #d6a84f);
  transition: width 280ms var(--ease);
}

.timer-chip {
  display: grid;
  place-items: center;
  min-width: 112px;
  min-height: 64px;
  padding: 8px 16px;
  border-radius: 18px;
  color: white;
  background: #101828;
}

.timer-chip span {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.68);
  font-weight: 800;
}

.timer-chip.warning {
  background: var(--red);
  animation: pulse 900ms infinite;
}

.quiz-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.quiz-controls .ghost-button {
  min-height: 44px;
  padding: 0 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
}

.danger-lite {
  color: var(--red);
  border-color: rgba(220, 38, 38, 0.22);
}

.quiz-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 18px;
}

.question-stage,
.live-panel {
  border-radius: 22px;
  padding: clamp(14px, 3vw, 24px);
}

.topic-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 22px;
}

.topic-row span {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  font-weight: 900;
  background: rgba(22, 119, 255, 0.1);
  color: #0b63ce;
}

.topic-row span:last-child {
  background: rgba(18, 183, 106, 0.12);
  color: #087443;
}

#questionText {
  min-height: 84px;
  margin-bottom: 16px;
  font-size: clamp(1.28rem, 3.2vw, 2.05rem);
  line-height: 1.14;
}

.options-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.option-button {
  position: relative;
  min-height: 72px;
  padding: 14px 16px 14px 52px;
  border: 1px solid var(--line);
  border-radius: 18px;
  text-align: left;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 10px 24px rgba(17, 24, 39, 0.06);
}

.option-button::before {
  content: attr(data-letter);
  position: absolute;
  left: 16px;
  top: 18px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  color: white;
  font-weight: 900;
  background: #101828;
}

.option-button.correct {
  border-color: rgba(18, 183, 106, 0.65);
  background: rgba(18, 183, 106, 0.12);
}

.option-button.incorrect {
  border-color: rgba(240, 68, 56, 0.65);
  background: rgba(240, 68, 56, 0.11);
}

.option-button:disabled {
  cursor: default;
}

.explanation-panel {
  display: none;
  margin-top: 18px;
  padding: 18px;
  border-radius: 18px;
  background: rgba(16, 24, 40, 0.92);
  color: white;
  animation: riseIn 240ms ease both;
}

.explanation-panel.active {
  display: block;
}

.explanation-panel p {
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.6;
}

.explanation-panel p strong,
.explanation-panel p span {
  display: block;
}

.explanation-panel p strong {
  margin-bottom: 8px;
  color: #ffffff;
}

.mini-score {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.streak-card {
  margin-top: 8px;
  padding: 12px;
  border-radius: 16px;
  color: white;
  background: linear-gradient(145deg, #101828, #344054);
}

.streak-card p,
.streak-card span {
  margin: 0;
  font-size: 0.78rem;
}

.streak-card strong {
  font-size: 1.45rem;
}

.battle-card {
  margin-top: 14px;
  padding: 18px;
  border-radius: 20px;
  color: #101828;
  background: linear-gradient(145deg, rgba(251, 191, 36, 0.95), rgba(250, 204, 21, 0.58));
}

.battle-card p,
.battle-card span {
  color: rgba(16, 24, 40, 0.72);
  font-weight: 800;
}

.battle-card strong {
  display: block;
  font-size: 2.2rem;
  letter-spacing: 0.08em;
}

.streak-card p,
.streak-card span {
  color: rgba(255, 255, 255, 0.72);
  font-weight: 700;
}

.streak-card strong {
  display: block;
  font-size: 3rem;
  line-height: 1;
}

.result-screen.active {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.75fr);
  gap: 18px;
}

.result-hero,
.result-metrics {
  border-radius: 28px;
  padding: clamp(22px, 5vw, 44px);
}

.result-hero p:not(.pill) {
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.6;
}

.result-actions {
  align-items: stretch;
  flex-direction: column;
}

.result-live-leaderboard {
  display: grid;
  gap: 8px;
  width: 100%;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.68);
  box-shadow: 0 18px 42px rgba(16, 24, 40, 0.08);
}

.result-rank-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 10px;
  border-radius: 12px;
  background: rgba(16, 24, 40, 0.05);
  font-weight: 900;
}

.result-rank-row.current {
  color: #087443;
  background: rgba(18, 183, 106, 0.13);
}

.result-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.leaderboard-section {
  margin-top: 22px;
  padding: 24px;
  border-radius: 26px;
}

.review-section,
.hall-section {
  margin-top: 22px;
}

.review-list {
  display: grid;
  gap: 12px;
}

.review-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.62);
}

.review-card h3 {
  margin-bottom: 10px;
  line-height: 1.35;
}

.review-card p {
  color: var(--muted);
  line-height: 1.55;
}

.hall-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.hall-card {
  padding: 16px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.54);
}

.hall-card h3 {
  margin-bottom: 12px;
}

.hall-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin-bottom: 8px;
}

.hall-row span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  color: white;
  background: #101828;
  font-weight: 900;
}

.hall-row strong,
.hall-row em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hall-row em {
  color: var(--muted);
  font-style: normal;
  font-weight: 800;
}

.achievement-toast {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: min(360px, calc(100vw - 36px));
  padding: 14px 16px;
  border: 1px solid rgba(251, 191, 36, 0.34);
  border-radius: 18px;
  color: var(--ink);
  background: var(--panel);
  box-shadow: var(--shadow);
  transform: translateY(24px);
  opacity: 0;
}

.achievement-toast img {
  width: 44px;
  height: 44px;
  object-fit: cover;
  object-position: center 62%;
  border-radius: 12px;
}

.achievement-toast.show {
  animation: toastIn 420ms ease both;
}

.leaderboard-table-wrap {
  overflow-x: auto;
}

.leaderboard-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 620px;
}

.leaderboard-table th,
.leaderboard-table td {
  padding: 15px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}

.leaderboard-table th {
  color: var(--muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.rank-medal {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  color: white;
  font-weight: 900;
  background: #101828;
}

.admin-dialog {
  width: min(920px, calc(100% - 24px));
  border: 0;
  padding: 0;
  background: transparent;
}

.admin-dialog::backdrop {
  background: rgba(16, 24, 40, 0.46);
  backdrop-filter: blur(12px);
}

.admin-shell {
  padding: 24px;
  border-radius: 18px;
}

.hidden {
  display: none !important;
}

/* Custom MedDex platform shell */
.platform-home.active,
.cards-screen.active,
.practice-screen.active {
  display: grid;
  gap: 24px;
}

.platform-hero {
  display: grid;
  gap: 24px;
  min-height: 390px;
  padding: clamp(26px, 5vw, 56px);
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 38px;
  color: #07111f;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.52)),
    radial-gradient(circle at 22% 18%, rgba(8, 153, 223, 0.16), transparent 28%),
    radial-gradient(circle at 80% 18%, rgba(214, 168, 79, 0.16), transparent 26%),
    linear-gradient(135deg, rgba(245, 250, 255, 0.86), rgba(255, 252, 244, 0.86));
  box-shadow: 0 30px 90px rgba(16, 24, 40, 0.11), inset 0 1px 0 rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(26px);
  overflow: hidden;
  position: relative;
  isolation: isolate;
  animation: heroReveal 760ms var(--ease) both;
}

.platform-hero::after {
  content: "";
  position: absolute;
  inset: auto 10% 42px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(214, 168, 79, 0.68), rgba(8, 153, 223, 0.28), transparent);
  box-shadow: 0 0 28px rgba(214, 168, 79, 0.22);
}

.platform-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, 0.84) 45%, transparent 62%);
  transform: translateX(-65%);
  animation: glassShimmer 9s var(--ease) infinite;
}

.hero-orb {
  position: absolute;
  right: clamp(18px, 6vw, 82px);
  top: clamp(18px, 5vw, 62px);
  width: clamp(180px, 28vw, 340px);
  aspect-ratio: 1;
  border-radius: 999px;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.94) 0 28%, rgba(8, 153, 223, 0.16) 42%, rgba(214, 168, 79, 0.09) 60%, transparent 72%);
  filter: blur(2px);
  opacity: 0.76;
  animation: slowBreathe 8s var(--ease) infinite alternate;
}

.platform-brand-row {
  display: flex;
  align-items: center;
  gap: clamp(18px, 4vw, 34px);
  position: relative;
  z-index: 1;
}

.hero-logo-glow {
  display: grid;
  place-items: center;
  width: clamp(96px, 17vw, 154px);
  height: clamp(96px, 17vw, 154px);
  border-radius: 34px;
  background: radial-gradient(circle, rgba(214, 168, 79, 0.2), rgba(8, 153, 223, 0.12), transparent 68%);
  box-shadow: 0 26px 70px rgba(8, 153, 223, 0.16);
  animation: floatLogo 5.5s var(--ease) infinite alternate;
}

.hero-logo-glow img {
  width: 72%;
  height: 72%;
  object-fit: cover;
  border-radius: 26px;
  border: 1px solid rgba(214, 168, 79, 0.44);
  box-shadow: 0 18px 44px rgba(16, 24, 40, 0.16);
}

.platform-brand-row h2 {
  max-width: 820px;
  margin-bottom: 12px;
  font-size: clamp(3.2rem, 10vw, 7.6rem);
  line-height: 0.86;
  letter-spacing: 0.06em;
  background: linear-gradient(135deg, #07111f 0%, #111827 54%, #d6a84f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: textReveal 820ms var(--ease) 120ms both;
}

.home-greeting {
  margin: 0 0 8px;
  color: #526173;
  font-size: clamp(0.95rem, 2vw, 1.16rem);
  font-weight: 850;
  animation: textReveal 760ms var(--ease) 80ms both;
}

.hero-mantra {
  margin: 0;
  color: #1f2937;
  font-size: clamp(1.25rem, 3vw, 2.2rem);
  font-weight: 900;
  letter-spacing: 0;
  animation: textReveal 820ms var(--ease) 220ms both;
}

.hero-mantra span {
  color: #b8892f;
}

.platform-tagline {
  max-width: 680px;
  margin: 0;
  color: #536070;
  font-size: clamp(1rem, 2.2vw, 1.28rem);
  font-weight: 750;
  line-height: 1.6;
  position: relative;
  z-index: 1;
  animation: textReveal 820ms var(--ease) 300ms both;
}

.hero-cta-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
  animation: textReveal 820ms var(--ease) 390ms both;
}

.glass-button {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(18px);
}

.quick-access-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.home-stats-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  margin-top: -58px;
  padding: 0 clamp(10px, 3vw, 28px);
  position: relative;
  z-index: 2;
}

.home-stats-grid article {
  display: grid;
  gap: 8px;
  min-height: 96px;
  padding: 18px 16px;
  border: 1px solid rgba(255, 255, 255, 0.76);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 18px 52px rgba(16, 24, 40, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(24px);
  animation: cardRise 620ms var(--ease) both;
}

.home-stats-grid article:nth-child(2) { animation-delay: 45ms; }
.home-stats-grid article:nth-child(3) { animation-delay: 90ms; }
.home-stats-grid article:nth-child(4) { animation-delay: 135ms; }
.home-stats-grid article:nth-child(5) { animation-delay: 180ms; }
.home-stats-grid article:nth-child(6) { animation-delay: 225ms; }

.home-stats-grid span {
  color: #667085;
  font-size: 0.74rem;
  font-weight: 900;
  text-transform: uppercase;
}

.home-stats-grid strong {
  color: #07111f;
  font-size: clamp(1rem, 2vw, 1.42rem);
  line-height: 1.08;
  overflow-wrap: anywhere;
}

.quick-access-card,
.deck-card,
.redeem-panel,
.practice-setup-panel,
.practice-progress-panel article,
.library-stat-grid article {
  border: 1px solid rgba(255, 255, 255, 0.76);
  background: rgba(255, 255, 255, 0.76);
  box-shadow: 0 18px 52px rgba(16, 24, 40, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20px);
}

.quick-access-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  min-height: 132px;
  padding: 22px 26px;
  border-radius: 28px;
  color: var(--ink);
  text-align: left;
  position: relative;
  overflow: hidden;
  animation: cardRise 620ms var(--ease) both;
  transition: transform 220ms var(--ease), box-shadow 220ms var(--ease), border-color 220ms var(--ease), background 220ms var(--ease);
}

.quick-access-card:nth-child(2) { animation-delay: 70ms; }
.quick-access-card:nth-child(3) { animation-delay: 140ms; }
.quick-access-card:nth-child(4) { animation-delay: 210ms; }

.quick-access-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--ripple-x, 50%) var(--ripple-y, 50%), rgba(214, 168, 79, 0.18), transparent 28%);
  opacity: 0;
  transition: opacity 260ms var(--ease);
}

.quick-access-card:hover {
  transform: translateY(-6px) scale(1.01);
  border-color: rgba(214, 168, 79, 0.42);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 28px 78px rgba(16, 24, 40, 0.14);
}

.quick-access-card:active {
  transform: translateY(-2px) scale(0.992);
}

.quick-access-card:active::after {
  opacity: 1;
}

.quick-icon {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  border-radius: 20px;
  color: #0899df;
  font-size: 1.9rem;
  background: linear-gradient(135deg, #e6f6ff, #f5fbff);
  border: 1px solid rgba(8, 153, 223, 0.15);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 16px 30px rgba(8, 153, 223, 0.1);
}

.quick-icon.ai-icon {
  color: #b8892f;
  background: linear-gradient(135deg, #fff7df, #eef8ff);
  animation: aiPulse 3.8s var(--ease) infinite;
}

.quick-access-card strong {
  grid-column: 2;
  display: block;
  margin-bottom: 6px;
  font-size: clamp(1.2rem, 2.5vw, 1.55rem);
}

.quick-access-card small {
  grid-column: 2;
  display: block;
  color: var(--muted);
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.45;
}

.quick-access-card em {
  grid-column: 3;
  grid-row: 1 / span 2;
  font-size: 2.1rem;
  font-style: normal;
  font-weight: 900;
  background: linear-gradient(135deg, #0899df, #d6a84f);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transition: transform 220ms var(--ease);
}

.quick-access-card:hover em {
  transform: translateX(4px);
}

.home-ai-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: clamp(22px, 4vw, 34px);
  border: 1px solid rgba(214, 168, 79, 0.22);
  border-radius: 32px;
  background:
    radial-gradient(circle at 92% 22%, rgba(214, 168, 79, 0.14), transparent 24%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.78), rgba(245, 251, 255, 0.7));
  box-shadow: 0 22px 64px rgba(16, 24, 40, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(24px);
}

.home-ai-card::before {
  content: "";
  width: clamp(74px, 10vw, 112px);
  aspect-ratio: 1;
  flex: 0 0 auto;
  border-radius: 28px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.08)),
    url("Assets/baihaqi-ai.png") center / cover no-repeat;
  border: 1px solid rgba(214, 168, 79, 0.28);
  box-shadow: 0 22px 52px rgba(16, 24, 40, 0.14);
}

.home-ai-card h3 {
  margin-bottom: 8px;
  font-size: clamp(1.45rem, 3vw, 2.25rem);
}

.home-ai-card p:not(.eyebrow) {
  max-width: 680px;
  margin-bottom: 0;
  color: var(--muted);
  font-weight: 700;
  line-height: 1.55;
}

.home-ai-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.platform-page-head {
  display: grid;
  gap: 8px;
}

.page-action-row,
.practice-preset-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.preset-chip {
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid rgba(16, 24, 40, 0.1);
  border-radius: 999px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.68);
  box-shadow: 0 12px 28px rgba(16, 24, 40, 0.06);
  font-weight: 900;
  transition: transform 180ms var(--ease), color 180ms var(--ease), background 180ms var(--ease), border-color 180ms var(--ease);
}

.preset-chip:hover,
.preset-chip.active {
  color: #07111f;
  border-color: rgba(214, 168, 79, 0.38);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(255, 248, 226, 0.72));
  transform: translateY(-2px);
}

.platform-page-head h2 {
  margin-bottom: 0;
  font-size: clamp(2.15rem, 5vw, 4rem);
  letter-spacing: 0;
}

.platform-page-head p:not(.eyebrow) {
  max-width: 760px;
  margin: 0;
  color: var(--muted);
  font-size: clamp(1rem, 2vw, 1.28rem);
  font-weight: 650;
  line-height: 1.55;
}

.library-stat-grid,
.practice-progress-panel {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.library-stat-grid article,
.practice-progress-panel article {
  display: grid;
  gap: 8px;
  min-height: 116px;
  padding: 20px 22px;
  border-radius: 24px;
}

.library-stat-grid span,
.practice-progress-panel span {
  color: var(--muted);
  font-weight: 850;
}

.library-stat-grid strong,
.practice-progress-panel strong {
  font-size: clamp(1.6rem, 4vw, 2.6rem);
}

.redeem-panel,
.practice-setup-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  padding: 20px;
  border-radius: 26px;
}

.redeem-panel .form-note {
  grid-column: 1 / -1;
}

.redeem-panel .form-note {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.25;
}

.deck-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.deck-card {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 18px;
  padding: 18px;
  border-radius: 28px;
  overflow: hidden;
  transition: transform 220ms var(--ease), box-shadow 220ms var(--ease), border-color 220ms var(--ease);
}

.deck-card:hover {
  transform: translateY(-4px);
  border-color: rgba(214, 168, 79, 0.42);
  box-shadow: var(--shadow-lift);
}

.deck-card.locked {
  opacity: 0.76;
}

.deck-thumb {
  min-height: 220px;
  display: grid;
  place-items: center;
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(8, 153, 223, 0.12), rgba(214, 168, 79, 0.08)),
    #eff8ff;
  border: 1px solid rgba(8, 153, 223, 0.14);
}

.deck-thumb img {
  width: 74px;
  height: 74px;
  object-fit: cover;
  border-radius: 18px;
  box-shadow: 0 16px 34px rgba(16, 24, 40, 0.18);
}

.deck-body {
  display: grid;
  align-content: start;
  gap: 12px;
}

.deck-body h3 {
  margin-bottom: 0;
  font-size: clamp(1.45rem, 3vw, 2.1rem);
}

.deck-body p {
  margin-bottom: 0;
  color: var(--muted);
  font-weight: 650;
  line-height: 1.45;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.deck-status {
  width: fit-content;
  padding: 8px 12px;
  border-radius: 999px;
  color: #0f766e;
  background: rgba(17, 163, 106, 0.1);
  font-weight: 900;
}

.deck-card.locked .deck-status {
  color: var(--muted);
  background: rgba(102, 112, 133, 0.12);
}

.deck-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.deck-meta span {
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 850;
}

.practice-setup-panel {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.practice-setup-panel .wide-action {
  grid-column: 1 / -1;
}

.bottom-nav {
  position: fixed;
  left: 50%;
  bottom: 14px;
  z-index: 250;
  width: min(720px, calc(100% - 28px));
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(16, 24, 40, 0.1);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 20px 60px rgba(16, 24, 40, 0.16);
  backdrop-filter: blur(24px);
}

.bottom-nav-item {
  display: grid;
  place-items: center;
  gap: 4px;
  min-height: 58px;
  border: 0;
  border-radius: 20px;
  color: #98a2b3;
  background: transparent;
  font-size: 0.82rem;
  font-weight: 900;
  transition: color 180ms var(--ease), background 180ms var(--ease), transform 180ms var(--ease);
}

.bottom-nav-item span {
  font-size: 1.45rem;
  line-height: 1;
}

.bottom-nav-item.active {
  color: #0899df;
  background: rgba(8, 153, 223, 0.09);
  transform: translateY(-2px);
}

body.battle-mode .bottom-nav {
  display: none;
}

.ai-floating-button {
  position: fixed;
  right: 20px;
  bottom: 104px;
  z-index: 260;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border: 1px solid rgba(214, 168, 79, 0.34);
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 20%, rgba(255, 255, 255, 0.96), rgba(236, 248, 255, 0.78)),
    linear-gradient(135deg, rgba(255, 255, 255, 0.78), rgba(214, 168, 79, 0.1));
  box-shadow: 0 22px 58px rgba(8, 153, 223, 0.18), 0 0 0 10px rgba(8, 153, 223, 0.06);
  backdrop-filter: blur(18px);
  animation: aiFloat 4.8s var(--ease) infinite alternate;
}

.ai-floating-button img {
  width: 62px;
  height: 62px;
  object-fit: cover;
  object-position: center;
  border-radius: 50%;
  box-shadow: 0 12px 24px rgba(16, 24, 40, 0.14);
}

.ai-floating-button span {
  position: absolute;
  inset: -8px;
  border-radius: inherit;
  border: 1px solid rgba(8, 153, 223, 0.22);
  animation: aiRing 2.8s var(--ease) infinite;
}

.ai-panel {
  position: fixed;
  inset: 0;
  z-index: 360;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(248, 251, 255, 0.54);
  backdrop-filter: blur(20px);
  opacity: 0;
  transition: opacity 220ms var(--ease);
}

.ai-panel.active {
  opacity: 1;
}

.ai-panel-card {
  width: min(960px, 100%);
  height: min(800px, calc(100dvh - 36px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 34px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(247, 252, 255, 0.76)),
    radial-gradient(circle at 100% 0%, rgba(214, 168, 79, 0.14), transparent 30%);
  box-shadow: 0 34px 100px rgba(16, 24, 40, 0.22);
  transform: translateY(18px) scale(0.975);
  transition: transform 240ms var(--ease);
}

.ai-panel.active .ai-panel-card {
  transform: translateY(0) scale(1);
}

.ai-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(16, 24, 40, 0.08);
}

.ai-panel-head h2 {
  margin-bottom: 0;
  font-size: clamp(1.3rem, 3vw, 2rem);
}

.ai-panel iframe {
  width: 100%;
  min-height: 0;
  height: 100% !important;
  border: 0;
  background: transparent;
}

/* Compact premium platform pass */
.platform-home.active,
.cards-screen.active,
.practice-screen.active {
  gap: 14px;
}

.platform-hero {
  min-height: 268px;
  gap: 12px;
  padding: clamp(18px, 4vw, 34px);
  border-radius: 28px;
}

.platform-hero::after {
  inset: auto 12% 26px;
}

.hero-orb {
  width: clamp(128px, 24vw, 260px);
  opacity: 0.56;
}

.platform-brand-row {
  gap: clamp(12px, 3vw, 22px);
}

.hero-logo-glow {
  width: clamp(68px, 11vw, 104px);
  height: clamp(68px, 11vw, 104px);
  border-radius: 24px;
}

.hero-logo-glow img {
  border-radius: 20px;
}

.home-greeting {
  margin-bottom: 4px;
  font-size: clamp(0.84rem, 1.8vw, 1rem);
}

.platform-brand-row h2 {
  margin-bottom: 4px;
  font-size: clamp(2.25rem, 7vw, 4.9rem);
  line-height: 0.9;
}

.hero-mantra {
  font-size: clamp(0.98rem, 2.3vw, 1.45rem);
}

.platform-tagline {
  max-width: 570px;
  font-size: clamp(0.88rem, 1.8vw, 1.05rem);
  line-height: 1.45;
}

.hero-cta-row .primary-button {
  min-height: 42px;
  padding-inline: 18px;
}

.home-stats-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: -28px;
  padding-inline: clamp(4px, 2vw, 14px);
}

.home-stats-grid article {
  min-height: 68px;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 18px;
}

.home-stats-grid span {
  font-size: 0.62rem;
  letter-spacing: 0.04em;
}

.home-stats-grid strong {
  font-size: clamp(0.92rem, 1.8vw, 1.2rem);
}

.quick-access-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.quick-access-card {
  min-height: 92px;
  gap: 11px;
  padding: 14px 15px;
  border-radius: 20px;
}

.quick-icon {
  width: 44px;
  height: 44px;
  border-radius: 15px;
  font-size: 1.35rem;
}

.quick-access-card strong {
  margin-bottom: 2px;
  font-size: clamp(1rem, 2vw, 1.18rem);
}

.quick-access-card small {
  font-size: 0.82rem;
  line-height: 1.28;
}

.quick-access-card em {
  font-size: 1.45rem;
}

.home-ai-card {
  display: none !important;
}

.platform-page-head {
  gap: 5px;
}

.platform-page-head h2 {
  font-size: clamp(1.55rem, 4vw, 2.65rem);
}

.platform-page-head p:not(.eyebrow) {
  max-width: 620px;
  font-size: clamp(0.86rem, 1.7vw, 1rem);
  line-height: 1.4;
}

.page-action-row,
.practice-preset-row {
  gap: 7px;
}

.page-action-row .primary-button,
.page-action-row .ghost-button,
.practice-preset-row .preset-chip {
  min-height: 36px;
  padding-inline: 12px;
  border-radius: 14px;
  font-size: 0.82rem;
}

.library-stat-grid,
.practice-progress-panel {
  gap: 8px;
}

.library-stat-grid article,
.practice-progress-panel article {
  min-height: 68px;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 18px;
}

.library-stat-grid span,
.practice-progress-panel span {
  font-size: 0.72rem;
}

.library-stat-grid strong,
.practice-progress-panel strong {
  font-size: clamp(1rem, 2.4vw, 1.45rem);
}

.redeem-panel,
.practice-setup-panel {
  gap: 10px;
  padding: 12px;
  border-radius: 20px;
}

.redeem-panel label,
.practice-setup-panel label {
  gap: 5px;
  font-size: 0.78rem;
}

.redeem-panel input,
.practice-setup-panel input,
.practice-setup-panel select {
  min-height: 42px;
  border-radius: 14px;
  font-size: 0.92rem;
}

.redeem-panel .primary-button,
.practice-setup-panel .primary-button {
  min-height: 42px;
  border-radius: 14px;
}

.deck-grid {
  gap: 10px;
}

.deck-card {
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 12px;
  padding: 12px;
  border-radius: 20px;
}

.deck-thumb {
  min-height: 86px;
  aspect-ratio: 1;
  border-radius: 16px;
}

.deck-thumb img {
  width: 52px;
  height: 52px;
  border-radius: 14px;
}

.deck-body {
  gap: 7px;
}

.deck-body h3 {
  font-size: clamp(1.02rem, 2vw, 1.28rem);
}

.deck-body p {
  font-size: 0.82rem;
  line-height: 1.34;
}

.deck-status,
.deck-meta span {
  padding: 5px 8px;
  font-size: 0.7rem;
}

.practice-setup-panel {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.practice-progress-panel {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.bottom-nav {
  bottom: 10px;
  width: min(620px, calc(100% - 22px));
  gap: 5px;
  padding: 7px;
  border-radius: 22px;
}

.bottom-nav-item {
  min-height: 48px;
  border-radius: 16px;
  font-size: 0.74rem;
}

.bottom-nav-item span {
  font-size: 1.2rem;
}

.ai-floating-button {
  right: 16px;
  bottom: 84px;
  width: 82px;
  height: 82px;
  box-shadow: 0 20px 58px rgba(8, 153, 223, 0.2), 0 0 0 9px rgba(8, 153, 223, 0.06), 0 0 0 1px rgba(214, 168, 79, 0.26);
}

.ai-floating-button img {
  width: 72px;
  height: 72px;
}

.ai-panel-card {
  width: min(980px, 100%);
  height: min(880px, calc(100dvh - 22px));
  border-radius: 30px;
}

.ai-panel-head {
  padding: 14px 16px;
}

.ai-panel-head h2 {
  font-size: clamp(1.08rem, 2.4vw, 1.5rem);
}

.ai-panel-head .icon-button {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  color: #07111f;
  background: rgba(255, 255, 255, 0.9);
}

/* Apple-level compact Home/header refinement */
.topbar {
  min-height: 48px;
  margin-bottom: 10px;
  padding: 5px 7px;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 12px 34px rgba(16, 24, 40, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.brand-lockup {
  gap: 8px;
}

.brand-logo {
  width: 30px;
  height: 30px;
  border-radius: 9px;
}

.brand-lockup h1, .brand-lockup .brand-title {
  font-size: 0.96rem;
  line-height: 1.02;
}

.brand-subtitle {
  margin: 1px 0 0;
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 760;
  line-height: 1;
}

.top-actions {
  gap: 6px;
}

.top-actions .icon-button {
  width: 34px;
  height: 34px;
  min-height: 34px;
  border-radius: 12px;
}

.profile-button {
  min-height: 34px;
  padding: 3px 6px 3px 3px;
  border-radius: 13px;
}

.profile-avatar {
  width: 28px;
  height: 28px;
  font-size: 0.72rem;
}

.platform-home.active {
  gap: 10px;
}

.platform-hero {
  min-height: 228px;
  gap: 8px;
  padding: clamp(15px, 3vw, 26px);
  border-radius: 24px;
}

.platform-hero::after {
  display: none;
}

.hero-orb {
  width: clamp(112px, 22vw, 220px);
  opacity: 0.48;
  animation-duration: 10s;
}

.hero-logo-glow {
  width: clamp(58px, 9vw, 86px);
  height: clamp(58px, 9vw, 86px);
  border-radius: 20px;
  box-shadow: 0 18px 48px rgba(8, 153, 223, 0.13), 0 0 0 8px rgba(214, 168, 79, 0.035);
}

.home-greeting {
  color: #405064;
  font-size: clamp(0.78rem, 1.5vw, 0.92rem);
}

.platform-brand-row h2 {
  font-size: clamp(2rem, 6vw, 4rem);
  letter-spacing: 0.04em;
}

.hero-mantra {
  font-size: clamp(0.9rem, 2vw, 1.18rem);
}

.platform-tagline {
  max-width: 520px;
  font-size: clamp(0.8rem, 1.5vw, 0.95rem);
}

.hero-ecg {
  width: min(250px, 72%);
  height: 14px;
  opacity: 0.7;
  background:
    linear-gradient(90deg, transparent 0 6%, rgba(214, 168, 79, 0.5) 6% 24%, transparent 24% 29%, rgba(8, 153, 223, 0.5) 29% 31%, transparent 31% 36%, rgba(214, 168, 79, 0.55) 36% 54%, transparent 54% 100%);
  clip-path: polygon(0 48%, 36% 48%, 40% 18%, 44% 78%, 48% 42%, 53% 48%, 100% 48%, 100% 60%, 53% 60%, 48% 54%, 44% 92%, 40% 30%, 36% 60%, 0 60%);
  animation: ecgGlow 4.8s var(--ease) infinite;
}

.hero-cta-row .primary-button {
  min-height: 38px;
  padding-inline: 16px;
  border-radius: 13px;
}

.home-stats-grid {
  margin-top: -22px;
}

.home-stats-grid article {
  min-height: 58px;
  padding: 8px 10px;
  border-radius: 16px;
}

.home-stats-grid span {
  font-size: 0.56rem;
}

.home-stats-grid strong {
  font-size: clamp(0.84rem, 1.6vw, 1.05rem);
}

.continue-learning-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.76);
  border-radius: 19px;
  background:
    radial-gradient(circle at 92% 20%, rgba(214, 168, 79, 0.12), transparent 28%),
    rgba(255, 255, 255, 0.76);
  box-shadow: 0 16px 46px rgba(16, 24, 40, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20px);
}

.continue-learning-card h3 {
  margin-bottom: 2px;
  font-size: clamp(1rem, 2vw, 1.22rem);
}

.continue-learning-card p:not(.eyebrow) {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.continue-learning-card .ghost-button {
  min-height: 36px;
  padding-inline: 13px;
  border-radius: 13px;
  white-space: nowrap;
}

.quick-access-card {
  min-height: 80px;
  padding: 12px 14px;
  border-radius: 18px;
}

.quick-icon {
  width: 38px;
  height: 38px;
  border-radius: 13px;
  font-size: 1.16rem;
}

.quick-access-card strong {
  font-size: clamp(0.94rem, 1.8vw, 1.08rem);
}

.quick-access-card small {
  font-size: 0.76rem;
}

.quick-access-card em {
  font-size: 1.32rem;
}

.deck-card.locked .deck-open-button {
  cursor: not-allowed;
  opacity: 0.66;
}

.bottom-nav {
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 18px 56px rgba(16, 24, 40, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.bottom-nav-item {
  color: #a6b0bd;
}

.bottom-nav-item.active {
  box-shadow: 0 10px 28px rgba(8, 153, 223, 0.14);
}

/* 2026 Home redesign: personal premium learning surface */
.platform-home.active {
  display: grid;
  gap: clamp(10px, 1.7vh, 16px);
  min-height: calc(100dvh - 150px);
  align-content: start;
}

.platform-home .platform-hero {
  position: relative;
  display: grid;
  gap: 11px;
  min-height: 0;
  padding: clamp(16px, 4vw, 22px);
  border-radius: 30px;
  color: #ffffff;
  background:
    radial-gradient(circle at 16% 12%, rgba(255, 255, 255, 0.34), transparent 27%),
    radial-gradient(circle at 85% 2%, rgba(111, 226, 255, 0.44), transparent 32%),
    radial-gradient(circle at 78% 88%, rgba(246, 197, 83, 0.22), transparent 30%),
    linear-gradient(135deg, #06142f 0%, #082b67 42%, #0d75bd 74%, #19d2ef 122%);
  box-shadow:
    0 26px 72px rgba(5, 22, 58, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.58),
    inset 0 -28px 70px rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(30px) saturate(190%);
  -webkit-backdrop-filter: blur(30px) saturate(190%);
}

.platform-home .platform-hero::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background:
    linear-gradient(118deg, transparent 0 34%, rgba(255, 255, 255, 0.28) 45%, transparent 58% 100%),
    radial-gradient(circle at 76% 28%, rgba(98, 230, 255, 0.2), transparent 34%);
  border: 1px solid rgba(255, 255, 255, 0.28);
  pointer-events: none;
  animation: liquidShimmer 8.5s ease-in-out infinite;
}

.platform-home .platform-hero::after {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 24px;
  background:
    radial-gradient(circle at 22% 30%, rgba(255, 255, 255, 0.1) 0 1px, transparent 2px),
    radial-gradient(circle at 62% 42%, rgba(255, 255, 255, 0.12) 0 1px, transparent 2px);
  background-size: 74px 74px, 98px 98px;
  opacity: 0.62;
  pointer-events: none;
}

.home-learning-hero {
  position: relative;
  z-index: 1;
  display: block;
}

.platform-home .home-greeting {
  margin: 0 0 6px;
  padding: 0;
  max-width: none;
  color: rgba(255, 255, 255, 0.86);
  background: transparent;
  border: 0;
  box-shadow: none;
  font-size: clamp(0.95rem, 4vw, 1.18rem);
  font-weight: 900;
  letter-spacing: 0;
  white-space: normal;
  text-transform: none;
}

.home-motivation {
  max-width: 28rem;
  margin: 0;
  color: #ffffff;
  font-size: clamp(1.45rem, 7.2vw, 2.55rem);
  line-height: 1.02;
  letter-spacing: -0.045em;
  font-weight: 950;
  text-shadow: 0 16px 42px rgba(2, 23, 63, 0.24);
}

.platform-home .home-xp-progress {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 12px;
  margin: 0;
  padding: 10px 12px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  background: rgba(255, 255, 255, 0.15);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(20px) saturate(170%);
}

.platform-home .home-xp-progress span,
.platform-home .home-xp-progress strong {
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.74rem;
  font-weight: 950;
}

.platform-home .home-xp-progress div {
  grid-column: 1 / -1;
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
}

.platform-home .home-xp-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ffe18a, #ffffff 42%, #77edff);
  box-shadow: 0 0 22px rgba(119, 237, 255, 0.42);
  transition: width 900ms cubic-bezier(.2,.8,.2,1);
}

.platform-home .hero-mini-stats.home-essential-stats {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.platform-home .home-essential-stats article {
  min-height: 0;
  padding: 9px 10px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.26);
  backdrop-filter: blur(20px) saturate(170%);
}

.platform-home .home-essential-stats span {
  display: block;
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.62rem;
  font-weight: 850;
}

.platform-home .home-essential-stats strong {
  display: block;
  margin-top: 2px;
  color: #ffffff;
  font-size: clamp(0.9rem, 3.8vw, 1.12rem);
  font-weight: 950;
  white-space: nowrap;
}

.platform-home .continue-learning-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  min-height: 0;
  padding: 10px 12px 10px 16px;
  border-radius: 20px;
  border: 1px solid rgba(8, 35, 79, 0.08);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.86), rgba(238, 250, 255, 0.58)),
    rgba(255, 255, 255, 0.72);
  box-shadow: 0 14px 38px rgba(12, 38, 78, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(24px) saturate(180%);
}

.platform-home .continue-learning-card::before {
  content: "";
  position: absolute;
  inset: 10px auto 10px 8px;
  width: 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, #18c9ef, #d6a84f);
  box-shadow: 0 0 18px rgba(24, 201, 239, 0.22);
}

.platform-home .continue-learning-card .eyebrow {
  margin: 0 0 2px;
  font-size: 0.58rem;
}

.platform-home .continue-learning-card h3 {
  margin: 0;
  color: #081d4f;
  font-size: 0.9rem;
  line-height: 1.15;
  font-weight: 950;
}

.platform-home .continue-learning-card p:not(.eyebrow) {
  margin: 2px 0 0;
  color: #607089;
  font-size: 0.68rem;
  font-weight: 780;
}

.platform-home .continue-learning-card .ghost-button {
  min-height: 34px;
  padding-inline: 11px;
  border-radius: 14px;
  font-size: 0.72rem;
  white-space: nowrap;
}

.platform-home .quick-access-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(10px, 2vw, 14px);
}

.platform-home .quick-access-card {
  --accent: #10b981;
  --accent-soft: rgba(16, 185, 129, 0.13);
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr auto;
  align-content: start;
  gap: 8px;
  min-height: clamp(126px, 18.5vh, 170px);
  padding: clamp(15px, 3.5vw, 20px);
  text-align: left;
  border-radius: 25px;
  border: 1px solid rgba(8, 24, 56, 0.08);
  background:
    radial-gradient(circle at 100% 0%, var(--accent-soft), transparent 42%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.68));
  box-shadow: 0 20px 52px rgba(12, 38, 78, 0.11), inset 0 1px 0 rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(24px) saturate(180%);
  cursor: pointer;
  transition: transform 220ms cubic-bezier(.2,.8,.2,1), box-shadow 220ms cubic-bezier(.2,.8,.2,1);
}

.platform-home .quick-access-card:nth-child(2) { --accent: #8b5cf6; --accent-soft: rgba(139, 92, 246, 0.13); }
.platform-home .quick-access-card:nth-child(3) { --accent: #f97316; --accent-soft: rgba(249, 115, 22, 0.14); }
.platform-home .quick-access-card:nth-child(4) { --accent: #06b6d4; --accent-soft: rgba(6, 182, 212, 0.16); }

.platform-home .quick-access-card::before {
  content: "";
  position: absolute;
  inset: 14px auto 14px 0;
  width: 4px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 22px color-mix(in srgb, var(--accent) 40%, transparent);
}

.platform-home .quick-access-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.62), transparent);
  transform: translateX(-130%);
  opacity: 0.58;
  transition: transform 560ms var(--ease);
}

.platform-home .quick-access-card:hover,
.platform-home .quick-access-card:focus-visible {
  transform: translateY(-3px) scale(1.01);
  box-shadow: 0 26px 64px rgba(12, 38, 78, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.platform-home .quick-access-card:hover::after,
.platform-home .quick-access-card:focus-visible::after {
  transform: translateX(130%);
}

.platform-home .quick-access-card:active {
  transform: scale(0.985);
}

.platform-home .quick-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 18px;
  color: var(--accent);
  font-size: 1.25rem;
  background:
    radial-gradient(circle at 35% 20%, rgba(255, 255, 255, 0.96), transparent 38%),
    color-mix(in srgb, var(--accent) 14%, white);
  border: 1px solid color-mix(in srgb, var(--accent) 24%, white);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 14px 28px color-mix(in srgb, var(--accent) 15%, transparent);
}

.platform-home .quick-access-card strong {
  grid-column: 1 / -1;
  color: #081d4f;
  font-size: clamp(1rem, 4.3vw, 1.22rem);
  line-height: 1.05;
  font-weight: 950;
}

.platform-home .quick-access-card small {
  grid-column: 1 / -1;
  color: #607089;
  font-size: clamp(0.72rem, 3vw, 0.84rem);
  line-height: 1.28;
  font-weight: 780;
}

.platform-home .quick-access-card em {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 9%, white);
  font-size: 1rem;
  font-style: normal;
  font-weight: 950;
  transition: transform 180ms var(--ease);
}

.platform-home .quick-access-card:active em {
  transform: translateX(3px);
}

@media (max-width: 430px) {
  .platform-home.active {
    gap: 8px;
    min-height: calc(100dvh - 138px);
  }

  .platform-home .platform-hero {
    gap: 8px;
    padding: 13px;
    border-radius: 26px;
  }

  .platform-home .home-greeting {
    margin-bottom: 4px;
    font-size: 0.86rem;
  }

  .home-motivation {
    font-size: clamp(1.25rem, 6.2vw, 1.72rem);
  }

  .platform-home .home-xp-progress {
    padding: 8px 9px;
    border-radius: 15px;
  }

  .platform-home .home-xp-progress span,
  .platform-home .home-xp-progress strong {
    font-size: 0.64rem;
  }

  .platform-home .home-xp-progress div {
    height: 8px;
  }

  .platform-home .home-essential-stats {
    gap: 6px;
  }

  .platform-home .home-essential-stats article {
    padding: 7px 8px;
    border-radius: 15px;
  }

  .platform-home .home-essential-stats span {
    font-size: 0.52rem;
  }

  .platform-home .home-essential-stats strong {
    font-size: 0.78rem;
  }

  .platform-home .continue-learning-card {
    padding: 8px 9px 8px 14px;
    border-radius: 17px;
  }

  .platform-home .continue-learning-card h3 {
    font-size: 0.78rem;
  }

  .platform-home .continue-learning-card p:not(.eyebrow) {
    font-size: 0.6rem;
  }

  .platform-home .continue-learning-card .ghost-button {
    min-height: 30px;
    padding-inline: 9px;
    font-size: 0.66rem;
  }

  .platform-home .quick-access-grid {
    gap: 8px;
  }

  .platform-home .quick-access-card {
    min-height: clamp(108px, 16.2vh, 138px);
    padding: 12px;
    border-radius: 20px;
    gap: 6px;
  }

  .platform-home .quick-icon {
    width: 38px;
    height: 38px;
    border-radius: 15px;
    font-size: 1rem;
  }

  .platform-home .quick-access-card strong {
    font-size: 0.9rem;
  }

  .platform-home .quick-access-card small {
    font-size: 0.66rem;
  }

  .platform-home .quick-access-card em {
    width: 28px;
    height: 28px;
    font-size: 0.82rem;
  }
}

/* Focused premium arena redesign */
.battle-home.active {
  display: grid;
  gap: 14px;
}

.battle-home .lobby-hero {
  min-height: clamp(230px, 34vh, 330px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(22px, 4vw, 40px);
  border-radius: 22px;
  background:
    radial-gradient(circle at 78% 36%, rgba(34, 197, 94, 0.22), transparent 28%),
    radial-gradient(circle at 18% 18%, rgba(23, 105, 255, 0.3), transparent 32%),
    linear-gradient(135deg, rgba(8, 13, 20, 0.96), rgba(14, 25, 41, 0.92) 56%, rgba(7, 34, 28, 0.92)),
    url("Assets/logo.PNG") right clamp(16px, 5vw, 56px) center / clamp(82px, 14vw, 150px) auto no-repeat;
}

.battle-home .lobby-hero h2 {
  max-width: 820px;
  margin-bottom: 6px;
  font-size: clamp(2.2rem, 5.6vw, 4.4rem);
  font-weight: 900;
}

.battle-home .lobby-hero .lede {
  font-size: clamp(0.98rem, 1.35vw, 1.16rem);
}

.hero-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.compact-battle-lobby {
  min-height: clamp(250px, 36vh, 360px);
}

.battle-option-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: min(620px, 100%);
  margin-top: 18px;
}

.battle-option-card {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px;
  min-height: 72px;
  padding: 12px;
  text-align: left;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 20px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 16px 38px rgba(0, 0, 0, 0.16);
  backdrop-filter: blur(18px) saturate(160%);
  cursor: pointer;
  transition: transform 180ms var(--ease), box-shadow 180ms var(--ease), border-color 180ms var(--ease);
}

.battle-option-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.18), transparent);
  transform: translateX(-120%);
  transition: transform 420ms var(--ease);
}

.battle-option-card:hover,
.battle-option-card:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.38);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34), 0 22px 50px rgba(0, 0, 0, 0.2);
}

.battle-option-card:hover::after,
.battle-option-card:focus-visible::after {
  transform: translateX(120%);
}

.battle-option-card span {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 16px;
  font-size: 1.15rem;
  background: rgba(255, 255, 255, 0.18);
}

.battle-option-card strong {
  font-size: 0.92rem;
  font-weight: 950;
}

.battle-option-card small {
  color: rgba(255, 255, 255, 0.72);
  font-weight: 750;
}

.battle-option-card.season span { box-shadow: 0 0 24px rgba(255, 196, 76, 0.22); }
.battle-option-card.friend span { box-shadow: 0 0 24px rgba(24, 201, 239, 0.22); }
.battle-option-card.room span { box-shadow: 0 0 24px rgba(147, 197, 253, 0.22); }
.battle-option-card.add span { box-shadow: 0 0 24px rgba(52, 211, 153, 0.22); }

.battle-home.is-loading .battle-option-card {
  pointer-events: none;
  opacity: 0.82;
}

.battle-home.is-loading .battle-option-card strong,
.battle-home.is-loading .battle-option-card small,
.battle-home.is-loading .battle-option-card span {
  color: transparent;
  border-radius: 999px;
  background:
    linear-gradient(110deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.16));
  background-size: 220% 100%;
  animation: battleSkeletonShimmer 1.35s ease-in-out infinite;
}

.battle-home.is-loading .battle-option-card span {
  border-radius: 16px;
}

.podium-card.skeleton {
  opacity: 0.86;
}

.podium-card.skeleton span,
.podium-card.skeleton strong,
.podium-card.skeleton em {
  color: transparent;
  border-radius: 999px;
  background:
    linear-gradient(110deg, rgba(8, 35, 79, 0.07), rgba(255, 255, 255, 0.75), rgba(8, 35, 79, 0.07));
  background-size: 220% 100%;
  animation: battleSkeletonShimmer 1.35s ease-in-out infinite;
}

@keyframes battleSkeletonShimmer {
  0% { background-position: 120% 0; }
  100% { background-position: -120% 0; }
}

.battle-friends-screen.active {
  display: block;
}

.admin-tab-panel {
  display: none;
}

.admin-tab-panel.active {
  display: block;
}

.admin-tabs .ghost-button.active {
  color: #06245c;
  background: rgba(24, 201, 239, 0.14);
  box-shadow: 0 12px 30px rgba(24, 201, 239, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.admin-season-list,
.season-history-grid,
.knowledge-manager-grid {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.admin-season-card,
.season-history-card,
.knowledge-manager-grid .admin-season-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px;
  border-radius: 18px;
  border: 1px solid rgba(8, 35, 79, 0.08);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.86), rgba(239, 250, 255, 0.55)),
    rgba(255, 255, 255, 0.7);
  box-shadow: 0 14px 36px rgba(12, 35, 78, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.84);
}

.admin-season-card.active {
  border-color: rgba(24, 201, 239, 0.32);
  box-shadow: 0 18px 44px rgba(24, 201, 239, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.knowledge-manager-grid {
  max-height: 340px;
  overflow: auto;
  padding-right: 4px;
}

#adminKnowledgeDraft {
  min-height: 280px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.82rem;
  line-height: 1.55;
}

.admin-season-card span,
.season-history-card span {
  color: #b38427;
  font-size: 0.68rem;
  font-weight: 950;
  letter-spacing: 0.08em;
}

.admin-season-card strong,
.season-history-card strong {
  display: block;
  color: #081d4f;
  font-weight: 950;
}

.admin-season-card small,
.season-history-card small,
.season-history-card p {
  margin: 3px 0 0;
  color: #607089;
  font-size: 0.74rem;
  font-weight: 780;
}

.season-history-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 12px;
}

@media (max-width: 760px) {
  .battle-option-grid {
    gap: 9px;
  }

  .battle-option-card {
    grid-template-columns: 1fr;
    min-height: 98px;
    gap: 7px;
    padding: 10px;
  }

  .battle-option-card span {
    grid-row: auto;
    width: 36px;
    height: 36px;
  }

  .admin-season-card,
  .season-history-card {
    display: grid;
  }

  .season-history-stats {
    grid-template-columns: 1fr;
  }
}

.hero-button {
  min-width: min(190px, 100%);
  min-height: 48px;
  padding: 0 22px;
  border-radius: 14px;
  font-size: 0.95rem;
}

.podium-preview {
  padding: clamp(20px, 4vw, 32px);
  border: 1px solid var(--line);
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.52);
  box-shadow: var(--shadow);
  backdrop-filter: blur(24px);
}

.section-title.compact h2 {
  margin-bottom: 0;
}

.podium-grid,
.leaderboard-podium {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: end;
}

.podium-card {
  display: grid;
  place-items: center;
  gap: 10px;
  min-height: 188px;
  padding: 22px 16px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.74);
  box-shadow: 0 18px 48px rgba(16, 24, 40, 0.1);
  text-align: center;
  animation: floatCard 4.6s var(--ease) infinite;
}

.podium-card.gold {
  min-height: 230px;
  background: linear-gradient(145deg, rgba(255, 250, 235, 0.94), rgba(255, 255, 255, 0.76));
  box-shadow: 0 24px 70px rgba(214, 168, 79, 0.22);
}

.podium-card.silver {
  animation-delay: 240ms;
}

.podium-card.bronze {
  animation-delay: 480ms;
}

.podium-card > span {
  font-size: 2rem;
}

.podium-card strong {
  font-size: 1.05rem;
}

.podium-card em,
.podium-card small,
.ranking-card em,
.ranking-card p,
.user-position-card span,
.user-position-card em {
  color: var(--muted);
  font-style: normal;
  font-weight: 800;
}

.avatar-orb {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  color: white;
  font-weight: 900;
  background: linear-gradient(145deg, #101828, #1769ff 58%, #11a36a);
  box-shadow: 0 14px 34px rgba(23, 105, 255, 0.22);
}

.arena-screen.active {
  display: grid;
  place-items: center;
  min-height: calc(100vh - 120px);
}

.arena-panel {
  width: min(820px, 100%);
  padding: clamp(22px, 5vw, 42px);
  border-radius: 28px;
}

.arena-back {
  margin-bottom: 22px;
}

.season-banner {
  display: grid;
  gap: 8px;
  margin: 22px 0;
  padding: 22px;
  border: 1px solid rgba(23, 105, 255, 0.16);
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(23, 105, 255, 0.11), rgba(17, 163, 106, 0.1)),
    rgba(255, 255, 255, 0.48);
}

.season-banner strong {
  font-size: clamp(1.3rem, 3vw, 2rem);
}

.season-banner span {
  color: var(--muted);
  font-weight: 700;
}

.arena-focus-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.arena-focus-grid div {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.58);
}

.arena-focus-grid span {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.arena-focus-grid strong {
  font-size: 1.05rem;
}

.friend-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.friend-action-card {
  display: grid;
  align-content: start;
  gap: 14px;
  min-height: 360px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.62);
  box-shadow: 0 18px 56px rgba(16, 24, 40, 0.1);
  transition: transform 220ms var(--ease), box-shadow 220ms var(--ease), border-color 220ms var(--ease);
}

.friend-action-card:hover {
  transform: translateY(-5px);
  border-color: rgba(23, 105, 255, 0.28);
  box-shadow: var(--shadow-lift);
}

.setup-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
  gap: 12px;
}

.room-settings-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0 18px;
}

.room-settings-summary span {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.58);
  color: var(--text);
  font-size: 0.86rem;
  font-weight: 900;
  text-align: center;
}

.battle-share-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.battle-share-actions img {
  grid-column: 1 / -1;
  justify-self: center;
  width: 154px;
  height: 154px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: white;
}

.room-lobby {
  display: grid;
  gap: 16px;
  margin-top: 18px;
}

.room-question-board {
  display: grid;
  gap: 8px;
  padding: 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.08);
}

.room-score-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.1);
}

.room-score-row strong {
  overflow-wrap: anywhere;
}

.room-score-row em {
  color: rgba(255, 255, 255, 0.74);
  font-style: normal;
  font-weight: 800;
}

.live-battle-panel {
  display: grid;
  gap: 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 24px;
  color: white;
  background:
    radial-gradient(circle at 18% 0%, rgba(23, 105, 255, 0.24), transparent 35%),
    linear-gradient(145deg, rgba(8, 13, 24, 0.92), rgba(12, 25, 36, 0.86));
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(24px);
  overflow: hidden;
}

.live-battle-toggle {
  display: none;
  width: 100%;
  min-height: 48px;
  border: 0;
  color: white;
  background: rgba(255, 255, 255, 0.08);
  font-weight: 900;
  justify-content: space-between;
}

.live-battle-body {
  display: grid;
  gap: 12px;
  padding: 16px;
}

.live-battle-head,
.live-rank-row,
.live-feed-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.live-battle-head h3 {
  margin: 2px 0 0;
  color: white;
}

.live-battle-head > span,
.live-rank-context {
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.8rem;
  font-weight: 800;
}

.live-rank-list,
.live-feed,
#liveActivityFeed {
  display: grid;
  gap: 8px;
}

.live-rank-row,
.live-feed-item {
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.07);
  animation: liveSlideIn 220ms var(--ease) both;
  transition: transform 220ms var(--ease), background 220ms var(--ease), border-color 220ms var(--ease);
}

.live-rank-row.current,
.live-feed-item.current {
  border-color: rgba(17, 163, 106, 0.42);
  background: rgba(17, 163, 106, 0.15);
}

.live-rank-row.moved {
  transform: translateY(-2px);
}

.live-rank-row span,
.live-feed-item p {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.live-rank-row strong {
  flex: 0 0 auto;
}

.live-rank-row em,
.live-rank-row small {
  color: #dcfce7;
  font-size: 0.74rem;
  font-style: normal;
  font-weight: 900;
}

.live-rank-context {
  display: grid;
  gap: 5px;
  padding: 10px 12px;
}

.live-rank-context p {
  margin: 0;
}

.live-feed-item {
  justify-content: flex-start;
}

.live-battle-panel.final .live-battle-head h3::before {
  content: "🏆 FINAL RESULTS ";
}

.battle-loading {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 14px;
  color: white;
  background:
    radial-gradient(circle at 50% 44%, rgba(23, 105, 255, 0.28), transparent 28%),
    linear-gradient(135deg, rgba(4, 8, 16, 0.96), rgba(9, 19, 32, 0.96));
  opacity: 0;
  pointer-events: none;
  transition: opacity 260ms var(--ease);
}

.battle-loading.active {
  opacity: 1;
  pointer-events: auto;
}

.battle-loading img {
  width: 86px;
  height: 86px;
  object-fit: cover;
  object-position: center 62%;
  border-radius: 24px;
  box-shadow: 0 24px 80px rgba(23, 105, 255, 0.32);
  animation: pulse 1.4s infinite;
}

.battle-loading strong {
  font-size: clamp(1.8rem, 5vw, 3.6rem);
}

.battle-loading > span {
  width: min(360px, 72vw);
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
}

.battle-loading > span::before {
  content: "";
  display: block;
  width: 44%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #1769ff, #11a36a, #d6a84f);
  animation: loadingSlide 860ms var(--ease) infinite;
}

.auth-modal {
  position: fixed;
  inset: 0;
  z-index: 30000;
  display: grid;
  place-items: center;
  padding: calc(env(safe-area-inset-top, 0px) + 16px) 16px calc(env(safe-area-inset-bottom, 0px) + 16px);
  background: rgba(4, 8, 16, 0.55);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms var(--ease);
}

.email-auth-modal {
  position: fixed;
  inset: 0;
  z-index: 30005;
  display: grid;
  place-items: center;
  padding: calc(env(safe-area-inset-top, 0px) + 16px) 16px calc(env(safe-area-inset-bottom, 0px) + 16px);
  background: rgba(4, 8, 16, 0.55);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms var(--ease);
}

.email-auth-modal.active {
  opacity: 1;
  pointer-events: auto;
}

.profile-modal {
  position: fixed;
  inset: 0;
  z-index: 23000;
  display: grid;
  place-items: center;
  padding: calc(env(safe-area-inset-top, 0px) + 18px) 18px calc(env(safe-area-inset-bottom, 0px) + 18px);
  background: rgba(4, 8, 16, 0.34);
  backdrop-filter: blur(22px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms var(--ease);
}

.profile-modal.active {
  opacity: 1;
  pointer-events: auto;
}

.profile-modal-card {
  position: relative;
  width: min(560px, 100%);
  max-height: min(780px, calc(100dvh - 36px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)));
  overflow-y: auto;
  padding: 28px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 30px;
  color: white;
  background:
    radial-gradient(circle at 12% 0%, rgba(23, 105, 255, 0.24), transparent 32%),
    radial-gradient(circle at 100% 22%, rgba(17, 163, 106, 0.2), transparent 34%),
    linear-gradient(145deg, rgba(9, 14, 24, 0.97), rgba(12, 24, 36, 0.94));
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.46);
  transform: translateY(12px) scale(0.96);
  transition: transform 260ms var(--ease);
}

.profile-modal.active .profile-modal-card {
  transform: translateY(0) scale(1);
}

.profile-modal-head {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-right: 40px;
}

.profile-avatar-xl {
  width: 70px;
  height: 70px;
  flex: 0 0 auto;
  font-size: 1.35rem;
  box-shadow: 0 20px 56px rgba(23, 105, 255, 0.3);
}

.profile-modal-head h2 {
  margin: 4px 0 6px;
  color: white;
  font-size: clamp(1.8rem, 6vw, 2.6rem);
}

.profile-modal-head p:not(.eyebrow) {
  margin: 0;
  color: rgba(255, 255, 255, 0.68);
  font-weight: 800;
}

.profile-modal-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 24px 0 16px;
}

.profile-modal-metrics div,
.profile-info-row,
.profile-action-panel {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(18px);
}

.profile-modal-metrics div {
  display: grid;
  gap: 4px;
  min-height: 82px;
  padding: 14px;
}

.profile-modal-metrics span,
.profile-info-row span,
.profile-action-panel span {
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.profile-modal-metrics strong {
  align-self: end;
  color: white;
  font-size: 1.18rem;
}

.profile-modal-content {
  display: grid;
  gap: 10px;
}

.profile-info-row,
.profile-action-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  color: white;
}

.profile-info-row strong,
.profile-action-panel strong {
  text-align: right;
}

.profile-action-panel {
  align-items: flex-start;
  flex-direction: column;
}

.profile-action-panel p {
  margin: 4px 0 0;
  color: rgba(255, 255, 255, 0.68);
  line-height: 1.5;
}

.profile-action-panel button {
  width: 100%;
  margin-top: 8px;
}

.profile-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.profile-chip-row span {
  padding: 9px 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  color: white;
  background: rgba(255, 255, 255, 0.08);
  font-weight: 900;
}

.profile-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
  flex-wrap: wrap;
}

.profile-modal-actions .ghost-button {
  color: white;
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.08);
}

.clinical-profile-screen {
  padding-bottom: 120px;
}

.clinical-profile-shell {
  display: grid;
  gap: 18px;
  width: min(1180px, 100%);
  margin: 0 auto;
}

.clinical-profile-hero,
.clinical-profile-dna-core,
.clinical-profile-section {
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 28px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.86), rgba(247, 251, 255, 0.66)),
    rgba(255, 255, 255, 0.72);
  box-shadow: 0 24px 80px rgba(12, 36, 68, 0.12);
  backdrop-filter: blur(24px);
}

.clinical-profile-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.8fr);
  gap: 18px;
  align-items: stretch;
  padding: 22px;
}

.clinical-profile-identity {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
}

.profile-avatar-xxl {
  width: 92px;
  height: 92px;
  flex: 0 0 auto;
  font-size: 1.6rem;
  box-shadow: 0 22px 56px rgba(22, 119, 255, 0.22);
}

.clinical-profile-identity h2,
.clinical-profile-dna-head h3,
.clinical-profile-section h3 {
  margin: 4px 0 6px;
  color: var(--ink);
}

.clinical-profile-identity p:not(.eyebrow) {
  margin: 0;
  color: var(--muted);
  font-weight: 800;
}

.clinical-profile-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.clinical-profile-tags span,
.clinical-profile-ai-summary span {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 7px 11px;
  border: 1px solid rgba(22, 119, 255, 0.16);
  border-radius: 999px;
  color: #0b4fb3;
  background: rgba(22, 119, 255, 0.08);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.clinical-profile-header-metrics,
.clinical-battle-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.clinical-profile-header-metrics div,
.clinical-battle-grid div {
  min-height: 82px;
  padding: 14px;
  border: 1px solid rgba(8, 31, 68, 0.08);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.68);
}

.clinical-profile-header-metrics span,
.clinical-battle-grid span,
.profile-recent-opponents span {
  display: block;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.clinical-profile-header-metrics strong,
.clinical-battle-grid strong {
  display: block;
  margin-top: 8px;
  color: var(--ink);
  font-size: 1.18rem;
}

.clinical-profile-dna-core {
  padding: 24px;
  overflow: hidden;
}

.clinical-profile-dna-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 18px;
}

.clinical-profile-dna-score {
  min-width: 136px;
  padding: 14px;
  border: 1px solid rgba(22, 119, 255, 0.18);
  border-radius: 22px;
  text-align: right;
  background: rgba(22, 119, 255, 0.08);
}

.clinical-profile-dna-score strong {
  color: #0b4fb3;
  font-size: 2.4rem;
  line-height: 1;
}

.clinical-profile-dna-score span {
  color: var(--muted);
  font-weight: 900;
}

.clinical-profile-dna-score em {
  display: block;
  margin-top: 6px;
  color: var(--ink);
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 900;
}

.clinical-profile-dna-layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.95fr) minmax(280px, 1.05fr);
  gap: 24px;
  align-items: center;
}

.clinical-profile-radar {
  display: grid;
  place-items: center;
  min-height: 320px;
  border: 1px solid rgba(8, 31, 68, 0.08);
  border-radius: 24px;
  background: radial-gradient(circle at 50% 48%, rgba(22, 119, 255, 0.12), rgba(255, 255, 255, 0.58) 58%);
}

.clinical-profile-radar .dna-radar-svg {
  width: min(320px, 100%);
  height: auto;
}

.clinical-profile-dna-axes {
  display: grid;
  gap: 10px;
}

.profile-dna-axis-row {
  display: grid;
  grid-template-columns: minmax(122px, 1fr) minmax(90px, 1.4fr) 38px;
  gap: 10px;
  align-items: center;
  color: var(--ink);
  font-weight: 850;
}

.profile-dna-axis-row div {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(8, 31, 68, 0.08);
}

.profile-dna-axis-row i,
.achievement-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #1677ff, #12b886);
}

.profile-dna-axis-row strong {
  text-align: right;
}

.clinical-profile-ai-summary {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid rgba(8, 31, 68, 0.08);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.62);
}

.clinical-profile-ai-summary p {
  margin: 12px 0 0;
  color: var(--muted);
  font-weight: 750;
  line-height: 1.55;
}

.clinical-profile-section {
  padding: 20px;
}

.profile-pro-shortcut {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(224, 247, 255, 0.54), rgba(255, 244, 214, 0.36)),
    rgba(255, 255, 255, 0.64);
  box-shadow: 0 18px 48px rgba(12, 35, 78, 0.11), inset 0 1px 0 rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(22px) saturate(170%);
}

.profile-pro-shortcut h3 {
  margin: 3px 0;
  color: var(--ink);
  font-size: 1.08rem;
  font-weight: 950;
}

.profile-pro-shortcut p:not(.eyebrow) {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 780;
  line-height: 1.35;
}

.profile-billing-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.profile-billing-summary span,
.profile-owned-decks {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid rgba(8, 31, 68, 0.09);
  border-radius: 8px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.56);
}

.profile-billing-summary strong,
.profile-owned-decks strong { color: var(--ink); }

.profile-billing-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0;
}

.profile-owned-decks { margin-bottom: 12px; }

.clinical-achievement-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.clinical-achievement-card {
  display: grid;
  gap: 9px;
  min-height: 138px;
  padding: 15px;
  border: 1px solid rgba(8, 31, 68, 0.08);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.66);
}

.clinical-achievement-card.locked {
  opacity: 0.72;
}

.clinical-achievement-card span,
.clinical-achievement-card small {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.clinical-achievement-card strong {
  color: var(--ink);
}

.achievement-progress {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(8, 31, 68, 0.08);
}

.clinical-profile-two-col {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
}

.profile-friend-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  margin: 14px 0;
}

.profile-friend-search input {
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid rgba(8, 31, 68, 0.1);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
  font: inherit;
  font-weight: 750;
}

.profile-friend-list,
.profile-friend-results,
.profile-recent-opponents {
  display: grid;
  gap: 10px;
}

.profile-friend-card,
.profile-recent-opponents div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(8, 31, 68, 0.08);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.62);
}

.profile-friend-card strong,
.profile-recent-opponents strong {
  color: var(--ink);
}

.profile-friend-card small,
.profile-recent-opponents em {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-style: normal;
  font-weight: 800;
}

.notification-badge,
.nav-notification-badge {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, #ef4444, #f97316);
  box-shadow: 0 8px 18px rgba(239, 68, 68, 0.28);
  font-size: 0.66rem;
  font-weight: 950;
  line-height: 1;
}

.notification-badge.hidden,
.nav-notification-badge.hidden { display: none; }

.nav-notification-badge {
  position: absolute;
  top: 5px;
  right: 9px;
}

.bottom-nav-item { position: relative; }

@media (max-width: 560px) {
  .profile-pro-shortcut {
    align-items: stretch;
    flex-direction: column;
  }
  .profile-pro-shortcut .primary-button {
    width: 100%;
  }
}

.profile-recent-opponents h4 {
  margin: 16px 0 0;
  color: var(--ink);
}

.share-profile-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
}

.share-profile-section p:not(.eyebrow) {
  margin: 0;
  color: var(--muted);
  font-weight: 750;
}

.profile-share-card {
  grid-column: 1 / -1;
  width: min(460px, 100%);
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, 0.52);
  border-radius: 24px;
  color: white;
  background:
    linear-gradient(145deg, rgba(9, 31, 76, 0.96), rgba(13, 91, 145, 0.88)),
    #0b2a5b;
  box-shadow: 0 22px 64px rgba(11, 42, 91, 0.24);
}

.share-card-brand,
.share-card-metrics {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.share-card-brand img {
  width: 42px;
  height: 42px;
  object-fit: contain;
  border-radius: 10px;
  background: white;
}

.profile-share-card h3 {
  margin: 18px 0 6px;
  color: white;
  font-size: 1.8rem;
}

.profile-share-card p {
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  font-weight: 850;
}

.share-card-score {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 22px 0;
}

.share-card-score strong {
  font-size: 4rem;
  line-height: 0.9;
}

.share-card-score span,
.share-card-metrics span,
.share-card-brand span {
  font-weight: 900;
}

body.dark-mode .clinical-profile-hero,
body.dark-mode .clinical-profile-dna-core,
body.dark-mode .clinical-profile-section {
  border-color: rgba(255, 255, 255, 0.12);
  background:
    linear-gradient(145deg, rgba(14, 22, 36, 0.9), rgba(18, 33, 48, 0.78)),
    rgba(10, 18, 30, 0.72);
}

body.dark-mode .clinical-profile-identity h2,
body.dark-mode .clinical-profile-dna-head h3,
body.dark-mode .clinical-profile-section h3,
body.dark-mode .clinical-profile-header-metrics strong,
body.dark-mode .clinical-battle-grid strong,
body.dark-mode .profile-dna-axis-row,
body.dark-mode .clinical-achievement-card strong,
body.dark-mode .profile-friend-card strong,
body.dark-mode .profile-recent-opponents strong,
body.dark-mode .profile-recent-opponents h4 {
  color: white;
}

body.dark-mode .clinical-profile-header-metrics div,
body.dark-mode .clinical-battle-grid div,
body.dark-mode .clinical-profile-radar,
body.dark-mode .clinical-profile-ai-summary,
body.dark-mode .clinical-achievement-card,
body.dark-mode .profile-friend-card,
body.dark-mode .profile-recent-opponents div,
body.dark-mode .profile-friend-search input {
  border-color: rgba(255, 255, 255, 0.1);
  color: white;
  background: rgba(255, 255, 255, 0.07);
}

@media (max-width: 920px) {
  .clinical-profile-hero,
  .clinical-profile-dna-layout,
  .clinical-profile-two-col {
    grid-template-columns: 1fr;
  }

  .clinical-achievement-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .clinical-profile-screen {
    padding-bottom: 104px;
  }

  .clinical-profile-hero,
  .clinical-profile-dna-core,
  .clinical-profile-section {
    border-radius: 22px;
    padding: 16px;
  }

  .clinical-profile-identity {
    align-items: flex-start;
  }

  .profile-avatar-xxl {
    width: 72px;
    height: 72px;
  }

  .clinical-profile-header-metrics,
  .clinical-battle-grid,
  .clinical-achievement-grid,
  .share-profile-section {
    grid-template-columns: 1fr;
  }

  .clinical-profile-dna-head {
    display: grid;
  }

  .clinical-profile-dna-score {
    width: 100%;
    text-align: left;
  }

  .clinical-profile-radar {
    min-height: 260px;
  }

  .profile-dna-axis-row {
    grid-template-columns: minmax(108px, 1fr) minmax(82px, 1.2fr) 34px;
    font-size: 0.86rem;
  }

  .profile-friend-search,
  .profile-friend-card,
  .profile-recent-opponents div {
    grid-template-columns: 1fr;
  }

  .profile-friend-card .friend-avatar {
    justify-self: start;
  }

  .profile-share-card h3 {
    font-size: 1.45rem;
  }

  .share-card-score strong {
    font-size: 3rem;
  }
}

.auth-modal.active {
  opacity: 1;
  pointer-events: auto;
}

.auth-modal-card {
  position: relative;
  width: min(430px, 100%);
  padding: 30px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 30px;
  color: white;
  background:
    radial-gradient(circle at 18% 0%, rgba(23, 105, 255, 0.26), transparent 30%),
    radial-gradient(circle at 88% 20%, rgba(17, 163, 106, 0.2), transparent 32%),
    linear-gradient(145deg, rgba(9, 14, 24, 0.96), rgba(12, 24, 36, 0.92));
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.46);
  text-align: center;
  transform: translateY(12px) scale(0.96);
  transition: transform 260ms var(--ease);
  overflow: hidden;
}

.email-auth-card {
  position: relative;
  width: min(430px, 100%);
  max-height: min(840px, calc(100vh - 36px));
  overflow-y: auto;
  padding: 30px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 30px;
  color: white;
  background:
    radial-gradient(circle at 18% 0%, rgba(23, 105, 255, 0.26), transparent 30%),
    radial-gradient(circle at 88% 20%, rgba(17, 163, 106, 0.2), transparent 32%),
    linear-gradient(145deg, rgba(9, 14, 24, 0.96), rgba(12, 24, 36, 0.92));
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.46);
  text-align: center;
  transform: translateY(12px) scale(0.96);
  transition: transform 260ms var(--ease);
}

.auth-modal.active .auth-modal-card {
  transform: translateY(0) scale(1);
}

.email-auth-modal.active .email-auth-card {
  transform: translateY(0) scale(1);
}

.auth-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 4;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 50%;
  color: white;
  background: rgba(255, 255, 255, 0.08);
}

.auth-logo {
  width: 74px;
  height: 74px;
  object-fit: cover;
  object-position: center 62%;
  margin-bottom: 18px;
  border-radius: 22px;
  box-shadow: 0 20px 58px rgba(23, 105, 255, 0.28);
}

.auth-modal-card h2 {
  margin-bottom: 8px;
  font-size: clamp(2rem, 7vw, 3rem);
}

.email-auth-card h2 {
  margin-bottom: 8px;
  font-size: clamp(1.9rem, 7vw, 2.8rem);
}

.auth-modal-card p:not(.eyebrow) {
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 22px;
}

.email-auth-card p:not(.eyebrow) {
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 22px;
}

.auth-oauth-actions {
  display: grid;
  gap: 12px;
}

.auth-oauth-button,
.auth-guest-button {
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px;
  color: white;
  background: rgba(255, 255, 255, 0.1);
  font-weight: 900;
  text-decoration: none;
  transition: transform 180ms var(--ease), background 180ms var(--ease), border-color 180ms var(--ease);
}

.auth-oauth-button:hover,
.auth-guest-button:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.16);
}

.auth-oauth-button[aria-disabled="true"],
.auth-guest-button:disabled,
.email-auth-field input:disabled {
  cursor: wait;
  opacity: 0.68;
}

.auth-oauth-button span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: #101828;
  background: white;
  font-weight: 900;
}

.auth-guest-button {
  color: #101828;
  background: linear-gradient(135deg, #ffffff, #dff7ef);
}

.email-auth-field {
  display: grid;
  gap: 8px;
  margin: 0 0 12px;
  text-align: left;
}

.email-auth-field span {
  color: rgba(255, 255, 255, 0.64);
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.meddex-auth-panel {
  display: grid;
  gap: 10px;
}

.meddex-auth-panel h2 {
  margin-bottom: 2px;
}

.email-auth-field input,
.email-auth-field select {
  width: 100%;
  min-height: 56px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px;
  color: white;
  background: rgba(255, 255, 255, 0.1);
  outline: 0;
}

.email-auth-field select {
  appearance: none;
}

.email-auth-field select option {
  color: #101828;
}

.email-auth-field input::placeholder {
  color: rgba(255, 255, 255, 0.42);
}

.email-auth-field input:focus,
.email-auth-field select:focus {
  border-color: rgba(255, 255, 255, 0.34);
  box-shadow: 0 0 0 4px rgba(23, 105, 255, 0.18);
}

.email-auth-card small {
  display: block;
  margin-top: 12px;
  color: rgba(255, 255, 255, 0.58);
  font-weight: 800;
  line-height: 1.45;
}

.auth-text-link,
.auth-small-link {
  border: 0;
  color: white;
  background: transparent;
  font-weight: 900;
}

.auth-text-link {
  margin-top: 4px;
  font-size: 0.95rem;
}

.auth-small-link {
  min-height: auto;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.82rem;
}

.auth-text-link:hover,
.auth-small-link:hover {
  transform: none;
  color: #dff7ef;
}

.auth-loading {
  display: grid;
  place-items: center;
  gap: 10px;
  margin-top: 18px;
}

.auth-loading span {
  width: 34px;
  height: 34px;
  border: 3px solid rgba(255, 255, 255, 0.18);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 820ms linear infinite;
}

.auth-loading strong {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.82rem;
}

.auth-error {
  margin: 16px 0 0;
  padding: 12px 14px;
  border: 1px solid rgba(250, 204, 21, 0.3);
  border-radius: 14px;
  color: #fef3c7;
  background: rgba(250, 204, 21, 0.1);
  font-size: 0.88rem;
  font-weight: 800;
  line-height: 1.45;
}

.auth-success {
  margin: 16px 0 0;
  padding: 12px 14px;
  border: 1px solid rgba(17, 163, 106, 0.34);
  border-radius: 14px;
  color: #dcfce7;
  background: rgba(17, 163, 106, 0.12);
  font-size: 0.88rem;
  font-weight: 800;
  line-height: 1.45;
}

body.battle-mode .topbar {
  display: none;
}

body.battle-mode .app-shell {
  width: min(1320px, calc(100% - 28px));
  padding: 18px 0;
}

body.battle-mode .quiz-screen.active {
  min-height: calc(100vh - 36px);
  display: grid;
  align-items: center;
}

body.battle-mode .quiz-layout {
  grid-template-columns: minmax(0, 1fr) 320px;
  align-items: start;
}

body.battle-mode .live-panel {
  display: grid;
  gap: 12px;
  position: sticky;
  top: 18px;
}

body.battle-mode .explanation-panel.active {
  display: grid;
  gap: 14px;
}

body.battle-mode .question-stage {
  width: min(960px, 100%);
  margin: 0 auto;
  border-radius: 24px;
  padding: clamp(16px, 3vw, 34px);
}

@media (max-width: 860px) {
  body.battle-mode .quiz-layout {
    grid-template-columns: 1fr;
  }

  body.battle-mode .live-panel {
    position: static;
    order: -1;
  }

  .live-battle-panel {
    border-radius: 18px;
  }

  .live-battle-toggle {
    display: flex;
    align-items: center;
    padding: 0 14px;
  }

  .live-battle-panel.collapsed .live-battle-body {
    display: none;
  }
}

body.battle-mode .quiz-status {
  width: min(960px, 100%);
  margin: 0 auto 18px;
}

body.battle-mode #questionText {
  min-height: 92px;
  font-size: clamp(1.38rem, 3.2vw, 2.45rem);
}

body.battle-mode .options-grid {
  gap: 14px;
}

body.battle-mode .option-button {
  min-height: 72px;
  border-radius: 18px;
}

.leaderboard-screen.active {
  display: block;
}

.leaderboard-screen .section-title {
  margin-bottom: 20px;
}

.leaderboard-table-wrap {
  display: none;
}

.ranking-cards {
  display: grid;
  gap: 12px;
  margin-top: 20px;
}

.ranking-card {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.66);
  box-shadow: 0 14px 36px rgba(16, 24, 40, 0.08);
}

.ranking-card.empty-state {
  display: block;
  color: var(--muted);
  font-weight: 800;
  text-align: center;
}

.ranking-card strong,
.ranking-card p {
  overflow-wrap: anywhere;
}

.user-position-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 14px;
  align-items: center;
  margin: 18px 0;
  padding: 16px;
  border: 1px solid rgba(17, 163, 106, 0.22);
  border-radius: 18px;
  background: rgba(17, 163, 106, 0.1);
}

.user-position-card strong {
  grid-row: span 2;
  font-size: 1.8rem;
}

#hallOfFameSection {
  display: none !important;
}

body.dark-mode .podium-preview,
body.dark-mode .podium-card,
body.dark-mode .quick-access-card,
body.dark-mode .home-stats-grid article,
body.dark-mode .home-ai-card,
body.dark-mode .deck-card,
body.dark-mode .redeem-panel,
body.dark-mode .practice-setup-panel,
body.dark-mode .practice-progress-panel article,
body.dark-mode .library-stat-grid article,
body.dark-mode .friend-action-card,
body.dark-mode .season-banner,
body.dark-mode .arena-focus-grid div,
body.dark-mode .room-settings-summary span,
body.dark-mode .ranking-card {
  background-color: rgba(15, 23, 42, 0.68);
}

body.dark-mode .battle-share-actions img {
  background: #f8fafc;
}

@keyframes floatCard {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

@keyframes loadingSlide {
  from {
    transform: translateX(-110%);
  }
  to {
    transform: translateX(250%);
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes liveSlideIn {
  from {
    opacity: 0;
    transform: translateX(12px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.admin-login {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: end;
  margin-top: 18px;
}

.question-editor {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(248, 250, 252, 0.82);
}

.wide {
  grid-column: 1 / -1;
}

.option-admin-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.admin-question-list {
  display: grid;
  gap: 10px;
  max-height: 320px;
  overflow: auto;
  margin-top: 16px;
}

.admin-question-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(248, 250, 252, 0.82);
}

@keyframes riseIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.99);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes cardRise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes heroReveal {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes heroSheen {
  0%,
  72% {
    transform: translateX(-58%);
    opacity: 0;
  }
  82% {
    opacity: 1;
  }
  100% {
    transform: translateX(58%);
    opacity: 0;
  }
}

@keyframes glassShimmer {
  0%,
  58% {
    transform: translateX(-70%);
    opacity: 0.18;
  }
  100% {
    transform: translateX(85%);
    opacity: 0.5;
  }
}

@keyframes floatLogo {
  from {
    transform: translateY(0) rotate(-0.6deg);
  }
  to {
    transform: translateY(-10px) rotate(0.6deg);
  }
}

@keyframes slowBreathe {
  from {
    transform: scale(0.96) translateY(0);
    opacity: 0.56;
  }
  to {
    transform: scale(1.05) translateY(10px);
    opacity: 0.8;
  }
}

@keyframes textReveal {
  from {
    opacity: 0;
    transform: translateY(18px);
    filter: blur(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@keyframes particleDrift {
  from {
    background-position: 0 0, 0 0, 0 0;
  }
  to {
    background-position: 42px -64px, -56px 48px, 72px 36px;
  }
}

@keyframes aiFloat {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-8px);
  }
}

@keyframes aiRing {
  0% {
    transform: scale(0.9);
    opacity: 0.5;
  }
  100% {
    transform: scale(1.22);
    opacity: 0;
  }
}

@keyframes aiPulse {
  0%,
  100% {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 14px 28px rgba(214, 168, 79, 0.1);
  }
  50% {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 18px 42px rgba(214, 168, 79, 0.22);
  }
}

@keyframes ambientSweep {
  from {
    background-position: -24% 0, 0 0, 0 0;
  }
  to {
    background-position: 124% 0, 18px 18px, 18px 18px;
  }
}

@keyframes softPulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.08);
    opacity: 0.82;
  }
}

@keyframes codePop {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes pulse {
  50% {
    transform: scale(1.03);
  }
}

@keyframes ecgGlow {
  0%,
  100% {
    filter: drop-shadow(0 0 0 rgba(8, 153, 223, 0));
    transform: translateX(0);
  }
  50% {
    filter: drop-shadow(0 0 8px rgba(8, 153, 223, 0.28));
    transform: translateX(4px);
  }
}

@keyframes meddexAiFloat {
  from {
    transform: translateY(0) scale(1);
  }
  to {
    transform: translateY(-6px) scale(1.015);
  }
}

@keyframes meddexAiBreathe {
  0%,
  100% {
    opacity: 0.72;
    transform: scale(0.98);
  }
  50% {
    opacity: 1;
    transform: scale(1.04);
  }
}

@keyframes meddexAiRing {
  0% {
    opacity: 0.58;
    transform: scale(0.82);
  }
  100% {
    opacity: 0;
    transform: scale(1.18);
  }
}

@keyframes aiGlowBreathe {
  0%,
  100% {
    box-shadow: 0 18px 50px rgba(8, 153, 223, 0.16), 0 0 0 7px rgba(8, 153, 223, 0.045);
  }
  50% {
    box-shadow: 0 20px 58px rgba(8, 153, 223, 0.22), 0 0 0 10px rgba(214, 168, 79, 0.07);
  }
}

@keyframes aiBubbleIn {
  from {
    opacity: 0;
    transform: translateX(8px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes aiBubbleOut {
  to {
    opacity: 0;
    transform: translateX(8px) scale(0.96);
  }
}

@keyframes navIconBreathe {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-1px) scale(1.06);
  }
}

@keyframes toastIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 860px) {
  .app-shell {
    width: min(100% - 20px, 680px);
    padding-top: 10px;
  }

  .topbar {
    position: sticky;
    top: 6px;
    align-items: center;
    flex-direction: row;
    border-radius: 14px;
  }

  .quiz-status,
  .section-title,
  .resume-panel {
    align-items: flex-start;
    flex-direction: column;
  }

  .top-actions {
    width: auto;
    margin-left: auto;
    gap: 6px;
  }

  .top-actions #soundToggle,
  .top-actions #adminOpen {
    display: none;
  }

  .profile-menu {
    width: auto;
  }

  .profile-button {
    width: auto;
    padding-right: 6px;
  }

  .profile-copy {
    display: none;
  }

  .profile-dropdown {
    position: fixed;
    top: 12px;
    bottom: 12px;
    left: 12px;
    right: 12px;
    width: auto;
    max-height: calc(100dvh - 24px);
    overscroll-behavior: contain;
    z-index: 320;
  }

  .profile-copy strong {
    max-width: 210px;
  }

  .hero-grid.active,
  .quiz-layout,
  .result-screen.active,
  .auth-oauth-actions {
    grid-template-columns: 1fr;
  }

  .auth-modal-card {
    padding: 26px 18px;
    border-radius: 26px;
  }

  .profile-modal-card {
    padding: 24px 16px;
    border-radius: 26px;
  }

  .profile-modal-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }

  .profile-modal-metrics {
    grid-template-columns: repeat(2, 1fr);
  }

  .profile-info-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }

  .profile-info-row strong {
    text-align: left;
  }

  .hero-copy {
    min-height: auto;
  }

  .stat-strip,
  .dashboard-grid,
  .battle-lobby-grid,
  .arena-focus-grid,
  .quick-access-grid,
  .library-stat-grid,
  .deck-grid,
  .practice-setup-panel,
  .practice-progress-panel,
  .deck-card,
  .friend-battle-layout,
  .friend-choice-grid,
  .setup-grid,
  .room-settings-summary,
  .hall-grid,
  .options-grid,
  .result-metrics,
  .question-editor,
  .option-admin-grid,
  .admin-login {
    grid-template-columns: 1fr;
  }

  .metric-grid.small,
  .review-card,
  .battle-join,
  .history-row {
    grid-template-columns: 1fr;
  }

  .lobby-hero {
    min-height: 190px;
    padding: 20px;
    border-radius: 18px;
    background:
      linear-gradient(135deg, rgba(10, 18, 32, 0.94), rgba(17, 39, 62, 0.82)),
      url("Assets/logo.PNG") right 14px bottom 14px / 78px auto no-repeat;
  }

  .lobby-hero h2 {
    font-size: clamp(1.85rem, 10vw, 2.8rem);
  }

  .platform-hero {
    min-height: 290px;
    padding: 24px;
    border-radius: 24px;
  }

  .platform-brand-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .hero-logo-glow {
    width: 72px;
    height: 72px;
    border-radius: 20px;
  }

  .platform-brand-row h2 {
    font-size: clamp(2.15rem, 12vw, 3.5rem);
  }

  .home-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: -36px;
    padding: 0;
  }

  .home-ai-card {
    align-items: stretch;
    flex-direction: column;
  }

  .home-ai-actions {
    justify-content: stretch;
  }

  .home-ai-actions button {
    flex: 1;
  }

  .quick-access-card {
    min-height: 118px;
    padding: 18px;
    border-radius: 22px;
    gap: 14px;
  }

  .quick-icon {
    width: 56px;
    height: 56px;
    border-radius: 18px;
  }

  .redeem-panel {
    grid-template-columns: 1fr;
  }

  .deck-thumb {
    min-height: 160px;
  }

  .ai-floating-button {
    right: 16px;
    bottom: 96px;
    width: 64px;
    height: 64px;
  }

  .ai-floating-button img {
    width: 46px;
    height: 46px;
  }

  .ai-panel {
    padding: 10px;
  }

  .ai-panel-card {
    height: calc(100dvh - 20px);
    border-radius: 26px;
  }

  .battle-tabs {
    border-radius: 14px;
  }

  .lobby-card,
  .entry-panel,
  .info-panel,
  .review-section,
  .hall-section,
  .leaderboard-section {
    border-radius: 16px;
  }

  .progress-track {
    width: calc(100vw - 20px);
  }

  #questionText {
    min-height: auto;
  }

  .option-button {
    min-height: 76px;
  }
}

@media (max-width: 860px) {
  .app-shell {
    width: min(100% - 16px, 680px);
    padding: 8px 0 104px;
  }

  .topbar {
    margin-bottom: 10px;
    padding: 6px 7px;
  }

  .brand-logo {
    width: 32px;
    height: 32px;
    border-radius: 10px;
  }

  .brand-lockup h1, .brand-lockup .brand-title {
    font-size: 0.92rem;
  }

  .brand-subtitle {
    font-size: 0.58rem;
  }

  .platform-home.active,
  .cards-screen.active,
  .practice-screen.active {
    gap: 11px;
  }

  .platform-hero {
    min-height: 186px;
    gap: 8px;
    padding: 13px;
    border-radius: 20px;
  }

  .platform-brand-row {
    align-items: center;
    flex-direction: row;
    gap: 11px;
  }

  .hero-logo-glow {
    width: 52px;
    height: 52px;
    border-radius: 18px;
    flex: 0 0 auto;
  }

  .hero-logo-glow img {
    border-radius: 15px;
  }

  .home-greeting {
    margin-bottom: 2px;
    font-size: 0.72rem;
  }

  .platform-brand-row h2 {
    font-size: clamp(1.82rem, 10.5vw, 2.65rem);
  }

  .hero-mantra {
    font-size: 0.82rem;
  }

  .platform-tagline {
    font-size: 0.82rem;
    line-height: 1.32;
  }

  .hero-cta-row .primary-button {
    min-height: 36px;
    padding-inline: 14px;
    border-radius: 13px;
    font-size: 0.84rem;
  }

  .home-stats-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    margin-top: -14px;
    padding: 0 4px;
  }

  .home-stats-grid article {
    min-height: 56px;
    padding: 8px 6px;
    border-radius: 15px;
  }

  .home-stats-grid span {
    font-size: 0.54rem;
  }

  .home-stats-grid strong {
    font-size: 0.82rem;
  }

  .quick-access-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .continue-learning-card {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    padding: 10px;
    border-radius: 16px;
  }

  .continue-learning-card h3 {
    font-size: 0.94rem;
  }

  .continue-learning-card p:not(.eyebrow) {
    font-size: 0.72rem;
    line-height: 1.25;
  }

  .continue-learning-card .ghost-button {
    min-height: 34px;
    padding-inline: 10px;
    font-size: 0.76rem;
  }

  .quick-access-card {
    min-height: 68px;
    padding: 11px 12px;
    border-radius: 17px;
    gap: 10px;
  }

  .quick-icon {
    width: 38px;
    height: 38px;
    border-radius: 13px;
    font-size: 1.14rem;
  }

  .quick-access-card strong {
    font-size: 0.98rem;
  }

  .quick-access-card small {
    font-size: 0.76rem;
  }

  .platform-page-head h2 {
    font-size: 1.55rem;
  }

  .platform-page-head p:not(.eyebrow) {
    font-size: 0.82rem;
  }

  .page-action-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-action-row .primary-button,
  .page-action-row .ghost-button {
    min-height: 36px;
    padding: 0 8px;
    font-size: 0.72rem;
  }

  .library-stat-grid,
  .practice-progress-panel {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .practice-progress-panel article:nth-child(4) {
    display: none;
  }

  .library-stat-grid article,
  .practice-progress-panel article {
    min-height: 58px;
    padding: 8px 7px;
    border-radius: 15px;
  }

  .library-stat-grid span,
  .practice-progress-panel span {
    font-size: 0.62rem;
  }

  .library-stat-grid strong,
  .practice-progress-panel strong {
    font-size: 0.92rem;
  }

  .redeem-panel {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    padding: 10px;
  }

  .redeem-panel label {
    min-width: 0;
  }

  .redeem-panel .primary-button {
    align-self: end;
    padding-inline: 12px;
  }

  .redeem-panel .form-note {
    display: none;
  }

  .deck-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .deck-card {
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 10px;
    padding: 10px;
    border-radius: 17px;
  }

  .deck-thumb {
    min-height: 72px;
    border-radius: 14px;
  }

  .deck-thumb img {
    width: 44px;
    height: 44px;
    border-radius: 12px;
  }

  .deck-body {
    gap: 5px;
  }

  .deck-body h3 {
    font-size: 1rem;
  }

  .deck-body p {
    font-size: 0.76rem;
    line-height: 1.25;
  }

  .deck-meta {
    gap: 5px;
  }

  .deck-status,
  .deck-meta span {
    padding: 4px 7px;
    font-size: 0.64rem;
  }

  .practice-preset-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
  }

  .practice-preset-row .preset-chip {
    min-height: 34px;
    padding: 0 7px;
    font-size: 0.68rem;
    white-space: nowrap;
  }

  .practice-setup-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 10px;
  }

  .practice-setup-panel label {
    font-size: 0.68rem;
  }

  .practice-setup-panel input,
  .practice-setup-panel select {
    min-height: 38px;
    padding: 0 10px;
    border-radius: 12px;
    font-size: 0.84rem;
  }

  .practice-setup-panel .wide-action {
    min-height: 40px;
    grid-column: 1 / -1;
  }

  .bottom-nav {
    bottom: 8px;
    width: calc(100% - 18px);
    padding: 6px;
    border-radius: 20px;
  }

  .bottom-nav-item {
    min-height: 45px;
    border-radius: 14px;
    font-size: 0.68rem;
  }

  .bottom-nav-item span {
    font-size: 1.08rem;
  }

  .ai-floating-button {
    right: 12px;
    bottom: 78px;
    width: 76px;
    height: 76px;
  }

  .ai-floating-button img {
    width: 66px;
    height: 66px;
  }

  .ai-panel {
    padding: 6px;
  }

  .ai-panel-card {
    height: calc(100dvh - 12px);
    border-radius: 22px;
  }

  .ai-panel-head {
    padding: 11px 12px;
  }

  .ai-panel-head h2 {
    font-size: 1.02rem;
  }
}

/* Spacing hierarchy and in-app deck reader */
.app-shell {
  padding-top: calc(env(safe-area-inset-top, 0px) + 16px);
}

.topbar {
  top: calc(env(safe-area-inset-top, 0px) + 10px);
  z-index: 10050;
  margin-bottom: 22px;
}

.profile-dropdown {
  z-index: 20050;
}

.platform-home.active,
.cards-screen.active,
.practice-screen.active {
  gap: 16px;
}

.home-stats-grid {
  margin-top: 0;
}

.platform-hero,
.home-stats-grid,
.continue-learning-card,
.quick-access-grid {
  scroll-margin-top: 96px;
}

.deck-viewer {
  position: fixed;
  inset: 0;
  z-index: 21000;
  display: grid;
  place-items: center;
  padding: calc(env(safe-area-inset-top, 0px) + 14px) 14px calc(env(safe-area-inset-bottom, 0px) + 14px);
  background: rgba(248, 251, 255, 0.62);
  backdrop-filter: blur(22px);
  opacity: 0;
  transition: opacity 220ms var(--ease);
}

.deck-viewer.active {
  opacity: 1;
}

.deck-viewer-card {
  width: min(1100px, 100%);
  height: min(880px, calc(100dvh - 28px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-radius: 28px;
  background:
    radial-gradient(circle at 94% 8%, rgba(214, 168, 79, 0.13), transparent 28%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(247, 252, 255, 0.82));
  box-shadow: 0 34px 100px rgba(16, 24, 40, 0.22);
  transform: translateY(16px) scale(0.98);
  transition: transform 220ms var(--ease);
}

.deck-viewer.active .deck-viewer-card {
  transform: translateY(0) scale(1);
}

.deck-viewer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(16, 24, 40, 0.08);
}

.deck-viewer-head h2 {
  margin-bottom: 2px;
  font-size: clamp(1.1rem, 2vw, 1.55rem);
}

.deck-viewer-head p:not(.eyebrow) {
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 750;
}

.deck-viewer-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.deck-viewer-actions .ghost-button {
  min-height: 36px;
  border-radius: 13px;
  padding-inline: 12px;
}

.deck-viewer-actions .ghost-button.active {
  color: #07111f;
  background: linear-gradient(135deg, rgba(255, 248, 226, 0.96), rgba(234, 248, 255, 0.9));
  border-color: rgba(214, 168, 79, 0.44);
}

.deck-viewer iframe {
  width: 100%;
  height: 100%;
  border: 0;
  background: #f8fafc;
}

.deck-pdf-pages {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  display: grid;
  gap: 18px;
  justify-items: center;
  padding: 18px;
  background:
    radial-gradient(circle at 20% 0%, rgba(8, 153, 223, 0.08), transparent 28%),
    linear-gradient(180deg, rgba(248, 251, 255, 0.96), rgba(241, 246, 250, 0.94));
}

.deck-pdf-page {
  width: min-content;
  max-width: 100%;
  display: grid;
  gap: 8px;
  justify-items: center;
}

.deck-pdf-page canvas {
  max-width: 100%;
  height: auto !important;
  border-radius: 14px;
  background: white;
  box-shadow: 0 18px 50px rgba(16, 24, 40, 0.14);
}

.deck-pdf-page-label {
  justify-self: start;
  padding: 5px 9px;
  border: 1px solid rgba(214, 168, 79, 0.22);
  border-radius: 999px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.82);
  font-size: 0.68rem;
  font-weight: 900;
}

body.deck-viewer-open {
  overflow: hidden;
}

@media (max-width: 860px) {
  .app-shell {
    padding-top: calc(env(safe-area-inset-top, 0px) + 12px);
  }

  .topbar {
    top: calc(env(safe-area-inset-top, 0px) + 8px);
    margin-bottom: 20px;
  }

  .platform-home.active,
  .cards-screen.active,
  .practice-screen.active {
    gap: 14px;
  }

  .home-stats-grid {
    margin-top: 0;
  }

  .profile-dropdown {
    top: calc(env(safe-area-inset-top, 0px) + 74px);
    bottom: calc(env(safe-area-inset-bottom, 0px) + 82px);
    left: 12px;
    right: 12px;
    max-height: none;
    z-index: 22000;
  }

  .deck-viewer {
    padding: calc(env(safe-area-inset-top, 0px) + 8px) 8px calc(env(safe-area-inset-bottom, 0px) + 8px);
  }

  .deck-viewer-card {
    height: calc(100dvh - 16px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    border-radius: 22px;
  }

  .deck-viewer-head {
    padding: 11px 12px;
  }

  .deck-pdf-pages {
    gap: 12px;
    padding: 10px;
  }

  .deck-viewer-head h2 {
    font-size: 1rem;
  }

  .deck-viewer-head p:not(.eyebrow) {
    font-size: 0.7rem;
  }

  .deck-viewer-actions .ghost-button {
    min-height: 34px;
    padding-inline: 9px;
    font-size: 0.74rem;
  }
}

/* Native MedDex AI and mobile UX polish */
body,
.app-shell,
.topbar,
.profile-menu {
  overflow: visible;
}

.platform-hero {
  min-height: 206px;
}

.platform-tagline {
  margin: 2px 0;
  color: #172033;
  font-size: clamp(1rem, 2.5vw, 1.42rem);
  font-weight: 920;
  line-height: 1.12;
}

.hero-mantra {
  color: #5b6676;
  font-size: clamp(0.82rem, 1.6vw, 1rem);
  font-weight: 820;
}

.hero-mantra span {
  color: #d6a84f;
}

.hero-ecg {
  display: none;
}

.bottom-nav {
  grid-template-columns: repeat(5, 1fr);
}

.bottom-nav-item {
  will-change: transform;
}

.bottom-nav-item:active,
.quick-access-card:active,
.continue-learning-card .ghost-button:active,
.primary-button:active,
.ghost-button:active {
  transform: translateY(1px) scale(0.97);
}

.bottom-nav-item.active span {
  animation: navIconBreathe 2.8s var(--ease) infinite;
}

.ai-floating-button {
  left: auto !important;
  top: auto !important;
  right: 14px;
  bottom: 92px;
  width: 72px;
  height: 72px;
  z-index: 260;
  display: grid;
  place-items: center;
  border: 1px solid rgba(214, 168, 79, 0.34);
  border-radius: 999px;
  background:
    radial-gradient(circle at 32% 20%, rgba(255, 255, 255, 0.96), rgba(236, 248, 255, 0.78)),
    linear-gradient(135deg, rgba(255, 255, 255, 0.78), rgba(214, 168, 79, 0.1));
  box-shadow: 0 18px 50px rgba(8, 153, 223, 0.2), 0 0 0 8px rgba(8, 153, 223, 0.055);
  backdrop-filter: blur(18px);
  animation: aiGlowBreathe 4.8s var(--ease) infinite;
  transition: transform 180ms var(--ease), box-shadow 180ms var(--ease), opacity 180ms var(--ease);
}

.ai-floating-button:active {
  transform: scale(0.94);
}

.ai-floating-button img {
  width: 62px;
  height: 62px;
  object-fit: cover;
  border-radius: 50%;
}

.ai-ring {
  position: absolute;
  inset: -10px;
  border: 1px solid rgba(8, 153, 223, 0.22);
  border-radius: inherit;
  animation: meddexAiRing 2.8s var(--ease) infinite;
}

.ai-bubble {
  position: absolute;
  right: 66px;
  top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 118px;
  padding: 7px 10px;
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 999px;
  color: #172033;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 12px 34px rgba(16, 24, 40, 0.12);
  backdrop-filter: blur(18px);
  font-size: 0.72rem;
  font-weight: 850;
  white-space: nowrap;
  animation: aiBubbleIn 360ms var(--ease) both;
}

.ai-bubble-close {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  color: #5b6677;
  background: rgba(225, 232, 240, 0.78);
  font-size: 0.82rem;
  line-height: 1;
  transition: transform 160ms var(--ease), background 160ms var(--ease);
}

.ai-bubble-close:hover,
.ai-bubble-close:focus-visible {
  outline: none;
  transform: scale(1.08);
  background: rgba(208, 218, 232, 0.95);
}

.ai-bubble.is-hiding {
  animation: aiBubbleOut 420ms var(--ease) both;
}

.ai-panel {
  position: fixed;
  inset: 0;
  z-index: 23000;
  display: grid;
  align-items: end;
  padding: 0 10px calc(env(safe-area-inset-bottom, 0px) + 10px);
  background: rgba(248, 251, 255, 0.54);
  backdrop-filter: blur(20px);
  opacity: 0;
  transition: opacity 220ms var(--ease);
}

.ai-panel.active {
  opacity: 1;
}

.ai-panel-card {
  width: min(760px, 96vw);
  max-height: min(82dvh, 760px);
  height: min(82dvh, 760px);
  margin: 0 auto;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 30px 30px 22px 22px;
  background:
    radial-gradient(circle at 92% 0%, rgba(214, 168, 79, 0.24), transparent 30%),
    radial-gradient(circle at 0% 18%, rgba(8, 153, 223, 0.2), transparent 34%),
    linear-gradient(145deg, rgba(5, 12, 26, 0.98), rgba(13, 31, 50, 0.96));
  box-shadow: 0 -18px 90px rgba(6, 13, 28, 0.42);
  transform: translateY(105%);
  transition: transform 320ms var(--ease);
}

.ai-panel.active .ai-panel-card {
  transform: translateY(0);
}

.ai-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.ai-title-lockup {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.ai-title-lockup img {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(214, 168, 79, 0.32), 0 12px 34px rgba(8, 153, 223, 0.24);
}

.ai-panel-head h2 {
  margin: 0 0 2px;
  color: white;
  font-size: clamp(1rem, 2.5vw, 1.35rem);
}

.ai-panel-head p:not(.eyebrow) {
  margin: 0;
  color: rgba(226, 238, 250, 0.72);
  font-size: 0.72rem;
  font-weight: 760;
}

body.ai-panel-open {
  overflow: hidden;
}

.ai-online-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-inline: 6px 3px;
  border-radius: 50%;
  background: #39e6a3;
  box-shadow: 0 0 16px rgba(57, 230, 163, 0.8);
}

.ai-quick-actions,
.ai-followups {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 9px 14px;
  scrollbar-width: none;
  white-space: nowrap;
}

.ai-quick-actions::-webkit-scrollbar,
.ai-followups::-webkit-scrollbar {
  display: none;
}

.ai-quick-actions button,
.ai-followups button {
  flex: 0 0 auto;
  min-height: 31px;
  padding: 0 11px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.88);
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(16px);
  font-size: 0.72rem;
  font-weight: 900;
  transition: transform 170ms var(--ease), background 170ms var(--ease);
}

.ai-quick-actions button:active,
.ai-followups button:active {
  transform: scale(0.96);
}

.ai-chat-log {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  padding: 12px 14px 16px;
  -webkit-overflow-scrolling: touch;
}

.ai-message {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  animation: aiMessageIn 240ms var(--ease) both;
}

.ai-message.user {
  justify-content: flex-end;
}

.ai-message img {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  border-radius: 50%;
  object-fit: cover;
}

.ai-message > div {
  max-width: min(82%, 560px);
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  color: rgba(247, 251, 255, 0.93);
  background: rgba(255, 255, 255, 0.07);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.16);
}

.ai-message.user > div {
  color: #07111f;
  background: linear-gradient(135deg, rgba(255, 248, 226, 0.96), rgba(214, 239, 255, 0.94));
}

.ai-message.error > div {
  border-color: rgba(248, 113, 113, 0.32);
}

.ai-message span {
  display: block;
  margin-bottom: 5px;
  color: rgba(226, 238, 250, 0.58);
  font-size: 0.66rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.ai-message.user span {
  color: rgba(7, 17, 31, 0.48);
}

.ai-message p {
  margin: 0;
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.55;
}

.ai-message.typing p {
  display: inline-flex;
  gap: 5px;
}

/* Rich formatting inside Baihaqi AI answers — premium tutor-notes look */
.ai-message .ai-em {
  font-weight: 800;
  color: #0b4aa2;
  background: linear-gradient(180deg, transparent 62%, rgba(24, 119, 242, 0.16) 62%);
  padding: 0 1px;
  border-radius: 2px;
  animation: aiEmHighlight 620ms ease both;
}
@keyframes aiEmHighlight {
  from { background-size: 0% 100%; background-position: left; }
  to { background-size: 100% 100%; }
}
.ai-message .ai-code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.82em;
  font-weight: 700;
  background: rgba(12, 35, 64, 0.08);
  border: 1px solid rgba(12, 35, 64, 0.1);
  border-radius: 6px;
  padding: 1px 5px;
  color: #0c2340;
}
.ai-message .ai-clinical-label {
  display: inline-block;
  font-weight: 800;
  font-size: 0.74rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #b8271f;
  background: rgba(224, 36, 36, 0.09);
  border: 1px solid rgba(224, 36, 36, 0.22);
  border-radius: 6px;
  padding: 1px 7px;
  margin-right: 2px;
}
.ai-message em { font-style: italic; color: inherit; opacity: 0.92; }

.ai-message.typing i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #d6a84f;
  animation: aiTyping 900ms ease-in-out infinite;
}

.ai-message.typing i:nth-child(2) {
  animation-delay: 120ms;
}

.ai-message.typing i:nth-child(3) {
  animation-delay: 240ms;
}

.ai-composer {
  display: grid;
  gap: 7px;
  padding: 10px 14px 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.ai-composer-bar {
  display: grid;
  grid-template-columns: auto auto auto minmax(0, 1fr) auto auto;
  align-items: end;
  gap: 7px;
  padding: 7px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.075);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.ai-tool-button {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 13px;
  color: rgba(247, 251, 255, 0.86);
  background: rgba(255, 255, 255, 0.07);
  font-weight: 950;
  cursor: pointer;
  transition: transform 160ms var(--ease), background 160ms var(--ease), box-shadow 160ms var(--ease);
}

.ai-tool-button:hover,
.ai-tool-button.active {
  background: rgba(8, 153, 223, 0.18);
  box-shadow: 0 10px 28px rgba(8, 153, 223, 0.12);
}

.ai-tool-button:active {
  transform: scale(0.94);
}

.ai-tool-button.call {
  color: #07111f;
  background: linear-gradient(135deg, #fff2c8, #bdefff);
}

.ai-composer textarea {
  min-height: 38px;
  max-height: 120px;
  resize: none;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 15px;
  color: white;
  background: rgba(255, 255, 255, 0.08);
  outline: none;
  font: inherit;
  font-weight: 750;
}

.ai-composer textarea::placeholder {
  color: rgba(226, 238, 250, 0.5);
}

.ai-composer .primary-button {
  width: 36px;
  min-width: 36px;
  min-height: 36px;
  padding: 0;
  border-radius: 14px;
  font-size: 1.1rem;
}

.ai-composer-meta {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: rgba(226, 238, 250, 0.46);
  font-size: 0.66rem;
  font-weight: 800;
}

.ai-composer-meta button {
  border: 0;
  color: rgba(255, 248, 226, 0.9);
  background: transparent;
  font-weight: 900;
}

.ai-attachment-preview {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.ai-attachment-chip {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 220px;
  padding: 6px 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  color: rgba(247, 251, 255, 0.9);
  background: rgba(255, 255, 255, 0.08);
  font-size: 0.72rem;
  font-weight: 850;
}

.ai-attachment-chip img,
.ai-attachment-chip > span {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 11px;
  object-fit: cover;
  background: rgba(8, 153, 223, 0.16);
}

.ai-attachment-chip strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-attachment-chip button {
  border: 0;
  color: rgba(247, 251, 255, 0.75);
  background: transparent;
  font-size: 1rem;
}

.ai-message-attachments {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 4px 0 8px;
}

.ai-message-attachments img {
  width: min(220px, 100%);
  height: auto;
  border-radius: 14px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18);
}

.ai-message-attachments span {
  display: inline-flex;
  margin: 0;
  padding: 8px 10px;
  border-radius: 12px;
  color: rgba(247, 251, 255, 0.88);
  background: rgba(255, 255, 255, 0.1);
}

.ai-call-screen {
  position: fixed;
  inset: 0;
  z-index: 24000;
  display: grid;
  place-items: center;
  padding: 18px;
  background:
    radial-gradient(circle at 50% 20%, rgba(8, 153, 223, 0.2), transparent 34%),
    linear-gradient(145deg, rgba(3, 9, 20, 0.92), rgba(8, 20, 38, 0.94));
  backdrop-filter: blur(28px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms var(--ease);
}

.ai-call-screen.active {
  opacity: 1;
  pointer-events: auto;
}

.ai-call-card {
  position: relative;
  width: min(520px, 100%);
  min-height: min(700px, 88dvh);
  display: grid;
  place-items: center;
  align-content: center;
  gap: 16px;
  padding: 34px 22px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 34px;
  color: white;
  text-align: center;
  background:
    radial-gradient(circle at 50% 20%, rgba(214, 168, 79, 0.2), transparent 28%),
    rgba(255, 255, 255, 0.06);
  box-shadow: 0 34px 120px rgba(0, 0, 0, 0.42);
  transform: scale(0.96) translateY(12px);
  transition: transform 220ms var(--ease);
}

.ai-call-screen.active .ai-call-card {
  transform: scale(1) translateY(0);
}

.ai-call-card > img {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(214, 168, 79, 0.4), 0 0 70px rgba(8, 153, 223, 0.28);
  animation: aiGlowBreathe 3.4s var(--ease) infinite;
}

.ai-call-card h2 {
  margin: 0;
  font-size: clamp(2rem, 8vw, 3rem);
}

.ai-call-card p:not(.eyebrow) {
  max-width: 360px;
  margin: 0;
  color: rgba(226, 238, 250, 0.72);
  font-weight: 800;
}

.ai-waveform {
  height: 86px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ai-waveform span {
  width: 8px;
  height: 26px;
  border-radius: 999px;
  background: linear-gradient(180deg, #fff2c8, #37c8ff);
  animation: aiWave 1.35s ease-in-out infinite;
  opacity: 0.54;
}

.ai-waveform span:nth-child(2) { animation-delay: 80ms; }
.ai-waveform span:nth-child(3) { animation-delay: 160ms; }
.ai-waveform span:nth-child(4) { animation-delay: 240ms; }
.ai-waveform span:nth-child(5) { animation-delay: 320ms; }
.ai-waveform span:nth-child(6) { animation-delay: 400ms; }

.ai-call-screen[data-call-state="listening"] .ai-waveform span,
.ai-call-screen[data-call-state="speaking"] .ai-waveform span {
  animation-duration: 780ms;
  opacity: 1;
}

.ai-call-screen[data-call-state="thinking"] .ai-waveform span {
  animation-duration: 1.8s;
  background: linear-gradient(180deg, #fff2c8, #8fa2ff);
}

.ai-call-controls {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.ai-call-controls button {
  min-height: 46px;
  padding: 0 18px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  color: white;
  background: rgba(255, 255, 255, 0.08);
  font-weight: 900;
}

.ai-call-controls button.listening {
  color: #07145f;
  background: linear-gradient(135deg, #fff4c8, #40d8ff);
  box-shadow: 0 0 0 6px rgba(64, 216, 255, 0.12), 0 18px 34px rgba(7, 20, 95, 0.18);
}

.ai-call-controls .end {
  color: white;
  background: linear-gradient(135deg, #e74c4c, #b91c1c);
}

@keyframes aiWave {
  0%, 100% { height: 24px; opacity: 0.55; }
  50% { height: 78px; opacity: 1; }
}

@keyframes aiMessageIn {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes aiTyping {
  0%, 80%, 100% {
    transform: translateY(0);
    opacity: 0.45;
  }
  40% {
    transform: translateY(-4px);
    opacity: 1;
  }
}

/* Clean Baihaqi AI chat redesign */
.ai-panel {
  padding: calc(env(safe-area-inset-top, 0px) + 12px) 12px calc(env(safe-area-inset-bottom, 0px) + 12px);
  background: rgba(15, 23, 42, 0.38);
}

.ai-panel-card {
  width: min(430px, 92vw);
  height: min(78vh, 760px);
  max-height: 78vh;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 26px;
  background: linear-gradient(180deg, rgba(250, 252, 255, 0.98), rgba(255, 255, 255, 0.96));
  box-shadow: 0 30px 100px rgba(15, 23, 42, 0.26);
}

.ai-panel-head {
  padding: 14px 14px 12px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  background:
    radial-gradient(circle at 90% 0%, rgba(214, 168, 79, 0.16), transparent 30%),
    linear-gradient(135deg, rgba(116, 126, 184, 0.98), rgba(105, 116, 170, 0.96));
}

.ai-title-lockup img {
  width: 52px;
  height: 52px;
  border: 2px solid rgba(255, 255, 255, 0.78);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.18);
}

.ai-panel-head .eyebrow {
  display: none;
}

.ai-panel-head h2 {
  font-size: 1.16rem;
  color: white;
}

.ai-panel-head p:not(.eyebrow) {
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.84rem;
}

.ai-panel-head .icon-button {
  width: 42px;
  height: 42px;
  color: #07124f;
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(255, 255, 255, 0.7);
}

.ai-quick-actions {
  justify-content: flex-end;
  padding: 12px 16px 0;
  background: #ffffff;
}

.ai-quick-actions button {
  min-height: 42px;
  padding: 0 18px;
  color: #07145f;
  background: #f2eefb;
  border: 0;
  border-radius: 16px;
  font-size: 1rem;
  font-weight: 850;
}

.ai-chat-log {
  gap: 16px;
  padding: 22px 18px;
  background: #ffffff;
}

.ai-message > img {
  display: none;
}

.ai-message {
  gap: 0;
}

.ai-message > div {
  max-width: 86%;
  padding: 13px 15px;
  border: 0;
  border-radius: 20px;
  color: #07145f;
  background: #f4f7fb;
  box-shadow: none;
}

.ai-message.assistant > div {
  background: #ffffff;
}

.ai-message.user > div {
  background: #f2eefb;
}

.ai-message span {
  display: none;
}

.ai-message p {
  color: #07145f;
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.55;
}

.ai-message.typing > div {
  background: #f4f7fb;
}

.ai-composer {
  padding: 12px 16px 16px;
  border-top: 0;
  background: #ffffff;
}

.ai-composer-bar {
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 8px;
  padding: 9px;
  border: 0;
  border-radius: 18px;
  background: #e8ebf1;
}

.ai-tool-button {
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 14px;
  color: #07145f;
  background: transparent;
  box-shadow: none;
  font-size: 1.05rem;
}

.ai-tool-button.call {
  color: white;
  background: #0674d8;
  border-radius: 999px;
}

.ai-composer textarea {
  min-height: 38px;
  padding: 9px 8px;
  border: 0;
  border-radius: 12px;
  color: #07145f;
  background: transparent;
  font-size: 1rem;
  font-weight: 700;
}

.ai-composer textarea::placeholder {
  color: #7f88ad;
}

.ai-composer .primary-button {
  width: 38px;
  min-width: 38px;
  min-height: 38px;
  border-radius: 999px;
  background: #07145f;
  box-shadow: none;
}

.ai-attachment-preview {
  padding: 0 0 6px;
}

.ai-attachment-chip {
  color: #07145f;
  background: #f4f7fb;
  border-color: rgba(7, 20, 95, 0.08);
}

.ai-message-attachments img {
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12);
}

.ai-call-screen {
  background: rgba(15, 23, 42, 0.44);
}

.ai-call-card {
  width: min(430px, 92vw);
  min-height: auto;
  padding: 34px 22px 24px;
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(245, 248, 252, 0.96));
  color: #07145f;
}

.ai-call-card p:not(.eyebrow) {
  color: #64708d;
}

.ai-call-card h2 {
  color: #07145f;
  font-size: clamp(1.55rem, 6vw, 2.25rem);
}

@media (max-width: 860px) {
  .platform-hero {
    min-height: 174px;
  }

  .platform-tagline {
    font-size: 0.98rem;
  }

  .hero-mantra {
    font-size: 0.74rem;
  }

  .bottom-nav {
    grid-template-columns: repeat(5, 1fr);
  }

  .bottom-nav-item {
    font-size: 0.62rem;
  }

  .bottom-nav-item span {
    font-size: 1rem;
  }

  .ai-floating-button {
    left: auto !important;
    top: auto !important;
    right: 12px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 84px);
    width: 68px;
    height: 68px;
  }

  .ai-floating-button img {
    width: 58px;
    height: 58px;
  }

  .ai-bubble {
    right: 60px;
    min-width: 106px;
    padding: 6px 9px;
    font-size: 0.66rem;
  }

  .ai-panel-card {
    width: 92vw;
    max-height: 78vh;
    height: 78vh;
    border-radius: 24px;
  }

  .ai-panel-head {
    flex-wrap: wrap;
    padding: 10px 11px;
    gap: 8px;
  }

  .ai-title-lockup img {
    width: 36px;
    height: 36px;
  }

  .ai-panel-head .eyebrow {
    display: none;
  }

  .ai-panel-head p:not(.eyebrow) {
    font-size: 0.66rem;
  }

  .ai-quick-actions,
  .ai-followups {
    padding: 8px 11px;
    gap: 7px;
  }

  .ai-quick-actions button,
  .ai-followups button {
    min-height: 29px;
    font-size: 0.68rem;
  }

  .ai-chat-log {
    padding-inline: 12px;
    gap: 9px;
  }

  .ai-message > div {
    max-width: 86%;
  }

  .ai-composer {
    padding-inline: 12px;
    padding-bottom: 12px;
  }

  .ai-composer-bar {
    grid-template-columns: auto auto auto minmax(0, 1fr) auto auto;
    gap: 6px;
    border-radius: 18px;
  }

  .ai-tool-button {
    width: 31px;
    height: 31px;
    border-radius: 12px;
    font-size: 0.82rem;
  }

  .ai-composer textarea {
    min-height: 34px;
    padding: 9px 10px;
    font-size: 0.82rem;
  }

  .ai-composer .primary-button {
    width: 32px;
    min-width: 32px;
    min-height: 32px;
  }

  .ai-composer-meta {
    align-items: flex-start;
    font-size: 0.6rem;
  }
}

/* Smart floating AI, compact review, and full deck reader polish */
.ai-floating-button {
  touch-action: manipulation;
  user-select: none;
}

.deck-viewer-card {
  grid-template-rows: auto auto minmax(0, 1fr);
}

.deck-viewer-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.deck-viewer-state {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  color: var(--muted);
  background: rgba(8, 153, 223, 0.06);
  font-size: 0.78rem;
  font-weight: 850;
}

.deck-viewer-state img {
  width: 24px;
  height: 24px;
  object-fit: cover;
  object-position: center 62%;
  border-radius: 8px;
  box-shadow: 0 8px 18px rgba(23, 105, 255, 0.16);
  animation: logoFloat 1.8s var(--ease) infinite alternate;
}

.deck-viewer-state.error {
  color: #9a3412;
  background: rgba(217, 119, 6, 0.1);
}

.deck-page-indicator {
  display: inline-grid;
  place-items: center;
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.64);
  font-size: 0.76rem;
  font-weight: 900;
}

.review-section {
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.76);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 16px 46px rgba(16, 24, 40, 0.08);
  backdrop-filter: blur(20px);
}

.review-section .section-title {
  margin-bottom: 0;
}

.review-section p {
  margin: 0;
  color: var(--muted);
  font-weight: 700;
}

.review-compact-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.wrong-review-modal {
  position: fixed;
  inset: 0;
  z-index: 22500;
  display: grid;
  place-items: center;
  padding: calc(env(safe-area-inset-top, 0px) + 12px) 12px calc(env(safe-area-inset-bottom, 0px) + 12px);
  background: rgba(248, 251, 255, 0.62);
  backdrop-filter: blur(22px);
  opacity: 0;
  transition: opacity 220ms var(--ease);
}

.wrong-review-modal.active {
  opacity: 1;
}

.wrong-review-card {
  width: min(920px, 100%);
  max-height: min(820px, calc(100dvh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)));
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 34px 100px rgba(16, 24, 40, 0.22);
  transform: translateY(14px) scale(0.98);
  transition: transform 220ms var(--ease);
}

.wrong-review-modal.active .wrong-review-card {
  transform: translateY(0) scale(1);
}

.wrong-review-head,
.wrong-review-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(16, 24, 40, 0.08);
}

.wrong-review-head {
  align-items: center;
}

.wrong-review-head h2 {
  margin-bottom: 2px;
  font-size: clamp(1.15rem, 3vw, 1.7rem);
}

.wrong-review-head p:not(.eyebrow) {
  margin: 0;
  color: var(--muted);
  font-weight: 750;
}

.wrong-review-toolbar {
  justify-content: flex-end;
  padding-block: 10px;
}

.wrong-review-list {
  display: grid;
  gap: 10px;
  overflow: auto;
  padding: 14px;
}

.wrong-review-list .review-card {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(248, 250, 252, 0.8);
  box-shadow: none;
}

.wrong-review-list .review-card summary {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 14px;
  cursor: pointer;
  font-weight: 850;
}

.wrong-review-list .review-card summary span {
  min-width: 0;
}

.wrong-review-list .review-card summary em {
  color: #0899df;
  font-style: normal;
}

.review-card-body {
  display: grid;
  gap: 8px;
  padding: 0 14px 14px;
  color: var(--muted);
}

@media (max-width: 860px) {
  .deck-viewer-actions {
    gap: 6px;
  }

  .deck-page-indicator {
    min-height: 32px;
    padding: 0 8px;
    font-size: 0.68rem;
  }

  .wrong-review-card {
    max-height: calc(100dvh - 16px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    border-radius: 22px;
  }

  .wrong-review-head,
  .wrong-review-toolbar {
    padding: 11px 12px;
  }

  .wrong-review-list {
    padding: 10px;
  }
}

/* Baihaqi AI premium refinement */
.ai-panel {
  background:
    radial-gradient(circle at 50% 10%, rgba(42, 177, 255, 0.18), transparent 30%),
    radial-gradient(circle at 82% 18%, rgba(214, 168, 79, 0.18), transparent 24%),
    rgba(6, 13, 28, 0.46);
  backdrop-filter: blur(26px);
}

.ai-panel-card {
  border: 1px solid rgba(255, 255, 255, 0.76);
  background:
    linear-gradient(180deg, rgba(250, 253, 255, 0.99), rgba(255, 255, 255, 0.98)),
    radial-gradient(circle at 70% 10%, rgba(42, 177, 255, 0.14), transparent 32%);
  box-shadow:
    0 34px 110px rgba(6, 13, 28, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.ai-panel-head {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 0%, rgba(58, 205, 255, 0.32), transparent 34%),
    radial-gradient(circle at 92% 12%, rgba(255, 218, 137, 0.28), transparent 28%),
    linear-gradient(135deg, #081238 0%, #172769 48%, #6876bd 100%);
}

.ai-panel-head::after {
  content: "";
  position: absolute;
  right: 68px;
  bottom: 14px;
  width: 122px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 225, 160, 0.78), rgba(48, 195, 255, 0.5), transparent);
  opacity: 0.86;
}

.ai-title-lockup {
  position: relative;
  z-index: 1;
}

.ai-head-actions {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-left: auto;
}

.ai-head-call {
  width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: 16px;
  color: white;
  background:
    radial-gradient(circle at 35% 22%, rgba(255, 255, 255, 0.86), transparent 14%),
    linear-gradient(135deg, rgba(23, 207, 255, 0.95), rgba(7, 20, 95, 0.92));
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.2),
    0 0 28px rgba(53, 199, 255, 0.34);
  cursor: pointer;
  transition: transform 170ms var(--ease), box-shadow 170ms var(--ease);
}

.ai-head-settings {
  width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.48);
  border-radius: 16px;
  color: #07145f;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.14);
  cursor: pointer;
  font-size: 0.98rem;
  transition: transform 170ms var(--ease), box-shadow 170ms var(--ease);
}

.ai-head-settings:hover,
.ai-head-settings:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.2);
}

.ai-head-call:hover,
.ai-head-call:focus-visible {
  transform: translateY(-1px) scale(1.03);
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.24),
    0 0 36px rgba(53, 199, 255, 0.48);
}

.ai-head-call:active {
  transform: scale(0.96);
}

.ai-head-call span {
  width: 21px;
  height: 21px;
  display: grid;
  place-items: center;
  color: white;
}

.ai-head-call svg,
.ai-tool-button.call svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: currentColor;
  filter: drop-shadow(0 2px 6px rgba(7, 20, 95, 0.28));
}

.ai-title-lockup img {
  background: rgba(255, 255, 255, 0.98);
  box-shadow:
    0 14px 36px rgba(0, 0, 0, 0.24),
    0 0 32px rgba(57, 202, 255, 0.22),
    0 0 0 5px rgba(255, 255, 255, 0.12);
}

.ai-panel-head h2 {
  letter-spacing: 0;
}

.ai-online-dot {
  box-shadow: 0 0 0 4px rgba(68, 255, 179, 0.12), 0 0 18px rgba(68, 255, 179, 0.72);
}

.ai-mode-badge {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  margin-left: 6px;
  padding: 0 8px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 999px;
  color: #fff7d6;
  background: rgba(255, 255, 255, 0.14);
  font-size: 0.62rem;
  font-weight: 950;
  vertical-align: middle;
}

.ai-quick-actions {
  border-bottom: 1px solid rgba(8, 18, 56, 0.05);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 255, 0.92));
  justify-content: flex-start;
  overflow-x: auto;
  scrollbar-width: none;
}

.ai-quick-actions::-webkit-scrollbar {
  display: none;
}

.ai-quick-actions button {
  border: 1px solid rgba(8, 18, 56, 0.08);
  color: #081459;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(238, 245, 255, 0.96)),
    radial-gradient(circle at 15% 10%, rgba(255, 213, 128, 0.24), transparent 30%);
  box-shadow: 0 10px 24px rgba(8, 18, 56, 0.08);
  white-space: nowrap;
}

.ai-chat-log {
  background:
    linear-gradient(180deg, #ffffff 0%, #fbfdff 100%),
    radial-gradient(circle at 16% 18%, rgba(33, 166, 242, 0.06), transparent 28%);
}

.ai-message {
  animation: aiMessageIn 180ms ease-out both;
}

.ai-message > div {
  border: 1px solid rgba(8, 18, 56, 0.05);
  background: rgba(247, 250, 254, 0.96);
}

.ai-message.assistant > div {
  border-color: rgba(214, 168, 79, 0.14);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(250, 253, 255, 0.96));
  box-shadow: 0 14px 34px rgba(8, 18, 56, 0.06);
}

.ai-message.user > div {
  border-color: rgba(8, 18, 56, 0.05);
  background: linear-gradient(135deg, #f2f4ff, #f7f0ff);
}

.ai-source-badge {
  width: fit-content;
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  margin: 0 0 7px;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 950;
  letter-spacing: 0.01em;
}

.ai-source-badge::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
}

.ai-source-badge.offline {
  color: #72510b;
  border: 1px solid rgba(214, 168, 79, 0.24);
  background: rgba(255, 244, 214, 0.72);
}

.ai-source-badge.offline::before {
  background: #d6a84f;
  box-shadow: 0 0 14px rgba(214, 168, 79, 0.72);
}

.ai-source-badge.knowledge {
  color: #047857;
  border: 1px solid rgba(16, 185, 129, 0.22);
  background: rgba(220, 252, 231, 0.78);
}

.ai-source-badge.knowledge::before {
  background: #10b981;
  box-shadow: 0 0 14px rgba(16, 185, 129, 0.68);
}

.ai-source-badge.gemini {
  color: #075985;
  border: 1px solid rgba(14, 165, 233, 0.2);
  background: rgba(224, 247, 255, 0.72);
}

.ai-source-badge.gemini::before {
  background: #22c7ff;
  box-shadow: 0 0 14px rgba(34, 199, 255, 0.72);
}

.ai-source-badge.lite,
.ai-source-badge.flash {
  color: #075985;
  border: 1px solid rgba(14, 165, 233, 0.2);
  background: rgba(224, 247, 255, 0.72);
}

.ai-source-badge.lite::before,
.ai-source-badge.flash::before {
  background: #22c7ff;
  box-shadow: 0 0 14px rgba(34, 199, 255, 0.72);
}

.ai-source-badge.pro {
  color: #4c1d95;
  border: 1px solid rgba(124, 58, 237, 0.2);
  background: rgba(243, 232, 255, 0.76);
}

.ai-source-badge.pro::before {
  background: #8b5cf6;
  box-shadow: 0 0 14px rgba(139, 92, 246, 0.66);
}

.ai-source-badge.live {
  color: #831843;
  border: 1px solid rgba(236, 72, 153, 0.2);
  background: rgba(252, 231, 243, 0.76);
}

.ai-source-badge.live::before {
  background: #ec4899;
  box-shadow: 0 0 14px rgba(236, 72, 153, 0.66);
}

.ai-source-badge.trusted {
  color: #0f3b63;
  border: 1px solid rgba(8, 145, 178, 0.2);
  background: rgba(207, 250, 254, 0.72);
}

.ai-source-badge.trusted::before {
  background: #06b6d4;
  box-shadow: 0 0 14px rgba(6, 182, 212, 0.66);
}

.ai-learning-card {
  display: grid;
  gap: 12px;
}

.ai-learning-hero {
  padding: 14px;
  border: 1px solid rgba(7, 20, 95, 0.08);
  border-radius: 20px;
  background:
    radial-gradient(circle at 0% 0%, rgba(34, 199, 255, 0.18), transparent 36%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(243, 250, 255, 0.82));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82), 0 16px 34px rgba(7, 20, 95, 0.06);
}

.ai-learning-kicker {
  margin: 0 0 6px;
  color: #64708d !important;
  font-size: 0.7rem !important;
  font-weight: 900 !important;
}

.ai-learning-hero h3 {
  margin: 0;
  color: #07145f;
  font-size: clamp(1.18rem, 5vw, 1.55rem);
  letter-spacing: 0;
}

.ai-learning-meta {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.ai-learning-meta span {
  display: inline-flex !important;
  min-height: 26px;
  align-items: center;
  padding: 0 9px;
  border: 1px solid rgba(7, 20, 95, 0.08);
  border-radius: 999px;
  color: #07145f !important;
  background: rgba(255, 255, 255, 0.72);
  font-size: 0.64rem !important;
  font-weight: 950 !important;
}

.ai-learning-summary {
  margin: 0;
  color: #233052 !important;
  font-size: 0.94rem !important;
  line-height: 1.58 !important;
}

.ai-learning-sections {
  display: grid;
  gap: 8px;
}

.ai-learning-section {
  overflow: hidden;
  border: 1px solid rgba(7, 20, 95, 0.08);
  border-radius: 16px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.78), rgba(240, 247, 255, 0.7));
  box-shadow: 0 10px 24px rgba(7, 20, 95, 0.045);
  animation: aiCardReveal 260ms ease-out both;
  animation-delay: var(--delay, 0ms);
}

.ai-learning-section summary {
  min-height: 46px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 13px;
  color: #07145f;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 950;
  list-style: none;
}

.ai-learning-section summary::-webkit-details-marker {
  display: none;
}

.ai-learning-section summary::after {
  content: "+";
  margin-left: auto;
  color: #0a8edf;
  font-size: 1.1rem;
}

.ai-learning-section[open] summary::after {
  content: "−";
}

.ai-learning-section summary span {
  display: inline-grid !important;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 11px;
  background: rgba(224, 247, 255, 0.82);
  font-size: 0.95rem !important;
}

.ai-learning-section p {
  margin: 0;
  padding: 0 14px 14px;
  color: #34415f !important;
  font-size: 0.86rem !important;
  line-height: 1.55 !important;
}

.ai-sources {
  display: grid;
  gap: 7px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(7, 20, 95, 0.08);
}

.ai-sources strong {
  color: rgba(7, 20, 95, 0.62);
  font-size: 0.68rem;
  font-weight: 950;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.ai-sources a {
  display: grid;
  gap: 2px;
  padding: 9px 10px;
  border: 1px solid rgba(8, 145, 178, 0.12);
  border-radius: 14px;
  color: #123154;
  text-decoration: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.84), rgba(232, 250, 255, 0.56));
}

.ai-sources a span {
  color: #0784a6;
  font-size: 0.68rem !important;
  font-weight: 950;
}

.ai-greeting-card {
  display: grid;
  gap: 13px;
  padding: 16px;
  border: 1px solid rgba(7, 20, 95, 0.08);
  border-radius: 22px;
  background:
    radial-gradient(circle at 8% 0%, rgba(34, 199, 255, 0.2), transparent 34%),
    radial-gradient(circle at 96% 0%, rgba(214, 168, 79, 0.22), transparent 30%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.88), rgba(244, 250, 255, 0.78));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 18px 42px rgba(7, 20, 95, 0.08);
}

.ai-greeting-eyebrow {
  margin: 0 !important;
  color: #64708d !important;
  font-size: 0.72rem !important;
  font-weight: 950 !important;
}

.ai-greeting-card h3 {
  margin: 0;
  color: #07145f;
  font-size: clamp(1.06rem, 4.8vw, 1.42rem);
  letter-spacing: 0;
  line-height: 1.22;
}

.ai-greeting-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.ai-greeting-stats span {
  display: grid !important;
  gap: 3px;
  padding: 10px;
  border: 1px solid rgba(7, 20, 95, 0.07);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.72);
}

.ai-greeting-stats em {
  color: #64708d;
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 900;
}

.ai-greeting-stats strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: #07145f;
  font-size: 0.86rem;
  font-weight: 950;
}

.ai-greeting-actions {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}

.ai-greeting-actions::-webkit-scrollbar {
  display: none;
}

.ai-greeting-actions button {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(7, 20, 95, 0.08);
  border-radius: 999px;
  color: #07145f;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 10px 22px rgba(7, 20, 95, 0.06);
  font-size: 0.72rem;
  font-weight: 950;
  white-space: nowrap;
}

@keyframes aiCardReveal {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.ai-followups {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 0 16px 10px;
  background: rgba(255, 255, 255, 0.58);
  scrollbar-width: none;
}

.ai-followups::-webkit-scrollbar {
  display: none;
}

.ai-followups.hidden {
  display: none;
}

.ai-followups button {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(7, 20, 95, 0.08);
  border-radius: 999px;
  color: #07145f;
  background: rgba(255, 255, 255, 0.76);
  box-shadow: 0 10px 22px rgba(7, 20, 95, 0.06);
  font-size: 0.72rem;
  font-weight: 900;
  white-space: nowrap;
}

.ai-message.typing p {
  display: inline-flex;
  gap: 5px;
  min-height: 20px;
  align-items: center;
}

.ai-message.typing i {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #6876bd;
  animation: aiTyping 1s ease-in-out infinite;
}

.ai-message.typing i:nth-child(2) {
  animation-delay: 140ms;
}

.ai-message.typing i:nth-child(3) {
  animation-delay: 280ms;
}

.ai-composer {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.84), #ffffff);
}

.ai-composer-bar {
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  border: 1px solid rgba(8, 18, 56, 0.08);
  background: rgba(239, 244, 251, 0.94);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.88),
    0 12px 28px rgba(8, 18, 56, 0.07);
}

.ai-tool-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 160ms var(--ease), background 160ms var(--ease), box-shadow 160ms var(--ease);
}

.ai-tool-button:hover,
.ai-tool-button:focus-visible {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.72);
}

.ai-tool-button:active {
  transform: scale(0.96);
}

.ai-attach-button {
  width: auto;
  min-width: 78px;
  padding: 0 10px;
  gap: 5px;
  border: 1px solid rgba(8, 18, 56, 0.07);
  background: rgba(255, 255, 255, 0.62);
}

.ai-attach-button span {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 8px;
  color: white;
  background: linear-gradient(135deg, #07145f, #0c91dc);
  font-size: 0.95rem;
  line-height: 1;
}

.ai-attach-button small {
  color: #07145f;
  font-size: 0.68rem;
  font-weight: 900;
  white-space: nowrap;
}

.ai-tool-button.call {
  color: white;
  background: linear-gradient(135deg, #07145f, #0479dc 58%, #35c7ff);
  box-shadow: 0 10px 22px rgba(4, 121, 220, 0.28);
}

.ai-tool-button.call span {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
}

.ai-composer .primary-button {
  background: linear-gradient(135deg, #07145f, #0b8ee0);
  box-shadow: 0 10px 22px rgba(8, 18, 56, 0.2);
}

.ai-call-card {
  border: 1px solid rgba(255, 255, 255, 0.8);
  background:
    radial-gradient(circle at 50% -8%, rgba(48, 205, 255, 0.26), transparent 34%),
    radial-gradient(circle at 88% 16%, rgba(255, 218, 138, 0.24), transparent 26%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(246, 250, 255, 0.98));
  box-shadow:
    0 38px 130px rgba(6, 13, 28, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.94);
}

.ai-call-orb {
  position: relative;
  width: 150px;
  height: 150px;
  display: grid;
  place-items: center;
}

.ai-call-halo {
  position: absolute;
  inset: -12px;
  border-radius: 999px;
  background:
    conic-gradient(from 130deg, rgba(53, 199, 255, 0.08), rgba(255, 211, 117, 0.64), rgba(53, 199, 255, 0.46), rgba(53, 199, 255, 0.08));
  filter: blur(0.2px);
  animation: aiHaloSpin 9s linear infinite;
}

.ai-call-orb::after {
  content: "";
  position: absolute;
  inset: -26px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(53, 199, 255, 0.18), transparent 62%);
  animation: aiBreath 2.8s ease-in-out infinite;
}

.ai-call-card img,
.ai-call-orb img {
  position: relative;
  z-index: 1;
  width: 132px;
  height: 132px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.88);
  box-shadow: 0 0 42px rgba(40, 192, 255, 0.22);
}

.ai-call-badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.ai-call-badges span {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  padding: 0 11px;
  border: 1px solid rgba(7, 20, 95, 0.08);
  border-radius: 999px;
  color: #07145f;
  background: rgba(255, 255, 255, 0.68);
  box-shadow: 0 10px 24px rgba(7, 20, 95, 0.06);
  font-size: 0.7rem;
  font-weight: 900;
}

.ai-call-controls button:not(.end) {
  color: white;
  background: linear-gradient(135deg, #07145f, #087cdf 62%, #35c7ff);
  box-shadow: 0 16px 34px rgba(8, 124, 223, 0.26);
}

.ai-call-controls button:not(.end)::before {
  content: "";
  width: 8px;
  height: 8px;
  margin-right: 8px;
  display: inline-block;
  border-radius: 999px;
  background: #44ffb3;
  box-shadow: 0 0 16px rgba(68, 255, 179, 0.78);
}

@keyframes aiHaloSpin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes aiBreath {
  0%, 100% {
    opacity: 0.42;
    transform: scale(0.96);
  }
  50% {
    opacity: 0.86;
    transform: scale(1.04);
  }
}

@media (max-width: 860px) {
  .ai-panel {
    padding: calc(env(safe-area-inset-top, 0px) + 10px) 10px calc(env(safe-area-inset-bottom, 0px) + 10px);
  }

  .ai-panel-card {
    width: 92vw;
    height: min(78vh, 680px);
    max-height: 78vh;
    border-radius: 26px;
  }

  .ai-panel-head {
    flex-wrap: nowrap;
    padding: 12px;
  }

  .ai-title-lockup img {
    width: 44px;
    height: 44px;
  }

  .ai-panel-head h2 {
    font-size: 1.04rem;
  }

  .ai-panel-head p:not(.eyebrow) {
    font-size: 0.72rem;
  }

  .ai-panel-head .icon-button {
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
  }

  .ai-head-actions {
    gap: 7px;
  }

  .ai-head-call {
    width: 38px;
    height: 38px;
    border-radius: 14px;
  }

  .ai-head-settings {
    width: 38px;
    height: 38px;
    border-radius: 14px;
    font-size: 0.88rem;
  }

  .ai-quick-actions {
    padding: 9px 12px 0;
  }

  .ai-quick-actions button {
    min-height: 34px;
    padding: 0 13px;
    border-radius: 14px;
    font-size: 0.78rem;
  }

  .ai-chat-log {
    padding: 16px 12px;
  }

  .ai-message p {
    font-size: 0.9rem;
    line-height: 1.48;
  }

  .ai-composer {
    padding: 10px 12px 12px;
  }

  .ai-composer-bar {
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    gap: 7px;
    padding: 8px;
  }

  .ai-attach-button {
    min-width: 44px;
    width: 44px;
    padding: 0;
  }

  .ai-attach-button small {
    display: none;
  }

  .ai-tool-button {
    width: 36px;
    height: 36px;
  }

  .ai-composer textarea {
    min-height: 36px;
    padding: 8px 6px;
    font-size: 0.9rem;
  }

  .ai-composer .primary-button {
    width: 36px;
    min-width: 36px;
    min-height: 36px;
  }

  .ai-call-card {
    width: min(92vw, 430px);
    padding: 32px 18px 22px;
  }

  .ai-call-orb {
    width: 136px;
    height: 136px;
  }

  .ai-call-card img,
  .ai-call-orb img {
    width: 118px;
    height: 118px;
  }
}

/* Ultra premium liquid-glass Baihaqi AI layer */
.ai-panel {
  background:
    radial-gradient(circle at 18% 8%, rgba(255, 255, 255, 0.32), transparent 20%),
    radial-gradient(circle at 50% 10%, rgba(42, 177, 255, 0.24), transparent 30%),
    radial-gradient(circle at 82% 18%, rgba(214, 168, 79, 0.24), transparent 24%),
    linear-gradient(135deg, rgba(4, 11, 31, 0.6), rgba(16, 29, 72, 0.48));
  backdrop-filter: blur(34px) saturate(1.35);
}

.ai-panel-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.84);
  background:
    linear-gradient(150deg, rgba(255, 255, 255, 0.9), rgba(244, 250, 255, 0.78)),
    radial-gradient(circle at 16% 0%, rgba(255, 255, 255, 0.95), transparent 30%),
    radial-gradient(circle at 82% 10%, rgba(42, 177, 255, 0.18), transparent 34%);
  backdrop-filter: blur(34px) saturate(1.45);
  box-shadow:
    0 42px 130px rgba(6, 13, 28, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.48) inset,
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.ai-panel-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.55), transparent 22%, transparent 70%, rgba(84, 205, 255, 0.18)),
    radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.38), transparent 18%);
  opacity: 0.9;
}

.ai-panel-head,
.ai-quick-actions,
.ai-chat-log,
.ai-composer {
  position: relative;
  z-index: 1;
}

.ai-panel-head {
  background:
    radial-gradient(circle at 18% 0%, rgba(58, 205, 255, 0.36), transparent 34%),
    radial-gradient(circle at 92% 12%, rgba(255, 218, 137, 0.3), transparent 28%),
    linear-gradient(135deg, rgba(8, 18, 56, 0.96), rgba(23, 39, 105, 0.92) 52%, rgba(104, 118, 189, 0.88));
  backdrop-filter: blur(24px) saturate(1.4);
}

.ai-chat-log {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(251, 253, 255, 0.76)),
    radial-gradient(circle at 16% 18%, rgba(33, 166, 242, 0.08), transparent 28%);
  backdrop-filter: blur(18px);
}

.ai-message.assistant > div {
  border: 1px solid rgba(214, 168, 79, 0.14);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(245, 251, 255, 0.82));
  backdrop-filter: blur(22px);
  box-shadow:
    0 14px 34px rgba(8, 18, 56, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.ai-message.user > div {
  background: linear-gradient(135deg, rgba(242, 244, 255, 0.94), rgba(247, 240, 255, 0.88));
  backdrop-filter: blur(18px);
}

.ai-message.offline > div {
  border-color: rgba(214, 168, 79, 0.28);
  background:
    radial-gradient(circle at 0% 0%, rgba(255, 228, 168, 0.3), transparent 32%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(248, 252, 255, 0.88));
}

.ai-composer {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.46), rgba(255, 255, 255, 0.8));
  backdrop-filter: blur(22px);
}

.ai-composer-bar {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.76), rgba(232, 240, 250, 0.74));
  backdrop-filter: blur(24px) saturate(1.35);
}

.ai-call-screen {
  background:
    radial-gradient(circle at 50% 10%, rgba(42, 177, 255, 0.24), transparent 34%),
    linear-gradient(135deg, rgba(5, 12, 32, 0.68), rgba(18, 29, 74, 0.52));
  backdrop-filter: blur(32px) saturate(1.35);
}

.ai-call-card {
  background:
    radial-gradient(circle at 50% -8%, rgba(48, 205, 255, 0.32), transparent 34%),
    radial-gradient(circle at 88% 16%, rgba(255, 218, 138, 0.26), transparent 26%),
    linear-gradient(160deg, rgba(255, 255, 255, 0.92), rgba(246, 250, 255, 0.82));
  backdrop-filter: blur(30px) saturate(1.35);
}

/* Baihaqi AI flagship concept redesign */
.ai-panel {
  align-items: center;
  padding: max(14px, env(safe-area-inset-top, 0px)) 12px max(14px, env(safe-area-inset-bottom, 0px));
  background:
    radial-gradient(circle at 50% 0%, rgba(70, 183, 255, 0.16), transparent 38%),
    linear-gradient(135deg, rgba(4, 19, 38, 0.72), rgba(5, 14, 30, 0.58));
}

.ai-panel-card {
  width: min(980px, 96vw);
  height: min(88dvh, 930px);
  max-height: min(88dvh, 930px);
  grid-template-rows: auto auto minmax(0, auto) minmax(170px, 1fr) auto auto;
  border-radius: 32px;
  border: 1px solid rgba(255, 255, 255, 0.82);
  background:
    radial-gradient(circle at 58% 6%, rgba(249, 218, 151, 0.28), transparent 32%),
    radial-gradient(circle at 86% 9%, rgba(134, 219, 255, 0.25), transparent 31%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(242, 249, 255, 0.92));
  box-shadow:
    0 42px 120px rgba(2, 10, 28, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  color: #06164d;
  transform: translateY(18px) scale(0.97);
}

.ai-panel.active .ai-panel-card {
  transform: translateY(0) scale(1);
}

.ai-panel-card::before {
  opacity: 0.55;
  background:
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.48), transparent),
    radial-gradient(circle at 50% 32%, rgba(214, 168, 79, 0.16), transparent 29%);
}

.ai-panel-head {
  min-height: 76px;
  padding: 16px 22px 12px;
  border: 0;
  background: transparent;
}

.ai-title-lockup img {
  width: 42px;
  height: 42px;
}

.ai-panel-head .eyebrow,
.ai-panel-head p:not(.eyebrow) {
  color: rgba(6, 22, 77, 0.58);
}

.ai-panel-head h2 {
  color: #06164d;
  font-size: clamp(1.4rem, 3vw, 2.2rem);
}

.ai-head-actions .icon-button,
.ai-head-settings,
.ai-head-call {
  border: 1px solid rgba(8, 18, 56, 0.08);
  color: #06164d;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 14px 34px rgba(8, 18, 56, 0.1);
}

.ai-quick-actions {
  padding: 0 22px 10px;
}

.ai-quick-actions button {
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid rgba(8, 18, 56, 0.08);
  color: #06164d;
  background: rgba(255, 255, 255, 0.76);
  box-shadow: 0 12px 30px rgba(8, 18, 56, 0.07);
}

.ai-quick-actions button.active {
  background: #fff;
  box-shadow: 0 16px 36px rgba(8, 18, 56, 0.12);
}

.ai-hero-console {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(210px, 0.85fr) minmax(220px, 1fr);
  grid-template-areas:
    "visual greeting"
    "visual progress"
    "actions actions"
    "suggest suggest";
  gap: 14px;
  margin: 0 22px 12px;
  padding: 18px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-radius: 28px;
  background:
    radial-gradient(circle at 42% 18%, rgba(214, 168, 79, 0.2), transparent 34%),
    radial-gradient(circle at 86% 4%, rgba(61, 197, 255, 0.18), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.7), rgba(247, 251, 255, 0.5));
  box-shadow: 0 22px 70px rgba(8, 18, 56, 0.12);
}

.ai-hero-visual {
  grid-area: visual;
  position: relative;
  min-height: 300px;
  display: grid;
  place-items: center;
}

.ai-brand-mark {
  position: absolute;
  top: 6px;
  left: 6px;
  color: #23345e;
  font-size: 0.76rem;
  font-weight: 950;
  letter-spacing: 0.16em;
}

.ai-brand-mark::before {
  content: "M";
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-right: 10px;
  border-radius: 10px;
  color: #06164d;
  background: linear-gradient(135deg, #fff8dc, #d6a84f);
}

.ai-hero-visual img {
  position: relative;
  z-index: 1;
  width: min(310px, 86%);
  filter: drop-shadow(0 30px 46px rgba(8, 18, 56, 0.24));
  animation: aiLogoFloat 5.8s ease-in-out infinite;
}

.ai-hero-ring {
  position: absolute;
  inset: 36px 10px 8px;
  border-radius: 999px;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.1) 52%, transparent 53%),
    conic-gradient(from 220deg, transparent 0deg, rgba(214, 168, 79, 0.8) 72deg, rgba(56, 189, 248, 0.5) 132deg, transparent 210deg);
  filter: blur(0.2px);
  opacity: 0.72;
}

.ai-hero-greeting {
  grid-area: greeting;
  align-self: center;
  display: grid;
  gap: 8px;
  padding: 18px;
  border: 1px solid rgba(8, 18, 56, 0.06);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.76);
  box-shadow: 0 18px 45px rgba(8, 18, 56, 0.08);
}

.ai-hero-greeting .eyebrow {
  margin: 0;
  color: rgba(6, 22, 77, 0.54);
  font-size: 0.7rem;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.ai-hero-greeting h3 {
  margin: 0;
  color: #06164d;
  font-size: clamp(1.35rem, 3vw, 2rem);
}

.ai-hero-greeting p:not(.eyebrow) {
  margin: 0;
  max-width: 310px;
  color: #465574;
  font-size: 0.94rem;
  font-weight: 760;
  line-height: 1.45;
}

.ai-status-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ai-status-row span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  min-height: 30px;
  padding: 0 11px;
  border: 1px solid rgba(8, 18, 56, 0.07);
  border-radius: 999px;
  color: #047857;
  background: rgba(240, 253, 250, 0.82);
  font-size: 0.76rem;
  font-weight: 950;
}

.ai-status-row i {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #10b981;
  box-shadow: 0 0 14px rgba(16, 185, 129, 0.7);
}

.ai-progress-grid {
  grid-area: progress;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  align-self: end;
}

.ai-progress-card {
  min-height: 106px;
  display: grid;
  align-content: center;
  gap: 6px;
  padding: 12px;
  border: 1px solid rgba(8, 18, 56, 0.06);
  border-radius: 18px;
  text-align: center;
  background: rgba(255, 255, 255, 0.74);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 14px 34px rgba(8, 18, 56, 0.07);
}

.ai-progress-card span {
  color: rgba(6, 22, 77, 0.58);
  font-size: 0.66rem;
  font-weight: 950;
  text-transform: uppercase;
}

.ai-progress-card strong {
  color: #06164d;
  font-size: clamp(1rem, 2.4vw, 1.65rem);
  line-height: 1;
}

.ai-progress-card em {
  color: #465574;
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 800;
}

.ai-progress-card.score strong {
  position: relative;
  width: 72px;
  height: 72px;
  display: inline-grid;
  place-items: center;
  margin: 0 auto;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, white 55%, transparent 57%),
    conic-gradient(#d6a84f var(--score, 0deg), rgba(8, 18, 56, 0.09) 0deg);
}

.ai-progress-card.xp div {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(8, 18, 56, 0.1);
}

.ai-progress-card.xp i {
  display: block;
  width: 6%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #3148ff, #50d8ff);
  transition: width 400ms var(--ease);
}

.ai-primary-actions {
  grid-area: actions;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.ai-primary-actions button {
  min-height: 66px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 18px;
  color: white;
  background: linear-gradient(135deg, #07145f, #0e2a85);
  box-shadow: 0 16px 34px rgba(7, 20, 95, 0.22);
  font-size: 0.94rem;
  font-weight: 950;
  text-align: left;
  cursor: pointer;
  transition: transform 180ms var(--ease), box-shadow 180ms var(--ease);
}

.ai-primary-actions button:nth-child(2) {
  background: linear-gradient(135deg, #3148ff, #087bd8);
}

.ai-primary-actions button:nth-child(3) {
  background: linear-gradient(135deg, #08798b, #16b7ca);
}

.ai-primary-actions button:nth-child(4) {
  background: linear-gradient(135deg, #5835b9, #7c3aed);
}

.ai-primary-actions button:active {
  transform: scale(0.98);
}

.ai-primary-actions span {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
}

.ai-suggestion-strip {
  grid-area: suggest;
  display: flex;
  align-items: center;
  gap: 9px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}

.ai-suggestion-strip::-webkit-scrollbar {
  display: none;
}

.ai-suggestion-strip > span {
  flex: 0 0 auto;
  color: #06164d;
  font-size: 0.7rem;
  font-weight: 950;
  text-transform: uppercase;
}

.ai-suggestion-strip button {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 0 13px;
  border: 1px solid rgba(8, 18, 56, 0.08);
  border-radius: 999px;
  color: #06164d;
  background: rgba(255, 255, 255, 0.68);
  font-size: 0.76rem;
  font-weight: 850;
}

.ai-chat-log {
  margin: 0 22px;
  border: 1px solid rgba(8, 18, 56, 0.06);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.58);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.ai-followups {
  padding: 9px 22px;
}

.ai-followups button {
  border-color: rgba(8, 18, 56, 0.08);
  color: #06164d;
  background: rgba(255, 255, 255, 0.72);
}

.ai-composer {
  padding: 10px 22px 18px;
  border: 0;
  background: transparent;
}

.ai-composer-bar {
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  min-height: 66px;
  padding: 10px;
  border-color: rgba(255, 255, 255, 0.85);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 18px 50px rgba(8, 18, 56, 0.12);
}

.ai-composer textarea {
  min-height: 42px;
  color: #06164d;
  border: 0;
  background: transparent;
}

.ai-composer textarea::placeholder {
  color: rgba(6, 22, 77, 0.44);
}

.ai-tool-button {
  color: #06164d;
  border-color: rgba(8, 18, 56, 0.08);
  background: rgba(246, 250, 255, 0.94);
}

.ai-attach-button small {
  display: none;
}

.ai-attach-button span {
  font-size: 1.2rem;
}

.ai-composer .primary-button {
  color: white;
  background: linear-gradient(135deg, #536dff, #7c62ff);
  box-shadow: 0 12px 28px rgba(83, 109, 255, 0.28);
}

@media (max-width: 760px) {
  .ai-panel {
    align-items: end;
    padding: 0 8px max(8px, env(safe-area-inset-bottom, 0px));
  }

  .ai-panel-card {
    width: min(96vw, 520px);
    height: min(88dvh, 840px);
    border-radius: 28px 28px 22px 22px;
    grid-template-rows: auto auto minmax(0, auto) minmax(150px, 1fr) auto auto;
  }

  .ai-panel-head {
    padding: 12px 14px 8px;
  }

  .ai-title-lockup img {
    width: 34px;
    height: 34px;
  }

  .ai-panel-head h2 {
    font-size: 1.18rem;
  }

  .ai-panel-head p:not(.eyebrow) {
    font-size: 0.64rem;
  }

  .ai-head-settings {
    display: none;
  }

  .ai-quick-actions {
    padding: 0 14px 8px;
  }

  .ai-quick-actions button {
    min-height: 36px;
    font-size: 0.7rem;
  }

  .ai-hero-console {
    grid-template-columns: 1fr;
    grid-template-areas:
      "visual"
      "greeting"
      "progress"
      "actions"
      "suggest";
    gap: 10px;
    margin: 0 14px 10px;
    padding: 12px;
    border-radius: 22px;
  }

  .ai-hero-visual {
    min-height: 170px;
  }

  .ai-brand-mark {
    font-size: 0.62rem;
  }

  .ai-brand-mark::before {
    width: 24px;
    height: 24px;
  }

  .ai-hero-visual img {
    width: min(190px, 72%);
  }

  .ai-hero-ring {
    inset: 18px 48px 0;
  }

  .ai-hero-greeting {
    padding: 13px;
    border-radius: 18px;
  }

  .ai-hero-greeting h3 {
    font-size: 1.18rem;
  }

  .ai-hero-greeting p:not(.eyebrow) {
    font-size: 0.82rem;
  }

  .ai-progress-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ai-progress-card {
    min-height: 78px;
    padding: 10px;
  }

  .ai-progress-card.score strong {
    width: 56px;
    height: 56px;
    font-size: 1.05rem;
  }

  .ai-primary-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .ai-primary-actions button {
    min-height: 52px;
    padding: 0 12px;
    border-radius: 16px;
    font-size: 0.8rem;
  }

  .ai-chat-log {
    margin: 0 14px;
  }

  .ai-followups {
    padding: 8px 14px;
  }

  .ai-composer {
    padding: 8px 14px 12px;
  }

.ai-composer-bar {
    min-height: 58px;
    border-radius: 20px;
  }
}

/* Baihaqi AI two-state UX: welcome first, compact chat after interaction */
.ai-panel.ai-welcome-mode .ai-chat-log,
.ai-panel.ai-welcome-mode .ai-followups {
  display: none;
}

.ai-panel.ai-chat-mode .ai-hero-console {
  display: none;
}

.ai-panel.ai-chat-mode .ai-panel-card {
  height: min(88dvh, 880px);
  grid-template-rows: 68px 44px minmax(0, 1fr) auto auto;
}

.ai-panel.ai-chat-mode .ai-panel-head {
  min-height: 68px;
  padding: 10px 16px 8px;
  border-bottom: 1px solid rgba(8, 18, 56, 0.06);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(245, 250, 255, 0.62));
  backdrop-filter: blur(22px);
}

.ai-panel.ai-chat-mode .ai-title-lockup {
  gap: 10px;
}

.ai-panel.ai-chat-mode .ai-title-lockup img {
  width: 36px;
  height: 36px;
}

.ai-panel.ai-chat-mode .ai-panel-head .eyebrow {
  display: none;
}

.ai-panel.ai-chat-mode .ai-panel-head h2 {
  font-size: 1rem;
  line-height: 1.05;
}

.ai-panel.ai-chat-mode .ai-panel-head p:not(.eyebrow) {
  font-size: 0.64rem;
  white-space: nowrap;
}

.ai-panel.ai-chat-mode .ai-head-call,
.ai-panel.ai-chat-mode .ai-head-settings,
.ai-panel.ai-chat-mode .ai-panel-head .icon-button {
  width: 36px;
  height: 36px;
  border-radius: 14px;
}

.ai-panel.ai-chat-mode .ai-quick-actions {
  align-items: center;
  padding: 4px 16px 6px;
  gap: 7px;
}

.ai-panel.ai-chat-mode .ai-quick-actions button {
  min-height: 32px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 0.68rem;
  box-shadow: none;
}

.ai-panel.ai-chat-mode .ai-chat-log {
  min-height: 0;
  margin: 0 16px;
  padding: 14px 12px;
  border-radius: 20px;
  overflow-y: auto;
}

.ai-panel.ai-chat-mode .ai-message {
  gap: 0;
}

.ai-panel.ai-chat-mode .ai-message.assistant > img,
.ai-panel.ai-chat-mode .ai-message.typing > img {
  display: none;
}

.ai-panel.ai-chat-mode .ai-message > div {
  max-width: min(92%, 680px);
}

.ai-panel.ai-chat-mode .ai-message.assistant > div {
  margin-right: auto;
}

.ai-panel.ai-chat-mode .ai-message.user > div {
  max-width: min(84%, 520px);
}

.ai-panel.ai-chat-mode .ai-followups {
  padding: 7px 16px 3px;
}

.ai-panel.ai-chat-mode .ai-composer {
  padding: 7px 16px 14px;
}

.ai-panel.ai-chat-mode .ai-composer-bar {
  min-height: 58px;
}

@media (max-width: 760px) {
  .ai-panel.ai-chat-mode .ai-panel-card {
    height: min(90dvh, 860px);
    grid-template-rows: 66px 42px minmax(0, 1fr) auto auto;
  }

  .ai-panel.ai-chat-mode .ai-panel-head {
    min-height: 66px;
    padding: 9px 12px 7px;
  }

  .ai-panel.ai-chat-mode .ai-title-lockup img {
    width: 32px;
    height: 32px;
  }

  .ai-panel.ai-chat-mode .ai-panel-head h2 {
    font-size: 0.96rem;
  }

  .ai-panel.ai-chat-mode .ai-panel-head p:not(.eyebrow) {
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .ai-panel.ai-chat-mode .ai-head-settings {
    display: none;
  }

  .ai-panel.ai-chat-mode .ai-chat-log {
    margin: 0 10px;
    padding: 12px 10px;
  }

  .ai-panel.ai-chat-mode .ai-message > div {
    max-width: 94%;
  }

  .ai-panel.ai-chat-mode .ai-message.user > div {
    max-width: 88%;
  }

  .ai-panel.ai-chat-mode .ai-followups {
    padding-inline: 10px;
  }

.ai-panel.ai-chat-mode .ai-composer {
    padding-inline: 10px;
  }
}

/* Premium MedDex UI polish: integrated robot, icons, nav, reader */
.ai-hero-visual {
  isolation: isolate;
  overflow: visible;
}

.ai-hero-visual::before {
  content: "";
  position: absolute;
  inset: 12% 5% 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 48% 42%, rgba(255, 255, 255, 0.92), transparent 29%),
    radial-gradient(circle at 50% 52%, rgba(76, 201, 255, 0.26), transparent 44%),
    radial-gradient(circle at 50% 58%, rgba(214, 168, 79, 0.3), transparent 54%);
  filter: blur(8px);
  z-index: 0;
  animation: aiBreathingGlow 5.4s ease-in-out infinite;
}

.ai-hero-visual img,
.ai-floating-button img,
.ai-call-orb img {
  border: 0 !important;
  background: transparent !important;
  object-fit: contain !important;
  box-shadow: none !important;
  mix-blend-mode: normal;
}

.ai-hero-visual img {
  transform-origin: center 70%;
  filter:
    drop-shadow(0 30px 54px rgba(5, 16, 42, 0.24))
    drop-shadow(0 0 28px rgba(61, 197, 255, 0.18));
}

@keyframes aiBreathingGlow {
  0%, 100% { opacity: 0.72; transform: scale(0.98); }
  50% { opacity: 1; transform: scale(1.03); }
}

.quick-icon,
.bottom-nav-item span,
.home-stats-grid article::before {
  display: inline-grid;
  place-items: center;
  border-radius: 16px;
  color: #06164d;
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.92), transparent 38%),
    linear-gradient(145deg, rgba(224, 247, 255, 0.92), rgba(255, 244, 214, 0.82));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 12px 28px rgba(8, 18, 56, 0.1);
}

.quick-icon {
  width: 46px;
  height: 46px;
  margin-bottom: 10px;
  font-size: 1.25rem;
}

.quick-access-card {
  border: 1px solid rgba(255, 255, 255, 0.78);
  background:
    radial-gradient(circle at 100% 0%, rgba(61, 197, 255, 0.12), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.86), rgba(247, 251, 255, 0.68));
  box-shadow: 0 18px 44px rgba(8, 18, 56, 0.08);
}

.home-stats-grid article {
  position: relative;
  padding-left: 58px;
}

.home-stats-grid article::before {
  content: "✦";
  position: absolute;
  left: 14px;
  top: 50%;
  width: 34px;
  height: 34px;
  transform: translateY(-50%);
  font-size: 0.95rem;
}

.home-stats-grid article:nth-child(1)::before { content: "XP"; font-size: 0.62rem; font-weight: 950; }
.home-stats-grid article:nth-child(2)::before { content: "♙"; }
.home-stats-grid article:nth-child(3)::before { content: "▣"; }
.home-stats-grid article:nth-child(4)::before { content: "♕"; }

.bottom-nav {
  left: 50%;
  right: auto;
  bottom: max(12px, env(safe-area-inset-bottom, 0px));
  width: min(520px, calc(100vw - 24px));
  transform: translateX(-50%);
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 28px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.86), rgba(239, 248, 255, 0.72));
  backdrop-filter: blur(28px) saturate(1.35);
  box-shadow:
    0 20px 60px rgba(8, 18, 56, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.bottom-nav-item {
  min-height: 54px;
  border-radius: 20px;
  color: rgba(6, 22, 77, 0.7);
  font-weight: 850;
}

.bottom-nav-item span {
  width: 28px;
  height: 28px;
  margin-bottom: 2px;
  border-radius: 12px;
  font-size: 0.96rem;
}

.bottom-nav-item.active {
  color: #06164d;
  background:
    radial-gradient(circle at 50% 0%, rgba(56, 189, 248, 0.34), transparent 45%),
    linear-gradient(145deg, rgba(224, 247, 255, 0.94), rgba(255, 255, 255, 0.7));
  box-shadow: 0 10px 28px rgba(14, 165, 233, 0.18);
}

.bottom-nav-item[data-bottom-nav="ai"].active {
  background:
    radial-gradient(circle at 50% 0%, rgba(214, 168, 79, 0.34), transparent 45%),
    linear-gradient(145deg, rgba(255, 244, 214, 0.92), rgba(224, 247, 255, 0.72));
}

.deck-viewer {
  padding: max(10px, env(safe-area-inset-top, 0px)) 10px max(10px, env(safe-area-inset-bottom, 0px));
  background:
    radial-gradient(circle at 50% 0%, rgba(56, 189, 248, 0.14), transparent 36%),
    rgba(5, 14, 30, 0.66);
  backdrop-filter: blur(28px);
}

.deck-viewer-card {
  width: min(1180px, 100%);
  height: min(94dvh, 980px);
  max-height: min(94dvh, 980px);
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  border-radius: 26px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(244, 249, 255, 0.92));
  box-shadow: 0 34px 110px rgba(2, 10, 28, 0.4);
}

.deck-viewer-head {
  padding: 14px 16px 10px;
  border-bottom: 1px solid rgba(8, 18, 56, 0.08);
}

.deck-viewer-actions {
  gap: 7px;
}

.deck-pdf-pages {
  min-height: 0;
  height: 100%;
  padding: clamp(12px, 2vw, 24px);
  overflow: auto;
  gap: 18px;
  background:
    radial-gradient(circle at 50% 0%, rgba(214, 168, 79, 0.08), transparent 34%),
    linear-gradient(180deg, rgba(236, 244, 252, 0.78), rgba(255, 255, 255, 0.92));
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y pinch-zoom;
}

.deck-pdf-page {
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  padding: clamp(8px, 1.4vw, 14px);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 18px 48px rgba(8, 18, 56, 0.14);
}

.deck-pdf-page canvas {
  max-width: min(100%, 980px);
  height: auto !important;
  border-radius: 10px;
}

.deck-reader-rail {
  display: grid;
  grid-template-columns: auto minmax(80px, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 16px 14px;
  color: #06164d;
  font-size: 0.78rem;
  font-weight: 900;
  background: rgba(255, 255, 255, 0.76);
}

.deck-reader-rail div {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(8, 18, 56, 0.1);
}

.deck-reader-rail i {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #0ea5e9, #d6a84f);
  transition: width 240ms var(--ease);
}

.ai-call-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 6px auto 12px;
}

.ai-call-meta span {
  min-height: 30px;
  display: inline-grid;
  place-items: center;
  padding: 0 12px;
  border-radius: 999px;
  color: #06164d;
  background: rgba(255, 255, 255, 0.74);
  font-size: 0.76rem;
  font-weight: 950;
}

.ai-call-controls {
  grid-template-columns: repeat(4, minmax(0, auto));
}

.ai-call-controls .ghost {
  color: #06164d;
  background: rgba(255, 255, 255, 0.74);
}

.install-prompt {
  position: fixed;
  left: 50%;
  bottom: calc(92px + env(safe-area-inset-bottom, 0px));
  z-index: 22000;
  width: min(430px, calc(100vw - 24px));
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 24px;
  color: #06164d;
  background:
    radial-gradient(circle at 0% 0%, rgba(214, 168, 79, 0.18), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(239, 248, 255, 0.82));
  box-shadow: 0 24px 70px rgba(8, 18, 56, 0.18);
  backdrop-filter: blur(26px) saturate(1.35);
  transform: translate(-50%, 18px) scale(0.98);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms var(--ease), transform 220ms var(--ease);
}

.app-footer {
  display: grid;
  place-items: center;
  gap: 3px;
  padding: 34px 16px calc(112px + env(safe-area-inset-bottom, 0px));
  color: rgba(71, 89, 120, 0.58);
  text-align: center;
  animation: footerFadeIn 520ms var(--ease) both;
}

.app-footer p,
.app-footer span {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 760;
  letter-spacing: 0.01em;
}

/* Screen-reader / SEO-only text: gives each feature screen a single crawlable <h1>
   and accessible labels without any visual change to the existing UI. */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.footer-legal-links,
.premium-legal-links,
.profile-legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  justify-content: center;
}

.footer-legal-links a,
.premium-legal-links a,
.profile-legal-links a {
  color: inherit;
  text-decoration: none;
  opacity: .82;
}

.footer-legal-links a:hover,
.premium-legal-links a:hover,
.profile-legal-links a:hover { opacity: 1; text-decoration: underline; }

.app-footer span {
  color: rgba(71, 89, 120, 0.42);
  font-size: 0.66rem;
}

@keyframes footerFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.install-prompt.active {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0) scale(1);
}

.install-prompt img {
  width: 48px;
  height: 48px;
  border-radius: 15px;
  box-shadow: 0 10px 24px rgba(8, 18, 56, 0.14);
}

.install-prompt strong {
  display: block;
  font-weight: 950;
}

.install-prompt p {
  margin: 2px 0 0;
  color: #52627d;
  font-size: 0.78rem;
  font-weight: 750;
  line-height: 1.35;
}

.install-prompt .primary-button {
  min-height: 38px;
  padding-inline: 15px;
}

.install-prompt .icon-button {
  width: 34px;
  height: 34px;
  border-radius: 14px;
}

.app-splash {
  position: fixed;
  inset: 0;
  z-index: 50000;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  color: #06164d;
  background:
    radial-gradient(circle at 50% 24%, rgba(34, 199, 255, 0.16), transparent 36%),
    linear-gradient(145deg, #f8fbff, #eef7ff);
  transition: opacity 420ms var(--ease), visibility 420ms var(--ease);
}

.app-splash.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.app-splash img {
  width: 104px;
  height: 104px;
  border-radius: 28px;
  box-shadow: 0 24px 70px rgba(8, 18, 56, 0.18);
}

.app-splash h2 {
  margin: 8px 0 0;
  font-size: 2.2rem;
  letter-spacing: -0.04em;
}

.app-splash p {
  margin: 0;
  color: #52627d;
  font-weight: 850;
}

.ai-call-screen[data-call-state="connecting"] .ai-call-orb,
.ai-call-screen[data-call-state="reconnecting"] .ai-call-orb {
  animation: aiBreathingGlow 1.6s ease-in-out infinite;
}

@media (max-width: 760px) {
  .home-stats-grid article {
    padding-left: 50px;
  }

  .bottom-nav {
    width: min(500px, calc(100vw - 16px));
    padding: 6px;
  }

  .bottom-nav-item {
    min-height: 50px;
    font-size: 0.68rem;
  }

  .bottom-nav-item span {
    width: 25px;
    height: 25px;
    font-size: 0.82rem;
  }

  .deck-viewer {
    padding-inline: 0;
  }

  .deck-viewer-card {
    width: 100%;
    height: 96dvh;
    max-height: 96dvh;
    border-radius: 22px 22px 0 0;
  }

  .deck-viewer-actions .ghost-button {
    min-height: 34px;
    padding-inline: 9px;
    font-size: 0.68rem;
  }

  .deck-pdf-pages {
    padding: 10px 6px 16px;
  }

  .deck-pdf-page {
    padding: 6px;
    border-radius: 14px;
  }

  .ai-call-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .install-prompt {
    bottom: calc(82px + env(safe-area-inset-bottom, 0px));
    grid-template-columns: 42px minmax(0, 1fr) auto;
  }

  .install-prompt .icon-button {
    grid-column: 3;
  }

  .install-prompt .primary-button {
    grid-column: 1 / -1;
    width: 100%;
  }
}

/* Focused premium home hierarchy, Baihaqi AI orb, and deck unlock experience */
.platform-home {
  gap: 18px;
}

.platform-home .platform-hero {
  position: relative;
  overflow: hidden;
  color: #ffffff;
  border: 0;
  border-radius: 30px;
  padding: clamp(22px, 5vw, 34px);
  background:
    radial-gradient(circle at 82% 8%, rgba(255, 255, 255, 0.38), transparent 28%),
    radial-gradient(circle at 12% 100%, rgba(244, 196, 83, 0.22), transparent 34%),
    linear-gradient(135deg, #0b2a5b 0%, #0d6fb8 48%, #18c9ef 100%);
  box-shadow: 0 26px 70px rgba(9, 74, 136, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.38);
}

.platform-home .platform-hero::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, 0.26);
  pointer-events: none;
}

.platform-home .platform-hero::after {
  content: "";
  position: absolute;
  width: 220px;
  height: 220px;
  right: -70px;
  top: -80px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  filter: blur(8px);
  animation: heroGlowDrift 8s ease-in-out infinite;
}

.platform-home .platform-brand-row {
  align-items: center;
  gap: 16px;
}

.platform-home .hero-logo-glow {
  width: 76px;
  height: 76px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.2);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(255, 255, 255, 0.28);
  animation: medLogoFloat 5s ease-in-out infinite;
}

.platform-home .hero-logo-glow img {
  border-radius: 20px;
}

.platform-home .home-greeting,
.platform-home .platform-tagline,
.platform-home .hero-mantra {
  color: rgba(255, 255, 255, 0.86);
}

.platform-home .platform-brand-row h2 {
  color: #ffffff;
  font-size: clamp(2.35rem, 9vw, 4.2rem);
  text-shadow: 0 16px 40px rgba(2, 23, 63, 0.26);
}

.home-hero-actions {
  margin-top: 20px;
}

.home-hero-actions .primary-button {
  background: rgba(255, 255, 255, 0.94);
  color: #092354;
  box-shadow: 0 16px 34px rgba(2, 23, 63, 0.18);
}

.home-hero-actions .ghost-button {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.34);
  background: rgba(255, 255, 255, 0.14);
}

.home-xp-progress {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto minmax(120px, 1fr) auto;
  gap: 12px;
  align-items: center;
  margin-top: 18px;
  padding: 12px 14px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.26);
  backdrop-filter: blur(18px);
}

.home-xp-progress span,
.home-xp-progress strong {
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 900;
}

.home-xp-progress div {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
}

.home-xp-progress i {
  display: block;
  width: 8%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #f6c755, #ffffff, #7fe7ff);
  transition: width 520ms var(--ease);
}

.platform-home .home-stats-grid article,
.platform-home .continue-learning-card,
.platform-home .daily-mission-card,
.platform-home .quick-access-card {
  color: #071633;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(141, 154, 176, 0.22);
  box-shadow: 0 14px 38px rgba(8, 23, 56, 0.07);
}

.platform-home .home-stats-grid article::before {
  opacity: 0.7;
}

.platform-home .continue-learning-card,
.platform-home .daily-mission-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px;
  border-radius: 24px;
}

.platform-home .continue-learning-card h3,
.platform-home .daily-mission-card h3 {
  margin: 3px 0 4px;
  font-size: clamp(1.08rem, 4vw, 1.35rem);
  letter-spacing: 0;
}

.platform-home .continue-learning-card p,
.platform-home .daily-mission-card p {
  margin: 0;
  color: #60708c;
  font-weight: 760;
}

.quick-access-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.platform-home .quick-access-card {
  --accent: #13b981;
  position: relative;
  min-height: 118px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  text-align: left;
  padding: 16px;
  border-radius: 22px;
  cursor: pointer;
  transition: transform 220ms var(--ease), box-shadow 220ms var(--ease), border-color 220ms var(--ease);
}

.platform-home .quick-access-card:nth-child(2) { --accent: #7c3aed; }
.platform-home .quick-access-card:nth-child(3) { --accent: #f97316; }
.platform-home .quick-access-card:nth-child(4) { --accent: #06b6d4; }

.platform-home .quick-access-card::before {
  content: "";
  position: absolute;
  inset: auto 14px 12px 14px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), transparent);
  opacity: 0.72;
}

.platform-home .quick-access-card:hover,
.platform-home .quick-access-card:focus-visible {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--accent) 36%, rgba(141, 154, 176, 0.22));
  box-shadow: 0 18px 48px rgba(8, 23, 56, 0.1);
}

.platform-home .quick-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, #ffffff);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent);
}

.platform-home .quick-access-card strong {
  display: block;
  font-size: 0.98rem;
  letter-spacing: 0;
}

.platform-home .quick-access-card small {
  display: block;
  color: #667795;
  font-weight: 760;
  line-height: 1.25;
  margin-top: 2px;
}

.platform-home .quick-access-card em {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #ffffff;
  font-style: normal;
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 58%, #0b2a5b));
}

.ai-floating-button {
  --ai-orb-x: 0px;
  --ai-orb-y: 0px;
  position: fixed;
  right: max(18px, env(safe-area-inset-right, 0px) + 14px);
  bottom: calc(104px + env(safe-area-inset-bottom, 0px));
  z-index: 13000;
  width: 78px;
  height: 78px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background:
    radial-gradient(circle at 45% 28%, rgba(255, 255, 255, 0.96), rgba(225, 247, 255, 0.78) 58%, rgba(246, 197, 83, 0.38));
  box-shadow: 0 18px 44px rgba(5, 35, 81, 0.18), 0 0 0 1px rgba(255, 255, 255, 0.85), 0 0 42px rgba(24, 201, 239, 0.28);
  transform: translate(var(--ai-orb-x), var(--ai-orb-y));
  touch-action: none;
  cursor: grab;
  transition: transform 260ms var(--ease), box-shadow 260ms var(--ease), scale 180ms var(--ease);
  animation: aiOrbBreath 4.8s ease-in-out infinite;
}

.ai-floating-button:active,
.ai-floating-button.dragging {
  cursor: grabbing;
  scale: 0.96;
}

.ai-floating-button img {
  width: 86%;
  height: 86%;
  object-fit: contain;
  border-radius: 999px;
  filter: drop-shadow(0 12px 18px rgba(3, 17, 45, 0.18));
}

.ai-floating-button .ai-ring {
  position: absolute;
  inset: -8px;
  border-radius: inherit;
  border: 1px solid rgba(24, 201, 239, 0.42);
  animation: aiPulseRing 2.8s ease-out infinite;
  pointer-events: none;
}

.ai-floating-button.expanded {
  box-shadow: 0 22px 56px rgba(5, 35, 81, 0.24), 0 0 58px rgba(246, 197, 83, 0.28);
}

.ai-floating-button .ai-bubble {
  right: 72px;
  bottom: 40px;
  min-width: 132px;
  max-width: 168px;
  padding: 9px 11px;
  font-size: 0.78rem;
  color: #0b2a5b;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(24, 201, 239, 0.18);
  box-shadow: 0 16px 36px rgba(8, 23, 56, 0.12);
  backdrop-filter: blur(18px);
}

.ai-orb-menu {
  position: fixed;
  right: max(18px, env(safe-area-inset-right, 0px) + 14px);
  bottom: calc(190px + env(safe-area-inset-bottom, 0px));
  z-index: 12990;
  display: grid;
  gap: 8px;
  width: min(230px, calc(100vw - 32px));
  padding: 12px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.82);
  box-shadow: 0 26px 70px rgba(8, 23, 56, 0.18);
  backdrop-filter: blur(22px);
  opacity: 0;
  transform: translateY(12px) scale(0.96);
  transform-origin: bottom right;
  transition: opacity 200ms var(--ease), transform 200ms var(--ease);
}

.ai-orb-menu:not(.hidden),
.ai-orb-menu.active {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.ai-orb-menu button {
  min-height: 42px;
  border: 0;
  border-radius: 16px;
  text-align: left;
  padding: 0 14px;
  color: #0b2a5b;
  font-weight: 900;
  background: rgba(248, 251, 255, 0.78);
  box-shadow: inset 0 0 0 1px rgba(94, 114, 145, 0.1);
}

.ai-orb-menu button:hover {
  background: linear-gradient(135deg, rgba(231, 247, 255, 0.96), rgba(255, 249, 234, 0.92));
}

.deck-unlock-modal {
  position: fixed;
  inset: 0;
  z-index: 22000;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(4, 14, 33, 0.42);
  backdrop-filter: blur(18px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 260ms var(--ease);
}

.deck-unlock-modal.active {
  opacity: 1;
  pointer-events: auto;
}

.deck-unlock-card {
  position: relative;
  width: min(520px, 100%);
  overflow: hidden;
  border-radius: 34px;
  padding: 28px;
  text-align: center;
  background:
    radial-gradient(circle at 50% 8%, rgba(255, 230, 158, 0.32), transparent 26%),
    radial-gradient(circle at 16% 22%, rgba(24, 201, 239, 0.2), transparent 30%),
    rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.82);
  box-shadow: 0 34px 90px rgba(0, 20, 55, 0.32);
  transform: translateY(18px) scale(0.96);
  transition: transform 320ms var(--ease);
}

.deck-unlock-modal.active .deck-unlock-card {
  transform: translateY(0) scale(1);
}

.deck-unlock-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 0 38%, rgba(255, 255, 255, 0.58) 48%, transparent 60% 100%);
  transform: translateX(-120%);
  animation: deckGlassSweep 1.55s var(--ease) 180ms both;
  pointer-events: none;
}

.unlock-medallion {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  color: #0b2a5b;
  font-size: 0.75rem;
  font-weight: 950;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 12px 34px rgba(8, 23, 56, 0.1), inset 0 0 0 1px rgba(246, 197, 83, 0.28);
}

.unlock-medallion img {
  width: 26px;
  height: 26px;
  border-radius: 8px;
}

.unlock-cover {
  position: relative;
  width: min(230px, 58vw);
  aspect-ratio: 0.7;
  margin: 18px auto 16px;
  display: grid;
  place-items: center;
  border-radius: 26px;
  background: linear-gradient(145deg, #ffffff, #edf7ff);
  box-shadow: 0 22px 60px rgba(8, 23, 56, 0.16), 0 0 38px rgba(246, 197, 83, 0.2);
  animation: deckLift 1.4s var(--ease) both;
}

.unlock-cover::before {
  content: "";
  position: absolute;
  inset: -16px;
  border-radius: 34px;
  background: radial-gradient(circle, rgba(246, 197, 83, 0.24), transparent 64%);
  z-index: -1;
}

.unlock-cover img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

.deck-unlock-card h2 {
  margin: 6px 0;
  color: #06164d;
  font-size: clamp(1.8rem, 8vw, 2.65rem);
  letter-spacing: 0;
}

.deck-unlock-card > p:not(.eyebrow) {
  margin: 0 auto 14px;
  max-width: 360px;
  color: #5f6f8c;
  font-weight: 760;
  line-height: 1.45;
}

.unlock-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 16px 0;
}

.unlock-stats span {
  display: grid;
  gap: 3px;
  padding: 12px;
  border-radius: 18px;
  background: rgba(248, 251, 255, 0.74);
  box-shadow: inset 0 0 0 1px rgba(94, 114, 145, 0.1);
}

.unlock-stats em {
  color: #7b89a2;
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
}

.unlock-stats strong {
  color: #0b2a5b;
  font-size: 0.88rem;
}

.unlock-ai-note {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0 18px;
  padding: 12px;
  border-radius: 22px;
  text-align: left;
  background: linear-gradient(135deg, rgba(231, 247, 255, 0.88), rgba(255, 249, 234, 0.82));
  border: 1px solid rgba(255, 255, 255, 0.74);
}

.unlock-ai-note img {
  width: 54px;
  height: 54px;
  object-fit: contain;
  border-radius: 999px;
  filter: drop-shadow(0 10px 14px rgba(8, 23, 56, 0.14));
}

.unlock-ai-note p {
  margin: 0;
  color: #203355;
  font-size: 0.88rem;
  font-weight: 800;
  line-height: 1.35;
}

.unlock-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}

.unlock-actions .icon-button {
  position: absolute;
  top: 16px;
  right: 16px;
}

.unlock-particles i {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #f6c755;
  box-shadow: 0 0 18px rgba(246, 197, 83, 0.9);
  opacity: 0;
  animation: unlockParticle 1.45s var(--ease) both;
}

.unlock-particles i:nth-child(1) { left: 18%; top: 28%; animation-delay: 80ms; }
.unlock-particles i:nth-child(2) { left: 76%; top: 24%; animation-delay: 180ms; background: #18c9ef; }
.unlock-particles i:nth-child(3) { left: 22%; top: 70%; animation-delay: 260ms; }
.unlock-particles i:nth-child(4) { left: 82%; top: 68%; animation-delay: 340ms; background: #18c9ef; }
.unlock-particles i:nth-child(5) { left: 50%; top: 18%; animation-delay: 420ms; }

@keyframes heroGlowDrift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.78; }
  50% { transform: translate3d(-20px, 18px, 0) scale(1.12); opacity: 1; }
}

@keyframes medLogoFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

@keyframes aiOrbBreath {
  0%, 100% { box-shadow: 0 18px 44px rgba(5, 35, 81, 0.18), 0 0 0 1px rgba(255, 255, 255, 0.85), 0 0 34px rgba(24, 201, 239, 0.22); }
  50% { box-shadow: 0 22px 52px rgba(5, 35, 81, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.95), 0 0 52px rgba(246, 197, 83, 0.3); }
}

@keyframes aiPulseRing {
  0% { opacity: 0.72; transform: scale(0.92); }
  100% { opacity: 0; transform: scale(1.35); }
}

@keyframes deckLift {
  0% { transform: translateY(18px) scale(0.94) rotateX(8deg); opacity: 0; }
  55% { transform: translateY(-8px) scale(1.02); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

@keyframes deckGlassSweep {
  to { transform: translateX(120%); }
}

@keyframes unlockParticle {
  0% { opacity: 0; transform: translateY(16px) scale(0.4); }
  35% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-34px) scale(1.2); }
}

@media (max-width: 760px) {
  .platform-home {
    gap: 14px;
  }

  .platform-home .platform-hero {
    padding: 20px;
    border-radius: 26px;
  }

  .platform-home .hero-logo-glow {
    width: 64px;
    height: 64px;
    border-radius: 20px;
  }

  .home-xp-progress {
    grid-template-columns: 1fr auto;
  }

  .home-xp-progress div {
    grid-column: 1 / -1;
    order: 3;
  }

  .platform-home .continue-learning-card,
  .platform-home .daily-mission-card {
    padding: 15px;
    border-radius: 21px;
  }

  .quick-access-grid {
    gap: 10px;
  }

  .platform-home .quick-access-card {
    grid-template-columns: 1fr auto;
    min-height: 106px;
    padding: 13px;
  }

  .platform-home .quick-icon {
    width: 36px;
    height: 36px;
  }

  .platform-home .quick-access-card small {
    grid-column: 1 / -1;
  }

  .ai-floating-button {
    width: 70px;
    height: 70px;
    bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  }

  .ai-orb-menu {
    bottom: calc(176px + env(safe-area-inset-bottom, 0px));
  }

  .deck-unlock-card {
    padding: 22px 16px 18px;
    border-radius: 30px;
  }

  .unlock-stats {
    grid-template-columns: 1fr 1fr;
  }

  .unlock-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
}

/* Compact mobile dashboard and native MedDex Reader refinements */
.platform-home {
  gap: 12px;
}

.platform-home .platform-hero {
  padding: 18px;
}

.platform-home .home-hero-actions {
  display: none;
}

.platform-home .platform-brand-row {
  gap: 12px;
}

.platform-home .hero-logo-glow {
  width: 58px;
  height: 58px;
  border-radius: 18px;
}

.platform-home .platform-brand-row h2 {
  font-size: clamp(2rem, 7vw, 3.1rem);
  line-height: 0.92;
}

.platform-home .home-greeting {
  margin-bottom: 3px;
  font-size: 0.78rem;
}

.platform-home .platform-tagline,
.platform-home .hero-mantra {
  font-size: 0.78rem;
  line-height: 1.25;
}

.platform-home .home-xp-progress {
  margin-top: 12px;
  padding: 9px 11px;
  border-radius: 17px;
}

.platform-home .hero-mini-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  margin-top: 9px;
}

.platform-home .hero-mini-stats article {
  min-height: auto;
  padding: 8px 6px;
  border-radius: 15px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.24);
  box-shadow: none;
  text-align: center;
}

.platform-home .hero-mini-stats article::before {
  display: none;
}

.platform-home .hero-mini-stats span {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.57rem;
  letter-spacing: 0.04em;
}

.platform-home .hero-mini-stats strong {
  color: #ffffff;
  font-size: clamp(0.76rem, 3vw, 0.96rem);
  line-height: 1.1;
}

.hero-daily-chip {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 10px;
  row-gap: 1px;
  align-items: center;
  margin-top: 9px;
  padding: 9px 11px;
  border-radius: 17px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.24);
}

.hero-daily-chip span {
  grid-row: span 2;
  padding: 5px 8px;
  border-radius: 999px;
  color: #08234f;
  background: rgba(255, 255, 255, 0.9);
  font-size: 0.62rem;
  font-weight: 950;
  text-transform: uppercase;
}

.hero-daily-chip strong,
.hero-daily-chip small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hero-daily-chip strong {
  font-size: 0.78rem;
}

.hero-daily-chip small {
  color: rgba(255, 255, 255, 0.76);
  font-size: 0.66rem;
  font-weight: 800;
}

.platform-home .continue-learning-card {
  padding: 12px 13px;
  border-radius: 19px;
}

.platform-home .continue-learning-card .eyebrow {
  font-size: 0.62rem;
}

.platform-home .continue-learning-card h3 {
  margin: 1px 0 2px;
  font-size: 0.98rem;
}

.platform-home .continue-learning-card p {
  font-size: 0.74rem;
  line-height: 1.25;
}

.platform-home .continue-learning-card .ghost-button {
  min-height: 36px;
  padding-inline: 12px;
  border-radius: 13px;
}

.platform-home .quick-access-grid {
  gap: 10px;
}

.platform-home .quick-access-card {
  min-height: 88px;
  grid-template-columns: auto 1fr auto;
  padding: 12px;
  border-radius: 18px;
}

.platform-home .quick-icon {
  width: 34px;
  height: 34px;
  border-radius: 13px;
  font-size: 0.86rem;
}

.platform-home .quick-access-card strong {
  font-size: 0.86rem;
}

.platform-home .quick-access-card small {
  font-size: 0.68rem;
}

.platform-home .quick-access-card em {
  width: 26px;
  height: 26px;
  font-size: 0.82rem;
}

.deck-viewer {
  padding: max(6px, env(safe-area-inset-top, 0px)) 6px max(6px, env(safe-area-inset-bottom, 0px));
  background:
    radial-gradient(circle at 50% -10%, rgba(125, 224, 255, 0.22), transparent 36%),
    rgba(6, 16, 34, 0.72);
}

.deck-viewer-card {
  width: min(1220px, 100%);
  height: calc(100dvh - 12px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  max-height: none;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  border-radius: 24px;
  background: #f8fbff;
}

.deck-viewer-head {
  position: relative;
  z-index: 2;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(18px);
}

.deck-viewer-head .eyebrow {
  display: none;
}

.deck-viewer-head h2 {
  max-width: min(44vw, 520px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1rem;
}

.deck-viewer-head p:not(.eyebrow) {
  font-size: 0.68rem;
}

.deck-viewer-actions {
  flex-wrap: nowrap;
  gap: 5px;
}

.deck-viewer-actions .ghost-button {
  min-height: 32px;
  padding-inline: 9px;
  border-radius: 12px;
  font-size: 0.68rem;
}

.deck-viewer-state {
  margin: 10px auto;
  width: min(360px, calc(100% - 24px));
  border-radius: 20px;
}

.deck-pdf-pages {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: 100%;
  padding: clamp(8px, 2vw, 18px) clamp(5px, 1.6vw, 18px) 20px;
  gap: clamp(12px, 2vw, 20px);
  align-content: start;
  overflow: auto;
  background:
    radial-gradient(circle at 18% 0%, rgba(24, 201, 239, 0.08), transparent 30%),
    linear-gradient(180deg, #eef5fb, #fbfdff);
  scroll-behavior: smooth;
  touch-action: pan-x pan-y pinch-zoom;
}

.deck-pdf-page {
  box-sizing: border-box;
  width: min(100%, 980px);
  min-height: min(118vw, 760px);
  margin: 0 auto;
  padding: clamp(6px, 1.2vw, 12px);
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 18px 48px rgba(8, 18, 56, 0.13);
  transition: transform 220ms var(--ease), box-shadow 220ms var(--ease);
}

.deck-pdf-page.zoomed {
  width: max(980px, 132%);
  max-width: none;
  transform: translateZ(0);
}

.deck-pdf-page canvas {
  display: block;
  max-width: 100%;
  margin: 0 auto;
  border-radius: 10px;
}

.deck-pdf-page.loading canvas {
  display: none;
}

.deck-pdf-page.rendered {
  min-height: auto;
}

.deck-page-skeleton {
  width: min(100%, 760px);
  aspect-ratio: 0.707;
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 16%;
  border-radius: 12px;
  background:
    linear-gradient(90deg, rgba(226, 237, 247, 0.55), rgba(255, 255, 255, 0.92), rgba(226, 237, 247, 0.55));
  background-size: 240% 100%;
  animation: readerSkeleton 1.35s ease-in-out infinite;
}

.deck-pdf-page.rendered .deck-page-skeleton {
  display: none;
}

.deck-page-skeleton i {
  display: block;
  height: 12px;
  border-radius: 999px;
  background: rgba(122, 143, 171, 0.18);
}

.deck-page-skeleton i:nth-child(2) { width: 78%; }
.deck-page-skeleton i:nth-child(3) { width: 54%; }

.deck-reader-rail {
  position: relative;
  z-index: 2;
  padding: 9px 14px calc(9px + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, 0.88);
  border-top: 1px solid rgba(8, 18, 56, 0.08);
  backdrop-filter: blur(18px);
}

@keyframes readerSkeleton {
  0% { background-position: 0% 50%; }
  100% { background-position: 240% 50%; }
}

@media (max-width: 760px) {
  .platform-home {
    gap: 9px;
  }

  .platform-home .platform-hero {
    padding: 14px;
    border-radius: 22px;
  }

  .platform-home .platform-brand-row {
    align-items: center;
  }

  .platform-home .hero-logo-glow {
    width: 48px;
    height: 48px;
    border-radius: 16px;
  }

  .platform-home .platform-brand-row h2 {
    font-size: clamp(1.65rem, 8vw, 2.25rem);
  }

  .platform-home .platform-tagline,
  .platform-home .hero-mantra {
    font-size: 0.7rem;
  }

  .platform-home .hero-mini-stats {
    gap: 5px;
  }

  .platform-home .hero-mini-stats article {
    padding: 7px 4px;
    border-radius: 13px;
  }

  .platform-home .hero-mini-stats span {
    font-size: 0.52rem;
  }

  .platform-home .hero-mini-stats strong {
    font-size: 0.72rem;
  }

  .hero-daily-chip {
    padding: 8px 9px;
    border-radius: 15px;
  }

  .hero-daily-chip span {
    font-size: 0.56rem;
  }

  .hero-daily-chip strong {
    font-size: 0.72rem;
  }

  .hero-daily-chip small {
    font-size: 0.61rem;
  }

  .platform-home .continue-learning-card {
    padding: 10px 11px;
  }

  .platform-home .continue-learning-card h3 {
    font-size: 0.9rem;
  }

  .platform-home .continue-learning-card p {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.68rem;
  }

  .platform-home .quick-access-card {
    min-height: 78px;
    padding: 10px;
  }

  .platform-home .quick-icon {
    width: 30px;
    height: 30px;
  }

  .platform-home .quick-access-card strong {
    font-size: 0.78rem;
  }

  .platform-home .quick-access-card small {
    font-size: 0.62rem;
  }

  .deck-viewer {
    padding: 0;
  }

  .deck-viewer-card {
    width: 100%;
    height: 100dvh;
    border-radius: 0;
  }

  .deck-viewer-head {
    padding: calc(8px + env(safe-area-inset-top, 0px)) 9px 8px;
  }

  .deck-viewer-head h2 {
    max-width: 38vw;
    font-size: 0.9rem;
  }

  .deck-viewer-head p:not(.eyebrow) {
    display: none;
  }

  .deck-viewer-actions .ghost-button {
    min-height: 30px;
    padding-inline: 7px;
    font-size: 0.62rem;
  }

  .deck-viewer-actions .icon-button {
    width: 34px;
    height: 34px;
    border-radius: 13px;
  }

  .deck-pdf-pages {
    padding-inline: 4px;
  }

  .deck-pdf-page {
    width: 100%;
    min-height: 128vw;
    padding: 4px;
    border-radius: 14px;
  }

  .deck-pdf-page.zoomed {
    width: 150%;
  }
}

/* Premium Liquid Glass polish */
:root {
  --liquid-glass: linear-gradient(135deg, rgba(255, 255, 255, 0.86), rgba(220, 245, 255, 0.42), rgba(255, 238, 190, 0.24));
  --liquid-border: rgba(255, 255, 255, 0.52);
  --liquid-shadow: 0 20px 60px rgba(15, 40, 80, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.app-header,
.platform-home .continue-learning-card,
.platform-home .quick-access-card,
.cards-hero,
.library-stats article,
.redeem-panel,
.deck-card,
.practice-setup-card,
.battle-lobby-card,
.bottom-nav,
.ai-panel-card,
.deck-viewer-card,
.profile-dropdown,
.auth-modal-card,
.email-auth-card,
.profile-modal-card,
.install-prompt {
  background: var(--liquid-glass);
  border: 1px solid var(--liquid-border);
  box-shadow: var(--liquid-shadow);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
}

.app-header,
.bottom-nav {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.76), rgba(228, 247, 255, 0.46), rgba(255, 242, 206, 0.3));
}

.platform-home .platform-hero {
  background:
    radial-gradient(circle at 88% 0%, rgba(255, 255, 255, 0.42), transparent 28%),
    radial-gradient(circle at 18% 100%, rgba(246, 197, 83, 0.28), transparent 32%),
    linear-gradient(135deg, rgba(11, 42, 91, 0.98), rgba(13, 111, 184, 0.95) 48%, rgba(24, 201, 239, 0.92));
  border: 1px solid rgba(255, 255, 255, 0.38);
  box-shadow:
    0 28px 74px rgba(9, 74, 136, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.54),
    inset 0 -24px 60px rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(28px) saturate(190%);
  animation: liquidHeroGlow 7s ease-in-out infinite;
}

.platform-home .platform-hero::before,
.primary-button::before,
.platform-home .quick-access-card::after,
.bottom-nav::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 0 36%, rgba(255, 255, 255, 0.36) 48%, transparent 62% 100%);
  transform: translateX(-120%);
}

.platform-home .platform-hero::before {
  animation: liquidShimmer 8s ease-in-out infinite;
}

.platform-home .quick-access-card,
.platform-home .continue-learning-card,
.primary-button,
.ghost-button,
.bottom-nav-item {
  position: relative;
  overflow: hidden;
  transition: transform 220ms var(--ease), box-shadow 220ms var(--ease), border-color 220ms var(--ease), background 220ms var(--ease);
}

.platform-home .quick-access-card:active,
.platform-home .continue-learning-card:active,
.primary-button:active,
.ghost-button:active,
.bottom-nav-item:active {
  transform: translateY(-1px) scale(0.985);
}

.platform-home .quick-access-card:hover,
.platform-home .continue-learning-card:hover,
.primary-button:hover,
.ghost-button:hover {
  box-shadow: 0 24px 70px rgba(15, 40, 80, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

.primary-button::before {
  animation: liquidButtonShimmer 5.5s ease-in-out infinite;
}

.bottom-nav {
  border-color: rgba(255, 255, 255, 0.58);
}

.bottom-nav-item.active {
  color: #06245a;
  background:
    radial-gradient(circle at 50% 0%, rgba(24, 201, 239, 0.24), transparent 55%),
    linear-gradient(135deg, rgba(232, 249, 255, 0.92), rgba(255, 247, 224, 0.78));
  box-shadow: 0 10px 30px rgba(24, 201, 239, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.ai-floating-button {
  background:
    radial-gradient(circle at 42% 26%, rgba(255, 255, 255, 0.98), rgba(223, 248, 255, 0.72) 54%, rgba(246, 197, 83, 0.34)),
    var(--liquid-glass);
  border: 1px solid rgba(255, 255, 255, 0.74);
  box-shadow:
    0 22px 58px rgba(5, 35, 81, 0.22),
    0 0 44px rgba(24, 201, 239, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.home-xp-progress i,
.deck-reader-rail i,
.ai-progress-card.xp i {
  animation: liquidProgress 2.4s ease-in-out infinite;
}

.app-splash {
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 28%, rgba(24, 201, 239, 0.18), transparent 34%),
    radial-gradient(circle at 50% 62%, rgba(246, 197, 83, 0.16), transparent 34%),
    linear-gradient(145deg, #fbfdff, #edf8ff);
}

.app-splash::before {
  content: "";
  position: absolute;
  inset: 18px;
  border-radius: 34px;
  background: var(--liquid-glass);
  border: 1px solid rgba(255, 255, 255, 0.72);
  box-shadow: var(--liquid-shadow);
  backdrop-filter: blur(26px) saturate(180%);
}

.app-splash > * {
  position: relative;
  z-index: 1;
}

.nfc-ripple {
  position: absolute;
  width: 180px;
  height: 180px;
  border-radius: 999px;
  border: 1px solid rgba(24, 201, 239, 0.28);
  box-shadow: 0 0 60px rgba(24, 201, 239, 0.16);
  animation: nfcRipple 1.8s ease-out infinite;
}

.app-splash h2 {
  color: #081d4f;
  letter-spacing: 0.08em;
}

.app-splash p {
  min-height: 1.4em;
  color: #53627a;
}

.nfc-progress {
  width: min(260px, 70vw);
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(8, 35, 79, 0.09);
  box-shadow: inset 0 0 0 1px rgba(8, 35, 79, 0.05);
}

.nfc-progress i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #d6a84f, #18c9ef);
}

.app-splash.nfc-mode .nfc-progress i {
  animation: nfcProgress 1.45s ease forwards;
}

.app-splash strong {
  opacity: 0;
  color: #059669;
  font-size: 0.92rem;
  font-weight: 950;
}

.app-splash.granted strong {
  opacity: 1;
}

.app-splash.granted p {
  color: #059669;
}

@keyframes liquidHeroGlow {
  0%, 100% { filter: saturate(1); }
  50% { filter: saturate(1.12) brightness(1.04); }
}

@keyframes liquidShimmer {
  0%, 54% { transform: translateX(-120%); }
  74%, 100% { transform: translateX(120%); }
}

@keyframes liquidButtonShimmer {
  0%, 60% { transform: translateX(-120%); }
  82%, 100% { transform: translateX(120%); }
}

@keyframes liquidProgress {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.18) drop-shadow(0 0 8px rgba(24, 201, 239, 0.28)); }
}

@keyframes nfcRipple {
  0% { opacity: 0.74; transform: scale(0.72); }
  100% { opacity: 0; transform: scale(1.32); }
}

@keyframes nfcProgress {
  0% { width: 0; }
  72% { width: 86%; }
  100% { width: 100%; }
}

/* Baihaqi AI Workspace - final AI-only premium layer */
.ai-panel {
  position: fixed;
  inset: 0;
  z-index: 2600;
  display: grid;
  place-items: center;
  padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
  background:
    radial-gradient(circle at 18% 8%, rgba(24, 201, 239, 0.18), transparent 34%),
    radial-gradient(circle at 82% 16%, rgba(246, 197, 83, 0.18), transparent 30%),
    linear-gradient(145deg, rgba(248, 252, 255, 0.92), rgba(234, 247, 255, 0.78), rgba(255, 249, 236, 0.72));
  backdrop-filter: blur(22px) saturate(170%);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  opacity: 0;
  transform: scale(0.985);
  pointer-events: none;
  transition: opacity 260ms var(--ease), transform 320ms var(--ease);
}

.ai-panel.active {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

.ai-panel-card {
  position: relative;
  display: grid;
  grid-template-rows: auto auto 1fr auto auto;
  width: min(1120px, calc(100vw - 24px));
  height: min(920px, calc(100dvh - max(24px, env(safe-area-inset-top)) - max(24px, env(safe-area-inset-bottom))));
  overflow: hidden;
  border-radius: 34px;
  border: 1px solid rgba(255, 255, 255, 0.68);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.78), rgba(232, 248, 255, 0.54), rgba(255, 244, 214, 0.34));
  box-shadow:
    0 32px 90px rgba(10, 35, 78, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(30px) saturate(190%);
  -webkit-backdrop-filter: blur(30px) saturate(190%);
}

.ai-panel-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(115deg, transparent 0 42%, rgba(255, 255, 255, 0.42) 50%, transparent 60%),
    radial-gradient(circle at 62% 0%, rgba(24, 201, 239, 0.16), transparent 26%);
  opacity: 0.65;
}

.ai-panel-head {
  position: relative;
  z-index: 2;
  min-height: 68px;
  padding: 10px 14px;
  margin: 12px 12px 8px;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.64);
  background: rgba(255, 255, 255, 0.58);
  box-shadow: 0 16px 38px rgba(7, 28, 68, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
}

.ai-title-lockup {
  min-width: 0;
  gap: 11px;
}

.ai-title-lockup img {
  width: 48px;
  height: 48px;
  border-radius: 18px;
  object-fit: cover;
  box-shadow: 0 12px 26px rgba(6, 27, 70, 0.12), 0 0 24px rgba(24, 201, 239, 0.18);
}

.ai-panel-head .eyebrow {
  display: none;
}

.ai-panel-head h2 {
  margin: 0;
  color: #081d4f;
  font-size: clamp(1.04rem, 2.5vw, 1.28rem);
  letter-spacing: 0;
}

.ai-panel-head p:not(.eyebrow) {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  margin: 2px 0 0;
  color: #657189;
  font-size: 0.76rem;
  font-weight: 800;
}

.ai-mode-badge {
  padding: 4px 9px;
  border-radius: 999px;
  color: #063b62;
  background: linear-gradient(135deg, rgba(223, 250, 255, 0.92), rgba(255, 246, 222, 0.78));
  border: 1px solid rgba(255, 255, 255, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88);
}

.ai-head-actions {
  gap: 8px;
}

.ai-head-call,
.ai-head-settings,
.ai-panel-head .icon-button {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.68);
  color: #09235a;
  background: rgba(255, 255, 255, 0.66);
  box-shadow: 0 12px 24px rgba(9, 36, 82, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.86);
  transition: transform 180ms var(--ease), box-shadow 180ms var(--ease);
}

.ai-head-call:active,
.ai-head-settings:active,
.ai-panel-head .icon-button:active {
  transform: scale(0.94);
}

.ai-quick-actions {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 8px;
  margin: 0 18px 8px;
  padding: 4px 0 8px;
  overflow-x: auto;
  scrollbar-width: none;
}

.ai-quick-actions::-webkit-scrollbar,
.ai-followups::-webkit-scrollbar {
  display: none;
}

.ai-quick-actions button,
.ai-followups button {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 8px 13px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  color: #17305f;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.84), rgba(236, 249, 255, 0.58));
  box-shadow: 0 10px 24px rgba(9, 35, 80, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  font-size: 0.78rem;
  font-weight: 900;
  white-space: nowrap;
  transition: transform 180ms var(--ease), box-shadow 180ms var(--ease);
}

.ai-quick-actions button:hover,
.ai-followups button:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(10, 55, 106, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.ai-quick-actions button.active {
  color: #06245a;
  background: linear-gradient(135deg, rgba(226, 250, 255, 0.96), rgba(255, 245, 219, 0.82));
}

.ai-chat-log {
  position: relative;
  z-index: 2;
  min-height: 0;
  height: auto;
  padding: 18px clamp(16px, 4vw, 46px) 22px;
  overflow-y: auto;
  scroll-behavior: smooth;
}

.ai-panel.ai-welcome-mode .ai-chat-log {
  display: none;
}

.ai-panel.ai-chat-mode .ai-hero-console {
  display: none;
}

.ai-panel.ai-chat-mode .ai-panel-card {
  grid-template-rows: auto auto 1fr auto auto;
}

.ai-message {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 22px;
  animation: aiMessageEnter 280ms var(--ease) both;
}

.ai-message.user {
  justify-content: flex-end;
}

.ai-message.assistant > img,
.ai-message.typing > img {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  margin-top: 3px;
  border-radius: 14px;
  object-fit: cover;
  box-shadow: 0 10px 24px rgba(5, 35, 81, 0.12), 0 0 18px rgba(24, 201, 239, 0.16);
}

.ai-message > div {
  max-width: min(78%, 760px);
  padding: 15px 16px;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.68);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.78), rgba(236, 249, 255, 0.48), rgba(255, 246, 224, 0.22));
  box-shadow:
    0 18px 46px rgba(10, 38, 84, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.84);
  backdrop-filter: blur(20px) saturate(175%);
  -webkit-backdrop-filter: blur(20px) saturate(175%);
}

.ai-message.user > div {
  color: #ffffff;
  border-color: rgba(24, 201, 239, 0.28);
  background: linear-gradient(135deg, rgba(10, 42, 91, 0.96), rgba(16, 125, 191, 0.92));
  box-shadow: 0 18px 44px rgba(6, 47, 111, 0.18);
}

.ai-message span {
  display: block;
  margin-bottom: 7px;
  color: rgba(8, 29, 79, 0.62);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.02em;
}

.ai-message.user span {
  color: rgba(255, 255, 255, 0.74);
}

.ai-message p {
  margin: 0;
  color: #112449;
  font-size: 0.98rem;
  line-height: 1.58;
}

.ai-message.user p {
  color: #ffffff;
}

.ai-thinking-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #33456b;
  font-weight: 850;
}

.ai-thinking-label i {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #18c9ef;
  box-shadow: 0 0 12px rgba(24, 201, 239, 0.45);
  animation: aiDot 1s ease-in-out infinite;
}

.ai-thinking-label i:nth-child(2) { animation-delay: 120ms; }
.ai-thinking-label i:nth-child(3) { animation-delay: 240ms; }

.ai-followups {
  position: relative;
  z-index: 3;
  display: flex;
  gap: 8px;
  margin: 0 clamp(16px, 4vw, 46px) 8px;
  padding: 4px 0 7px;
  overflow-x: auto;
  scrollbar-width: none;
}

.ai-composer {
  position: relative;
  z-index: 4;
  margin: 0 clamp(12px, 3vw, 32px) 14px;
  padding-bottom: max(0px, env(safe-area-inset-bottom));
}

.ai-composer-bar {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: end;
  gap: 9px;
  min-height: 64px;
  padding: 9px;
  border-radius: 26px;
  border: 1px solid rgba(255, 255, 255, 0.74);
  background: rgba(255, 255, 255, 0.72);
  box-shadow:
    0 20px 52px rgba(8, 34, 78, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(26px) saturate(185%);
  -webkit-backdrop-filter: blur(26px) saturate(185%);
}

.ai-composer textarea {
  width: 100%;
  max-height: 132px;
  min-height: 44px;
  padding: 12px 6px;
  resize: none;
  border: 0;
  outline: 0;
  color: #0b214f;
  background: transparent;
  font: inherit;
  font-size: 1rem;
  line-height: 1.35;
}

.ai-composer textarea::placeholder {
  color: rgba(30, 49, 88, 0.45);
}

.ai-tool-button,
.ai-send-button,
.ai-composer .primary-button {
  width: 46px;
  height: 46px;
  min-width: 46px;
  border-radius: 18px;
  display: grid;
  place-items: center;
}

.ai-tool-button small {
  display: none;
}

.ai-composer .primary-button {
  padding: 0;
  color: #ffffff;
  background: linear-gradient(135deg, #0b2a5b, #18aeea);
  box-shadow: 0 14px 30px rgba(24, 153, 220, 0.24);
  transform: translateY(-1px);
}

.ai-hero-console {
  position: relative;
  z-index: 2;
  overflow: auto;
  padding-bottom: 12px;
}

.ai-hero-visual img {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: drop-shadow(0 30px 58px rgba(7, 32, 74, 0.18)) drop-shadow(0 0 34px rgba(24, 201, 239, 0.2));
  animation: aiHeroFloat 5.5s ease-in-out infinite;
}

.ai-learning-card {
  padding: 17px;
  border-radius: 26px;
  border: 1px solid rgba(255, 255, 255, 0.68);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(236, 249, 255, 0.5));
  box-shadow: 0 18px 44px rgba(8, 34, 78, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.84);
}

.ai-option-grid {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.ai-option-grid button,
.ai-option-grid.readonly span {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 12px;
  border: 1px solid rgba(8, 45, 95, 0.08);
  border-radius: 18px;
  color: #102553;
  text-align: left;
  background: rgba(255, 255, 255, 0.74);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
  transition: transform 160ms var(--ease), box-shadow 160ms var(--ease), border-color 160ms var(--ease);
}

.ai-option-grid button:hover {
  transform: translateY(-1px);
  border-color: rgba(24, 201, 239, 0.34);
  box-shadow: 0 12px 26px rgba(24, 201, 239, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.ai-option-grid strong {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 13px;
  color: #09235a;
  background: linear-gradient(135deg, rgba(228, 250, 255, 0.96), rgba(255, 244, 211, 0.78));
}

.ai-option-grid.readonly span.correct {
  border-color: rgba(34, 197, 94, 0.38);
  background: rgba(236, 253, 245, 0.82);
}

.ai-option-grid.readonly span.selected:not(.correct) {
  border-color: rgba(239, 68, 68, 0.3);
  background: rgba(254, 242, 242, 0.82);
}

.ai-option-grid em {
  font-style: normal;
  color: #182c57;
}

@keyframes aiMessageEnter {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.99);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes aiDot {
  0%, 100% { opacity: 0.35; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-3px); }
}

@keyframes aiHeroFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-8px) scale(1.012); }
}

/* Home polish and smart AI response components */
.platform-home .platform-hero {
  background:
    radial-gradient(circle at 14% 0%, rgba(255, 255, 255, 0.52), transparent 26%),
    radial-gradient(circle at 88% 18%, rgba(24, 201, 239, 0.28), transparent 32%),
    radial-gradient(circle at 12% 100%, rgba(246, 197, 83, 0.23), transparent 30%),
    linear-gradient(135deg, rgba(9, 39, 92, 0.98), rgba(10, 116, 188, 0.96) 54%, rgba(27, 204, 237, 0.91));
  box-shadow:
    0 28px 82px rgba(9, 74, 136, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.58),
    inset 0 -34px 80px rgba(255, 255, 255, 0.08);
}

.platform-home .home-greeting {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  padding: 6px 10px;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.92);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(16px);
}

.platform-home .platform-brand-row h2,
.platform-home .platform-tagline,
.platform-home .hero-mantra {
  color: #ffffff;
  background: none;
  -webkit-text-fill-color: currentColor;
}

.platform-home .platform-brand-row h2 {
  text-shadow: 0 14px 42px rgba(3, 20, 56, 0.28);
}

.platform-home .platform-tagline {
  color: rgba(255, 255, 255, 0.86);
}

.platform-home .hero-mantra {
  color: rgba(255, 255, 255, 0.78);
}

.platform-home .hero-mantra span {
  color: #ffd983;
}

.home-xp-progress {
  padding: 12px 13px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.24);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 12px 32px rgba(5, 33, 83, 0.16);
}

.home-xp-progress span {
  color: rgba(255, 255, 255, 0.76);
  font-weight: 950;
}

.home-xp-progress strong {
  color: #ffffff;
  font-weight: 950;
}

.home-xp-progress div {
  height: 11px;
  background: rgba(255, 255, 255, 0.2);
}

.home-xp-progress i {
  background: linear-gradient(90deg, #ffd36f, #ffffff, #46e6ff);
  box-shadow: 0 0 18px rgba(70, 230, 255, 0.42);
  transition: width 850ms cubic-bezier(.2,.8,.2,1);
}

.platform-home .hero-mini-stats article {
  min-height: 0;
  padding: 8px 6px;
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

.platform-home .hero-mini-stats article:nth-child(2) {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(255, 220, 135, 0.22));
}

.platform-home .hero-mini-stats article:nth-child(2) strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 4px 8px;
  border-radius: 999px;
  color: #08235a;
  background: linear-gradient(135deg, #fff8df, #ffd36f);
  box-shadow: 0 8px 20px rgba(255, 211, 111, 0.24);
}

.platform-home .hero-mini-stats span {
  color: rgba(255, 255, 255, 0.7);
}

.platform-home .hero-mini-stats strong {
  color: #ffffff;
}

.hero-daily-chip {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 217, 131, 0.25), transparent 40%),
    rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.26), 0 14px 34px rgba(5, 33, 83, 0.14);
}

.hero-daily-chip::before {
  content: "Quest";
  display: inline-grid;
  place-items: center;
  width: fit-content;
  margin-bottom: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  color: #08235a;
  background: #ffd36f;
  font-size: 0.58rem;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.hero-daily-chip span,
.hero-daily-chip strong,
.hero-daily-chip small {
  color: #ffffff;
}

.platform-home .continue-learning-card {
  border-color: rgba(8, 153, 223, 0.12);
}

.platform-home .continue-learning-card::before {
  content: "";
  position: absolute;
  inset: 9px auto 9px 9px;
  width: 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, #18c9ef, #d6a84f);
  box-shadow: 0 0 18px rgba(24, 201, 239, 0.22);
}

.platform-home .continue-learning-card > div {
  padding-left: 8px;
}

.platform-home .quick-access-card {
  --accent: #10b981;
  --accent-soft: rgba(16, 185, 129, 0.12);
  border-color: rgba(8, 24, 56, 0.08);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.68)),
    radial-gradient(circle at 100% 0%, var(--accent-soft), transparent 42%);
}

.platform-home .quick-access-card:nth-child(2) { --accent: #8b5cf6; --accent-soft: rgba(139, 92, 246, 0.12); }
.platform-home .quick-access-card:nth-child(3) { --accent: #f97316; --accent-soft: rgba(249, 115, 22, 0.13); }
.platform-home .quick-access-card:nth-child(4) { --accent: #06b6d4; --accent-soft: rgba(6, 182, 212, 0.15); }

.platform-home .quick-access-card::before {
  background: var(--accent);
  box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 42%, transparent);
}

.platform-home .quick-icon {
  color: var(--accent);
  background:
    radial-gradient(circle at 35% 20%, rgba(255, 255, 255, 0.95), transparent 38%),
    color-mix(in srgb, var(--accent) 14%, white);
  border-color: color-mix(in srgb, var(--accent) 22%, white);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 12px 24px color-mix(in srgb, var(--accent) 14%, transparent);
}

.platform-home .quick-access-card em {
  color: var(--accent);
  background: none;
  -webkit-text-fill-color: currentColor;
}

.platform-home .quick-access-card:active em {
  transform: translateX(5px) scale(1.05);
}

.ai-floating-button {
  animation: aiOrbBreathe 4.2s ease-in-out infinite;
}

.ai-bubble {
  transform-origin: right bottom;
  animation: aiBubbleSoft 4.2s ease-in-out 1;
}

.bottom-nav-item.active {
  font-weight: 950;
  opacity: 1;
  box-shadow:
    0 10px 32px rgba(24, 201, 239, 0.24),
    0 0 24px rgba(24, 201, 239, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.bottom-nav-item.active span {
  filter: drop-shadow(0 0 8px rgba(24, 201, 239, 0.5));
}

.bottom-nav-item:not(.active) {
  opacity: 0.62;
}

.ai-smart-card {
  display: grid;
  gap: 13px;
  padding: 16px;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  background:
    radial-gradient(circle at 100% 0%, rgba(24, 201, 239, 0.1), transparent 36%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.86), rgba(237, 250, 255, 0.56), rgba(255, 246, 224, 0.24));
  box-shadow: 0 18px 42px rgba(8, 34, 78, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.ai-smart-card h3 {
  margin: 0;
  color: #081d4f;
  font-size: 1.05rem;
}

.ai-smart-card p {
  margin: 0;
}

.ai-highlight-chips {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}

.ai-highlight-chips span {
  display: inline-flex;
  width: fit-content;
  margin: 0;
  padding: 5px 8px;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 950;
  color: #0a275a;
  background: rgba(231, 247, 255, 0.84);
}

.ai-highlight-chips .green { background: rgba(220, 252, 231, 0.9); color: #065f46; }
.ai-highlight-chips .gold { background: rgba(255, 247, 214, 0.95); color: #7a4b05; }
.ai-highlight-chips .orange { background: rgba(255, 237, 213, 0.95); color: #9a3412; }
.ai-highlight-chips .red { background: rgba(254, 226, 226, 0.95); color: #991b1b; }
.ai-highlight-chips .cyan { background: rgba(207, 250, 254, 0.9); color: #155e75; }

.ai-bullet-cards {
  display: grid;
  gap: 8px;
}

.ai-bullet-cards article,
.ai-checklist label,
.ai-viva-prompts article,
.ai-reasoning-flow article,
.ai-progress-dashboard article {
  display: grid;
  gap: 6px;
  padding: 10px 11px;
  border-radius: 16px;
  border: 1px solid rgba(8, 35, 79, 0.06);
  background: rgba(255, 255, 255, 0.68);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.84);
}

.ai-bullet-cards article {
  grid-template-columns: auto 1fr;
}

.ai-bullet-cards span,
.ai-checklist span {
  color: #0899df;
  font-weight: 950;
}

.ai-table-wrap {
  width: 100%;
  overflow-x: auto;
  border-radius: 18px;
  border: 1px solid rgba(8, 35, 79, 0.08);
}

.ai-premium-table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.76);
}

.ai-premium-table th,
.ai-premium-table td {
  padding: 11px;
  border-bottom: 1px solid rgba(8, 35, 79, 0.07);
  color: #102553;
  text-align: left;
  vertical-align: top;
  font-size: 0.86rem;
}

.ai-premium-table th {
  color: #06245a;
  background: linear-gradient(135deg, rgba(232, 249, 255, 0.92), rgba(255, 247, 224, 0.72));
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.ai-checklist {
  display: grid;
  gap: 8px;
}

.ai-checklist label {
  grid-template-columns: auto 1fr;
}

.ai-viva-prompts,
.ai-reasoning-flow,
.ai-progress-dashboard > div {
  display: grid;
  gap: 9px;
}

.ai-reasoning-flow {
  grid-template-columns: repeat(5, minmax(130px, 1fr));
  overflow-x: auto;
}

.ai-reasoning-flow article span,
.ai-progress-dashboard article span,
.ai-viva-prompts strong {
  color: #607089;
  font-size: 0.68rem;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.ai-progress-dashboard > div {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ai-progress-dashboard strong {
  color: #081d4f;
  font-size: 1rem;
}

.ai-sources {
  margin-top: 12px;
  padding: 10px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.58);
  border: 1px solid rgba(8, 35, 79, 0.07);
}

.ai-sources summary {
  cursor: pointer;
  color: #102553;
  font-size: 0.78rem;
  font-weight: 950;
}

.ai-sources a {
  display: grid;
  gap: 2px;
  margin-top: 8px;
  color: #0a5f95;
  text-decoration: none;
}

.ai-sources a span {
  margin: 0;
  color: #607089;
  font-size: 0.68rem;
}

@keyframes aiOrbBreathe {
  0%, 100% { transform: translate(var(--ai-orb-x, 0), var(--ai-orb-y, 0)) scale(1); }
  50% { transform: translate(var(--ai-orb-x, 0), var(--ai-orb-y, 0)) scale(1.045); }
}

@keyframes aiBubbleSoft {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50% { transform: translateY(-3px); opacity: 0.96; }
}

/* Compact liquid-glass Home refinement */
.app-shell {
  padding-top: calc(env(safe-area-inset-top, 0px) + 8px);
  padding-bottom: 96px;
}

.topbar {
  top: calc(env(safe-area-inset-top, 0px) + 6px);
  min-height: 48px;
  margin-bottom: 10px;
  padding: 5px 7px;
  border-radius: 18px;
  border-color: rgba(255, 255, 255, 0.62);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(229, 248, 255, 0.42), rgba(255, 243, 213, 0.24));
  box-shadow:
    0 14px 42px rgba(12, 38, 78, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(26px) saturate(190%);
  -webkit-backdrop-filter: blur(26px) saturate(190%);
  overflow: visible;
}

.topbar::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 0 34%, rgba(255, 255, 255, 0.5) 48%, transparent 62% 100%);
  transform: translateX(-120%);
  animation: compactHeaderShimmer 5.8s ease-out 1;
}

.brand-lockup {
  gap: 7px;
}

.brand-logo {
  width: 28px;
  height: 28px;
  border-radius: 8px;
}

.brand-lockup h1, .brand-lockup .brand-title {
  font-size: 0.98rem;
  line-height: 1;
}

.brand-subtitle {
  font-size: 0.58rem;
  line-height: 1;
}

.top-actions {
  gap: 6px;
}

.top-actions .icon-button {
  width: 34px;
  height: 34px;
  border-radius: 13px;
}

.top-actions #adminOpen,
.top-actions #soundToggle {
  display: none;
}

.profile-button {
  min-height: 34px;
  padding: 4px 8px 4px 4px;
}

.profile-avatar {
  width: 26px;
  height: 26px;
  overflow: hidden;
}

.profile-avatar img,
.profile-photo-preview img,
.friend-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.profile-copy strong {
  max-width: 92px;
  font-size: 0.72rem;
}

.profile-copy small {
  font-size: 0.58rem;
}

.platform-home.active {
  gap: 8px;
}

.platform-home .platform-hero {
  min-height: 0;
  gap: 8px;
  padding: 12px;
  border-radius: 30px;
  border-color: rgba(255, 255, 255, 0.34);
  background:
    radial-gradient(circle at 16% 12%, rgba(255, 255, 255, 0.28), transparent 28%),
    radial-gradient(circle at 82% 10%, rgba(24, 201, 239, 0.34), transparent 34%),
    radial-gradient(circle at 72% 86%, rgba(246, 197, 83, 0.18), transparent 30%),
    linear-gradient(135deg, #06142f 0%, #0a2a66 42%, #0e70b8 70%, #16c7e8 118%);
  box-shadow:
    0 28px 78px rgba(5, 22, 58, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.52),
    inset 0 -28px 70px rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(30px) saturate(190%);
  -webkit-backdrop-filter: blur(30px) saturate(190%);
  animation: medHeroAurora 9s ease-in-out infinite;
}

.platform-home .platform-hero::before {
  background:
    linear-gradient(118deg, transparent 0 34%, rgba(255, 255, 255, 0.3) 45%, transparent 58% 100%),
    radial-gradient(circle at var(--aurora-x, 72%) 28%, rgba(98, 230, 255, 0.2), transparent 34%);
  animation: liquidShimmer 8.5s ease-in-out infinite;
}

.platform-home .platform-hero::after {
  inset: 10px;
  height: auto;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 24px;
  background:
    radial-gradient(circle at 22% 30%, rgba(255, 255, 255, 0.08) 0 1px, transparent 2px),
    radial-gradient(circle at 62% 42%, rgba(255, 255, 255, 0.1) 0 1px, transparent 2px);
  background-size: 72px 72px, 96px 96px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
  opacity: 0.85;
}

.platform-home .platform-brand-row {
  gap: 10px;
}

.platform-home .hero-logo-glow {
  width: 44px;
  height: 44px;
  border-radius: 15px;
}

.platform-home .hero-logo-glow img {
  border-radius: 13px;
}

.platform-home .home-greeting {
  max-width: min(68vw, 360px);
  margin-bottom: 3px;
  padding: 4px 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.68rem;
}

.platform-home .platform-brand-row h2 {
  margin-bottom: 2px;
  font-size: clamp(1.55rem, 7vw, 2.15rem);
}

.platform-home .platform-tagline,
.platform-home .hero-mantra {
  font-size: 0.66rem;
  line-height: 1.1;
}

.platform-home .home-xp-progress {
  margin-top: 5px;
  padding: 8px 9px;
  border-radius: 15px;
}

.home-xp-progress div {
  height: 9px;
}

.home-xp-progress span,
.home-xp-progress strong {
  font-size: 0.62rem;
}

.platform-home .hero-mini-stats {
  gap: 5px;
  margin-top: 5px;
}

.platform-home .hero-mini-stats article {
  padding: 6px 4px;
  border-radius: 999px;
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
}

.platform-home .hero-mini-stats span {
  font-size: 0.48rem;
}

.platform-home .hero-mini-stats strong {
  font-size: 0.66rem;
}

.hero-daily-chip {
  margin-top: 5px;
  padding: 7px 8px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 90% 10%, rgba(255, 211, 111, 0.25), transparent 42%),
    rgba(255, 255, 255, 0.14);
}

.hero-daily-chip::before {
  display: none;
}

.hero-daily-chip span {
  padding: 4px 7px;
  font-size: 0.5rem;
}

.hero-daily-chip strong {
  font-size: 0.67rem;
}

.hero-daily-chip small {
  font-size: 0.56rem;
}

.platform-home .continue-learning-card {
  min-height: 0;
  padding: 9px 10px;
  border-radius: 17px;
  box-shadow:
    0 14px 38px rgba(12, 38, 78, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.platform-home .continue-learning-card h3 {
  font-size: 0.84rem;
}

.platform-home .continue-learning-card p {
  max-width: 58vw;
  font-size: 0.62rem;
}

.platform-home .continue-learning-card .ghost-button {
  min-height: 31px;
  padding-inline: 9px;
  border-radius: 12px;
  font-size: 0.68rem;
}

.platform-home .quick-access-grid {
  gap: 7px;
}

.platform-home .quick-access-card {
  min-height: 68px;
  padding: 9px;
  border-radius: 16px;
  box-shadow:
    0 12px 32px rgba(12, 38, 78, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.84);
}

.platform-home .quick-access-card::before {
  inset: 9px auto 9px 0;
  width: 3px;
  border-radius: 999px;
  opacity: 0.9;
}

.platform-home .quick-icon {
  width: 28px;
  height: 28px;
  border-radius: 11px;
  font-size: 0.72rem;
}

.platform-home .quick-access-card strong {
  font-size: 0.72rem;
}

.platform-home .quick-access-card small {
  font-size: 0.56rem;
  line-height: 1.16;
}

.platform-home .quick-access-card em {
  width: 23px;
  height: 23px;
  font-size: 0.72rem;
}

.bottom-nav {
  min-height: 62px;
  padding: 7px 9px calc(7px + env(safe-area-inset-bottom, 0px));
  border-radius: 24px;
}

.bottom-nav-item {
  min-height: 44px;
  border-radius: 18px;
  transition: transform 210ms var(--ease), background 240ms var(--ease), box-shadow 240ms var(--ease), opacity 180ms var(--ease);
}

.bottom-nav-item.active {
  transform: translateY(-1px);
}

.ai-floating-button {
  right: calc(16px + env(safe-area-inset-right, 0px));
  bottom: calc(76px + env(safe-area-inset-bottom, 0px));
}

@keyframes compactHeaderShimmer {
  0%, 28% { transform: translateX(-120%); }
  70%, 100% { transform: translateX(120%); }
}

@keyframes medHeroAurora {
  0%, 100% { filter: saturate(1) brightness(1); }
  50% { filter: saturate(1.16) brightness(1.04); }
}

.profile-photo-panel {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.62);
  background: linear-gradient(135deg, rgba(255,255,255,0.82), rgba(231,248,255,0.48));
  box-shadow: 0 16px 42px rgba(10, 38, 84, 0.09), inset 0 1px 0 rgba(255,255,255,0.88);
}

.profile-photo-preview,
.friend-avatar {
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 999px;
  color: #ffffff;
  font-weight: 950;
  background: linear-gradient(135deg, #081d4f, #18c9ef);
  box-shadow: 0 14px 34px rgba(24, 201, 239, 0.18);
}

.profile-photo-preview {
  width: 74px;
  height: 74px;
  font-size: 1.2rem;
}

.profile-upload-button {
  display: inline-flex;
  width: fit-content;
  margin-top: 8px;
}

#profileUploadStatus {
  display: block;
  margin-top: 7px;
  color: #607089;
  font-size: 0.72rem;
  font-weight: 800;
}

.friends-panel {
  gap: 12px;
}

.friend-search-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
}

.friend-search-row input {
  min-height: 42px;
  border: 1px solid rgba(8, 35, 79, 0.08);
  border-radius: 15px;
  padding: 0 12px;
  background: rgba(255,255,255,0.78);
  outline: 0;
}

.friend-section h4 {
  margin: 8px 0 7px;
  color: #081d4f;
  font-size: 0.82rem;
}

.friend-list {
  display: grid;
  gap: 8px;
}

.friend-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 17px;
  border: 1px solid rgba(8, 35, 79, 0.06);
  background: rgba(255, 255, 255, 0.7);
}

.friend-avatar {
  width: 38px;
  height: 38px;
  font-size: 0.78rem;
}

.friend-card strong {
  display: block;
  color: #081d4f;
  font-size: 0.86rem;
}

.friend-card small {
  color: #607089;
  font-size: 0.68rem;
  font-weight: 800;
}

.battle-friends-panel {
  margin: clamp(14px, 2.4vw, 24px) 0;
  padding: clamp(14px, 2.4vw, 22px);
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, 0.58);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.78), rgba(223, 249, 255, 0.42), rgba(255, 242, 205, 0.28)),
    rgba(255, 255, 255, 0.6);
  box-shadow:
    0 24px 70px rgba(12, 35, 78, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(24px) saturate(170%);
}

.battle-friends-badge {
  padding: 8px 12px;
  border-radius: 999px;
  color: #0b2a5b;
  background: rgba(24, 201, 239, 0.12);
  border: 1px solid rgba(24, 201, 239, 0.22);
  font-size: 0.72rem;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.battle-friends-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.battle-friend-card {
  position: relative;
  overflow: hidden;
  display: grid;
  align-content: start;
  gap: 12px;
  min-height: 170px;
  padding: 14px;
  border-radius: 22px;
  border: 1px solid rgba(8, 35, 79, 0.08);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.86), rgba(243, 251, 255, 0.58)),
    rgba(255, 255, 255, 0.74);
  box-shadow:
    0 18px 46px rgba(12, 35, 78, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

.battle-friend-card::after {
  content: "";
  position: absolute;
  inset: -40% 40% auto -20%;
  height: 120px;
  transform: rotate(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.78), transparent);
  opacity: 0.34;
  pointer-events: none;
}

.battle-friend-card.wide {
  grid-column: 1 / -1;
}

.battle-friend-icon {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 15px;
  color: #0b2a5b;
  background: rgba(24, 201, 239, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.battle-friend-card strong {
  color: #081d4f;
  font-size: 1rem;
  font-weight: 950;
}

.battle-friend-card p {
  margin: 4px 0 0;
  color: #607089;
  font-size: 0.78rem;
  line-height: 1.45;
  font-weight: 750;
}

.battle-friend-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.battle-challenge-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.battle-challenge-controls select,
.friend-search-row input {
  min-height: 40px;
  border-radius: 15px;
  border: 1px solid rgba(8, 35, 79, 0.1);
  background: rgba(255, 255, 255, 0.78);
  color: #081d4f;
  font-weight: 850;
  padding: 0 12px;
  outline: none;
}

.battle-friend-row {
  background: rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(18px);
}

.compact-action {
  min-height: 36px;
  padding: 0 13px;
  border-radius: 14px;
  font-size: 0.76rem;
}

.meddex-os-card {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  width: min(420px, calc(100vw - 42px));
  min-height: 430px;
  padding: 34px 26px 24px;
  border-radius: 38px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.84), rgba(228, 249, 255, 0.5), rgba(255, 243, 208, 0.28)),
    rgba(255, 255, 255, 0.66);
  box-shadow:
    0 34px 110px rgba(9, 30, 72, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(30px) saturate(190%);
}

.meddex-os-card::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background:
    linear-gradient(118deg, rgba(255, 255, 255, 0.82), transparent 26%, rgba(24, 201, 239, 0.13) 56%, rgba(245, 194, 76, 0.14));
  opacity: 0.86;
  pointer-events: none;
  animation: osGlassSweep 2.6s ease-in-out infinite;
}

.meddex-os-card > * {
  position: relative;
  z-index: 1;
}

.app-splash .meddex-os-card img {
  width: 112px;
  height: 112px;
  border-radius: 28px;
  box-shadow:
    0 22px 64px rgba(11, 42, 91, 0.16),
    0 0 58px rgba(214, 168, 79, 0.22);
  animation: osLogoFloat 1.8s ease-in-out infinite;
}

.os-eyebrow {
  margin: 18px 0 0;
  color: #b38427;
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.app-splash .meddex-os-card h2 {
  margin-top: 4px;
  color: #071a4c;
  font-size: clamp(1.7rem, 7vw, 2.35rem);
  letter-spacing: 0.06em;
}

.app-splash .meddex-os-card p:not(.os-eyebrow) {
  min-height: 1.45em;
  color: #52627d;
  font-size: 0.92rem;
}

.os-boot-lines {
  display: grid;
  gap: 5px;
  width: min(290px, 80vw);
  min-height: 84px;
  margin: 10px 0 14px;
}

.os-boot-lines span {
  position: relative;
  padding-left: 20px;
  color: rgba(8, 29, 79, 0.76);
  font-size: 0.76rem;
  font-weight: 850;
  animation: osLineIn 260ms var(--ease) both;
}

.os-boot-lines span::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #0aa47f;
}

.app-splash .meddex-os-card .nfc-progress {
  width: min(300px, 78vw);
  height: 10px;
  background: rgba(8, 35, 79, 0.08);
}

.app-splash .meddex-os-card .nfc-progress i {
  transition: width 220ms var(--ease);
  background:
    linear-gradient(90deg, #d6a84f, #23d0ff 55%, #0b5fe8),
    linear-gradient(90deg, rgba(255, 255, 255, 0.44), transparent);
  box-shadow: 0 0 22px rgba(24, 201, 239, 0.42);
}

.app-splash .meddex-os-card strong {
  margin-top: 13px;
  min-height: 1.3em;
}

.os-skip {
  margin-top: 8px;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
}

.os-particles i {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: rgba(24, 201, 239, 0.45);
  box-shadow: 0 0 18px rgba(24, 201, 239, 0.5);
  animation: osParticle 3.8s ease-in-out infinite;
}

.os-particles i:nth-child(1) { left: 18%; top: 28%; animation-delay: -0.2s; }
.os-particles i:nth-child(2) { left: 74%; top: 24%; animation-delay: -1s; background: rgba(214, 168, 79, 0.42); }
.os-particles i:nth-child(3) { left: 64%; top: 72%; animation-delay: -1.8s; }
.os-particles i:nth-child(4) { left: 25%; top: 68%; animation-delay: -2.4s; background: rgba(214, 168, 79, 0.4); }
.os-particles i:nth-child(5) { left: 84%; top: 54%; animation-delay: -3s; }

@keyframes osLogoFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-5px) scale(1.025); }
}

@keyframes osLineIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes osGlassSweep {
  0%, 100% { opacity: 0.66; transform: translateX(-2%); }
  50% { opacity: 0.96; transform: translateX(2%); }
}

@keyframes osParticle {
  0%, 100% { transform: translate3d(0, 0, 0) scale(0.75); opacity: 0.28; }
  50% { transform: translate3d(8px, -14px, 0) scale(1); opacity: 0.9; }
}

@media (max-width: 760px) {
  .battle-friends-grid {
    grid-template-columns: 1fr;
  }

  .battle-friend-card.wide {
    grid-column: auto;
  }

  .battle-friend-toolbar {
    display: grid;
  }

  .battle-challenge-controls {
    justify-content: stretch;
  }

  .battle-challenge-controls select {
    flex: 1 1 145px;
  }

  .meddex-os-card {
    min-height: 400px;
    border-radius: 32px;
    padding: 28px 20px 22px;
  }
}

@media (max-width: 760px) {
  .ai-panel {
    padding: max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom));
  }

  .ai-panel-card {
    width: calc(100vw - 16px);
    height: calc(100dvh - max(16px, env(safe-area-inset-top)) - max(16px, env(safe-area-inset-bottom)));
    border-radius: 28px;
  }

  .ai-panel-head {
    min-height: 64px;
    margin: 8px 8px 6px;
    padding: 8px 10px;
    border-radius: 22px;
  }

  .ai-title-lockup img {
    width: 42px;
    height: 42px;
    border-radius: 16px;
  }

  .ai-panel-head p:not(.eyebrow) {
    font-size: 0.68rem;
  }

  .ai-head-call,
  .ai-head-settings,
  .ai-panel-head .icon-button {
    width: 38px;
    height: 38px;
    border-radius: 15px;
  }

  .ai-head-settings {
    display: none;
  }

  .ai-quick-actions {
    margin-inline: 12px;
  }

  .ai-chat-log {
    padding: 14px 12px 18px;
  }

  .ai-message {
    gap: 8px;
    margin-bottom: 18px;
  }

  .ai-message > div {
    max-width: 82%;
    padding: 13px 14px;
    border-radius: 22px;
  }

  .ai-message.user > div {
    max-width: 78%;
  }

  .ai-message p {
    font-size: 0.94rem;
  }

  .ai-followups {
    margin-inline: 12px;
  }

  .ai-composer {
    margin-inline: 8px;
    margin-bottom: 8px;
  }

  .ai-composer-bar {
    min-height: 60px;
    border-radius: 24px;
    gap: 6px;
  }

  .ai-tool-button,
  .ai-composer .primary-button {
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 16px;
  }

  .ai-progress-dashboard > div {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* Baihaqi AI mascot state system */
.baihaqi-mascot-img {
  object-fit: contain !important;
  object-position: center !important;
  background: transparent !important;
  border: 0 !important;
  filter: drop-shadow(0 18px 34px rgba(2, 132, 199, 0.16)) drop-shadow(0 0 18px rgba(245, 183, 54, 0.13));
  transition: transform 220ms cubic-bezier(.2, .8, .2, 1), filter 220ms ease, opacity 180ms ease;
}

/* Container holds BOTH mascot and speech bubble as a single fixed layout component */
.ai-companion-container {
  --ai-orb-x: 0px;
  --ai-orb-y: 0px;
  position: fixed !important;
  right: 18px !important;
  bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
  z-index: 13000 !important;
  width: clamp(78px, 18vw, 104px) !important;
  height: clamp(78px, 18vw, 104px) !important;
  transform: translate3d(var(--ai-orb-x), var(--ai-orb-y), 0px) !important;
  transition: transform 520ms cubic-bezier(.2, .9, .18, 1), opacity 220ms ease, scale 220ms ease !important;
  will-change: transform, opacity, scale;
  pointer-events: none; /* Let pointer events pass through to child elements */
}

/* Visibility states of the entire container */
.ai-companion-container.hidden,
.ai-companion-container.mascot-hidden,
.ai-companion-container.hide-for-modal {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translate3d(var(--ai-orb-x), var(--ai-orb-y), 0px) scale(0.8) translateY(20px) !important;
  visibility: hidden !important;
}

.ai-companion-container.dragging {
  scale: 1.05 !important;
  transition: none !important;
}

.ai-companion-container.is-scrolling {
  opacity: .64 !important;
  scale: .84 !important;
}

/* Mascot floating button child */
.ai-floating-button {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background:
    radial-gradient(circle at 45% 28%, rgba(255, 255, 255, 0.96), rgba(225, 247, 255, 0.78) 58%, rgba(246, 197, 83, 0.38)) !important;
  box-shadow: 0 18px 44px rgba(5, 35, 81, 0.18), 0 0 0 1px rgba(255, 255, 255, 0.85), 0 0 42px rgba(24, 201, 239, 0.28) !important;
  pointer-events: auto !important;
  cursor: grab;
  transform: none !important;
  transition: scale 180ms ease, box-shadow 260ms ease !important;
  z-index: 2 !important;
  animation: premiumFloat 6s ease-in-out infinite, premiumPulse 4s ease-in-out infinite !important;
}

.ai-floating-button:active,
.ai-companion-container.dragging .ai-floating-button {
  cursor: grabbing !important;
  scale: 0.96 !important;
}

.ai-floating-button .baihaqi-mascot-img {
  width: 86% !important;
  height: 86% !important;
  margin: 7% !important;
  object-fit: contain !important;
  border-radius: 999px !important;
  filter: drop-shadow(0 12px 18px rgba(3, 17, 45, 0.18)) !important;
  animation: aiOrbBreath 4.8s ease-in-out infinite !important;
}

.ai-floating-button::after {
  content: "" !important;
  position: absolute !important;
  inset: -8px !important;
  border-radius: inherit !important;
  background: radial-gradient(circle, rgba(56, 189, 248, .2), rgba(245, 183, 54, .08) 48%, transparent 70%) !important;
  opacity: .72 !important;
  z-index: -1 !important;
  animation: mascotAura 4.8s ease-in-out infinite !important;
}

.ai-floating-button .ai-ring {
  position: absolute !important;
  inset: -8px !important;
  border-radius: inherit !important;
  border: 1px solid rgba(24, 201, 239, 0.42) !important;
  animation: aiPulseRing 2.8s ease-out infinite !important;
  pointer-events: none !important;
}

/* Custom mascot animations */
.ai-floating-button[data-mascot-state="thinking"] .baihaqi-mascot-img,
.ai-floating-button[data-mascot-state="loading"] .baihaqi-mascot-img {
  animation: mascotThink 1.6s ease-in-out infinite !important;
}

.ai-floating-button[data-mascot-state="correct"] .baihaqi-mascot-img,
.ai-floating-button[data-mascot-state="celebration"] .baihaqi-mascot-img {
  animation: mascotPop 780ms cubic-bezier(.16, 1, .3, 1) !important;
}

/* Speech Bubble child */
#aiBubble.ai-bubble {
  position: absolute !important;
  bottom: 110% !important; /* Positioned directly above the mascot */
  right: 10px !important; /* Offset upper-left relative to container */
  left: auto !important;
  top: auto !important;
  z-index: 10 !important;
  pointer-events: auto !important;
  
  display: flex !important;
  align-items: flex-start !important;
  gap: 6px !important;
  min-width: 180px !important;
  max-width: 280px !important;
  padding: 12px 14px !important;
  border-radius: 20px 20px 4px 20px !important;

  /* Glassmorphism/premium layout style */
  background: rgba(255, 255, 255, 0.96) !important;
  border: 1px solid rgba(255, 255, 255, 0.75) !important;
  box-shadow:
    0 12px 30px rgba(7, 31, 73, 0.16),
    0 4px 10px rgba(7, 31, 73, 0.08),
    inset 0 1px 0 rgba(255,255,255,0.9) !important;
  backdrop-filter: blur(16px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%) !important;

  font-size: 0.83rem !important;
  font-weight: 550 !important;
  line-height: 1.45 !important;
  color: #0c2340 !important;
  white-space: normal !important;
  word-break: break-word !important;
  
  /* Typewriter clamp constraints */
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  
  /* Smooth transitions */
  opacity: 0 !important;
  transform: translateY(8px) scale(0.95) !important;
  transform-origin: bottom right !important;
  transition:
    opacity 450ms cubic-bezier(0.34, 1.56, 0.64, 1),
    transform 450ms cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  will-change: opacity, transform !important;
}

#aiBubble.ai-bubble.is-contextual {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
}

#aiBubble.ai-bubble.is-hiding {
  opacity: 0 !important;
  transform: translateY(8px) scale(0.95) !important;
}

#aiBubble.ai-bubble.hidden {
  opacity: 0 !important;
  display: none !important;
}

/* Speech bubble tail pointer pointing down-right at mascot */
#aiBubble.ai-bubble::after {
  content: "" !important;
  position: absolute !important;
  bottom: -6px !important;
  right: 28px !important; /* Centered relative to mascot center line */
  top: auto !important;
  left: auto !important;
  width: 12px !important;
  height: 12px !important;
  background: rgba(255, 255, 255, 0.96) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.75) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.75) !important;
  transform: rotate(45deg) !important;
  pointer-events: none !important;
}

/* Tour Mode override: temporarily treat as fixed viewport element */
body.ai-tour-active #aiBubble {
  position: fixed !important;
}

body.ai-tour-active .ai-floating-button {
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

/* Mobile responsive constraints to keep bubble inside viewport on smaller screens */
@media (max-width: 480px) {
  #aiBubble.ai-bubble {
    right: 2px !important; /* Shift leftwards to avoid edge overflow */
    max-width: 230px !important;
  }
  #aiBubble.ai-bubble::after {
    right: 36px !important; /* Adjust tail offset relative to shift */
  }
}

.ai-title-lockup .baihaqi-mascot-img {
  width: 48px !important;
  height: 48px !important;
  border-radius: 18px !important;
}

.ai-hero-visual .baihaqi-mascot-img {
  max-height: 150px !important;
  width: min(38vw, 180px) !important;
  border-radius: 0 !important;
}

.ai-message-mascot {
  width: 34px !important;
  height: 34px !important;
  border-radius: 14px !important;
  flex: 0 0 34px !important;
}

.unlock-ai-note .baihaqi-mascot-img {
  width: 48px !important;
  height: 48px !important;
  border-radius: 18px !important;
}

.ai-call-orb .baihaqi-mascot-img {
  width: min(42vw, 210px) !important;
  height: min(42vw, 210px) !important;
  border-radius: 999px !important;
}

.ai-call-screen[data-call-state="listening"] .ai-call-orb .baihaqi-mascot-img,
.ai-call-screen[data-call-state="speaking"] .ai-call-orb .baihaqi-mascot-img {
  animation: mascotSpeaking 1.15s ease-in-out infinite;
}

.ai-mode-setup-card,
.ai-quiz-card,
.ai-viva-card,
.ai-checklist-card {
  background:
    linear-gradient(140deg, rgba(255,255,255,.9), rgba(235,249,255,.58), rgba(255,247,222,.24)),
    rgba(255,255,255,.68) !important;
  border: 1px solid rgba(255,255,255,.74) !important;
  box-shadow: 0 22px 62px rgba(7, 31, 73, .11), inset 0 1px 0 rgba(255,255,255,.9) !important;
}

.ai-option-grid button {
  min-height: 54px !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,.76) !important;
  border: 1px solid rgba(209, 226, 242, .9) !important;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.ai-option-grid button:hover,
.ai-option-grid button:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(37, 177, 235, .58) !important;
  box-shadow: 0 12px 30px rgba(37, 177, 235, .12);
}

.ai-quiz-feedback-card.correct {
  box-shadow: 0 24px 70px rgba(16, 185, 129, .14), inset 0 1px 0 rgba(255,255,255,.9) !important;
}

.ai-quiz-feedback-card.incorrect {
  box-shadow: 0 24px 70px rgba(244, 63, 94, .12), inset 0 1px 0 rgba(255,255,255,.9) !important;
}

.ai-tour-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(3, 18, 43, .28);
  backdrop-filter: blur(10px) saturate(130%);
  -webkit-backdrop-filter: blur(10px) saturate(130%);
}

.ai-tour-overlay.hidden {
  display: none;
}

.ai-tour-spotlight {
  position: fixed;
  left: var(--spot-x, 50%);
  top: var(--spot-y, 50%);
  width: var(--spot-w, 120px);
  height: var(--spot-h, 90px);
  transform: translate(-50%, -50%);
  border-radius: 26px;
  box-shadow: 0 0 0 9999px rgba(2, 12, 27, .28), 0 0 44px rgba(74, 201, 255, .34);
  border: 1px solid rgba(255,255,255,.72);
  pointer-events: none;
}

.ai-tour-card {
  position: fixed;
  left: max(16px, env(safe-area-inset-left));
  right: max(16px, env(safe-area-inset-right));
  top: var(--tour-top, calc(100vh - 300px));
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  align-items: center;
  padding: 16px;
  padding-right: min(118px, 30vw);
  border-radius: 28px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.88), rgba(231,248,255,.68), rgba(255,246,219,.34)),
    rgba(255,255,255,.72);
  border: 1px solid rgba(255,255,255,.78);
  box-shadow: 0 28px 90px rgba(4, 21, 48, .2), inset 0 1px 0 rgba(255,255,255,.9);
}

/* NATIVE ONLY (Capacitor). Some Android System WebViews (Chrome 80-84) do not
   stretch a position:fixed grid element between left+right, collapsing it to a
   shrink-to-fit width. Force an explicit centered width so the onboarding card
   renders full width on the device. The `capacitor-native` class is set on
   <html> by the native bridge, so the web (meddex.my) is unaffected. */
/* NATIVE ONLY: `backdrop-filter` on the overlay establishes a containing block
   for its position:fixed children in Chromium, so the coach card was positioned
   relative to (and clipped by) the overlay box instead of the viewport on the
   Android WebView. Dropping the filter restores viewport-relative fixed
   positioning; a stronger solid dim compensates for the lost blur. Web keeps
   the blur (this selector only matches inside the native app). */
:root.capacitor-native .ai-tour-overlay {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: rgba(3, 18, 43, .55);
}

:root.capacitor-native .ai-tour-card {
  right: auto;
  width: min(560px, calc(100vw - 32px));
  /* Pin the coach card to a fixed, always-on-screen position on native. Every
     tour step highlights a BOTTOM-nav item, so the spotlight is always near the
     bottom; keeping the card in the upper third avoids overlap AND sidesteps the
     fragile per-step JS top calc, which the WebView's backdrop-filter containing
     block can push off-screen. The spotlight still tracks each target. */
  top: clamp(96px, 30vh, 320px) !important;
  bottom: auto !important;
}

.ai-tour-spotlight {
  animation: tourTargetGlow 1.6s ease-in-out infinite;
}

.ai-tour-card .baihaqi-mascot-img {
  position: absolute;
  right: 18px;
  bottom: calc(100% - 48px);
  width: 88px;
  height: 88px;
  border-radius: 24px;
  animation: mascotFloat 4.6s ease-in-out infinite;
  filter: drop-shadow(0 18px 34px rgba(7, 31, 73, .18));
  pointer-events: none;
}

.ai-tour-card.mascot-compact .baihaqi-mascot-img {
  width: 62px;
  height: 62px;
  right: 14px;
  bottom: calc(100% - 34px);
}

.ai-tour-card p {
  margin: 0;
  color: rgba(14, 32, 65, .72);
  font-size: .88rem;
}

.ai-tour-card h3 {
  margin: 2px 0 4px;
  color: #071d49;
  font-size: 1.08rem;
}

.ai-tour-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  position: relative;
  z-index: 2;
}

.ai-tour-actions button {
  min-height: 36px;
  border-radius: 999px;
}

.ai-mascot-settings {
  position: fixed;
  inset: 0;
  z-index: 10020;
  display: grid;
  place-items: center;
  padding: max(18px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom));
  background: rgba(7, 20, 43, .26);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.ai-mascot-settings.active {
  opacity: 1;
  pointer-events: auto;
}

.ai-mascot-settings.hidden {
  display: none;
}

.ai-mascot-settings-card {
  width: min(440px, 94vw);
  border-radius: 30px;
  padding: 18px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.9), rgba(224,248,255,.58), rgba(255,246,218,.34)),
    rgba(255,255,255,.74);
  border: 1px solid rgba(255,255,255,.78);
  box-shadow: 0 30px 90px rgba(4, 21, 48, .22), inset 0 1px 0 rgba(255,255,255,.92);
  transform: translateY(14px) scale(.98);
  transition: transform 220ms cubic-bezier(.2, .9, .18, 1);
}

.ai-mascot-settings.active .ai-mascot-settings-card {
  transform: translateY(0) scale(1);
}

.ai-mascot-settings-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 14px;
}

.ai-mascot-settings-head h2,
.ai-mascot-settings-head p {
  margin: 0;
}

.ai-mascot-settings-head h2 {
  color: #071d49;
  font-size: 1.34rem;
}

.ai-mascot-settings-head p:last-child {
  margin-top: 5px;
  color: rgba(14, 32, 65, .64);
  font-size: .88rem;
}

.ai-mascot-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  min-height: 72px;
  padding: 12px 14px;
  margin-top: 10px;
  border-radius: 22px;
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(255,255,255,.78);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}

.ai-mascot-toggle strong,
.ai-mascot-toggle small {
  display: block;
}

.ai-mascot-toggle strong {
  color: #071d49;
  font-size: .96rem;
}

.ai-mascot-toggle small {
  margin-top: 4px;
  color: rgba(14, 32, 65, .58);
  font-size: .78rem;
}

.ai-mascot-toggle input {
  width: 48px;
  height: 28px;
  accent-color: #0ea5e9;
}

.ai-mascot-settings-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}

@keyframes mascotFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-5px) scale(1.018); }
}

@keyframes mascotThink {
  0%, 100% { transform: translateY(0) rotate(0deg) scale(1); filter: drop-shadow(0 18px 34px rgba(2,132,199,.16)); }
  50% { transform: translateY(-3px) rotate(-1.5deg) scale(1.02); filter: drop-shadow(0 22px 42px rgba(2,132,199,.28)); }
}

@keyframes mascotSpeaking {
  0%, 100% { transform: scale(1); }
  45% { transform: scale(1.035); }
}

@keyframes mascotPop {
  0% { transform: scale(.92) translateY(6px); }
  60% { transform: scale(1.08) translateY(-4px); }
  100% { transform: scale(1) translateY(0); }
}

@keyframes mascotAura {
  0%, 100% { transform: scale(.94); opacity: .46; }
  50% { transform: scale(1.08); opacity: .78; }
}

@keyframes tourTargetGlow {
  0%, 100% { box-shadow: 0 0 0 9999px rgba(2, 12, 27, .28), 0 0 30px rgba(74, 201, 255, .24); }
  50% { box-shadow: 0 0 0 9999px rgba(2, 12, 27, .24), 0 0 56px rgba(74, 201, 255, .44); }
}

@media (max-width: 560px) {
  .ai-companion-container {
    width: 82px !important;
    height: 82px !important;
    bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
    right: 16px !important;
  }
  .ai-floating-button {
    width: 100% !important;
    height: 100% !important;
  }

  .ai-title-lockup .baihaqi-mascot-img {
    width: 42px !important;
    height: 42px !important;
  }

  .ai-tour-card {
    grid-template-columns: 1fr;
    padding: 14px;
    padding-right: 88px;
    top: max(84px, var(--tour-top, calc(100vh - 330px)));
  }

  .ai-tour-card .baihaqi-mascot-img {
    width: 68px;
    height: 68px;
    right: 12px;
    bottom: calc(100% - 38px);
  }
}

/* MedDex Hospital flagship module */
.hospital-screen {
  /* Let the map fill to the bottom — station panel below the map gets its own padding */
  padding-bottom: 0;
  overflow-x: hidden;
}

.quick-access-card.hospital {
  grid-column: 1 / -1;
}

.hospital-hero-card,
.hospital-lobby,
.hospital-panel,
.hospital-station-panel {
  position: relative;
  overflow: hidden;
  border-radius: 30px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.86), rgba(226,247,255,.56), rgba(255,246,219,.28)),
    rgba(255,255,255,.62);
  border: 1px solid rgba(255,255,255,.76);
  box-shadow: 0 26px 78px rgba(7, 31, 73, .12), inset 0 1px 0 rgba(255,255,255,.9);
  backdrop-filter: blur(22px) saturate(170%);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
}

.hospital-hero-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 18px;
  margin-bottom: 12px;
}

.hospital-hero-status {
  display: grid;
  grid-template-columns: repeat(3, minmax(110px, 1fr));
  gap: 8px;
  min-width: min(520px, 100%);
}

.hospital-hero-status span {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(255,255,255,.82);
  color: rgba(12,35,64,.72);
  font-size: .75rem;
  font-weight: 800;
}

.hospital-hero-status strong {
  color: #071d49;
  font-size: .66rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.hospital-hero-card h2,
.hospital-lobby h3,
.hospital-panel h3,
.hospital-station-panel h3 {
  margin: 0;
  color: #071d49;
  letter-spacing: 0;
}

.hospital-hero-card p,
.hospital-lobby p,
.hospital-panel p {
  margin: 5px 0 0;
  color: rgba(14, 32, 65, .66);
}

.hospital-lobby {
  padding: 16px;
  min-height: 0;
}

.hospital-locale-control {
  display: grid;
  gap: 5px;
  min-width: 172px;
  margin: 0;
  color: rgba(12, 35, 64, .72);
  font-size: .72rem;
  font-weight: 850;
}

.hospital-locale-control span {
  line-height: 1;
}

.hospital-locale-select {
  min-height: 38px;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  background: rgba(255,255,255,0.9);
  border: 1px solid var(--border-color);
  color: #0c2340;
  font-weight: 700;
}

.hospital-dialect-control.is-disabled {
  opacity: .58;
}

.hospital-dialect-control.is-disabled .hospital-locale-select {
  cursor: not-allowed;
}

.hospital-lobby-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 14px;
}

.hospital-rank-card {
  min-width: 128px;
  padding: 11px;
  border-radius: 22px;
  background: rgba(255,255,255,.64);
  border: 1px solid rgba(255,255,255,.8);
}

.hospital-rank-card span,
.hospital-rank-card strong {
  display: block;
}

.hospital-rank-card span {
  color: rgba(14,32,65,.58);
  font-size: .72rem;
  font-weight: 850;
}

.hospital-rank-card strong {
  color: #071d49;
  margin-top: 4px;
}

.hospital-rank-card div,
.hospital-progress {
  height: 7px;
  border-radius: 999px;
  background: rgba(7,31,73,.1);
  overflow: hidden;
  margin-top: 8px;
}

.hospital-rank-card i,
.hospital-progress i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #34d399, #38bdf8, #2563eb);
}

.hospital-map {
  position: relative;
  min-height: 480px;
  border-radius: 28px;
  background:
    radial-gradient(circle at 18% 18%, rgba(255,255,255,.44), transparent 22%),
    radial-gradient(circle at 50% 38%, rgba(56,189,248,.24), transparent 34%),
    linear-gradient(135deg, rgba(13,42,91,.86), rgba(37,99,235,.55), rgba(255,255,255,.34));
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.34), inset 0 -44px 90px rgba(5,22,54,.18);
}

.hospital-map::before {
  content: "";
  position: absolute;
  inset: 18px;
  border-radius: 28px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.16) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.13) 1px, transparent 1px);
  background-size: 44px 44px;
  opacity: .6;
}

.hospital-path {
  position: absolute;
  left: 17%;
  right: 12%;
  top: 47%;
  height: 8px;
  border-radius: 999px;
  background: repeating-linear-gradient(90deg, #fff 0 16px, transparent 16px 28px);
  filter: drop-shadow(0 0 12px rgba(56,189,248,.8));
  transform: rotate(-8deg);
}

/* ── Hospital station hotspots ────────────────────────────────
   These are compact pill/chip buttons absolutely positioned
   over the map artwork. Width is fixed so they cannot collide.
   Each station uses a DIFFERENT row (top %, so no Y-overlap).
   ──────────────────────────────────────────────────────────── */
.hospital-station {
  position: absolute;
  z-index: 7;
  /* Compact pill shape — no min-height so text determines size */
  width: 120px;
  padding: 8px 10px 9px;
  border: 1.5px solid rgba(255,255,255,.76);
  border-radius: 16px;
  color: #fff;
  text-align: left;
  background: rgba(15, 58, 130, .76);
  box-shadow: 0 10px 28px rgba(5, 22, 54, .28), inset 0 1px 0 rgba(255,255,255,.44);
  backdrop-filter: blur(18px) saturate(170%);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  cursor: pointer;
  transition: transform 220ms cubic-bezier(.2,.9,.18,1), box-shadow 220ms ease;
  /* Remove any browser default button styles */
  -webkit-appearance: none;
  appearance: none;
  /* Ensure inner elements don't block clicks */
  pointer-events: auto;
}

.hospital-station:hover,
.hospital-station:focus-visible {
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 18px 42px rgba(5, 22, 54, .36), 0 0 0 4px rgba(56,189,248,.24), inset 0 1px 0 rgba(255,255,255,.5);
  outline: none;
}

.hospital-station:active {
  transform: scale(.96);
}

/* Number badge */
.hospital-station span {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-bottom: 4px;
  border-radius: 999px;
  color: #1d4ed8;
  background: #fff;
  font-weight: 950;
  font-size: .68rem;
  flex-shrink: 0;
}

.hospital-station strong {
  display: block;
  font-size: .74rem;
  font-weight: 900;
  line-height: 1.15;
  color: #fff;
}

.hospital-station small {
  display: block;
  font-size: .58rem;
  color: rgba(255,255,255,.7);
  margin-top: 2px;
  line-height: 1.1;
}

.hospital-station.locked {
  opacity: .82;
}

/* ── Fallback positions (non medicine-map-stage) */
.hospital-station[data-hospital-station="history"]   { left: 5%; top: 20%; }
.hospital-station[data-hospital-station="exam"]       { right: 5%; top: 20%; }
.hospital-station[data-hospital-station="counselling"]{ left: 5%; top: 48%; background: rgba(91, 54, 205, .72); }
.hospital-station[data-hospital-station="emergency"]  { right: 5%; top: 48%; background: rgba(219, 39, 85, .72); }
.hospital-station[data-hospital-station="feedback"]   { left: 50%; transform: translateX(-50%); bottom: 10%; background: rgba(245, 140, 30, .78); }

.hospital-student {
  position: absolute;
  z-index: 3;
  left: var(--student-x, 36%);
  top: var(--student-y, 54%);
  width: 34px;
  height: 48px;
  border-radius: 18px 18px 12px 12px;
  background: linear-gradient(#111827 0 28%, #fff 28% 60%, #0f766e 60%);
  box-shadow: 0 0 0 8px rgba(56,189,248,.24), 0 0 28px rgba(56,189,248,.62);
  animation: hospitalStudentFloat 3.2s ease-in-out infinite;
  transition: left 620ms cubic-bezier(.2,.9,.18,1), top 620ms cubic-bezier(.2,.9,.18,1), transform 220ms ease;
}

.hospital-dashboard-grid,
.station-simulation-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.hospital-panel {
  padding: 14px;
}

.hospital-departments {
  margin-top: 14px;
}

.hospital-department-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.hospital-department-card {
  min-height: 126px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.76);
  border-radius: 24px;
  text-align: left;
  color: #071d49;
  background: rgba(255,255,255,.66);
  box-shadow: 0 16px 44px rgba(7,31,73,.1), inset 0 1px 0 rgba(255,255,255,.86);
}

.hospital-department-card.locked {
  opacity: .7;
}

.hospital-department-card.owned-topic {
  border-color: rgba(16,185,129,.58);
  background: linear-gradient(145deg, rgba(236,253,245,.82), rgba(255,255,255,.7));
  box-shadow: 0 18px 44px rgba(16,185,129,.14), inset 0 1px 0 rgba(255,255,255,.86);
}

.hospital-department-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 16px;
  margin-bottom: 8px;
  background: rgba(226,247,255,.78);
}

.hospital-department-card strong,
.hospital-department-card small,
.hospital-department-card em {
  display: block;
}

.hospital-department-card em {
  margin-top: 8px;
  color: #0f766e;
  font-size: .72rem;
  font-style: normal;
  font-weight: 900;
}

.hospital-station-panel {
  margin-top: 14px;
  padding: 14px;
  /* Give space for bottom nav */
  margin-bottom: calc(80px + env(safe-area-inset-bottom));
}

.hospital-station-panel.hidden {
  display: none;
}

.station-case-card {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 12px;
}

.station-case-card span {
  padding: 8px 10px;
  border-radius: 999px;
  color: #071d49;
  background: rgba(255,255,255,.72);
  font-weight: 900;
}

.station-patient-card,
.station-examiner-card {
  padding: 14px;
  border-radius: 24px;
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(255,255,255,.76);
}

.station-examiner-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.station-examiner-head h4,
.station-examiner-head p {
  margin: 0;
}

.station-examiner-head strong {
  display: grid;
  place-items: center;
  min-width: 58px;
  height: 42px;
  border-radius: 18px;
  color: #071d49;
  background: rgba(255,255,255,.74);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85);
}

.station-patient-avatar {
  width: 100%;
  min-height: 120px;
  display: grid;
  place-items: center;
  border-radius: 22px;
  margin-bottom: 10px;
  color: #071d49;
  font-weight: 950;
  background: linear-gradient(135deg, rgba(219,234,254,.9), rgba(255,255,255,.6));
}

.station-examiner-card ul {
  margin: 10px 0;
  padding-left: 18px;
}

.hospital-patient-chat {
  display: flex;
  flex-direction: column;
  gap: 9px;
  max-height: 260px;
  overflow: auto;
  padding: 10px;
  border-radius: 20px;
  background: rgba(247,251,255,.66);
  border: 1px solid rgba(255,255,255,.76);
  scroll-behavior: smooth;
}

.patient-message,
.student-message {
  max-width: 86%;
  padding: 10px 12px;
  border-radius: 18px;
  font-size: .9rem;
  line-height: 1.35;
  box-shadow: 0 10px 26px rgba(7,31,73,.08);
}

.patient-message {
  align-self: flex-start;
  color: #071d49;
  background: rgba(255,255,255,.84);
}

.student-message {
  align-self: flex-end;
  color: #fff;
  background: linear-gradient(135deg, rgba(17,68,166,.92), rgba(25,129,236,.86));
}

/* Examiner/system notes: exam findings, investigation results, diagnosis and
   management feedback. Deliberately NOT styled like the patient's speech
   bubble — a real patient never narrates their own tympanic membrane
   findings or grades your diagnosis, so this must read as a different
   "voice" in the transcript rather than something the patient said. */
.examiner-message {
  align-self: stretch;
  max-width: 100%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: .82rem;
  line-height: 1.45;
  background: rgba(12, 35, 64, .05);
  border: 1px dashed rgba(12, 35, 64, .16);
  color: #0c2340;
  box-shadow: none;
  animation: hospitalExaminerNoteIn .28s ease;
}

.examiner-message::before {
  content: "EXAMINER";
  display: block;
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .06em;
  color: rgba(12, 35, 64, .5);
  margin-bottom: 4px;
}

.examiner-message.correct {
  background: rgba(52, 199, 89, .1);
  border-color: rgba(52, 199, 89, .4);
}

.examiner-message.correct::before {
  content: "EXAMINER · CORRECT";
  color: #1f8a3d;
}

.examiner-message.incorrect {
  background: rgba(224, 36, 36, .08);
  border-color: rgba(224, 36, 36, .32);
}

.examiner-message.incorrect::before {
  content: "EXAMINER · NOT QUITE";
  color: #b8271f;
}

.examiner-message.partial {
  background: rgba(255, 159, 10, .1);
  border-color: rgba(255, 159, 10, .38);
}

.examiner-message.partial::before {
  content: "EXAMINER · PARTIAL CREDIT";
  color: #a1650a;
}

@keyframes hospitalExaminerNoteIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.hospital-station-input {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  margin-top: 10px;
  padding: 8px;
  border-radius: 22px;
  background: rgba(255,255,255,.74);
  border: 1px solid rgba(255,255,255,.82);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}

.hospital-station-input input {
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #071d49;
  font: inherit;
}

.hospital-checklist {
  display: grid;
  gap: 7px;
  max-height: 306px;
  overflow: auto;
  margin: 12px 0;
  padding-right: 4px;
}

.hospital-checklist-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 9px;
  border-radius: 14px;
  color: rgba(7,29,73,.72);
  background: rgba(255,255,255,.48);
  border: 1px solid rgba(255,255,255,.64);
  font-size: .82rem;
}

.hospital-checklist-item span {
  display: grid;
  place-items: center;
  flex: 0 0 22px;
  height: 22px;
  border-radius: 999px;
  color: #64748b;
  background: rgba(226,232,240,.9);
  font-weight: 950;
}

.hospital-checklist-item.done {
  color: #065f46;
  background: rgba(209,250,229,.74);
}

.hospital-checklist-item.done span {
  color: #fff;
  background: #10b981;
}

.hospital-completion-card {
  margin-top: 14px;
  padding: 16px;
  border-radius: 26px;
  background:
    radial-gradient(circle at 20% 0%, rgba(52,211,153,.2), transparent 28%),
    linear-gradient(135deg, rgba(255,255,255,.86), rgba(226,247,255,.58));
  border: 1px solid rgba(255,255,255,.78);
  box-shadow: 0 18px 50px rgba(7,31,73,.12), inset 0 1px 0 rgba(255,255,255,.9);
}

.hospital-completion-card.hidden {
  display: none;
}

.hospital-completion-score {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 12px 0;
}

.hospital-completion-score strong {
  font-size: 2.2rem;
  color: #071d49;
}

.hospital-completion-score span {
  color: #d97706;
  font-weight: 950;
}

.hospital-feedback-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.hospital-feedback-grid article {
  padding: 12px;
  border-radius: 20px;
  background: rgba(255,255,255,.68);
}

.hospital-feedback-grid ul {
  margin: 8px 0 0;
  padding-left: 18px;
}

.hospital-model-answer {
  margin-top: 12px;
  padding: 12px;
  border-radius: 18px;
  background: rgba(255,255,255,.68);
}

.hospital-premium-modal {
  position: fixed;
  inset: 0;
  z-index: 13000;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(7, 18, 38, .34);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
}

.hospital-premium-modal.hidden {
  display: none;
}

.hospital-premium-card {
  position: relative;
  width: min(430px, 92vw);
  padding: 20px;
  border-radius: 30px;
  color: #071d49;
  background:
    linear-gradient(135deg, rgba(255,255,255,.9), rgba(226,247,255,.66), rgba(255,243,205,.38)),
    rgba(255,255,255,.76);
  border: 1px solid rgba(255,255,255,.82);
  box-shadow: 0 30px 90px rgba(7,31,73,.2), inset 0 1px 0 rgba(255,255,255,.96);
}

.hospital-premium-card .icon-button {
  position: absolute;
  top: 12px;
  right: 12px;
}

.hospital-premium-features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 14px 0;
}

.hospital-premium-features span {
  padding: 10px;
  border-radius: 16px;
  color: #0f3a82;
  background: rgba(255,255,255,.64);
  font-weight: 850;
  font-size: .82rem;
}

.hospital-entrance {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 46%, rgba(255,255,255,.96), rgba(225,247,255,.82) 42%, rgba(9,31,68,.84));
}

.hospital-entrance.hidden {
  display: none;
}

.hospital-door {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  background: linear-gradient(135deg, rgba(255,255,255,.92), rgba(195,232,255,.78));
  box-shadow: inset 0 0 70px rgba(7,31,73,.12);
  transition: transform 1.25s cubic-bezier(.18,.9,.2,1);
}

.hospital-door.left { left: 0; border-right: 1px solid rgba(7,31,73,.12); }
.hospital-door.right { right: 0; border-left: 1px solid rgba(7,31,73,.12); }

.hospital-entrance.opening .hospital-door.left { transform: translateX(-102%); }
.hospital-entrance.opening .hospital-door.right { transform: translateX(102%); }

.hospital-entrance-content {
  position: relative;
  z-index: 2;
  width: min(420px, 88vw);
  padding: 24px;
  border-radius: 34px;
  text-align: center;
  color: #071d49;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(255,255,255,.82);
  box-shadow: 0 32px 100px rgba(7,31,73,.2), inset 0 1px 0 rgba(255,255,255,.95);
  backdrop-filter: blur(24px) saturate(170%);
  -webkit-backdrop-filter: blur(24px) saturate(170%);
}

.hospital-entrance-content img {
  width: 96px;
  height: 96px;
  object-fit: contain;
  animation: mascotFloat 3.2s ease-in-out infinite;
}

@keyframes hospitalStudentFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

@media (max-width: 560px) {
  .bottom-nav {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 2px;
  }

  .bottom-nav-item {
    font-size: .62rem;
  }

  .hospital-hero-card,
  .hospital-lobby-head,
  .station-case-card {
    flex-direction: column;
  }

  .hospital-hero-status {
    grid-template-columns: 1fr;
    min-width: 0;
    width: 100%;
  }

  .hospital-dashboard-grid,
  .station-simulation-grid {
    grid-template-columns: 1fr;
  }

  .hospital-map {
    min-height: 480px;
  }

  .hospital-department-grid {
    grid-template-columns: 1fr 1fr;
  }

  .hospital-feedback-grid {
    grid-template-columns: 1fr;
  }
}

/* Hospital game map integration */
.hospital-screen.hospital-entered .compact-hospital-entry {
  display: none;
}

/* ============================================================
   MEDICINE MAP STAGE — Full-screen portrait hospital map
   ============================================================ */

.medicine-map-stage {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  /* Remove glassmorphism card inherited from .hospital-lobby */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* The map itself: fills available screen height below the hero card */
.medicine-map-stage .hospital-map {
  /* Fill screen minus: hero card (~80px) + bottom-nav (~72px) + safe areas + breathing room */
  height: calc(100svh - 80px - 72px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 16px);
  min-height: 480px;
  max-height: 820px;
  border-radius: 28px;
  background: #071d49;
  overflow: hidden;
  isolation: isolate;
  box-shadow:
    0 30px 90px rgba(7, 31, 73, .22),
    inset 0 1px 0 rgba(255,255,255,.7);
}

/* Map artwork layers */
.hospital-map-art,
.hospital-map-glow {
  position: absolute;
  inset: 0;
}

.hospital-map-art {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  z-index: 0;
  animation: hospitalMapDrift 18s ease-in-out infinite alternate;
}

.hospital-map-glow {
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(245,251,255,.18), rgba(7,31,73,.04) 38%, rgba(7,31,73,.12)),
    radial-gradient(circle at 50% 38%, rgba(56,189,248,.18), transparent 28%),
    radial-gradient(circle at 52% 84%, rgba(245,158,11,.14), transparent 18%);
}

.medicine-map-stage .hospital-map::before {
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  background:
    radial-gradient(circle at 20% 10%, rgba(255,255,255,.18), transparent 18%),
    linear-gradient(90deg, rgba(255,255,255,.08), transparent 16%, transparent 84%, rgba(255,255,255,.08));
  opacity: .7;
  pointer-events: none;
}

/* ── HUD: slim pill strip at top of map ── */
.hospital-map-hud {
  position: absolute;
  z-index: 10;
  top: 10px;
  left: 10px;
  right: 10px;
  display: flex;
  gap: 6px;
  align-items: stretch;
}

.hospital-hud-panel {
  flex: 1;
  padding: 6px 8px;
  border-radius: 14px;
  color: #071d49;
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(255,255,255,.86);
  box-shadow: 0 6px 20px rgba(7,31,73,.14), inset 0 1px 0 rgba(255,255,255,.9);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  /* Keep each pill small */
  min-height: 0;
}

.hospital-hud-panel span,
.hospital-hud-panel small {
  display: block;
  color: rgba(7,29,73,.54);
  font-size: .52rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .06em;
  line-height: 1;
}

.hospital-hud-panel strong {
  display: block;
  margin-top: 2px;
  color: #071d49;
  font-size: .72rem;
  font-weight: 900;
  line-height: 1.05;
}

.hospital-hud-panel.primary div {
  height: 4px;
  margin-top: 5px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(7,31,73,.12);
}

.hospital-hud-panel.primary i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #0ea5e9, #22d3ee, #f5c451);
  transition: width 600ms ease;
}

/* ── Mission banner: compact, below HUD ── */
.hospital-map-mission {
  position: absolute;
  z-index: 9;
  /* sits just below the HUD strip (~52px) */
  top: 58px;
  left: 10px;
  right: 10px;
  padding: 7px 10px;
  border-radius: 14px;
  color: #071d49;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(255,255,255,.82);
  box-shadow: 0 8px 28px rgba(7,31,73,.1), inset 0 1px 0 rgba(255,255,255,.86);
  backdrop-filter: blur(20px) saturate(170%);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
}

.hospital-map-mission .eyebrow {
  margin: 0;
  font-size: .52rem;
}

.hospital-map-mission h3 {
  margin: 2px 0 0;
  font-size: .8rem;
  line-height: 1.2;
}

/* ── Department cards at bottom: keep but hide in map stage ── */
.medicine-map-stage .hospital-map-departments {
  display: none;
}

.medicine-map-stage .hospital-path {
  display: none;
}

/* ── MEDICINE MAP: Station hotspot sizing & appearance ──────────────
   All 5 stations use width:120px so 2 side-by-side (left+right 5%)
   won't collide on a 360px+ screen (5% + 120px + gap + 120px + 5%
   = 250px of buttons in 360px — fine with flex positioning).
   Y positions are staggered by at least 20% to prevent vertical overlap.
   ─────────────────────────────────────────────────────────────────── */
.medicine-map-stage .hospital-station {
  /* Inherit base .hospital-station, just tweak for map scale */
  z-index: 9;
  width: 118px;
  padding: 8px 9px 9px;
  border-radius: 15px;
  background: rgba(11, 42, 91, .78);
  border: 1.5px solid rgba(255,255,255,.82);
  box-shadow: 0 10px 30px rgba(4,20,49,.28), 0 0 0 1px rgba(56,189,248,.1), inset 0 1px 0 rgba(255,255,255,.52);
  /* Clear conflicting fallback transform from feedback station */
  transform: none;
}

.medicine-map-stage .hospital-station:hover,
.medicine-map-stage .hospital-station:focus-visible {
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 18px 48px rgba(4,20,49,.36), 0 0 0 5px rgba(56,189,248,.24), 0 0 28px rgba(56,189,248,.26), inset 0 1px 0 rgba(255,255,255,.6);
  outline: none;
}

.medicine-map-stage .hospital-station.selected {
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 24px 58px rgba(4,20,49,.34), 0 0 0 5px rgba(56,189,248,.24), 0 0 36px rgba(56,189,248,.32), inset 0 1px 0 rgba(255,255,255,.6);
}

.medicine-map-stage .hospital-station span {
  width: 20px;
  height: 20px;
  margin-bottom: 3px;
  font-size: .64rem;
}

.medicine-map-stage .hospital-station strong {
  font-size: .72rem;
  line-height: 1.1;
}

.medicine-map-stage .hospital-station small {
  font-size: .56rem;
  line-height: 1.08;
  margin-top: 1px;
}

.medicine-map-stage .hospital-station.locked::after {
  content: "🔒";
  position: absolute;
  top: 5px;
  right: 6px;
  font-size: .62rem;
  pointer-events: none;
}

/* ── Medicine department station POSITIONS ───────────────────
   Layout (portrait mobile):

     [History ①]         [Exam ②]
           ╲             ╱
            ╲           ╱
     [Counsel③]       [Emerg ④]
                ╲   ╱
                 [⑤]
             [Feedback]

   Row 1: top ~20%   — History left, Exam right
   Row 2: top ~45%   — Counselling left, Emergency right
   Row 3: bottom 8%  — Feedback centered
   ─────────────────────────────────────────────────────────── */
.medicine-map-stage .hospital-station[data-hospital-station="history"] {
  left: 4%;
  top: 20%;
  background: rgba(16, 86, 184, .82);
}
.medicine-map-stage .hospital-station[data-hospital-station="exam"] {
  right: 4%;
  top: 20%;
  background: rgba(12, 118, 128, .78);
}
.medicine-map-stage .hospital-station[data-hospital-station="counselling"] {
  left: 4%;
  top: 47%;
  background: rgba(91, 54, 205, .78);
  /* Override fallback translateX from base rule */
  transform: none;
}
.medicine-map-stage .hospital-station[data-hospital-station="emergency"] {
  right: 4%;
  top: 47%;
  background: rgba(219, 39, 85, .78);
  transform: none;
}
.medicine-map-stage .hospital-station[data-hospital-station="feedback"] {
  /* Centered at bottom — use left:50% + marginLeft trick so width doesn't interfere */
  left: 50%;
  bottom: 8%;
  transform: translateX(-50%);
  background: rgba(215, 100, 10, .82);
}

/* Hover / active overrides to keep transform for feedback (centered) */
.medicine-map-stage .hospital-station[data-hospital-station="feedback"]:hover,
.medicine-map-stage .hospital-station[data-hospital-station="feedback"]:focus-visible {
  transform: translateX(-50%) translateY(-3px) scale(1.04);
}
.medicine-map-stage .hospital-station[data-hospital-station="feedback"].selected {
  transform: translateX(-50%) translateY(-4px) scale(1.05);
}

/* ── Student pawn ── */
.medicine-map-stage .hospital-student {
  z-index: 8;
  left: var(--student-x, 50%);
  top: var(--student-y, 80%);
  width: 26px;
  height: 36px;
  border-radius: 14px 14px 10px 10px;
  box-shadow: 0 0 0 7px rgba(56,189,248,.22), 0 0 28px rgba(56,189,248,.72);
  transition: left 760ms cubic-bezier(.2,.9,.18,1), top 760ms cubic-bezier(.2,.9,.18,1), transform 220ms ease;
}

/* ── Patient avatar in station panel ── */
.station-patient-avatar {
  display: grid;
  grid-template-columns: 104px 1fr;
  place-items: initial;
  align-items: center;
  gap: 12px;
  padding: 10px;
  min-height: 126px;
}

.station-patient-avatar img {
  width: 104px;
  height: 104px;
  border-radius: 24px;
  object-fit: cover;
  box-shadow: 0 18px 44px rgba(7,31,73,.14), inset 0 1px 0 rgba(255,255,255,.8);
  animation: patientBreathing 4.2s ease-in-out infinite;
}

.station-patient-avatar strong,
.station-patient-avatar small,
.station-patient-avatar em {
  display: block;
}

.station-patient-avatar small {
  margin-top: 4px;
  color: rgba(7,29,73,.68);
  font-weight: 800;
}

.station-patient-avatar em {
  margin-top: 7px;
  color: #0f766e;
  font-size: .76rem;
  font-style: normal;
  font-weight: 900;
}

@keyframes hospitalMapDrift {
  0%   { transform: scale(1.015) translateY(0); }
  100% { transform: scale(1.04) translateY(-10px); }
}

@keyframes patientBreathing {
  0%, 100% { transform: translateY(0) scale(1); }
  50%       { transform: translateY(-2px) scale(1.012); }
}

/* ── Baihaqi orb: push to top-right on hospital map ────────────
   Only applies while the hospital screen is showing.
   We use CSS custom properties the JS already supports.
   ─────────────────────────────────────────────────────────────── */
.hospital-screen.hospital-entered .ai-floating-button {
  /* Snap orb to top-right safe corner, away from all station hotspots */
  --ai-orb-x: 0px !important;
  --ai-orb-y: 0px !important;
  right: 14px !important;
  bottom: auto !important;
  top: calc(env(safe-area-inset-top, 0px) + 14px) !important;
  left: auto !important;
  pointer-events: auto;
}

/* When station panel is open, restore orb to bottom-right default */
.hospital-screen.hospital-entered:has(#hospitalStationPanel:not(.hidden)) .ai-floating-button {
  top: auto !important;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 88px) !important;
  right: 14px !important;
}

/* ── Responsive: phones ≤ 430px wide ── */
@media (max-width: 430px) {
  .medicine-map-stage .hospital-map {
    height: calc(100svh - 76px - 68px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    min-height: 460px;
    border-radius: 22px;
  }

  .hospital-map-hud {
    gap: 4px;
  }

  .hospital-hud-panel {
    padding: 5px 6px;
  }

  .hospital-hud-panel span,
  .hospital-hud-panel small {
    font-size: .48rem;
  }

  .hospital-hud-panel strong {
    font-size: .66rem;
  }

  /* Mission banner: smaller on small phones */
  .hospital-map-mission {
    top: 54px;
    padding: 5px 8px;
  }

  .hospital-map-mission h3 {
    font-size: .72rem;
  }

  /* Slightly smaller station pills on very small screens */
  .medicine-map-stage .hospital-station {
    width: 108px;
    padding: 7px 8px 8px;
  }

  .medicine-map-stage .hospital-station strong {
    font-size: .66rem;
  }

  .medicine-map-stage .hospital-station small {
    font-size: .52rem;
  }

  /* Keep positions but tighten edge margins */
  .medicine-map-stage .hospital-station[data-hospital-station="history"]   { left: 2%; }
  .medicine-map-stage .hospital-station[data-hospital-station="exam"]       { right: 2%; }
  .medicine-map-stage .hospital-station[data-hospital-station="counselling"]{ left: 2%; }
  .medicine-map-stage .hospital-station[data-hospital-station="emergency"]  { right: 2%; }

  .station-patient-avatar {
    grid-template-columns: 78px 1fr;
  }

  .station-patient-avatar img {
    width: 78px;
    height: 78px;
    border-radius: 18px;
  }
}


/* ============================================================
   HOSPITAL PREMIUM GAME FEEL — NEW COMPONENTS
   ============================================================ */

/* Station pulse ring — animated glow on unlocked stations */
.hospital-station-pulse {
  position: absolute;
  inset: -6px;
  border-radius: inherit;
  border: 2px solid rgba(56, 189, 248, .6);
  animation: stationPulse 2.4s ease-in-out infinite;
  pointer-events: none;
  z-index: -1;
}

.medicine-map-stage .hospital-station.locked .hospital-station-pulse {
  display: none;
}

@keyframes stationPulse {
  0%   { transform: scale(1);    opacity: .9; }
  60%  { transform: scale(1.16); opacity: .2; }
  100% { transform: scale(1);    opacity: .9; }
}

/* SVG path connectors between stations */
.hospital-station-paths {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

.hospital-station-path {
  fill: none;
  stroke: rgba(56, 189, 248, .3);
  stroke-width: 0.7;
  stroke-dasharray: 4 6;
  stroke-linecap: round;
  animation: pathDash 3s linear infinite;
}

.hospital-station-path.path-to-feedback {
  stroke: rgba(245, 140, 30, .36);
  stroke-dasharray: 3 7;
  animation-duration: 4s;
}

@keyframes pathDash {
  to { stroke-dashoffset: -40; }
}

/* Ambient floating particles */
.hospital-ambient-particles {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.hospital-ambient-particle {
  position: absolute;
  left: var(--p-x, 50%);
  top: var(--p-y, 50%);
  width: var(--p-size, 5px);
  height: var(--p-size, 5px);
  border-radius: 999px;
  background: rgba(56, 189, 248, .45);
  animation: particleFloat var(--p-dur, 7s) var(--p-delay, 0s) ease-in-out infinite alternate;
  filter: blur(0.5px);
}

@keyframes particleFloat {
  0%   { transform: translateY(0) scale(1);       opacity: .5; }
  50%  { transform: translateY(-18px) scale(1.2); opacity: .9; }
  100% { transform: translateY(6px) scale(.8);    opacity: .3; }
}

/* XP Toast — floating pop animation */
.hospital-xp-toast {
  position: absolute;
  z-index: 20;
  bottom: 90px;
  left: 50%;
  transform: translateX(-50%) translateY(0);
  padding: 10px 22px;
  border-radius: 999px;
  color: #fff;
  font-weight: 950;
  font-size: 1.08rem;
  background: linear-gradient(135deg, #f59e0b, #f97316);
  box-shadow: 0 12px 36px rgba(249, 115, 22, .42), inset 0 1px 0 rgba(255,255,255,.22);
  pointer-events: none;
}

.hospital-xp-toast.hidden {
  display: none;
}

.hospital-xp-toast.animating {
  animation: xpPop .62s cubic-bezier(.2,.9,.18,1) forwards;
}

@keyframes xpPop {
  0%   { opacity: 0; transform: translateX(-50%) translateY(20px) scale(.88); }
  55%  { opacity: 1; transform: translateX(-50%) translateY(-8px) scale(1.06); }
  80%  { opacity: 1; transform: translateX(-50%) translateY(-18px) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-32px) scale(.95); }
}

/* Candidate instructions card */
.hospital-candidate-instructions {
  margin-bottom: 12px;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(56, 189, 248, .22);
  background: linear-gradient(135deg, rgba(219, 234, 254, .72), rgba(255,255,255,.62));
  box-shadow: 0 12px 36px rgba(7,31,73,.09), inset 0 1px 0 rgba(255,255,255,.88);
}

.hospital-candidate-instructions summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 11px 14px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.hospital-candidate-instructions summary::-webkit-details-marker {
  display: none;
}

.candidate-instructions-badge {
  font-weight: 900;
  font-size: .84rem;
  color: #1d4ed8;
}

.candidate-instructions-toggle {
  color: rgba(7,29,73,.44);
  font-size: .72rem;
  transition: transform 200ms ease;
}

.hospital-candidate-instructions[open] .candidate-instructions-toggle {
  transform: rotate(180deg);
}

.candidate-instructions-body {
  padding: 0 14px 12px;
}

.candidate-instructions-body p {
  margin: 0;
  color: rgba(14,32,65,.76);
  font-size: .88rem;
  line-height: 1.5;
}

.candidate-instructions-meta {
  display: flex;
  gap: 10px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.candidate-instructions-meta span {
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(255,255,255,.68);
  border: 1px solid rgba(255,255,255,.84);
  color: #1d4ed8;
  font-weight: 850;
  font-size: .74rem;
}

/* Circular timer ring — scoped to hospital station panel */
.hospital-station-panel .station-timer-wrap {
  position: relative;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 58px;
  height: 58px;
}

.hospital-station-panel .station-timer-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.hospital-station-panel .timer-ring-bg {
  fill: none;
  stroke: rgba(7,31,73,.1);
  stroke-width: 3.5;
}

.hospital-station-panel .timer-ring-fill {
  fill: none;
  stroke: #0ea5e9;
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-dasharray: 125.66;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1s linear, stroke .6s ease;
}

.hospital-station-panel .station-timer-wrap > span {
  position: relative;
  z-index: 1;
  font-size: .76rem;
  font-weight: 950;
  color: #071d49;
}

/* Station progress bar — scoped to hospital station panel */
.hospital-station-panel .hospital-station-progress-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0 14px;
}

.hospital-station-panel .station-progress-track {
  flex: 1;
  height: 7px;
  border-radius: 999px;
  background: rgba(7,31,73,.1);
  overflow: hidden;
}

.hospital-station-panel .station-progress-fill {
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #0ea5e9, #22d3ee, #34d399);
  transition: width 420ms cubic-bezier(.2,.9,.18,1);
}

.hospital-station-panel .station-progress-label {
  font-size: .72rem;
  font-weight: 900;
  color: rgba(7,29,73,.56);
  white-space: nowrap;
}

/* Patient typing indicator — scoped to hospital station panel */
.hospital-station-panel .patient-typing-indicator {
  display: flex;
  gap: 5px;
  align-items: center;
  padding: 8px 12px;
  margin: 0 0 6px 0;
}

.hospital-station-panel .patient-typing-indicator.hidden {
  display: none;
}

.hospital-station-panel .typing-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgba(7,31,73,.4);
  animation: typingBounce 1.2s ease-in-out infinite;
}

.hospital-station-panel .typing-dot:nth-child(2) { animation-delay: .18s; }
.hospital-station-panel .typing-dot:nth-child(3) { animation-delay: .36s; }

@keyframes typingBounce {
  0%, 100% { transform: translateY(0);   opacity: .5; }
  40%       { transform: translateY(-5px); opacity: 1;  }
}

@keyframes starPop {
  0%   { transform: scale(0) rotate(-30deg); opacity: 0; }
  65%  { transform: scale(1.3) rotate(8deg);  opacity: 1; }
  100% { transform: scale(1) rotate(0deg);    opacity: 1; }
}

/* Animated completion stars — scoped to hospital completion card */
.hospital-completion-card .completion-stars-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}

.hospital-completion-card .completion-star {
  font-size: 2rem;
  color: #d97706;
  transition: transform 360ms cubic-bezier(.2,.9,.18,1);
}

.hospital-completion-card .completion-star.large {
  font-size: 2.6rem;
}

.hospital-completion-card .completion-star.earned {
  animation: starPop 500ms cubic-bezier(.2,.9,.18,1) forwards;
}

/* Examiner AI feedback card — scoped to hospital completion card */
.hospital-examiner-feedback {
  margin: 14px 0;
  padding: 14px;
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(219, 234, 254, .72), rgba(255,255,255,.58));
  border: 1px solid rgba(56, 189, 248, .2);
  box-shadow: 0 10px 30px rgba(7,31,73,.09);
}

.hospital-examiner-feedback.hidden {
  display: none;
}

.hospital-examiner-feedback .examiner-feedback-header {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 8px;
}

.hospital-examiner-feedback .examiner-avatar {
  font-size: 1.4rem;
}

.hospital-examiner-feedback .examiner-feedback-header strong {
  font-size: .88rem;
  color: #071d49;
}

.hospital-examiner-feedback p {
  margin: 0;
  color: rgba(14,32,65,.78);
  font-size: .9rem;
  line-height: 1.5;
}

/* Baihaqi bubble persistence fix — already specific to .ai-bubble, safe globally */
.ai-bubble.is-persistent.is-hiding {
  opacity: 1 !important;
  pointer-events: auto !important;
  animation: none !important;
}

.ai-bubble.is-persistent:not(.hidden) {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Hospital station unlock animation */
.hospital-station.just-unlocked {
  animation: stationUnlock 700ms cubic-bezier(.2,.9,.18,1) forwards;
}

@keyframes stationUnlock {
  0%   { transform: scale(.9) translateY(4px);  box-shadow: 0 0 0 0 rgba(56,189,248,.6); }
  55%  { transform: scale(1.06) translateY(-3px); box-shadow: 0 0 0 14px rgba(56,189,248,0); }
  100% { transform: scale(1) translateY(0); }
}


@media (prefers-reduced-motion: reduce) {

  .baihaqi-mascot-img,
  .ai-floating-button .baihaqi-mascot-img,
  .ai-floating-button::after,
  .ai-call-screen[data-call-state] .ai-call-orb .baihaqi-mascot-img,
  .ai-tour-card .baihaqi-mascot-img {
    animation: none !important;
  }
}

/* Compact premium Baihaqi AI chat workspace */
.ai-panel.ai-chat-mode .ai-panel-card {
  width: min(960px, 94vw);
  height: min(84vh, 780px);
  max-height: 84vh;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  border-radius: 28px;
}

.ai-panel.ai-chat-mode .ai-panel-head {
  min-height: 62px;
  padding: 12px 16px;
  gap: 10px;
  border-bottom: 1px solid rgba(6, 22, 74, 0.06);
  background: rgba(255, 255, 255, 0.52);
  backdrop-filter: blur(18px) saturate(170%);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
}

.ai-panel.ai-chat-mode .ai-panel-head .eyebrow {
  margin: 0;
  font-size: 0.58rem;
  letter-spacing: 0.1em;
}

.ai-panel.ai-chat-mode .ai-panel-head h2 {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.08;
  letter-spacing: 0;
}

.ai-panel.ai-chat-mode .ai-panel-head p:not(.eyebrow) {
  margin: 2px 0 0;
  font-size: 0.72rem;
  line-height: 1.1;
  color: rgba(6, 22, 74, 0.58);
}

.ai-panel.ai-chat-mode .ai-mode-switch,
.ai-panel.ai-chat-mode .ai-panel-head .ai-quick-call {
  min-height: 32px;
  padding: 4px;
  border-radius: 999px;
}

.ai-panel.ai-chat-mode .ai-mode-switch button,
.ai-panel.ai-chat-mode .ai-panel-head .ai-quick-call {
  min-height: 28px;
  padding: 0 10px;
  font-size: 0.66rem;
}

.ai-panel.ai-chat-mode .ai-panel-head .icon-button {
  width: 36px;
  height: 36px;
  border-radius: 14px;
  font-size: 1rem;
}

.ai-panel.ai-chat-mode .ai-chat-log {
  gap: 10px;
  padding: 14px 16px 8px;
  overflow-y: auto;
  scroll-behavior: smooth;
}

.ai-panel.ai-chat-mode .ai-message {
  gap: 8px;
  animation: aiMessageIn 180ms ease both;
}

.ai-panel.ai-chat-mode .ai-message.assistant > img,
.ai-panel.ai-chat-mode .ai-message.typing > img {
  width: 30px;
  height: 30px;
  margin-top: 3px;
  border-radius: 999px;
  box-shadow: 0 8px 18px rgba(6, 22, 74, 0.1);
}

.ai-panel.ai-chat-mode .ai-message > div {
  max-width: 78%;
  padding: 10px 12px;
  border-radius: 18px;
  font-size: 0.86rem;
  line-height: 1.42;
}

.ai-panel.ai-chat-mode .ai-message.assistant > div {
  color: #06164a;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.82), rgba(238, 250, 255, 0.58)),
    rgba(255, 255, 255, 0.64);
  border: 1px solid rgba(255, 255, 255, 0.74);
  box-shadow: 0 14px 32px rgba(6, 22, 74, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
}

.ai-panel.ai-chat-mode .ai-message.user > div {
  color: white;
  background:
    linear-gradient(145deg, rgba(7, 20, 95, 0.92), rgba(11, 42, 91, 0.84), rgba(8, 124, 223, 0.72));
  border: 1px solid rgba(100, 210, 255, 0.18);
  box-shadow: 0 14px 30px rgba(7, 20, 95, 0.18);
}

.ai-panel.ai-chat-mode .ai-message span {
  margin-bottom: 4px;
  font-size: 0.62rem;
  letter-spacing: 0.04em;
}

.ai-panel.ai-chat-mode .ai-message p {
  margin: 0.35em 0;
  font-size: 0.86rem;
  line-height: 1.42;
}

.ai-panel.ai-chat-mode .ai-message p:first-child {
  margin-top: 0;
}

.ai-panel.ai-chat-mode .ai-message p:last-child {
  margin-bottom: 0;
}

.ai-panel.ai-chat-mode .ai-source-badge {
  margin-bottom: 6px;
  padding: 3px 7px;
  font-size: 0.58rem;
}

.ai-panel.ai-chat-mode .ai-followups {
  min-height: 38px;
  padding: 4px 14px 6px;
  gap: 7px;
  overflow-x: auto;
  scrollbar-width: none;
}

.ai-panel.ai-chat-mode .ai-followups::-webkit-scrollbar {
  display: none;
}

.ai-panel.ai-chat-mode .ai-followups button {
  min-height: 30px;
  padding: 0 11px;
  border-radius: 999px;
  font-size: 0.68rem;
  white-space: nowrap;
}

.ai-panel.ai-chat-mode .ai-composer {
  padding: 8px 14px 14px;
}

.ai-panel.ai-chat-mode .ai-composer-bar {
  min-height: 48px;
  padding: 7px 8px 7px 12px;
  border-radius: 20px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.88), rgba(235, 249, 255, 0.64)),
    rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.78);
}

.ai-panel.ai-chat-mode .ai-composer textarea {
  min-height: 28px;
  max-height: 96px;
  padding: 7px 4px;
  font-size: 0.88rem;
  line-height: 1.35;
}

.ai-panel.ai-chat-mode .ai-composer .icon-button,
.ai-panel.ai-chat-mode .ai-composer .primary-button {
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 14px;
}

@keyframes aiMessageIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 560px) {
  .ai-panel.ai-chat-mode .ai-panel-card {
    width: 94vw;
    height: 86vh;
    max-height: 86vh;
    border-radius: 24px;
  }

  .ai-panel.ai-chat-mode .ai-panel-head {
    min-height: 58px;
    padding: 10px 12px;
  }

  .ai-panel.ai-chat-mode .ai-mode-switch {
    display: none;
  }

  .ai-panel.ai-chat-mode .ai-chat-log {
    padding: 12px 12px 6px;
  }

  .ai-panel.ai-chat-mode .ai-message > div {
    max-width: 82%;
    padding: 9px 11px;
    font-size: 0.84rem;
  }

  .ai-panel.ai-chat-mode .ai-message p {
    font-size: 0.84rem;
  }

  .ai-panel.ai-chat-mode .ai-followups {
    padding-inline: 12px;
  }

  .ai-panel.ai-chat-mode .ai-composer {
    padding: 7px 11px calc(env(safe-area-inset-bottom, 0px) + 10px);
  }
}

/* Baihaqi AI complete premium module reset */
.ai-panel {
  background:
    radial-gradient(circle at 28% 8%, rgba(90, 210, 255, 0.16), transparent 34%),
    radial-gradient(circle at 80% 88%, rgba(218, 176, 70, 0.12), transparent 32%),
    rgba(244, 250, 255, 0.64);
  backdrop-filter: blur(28px) saturate(170%);
  -webkit-backdrop-filter: blur(28px) saturate(170%);
}

.ai-panel-card {
  width: min(980px, 94vw) !important;
  height: min(86vh, 800px) !important;
  max-height: 86vh !important;
  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto !important;
  overflow: hidden !important;
  border-radius: 30px !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.78), rgba(233, 248, 255, 0.56), rgba(255, 247, 224, 0.24)),
    rgba(255, 255, 255, 0.58) !important;
  border: 1px solid rgba(255, 255, 255, 0.72) !important;
  box-shadow:
    0 32px 90px rgba(5, 22, 54, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.86) !important;
}

.ai-panel-head {
  min-height: 62px !important;
  padding: 11px 15px !important;
  gap: 12px !important;
  background: rgba(255, 255, 255, 0.52) !important;
  border-bottom: 1px solid rgba(6, 22, 74, 0.06) !important;
  backdrop-filter: blur(20px) saturate(170%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(170%) !important;
}

.ai-title-lockup {
  gap: 10px !important;
}

.ai-title-lockup img {
  width: 42px !important;
  height: 42px !important;
  border-radius: 15px !important;
  box-shadow: 0 10px 24px rgba(6, 22, 74, 0.12) !important;
}

.ai-panel-head .eyebrow {
  display: none !important;
}

.ai-panel-head h2 {
  margin: 0 !important;
  font-size: 1.08rem !important;
  letter-spacing: 0 !important;
  line-height: 1.06 !important;
}

.ai-panel-head p:not(.eyebrow) {
  margin: 2px 0 0 !important;
  color: rgba(6, 22, 74, 0.58) !important;
  font-size: 0.72rem !important;
  line-height: 1.15 !important;
}

.ai-head-call,
.ai-head-settings,
.ai-panel-head .icon-button {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  border-radius: 15px !important;
  background: rgba(255, 255, 255, 0.62) !important;
  border: 1px solid rgba(255, 255, 255, 0.74) !important;
  box-shadow: 0 12px 28px rgba(6, 22, 74, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.86) !important;
  transition: transform 180ms cubic-bezier(.2,.9,.2,1), background 180ms ease, box-shadow 180ms ease !important;
}

.ai-head-call:active,
.ai-head-settings:active,
.ai-panel-head .icon-button:active,
.ai-tool-button:active,
.ai-quick-actions button:active,
.ai-mode-start-button:active {
  transform: scale(0.96) !important;
}

.ai-quick-actions {
  min-height: 42px !important;
  padding: 7px 14px !important;
  gap: 7px !important;
  overflow-x: auto !important;
  background: rgba(255, 255, 255, 0.24) !important;
  border-bottom: 1px solid rgba(6, 22, 74, 0.04) !important;
  scrollbar-width: none !important;
}

.ai-quick-actions::-webkit-scrollbar {
  display: none !important;
}

.ai-quick-actions button {
  min-height: 30px !important;
  padding: 0 13px !important;
  border-radius: 999px !important;
  color: rgba(6, 22, 74, 0.72) !important;
  background: rgba(255, 255, 255, 0.52) !important;
  border: 1px solid rgba(255, 255, 255, 0.72) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76) !important;
  font-size: 0.72rem !important;
  font-weight: 850 !important;
  white-space: nowrap !important;
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease !important;
}

.ai-quick-actions button.active,
.ai-quick-actions button:hover {
  color: #06164a !important;
  background: rgba(255, 255, 255, 0.82) !important;
  box-shadow: 0 12px 28px rgba(6, 22, 74, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

.ai-panel.ai-welcome-mode .ai-hero-console {
  display: none !important;
}

.ai-chat-log {
  min-height: 0 !important;
  padding: 14px 16px 8px !important;
  gap: 10px !important;
  overflow-y: auto !important;
  scroll-behavior: smooth !important;
}

.ai-panel.ai-welcome-mode .ai-chat-log {
  display: block !important;
}

.ai-message {
  gap: 8px !important;
  animation: aiMessageIn 190ms ease both !important;
}

.ai-message.assistant > img,
.ai-message.typing > img {
  width: 30px !important;
  height: 30px !important;
  margin-top: 3px !important;
  border-radius: 999px !important;
  box-shadow: 0 10px 22px rgba(6, 22, 74, 0.1) !important;
}

.ai-message > div {
  max-width: min(78%, 720px) !important;
  padding: 9px 11px !important;
  border-radius: 18px !important;
  font-size: 0.86rem !important;
  line-height: 1.42 !important;
}

.ai-message.assistant > div {
  color: #06164a !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.78), rgba(238, 250, 255, 0.52)),
    rgba(255, 255, 255, 0.58) !important;
  border: 1px solid rgba(255, 255, 255, 0.74) !important;
  box-shadow: 0 14px 34px rgba(6, 22, 74, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.86) !important;
  backdrop-filter: blur(18px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(160%) !important;
}

.ai-message.user > div {
  color: #fff !important;
  background: linear-gradient(145deg, rgba(5, 18, 70, 0.94), rgba(8, 52, 118, 0.88)) !important;
  box-shadow: 0 16px 34px rgba(6, 22, 74, 0.2) !important;
  border: 1px solid rgba(120, 210, 255, 0.18) !important;
}

.ai-message span {
  margin-bottom: 4px !important;
  font-size: 0.58rem !important;
  letter-spacing: 0.02em !important;
}

.ai-message p {
  margin: 0.3em 0 !important;
  font-size: 0.86rem !important;
  line-height: 1.42 !important;
}

.ai-smart-card,
.ai-learning-card,
.ai-mode-setup-card {
  border-radius: 20px !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.78), rgba(238, 250, 255, 0.48)),
    rgba(255, 255, 255, 0.58) !important;
  border: 1px solid rgba(255, 255, 255, 0.74) !important;
  box-shadow: 0 18px 46px rgba(6, 22, 74, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.88) !important;
}

.ai-mode-setup-card {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.ai-mode-setup-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ai-mode-setup-head > span {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: #06164a;
  background: rgba(235, 249, 255, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.78);
}

.ai-mode-setup-head p,
.ai-mode-setup-head h3 {
  margin: 0;
}

.ai-mode-setup-head p {
  color: rgba(6, 22, 74, 0.54);
  font-size: 0.64rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.ai-mode-setup-head h3 {
  color: #06164a;
  font-size: 0.94rem;
  line-height: 1.28;
}

.ai-mode-setup-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.ai-mode-setup-grid label {
  display: grid;
  gap: 5px;
}

.ai-mode-setup-grid label.wide {
  grid-column: 1 / -1;
}

.ai-mode-setup-grid label span {
  color: rgba(6, 22, 74, 0.56);
  font-size: 0.64rem;
  font-weight: 850;
}

.ai-mode-setup-grid input,
.ai-mode-setup-grid select {
  width: 100%;
  min-height: 38px;
  padding: 0 10px;
  border-radius: 14px;
  color: #06164a;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(6, 22, 74, 0.08);
  outline: none;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 750;
}

.ai-mode-start-button {
  min-height: 42px;
  border: 0;
  border-radius: 16px;
  color: white;
  background: linear-gradient(135deg, #07145f, #087cdf 68%, #35c7ff);
  box-shadow: 0 16px 36px rgba(8, 124, 223, 0.24);
  font-size: 0.84rem;
  font-weight: 900;
  cursor: pointer;
}

.ai-option-grid {
  gap: 8px !important;
}

.ai-option-grid button {
  min-height: 48px !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, 0.68) !important;
  border: 1px solid rgba(6, 22, 74, 0.08) !important;
  box-shadow: 0 10px 24px rgba(6, 22, 74, 0.06) !important;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease !important;
}

.ai-option-grid button:active {
  transform: scale(0.98) !important;
}

.ai-quiz-feedback-card.correct .ai-option-grid button.correct {
  border-color: rgba(16, 185, 129, 0.5) !important;
  background: rgba(236, 253, 245, 0.86) !important;
}

.ai-quiz-feedback-card.incorrect .ai-option-grid button.selected:not(.correct) {
  border-color: rgba(239, 68, 68, 0.48) !important;
  background: rgba(254, 242, 242, 0.88) !important;
}

.ai-followups {
  min-height: 38px !important;
  padding: 5px 15px 6px !important;
  gap: 7px !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
}

.ai-followups::-webkit-scrollbar {
  display: none !important;
}

.ai-followups button {
  min-height: 30px !important;
  padding: 0 11px !important;
  border-radius: 999px !important;
  font-size: 0.68rem !important;
  white-space: nowrap !important;
}

.ai-composer {
  padding: 8px 15px calc(env(safe-area-inset-bottom, 0px) + 12px) !important;
}

.ai-composer-bar {
  min-height: 50px !important;
  padding: 7px 8px 7px 11px !important;
  border-radius: 22px !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.84), rgba(236, 249, 255, 0.58)),
    rgba(255, 255, 255, 0.68) !important;
  border: 1px solid rgba(255, 255, 255, 0.78) !important;
  box-shadow: 0 18px 44px rgba(6, 22, 74, 0.11), inset 0 1px 0 rgba(255, 255, 255, 0.88) !important;
}

.ai-composer textarea {
  min-height: 30px !important;
  max-height: 96px !important;
  padding: 7px 4px !important;
  font-size: 0.88rem !important;
  line-height: 1.36 !important;
}

.ai-tool-button,
.ai-composer .primary-button {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  border-radius: 15px !important;
}

.ai-tool-button small {
  display: none !important;
}

.ai-call-card {
  width: min(92vw, 430px) !important;
  min-height: min(78vh, 640px) !important;
  gap: 12px !important;
  border-radius: 32px !important;
}

.ai-call-orb {
  width: clamp(132px, 32vw, 168px) !important;
  height: clamp(132px, 32vw, 168px) !important;
}

.ai-call-card h2 {
  font-size: clamp(1.8rem, 7vw, 2.5rem) !important;
}

.ai-call-card p#aiCallStatus {
  font-size: 0.96rem !important;
  line-height: 1.36 !important;
}

@media (max-width: 560px) {
  .ai-panel {
    padding: calc(env(safe-area-inset-top, 0px) + 8px) 8px calc(env(safe-area-inset-bottom, 0px) + 8px) !important;
  }

  .ai-panel-card {
    width: 94vw !important;
    height: 86vh !important;
    max-height: 86vh !important;
    border-radius: 24px !important;
  }

  .ai-panel-head {
    min-height: 58px !important;
    padding: 9px 11px !important;
  }

  .ai-head-settings {
    display: none !important;
  }

  .ai-chat-log {
    padding: 11px 11px 6px !important;
    gap: 8px !important;
  }

  .ai-message > div {
    max-width: 82% !important;
    padding: 8px 10px !important;
    font-size: 0.84rem !important;
  }

  .ai-message p {
    font-size: 0.84rem !important;
  }

  .ai-mode-setup-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .ai-mode-setup-card {
    padding: 12px;
  }

  .ai-composer {
    padding: 6px 10px calc(env(safe-area-inset-bottom, 0px) + 10px) !important;
  }
}

/* Compact first-open Baihaqi AI workspace */
.ai-panel.ai-welcome-mode .ai-panel-card {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  height: min(86vh, 780px);
  max-height: 86vh;
  overflow: hidden;
}

.ai-panel.ai-welcome-mode .ai-hero-console {
  align-self: stretch;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(92px, 0.36fr) minmax(0, 1fr);
  grid-template-areas:
    "visual greeting"
    "progress progress"
    "actions actions"
    "suggest suggest";
  gap: 9px;
  margin: 0 16px 8px;
  padding: 12px;
  overflow: visible;
  border-radius: 24px;
}

.ai-panel.ai-welcome-mode .ai-hero-visual {
  min-height: 116px;
}

.ai-panel.ai-welcome-mode .ai-brand-mark {
  display: none;
}

.ai-panel.ai-welcome-mode .ai-hero-visual img {
  width: min(126px, 92%);
  filter: drop-shadow(0 18px 30px rgba(8, 18, 56, 0.18));
}

.ai-panel.ai-welcome-mode .ai-hero-ring {
  inset: 12px 2px;
  opacity: 0.52;
}

.ai-panel.ai-welcome-mode .ai-hero-greeting {
  align-self: center;
  gap: 5px;
  padding: 11px 12px;
  border-radius: 19px;
}

.ai-panel.ai-welcome-mode .ai-hero-greeting .eyebrow {
  font-size: 0.55rem;
  letter-spacing: 0.08em;
}

.ai-panel.ai-welcome-mode .ai-hero-greeting h3 {
  font-size: clamp(1rem, 5vw, 1.24rem);
  line-height: 1.05;
}

.ai-panel.ai-welcome-mode .ai-hero-greeting p:not(.eyebrow) {
  font-size: 0.72rem;
  line-height: 1.18;
}

.ai-panel.ai-welcome-mode .ai-status-row {
  gap: 5px;
}

.ai-panel.ai-welcome-mode .ai-status-row span {
  min-height: 24px;
  padding: 0 8px;
  font-size: 0.62rem;
}

.ai-panel.ai-welcome-mode .ai-progress-grid {
  gap: 7px;
}

.ai-panel.ai-welcome-mode .ai-progress-card {
  min-height: 62px;
  gap: 4px;
  padding: 8px 7px;
  border-radius: 15px;
}

.ai-panel.ai-welcome-mode .ai-progress-card span {
  font-size: 0.54rem;
}

.ai-panel.ai-welcome-mode .ai-progress-card strong {
  font-size: clamp(0.82rem, 4vw, 1.05rem);
  line-height: 1.05;
}

.ai-panel.ai-welcome-mode .ai-progress-card em {
  display: none;
}

.ai-panel.ai-welcome-mode .ai-progress-card.score strong {
  width: 44px;
  height: 44px;
}

.ai-panel.ai-welcome-mode .ai-progress-card.xp div {
  height: 5px;
}

.ai-panel.ai-welcome-mode .ai-primary-actions {
  gap: 8px;
}

.ai-panel.ai-welcome-mode .ai-primary-actions button {
  min-height: 46px;
  padding: 0 10px;
  border-radius: 15px;
  font-size: 0.74rem;
}

.ai-panel.ai-welcome-mode .ai-primary-actions span {
  width: 24px;
  height: 24px;
  min-width: 24px;
}

.ai-panel.ai-welcome-mode .ai-suggestion-strip {
  min-height: 34px;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 1px;
  scrollbar-width: none;
}

.ai-panel.ai-welcome-mode .ai-suggestion-strip::-webkit-scrollbar {
  display: none;
}

.ai-panel.ai-welcome-mode .ai-suggestion-strip span {
  display: none;
}

.ai-panel.ai-welcome-mode .ai-suggestion-strip button {
  min-height: 28px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 0.62rem;
  white-space: nowrap;
}

.ai-panel.ai-welcome-mode .ai-composer {
  position: relative;
  z-index: 3;
  padding: 6px 16px 14px;
}

@media (max-width: 560px) {
  .ai-panel.ai-welcome-mode .ai-panel-card {
    width: 94vw;
    height: 86vh;
    max-height: 86vh;
    border-radius: 24px;
  }

  .ai-panel.ai-welcome-mode .ai-panel-head {
    min-height: 60px;
    padding: 10px 12px;
  }

  .ai-panel.ai-welcome-mode .ai-quick-actions {
    padding: 6px 12px;
    gap: 7px;
  }

  .ai-panel.ai-welcome-mode .ai-quick-actions button {
    min-height: 32px;
    padding: 0 13px;
    font-size: 0.72rem;
  }

  .ai-panel.ai-welcome-mode .ai-hero-console {
    margin: 0 11px 7px;
    padding: 10px;
    gap: 8px;
  }

  .ai-panel.ai-welcome-mode .ai-hero-visual {
    min-height: 100px;
  }

  .ai-panel.ai-welcome-mode .ai-hero-visual img {
    width: 96px;
  }

  .ai-panel.ai-welcome-mode .ai-progress-card {
    min-height: 56px;
  }

  .ai-panel.ai-welcome-mode .ai-primary-actions button {
    min-height: 43px;
  }

  .ai-panel.ai-welcome-mode .ai-composer {
    padding: 5px 11px calc(env(safe-area-inset-bottom, 0px) + 10px);
  }
}

/* Final Home V2: premium learning-first surface */
body .platform-home.active {
  display: grid;
  gap: clamp(10px, 1.6vh, 16px);
  align-content: start;
  min-height: auto;
}

body .platform-home .platform-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: clamp(9px, 1.35vh, 13px);
  min-height: 0;
  padding: clamp(15px, 3.7vw, 22px);
  overflow: hidden;
  color: #ffffff;
  border-radius: clamp(26px, 7vw, 34px);
  border: 1px solid rgba(255, 255, 255, 0.34);
  background:
    radial-gradient(circle at 16% 12%, rgba(255, 255, 255, 0.36), transparent 28%),
    radial-gradient(circle at 88% 0%, rgba(113, 232, 255, 0.46), transparent 31%),
    radial-gradient(circle at 78% 88%, rgba(246, 197, 83, 0.25), transparent 31%),
    linear-gradient(135deg, #06142f 0%, #082b67 44%, #0d77bf 76%, #1ed9f2 124%);
  box-shadow:
    0 26px 74px rgba(5, 22, 58, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.62),
    inset 0 -30px 76px rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(30px) saturate(190%);
  -webkit-backdrop-filter: blur(30px) saturate(190%);
}

body .platform-home .platform-hero::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  border-radius: inherit;
  background:
    linear-gradient(118deg, transparent 0 32%, rgba(255, 255, 255, 0.27) 44%, transparent 58% 100%),
    radial-gradient(circle at 72% 24%, rgba(105, 230, 255, 0.22), transparent 36%);
  opacity: 0.86;
  animation: homeAuroraGlide 9s ease-in-out infinite;
}

body .platform-home .platform-hero::after {
  content: "";
  position: absolute;
  inset: 10px;
  z-index: -1;
  border-radius: 24px;
  background:
    radial-gradient(circle at 20% 32%, rgba(255, 255, 255, 0.14) 0 1px, transparent 2px),
    radial-gradient(circle at 64% 40%, rgba(255, 255, 255, 0.12) 0 1px, transparent 2px);
  background-size: 72px 72px, 96px 96px;
  opacity: 0.55;
}

body .platform-home .hero-orb,
body .platform-home .brand-mark,
body .platform-home .platform-brand {
  display: none;
}

body .platform-home .home-learning-hero {
  display: block;
  min-width: 0;
}

body .platform-home .home-greeting {
  margin: 0 0 5px;
  padding: 0;
  max-width: none;
  color: rgba(255, 255, 255, 0.86);
  background: transparent;
  border: 0;
  box-shadow: none;
  font-size: clamp(0.92rem, 3.8vw, 1.15rem);
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.2;
  white-space: normal;
  text-transform: none;
}

body .platform-home .home-motivation {
  max-width: 30rem;
  margin: 0;
  color: #ffffff;
  font-size: clamp(1.42rem, 6.6vw, 2.35rem);
  line-height: 1.04;
  letter-spacing: -0.04em;
  font-weight: 950;
  text-wrap: balance;
  text-shadow: 0 16px 42px rgba(2, 23, 63, 0.24);
}

body .platform-home .home-xp-progress {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 12px;
  margin: 0;
  padding: 10px 12px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  background: rgba(255, 255, 255, 0.15);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32);
  backdrop-filter: blur(20px) saturate(170%);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
}

body .platform-home .home-xp-progress span,
body .platform-home .home-xp-progress strong {
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.72rem;
  font-weight: 950;
}

body .platform-home .home-xp-progress div {
  grid-column: 1 / -1;
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
}

body .platform-home .home-xp-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ffe18a, #ffffff 42%, #77edff);
  box-shadow: 0 0 22px rgba(119, 237, 255, 0.42);
  transition: width 900ms cubic-bezier(.2,.8,.2,1);
}

body .platform-home .hero-mini-stats.home-essential-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

body .platform-home .home-essential-stats article {
  min-height: 0;
  padding: 9px 10px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.27);
  backdrop-filter: blur(20px) saturate(170%);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
}

body .platform-home .home-essential-stats span {
  display: block;
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.62rem;
  font-weight: 850;
}

body .platform-home .home-essential-stats strong {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  color: #ffffff;
  font-size: clamp(0.88rem, 3.7vw, 1.1rem);
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body .platform-home .continue-learning-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  min-height: 0;
  padding: 10px 12px 10px 16px;
  border-radius: 20px;
  border: 1px solid rgba(8, 35, 79, 0.08);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(238, 250, 255, 0.58)),
    rgba(255, 255, 255, 0.72);
  box-shadow: 0 14px 38px rgba(12, 38, 78, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
}

body .platform-home .continue-learning-card::before {
  content: "";
  position: absolute;
  inset: 10px auto 10px 8px;
  width: 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, #18c9ef, #d6a84f);
  box-shadow: 0 0 18px rgba(24, 201, 239, 0.22);
}

body .platform-home .continue-learning-card .eyebrow {
  margin: 0 0 2px;
  font-size: 0.58rem;
}

body .platform-home .continue-learning-card h3 {
  margin: 0;
  color: #081d4f;
  font-size: 0.9rem;
  line-height: 1.15;
  font-weight: 950;
}

body .platform-home .continue-learning-card p:not(.eyebrow) {
  margin: 2px 0 0;
  color: #607089;
  font-size: 0.68rem;
  font-weight: 780;
}

body .platform-home .continue-learning-card .ghost-button {
  min-height: 34px;
  padding-inline: 11px;
  border-radius: 14px;
  font-size: 0.72rem;
  white-space: nowrap;
}

body .platform-home .quick-access-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(10px, 2vw, 14px);
}

body .platform-home .quick-access-card {
  --accent: #10b981;
  --accent-soft: rgba(16, 185, 129, 0.13);
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr auto;
  align-content: start;
  gap: 8px;
  min-height: clamp(126px, 18vh, 168px);
  padding: clamp(15px, 3.5vw, 20px);
  text-align: left;
  border-radius: 25px;
  border: 1px solid rgba(8, 24, 56, 0.08);
  background:
    radial-gradient(circle at 100% 0%, var(--accent-soft), transparent 42%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.68));
  box-shadow: 0 20px 52px rgba(12, 38, 78, 0.11), inset 0 1px 0 rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  cursor: pointer;
  transition: transform 220ms cubic-bezier(.2,.8,.2,1), box-shadow 220ms cubic-bezier(.2,.8,.2,1);
}

body .platform-home .quick-access-card:nth-child(2) {
  --accent: #8b5cf6;
  --accent-soft: rgba(139, 92, 246, 0.13);
}

body .platform-home .quick-access-card:nth-child(3) {
  --accent: #f97316;
  --accent-soft: rgba(249, 115, 22, 0.14);
}

body .platform-home .quick-access-card:nth-child(4) {
  --accent: #06b6d4;
  --accent-soft: rgba(6, 182, 212, 0.16);
}

body .platform-home .quick-access-card::before {
  content: "";
  position: absolute;
  inset: 14px auto 14px 0;
  width: 4px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 22px color-mix(in srgb, var(--accent) 40%, transparent);
}

body .platform-home .quick-access-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.62), transparent);
  transform: translateX(-130%);
  opacity: 0.58;
  transition: transform 560ms var(--ease);
}

body .platform-home .quick-access-card:hover,
body .platform-home .quick-access-card:focus-visible {
  transform: translateY(-3px) scale(1.01);
  box-shadow: 0 26px 64px rgba(12, 38, 78, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

body .platform-home .quick-access-card:hover::after,
body .platform-home .quick-access-card:focus-visible::after {
  transform: translateX(130%);
}

body .platform-home .quick-access-card:active {
  transform: scale(0.985);
}

body .platform-home .quick-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 18px;
  color: var(--accent);
  font-size: 1.25rem;
  background:
    radial-gradient(circle at 35% 20%, rgba(255, 255, 255, 0.96), transparent 38%),
    color-mix(in srgb, var(--accent) 14%, white);
  border: 1px solid color-mix(in srgb, var(--accent) 24%, white);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 14px 28px color-mix(in srgb, var(--accent) 15%, transparent);
}

body .platform-home .quick-access-card strong {
  grid-column: 1 / -1;
  color: #081d4f;
  font-size: clamp(1rem, 4.3vw, 1.22rem);
  line-height: 1.05;
  font-weight: 950;
}

body .platform-home .quick-access-card small {
  grid-column: 1 / -1;
  color: #607089;
  font-size: clamp(0.72rem, 3vw, 0.84rem);
  line-height: 1.28;
  font-weight: 780;
}

body .platform-home .quick-access-card em {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 9%, white);
  font-size: 1rem;
  font-style: normal;
  font-weight: 950;
  transition: transform 180ms var(--ease);
}

body .platform-home .quick-access-card:active em {
  transform: translateX(3px);
}

@keyframes homeAuroraGlide {
  0%, 100% {
    opacity: 0.72;
    transform: translateX(-3%) translateY(0);
  }
  50% {
    opacity: 1;
    transform: translateX(3%) translateY(-2%);
  }
}

@media (max-width: 430px) {
  body .app-shell {
    padding-top: max(8px, env(safe-area-inset-top));
  }

  body .top-bar {
    min-height: 48px;
    padding: 6px 8px;
  }

  body main {
    padding-top: 8px;
  }

  body .platform-home.active {
    gap: 8px;
  }

  body .platform-home .platform-hero {
    gap: 8px;
    padding: 13px;
    border-radius: 26px;
  }

  body .platform-home .home-greeting {
    margin-bottom: 4px;
    font-size: 0.84rem;
  }

  body .platform-home .home-motivation {
    font-size: clamp(1.18rem, 5.8vw, 1.62rem);
    line-height: 1.05;
  }

  body .platform-home .home-xp-progress {
    padding: 7px 9px;
    border-radius: 15px;
  }

  body .platform-home .home-xp-progress span,
  body .platform-home .home-xp-progress strong {
    font-size: 0.62rem;
  }

  body .platform-home .home-xp-progress div {
    height: 8px;
  }

  body .platform-home .home-essential-stats {
    gap: 6px;
  }

  body .platform-home .home-essential-stats article {
    padding: 7px 8px;
    border-radius: 15px;
  }

  body .platform-home .home-essential-stats span {
    font-size: 0.52rem;
  }

  body .platform-home .home-essential-stats strong {
    font-size: 0.76rem;
  }

  body .platform-home .continue-learning-card {
    padding: 8px 9px 8px 14px;
    border-radius: 17px;
  }

  body .platform-home .continue-learning-card h3 {
    font-size: 0.78rem;
  }

  body .platform-home .continue-learning-card p:not(.eyebrow) {
    font-size: 0.6rem;
  }

  body .platform-home .continue-learning-card .ghost-button {
    min-height: 30px;
    padding-inline: 9px;
    font-size: 0.66rem;
  }

  body .platform-home .quick-access-grid {
    gap: 8px;
  }

  body .platform-home .quick-access-card {
    min-height: clamp(108px, 16vh, 136px);
    padding: 12px;
    border-radius: 20px;
    gap: 6px;
  }

  body .platform-home .quick-icon {
    width: 38px;
    height: 38px;
    border-radius: 15px;
    font-size: 1rem;
  }

  body .platform-home .quick-access-card strong {
    font-size: 0.9rem;
  }

  body .platform-home .quick-access-card small {
    font-size: 0.66rem;
  }

  body .platform-home .quick-access-card em {
    width: 28px;
    height: 28px;
    font-size: 0.82rem;
  }
}

/* Home V2 polish: same design, tighter vertical fit */
body .platform-home.active {
  gap: clamp(8px, 1.2vh, 12px);
}

body .platform-home .platform-hero {
  gap: clamp(7px, 1vh, 10px);
  padding: clamp(13px, 3.2vw, 19px);
}

body .platform-home .home-motivation {
  font-size: clamp(1.3rem, 5.9vw, 2.08rem);
  line-height: 1.03;
}

body .platform-home .home-xp-progress {
  padding: 8px 11px;
  gap: 6px 10px;
}

body .platform-home .home-xp-progress div {
  height: 8px;
}

body .platform-home .home-essential-stats article {
  padding: 7px 9px;
  border-radius: 16px;
}

body .platform-home .home-essential-stats span {
  font-size: 0.56rem;
}

body .platform-home .home-essential-stats strong {
  font-size: clamp(0.82rem, 3.35vw, 1rem);
}

body .platform-home .continue-learning-card {
  padding: 7px 10px 7px 15px;
  border-radius: 18px;
}

body .platform-home .continue-learning-card::before {
  inset: 9px auto 9px 8px;
}

body .platform-home .continue-learning-card h3 {
  font-size: 0.82rem;
}

body .platform-home .continue-learning-card p:not(.eyebrow) {
  font-size: 0.62rem;
}

body .platform-home .continue-learning-card .ghost-button {
  min-height: 30px;
  padding-inline: 10px;
  font-size: 0.68rem;
}

body .platform-home .quick-access-grid {
  gap: clamp(8px, 1.6vw, 11px);
}

body .platform-home .quick-access-card {
  min-height: clamp(112px, 16.5vh, 152px);
  padding: clamp(13px, 3vw, 17px);
  gap: 7px;
}

@media (max-width: 430px) {
  body .platform-home.active {
    gap: 7px;
  }

  body .platform-home .platform-hero {
    gap: 7px;
    padding: 11px 12px;
  }

  body .platform-home .home-motivation {
    font-size: clamp(1.08rem, 5.2vw, 1.48rem);
  }

  body .platform-home .home-xp-progress {
    padding: 6px 8px;
  }

  body .platform-home .home-xp-progress div {
    height: 7px;
  }

  body .platform-home .home-essential-stats article {
    padding: 6px 7px;
  }

  body .platform-home .continue-learning-card {
    padding: 6px 8px 6px 13px;
  }

  body .platform-home .continue-learning-card h3 {
    font-size: 0.72rem;
  }

  body .platform-home .continue-learning-card .ghost-button {
    min-height: 28px;
    font-size: 0.62rem;
  }

  body .platform-home .quick-access-grid {
    gap: 7px;
  }

  body .platform-home .quick-access-card {
    min-height: clamp(98px, 14.8vh, 126px);
    padding: 10px 11px;
  }
}

/* Home V3 balance: less dense, still premium and above the fold */
body .platform-home.active {
  gap: clamp(6px, 1vh, 10px);
}

body .platform-home .platform-hero {
  gap: clamp(6px, 0.85vh, 9px);
  padding: clamp(12px, 2.85vw, 17px);
}

body .platform-home .home-greeting {
  margin-bottom: 3px;
}

body .platform-home .home-motivation {
  font-size: clamp(1.22rem, 5.4vw, 1.92rem);
  line-height: 1.04;
}

body .platform-home .home-xp-progress {
  padding: 7px 10px;
}

body .platform-home .home-xp-progress div {
  height: 7px;
}

body .platform-home .home-essential-stats article {
  padding: 6px 9px;
}

body .platform-home .continue-learning-card {
  padding: 5px 10px 5px 15px;
  min-height: 0;
}

body .platform-home .continue-learning-card::before {
  inset: 8px auto 8px 8px;
}

body .platform-home .continue-learning-card .eyebrow {
  margin-bottom: 1px;
}

body .platform-home .continue-learning-card h3 {
  font-size: 0.78rem;
}

body .platform-home .continue-learning-card p:not(.eyebrow) {
  font-size: 0.58rem;
}

body .platform-home .continue-learning-card .ghost-button {
  min-height: 27px;
  padding-inline: 9px;
}

body .platform-home .quick-access-grid {
  gap: clamp(7px, 1.35vw, 10px);
}

body .platform-home .quick-access-card {
  align-content: space-between;
  min-height: clamp(104px, 15.1vh, 138px);
  padding: clamp(14px, 3.2vw, 18px);
  gap: 5px;
}

body .platform-home .quick-icon {
  width: 44px;
  height: 44px;
  border-radius: 17px;
}

body .platform-home .quick-access-card strong {
  margin-top: 2px;
}

body .platform-home .quick-access-card small {
  white-space: nowrap;
}

@media (max-width: 430px) {
  body .platform-home.active {
    gap: 6px;
  }

  body .platform-home .platform-hero {
    gap: 6px;
    padding: 10px 12px;
  }

  body .platform-home .home-greeting {
    font-size: 0.8rem;
  }

  body .platform-home .home-motivation {
    font-size: clamp(1rem, 4.85vw, 1.36rem);
  }

  body .platform-home .home-xp-progress {
    padding: 5px 8px;
  }

  body .platform-home .home-xp-progress div {
    height: 6px;
  }

  body .platform-home .home-essential-stats article {
    padding: 5px 7px;
  }

  body .platform-home .continue-learning-card {
    padding: 5px 8px 5px 13px;
  }

  body .platform-home .continue-learning-card .eyebrow,
  body .platform-home .continue-learning-card p:not(.eyebrow) {
    line-height: 1.05;
  }

  body .platform-home .continue-learning-card h3 {
    font-size: 0.68rem;
    line-height: 1.08;
  }

  body .platform-home .continue-learning-card .ghost-button {
    min-height: 26px;
    font-size: 0.6rem;
  }

  body .platform-home .quick-access-grid {
    gap: 6px;
  }

  body .platform-home .quick-access-card {
    min-height: clamp(92px, 13.7vh, 116px);
    padding: 11px 12px;
    gap: 4px;
  }

  body .platform-home .quick-icon {
    width: 36px;
    height: 36px;
    border-radius: 14px;
  }

  body .platform-home .quick-access-card strong {
    font-size: 0.86rem;
  }

  body .platform-home .quick-access-card small {
    font-size: 0.62rem;
  }
}

/* Baihaqi AI voice/chat final polish */
.ai-call-screen {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: grid;
  place-items: center;
  padding: calc(env(safe-area-inset-top, 0px) + 18px) 16px calc(env(safe-area-inset-bottom, 0px) + 18px);
  background:
    radial-gradient(circle at 50% 20%, rgba(73, 207, 255, 0.22), transparent 34%),
    radial-gradient(circle at 82% 72%, rgba(224, 184, 76, 0.18), transparent 30%),
    linear-gradient(145deg, rgba(248, 252, 255, 0.78), rgba(233, 244, 255, 0.64));
  backdrop-filter: blur(26px) saturate(180%);
  -webkit-backdrop-filter: blur(26px) saturate(180%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}

.ai-call-screen.active {
  opacity: 1;
  pointer-events: auto;
}

.ai-call-card {
  position: relative;
  width: min(94vw, 480px);
  min-height: min(78vh, 680px);
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 14px;
  padding: 28px 22px 22px;
  overflow: hidden;
  border-radius: 36px;
  color: #06164a;
  text-align: center;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(230, 247, 255, 0.58), rgba(255, 244, 214, 0.32)),
    rgba(255, 255, 255, 0.64);
  border: 1px solid rgba(255, 255, 255, 0.72);
  box-shadow:
    0 34px 90px rgba(6, 22, 74, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.88),
    inset 0 -1px 0 rgba(53, 199, 255, 0.16);
  transform: translateY(12px) scale(0.98);
  transition: transform 260ms cubic-bezier(.2, .9, .2, 1), opacity 220ms ease;
}

.ai-call-screen.active .ai-call-card {
  transform: translateY(0) scale(1);
}

.ai-call-card::before,
.ai-call-card::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.ai-call-card::before {
  inset: -35%;
  background:
    radial-gradient(circle at 35% 35%, rgba(53, 199, 255, 0.24), transparent 26%),
    radial-gradient(circle at 66% 48%, rgba(230, 185, 70, 0.18), transparent 22%);
  animation: aiLiquidDrift 14s ease-in-out infinite alternate;
}

.ai-call-card::after {
  top: -28%;
  left: -45%;
  width: 72%;
  height: 150%;
  transform: rotate(18deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.48), transparent);
  animation: aiGlassSweep 7s ease-in-out infinite;
}

.ai-call-card > * {
  position: relative;
  z-index: 1;
}

.ai-call-card > .icon-button {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 44px;
  height: 44px;
  border-radius: 16px;
  color: #06164a;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.74);
  box-shadow: 0 16px 34px rgba(6, 22, 74, 0.12);
}

.ai-call-orb {
  position: relative;
  width: clamp(138px, 34vw, 178px);
  height: clamp(138px, 34vw, 178px);
  display: grid;
  place-items: center;
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.96), rgba(228, 247, 255, 0.52) 52%, rgba(255, 230, 170, 0.18));
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.76),
    0 0 54px rgba(53, 199, 255, 0.26),
    0 24px 64px rgba(6, 22, 74, 0.14);
  animation: aiOrbFloat 5.5s ease-in-out infinite;
}

.ai-call-orb img {
  width: 84%;
  height: 84%;
  object-fit: cover;
  border-radius: 999px;
  border: 0;
  box-shadow: none;
}

.ai-call-halo {
  position: absolute;
  inset: -16px;
  border-radius: inherit;
  background: conic-gradient(from 120deg, rgba(53, 199, 255, 0.02), rgba(53, 199, 255, 0.34), rgba(224, 184, 76, 0.34), rgba(53, 199, 255, 0.02));
  filter: blur(2px);
  animation: aiHaloSpin 9s linear infinite;
}

.ai-call-card .eyebrow {
  margin: 4px 0 0;
  color: rgba(6, 22, 74, 0.58);
  letter-spacing: 0.12em;
  font-size: 0.66rem;
}

.ai-call-card h2 {
  margin: 0;
  font-size: clamp(1.75rem, 8vw, 2.55rem);
  letter-spacing: 0;
}

.ai-call-card p#aiCallStatus {
  max-width: 340px;
  min-height: 42px;
  margin: 0;
  color: rgba(6, 22, 74, 0.68);
  font-size: 0.98rem;
  line-height: 1.42;
}

.ai-call-meta,
.ai-call-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.ai-call-meta span,
.ai-call-badges span {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border-radius: 999px;
  color: #06164a;
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.72);
  box-shadow: 0 10px 24px rgba(6, 22, 74, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.82);
  font-size: 0.72rem;
  font-weight: 850;
}

.ai-waveform {
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 4px 0;
}

.ai-waveform span {
  width: 6px;
  height: 18px;
  border-radius: 999px;
  background: linear-gradient(180deg, #35c7ff, #0b2a5b);
  opacity: 0.34;
  transform-origin: center;
}

.ai-call-screen[data-call-state="listening"] .ai-waveform span,
.ai-call-screen[data-call-state="speaking"] .ai-waveform span,
.ai-call-screen[data-call-state="thinking"] .ai-waveform span {
  animation: aiWave 980ms ease-in-out infinite;
}

.ai-waveform span:nth-child(2) { animation-delay: 90ms; }
.ai-waveform span:nth-child(3) { animation-delay: 180ms; }
.ai-waveform span:nth-child(4) { animation-delay: 270ms; }
.ai-waveform span:nth-child(5) { animation-delay: 360ms; }
.ai-waveform span:nth-child(6) { animation-delay: 450ms; }

.ai-call-controls {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1.25fr 1fr;
  gap: 10px;
  margin-top: 4px;
}

.ai-call-controls button {
  min-height: 48px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.74);
  font-weight: 850;
  transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
}

.ai-call-controls button:active {
  transform: scale(0.97);
}

.ai-call-controls button:not(.end) {
  color: #06164a;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.84), rgba(221, 246, 255, 0.62)),
    rgba(255, 255, 255, 0.62);
  box-shadow: 0 14px 28px rgba(6, 22, 74, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

.ai-call-controls button:not(.end)::before {
  content: none;
}

.ai-call-controls #aiStartVoiceButton {
  color: white;
  background: linear-gradient(135deg, #081b56, #087cdf 58%, #35c7ff);
  box-shadow: 0 20px 42px rgba(8, 124, 223, 0.28);
}

.ai-call-controls .end {
  grid-column: 1 / -1;
  color: white;
  background: linear-gradient(135deg, #ff4e61, #d90f32);
  box-shadow: 0 18px 34px rgba(217, 15, 50, 0.24);
}

.ai-panel-card {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.86), rgba(235, 249, 255, 0.62), rgba(255, 245, 218, 0.22)),
    rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.72);
  box-shadow: 0 30px 90px rgba(6, 22, 74, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(26px) saturate(180%);
  -webkit-backdrop-filter: blur(26px) saturate(180%);
}

.ai-message.assistant .ai-message-card,
.ai-message.user .ai-message-card {
  border-radius: 22px;
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
}

.ai-composer-bar {
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.76);
  border: 1px solid rgba(255, 255, 255, 0.76);
  box-shadow: 0 18px 44px rgba(6, 22, 74, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

@keyframes aiLiquidDrift {
  from { transform: translate3d(-2%, -1%, 0) scale(1); }
  to { transform: translate3d(2%, 1%, 0) scale(1.04); }
}

@keyframes aiGlassSweep {
  0%, 36% { transform: translateX(-30%) rotate(18deg); opacity: 0; }
  48% { opacity: 0.9; }
  68%, 100% { transform: translateX(230%) rotate(18deg); opacity: 0; }
}

@keyframes aiOrbFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-5px) scale(1.015); }
}

@keyframes aiWave {
  0%, 100% { transform: scaleY(0.72); opacity: 0.38; }
  50% { transform: scaleY(1.75); opacity: 0.9; }
}

@media (max-width: 520px) {
  .ai-call-card {
    width: 94vw;
    min-height: 82vh;
    padding: 24px 16px 18px;
    border-radius: 30px;
  }

  .ai-call-card > .icon-button {
    top: 14px;
    right: 14px;
  }

  .ai-call-controls {
    grid-template-columns: 1fr 1fr;
  }

  .ai-call-controls #aiStartVoiceButton {
    grid-column: 1 / -1;
    order: -1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ai-call-card::before,
  .ai-call-card::after,
  .ai-call-orb,
  .ai-call-halo,
  .ai-call-screen[data-call-state="listening"] .ai-waveform span,
  .ai-call-screen[data-call-state="speaking"] .ai-waveform span,
  .ai-call-screen[data-call-state="thinking"] .ai-waveform span {
    animation: none !important;
  }
}

/* Baihaqi AI Chat Mascot */
.ai-chat-mascot {
  position: absolute;
  bottom: 84px;
  right: 16px;
  width: 72px;
  height: 72px;
  z-index: 10;
  pointer-events: none;
  animation: gentleFloat 4s ease-in-out infinite;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s ease;
}

.ai-chat-mascot .baihaqi-mascot-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.15));
  transition: transform 0.2s ease, filter 0.2s ease;
}

.ai-chat-mascot .ai-mascot-bubble {
  position: absolute;
  bottom: 100%;
  right: 50%;
  background: var(--surface-100);
  border: 1px solid var(--border-light);
  padding: 4px 8px;
  border-radius: 12px;
  border-bottom-right-radius: 2px;
  font-size: 11px;
  color: var(--text-primary);
  white-space: nowrap;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.ai-chat-mascot.show-bubble .ai-mascot-bubble {
  opacity: 1;
  transform: translateY(-8px);
}

.ai-panel:has(.ai-followups:not(.hidden)) .ai-chat-mascot {
  transform: translateY(-50px);
  opacity: 0.6;
}

@keyframes gentleFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.ai-chat-mascot.speaking .baihaqi-mascot-img {
  filter: drop-shadow(0 0 16px rgba(52, 199, 89, 0.6));
  animation: mascotPulse 1.5s infinite;
}

.ai-chat-mascot.listening .baihaqi-mascot-img {
  filter: drop-shadow(0 0 16px rgba(10, 132, 255, 0.6));
}

@keyframes mascotPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* VisionOS Home Screen Styles */
.platform-home.vision-home {
  position: relative;
  background: transparent;
  padding-bottom: 120px;
}

.platform-home.vision-home::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, rgba(10, 132, 255, 0.1), transparent 50%),
              radial-gradient(circle at bottom left, rgba(48, 209, 88, 0.05), transparent 50%);
  z-index: -1;
  pointer-events: none;
}

.vision-hero {
  position: relative;
  margin: 16px;
  border-radius: 24px;
  overflow: hidden;
  padding: 24px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.05);
}

.vision-hero-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(10, 132, 255, 0.15), rgba(48, 209, 88, 0.1));
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: inherit;
  z-index: 0;
  box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.2);
}
.dark-theme .vision-hero-bg {
  background: linear-gradient(135deg, rgba(10, 132, 255, 0.1), rgba(0, 0, 0, 0.4));
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.05);
}

.vision-hero-content {
  position: relative;
  z-index: 1;
}

.vision-greeting {
  font-size: 14px;
  opacity: 0.8;
  margin-bottom: 4px;
}

.vision-motivation {
  font-size: 24px;
  font-weight: 700;
  background: linear-gradient(135deg, var(--text-primary), var(--brand-blue));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.vision-xp-bar {
  margin-top: 20px;
}
.vision-xp-track {
  height: 8px;
  background: rgba(0,0,0,0.05);
  border-radius: 4px;
  overflow: hidden;
  margin: 8px 0;
}
.dark-theme .vision-xp-track {
  background: rgba(255,255,255,0.1);
}
.vision-xp-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #30D158, #34C759);
  border-radius: 4px;
  box-shadow: 0 0 8px rgba(48, 209, 88, 0.5);
}

.vision-stats-grid {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}
.vision-stat-card {
  flex: 1;
  background: rgba(255,255,255,0.3);
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.4);
}
.dark-theme .vision-stat-card {
  background: rgba(0,0,0,0.2);
  border-color: rgba(255,255,255,0.05);
}

.vision-continue-card {
  margin: 16px;
  padding: 20px;
  border-radius: 20px;
  background: rgba(10, 132, 255, 0.05);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(10, 132, 255, 0.2);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.vision-eyebrow {
  color: var(--brand-blue);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 11px;
}

.vision-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  padding: 0 16px;
}

.vision-card {
  position: relative;
  padding: 20px;
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  border: none;
  background: transparent;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  animation: cardEntrance 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}

.vision-card:nth-child(1) { animation-delay: 0.05s; }
.vision-card:nth-child(2) { animation-delay: 0.1s; }
.vision-card:nth-child(3) { animation-delay: 0.15s; }
.vision-card:nth-child(4) { animation-delay: 0.2s; }
.vision-card:nth-child(5) { animation-delay: 0.25s; grid-column: span 2; }

@keyframes cardEntrance {
  from { opacity: 0; transform: translateY(20px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.vision-card:active {
  transform: scale(0.95);
}

.vision-card-glass {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: inherit;
  z-index: -1;
}
.dark-theme .vision-card-glass {
  background: rgba(20, 20, 20, 0.5);
  border-color: rgba(255, 255, 255, 0.1);
}

.vision-icon-bubble {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: var(--bubble-color);
  color: white;
  font-size: 20px;
  margin-bottom: 12px;
  box-shadow: 0 4px 12px var(--bubble-color);
  opacity: 0.9;
}

.vision-card strong {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 4px;
}
.vision-card small {
  font-size: 13px;
  opacity: 0.7;
}

body:has(.platform-home.active) .bottom-nav {
  background: rgba(255, 255, 255, 0.4) !important;
  backdrop-filter: blur(30px) !important;
  -webkit-backdrop-filter: blur(30px) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.5) !important;
  box-shadow: 0 -10px 40px rgba(0,0,0,0.05) !important;
}
.dark-theme body:has(.platform-home.active) .bottom-nav {
  background: rgba(20, 20, 20, 0.5) !important;
  border-top-color: rgba(255, 255, 255, 0.1) !important;
}

/* Hospital Department Selection */
.hospital-departments-scroll {
  display: flex;
  overflow-x: auto;
  gap: 12px;
  padding: 16px;
  padding-bottom: 8px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.hospital-departments-scroll::-webkit-scrollbar {
  display: none;
}
.dept-chip {
  flex: 0 0 auto;
  padding: 10px 20px;
  border-radius: 24px;
  font-size: 14px;
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  color: var(--text-primary);
  cursor: pointer;
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.dark-theme .dept-chip {
  background: rgba(40, 40, 40, 0.5);
  border-color: rgba(255, 255, 255, 0.1);
}
.dept-chip.active {
  background: var(--brand-blue);
  color: white;
  border-color: var(--brand-blue);
  box-shadow: 0 4px 16px rgba(10, 132, 255, 0.4);
}
.dept-chip.locked {
  opacity: 0.8;
}
.dept-chip .lock-icon {
  font-size: 12px;
  opacity: 0.6;
}
.dept-chip:active {
  transform: scale(0.95);
}

/* Dynamic Island */
.dynamic-island {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%) scale(0.8);
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 99px;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  font-size: 0.9rem;
  font-weight: 600;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  z-index: 99999;
  opacity: 0;
  pointer-events: none;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  white-space: nowrap;
}

.dynamic-island.visible {
  transform: translateX(-50%) scale(1);
  opacity: 1;
}

.dynamic-island.hidden {
  display: flex !important;
  opacity: 0;
  transform: translateX(-50%) scale(0.8);
  pointer-events: none;
}

#dynamicIslandIcon {
  font-size: 1.1rem;
}

/* AI Companion Living Animations */
@keyframes breathing {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); filter: brightness(1.1); }
}

@keyframes blinking {
  0%, 96%, 98%, 100% { opacity: 1; }
  97%, 99% { opacity: 0.5; }
}

.baihaqi-mascot-img {
  animation: breathing 4s ease-in-out infinite, blinking 8s infinite;
}

.ai-floating-button {
  animation: aiBubbleFloat 4s ease-in-out infinite;
}

.ai-chat-mode .ai-chat-log {
  flex: 1 1 0%;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow-y: auto;
  padding-bottom: 80px; /* space for floating mascot */
}

.ai-chat-mascot {
  position: absolute;
  bottom: 12px;
  right: 12px;
  z-index: 20;
  transition: all 0.3s ease;
  pointer-events: none;
}
.ai-chat-mascot img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  pointer-events: auto;
}
.ai-mascot-bubble {
  position: absolute;
  bottom: 60px;
  right: 0;
  background: var(--brand-blue);
  color: #fff;
  padding: 8px 12px;
  border-radius: 12px;
  border-bottom-right-radius: 2px;
  font-size: 0.8rem;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(8px);
  transition: all 0.3s var(--ease);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  pointer-events: none;
}
.ai-chat-mascot.show-bubble .ai-mascot-bubble {
  opacity: 1;
  transform: translateY(0);
}

/* Premium MedDex Identity Card (VisionOS Inspired) */
.premium-identity-card {
  position: relative;
  margin: 1.5rem 0;
  padding: 1.25rem;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.03);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), inset 0 1px 1px rgba(255, 255, 255, 0.1);
  overflow: hidden;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
  color: var(--text-primary);
}

.premium-identity-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2), inset 0 1px 1px rgba(255, 255, 255, 0.15);
}

.identity-glass-bg {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 0;
  border-radius: inherit;
}
.identity-glass-bg::before {
  content: "";
  position: absolute;
  top: -50%; left: -50%; right: -50%; bottom: -50%;
  background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.15) 0%, transparent 40%, rgba(var(--accent-rgb), 0.1) 100%);
  z-index: -1;
  animation: identityGlow 10s ease infinite alternate;
}

@keyframes identityGlow {
  0% { transform: rotate(0deg) translate(0, 0); }
  100% { transform: rotate(5deg) translate(-10px, 10px); }
}

.identity-content {
  position: relative;
  z-index: 1;
}

.identity-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.identity-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--bg-level-3), var(--bg-level-1));
  padding: 3px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  flex-shrink: 0;
}

.identity-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bg-level-1);
}

.identity-info {
  flex-grow: 1;
  overflow: hidden;
}

.identity-info h4 {
  margin: 0 0 0.25rem 0;
  font-size: 1.1rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.02em;
}

.identity-username {
  margin: 0;
  font-size: 0.9rem;
  color: var(--accent-primary);
  opacity: 0.9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.identity-share-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.2s var(--ease);
}
.identity-share-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.05);
}

.identity-details {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  background: rgba(0, 0, 0, 0.2);
  padding: 1rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.identity-detail-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.detail-label {
  font-size: 0.85rem;
  color: var(--text-secondary);
  font-weight: 500;
}

.detail-value-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.detail-value-row code {
  background: transparent;
  padding: 0;
  font-size: 0.95rem;
  color: var(--text-primary);
  font-weight: 600;
  letter-spacing: 0.05em;
}

.identity-copy-btn {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s var(--ease);
}

.identity-copy-btn:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.1);
}



/* MKE Source Disclaimers */
.mke-disclaimer {
  display: inline-flex;
  align-items: center;
  font-size: 0.75rem;
  font-weight: 500;
  padding: 4px 8px;
  border-radius: 4px;
  margin-top: 8px;
  opacity: 0.8;
  gap: 4px;
}
.mke-disclaimer.ai-generated {
  background: rgba(255, 193, 7, 0.1);
  color: #f59e0b;
  border: 1px solid rgba(255, 193, 7, 0.2);
}
.mke-disclaimer.specialist-reviewed {
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.2);
}

/* ==========================================================================
   PREMIUM GLASSMORPHISM SPEECH BUBBLE & COMPANION MASCOT STYLING
   ========================================================================== */

/* Redesign the floating button to allow precise left bubble positioning */
.ai-floating-button {
  position: fixed !important;
  z-index: 12900 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
}

/* Redesigned Glassmorphic speech bubble */
.ai-floating-button .ai-bubble, .ai-bubble {
  position: absolute !important;
  right: calc(100% + 16px) !important;
  bottom: 8px !important;
  top: auto !important;
  left: auto !important;
  width: max-content !important;
  min-width: 170px !important;
  max-width: 280px !important;
  padding: 12px 14px !important;
  border-radius: 20px !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  line-height: 1.45 !important;
  color: #0c2340 !important;
  overflow: visible !important;
  
  /* Glassmorphism details */
  background: rgba(255, 255, 255, 0.74) !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  box-shadow: 0 16px 42px rgba(8, 23, 56, 0.08), 0 2px 10px rgba(8, 23, 56, 0.04) !important;
  backdrop-filter: blur(16px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(190%) !important;
  
  /* Smooth animations */
  will-change: opacity, transform;
  transform: scale(0.92) translate3d(10px, 0, 0) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1), transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* Active Contextual speech bubble */
.ai-floating-button .ai-bubble.is-contextual, .ai-bubble.is-contextual {
  transform: scale(1) translate3d(0, 0, 0) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Overwrite persistent or closed hidden states */
.ai-floating-button .ai-bubble.is-hiding, .ai-floating-button .ai-bubble.hidden,
.ai-bubble.is-hiding, .ai-bubble.hidden {
  opacity: 0 !important;
  transform: scale(0.92) translate3d(10px, 0, 0) !important;
  pointer-events: none !important;
}

/* Point arrow pointing to the mascot */
.ai-floating-button .ai-bubble::after, .ai-bubble::after {
  content: "" !important;
  position: absolute !important;
  right: -7px !important;
  top: 50% !important;
  transform: translateY(-50%) rotate(45deg) !important;
  width: 12px !important;
  height: 12px !important;
  background: rgba(255, 255, 255, 0.74) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.5) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.5) !important;
  pointer-events: none !important;
  z-index: 1 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Hide arrow for general non-floating bubbles if styled differently */
.ai-bubble-close {
  display: inline-grid !important;
  place-items: center !important;
  position: absolute !important;
  top: 6px !important;
  right: 6px !important;
  width: 16px !important;
  height: 16px !important;
  border-radius: 50% !important;
  color: #64748b !important;
  background: rgba(0, 0, 0, 0.05) !important;
  font-size: 0.75rem !important;
  cursor: pointer !important;
  border: none !important;
}

/* Sparkle / AI status icon styling */
.ai-sparkle-icon {
  margin-right: 6px !important;
  font-size: 0.9rem !important;
  vertical-align: middle !important;
  display: inline-block !important;
  animation: pulseSparkle 1.8s ease-in-out infinite alternate !important;
}

/* Limit speech bubble content to 2 lines, expanding on hover */
.ai-bubble-text-inner {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-height: 2.9em !important;
  transition: max-height 320ms cubic-bezier(0.4, 0, 0.2, 1) !important;
  white-space: normal !important;
}

.ai-floating-button .ai-bubble:hover .ai-bubble-text-inner,
.ai-bubble:hover .ai-bubble-text-inner {
  -webkit-line-clamp: unset !important;
  max-height: 22em !important;
}

/* Mascot custom living animations */
.ai-floating-button .baihaqi-mascot-img {
  animation: mascotFloatBreathing 4.5s ease-in-out infinite alternate !important;
  transition: transform 350ms cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* Thinking tilt and pulse animation */
.ai-floating-button[data-mascot-state="thinking"] .baihaqi-mascot-img {
  animation: mascotThinkingState 1.8s ease-in-out infinite alternate !important;
}

@keyframes mascotFloatBreathing {
  0% {
    transform: translateY(0) scale(1);
    filter: drop-shadow(0 10px 16px rgba(3, 17, 45, 0.16));
  }
  100% {
    transform: translateY(-8px) scale(1.03);
    filter: drop-shadow(0 18px 24px rgba(3, 17, 45, 0.22));
  }
}

@keyframes mascotThinkingState {
  0% {
    transform: translateY(-4px) rotate(-4deg) scale(0.98);
  }
  100% {
    transform: translateY(-8px) rotate(4deg) scale(1.02);
  }
}

@keyframes pulseSparkle {
  0% { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(1.22); opacity: 1; }
}

/* ============================================================
   BAIHAQI FLOATING MASCOT & SPEECH BUBBLE — PRODUCTION READY
   ============================================================ */

/* Global fixed mascot container */
.ai-floating-button {
  position: fixed !important;
  right: 18px !important;
  bottom: calc(90px + env(safe-area-inset-bottom, 0px)) !important;
  z-index: 13000 !important;
  display: grid !important;
  place-items: center !important;
  
  /* Responsive mascot size utilizing clamp() */
  width: clamp(64px, 14vw, 84px) !important;
  height: clamp(64px, 14vw, 84px) !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  
  background:
    radial-gradient(circle at 45% 28%, rgba(255, 255, 255, 0.96), rgba(225, 247, 255, 0.78) 58%, rgba(246, 197, 83, 0.38)) !important;
  box-shadow: 0 18px 44px rgba(5, 35, 81, 0.18), 0 0 0 1px rgba(255, 255, 255, 0.85), 0 0 42px rgba(24, 201, 239, 0.28) !important;
  
  /* Pointer actions and dynamic translations */
  transform: translate3d(var(--ai-orb-x, 0px), var(--ai-orb-y, 0px), 0px) !important;
  touch-action: none !important;
  cursor: grab !important;
  transition: transform 260ms cubic-bezier(0.2, 0.9, 0.18, 1), box-shadow 260ms ease, scale 180ms ease !important;
  animation: aiOrbBreath 4.8s ease-in-out infinite !important;
}

.ai-floating-button:active,
.ai-floating-button.dragging {
  cursor: grabbing !important;
  scale: 0.96 !important;
}

/* Mascot image sizing inside button */
.ai-floating-button img.baihaqi-mascot-img {
  width: 86% !important;
  height: 86% !important;
  object-fit: contain !important;
  border-radius: 999px !important;
  filter: drop-shadow(0 12px 18px rgba(3, 17, 45, 0.18)) !important;
}

/* Canonical speech bubble styling */
#aiBubble.ai-bubble {
  position: fixed !important;
  /* Fixed responsive bubble placement */
  right: 95px !important;
  bottom: 125px !important;
  top: auto !important;
  left: auto !important;
  z-index: 999999 !important; /* Always on top of all application views */

  display: flex !important;
  align-items: flex-start !important;
  gap: 6px !important;
  min-width: 150px !important;
  
  /* Mobile: 220px, Desktop: 280px responsive clamp */
  max-width: clamp(220px, 45vw, 280px) !important;
  padding: 12px 14px !important;
  border-radius: 20px 20px 4px 20px !important;

  /* Glassmorphism theme */
  background: rgba(255, 255, 255, 0.96) !important;
  border: 1px solid rgba(255, 255, 255, 0.75) !important;
  box-shadow:
    0 12px 30px rgba(7, 31, 73, 0.16),
    0 4px 10px rgba(7, 31, 73, 0.08),
    inset 0 1px 0 rgba(255,255,255,0.9) !important;
  backdrop-filter: blur(16px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%) !important;

  font-size: 0.83rem !important;
  font-weight: 550 !important;
  line-height: 1.45 !important;
  color: #0c2340 !important;
  white-space: normal !important;
  word-break: break-word !important;
  overflow: visible !important;

  /* Smooth transition states (fade + upward translation of 8px) */
  opacity: 0 !important;
  transform: translateY(8px) scale(0.95) !important;
  pointer-events: none !important;
  transition:
    opacity 250ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 250ms cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  will-change: opacity, transform !important;
}

/* Desktop override positioning */
@media (min-width: 768px) {
  #aiBubble.ai-bubble {
    right: 110px !important;
    bottom: 135px !important;
    max-width: 320px !important;
  }
}

/* Arrow pointing directly right toward the center of the mascot's face */
#aiBubble.ai-bubble::after {
  content: "" !important;
  position: absolute !important;
  right: -6px !important;
  top: 50% !important;
  bottom: auto !important;
  width: 12px !important;
  height: 12px !important;
  background: rgba(255, 255, 255, 0.96) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.75) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.75) !important;
  transform: translateY(-50%) rotate(45deg) !important;
  pointer-events: none !important;
}

/* Active visible state */
#aiBubble.ai-bubble.is-contextual {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
  pointer-events: auto !important;
}

/* Fade out state */
#aiBubble.ai-bubble.is-hiding {
  opacity: 0 !important;
  transform: translateY(8px) scale(0.95) !important;
  pointer-events: none !important;
}

/* Hidden state */
#aiBubble.ai-bubble.hidden {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Sibling visibility synchronization */
.ai-floating-button.mascot-hidden ~ #aiBubble,
.ai-floating-button.hide-for-modal ~ #aiBubble {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Close button inside speech bubble */
#aiBubble .ai-bubble-close {
  position: absolute !important;
  top: 7px !important;
  right: 7px !important;
  width: 18px !important;
  height: 18px !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 50% !important;
  background: rgba(0, 0, 0, 0.07) !important;
  color: #64748b !important;
  font-size: 0.78rem !important;
  line-height: 1 !important;
  cursor: pointer !important;
  display: grid !important;
  place-items: center !important;
  z-index: 1 !important;
  flex-shrink: 0 !important;
}

#aiBubble .ai-bubble-close:hover {
  background: rgba(0, 0, 0, 0.13) !important;
  color: #0c2340 !important;
}

#aiBubble #aiBubbleText {
  flex: 1 !important;
  padding-right: 18px !important;
}

#aiBubble .ai-sparkle-icon {
  flex-shrink: 0 !important;
  font-size: 0.9rem !important;
  animation: pulseSparkle 1.8s ease-in-out infinite alternate !important;
}

#aiBubble .ai-bubble-text-inner {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: normal !important;
}

@keyframes premiumFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@keyframes premiumPulse {
  0%, 100% {
    box-shadow: 0 18px 44px rgba(5, 35, 81, 0.18), 0 0 0 1px rgba(255, 255, 255, 0.85), 0 0 42px rgba(24, 201, 239, 0.28);
  }
  50% {
    box-shadow: 0 18px 44px rgba(5, 35, 81, 0.24), 0 0 0 1px rgba(255, 255, 255, 0.95), 0 0 56px rgba(24, 201, 239, 0.48);
  }
}

/* Premium Liquid Glass Companion Panel */
.ai-companion-panel {
  position: absolute !important;
  bottom: 110% !important;
  right: 0 !important;
  z-index: 50 !important;
  width: 300px !important;
  padding: 20px !important;
  border-radius: 26px !important;
  /* Added with the Clinical DNA dashboard so the taller panel scrolls as one
     unit instead of overflowing off-screen. Purely additive. */
  max-height: 82vh !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;

  /* Liquid Glass styling */
  background: rgba(255, 255, 255, 0.88) !important;
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  box-shadow: 
    0 24px 60px rgba(5, 31, 75, 0.18),
    0 12px 24px rgba(5, 31, 75, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: blur(28px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(190%) !important;
  
  font-family: inherit !important;
  color: #0c2340 !important;
  pointer-events: auto !important;

  /* Spring transitions */
  opacity: 0 !important;
  transform: translateY(12px) scale(0.9) !important;
  transform-origin: bottom right !important;
  transition: 
    opacity 450ms cubic-bezier(0.34, 1.56, 0.64, 1), 
    transform 450ms cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  will-change: opacity, transform !important;
}

.ai-companion-panel.is-active {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
}

.ai-companion-panel.is-hiding {
  opacity: 0 !important;
  transform: translateY(12px) scale(0.9) !important;
}

.ai-companion-panel.hidden {
  display: none !important;
}

/* Panel Internal Typography & Sizing */
.ai-panel-header {
  margin-bottom: 14px !important;
  text-align: left !important;
}
.ai-panel-title {
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: #0c2340 !important;
}
.ai-panel-subtitle {
  font-size: 0.8rem !important;
  color: rgba(12, 35, 64, 0.64) !important;
}

.ai-panel-section {
  border-top: 1px solid rgba(12, 35, 64, 0.08) !important;
  padding: 10px 0 !important;
  text-align: left !important;
}
.ai-section-label {
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: rgba(12, 35, 64, 0.46) !important;
  margin-bottom: 6px !important;
}

/* Continue Card */
.ai-focus-card {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
}
.ai-focus-title {
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  color: #0c2340 !important;
}
.ai-focus-btn {
  background: #007aff !important;
  color: #fff !important;
  border: 0 !important;
  padding: 6px 14px !important;
  border-radius: 14px !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: background 200ms ease !important;
}
.ai-focus-btn:hover {
  background: #0062cc !important;
}

/* Quick Actions Grid */
.ai-actions-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 6px !important;
}
/* Hospital station action grid — exam/investigation/management pickers.
   Dedicated classes (not reusing .ai-action-btn, which other AI panels rely
   on) so this can get station-specific press feedback and a "done" state
   without touching unrelated UI. */
.hospital-stage-label {
  margin-bottom: 8px;
  font-weight: 700;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: rgba(12, 35, 64, .5);
}

.hospital-action-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.hospital-action-btn {
  position: relative;
  text-align: center;
  padding: 9px 6px;
  font-size: .75rem;
  font-weight: 600;
  color: #0c2340;
  background: rgba(12, 35, 64, .045);
  border: 1px solid rgba(12, 35, 64, .06);
  border-radius: 12px;
  cursor: pointer;
  transition: background 150ms ease, transform 100ms ease, border-color 150ms ease;
}

.hospital-action-btn:hover {
  background: rgba(12, 35, 64, .09);
  border-color: rgba(12, 35, 64, .12);
}

.hospital-action-btn:active {
  transform: scale(.96);
}

.hospital-action-btn.done {
  background: rgba(52, 199, 89, .1);
  border-color: rgba(52, 199, 89, .3);
  color: rgba(12, 35, 64, .7);
}

.hospital-action-btn.done::after {
  content: "✓";
  position: absolute;
  top: 2px;
  right: 6px;
  font-size: .68rem;
  color: #1f8a3d;
}

.hospital-proceed-btn {
  width: 100%;
  margin-top: 12px;
  background: linear-gradient(135deg, #34c759, #2aa64c) !important;
}

.hospital-form-input {
  width: 100%;
  padding: 10px;
  border-radius: 8px;
  margin-bottom: 8px;
  background: #fff;
  color: #0c2340;
  border: 1px solid var(--border-color);
  font-size: .85rem;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.hospital-form-input:focus {
  outline: none;
  border-color: rgba(17, 68, 166, .5);
  box-shadow: 0 0 0 3px rgba(17, 68, 166, .12);
}

.hospital-stage-warning {
  margin-bottom: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: .78rem;
  line-height: 1.4;
  background: rgba(255, 159, 10, .12);
  border: 1px solid rgba(255, 159, 10, .32);
  color: #8a5a0a;
}

.ai-action-btn {
  background: rgba(12, 35, 64, 0.04) !important;
  border: 0 !important;
  border-radius: 12px !important;
  padding: 8px 10px !important;
  font-size: 0.76rem !important;
  font-weight: 600 !important;
  color: #0c2340 !important;
  text-align: left !important;
  cursor: pointer !important;
  transition: background 180ms ease !important;
}
.ai-action-btn:hover {
  background: rgba(12, 35, 64, 0.08) !important;
}

/* Insights Row */
.ai-insights-row {
  display: flex !important;
  justify-content: space-between !important;
  gap: 6px !important;
}
.ai-insight-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  flex: 1 !important;
  background: rgba(12, 35, 64, 0.03) !important;
  padding: 6px 0 !important;
  border-radius: 10px !important;
}
.ai-insight-val {
  font-size: 0.86rem !important;
  font-weight: 700 !important;
  color: #0c2340 !important;
}
.ai-insight-lbl {
  font-size: 0.62rem !important;
  color: rgba(12, 35, 64, 0.5) !important;
}

/* Tip Card */
.ai-tip-card {
  font-size: 0.76rem !important;
  font-style: italic !important;
  line-height: 1.4 !important;
  color: rgba(12, 35, 64, 0.76) !important;
}

@media (max-width: 480px) {
  .ai-companion-panel {
    width: 280px !important;
    padding: 16px !important;
    bottom: 110% !important;
    right: 2px !important;
  }
}

/* OSCE Stepper CSS */
.hospital-stage-stepper {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 4px !important;
  background: rgba(12, 35, 64, 0.03) !important;
  padding: 8px 12px !important;
  border-radius: 16px !important;
  margin-bottom: 14px !important;
  overflow-x: auto !important;
  white-space: nowrap !important;
}
.stepper-step {
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  color: rgba(12, 35, 64, 0.4) !important;
  padding: 4px 8px !important;
  border-radius: 8px !important;
  transition: all 200ms ease !important;
}
.stepper-step.active {
  color: #007aff !important;
  background: rgba(0, 122, 255, 0.08) !important;
}
.stepper-step.completed {
  color: #34c759 !important;
}



/* ===================================================================== */
/* CLINICAL DNA — premium data dashboard added to the top of the AI panel */
/* Purely additive; does not alter any existing panel styling.            */
/* ===================================================================== */
.clinical-dna {
  flex: 0 0 auto;
  margin: 10px 14px 4px;
  border-radius: 20px;
  background: linear-gradient(165deg, rgba(255,255,255,0.72), rgba(238,246,255,0.5));
  border: 1px solid rgba(255,255,255,0.8);
  box-shadow: 0 14px 40px rgba(9,35,81,0.12), inset 0 1px 0 rgba(255,255,255,0.9);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  overflow: hidden;
}
.clinical-dna-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 16px;
  background: transparent;
  border: 0;
  cursor: pointer;
  font: inherit;
}
.clinical-dna-toggle-title {
  font-weight: 800;
  font-size: 0.92rem;
  letter-spacing: 0.01em;
  color: #0c2340;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.clinical-dna-toggle-chevron {
  color: rgba(12,35,64,0.5);
  font-size: 1.1rem;
  transition: transform 320ms cubic-bezier(.16,1,.3,1);
}
.clinical-dna.collapsed .clinical-dna-toggle-chevron { transform: rotate(-90deg); }
.clinical-dna-body {
  max-height: 1400px; /* large enough not to clip; the parent panel scrolls */
  overflow: hidden;
  padding: 4px 16px 16px;
  transition: max-height 420ms cubic-bezier(.16,1,.3,1), opacity 260ms ease, padding 260ms ease;
}
.clinical-dna.collapsed .clinical-dna-body {
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
}

/* Radar */
.dna-radar-wrap { display: flex; justify-content: center; padding: 6px 0 2px; }
.dna-radar-svg { width: min(260px, 78%); height: auto; overflow: visible; }
.dna-ring { fill: rgba(12,35,64,0.015); stroke: rgba(12,35,64,0.1); stroke-width: 1; }
.dna-spoke { stroke: rgba(12,35,64,0.08); stroke-width: 1; }
.dna-polygon {
  fill: url(#dnaFill);
  stroke: rgba(64,156,255,0.95);
  stroke-width: 2;
  filter: url(#dnaGlow);
  stroke-linejoin: round;
}
.dna-dot { fill: #fff; stroke: rgba(64,156,255,1); stroke-width: 2; filter: url(#dnaGlow); }
.dna-axis-label { font-size: 13px; }

/* Axis legend */
.dna-axis-legend {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 12px;
  margin: 8px 2px 2px;
}
.dna-legend-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.74rem;
  font-weight: 600;
  color: #0c2340;
  padding: 3px 0;
  border-bottom: 1px solid rgba(12,35,64,0.05);
}
.dna-legend-item b { font-weight: 800; color: #0b4aa2; font-variant-numeric: tabular-nums; }

/* Overall score + badge */
.dna-overall {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 12px 0 4px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(12,35,64,0.04);
  border: 1px solid rgba(12,35,64,0.06);
}
.dna-overall-eyebrow { margin: 0; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 800; color: rgba(12,35,64,0.5); }
.dna-overall-score { margin: 2px 0 0; font-size: 1.05rem; color: rgba(12,35,64,0.55); }
.dna-overall-score b { font-size: 2rem; font-weight: 850; color: #0b4aa2; font-variant-numeric: tabular-nums; }
.dna-badge {
  font-size: 0.72rem;
  font-weight: 800;
  padding: 6px 12px;
  border-radius: 999px;
  white-space: nowrap;
}
.dna-badge-excellent { background: rgba(48,209,88,0.16); color: #1f8a3d; border: 1px solid rgba(48,209,88,0.4); }
.dna-badge-good { background: rgba(0,122,255,0.14); color: #0b62d6; border: 1px solid rgba(0,122,255,0.35); }
.dna-badge-developing { background: rgba(255,214,10,0.18); color: #9a7400; border: 1px solid rgba(255,214,10,0.5); }
.dna-badge-improve { background: rgba(255,159,10,0.16); color: #a1650a; border: 1px solid rgba(255,159,10,0.42); }
.dna-badge-beginner { background: rgba(255,69,58,0.14); color: #c42b21; border: 1px solid rgba(255,69,58,0.35); }

/* Analysis columns */
.dna-analysis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.dna-analysis-col h4, .dna-section h4 { margin: 6px 0 6px; font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.04em; color: rgba(12,35,64,0.55); font-weight: 800; }
.dna-analysis-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.dna-analysis-col li { font-size: 0.78rem; font-weight: 600; line-height: 1.3; }
.dna-good { color: #1f8a3d; }
.dna-warn { color: #b8271f; }
.dna-muted { color: rgba(12,35,64,0.45); font-weight: 500; }

/* Weekly progress */
.dna-section { margin-top: 12px; }
.dna-weekly-row { display: flex; justify-content: space-between; align-items: center; font-size: 0.8rem; font-weight: 600; color: #0c2340; padding: 4px 0; border-bottom: 1px solid rgba(12,35,64,0.05); }
.dna-up { color: #1f8a3d; font-weight: 800; }
.dna-down { color: #c42b21; font-weight: 800; }

/* Summary */
.dna-summary p { margin: 0; font-size: 0.82rem; line-height: 1.5; color: #0c2340; background: rgba(64,156,255,0.07); border: 1px solid rgba(64,156,255,0.16); border-radius: 14px; padding: 11px 13px; }

/* Achievements */
.dna-achievements { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; }
.dna-achievement { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; font-size: 0.74rem; font-weight: 700; border: 1px solid rgba(12,35,64,0.07); background: rgba(12,35,64,0.03); transition: transform 160ms ease; }
.dna-achievement.unlocked { background: linear-gradient(135deg, rgba(255,214,10,0.16), rgba(255,159,10,0.1)); border-color: rgba(255,159,10,0.35); color: #7a4e00; box-shadow: 0 6px 16px rgba(255,159,10,0.14); }
.dna-achievement.locked { color: rgba(12,35,64,0.4); filter: grayscale(0.4); }
.dna-achievement.unlocked:hover { transform: translateY(-1px); }
.dna-ach-icon { font-size: 1rem; }
.dna-ach-label { line-height: 1.15; }

@media (max-width: 420px) {
  .dna-analysis, .dna-achievements { grid-template-columns: 1fr; }
  .dna-axis-legend { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .dna-polygon, .dna-dots, .clinical-dna-toggle-chevron, .clinical-dna-body { transition: none !important; }
}

/* Profile bottom-nav icon — size the inline SVG to match the glyph tabs */
.bottom-nav-item span svg {
  width: 1.3rem;
  height: 1.3rem;
  display: block;
  margin: 0 auto;
}

/* ===================================================================== */
/* PROFILE HIERARCHY REDESIGN — Clinical DNA as the hero of the Profile   */
/* Additive; reuses existing card styling, only re-weights the layout.    */
/* ===================================================================== */

/* 1. Slim user header (metrics moved out to the compact stats grid) */
.clinical-profile-hero-slim {
  display: block !important;
  padding: 20px 22px !important;
}

/* 2. Clinical DNA hero — radar is the focal point */
.clinical-dna-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 24px 22px 22px;
}
.clinical-dna-hero .clinical-profile-dna-head {
  width: 100%;
  align-items: center;
  margin-bottom: 2px;
}
.clinical-dna-hero-radar {
  width: 100%;
  max-width: 360px;
  min-height: 300px !important;
  border: 0 !important;
  background: radial-gradient(circle at 50% 46%, rgba(22, 119, 255, 0.15), rgba(255, 255, 255, 0) 64%) !important;
}
.clinical-dna-hero-radar .dna-radar-svg {
  width: min(320px, 94%) !important;
}
.clinical-dna-hero-summary {
  width: 100%;
}
.clinical-dna-hero-cta {
  width: 100%;
  max-width: 340px;
  margin-top: 2px;
}

/* 4. Compact 2x2 statistics grid — small cards, not tall stacked ones */
.clinical-profile-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.clinical-profile-stats-grid > div {
  min-height: 0;
  padding: 11px 14px;
  border: 1px solid rgba(8, 31, 68, 0.08);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.7);
}
.clinical-profile-stats-grid span {
  display: block;
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.clinical-profile-stats-grid strong {
  display: block;
  margin-top: 4px;
  color: var(--ink);
  font-size: 1.12rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

body.dark-mode .clinical-profile-stats-grid > div {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
}
body.dark-mode .clinical-dna-hero-radar {
  background: radial-gradient(circle at 50% 46%, rgba(64, 156, 255, 0.16), rgba(255, 255, 255, 0) 64%) !important;
}

@media (max-width: 560px) {
  .clinical-dna-hero-radar { min-height: 260px !important; }
  .clinical-dna-hero-radar .dna-radar-svg { width: min(300px, 96%) !important; }
}

/* ===================================================================== */
/* BAIHAQI AI — DOCKED CENTER-NAV MASCOT (2026-07-10)                     */
/* The mascot now lives raised in the CENTER of the bottom navigation,    */
/* can fly out to guide the user, then docks back home. Authoritative     */
/* overrides — this block is intentionally last so it wins.               */
/* ===================================================================== */

/* Bottom nav: 3 tabs + center dock cradle + 3 tabs */
.bottom-nav {
  grid-template-columns: repeat(3, 1fr) var(--nav-dock-w, clamp(52px, 14vw, 70px)) repeat(3, 1fr) !important;
  align-items: stretch !important;
}
.bottom-nav-dock {
  position: relative;
  pointer-events: none;
  align-self: stretch;
}
/* subtle cradle shadow suggesting the mascot rests here */
.bottom-nav-dock::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 7px;
  transform: translateX(-50%);
  width: 66%;
  height: 6px;
  border-radius: 999px;
  background: radial-gradient(closest-side, rgba(8, 18, 56, 0.16), transparent);
}

/* Re-home the whole companion container to bottom-center, raised on the nav */
.ai-companion-container {
  right: auto !important;
  left: 50% !important;
  bottom: calc(max(12px, env(safe-area-inset-bottom, 0px)) + 22px) !important;
  width: clamp(64px, 15.5vw, 84px) !important;
  height: clamp(64px, 15.5vw, 84px) !important;
  transform: translate3d(calc(-50% + var(--ai-orb-x)), var(--ai-orb-y), 0) !important;
  transition: transform 560ms cubic-bezier(.22, .9, .18, 1), opacity 240ms ease, scale 220ms ease !important;
}
.ai-companion-container.hidden,
.ai-companion-container.mascot-hidden,
.ai-companion-container.hide-for-modal {
  transform: translate3d(calc(-50% + var(--ai-orb-x)), calc(var(--ai-orb-y) + 20px), 0) scale(0.8) !important;
}
/* Keep it stable (docked) while the page scrolls — no fade-out corner behaviour */
.ai-companion-container.is-scrolling {
  opacity: 0.94 !important;
  scale: 0.97 !important;
}
/* Flying out to guide sits above everything and enlarges slightly */
.ai-companion-container.is-guiding {
  z-index: 22000 !important;
}
.ai-companion-container.is-guiding .ai-floating-button {
  scale: 1.08 !important;
}

/* Idle dock bounce + suggestion glow */
@keyframes baihaqiDockBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
.ai-floating-button {
  animation: baihaqiDockBounce 3.6s ease-in-out infinite, premiumPulse 4s ease-in-out infinite !important;
}
@keyframes baihaqiSuggestGlow {
  0%, 100% { box-shadow: 0 18px 44px rgba(5, 35, 81, 0.18), 0 0 0 1px rgba(255, 255, 255, 0.85), 0 0 30px rgba(24, 201, 239, 0.34); }
  50% { box-shadow: 0 18px 50px rgba(5, 35, 81, 0.24), 0 0 0 2px rgba(246, 197, 83, 0.6), 0 0 56px rgba(246, 197, 83, 0.62); }
}
.ai-companion-container.has-suggestion .ai-floating-button {
  animation: baihaqiDockBounce 2.4s ease-in-out infinite, baihaqiSuggestGlow 1.6s ease-in-out infinite !important;
}
.ai-companion-container.has-suggestion .ai-ring {
  border-color: rgba(246, 197, 83, 0.6) !important;
  animation-duration: 1.4s !important;
}

/* Speech bubble: above the mascot, centered, wrapping, with a down-pointer */
.ai-companion-container .ai-bubble {
  right: auto;
  left: 50%;
  top: auto;
  bottom: calc(100% + 14px);
  transform: translateX(-50%);
  max-width: min(244px, calc(100vw - 40px));
  white-space: normal;
  text-align: center;
  line-height: 1.32;
}
.ai-companion-container .ai-bubble::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 7px solid transparent;
  border-top-color: rgba(255, 255, 255, 0.9);
  filter: drop-shadow(0 4px 3px rgba(16, 24, 40, 0.08));
}

/* Long-press quick actions menu — opens above the docked mascot */
.baihaqi-quick-actions {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 14px);
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: max-content;
  max-width: min(264px, calc(100vw - 32px));
  padding: 10px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 24px 60px rgba(5, 31, 75, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(26px) saturate(180%);
  -webkit-backdrop-filter: blur(26px) saturate(180%);
  pointer-events: auto;
  z-index: 60;
  transform-origin: bottom center;
  animation: baihaqiQuickIn 260ms cubic-bezier(.34, 1.56, .64, 1) both;
}
.baihaqi-quick-actions.hidden { display: none; }
.baihaqi-quick-actions button {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border: 0;
  border-radius: 14px;
  background: rgba(240, 247, 255, 0.72);
  color: #0c2340;
  font-family: inherit;
  font-weight: 800;
  font-size: 0.82rem;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  transition: background 160ms ease, transform 160ms ease;
}
.baihaqi-quick-actions button:hover,
.baihaqi-quick-actions button:active {
  background: rgba(56, 189, 248, 0.18);
  transform: translateY(-1px);
}
.baihaqi-quick-actions button span { font-size: 1rem; }
@keyframes baihaqiQuickIn {
  from { opacity: 0; transform: translateX(-50%) translateY(8px) scale(0.94); }
  to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

/* Companion panel: re-anchor centered above the docked mascot */
.ai-companion-panel {
  right: auto !important;
  left: 50% !important;
  bottom: calc(100% + 12px) !important;
  width: min(320px, calc(100vw - 24px)) !important;
  transform-origin: bottom center !important;
  transform: translateX(-50%) translateY(12px) scale(0.9) !important;
}
.ai-companion-panel.is-active {
  transform: translateX(-50%) translateY(0) scale(1) !important;
}
.ai-companion-panel.is-hiding {
  transform: translateX(-50%) translateY(12px) scale(0.9) !important;
}

/* Hide the mascot entirely in fullscreen battle mode (nav is hidden there too) */
body.battle-mode .ai-companion-container {
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

@media (max-width: 560px) {
  .ai-companion-container {
    width: clamp(58px, 16vw, 76px) !important;
    height: clamp(58px, 16vw, 76px) !important;
    bottom: calc(max(10px, env(safe-area-inset-bottom, 0px)) + 20px) !important;
  }
}

/* ===================================================================== */
/* BAIHAQI MASCOT v2 — PHYSICALLY DOCKED INSIDE THE BOTTOM NAV (2026-07-10) */
/* The container is moved into .bottom-nav (see dockMascotIntoNav) and is   */
/* anchored to the nav as a raised centre-dock button — NEVER to page       */
/* content. This block is intentionally last so it wins.                    */
/* ===================================================================== */

:root { --dock-size: 60px; }
@media (max-width: 560px) { :root { --dock-size: 54px; } }
@media (min-width: 900px) { :root { --dock-size: 66px; } }

/* Nav must not clip the raised mascot */
.bottom-nav { position: fixed; overflow: visible; }

/* Container anchored to the nav: horizontally centred, vertical centre resting
   on the nav's TOP edge (half above the bar, half in it) = raised centre dock. */
.ai-companion-container {
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  top: 0 !important;
  bottom: auto !important;
  width: var(--dock-size) !important;
  height: var(--dock-size) !important;
  transform: translate3d(calc(-50% + var(--ai-orb-x, 0px)), calc(-50% + var(--ai-orb-y, 0px)), 0) !important;
  transition: transform 560ms cubic-bezier(.22, .9, .18, 1), opacity 240ms ease !important;
  z-index: 30 !important;
  pointer-events: none; /* children re-enable */
}

.ai-companion-container.hidden,
.ai-companion-container.mascot-hidden,
.ai-companion-container.hide-for-modal {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translate3d(calc(-50% + var(--ai-orb-x, 0px)), calc(-50% + var(--ai-orb-y, 0px) + 8px), 0) scale(0.8) !important;
}

/* Docked idle scale is 1; while guiding it grows (≈60→85px) and rises above all */
.ai-companion-container.is-guiding {
  z-index: 22000 !important;
}
.ai-companion-container.is-guiding .ai-floating-button {
  scale: 1.42 !important;
}

/* Keep it stable while the page scrolls (it's part of the nav now) */
.ai-companion-container.is-scrolling {
  opacity: 1 !important;
  scale: 1 !important;
}

/* FIX: the visible mascot button must FILL its docked container, not float on
   its own. An earlier rule (~17542) pins .ai-floating-button as position:fixed
   bottom-right with its own transform — override it here (last wins; id raises
   specificity). The CONTAINER now carries all positioning + guide translation. */
#aiFloatingButton.ai-floating-button,
.ai-companion-container .ai-floating-button {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  width: 100% !important;
  height: 100% !important;
  transform: none !important;
  z-index: 2 !important;
  cursor: pointer !important;
}

/* ===================================================================== */
/* BAIHAQI MASCOT v3 — BULLETPROOF DOCK (2026-07-10c)                     */
/* The docked transform depends on NOTHING movable, so no legacy code that */
/* writes --ai-orb-x/y (tour spotlight nudges, idle logic, stale offsets)  */
/* can ever push the mascot off the nav. ONLY .is-guiding + --guide-x/y    */
/* (set exclusively by baihaqiGuideTo) moves it, and it always resets.     */
/* ===================================================================== */

.ai-companion-container {
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  top: 0 !important;              /* nav's top edge */
  bottom: auto !important;
  width: var(--dock-size) !important;
  height: var(--dock-size) !important;
  /* DOCKED: centred on the nav top edge. Chained translates (NOT calc(% + px),
     which some engines drop as invalid) — the second translate is 0 while docked
     and only changes during guiding, so the docked state never moves. */
  transform: translate(-50%, -50%) translate(0px, 0px) !important;
  transition: transform 560ms cubic-bezier(.22, .9, .18, 1), opacity 240ms ease !important;
  z-index: 30 !important;
  pointer-events: none;
}

/* GUIDING: the only state allowed to move the mascot off-dock */
.ai-companion-container.is-guiding {
  transform: translate(-50%, -50%) translate(var(--guide-x, 0px), var(--guide-y, 0px)) !important;
  z-index: 22000 !important;
}
.ai-companion-container.is-guiding .ai-floating-button {
  scale: 1.42 !important;         /* grow ~54→77px while guiding */
}

/* Hidden states keep the docked centring (no jump when re-showing) */
.ai-companion-container.hidden,
.ai-companion-container.mascot-hidden,
.ai-companion-container.hide-for-modal {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translate3d(-50%, calc(-50% + 8px), 0) scale(0.8) !important;
}

/* ===================================================================== */
/* PREMIUM UNLOCK MODAL — ultra-premium liquid glass (2026-07-10)         */
/* ===================================================================== */
.premium-unlock {
  position: fixed;
  inset: 0;
  z-index: 24000;
  display: grid;
  place-items: center;
  padding: max(16px, env(safe-area-inset-top)) 14px calc(max(16px, env(safe-area-inset-bottom)));
  opacity: 0;
  pointer-events: none;
  transition: opacity 420ms cubic-bezier(.22, .9, .18, 1);
}
.premium-unlock.active { opacity: 1; pointer-events: auto; }
.premium-unlock.hidden { display: none !important; }

.premium-unlock-scrim {
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 50% 0%, rgba(8, 32, 74, 0.42), rgba(4, 14, 36, 0.66));
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
}

.premium-unlock-card {
  position: relative;
  width: min(560px, 100%);
  max-height: min(92dvh, 880px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 30px;
  padding: 26px 22px 20px;
  isolation: isolate;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background:
    linear-gradient(155deg, rgba(255, 255, 255, 0.9), rgba(224, 245, 255, 0.62) 45%, rgba(255, 244, 214, 0.4));
  box-shadow:
    0 40px 120px rgba(6, 26, 66, 0.5),
    0 8px 30px rgba(6, 26, 66, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(30px) saturate(1.7);
  -webkit-backdrop-filter: blur(30px) saturate(1.7);
  transform: translateY(22px) scale(0.965);
  transition: transform 460ms cubic-bezier(.22, 1.1, .3, 1);
}
.premium-unlock.active .premium-unlock-card { transform: translateY(0) scale(1); }

/* Animated liquid layer */
.premium-liquid {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  z-index: -1;
  pointer-events: none;
}
.premium-blob {
  position: absolute;
  width: 60%;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(42px);
  opacity: 0.55;
  mix-blend-mode: screen;
  will-change: transform;
}
.premium-blob.b1 { top: -18%; left: -12%; background: radial-gradient(circle, rgba(56, 189, 248, 0.9), transparent 62%); animation: premiumFloatBlob 15s ease-in-out infinite; }
.premium-blob.b2 { bottom: -20%; right: -14%; background: radial-gradient(circle, rgba(45, 212, 191, 0.82), transparent 62%); animation: premiumFloatBlob 18s ease-in-out infinite reverse; }
.premium-blob.b3 { top: 30%; right: 8%; width: 42%; background: radial-gradient(circle, rgba(246, 197, 83, 0.6), transparent 64%); animation: premiumFloatBlob 21s ease-in-out infinite; }
.premium-sheen {
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 38%, rgba(255, 255, 255, 0.34) 50%, transparent 62%);
  transform: translateX(-40%);
  animation: premiumSheen 7.5s ease-in-out infinite;
}
@keyframes premiumFloatBlob {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(10%, 8%) scale(1.12); }
  66% { transform: translate(-8%, 12%) scale(0.94); }
}
@keyframes premiumSheen {
  0%, 100% { transform: translateX(-45%); opacity: 0; }
  45% { opacity: 1; }
  60% { transform: translateX(45%); opacity: 0; }
}

.premium-close {
  position: absolute;
  top: 14px; right: 14px;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 0; border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  color: #0c2340; font-size: 1.2rem; line-height: 1;
  cursor: pointer; z-index: 3;
  box-shadow: 0 4px 14px rgba(6, 26, 66, 0.18);
  transition: transform 160ms ease, background 160ms ease;
}
.premium-close:hover { transform: scale(1.08); background: rgba(255, 255, 255, 0.92); }

.premium-eyebrow {
  margin: 0 0 4px; color: #0e7fb8; font-weight: 900;
  font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase;
}
#premiumUnlockTitle {
  margin: 0 0 6px; color: #06163a;
  font-size: clamp(1.32rem, 5vw, 1.72rem); font-weight: 900; letter-spacing: -0.02em; line-height: 1.1;
}
.premium-sub { margin: 0 0 18px; color: rgba(9, 34, 74, 0.68); font-size: 0.86rem; line-height: 1.4; }

.premium-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 520px) { .premium-options { grid-template-columns: 1fr; } }

.premium-option {
  position: relative;
  display: flex; flex-direction: column; gap: 12px;
  padding: 16px 15px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.premium-option-pro {
  border-color: rgba(56, 189, 248, 0.5);
  background: linear-gradient(160deg, rgba(224, 247, 255, 0.72), rgba(255, 255, 255, 0.5));
  box-shadow: 0 14px 40px rgba(14, 127, 184, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.premium-best {
  position: absolute; top: -10px; right: 12px;
  padding: 3px 10px; border-radius: 999px;
  font-size: 0.62rem; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase;
  color: #3a2a04;
  background: linear-gradient(135deg, #ffe7a3, #f6c553);
  box-shadow: 0 6px 16px rgba(214, 168, 79, 0.45);
}
.premium-option-head h3 { margin: 6px 0 2px; font-size: 1.08rem; font-weight: 900; color: #06163a; }
.premium-tag {
  display: inline-block; padding: 3px 9px; border-radius: 999px;
  font-size: 0.62rem; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase;
  color: #0e7fb8; background: rgba(56, 189, 248, 0.16);
}
.premium-tag-pro { color: #0b7f6e; background: rgba(45, 212, 191, 0.18); }
.premium-price { margin: 0; color: rgba(9, 34, 74, 0.7); font-size: 0.82rem; font-weight: 700; }
.premium-price strong { color: #06163a; font-size: 1.5rem; font-weight: 900; }

.premium-plan-toggle { display: flex; gap: 6px; padding: 4px; border-radius: 14px; background: rgba(6, 26, 66, 0.06); }
.premium-plan {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 7px 6px; border: 0; border-radius: 11px; cursor: pointer;
  background: transparent; color: rgba(9, 34, 74, 0.66);
  font-size: 0.8rem; font-weight: 800;
  transition: background 180ms ease, color 180ms ease;
}
.premium-plan em { font-style: normal; font-size: 0.6rem; font-weight: 800; color: #0b7f6e; }
.premium-plan.active { background: #fff; color: #06163a; box-shadow: 0 4px 12px rgba(6, 26, 66, 0.12); }

.premium-feature-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.premium-feature-list li {
  position: relative; padding-left: 20px;
  font-size: 0.78rem; line-height: 1.35; color: rgba(9, 34, 74, 0.82);
}
.premium-feature-list li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  color: #0b9f6e; font-weight: 900;
}

.premium-cta {
  margin-top: auto; width: 100%;
  padding: 12px 14px; border: 0; border-radius: 15px;
  font-family: inherit; font-size: 0.9rem; font-weight: 900; cursor: pointer;
  transition: transform 160ms ease, box-shadow 200ms ease, filter 200ms ease;
}
.premium-cta:active { transform: translateY(1px) scale(0.99); }
.premium-cta-solid {
  color: #fff;
  background: linear-gradient(135deg, #22c1ee 0%, #1677ff 55%, #0b6fe0 100%);
  box-shadow: 0 12px 30px rgba(22, 119, 255, 0.42);
}
.premium-cta-solid:hover { filter: brightness(1.05); box-shadow: 0 16px 38px rgba(22, 119, 255, 0.5); }
.premium-cta-ghost {
  color: #06484f; background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(45, 212, 191, 0.4);
  box-shadow: 0 8px 22px rgba(11, 127, 110, 0.16);
}
.premium-cta-ghost:hover { background: #fff; }

.premium-trust {
  display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center;
  margin: 16px 0 12px; padding-top: 12px;
  border-top: 1px solid rgba(6, 26, 66, 0.08);
  font-size: 0.7rem; color: rgba(9, 34, 74, 0.62); font-weight: 700;
}
.premium-trust strong { color: #06163a; }

.premium-foot { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.premium-foot-btn {
  border: 0; background: transparent; cursor: pointer;
  font-family: inherit; font-size: 0.82rem; font-weight: 800; color: rgba(9, 34, 74, 0.6);
  padding: 6px 10px; border-radius: 10px; transition: color 160ms ease, background 160ms ease;
}
.premium-foot-btn:hover { color: #06163a; background: rgba(6, 26, 66, 0.05); }
.premium-foot-preview {
  color: #0e7fb8; background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.3);
}
.premium-foot-preview.hidden { display: none; }
.premium-note {
  margin: 8px 0 2px; text-align: center; font-size: 0.75rem; font-weight: 700;
  color: #0e7fb8;
}
.premium-note.hidden { display: none; }
.premium-note.is-error { color: #d1495b; }

@media (prefers-reduced-motion: reduce) {
  .premium-unlock, .premium-unlock-card { transition: opacity 200ms ease; }
  .premium-unlock-card { transform: none !important; }
  .premium-blob, .premium-sheen { animation: none !important; }
}

/* Admin Access & Billing panel */
.admin-access-note { color: rgba(9,34,74,0.7); font-size: 0.82rem; margin: 4px 0 14px; line-height: 1.4; }
.admin-access-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (max-width: 640px) { .admin-access-grid { grid-template-columns: 1fr; } }
.admin-access-card {
  padding: 14px; border-radius: 16px;
  border: 1px solid rgba(8,31,68,0.1); background: rgba(255,255,255,0.6);
  display: flex; flex-direction: column; gap: 8px;
}
.admin-access-card.admin-access-wide { grid-column: 1 / -1; }
.admin-access-card h3 { margin: 0 0 4px; font-size: 0.95rem; font-weight: 900; color: #06163a; }
.admin-access-card label { display: flex; flex-direction: column; gap: 3px; font-size: 0.74rem; font-weight: 800; color: rgba(9,34,74,0.7); }
.admin-access-card input, .admin-access-card select {
  padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(8,31,68,0.14);
  background: #fff; font-size: 0.84rem; font-family: inherit;
}
.admin-access-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.admin-access-actions .primary-button, .admin-access-actions .ghost-button { padding: 8px 14px; font-size: 0.82rem; }
.admin-access-status { margin-top: 12px; font-size: 0.82rem; font-weight: 800; min-height: 1.1em; }
.admin-lookup-result pre, .admin-code-list {
  margin-top: 6px; padding: 10px; border-radius: 10px; background: rgba(6,26,66,0.05);
  font-size: 0.72rem; white-space: pre-wrap; word-break: break-word; max-height: 200px; overflow: auto;
}

/* MedDex Lens credit administration */
.admin-lens-credit-row { display: grid; grid-template-columns: 1fr 2fr; gap: 8px; }
@media (max-width: 560px) { .admin-lens-credit-row { grid-template-columns: 1fr; } }
.admin-lens-summary {
  display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; padding: 10px 12px;
  border-radius: 10px; background: rgba(6,26,66,0.05);
  font-size: 0.76rem; font-weight: 700; color: rgba(9,34,74,0.78);
}
.admin-lens-summary strong { color: #06163a; }
/* The ledger can be wide; it scrolls inside its own box so the dialog never does. */
.admin-lens-table {
  width: 100%; margin-top: 10px; border-collapse: collapse;
  font-size: 0.7rem; display: block; max-height: 260px; overflow: auto;
}
.admin-lens-table th, .admin-lens-table td {
  padding: 6px 8px; text-align: left; white-space: nowrap;
  border-bottom: 1px solid rgba(8,31,68,0.08);
}
.admin-lens-table th { font-weight: 900; color: rgba(9,34,74,0.6); text-transform: uppercase; font-size: 0.62rem; }
.admin-lens-table td:last-child { white-space: normal; }
.admin-lens-table .ghost-button { padding: 3px 9px; font-size: 0.68rem; }

/* Physical-deck disclaimer under the MedDex Pro feature list */
.premium-pro-note {
  margin: 2px 0 0;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(6, 26, 66, 0.05);
  color: rgba(9, 34, 74, 0.72);
  font-size: 0.68rem;
  line-height: 1.35;
  font-weight: 600;
}

/* Deck access badges (from the central entitlement service) */
.deck-status.deck-badge-owned { background: rgba(11,159,110,0.14); color: #0b7f5e; }
.deck-status.deck-badge-pro { background: rgba(45,212,191,0.16); color: #0b7f6e; }
.deck-status.deck-badge-free { background: rgba(56,189,248,0.16); color: #0e7fb8; }
.deck-status.deck-badge-free-preview { background: rgba(56,189,248,0.14); color: #0e7fb8; }
.deck-status.deck-badge-redeem-to-unlock { background: rgba(246,197,83,0.2); color: #8a6412; }
.deck-status.deck-badge-locked { background: rgba(9,34,74,0.1); color: rgba(9,34,74,0.66); }
.deck-status.deck-badge-admin { background: rgba(124,92,255,0.16); color: #6a4bd6; }

/* Pro-only modal: single centered card + checkout button loading state */
.premium-options-single { grid-template-columns: 1fr !important; max-width: 420px; margin: 0 auto; }
.premium-cta { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.premium-cta[disabled], .premium-cta.is-loading { opacity: 0.75; cursor: progress; pointer-events: none; }
.premium-cta-spinner {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.45); border-top-color: #fff;
  display: none; animation: premiumSpin 0.7s linear infinite;
}
.premium-cta.is-loading .premium-cta-spinner { display: inline-block; }
.premium-cta.is-loading .premium-cta-label { opacity: 0.9; }
@keyframes premiumSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .premium-cta-spinner { animation-duration: 1.4s; } }

/* Structured teaching explanation (Why correct / Why others incorrect) */
.answer-explain { display: block; text-align: left; }
.answer-explain .ax-title {
  margin: 0 0 6px; font-size: 0.9rem; font-weight: 900; letter-spacing: -0.01em;
}
.answer-explain .ax-title.ax-correct { color: #4ade9c; }
.answer-explain .ax-title.ax-incorrect { color: #ffb3bf; margin-top: 15px; }
.answer-explain .ax-bullets { margin: 0 0 8px; padding-left: 2px; list-style: none; display: grid; gap: 5px; }
.answer-explain .ax-bullets li { position: relative; padding-left: 18px; font-size: 0.85rem; line-height: 1.42; color: rgba(255,255,255,0.9); }
.answer-explain .ax-bullets li::before { content: "•"; position: absolute; left: 2px; color: #4ade9c; font-weight: 900; }
.answer-explain .ax-prose { margin: 0 0 8px; font-size: 0.84rem; line-height: 1.46; color: rgba(255,255,255,0.78); }
.answer-explain .ax-learn { margin: 8px 0 0; padding: 9px 11px; border-radius: 10px; background: rgba(74,222,156,0.14); font-size: 0.82rem; line-height: 1.42; color: #c9f6e2; }
.answer-explain .ax-learn strong { color: #eafff6; }
.answer-explain .ax-others { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.answer-explain .ax-others li {
  display: grid; gap: 3px; padding: 9px 12px; border-radius: 12px;
  background: rgba(255, 120, 138, 0.12); border: 1px solid rgba(255, 120, 138, 0.28);
}
.answer-explain .ax-opt { font-weight: 800; font-size: 0.83rem; color: #ff9db0; }
.answer-explain .ax-reason { font-size: 0.81rem; line-height: 1.42; color: rgba(255,255,255,0.82); }

/* High-yield teaching blocks (red flags / exam trap / memory tip / guideline) */
.answer-explain .ax-teach-wrap { margin-top: 14px; display: grid; gap: 8px; }
.answer-explain .ax-teach { display: grid; gap: 3px; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.05); }
.answer-explain .ax-teach-label { font-weight: 800; font-size: 0.78rem; letter-spacing: 0.02em; text-transform: uppercase; opacity: 0.95; }
.answer-explain .ax-teach-body { font-size: 0.82rem; line-height: 1.44; color: rgba(255,255,255,0.86); }
.answer-explain .ax-teach-red { background: rgba(255, 90, 110, 0.13); border-color: rgba(255, 90, 110, 0.3); }
.answer-explain .ax-teach-red .ax-teach-label { color: #ff9db0; }
.answer-explain .ax-teach-trap { background: rgba(255, 190, 80, 0.13); border-color: rgba(255, 190, 80, 0.3); }
.answer-explain .ax-teach-trap .ax-teach-label { color: #ffd79a; }
.answer-explain .ax-teach-mem { background: rgba(130, 160, 255, 0.13); border-color: rgba(130, 160, 255, 0.3); }
.answer-explain .ax-teach-mem .ax-teach-label { color: #bcccff; }
.answer-explain .ax-teach-guide { background: rgba(74, 222, 156, 0.12); border-color: rgba(74, 222, 156, 0.3); }
.answer-explain .ax-teach-guide .ax-teach-label { color: #a6f2cf; }

/* ===================================================================== */
/* NEW-USER WELCOME POPUP — liquid glass + particles (2026-07-10)         */
/* ===================================================================== */
.welcome-pop {
  position: fixed; inset: 0; z-index: 24500; display: grid; place-items: center;
  padding: max(16px, env(safe-area-inset-top)) 14px calc(max(16px, env(safe-area-inset-bottom)));
  opacity: 0; pointer-events: none; transition: opacity 460ms cubic-bezier(.22,.9,.18,1);
}
.welcome-pop.active { opacity: 1; pointer-events: auto; }
.welcome-pop.hidden { display: none !important; }
.welcome-scrim {
  position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 50% 0%, rgba(8,32,74,0.5), rgba(3,10,28,0.72));
  backdrop-filter: blur(16px) saturate(1.1); -webkit-backdrop-filter: blur(16px) saturate(1.1);
}
.welcome-card {
  position: relative; width: min(560px, 100%); max-height: min(92dvh, 900px);
  overflow-y: auto; -webkit-overflow-scrolling: touch; border-radius: 32px; padding: 30px 24px 22px;
  isolation: isolate; border: 1px solid rgba(255,255,255,0.55);
  background: linear-gradient(160deg, rgba(255,255,255,0.9), rgba(224,245,255,0.6) 46%, rgba(240,232,255,0.44));
  box-shadow: 0 48px 130px rgba(6,26,66,0.55), inset 0 1px 0 rgba(255,255,255,0.92);
  backdrop-filter: blur(34px) saturate(1.7); -webkit-backdrop-filter: blur(34px) saturate(1.7);
  transform: translateY(26px) scale(0.955); transition: transform 520ms cubic-bezier(.2,1.1,.3,1);
}
.welcome-pop.active .welcome-card { transform: translateY(0) scale(1); }
.welcome-liquid { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; z-index: -1; pointer-events: none; }
.welcome-blob { position: absolute; width: 64%; aspect-ratio: 1; border-radius: 50%; filter: blur(46px); opacity: 0.55; mix-blend-mode: screen; will-change: transform; }
.welcome-blob.wb1 { top: -20%; left: -14%; background: radial-gradient(circle, rgba(56,189,248,0.95), transparent 62%); animation: premiumFloatBlob 16s ease-in-out infinite; }
.welcome-blob.wb2 { bottom: -22%; right: -16%; background: radial-gradient(circle, rgba(124,92,255,0.8), transparent 62%); animation: premiumFloatBlob 19s ease-in-out infinite reverse; }
.welcome-blob.wb3 { top: 34%; right: 10%; width: 44%; background: radial-gradient(circle, rgba(45,212,191,0.7), transparent 64%); animation: premiumFloatBlob 22s ease-in-out infinite; }
.welcome-sheen { position: absolute; inset: 0; background: linear-gradient(120deg, transparent 38%, rgba(255,255,255,0.32) 50%, transparent 62%); transform: translateX(-40%); animation: premiumSheen 8s ease-in-out infinite; }
.welcome-particles { position: absolute; inset: 0; }
.welcome-particles i {
  position: absolute; width: 5px; height: 5px; border-radius: 50%;
  background: rgba(255,255,255,0.9); box-shadow: 0 0 8px rgba(160,220,255,0.9); opacity: 0.7;
  animation: welcomeFloatParticle 9s ease-in-out infinite;
}
.welcome-particles i:nth-child(1){ left:12%; top:20%; animation-delay:0s; }
.welcome-particles i:nth-child(2){ left:82%; top:14%; animation-delay:1.1s; }
.welcome-particles i:nth-child(3){ left:24%; top:70%; animation-delay:2.2s; width:4px;height:4px; }
.welcome-particles i:nth-child(4){ left:66%; top:78%; animation-delay:0.6s; }
.welcome-particles i:nth-child(5){ left:46%; top:12%; animation-delay:1.7s; width:3px;height:3px; }
.welcome-particles i:nth-child(6){ left:90%; top:56%; animation-delay:2.8s; }
.welcome-particles i:nth-child(7){ left:8%; top:48%; animation-delay:3.4s; width:4px;height:4px; }
.welcome-particles i:nth-child(8){ left:54%; top:64%; animation-delay:0.3s; width:3px;height:3px; }
@keyframes welcomeFloatParticle { 0%,100%{ transform: translateY(0) scale(1); opacity:0.35; } 50%{ transform: translateY(-16px) scale(1.35); opacity:0.9; } }

.welcome-eyebrow { margin: 0 0 4px; text-align: center; color: #0e7fb8; font-weight: 900; font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; }
#welcomePopTitle { margin: 0 0 6px; text-align: center; color: #06163a; font-size: clamp(1.5rem, 6vw, 2rem); font-weight: 900; letter-spacing: -0.02em; }
.welcome-sub { margin: 0 0 20px; text-align: center; color: rgba(9,34,74,0.68); font-size: 0.9rem; }
.welcome-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 520px) { .welcome-cards { grid-template-columns: 1fr; } }
.welcome-choice {
  position: relative; display: flex; flex-direction: column; gap: 8px; padding: 18px 16px;
  border-radius: 22px; border: 1px solid rgba(255,255,255,0.6); background: rgba(255,255,255,0.52);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.85);
}
.welcome-choice-pro { border-color: rgba(56,189,248,0.5); background: linear-gradient(160deg, rgba(224,247,255,0.75), rgba(255,255,255,0.5)); box-shadow: 0 16px 42px rgba(14,127,184,0.22), inset 0 1px 0 rgba(255,255,255,0.9); }
.welcome-choice-icon { font-size: 1.7rem; }
.welcome-choice h3 { margin: 2px 0; font-size: 1.02rem; font-weight: 900; color: #06163a; }
.welcome-choice p { margin: 0; font-size: 0.8rem; line-height: 1.4; color: rgba(9,34,74,0.72); flex: 1; }
.welcome-badge { position: absolute; top: -10px; right: 12px; padding: 3px 10px; border-radius: 999px; font-size: 0.62rem; font-weight: 900; letter-spacing: 0.05em; text-transform: uppercase; color: #073a2f; background: linear-gradient(135deg, #a7f3d0, #34d399); box-shadow: 0 6px 16px rgba(45,212,191,0.4); }
.welcome-cta { margin-top: auto; width: 100%; padding: 12px 14px; border: 0; border-radius: 15px; font-family: inherit; font-size: 0.88rem; font-weight: 900; cursor: pointer; transition: transform 160ms ease, box-shadow 200ms ease, filter 200ms ease; }
.welcome-cta:active { transform: translateY(1px) scale(0.99); }
.welcome-cta-solid { color: #fff; background: linear-gradient(135deg, #22c1ee 0%, #1677ff 55%, #0b6fe0 100%); box-shadow: 0 12px 30px rgba(22,119,255,0.42); }
.welcome-cta-solid:hover { filter: brightness(1.05); }
.welcome-cta-ghost { color: #06484f; background: rgba(255,255,255,0.82); border: 1px solid rgba(45,212,191,0.4); }
.welcome-cta-ghost:hover { background: #fff; }
.welcome-later { display: block; margin: 16px auto 0; border: 0; background: transparent; cursor: pointer; font-family: inherit; font-size: 0.84rem; font-weight: 800; color: rgba(9,34,74,0.58); padding: 8px 12px; border-radius: 10px; transition: color 160ms ease, background 160ms ease; }
.welcome-later:hover { color: #06163a; background: rgba(6,26,66,0.05); }

/* Trial countdown banner */
.pro-trial-banner {
  position: fixed; left: 50%; transform: translateX(-50%);
  top: calc(env(safe-area-inset-top, 0px) + 8px); z-index: 12000;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 14px; border-radius: 999px;
  font-size: 0.74rem; font-weight: 800; color: #06484f;
  background: rgba(255,255,255,0.86); border: 1px solid rgba(45,212,191,0.45);
  box-shadow: 0 8px 24px rgba(6,26,66,0.18); backdrop-filter: blur(16px);
}
.pro-trial-banner.hidden { display: none; }
.pro-trial-banner strong { color: #0b7f6e; }
.pro-trial-dot { width: 8px; height: 8px; border-radius: 50%; background: #34d399; box-shadow: 0 0 8px rgba(52,211,153,0.8); animation: premiumPulse 2s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .welcome-pop, .welcome-card { transition: opacity 220ms ease; }
  .welcome-card { transform: none !important; }
  .welcome-blob, .welcome-sheen, .welcome-particles i, .pro-trial-dot { animation: none !important; }
}

/* Hospital department premium lock overlays */
.hospital-department-card { position: relative; overflow: hidden; }
.hospital-department-card.locked { }
.hospital-department-card.locked::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(160deg, rgba(10,26,60,0.06), rgba(10,26,60,0.16));
  backdrop-filter: saturate(0.85);
}
.hospital-dept-lock {
  position: absolute; top: 9px; right: 9px; z-index: 2;
  width: 26px; height: 26px; display: grid; place-items: center;
  border-radius: 50%; font-size: 0.8rem;
  background: rgba(255,255,255,0.86); box-shadow: 0 4px 12px rgba(6,26,66,0.2);
}
.hospital-dept-badge {
  display: inline-block; margin-top: 4px; padding: 2px 9px; border-radius: 999px;
  font-size: 0.64rem; font-weight: 900; font-style: normal; letter-spacing: 0.03em; position: relative; z-index: 2;
}
.hospital-dept-badge.is-free { color: #0b7f5e; background: rgba(11,159,110,0.16); }
.hospital-dept-badge.is-pro { color: #0b7f6e; background: rgba(45,212,191,0.18); }
.hospital-dept-badge.is-owned { color: #047857; background: rgba(16,185,129,0.18); }
.hospital-dept-badge.is-locked { color: #8a6412; background: rgba(246,197,83,0.22); }
.hospital-department-card.locked strong,
.hospital-department-card.locked .hospital-department-icon { opacity: 0.9; }

/* ===================================================================== */
/* PROFILE MEDDEX PRO CARD — premium liquid glass, VisionOS style         */
/* ===================================================================== */
.pro-card {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: 24px; padding: 1px; margin-bottom: 14px;
  background: linear-gradient(135deg, rgba(56,189,248,0.6), rgba(124,92,255,0.35) 45%, rgba(246,197,83,0.5));
  box-shadow: 0 24px 60px rgba(6,26,66,0.24), 0 2px 0 rgba(255,255,255,0.5) inset;
}
.pro-card-inner {
  position: relative; z-index: 2; border-radius: 23px; padding: 18px 18px 16px;
  background: linear-gradient(160deg, rgba(255,255,255,0.9), rgba(226,244,255,0.72) 55%, rgba(240,235,255,0.6));
  backdrop-filter: blur(26px) saturate(1.6); -webkit-backdrop-filter: blur(26px) saturate(1.6);
}
.pro-card-liquid { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; z-index: 1; pointer-events: none; }
.pro-card-blob { position: absolute; width: 60%; aspect-ratio: 1; border-radius: 50%; filter: blur(40px); opacity: 0.5; mix-blend-mode: screen; }
.pro-card-blob.pcb1 { top: -30%; left: -10%; background: radial-gradient(circle, rgba(56,189,248,0.9), transparent 62%); animation: premiumFloatBlob 17s ease-in-out infinite; }
.pro-card-blob.pcb2 { bottom: -34%; right: -12%; background: radial-gradient(circle, rgba(124,92,255,0.8), transparent 62%); animation: premiumFloatBlob 21s ease-in-out infinite reverse; }
.pro-card-sheen { position: absolute; inset: 0; background: linear-gradient(120deg, transparent 40%, rgba(255,255,255,0.4) 50%, transparent 60%); transform: translateX(-45%); animation: premiumSheen 9s ease-in-out infinite; }
.pro-card-head { display: flex; align-items: center; justify-content: space-between; }
.pro-card-eyebrow { margin: 0; font-size: 0.86rem; font-weight: 900; letter-spacing: -0.01em; color: #06163a; }
.pro-card-badge {
  padding: 3px 11px; border-radius: 999px; font-size: 0.64rem; font-weight: 900; letter-spacing: 0.06em;
  color: #24344f; background: rgba(9,34,74,0.09);
}
.pro-card-badge.is-pro { color: #fff; background: linear-gradient(135deg, #22c1ee, #1677ff); }
.pro-card-badge.is-trial { color: #073a2f; background: linear-gradient(135deg, #a7f3d0, #34d399); }
.pro-card-badge.is-admin { color: #fff; background: linear-gradient(135deg, #7c5cff, #6a4bd6); }
.pro-card-label { margin: 10px 0 0; font-size: 0.64rem; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(9,34,74,0.5); }
.pro-card-plan { margin: 1px 0 4px; font-size: 1.5rem; font-weight: 900; letter-spacing: -0.02em; color: #06163a; }
.pro-card-meta { margin: 0 0 12px; font-size: 0.78rem; line-height: 1.4; color: rgba(9,34,74,0.66); }
.pro-card-features { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; }
.pro-card-features li { position: relative; padding-left: 18px; font-size: 0.78rem; line-height: 1.3; color: rgba(9,34,74,0.82); }
.pro-card-features li::before { content: "✓"; position: absolute; left: 0; color: #0b9f6e; font-weight: 900; }
.pro-card-features.is-hidden { display: none; }
.pro-card-cta {
  width: 100%; padding: 13px 16px; border: 0; border-radius: 15px; cursor: pointer;
  font-family: inherit; font-size: 0.92rem; font-weight: 900; color: #fff;
  background: linear-gradient(135deg, #22c1ee 0%, #1677ff 55%, #0b6fe0 100%);
  box-shadow: 0 14px 32px rgba(22,119,255,0.42), 0 0 0 1px rgba(255,255,255,0.25) inset;
  transition: transform 160ms ease, box-shadow 220ms ease, filter 220ms ease;
}
.pro-card-cta:hover { filter: brightness(1.05); box-shadow: 0 18px 40px rgba(22,119,255,0.5); }
.pro-card-cta:active { transform: translateY(1px) scale(0.99); }
.pro-card-cta.is-manage { color: #06484f; background: rgba(255,255,255,0.85); border: 1px solid rgba(45,212,191,0.45); box-shadow: 0 8px 22px rgba(11,127,110,0.18); }
.pro-card-cta.hidden { display: none; }
body.dark-mode .pro-card-inner { background: linear-gradient(160deg, rgba(20,32,54,0.92), rgba(24,40,66,0.82)); }
body.dark-mode .pro-card-eyebrow, body.dark-mode .pro-card-plan { color: #eaf1fb; }
body.dark-mode .pro-card-features li { color: rgba(230,238,247,0.86); }
body.dark-mode .pro-card-meta { color: rgba(210,222,240,0.7); }
@media (prefers-reduced-motion: reduce) { .pro-card-blob, .pro-card-sheen { animation: none !important; } }

/* ===================================================================== */
/* BAIHAQI AI BUBBLE CHAT — expands from the docked mascot (2026-07-10)   */
/* ChatGPT-style floating assistant. No separate panel.                  */
/* ===================================================================== */
.baihaqi-chat {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 14px);
  width: min(340px, calc(100vw - 24px));
  height: min(66dvh, 460px);
  display: flex;
  flex-direction: column;
  border-radius: 24px;
  overflow: hidden;
  z-index: 60;
  pointer-events: auto;
  border: 1px solid rgba(255, 255, 255, 0.6);
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.94), rgba(226, 244, 255, 0.86));
  box-shadow: 0 30px 70px rgba(5, 31, 75, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(30px) saturate(1.7);
  -webkit-backdrop-filter: blur(30px) saturate(1.7);
  transform-origin: bottom center;
  transform: translateX(-50%) translateY(14px) scale(0.55);
  opacity: 0;
  transition: transform 340ms cubic-bezier(.22, 1.2, .3, 1), opacity 240ms ease;
}
.baihaqi-chat.active { transform: translateX(-50%) translateY(0) scale(1); opacity: 1; }
.baihaqi-chat.hidden { display: none !important; }

.baihaqi-chat-head {
  display: flex; align-items: center; gap: 10px; padding: 12px 12px 10px;
  border-bottom: 1px solid rgba(6, 26, 66, 0.08);
  background: linear-gradient(180deg, rgba(255,255,255,0.7), transparent);
}
.baihaqi-chat-avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.baihaqi-chat-id { flex: 1; display: flex; flex-direction: column; line-height: 1.15; }
.baihaqi-chat-id strong { font-size: 0.92rem; font-weight: 900; color: #06163a; }
.baihaqi-chat-id span { font-size: 0.68rem; color: rgba(9, 34, 74, 0.6); font-weight: 700; }
.baihaqi-chat-close {
  width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 50%;
  background: rgba(6, 26, 66, 0.07); color: #0c2340; font-size: 1.05rem; cursor: pointer;
  transition: transform 150ms ease, background 150ms ease;
}
.baihaqi-chat-close:hover { transform: scale(1.08); background: rgba(6, 26, 66, 0.12); }

.baihaqi-chat-log { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.bchat-msg { max-width: 84%; padding: 9px 12px; border-radius: 16px; font-size: 0.84rem; line-height: 1.4; word-wrap: break-word; animation: bchatIn 240ms ease both; }
.bchat-user { align-self: flex-end; color: #fff; background: linear-gradient(135deg, #22c1ee, #1677ff); border-bottom-right-radius: 5px; }
.bchat-assistant { align-self: flex-start; color: #0c2340; background: rgba(255, 255, 255, 0.9); border: 1px solid rgba(6, 26, 66, 0.08); border-bottom-left-radius: 5px; }
.bchat-assistant strong { font-weight: 800; }
@keyframes bchatIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.bchat-typing { display: inline-flex; gap: 4px; padding: 12px 14px; }
.bchat-typing span { width: 6px; height: 6px; border-radius: 50%; background: rgba(9,34,74,0.4); animation: bchatType 1s ease-in-out infinite; }
.bchat-typing span:nth-child(2) { animation-delay: 0.18s; }
.bchat-typing span:nth-child(3) { animation-delay: 0.36s; }
@keyframes bchatType { 0%, 100% { transform: translateY(0); opacity: 0.4; } 50% { transform: translateY(-4px); opacity: 1; } }

.baihaqi-chat-input { display: flex; align-items: center; gap: 6px; padding: 10px; border-top: 1px solid rgba(6, 26, 66, 0.08); background: rgba(255,255,255,0.5); }
.baihaqi-chat-input input {
  flex: 1; min-width: 0; padding: 10px 12px; border-radius: 999px; border: 1px solid rgba(6, 26, 66, 0.14);
  background: #fff; font-family: inherit; font-size: 0.85rem; color: #0c2340;
}
.baihaqi-chat-input input:focus { outline: none; border-color: rgba(22, 119, 255, 0.5); }
.baihaqi-chat-mic, .baihaqi-chat-send {
  flex-shrink: 0; width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 50%;
  cursor: pointer; font-size: 0.95rem; transition: transform 150ms ease, filter 150ms ease;
}
.baihaqi-chat-mic { background: rgba(6, 26, 66, 0.07); }
.baihaqi-chat-mic.is-listening { background: rgba(255, 90, 110, 0.18); animation: premiumPulse 1.2s ease-in-out infinite; }
.baihaqi-chat-mic.is-hidden { display: none; }
.baihaqi-chat-send { color: #fff; background: linear-gradient(135deg, #22c1ee, #1677ff); box-shadow: 0 6px 16px rgba(22, 119, 255, 0.4); }
.baihaqi-chat-send:active, .baihaqi-chat-mic:active { transform: scale(0.94); }
body.dark-mode .baihaqi-chat { background: linear-gradient(165deg, rgba(20,32,54,0.96), rgba(24,40,66,0.9)); }
body.dark-mode .bchat-assistant { color: #e6eef8; background: rgba(255,255,255,0.06); }
body.dark-mode .baihaqi-chat-id strong { color: #eaf1fb; }
body.dark-mode .baihaqi-chat-input input { background: rgba(255,255,255,0.08); color: #eaf1fb; }
@media (prefers-reduced-motion: reduce) { .baihaqi-chat { transition: opacity 180ms ease; transform: translateX(-50%); } .bchat-typing span, .baihaqi-chat-mic.is-listening { animation: none !important; } }

/* ===================================================================== */
/* BAIHAQI RELEASE FIX: living mascot + bubble grows from mascot          */
/* ===================================================================== */
@keyframes baihaqiAliveFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  38% { transform: translateY(-3px) scale(1.018); }
  72% { transform: translateY(1px) scale(0.992); }
}
@keyframes baihaqiLookAround {
  0%, 82%, 100% { filter: saturate(1) brightness(1); }
  86% { filter: saturate(1.1) brightness(1.04); transform: translateX(1px) rotate(1deg); }
  92% { filter: saturate(1.04) brightness(1.02); transform: translateX(-1px) rotate(-1deg); }
}
@keyframes baihaqiSpeakBounce {
  0%, 100% { transform: translateY(0) scale(1); }
  35% { transform: translateY(-4px) scale(1.045); }
  70% { transform: translateY(1px) scale(0.985); }
}
@keyframes baihaqiThinkPulse {
  0%, 100% { transform: translateY(0) rotate(0deg) scale(1); filter: saturate(1); }
  50% { transform: translateY(-2px) rotate(-2deg) scale(1.03); filter: saturate(1.16) brightness(1.03); }
}
@keyframes baihaqiBubbleFromMascot {
  from { opacity: 0; transform: translateX(-50%) translateY(16px) scale(0.18); }
  to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
@keyframes baihaqiBubbleToMascot {
  from { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
  to { opacity: 0; transform: translateX(-50%) translateY(14px) scale(0.18); }
}

.ai-companion-container {
  overflow: visible !important;
}

#aiFloatingButton.ai-floating-button {
  pointer-events: auto !important;
  transform-origin: 50% 75% !important;
  animation: baihaqiAliveFloat 3.4s ease-in-out infinite !important;
}

#aiFloatingButton.ai-floating-button .baihaqi-mascot-img {
  transform-origin: 50% 78% !important;
  animation: baihaqiLookAround 8.5s ease-in-out infinite !important;
}

#aiFloatingButton.ai-floating-button[data-mascot-state="speaking"],
#aiFloatingButton.ai-floating-button[data-mascot-state="correct"],
#aiFloatingButton.ai-floating-button[data-mascot-state="celebration"] {
  animation: baihaqiSpeakBounce 780ms cubic-bezier(.2, .9, .2, 1) infinite !important;
}

#aiFloatingButton.ai-floating-button[data-mascot-state="thinking"],
#aiFloatingButton.ai-floating-button[data-mascot-state="loading"] {
  animation: baihaqiThinkPulse 1.35s ease-in-out infinite !important;
}

#aiBubble.ai-bubble {
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: calc(100% + 12px) !important;
  width: min(278px, calc(100vw - 28px)) !important;
  max-width: min(278px, calc(100vw - 28px)) !important;
  transform-origin: 50% 100% !important;
  transform: translateX(-50%) translateY(14px) scale(0.18) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

#aiBubble.ai-bubble.is-contextual:not(.hidden) {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateX(-50%) translateY(0) scale(1) !important;
  animation: baihaqiBubbleFromMascot 260ms cubic-bezier(.2, .92, .22, 1.18) both !important;
}

#aiBubble.ai-bubble.is-hiding {
  opacity: 0 !important;
  pointer-events: none !important;
  animation: baihaqiBubbleToMascot 240ms cubic-bezier(.4, 0, .2, 1) both !important;
}

#aiBubble.ai-bubble::after {
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
}

.baihaqi-chat {
  transform-origin: 50% 100% !important;
  transform: translateX(-50%) translateY(18px) scale(0.18) !important;
  opacity: 0;
}

.baihaqi-chat.active {
  transform: translateX(-50%) translateY(0) scale(1) !important;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  #aiFloatingButton.ai-floating-button,
  #aiFloatingButton.ai-floating-button .baihaqi-mascot-img,
  #aiBubble.ai-bubble,
  .baihaqi-chat {
    animation: none !important;
  }
}

/* ===================================================================== */
/* MEDDEX LENS — premium medical image learning camera                    */
/* ===================================================================== */
.lens-screen {
  position: relative;
  min-height: calc(100dvh - 96px);
  padding: 12px 12px calc(96px + env(safe-area-inset-bottom, 0px));
  overflow: hidden;
  background: linear-gradient(160deg, #06152d 0%, #092449 48%, #061526 100%);
}

.lens-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.lens-bg span {
  position: absolute;
  width: 55%;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.42;
}

.lens-bg span:nth-child(1) { left: -22%; top: -18%; background: #22d3ee; animation: premiumFloatBlob 22s ease-in-out infinite; }
.lens-bg span:nth-child(2) { right: -22%; top: 20%; background: #10b981; animation: premiumFloatBlob 26s ease-in-out infinite reverse; }
.lens-bg span:nth-child(3) { left: 28%; bottom: -28%; background: #3b82f6; animation: premiumFloatBlob 30s ease-in-out infinite; }

.lens-camera-card,
.lens-results {
  position: relative;
  z-index: 1;
  border-radius: 28px;
  border: 1px solid rgba(148, 220, 255, 0.24);
  background: linear-gradient(160deg, rgba(255,255,255,0.10), rgba(255,255,255,0.05));
  box-shadow: 0 28px 72px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255,255,255,0.14);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
}

.lens-camera-card {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.lens-topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.lens-topbar h2 {
  margin: 4px 0 0;
  color: #fff;
  font-size: clamp(1.2rem, 5vw, 1.75rem);
  line-height: 1.08;
}

.lens-topbar .eyebrow {
  color: #7fe0f5;
}

.lens-close {
  color: #e0f2fe;
  background: rgba(255,255,255,0.1);
}

.lens-mode-strip,
.lens-study-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}

.lens-mode-strip::-webkit-scrollbar,
.lens-study-strip::-webkit-scrollbar { display: none; }

.lens-mode-strip button,
.lens-study-strip button {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(148, 220, 255, 0.22);
  border-radius: 999px;
  color: rgba(224, 242, 254, 0.82);
  background: rgba(255,255,255,0.08);
  font: inherit;
  font-size: 0.76rem;
  font-weight: 850;
}

.lens-mode-strip button.active,
.lens-study-strip button.active {
  color: #04263a;
  background: linear-gradient(135deg, #5eead4, #38bdf8);
  box-shadow: 0 10px 24px rgba(34, 211, 238, 0.26);
}

.lens-viewfinder {
  position: relative;
  min-height: min(56dvh, 520px);
  border-radius: 24px;
  overflow: hidden;
  background:
    linear-gradient(rgba(148, 220, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 220, 255, 0.08) 1px, transparent 1px),
    radial-gradient(circle at 50% 50%, rgba(56, 189, 248, 0.16), rgba(2, 6, 23, 0.92));
  background-size: 34px 34px, 34px 34px, auto;
  box-shadow: inset 0 0 0 1px rgba(148, 220, 255, 0.18);
}

.lens-viewfinder video,
.lens-viewfinder img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #020617;
}

.lens-empty-state {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  padding: 28px;
  text-align: center;
  color: #e0f2fe;
}

.lens-empty-state img {
  position: static;
  width: 96px;
  height: 96px;
  object-fit: contain;
  background: transparent;
  animation: bfsFloat 4s ease-in-out infinite;
}

.lens-empty-state strong { font-size: 1rem; color: #fff; }
.lens-empty-state span { max-width: 320px; color: rgba(224, 242, 254, 0.68); font-size: 0.84rem; }

.lens-reticle {
  position: absolute;
  inset: 22px;
  pointer-events: none;
}

.lens-reticle i {
  position: absolute;
  width: 42px;
  height: 42px;
  border-color: rgba(94, 234, 212, 0.88);
  filter: drop-shadow(0 0 10px rgba(94, 234, 212, 0.7));
}

.lens-reticle i:nth-child(1) { left: 0; top: 0; border-top: 3px solid; border-left: 3px solid; border-radius: 14px 0 0 0; }
.lens-reticle i:nth-child(2) { right: 0; top: 0; border-top: 3px solid; border-right: 3px solid; border-radius: 0 14px 0 0; }
.lens-reticle i:nth-child(3) { left: 0; bottom: 0; border-bottom: 3px solid; border-left: 3px solid; border-radius: 0 0 0 14px; }
.lens-reticle i:nth-child(4) { right: 0; bottom: 0; border-bottom: 3px solid; border-right: 3px solid; border-radius: 0 0 14px 0; }

.lens-toolbar,
.lens-bottom-controls {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.lens-bottom-controls {
  grid-template-columns: 1fr 1.3fr;
}

.lens-tool {
  min-height: 40px;
  border: 1px solid rgba(148, 220, 255, 0.18);
  border-radius: 14px;
  color: #e0f2fe;
  background: rgba(255,255,255,0.08);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 850;
}

.lens-analyze {
  min-height: 48px;
  border-radius: 16px;
}

.lens-safety {
  margin: 0;
  color: rgba(224, 242, 254, 0.64);
  font-size: 0.74rem;
  line-height: 1.4;
}

.lens-results {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 12px;
  margin-top: 14px;
  padding: 14px;
}

.lens-results.hidden { display: none; }

.lens-result-media {
  position: relative;
  min-height: 360px;
  border-radius: 22px;
  overflow: hidden;
  background: #020617;
  box-shadow: inset 0 0 0 1px rgba(148, 220, 255, 0.16);
  display: grid;
  place-items: center;
}

.lens-image-stage {
  position: relative;
  display: inline-block;
  max-width: 100%;
  max-height: min(72vh, 760px);
  line-height: 0;
}

.lens-image-stage > img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: min(72vh, 760px);
  object-fit: contain;
}

.lens-overlay-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.lens-annotation {
  --label-dx: 32px;
  --label-dy: -30px;
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  pointer-events: auto;
  cursor: pointer;
  z-index: 2;
  transition: opacity 150ms ease;
}

.lens-annotation .lens-anchor {
  position: absolute;
  left: -5px;
  top: -5px;
  width: 10px;
  height: 10px;
  border: 2px solid currentColor;
  border-radius: 50%;
  background: rgba(2, 6, 23, 0.7);
  box-shadow: 0 0 0 4px rgba(255,255,255,0.14);
}

.lens-annotation .lens-leader {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--leader-width, 44px);
  height: 0.5px;
  background: currentColor;
  opacity: 0.5;
  transform-origin: 0 0;
  transform: rotate(var(--leader-angle, -43deg));
}
.lens-annotation.routed .lens-leader { display: none; }
.lens-connector-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; overflow: visible; }
.lens-connector-path { fill: none; stroke: #7dd3fc; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; opacity: .52; vector-effect: non-scaling-stroke; }
.lens-connector-path.abnormal { stroke: #ff9f0a; stroke-width: 1.25; opacity: .68; }

.lens-annotation .lens-overlay-text {
  position: absolute;
  left: var(--label-dx);
  top: var(--label-dy);
  transform: translate(-50%, -50%);
  width: max-content;
  max-width: 160px;
  padding: 5px 9px;
  border: 1px solid currentColor;
  border-radius: 12px;
  background: rgba(2, 6, 23, 0.9);
  color: inherit;
  font-size: 0.64rem;
  font-weight: 850;
  line-height: 1.25;
  text-align: left;
  box-shadow: 0 4px 14px color-mix(in srgb, currentColor 18%, transparent), 0 8px 24px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px);
  transition: transform 120ms ease, background 120ms ease;
}
.lens-layout-compact .lens-annotation .lens-overlay-text {
  max-width: 94px;
  padding: 2px 4px;
  font-size: 0.50rem;
  line-height: 1.08;
}

.lens-annotation.low-conf {
  opacity: 0.75;
}
.lens-annotation.low-conf .lens-overlay-text {
  border-style: dashed;
  background: rgba(2, 6, 23, 0.8);
}
.lens-annotation.low-conf .lens-leader {
  border-bottom: 0.5px dashed currentColor;
  background: none;
  opacity: 0.4;
}

/* Adaptive Label Sizing */
.lens-annotation.lens-label-sm .lens-overlay-text {
  font-size: 0.56rem;
  padding: 3px 6px;
  border-radius: 8px;
}
.lens-annotation.lens-label-md .lens-overlay-text {
  font-size: 0.64rem;
  padding: 5px 9px;
  border-radius: 12px;
}
.lens-annotation.lens-label-lg .lens-overlay-text {
  font-size: 0.72rem;
  padding: 7px 12px;
  border-radius: 14px;
}

.lens-annotation.anatomical { color: #38bdf8; z-index: 2; }
.lens-annotation.anatomical .lens-anchor { background: #0284c7; box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.25); }
.lens-annotation.abnormal { color: #f59e0b; z-index: 3; }
.lens-annotation.abnormal.sev-mild { color: #eab308; z-index: 3; }
.lens-annotation.abnormal.sev-sev { color: #ef4444; z-index: 4; }
/* Anatomy shed by the layout solver on very dense studies: the chip and leader are
   hidden so nothing overlaps, but the structure stays in the report panel and PDF. */
.lens-annotation.shed { display: none; }
.lens-annotation.active .lens-anchor { transform: scale(1.35); box-shadow: 0 0 0 8px color-mix(in srgb, currentColor 24%, transparent); }
.lens-annotation.active .lens-overlay-text { background: color-mix(in srgb, currentColor 22%, #020617); }

/* Requirement 4: semi-transparent lesion-boundary highlight. Sits under the markers,
   scales with the image during Smart Zoom; the stroke stays crisp (non-scaling). */
.lens-highlight-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: visible;
}
.lens-highlight-svg .lens-hl {
  fill: color-mix(in srgb, #ff9f0a 22%, transparent);
  stroke: #ff9f0a;
  stroke-width: 2;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  paint-order: stroke;
  animation: lensHlBreathe 2.6s ease-in-out infinite;
}
.lens-highlight-svg .lens-hl.sev-mild { fill: color-mix(in srgb, #facc15 20%, transparent); stroke: #facc15; }
.lens-highlight-svg .lens-hl.sev-mod  { fill: color-mix(in srgb, #ff9f0a 22%, transparent); stroke: #ff9f0a; }
.lens-highlight-svg .lens-hl.sev-sev  { fill: color-mix(in srgb, #ff453a 24%, transparent); stroke: #ff453a; }
/* Fracture line / ECG segment: an open path, so no fill — just a bold stroke. */
.lens-highlight-svg .lens-hl-line {
  fill: none;
  stroke-width: 3.2;
  stroke-linecap: round;
}
@keyframes lensHlBreathe {
  0%, 100% { opacity: 0.78; }
  50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .lens-highlight-svg .lens-hl { animation: none; }
}

/* Phase-7 fusion: specialised-detector boxes (e.g. RSNA pneumonia). A distinct cyan channel so
   users can tell a research-grade detector box apart from validated task-head highlights. */
.lens-detector-svg .lens-detector-box {
  fill: color-mix(in srgb, #22d3ee 12%, transparent);
  stroke: #22d3ee;
  stroke-width: 2.2;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  paint-order: stroke;
}
.lens-annotation.lens-detector-label { color: #22d3ee; }
.lens-detector-tag {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #22d3ee;
  background: color-mix(in srgb, #22d3ee 16%, transparent);
  border: 1px solid color-mix(in srgb, #22d3ee 40%, transparent);
  vertical-align: middle;
}
.lens-detector-list { list-style: none; margin: 0; padding: 0; }
.lens-detector-list li { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; border-bottom: 1px solid color-mix(in srgb, #22d3ee 14%, transparent); }
.lens-detector-list li span { color: #94a3b8; font-size: 0.82rem; white-space: nowrap; }

.lens-overlay-label {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  border: 1px solid rgba(94, 234, 212, 0.72);
  border-radius: 999px;
  padding: 6px 9px;
  color: #04263a;
  background: rgba(94, 234, 212, 0.88);
  font: inherit;
  font-size: 0.68rem;
  font-weight: 950;
  box-shadow: 0 0 0 8px rgba(94, 234, 212, 0.12), 0 10px 24px rgba(0,0,0,0.22);
  animation: lensLabelPulse 2.2s ease-in-out infinite;
}

@keyframes lensLabelPulse {
  0%, 100% { box-shadow: 0 0 0 6px rgba(94, 234, 212, 0.10), 0 10px 24px rgba(0,0,0,0.22); }
  50% { box-shadow: 0 0 0 13px rgba(94, 234, 212, 0.04), 0 12px 30px rgba(0,0,0,0.28); }
}

.lens-ai-card {
  min-width: 0;
  border-radius: 22px;
  padding: 14px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(148, 220, 255, 0.16);
  color: #e0f2fe;
}

.lens-ai-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.lens-ai-head img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  animation: bfsFloat 4s ease-in-out infinite;
}

.lens-ai-head h3 {
  margin: 2px 0 0;
  color: #fff;
  font-size: 1.08rem;
}

.lens-status {
  margin: 0 0 10px;
  padding: 10px 12px;
  border-radius: 14px;
  color: #04263a;
  background: linear-gradient(135deg, #5eead4, #38bdf8);
  font-size: 0.78rem;
  font-weight: 900;
}

.lens-answer {
  max-height: 430px;
  overflow: auto;
  padding: 12px;
  border-radius: 18px;
  color: #eaf6ff;
  background: rgba(2, 6, 23, 0.28);
  border: 1px solid rgba(148, 220, 255, 0.12);
  font-size: 0.88rem;
  line-height: 1.55;
}

.lens-answer p { margin: 0 0 9px; }
.lens-answer p:last-child { margin-bottom: 0; }
.lens-answer strong, .lens-answer .ai-em, .lens-answer .ai-clinical-label { color: #7fe0f5; }

.lens-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
}

.lens-actions button {
  min-height: 34px;
  border: 1px solid rgba(148, 220, 255, 0.18);
  border-radius: 999px;
  color: #e0f2fe;
  background: rgba(255,255,255,0.08);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 850;
}

@media (max-width: 780px) {
  .lens-results { grid-template-columns: 1fr; }
  .lens-result-media { min-height: 280px; }
}

@media (max-width: 560px) {
  .lens-screen { padding: 8px 8px calc(92px + env(safe-area-inset-bottom, 0px)); }
  .lens-camera-card, .lens-results { border-radius: 22px; padding: 10px; }
  .lens-viewfinder { min-height: 48dvh; border-radius: 18px; }
  .lens-toolbar { grid-template-columns: 1fr 1fr 1fr; }
  .lens-tool { font-size: 0.68rem; padding: 0 6px; }
}

/* ===================================================================== */
/* TEACHING HOSPITAL — premium simulation dashboard redesign (2026-07-10) */
/* ===================================================================== */
.th-legacy-map.th-game-map {
  position: relative;
  width: auto;
  height: auto;
  overflow: hidden;
  opacity: 1;
  pointer-events: auto;
  border-radius: 24px;
  padding: 16px;
  border: 1px solid rgba(125, 211, 252, 0.28);
  background:
    radial-gradient(circle at 12% 12%, rgba(94, 234, 212, 0.20), transparent 28%),
    radial-gradient(circle at 86% 20%, rgba(56, 189, 248, 0.18), transparent 26%),
    linear-gradient(160deg, rgba(8, 24, 54, 0.96), rgba(10, 45, 74, 0.88));
  box-shadow: 0 24px 58px rgba(4, 16, 40, 0.34), inset 0 1px 0 rgba(255,255,255,0.12);
}

.th-game-map .th-card-head h3 {
  margin: 4px 0 0;
  color: #fff;
  font-size: 1.05rem;
}

.th-game-map .th-card-eyebrow,
.th-game-map .th-card-progress {
  color: rgba(190, 242, 255, 0.78);
}

.th-game-map .hospital-map {
  min-height: 430px;
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% 50%, rgba(34, 211, 238, 0.22), transparent 36%),
    linear-gradient(135deg, rgba(6, 20, 48, 0.96), rgba(15, 74, 110, 0.72));
  box-shadow: inset 0 0 0 1px rgba(125, 211, 252, 0.22), inset 0 -40px 80px rgba(2, 6, 23, 0.28);
}

.th-game-map .hospital-map::before {
  opacity: 0.32;
  background-size: 34px 34px;
}

.th-game-map .hospital-station {
  background: linear-gradient(145deg, rgba(14, 165, 233, 0.86), rgba(37, 99, 235, 0.72));
  box-shadow: 0 14px 34px rgba(14, 165, 233, 0.26), 0 0 0 1px rgba(255,255,255,0.18) inset;
}

.th-game-map .hospital-station.unlocked,
.th-game-map .hospital-station.active,
.th-game-map .hospital-station.selected {
  animation: hospitalWardGlow 2.4s ease-in-out infinite;
}

.th-game-map .hospital-station.locked {
  background: linear-gradient(145deg, rgba(30, 41, 59, 0.82), rgba(15, 23, 42, 0.72));
  opacity: 0.78;
}

.th-game-map .hospital-station.locked::after {
  content: "LOCKED";
  position: absolute;
  right: 8px;
  top: 8px;
  font-size: 0.5rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  color: rgba(226, 232, 240, 0.82);
}

.th-game-map .hospital-student {
  z-index: 8;
  animation: hospitalStudentFloat 2.8s ease-in-out infinite, hospitalWardGlow 2.2s ease-in-out infinite;
}

@keyframes hospitalWardGlow {
  0%, 100% { filter: drop-shadow(0 0 8px rgba(34, 211, 238, 0.28)); }
  50% { filter: drop-shadow(0 0 22px rgba(94, 234, 212, 0.56)); }
}
/* Scope the flex layout to the ACTIVE state only — otherwise `.hospital-screen`
   overrides `.screen{display:none}` and renders the whole Hospital globally on
   every other page. Only visible when the Hospital tab is the active route. */
.hospital-screen.active { display: flex; flex-direction: column; gap: 14px; padding: 12px 12px calc(96px + env(safe-area-inset-bottom, 0px)); }

/* ---- Hero ---- */
.th-hero {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: 28px; padding: 26px 22px 22px;
  border: 1px solid rgba(120, 190, 255, 0.28);
  background: linear-gradient(160deg, #0a1b3d 0%, #0d2b52 46%, #0a2740 100%);
  box-shadow: 0 30px 70px rgba(4, 16, 40, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  animation: thHeroIn 620ms cubic-bezier(.22, 1, .3, 1) both;
}
@keyframes thHeroIn { from { opacity: 0; transform: translateY(16px) scale(0.985); } to { opacity: 1; transform: none; } }
.th-hero-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; border-radius: inherit; }
.th-hero-glow { position: absolute; width: 60%; aspect-ratio: 1; border-radius: 50%; filter: blur(60px); opacity: 0.5; mix-blend-mode: screen; }
.th-hero-glow.g1 { top: -30%; left: -12%; background: radial-gradient(circle, rgba(34, 211, 238, 0.9), transparent 62%); animation: premiumFloatBlob 18s ease-in-out infinite; }
.th-hero-glow.g2 { bottom: -34%; right: -10%; background: radial-gradient(circle, rgba(16, 185, 129, 0.8), transparent 62%); animation: premiumFloatBlob 22s ease-in-out infinite reverse; }
.th-hero-glow.g3 { top: 24%; right: 24%; width: 40%; background: radial-gradient(circle, rgba(59, 130, 246, 0.6), transparent 64%); animation: premiumFloatBlob 26s ease-in-out infinite; }
.th-hero-grid { position: absolute; inset: 0; opacity: 0.14; background-image: linear-gradient(rgba(150, 210, 255, 0.5) 1px, transparent 1px), linear-gradient(90deg, rgba(150, 210, 255, 0.5) 1px, transparent 1px); background-size: 30px 30px; mask-image: radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 78%); -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 78%); }
.th-hero-particles i { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: rgba(180, 235, 255, 0.9); box-shadow: 0 0 8px rgba(120, 220, 255, 0.9); animation: welcomeFloatParticle 8s ease-in-out infinite; }
.th-hero-particles i:nth-child(1){left:14%;top:24%;animation-delay:0s;} .th-hero-particles i:nth-child(2){left:80%;top:18%;animation-delay:1.2s;} .th-hero-particles i:nth-child(3){left:30%;top:70%;animation-delay:2.4s;} .th-hero-particles i:nth-child(4){left:66%;top:76%;animation-delay:0.6s;} .th-hero-particles i:nth-child(5){left:48%;top:14%;animation-delay:1.8s;} .th-hero-particles i:nth-child(6){left:90%;top:56%;animation-delay:3s;}
.th-eyebrow { margin: 0 0 4px; font-size: 0.68rem; font-weight: 900; letter-spacing: 0.16em; text-transform: uppercase; color: #7fe0f5; }
.th-title { margin: 0 0 5px; font-size: clamp(1.4rem, 5.4vw, 1.9rem); font-weight: 900; letter-spacing: -0.02em; color: #fff; line-height: 1.08; }
.th-subtitle { margin: 0 0 16px; font-size: 0.86rem; color: rgba(200, 224, 255, 0.78); }
.th-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px; }
.th-chip { display: flex; flex-direction: column; gap: 1px; padding: 9px 12px; border-radius: 14px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(150, 210, 255, 0.2); backdrop-filter: blur(10px); }
.th-chip em { font-style: normal; font-size: 0.6rem; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(160, 205, 255, 0.7); }
.th-chip strong { font-size: 0.92rem; font-weight: 900; color: #fff; }
.th-hero-actions { display: flex; flex-direction: column; gap: 12px; }
.th-cta { width: 100%; padding: 14px 18px; border: 0; border-radius: 16px; cursor: pointer; font-family: inherit; font-size: 0.98rem; font-weight: 900; color: #04263a; background: linear-gradient(135deg, #5eead4 0%, #22d3ee 50%, #38bdf8 100%); box-shadow: 0 16px 34px rgba(34, 211, 238, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.5); transition: transform 160ms ease, box-shadow 220ms ease, filter 220ms ease; }
.th-cta:hover { filter: brightness(1.05); box-shadow: 0 20px 42px rgba(34, 211, 238, 0.5); }
.th-cta:active { transform: translateY(1px) scale(0.99); }
.th-hero-stats { display: flex; align-items: center; gap: 12px; font-size: 0.74rem; color: rgba(200, 224, 255, 0.82); font-weight: 800; }
.th-stat-rank { display: inline-flex; gap: 6px; align-items: baseline; }
.th-stat-rank em { font-style: normal; color: #fff; }
.th-stat-rank b { color: #7fe0f5; }
.th-xp-bar { flex: 1; height: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.th-xp-bar b { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #22d3ee, #5eead4); }

/* ---- Cards (pathway + setup share the glass base) ---- */
.th-pathway-card, .th-setup-card {
  border-radius: 22px; padding: 16px; border: 1px solid rgba(255, 255, 255, 0.55);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.9), rgba(224, 244, 255, 0.72));
  box-shadow: 0 18px 44px rgba(6, 26, 66, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(22px) saturate(1.5);
  animation: thHeroIn 620ms cubic-bezier(.22, 1, .3, 1) both;
}
.th-pathway-card { animation-delay: 80ms; }
.th-setup-card { animation-delay: 140ms; }
.th-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.th-card-eyebrow { margin: 0; font-size: 0.66rem; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(9, 34, 74, 0.55); }
.th-card-progress { font-size: 0.72rem; font-weight: 900; color: #0b7f6e; }

/* ---- Pathway ---- */
.th-pathway { list-style: none; margin: 0; padding: 2px 2px 6px; display: flex; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.th-pathway::-webkit-scrollbar { display: none; }
.th-stage { position: relative; flex: 0 0 auto; width: 84px; display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 12px 6px; border-radius: 16px; border: 1px solid rgba(6, 26, 66, 0.1); background: rgba(255, 255, 255, 0.55); transition: transform 180ms ease, box-shadow 220ms ease; }
.th-stage-num { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; font-weight: 900; font-size: 0.85rem; background: rgba(6, 26, 66, 0.08); color: rgba(9, 34, 74, 0.6); }
.th-stage-label { font-size: 0.68rem; font-weight: 800; text-align: center; line-height: 1.15; color: rgba(9, 34, 74, 0.7); }
.th-stage-done { border-color: rgba(16, 185, 129, 0.4); background: linear-gradient(160deg, rgba(52, 211, 153, 0.18), rgba(255, 255, 255, 0.5)); box-shadow: 0 8px 22px rgba(16, 185, 129, 0.22); cursor: pointer; }
.th-stage-done .th-stage-num { background: linear-gradient(135deg, #34d399, #10b981); color: #fff; }
.th-stage-done .th-stage-label { color: #0b6b52; }
.th-stage-current { border-color: rgba(34, 211, 238, 0.55); background: linear-gradient(160deg, rgba(34, 211, 238, 0.2), rgba(255, 255, 255, 0.55)); box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.18), 0 12px 28px rgba(34, 211, 238, 0.3); transform: translateY(-2px); cursor: pointer; }
.th-stage-current .th-stage-num { background: linear-gradient(135deg, #22d3ee, #0ea5e9); color: #fff; animation: premiumPulse 2s ease-in-out infinite; }
.th-stage-current .th-stage-label { color: #0369a1; }
.th-stage-next { border-color: rgba(59, 130, 246, 0.35); background: linear-gradient(160deg, rgba(59, 130, 246, 0.12), rgba(255, 255, 255, 0.55)); cursor: default; }
.th-stage-next .th-stage-num { background: linear-gradient(135deg, #60a5fa, #3b82f6); color: #fff; }
.th-stage-locked { opacity: 0.5; }

/* ---- Case Setup card ---- */
.th-setup-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; border: 0; background: transparent; cursor: pointer; padding: 0; }
.th-setup-chevron { font-size: 1.1rem; color: rgba(9, 34, 74, 0.5); transition: transform 260ms ease; }
.th-setup-card.th-collapsed .th-setup-chevron { transform: rotate(-90deg); }
.th-setup-body { display: grid; gap: 12px; margin-top: 12px; overflow: hidden; transition: max-height 320ms ease, opacity 260ms ease, margin-top 260ms ease; max-height: 900px; }
.th-setup-card.th-collapsed .th-setup-body { max-height: 0; opacity: 0; margin-top: 0; }
.th-setup-hint { margin: 0; font-size: 0.74rem; color: rgba(9, 34, 74, 0.6); }
.th-setup-departments { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.th-setup-departments::-webkit-scrollbar { display: none; }
.th-setup-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.th-field { display: flex; flex-direction: column; gap: 4px; font-size: 0.68rem; font-weight: 800; color: rgba(9, 34, 74, 0.62); }
.th-field.th-dialect[hidden] { display: none; }
.th-select { padding: 10px 11px; border-radius: 12px; border: 1px solid rgba(6, 26, 66, 0.14); background: #fff; font-family: inherit; font-size: 0.82rem; font-weight: 600; color: #0c2340; }
.th-select:focus { outline: none; border-color: rgba(34, 211, 238, 0.55); }
.th-start-btn { width: 100%; padding: 13px 16px; border: 0; border-radius: 14px; cursor: pointer; font-family: inherit; font-size: 0.9rem; font-weight: 900; color: #fff; background: linear-gradient(135deg, #1677ff, #0b6fe0); box-shadow: 0 12px 28px rgba(22, 119, 255, 0.4); transition: transform 160ms ease, filter 200ms ease; }
.th-start-btn:hover { filter: brightness(1.05); }
.th-start-btn:active { transform: translateY(1px) scale(0.99); }

@media (min-width: 720px) {
  .th-chips { grid-template-columns: repeat(4, 1fr); }
  .th-hero-actions { flex-direction: row; align-items: center; }
  .th-cta { width: auto; min-width: 240px; }
  .th-hero-stats { flex: 1; }
  .th-setup-grid { grid-template-columns: repeat(3, 1fr); }
  .th-stage { width: 100px; }
}
@media (prefers-reduced-motion: reduce) {
  .th-hero, .th-pathway-card, .th-setup-card { animation: none !important; }
  .th-hero-glow, .th-hero-particles i, .th-stage-current .th-stage-num { animation: none !important; }
}

/* Compact department chips inside the Case Setup horizontal scroll */
.th-setup-departments { scroll-snap-type: x mandatory; }
.th-setup-departments .hospital-department-card {
  flex: 0 0 118px !important;
  width: 118px !important;
  min-height: 120px;
  padding: 12px 10px !important;
  scroll-snap-align: start;
  border-radius: 16px;
}
.th-setup-departments .hospital-department-card strong { font-size: 0.76rem; line-height: 1.12; white-space: normal; }
.th-setup-departments .hospital-department-card small { font-size: 0.6rem; line-height: 1.1; }
.th-setup-departments .hospital-department-icon { font-size: 1.3rem; }
.th-setup-departments .hospital-progress { display: none; }

/* Bubble chat expand button */
.baihaqi-chat-expand {
  width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 50%;
  background: rgba(6, 26, 66, 0.07); color: #0c2340; font-size: 0.95rem; cursor: pointer; margin-right: 2px;
  transition: transform 150ms ease, background 150ms ease;
}
.baihaqi-chat-expand:hover { transform: scale(1.08); background: rgba(34, 211, 238, 0.18); }

/* ===================================================================== */
/* FULL-SCREEN BAIHAQI AI — the mascot expanded into a workspace (2026-07-10) */
/* ===================================================================== */
.bfs {
  position: fixed; inset: 0; z-index: 25000; display: flex; flex-direction: column;
  padding: max(10px, env(safe-area-inset-top)) 0 0;
  background: linear-gradient(170deg, #071a38 0%, #0a2b52 48%, #08243f 100%);
  opacity: 0;
  transform: scale(0.7) translateY(24px);
  transform-origin: bottom center;
  transition: transform 420ms cubic-bezier(.22, 1.1, .3, 1), opacity 300ms ease;
  overflow: hidden;
}
.bfs.active { opacity: 1; transform: scale(1) translateY(0); }
.bfs.hidden { display: none !important; }

.bfs-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.bfs-blob { position: absolute; width: 64%; aspect-ratio: 1; border-radius: 50%; filter: blur(70px); opacity: 0.5; mix-blend-mode: screen; }
.bfs-blob.bb1 { top: -24%; left: -14%; background: radial-gradient(circle, rgba(34, 211, 238, 0.9), transparent 62%); animation: premiumFloatBlob 20s ease-in-out infinite; }
.bfs-blob.bb2 { bottom: -26%; right: -14%; background: radial-gradient(circle, rgba(16, 185, 129, 0.8), transparent 62%); animation: premiumFloatBlob 24s ease-in-out infinite reverse; }
.bfs-blob.bb3 { top: 40%; left: 30%; width: 40%; background: radial-gradient(circle, rgba(59, 130, 246, 0.6), transparent 64%); animation: premiumFloatBlob 28s ease-in-out infinite; }
.bfs-grid { position: absolute; inset: 0; opacity: 0.1; background-image: linear-gradient(rgba(150, 210, 255, 0.5) 1px, transparent 1px), linear-gradient(90deg, rgba(150, 210, 255, 0.5) 1px, transparent 1px); background-size: 34px 34px; mask-image: radial-gradient(120% 80% at 50% 0%, #000 30%, transparent 80%); -webkit-mask-image: radial-gradient(120% 80% at 50% 0%, #000 30%, transparent 80%); }
.bfs-particles i { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: rgba(180, 235, 255, 0.9); box-shadow: 0 0 8px rgba(120, 220, 255, 0.9); animation: welcomeFloatParticle 9s ease-in-out infinite; }
.bfs-particles i:nth-child(1){left:12%;top:20%;} .bfs-particles i:nth-child(2){left:82%;top:16%;animation-delay:1.1s;} .bfs-particles i:nth-child(3){left:26%;top:64%;animation-delay:2.2s;} .bfs-particles i:nth-child(4){left:70%;top:72%;animation-delay:.6s;} .bfs-particles i:nth-child(5){left:46%;top:12%;animation-delay:1.7s;} .bfs-particles i:nth-child(6){left:90%;top:52%;animation-delay:2.8s;} .bfs-particles i:nth-child(7){left:8%;top:46%;animation-delay:3.4s;} .bfs-particles i:nth-child(8){left:56%;top:60%;animation-delay:.3s;}

.bfs-header { position: relative; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
.bfs-avatar { position: relative; width: 52px; height: 52px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 45% 30%, rgba(255,255,255,0.24), rgba(34,211,238,0.16)); box-shadow: 0 0 0 1px rgba(150,220,255,0.3), 0 8px 24px rgba(8,40,80,0.5); }
.bfs-avatar img { width: 82%; height: 82%; object-fit: contain; animation: bfsFloat 5s ease-in-out infinite; }
@keyframes bfsFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.bfs-avatar[data-mood="thinking"] img { animation: bfsThink 1.6s ease-in-out infinite; }
@keyframes bfsThink { 0%,100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg) translateY(-3px); } }
.bfs-avatar[data-mood="celebration"] img { animation: bfsCelebrate 0.7s ease-in-out 2; }
@keyframes bfsCelebrate { 0%,100% { transform: translateY(0) scale(1); } 30% { transform: translateY(-8px) scale(1.08); } 60% { transform: translateY(0) scale(1); } }
.bfs-waveform { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; gap: 3px; }
.bfs-avatar[data-mood="speaking"] .bfs-waveform { display: flex; }
.bfs-avatar[data-mood="speaking"] img { opacity: 0.32; }
.bfs-waveform i { width: 3px; height: 10px; border-radius: 2px; background: linear-gradient(#5eead4, #22d3ee); animation: bfsWave 0.9s ease-in-out infinite; }
.bfs-waveform i:nth-child(2){animation-delay:.1s;} .bfs-waveform i:nth-child(3){animation-delay:.2s;} .bfs-waveform i:nth-child(4){animation-delay:.3s;} .bfs-waveform i:nth-child(5){animation-delay:.4s;}
@keyframes bfsWave { 0%,100% { height: 8px; } 50% { height: 22px; } }
.bfs-id { flex: 1; display: flex; flex-direction: column; line-height: 1.2; }
.bfs-id strong { font-size: 1.02rem; font-weight: 900; color: #fff; }
.bfs-id span { font-size: 0.72rem; color: rgba(180, 215, 255, 0.75); font-weight: 700; }
.bfs-icon-btn { width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(255,255,255,0.1); color: #dff2ff; font-size: 1.1rem; cursor: pointer; transition: transform 150ms ease, background 150ms ease; }
.bfs-icon-btn:hover { transform: scale(1.08); background: rgba(255,255,255,0.18); }

.bfs-log { position: relative; z-index: 2; flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 12px 16px 16px; display: flex; flex-direction: column; gap: 10px; }
.bfs-log .bchat-msg { max-width: 88%; padding: 11px 14px; border-radius: 18px; font-size: 0.88rem; line-height: 1.5; animation: bchatIn 260ms ease both; }
.bfs-log .bchat-user { align-self: flex-end; color: #04263a; background: linear-gradient(135deg, #5eead4, #22d3ee); border-bottom-right-radius: 6px; font-weight: 700; }
.bfs-log .bchat-assistant { align-self: flex-start; color: #eaf3ff; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(150, 210, 255, 0.18); border-bottom-left-radius: 6px; backdrop-filter: blur(12px); }
.bfs-log .bchat-assistant p { margin: 0 0 8px; } .bfs-log .bchat-assistant p:last-child { margin-bottom: 0; }
.bfs-log .bchat-assistant strong, .bfs-log .bchat-assistant .ai-em { color: #7fe0f5; font-weight: 800; }
.bfs-log .bchat-assistant .ai-clinical-label { color: #5eead4; font-weight: 900; }
.bfs-log .bchat-assistant .ai-code { background: rgba(34,211,238,0.16); color: #bff5ff; padding: 1px 6px; border-radius: 6px; font-size: 0.82em; }
.bfs-log .bchat-typing { display: inline-flex; gap: 4px; padding: 12px 14px; }
.bfs-log .bchat-typing span { width: 6px; height: 6px; border-radius: 50%; background: rgba(150, 220, 255, 0.7); animation: bchatType 1s ease-in-out infinite; }
.bfs-log .bchat-typing span:nth-child(2){animation-delay:.18s;} .bfs-log .bchat-typing span:nth-child(3){animation-delay:.36s;}

.bfs-composer { position: relative; z-index: 2; display: flex; align-items: center; gap: 8px; padding: 10px 14px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid rgba(150, 210, 255, 0.14); background: rgba(6, 22, 48, 0.4); backdrop-filter: blur(14px); }
.bfs-composer-mascot { width: 34px; height: 34px; flex-shrink: 0; object-fit: contain; animation: bfsFloat 4.5s ease-in-out infinite; }
.bfs-composer input { flex: 1; min-width: 0; padding: 12px 14px; border-radius: 999px; border: 1px solid rgba(150, 210, 255, 0.25); background: rgba(255,255,255,0.1); color: #fff; font-family: inherit; font-size: 0.88rem; }
.bfs-composer input::placeholder { color: rgba(190, 220, 255, 0.55); }
.bfs-composer input:focus { outline: none; border-color: rgba(34, 211, 238, 0.6); background: rgba(255,255,255,0.14); }
.bfs-mic, .bfs-send { flex-shrink: 0; width: 42px; height: 42px; display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer; font-size: 1rem; transition: transform 150ms ease, filter 150ms ease; }
.bfs-mic { background: rgba(255,255,255,0.12); color: #dff2ff; }
.bfs-mic.is-listening { background: rgba(255, 90, 110, 0.28); animation: premiumPulse 1.2s ease-in-out infinite; }
.bfs-mic.is-hidden { display: none; }
.bfs-send { color: #04263a; background: linear-gradient(135deg, #5eead4, #22d3ee); box-shadow: 0 6px 18px rgba(34, 211, 238, 0.45); }
.bfs-send:active, .bfs-mic:active { transform: scale(0.94); }

@media (min-width: 860px) {
  .bfs-log { max-width: 820px; width: 100%; margin: 0 auto; }
  .bfs-composer { max-width: 820px; width: 100%; margin: 0 auto; border-radius: 20px 20px 0 0; }
  .bfs-header { max-width: 820px; width: 100%; margin: 0 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .bfs { transition: opacity 200ms ease; transform: none; }
  .bfs-blob, .bfs-particles i, .bfs-avatar img, .bfs-waveform i, .bfs-composer-mascot { animation: none !important; }
}

/* ============================================================
   HOME v2 — premium liquid-glass flagship (revision only)
   Self-contained namespace `.home2`; overrides legacy home rules.
   Preserves JS hooks: #homeGreeting #homeMotivation #homeHeroXpFill
   #homeHeroXpLabel #homeRankStat #homeDeckStat #continueLearning*
   ============================================================ */
.screen.home2.active {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 14px 16px calc(104px + env(safe-area-inset-bottom, 0px));
  max-width: 1120px;
  margin: 0 auto;
  width: 100%;
  animation: riseIn 420ms var(--ease) both;
}

/* ---------- HERO ---------- */
.home2-hero {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  padding: 26px 26px 24px;
  isolation: isolate;
  background:
    linear-gradient(135deg, rgba(23, 105, 255, 0.96), rgba(88, 86, 214, 0.94) 55%, rgba(100, 210, 255, 0.9));
  box-shadow: 0 26px 70px rgba(23, 60, 140, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.home2-hero-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(46px);
  z-index: 0;
  opacity: 0.75;
  pointer-events: none;
}
.home2-hero-glow.g1 { width: 300px; height: 300px; top: -120px; right: -70px; background: radial-gradient(circle, rgba(120, 220, 255, 0.85), transparent 70%); }
.home2-hero-glow.g2 { width: 260px; height: 260px; bottom: -140px; left: -60px; background: radial-gradient(circle, rgba(191, 90, 242, 0.8), transparent 70%); }
.home2-hero-inner { position: relative; z-index: 1; }
.home2-greeting {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.86);
}
.home2-motivation {
  margin: 0 0 18px;
  font-size: clamp(22px, 3.4vw, 30px);
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #fff;
  text-shadow: 0 2px 14px rgba(10, 30, 80, 0.28);
}
.home2-xp { margin-bottom: 16px; }
.home2-xp-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
}
.home2-xp-head strong { font-size: 14px; color: #fff; }
.home2-xp-track {
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(10, 30, 80, 0.3);
}
.home2-xp-fill {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, #7dffce, #ffe27a);
  box-shadow: 0 0 16px rgba(255, 226, 122, 0.7);
  transition: width 700ms var(--ease);
}
.home2-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.home2-chip {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.24);
  backdrop-filter: blur(8px);
}
.home2-chip span { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255, 255, 255, 0.78); }
.home2-chip strong { font-size: 17px; font-weight: 800; color: #fff; }

/* ---------- CONTINUE (primary CTA) ---------- */
.home2-continue {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  border-radius: 22px;
  background: var(--panel-strong);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}
.home2-continue::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--blue), var(--violet));
}
.home2-continue-ic {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 14px;
  font-size: 16px;
  color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--violet));
  box-shadow: 0 10px 24px rgba(23, 105, 255, 0.32);
}
.home2-continue-text { flex: 1 1 auto; min-width: 0; }
.home2-eyebrow {
  margin: 0 0 2px;
  font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--blue);
}
.home2-continue-text h3 {
  margin: 0 0 2px;
  font-size: 16px; font-weight: 800; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.home2-continue-text p { margin: 0; font-size: 13px; color: var(--muted); }
.home2-continue-btn {
  flex: 0 0 auto;
  padding: 11px 20px;
  border: none;
  border-radius: 14px;
  font-size: 14px; font-weight: 800;
  color: #fff; cursor: pointer;
  background: linear-gradient(135deg, var(--blue), var(--violet));
  box-shadow: 0 12px 26px rgba(23, 105, 255, 0.34);
  transition: transform 160ms var(--ease), box-shadow 160ms var(--ease);
}
.home2-continue-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(23, 105, 255, 0.42); }
.home2-continue-btn:active { transform: translateY(0); }

/* ---------- FEATURE GRID ---------- */
.home2-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.home2-card {
  --c: var(--blue);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 16px;
  border-radius: 20px;
  text-align: left;
  cursor: pointer;
  background: var(--panel-strong);
  border: 1px solid var(--line);
  box-shadow: 0 12px 34px rgba(16, 24, 40, 0.08);
  transition: transform 180ms var(--ease), box-shadow 180ms var(--ease), border-color 180ms var(--ease);
  position: relative;
  overflow: hidden;
  animation: riseIn 460ms var(--ease) both;
}
.home2-card::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: radial-gradient(120% 120% at 100% 0%, color-mix(in srgb, var(--c) 12%, transparent), transparent 60%);
  opacity: 0; transition: opacity 180ms var(--ease); pointer-events: none;
}
.home2-card:nth-child(2) { animation-delay: 60ms; }
.home2-card:nth-child(3) { animation-delay: 120ms; }
.home2-card:nth-child(4) { animation-delay: 180ms; }
.home2-card:nth-child(5) { animation-delay: 240ms; }
.home2-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--c) 45%, var(--line));
  box-shadow: 0 20px 44px color-mix(in srgb, var(--c) 22%, rgba(16, 24, 40, 0.1));
}
.home2-card:hover::after { opacity: 1; }
.home2-card:active { transform: translateY(-1px); }
.home2-card--wide { grid-column: 1 / -1; }
.home2-card-ic {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 48px; height: 48px;
  border-radius: 15px;
  font-size: 20px; font-weight: 700;
  color: var(--c);
  background: color-mix(in srgb, var(--c) 15%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 28%, transparent);
  transition: transform 180ms var(--ease);
}
.home2-card:hover .home2-card-ic { transform: scale(1.06); }
.home2-card-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.home2-card-body strong { font-size: 15.5px; font-weight: 800; color: var(--ink); }
.home2-card-body small { font-size: 12.5px; color: var(--muted); line-height: 1.3; }
.home2-card-arw {
  flex: 0 0 auto;
  font-size: 17px; font-weight: 700; color: var(--c);
  opacity: 0.55;
  transform: translateX(-2px);
  transition: transform 180ms var(--ease), opacity 180ms var(--ease);
}
.home2-card:hover .home2-card-arw { opacity: 1; transform: translateX(2px); }

/* ---------- resume panel spacing within home2 ---------- */
.home2 .resume-panel { margin-top: 2px; }

/* ---------- dark mode ---------- */
body.dark-mode .home2-continue,
body.dark-mode .home2-card {
  background: rgba(24, 30, 48, 0.82);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
}
body.dark-mode .home2-card-body strong,
body.dark-mode .home2-continue-text h3 { color: #f3f6ff; }

/* ---------- responsive ----------
   6 feature cards must stay on ONE phone screen without scrolling, so keep
   the 2-column grid on mobile (never collapse to 1 col) and compress the
   hero / continue / cards to reclaim vertical space. */
@media (max-width: 560px) {
  .screen.home2.active { gap: 12px; padding: 10px 12px calc(100px + env(safe-area-inset-bottom, 0px)); }
  .home2-hero { padding: 18px 18px 16px; border-radius: 24px; }
  .home2-motivation { margin-bottom: 14px; font-size: clamp(20px, 5.4vw, 24px); }
  .home2-xp { margin-bottom: 12px; }
  .home2-chips { gap: 10px; }
  .home2-chip { padding: 9px 13px; }
  .home2-chip strong { font-size: 15px; }
  .home2-continue { padding: 13px 15px; gap: 12px; border-radius: 18px; }
  .home2-continue-ic { width: 40px; height: 40px; border-radius: 12px; }
  .home2-continue-text h3 { font-size: 15px; }
  .home2-continue-text p { font-size: 12px; }
  .home2-continue-btn { padding: 10px 16px; font-size: 13px; }
  .home2-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .home2-card { gap: 10px; padding: 12px 12px; border-radius: 16px; }
  .home2-card-ic { width: 40px; height: 40px; border-radius: 12px; font-size: 18px; }
  .home2-card-body strong { font-size: 13.5px; }
  .home2-card-body small { font-size: 11px; line-height: 1.25; }
  .home2-card-arw { display: none; }
}
/* very short viewports (small phones / compact) — squeeze further so all 6 fit */
@media (max-width: 560px) and (max-height: 740px) {
  .home2-hero { padding: 14px 16px 13px; }
  .home2-motivation { margin-bottom: 10px; font-size: 21px; }
  .home2-xp { margin-bottom: 10px; }
  .home2-continue { padding: 11px 13px; }
  .home2-card { padding: 10px 11px; }
  .home2-card-ic { width: 38px; height: 38px; }
}
@media (prefers-reduced-motion: reduce) {
  .home2-card, .screen.home2.active { animation: none; }
}

/* ============================================================
   MedDex Lens — structured report card + AI-placed on-image labels
   ============================================================ */
/* Anatomical labels: quiet, for orientation (no pulse). */
.lens-overlay-label.anatomical {
  background: rgba(15, 23, 42, 0.72);
  color: #cfe9ff;
  border: 1px solid rgba(148, 220, 255, 0.5);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
  font-weight: 800;
  font-size: 0.63rem;
  animation: none;
  backdrop-filter: blur(3px);
}
/* Abnormal labels: highlighted, tappable, severity-coloured. */
.lens-overlay-label.abnormal {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  color: #fff;
  border-width: 1.5px;
  --lens-sev: #ff9f0a;
  background: color-mix(in srgb, var(--lens-sev) 82%, #0b1220);
  border-color: color-mix(in srgb, var(--lens-sev) 70%, #fff);
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--lens-sev) 14%, transparent), 0 10px 24px rgba(0, 0, 0, 0.3);
  animation: lensAbnPulse 1.9s ease-in-out infinite;
}
.lens-overlay-label.abnormal.sev-mild { --lens-sev: #facc15; }
.lens-overlay-label.abnormal.sev-mod  { --lens-sev: #ff9f0a; }
.lens-overlay-label.abnormal.sev-sev  { --lens-sev: #ff453a; }
.lens-overlay-label.abnormal .lens-overlay-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 0 3px color-mix(in srgb, var(--lens-sev) 55%, transparent);
}
.lens-overlay-label.abnormal.active {
  transform: translate(-50%, -50%) scale(1.12);
  box-shadow: 0 0 0 12px color-mix(in srgb, var(--lens-sev) 22%, transparent), 0 14px 30px rgba(0, 0, 0, 0.4);
  z-index: 3;
}
@keyframes lensAbnPulse {
  0%, 100% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--lens-sev) 12%, transparent), 0 10px 24px rgba(0,0,0,0.3); }
  50% { box-shadow: 0 0 0 13px color-mix(in srgb, var(--lens-sev) 5%, transparent), 0 12px 30px rgba(0,0,0,0.36); }
}

/* Report card */
.lens-report { display: flex; flex-direction: column; gap: 14px; }
.lens-rep-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.lens-rep-title { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.lens-rep-title strong { font-size: 1rem; color: #fff; }
.lens-rep-title small { font-size: 0.72rem; color: #9fc6df; line-height: 1.3; }
.lens-rep-h {
  display: block; font-size: 0.66rem; font-weight: 900; letter-spacing: 0.07em;
  text-transform: uppercase; color: #7fe0f5; margin-bottom: 6px;
}
.lens-rep-section { border-top: 1px solid rgba(148, 220, 255, 0.12); padding-top: 12px; }
.lens-rep-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 5px; }
.lens-rep-list li { font-size: 0.84rem; line-height: 1.4; }
.lens-teach li { color: #d7f2ff; }
.lens-learning-points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
  counter-reset: lens-learning;
}
.lens-learning-points li {
  counter-increment: lens-learning;
  position: relative;
  padding: 10px 12px 10px 42px;
  border: 1px solid rgba(125, 211, 252, 0.18);
  border-radius: 12px;
  background: rgba(2, 6, 23, 0.28);
}
.lens-learning-points li::before {
  content: counter(lens-learning);
  position: absolute;
  left: 12px;
  top: 11px;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #081421;
  background: #7dd3fc;
  font-size: 0.67rem;
  font-weight: 900;
}
.lens-learning-points strong { color: #fff; font-size: 0.84rem; }
.lens-learning-points p { margin: 4px 0 0; color: #d7f2ff; font-size: 0.79rem; line-height: 1.42; }
.lens-impression p { margin: 0; font-size: 0.9rem; line-height: 1.45; color: #fff; }
.lens-normal-note { margin: 0; font-size: 0.84rem; color: #8fe9c4; }
.lens-quality-first { padding: 11px 12px; border-radius: 12px; background: rgba(125, 211, 252, 0.08); border: 1px solid rgba(125, 211, 252, 0.18); }
.lens-quality-first p { margin: 0; color: #d7f2ff; font-size: 0.82rem; line-height: 1.4; }
.lens-uncertain-list, .lens-not-demonstrated-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.lens-uncertain-list li, .lens-not-demonstrated-list li { padding: 10px 12px; border-radius: 12px; background: rgba(255, 159, 10, 0.08); border: 1px dashed rgba(255, 159, 10, 0.38); }
.lens-not-demonstrated-list li { background: rgba(48, 209, 88, 0.07); border-color: rgba(48, 209, 88, 0.3); }
.lens-uncertain-list strong, .lens-not-demonstrated-list strong { display: block; color: #fff; font-size: 0.86rem; }
.lens-uncertain-list span, .lens-not-demonstrated-list span { display: block; margin-top: 2px; color: #ffcf7a; font-size: 0.68rem; font-weight: 800; }
.lens-not-demonstrated-list span { color: #8fe9c4; }
.lens-uncertain-list p, .lens-not-demonstrated-list p { margin: 6px 0 0; color: #d7f2ff; font-size: 0.78rem; line-height: 1.4; }
.lens-systematic-list { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 7px; }
.lens-systematic-list li { color: #7fe0f5; font-size: 0.78rem; }
.lens-systematic-list strong { display: inline-block; min-width: 150px; color: #fff; }
.lens-systematic-list span { color: #d7f2ff; }

/* Confidence ring */
.lens-conf { position: relative; flex: 0 0 auto; width: 66px; text-align: center; }
.lens-conf-ring { width: 66px; height: 66px; transform: rotate(-90deg); }
.lens-conf-track { fill: none; stroke: rgba(148, 220, 255, 0.16); stroke-width: 3.5; }
.lens-conf-fill { fill: none; stroke-width: 3.5; stroke-linecap: round; transition: stroke-dasharray 700ms var(--ease, ease); }
.lens-conf-good .lens-conf-fill { stroke: #30d158; }
.lens-conf-warn .lens-conf-fill { stroke: #ff9f0a; }
.lens-conf-low  .lens-conf-fill { stroke: #ff453a; }
.lens-conf-num { position: absolute; top: 20px; left: 0; right: 0; font-size: 1.02rem; font-weight: 900; color: #fff; }
.lens-conf-num i { font-size: 0.6rem; font-style: normal; opacity: 0.75; }
.lens-conf-label { display: block; font-size: 0.58rem; letter-spacing: 0.05em; text-transform: uppercase; color: #9fc6df; margin-top: 2px; }

/* Abnormal findings list (tappable → why) */
.lens-abnormal-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.lens-abnormal-item { --lens-sev: #ff9f0a; border-radius: 14px; background: rgba(2, 6, 23, 0.4); border: 1px solid color-mix(in srgb, var(--lens-sev) 40%, rgba(148,220,255,0.14)); overflow: hidden; }
.lens-abnormal-item.sev-mild { --lens-sev: #facc15; }
.lens-abnormal-item.sev-mod  { --lens-sev: #ff9f0a; }
.lens-abnormal-item.sev-sev  { --lens-sev: #ff453a; }
.lens-abnormal-btn {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 11px 13px; background: none; border: none; cursor: pointer;
  color: #eaf6ff; font: inherit; text-align: left;
}
.lens-abnormal-btn strong { font-size: 0.9rem; color: #fff; flex: 1 1 auto; min-width: 0; }
.lens-sev-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; background: var(--lens-sev); box-shadow: 0 0 0 3px color-mix(in srgb, var(--lens-sev) 30%, transparent); }
.lens-sev-tag { font-size: 0.62rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.05em; color: var(--lens-sev); }
/* Detection-tier chip: confirmed (solid) vs probable (amber, strong-but-incomplete). */
.lens-tier-tag { font-size: 0.58rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em; border-radius: 999px; padding: 2px 7px; border: 1px solid currentColor; }
.lens-tier-confirmed { color: #34d399; }
.lens-tier-probable { color: #fbbf24; }
.lens-abnormal-item.tier-probable { opacity: 0.97; }

/* Progressive-pipeline verification state chip in the report header. */
.lens-verify-chip { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: 0.62rem; letter-spacing: 0.02em; }
.lens-verify-chip.verified { color: #34d399; }
.lens-verify-chip.pending { color: #7dd3fc; }
.lens-verify-chip.unavailable { color: #fbbf24; }
.lens-verify-spinner { width: 11px; height: 11px; border-radius: 50%; border: 2px solid currentColor; border-top-color: transparent; display: inline-block; animation: lensVerifySpin 0.8s linear infinite; }
.lens-verify-retry { margin-left: 4px; font: inherit; color: inherit; background: transparent; border: 1px solid currentColor; border-radius: 999px; padding: 1px 8px; cursor: pointer; }
@keyframes lensVerifySpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .lens-verify-spinner { animation: none; } }
.lens-why { font-size: 0.68rem; font-weight: 800; color: #7fe0f5; border: 1px solid rgba(127, 224, 245, 0.4); border-radius: 999px; padding: 3px 9px; flex: 0 0 auto; }
.lens-abnormal-btn[aria-expanded="true"] .lens-why { background: rgba(127, 224, 245, 0.16); }
.lens-abnormal-explain { margin: 0; padding: 0 13px 12px; font-size: 0.82rem; line-height: 1.45; color: #d7f2ff; }
.lens-abnormal-explain p, .lens-normal-explain p { margin: 8px 0 0; }
.lens-abnormal-explain strong, .lens-normal-explain strong { display: block; margin-bottom: 2px; color: #7fe0f5; font-size: 0.68rem; text-transform: uppercase; }

.lens-normal-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.lens-normal-list li { overflow: hidden; border: 1px solid rgba(125, 211, 252, 0.18); border-radius: 12px; background: rgba(2, 6, 23, 0.28); }
.lens-normal-btn { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 9px 11px; border: 0; background: transparent; color: #eaf6ff; font: inherit; text-align: left; cursor: pointer; }
.lens-normal-btn strong { font-size: 0.84rem; }
.lens-normal-btn span { color: #7dd3fc; font-size: 0.66rem; font-weight: 800; }
.lens-normal-explain { padding: 0 11px 11px; color: #d7f2ff; font-size: 0.8rem; line-height: 1.42; }
.lens-structured-error { padding: 16px; border: 1px solid rgba(255, 159, 10, 0.34); border-radius: 14px; background: rgba(255, 159, 10, 0.08); }
.lens-structured-error strong { color: #fff; }
.lens-structured-error p { margin: 7px 0 13px; color: #d7f2ff; line-height: 1.45; }
.lens-error-debug, .lens-debug-panel { margin-top: 12px; border: 1px solid rgba(125, 211, 252, .25); border-radius: 12px; background: rgba(2, 10, 24, .78); color: #c9efff; }
.lens-error-debug summary, .lens-debug-panel summary { cursor: pointer; padding: 9px 11px; font-weight: 800; font-size: .72rem; }
.lens-error-debug pre, .lens-debug-panel pre { margin: 6px 0 0; padding: 8px; max-height: 220px; overflow: auto; white-space: pre-wrap; word-break: break-word; color: #9bdcff; background: rgba(0,0,0,.25); font: 10px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; }
.lens-debug-panel ol { list-style: none; margin: 0; padding: 0 10px 10px; display: grid; gap: 6px; }
.lens-debug-panel li { padding: 7px; border-radius: 8px; background: rgba(255,255,255,.035); font-size: .68rem; }
.lens-debug-panel li strong { color: #dff7ff; }
.lens-debug-panel .lens-debug-error strong { color: #fb7185; }
.lens-debug-panel .lens-debug-warning strong { color: #fbbf24; }

/* Differentials */
.lens-ddx-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.lens-ddx-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 0.85rem; padding: 7px 11px; border-radius: 11px; background: rgba(2, 6, 23, 0.34); }
.lens-like { font-size: 0.6rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.05em; padding: 2px 8px; border-radius: 999px; }
.lens-like-high { color: #ff8a80; background: rgba(255, 69, 58, 0.16); }
.lens-like-moderate { color: #ffcf7a; background: rgba(255, 159, 10, 0.16); }
.lens-like-low { color: #9fe9c4; background: rgba(48, 209, 88, 0.16); }

/* ============================================================
   MedDex Lens — anatomy toggle, smart zoom, localisation gating
   ============================================================ */
.lens-result-media { position: relative; }

/* Floating "Show Anatomy Labels" toggle (default ON) */
.lens-anatomy-toggle {
  position: absolute;
  top: 12px; left: 12px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px 7px 10px;
  border-radius: 999px;
  background: rgba(2, 6, 23, 0.72);
  border: 1px solid rgba(148, 220, 255, 0.28);
  color: #eaf6ff; font-size: 0.72rem; font-weight: 800;
  cursor: pointer; user-select: none; z-index: 6;
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.34);
}
.lens-anatomy-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.lens-anatomy-box {
  width: 18px; height: 18px; border-radius: 6px; flex: 0 0 auto;
  border: 1.5px solid rgba(148, 220, 255, 0.6);
  background: rgba(255, 255, 255, 0.06);
  display: grid; place-items: center; transition: all 140ms ease;
}
.lens-anatomy-box::after { content: "✓"; font-size: 0.72rem; color: #04263a; opacity: 0; transform: scale(0.5); transition: all 140ms ease; }
.lens-anatomy-toggle input:checked + .lens-anatomy-box { background: #5eead4; border-color: #5eead4; }
.lens-anatomy-toggle input:checked + .lens-anatomy-box::after { opacity: 1; transform: scale(1); }
.lens-anatomy-toggle input:focus-visible + .lens-anatomy-box { box-shadow: 0 0 0 3px rgba(94, 234, 212, 0.4); }

/* Zoom/rotation reset. It now lives inside .lens-viewer-controls on the stage and
   inherits .lens-viewer-btn sizing, so it no longer needs to position itself —
   the old absolute placement resolved against the report sheet and covered the
   sheet's own header buttons. */
.lens-zoom-reset.hidden { display: none !important; }
.lens-zoom-reset { cursor: pointer; }

/* The stage (image/video + overlay layer + highlight SVG) is one transformed box,
   so pixels and annotations move together and stay aligned through zoom, pan and
   rotation. Only the label chips counter-transform, so their text stays upright
   and legible while their anchor keeps riding the structure it points at.

   No transition by default: a pinch or drag must track the finger 1:1. The
   .lens-viewport-animate class is added only for discrete jumps (double-tap,
   button zoom, rotate, "jump to finding"). */
.lens-image-stage { will-change: transform; }
.lens-image-stage.lens-viewport-animate { transition: transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.lens-image-stage.zoomed .lens-annotation,
.lens-image-stage[data-lens-rotation]:not([data-lens-rotation="0"]) .lens-annotation {
  transform: var(--lens-label-counter, none);
  transform-origin: 0 0;
}
/* The highlight strokes are vector-effect:non-scaling-stroke, so the boundary
   stays a hairline at 8x instead of turning into a thick smear. */
.lens-image-stage .lens-hl { vector-effect: non-scaling-stroke; }
.lens-image-stage.is-panning { cursor: grabbing; }
@media (prefers-reduced-motion: reduce) {
  .lens-image-stage.lens-viewport-animate { transition: none; }
}
.lens-annotation.abnormal { z-index: 3; }

/* Abnormal finding that could not be localised confidently (no on-image marker) */
.lens-noloc {
  font-size: 0.6rem; font-weight: 800; color: #9fb6c9;
  border: 1px dashed rgba(159, 182, 201, 0.5); border-radius: 999px;
  padding: 2px 8px; white-space: nowrap;
}
.lens-abnormal-item.not-localized { opacity: 0.92; border-style: dashed; }
.lens-abnormal-item.not-localized .lens-sev-dot { opacity: 0.5; }

@media (prefers-reduced-motion: reduce) {
  .lens-image-stage { transition: none; }
}

/* MedDex Lens — immediate premium analysis progress */
.lens-progress-modal { position: fixed; inset: 0; z-index: 100000; display: grid; place-items: center; padding: 18px; opacity: 0; transition: opacity 220ms ease; }
.lens-progress-modal.active { opacity: 1; }
.lens-progress-modal.closing { pointer-events: none; }
.lens-progress-backdrop { position: absolute; inset: 0; background: rgba(1, 7, 20, 0.68); backdrop-filter: blur(18px) saturate(1.25); -webkit-backdrop-filter: blur(18px) saturate(1.25); }
.lens-progress-panel { box-sizing: border-box; position: relative; width: min(92vw, 460px); max-height: calc(100dvh - 36px); overflow: auto; padding: 26px 24px 22px; border: 1px solid rgba(125, 211, 252, 0.27); border-radius: 28px; color: #eaf7ff; background: linear-gradient(155deg, rgba(10, 31, 58, 0.94), rgba(3, 13, 31, 0.91)); box-shadow: 0 34px 90px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255,255,255,0.12); transform: translateY(12px) scale(0.97); transition: transform 300ms cubic-bezier(.2,.8,.2,1), border-color 220ms ease; }
.lens-progress-modal.active .lens-progress-panel { transform: translateY(0) scale(1); }
.lens-progress-modal.interrupted .lens-progress-panel { border-color: rgba(255, 159, 10, 0.56); }
.lens-progress-glow { position: absolute; width: 220px; height: 220px; left: 50%; top: -140px; transform: translateX(-50%); border-radius: 50%; background: #22d3ee; filter: blur(70px); opacity: 0.28; pointer-events: none; }
.lens-progress-robot { position: relative; width: 92px; height: 92px; margin: 0 auto 8px; display: grid; place-items: center; }
.lens-progress-robot img { position: relative; width: 82px; height: 82px; object-fit: contain; z-index: 1; animation: lensRobotFloat 2.4s ease-in-out infinite; }
.lens-progress-pulse { position: absolute; inset: 10px; border: 1px solid rgba(94,234,212,.7); border-radius: 50%; animation: lensRobotPulse 1.6s ease-out infinite; }
.lens-progress-panel > .eyebrow { margin: 0; text-align: center; color: #67e8f9; }
.lens-progress-panel h3 { margin: 5px 0 0; text-align: center; font-size: 1.28rem; color: #fff; transition: color 180ms ease; }
.lens-progress-panel > p:not(.eyebrow) { margin: 6px 0 16px; text-align: center; color: #a9cde2; font-size: .8rem; }
.lens-progress-modal.interrupted .lens-progress-panel h3 { color: #ffd28a; }
.lens-progress-track { height: 7px; overflow: hidden; border-radius: 99px; background: rgba(148,220,255,.12); box-shadow: inset 0 1px 3px rgba(0,0,0,.35); }
.lens-progress-track span { display: block; height: 100%; width: 4%; border-radius: inherit; background: linear-gradient(90deg, #5eead4, #38bdf8, #818cf8); background-size: 180% 100%; box-shadow: 0 0 16px rgba(56,189,248,.58); transition: width 420ms cubic-bezier(.2,.8,.2,1); animation: lensProgressShimmer 1.8s linear infinite; }
.lens-progress-timeline { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 7px; }
.lens-progress-timeline li { min-height: 38px; display: grid; grid-template-columns: 26px 1fr; align-items: center; gap: 9px; padding: 5px 8px; border-radius: 12px; opacity: .42; transform: translateX(0); transition: opacity 220ms ease, background 220ms ease, transform 220ms ease; }
.lens-progress-timeline li.active { opacity: 1; background: rgba(56,189,248,.09); transform: translateX(3px); }
.lens-progress-timeline li.done { opacity: .82; }
.lens-progress-check { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(148,220,255,.34); }
.lens-progress-timeline li.active .lens-progress-check { border-color: #67e8f9; border-top-color: transparent; animation: lensProgressSpin .8s linear infinite; }
.lens-progress-timeline li.done .lens-progress-check { border-color: #5eead4; background: #5eead4; color: #04263a; animation: none; }
.lens-progress-timeline li.done .lens-progress-check::after { content: "✓"; font-size: .72rem; font-weight: 1000; }
.lens-progress-timeline strong { display: block; font-size: .82rem; color: #edf9ff; }
.lens-progress-timeline small { display: block; min-height: 1em; color: #81b6d3; font-size: .66rem; margin-top: 1px; }
/* ETA pill + rotating educational tip + cancel — premium waiting UX. Override the generic panel <p>. */
.lens-progress-panel > p.lens-progress-eta { margin: 2px auto 4px; display: inline-block; padding: 3px 12px; border-radius: 999px; font-size: .72rem; font-weight: 600; color: #7ff0e0; background: rgba(94,234,212,.1); border: 1px solid rgba(94,234,212,.28); letter-spacing: .01em; }
.lens-progress-panel > p.lens-progress-tip { margin: 14px 4px 4px; min-height: 2.4em; text-align: center; color: #b9dcef; font-size: .78rem; font-style: italic; transition: opacity .3s ease; }
.lens-progress-panel > p.lens-progress-tip::before { content: "💡 "; font-style: normal; }
.lens-progress-cancel { display: block; margin: 12px auto 0; padding: 8px 20px; border-radius: 999px; font-size: .78rem; font-weight: 600; color: #cfe6f5; background: rgba(255,255,255,.06); border: 1px solid rgba(148,220,255,.24); cursor: pointer; transition: background 160ms ease, border-color 160ms ease, color 160ms ease; }
.lens-progress-cancel:hover { background: rgba(255,99,99,.14); border-color: rgba(255,120,120,.5); color: #ffd7d7; }
.lens-report > * { animation: lensReportReveal 360ms both; }
.lens-report > *:nth-child(2) { animation-delay: 55ms; }
.lens-report > *:nth-child(3) { animation-delay: 110ms; }
.lens-report > *:nth-child(4) { animation-delay: 165ms; }
.lens-report > *:nth-child(n+5) { animation-delay: 220ms; }
@keyframes lensRobotFloat { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-7px) rotate(1deg); } }
@keyframes lensRobotPulse { 0% { transform: scale(.82); opacity: .8; } 100% { transform: scale(1.65); opacity: 0; } }
@keyframes lensProgressSpin { to { transform: rotate(360deg); } }
@keyframes lensProgressShimmer { to { background-position: -180% 0; } }
@keyframes lensReportReveal { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
body.lens-progress-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .lens-progress-robot img, .lens-progress-pulse, .lens-progress-track span, .lens-progress-timeline li.active .lens-progress-check, .lens-report > * { animation: none !important; }
  .lens-progress-modal, .lens-progress-panel, .lens-progress-timeline li, .lens-progress-track span { transition-duration: 1ms !important; }
}

/* ---- Account deletion (Settings danger zone + confirm modal) ------------- */
.profile-action-panel.danger-zone {
  border: 1px solid rgba(214, 40, 57, .34);
  background: linear-gradient(135deg, rgba(214,40,57,.06), rgba(214,40,57,.02));
  border-radius: 18px;
  padding: 16px;
  margin-top: 12px;
}
.profile-action-panel.danger-zone > span { color: #d62839; font-weight: 700; }
.danger-button {
  appearance: none;
  border: 1px solid rgba(214, 40, 57, .5);
  background: #d62839;
  color: #fff;
  font-weight: 700;
  padding: 10px 18px;
  border-radius: 999px;
  cursor: pointer;
  transition: filter .15s ease, transform .05s ease;
}
.danger-button:hover { filter: brightness(1.05); }
.danger-button:active { transform: translateY(1px); }
.danger-button:disabled { opacity: .5; cursor: not-allowed; }
.danger-link {
  display: inline-block;
  margin-top: 8px;
  margin-left: 12px;
  color: #d62839;
  font-weight: 600;
  font-size: .86rem;
}

.delete-account-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(16px, env(safe-area-inset-left)) 16px;
  background: rgba(3, 12, 27, .55);
  opacity: 0;
  transition: opacity .2s ease;
}
.delete-account-overlay.active { opacity: 1; }
.delete-account-card {
  width: min(480px, 100%);
  max-height: 88vh;
  overflow-y: auto;
  background: var(--surface, #fff);
  color: var(--text, #0b2a5b);
  border-radius: 22px;
  border: 1px solid rgba(214, 40, 57, .28);
  box-shadow: 0 30px 90px rgba(4, 21, 48, .32);
  padding: 24px;
  transform: translateY(10px) scale(.98);
  transition: transform .2s ease;
}
.delete-account-overlay.active .delete-account-card { transform: none; }
.delete-account-card h2 { margin: 0 0 10px; color: #d62839; font-size: 1.24rem; }
.delete-account-lead { margin: 0 0 12px; font-size: .95rem; line-height: 1.5; }
.delete-account-list { margin: 0 0 12px; padding-left: 20px; font-size: .9rem; line-height: 1.55; }
.delete-account-note { margin: 0 0 16px; font-size: .82rem; opacity: .8; line-height: 1.5; }
.delete-account-note a, .delete-account-lead a { color: #d62839; font-weight: 600; }
.delete-account-confirm { display: block; font-size: .86rem; margin-bottom: 6px; }
#deleteAccountConfirmInput {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(11, 42, 91, .28);
  background: rgba(255,255,255,.9);
  color: #0b2a5b;
  font-size: 1rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.delete-account-status { min-height: 18px; margin: 10px 0 0; color: #d62839; font-size: .85rem; }
.delete-account-actions { display: flex; gap: 12px; justify-content: flex-end; margin-top: 18px; }

@media (prefers-color-scheme: dark) {
  .delete-account-card { background: #0f1d33; color: #e8f0ff; }
  #deleteAccountConfirmInput { background: rgba(255,255,255,.06); color: #e8f0ff; border-color: rgba(255,255,255,.18); }
}
:root[data-theme="dark"] .delete-account-card { background: #0f1d33; color: #e8f0ff; }
:root[data-theme="dark"] #deleteAccountConfirmInput { background: rgba(255,255,255,.06); color: #e8f0ff; border-color: rgba(255,255,255,.18); }

/* MedDex Lens — Ultra-Smooth 60fps Image Comparison Slider */
.lens-compare-slider {
  position: absolute;
  inset: 0;
  pointer-events: auto;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  z-index: 10;
  overflow: hidden;
  border-radius: inherit;
}
.lens-compare-slider.hidden {
  display: none !important;
}
.lens-compare-clip {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 50%;
  overflow: hidden;
  border-right: 2px solid #38bdf8;
  box-shadow: 4px 0 20px rgba(0, 0, 0, 0.5);
  will-change: width;
}
.lens-compare-clip img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}
.lens-slider-divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: #38bdf8;
  transform: translateX(-50%);
  pointer-events: auto;
  touch-action: none;
  cursor: ew-resize;
  z-index: 12;
  will-change: left;
}
.lens-slider-handle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 46px;
  height: 46px;
  margin-left: -23px;
  margin-top: -23px;
  border-radius: 50%;
  background: #0284c7;
  border: 2.5px solid #ffffff;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6), 0 0 0 6px rgba(56, 189, 248, 0.35);
  touch-action: none;
  cursor: ew-resize;
  outline: none;
  will-change: transform;
  transition: transform 120ms ease, box-shadow 120ms ease;
}
/* Generous 60px touch target area for mobile & desktop gestures */
.lens-slider-handle::before {
  content: "";
  position: absolute;
  top: -24px;
  bottom: -24px;
  left: -24px;
  right: -24px;
  border-radius: 50%;
  pointer-events: auto;
}
.lens-slider-handle:hover,
.lens-slider-handle:focus-visible,
.lens-slider-handle.is-dragging {
  transform: scale(1.18);
  background: #0369a1;
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.8), 0 0 0 10px rgba(56, 189, 248, 0.5);
}

/* =====================================================================
   Native Android Capacitor Viewport & Modal Positioning Overrides
   ===================================================================== */
:root.capacitor-native .auth-modal,
:root.capacitor-native .email-auth-modal,
:root.capacitor-native .profile-modal,
:root.capacitor-native .deck-unlock-modal {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  z-index: 30000 !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding-top: max(16px, env(safe-area-inset-top)) !important;
  padding-bottom: max(16px, env(safe-area-inset-bottom)) !important;
  padding-left: max(16px, env(safe-area-inset-left)) !important;
  padding-right: max(16px, env(safe-area-inset-right)) !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

:root.capacitor-native .auth-modal-card,
:root.capacitor-native .email-auth-card,
:root.capacitor-native .profile-modal-card,
:root.capacitor-native .deck-unlock-card {
  position: relative !important;
  width: min(430px, calc(100vw - 32px)) !important;
  max-height: calc(100dvh - max(32px, env(safe-area-inset-top) + env(safe-area-inset-bottom))) !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  transform: none !important;
  margin: auto !important;
}

body.keyboard-open .auth-modal,
body.keyboard-open .email-auth-modal,
body.keyboard-open .profile-modal {
  align-items: flex-start !important;
  padding-top: max(12px, env(safe-area-inset-top)) !important;
}

body.keyboard-open .auth-modal-card,
body.keyboard-open .email-auth-card {
  max-height: calc(55dvh) !important;
}