/* English Practice — mobile-first */
* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* === STUDIO design tokens === */
  /* Warm charcoal surfaces — tactile, not glassy */
  --ink-0: #08070A;   /* deepest — only for body */
  --ink-1: #100E0C;   /* base surface */
  --ink-2: #181513;   /* raised surface */
  --ink-3: #221E1B;   /* pressed / hover */
  --ink-4: #2B2624;   /* divider strong */

  /* Text — warm bone, not blue */
  --ice-0: #F2EDE5;   /* primary text */
  --ice-1: #B5AEA3;   /* secondary text */
  --ice-2: #7A736A;   /* tertiary / labels */
  --ice-3: #4A453F;   /* disabled */

  /* Single accent — ember orange. Used ONLY for active state and primary CTA. */
  --ember:       #FF6A2C;
  --ember-soft:  #E2521A;
  --ember-fade:  rgba(255,106,44,0.14);
  --ember-line:  rgba(255,106,44,0.32);

  /* Signals — muted, never neon */
  --moss:        #7FA37A;   /* success / acerto */
  --moss-soft:   rgba(127,163,122,0.16);
  --mustard:     #E8C547;   /* correction / warn */
  --mustard-soft: rgba(232,197,71,0.14);
  --rust:        #C2553A;   /* error / record */
  --rust-soft:   rgba(194,85,58,0.16);

  /* Radii — only two, both modest */
  --r-sm: 6px;
  --r-md: 14px;
  --r-lg: 14px;   /* alias to md — kill XL */
  --r-xl: 14px;   /* alias to md — kill XL */

  /* Shadows — flat, no color */
  --shadow-1: 0 1px 0 rgba(0,0,0,0.4);
  --shadow-2: 0 8px 24px rgba(0,0,0,0.5);

  /* Motion */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --t-fast: 160ms;
  --t-base: 240ms;

  /* === legacy aliases (kept so untouched screens still render until they get redesigned) === */
  --bg:         var(--ink-1);
  --bg-soft:    var(--ink-2);
  --bg-elev:    rgba(242,237,229,0.03);
  --bg-elev-hi: rgba(242,237,229,0.06);
  --border:     rgba(242,237,229,0.06);
  --border-hi:  rgba(242,237,229,0.12);
  --text:       var(--ice-0);
  --text-dim:   var(--ice-1);
  --text-faint: var(--ice-2);
  --accent:      var(--ember);
  --accent-2:    var(--mustard);
  --accent-dim:  var(--ember-fade);
  --accent-glow: none;            /* glow is dead */
  --user:        var(--ember);
  --record:      var(--rust);
  --listen:      var(--rust);
  --thinking:    var(--ember);
  --speaking:    var(--moss);
  --idle:        var(--ice-2);
  --warn:        var(--mustard);
  --ok:          var(--moss);
  --c-amber:     var(--mustard);
  --c-clay:      var(--ember-soft);
  --c-sage:      var(--moss);
  --c-rust:      var(--rust);
  --c-moss:      var(--moss);
  --c-sand:      var(--ice-2);

  /* === legacy violet aliases — point at ember so old `--volt-*` references just work === */
  --volt:        var(--ember);
  --volt-soft:   var(--ember-soft);
  --volt-fade:   var(--ember-fade);
  --volt-glow:   none;
  --mint:        var(--moss);
  --mint-soft:   var(--moss-soft);
  --coral:       var(--rust);
  --coral-soft:  var(--rust-soft);
  --gold:        var(--mustard);
  --gold-soft:   var(--mustard-soft);
}

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  color: var(--ice-0);
  background: var(--ink-1);
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  overscroll-behavior: none;
  letter-spacing: -0.01em;
  font-feature-settings: "ss01", "cv11", "tnum";
}

/* ============ HOME VIEW ============ */
.home-view {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  width: 100vw;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.home-view[hidden] { display: none; }

.home-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 18px 8px;
  padding-top: max(18px, env(safe-area-inset-top));
}
.home-brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand-mark {
  width: 36px; height: 36px;
  border-radius: var(--r-sm);
  background: var(--ember);
  flex-shrink: 0;
  position: relative;
}
.brand-mark::after {
  content: '';
  /* legacy slot — kept empty so old DOM doesn't break, but no decorative overlay */
}
.brand-mark::before {
  content: 'EP'; position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: var(--ink-0);
  letter-spacing: -0.5px;
}
.brand-title { font-size: 17px; font-weight: 700; color: var(--text); letter-spacing: -0.02em; }
.brand-sub { font-size: 12px; color: var(--text-dim); margin-top: 1px; }
.home-top-actions { display: flex; gap: 6px; }

.home-content {
  flex: 1;
  padding: 8px 18px max(24px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 26px;
  max-width: 760px;
  width: 100%;
  margin: 0 auto;
}

.home-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 8px;
}
.hstat {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 8px;
  text-align: center;
  transition: border-color .2s, transform .2s;
}
.hstat:hover { border-color: var(--border-hi); }
.hstat-v {
  font-size: 22px; font-weight: 700; color: var(--text);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.hstat-l {
  font-size: 10px; text-transform: uppercase; letter-spacing: 1.5px;
  color: var(--text-faint); margin-top: 4px;
  font-weight: 500;
}

.home-section { display: flex; flex-direction: column; gap: 14px; }
.home-section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 0 2px;
}
.home-section-head h2 {
  font-size: 14px; font-weight: 600; color: var(--text);
  letter-spacing: -0.01em;
}
.home-section-hint {
  font-size: 11px; color: var(--text-faint);
  text-transform: uppercase; letter-spacing: 1.4px;
}

.mode-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
@media (min-width: 520px) {
  .mode-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
}
@media (min-width: 760px) {
  .mode-grid { grid-template-columns: 1fr 1fr 1fr; }
}

.mode-card {
  position: relative;
  display: flex;
  flex-direction: column;
  text-align: left;
  gap: 6px;
  padding: 18px 18px 16px;
  background: var(--ink-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  cursor: pointer;
  font-family: inherit;
  color: var(--text);
  transition: transform .15s ease, border-color .2s, box-shadow .2s, background .2s;
  overflow: hidden;
  min-height: 130px;
}
.mode-card::before {
  content: ''; position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  opacity: 0;
  transition: opacity .25s;
}
.mode-card::before { opacity: 0.7; }
.mode-card[data-accent="orange"]::before { background: var(--c-clay); }
.mode-card[data-accent="blue"]::before { background: var(--c-sand); }
.mode-card[data-accent="green"]::before { background: var(--c-moss); }
.mode-card[data-accent="coral"]::before { background: var(--c-rust); }
.mode-card[data-accent="purple"]::before { background: var(--c-sage); }
.mode-card[data-accent="warn"]::before { background: var(--c-amber); }
.mode-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-hi);
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.mode-card:hover::before { opacity: 1; height: 4px; }
.mode-card:active { transform: translateY(0); }
.mode-icon {
  width: 32px; height: 32px;
  margin-bottom: 6px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
}
.mode-icon svg { width: 18px; height: 18px; }
.mode-card[data-accent="orange"] .mode-icon { color: var(--c-clay); }
.mode-card[data-accent="blue"] .mode-icon { color: var(--c-sand); }
.mode-card[data-accent="green"] .mode-icon { color: var(--c-moss); }
.mode-card[data-accent="coral"] .mode-icon { color: var(--c-rust); }
.mode-card[data-accent="purple"] .mode-icon { color: var(--c-sage); }
.mode-card[data-accent="warn"] .mode-icon { color: var(--c-amber); }
.mode-title {
  font-size: 15px; font-weight: 600; color: var(--text);
  letter-spacing: -0.01em;
}
.mode-desc {
  font-size: 12px; color: var(--text-dim); line-height: 1.45;
  flex: 1;
}
.mode-cta {
  font-size: 12px; color: var(--accent);
  margin-top: 6px;
  font-weight: 500;
  display: flex; align-items: center; gap: 4px;
}
.mode-cta .arrow {
  transition: transform .2s;
}
.mode-card:hover .mode-cta .arrow { transform: translateX(3px); }
.mode-card[data-accent="orange"] .mode-cta { color: var(--c-clay); }
.mode-card[data-accent="blue"] .mode-cta { color: var(--c-sand); }
.mode-card[data-accent="green"] .mode-cta { color: var(--c-moss); }
.mode-card[data-accent="coral"] .mode-cta { color: var(--c-rust); }
.mode-card[data-accent="purple"] .mode-cta { color: var(--c-sage); }
.mode-card[data-accent="warn"] .mode-cta { color: var(--c-amber); }

.review-card-mode #home-due-count {
  font-weight: 700;
  color: var(--warn);
}

.quick-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.quick-pill {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 11px;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 1.2px;
}
.quick-pill select {
  background: transparent;
  border: 0;
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  outline: none;
  cursor: pointer;
}
.quick-pill select option { background: var(--bg-soft); color: var(--text); }
.quick-pill:hover { border-color: var(--border-hi); }

.resume-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--ink-3);
  border: 1px solid var(--ember-line);
  border-radius: var(--r-md);
  cursor: pointer;
  font-family: inherit;
  color: var(--text);
  text-align: left;
  width: 100%;
  transition: transform .15s, box-shadow .2s, border-color .2s;
  position: relative;
  overflow: hidden;
}
.resume-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: 0 8px 28px rgba(169,146,255,0.25);
}
.resume-icon {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-dim);
  color: #fff;
  border-radius: 50%;
  font-size: 22px;
  font-weight: 600;
  flex-shrink: 0;
}
.resume-body { flex: 1; min-width: 0; }
.resume-name { font-size: 14px; font-weight: 600; color: var(--text); }
.resume-meta {
  font-size: 11px; color: var(--text-faint);
  text-transform: uppercase; letter-spacing: 1.2px; margin-top: 2px;
  font-family: var(--font-num, inherit);
}
.resume-preview {
  font-size: 12px; color: var(--text-dim); margin-top: 4px;
  line-height: 1.4;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.resume-cta {
  display: flex; align-items: center; gap: 4px;
  font-size: 13px; color: var(--accent);
  font-weight: 500;
  white-space: nowrap;
}
.resume-card:hover .resume-cta .arrow { transform: translateX(3px); }

/* ============ END HOME VIEW ============ */

/* ============ LOGIN ============ */
.login-view {
  position: fixed; inset: 0;
  background: var(--ink-0);
  display: flex; align-items: center; justify-content: center;
  z-index: 1100;
  padding: 24px;
}
.login-view[hidden] { display: none; }
.login-card {
  width: 100%;
  max-width: 380px;
  background: var(--ink-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 32px 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: onbSlide .35s var(--ease);
}
.login-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.login-sub { font-size: 13px; color: var(--ice-1); margin-bottom: 12px; }
.login-card input {
  padding: 13px 14px;
  background: var(--ink-3);
  border: 1px solid var(--border);
  color: var(--ice-0);
  border-radius: var(--r-sm);
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color var(--t-fast) var(--ease);
}
.login-card input:focus { border-color: var(--ember); }
.login-btn {
  padding: 14px;
  background: var(--ember);
  border: 0;
  border-radius: var(--r-sm);
  color: var(--ink-0);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: -0.005em;
  margin-top: 8px;
  transition: background var(--t-fast) var(--ease), transform 80ms var(--ease);
}
.login-btn:hover { background: var(--ember-soft); }
.login-btn:active { transform: translateY(1px); }
.login-btn:disabled { opacity: 0.6; cursor: wait; }
.login-error {
  background: rgba(255,77,77,0.15);
  border: 1px solid rgba(255,77,77,0.4);
  color: #ff8888;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 12px;
}
.login-help {
  font-size: 11px; color: var(--text-faint);
  text-align: center;
  margin-top: 4px;
  letter-spacing: 0.3px;
}

/* divider before the Account block in settings */
.settings-divider {
  grid-column: 1 / -1;
  height: 1px;
  background: var(--border);
  margin: 4px 0 0;
}
.settings-logout-row {
  grid-column: 1 / -1;
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.settings-logout-row > span {
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 1.4px !important;
  color: var(--ice-2) !important;
  font-weight: 700;
}
.logout-btn {
  padding: 9px 14px;
  background: transparent;
  border: 1px solid rgba(255,77,77,0.4);
  color: #ff8888;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
}
.logout-btn:hover { background: rgba(255,77,77,0.15); color: #ff5f5f; }

/* ============ AVATAR + ACCOUNT MENU ============ */
.avatar-btn {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border-hi);
  background: var(--ember);
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  transition: transform .12s, box-shadow .2s;
  position: relative;
}
.avatar-btn { border-radius: var(--r-sm); }
.avatar-btn:hover { box-shadow: 0 0 0 2px var(--ember-line); }
.avatar-initials {
  font-weight: 800;
  font-size: 13px;
  color: var(--ink-0);
  letter-spacing: -0.04em;
}

.account-menu {
  position: fixed;
  top: 64px;
  right: 16px;
  width: 240px;
  background: var(--bg-soft);
  border: 1px solid var(--border-hi);
  border-radius: 14px;
  box-shadow: 0 16px 50px rgba(0,0,0,0.5);
  padding: 8px;
  z-index: 200;
  animation: acctIn .18s cubic-bezier(.2,.9,.3,1.4);
}
.account-menu[hidden] { display: none; }
@keyframes acctIn {
  from { opacity: 0; transform: translateY(-8px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.acct-head { display: flex; align-items: center; gap: 12px; padding: 8px 10px 10px; }
.acct-avatar {
  width: 40px; height: 40px;
  border-radius: var(--r-sm);
  background: var(--ember);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-0); font-weight: 800; font-size: 16px;
  flex-shrink: 0;
  letter-spacing: -0.04em;
}
.acct-info { flex: 1; min-width: 0; }
.acct-name {
  font-size: 14px; font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.acct-sub {
  font-size: 11px; color: var(--text-faint);
  text-transform: uppercase; letter-spacing: 1px;
  margin-top: 2px;
}
.acct-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}
.acct-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 10px 12px;
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: var(--text);
  font-family: inherit;
  font-size: 13.5px;
  text-align: left;
  cursor: pointer;
  transition: background .12s;
}
.acct-item:hover { background: var(--bg-elev-hi); }
.acct-item.danger { color: #ff8888; }
.acct-item.danger:hover { background: rgba(255,77,77,0.12); color: #ff5f5f; }
.acct-ic { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; color: var(--text-dim); }
.acct-ic svg { width: 16px; height: 16px; }
.acct-item.danger .acct-ic { color: #c95a4a; }

.acct-backdrop {
  position: fixed; inset: 0;
  background: transparent;
  z-index: 199;
}
.acct-backdrop[hidden] { display: none; }

/* ============ PROFILE PAGE ============ */
.profile-view {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  width: 100vw;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.profile-view[hidden] { display: none; }

.profile-topbar {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  padding-top: max(12px, env(safe-area-inset-top));
  border-bottom: 1px solid var(--border);
  background: var(--ink-2);
  /* PERF: backdrop-filter removed (forced repaint of everything underneath); opaque bg is enough */
  position: sticky; top: 0; z-index: 10;
}
.profile-title { flex: 1; min-width: 0; }
.profile-title-l { font-size: 15px; font-weight: 600; color: var(--text); letter-spacing: -0.01em; }
.profile-title-s { font-size: 11px; color: var(--text-faint); margin-top: 1px; text-transform: uppercase; letter-spacing: 1.2px; }

.profile-main {
  flex: 1;
  padding: 18px 16px max(28px, env(safe-area-inset-bottom));
  max-width: 1080px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.psec h3 {
  font-size: 11px; text-transform: uppercase; letter-spacing: 1.4px;
  color: var(--text-faint); margin-bottom: 10px; font-weight: 600;
  display: flex; align-items: baseline; justify-content: space-between;
}
.psec h3 .h-action { font-size: 11px; color: var(--accent); cursor: pointer; text-transform: none; letter-spacing: 0; font-weight: 500; }

.phero {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
@media (min-width: 600px) { .phero { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 900px) { .phero { grid-template-columns: repeat(5, 1fr); gap: 10px; } }

.phero-card {
  padding: 14px 14px 12px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 14px;
  position: relative;
  overflow: hidden;
}
.phero-card::after {
  content: ''; position: absolute;
  top: 0; left: 0; right: 0; height: 2px;
  background: var(--accent);
  opacity: 0.4;
}
.phero-card.warm::after { background: var(--accent-2); }
.phero-card.muted::after { background: var(--c-sand); }
.phero-card .v {
  font-size: 26px; font-weight: 700; color: var(--text);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
}
.phero-card .v .unit { font-size: 14px; font-weight: 500; color: var(--text-dim); margin-left: 2px; }
.phero-card .l {
  font-size: 10px; text-transform: uppercase; letter-spacing: 1.4px;
  color: var(--text-faint); margin-top: 6px; font-weight: 600;
}
.phero-card .sub {
  font-size: 11px; color: var(--text-dim); margin-top: 3px;
}

.bar7 {
  display: flex; align-items: flex-end; gap: 6px;
  height: 90px; padding: 8px 0;
}
.bar7-col {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px;
  min-width: 0;
}
.bar7-bar {
  width: 100%;
  background: var(--ember);
  border-radius: 0;
  min-height: 2px;
}
.bar7-col.today .bar7-bar { background: var(--mustard); }
.bar7-lbl { font-size: 10px; color: var(--text-faint); letter-spacing: 0.5px; }

.cat-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 6px;
  font-size: 13px;
}
.cat-row .cat-name { width: 130px; color: var(--text); font-weight: 500; text-transform: capitalize; }
.cat-row .cat-bar {
  flex: 1; height: 4px;
  background: var(--ink-3);
  border-radius: 0;
  overflow: hidden;
}
.cat-row .cat-fill {
  height: 100%;
  background: var(--ember);
  border-radius: 0;
}
.cat-row .cat-n {
  font-variant-numeric: tabular-nums;
  font-size: 12px; color: var(--text-dim);
  min-width: 28px; text-align: right;
  font-weight: 600;
}

.err-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
@media (min-width: 720px) { .err-grid { grid-template-columns: 1fr 1fr; } }
.err-card {
  padding: 10px 12px;
  background: rgba(212,160,75,0.04);
  border: 1px solid rgba(212,160,75,0.20);
  border-left: 3px solid var(--accent-2);
  border-radius: 10px;
  font-size: 13px;
}
.err-card .pair { color: var(--text); line-height: 1.5; }
.err-card .pair .wr { text-decoration: line-through; color: var(--c-rust); }
.err-card .pair .ar { color: var(--text-faint); margin: 0 6px; }
.err-card .pair .rt { color: var(--accent); font-weight: 500; }
.err-card .meta {
  font-size: 10px; color: var(--text-faint);
  text-transform: uppercase; letter-spacing: 1.2px;
  margin-top: 4px; font-weight: 600;
}
.err-card .reason { font-size: 11px; color: var(--text-dim); margin-top: 4px; line-height: 1.4; }

.voc-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
@media (min-width: 720px) { .voc-grid { grid-template-columns: 1fr 1fr; } }
.voc-card {
  padding: 12px 14px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.voc-card .word { font-size: 16px; font-weight: 600; color: var(--text); letter-spacing: -0.01em; }
.voc-card .ex { font-size: 12px; color: var(--text-dim); margin-top: 4px; line-height: 1.45; }
.voc-card .meta { font-size: 10px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 1.2px; margin-top: 6px; }
.voc-card .actions { display: flex; gap: 6px; margin-top: 10px; }
.voc-card .actions button {
  flex: 1; padding: 7px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-dim);
  border-radius: 7px;
  cursor: pointer;
  font-family: inherit;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
}
.voc-card .actions .again:hover { border-color: var(--c-rust); color: var(--c-rust); }
.voc-card .actions .good:hover  { border-color: var(--accent-2); color: var(--accent-2); }
.voc-card .actions .easy:hover  { border-color: var(--accent); color: var(--accent); }

.sess-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 6px;
  font-size: 13px;
}
.sess-row .sess-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; color: var(--accent);
}
.sess-row .sess-icon svg { width: 16px; height: 16px; }
.sess-row .sess-body { flex: 1; min-width: 0; }
.sess-row .sess-name { font-weight: 500; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sess-row .sess-meta {
  font-size: 11px; color: var(--text-faint); margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.sess-row .sess-cefr {
  padding: 3px 8px;
  background: rgba(136,184,106,0.15);
  border: 1px solid rgba(136,184,106,0.4);
  border-radius: 6px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.bill-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
}

/* ============ END PROFILE PAGE ============ */
/* ============ END LOGIN ============ */

/* ============ ONBOARDING ============ */
.onboarding {
  position: fixed; inset: 0;
  background: var(--ink-0);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: fadeIn .4s var(--ease);
}
.onboarding[hidden] { display: none; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.onb-card {
  width: 100%;
  max-width: 460px;
  background: var(--ink-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 36px 28px 24px;
  text-align: left;
}
.onb-step { animation: onbSlide .35s var(--ease); }
@keyframes onbSlide {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}
.onb-art {
  width: 44px; height: 44px;
  margin: 0 0 24px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-sm);
  background: var(--ember);
  color: var(--ink-0);
}
.onb-art svg { width: 22px; height: 22px; }
.onb-title {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.025em;
  margin-bottom: 12px;
  color: var(--ice-0);
  line-height: 1.15;
}
.onb-desc {
  font-size: 14px;
  color: var(--ice-1);
  line-height: 1.55;
  margin-bottom: 28px;
}
.onb-dots {
  display: flex; gap: 8px;
  justify-content: flex-start;
  margin-bottom: 24px;
}
.onb-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ink-3);
  border: 1px solid var(--border);
  transition: background var(--t-fast) var(--ease), width var(--t-fast) var(--ease);
}
.onb-dot.active {
  background: var(--ember);
  border-color: var(--ember);
  width: 22px;
  border-radius: 999px;
}
.onb-actions {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.onb-skip {
  background: transparent; border: 0;
  color: var(--ice-2);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  padding: 10px 14px;
}
.onb-skip:hover { color: var(--ice-0); }
.onb-next {
  flex: 1;
  padding: 14px;
  background: var(--ember);
  border: 0;
  border-radius: var(--r-sm);
  color: var(--ink-0);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: -0.005em;
  transition: background var(--t-fast) var(--ease), transform 80ms var(--ease);
}
.onb-next:hover { background: var(--ember-soft); }
.onb-next:active { transform: translateY(1px); }

/* ============ END ONBOARDING ============ */

/* ============ TOASTS V2 (top-right, volt/mint palette, dismissible) ============ */
.toast-container {
  position: fixed;
  top: max(16px, env(safe-area-inset-top));
  right: 16px;
  left: auto;
  transform: none;
  z-index: 999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
  width: min(360px, calc(100vw - 32px));
  align-items: stretch;
}
@media (max-width: 640px) {
  .toast-container {
    right: 12px;
    left: 12px;
    width: auto;
  }
}
.toast {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--ink-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--ember);
  border-radius: var(--r-sm);
  color: var(--ice-0);
  font-size: 13px;
  box-shadow: var(--shadow-2);
  pointer-events: auto;
  animation: toastIn .32s var(--ease);
  max-width: 100%;
  position: relative;
  overflow: hidden;
}
.toast::before { content: none; }
.toast.leaving { animation: toastOut .28s ease-in forwards; }
@keyframes toastIn {
  from { opacity: 0; transform: translateX(20px) scale(0.96); }
  to   { opacity: 1; transform: translateX(0)    scale(1); }
}
@keyframes toastOut {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(20px) scale(0.96); }
}
.toast.achievement {
  border-left-color: var(--mustard);
}
.toast.achievement .toast-icon {
  background: var(--mustard-soft);
  border-color: rgba(232,197,71,0.32);
  color: var(--mustard);
}
.toast .toast-icon {
  width: 30px; height: 30px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ember-fade);
  border: 1px solid var(--ember-line);
  border-radius: var(--r-sm);
  color: var(--ember);
}
.toast .toast-icon svg { width: 15px; height: 15px; }
.toast .toast-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1;
}
.toast .toast-title {
  font-family: ui-rounded, "SF Pro Rounded", -apple-system, "Inter", system-ui, sans-serif;
  font-weight: 700;
  color: var(--ice-0);
  font-size: 13.5px;
  letter-spacing: -0.015em;
  line-height: 1.2;
}
.toast .toast-msg {
  font-size: 11.5px;
  color: var(--ice-1);
  letter-spacing: -0.005em;
  line-height: 1.35;
  margin-top: 2px;
}
.toast .toast-close {
  width: 22px; height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  color: var(--ice-2);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  border-radius: 6px;
  flex-shrink: 0;
  font-family: inherit;
  padding: 0;
  transition: background .14s, color .14s;
}
.toast .toast-close:hover { background: rgba(255,255,255,0.06); color: var(--ice-0); }

/* ============ TRANSITIONS ============ */
.home-view, #app {
  transition: opacity .25s ease, transform .25s ease;
}
.home-view.exit { opacity: 0; transform: scale(0.98); pointer-events: none; }
.home-view.enter { animation: viewEnter .3s ease-out; }
#app.enter { animation: viewEnter .3s ease-out; }
@keyframes viewEnter {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}


#app {
  display: flex;
  flex-direction: column;
  height: 100dvh;            /* dynamic viewport height — handles barra do browser no celular */
  width: 100vw;
  max-width: 100%;
  margin: 0;
}

/* ----- icons ----- */
.icon { width: 22px; height: 22px; flex-shrink: 0; }
.icon-sm { width: 16px; height: 16px; flex-shrink: 0; }

/* ----- topbar ----- */
.topbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  padding-top: max(10px, env(safe-area-inset-top));
  border-bottom: 1px solid var(--border);
  background: var(--ink-2);
  /* PERF: backdrop-filter removed */
  min-width: 0;
  position: sticky;
  top: 0;
  z-index: 10;
}
.dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--text-faint);
  flex-shrink: 0;
  transition: background .2s, box-shadow .2s;
}
.dot.idle        { background: var(--idle);     box-shadow: 0 0 8px var(--idle); }
.dot.listening   { background: var(--listen);   box-shadow: 0 0 10px var(--listen);   animation: pulse 1.2s ease-in-out infinite; }
.dot.transcribing{ background: var(--warn);     box-shadow: 0 0 10px var(--warn);     animation: pulse 1.2s ease-in-out infinite; }
.dot.thinking    { background: var(--thinking); box-shadow: 0 0 10px var(--thinking); animation: pulse 1.2s ease-in-out infinite; }
.dot.speaking    { background: var(--speaking); box-shadow: 0 0 10px var(--speaking); animation: pulse 1.2s ease-in-out infinite; }
.dot.error       { background: #ff5f5f;          box-shadow: 0 0 10px #ff5f5f; }
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: 0.45 } }

