:root {
  color-scheme: light;
  --page: #f4f7fb;
  --surface: #ffffff;
  --surface-soft: #f8fbff;
  --surface-muted: #eef4fb;
  --ink: #0f2340;
  --ink-2: #223a5a;
  --muted: #6f8198;
  --line: #dfe8f2;
  --line-strong: #cbd9e8;
  --blue: #0878ff;
  --blue-dark: #0b5fd5;
  --cyan: #06aee8;
  --teal: #0db9a3;
  --green: #23b66f;
  --amber: #f2a51a;
  --red: #e34f5f;
  --violet: #7765e8;
  --navy: #071f35;
  --shadow-sm: 0 8px 24px rgba(25, 54, 88, .08);
  --shadow-md: 0 18px 46px rgba(25, 54, 88, .12);
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --header-h: 70px;
  --sidebar-w: 220px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background: var(--page);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow-x: hidden;
}
button, input, textarea, select { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 3px solid rgba(8,120,255,.2);
  outline-offset: 2px;
}
button:disabled { opacity: .55; cursor: not-allowed; }
a { color: inherit; }
.hidden { display: none !important; }
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ---------- Global header ---------- */
.global-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 80;
  height: var(--header-h);
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr) auto;
  align-items: center;
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(14px);
}
.header-brand-wrap {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 20px 0 26px;
  border-right: 1px solid var(--line);
}
.new-brand { text-decoration: none; line-height: 1; }
.new-brand-name { display: block; font-size: 25px; font-weight: 900; letter-spacing: -.05em; color: var(--navy); }
.new-brand-name span { color: var(--blue); }
.new-brand small { display: block; margin-top: 5px; font-size: 9px; color: var(--muted); letter-spacing: .02em; }
.mobile-menu-button { display: none; border: 0; background: transparent; font-size: 22px; cursor: pointer; }
.top-nav { display: flex; align-items: center; gap: 4px; padding: 0 24px; }
.top-nav-item {
  min-height: 38px;
  padding: 0 15px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ink-2);
  font-weight: 700;
  cursor: pointer;
}
.top-nav-item:hover { background: #f3f7fb; }
.top-nav-item.active { color: var(--blue-dark); background: #eaf3ff; }
.header-actions { display: flex; align-items: center; gap: 14px; padding-right: 24px; }
.header-connection {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}
.connection-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); }
.header-connection[data-online="true"] .connection-dot { background: var(--green); box-shadow: 0 0 0 4px rgba(35,182,111,.11); }
.profile-button { display: flex; align-items: center; gap: 9px; border: 0; background: transparent; cursor: pointer; }
.profile-avatar { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #0b55ba; color: #fff; font-weight: 900; }
.profile-copy { text-align: left; line-height: 1.15; }
.profile-copy small, .profile-copy strong { display: block; }
.profile-copy small { font-size: 9px; color: var(--muted); }
.profile-copy strong { margin-top: 3px; font-size: 12px; }

/* ---------- Sidebar ---------- */
.app-sidebar {
  position: fixed;
  z-index: 70;
  top: var(--header-h);
  bottom: 0;
  left: 0;
  width: var(--sidebar-w);
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--line);
  background: #fff;
}
.sidebar-scroll { flex: 1; overflow: auto; padding: 18px 12px 12px; }
.sidebar-label { margin: 18px 10px 8px; color: #9aa8b9; font-size: 9px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.sidebar-home, .sidebar-mode, .sidebar-action {
  width: 100%;
  min-height: 46px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 11px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: #304966;
  text-align: left;
  cursor: pointer;
  transition: background .16s ease, color .16s ease, transform .16s ease;
}
.sidebar-home:hover, .sidebar-mode:hover, .sidebar-action:hover { background: #f3f7fc; transform: none; }
.sidebar-home.active, .sidebar-mode.active { color: #fff; background: linear-gradient(135deg, #097cff, #126fe3); box-shadow: 0 8px 18px rgba(8,120,255,.18); }
.sidebar-icon { width: 30px; min-width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; font-size: 14px; font-weight: 900; background: rgba(8,120,255,.07); }
.sidebar-home.active .sidebar-icon, .sidebar-mode.active .sidebar-icon { background: rgba(255,255,255,.15); }
.sidebar-mode strong, .sidebar-mode small, .sidebar-action strong, .sidebar-action small { display: block; }
.sidebar-mode strong, .sidebar-action strong { font-size: 12px; }
.sidebar-mode small, .sidebar-action small { margin-top: 2px; color: #8a9bb0; font-size: 9px; font-weight: 500; }
.sidebar-mode.active small { color: rgba(255,255,255,.8); }
.sidebar-footer-card { margin: 10px 12px; padding: 12px; display: flex; align-items: center; gap: 11px; border: 1px solid var(--line); border-radius: 14px; background: #f8fbff; }
.mini-progress-ring { --p: 0; width: 46px; height: 46px; display: grid; place-items: center; flex: 0 0 46px; border-radius: 50%; background: conic-gradient(var(--teal) calc(var(--p) * 1%), #dce7f1 0); position: relative; }
.mini-progress-ring::after { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: #fff; }
.mini-progress-ring strong { position: relative; z-index: 1; font-size: 10px; }
.sidebar-footer-card small, .sidebar-footer-card strong { display: block; }
.sidebar-footer-card small { color: var(--muted); font-size: 9px; }
.sidebar-footer-card strong { margin-top: 3px; font-size: 10px; }
.sidebar-brand { padding: 14px 18px 18px; color: var(--navy); font-weight: 900; font-size: 13px; }
.sidebar-brand span { color: var(--blue); }
.sidebar-brand small { display: block; margin-top: 4px; color: var(--muted); font-size: 8px; font-weight: 600; }

/* ---------- Main ---------- */
.main-area { margin-left: var(--sidebar-w); padding: calc(var(--header-h) + 22px) 22px 0; min-height: 100vh; }
.dashboard-panel, .trainer-workspace, .new-footer { width: min(1280px, 100%); margin-inline: auto; }
body.training-view #dashboardPanel { display: none; }
body.dashboard-view #trainerWorkspace { display: none; }

/* ---------- Dashboard ---------- */
.dashboard-hero {
  min-height: 224px;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 20px;
  padding: 34px 36px;
  border-radius: var(--radius-lg);
  color: #fff;
  overflow: hidden;
  position: relative;
  background:
    radial-gradient(circle at 77% 20%, rgba(30,151,255,.28), transparent 28%),
    radial-gradient(circle at 84% 88%, rgba(8,192,190,.18), transparent 26%),
    linear-gradient(115deg, #071d31 0%, #0b2e4b 62%, #123f5e 100%);
  box-shadow: var(--shadow-md);
}
.dashboard-hero::before, .dashboard-hero::after { content: ""; position: absolute; border-radius: 50%; border: 1px solid rgba(255,255,255,.08); }
.dashboard-hero::before { width: 360px; height: 360px; right: -110px; top: -170px; }
.dashboard-hero::after { width: 250px; height: 250px; right: 70px; bottom: -175px; }
.hero-content, .hero-quote { position: relative; z-index: 1; }
.hero-content { align-self: center; max-width: 650px; }
.hero-badge { display: inline-flex; padding: 6px 9px; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; background: rgba(255,255,255,.08); color: #b8dcff; font-size: 9px; font-weight: 900; letter-spacing: .14em; }
.dashboard-hero h1 { margin: 13px 0 9px; font-size: clamp(29px, 4vw, 44px); line-height: 1.03; letter-spacing: -.045em; }
.dashboard-hero p { margin: 0; color: #c5d4e5; font-size: 15px; line-height: 1.65; }
.hero-cta-row { display: flex; gap: 10px; margin-top: 24px; }
.new-primary, .hero-secondary { min-height: 44px; padding: 0 18px; border-radius: 11px; font-weight: 850; cursor: pointer; }
.new-primary { border: 0; color: #fff; background: linear-gradient(135deg, #0d8bff, #0870ea); box-shadow: 0 10px 24px rgba(4,128,255,.25); }
.hero-secondary { border: 1px solid rgba(255,255,255,.36); color: #fff; background: rgba(255,255,255,.04); }
.hero-quote { align-self: flex-end; display: flex; align-items: center; gap: 12px; min-width: 170px; margin: 0 18px 6px 0; }
.hero-quote-line { width: 3px; height: 50px; border-radius: 3px; background: var(--cyan); }
.hero-quote p { font-size: 13px; color: #fff; }
.section-heading-row { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin: 22px 2px 10px; }
.section-heading-row h2 { margin: 0; font-size: 20px; letter-spacing: -.02em; }
.section-heading-row p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.text-button, .small-link { border: 0; background: transparent; color: var(--blue-dark); font-size: 11px; font-weight: 800; cursor: pointer; }
.module-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.module-card {
  min-height: 182px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 17px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #fff;
  box-shadow: var(--shadow-sm);
  text-align: left;
  cursor: pointer;
}
.module-card:hover { transform: translateY(-2px); border-color: #bfd6ef; box-shadow: 0 14px 30px rgba(25,54,88,.1); }
.module-icon { width: 40px; height: 40px; display: grid; place-items: center; margin-bottom: 12px; border-radius: 12px; font-size: 17px; font-weight: 900; }
.module-icon.blue { color: #0878ff; background: #eaf3ff; }
.module-icon.cyan { color: #039dca; background: #e6f9ff; }
.module-icon.teal { color: #0b9d8b; background: #e8faf7; }
.module-icon.violet { color: #6d56de; background: #f0ecff; }
.module-icon.amber { color: #d28a07; background: #fff6df; }
.module-card strong { font-size: 13px; }
.module-card p { flex: 1; margin: 7px 0 14px; color: var(--muted); font-size: 10.5px; line-height: 1.55; }
.module-link { color: var(--blue-dark); font-size: 10px; font-weight: 850; }
.dashboard-lower-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(280px, .8fr); gap: 12px; margin-top: 14px; }
.dashboard-card { padding: 18px; border: 1px solid var(--line); border-radius: var(--radius-md); background: #fff; box-shadow: var(--shadow-sm); }
.card-title-row { display: flex; justify-content: space-between; align-items: start; gap: 16px; }
.card-title-row h3 { margin: 0; font-size: 14px; }
.card-title-row p { margin: 3px 0 0; color: var(--muted); font-size: 9.5px; }
.progress-summary { display: grid; grid-template-columns: 130px repeat(4, minmax(80px, 1fr)); align-items: center; gap: 8px; margin-top: 12px; }
.large-progress-ring { --p: 0; width: 108px; height: 108px; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(var(--teal) calc(var(--p) * 1%), #e4edf5 0); position: relative; }
.large-progress-ring::after { content: ""; position: absolute; inset: 10px; border-radius: 50%; background: #fff; }
.large-progress-ring > div { position: relative; z-index: 1; text-align: center; }
.large-progress-ring strong, .large-progress-ring span { display: block; }
.large-progress-ring strong { font-size: 22px; }
.large-progress-ring span { margin-top: 1px; color: var(--muted); font-size: 8px; }
.metric { min-height: 64px; padding-left: 14px; border-left: 1px solid var(--line); }
.metric strong, .metric span { display: block; }
.metric strong { font-size: 20px; }
.metric span { margin-top: 5px; color: var(--muted); font-size: 9px; }
.quick-actions-card { grid-column: 2; grid-row: 1 / span 2; }
.quick-action-list { display: grid; gap: 7px; margin-top: 13px; }
.quick-action-list button { min-height: 42px; display: flex; align-items: center; gap: 9px; padding: 0 11px; border: 1px solid transparent; border-radius: 10px; background: #f7faff; font-size: 10px; font-weight: 750; text-align: left; cursor: pointer; }
.quick-action-list button:hover { border-color: #cfe0f2; background: #f0f7ff; }
.quick-action-list button span { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 8px; color: var(--blue); background: #e7f2ff; font-weight: 900; }
.focus-card, .activity-card { min-height: 145px; }
.focus-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.focus-tag { padding: 7px 10px; border-radius: 999px; background: #eef5ff; color: #30618d; font-size: 9px; font-weight: 750; }
.focus-tag.strong { color: #9f4b3e; background: #fff0eb; }
.focus-tag.neutral { color: #61758d; background: #f1f4f7; }
.activity-list { display: grid; gap: 10px; margin-top: 13px; }
.activity-list > div { display: flex; align-items: center; gap: 10px; }
.activity-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 9px; }
.activity-dot.success { background: var(--green); }
.activity-dot.info { background: var(--blue); }
.activity-dot.warning { background: var(--amber); }
.activity-list strong, .activity-list small { display: block; }
.activity-list strong { font-size: 10px; }
.activity-list small { margin-top: 2px; color: var(--muted); font-size: 9px; }

/* ---------- Trainer shell ---------- */
.trainer-workspace { padding-bottom: 8px; }
.workspace-topline { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.back-dashboard { min-height: 38px; padding: 0 13px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink-2); font-weight: 800; cursor: pointer; }
.workspace-status { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 10px; }
.workspace-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.mode-content { border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; backdrop-filter: none !important; overflow: visible !important; }
.panel { display: none; color: var(--ink); }
.panel.active-panel { display: block; }
.panel-heading { margin-bottom: 12px; padding: 0 2px; }
.panel-heading h2 { margin-top: 4px; font-size: 25px; color: var(--ink); letter-spacing: -.03em; }
.eyebrow, .section-label, .side-label { color: var(--blue-dark) !important; }
.counter, .status-pill { color: #4d6380 !important; border-color: var(--line) !important; background: #fff !important; }
.study-card, .listening-card, .review-card, .dictation-card, .weakness-card, .foundation-intro-card, .foundation-audio-toolbar, .foundation-lesson, .score-strip, .speaking-trainer {
  border: 1px solid var(--line) !important;
  color: var(--ink) !important;
  background: #fff !important;
  box-shadow: var(--shadow-sm) !important;
  backdrop-filter: none !important;
}
.study-card, .listening-card, .review-card, .dictation-card { border-radius: var(--radius-lg) !important; }
.helper, .tiny-note, .task-mode-note, .foundation-audio-status, .foundation-intro-card p, .panel p { color: var(--muted); }
.progress-track { background: #e7eef6 !important; }
.progress-fill { background: linear-gradient(90deg, var(--blue), var(--teal)) !important; }
.primary { color: #fff !important; background: linear-gradient(135deg, #0b85ff, #086ee4) !important; box-shadow: 0 8px 20px rgba(8,120,255,.16) !important; }
.secondary, .ghost, .play-button, .mini-btn { color: var(--ink-2) !important; border: 1px solid var(--line) !important; background: #f7faff !important; }
.secondary:hover, .ghost:hover, .play-button:hover, .mini-btn:hover { border-color: #bcd2e9 !important; background: #eef6ff !important; }
.input-block input, .input-block textarea, .local-ai-form textarea, select {
  color: var(--ink) !important;
  border: 1px solid var(--line-strong) !important;
  background: #fff !important;
}
.input-block input::placeholder, .input-block textarea::placeholder, textarea::placeholder { color: #a4b0c0; }
.listen-orb { background: linear-gradient(135deg, #e9f4ff, #ecfbff) !important; color: var(--blue) !important; border: 1px solid #d6e8fa; box-shadow: none !important; }
.foundation-stage { color: var(--ink-2) !important; border-color: var(--line) !important; background: #fff !important; }
.foundation-stage.active { border-color: #9cc9fa !important; background: #eef7ff !important; }
.foundation-line { background: #dce7f2 !important; }
.result-card { border-color: var(--line) !important; background: #f8fbff !important; color: var(--ink) !important; }
.result-card.correct { border-color: #aee4c8 !important; background: #effcf5 !important; }
.result-card.wrong { border-color: #f1b9c1 !important; background: #fff3f5 !important; }
.speaking-word-box, .speech-analysis, .speaking-spelling-review, .recording-playback, .task-mode-note, .voice-speed-control, .foundation-teach-box, .foundation-rule, .foundation-example, .foundation-mini, .child-guide-card, .mistake-guide, .spelling-lesson, .dictation-result, .dictation-answer-block, .dictation-diagnosis {
  color: var(--ink) !important;
  border-color: var(--line) !important;
  background: #f8fbff !important;
}
.speaking-word-box strong, .foundation-lesson h3, .foundation-lesson h4, .review-question strong { color: var(--ink) !important; }
.foundation-layout { grid-template-columns: 225px minmax(0,1fr) !important; }
.foundation-levels { border-color: var(--line) !important; background: #fff !important; }
.foundation-level-btn { color: var(--ink-2) !important; border-color: transparent !important; background: transparent !important; }
.foundation-level-btn:hover { background: #f3f8fd !important; }
.foundation-level-btn.active { color: #fff !important; background: linear-gradient(135deg,#0b85ff,#086ee4) !important; }
.weakness-summary { gap: 10px; }
.weakness-column { border-color: var(--line) !important; background: #f8fbff !important; }
.weakness-column li { border-color: var(--line) !important; }
.dictation-stats > div { border-color: var(--line) !important; background: #f8fbff !important; }

/* ---------- Floating AI ---------- */
.ai-layer { position: fixed; z-index: 110; right: 22px; bottom: 22px; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; pointer-events: none; }
.floating-chat, .floating-chat-button { pointer-events: auto; }
.floating-chat {
  width: min(390px, calc(100vw - 32px));
  height: min(650px, calc(100vh - 105px));
  display: grid;
  grid-template-rows: auto auto minmax(0,1fr) auto auto auto;
  border: 1px solid #d8e3ee;
  border-radius: 20px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 30px 80px rgba(17,42,73,.24);
  opacity: 0;
  transform: translateY(18px) scale(.98);
  transform-origin: bottom right;
  visibility: hidden;
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}
.floating-chat.open { opacity: 1; transform: translateY(0) scale(1); visibility: visible; }
.chat-header { min-height: 66px; display: grid; grid-template-columns: 42px minmax(0,1fr) 34px 34px; align-items: center; gap: 7px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.chat-avatar { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: linear-gradient(135deg,#0878ff,#0aa9d8); box-shadow: 0 6px 14px rgba(8,120,255,.2); }
.chat-title strong { display: block; font-size: 13px; }
.chat-connection { display: flex; align-items: center; gap: 5px; margin-top: 3px; color: var(--muted); font-size: 8.5px; }
.status-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--amber); box-shadow: none; }
.status-dot.online { background: var(--green) !important; box-shadow: 0 0 0 3px rgba(35,182,111,.1) !important; }
.status-dot.offline { background: var(--amber) !important; }
.chat-icon-button { width: 32px; height: 32px; border: 0; border-radius: 9px; background: transparent; color: #5f748d; font-size: 17px; cursor: pointer; }
.chat-icon-button:hover { background: #f2f6fa; transform: none; }
.chat-status-strip { display: flex; align-items: center; gap: 6px; padding: 7px 13px; border-bottom: 1px solid #edf2f7; background: #f8fbff; font-size: 8.5px; color: var(--muted); }
.chat-status-strip strong { color: var(--ink-2); }
.chat-status-strip #localAiStatusText { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.local-ai-chat.chat-message-list { display: flex; flex-direction: column; gap: 10px; min-height: 0; max-height: none; margin: 0; padding: 14px; overflow: auto; background: #fff; }
.local-ai-message { width: fit-content; max-width: 86%; display: grid; gap: 3px; padding: 10px 12px; border: 1px solid #e4ebf2; border-radius: 14px 14px 14px 4px; background: #f3f6fa; color: var(--ink-2); font-size: 10.5px; line-height: 1.55; }
.local-ai-message strong { font-size: 8.5px; color: #6d7f93; }
.local-ai-message.user { align-self: flex-end; border-color: #0b80f8; border-radius: 14px 14px 4px 14px; background: linear-gradient(135deg,#0b84ff,#0872e8); color: #fff; }
.local-ai-message.user strong { color: rgba(255,255,255,.75); }
.chat-suggestions { display: flex; gap: 6px; overflow-x: auto; padding: 8px 12px 4px; border-top: 1px solid #edf2f7; scrollbar-width: none; }
.chat-suggestions::-webkit-scrollbar { display: none; }
.chat-suggestions button { flex: 0 0 auto; min-height: 30px; padding: 0 10px; border: 1px solid #cddff2; border-radius: 999px; background: #fff; color: #1767bd; font-size: 8.5px; font-weight: 750; cursor: pointer; }
.chat-form.local-ai-form { display: grid; grid-template-columns: minmax(0,1fr) 38px; align-items: end; gap: 7px; margin: 0; padding: 8px 11px 6px; }
.chat-form textarea { width: 100%; min-height: 40px; max-height: 105px; resize: none; padding: 10px 12px; border-radius: 12px !important; line-height: 1.4; }
.chat-send { width: 38px; height: 38px; border: 0; border-radius: 50%; color: #fff; background: var(--blue); font-weight: 900; cursor: pointer; }
.chat-disclaimer { margin: 0; padding: 0 12px 10px; color: #9aa7b6; font-size: 7.5px; text-align: center; }
.floating-chat-button { min-height: 52px; display: flex; align-items: center; gap: 9px; padding: 0 12px 0 8px; border: 0; border-radius: 999px; color: #fff; background: #08243f; box-shadow: 0 14px 34px rgba(17,42,73,.22); cursor: pointer; }
.chat-button-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(135deg,#0b89ff,#0870e8); font-size: 16px; }
.chat-button-label { font-size: 10px; font-weight: 800; }
.chat-online-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }

/* ---------- Footer ---------- */
.new-footer { min-height: 54px; display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 20px; margin-top: 20px; padding: 0 4px 12px; color: var(--muted); font-size: 9px; }
.new-footer strong { color: var(--navy); font-size: 13px; }
.new-footer strong span { color: var(--blue); }
.new-footer p { margin: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 1120px) {
  .module-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .dashboard-lower-grid { grid-template-columns: 1fr; }
  .quick-actions-card { grid-column: auto; grid-row: auto; }
  .progress-summary { grid-template-columns: 120px repeat(2,minmax(90px,1fr)); }
  .metric:nth-of-type(4), .metric:nth-of-type(5) { margin-top: 4px; }
  .hero-quote { display: none; }
}

@media (max-width: 900px) {
  :root { --sidebar-w: 0px; }
  .global-header { grid-template-columns: minmax(190px,auto) 1fr auto; }
  .header-brand-wrap { border-right: 0; padding-left: 14px; }
  .mobile-menu-button { display: block; }
  .top-nav { justify-self: center; padding: 0 8px; }
  .top-nav-item:nth-child(2), .top-nav-item:nth-child(3) { display: none; }
  .app-sidebar { width: 238px; transform: translateX(-102%); transition: transform .2s ease; box-shadow: 20px 0 50px rgba(20,45,75,.16); }
  body.sidebar-open .app-sidebar { transform: translateX(0); }
  .mobile-backdrop { position: fixed; z-index: 65; inset: var(--header-h) 0 0 0; background: rgba(7,24,42,.34); }
  body.sidebar-open .mobile-backdrop { display: block !important; }
  .main-area { margin-left: 0; }
  .module-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .foundation-layout { grid-template-columns: 1fr !important; }
  .foundation-levels { position: static !important; max-height: 230px; }
}

@media (max-width: 650px) {
  :root { --header-h: 62px; }
  .global-header { grid-template-columns: 1fr auto; }
  .top-nav { display: none; }
  .header-actions { padding-right: 10px; }
  .header-connection { display: none; }
  .profile-copy { display: none; }
  .profile-avatar { width: 33px; height: 33px; }
  .new-brand-name { font-size: 21px; }
  .new-brand small { display: none; }
  .main-area { padding: calc(var(--header-h) + 12px) 10px 0; }
  .dashboard-hero { min-height: 210px; padding: 24px 20px; border-radius: 18px; }
  .dashboard-hero h1 { font-size: 30px; }
  .dashboard-hero p { font-size: 12px; }
  .hero-cta-row { flex-wrap: wrap; }
  .section-heading-row { align-items: start; }
  .text-button { display: none; }
  .module-grid { grid-template-columns: 1fr; }
  .module-card { min-height: 132px; display: grid; grid-template-columns: 44px minmax(0,1fr); grid-template-rows: auto auto auto; column-gap: 10px; }
  .module-icon { grid-row: 1 / span 3; margin: 0; }
  .module-card strong { align-self: end; }
  .module-card p { margin: 4px 0 8px; }
  .progress-summary { grid-template-columns: 1fr 1fr; }
  .large-progress-ring { grid-column: 1 / -1; justify-self: center; }
  .metric { border-left: 0; border-top: 1px solid var(--line); padding: 10px 0 0; }
  .workspace-topline { align-items: flex-start; }
  .workspace-status { display: none; }
  .panel-heading { align-items: flex-start !important; }
  .panel-heading h2 { font-size: 21px; }
  .study-card, .listening-card, .review-card, .dictation-card { padding: 18px !important; border-radius: 16px !important; }
  .settings-grid, .dictation-stats { grid-template-columns: 1fr !important; }
  .foundation-audio-toolbar { align-items: stretch !important; }
  .foundation-audio-controls { flex-direction: column; align-items: stretch !important; }
  .ai-layer { right: 10px; bottom: 10px; left: 10px; align-items: stretch; }
  .floating-chat { width: 100%; height: calc(100vh - 84px); border-radius: 18px; }
  .floating-chat-button { align-self: flex-end; min-width: 50px; padding-right: 8px; }
  .chat-button-label { display: none; }
  .new-footer { grid-template-columns: 1fr auto; }
  .new-footer p { display: none; }
}

/* ---------- Full Redesign V2 additions ---------- */
.header-center {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(180px, 340px);
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding-right: 18px;
}
.global-search {
  min-width: 0;
  height: 38px;
  display: grid;
  grid-template-columns: 24px minmax(0,1fr);
  align-items: center;
  gap: 5px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #f9fbfe;
  color: #7c8ea5;
}
.global-search:focus-within {
  border-color: #a8cdf7;
  box-shadow: 0 0 0 4px rgba(8,120,255,.08);
  background: #fff;
}
.global-search input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font-size: 11px;
}
.global-search input::placeholder { color: #9aa9bb; }
.module-card.search-hidden { display: none; }
.module-card.search-match {
  border-color: #9fc9f8;
  box-shadow: 0 12px 30px rgba(8,120,255,.13);
}
.recent-card, .streak-card { min-height: 160px; }
.recent-activity { display: grid; gap: 8px; margin-top: 12px; }
.recent-row {
  display: grid;
  grid-template-columns: 28px minmax(0,1fr) auto;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  padding: 7px 9px;
  border-radius: 10px;
  background: #f8fbff;
}
.recent-row .recent-icon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #e7f4ff;
  color: var(--blue-dark);
  font-size: 11px;
  font-weight: 900;
}
.recent-row strong, .recent-row small { display: block; }
.recent-row strong { font-size: 10px; }
.recent-row small { margin-top: 2px; color: var(--muted); font-size: 8.5px; }
.recent-row time { color: #9aaaBC; font-size: 8px; white-space: nowrap; }
.recent-empty {
  min-height: 92px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 6px;
  color: var(--muted);
  text-align: center;
}
.recent-empty span {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #e9f8f1;
  color: var(--green);
  font-weight: 900;
}
.recent-empty p { margin: 0; font-size: 9px; }
.streak-body {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}
.streak-flame {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: #fff4df;
  font-size: 24px;
}
.streak-body strong, .streak-body span { display: block; }
.streak-body strong { font-size: 24px; line-height: 1; }
.streak-body span { margin-top: 4px; color: var(--muted); font-size: 9px; }
.streak-week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin-top: 16px;
}
.streak-day { display: grid; justify-items: center; gap: 4px; color: #91a0b3; font-size: 7px; font-weight: 800; }
.streak-day i {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #edf2f7;
  color: #b4c0cc;
  font-style: normal;
}
.streak-day.active i { background: #e8f8f1; color: var(--green); }
.floating-chat-button[data-online="false"] .chat-online-dot { background: var(--amber); }
.floating-chat-button[data-online="true"] .chat-online-dot { background: var(--green); }
.floating-chat-button[data-online="false"] .chat-button-label::after { content: " · offline"; color: #f3c06a; font-weight: 700; }
.floating-chat-button[data-online="true"] .chat-button-label::after { content: " · connected"; color: #8ee3b5; font-weight: 700; }

@media (max-width: 1180px) {
  .header-center { grid-template-columns: 1fr auto; gap: 8px; }
  .global-search { width: 210px; }
}
@media (max-width: 980px) {
  .global-search { display: none; }
}
@media (max-width: 900px) {
  .header-center { display: block; padding-right: 0; }
}
@media (max-width: 650px) {
  .recent-row { grid-template-columns: 28px minmax(0,1fr); }
  .recent-row time { grid-column: 2; }
  .streak-week { gap: 4px; }
  .streak-day i { width: 20px; height: 20px; }
}

/* ---------- AmitTools site navigation ---------- */
.top-nav-dropdown { position: relative; }
.top-nav-tools span { margin-left: 3px; font-size: 9px; }
.tools-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 80;
  width: 230px;
  display: none;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 18px 45px rgba(20,45,75,.16);
}
.tools-menu.open { display: grid; gap: 4px; }
.tools-menu a {
  display: block;
  padding: 10px 11px;
  border-radius: 10px;
  color: var(--ink);
  text-decoration: none;
}
.tools-menu a:hover, .tools-menu a:focus-visible { background: #f2f7fd; outline: 0; }
.tools-menu strong, .tools-menu small { display: block; }
.tools-menu strong { font-size: 11px; }
.tools-menu small { margin-top: 3px; color: var(--muted); font-size: 8.5px; }
.sidebar-link { width: 100%; text-decoration: none; color: inherit; box-sizing: border-box; }
.sidebar-link .sidebar-icon { font-size: 8px; letter-spacing: -.2px; }
.sidebar-label-apps { margin-top: 14px; }
@media (max-width: 900px) {
  .top-nav-dropdown { display: none; }
}