.title { font-weight: 600; font-size: 15px; letter-spacing: 0.2px; }
.title-btn {
  flex: 1;
  background: transparent;
  border: 0;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  font-family: inherit;
  overflow: hidden;
}
.title-btn:hover { background: var(--bg-elev); }
.title-btn .title { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.big-btn {
  width: 100%;
  padding: 12px 14px;
  background: rgba(169,146,255,0.12);
  border: 1px solid var(--accent-dim);
  color: var(--text);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  min-height: 44px;
}
.big-btn:hover { background: rgba(169,146,255,0.22); }

.sessions-card { max-height: 85vh; }
.sessions-list {
  display: flex; flex-direction: column; gap: 6px;
  overflow-y: auto;
  max-height: calc(85vh - 130px);
  -webkit-overflow-scrolling: touch;
}
.session-item {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  user-select: none;
}
.session-item:hover { background: rgba(255,255,255,0.07); }
.session-item.active { border-color: var(--accent-dim); background: rgba(169,146,255,0.1); }
.session-item .meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.session-item .name { color: var(--text); font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.session-item .info { color: var(--text-faint); font-size: 11px; font-family: var(--font-num, inherit); }
.session-item .actions { display: flex; gap: 4px; }
.session-item .iconbtn {
  background: transparent; border: 1px solid transparent; color: var(--text-faint);
  cursor: pointer; padding: 5px 7px; border-radius: 6px; font-size: 11px; font-family: inherit;
}
.session-item .iconbtn:hover { color: var(--text); border-color: var(--border); background: rgba(255,255,255,0.06); }
.session-item .iconbtn.danger:hover { color: #ff8888; border-color: rgba(255,77,77,0.4); }

.profile-card { max-height: 85vh; overflow-y: auto; }
.profile-content { display: flex; flex-direction: column; gap: 18px; }
.profile-section h4 {
  font-size: 11px; text-transform: uppercase; letter-spacing: 1.4px;
  color: var(--text-faint); margin-bottom: 8px; font-weight: 600;
}
.profile-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.stat-card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
}
.stat-card .v { font-size: 20px; font-weight: 600; color: var(--text); }
.stat-card .l { font-size: 10px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 1px; margin-top: 2px; }
.heatmap { display: flex; flex-direction: column; gap: 5px; }
.heatmap-row {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--text);
}
.heatmap-row .lbl { width: 110px; color: var(--text-dim); font-size: 12px; }
.heatmap-row .bar {
  height: 12px; background: rgba(169,146,255,0.5);
  border-radius: 4px; min-width: 4px;
}
.heatmap-row .n { font-size: 11px; color: var(--text-faint); font-family: var(--font-num, inherit); }
.errors-list { display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow-y: auto; }
.error-row {
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 10px;
  background: rgba(255,184,77,0.06);
  border: 1px solid rgba(255,184,77,0.2);
  border-radius: 8px;
  font-size: 13px;
}
.error-row .pair { color: var(--text); }
.error-row .pair .wrong { text-decoration: line-through; color: #ff8888; }
.error-row .pair .arrow { color: var(--text-faint); margin: 0 6px; }
.error-row .pair .right { color: #b5ecc7; }
.error-row .meta { font-size: 10px; color: var(--text-faint); }
.vocab-list { display: flex; flex-wrap: wrap; gap: 5px; }
.vocab-chip {
  padding: 4px 10px;
  background: rgba(77,208,255,0.1);
  border: 1px solid rgba(77,208,255,0.25);
  border-radius: 12px;
  color: #d4ebf5;
  font-size: 12px;
}
.icon-btn-sm {
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  width: 36px; height: 36px;
  background: transparent; border: 1px solid var(--border);
  color: var(--text-dim); border-radius: 8px; cursor: pointer;
}
.icon-btn-sm:hover { color: var(--text); border-color: rgba(255,255,255,0.2); }

/* ----- chat ----- */
.chat {
  flex: 1;
  overflow-y: auto;
  padding: 12px 10px 16px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  user-select: text;
  min-height: 0;
}
.chat::-webkit-scrollbar { width: 4px; }
.chat::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }

.empty-hint {
  margin: auto;
  text-align: center;
  font-size: 14px;
  color: var(--text-faint);
  line-height: 1.7;
  padding: 30px 24px;
}

.bubble {
  max-width: 88%;
  padding: 8px 13px;
  border-radius: 14px;
  font-size: 14.5px;
  line-height: 1.4;
  word-wrap: break-word;
  animation: slideIn .2s ease-out;
}
@keyframes slideIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.bubble.user {
  align-self: flex-end;
  background: var(--ink-3);
  border: 1px solid var(--ember-line);
  color: var(--ice-0);
  border-bottom-right-radius: 5px;
}
.bubble.ai {
  align-self: flex-start;
  background: var(--ink-3);
  border: 1px solid var(--border);
  color: var(--ice-0);
  border-bottom-left-radius: 5px;
}
.bubble.thinking::after {
  content: '▍';
  animation: blink 1s steps(2) infinite;
  color: var(--ember);
  margin-left: 2px;
}
@keyframes blink { 50% { opacity: 0; } }

.replay-btn {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 8px;
  padding: 6px 11px;
  background: rgba(77,208,255,0.12);
  border: 1px solid rgba(77,208,255,0.3);
  color: #9be0ff;
  border-radius: 12px;
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
}
.replay-btn:hover { background: rgba(77,208,255,0.25); color: #fff; }

.shadow-btn {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 6px; margin-left: 6px;
  padding: 6px 11px;
  background: rgba(169,146,255,0.12);
  border: 1px solid rgba(169,146,255,0.35);
  color: var(--accent);
  border-radius: 12px;
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
}
.shadow-btn:hover { background: rgba(169,146,255,0.25); color: #fff; }
.shadow-btn.armed { background: var(--accent-dim); color: #fff; }

.shadow-armed-banner {
  align-self: center;
  padding: 10px 14px;
  background: rgba(169,146,255,0.1);
  border: 1px dashed var(--accent);
  border-radius: 10px;
  color: var(--text);
  font-size: 13px;
  text-align: center;
  max-width: 95%;
}
.shadow-armed-banner .target { font-weight: 600; color: var(--accent); margin-top: 4px; display: block; }
.shadow-armed-banner .hint { font-size: 11px; color: var(--text-faint); margin-top: 6px; }

.shadow-result {
  align-self: flex-end;
  max-width: 92%;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 13px;
  border: 1px solid;
}
.shadow-result.perfect { background: rgba(62,208,126,0.15); border-color: var(--ok); color: #b5ecc7; }
.shadow-result.great   { background: rgba(62,208,126,0.10); border-color: var(--ok); color: #b5ecc7; }
.shadow-result.close   { background: rgba(255,184,77,0.10); border-color: var(--warn); color: #ffd599; }
.shadow-result.try_again { background: rgba(255,184,77,0.12); border-color: var(--warn); color: #ffb84d; }
.shadow-result.off     { background: rgba(255,77,77,0.10); border-color: #ff5f5f; color: #ff8888; }
.shadow-result .score-row { display: flex; align-items: center; gap: 10px; }
.shadow-result .big-score { font-size: 22px; font-weight: 700; }
.shadow-result .small { font-size: 11px; color: var(--text-dim); }
.shadow-result .meta { margin-top: 6px; font-size: 11px; opacity: 0.85; }
.shadow-result .meta .miss-tag {
  display: inline-block; margin: 2px; padding: 2px 7px;
  background: rgba(255,77,77,0.15); border-radius: 8px; color: #ff8888;
}

/* correction */
.correction-block {
  align-self: flex-start;
  max-width: 92%;
  padding: 0;
  background: rgba(136,184,106,0.06);
  border: 1px solid rgba(136,184,106,0.28);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  color: #cfdcc0;
  font-size: 12.5px;
  line-height: 1.45;
  margin-top: 2px;
}
.correction-block .corr-toggle {
  display: flex; align-items: center; gap: 6px;
  width: 100%;
  padding: 7px 10px 7px 12px;
  background: transparent;
  border: 0;
  color: var(--accent);
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  cursor: pointer;
  text-align: left;
}
.correction-block .corr-toggle .chev {
  display: inline-block;
  width: 10px; height: 10px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform .15s;
  margin-left: auto;
}
.correction-block.open .corr-toggle .chev { transform: rotate(45deg); }
.correction-block .corr-summary {
  font-size: 11px;
  color: var(--text-dim);
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  margin-left: 4px;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.correction-block .corr-body {
  display: none;
  padding: 0 12px 10px;
}
.correction-block.open .corr-body { display: block; }
.correction-block .corr-item {
  margin: 4px 0;
  font-size: 12.5px;
  color: #cfdcc0;
}
.correction-block .corr-better {
  margin-top: 8px;
  padding: 6px 10px;
  background: rgba(212,160,75,0.10);
  border-left: 2px solid var(--accent-2);
  border-radius: 4px;
  color: #e8d2a4;
  font-style: italic;
  font-size: 12.5px;
}

.native-rewrite {
  align-self: flex-end;
  max-width: 88%;
  padding: 2px 14px 2px 0;
  margin-top: -2px;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--text-faint);
  font-style: italic;
}
.native-rewrite .label {
  font-size: 9px; text-transform: uppercase; letter-spacing: 1.4px;
  color: var(--accent); margin-right: 6px; font-style: normal;
  font-weight: 600;
}

.cefr-banner {
  align-self: center;
  max-width: 95%;
  padding: 10px 14px;
  background: rgba(169,146,255,0.1);
  border: 1px solid var(--accent-dim);
  border-radius: 12px;
  color: var(--text);
  font-size: 13px;
  text-align: center;
}
.cefr-banner button {
  margin-left: 8px;
  padding: 4px 10px;
  background: var(--accent-dim);
  border: 1px solid var(--accent);
  color: #fff;
  border-radius: 8px;
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
}

.review-cards { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.review-card {
  padding: 14px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.review-card .word { font-size: 18px; font-weight: 600; color: var(--text); }
.review-card .ex { font-size: 12px; color: var(--text-faint); margin-top: 4px; }
.review-card .actions { display: flex; gap: 6px; margin-top: 10px; }
.review-card .actions button {
  flex: 1; padding: 8px;
  border: 1px solid var(--border);
  background: var(--bg-elev);
  color: var(--text-dim);
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
}
.review-card .actions button.again:hover { border-color: #ff8888; color: #ff8888; }
.review-card .actions button.good:hover { border-color: var(--warn); color: var(--warn); }
.review-card .actions button.easy:hover { border-color: var(--ok); color: var(--ok); }

.vocab-block {
  align-self: flex-start;
  max-width: 92%;
  padding: 6px 10px 6px 12px;
  background: rgba(212,160,75,0.06);
  border: 1px solid rgba(212,160,75,0.28);
  border-left: 3px solid var(--accent-2);
  border-radius: 6px;
  color: #e8d2a4;
  font-size: 12px;
  line-height: 1.4;
  margin-top: 2px;
}
.vocab-block .vocab-head {
  display: inline;
  font-size: 10px; text-transform: uppercase; letter-spacing: 1.2px;
  color: var(--accent-2); font-weight: 700;
  margin-right: 6px;
}

/* suggestions */
.suggestions-block {
  align-self: stretch;
  margin: 2px 0 4px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.suggestions-block .suggestions-head {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--text-faint);
  font-weight: 600;
  padding: 0 4px;
}
.suggestions-row {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding: 2px 4px 4px;
  -webkit-overflow-scrolling: touch;
}
.suggestions-row::-webkit-scrollbar { height: 0; }
.suggestion-btn {
  flex: 0 0 auto;
  scroll-snap-align: start;
  text-align: left;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  color: var(--text-dim);
  padding: 7px 11px;
  border-radius: 8px;
  font-size: 12.5px;
  font-family: inherit;
  cursor: pointer;
  line-height: 1.35;
  max-width: 78%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background .12s, border-color .12s, color .12s;
}
.suggestion-btn:hover, .suggestion-btn:focus {
  background: rgba(212,160,75,0.10);
  border-color: rgba(212,160,75,0.4);
  color: var(--text);
}
.suggestion-btn.copied {
  background: rgba(136,184,106,0.15);
  border-color: var(--accent);
  color: var(--accent);
}

/* ----- status strip ----- */
.status-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 12px;
  border-top: 1px solid var(--border);
  background: rgba(0,0,0,0.2);
  min-height: 28px;
}
.state-label {
  font-size: 11px;
  color: var(--text-dim);
  font-family: var(--font-num, inherit);
}
.skip-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,77,77,0.12);
  border: 1px solid rgba(255,77,77,0.35);
  color: #ff8888;
  padding: 4px 12px;
  border-radius: 14px;
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
}
.skip-btn:hover { background: rgba(255,77,77,0.25); color: #fff; }
.skip-btn[hidden] { display: none; }

.billing {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  color: var(--text-faint);
  margin: 0 8px;
  overflow: hidden;
  white-space: nowrap;
}
.billing.dev-only > * { display: none; }
.billing.dev-only .bill-study { display: inline; }
.billing.dev-only.dev-on > * { display: inline; }
.billing .bill-sep { opacity: .35; }
.billing .bill-study { color: var(--accent); font-weight: 600; font-size: 12px; display: inline-flex; align-items: center; gap: 4px; }
.billing .bill-study::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; opacity: 0.6;
}
.billing .bill-study.active { animation: pulse 1.6s ease-in-out infinite; }
.billing .bill-bal { color: var(--ok); font-weight: 600; }
.billing .bill-bal.warn { color: var(--warn); }
.billing .bill-bal.crit { color: #ff5f5f; }
.billing .bill-last { color: var(--text-dim); }
.billing .bill-tok { color: var(--text-faint); }
.billing .bill-lat { color: var(--text-faint); }
@media (max-width: 600px) {
  .billing .bill-tok, .billing .bill-lat, .billing .bill-sep:nth-of-type(n+3) { display: none; }
}

/* ----- action bar (PTT) ----- */
.action-bar {
  padding: 8px 10px 4px;
  border-top: 1px solid var(--border);
}
.ptt-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--border-hi);
  background: var(--ink-2);
  color: var(--ember);
  border-radius: var(--r-sm);
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  letter-spacing: -0.01em;
  transition: background .15s, border-color .15s, transform .1s;
  min-height: 60px;
}
.ptt-btn:hover { background: var(--ink-3); border-color: var(--ember-line); }
.ptt-btn.holding {
  background: var(--ember);
  border-color: var(--ember);
  color: var(--ink-0);
}
.ptt-btn.holding .icon { animation: pulse 1.2s ease-in-out infinite; }
.ptt-btn:disabled, .ptt-btn.disabled { opacity: 0.4; pointer-events: none; }

/* ----- text input ----- */
.text-bar {
  display: flex;
  gap: 6px;
  padding: 6px 10px max(8px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
  background: rgba(0,0,0,0.18);
}
#text-input {
  flex: 1;
  padding: 11px 14px;
  border: 1px solid var(--border);
  background: var(--bg-elev);
  color: var(--text);
  border-radius: 10px;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  user-select: text;
  min-height: 44px;
}
#text-input::placeholder { color: var(--text-faint); }
#text-input:focus {
  border-color: var(--accent-dim);
  background: rgba(255,255,255,0.06);
}
.send-btn {
  display: flex; align-items: center; justify-content: center;
  width: 44px; min-height: 44px;
  background: var(--accent-dim);
  border: 1px solid var(--accent);
  color: #fff;
  border-radius: 10px;
  cursor: pointer;
}
.send-btn:hover { background: rgba(169,146,255,0.55); }

/* ----- bottom sheet (settings) ----- */
.sheet {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  display: flex;
  align-items: flex-end;
  z-index: 100;
}
.sheet[hidden] { display: none; }
.sheet-card {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  background: var(--ink-2);
  border-top: 1px solid var(--border);
  border-radius: var(--r-md) var(--r-md) 0 0;
  padding: 16px 16px max(16px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 14px;
  animation: slideUp .25s var(--ease);
}
@keyframes slideUp { from { transform: translateY(100%); } to { transform: none; } }
.sheet-header {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 14px; color: var(--text);
}
.sheet-card label {
  display: flex; flex-direction: column; gap: 5px;
  font-size: 10px; text-transform: uppercase; letter-spacing: 1.2px;
  color: var(--text-faint);
  min-width: 0;
}
/* settings em 2 colunas no celular, 4 no desktop */
#settings-sheet .sheet-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: start;
}
#settings-sheet .sheet-header { grid-column: 1 / -1; }
@media (min-width: 720px) {
  #settings-sheet .sheet-card { grid-template-columns: repeat(4, 1fr); }
}
.sheet-card select {
  width: 100%;
  max-width: 100%;
  background: var(--ink-3);
  color: var(--ice-0);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 10px 8px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  min-height: 44px;
  text-overflow: ellipsis;
  transition: border-color var(--t-fast) var(--ease);
}
.sheet-card select:focus { border-color: var(--ember); }

.ai-turn {
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-self: stretch;
}
.ai-turn > * { align-self: flex-start; }

@media (min-width: 720px) {
  .bubble { font-size: 14px; }
  .empty-hint { font-size: 13px; }
  .chat {
    padding-left: max(14px, calc((100vw - 1080px) / 2));
    padding-right: max(14px, calc((100vw - 1080px) / 2));
  }
  .action-bar, .text-bar, .status-strip {
    padding-left: max(14px, calc((100vw - 1080px) / 2));
    padding-right: max(14px, calc((100vw - 1080px) / 2));
  }
  .ai-turn {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 38%);
    column-gap: 12px;
    row-gap: 6px;
    align-items: start;
    margin: 2px 0;
    width: 100%;
  }
  .ai-turn > * { align-self: start; }
  .ai-turn .bubble.ai {
    grid-column: 1;
    grid-row: 1 / span 4;
    max-width: 100%;
    align-self: start;
    margin: 0;
  }
  .ai-turn .correction-block { grid-column: 2; grid-row: 1; max-width: 100%; }
  .ai-turn .vocab-block       { grid-column: 2; grid-row: 2; max-width: 100%; }
  .ai-turn .suggestions-block { grid-column: 2; grid-row: 3; max-width: 100%; }
  .bubble { max-width: 100%; }
  .bubble.user { max-width: 80%; }
  .correction-block, .vocab-block, .suggestions-block { max-width: 100%; margin-top: 0; }
}

@media (min-width: 1100px) {
  .ai-turn {
    grid-template-columns: minmax(0, 1fr) 340px;
    column-gap: 16px;
  }
}

/* ----- landscape no celular: compacta vertical pra caber UI + chat ----- */
@media (orientation: landscape) and (max-height: 500px) {
  .topbar { padding: 6px 10px; padding-top: max(6px, env(safe-area-inset-top)); }
  .icon-btn-sm { width: 32px; height: 32px; }
  .title { font-size: 13px; }
  .chat { padding: 8px 10px; gap: 7px; }
  .ptt-btn { padding: 10px; min-height: 44px; font-size: 14px; }
  .action-bar { padding: 6px 10px 4px; }
  .text-bar { padding: 5px 10px max(6px, env(safe-area-inset-bottom)); }
  #text-input { padding: 8px 10px; min-height: 38px; font-size: 13px; }
  .send-btn { width: 38px; min-height: 38px; }
  .status-strip { min-height: 24px; padding: 3px 10px; }
}

/* ----- mobile portrait: compact practice topbar so it fits one row -----
   The practice topbar holds back + status dot + session title + state label +
   meta + 6 icons + avatar. On phones (<=640px) most of those overflow or
   wrap. Hide low-priority items (state label, session meta, journal & avatar
   dups already on home, text-toggle), shrink icon size, truncate title. */
@media (max-width: 640px) {
  #app .topbar {
    padding: 6px 8px !important;
    padding-top: max(6px, env(safe-area-inset-top)) !important;
    gap: 4px !important;
    flex-wrap: nowrap !important;
  }
  #app .topbar .icon-btn-sm {
    width: 32px !important;
    height: 32px !important;
    flex-shrink: 0;
  }
  #app .topbar .icon-btn-sm svg { width: 15px !important; height: 15px !important; }
  #app .topbar .title { font-size: 13px !important; max-width: 38vw; }
  #app .topbar .title-btn {
    min-width: 0;
    padding: 4px 6px !important;
    overflow: hidden;
  }
  /* Items duplicated elsewhere or low-value on a phone — drop them */
  #app .topbar .state-label-inline,
  #app .topbar .session-meta,
  #app .topbar #text-toggle,
  #app .topbar #practice-journey-btn,
  #app .topbar #practice-avatar-btn {
    display: none !important;
  }
  /* Avatar lives in home topbar; on practice we save the slot */
  #app .topbar .avatar-btn { width: 32px !important; height: 32px !important; }
}

/* ============================================================
   PRACTICE V2 — speaking-first redesign
   Stage (orb) + CoachPanel + collapsed timeline + dock
   Overrides legacy .chat-as-hero layout when inside #app.
   ============================================================ */

/* ----- shell ----- */
#app {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: 100dvh;
  background: var(--ink-1);
  position: relative;
  overflow: hidden;
}
#app[hidden] { display: none; }

/* hidden ptt button: keeps state machine intact, orb is the only visible PTT control */
#app .ptt-btn.ptt-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px; border: 0;
  clip: rect(0 0 0 0);
  overflow: hidden;
  pointer-events: none;
}

/* ----- topbar (override) ----- */
#app .topbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  padding-top: max(10px, env(safe-area-inset-top));
  border-bottom: 1px solid var(--border);
  background: rgba(7,8,10,0.92);
  /* PERF: kept ONE backdrop-filter (the practice topbar that overlays content) but reduced from 14px → 8px */
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  position: relative;
  z-index: 5;
  flex: none;
}
#app .topbar .title-btn {
  background: transparent; border: 0; padding: 4px 8px;
  cursor: pointer; border-radius: 8px;
  font-family: inherit;
  transition: background .12s;
}
#app .topbar .title-btn:hover { background: rgba(255,255,255,0.04); }
#app .topbar .title {
  font-size: 14px; font-weight: 600;
  letter-spacing: -0.01em; color: var(--ice-0);
  max-width: 36vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  display: inline-block; vertical-align: middle;
}
#app .topbar .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ice-3); flex-shrink: 0; transition: background var(--t-fast) var(--ease); }
#app .topbar .dot.idle        { background: var(--ice-2); animation: none; }
#app .topbar .dot.listening   { background: var(--rust); animation: dotPulse 0.9s ease-in-out infinite; }
#app .topbar .dot.transcribing{ background: var(--ember); animation: dotPulse 1.1s ease-in-out infinite; }
#app .topbar .dot.thinking    { background: var(--ember); animation: dotPulse 1.1s ease-in-out infinite; }
#app .topbar .dot.speaking    { background: var(--moss); animation: dotPulse 0.8s ease-in-out infinite; }
#app .topbar .dot.error       { background: var(--rust); }
@keyframes dotPulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.55; transform: scale(0.85); } }

.state-label-inline {
  font-size: 11px;
  color: var(--ice-2);
  letter-spacing: 0.4px;
  text-transform: lowercase;
  font-variant-numeric: tabular-nums;
  padding: 0 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 32vw;
}
.topbar-spacer { flex: 1; min-width: 0; }

#app .icon-btn-sm {
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 9px;
  color: var(--ice-1);
  cursor: pointer;
  transition: background .14s, color .14s, border-color .14s;
  flex-shrink: 0;
}
#app .icon-btn-sm:hover { background: rgba(255,255,255,0.05); color: var(--ice-0); border-color: var(--border); }
#app .icon-btn-sm svg { width: 17px; height: 17px; }

/* ----- session meta strip in topbar ----- */
.session-meta {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 0 8px 0 4px;
  font-size: 11px;
  color: var(--ice-2);
  letter-spacing: 0.2px;
  overflow: hidden;
  flex-wrap: nowrap;
}
.session-meta .smeta {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 9px;
  background: var(--ink-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--ice-1);
  font-weight: 500;
}
.session-meta .smeta .smeta-l {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--ice-2);
  font-weight: 700;
}
.session-meta .smeta .smeta-v { color: var(--ice-0); }
.session-meta .smeta[data-kind="streak"] .smeta-v { color: var(--mustard); }
.session-meta .smeta[data-kind="words"]  .smeta-v { color: var(--ice-0); }
.session-meta .smeta[data-kind="today"]  .smeta-v { color: var(--ember); }
.session-meta .smeta[data-kind="cefr"]   .smeta-v { color: var(--ember); font-weight: 700; letter-spacing: 0.5px; }

@media (min-width: 900px) { .session-meta { display: inline-flex; } }
@media (min-width: 1100px) { .session-meta { gap: 8px; } }

/* ============================================================
   PRACTICE — STUDIO 3-COL LAYOUT
   Conversation | Coach | Stage(sphere/timer/CTA)
   ============================================================ */

#app .practice {
  display: grid;
  min-height: 0;
  padding: 14px 14px 12px;
  gap: 12px;
  overflow: hidden;
}

/* Mobile + tablet: stacked single column (stage on top, coach, then conversation).
   PERF/UX: stage is content-sized (auto) so the CTA is never clipped. Whole practice scrolls. */
@media (max-width: 1099px) {
  #app .practice {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "stage" "coach" "conv";
    grid-template-rows: auto auto auto;
    overflow-y: auto;
    overflow-x: hidden;
  }
  .stage         { grid-area: stage; }
  .coach-panel   { grid-area: coach; }
  #app .timeline { grid-area: conv;  }
}

/* mobile/tablet overrides moved to bottom of file (so they win specificity over later defaults) */

/* Desktop: 3 columns — Conversation | Stage(center) | Coach */
@media (min-width: 1100px) {
  #app .practice {
    grid-template-columns: minmax(280px, 1fr) minmax(380px, 1.15fr) minmax(320px, 1fr);
    grid-template-rows: minmax(0, 1fr);
    grid-template-areas: "conv stage coach";
    padding: 18px 22px 16px;
    gap: 16px;
    overflow: hidden;
  }
  #app .timeline { grid-area: conv; }
  .stage         { grid-area: stage; }
  .coach-panel   { grid-area: coach; }
}
@media (min-width: 1500px) {
  #app .practice {
    grid-template-columns: minmax(320px, 1fr) minmax(440px, 1.1fr) minmax(360px, 1fr);
    padding: 22px 32px 20px;
    gap: 22px;
  }
}

/* popout window: only show the coach + (optionally) conversation */
body[data-popout="coach"] #login-view,
body[data-popout="coach"] #home-view,
body[data-popout="coach"] #onboarding,
body[data-popout="coach"] #profile-view,
body[data-popout="coach"] .toast-container,
body[data-popout="coach"] #app .topbar,
body[data-popout="coach"] #app .stage,
body[data-popout="coach"] #app .text-bar,
body[data-popout="coach"] #app .ptt-btn,
body[data-popout="coach"] #app #billing-strip { display: none !important; }
body[data-popout="coach"] #app {
  display: block;
  height: 100dvh;
  background: var(--ink-1);
}
body[data-popout="coach"] #app .practice {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas: "coach" "conv";
  padding: 16px 16px 14px;
  height: 100dvh;
  overflow: hidden;
  max-width: none;
  margin: 0;
  gap: 14px;
}

/* === POPOUT refinements — strip redundant chrome, give content breathing room === */
/* the X next to the coach title is for the in-app sidebar; in a standalone window
   the OS already provides a close — hiding avoids confusion */
body[data-popout="coach"] #coach-close { display: none !important; }
/* the title is a long ellipsised summary of the latest feedback; in popout it duplicates
   the rows below, so we drop it and keep just the "COACH" eyebrow */
body[data-popout="coach"] #coach-title { display: none !important; }
/* conversation in popout is always open; hide the collapse chevron + count chip */
body[data-popout="coach"] #timeline-toggle,
body[data-popout="coach"] .timeline-collapse { display: none !important; }
body[data-popout="coach"] .tl-count { display: none !important; }

/* slightly more generous padding so the cards feel like real first-class panels */
body[data-popout="coach"] .coach-panel {
  padding: 18px 22px 22px;
  max-height: 50vh;
  border-radius: var(--r-md);
}
body[data-popout="coach"] .coach-content { gap: 16px; }
body[data-popout="coach"] .coach-row { font-size: 17px; line-height: 1.5; }
body[data-popout="coach"] .coach-suggestions { margin-top: 4px; }
body[data-popout="coach"] .coach-sugg { padding: 13px 16px; font-size: 16px; }

/* conversation card breathing room */
body[data-popout="coach"] #app .timeline { border-radius: var(--r-md); }
body[data-popout="coach"] .timeline-head {
  padding: 14px 18px 12px;
  justify-content: flex-start;
}
body[data-popout="coach"] #app .timeline > #chat {
  padding: 10px 8px 12px;
}
body[data-popout="coach"] #app .timeline #chat .bubble {
  padding: 10px 14px 10px 50px;
  font-size: 14px;
}

/* ============ STAGE — sphere booth (volumetric) ============ */
.stage {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(200px, 1fr) auto auto auto;
  align-items: center;
  justify-items: center;
  gap: 18px;
  padding: 20px 22px 22px;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  border-radius: var(--r-md);
  background:
    radial-gradient(ellipse 80% 60% at 50% 35%, rgba(20,30,50,0.5) 0%, transparent 70%),
    var(--ink-1);
  border: 1px solid var(--border);
  isolation: isolate;
}
@media (min-width: 1100px) { .stage { padding: 24px 24px 24px; gap: 20px; } }

/* status pill in top row, full-width left aligned */
.stage .stage-status { justify-self: stretch; z-index: 2; position: relative; }

/* === STARFIELD background — the "spatial" feel === */
.stage-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.starfield {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,0.6), transparent 100%),
    radial-gradient(1px 1px at 24% 73%, rgba(180,210,240,0.45), transparent 100%),
    radial-gradient(1px 1px at 38% 12%, rgba(255,255,255,0.35), transparent 100%),
    radial-gradient(1.5px 1.5px at 47% 86%, rgba(255,220,180,0.55), transparent 100%),
    radial-gradient(1px 1px at 62% 22%, rgba(180,210,240,0.55), transparent 100%),
    radial-gradient(1px 1px at 71% 64%, rgba(255,255,255,0.45), transparent 100%),
    radial-gradient(1px 1px at 84% 31%, rgba(255,200,160,0.4), transparent 100%),
    radial-gradient(1px 1px at 91% 78%, rgba(255,255,255,0.5), transparent 100%),
    radial-gradient(1px 1px at 7% 54%, rgba(180,210,240,0.35), transparent 100%),
    radial-gradient(1px 1px at 18% 92%, rgba(255,255,255,0.40), transparent 100%),
    radial-gradient(1px 1px at 33% 47%, rgba(255,220,180,0.30), transparent 100%),
    radial-gradient(1px 1px at 56% 6%, rgba(255,255,255,0.42), transparent 100%),
    radial-gradient(1.2px 1.2px at 79% 11%, rgba(180,210,240,0.50), transparent 100%),
    radial-gradient(1px 1px at 95% 56%, rgba(255,255,255,0.36), transparent 100%);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  animation: starDrift 60s linear infinite;
  opacity: 0.85;
}
@keyframes starDrift {
  0%   { transform: translateY(0) scale(1.0); opacity: 0.7; }
  50%  { transform: translateY(-6px) scale(1.02); opacity: 1; }
  100% { transform: translateY(0) scale(1.0); opacity: 0.7; }
}

/* === SPHERE — atmospheric volumetric body === */
.sphere-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 0;
  z-index: 1;
}
.sphere {
  --level: 0;
  position: relative;
  width: clamp(180px, 32vh, 280px);
  aspect-ratio: 1;
  /* Sphere is the PTT target across all viewports — give it a proper button feel */
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 140ms cubic-bezier(0.22, 1, 0.36, 1);
}
.sphere:hover { transform: scale(1.02); }
.sphere:active { transform: scale(0.97); }
/* Listening state: ember ring + glow on the sphere itself, replacing the
   old orange CTA's listening cue. Matches the mobile rule (now applied
   on every viewport). */
.stage[data-state="listening"] .sphere {
  box-shadow: 0 0 0 3px var(--ember-line), 0 0 32px rgba(216, 122, 64, 0.30);
  border-radius: 50%;
}
.stage[data-state="thinking"] .sphere,
.stage[data-state="speaking"] .sphere,
.stage[data-state="transcribing"] .sphere { cursor: default; }

/* outermost atmosphere ring — Saturn-style faint ring orbiting the body */
.sphere-ring {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  border: 1px solid transparent;
  background: conic-gradient(from 0deg,
    transparent 0deg,
    rgba(180,210,240,0.10) 60deg,
    rgba(255,255,255,0.18) 90deg,
    rgba(180,210,240,0.10) 120deg,
    transparent 180deg,
    rgba(180,210,240,0.06) 270deg,
    transparent 360deg);
  -webkit-mask: radial-gradient(circle, transparent 67%, #000 68%, #000 71%, transparent 72%);
          mask: radial-gradient(circle, transparent 67%, #000 68%, #000 71%, transparent 72%);
}
.sphere-ring-outer {
  inset: -22%;
  animation: irisSpin 60s linear infinite;
  opacity: 0.7;
}
/* PERF: .sphere-ring-mid removed — single ring is enough visually, halves compositor cost */
.sphere-ring-mid { display: none; }
@keyframes irisSpin { to { transform: rotate(360deg); } }

/* PERF: pause infinite sphere animations whenever the user isn't speaking/being listened to */
.stage[data-state="connecting"] .sphere-iris,
.stage[data-state="connecting"] .sphere-shimmer,
.stage[data-state="connecting"] .sphere-ring-outer,
.stage[data-state="connecting"] .sphere-ring-mid,
.stage[data-state="ready"] .sphere-iris,
.stage[data-state="ready"] .sphere-shimmer,
.stage[data-state="ready"] .sphere-ring-outer,
.stage[data-state="ready"] .sphere-ring-mid,
.stage[data-state="idle"] .sphere-iris,
.stage[data-state="idle"] .sphere-shimmer,
.stage[data-state="idle"] .sphere-ring-outer,
.stage[data-state="idle"] .sphere-ring-mid,
.stage[data-state="error"] .sphere-iris,
.stage[data-state="error"] .sphere-shimmer,
.stage[data-state="error"] .sphere-ring-outer,
.stage[data-state="error"] .sphere-ring-mid {
  animation-play-state: paused;
}
.stage[data-state="connecting"] .starfield,
.stage[data-state="error"] .starfield { animation-play-state: paused; }

/* PERF: respect users that opt out of motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* halo — the soft glow behind the sphere, reactive to mic level.
   PERF: replaced filter:blur(30px) with box-shadow which composites without re-rasterizing each frame. */
.sphere-halo {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: transparent;
  pointer-events: none;
  transform: scale(calc(1 + var(--level) * 0.18));
  transition: transform 120ms ease, box-shadow 400ms var(--ease), opacity 400ms var(--ease);
  opacity: 0.9;
  z-index: 0;
  box-shadow: 0 0 60px 18px rgba(160,200,230,0.22);
}

/* main sphere body — multi-layer for real volume */
.sphere-body {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  background:
    /* dark side shadow at bottom-right */
    radial-gradient(ellipse 65% 60% at 75% 80%, rgba(0,0,0,0.55) 0%, transparent 55%),
    /* tertiary lit area — bounce light from below */
    radial-gradient(ellipse 50% 35% at 50% 92%, rgba(80,120,170,0.18) 0%, transparent 60%),
    /* core gradient: cool indigo → black */
    radial-gradient(circle at 35% 30%, #2c3a55 0%, #131726 45%, #06070d 100%);
  border: 1px solid rgba(180,210,235,0.12);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.04),
    inset 0 -40px 80px rgba(0,0,0,0.45),
    0 24px 60px rgba(0,0,0,0.55);
  /* PERF: removed reactive transform — only the halo scales with --level now (one composite layer instead of two) */
  transition: border-color 400ms var(--ease), box-shadow 400ms var(--ease);
  z-index: 1;
}

/* atmospheric haze — soft inner glow on the lit side.
   PERF: dropped mix-blend-mode:screen (breaks compositing fast-path); opacity gives near-identical look. */
.sphere-atmosphere {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(120,170,220,0.30) 0%, rgba(120,170,220,0) 50%);
  pointer-events: none;
  opacity: 0.85;
  z-index: 2;
}

/* refraction shimmer — slow conic giving iridescent caustic feel.
   PERF: kept blur(8px) instead of 18px; dropped mix-blend-mode:screen. */
.sphere-iris {
  position: absolute;
  inset: -6%;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    rgba(140,180,230,0) 0deg,
    rgba(180,220,250,0.32) 60deg,
    rgba(255,255,255,0.22) 100deg,
    rgba(220,180,140,0.16) 150deg,
    rgba(140,180,230,0) 200deg,
    rgba(160,200,240,0.24) 290deg,
    rgba(140,180,230,0) 360deg);
  filter: blur(8px);
  animation: irisSpin 18s linear infinite;
  opacity: 0.75;
  pointer-events: none;
  z-index: 2;
}

/* PERF: .sphere-shimmer collapsed into .sphere-iris (single conic, less compositor work) */
.sphere-shimmer { display: none; }

/* fresnel rim — bright edge highlight, classic 3D sphere look */
.sphere-fresnel {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
    transparent 60%,
    rgba(180,210,240,0.08) 72%,
    rgba(255,255,255,0.18) 78%,
    rgba(180,210,240,0.06) 86%,
    transparent 100%);
  pointer-events: none;
  z-index: 3;
  transition: background 400ms var(--ease);
}

/* glossy specular highlight on top-left */
.sphere-highlight {
  position: absolute;
  top: 8%; left: 16%;
  width: 46%; height: 36%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 30% 25%,
    rgba(255,255,255,0.65) 0%,
    rgba(255,255,255,0.18) 30%,
    rgba(255,255,255,0) 65%);
  filter: blur(1.5px);
  pointer-events: none;
  opacity: 0.85;
  z-index: 4;
}

.sphere-mic {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 22%; height: 22%;
  color: rgba(242,237,229,0.55);
  z-index: 5;
  pointer-events: none;
  transition: opacity 240ms var(--ease), color 240ms var(--ease);
}
.sphere-wave {
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 240ms var(--ease);
  z-index: 5;
}

/* per-state morphing */
.stage[data-state="connecting"] .sphere-halo,
.stage[data-state="connecting"] .sphere-body { opacity: 0.6; }
.stage[data-state="connecting"] .sphere-mic  { opacity: 0.3; }

.stage[data-state="ready"] .sphere-halo,
.stage[data-state="idle"]  .sphere-halo {
  animation: spherePulse 4.4s ease-in-out infinite;
}
@keyframes spherePulse { 50% { transform: scale(1.08); opacity: 1; } }

/* LISTENING — ember atmosphere */
.stage[data-state="listening"] .sphere-halo {
  background: radial-gradient(circle, rgba(255,106,44,0.55) 0%, rgba(255,106,44,0) 60%);
  opacity: 1;
}
.stage[data-state="listening"] .sphere-body {
  border-color: rgba(255,106,44,0.45);
  box-shadow:
    inset 0 0 0 1px rgba(255,180,140,0.10),
    inset 0 -40px 80px rgba(255,106,44,0.10),
    0 24px 60px rgba(255,106,44,0.32);
}
.stage[data-state="listening"] .sphere-atmosphere {
  background: radial-gradient(circle at 35% 30%, rgba(255,180,140,0.30) 0%, rgba(255,180,140,0) 50%);
}
.stage[data-state="listening"] .sphere-fresnel {
  background: radial-gradient(circle at 50% 50%,
    transparent 60%,
    rgba(255,180,140,0.10) 72%,
    rgba(255,180,140,0.32) 78%,
    rgba(255,180,140,0.10) 86%,
    transparent 100%);
}
.stage[data-state="listening"] .sphere-iris {
  background: conic-gradient(from 0deg,
    rgba(255,106,44,0) 0deg,
    rgba(255,180,120,0.45) 80deg,
    rgba(255,220,180,0.35) 140deg,
    rgba(255,106,44,0) 220deg,
    rgba(255,160,100,0.40) 300deg,
    rgba(255,106,44,0) 360deg);
  animation-duration: 6s;
  opacity: 0.95;
}
.stage[data-state="listening"] .sphere-ring {
  background: conic-gradient(from 0deg,
    transparent 0deg,
    rgba(255,180,140,0.18) 60deg,
    rgba(255,220,180,0.30) 90deg,
    rgba(255,180,140,0.18) 120deg,
    transparent 180deg);
}
.stage[data-state="listening"] .sphere-mic { opacity: 0; }
.stage[data-state="listening"] .sphere-wave { opacity: 0.95; }

/* THINKING — ember pulse */
.stage[data-state="transcribing"] .sphere-iris,
.stage[data-state="thinking"]     .sphere-iris {
  animation-duration: 4s;
  opacity: 0.9;
}
.stage[data-state="thinking"] .sphere-halo {
  background: radial-gradient(circle, rgba(255,106,44,0.42) 0%, rgba(255,106,44,0) 60%);
  animation: thinkPulse 1.1s ease-in-out infinite;
}
@keyframes thinkPulse { 0%,100% { transform: scale(0.9); opacity: 0.5; } 50% { transform: scale(1.1); opacity: 1; } }
.stage[data-state="thinking"] .sphere-mic { opacity: 0; }

/* SPEAKING — moss atmosphere */
.stage[data-state="speaking"] .sphere-halo {
  background: radial-gradient(circle, rgba(127,163,122,0.50) 0%, rgba(127,163,122,0) 60%);
  animation: spherePulse 0.9s ease-in-out infinite;
  opacity: 1;
}
.stage[data-state="speaking"] .sphere-body {
  border-color: rgba(127,163,122,0.45);
  box-shadow:
    inset 0 0 0 1px rgba(180,220,180,0.10),
    inset 0 -40px 80px rgba(127,163,122,0.12),
    0 24px 60px rgba(127,163,122,0.28);
}
.stage[data-state="speaking"] .sphere-atmosphere {
  background: radial-gradient(circle at 35% 30%, rgba(180,220,180,0.30) 0%, rgba(180,220,180,0) 50%);
}
.stage[data-state="speaking"] .sphere-fresnel {
  background: radial-gradient(circle at 50% 50%,
    transparent 60%,
    rgba(180,220,180,0.10) 72%,
    rgba(180,220,180,0.32) 78%,
    rgba(180,220,180,0.10) 86%,
    transparent 100%);
}
.stage[data-state="speaking"] .sphere-iris {
  background: conic-gradient(from 0deg,
    rgba(127,163,122,0) 0deg,
    rgba(180,220,180,0.42) 80deg,
    rgba(255,255,255,0.20) 140deg,
    rgba(127,163,122,0) 220deg,
    rgba(160,200,180,0.40) 300deg,
    rgba(127,163,122,0) 360deg);
  animation-duration: 8s;
  opacity: 0.95;
}
.stage[data-state="speaking"] .sphere-mic { color: var(--moss); }

.stage[data-state="error"] .sphere-halo {
  background: radial-gradient(circle, rgba(194,85,58,0.40) 0%, rgba(194,85,58,0) 62%);
}
.stage[data-state="error"] .sphere-mic { color: var(--rust); }

/* === BIG SESSION TIMER + TODAY === */
.stage-timer-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  z-index: 1;
  position: relative;
}
.stage-timer {
  font-size: clamp(40px, 7.5vh, 60px);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.025em;
  color: var(--ice-0);
  line-height: 1;
}
.stage[data-state="listening"]   .stage-timer { color: var(--ember); }
.stage[data-state="thinking"]    .stage-timer,
.stage[data-state="transcribing"].stage-timer { color: var(--ember); }
.stage[data-state="speaking"]    .stage-timer { color: var(--moss); }

.stage-timer-row {
  display: flex; align-items: baseline; gap: 8px;
  font-variant-numeric: tabular-nums;
}
.stage-timer-l {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.8px;
  color: var(--ice-2);
  font-weight: 700;
}
.stage-timer-today {
  font-size: 13px;
  font-weight: 700;
  color: var(--ice-1);
  letter-spacing: -0.005em;
}
.stage-timer-sep {
  color: var(--ice-3);
  font-size: 11px;
}

/* status pill at top of the stage */
.stage-status {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 2px;
}
.stage-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ice-3);
  flex-shrink: 0;
  transition: background var(--t-base) var(--ease);
}
.stage[data-state="connecting"] .stage-dot { background: var(--ice-2); animation: stagePulse 1.6s ease-in-out infinite; }
.stage[data-state="ready"] .stage-dot,
.stage[data-state="idle"] .stage-dot       { background: var(--moss); }
.stage[data-state="listening"] .stage-dot  { background: var(--rust); animation: stagePulse 0.9s ease-in-out infinite; }
.stage[data-state="transcribing"] .stage-dot,
.stage[data-state="thinking"] .stage-dot   { background: var(--ember); animation: stagePulse 1.1s ease-in-out infinite; }
.stage[data-state="speaking"] .stage-dot   { background: var(--moss); animation: stagePulse 0.8s ease-in-out infinite; }
.stage[data-state="error"] .stage-dot      { background: var(--rust); }
@keyframes stagePulse { 50% { opacity: 0.35; } }

.stage-state {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  font-weight: 600;
  color: var(--ice-1);
  font-feature-settings: "tnum";
}
.stage[data-state="listening"] .stage-state    { color: var(--rust); }
.stage[data-state="speaking"] .stage-state     { color: var(--moss); }
.stage[data-state="thinking"] .stage-state     { color: var(--ember); }

.stage-skip {
  margin-left: auto;
  padding: 5px 10px;
  background: transparent;
  border: 1px solid var(--border-hi);
  color: var(--ice-1);
  border-radius: var(--r-sm);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
  font-family: inherit;
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.stage-skip:hover { border-color: var(--ember-line); color: var(--ember); }
.stage-skip[hidden] { display: none; }
.stage-skip .icon-sm { width: 12px; height: 12px; }

/* === Pause / Resume button — sits in the stage status row === */
.stage-pause {
  margin-left: auto;
  padding: 5px 10px 5px 8px;
  background: transparent;
  border: 1px solid var(--border-hi);
  color: var(--ice-1);
  border-radius: var(--r-sm);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: inherit;
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.stage-pause:hover { border-color: var(--ember-line); color: var(--ember); }
.stage-pause .icon-sm { width: 12px; height: 12px; }
/* when there's also a skip button visible, push pause to the left of it */
.stage-pause + .stage-skip { margin-left: 8px; }
/* hide pause when connecting/erroring (button useless) */
.stage[data-state="connecting"] .stage-pause,
.stage[data-state="error"] .stage-pause { display: none; }
/* paused look */
.stage[data-paused="true"] .stage-pause {
  border-color: var(--mustard);
  color: var(--mustard);
}
.stage[data-paused="true"] .stage-pause .pause-i { display: none; }
.stage[data-paused="true"] .stage-pause .play-i  { display: inline-block !important; }

/* When paused, freeze the stage: dim sphere, gray timer, disable CTA */
.stage[data-paused="true"] .sphere-iris,
.stage[data-paused="true"] .sphere-ring-outer,
.stage[data-paused="true"] .sphere-shimmer,
.stage[data-paused="true"] .sphere-halo { animation-play-state: paused !important; }
.stage[data-paused="true"] .sphere-body { filter: grayscale(0.5) brightness(0.6); }
.stage[data-paused="true"] .stage-timer  { color: var(--ice-2) !important; }
.stage[data-paused="true"] .stage-state  { color: var(--mustard) !important; }
.stage[data-paused="true"] .stage-dot    { background: var(--mustard) !important; animation: none !important; }
.stage[data-paused="true"] .stage-cta {
  background: var(--ink-3) !important;
  color: var(--ice-2) !important;
  pointer-events: none !important;
  opacity: 0.6;
}
.stage[data-paused="true"] .stage-cta-label::after { content: ' (paused)'; opacity: 0.7; font-weight: 500; }

/* the central card — morphs through prompt → live → coach */
.stage-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 0;
  overflow: hidden;
  position: relative;
  width: 100%;
  text-align: center;
}
.stage-slot {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  width: 100%;
  max-width: 460px;
  align-items: center;
}
.stage-slot[hidden] { display: none; }
.stage-prompt-empty {
  font-size: 14px;
  color: var(--ice-2);
  letter-spacing: -0.005em;
  line-height: 1.5;
}

.stage-eyebrow {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.8px;
  font-weight: 700;
  color: var(--ice-2);
}
.stage-eyebrow-live  { color: var(--rust); }
.stage-eyebrow-coach { color: var(--ember); }

/* PROMPT slot (idle state) */
.stage-prompt-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.stage-prompt-empty {
  font-size: 17px;
  line-height: 1.45;
  color: var(--ice-1);
  letter-spacing: -0.01em;
  max-width: 540px;
}
.stage-prompt-chip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--ink-3);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--ice-0);
  font-size: 15px;
  line-height: 1.4;
  letter-spacing: -0.005em;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.stage-prompt-chip:hover { border-color: var(--ember-line); background: var(--ink-3); }
.stage-prompt-chip-bullet {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--ice-3);
  flex-shrink: 0;
  position: relative;
}
.stage-prompt-chip:hover .stage-prompt-chip-bullet { border-color: var(--ember); }

/* LIVE slot (listening / transcribing) */
.stage-wave {
  width: 100%;
  height: 88px;
  display: block;
}
.stage-partial {
  font-size: 18px;
  line-height: 1.4;
  color: var(--ice-0);
  letter-spacing: -0.01em;
  min-height: 1.4em;
  font-weight: 500;
  max-width: 720px;
}
.stage-partial:empty::before {
  content: 'Hearing you…';
  color: var(--ice-2);
  font-weight: 400;
  font-style: normal;
}
.stage-partial[data-kind="hint"] {
  color: var(--ice-2);
  font-size: 15px;
  font-weight: 400;
}

/* === Hold-to-speak CTA — DEPRECATED.
   The sphere itself is now the unified PTT target across ALL viewports
   (desktop, tablet, mobile). Hidden everywhere; kept in HTML so existing
   keyboard handlers still work for accessibility. === */
.stage-cta { display: none !important; }
.stage-cta-deprecated-styles-below {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 14px 22px;
  background: var(--ember);
  color: var(--ink-0);
  border: 0;
  border-radius: var(--r-md);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.005em;
  cursor: pointer;
  position: relative;
  transition: background var(--t-fast) var(--ease), transform 80ms var(--ease);
  -webkit-tap-highlight-color: transparent;
  min-height: 52px;
}
.stage-cta:hover { background: var(--ember-soft); }
.stage-cta:active { transform: translateY(1px); }
.stage-cta:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; }
.stage-cta-icon { width: 18px; height: 18px; flex-shrink: 0; }
.stage-cta-label { font-size: 15px; font-weight: 700; letter-spacing: -0.005em; }
.stage-cta-hint  { font-size: 11px; font-weight: 500; opacity: 0.65; letter-spacing: 0.4px; text-transform: uppercase; }
@media (min-width: 1100px) {
  .stage-cta { padding: 16px 22px; min-height: 56px; font-size: 16px; }
  .stage-cta-label { font-size: 16px; }
}

/* CTA listening state: rust glow + scale subtle bounce */
.stage[data-state="listening"] .stage-cta {
  background: var(--rust);
}

/* CTA per-state morphing */
.stage[data-state="connecting"] .stage-cta,
.stage[data-state="error"] .stage-cta {
  background: var(--ink-3);
  color: var(--ice-2);
  cursor: not-allowed;
  pointer-events: none;
}
.stage[data-state="listening"] .stage-cta {
  background: var(--rust);
  color: var(--ice-0);
}
.stage[data-state="listening"] .stage-cta-label::after {
  content: '';
}
.stage[data-state="thinking"] .stage-cta,
.stage[data-state="transcribing"] .stage-cta {
  background: var(--ink-3);
  color: var(--ice-1);
  pointer-events: none;
}
.stage[data-state="speaking"] .stage-cta {
  background: var(--ink-3);
  color: var(--ice-1);
}

/* legacy orb selectors stubbed so any remaining DOM/JS references die quietly */
.orb,
.orb-glow,
.orb-core,
.orb-mic,
.orb-wave { display: none !important; }

/* ============ COACH PANEL — sidebar resident ============ */
.coach-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 18px 18px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--ink-2);
  min-height: 0;
  position: relative;
  flex-shrink: 0;
  max-height: 50vh;
  overflow-y: auto;
}
.coach-panel::-webkit-scrollbar { width: 4px; }
.coach-panel::-webkit-scrollbar-thumb { background: var(--border-hi); border-radius: 2px; }
@media (min-width: 1024px) {
  .coach-panel { max-height: none; }
}
.coach-panel[data-empty="true"] { background: var(--ink-2); }
.coach-panel.coach-just-updated {
  animation: coachPulse 1.4s var(--ease);
}
@keyframes coachPulse {
  0%   { border-color: var(--ember); }
  20%  { border-color: var(--ember); }
  100% { border-color: var(--border); }
}
.coach-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 0;
}
.coach-title {
  flex: 1;
  font-size: 13px;
  color: var(--ice-1);
  letter-spacing: -0.005em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: 500;
}
.coach-close,
.coach-popout {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 0;
  color: var(--ice-2);
  border-radius: var(--r-sm);
  cursor: pointer;
  flex-shrink: 0;
  font-family: inherit;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.coach-close:hover,
.coach-popout:hover { background: var(--ink-3); color: var(--ember); }
.coach-close svg,
.coach-popout svg { width: 14px; height: 14px; }
/* hide pop-out when we're already a popout window OR on small screens (no second monitor) */
body[data-popout="coach"] .coach-popout { display: none; }
@media (max-width: 1099px) { #coach-popout { display: none; } }

/* === EXPAND/COLLAPSE chevron on coach + timeline headers === */
.side-expand {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 0;
  color: var(--ice-2);
  border-radius: var(--r-sm);
  cursor: pointer;
  flex-shrink: 0;
  font-family: inherit;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-base) var(--ease);
}
.side-expand:hover { background: var(--ink-3); color: var(--ember); }
.side-expand-i { width: 14px; height: 14px; transition: transform var(--t-base) var(--ease); }
/* default chevron points up = "expand". When card is focused (already expanded) → flips down */
.coach-panel[data-expanded="true"] #coach-expand .side-expand-i,
.timeline[data-expanded="true"]    #conv-expand  .side-expand-i {
  transform: rotate(180deg);
}
/* hide expand-icon entirely while we're inside a popout (no need to rearrange) */
body[data-popout="coach"] .side-expand { display: none; }
/* on phones the timeline collapse legacy was in HTML — already hidden via display:none earlier */

/* === FOCUS states — clicking expand on one collapses the OTHER === */
/* Mobile/tablet (stacked): when focused, that card grows; the other collapses to header only. */
@media (max-width: 1099px) {
  /* coach focused → conversation chat hidden, only its header is visible */
  #app .practice[data-side-focus="coach"] #chat { display: none; }
  #app .practice[data-side-focus="coach"] .coach-panel {
    min-height: calc(100dvh - 320px);
    max-height: none;
  }
  /* conversation focused → coach content/empty hidden, only its header visible */
  #app .practice[data-side-focus="conv"] .coach-content,
  #app .practice[data-side-focus="conv"] .coach-empty { display: none; }
  #app .practice[data-side-focus="conv"] .coach-panel { min-height: 0; }
  #app .practice[data-side-focus="conv"] .timeline { min-height: calc(100dvh - 320px); }
  #app .practice[data-side-focus="conv"] #chat { max-height: none; }
}

/* Desktop (3-col): expand changes column widths instead of stacking */
@media (min-width: 1100px) {
  #app .practice[data-side-focus="coach"] {
    grid-template-columns: minmax(220px, 0.6fr) minmax(380px, 1.15fr) minmax(420px, 1.6fr);
  }
  #app .practice[data-side-focus="conv"] {
    grid-template-columns: minmax(420px, 1.6fr) minmax(380px, 1.15fr) minmax(220px, 0.6fr);
  }
}

.coach-empty {
  font-size: 13px;
  color: var(--ice-2);
  line-height: 1.5;
  letter-spacing: -0.005em;
  padding: 4px 0 0;
}
.coach-panel[data-empty="false"] .coach-empty { display: none; }
.coach-content { display: flex; flex-direction: column; gap: 12px; padding-top: 2px; }

.coach-row {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  gap: 14px;
  align-items: baseline;
  font-size: 16px;
  line-height: 1.45;
}
.coach-row[hidden] { display: none; }
.coach-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  color: var(--ice-2);
  font-weight: 700;
}
.coach-row[data-kind="original"] .coach-text {
  color: var(--ice-2);
  text-decoration: line-through;
  text-decoration-color: var(--rust);
  text-decoration-thickness: 1.5px;
}
.coach-row[data-kind="better"] .coach-label { color: var(--ember); }
.coach-row[data-kind="better"] .coach-text {
  color: var(--ember);
  font-weight: 600;
  letter-spacing: -0.005em;
}
.coach-row[data-kind="why"] .coach-text {
  color: var(--ice-1);
  font-size: 14px;
}

.coach-suggestions {
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.coach-suggestions[hidden] { display: none; }
.coach-suggestions .coach-label { color: var(--ice-2); }
.coach-sugg-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.coach-sugg {
  flex: 0 1 auto;
  background: var(--ink-3);
  border: 1px solid var(--border);
  color: var(--ice-0);
  padding: 11px 14px;
  border-radius: var(--r-sm);
  font-size: 15px;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: -0.005em;
  text-align: left;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
  max-width: 100%;
  white-space: normal;
  line-height: 1.4;
}
.coach-sugg:hover { border-color: var(--ember-line); }
.coach-sugg:active { transform: translateY(1px); }
.coach-sugg.copied {
  border-color: var(--moss);
  color: var(--moss);
  background: var(--moss-soft);
}

@media (max-width: 540px) {
  .coach-row { grid-template-columns: 1fr; gap: 4px; }
  .coach-label { font-size: 9px; }
  .coach-row { font-size: 15px; }
}

/* ============ TIMELINE — sidebar conversation log ============ */
#app .timeline {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--ink-2);
  overflow: hidden;
}
.timeline-head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--border);
}
.timeline-head .stage-eyebrow { flex: 0; }
.tl-count {
  margin-right: auto;
  background: var(--ink-3);
  border: 1px solid var(--border);
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--ice-1);
  font-weight: 600;
  letter-spacing: 0;
}
.timeline-collapse {
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 0;
  color: var(--ice-2);
  border-radius: var(--r-sm);
  cursor: pointer;
  flex-shrink: 0;
  font-family: inherit;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.timeline-collapse:hover { background: var(--ink-3); color: var(--ice-0); }
.tl-chev {
  width: 7px; height: 7px;
  border-right: 1.5px solid var(--ice-2);
  border-bottom: 1.5px solid var(--ice-2);
  transform: rotate(45deg);
  transition: transform var(--t-fast) var(--ease);
}
#app .timeline[data-open="false"] .tl-chev { transform: rotate(-45deg); }
#app .timeline[data-open="false"] > #chat { display: none; }

#app .timeline > #chat {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 8px 6px;
  min-height: 0;
  overflow-y: auto;
  background: var(--ink-2);
}
@media (max-width: 1023px) {
  #app .timeline > #chat { max-height: 30vh; }
}
#app .timeline > #chat::-webkit-scrollbar { width: 4px; }
#app .timeline > #chat::-webkit-scrollbar-thumb { background: var(--border-hi); border-radius: 2px; }

/* legacy toggle (no longer rendered) */
.timeline-toggle { display: none; }
.tl-icon, .tl-label { display: none; }

#app .timeline #chat .empty-hint {
  margin: 16px auto;
  font-size: 12px;
  color: var(--ice-2);
  padding: 12px;
  text-align: center;
  background: transparent;
  border: 1px dashed var(--border);
  border-radius: var(--r-sm);
  letter-spacing: -0.005em;
  line-height: 1.5;
}

#app .timeline #chat .ai-turn {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0;
  margin: 0;
}
#app .timeline #chat .bubble {
  max-width: 100%;
  margin: 0;
  padding: 9px 12px 9px 48px;
  background: transparent;
  border: 0;
  border-radius: 0;
  border-left: 2px solid transparent;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ice-0);
  position: relative;
  box-shadow: none;
  animation: tlIn .15s var(--ease);
}
@keyframes tlIn { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: none; } }
#app .timeline #chat .bubble::before {
  position: absolute;
  left: 12px; top: 11px;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  font-weight: 800;
  width: 28px;
  display: inline-block;
}
#app .timeline #chat .bubble.user::before { content: 'YOU'; color: var(--ember); }
#app .timeline #chat .bubble.ai::before   { content: 'AI';  color: var(--moss); }
#app .timeline #chat .bubble.user { border-left-color: var(--ember-line); }
#app .timeline #chat .bubble.ai   { border-left-color: rgba(127,163,122,0.30); }
#app .timeline #chat .bubble.thinking::after { color: var(--ember); }

#app .timeline #chat .correction-block,
#app .timeline #chat .vocab-block,
#app .timeline #chat .suggestions-block,
#app .timeline #chat .replay-btn,
#app .timeline #chat .shadow-btn,
#app .timeline #chat .native-rewrite { display: none; }

/* ============ TEXT-TOGGLE in topbar ============ */
#app .text-toggle.active {
  background: var(--ember-fade);
  border-color: var(--ember);
  color: var(--ember);
}

/* ============ TEXT BAR (fixed bottom popover) ============ */
#app .text-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  display: flex;
  gap: 10px;
  padding: 12px 16px max(12px, calc(env(safe-area-inset-bottom) + 8px));
  background: var(--ink-2);
  /* PERF: backdrop-filter removed */
  border-top: 1px solid var(--border-hi);
  z-index: 30;
  box-shadow: 0 -10px 34px rgba(0,0,0,0.5);
  animation: textBarUp .22s cubic-bezier(.2,.9,.3,1.4);
}
@keyframes textBarUp {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
#app .text-bar[hidden] { display: none; }
@media (min-width: 1024px) {
  #app .text-bar {
    left: auto; right: 28px; bottom: 24px;
    width: min(560px, calc(50vw - 60px));
    border-radius: var(--r-md);
    border: 1px solid var(--border-hi);
    border-bottom-left-radius: var(--r-md);
    padding: 12px 14px;
    box-shadow: var(--shadow-2);
  }
}
#app #text-input {
  flex: 1;
  padding: 13px 16px;
  border: 1px solid var(--border);
  background: var(--ink-1);
  color: var(--ice-0);
  border-radius: var(--r-md);
  font-size: 14px;
  font-family: inherit;
  outline: none;
  min-height: 46px;
  letter-spacing: -0.005em;
}
#app #text-input::placeholder { color: var(--ice-2); }
#app #text-input:focus {
  border-color: var(--ember);
  background: var(--ink-2);
}
#app .send-btn {
  display: flex; align-items: center; justify-content: center;
  width: 46px; min-height: 46px;
  background: var(--ember);
  border: 0;
  color: var(--ink-0);
  border-radius: var(--r-sm);
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--t-fast) var(--ease);
}
#app .send-btn:hover { background: var(--ember-soft); }
#app .send-btn .icon { width: 18px; height: 18px; }

/* billing as floating dev pill (hidden unless devMode toggled) */
#app #billing-strip {
  position: fixed;
  bottom: 10px; left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  background: var(--ink-2);
  /* PERF: backdrop-filter removed */
  border: 1px solid var(--border);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  pointer-events: none;
  display: none;
}
#app #billing-strip.dev-on { display: inline-flex; }
#app #billing-strip > *:not(.bill-study) { display: none; }
#app #billing-strip.dev-on > * { display: inline; }

/* landscape phones: compact stage stacked layout */
@media (orientation: landscape) and (max-height: 540px) and (max-width: 1023px) {
  #app .practice {
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 8px;
    padding: 8px 10px 10px;
  }
  .stage { padding: 12px 14px 16px; gap: 12px; }
  .stage-cta { padding: 12px 14px; font-size: 14px; }
  .stage-cta-hint { display: none; }
  .stage-prompt-empty { font-size: 14px; }
  .stage-partial { font-size: 14px; }
  .stage-wave { height: 56px; }
}

/* ============================================================
   HOME V2 — speaking-first home
   Hero (Continue OR Fresh) + Progress/Vocab cards + Mode list + Defaults
   ============================================================ */

#home-view.home-view {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  width: 100vw;
  background: var(--ink-1);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
/* CRITICAL: hidden attribute must override the high-specificity display:flex above */
#home-view.home-view[hidden] { display: none; }
#home-view.home-view::-webkit-scrollbar { width: 4px; }
#home-view.home-view::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.06); border-radius: 2px; }

/* topbar — refined */
#home-view .home-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 20px 12px;
  padding-top: max(18px, env(safe-area-inset-top));
  flex: none;
}
#home-view .home-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
#home-view .brand-mark {
  width: 38px; height: 38px;
  border-radius: var(--r-sm);
  background: var(--ember);
  flex-shrink: 0;
  position: relative;
}
#home-view .brand-mark::before {
  content: 'D';
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 800;
  color: var(--ink-0);
  letter-spacing: -0.04em;
}
#home-view .brand-mark::after { content: none; }
#home-view .brand-stack { min-width: 0; }
#home-view .brand-greeting {
  font-size: 11px;
  color: var(--ice-2);
  letter-spacing: 1.4px;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 2px;
}
#home-view .brand-username {
  font-size: 18px;
  font-weight: 700;
  color: var(--ice-0);
  letter-spacing: -0.02em;
  font-family: ui-rounded, "SF Pro Rounded", -apple-system, "Inter", system-ui, sans-serif;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 56vw;
}
@media (min-width: 720px) {
  #home-view .brand-username { font-size: 20px; max-width: none; }
}

/* Mobile portrait: home topbar has 6 icon-btns + avatar + brand on the left.
   On a 375px phone the row overflowed. Drop the decorative brand-mark and
   "Welcome back" eyebrow, shrink icons + gap, harder username truncation —
   keeps the 6 nav targets reachable while the username fits whatever space
   remains. */
@media (max-width: 640px) {
  #home-view .home-topbar {
    padding: 10px 12px !important;
    padding-top: max(10px, env(safe-area-inset-top)) !important;
    gap: 8px !important;
  }
  #home-view .home-brand { gap: 0 !important; min-width: 0; }
  #home-view .brand-mark { display: none !important; }
  #home-view .brand-greeting { display: none !important; }
  #home-view .brand-username {
    font-size: 15px !important;
    max-width: 30vw !important;
  }
  #home-view .home-top-actions { gap: 3px !important; }
  #home-view .icon-btn-sm { width: 30px !important; height: 30px !important; }
  #home-view .icon-btn-sm svg { width: 14px !important; height: 14px !important; }
  #home-view .avatar-btn { width: 30px !important; height: 30px !important; font-size: 11px !important; }
}

/* Extra-tight for narrow phones (<=380px): drop the username text entirely if
   it would push icons off the row. The avatar still anchors identity. */
@media (max-width: 380px) {
  #home-view .brand-username { display: none !important; }
}

#home-view .home-top-actions { display: flex; gap: 6px; align-items: center; }
#home-view .icon-btn-sm {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--ice-1);
  cursor: pointer;
  transition: background .14s, color .14s, border-color .14s;
  flex-shrink: 0;
}
#home-view .icon-btn-sm:hover {
  background: rgba(255,255,255,0.04);
  color: var(--ice-0);
  border-color: var(--border);
}
#home-view .icon-btn-sm svg { width: 17px; height: 17px; }

#home-view .home-content {
  flex: 1;
  padding: 4px 20px max(28px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 1180px;
  width: 100%;
  margin: 0 auto;
}
@media (min-width: 1100px) {
  #home-view .home-content {
    padding: 8px 32px 36px;
    gap: 26px;
  }
}

/* ============ HERO ============ */
.home-hero {
  position: relative;
  padding: 26px 24px 24px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--ink-2);
  overflow: hidden;
}
.home-hero::before { content: none; }
.home-hero[data-state="resume"] .hero-fresh { display: none; }
.home-hero[data-state="fresh"]  .hero-resume { display: none; }

/* fresh hero — first time / no recent session */
.hero-fresh {
  position: relative;
  z-index: 1;
}
.hero-fresh-eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  color: var(--ember);
  font-weight: 700;
  margin-bottom: 10px;
}
.hero-fresh-title {
  font-family: ui-rounded, "SF Pro Rounded", -apple-system, "Inter", system-ui, sans-serif;
  font-size: clamp(28px, 6vw, 42px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.05;
  color: var(--ice-0);
  margin-bottom: 12px;
}
.hero-fresh-desc {
  font-size: 15px;
  color: var(--ice-1);
  line-height: 1.55;
  letter-spacing: -0.005em;
  max-width: 560px;
}

/* resume hero — returning user */
.hero-resume {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hero-resume-eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  color: var(--ember);
  font-weight: 700;
}
.hero-resume-name {
  font-family: ui-rounded, "SF Pro Rounded", -apple-system, "Inter", system-ui, sans-serif;
  font-size: clamp(24px, 5vw, 34px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--ice-0);
  margin: 0;
}
.hero-resume-preview {
  font-size: 14.5px;
  color: var(--ice-1);
  line-height: 1.5;
  letter-spacing: -0.005em;
  font-style: italic;
  margin: 4px 0 0;
  max-width: 720px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  opacity: 0.92;
}
.hero-resume-preview:empty { display: none; }
.hero-resume-meta {
  font-size: 11px;
  color: var(--ice-2);
  text-transform: uppercase;
  letter-spacing: 1.4px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}
.hero-resume-cta {
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px 12px 12px;
  align-self: flex-start;
  background: var(--ember);
  border: 0;
  color: var(--ink-0);
  border-radius: var(--r-sm);
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.005em;
  text-align: left;
  transition: background var(--t-fast) var(--ease), transform 80ms var(--ease);
}
.hero-resume-cta:hover { background: var(--ember-soft); }
.hero-resume-cta:active { transform: translateY(1px); }
.hero-resume-orb {
  position: relative;
  width: 30px; height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  background: rgba(8,7,10,0.18);
  flex-shrink: 0;
}
.hero-resume-orb-glow { display: none; }
.hero-resume-orb svg { width: 15px; height: 15px; color: var(--ink-0); }
.hero-resume-cta-stack { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.hero-resume-cta-l {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.005em;
}
.hero-resume-cta-s {
  font-size: 11px;
  font-weight: 500;
  color: rgba(8,7,10,0.65);
  letter-spacing: 0.1px;
}
.hero-resume-cta .arrow {
  margin-left: 6px;
  font-weight: 700;
  transition: transform var(--t-fast) var(--ease);
  flex-shrink: 0;
}
.hero-resume-cta:hover .arrow { transform: translateX(3px); }

@media (min-width: 1100px) {
  .home-hero { padding: 32px 32px 30px; }
}

/* ============ STATS ROW ============ */
.home-stats-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 640px) { .home-stats-row { grid-template-columns: 1fr 1fr; gap: 14px; } }

.stat-card {
  position: relative;
  padding: 16px 18px 18px;
  background: var(--ink-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
  font-family: inherit;
  color: var(--ice-0);
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
button.stat-card { cursor: pointer; }
button.stat-card:hover { border-color: var(--border-hi); }
.stat-card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.stat-eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  color: var(--ice-2);
  font-weight: 700;
}

.progress-card .stat-streak {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px 3px 8px;
  background: var(--mustard-soft);
  border: 1px solid rgba(232,197,71,0.32);
  border-radius: var(--r-sm);
  color: var(--mustard);
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
}
.progress-card .stat-streak svg { width: 12px; height: 12px; }
.progress-card .stat-streak-l { font-weight: 600; opacity: 0.85; font-size: 11px; }

.stat-progress { display: flex; flex-direction: column; gap: 8px; }
.stat-progress-v {
  display: flex; align-items: baseline; gap: 6px;
  font-family: ui-rounded, "SF Pro Rounded", -apple-system, "Inter", system-ui, sans-serif;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--ice-0);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.stat-progress-goal {
  font-size: 12px;
  color: var(--ice-2);
  font-weight: 500;
  letter-spacing: 0;
}
.stat-progress-bar {
  height: 4px;
  background: var(--ink-3);
  border-radius: 0;
  overflow: hidden;
  position: relative;
}
.stat-progress-fill {
  height: 100%;
  background: var(--ember);
  border-radius: 0;
  transition: width var(--t-base) var(--ease);
  min-width: 0;
}

.streak-dots {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}
.sdot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ink-3);
  border: 1px solid var(--border);
  flex-shrink: 0;
  transition: background var(--t-fast) var(--ease);
}
.sdot.filled { background: var(--mustard); border-color: var(--mustard); }
.sdot.today  { width: 10px; height: 10px; }
.sdot.today.filled { background: var(--ember); border-color: var(--ember); }

.vocab-card { border-color: var(--border); }
.vocab-card[data-state="active"] {
  background: var(--ink-2);
  border-color: var(--mustard);
}
.vocab-card[data-state="active"]:hover { border-color: var(--mustard); }
.vocab-card .stat-counter {
  font-size: 11px;
  color: var(--ice-2);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.2px;
}
.vocab-card .stat-counter span:first-child { color: var(--ice-0); font-weight: 700; }

.vocab-state { display: flex; flex-direction: column; flex: 1; justify-content: center; }
.vocab-state-empty {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--ice-2);
  letter-spacing: -0.005em;
  line-height: 1.45;
}
.vocab-empty-icon {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ink-3);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--ice-2);
  flex-shrink: 0;
}
.vocab-empty-icon svg { width: 14px; height: 14px; }

.vocab-state-active {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.vocab-due-v {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.vocab-due-n {
  font-size: 28px;
  font-weight: 700;
  color: var(--mustard);
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.vocab-due-l {
  font-size: 12px;
  color: var(--ice-1);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-weight: 600;
}
.vocab-due-cta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ember);
  letter-spacing: -0.005em;
}
.vocab-due-cta .arrow { transition: transform .15s; }
.vocab-card:hover .vocab-due-cta .arrow { transform: translateX(3px); }

/* ============ SECTION (scenarios) ============ */
#home-view .home-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
#home-view .home-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0 2px;
}
#home-view .home-section-head h2 {
  font-family: ui-rounded, "SF Pro Rounded", -apple-system, "Inter", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ice-0);
  margin: 0;
}
#home-view .home-section-hint {
  font-size: 11px;
  color: var(--ice-2);
  text-transform: uppercase;
  letter-spacing: 1.6px;
  font-weight: 700;
}

/* ============ MODE GRID (horizontal cards) ============ */
#home-view .mode-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
@media (min-width: 640px)  { #home-view .mode-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { #home-view .mode-grid { grid-template-columns: 1fr 1fr 1fr; gap: 12px; } }

#home-view .mode-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  text-align: left;
  background: var(--ink-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  cursor: pointer;
  font-family: inherit;
  color: var(--ice-0);
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
  min-height: 76px;
  width: 100%;
}
#home-view .mode-card::before { display: none; }
#home-view .mode-card:hover {
  background: var(--ink-3);
  border-color: var(--ember-line);
}
#home-view .mode-card:active { transform: translateY(1px); }
#home-view .mode-card .mode-icon {
  width: 36px; height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ink-3);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--ice-1);
  margin: 0;
  flex-shrink: 0;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
#home-view .mode-card .mode-icon svg { width: 17px; height: 17px; }
#home-view .mode-card:hover .mode-icon {
  border-color: var(--ember-line);
  color: var(--ember);
}
#home-view .mode-card .mode-stack {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}
#home-view .mode-card .mode-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--ice-0);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
#home-view .mode-card .mode-desc {
  font-size: 12.5px;
  color: var(--ice-2);
  line-height: 1.4;
  letter-spacing: -0.005em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#home-view .mode-card .mode-arrow {
  font-size: 16px;
  color: var(--ice-3);
  font-weight: 600;
  transition: transform var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
  flex-shrink: 0;
}
#home-view .mode-card:hover .mode-arrow {
  color: var(--ember);
  transform: translateX(3px);
}
/* legacy CTA element from old layout — hide if it shows up */
#home-view .mode-card .mode-cta { display: none; }

@media (min-width: 1100px) {
  #home-view .mode-card .mode-desc { white-space: normal; }
  #home-view .mode-card { min-height: 88px; padding: 16px 18px; }
}

/* ============ DEFAULTS STRIP ============ */
.home-quicksettings {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 16px;
  background: var(--ink-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  margin-top: 4px;
}
.home-quicksettings .qs-eyebrow {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  color: var(--ice-2);
  font-weight: 700;
  margin-right: 4px;
  flex-shrink: 0;
}
.qs-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  background: var(--ink-3);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  flex: 0 1 auto;
  min-width: 0;
  transition: border-color var(--t-fast) var(--ease);
}
.qs-pill:hover { border-color: var(--border-hi); }
.qs-pill .qs-l {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: var(--ice-2);
  font-weight: 700;
  flex-shrink: 0;
}
.qs-pill select {
  background: transparent;
  border: 0;
  outline: none;
  color: var(--ice-0);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
  cursor: pointer;
  max-width: 100%;
  min-width: 0;
  text-overflow: ellipsis;
}
.qs-pill select option { background: var(--ink-2); color: var(--ice-0); }

/* dead-style cleanup: legacy home-stats grid is gone, but if ever re-rendered */
#home-view .home-stats { display: none; }

/* desktop: 2-col grid for main content (hero spans, stats spans, scenarios+settings stacked) */
@media (min-width: 1100px) {
  #home-view .home-content {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(360px, 1fr);
    grid-template-areas:
      "hero       stats"
      "scenarios  scenarios"
      "settings   settings";
    align-items: start;
    gap: 22px 26px;
  }
  .home-hero { grid-area: hero; }
  .home-stats-row { grid-area: stats; grid-template-columns: 1fr; }
  .home-scenarios { grid-area: scenarios; }
  .home-quicksettings { grid-area: settings; }
}

@media (min-width: 1500px) {
  #home-view .home-content {
    grid-template-columns: minmax(0, 1.5fr) minmax(380px, 480px);
    gap: 28px 32px;
  }
}

/* ============================================================
   PROGRESS V2 — dedicated page, matches Home/Practice V2 voice
   ============================================================ */

#profile-view.profile-view {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  width: 100vw;
  background: var(--ink-1);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
#profile-view.profile-view[hidden] { display: none; }
#profile-view.profile-view::-webkit-scrollbar { width: 4px; }
#profile-view.profile-view::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.06); border-radius: 2px; }

/* topbar */
#profile-view .profile-topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  padding-top: max(14px, env(safe-area-inset-top));
  background: var(--ink-2);
  /* PERF: backdrop-filter removed */
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 5;
  flex: none;
}
#profile-view .profile-topbar .icon-btn-sm {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--ice-1);
  cursor: pointer;
  transition: background .14s, color .14s, border-color .14s;
  flex-shrink: 0;
}
#profile-view .profile-topbar .icon-btn-sm:hover {
  background: rgba(255,255,255,0.04);
  color: var(--ice-0);
  border-color: var(--border);
}
#profile-view .profile-topbar .icon-btn-sm svg { width: 17px; height: 17px; }
#profile-view .profile-title { flex: 1; min-width: 0; }
#profile-view .profile-title-l {
  font-family: ui-rounded, "SF Pro Rounded", -apple-system, "Inter", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ice-0);
}
#profile-view .profile-title-s {
  font-size: 11px;
  color: var(--ice-2);
  text-transform: uppercase;
  letter-spacing: 1.6px;
  font-weight: 600;
  margin-top: 2px;
}

/* main */
#profile-view .profile-main {
  flex: 1;
  padding: 22px 20px max(28px, env(safe-area-inset-bottom));
  max-width: 1180px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 26px;
}
@media (min-width: 1100px) {
  #profile-view .profile-main { padding: 28px 32px 36px; gap: 30px; }
}

/* section header */
#profile-view .psec h3 {
  font-family: ui-rounded, "SF Pro Rounded", -apple-system, "Inter", system-ui, sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ice-0);
  text-transform: none;
  margin-bottom: 14px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
#profile-view .psec h3 .h-action {
  font-size: 11px;
  color: var(--ice-2);
  text-transform: uppercase;
  letter-spacing: 1.4px;
  font-weight: 700;
  cursor: default;
}

/* hero — 5 phero-cards become a clean grid with the new palette */
#profile-view .phero {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (min-width: 720px) { #profile-view .phero { grid-template-columns: repeat(5, 1fr); } }

#profile-view .phero-card {
  padding: 18px 16px 14px;
  background: rgba(20,21,27,0.55);
  border: 1px solid var(--border);
  border-radius: 16px;
  position: relative;
  overflow: hidden;
  transition: border-color .14s, transform .12s;
}
#profile-view .phero-card:hover { border-color: var(--border-hi); }
#profile-view .phero-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--volt);
  opacity: 0.85;
}
#profile-view .phero-card.warm::after { background: var(--gold); }
#profile-view .phero-card.muted::after { background: var(--ice-3); opacity: 0.5; }

#profile-view .phero-card .v {
  font-family: ui-rounded, "SF Pro Rounded", -apple-system, "Inter", system-ui, sans-serif;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--ice-0);
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
}
#profile-view .phero-card.warm .v { color: var(--gold); }
#profile-view .phero-card .v .unit {
  font-size: 13px; font-weight: 600; color: var(--ice-2);
  margin-left: 3px;
  letter-spacing: 0;
}
#profile-view .phero-card .l {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  color: var(--ice-2);
  margin-top: 8px;
  font-weight: 700;
}
#profile-view .phero-card .sub {
  font-size: 11px;
  color: var(--ice-2);
  margin-top: 4px;
  letter-spacing: -0.005em;
}

/* 7-day chart */
#profile-view .bar7 {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 110px;
  padding: 12px 4px 4px;
  background: rgba(20,21,27,0.50);
  border: 1px solid var(--border);
  border-radius: 14px;
}
#profile-view .bar7-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
#profile-view .bar7-bar {
  width: 60%;
  max-width: 24px;
  background: var(--ember);
  border-radius: 0;
  min-height: 3px;
  transition: opacity var(--t-fast) var(--ease);
}
#profile-view .bar7-col:hover .bar7-bar { opacity: 0.7; }
#profile-view .bar7-col.today .bar7-bar { background: var(--mustard); }
#profile-view .bar7-lbl {
  font-size: 10px;
  color: var(--ice-2);
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 700;
}
#profile-view .bar7-col.today .bar7-lbl { color: var(--mustard); }

/* category rows */
#profile-view .cat-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--ink-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  margin-bottom: 6px;
  font-size: 13px;
  transition: border-color var(--t-fast) var(--ease);
}
#profile-view .cat-row:hover { border-color: var(--border-hi); }
#profile-view .cat-row .cat-name {
  width: 130px;
  color: var(--ice-0);
  font-weight: 600;
  text-transform: capitalize;
  letter-spacing: -0.005em;
}
#profile-view .cat-row .cat-bar {
  flex: 1;
  height: 4px;
  background: var(--ink-3);
  border-radius: 0;
  overflow: hidden;
}
#profile-view .cat-row .cat-fill {
  height: 100%;
  background: var(--ember);
  border-radius: 0;
}
#profile-view .cat-row .cat-n {
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  color: var(--ice-1);
  min-width: 28px;
  text-align: right;
  font-weight: 700;
}

/* error grid */
#profile-view .err-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
@media (min-width: 720px) { #profile-view .err-grid { grid-template-columns: 1fr 1fr; } }
#profile-view .err-card {
  padding: 14px 16px;
  background: rgba(20,21,27,0.50);
  border: 1px solid var(--border);
  border-left: 3px solid var(--coral);
  border-radius: 12px;
  font-size: 13.5px;
  line-height: 1.5;
  letter-spacing: -0.005em;
  transition: border-color .14s;
}
#profile-view .err-card:hover { border-color: var(--border-hi); border-left-color: var(--coral); }
#profile-view .err-card .pair { color: var(--ice-0); line-height: 1.55; }
#profile-view .err-card .pair .wr {
  text-decoration: line-through;
  text-decoration-color: rgba(194,85,58,0.55);
  text-decoration-thickness: 1.5px;
  color: var(--ice-1);
}
#profile-view .err-card .pair .ar {
  color: var(--ice-3);
  margin: 0 8px;
  font-weight: 700;
}
#profile-view .err-card .pair .rt {
  color: var(--mint);
  font-weight: 600;
}
#profile-view .err-card .reason {
  font-size: 12px;
  color: var(--ice-1);
  margin-top: 8px;
  line-height: 1.5;
  font-style: italic;
}
#profile-view .err-card .meta {
  font-size: 10px;
  color: var(--ice-2);
  text-transform: uppercase;
  letter-spacing: 1.6px;
  margin-top: 8px;
  font-weight: 700;
}

/* vocab cards */
#profile-view .voc-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
@media (min-width: 720px) { #profile-view .voc-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { #profile-view .voc-grid { grid-template-columns: 1fr 1fr 1fr; } }
#profile-view .voc-card {
  padding: 14px 16px;
  background: rgba(20,21,27,0.55);
  border: 1px solid var(--border);
  border-radius: 14px;
  transition: border-color .14s, transform .12s, box-shadow .14s;
}
#profile-view .voc-card:hover {
  border-color: rgba(255,106,44,0.30);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
}
#profile-view .voc-card .word {
  font-family: ui-rounded, "SF Pro Rounded", -apple-system, "Inter", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--ice-0);
  letter-spacing: -0.015em;
}
#profile-view .voc-card .ex {
  font-size: 12.5px;
  color: var(--ice-1);
  margin-top: 6px;
  line-height: 1.45;
  letter-spacing: -0.005em;
  font-style: italic;
  opacity: 0.92;
}
#profile-view .voc-card .meta {
  font-size: 10px;
  color: var(--ice-2);
  text-transform: uppercase;
  letter-spacing: 1.4px;
  margin-top: 8px;
  font-weight: 700;
}
#profile-view .voc-card .actions { display: flex; gap: 6px; margin-top: 12px; }
#profile-view .voc-card .actions button {
  flex: 1;
  padding: 8px 6px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--ice-1);
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-weight: 700;
  transition: border-color .14s, color .14s, background .14s;
}
#profile-view .voc-card .actions .again:hover { border-color: var(--coral); color: var(--coral); background: rgba(194,85,58,0.06); }
#profile-view .voc-card .actions .good:hover  { border-color: var(--gold);  color: var(--gold);  background: rgba(232,197,71,0.08); }
#profile-view .voc-card .actions .easy:hover  { border-color: var(--mint);  color: var(--mint);  background: rgba(127,163,122,0.08); }

/* session rows */
#profile-view .sess-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: rgba(20,21,27,0.50);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 8px;
  font-size: 13.5px;
  transition: border-color .14s, background .14s;
}
#profile-view .sess-row:hover {
  border-color: rgba(255,106,44,0.30);
  background: rgba(255,106,44,0.04);
}
#profile-view .sess-row .sess-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: rgba(255,106,44,0.10);
  border: 1px solid rgba(255,106,44,0.22);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--volt);
}
#profile-view .sess-row .sess-icon svg { width: 16px; height: 16px; }
#profile-view .sess-row .sess-body { flex: 1; min-width: 0; }
#profile-view .sess-row .sess-name {
  font-weight: 600;
  color: var(--ice-0);
  letter-spacing: -0.005em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#profile-view .sess-row .sess-meta {
  font-size: 11px;
  color: var(--ice-2);
  margin-top: 3px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.2px;
}
#profile-view .sess-row .sess-cefr {
  padding: 4px 10px;
  background: rgba(255,106,44,0.14);
  border: 1px solid rgba(255,106,44,0.32);
  border-radius: 999px;
  color: var(--volt);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}

/* vocab chip used in renderProfilePage vocab section */
#profile-view .vocab-chip {
  display: inline-block;
  padding: 5px 10px;
  background: rgba(127,163,122,0.06);
  border: 1px solid rgba(127,163,122,0.22);
  border-radius: 999px;
  font-size: 12px;
  color: var(--mint);
  font-weight: 500;
  letter-spacing: -0.005em;
}

/* billing dev grid */
#profile-view .bill-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

/* empty hint inside profile */
#profile-view .empty-hint {
  text-align: center;
  font-size: 13px;
  color: var(--ice-2);
  padding: 30px 16px;
  background: rgba(255,255,255,0.018);
  border: 1px dashed var(--border);
  border-radius: 12px;
  letter-spacing: -0.005em;
  line-height: 1.55;
}

/* ============================================================
   RESPONSIVE OVERRIDES — tablet & phone only
   Lives at the bottom of the file so source order beats earlier defaults.
   Desktop (>=1100px) is NEVER touched by this block.
   ============================================================ */

/* Tablet (≤1099px): compact stage + accordion that actually works.
   Layout uses GRID with 1fr/1fr so the focused card fills exactly the remaining space
   (no empty padding, no min-height hacks). Practice itself does NOT scroll — each
   card scrolls internally so the user can always reach the chevron of the other. */
@media (max-width: 1099px) {
  /* MOBILE/TABLET LAYOUT — full-screen stage with 2 aux buttons.
     Coach + Conversation hidden by default; open as bottom sheets via
     the buttons inside the stage. Threshold 1099px catches iPad 10.2 in
     both orientations + every phone. */
  #app .practice {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas: "stage" !important;
    grid-template-rows: minmax(0, 1fr) !important;
    padding: 10px !important;
    gap: 0 !important;
    overflow: hidden !important;
    height: 100% !important;
  }
  .stage { grid-area: stage !important; }

  /* Stage takes the full practice area; sphere/timer/CTA breathe */
  .stage {
    padding: 10px 14px !important;
    gap: 8px !important;
    /* status / sphere / timer / card / aux  (CTA is hidden on mobile) */
    grid-template-rows: auto minmax(0, 1fr) auto auto auto !important;
  }
  .stage-bg, .sphere-ring-outer, .sphere-ring-mid { display: none !important; }
  /* Mobile: the sphere itself IS the talk button. Bigger tap target, reactive
     ring + scale on press, mic icon front-and-center. The orange CTA is hidden
     (it duplicated the orb tap target and ate vertical space). */
  .sphere {
    width: clamp(160px, 32vh, 220px) !important;
    aspect-ratio: 1 !important;
    height: auto !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent;
    transition: transform 120ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  .sphere:active { transform: scale(0.96) !important; }
  .stage[data-state="listening"] .sphere {
    box-shadow: 0 0 0 3px var(--ember-line), 0 0 24px rgba(216, 122, 64, 0.30);
    border-radius: 50%;
  }
  .sphere-wrap { padding: 6px 0 !important; min-height: 0 !important; }
  .sphere-mic { opacity: 0.95; }
  .stage-timer { font-size: clamp(28px, 5vh, 40px) !important; }
  .stage-timer-l { font-size: 10px !important; letter-spacing: 1.6px !important; }
  .stage-timer-today { font-size: 12px !important; }
  .stage-cta { display: none !important; }
  .stage-card { gap: 4px !important; }
  .stage-prompt-empty { font-size: 13px !important; }
  .stage-status { padding-bottom: 0 !important; }
  .stage-state { font-size: 10.5px !important; letter-spacing: 1.4px !important; }

  /* Side-expand chevrons + popout don't make sense in this layout */
  .side-expand, #coach-popout { display: none !important; }

  /* === Aux row: Tips + Conversation buttons === */
  .stage-aux-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  .stage-aux-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--ink-2);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    color: var(--ice-1);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.3px;
    cursor: pointer;
    transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
  }
  .stage-aux-btn:hover { border-color: var(--ember-line); color: var(--ember); }
  .stage-aux-btn:active { transform: translateY(1px); }
  .stage-aux-btn .icon-sm { width: 16px; height: 16px; }
  .stage-aux-btn .aux-label { font-weight: 600; }
  .stage-aux-btn .aux-badge {
    min-width: 20px;
    height: 18px;
    padding: 0 6px;
    background: var(--ember);
    color: var(--ink-0);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 2px;
  }
  .stage-aux-btn .aux-badge[hidden] { display: none !important; }
  /* "New" pulse on tips when fresh feedback arrives */
  .stage-aux-btn[data-fresh="true"] {
    border-color: var(--ember-line);
    color: var(--ember);
    animation: auxPulse 1.2s ease-out 2;
  }
  @keyframes auxPulse {
    0%   { box-shadow: 0 0 0 0 var(--ember-fade); }
    50%  { box-shadow: 0 0 0 6px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
  }
  /* When a sheet is open, mark the active button */
  #app .practice[data-sheet="tips"] #stage-tips-btn,
  #app .practice[data-sheet="conv"] #stage-conv-btn {
    background: var(--ember-fade);
    border-color: var(--ember);
    color: var(--ember);
  }

  /* === Sheet behavior: coach-panel + timeline become bottom sheets === */
  .coach-panel,
  #app .timeline {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 80 !important;
    margin: 0 !important;
    border-radius: var(--r-md) var(--r-md) 0 0 !important;
    border: 1px solid var(--border) !important;
    border-bottom: 0 !important;
    background: var(--ink-2) !important;
    transform: translateY(100%) !important;
    transition: transform 240ms var(--ease) !important;
    height: 75vh !important;
    max-height: 75vh !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    box-shadow: 0 -10px 40px rgba(0,0,0,0.5) !important;
  }
  /* Slide-in when its sheet flag is set on the practice */
  #app .practice[data-sheet="tips"] .coach-panel,
  #app .practice[data-sheet="conv"] #timeline {
    transform: translateY(0) !important;
  }
  .coach-content {
    overflow-y: auto !important;
    min-height: 0 !important;
    padding: 6px 18px 24px !important;
  }
  .coach-empty { padding: 12px 2px 0 !important; }
  .coach-row { font-size: 14px !important; }
  .coach-sugg { padding: 10px 14px !important; font-size: 14px !important; }
  .timeline-head { padding: 14px 16px 10px !important; }
  #app .timeline > #chat {
    max-height: none !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    padding: 6px 4px 16px !important;
  }

  /* Backdrop: dimmed overlay behind the sheet, click closes */
  .stage-sheet-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(8, 7, 10, 0.55);
    z-index: 70;
    opacity: 0;
    pointer-events: none;
    transition: opacity 240ms var(--ease);
  }
  #app .practice[data-sheet="tips"] ~ .stage-sheet-backdrop,
  #app .practice[data-sheet="conv"] ~ .stage-sheet-backdrop,
  body[data-mobile-sheet] .stage-sheet-backdrop {
    opacity: 1;
    pointer-events: auto;
  }
}

/* ≥1100: hide the mobile aux row entirely (desktop has the inline panels) */
@media (min-width: 1100px) {
  .stage-aux-row { display: none !important; }
}

/* Phone (≤640px): even tighter */
@media (max-width: 640px) {
  #app .practice { padding: 8px !important; gap: 8px !important; }
  .stage { padding: 10px 12px 10px !important; gap: 6px !important; }
  .sphere { width: clamp(140px, 28vh, 180px) !important; height: auto !important; }
  .stage-timer { font-size: 22px !important; }
  .stage-cta { display: none !important; }
  .coach-panel { max-height: 36vh !important; padding: 10px 12px !important; }
  .coach-row { font-size: 13px !important; }
  #app .timeline > #chat { max-height: 30vh !important; }
}

/* Tablet landscape (≥900px wide, landscape, but still tablet zone <1100px):
   Stage full-width on top; Coach + Conversation side-by-side below.
   Layout matches the user's red sketch. */
/* Tablet/phone landscape ≤1099px: keep the SAME full-screen-stage layout
   from the portrait rule above. Only adjust sphere/timer for shorter
   viewport height; sheets behave identically. */
@media (max-width: 1099px) and (orientation: landscape) {
  .sphere { width: clamp(110px, 26vh, 160px) !important; }
  .stage-timer { font-size: clamp(24px, 5.5vh, 36px) !important; }
  .stage-cta { display: none !important; }
}

/* Phone em paisagem (<900px, baixa) — mantém side-by-side compacto:
   stage à esquerda, coach + conv empilhados à direita */
@media (max-width: 1099px) and (orientation: landscape) and (max-width: 899px) {
  #app .practice {
    grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr) !important;
    grid-template-areas:
      "stage coach"
      "stage conv" !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    overflow: hidden !important;
  }
  .stage { grid-area: stage !important; padding: 8px 10px !important; }
  .sphere { width: 60px !important; height: 60px !important; }
  .stage-timer { font-size: 18px !important; }
  .stage-cta { padding: 8px 12px !important; min-height: 36px !important; font-size: 13px !important; }
  .coach-panel { max-height: none !important; }
  #app .timeline > #chat { max-height: none !important; }
}

/* ============================================================
   PROGRESS PAGE — coach-of-progress redesign
   ============================================================ */

#profile-view .profile-main { gap: 16px !important; }

/* HERO — narrative, not a wall of KPIs */
#profile-view .phero-narrative {
  background: var(--ink-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 24px 24px 22px;
}
#profile-view .phero-narrative .hello {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  color: var(--ice-2);
  font-weight: 700;
  margin-bottom: 6px;
}
#profile-view .phero-narrative .cefr-line {
  font-size: clamp(22px, 3.4vw, 30px);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--ice-0);
  line-height: 1.15;
}
#profile-view .phero-narrative .cefr-pill {
  display: inline-block;
  padding: 2px 10px;
  background: var(--ember);
  color: var(--ink-0);
  border-radius: var(--r-sm);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0;
  margin-left: 4px;
  vertical-align: 2px;
}
#profile-view .phero-narrative .cefr-pill.muted {
  background: var(--ink-3);
  color: var(--ice-2);
  font-size: 14px;
  font-weight: 600;
}
#profile-view .phero-narrative .cefr-redo {
  margin-left: 10px;
  padding: 4px 9px;
  background: transparent;
  border: 1px solid var(--border-hi);
  color: var(--ice-2);
  border-radius: var(--r-sm);
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  cursor: pointer;
  vertical-align: 4px;
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
#profile-view .phero-narrative .cefr-redo:hover { border-color: var(--ember-line); color: var(--ember); }
#profile-view .phero-narrative .cefr-redo:disabled { opacity: 0.5; cursor: wait; }
#profile-view .phero-narrative .hero-sub {
  font-size: 14px;
  color: var(--ice-1);
  margin-top: 8px;
  letter-spacing: -0.005em;
}
#profile-view .phero-narrative .goal-row {
  display: flex; align-items: center; gap: 14px;
  margin-top: 18px;
}
#profile-view .phero-narrative .goal-bar {
  flex: 1;
  height: 6px;
  background: var(--ink-3);
  border-radius: 999px;
  overflow: hidden;
}
#profile-view .phero-narrative .goal-fill {
  height: 100%;
  background: var(--ember);
  border-radius: 999px;
  transition: width var(--t-base) var(--ease);
}
#profile-view .phero-narrative .goal-text {
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  color: var(--ice-0);
  font-weight: 700;
  white-space: nowrap;
}
#profile-view .phero-narrative .goal-of {
  color: var(--ice-2);
  font-weight: 500;
  font-size: 12px;
}

/* TREND + CONSISTENCY 2-col */
#profile-view .p2col {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 720px) {
  #profile-view .p2col { grid-template-columns: 1.2fr 1fr; }
}
#profile-view .pcard {
  background: var(--ink-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
#profile-view .pcard-eyebrow {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  color: var(--ice-2);
  font-weight: 700;
}
#profile-view .pcard-foot {
  display: flex; align-items: baseline; gap: 8px;
  margin-top: auto;
}
#profile-view .pcard-foot .bignum {
  font-size: 28px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.025em;
  color: var(--ice-0);
}
#profile-view .pcard-foot .bignum .unit { font-size: 16px; color: var(--ice-1); margin-left: 2px; }
#profile-view .pcard-foot-l {
  font-size: 12px;
  color: var(--ice-2);
  font-weight: 500;
  margin-right: auto;
}
#profile-view .trend-pill {
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--r-sm);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
#profile-view .trend-pill.up   { background: var(--moss-soft); color: var(--moss); }
#profile-view .trend-pill.down { background: var(--rust-soft); color: var(--rust); }
#profile-view .trend-pill.flat { background: var(--ink-3);     color: var(--ice-2); }
#profile-view .pcard-note {
  font-size: 12.5px;
  color: var(--ice-1);
  font-style: italic;
}

/* consistency dots */
#profile-view .dots-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
#profile-view .cdot {
  flex: 1;
  height: 28px;
  border-radius: var(--r-sm);
  background: var(--ink-3);
  border: 1px solid var(--border);
  transition: background var(--t-fast) var(--ease);
}
#profile-view .cdot.filled { background: var(--moss); border-color: var(--moss); }
#profile-view .cdot.today  { box-shadow: inset 0 0 0 1.5px var(--ember); }

/* WHERE TO FOCUS */
#profile-view .focus-list { display: flex; flex-direction: column; gap: 10px; }
#profile-view .focus-row {
  display: grid;
  grid-template-columns: 22px minmax(70px, 1fr) auto minmax(80px, 1.2fr) 36px;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  background: var(--ink-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}
#profile-view .focus-rank {
  font-size: 12px;
  font-weight: 700;
  color: var(--ice-2);
  font-variant-numeric: tabular-nums;
}
#profile-view .focus-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--ice-0);
  text-transform: capitalize;
  letter-spacing: -0.005em;
}
#profile-view .focus-impact {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--r-sm);
}
#profile-view .focus-impact.tier-high { background: var(--ember-fade); color: var(--ember); border: 1px solid var(--ember-line); }
#profile-view .focus-impact.tier-med  { background: var(--mustard-soft); color: var(--mustard); border: 1px solid rgba(232,197,71,0.32); }
#profile-view .focus-impact.tier-low  { background: var(--ink-3); color: var(--ice-2); border: 1px solid var(--border); }
#profile-view .focus-bar {
  height: 4px;
  background: var(--ink-3);
  border-radius: 999px;
  overflow: hidden;
  display: block;
}
#profile-view .focus-fill { display: block; height: 100%; background: var(--ember); border-radius: 999px; }
#profile-view .focus-n {
  font-size: 12px;
  color: var(--ice-1);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
#profile-view .focus-cta {
  margin-top: 14px;
  width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 12px 18px;
  background: var(--ember);
  color: var(--ink-0);
  border: 0;
  border-radius: var(--r-md);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease);
}
#profile-view .focus-cta:hover { background: var(--ember-soft); }
#profile-view .focus-cta .icon-sm { width: 16px; height: 16px; }
@media (max-width: 540px) {
  #profile-view .focus-row {
    grid-template-columns: 22px 1fr auto;
    grid-template-areas:
      "rank name n"
      ". impact impact"
      ". bar bar";
  }
  #profile-view .focus-rank { grid-area: rank; }
  #profile-view .focus-name { grid-area: name; }
  #profile-view .focus-n    { grid-area: n; }
  #profile-view .focus-impact { grid-area: impact; justify-self: start; }
  #profile-view .focus-bar  { grid-area: bar; }
}

/* COMMON MISTAKES */
#profile-view .mist-list { display: flex; flex-direction: column; gap: 8px; }
#profile-view .mist-row {
  padding: 12px 14px;
  background: var(--ink-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "pair side" "reason reason";
  gap: 6px 12px;
  align-items: baseline;
}
#profile-view .mist-pair {
  grid-area: pair;
  font-size: 14.5px;
  letter-spacing: -0.005em;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
}
#profile-view .mist-wr {
  color: var(--ice-2);
  text-decoration: line-through;
  text-decoration-color: var(--rust);
  text-decoration-thickness: 1.5px;
}
#profile-view .mist-ar { color: var(--ice-3); font-weight: 600; }
#profile-view .mist-rt { color: var(--ember); font-weight: 600; }
#profile-view .mist-side {
  grid-area: side;
  display: flex; align-items: center; gap: 8px;
  font-size: 11.5px;
  color: var(--ice-2);
}
#profile-view .mist-x {
  background: var(--ember-fade);
  color: var(--ember);
  border: 1px solid var(--ember-line);
  padding: 2px 7px;
  border-radius: var(--r-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: 11px;
}
#profile-view .mist-cat { text-transform: capitalize; }
#profile-view .mist-ago { color: var(--ice-3); }
#profile-view .mist-reason {
  grid-area: reason;
  font-size: 12.5px;
  color: var(--ice-1);
  font-style: italic;
}

/* VOCABULARY GROUPED */
#profile-view .vgroup {
  background: var(--ink-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 12px 14px 8px;
  margin-bottom: 10px;
}
#profile-view .vgroup-head {
  display: flex; align-items: baseline; gap: 10px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 8px;
}
#profile-view .vgroup-name {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  font-weight: 700;
  color: var(--ice-1);
}
#profile-view .vgroup.g-new      .vgroup-name { color: var(--ember); }
#profile-view .vgroup.g-learning .vgroup-name { color: var(--mustard); }
#profile-view .vgroup.g-mastered .vgroup-name { color: var(--moss); }
#profile-view .vgroup-n {
  font-size: 11px;
  color: var(--ice-2);
  font-variant-numeric: tabular-nums;
  margin-left: auto;
}
#profile-view .vrow {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 8px 14px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(242,237,229,0.04);
}
#profile-view .vrow:last-child { border-bottom: 0; }
#profile-view .vrow-main {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px;
  min-width: 0;
}
#profile-view .vrow-word {
  font-size: 14px;
  font-weight: 700;
  color: var(--ice-0);
  letter-spacing: -0.005em;
}
#profile-view .vrow-ex {
  font-size: 12.5px;
  color: var(--ice-2);
  font-style: italic;
  letter-spacing: -0.005em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
#profile-view .vrow-meta {
  font-size: 11px;
  color: var(--ice-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  display: flex; gap: 4px;
}
#profile-view .vgroup-more {
  font-size: 12px;
  color: var(--ice-2);
  padding: 6px 0 4px;
  font-style: italic;
}

/* NEXT STEP */
#profile-view .next-list { display: flex; flex-direction: column; gap: 8px; }
#profile-view .next-row {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--ink-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
#profile-view .next-row:hover {
  border-color: var(--ember-line);
  background: var(--ink-3);
}
#profile-view .next-arrow {
  color: var(--ember);
  font-size: 18px;
  font-weight: 700;
  text-align: center;
}
#profile-view .next-label {
  color: var(--ice-0);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
}
#profile-view .next-hint {
  color: var(--ice-2);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-weight: 700;
}
@media (max-width: 540px) {
  #profile-view .next-hint { display: none; }
}

/* ============================================================
   JOURNEY — calendar + day editor + AI analysis panel
   ============================================================ */

#journey-view.journey-view {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  width: 100vw;
  background: var(--ink-1);
  overflow: hidden;
}
#journey-view.journey-view[hidden] { display: none; }

/* journey topbar — matches the practice topbar visual language */
#journey-view .journey-topbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  padding-top: max(10px, env(safe-area-inset-top));
  border-bottom: 1px solid var(--border);
  background: rgba(7,8,10,0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  position: relative;
  z-index: 5;
  flex: none;
}
#journey-view .icon-btn-sm {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  color: var(--ice-1);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
  flex-shrink: 0;
}
#journey-view .icon-btn-sm:hover {
  background: var(--ink-3);
  color: var(--ember);
  border-color: var(--ember-line);
}
#journey-view .icon-btn-sm svg { width: 17px; height: 17px; }

#journey-view .journey-brand {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 4px 6px 4px 0;
  min-width: 0;
}
#journey-view .journey-title-l {
  font-size: 15px;
  font-weight: 700;
  color: var(--ice-0);
  letter-spacing: -0.015em;
}
#journey-view .journey-title-s {
  font-size: 11px;
  color: var(--ice-2);
  text-transform: uppercase;
  letter-spacing: 1.4px;
  font-weight: 600;
}

/* journey-meta uses the same .smeta pill style as practice topbar */
#journey-view .journey-meta {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 0 8px;
  font-size: 11px;
  color: var(--ice-2);
  letter-spacing: 0.2px;
  overflow: hidden;
  flex-wrap: nowrap;
}
@media (min-width: 900px) { #journey-view .journey-meta { display: inline-flex; } }
#journey-view .journey-meta .smeta {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 9px;
  background: var(--ink-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--ice-1);
  font-weight: 500;
}
#journey-view .journey-meta .smeta-l {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--ice-2);
  font-weight: 700;
}
#journey-view .journey-meta .smeta-v { color: var(--ice-0); }
#journey-view .journey-meta .smeta[data-kind="streak"] .smeta-v { color: var(--mustard); }
#journey-view .journey-meta .smeta[data-kind="today"]  .smeta-v { color: var(--ember); }

#journey-view .topbar-spacer { flex: 1; }
#journey-view .avatar-btn { flex-shrink: 0; }

/* hide secondary nav buttons on tight screens to keep the topbar from wrapping */
@media (max-width: 720px) {
  #journey-view #journey-sessions-btn,
  #journey-view #journey-settings-btn,
  #journey-view #journey-profile-btn { display: none; }
}

#journey-view .journey-main {
  flex: 1;
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 18px;
  padding: 18px 22px;
  min-height: 0;
  overflow: hidden;
}
/* Tablet (≤1099px): grid stays 2-col but calendar is narrower; both visible */
@media (max-width: 1099px) and (min-width: 720px) {
  #journey-view .journey-main {
    grid-template-columns: 240px minmax(0, 1fr);
    padding: 14px 16px;
    gap: 14px;
  }
}
/* Phone + small tablet (<720px): stack — calendar collapses to a horizontal week strip on top */
@media (max-width: 719px) {
  #journey-view .journey-main {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    overflow-y: auto;
    padding: 10px;
    gap: 10px;
  }
}

/* CALENDAR */
#journey-view .journey-cal {
  background: var(--ink-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 10px;
  min-height: 0;
  height: fit-content;
}
@media (max-width: 1099px) and (min-width: 720px) {
  #journey-view .journey-cal { padding: 10px 12px; }
}
/* Phone: compact card; week-strip handled below */
@media (max-width: 719px) {
  #journey-view .journey-cal { padding: 10px 12px; }
}
#journey-view .cal-head {
  display: flex; align-items: center; gap: 10px;
}
#journey-view .cal-label {
  flex: 1; text-align: center;
  font-size: 14px; font-weight: 700; color: var(--ice-0); letter-spacing: -0.005em;
}
#journey-view .cal-nav {
  width: 28px; height: 28px;
  background: transparent; border: 1px solid var(--border);
  border-radius: var(--r-sm); color: var(--ice-1); cursor: pointer;
  font-family: inherit; font-size: 16px; line-height: 1;
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
#journey-view .cal-nav:hover { border-color: var(--ember-line); color: var(--ember); }
#journey-view .cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  font-size: 10px; text-transform: uppercase; letter-spacing: 1.4px;
  color: var(--ice-2); font-weight: 700; text-align: center;
  padding: 4px 0;
  border-bottom: 1px solid var(--border);
}
#journey-view .cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  padding-top: 6px;
}
#journey-view .cday {
  aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  color: var(--ice-1);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  border-radius: var(--r-sm);
  cursor: pointer;
  font-family: inherit;
  position: relative;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
#journey-view .cday-blank { cursor: default; pointer-events: none; }
#journey-view .cday:hover { background: var(--ink-3); color: var(--ice-0); }
#journey-view .cday.has::after {
  content: '';
  position: absolute;
  bottom: 4px; left: 50%; transform: translateX(-50%);
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--ember-line);
}
#journey-view .cday.has.analyzed::after { background: var(--ember); }
#journey-view .cday.today {
  border-color: var(--ember-line);
  color: var(--ice-0);
  font-weight: 700;
}
#journey-view .cday.sel {
  background: var(--ember);
  color: var(--ink-0);
  border-color: var(--ember);
  font-weight: 700;
}
#journey-view .cday.sel.has::after,
#journey-view .cday.sel.has.analyzed::after { background: var(--ink-0); }

/* DAY EDITOR */
#journey-view .journey-day {
  background: var(--ink-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 18px 22px;
  display: flex; flex-direction: column; gap: 12px;
  min-height: 0;
  overflow: hidden;
}
#journey-view .day-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
}
#journey-view .day-date {
  font-size: 18px; font-weight: 700; color: var(--ice-0); letter-spacing: -0.015em;
}
#journey-view .day-meta {
  font-size: 11px; color: var(--ice-2); font-variant-numeric: tabular-nums;
  text-transform: uppercase; letter-spacing: 1.2px; font-weight: 600;
}
#journey-view .day-text {
  flex: 1;
  min-height: 280px;
  width: 100%;
  resize: vertical;
  background: var(--ink-3);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 14px 16px;
  color: var(--ice-0);
  font-family: inherit;
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: -0.005em;
  outline: none;
  transition: border-color var(--t-fast) var(--ease);
}
#journey-view .day-text:focus { border-color: var(--ember-line); }
#journey-view .day-text::placeholder { color: var(--ice-2); font-style: italic; }
#journey-view .day-foot {
  display: flex; align-items: center; gap: 12px;
}
#journey-view .day-saved {
  flex: 1;
  font-size: 11.5px; color: var(--ice-2); font-style: italic;
}
#journey-view .day-analyze {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  background: var(--ember);
  color: var(--ink-0);
  border: 0;
  border-radius: var(--r-sm);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), transform 80ms var(--ease);
}
#journey-view .day-analyze:hover { background: var(--ember-soft); }
#journey-view .day-analyze:active { transform: translateY(1px); }
#journey-view .day-analyze:disabled { opacity: 0.7; cursor: wait; }
#journey-view .day-analyze .icon-sm { width: 14px; height: 14px; }
#journey-view .day-analyze .spin {
  width: 12px; height: 12px;
  border: 2px solid rgba(8,7,10,0.3);
  border-top-color: var(--ink-0);
  border-radius: 50%;
  animation: spinner 0.7s linear infinite;
}
@keyframes spinner { to { transform: rotate(360deg); } }

/* ANALYSIS panel */
#journey-view .day-analysis {
  border-top: 1px solid var(--border);
  padding-top: 14px;
  display: flex; flex-direction: column; gap: 14px;
  overflow-y: auto;
  min-height: 0;
}
#journey-view .ja-block {
  display: flex; flex-direction: column; gap: 6px;
}
#journey-view .ja-eyebrow {
  font-size: 10px; text-transform: uppercase; letter-spacing: 1.6px;
  color: var(--ember); font-weight: 700;
}
#journey-view .ja-rewrite,
#journey-view .ja-summary {
  font-size: 14.5px; line-height: 1.55;
  color: var(--ice-0);
  letter-spacing: -0.005em;
  margin: 0;
}
#journey-view .ja-summary {
  font-style: italic;
  color: var(--ice-1);
}
#journey-view .ja-corrections {
  display: flex; flex-direction: column; gap: 6px;
}
#journey-view .ja-corr {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 14px;
  padding: 10px 12px;
  background: var(--ink-3);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}
#journey-view .ja-pair {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
  font-size: 14px;
}
#journey-view .ja-wr {
  color: var(--ice-2);
  text-decoration: line-through;
  text-decoration-color: var(--rust);
  text-decoration-thickness: 1.5px;
}
#journey-view .ja-ar { color: var(--ice-3); font-weight: 600; }
#journey-view .ja-rt { color: var(--ember); font-weight: 600; }
#journey-view .ja-side {
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
  font-size: 11px; color: var(--ice-2); white-space: nowrap;
}
#journey-view .ja-cat {
  text-transform: capitalize;
  font-weight: 700;
  letter-spacing: 0.4px;
}
#journey-view .ja-reason {
  grid-column: 1 / -1;
  font-size: 12.5px;
  color: var(--ice-1);
  font-style: italic;
}

/* Phone (<720px): the calendar shrinks to a single week-row strip.
   Smaller cells, no aspect-ratio (lets the row stay short). */
@media (max-width: 719px) {
  #journey-view .journey-cal {
    padding: 8px 10px;
    gap: 6px;
  }
  #journey-view .cal-weekdays {
    font-size: 9px;
    letter-spacing: 1.2px;
    padding: 2px 0;
  }
  #journey-view .cal-grid { gap: 3px; padding-top: 4px; }
  #journey-view .cday {
    aspect-ratio: auto;
    height: 30px;
    font-size: 12px;
    border-radius: 5px;
  }
  #journey-view .cday.has::after { width: 3px; height: 3px; bottom: 2px; }
  /* Hide weekday headers on the smallest screens since dates with M/T/W on top get cramped */
  #journey-view .cal-head { gap: 6px; }
  #journey-view .cal-label { font-size: 13px; }
  #journey-view .cal-nav { width: 26px; height: 26px; }
}

/* Day editor responsive */
@media (max-width: 1099px) and (min-width: 720px) {
  #journey-view .journey-day { padding: 14px 16px; }
  #journey-view .day-text { min-height: 220px; font-size: 14.5px; }
  #journey-view .day-date { font-size: 16px; }
  #journey-view .day-analyze { padding: 9px 14px; font-size: 13px; }
}
@media (max-width: 719px) {
  #journey-view .journey-topbar { padding: 8px 12px; gap: 6px; }
  #journey-view .journey-title-l { font-size: 14px; }
  #journey-view .journey-title-s { display: none; } /* "your daily writing" subtitle drops on phone */
  #journey-view .icon-btn-sm { width: 32px; height: 32px; }
  #journey-view .icon-btn-sm svg { width: 15px; height: 15px; }
  #journey-view .avatar-btn { width: 32px; height: 32px; }

  #journey-view .journey-day {
    padding: 12px 14px;
    gap: 10px;
  }
  #journey-view .day-text { min-height: 200px; font-size: 14px; padding: 12px 14px; }
  #journey-view .day-head { flex-wrap: wrap; gap: 4px; }
  #journey-view .day-date { font-size: 15px; }
  #journey-view .day-meta { font-size: 10.5px; }
  #journey-view .day-foot { gap: 8px; flex-wrap: wrap; }
  #journey-view .day-analyze {
    padding: 9px 14px;
    font-size: 13px;
    width: 100%;
    justify-content: center;
  }
  #journey-view .day-saved { width: 100%; order: 2; text-align: center; }
  #journey-view .ja-rewrite,
  #journey-view .ja-summary { font-size: 13.5px; line-height: 1.5; }
  #journey-view .ja-pair { font-size: 13px; }
}


/* ============================================================
   RESUME page — manual CV form + PDF import + start interview
   ============================================================ */

#resume-view.resume-view {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  width: 100vw;
  background: var(--ink-1);
  overflow-y: auto;
  overflow-x: hidden;
  /* Scrollbar lives on the full-width container, so it sits at the real viewport
     edge — not floating in the middle next to the centered .resume-main column. */
}
#resume-view.resume-view[hidden] { display: none; }

#resume-view .resume-topbar {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 20px;
  padding-top: max(14px, env(safe-area-inset-top));
  background: var(--ink-2);
  border-bottom: 1px solid var(--border);
  flex: none;
  position: sticky;
  top: 0;
  z-index: 10;
}
#resume-view .icon-btn-sm {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  color: var(--ice-1);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
  flex-shrink: 0;
}
#resume-view .icon-btn-sm:hover {
  background: var(--ink-3); color: var(--ember); border-color: var(--ember-line);
}
#resume-view .icon-btn-sm svg { width: 17px; height: 17px; }
#resume-view .resume-title { flex: 1; min-width: 0; }
#resume-view .resume-title-l {
  font-size: 17px; font-weight: 700; color: var(--ice-0); letter-spacing: -0.02em;
}
#resume-view .resume-title-s {
  font-size: 11px; color: var(--ice-2);
  text-transform: uppercase; letter-spacing: 1.6px; font-weight: 600;
  margin-top: 2px;
}

#resume-view .resume-main {
  flex: 1;
  padding: 22px 24px 32px;
  max-width: 920px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
@media (max-width: 720px) {
  #resume-view .resume-main { padding: 14px 14px 24px; gap: 14px; }
}

#resume-view .resume-eyebrow {
  font-size: 11px; text-transform: uppercase; letter-spacing: 1.6px;
  color: var(--ice-2); font-weight: 700;
}

/* Import card */
#resume-view .resume-import {
  background: var(--ink-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 10px;
}
#resume-view .resume-import-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
}
#resume-view .resume-import-hint { font-size: 11px; color: var(--ice-2); }
#resume-view .resume-import-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
#resume-view .resume-import-pdf {
  flex: 1; min-width: 240px;
  display: inline-flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  background: var(--ink-3);
  border: 1px dashed var(--border-hi);
  border-radius: var(--r-sm);
  color: var(--ice-1);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
#resume-view .resume-import-pdf:hover {
  border-color: var(--ember-line);
  color: var(--ember);
  background: var(--ink-3);
}
#resume-view .resume-import-pdf .icon-sm { width: 20px; height: 20px; flex-shrink: 0; }
#resume-view .resume-import-pdf-l {
  display: flex; flex-direction: column; gap: 2px;
}
#resume-view .resume-import-pdf-l strong {
  font-size: 14px; font-weight: 700; color: var(--ice-0); letter-spacing: -0.005em;
}
#resume-view .resume-import-pdf-l small {
  font-size: 11.5px; color: var(--ice-2); font-weight: 500;
}
#resume-view .resume-import-pdf:hover .resume-import-pdf-l strong { color: var(--ember); }

/* Full-screen overlay shown while parsing the PDF. Backdrop + centered card with
   a real progress bar (real upload %, then staged label progression while the
   server crunches Haiku + saves). */
.resume-import-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 11, 13, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: resumeImportFade 180ms var(--ease, ease-out);
}
.resume-import-overlay[hidden] { display: none; }
@keyframes resumeImportFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.resume-import-overlay-card {
  width: 100%; max-width: 420px;
  background: var(--ink-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 24px 22px 22px;
  display: flex; flex-direction: column; gap: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}
.resume-import-overlay-eyebrow {
  font-size: 11px; text-transform: uppercase; letter-spacing: 1.6px;
  color: var(--ice-2); font-weight: 700;
}
.resume-import-overlay-stage {
  font-size: 17px; font-weight: 700; color: var(--ice-0); letter-spacing: -0.02em;
  min-height: 22px;
}
.resume-import-overlay-bar {
  width: 100%; height: 8px;
  background: var(--ink-4, #1c1d20);
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.resume-import-overlay-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--ember) 0%, var(--ember) 100%);
  border-radius: 999px;
  width: 0%;
  transition: width 280ms cubic-bezier(0.22, 1, 0.36, 1);
}
.resume-import-overlay-pct {
  font-size: 12px; color: var(--ice-2); font-weight: 600;
  font-variant-numeric: tabular-nums;
  align-self: flex-end;
}
.resume-import-overlay-error {
  margin-top: 4px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  background: rgba(194, 85, 58, 0.10);
  border: 1px solid rgba(194, 85, 58, 0.32);
  color: var(--rust);
  font-size: 12.5px;
  line-height: 1.4;
}
.resume-import-overlay-error[hidden] { display: none; }

/* Form */
#resume-view .resume-form {
  display: flex; flex-direction: column; gap: 16px;
}
#resume-view .resume-section {
  background: var(--ink-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 16px 18px 18px;
  display: flex; flex-direction: column; gap: 12px;
}
#resume-view .resume-section-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-bottom: 4px;
}
#resume-view .resume-add-btn {
  background: transparent;
  border: 1px solid var(--border-hi);
  color: var(--ice-1);
  padding: 5px 12px;
  border-radius: var(--r-sm);
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
#resume-view .resume-add-btn:hover { border-color: var(--ember-line); color: var(--ember); }

/* Interview style toggle (3 cards) */
#resume-view .interview-type-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
@media (max-width: 720px) {
  #resume-view .interview-type-grid { grid-template-columns: 1fr; }
}
#resume-view .interview-type-card {
  display: flex; flex-direction: column; gap: 4px;
  text-align: left;
  padding: 12px 14px;
  background: var(--ink-3);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--ice-1);
  cursor: pointer;
  font-family: inherit;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
#resume-view .interview-type-card:hover { border-color: var(--ember-line); }
#resume-view .interview-type-card.active {
  border-color: var(--ember);
  background: rgba(216, 122, 64, 0.08);
}
#resume-view .interview-type-icon { font-size: 18px; line-height: 1; }
#resume-view .interview-type-label {
  font-size: 13px; font-weight: 700; color: var(--ice-0); letter-spacing: -0.005em;
  display: inline-flex; align-items: center; gap: 6px;
}
#resume-view .interview-type-pill {
  font-size: 9.5px; font-weight: 800; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--ember); background: var(--ember-soft);
  padding: 1px 6px; border-radius: 4px;
}
#resume-view .interview-type-desc { font-size: 11.5px; color: var(--ice-2); line-height: 1.4; }

#resume-view .resume-field {
  display: flex; flex-direction: column; gap: 6px;
}
#resume-view .resume-l {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: var(--ice-2);
  font-weight: 700;
}
#resume-view .resume-l em {
  font-style: normal;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ice-3);
  margin-left: 4px;
}
#resume-view .resume-form input[type="text"],
#resume-view .resume-form textarea {
  width: 100%;
  background: var(--ink-3);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--ice-0);
  font-family: inherit;
  font-size: 14px;
  letter-spacing: -0.005em;
  padding: 10px 12px;
  outline: none;
  transition: border-color var(--t-fast) var(--ease);
}
#resume-view .resume-form input[type="text"]:focus,
#resume-view .resume-form textarea:focus { border-color: var(--ember-line); }
#resume-view .resume-form textarea { resize: vertical; line-height: 1.5; }
#resume-view .resume-form input::placeholder,
#resume-view .resume-form textarea::placeholder { color: var(--ice-3); }

/* Experience / Education rows */
#resume-view .resume-list { display: flex; flex-direction: column; gap: 12px; }
#resume-view .resume-row {
  position: relative;
  background: var(--ink-3);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 12px 14px 14px;
  padding-right: 42px;
  display: flex; flex-direction: column; gap: 10px;
}
#resume-view .resume-row-grid {
  display: grid;
  grid-template-columns: 2fr 2fr 1fr 1fr;
  gap: 8px;
}
@media (max-width: 720px) {
  #resume-view .resume-row-grid { grid-template-columns: 1fr 1fr; }
}
#resume-view .resume-edu-grid { grid-template-columns: 1.5fr 2fr 1fr; }
@media (max-width: 720px) {
  #resume-view .resume-edu-grid { grid-template-columns: 1fr 1fr; }
}
#resume-view .resume-row textarea { background: var(--ink-2); }
#resume-view .resume-row-remove {
  position: absolute;
  top: 8px; right: 8px;
  width: 26px; height: 26px;
  border-radius: var(--r-sm);
  background: transparent;
  border: 0;
  color: var(--ice-2);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  font-family: inherit;
}
#resume-view .resume-row-remove:hover { background: var(--ink-2); color: var(--rust); }

/* Footer */
#resume-view .resume-foot {
  display: flex; align-items: center; gap: 12px;
  padding-top: 4px;
}
#resume-view .resume-saved {
  flex: 1;
  font-size: 12px;
  color: var(--ice-2);
  font-style: italic;
}
#resume-view .resume-save-btn {
  padding: 10px 16px;
  background: transparent;
  border: 1px solid var(--border-hi);
  color: var(--ice-1);
  border-radius: var(--r-sm);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
#resume-view .resume-save-btn:hover { border-color: var(--ember-line); color: var(--ember); }
#resume-view .resume-interview-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 18px;
  background: var(--ember);
  color: var(--ink-0);
  border: 0;
  border-radius: var(--r-sm);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), transform 80ms var(--ease);
}
#resume-view .resume-interview-btn:hover:not(:disabled) { background: var(--ember-soft); }
#resume-view .resume-interview-btn:active:not(:disabled) { transform: translateY(1px); }
#resume-view .resume-interview-btn:disabled { opacity: 0.45; cursor: not-allowed; }
#resume-view .resume-interview-btn .icon-sm { width: 14px; height: 14px; }

/* ============ EXERCISES VIEW ============ */
#exercises-view.exercises-view {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  width: 100vw;
  background: var(--ink-1);
  overflow-y: auto;
  overflow-x: hidden;
}
#exercises-view.exercises-view[hidden] { display: none; }
#exercises-view .exercises-topbar {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 20px;
  padding-top: max(14px, env(safe-area-inset-top));
  background: var(--ink-2);
  border-bottom: 1px solid var(--border);
  flex: none;
  position: sticky; top: 0; z-index: 10;
}
#exercises-view .icon-btn-sm {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  color: var(--ice-1);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
  flex-shrink: 0;
}
#exercises-view .icon-btn-sm:hover { background: var(--ink-3); color: var(--ember); border-color: var(--ember-line); }
#exercises-view .icon-btn-sm svg { width: 17px; height: 17px; }
#exercises-view .exercises-title { flex: 1; min-width: 0; }
#exercises-view .exercises-title-l { font-size: 17px; font-weight: 700; color: var(--ice-0); letter-spacing: -0.02em; }
#exercises-view .exercises-title-s {
  font-size: 11px; color: var(--ice-2);
  text-transform: uppercase; letter-spacing: 1.6px; font-weight: 600;
  margin-top: 2px;
}
#exercises-view .exercises-main {
  flex: 1;
  padding: 22px 24px 32px;
  max-width: 980px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
@media (max-width: 720px) {
  #exercises-view .exercises-main { padding: 14px 14px 24px; gap: 14px; }
}
#exercises-view .exercises-eyebrow {
  font-size: 11px; text-transform: uppercase; letter-spacing: 1.6px;
  color: var(--ice-2); font-weight: 700;
}
#exercises-view .exercises-loading {
  padding: 24px;
  text-align: center;
  color: var(--ice-2);
  font-size: 13px;
}

/* Weak topics rail */
#exercises-view .exercises-weak {
  background: var(--ink-2);
  border: 1px solid var(--ember-line);
  border-radius: var(--r-md);
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 10px;
}
#exercises-view .exercises-weak-list { display: flex; flex-wrap: wrap; gap: 8px; }
#exercises-view .exercises-weak-chip {
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--ink-3);
  border: 1px solid var(--border);
  color: var(--ice-1);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
#exercises-view .exercises-weak-chip:hover { border-color: var(--ember-line); color: var(--ember); }
#exercises-view .exercises-weak-chip strong { font-size: 13px; font-weight: 700; letter-spacing: -0.005em; }
#exercises-view .exercises-weak-chip span { font-size: 10.5px; color: var(--ice-2); font-weight: 600; }

/* Categories + topic grid */
#exercises-view .exercises-categories { display: flex; flex-direction: column; gap: 18px; }
#exercises-view .exercises-cat { display: flex; flex-direction: column; gap: 10px; }
#exercises-view .exercises-cat-head { display: flex; align-items: baseline; gap: 8px; }
#exercises-view .exercises-topic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
#exercises-view .exercises-topic-card {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--ink-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--ice-1);
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
  overflow: hidden;
}
#exercises-view .exercises-topic-card:hover {
  border-color: var(--ember-line);
  transform: translateY(-1px);
}
#exercises-view .exercises-topic-main {
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px 14px 12px;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  color: inherit;
  font-family: inherit;
  width: 100%;
}
#exercises-view .exercises-topic-gen {
  position: absolute;
  top: 8px; right: 8px;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 9px;
  background: var(--ink-3);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--ice-2);
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
#exercises-view .exercises-topic-gen:hover:not(:disabled) {
  border-color: var(--ember-line);
  color: var(--ember);
  background: var(--ink-2);
}
#exercises-view .exercises-topic-gen:disabled { cursor: default; opacity: 0.85; }
#exercises-view .exercises-topic-gen.loading {
  color: var(--ember);
  border-color: var(--ember-line);
  background: var(--ember-soft);
}
#exercises-view .exercises-topic-gen.loading .exercises-topic-gen-icon {
  display: inline-block;
  width: 11px; height: 11px;
  border: 1.6px solid var(--ember-line);
  border-top-color: var(--ember);
  border-radius: 50%;
  animation: exGenSpin 600ms linear infinite;
  font-size: 0;
}
@keyframes exGenSpin {
  to { transform: rotate(360deg); }
}
#exercises-view .exercises-topic-gen.success {
  color: var(--moss);
  border-color: rgba(127,163,122,0.32);
  background: rgba(127,163,122,0.10);
}
#exercises-view .exercises-topic-gen.error,
#exercises-view .exercises-topic-gen.throttled {
  color: var(--rust);
  border-color: rgba(194,85,58,0.32);
  background: rgba(194,85,58,0.08);
}
#exercises-view .exercises-topic-gen-icon { font-size: 11px; }

/* Inline loader for the "Generate fresh" button on the drill summary card */
#exercises-view .exercises-btn-secondary[data-loading="true"] {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}
#exercises-view .exercises-btn-secondary[data-loading="true"]::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 16px; height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid var(--ember-line);
  border-top-color: var(--ember);
  border-radius: 50%;
  animation: exGenSpin 700ms linear infinite;
}
#exercises-view .exercises-topic-name { font-size: 14px; font-weight: 700; color: var(--ice-0); letter-spacing: -0.005em; padding-right: 56px; }
#exercises-view .exercises-topic-meta { font-size: 11px; color: var(--ice-2); font-weight: 600; letter-spacing: 0.6px; }
#exercises-view .exercises-topic-foot {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
  font-size: 11px;
}
#exercises-view .exercises-topic-pool { color: var(--ice-2); font-weight: 600; }
#exercises-view .exercises-topic-acc { color: var(--ember); font-weight: 700; font-variant-numeric: tabular-nums; }

/* Drill */
#exercises-view .exercises-drill {
  display: flex; flex-direction: column; gap: 18px;
  padding: 8px 0;
}
#exercises-view .exercises-drill[hidden] { display: none; }
#exercises-view .exercises-drill-head {
  display: grid;
  grid-template-columns: 36px 1fr;
  grid-template-rows: auto auto;
  gap: 10px 12px;
  align-items: center;
}
#exercises-view .exercises-drill-meta { display: flex; flex-direction: column; gap: 2px; }
#exercises-view .exercises-drill-topic { font-size: 16px; font-weight: 700; color: var(--ice-0); letter-spacing: -0.01em; }
#exercises-view .exercises-drill-progress { font-size: 11px; color: var(--ice-2); font-weight: 600; font-variant-numeric: tabular-nums; }
#exercises-view .exercises-drill-bar {
  grid-column: 1 / -1;
  height: 6px;
  background: var(--ink-3);
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid var(--border);
}
#exercises-view .exercises-drill-bar-fill {
  height: 100%;
  width: 0%;
  background: var(--ember);
  border-radius: 999px;
  transition: width 280ms cubic-bezier(0.22, 1, 0.36, 1);
}
#exercises-view .exercises-drill-card {
  background: var(--ink-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 22px 22px 18px;
  display: flex; flex-direction: column; gap: 14px;
}
#exercises-view .exercises-drill-type {
  font-size: 11px; color: var(--ice-2); text-transform: uppercase; letter-spacing: 1.2px; font-weight: 700;
}
#exercises-view .exercises-prompt {
  font-size: 18px; line-height: 1.55; color: var(--ice-0); letter-spacing: -0.005em;
}
#exercises-view .exercises-input {
  display: inline-block;
  margin: 0 4px;
  padding: 4px 8px;
  min-width: 8ch;
  background: var(--ink-3);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--ice-0);
  font-family: inherit;
  font-size: inherit;
  vertical-align: baseline;
}
#exercises-view .exercises-input::placeholder {
  color: var(--ice-3);
  font-style: italic;
  font-size: 0.85em;
}
#exercises-view .exercises-input:focus { border-color: var(--ember-line); outline: none; }
#exercises-view .exercises-input-wide {
  display: block;
  width: 100%;
  margin: 6px 0 0;
  padding: 10px 12px;
  font-size: 16px;
}
#exercises-view .exercises-mc {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
@media (max-width: 540px) {
  #exercises-view .exercises-mc { grid-template-columns: 1fr; }
}
#exercises-view .exercises-mc-btn {
  padding: 12px 14px;
  background: var(--ink-3);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--ice-1);
  font-family: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
  display: flex;
  align-items: center;
  gap: 10px;
}
#exercises-view .exercises-mc-letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--ink-2);
  border: 1px solid var(--border);
  font-size: 11px;
  font-weight: 800;
  color: var(--ice-2);
  flex-shrink: 0;
}
#exercises-view .exercises-mc-btn.correct .exercises-mc-letter { color: var(--moss); border-color: rgba(127,163,122,0.42); }
#exercises-view .exercises-mc-btn.wrong .exercises-mc-letter { color: var(--rust); border-color: rgba(194,85,58,0.42); }
#exercises-view .exercises-mc-text { flex: 1; min-width: 0; }
#exercises-view .exercises-mc-btn:hover:not(:disabled):not(.correct):not(.wrong) {
  border-color: var(--ember-line); color: var(--ember);
}
#exercises-view .exercises-mc-btn.correct {
  border-color: var(--moss); color: var(--moss); background: rgba(127,163,122,0.10);
}
#exercises-view .exercises-mc-btn.wrong {
  border-color: var(--rust); color: var(--rust); background: rgba(194,85,58,0.10);
}
#exercises-view .exercises-mc-btn:disabled { cursor: default; }

#exercises-view .exercises-feedback {
  padding: 12px 14px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--ink-3);
  color: var(--ice-1);
  font-size: 13px;
  line-height: 1.5;
  display: flex; flex-direction: column; gap: 6px;
}
#exercises-view .exercises-feedback[hidden] { display: none; }
#exercises-view .exercises-feedback[data-kind="ok"] {
  color: var(--moss); border-color: rgba(127,163,122,0.32); background: rgba(127,163,122,0.08);
}
#exercises-view .exercises-feedback[data-kind="error"] {
  color: var(--rust); border-color: rgba(194,85,58,0.32); background: rgba(194,85,58,0.08);
}
#exercises-view .exercises-fb-head { font-weight: 700; font-size: 13px; }
#exercises-view .exercises-fb-expected { color: var(--ice-1); font-size: 12.5px; }
#exercises-view .exercises-fb-expl { color: var(--ice-2); font-size: 12.5px; line-height: 1.45; }
#exercises-view .exercises-fb-example,
#exercises-view .exercises-fb-tip {
  color: var(--ice-1);
  font-size: 12.5px;
  line-height: 1.45;
  padding: 6px 8px;
  background: var(--ink-3);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  margin-top: 4px;
}
#exercises-view .exercises-fb-example { font-style: italic; }
#exercises-view .exercises-fb-tag {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--ember);
  background: var(--ember-soft);
  padding: 1px 6px;
  border-radius: 4px;
  margin-right: 6px;
  vertical-align: middle;
}

#exercises-view .exercises-drill-actions {
  display: flex; justify-content: flex-end; gap: 10px;
}
#exercises-view .exercises-btn-primary,
#exercises-view .exercises-btn-secondary {
  padding: 10px 18px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
  letter-spacing: -0.005em;
}
#exercises-view .exercises-btn-primary {
  background: var(--ember);
  border: 1px solid var(--ember);
  color: var(--ink-0);
}
#exercises-view .exercises-btn-primary:hover:not(:disabled) { background: var(--ember-soft); }
#exercises-view .exercises-btn-primary:disabled { opacity: 0.45; cursor: not-allowed; }
#exercises-view .exercises-btn-secondary {
  background: var(--ink-3);
  border: 1px solid var(--ember-line);
  color: var(--ember);
}
#exercises-view .exercises-btn-secondary:hover:not(:disabled) { background: var(--ember-soft); }
#exercises-view .exercises-btn-secondary:disabled { opacity: 0.6; cursor: not-allowed; }
#exercises-view .exercises-btn-tertiary {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--ice-1);
}
#exercises-view .exercises-btn-tertiary:hover { border-color: var(--ember-line); color: var(--ember); }
#exercises-view .exercises-summary-hint {
  margin-top: 10px;
  font-size: 12px;
  color: var(--rust);
}
#exercises-view .exercises-summary-hint[hidden] { display: none; }

#exercises-view .exercises-summary {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 20px 0;
  text-align: center;
}
#exercises-view .exercises-summary-pct {
  font-size: 56px; font-weight: 800; color: var(--ember); letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
#exercises-view .exercises-summary-l { color: var(--ice-1); font-size: 14px; }
#exercises-view .exercises-summary-actions { display: flex; gap: 10px; margin-top: 8px; }

/* ============ SPEAKING IMMERSION v1 ============
   Two body-level overlay toasts:
   - .qc-toast — real-time correction modal (Feature A). Center, ember.
   - .er-toast — recurring-error reuse celebration (Feature C). Top, moss. */

.qc-toast {
  position: fixed;
  left: 50%;
  top: 24%;
  transform: translate(-50%, -8px) scale(0.96);
  width: min(92vw, 520px);
  padding: 18px 22px;
  background: var(--ink-2);
  border: 1.5px solid var(--ember-line);
  border-radius: var(--r-md);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 0 32px rgba(216, 122, 64, 0.18);
  z-index: 10000;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}
.qc-toast.show {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0) scale(1);
}
.qc-toast[hidden] { display: none; }
.qc-toast-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.qc-toast-row.qc-meta {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
  font-size: 11.5px;
}
.qc-wrong {
  text-decoration: line-through;
  text-decoration-color: var(--rust);
  text-decoration-thickness: 2px;
  color: var(--ice-2);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.qc-arrow {
  color: var(--ice-3);
  font-size: 18px;
  font-weight: 700;
}
.qc-right {
  color: var(--ember);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.005em;
}
.qc-cat {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--ember);
  background: var(--ember-soft);
  padding: 2px 8px;
  border-radius: 4px;
}
.qc-reason {
  color: var(--ice-2);
  font-size: 12.5px;
  line-height: 1.45;
  flex: 1;
  min-width: 0;
}
@media (max-width: 540px) {
  .qc-toast { top: 18%; padding: 14px 16px; width: 94vw; }
  .qc-wrong, .qc-right { font-size: 15px; }
  .qc-arrow { font-size: 15px; }
}

/* Recurring-error reuse celebration toast (Feature C) */
.er-toast {
  position: fixed;
  top: 14%;
  left: 50%;
  transform: translate(-50%, -10px) scale(0.95);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: rgba(127, 163, 122, 0.16);
  border: 1px solid rgba(127, 163, 122, 0.42);
  border-radius: 999px;
  color: var(--moss);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: -0.005em;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease-out, transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
.er-toast.show {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}
.er-toast[hidden] { display: none; }
.er-tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--moss);
  color: var(--ink-0);
  font-size: 11px;
  font-weight: 900;
  flex-shrink: 0;
}

/* === Persona picker (Settings sheet) === */
.persona-section {
  display: flex; flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
  background: var(--ink-3);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  margin-bottom: 10px;
}
.persona-section-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
}
.persona-eyebrow {
  font-size: 10.5px; font-weight: 800;
  letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--ice-2);
}
.persona-hint {
  font-size: 11px; color: var(--ice-2);
}
.persona-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.persona-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--ink-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  cursor: pointer;
  text-align: left;
  color: inherit;
  font-family: inherit;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.persona-card:hover { border-color: var(--ember-line); }
.persona-card.active {
  border-color: var(--ember);
  background: rgba(216, 122, 64, 0.08);
}
.persona-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--ember-soft);
  color: var(--ember);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 14px;
  border: 1px solid var(--ember-line);
  flex-shrink: 0;
}
.persona-card.active .persona-avatar {
  background: var(--ember);
  color: var(--ink-0);
}
.persona-avatar-none {
  background: transparent;
  border-color: var(--border);
  color: var(--ice-2);
}
.persona-info {
  display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1;
}
.persona-name {
  font-size: 13.5px; font-weight: 700; color: var(--ice-0);
}
.persona-flag {
  font-size: 11px; font-weight: 600; color: var(--ice-2); margin-left: 4px;
}
.persona-tone {
  font-size: 11.5px; color: var(--ice-1); line-height: 1.35;
}
.persona-voice {
  font-size: 10.5px; color: var(--ice-2); letter-spacing: 0.4px;
}

/* ============ PERSONAL LEARNING REPORT ============ */
#learning-view.learning-view {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  width: 100vw;
  background: var(--ink-1);
  overflow-y: auto;
  overflow-x: hidden;
}
#learning-view.learning-view[hidden] { display: none; }
#learning-view .learning-topbar {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 20px;
  padding-top: max(14px, env(safe-area-inset-top));
  background: var(--ink-2);
  border-bottom: 1px solid var(--border);
  flex: none;
  position: sticky; top: 0; z-index: 10;
}
#learning-view .icon-btn-sm {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  color: var(--ice-1);
  cursor: pointer;
  flex-shrink: 0;
}
#learning-view .icon-btn-sm:hover { background: var(--ink-3); color: var(--ember); border-color: var(--ember-line); }
#learning-view .icon-btn-sm svg { width: 17px; height: 17px; }
#learning-view .learning-title { flex: 1; min-width: 0; }
#learning-view .learning-title-l { font-size: 17px; font-weight: 700; color: var(--ice-0); letter-spacing: -0.02em; }
#learning-view .learning-title-s {
  font-size: 11px; color: var(--ice-2);
  text-transform: uppercase; letter-spacing: 1.6px; font-weight: 600;
  margin-top: 2px;
}
#learning-view .learning-add-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  background: var(--ember);
  border: 0;
  border-radius: var(--r-sm);
  color: var(--ink-0);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease);
}
#learning-view .learning-add-btn:hover { background: var(--ember-soft); }
#learning-view .learning-add-btn svg { width: 14px; height: 14px; }

#learning-view .learning-main {
  flex: 1;
  padding: 22px 24px 32px;
  max-width: 980px;
  width: 100%;
  margin: 0 auto;
  display: flex; flex-direction: column;
  gap: 22px;
}
@media (max-width: 720px) {
  #learning-view .learning-main { padding: 14px 14px 24px; gap: 14px; }
}
#learning-view .learning-eyebrow {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 1.6px;
  color: var(--ice-2); font-weight: 800;
}
#learning-view .learning-section-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  margin-bottom: 8px;
}
#learning-view .learning-section-tail {
  font-size: 11px; color: var(--ice-2); font-variant-numeric: tabular-nums;
}
#learning-view .learning-empty-line { color: var(--ice-2); font-size: 13px; padding: 10px 4px; }

/* Empty hero */
#learning-view .learning-empty {
  display: flex; flex-direction: column; gap: 10px;
  padding: 28px 24px;
  background: var(--ink-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  text-align: center;
  align-items: center;
}
#learning-view .learning-empty-eyebrow {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 1.8px; color: var(--ember); font-weight: 800;
}
#learning-view .learning-empty-h1 {
  font-size: 22px; font-weight: 800; color: var(--ice-0); letter-spacing: -0.02em;
}
#learning-view .learning-empty-desc { font-size: 13px; color: var(--ice-2); max-width: 480px; line-height: 1.45; }
#learning-view .learning-empty-cta-row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
#learning-view .learning-empty-cta {
  padding: 10px 16px;
  background: var(--ink-3);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--ice-1);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
#learning-view .learning-empty-cta:hover { border-color: var(--ember-line); color: var(--ember); }
#learning-view .learning-empty-cta-primary {
  background: var(--ember); color: var(--ink-0); border-color: var(--ember);
}
#learning-view .learning-empty-cta-primary:hover { background: var(--ember-soft); border-color: var(--ember-soft); }

/* Today card */
#learning-view .learning-today,
#learning-view .learning-chart-wrap,
#learning-view .learning-rollup,
#learning-view .learning-table-wrap {
  background: var(--ink-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 14px 16px;
  display: flex; flex-direction: column;
}
#learning-view .learning-today-rows { display: flex; flex-direction: column; gap: 8px; }
#learning-view .learning-today-row {
  display: grid;
  grid-template-columns: 90px 1fr 60px;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}
#learning-view .learning-today-name { color: var(--ice-1); font-weight: 600; }
#learning-view .learning-today-bar  { height: 8px; background: var(--ink-3); border-radius: 999px; overflow: hidden; }
#learning-view .learning-today-fill { display: block; height: 100%; border-radius: 999px; transition: width 280ms cubic-bezier(0.22, 1, 0.36, 1); }
#learning-view .learning-today-min  { color: var(--ember); font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }

/* Chart */
#learning-view .learning-chart {
  width: 100%;
  height: 140px;
}
#learning-view .lc-svg { width: 100%; height: 100%; }
#learning-view .lc-axis { font-size: 9px; fill: var(--ice-3); font-family: inherit; }
#learning-view .lc-seg { transition: opacity var(--t-fast) var(--ease); cursor: pointer; }
#learning-view .lc-seg:hover { opacity: 0.85; }
#learning-view .learning-chart-legend {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
  font-size: 11.5px;
  color: var(--ice-2);
}
#learning-view .lc-leg-item { display: inline-flex; align-items: center; gap: 6px; }
#learning-view .lc-leg-dot { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }

/* Rollup */
#learning-view .learning-rollup-rows { display: flex; flex-direction: column; gap: 8px; }
#learning-view .learning-rollup-row {
  display: grid;
  grid-template-columns: 110px 70px 1fr 40px;
  gap: 10px;
  align-items: center;
  font-size: 13px;
}
#learning-view .learning-rollup-name { color: var(--ice-1); font-weight: 600; }
#learning-view .learning-rollup-min  { color: var(--ice-1); font-variant-numeric: tabular-nums; }
#learning-view .learning-rollup-bar  { height: 8px; background: var(--ink-3); border-radius: 999px; overflow: hidden; }
#learning-view .learning-rollup-fill { display: block; height: 100%; border-radius: 999px; transition: width 280ms cubic-bezier(0.22, 1, 0.36, 1); }
#learning-view .learning-rollup-pct  { color: var(--ember); font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }

/* Table / filters */
#learning-view .learning-filters { display: inline-flex; gap: 6px; }
#learning-view .learning-filters select {
  padding: 4px 8px;
  background: var(--ink-3);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--ice-1);
  font-family: inherit;
  font-size: 11.5px;
}
#learning-view .learning-table { display: flex; flex-direction: column; }
#learning-view .learning-row {
  display: grid;
  grid-template-columns: 64px 1fr 130px 60px 56px;
  gap: 12px;
  align-items: center;
  padding: 10px 4px;
  font-size: 13px;
  border-bottom: 1px solid var(--border);
}
#learning-view .learning-row-head {
  font-size: 10.5px; color: var(--ice-2); text-transform: uppercase; letter-spacing: 1.4px; font-weight: 800;
  border-bottom: 1px solid var(--border);
}
#learning-view .learning-row:last-child { border-bottom: 0; }
#learning-view .learning-row-date { color: var(--ice-2); font-weight: 700; font-size: 11.5px; letter-spacing: 0.6px; }
#learning-view .learning-row-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow: hidden; }
#learning-view .learning-row-link { color: var(--ice-0); font-weight: 600; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#learning-view .learning-row-link:hover { color: var(--ember); text-decoration: underline; }
#learning-view .learning-row-notes { font-size: 11.5px; color: var(--ice-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#learning-view .learning-row-type { display: inline-flex; align-items: center; gap: 6px; color: var(--ice-1); }
#learning-view .learning-row-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
#learning-view .learning-row-min { color: var(--ember); font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
#learning-view .learning-row-actions { display: inline-flex; gap: 4px; justify-content: flex-end; }
#learning-view .learning-row-btn {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--ice-2);
  width: 24px; height: 24px;
  font-size: 11px;
  cursor: pointer;
  font-family: inherit;
}
#learning-view .learning-row-btn:hover { border-color: var(--ember-line); color: var(--ember); }

@media (max-width: 720px) {
  #learning-view .learning-row,
  #learning-view .learning-row-head { grid-template-columns: 60px 1fr 50px 40px; }
  #learning-view .learning-row .learning-row-type { display: none; }
  #learning-view .learning-row-head span:nth-child(3) { display: none; }
  #learning-view .learning-row-title { font-size: 12.5px; }
}

/* === Learning add/edit modal === */
.learning-modal {
  position: fixed; inset: 0;
  z-index: 10001;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.learning-modal[hidden] { display: none; }
.learning-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.learning-modal-card {
  position: relative;
  width: 100%; max-width: 560px;
  max-height: 92vh;
  background: var(--ink-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  display: flex; flex-direction: column;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}
.learning-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.learning-modal-head strong { font-size: 15px; color: var(--ice-0); }
.learning-modal-head .icon-btn-sm {
  width: 32px; height: 32px;
  background: transparent; border: 1px solid transparent;
  border-radius: var(--r-sm); color: var(--ice-1); cursor: pointer;
}
.learning-modal-head .icon-btn-sm:hover { background: var(--ink-3); color: var(--rust); }

.learning-form {
  padding: 16px 18px 18px;
  display: flex; flex-direction: column; gap: 12px;
  overflow-y: auto;
}
.learning-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}
@media (max-width: 540px) {
  .learning-form-row { grid-template-columns: 1fr; }
}
.learning-field { display: flex; flex-direction: column; gap: 4px; }
.learning-l {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 1.4px;
  color: var(--ice-2); font-weight: 800;
}
.learning-l em { font-style: normal; color: var(--ice-3); font-weight: 600; letter-spacing: 0.4px; text-transform: none; margin-left: 4px; }
.learning-form input[type="text"],
.learning-form input[type="number"],
.learning-form input[type="date"],
.learning-form select,
.learning-form textarea {
  padding: 8px 10px;
  background: var(--ink-3);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--ice-0);
  font-family: inherit;
  font-size: 13.5px;
}
.learning-form input:focus, .learning-form select:focus, .learning-form textarea:focus {
  border-color: var(--ember-line);
  outline: none;
}
.learning-form textarea { resize: vertical; line-height: 1.45; }

.learning-words-section {
  margin-top: 4px;
  padding: 10px 12px;
  background: var(--ink-3);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  display: flex; flex-direction: column; gap: 8px;
}
.learning-words-head { display: flex; align-items: center; justify-content: space-between; }
.learning-add-word {
  background: transparent; border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 4px 10px;
  font-family: inherit; font-size: 11.5px; font-weight: 700;
  color: var(--ice-1); cursor: pointer;
}
.learning-add-word:hover { border-color: var(--ember-line); color: var(--ember); }
.learning-words-list { display: flex; flex-direction: column; gap: 6px; }
.learning-word-row { display: grid; grid-template-columns: 110px 1fr 28px; gap: 6px; }
.learning-word-row input { font-size: 12.5px !important; padding: 6px 8px !important; }
.lf-word-rm {
  background: transparent; border: 1px solid var(--border); border-radius: var(--r-sm);
  color: var(--ice-2); cursor: pointer; font-family: inherit; font-size: 13px;
}
.lf-word-rm:hover { color: var(--rust); border-color: rgba(194,85,58,0.32); }
.learning-words-hint { font-size: 11px; color: var(--ice-3); line-height: 1.45; }

.learning-modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.learning-btn-primary,
.learning-btn-secondary {
  padding: 9px 18px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  border-radius: var(--r-sm);
  cursor: pointer;
}
.learning-btn-primary { background: var(--ember); border: 0; color: var(--ink-0); }
.learning-btn-primary:hover:not(:disabled) { background: var(--ember-soft); }
.learning-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.learning-btn-secondary { background: transparent; border: 1px solid var(--border); color: var(--ice-1); }
.learning-btn-secondary:hover { border-color: var(--ember-line); color: var(--ember); }

/* Mobile: shrink the report avatar/btn so the topbar fits */
@media (max-width: 640px) {
  #learning-view .learning-topbar { padding: 10px 12px !important; gap: 6px !important; }
  #learning-view .learning-add-btn { padding: 6px 10px; font-size: 12px; }
  #learning-view .learning-add-btn span { display: none; }
  #learning-view .learning-title-l { font-size: 14px !important; }
  #learning-view .learning-title-s { font-size: 10px !important; letter-spacing: 1.2px; }
  #learning-view .icon-btn-sm { width: 32px !important; height: 32px !important; }
  #learning-view .avatar-btn { width: 32px !important; height: 32px !important; font-size: 11px !important; }
}