/* ============================================================
   JARVIS - desktop UI
   ============================================================ */
:root {
  /* ════ SURFACES - Graphite base + calm 5-level depth ════ */
  --bg:           #0a0b0e;
  --bg-elev-1:    #101217;
  --bg-elev-2:    #14161c;
  --bg-elev-3:    #191c23;
  --bg-elev-4:    #21252d;
  /* Glass surface - for paywall, modals, hover overlays */
  --glass-bg:     rgba(18, 20, 26, 0.82);
  --glass-bord:   rgba(255, 255, 255, 0.06);

  /* ════ ACCENT - terminal palette: light blue (primary) + dark blue (depth) ════ */
  /* Express every accent border/fill as rgb(var(--accent-rgb) / <alpha>). */
  --accent-rgb:       91 134 255;    /* #5b86ff - royal blue (AURON brand accent)  */
  --accent-blue-rgb:  37 99 235;     /* #2563eb - dark blue (buttons / depth)      */
  --accent-2-rgb:     91 134 255;    /* alias → royal blue                         */
  --accent:        rgb(var(--accent-rgb));
  --accent-blue:   rgb(var(--accent-blue-rgb));
  --accent-2:      rgb(var(--accent-rgb));
  --accent-3:      rgb(var(--accent-rgb));   /* legacy alias → light blue */
  --accent-glow:   rgb(var(--accent-rgb) / 0.22);
  /* HUD aliases → light blue */
  --hud-accent:    var(--accent);
  --hud-track:     rgb(var(--accent-rgb) / 0.22);
  --hud-bg-edge:   rgb(var(--accent-rgb) / 0.04);

  /* ════ BORDERS - hairline weights ════ */
  --border:        rgba(255, 255, 255, 0.07);
  --border-strong: rgba(255, 255, 255, 0.12);
  --border-focus:  rgb(var(--accent-rgb) / 0.55);

  /* ════ TEXT - 4 weights (all ≥4.5:1 on bg for body) ════ */
  --text:         #f1f3f6;
  --text-muted:   #b3bac6;
  --text-dim:     #8e97a4;   /* grey - ≥4.5:1 on --bg (WCAG AA)                   */
  --text-faint:   #404650;   /* decorative only (credits, etc.) - not body text  */

  /* ════ STATUS - desaturated, calm (not fluorescent) ════ */
  --danger:       #df6b73;
  --warning:      #d6a85f;
  --success:      #74c69a;
  --info:         var(--accent);

  /* ════ GRADIENTS - subtle light-blue → dark-blue (two-tone, no rainbow) ════ */
  --grad:         linear-gradient(135deg, rgb(var(--accent-rgb)) 0%, rgb(var(--accent-blue-rgb)) 100%);
  --grad-warm:    linear-gradient(135deg, var(--accent) 0%, var(--accent-blue) 100%);
  --grad-cool:    linear-gradient(135deg, var(--accent) 0%, var(--accent-blue) 100%);
  --grad-soft:    linear-gradient(135deg, rgb(var(--accent-rgb) / 0.10), rgb(var(--accent-rgb) / 0.06));
  --grad-text:    var(--text);   /* gradient text stays solid */

  /* ════ ELEVATION - soft NEUTRAL shadows only, no colored glow ════ */
  --shadow-sm:    0 1px 2px rgba(0,0,0,0.30);
  --shadow-md:    0 4px 16px rgba(0,0,0,0.32);
  --shadow-lg:    0 16px 48px rgba(0,0,0,0.44);
  --shadow-xl:    0 28px 72px rgba(0,0,0,0.52);
  --shadow-accent:0 4px 16px rgba(0,0,0,0.32);
  --glow-accent:  0 0 0 1px var(--border-strong);

  /* ════ RADII ════ */
  --r-xs: 4px; --r-sm: 7px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-2xl: 28px; --r-full: 999px;

  /* ════ SPACING SCALE - 4px base (NEW) ════ */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px;

  /* ════ TYPE SCALE (NEW) ════ */
  --fs-xs: 12px; --fs-sm: 13px; --fs-base: 14px; --fs-md: 15px;
  --fs-lg: 18px; --fs-xl: 22px; --fs-2xl: 28px; --fs-3xl: 36px;
  --leading-tight: 1.2; --leading-normal: 1.5;

  /* ════ FONTS ════ */
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* boot log + terminal readouts ONLY */
  --font-display: 'Orbitron', var(--font-sans);                               /* HUD labels / brand */

  /* ════ MOTION - consistent easing language ════ */
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --d-fast:       0.12s;
  --d-base:       0.22s;
  --d-slow:       0.45s;

  /* ════ LAYOUT (NEW) ════ */
  --sidebar-w:    280px;   /* keep equal to the .app grid column */
  --bp-mobile:    760px;
  --bp-tablet:    1080px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, textarea { font: inherit; color: inherit; background: none; border: none; outline: none; }

kbd {
  background: var(--bg-elev-3);
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  padding: 1px 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-muted);
}

/* ============================================================
   LAYOUT
   ============================================================ */
.app {
  display: grid;
  grid-template-columns: 280px 1fr;
  height: 100vh;
  background:
    radial-gradient(1200px 600px at 80% -100px, rgb(var(--accent-rgb) / 0.06), transparent 60%),
    radial-gradient(1000px 600px at -100px 100%, rgb(var(--accent-rgb) / 0.05), transparent 60%);
}

/* ============================================================
   SIDEBAR
   ============================================================ */
.sidebar {
  background: rgba(255,255,255,0.015);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 18px 14px;
  gap: 22px;
  overflow-y: auto;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 6px 14px 6px;
  border-bottom: 1px solid var(--border);
}
.brand-logo {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgb(var(--accent-rgb) / 0.08);
  box-shadow: none;
}
.brand-name {
  font-weight: 800;
  letter-spacing: 0.18em;
  font-size: 14px;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.brand-sub {
  color: var(--text-dim);
  font-size: 11px;
  letter-spacing: 0.04em;
  margin-top: 2px;
}

.sidebar-section { display: flex; flex-direction: column; gap: 6px; }
.sidebar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  letter-spacing: 0.12em;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 0 6px;
  margin-bottom: 4px;
}

.icon-btn {
  width: 24px; height: 24px;
  border-radius: 6px;
  display: grid; place-items: center;
  color: var(--text-muted);
  transition: all 0.15s;
  font-size: 16px;
  line-height: 1;
}
.icon-btn:hover {
  background: var(--bg-elev-2);
  color: var(--text);
}

.project-list, .upcoming-list { display: flex; flex-direction: column; gap: 2px; }

.project-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: all 0.15s;
  border: 1px solid transparent;
}
.project-item:hover { background: var(--bg-elev-2); }
.project-item.active {
  background: var(--grad-soft);
  border-color: var(--border-strong);
}
.project-item .name {
  font-weight: 500;
  color: var(--text);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.project-item .count {
  font-size: 11px;
  color: var(--text-dim);
  background: var(--bg-elev-3);
  padding: 2px 7px;
  border-radius: 10px;
  margin-left: 8px;
}
.project-item.active .name {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.upcoming-item {
  padding: 8px 10px;
  border-radius: var(--r-md);
  font-size: 12px;
}
.upcoming-item .title {
  color: var(--text);
  font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.upcoming-item .meta {
  display: flex; justify-content: space-between;
  color: var(--text-dim);
  font-size: 11px;
  margin-top: 2px;
}
.upcoming-item .days.urgent { color: var(--danger); font-weight: 600; }
.upcoming-item .days.soon { color: var(--warning); font-weight: 600; }
.upcoming-item .days.fine { color: var(--success); }

.sidebar-footer {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ghost-btn {
  padding: 8px 12px;
  border-radius: var(--r-md);
  color: var(--text-muted);
  font-size: 12px;
  border: 1px solid var(--border);
  transition: all 0.15s;
  text-align: center;
}
.ghost-btn:hover { background: var(--bg-elev-2); color: var(--text); }

.status-line {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; color: var(--text-dim);
  padding: 0 6px;
}
.credit {
  padding: 10px 6px 2px;
  font-family: 'Orbitron', sans-serif;
  font-size: 8px;
  line-height: 1.8;
  color: var(--text-dim);
  letter-spacing: 0.12em;
  text-align: center;
  text-transform: uppercase;
  opacity: 0.85;
  display: flex; flex-direction: column; gap: 2px;
}
.credit-line {
  display: block;
  font-size: 7.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--text-dim);
}
.credit-name, .credit-org {
  display: block;
  font-weight: 800;
  letter-spacing: 0.18em;
  font-size: 9px;
}
.credit-name {
  color: var(--text-dim);
  -webkit-text-fill-color: var(--text-dim);
}
.credit-org {
  color: var(--text-faint);
  -webkit-text-fill-color: var(--text-faint);
}
.credit-ver {
  display: inline-block; margin-top: 5px;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 8px; font-weight: 700; letter-spacing: 0.1em;
  color: var(--accent); -webkit-text-fill-color: var(--accent);
  opacity: 0.8;
}

@keyframes shimmer {
  0%   { background-position: 0% 50%; }
  100% { background-position: 400% 50%; }
}
@keyframes creditWobble {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  20%      { transform: rotate(0.8deg) translateY(-1px); }
  40%      { transform: rotate(0deg) translateY(0); }
  60%      { transform: rotate(-0.8deg) translateY(-0.5px); }
  80%      { transform: rotate(0.3deg) translateY(0); }
}
@keyframes floatChar {
  0%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
  25%      { transform: translateY(-3px) rotate(-2deg) scale(1.02); }
  50%      { transform: translateY(0) rotate(0deg) scale(1); }
  75%      { transform: translateY(-2px) rotate(2deg) scale(1.01); }
}
@keyframes glowPulse {
  0%, 100% { filter: none; }
  50%      { filter: none; }
}
@keyframes dim-pulse {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 0.9; }
}
.dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--warning);
}
.dot.ok { background: var(--success); }
.dot.bad { background: var(--danger); }

/* ============================================================
   MAIN
   ============================================================ */
.main {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 0;
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 24px;
  border-bottom: 1px solid var(--border);
  background: rgba(8,8,13,0.5);
  backdrop-filter: blur(10px);
  position: relative;
  z-index: 40;            /* keep the model dropdown above the chat/HUD */
}
.topbar-left .active-project {
  font-weight: 600;
  font-size: 14px;
}
.topbar-left .active-project .muted { color: var(--text-dim); font-weight: 400; }
.topbar-right { display: flex; align-items: center; gap: 10px; }
.ap-label {
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.01em;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.badge {
  padding: 4px 10px;
  border-radius: 999px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
}

/* ============================================================
   CHAT
   ============================================================ */
.chat {
  overflow-y: auto;
  padding: 36px 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 30px;
  min-height: 0;
  scroll-padding-bottom: 24px;
}

.welcome {
  /* top 2vh / bottom auto: the ΛURON lockup + greeting sit toward the TOP of
     the chat instead of dead-center (owner request, 2026-06-11) */
  margin: 2vh auto auto;
  max-width: 660px;
  text-align: center;
  padding: 56px 24px;
  animation: fadeIn 0.5s ease;
}
.welcome-mark {
  display: block;
  margin: 0 auto 22px;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  opacity: 0.95;
  filter: hue-rotate(48deg) saturate(0.78);
}
.welcome h1 {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}
.welcome .grad {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.welcome-sub {
  color: var(--text-muted);
  margin-bottom: 32px;
  font-size: 15px;
}
.suggestion-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  max-width: 560px;
  margin: 36px auto 0;
}
.suggestion {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  border-radius: var(--r-lg);
  background: var(--bg-elev-1);
  border: 1px solid var(--border);
  text-align: left;
  transition: all 0.2s;
}
.suggestion:hover {
  background: var(--bg-elev-2);
  border-color: var(--border-strong);
  transform: translateY(-1px);
}
.suggestion-icon { font-size: 22px; }
.suggestion-title { font-weight: 600; font-size: 13px; }
.suggestion-desc { font-size: 11px; color: var(--text-dim); margin-top: 2px; }

.msg {
  max-width: 784px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  gap: 15px;
  animation: msgIn 0.3s ease;
}
@keyframes msgIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.msg-avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  display: grid; place-items: center;
  flex-shrink: 0;
  font-weight: 700;
  font-size: 12px;
  margin-top: 1px;
}
.msg.user .msg-avatar {
  background: var(--bg-elev-3);
  border: 1px solid var(--border);
  color: var(--text-muted);
}
.msg.assistant .msg-avatar {
  background: var(--grad);
  color: white;
}

.msg-body { flex: 1; min-width: 0; }
.msg-role {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-dim);
  letter-spacing: 0.04em;
  text-transform: none;
  margin-bottom: 5px;
}
.msg.assistant .msg-role {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  color: var(--text-muted);
}
.msg-content {
  font-size: 15px;
  line-height: 1.68;
  color: var(--text);
  word-wrap: break-word;
}
.msg-content p { margin-bottom: 0.8em; }
.msg-content p:last-child { margin-bottom: 0; }
.msg-content ul, .msg-content ol { margin: 0.5em 0 0.8em 1.5em; }
.msg-content li { margin-bottom: 0.3em; }
.msg-content code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  background: var(--bg-elev-2);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--border);
}
.msg-content pre {
  background: var(--bg-elev-2) !important;
  padding: 14px 16px !important;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  overflow-x: auto;
  margin: 0.6em 0;
}
.msg-content pre code {
  background: none;
  border: none;
  padding: 0;
  font-size: 13px;
  line-height: 1.55;
}
/* Visual Learn - rendered Mermaid diagrams (see enhanceContent() in app.js).
   A bright "worksheet" card on the dark chat: highest readability for K–9 kids. */
.mermaid-diagram {
  margin: 0.9em 0;
  padding: 24px 20px;
  background: radial-gradient(130% 100% at 50% 0%, #0b0f18 0%, #06070b 72%);
  border: 1px solid rgb(94 169 255 / 0.16);
  border-radius: 16px;
  overflow-x: auto;
  text-align: center;
  box-shadow: inset 0 0 44px rgb(94 169 255 / 0.05);
}
.mermaid-diagram svg { max-width: 100%; height: auto; }
/* Bolder strokes so young kids can follow the lines and arrows clearly. */
.mermaid-diagram svg .edgePath path,
.mermaid-diagram svg .flowchart-link { stroke-width: 2px; }
.mermaid-diagram.mermaid-pending {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: #64748b;
  font-size: 13px;
}
.mmd-spin {
  width: 13px; height: 13px;
  border: 2px solid #cbd5e1;
  border-top-color: #3b82f6;
  border-radius: 50%;
  animation: mmd-spin 0.7s linear infinite;
}
@keyframes mmd-spin { to { transform: rotate(360deg); } }
.mermaid-diagram.mermaid-failed { color: #64748b; font-size: 13px; text-align: center; }
/* Shield diagram text from the app's global typography. Mermaid draws labels as
   HTML in <foreignObject>, which would otherwise inherit stray rules (e.g. an
   uppercasing or letter-spaced class) and render the kid-friendly sentence-case
   labels as cramped ALL-CAPS. Mermaid never wants these, so forcing them is safe. */
.mermaid-diagram svg * { text-transform: none !important; letter-spacing: normal !important; }
.msg-content strong { color: var(--text); font-weight: 650; }
.msg-content h1, .msg-content h2, .msg-content h3 {
  margin: 1em 0 0.4em;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.msg-content h1 { font-size: 1.4em; }
.msg-content h2 { font-size: 1.2em; }
.msg-content h3 { font-size: 1.05em; }
.msg-content blockquote {
  border-left: 3px solid var(--accent);
  padding-left: 14px;
  color: var(--text-muted);
  margin: 0.6em 0;
}
.msg-content a { color: var(--accent); text-decoration: none; border-bottom: 1px dashed currentColor; }

/* typing indicator */
.typing {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}
.typing span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: blink 1.4s ease-in-out infinite;
}
.typing span:nth-child(2) { animation-delay: 0.2s; }
.typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes blink {
  0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
  40% { opacity: 1; transform: scale(1); }
}

/* ============================================================
   COMPOSER
   ============================================================ */
.composer {
  padding: 14px 32px 18px;
  border-top: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(10,11,14,0) 0%, rgba(10,11,14,0.55) 36%);
  backdrop-filter: blur(10px);
}
.composer-inner {
  max-width: 784px;
  margin: 0 auto;
  background: var(--bg-elev-1);
  border: 1px solid var(--border-strong);
  border-radius: 26px;
  padding: 7px 8px 7px 22px;
  display: flex;
  gap: 10px;
  align-items: center;
  transition: border-color 0.22s var(--ease-out), box-shadow 0.28s var(--ease-out), background 0.2s;
  box-shadow: 0 6px 26px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.025);
}
.composer-inner:focus-within {
  border-color: rgb(var(--accent-rgb) / 0.5);
  box-shadow: 0 6px 26px rgba(0,0,0,0.5), 0 0 0 1px rgb(var(--accent-rgb) / 0.22), 0 0 34px rgb(var(--accent-rgb) / 0.13);
}
#input {
  flex: 1;
  resize: none;
  font-size: 15px;
  line-height: 1.55;
  padding: 8px 4px;
  max-height: 220px;
  overflow-y: auto;
}
#input::placeholder { color: var(--text-dim); letter-spacing: 0.005em; }

.composer-actions { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }

/* ── Composer attachments (paste / drop / pick images, screenshots, files) ── */
.composer-attachments { max-width: 784px; margin: 0 auto; display: none; flex-wrap: wrap; gap: 9px; padding: 2px 6px 11px; }
.composer-attachments.has-items { display: flex; }
.attach-chip { position: relative; display: inline-flex; align-items: center; gap: 7px;
  background: var(--bg-elev-2); border: 1px solid var(--border-strong); border-radius: 11px;
  padding: 7px 11px; font-size: 12.5px; color: var(--text-muted); max-width: 230px; }
.attach-chip.attach-image { padding: 0; overflow: hidden; width: 58px; height: 58px; }
.attach-chip.attach-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.attach-chip .attach-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.attach-chip .attach-ico { font-size: 15px; }
.attach-x { position: absolute; top: -7px; right: -7px; width: 19px; height: 19px; border-radius: 50%;
  background: var(--bg-elev-3); border: 1px solid var(--border-strong); color: var(--text-muted);
  font-size: 13px; line-height: 1; cursor: pointer; display: grid; place-items: center; padding: 0; }
.attach-x:hover { color: #fff; border-color: transparent; background: var(--danger); }
.composer.drag-over .composer-inner { border-color: rgb(var(--accent-rgb) / 0.6);
  box-shadow: 0 0 0 2px rgb(var(--accent-rgb) / 0.3), 0 0 34px rgb(var(--accent-rgb) / 0.18); }
/* Attachments shown inside a sent user bubble */
.msg-attachments { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 9px; }
.msg-attach-img { max-width: 230px; max-height: 210px; border-radius: 11px; border: 1px solid var(--border); display: block; }
.msg-attach-file { display: inline-flex; align-items: center; font-size: 12.5px; color: var(--text-muted);
  background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: 9px; padding: 6px 11px; }

.send-btn {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--accent-blue);
  color: #fff;
  display: grid; place-items: center;
  position: relative;
  box-shadow: 0 4px 14px rgb(var(--accent-rgb) / 0.45), 0 0 18px rgb(var(--accent-rgb) / 0.30);
  transition: background 0.15s var(--ease-out), transform 0.16s var(--ease-out), box-shadow 0.2s, opacity 0.15s;
}
.send-btn svg { width: 18px; height: 18px; margin-left: 1px; transition: transform 0.16s var(--ease-out); }
.send-btn:hover:not(:disabled) { background: rgb(var(--accent-rgb)); transform: scale(1.07); box-shadow: 0 4px 16px rgb(var(--accent-rgb) / 0.55), 0 0 26px rgb(var(--accent-rgb) / 0.55); }
.send-btn:active:not(:disabled) { transform: scale(0.93); }
.send-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; background: var(--accent-blue); box-shadow: none; }
.send-btn.sending svg { display: block !important; animation: plane-launch 0.5s var(--ease-out); }
.send-btn.sending::after {
  content: ""; position: absolute; inset: -1px; border-radius: 50%;
  border: 2px solid rgb(var(--accent-rgb) / 0.6); animation: send-ripple 0.55s var(--ease-out) forwards;
}
@keyframes plane-launch {
  0%   { transform: translate(0,0) scale(1); opacity: 1; }
  40%  { transform: translate(17px,-17px) scale(0.78); opacity: 0; }
  41%  { transform: translate(-13px,13px) scale(0.78); opacity: 0; }
  100% { transform: translate(0,0) scale(1); opacity: 1; }
}
@keyframes send-ripple {
  0%   { transform: scale(1); opacity: 0.7; }
  100% { transform: scale(2.2); opacity: 0; }
}

#voice-btn.active {
  background: rgba(223,107,115,0.15);
  color: var(--danger);
  animation: pulse 1.2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(223,107,115,0.4); }
  50% { box-shadow: 0 0 0 10px rgba(223,107,115,0); }
}

.composer-hint {
  max-width: 784px;
  margin: 9px auto 0;
  font-size: 11px;
  color: var(--text-dim);
  display: flex;
  justify-content: center;
  gap: 12px;
}

/* ============================================================
   MODAL
   ============================================================ */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(8px);
  display: grid; place-items: center;
  z-index: 100;
  animation: fadeIn 0.2s ease;
}
.modal-backdrop.hidden { display: none; }
.modal {
  background: var(--bg-elev-1);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-xl);
  padding: 24px;
  width: 90%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: var(--shadow-lg);
  animation: modalIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes modalIn { from { transform: translateY(20px) scale(0.96); opacity: 0; } to { transform: none; opacity: 1; } }
.modal-title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 4px;
}
.modal input, .modal textarea {
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  padding: 10px 14px;
  border-radius: var(--r-md);
  font-size: 14px;
  transition: border-color 0.15s;
}
.modal input:focus, .modal textarea:focus { border-color: var(--accent); }
.modal-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 8px;
}
.primary-btn {
  padding: 8px 16px;
  background: var(--grad);
  color: white;
  font-weight: 600;
  border-radius: var(--r-md);
  font-size: 13px;
  transition: transform 0.15s;
}
.primary-btn:hover { transform: translateY(-1px); }

/* ============================================================
   ANIMATIONS / UTIL
   ============================================================ */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.16); }

/* small screens */
@media (max-width: 760px) {
  .app { grid-template-columns: 1fr; }
  .suggestion-grid { grid-template-columns: 1fr; }
  /* sidebar becomes an off-canvas drawer - see MOBILE DRAWER block at end of file */
}

/* ============================================================
   VIEW SWITCHER (sidebar nav)
   ============================================================ */
.nav-section {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 0 2px;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 10px;
  border-radius: var(--r-md);
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 500;
  transition: all 0.12s;
  text-align: left;
}
.nav-item svg { flex-shrink: 0; opacity: 0.85; }
.nav-item:hover { background: var(--bg-elev-2); color: var(--text); }
.nav-item.active {
  color: var(--text);
}
.nav-item.active svg { opacity: 1; color: var(--accent); }
.nav-count {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 10px;
  background: var(--grad);
  color: white;
  display: none;
}
.nav-count.show { display: inline-block; }

/* ── Customize sidebar ─────────────────────────────────────────────── */
.sidebar-customize {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-top: 2px;
  padding: 6px 10px;
  border-radius: var(--r-md);
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  opacity: 0.7;
  transition: all 0.12s;
}
.sidebar-customize svg { flex-shrink: 0; opacity: 0.9; transition: transform 0.3s ease; }
.sidebar-customize:hover { background: var(--bg-elev-2); color: var(--text); opacity: 1; }
.sidebar-customize.active { color: var(--accent); opacity: 1; }
.sidebar-customize.active svg { transform: rotate(90deg); color: var(--accent); }

/* pin star - only shown while customizing */
.nav-pin {
  margin-left: auto;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 2px;
  border-radius: 6px;
  color: var(--text-muted);
  opacity: 0.45;
  cursor: pointer;
  transition: all 0.12s;
}
.nav-pin svg { fill: none; transition: fill 0.12s; }
.nav-pin:hover { opacity: 1; background: var(--bg-elev-2); color: var(--text); }
.nav-pin.on { opacity: 1; color: var(--accent); }
.nav-pin.on svg { fill: var(--accent); stroke: var(--accent); }

/* customizing: reveal everything + the stars, hide counts/kbd for clarity */
.nav-section.customizing .nav-pin { display: inline-flex; }
.nav-section.customizing .nav-count,
.nav-section.customizing .nav-kbd { display: none !important; }

/* collapsed (not customizing): hide unpinned items, but always keep the active one.
   Gated on .pins-ready (added by JS once pins are applied) so the sidebar shows
   everything if the script ever fails to run, instead of going empty. */
.nav-section.pins-ready:not(.customizing) .nav-item[data-nav-key]:not(.pinned):not(.active) {
  display: none !important;
}

/* compact nav rows - a little shorter to save vertical space
   (higher specificity beats the themed `.nav-item { ... !important }`) */
.nav-section .nav-item { padding-top: 6px !important; padding-bottom: 6px !important; }
.sidebar { gap: 18px; }

/* ── Rail mode: collapse the sidebar to an icon-only rail ───────────── */
.rail-toggle {
  margin-left: auto;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  color: var(--text-muted);
  opacity: 0.7;
  cursor: pointer;
  transition: all 0.12s;
}
.rail-toggle:hover { background: var(--bg-elev-2); color: var(--text); opacity: 1; }
.rail-toggle svg { width: 16px; height: 16px; }

body.rail { --sidebar-w: 68px; }
body.rail .app { grid-template-columns: 68px 1fr !important; }
body.rail .sidebar { padding-left: 8px !important; padding-right: 8px !important; gap: 14px; }

/* brand: stack logo over the toggle, drop the wordmark */
body.rail .brand { flex-direction: column; gap: 10px; }
body.rail .brand > div:not(.brand-logo) { display: none !important; }
body.rail .rail-toggle { margin-left: 0; }

/* nav: icons only, centered */
body.rail .nav-section .nav-item { justify-content: center; gap: 0; padding-left: 0 !important; padding-right: 0 !important; }
body.rail .nav-item > span { display: none !important; }
body.rail .sidebar-customize { display: none !important; }

/* hide the full-width chrome */
body.rail .trial-banner,
body.rail .sidebar-scroll { display: none !important; }

/* footer: keep only the account avatar as a settings button */
body.rail .sidebar-footer > * { display: none !important; }
body.rail .sidebar-footer > .account-card {
  display: flex !important;
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
}
body.rail .ac-info, body.rail .ac-chev { display: none !important; }

/* ── Guided walkthrough (spotlight tour) ───────────────────────────── */
.tour-overlay { position: fixed; inset: 0; z-index: 9000; pointer-events: auto; }
.tour-overlay.hidden { display: none; }
.tour-spot {
  position: fixed;
  border-radius: 10px;
  box-shadow: 0 0 0 9999px rgba(8, 8, 12, 0.70), 0 0 0 1px rgb(var(--accent-rgb) / 0.55);
  pointer-events: none;
  transition: top 0.28s cubic-bezier(.4,0,.2,1), left 0.28s cubic-bezier(.4,0,.2,1),
              width 0.28s cubic-bezier(.4,0,.2,1), height 0.28s cubic-bezier(.4,0,.2,1);
}
.tour-pop {
  position: fixed;
  z-index: 9001;
  width: 300px;
  max-width: 82vw;
  background: var(--bg-elev-1);
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  padding: 16px 16px 13px;
  box-shadow: 0 20px 55px rgba(0,0,0,0.5);
  pointer-events: auto;
  transition: top 0.2s ease, left 0.2s ease;
}
.tour-step { font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); font-weight: 700; }
.tour-title { font-size: 16px; font-weight: 700; margin-top: 5px; color: var(--text); }
.tour-title .grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tour-text { font-size: 13px; line-height: 1.5; color: var(--text-muted); margin-top: 7px; }
.tour-nav { display: flex; align-items: center; gap: 8px; margin-top: 15px; }
.tour-dots { display: flex; gap: 5px; margin: 0 auto; }
.tour-dots .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--border-strong); transition: background 0.15s; }
.tour-dots .dot.on { background: var(--accent); }
.tour-skip { background: none; border: 0; color: var(--text-dim); font-size: 12px; font-weight: 600; cursor: pointer; padding: 4px; }
.tour-skip:hover { color: var(--text); }
.tour-prev, .tour-next { padding: 6px 15px; font-size: 13px; }

/* ── Slash-command menu (/autopilot …) ─────────────────────────────── */
.slash-menu {
  position: fixed; z-index: 8000;
  background: var(--bg-elev-1);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  padding: 6px;
  box-shadow: 0 14px 44px rgba(0,0,0,0.5);
  max-height: 280px; overflow-y: auto;
}
.slash-menu.hidden { display: none; }
.slash-item { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 9px; cursor: pointer; }
.slash-item.active { background: var(--bg-elev-3); }
.slash-ico { font-size: 17px; width: 24px; text-align: center; flex-shrink: 0; }
.slash-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.slash-name { font-weight: 700; font-size: 13.5px; color: var(--text); }
.slash-desc { font-size: 11.5px; color: var(--text-muted); }

/* ── Autopilot task picker ─────────────────────────────────────────── */
.ap-backdrop {
  position: fixed; inset: 0; z-index: 8100;
  background: rgba(6,7,14,0.6); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.ap-backdrop.hidden { display: none; }
.ap-modal {
  width: 560px; max-width: 94vw; max-height: 86vh;
  display: flex; flex-direction: column;
  background: var(--bg-elev-1); border: 1px solid var(--border-strong);
  border-radius: 18px; padding: 20px; box-shadow: 0 28px 70px rgba(0,0,0,0.55);
}
.ap-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.ap-title { font-size: 18px; font-weight: 800; }
.ap-sub { font-size: 12.5px; color: var(--text-muted); margin-top: 3px; }
.ap-x { background: none; border: 0; color: var(--text-dim); font-size: 16px; cursor: pointer; padding: 4px 8px; border-radius: 8px; }
.ap-x:hover { background: var(--bg-elev-2); color: var(--text); }
.ap-tools { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.ap-selall { padding: 5px 12px; font-size: 12px; }
.ap-count { font-size: 12px; color: var(--text-muted); margin-left: auto; }
.ap-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 5px; min-height: 90px; margin: 0 -4px; padding: 2px 4px; }
.ap-row {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px; border-radius: 10px; cursor: pointer;
  border: 1px solid transparent; background: var(--bg-elev-2);
}
.ap-row:hover { border-color: var(--border-strong); }
.ap-row.on { border-color: rgb(var(--accent-rgb) / 0.6); background: rgb(var(--accent-rgb) / 0.08); }
.ap-cb { width: 16px; height: 16px; accent-color: var(--accent); flex-shrink: 0; }
.ap-row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ap-row-title { font-size: 13.5px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-row-meta { font-size: 11.5px; color: var(--text-muted); }
.ap-instr {
  margin-top: 12px; width: 100%; resize: none;
  background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: 10px;
  padding: 9px 11px; color: var(--text); font: inherit; font-size: 13px;
}
.ap-actions { display: flex; gap: 10px; margin-top: 14px; }
.ap-actions .ap-run { flex: 1; }
.ap-empty { text-align: center; padding: 30px 10px; color: var(--text-muted); }
.ap-empty-ico { font-size: 34px; margin-bottom: 8px; }
.ap-empty p { font-size: 13px; margin-bottom: 14px; }

/* mode toggle (just write vs write & turn in) + deliberate run button */
.ap-mode { display: flex; gap: 8px; margin-top: 12px; }
.ap-mode-btn {
  flex: 1; padding: 9px 10px; border-radius: 10px;
  background: var(--bg-elev-2); border: 1px solid var(--border);
  color: var(--text-muted); font: inherit; font-size: 12.5px; font-weight: 600;
  cursor: pointer; transition: all 0.12s;
}
.ap-mode-btn:hover { color: var(--text); border-color: var(--border-strong); }
.ap-mode-btn.active { color: var(--text); border-color: rgb(var(--accent-rgb) / 0.6); background: rgb(var(--accent-rgb) / 0.10); }
.ap-actions .ap-submit { width: 100%; }
.ap-submit.warn { background: linear-gradient(135deg, #fbbf24, #f59e0b) !important; color: #1a1206 !important; }

/* emergency stop bar (only while Autopilot is running) */
.ap-stopbar {
  position: fixed; right: 22px; bottom: 22px; z-index: 9500;
  display: none; align-items: center; gap: 11px;
  background: var(--bg-elev-1); border: 1px solid rgba(223,107,115,0.5);
  border-radius: 14px; padding: 10px 12px 10px 14px;
  box-shadow: 0 14px 44px rgba(0,0,0,0.5);
}
.ap-stopbar.show { display: flex; }
.ap-stop-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--danger); box-shadow: none; animation: hudPulse 1.1s ease-in-out infinite; }
.ap-stop-label { font-size: 12.5px; color: var(--text-muted); font-weight: 600; }
/* Perceived-progress bar under the AI Tutor live status (large tasks/batches) */
.ap-progress { margin-top: 12px; }
.ap-progress-row { display: flex; align-items: center; gap: 10px; }
.ap-progress-row + .ap-progress-row { margin-top: 7px; }
.ap-progress-track {
  flex: 1; height: 6px; border-radius: 999px;
  background: var(--bg-elev-3); border: 1px solid var(--border);
  overflow: hidden;
}
.ap-progress-fill {
  height: 100%; width: 0%; border-radius: 999px;
  background: linear-gradient(90deg, rgb(var(--accent-rgb) / 0.65), rgb(var(--accent-rgb)));
  transition: width 0.45s ease;
}
.ap-progress-fill-all { opacity: 0.75; }
.ap-progress-pct {
  font-size: 11.5px; font-weight: 700; color: var(--text-muted);
  font-variant-numeric: tabular-nums; min-width: 44px; text-align: right;
}
.ap-progress-cap { margin-top: 4px; font-size: 10.5px; color: var(--text-dim); letter-spacing: 0.03em; }
@media (prefers-reduced-motion: reduce) { .ap-progress-fill { transition: none; } }
.ap-stop-btn {
  padding: 7px 14px; border-radius: 9px; border: 0; cursor: pointer;
  background: #ff4d4d; color: #fff; font: inherit; font-size: 13px; font-weight: 700;
  transition: filter 0.12s;
}
.ap-stop-btn:hover { filter: brightness(1.1); }
.ap-stop-btn:disabled { opacity: 0.7; cursor: default; }

/* beta / danger warning banner in the picker */
.ap-warn {
  display: flex; align-items: flex-start; gap: 9px;
  margin-top: 12px; padding: 10px 12px;
  background: rgba(245, 158, 11, 0.10);
  border: 1px solid rgba(245, 158, 11, 0.38);
  border-radius: 10px;
  font-size: 12px; line-height: 1.5; color: #f3c77a;
}
.ap-warn strong { color: #ffd98a; }
.ap-warn-ico { flex-shrink: 0; font-size: 14px; line-height: 1.45; }

/* ── Autopilot Dashboard ──────────────────────────────────────────── */
body[data-view="autopilot"] .view-autopilot { display: flex; }
.ap-dash-scroll { flex: 1; overflow-y: auto; padding: 24px 36px 40px; }
.ap-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.ap-card {
  display: flex; flex-direction: column; gap: 8px; text-align: left; padding: 16px;
  background: var(--bg-elev-1); border: 1px solid var(--border);
  border-radius: 14px; cursor: pointer; transition: all 0.15s var(--ease-out);
}
.ap-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0,0,0,0.3); }
.ap-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ap-card-title { font-size: 14.5px; font-weight: 700; color: var(--text); line-height: 1.3; }
.ap-card-meta { font-size: 11.5px; color: var(--text-dim); }
.ap-badge {
  font-size: 10px; font-weight: 700; letter-spacing: 0.03em;
  padding: 3px 8px; border-radius: 999px; white-space: nowrap;
  background: var(--bg-elev-3); color: var(--text-muted); flex-shrink: 0;
}
.ap-badge.turnedin { background: rgba(116,198,154,0.15); color: var(--success); }
.ap-badge.wrote { background: rgb(var(--accent-rgb) / 0.13); color: var(--accent); }
.ap-badge.stopped { background: rgba(223,107,115,0.14); color: #ff8a8a; }
.ap-badge.failed { background: rgba(245,158,11,0.15); color: #fbbf24; }
.ap-dash-empty { text-align: center; color: var(--text-muted); padding: 60px 20px; }
.ap-dash-empty .ap-empty-ico { font-size: 38px; }
.ap-dash-empty h3 { color: var(--text); font-size: 18px; margin: 10px 0 6px; }
.ap-dash-empty p { font-size: 13.5px; max-width: 440px; margin: 0 auto; line-height: 1.5; }
.ap-back { background: none; border: 0; color: var(--text-muted); cursor: pointer; font-size: 13px; font-weight: 600; padding: 4px 0; margin-bottom: 14px; }
.ap-back:hover { color: var(--text); }
.ap-report { max-width: 760px; }
.ap-report-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.ap-report-title { font-size: 22px; font-weight: 800; line-height: 1.25; }
.ap-report-meta { font-size: 12.5px; color: var(--text-dim); margin-top: 6px; }
.ap-report-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0; }
.ap-report-err { background: rgba(245,158,11,0.10); border: 1px solid rgba(245,158,11,0.3); border-radius: 10px; padding: 10px 12px; font-size: 12.5px; color: #f3c77a; margin-bottom: 14px; }
.ap-report-label { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); margin: 18px 0 8px; }
.ap-report-answer { background: var(--bg-elev-1); border: 1px solid var(--border); border-radius: 14px; padding: 18px 20px; font-size: 14px; line-height: 1.65; }
.ap-report-answer p { margin: 0 0 12px; }
.ap-noans { color: var(--text-dim); }

/* scrollable middle area (pinned + upcoming) */
.sidebar-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding-top: 4px;
}

/* hide views based on body[data-view] */
.view { display: none; flex-direction: column; height: 100vh; min-height: 0; }
body[data-view="chat"] .view-chat { display: grid; grid-template-rows: auto 1fr auto; }
body[data-view="skills"] .view-skills { display: grid; grid-template-rows: auto 1fr; }

/* ============================================================
   TOGGLE BUTTONS (sidebar footer)
   ============================================================ */
.toggle-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 12px;
  border-radius: var(--r-md);
  font-size: 12px;
  color: var(--text-muted);
  border: 1px solid var(--border);
  transition: all 0.15s;
  background: rgba(255,255,255,0.015);
}
.toggle-btn:hover { background: var(--bg-elev-2); color: var(--text); }
.toggle-left { display: flex; align-items: center; gap: 8px; }
.toggle-switch {
  width: 28px;
  height: 16px;
  background: var(--bg-elev-3);
  border-radius: 999px;
  position: relative;
  transition: all 0.2s;
  flex-shrink: 0;
}
.toggle-knob {
  position: absolute;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--text-muted);
  top: 2px; left: 2px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.toggle-btn.on { color: var(--text); border-color: rgb(var(--accent-rgb) / 0.3); }
.toggle-btn.on .toggle-switch { background: var(--grad); }
.toggle-btn.on .toggle-knob { background: white; transform: translateX(12px); }
.toggle-btn.loading .toggle-switch::after {
  content: ""; position: absolute; inset: 0;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  animation: pulse2 1s ease-in-out infinite;
}
@keyframes pulse2 { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.6; } }

/* ============================================================
   SKILLS PAGE
   ============================================================ */
.page-title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.muted-text { color: var(--text-dim); font-size: 12px; margin-right: 12px; }

.skills-page {
  overflow-y: auto;
  padding: 40px 24px 80px;
}
.skills-content {
  max-width: 880px;
  margin: 0 auto;
}
.skills-hero {
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.025em;
  text-align: center;
  margin-bottom: 8px;
}
.skills-hero .grad {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.skills-sub {
  text-align: center;
  color: var(--text-muted);
  margin-bottom: 36px;
}

.skills-controls {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 32px;
  flex-wrap: wrap;
}
.search-wrap {
  flex: 1;
  min-width: 240px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--bg-elev-1);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  transition: border-color 0.15s;
}
.search-wrap:focus-within { border-color: rgb(var(--accent-rgb) / 0.4); }
.search-wrap svg { color: var(--text-dim); }
.search-wrap input { flex: 1; font-size: 13.5px; }
.filter-pills { display: flex; gap: 4px; }
.pill {
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  border: 1px solid var(--border);
  transition: all 0.15s;
}
.pill:hover { background: var(--bg-elev-2); color: var(--text); }
.pill.active {
  background: var(--bg-elev-3);
  color: var(--text);
  border-color: var(--border-strong);
}

.skills-section { margin-bottom: 32px; }
.skills-section h2 {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.skills-section.hidden { display: none; }
.skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 10px;
}
.skills-grid:empty::before {
  content: "Nothing here yet.";
  color: var(--text-dim);
  font-size: 13px;
  padding: 16px;
}

.skill-card {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  border-radius: var(--r-lg);
  background: var(--bg-elev-1);
  border: 1px solid var(--border);
  transition: all 0.15s;
  cursor: pointer;
  position: relative;
}
.skill-card:hover {
  background: var(--bg-elev-2);
  border-color: var(--border-strong);
  transform: translateY(-1px);
}
.skill-card.enabled {
  border-color: rgb(var(--accent-rgb) / 0.35);
  box-shadow: none;
}
.skill-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 22px;
  flex-shrink: 0;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
.skill-info { flex: 1; min-width: 0; }
.skill-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
  margin-bottom: 2px;
}
.skill-desc {
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.skill-check {
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 1.5px solid var(--border-strong);
  display: grid;
  place-items: center;
  color: transparent;
  transition: all 0.15s;
  flex-shrink: 0;
}
.skill-card.enabled .skill-check {
  background: var(--grad);
  border-color: transparent;
  color: white;
}
.skill-delete {
  position: absolute;
  top: 8px; right: 38px;
  width: 22px; height: 22px;
  border-radius: 50%;
  display: none;
  place-items: center;
  color: var(--text-dim);
  font-size: 13px;
}
.skill-card.custom:hover .skill-delete { display: grid; }
.skill-delete:hover { background: rgba(223,107,115,0.15); color: var(--danger); }

/* ============================================================
   NEW: page title style for non-chat views
   ============================================================ */
.view-skills .topbar { padding-left: 28px; padding-right: 28px; }

/* ============================================================
   PROJECT VIEW
   ============================================================ */
body[data-view="project"] .view-project { display: grid; grid-template-rows: auto 1fr; }
body[data-view="projects"] .view-projects { display: grid; grid-template-rows: auto 1fr; }

/* ===== All projects grid ===== */
.projects-page {
  overflow-y: auto;
  padding: 28px 32px 60px;
}
.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 12px;
  max-width: 1100px;
  margin: 0 auto;
}
.project-card {
  position: relative;
  padding: 18px 18px 16px;
  background: var(--bg-elev-1);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  transition: all 0.15s;
  cursor: pointer;
}
.project-card:hover {
  background: var(--bg-elev-2);
  border-color: var(--border-strong);
  transform: translateY(-1px);
}
.project-card .pc-name {
  font-family: 'Fraunces', serif;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
  color: var(--text);
}
.project-card .pc-desc {
  font-size: 12.5px;
  color: var(--text-muted);
  margin-bottom: 14px;
  min-height: 16px;
}
.project-card .pc-stats {
  display: flex;
  gap: 14px;
  font-size: 11.5px;
  color: var(--text-dim);
}
.project-card .pc-stats strong { color: var(--text); font-weight: 600; }
.project-card .pc-actions {
  position: absolute;
  top: 12px; right: 12px;
  display: flex;
  gap: 4px;
}
.project-card .pc-action {
  width: 26px; height: 26px;
  border-radius: 6px;
  display: grid; place-items: center;
  color: var(--text-dim);
  transition: all 0.15s;
  font-size: 13px;
}
.project-card .pc-action:hover {
  background: var(--bg-elev-3);
  color: var(--text);
}
.project-card .pc-action.pin.pinned {
  color: var(--accent);
}
.project-card .pc-action.delete:hover {
  background: rgba(223,107,115,0.18);
  color: var(--danger);
}

/* ── Classes: multi-select + bulk delete ─────────────────────────────── */
.projects-selectbar {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 1100px;
  margin: 0 auto 14px;
  padding: 10px 14px;
  background: var(--bg-elev-1);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  animation: psbIn 0.22s var(--ease-spring, ease-out) both;
}
.projects-selectbar[hidden] { display: none; }
@keyframes psbIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.projects-selectbar .psb-all {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--text); cursor: pointer; user-select: none;
}
.projects-selectbar .psb-all input { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; }
.projects-selectbar .psb-count { font-size: 12.5px; color: var(--text-dim); }
.projects-selectbar .psb-spacer { flex: 1; }
.psb-delete {
  padding: 7px 16px; border-radius: 8px; font-size: 13px; font-weight: 600;
  color: var(--danger); border: 1px solid rgba(223,107,115,0.4); background: rgba(223,107,115,0.06);
  cursor: pointer; transition: all 0.15s;
}
.psb-delete:hover:not(:disabled) { background: rgba(223,107,115,0.16); }
.psb-delete:disabled { opacity: 0.4; cursor: not-allowed; }
#projects-select-btn.active { color: var(--accent); border-color: rgb(var(--accent-rgb) / 0.5); }

/* The check badge occupies the same corner the pin/delete actions use. */
.project-card .pc-check {
  position: absolute;
  top: 12px; right: 12px;
  width: 22px; height: 22px;
  border-radius: 6px;
  border: 1.5px solid var(--border-strong);
  background: var(--bg-elev-1);
  display: none;
  place-items: center;
  color: transparent;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.18s var(--ease-spring, ease-out);
}
.project-card .pc-check svg { width: 14px; height: 14px; }
.view-projects.select-mode .project-card .pc-check { display: grid; }
.view-projects.select-mode .project-card .pc-actions { display: none; }
.view-projects.select-mode .project-card:hover { transform: none; }
.project-card.selected {
  border-color: var(--accent);
  background: rgb(var(--accent-rgb) / 0.06);
}
.project-card.selected .pc-check {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  transform: scale(1.06);
}

.back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--r-md);
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
  transition: all 0.15s;
}
.back-btn:hover { background: var(--bg-elev-2); color: var(--text); }
.back-btn.hidden { display: none; }
.badge.ghost { background: transparent; }

.project-page {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 28px;
  padding: 28px 32px 56px;
  overflow-y: auto;
  min-height: 0;
}

.project-main { min-width: 0; }

.project-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
}
.project-title {
  font-family: 'Fraunces', 'Inter', serif;
  font-size: 42px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--text);
}

.project-composer {
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-xl);
  padding: 18px 18px 12px;
  transition: border-color 0.15s;
}
.project-composer:focus-within { border-color: rgb(var(--accent-rgb) / 0.35); }
.project-composer textarea {
  width: 100%;
  resize: none;
  font-size: 16px;
  line-height: 1.5;
  background: transparent;
  color: var(--text);
}
.project-composer textarea::placeholder { color: var(--text-muted); }
.project-composer-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
}

.project-suggestions {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
  margin: 18px 0 18px;
}
.suggestion-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--r-lg);
  background: var(--bg-elev-1);
  border: 1px solid var(--border);
  font-size: 13px;
  color: var(--text);
  text-align: left;
  transition: all 0.15s;
}
.suggestion-chip:hover {
  background: var(--bg-elev-2);
  border-color: var(--border-strong);
  transform: translateY(-1px);
}
.suggestion-chip .chip-icon { font-size: 16px; }

.new-conv-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 11px 14px;
  border-radius: var(--r-lg);
  background: var(--bg-elev-1);
  border: 1px dashed var(--border-strong);
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
  transition: all 0.15s;
  margin-bottom: 26px;
}
.new-conv-row:hover {
  background: var(--bg-elev-2);
  color: var(--text);
  border-color: var(--accent);
  border-style: solid;
}

.recents-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim);
  letter-spacing: 0.04em;
  margin-bottom: 10px;
}
.recents-list { display: flex; flex-direction: column; gap: 6px; }
.recent-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bg-elev-1);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  cursor: pointer;
  transition: all 0.15s;
}
.recent-card:hover {
  background: var(--bg-elev-2);
  border-color: var(--border-strong);
}
.recent-icon {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--bg-elev-3);
  display: grid; place-items: center;
  color: var(--text-muted);
  flex-shrink: 0;
}
.recent-info { flex: 1; min-width: 0; }
.recent-title {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.recent-preview {
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.recent-time {
  font-size: 11.5px;
  color: var(--text-dim);
  flex-shrink: 0;
}
.recents-empty {
  padding: 16px;
  text-align: center;
  color: var(--text-dim);
  font-size: 13px;
  background: var(--bg-elev-1);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}

/* Right rail cards */
.project-aside {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.aside-card {
  background: var(--bg-elev-1);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.aside-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.aside-card-header .icon-btn {
  width: 22px; height: 22px; font-size: 13px;
  color: var(--text-dim);
}
.aside-card-body {
  padding: 14px 16px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text);
  white-space: pre-wrap;
  max-height: 220px;
  overflow-y: auto;
}
.aside-card-body.muted-body { color: var(--text-dim); font-style: italic; }

.context-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: var(--r-md);
  background: var(--bg-elev-2);
  font-size: 12px;
  color: var(--text);
  margin-bottom: 4px;
}
.context-item .label { color: var(--text-dim); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; padding-left: 2px; }

/* responsive: collapse rail */
@media (max-width: 1080px) {
  .project-page { grid-template-columns: 1fr; }
}

/* ============================================================
   MODEL PICKER
   ============================================================ */
.model-picker { position: relative; }
.model-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  transition: all 0.15s;
  font-family: 'JetBrains Mono', monospace;
}
.model-badge:hover {
  border-color: rgb(var(--accent-rgb) / 0.35);
  color: var(--text);
}
.model-badge svg { opacity: 0.6; }

.model-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--bg-elev-1);     /* fully opaque so nothing shows through */
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  padding: 6px;
  min-width: 280px;
  box-shadow: var(--shadow-lg);
  z-index: 200;
  animation: modalIn 0.15s ease;
}
.model-dropdown.hidden { display: none; }
.model-option {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background 0.15s;
}
.model-option:hover { background: var(--bg-elev-2); }
.model-option .top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.model-option .name {
  font-weight: 600;
  font-size: 13px;
  color: var(--text);
}
.model-option .desc {
  font-size: 11.5px;
  color: var(--text-dim);
}
.model-option.active .name { font-weight: 700; }
.model-option .check { color: var(--accent); opacity: 0; }
.model-option.active .check { opacity: 1; }
/* Plan-locked models: visible (so the upsell exists) but clearly gated. */
.model-option.locked, .composer-model-option.locked { opacity: 0.55; cursor: default; }
.model-option.locked:hover, .composer-model-option.locked:hover { background: transparent; }
.model-option .model-lock, .composer-model-option .model-lock {
  margin-left: auto; font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em;
  color: var(--text-muted); background: var(--bg-elev-3);
  border: 1px solid var(--border); border-radius: 999px;
  padding: 2px 8px; white-space: nowrap; flex-shrink: 0;
}

/* Composer model selector chip */
.composer-model-picker { position: relative; }
.composer-model {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 8px;
  height: 24px;
  background: var(--bg-elev-2);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  color: var(--text-muted);
  font-size: 12px;
  font-family: 'JetBrains Mono', monospace;
  cursor: pointer;
  transition: all 0.15s;
}
.composer-model:hover {
  border-color: rgb(var(--accent-rgb) / 0.35);
  color: var(--text);
  background: var(--bg-elev-3);
}
.composer-model .model-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}
.composer-model.m-haiku .model-dot { background: #6366f1; }
.composer-model.m-sonnet .model-dot { background: #ec4899; }
.composer-model .model-short {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.composer-model svg {
  opacity: 0.6;
  flex-shrink: 0;
}

.composer-model-menu {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  background: var(--bg-elev-1);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  padding: 6px;
  min-width: 240px;
  box-shadow: var(--shadow-lg);
  z-index: 200;
  animation: modalIn 0.15s ease;
}
.composer-model-menu.hidden { display: none; }
.composer-model-option {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background 0.15s;
}
.composer-model-option:hover { background: var(--bg-elev-2); }
.composer-model-option .opt-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.composer-model-option .opt-name {
  font-weight: 600;
  font-size: 13px;
  color: var(--text);
}
.composer-model-option .opt-desc {
  font-size: 11.5px;
  color: var(--text-dim);
}
.composer-model-option.active .opt-name { font-weight: 700; }
.composer-model-option .check { color: var(--accent); opacity: 0; }
.composer-model-option.active .check { opacity: 1; }

/* ════════════════════════════════════════════════════════════
   MOTION & POLISH LAYER  ·  GTM
   ════════════════════════════════════════════════════════════ */

/* ---- App entrance ---- */
.app { position: relative; isolation: isolate; animation: appIn 0.6s ease both; }
@keyframes appIn { from { opacity: 0; } to { opacity: 1; } }

/* ---- Static ambient background - single faint iris wash, no motion ---- */
.app::before {
  content: "";
  position: fixed;
  inset: -25%;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(900px 640px at 82% -6%, rgb(var(--accent-rgb) / 0.05), transparent 64%);
  filter: blur(24px);
}
.app::after { content: none; }

/* ---- View transitions ---- */
body[data-view="chat"] .view-chat,
body[data-view="skills"] .view-skills,
body[data-view="projects"] .view-projects,
body[data-view="project"] .view-project {
  animation: viewIn 0.42s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes viewIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* ---- Logo glow ---- */
.brand-logo {
  background: none !important;
  box-shadow: none !important;
  overflow: visible;
}
.brand-logo img {
  border-radius: 10px;
  /* harmonize the logo's cyan glow toward the iris accent + calm it */
  filter: hue-rotate(48deg) saturate(0.78);
}
@keyframes logoPulse {
  0%, 100% { filter: none; }
  50%      { filter: none; }
}
.brand-name {
  background: none;
  -webkit-text-fill-color: var(--text);
  color: var(--text);
  animation: none;
}

/* ---- Nav active: sliding accent bar ---- */
.nav-item { position: relative; }
.nav-item::before {
  content: "";
  position: absolute;
  left: -2px; top: 50%;
  width: 3px; height: 0;
  border-radius: 2px;
  background: var(--grad);
  transform: translateY(-50%);
  transition: height 0.22s cubic-bezier(0.16,1,0.3,1);
}
.nav-item.active::before { height: 60%; }

/* ---- Streaming caret ---- */
.msg-content.streaming::after {
  content: "▋";
  display: inline;
  color: var(--accent);
  margin-left: 2px;
  animation: caret 1s steps(2, start) infinite;
}
@keyframes caret { 50% { opacity: 0; } }

/* ---- Button press / feedback states ---- */
.send-btn:active,
.primary-btn:active,
.suggestion:active,
.suggestion-chip:active,
.skill-card:active,
.project-card:active,
.recent-card:active,
.nav-item:active,
.pill:active { transform: scale(0.97); }

.icon-btn:active { transform: scale(0.9); }

/* ---- Send button loading spinner ---- */
.send-btn.loading svg { display: none; }
.send-btn.loading::after {
  content: "";
  width: 15px; height: 15px;
  border: 2px solid rgba(255,255,255,0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- Suggestion stagger entrance ---- */
.suggestion, .suggestion-chip {
  animation: fadeUp 0.5s cubic-bezier(0.16,1,0.3,1) both;
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* ---- Recents / project cards stagger ---- */
.recent-card, .project-card {
  animation: fadeUp 0.45s cubic-bezier(0.16,1,0.3,1) both;
}

/* ---- Refined card hover glow ---- */
.skill-card, .project-card, .suggestion, .recent-card, .suggestion-chip {
  transition: transform 0.18s cubic-bezier(0.16,1,0.3,1),
              box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.skill-card:hover, .project-card:hover {
  box-shadow: 0 12px 32px rgba(0,0,0,0.35);
}

/* ---- Skeleton loaders ---- */
.skeleton {
  background: linear-gradient(90deg,
    var(--bg-elev-1) 25%, var(--bg-elev-2) 50%, var(--bg-elev-1) 75%);
  background-size: 200% 100%;
  animation: shimmerSkel 1.3s ease-in-out infinite;
  border-radius: var(--r-md);
}
@keyframes shimmerSkel { to { background-position: -200% 0; } }
.skel-line { height: 14px; margin-bottom: 10px; }
.skel-card { height: 64px; margin-bottom: 8px; border-radius: var(--r-lg); }
/* Connectors view: ghost cards while /api/connectors is in flight */
.conn-card.conn-skel { min-height: 92px; padding: 18px; pointer-events: none; }

/* ---- Project title entrance ---- */
.project-title { animation: titleIn 0.5s cubic-bezier(0.16,1,0.3,1) both; }
@keyframes titleIn {
  from { opacity: 0; transform: translateY(-6px); letter-spacing: 0.04em; }
  to   { opacity: 1; transform: none; letter-spacing: -0.02em; }
}

/* ---- Avatar pulse on assistant turns ---- */
.msg.assistant .msg-avatar {
  box-shadow: none;
  animation: avatarPop 0.5s ease both;
}
@keyframes avatarPop {
  0% { transform: scale(0.7); opacity: 0; }
  60% { transform: scale(1.08); }
  100% { transform: scale(1); opacity: 1; }
}

/* ---- Toggle spring ---- */
.toggle-knob { transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.2s; }

/* ---- Composer focus lift ---- */
.composer-inner { transition: border-color 0.2s, box-shadow 0.25s, transform 0.2s; }
.composer-inner:focus-within { transform: translateY(-1px); }

/* ---- Send arrow nudge on hover ---- */
.send-btn svg { transition: transform 0.15s; }
.send-btn:hover svg { transform: translateX(1px); }

/* ---- Smooth scrolling ---- */
.chat, .skills-page, .projects-page, .project-page, .sidebar-scroll { scroll-behavior: smooth; }

/* ---- Status dot pulse ---- */
.dot.ok { animation: dotPulse 2.4s ease-in-out infinite; }
@keyframes dotPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(116,198,154,0.5); }
  50%     { box-shadow: 0 0 0 5px rgba(116,198,154,0); }
}

/* ---- Reduce motion for accessibility ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ════════════════════════════════════════════════════════════
   OVER-THE-TOP TECH FX  ·  HUD / arc-reactor / grid / scanlines
   ════════════════════════════════════════════════════════════ */

/* ---- Cyber grid - removed (was the loud animated HUD overlay) ---- */
.fx-grid { display: none; }
@keyframes gridFloat { to { background-position: 46px 46px, 46px 46px; } }

/* ---- Scanlines + moving sweep - removed ---- */
.fx-scan { display: none; }
.fx-scan::after { content: none; }
@keyframes scanSweep {
  0%   { transform: translateY(-200px); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(100vh); opacity: 0; }
}

/* ---- Vignette - kept but very soft for a calm frame ---- */
.fx-vignette {
  position: fixed; inset: 0; z-index: 9996; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 64%, rgba(0,0,0,0.22) 100%);
}

/* ════════════════════════════════════════════════════════════
   WELCOME - arc reactor HUD
   ════════════════════════════════════════════════════════════ */
.welcome { position: relative; }

/* HUD corner brackets */
.hud {
  position: absolute;
  width: 26px; height: 26px;
  border: 2px solid rgb(var(--accent-rgb) / 0.4);
  opacity: 0;
  z-index: 0;
  animation: hudIn 0.6s ease forwards;
}
.hud.tl { top: 8px; left: 8px; border-right: none; border-bottom: none; }
.hud.tr { top: 8px; right: 8px; border-left: none; border-bottom: none; animation-delay: 0.08s; }
.hud.bl { bottom: 8px; left: 8px; border-right: none; border-top: none; animation-delay: 0.16s; }
.hud.br { bottom: 8px; right: 8px; border-left: none; border-top: none; animation-delay: 0.24s; }
@keyframes hudIn { from { opacity: 0; transform: scale(1.4); } to { opacity: 1; transform: scale(1); } }

/* Arc reactor */
.reactor {
  position: relative;
  width: 140px; height: 140px;
  margin: 0 auto 28px;
  display: grid;
  place-items: center;
  animation: reactorIn 0.9s cubic-bezier(0.16,1,0.3,1) both;
}
@keyframes reactorIn {
  from { opacity: 0; transform: scale(0.6) rotate(-40deg); }
  to   { opacity: 1; transform: none; }
}
.reactor > * { position: absolute; border-radius: 50%; }
.reactor-glow {
  width: 90px; height: 90px;
  background: radial-gradient(circle, rgb(var(--accent-rgb) / 0.55), transparent 70%);
  filter: blur(14px);
  animation: reactorPulse 2.6s ease-in-out infinite;
}
@keyframes reactorPulse {
  0%,100% { opacity: 0.5; transform: scale(0.9); }
  50%     { opacity: 1;   transform: scale(1.12); }
}
.reactor-ring {
  border-style: solid;
  border-color: transparent;
}
.ring-1 {
  width: 140px; height: 140px;
  border-width: 2px;
  border-top-color: rgb(var(--accent-rgb)); border-right-color: rgb(var(--accent-rgb) / 0.3);
  box-shadow: none;
  animation: spin 7s linear infinite;
}
.ring-2 {
  width: 108px; height: 108px;
  border-width: 1.5px;
  border-bottom-color: rgb(var(--accent-rgb)); border-left-color: rgb(var(--accent-rgb) / 0.35);
  animation: spin 5s linear infinite reverse;
}
.ring-3 {
  width: 78px; height: 78px;
  border-width: 1px;
  border-top-color: rgba(255,255,255,0.5); border-bottom-color: rgba(255,255,255,0.2);
  animation: spin 3.4s linear infinite;
}
/* radial tick marks */
.reactor-ticks {
  width: 124px; height: 124px;
  background: repeating-conic-gradient(from 0deg,
    rgb(var(--accent-rgb) / 0.6) 0deg 0.6deg, transparent 0.6deg 12deg);
  -webkit-mask: radial-gradient(circle, transparent 56%, #000 57%, #000 62%, transparent 63%);
  mask: radial-gradient(circle, transparent 56%, #000 57%, #000 62%, transparent 63%);
  animation: spin 22s linear infinite;
  opacity: 0.7;
}
.reactor-core {
  width: 38px; height: 38px;
  background: radial-gradient(circle at 40% 35%, #ffffff, #7fd4ff 45%, #00a6d6 80%);
  box-shadow: inset 0 0 10px rgba(255,255,255,0.8);
  animation: corePulse 2.6s ease-in-out infinite;
}
@keyframes corePulse {
  0%,100% { transform: scale(1);    box-shadow: inset 0 0 10px rgba(255,255,255,0.8); }
  50%     { transform: scale(1.08); box-shadow: inset 0 0 14px rgba(255,255,255,1); }
}
/* crosshair ticks like the icon */
.reactor-crosshair span {
  position: absolute;
  background: rgb(var(--accent-rgb) / 0.8);
  box-shadow: none;
}
.reactor-crosshair span:nth-child(1) { width: 2px; height: 12px; top: 6px; left: 69px; }
.reactor-crosshair span:nth-child(2) { width: 2px; height: 12px; bottom: 6px; left: 69px; }
.reactor-crosshair span:nth-child(3) { height: 2px; width: 12px; left: 6px; top: 69px; }
.reactor-crosshair span:nth-child(4) { height: 2px; width: 12px; right: 6px; top: 69px; }

/* ---- Boot log ---- */
.boot-log {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  line-height: 1.7;
  color: var(--success);
  text-align: left;
  display: inline-block;
  min-height: 0;
  margin-bottom: 18px;
  text-shadow: 0 0 8px rgba(116,198,154,0.4);
}
.boot-log .bl-line { white-space: pre; }
.boot-log .bl-ok { color: var(--accent); }
.boot-log .bl-dim { color: var(--text-dim); }

/* ---- Welcome title: techy glow + entrance ---- */
.welcome-title {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;          /* room for ascenders/descenders - never clip glyphs */
  padding: 2px 0;            /* safety against the gradient/glow being cropped */
  margin-bottom: 12px;
  animation: titleGlitch 0.5s var(--ease-out) both;
}
.welcome-title .grad {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
}
/* Clean fade-up reveal - no clip-path (a stepped clip wipe sliced the glyphs). */
@keyframes titleGlitch {
  0%   { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: none; }
}
.welcome-sub { animation: fadeUp 0.5s ease 0.2s both; }

/* ════════════════════════════════════════════════════════════
   WELCOME - cursor-reactive interactivity
   ════════════════════════════════════════════════════════════ */
.welcome { perspective: 1000px; }
.reactor {
  transition: transform 0.18s ease-out;
  transform-style: preserve-3d;
  cursor: crosshair;
}
.reactor.boost .reactor-glow { opacity: 1 !important; transform: scale(1.35); }
.reactor.boost .reactor-core { animation-duration: 1s; }
.reactor.boost .ring-1 { animation-duration: 2.5s; }
.reactor.boost .ring-2 { animation-duration: 1.8s; }
.reactor.boost .ring-3 { animation-duration: 1.2s; }

.suggestion {
  will-change: transform;
  transform-style: preserve-3d;
}
.suggestion-icon { transition: transform 0.15s; display: inline-block; }
.suggestion:hover .suggestion-icon { animation: jitter 0.45s ease-in-out infinite; }

@keyframes jitter {
  0%, 100% { transform: translate(0,0) rotate(0deg) scale(1.15); }
  25%      { transform: translate(-1.5px, 1px) rotate(-7deg) scale(1.2); }
  50%      { transform: translate(1.5px, -1px) rotate(7deg) scale(1.18); }
  75%      { transform: translate(-1px, -1.5px) rotate(-4deg) scale(1.2); }
}

/* welcome title twirl on hover */
.welcome-title { display: inline-block; transition: transform 0.2s; }
.welcome-title:hover { animation: titleTwirl 0.6s cubic-bezier(0.34,1.56,0.64,1); }
@keyframes titleTwirl {
  0%   { transform: rotate(0) scale(1); }
  35%  { transform: rotate(-3deg) scale(1.04); }
  70%  { transform: rotate(2deg) scale(1.02); }
  100% { transform: rotate(0) scale(1); }
}

/* parallax-friendly transitions */
.welcome-title, .welcome-sub, .boot-log { transition: transform 0.25s ease-out; }

/* ════════════════════════════════════════════════════════════
   PER-MODEL ANIMATED NAME STYLES
   ════════════════════════════════════════════════════════════ */
.m-name {
  display: inline-block;
  font-weight: 700;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Model names - calm solid text, no rainbow/jitter/glow */
.m-opus, .m-haiku, .m-sonnet {
  background-image: none;
  -webkit-text-fill-color: var(--text);
  color: var(--text);
  animation: none;
  filter: none;
}

@keyframes mShimmer { to { background-position: 300% 50%; } }
@keyframes mJitter {
  0%, 100% { transform: translate(0,0) rotate(0deg); }
  20%      { transform: translate(-0.5px, 0.4px) rotate(-0.7deg); }
  45%      { transform: translate(0.5px, -0.4px) rotate(0.7deg); }
  70%      { transform: translate(-0.4px, -0.3px) rotate(-0.4deg); }
  90%      { transform: translate(0.3px, 0.4px) rotate(0.3deg); }
}
@keyframes mJitterSlight {
  0%, 100% { transform: translate(0,0) rotate(0deg); }
  50%      { transform: translate(0.3px, -0.2px) rotate(0.3deg); }
}

/* ---- Reactor rings are driven by JS (proximity spin); disable CSS spin ---- */
.reactor .ring-1, .reactor .ring-2, .reactor .ring-3, .reactor .reactor-ticks {
  animation: none !important;
  will-change: transform;
}

/* ---- File uploads (project context card) ---- */
.file-item { gap: 8px; }
.file-item .fi-name {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.file-item .fi-meta { color: var(--text-dim); font-size: 10.5px; }
.file-item .fi-del {
  width: 18px; height: 18px; border-radius: 5px;
  color: var(--text-dim); font-size: 14px; line-height: 1;
  display: grid; place-items: center;
}
.file-item .fi-del:hover { background: rgba(223,107,115,0.18); color: var(--danger); }
.dropzone {
  display: block;
  margin-top: 8px;
  padding: 14px 12px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-md);
  text-align: center;
  font-size: 12px;
  color: var(--text-dim);
  cursor: pointer;
  transition: all 0.15s;
}
.dropzone:hover { color: var(--text); border-color: var(--accent); }
.dropzone.drag {
  border-color: var(--accent);
  background: rgb(var(--accent-rgb) / 0.08);
  color: var(--accent);
}

/* ---- sub-toggle (Safe Sites Only) ---- */
.toggle-btn.sub {
  margin-top: -4px;
  margin-left: 14px;
  padding: 7px 10px;
  font-size: 11px;
  border-style: dashed;
}

/* ---- Assignment / scheduled rows ---- */
.assign-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.assign-row:last-child { border-bottom: none; }
.assign-check {
  width: 18px; height: 18px; flex-shrink: 0;
  border: 1.5px solid var(--border-strong); border-radius: 5px;
  display: grid; place-items: center;
  color: var(--success); font-size: 12px; line-height: 1;
}
.assign-check:hover { border-color: var(--success); }
.assign-row.done .assign-check { background: var(--success); color: #06210f; border-color: transparent; }
.assign-row.done .assign-title { text-decoration: line-through; color: var(--text-dim); }
.assign-info { flex: 1; min-width: 0; }
.assign-title { font-size: 13px; color: var(--text); font-weight: 500; }
.assign-due { font-size: 11px; color: var(--text-dim); margin-top: 1px; }
.modal select {
  background: var(--bg-elev-2); border: 1px solid var(--border);
  padding: 10px 14px; border-radius: var(--r-md); font-size: 14px; color: var(--text);
}

/* ════════════════════════════════════════════════════════════
   LIGHT THEME
   ════════════════════════════════════════════════════════════ */
body[data-theme="light"] {
  /* ── Surfaces - soft off-white stack w/ gentle cool depth ── */
  --bg:           #eef1f8;
  --bg-elev-1:    #ffffff;
  --bg-elev-2:    #f3f5fb;
  --bg-elev-3:    #e7ebf5;
  --bg-elev-4:    #dde2ef;
  /* Glass - light frosted panel (modals/paywall) + visible hairline */
  --glass-bg:     rgba(255, 255, 255, 0.82);
  --glass-bord:   rgba(20, 22, 40, 0.10);

  /* ── Borders - dark-alpha so they actually read on white ── */
  --border:        rgba(20, 22, 40, 0.08);
  --border-strong: rgba(20, 22, 40, 0.16);
  --border-focus:  rgb(var(--accent-rgb) / 0.55);

  /* ── Text - dark enough for WCAG AA on light surfaces ── */
  --text:         #161826;
  --text-muted:   #4a4e63;
  --text-dim:     #6b7088;   /* ~4.6:1 on #fff */
  --text-faint:   #9aa0b4;   /* decorative only */

  /* ── Accent - SAME soft iris, darkened so it reads on white (AA) ── */
  --accent:       #6357b8;
  --accent-rgb:   99 87 184;    /* iris #6357b8 - matches --accent (was a stray dark-blue) */
  --accent-blue:  #6357b8;      /* alias → iris (no blue) */
  --accent-2:     #6357b8;      /* alias → iris (magenta retired) */
  --accent-2-rgb: 99 87 184;
  --accent-3:     #6357b8;
  --accent-glow:  rgb(var(--accent-rgb) / 0.18);
  --hud-track:    rgb(var(--accent-rgb) / 0.20);
  --hud-bg-edge:  rgb(var(--accent-rgb) / 0.04);

  /* ── Status - calm/desaturated, contrast-safe on light ── */
  --danger:       #c2545c;
  --warning:      #b07d35;
  --success:      #3f9b6e;

  /* ── Elevation - soft neutral shadows only, no colored glow ── */
  --shadow-sm:    0 1px 2px rgba(40,50,90,0.07);
  --shadow-md:    0 4px 16px rgba(40,50,90,0.09);
  --shadow-lg:    0 16px 48px rgba(40,50,90,0.14);
  --shadow-xl:    0 28px 72px rgba(40,50,90,0.18);
  --shadow-accent:0 4px 16px rgba(40,50,90,0.09);
  --glow-accent:  0 0 0 1px var(--border-strong);
}
body[data-theme="light"] .sidebar { background: rgba(255,255,255,0.65); }
body[data-theme="light"] .topbar,
body[data-theme="light"] .composer { background: rgba(255,255,255,0.7); }
body[data-theme="light"] .model-dropdown { background: #ffffff; }
body[data-theme="light"] .fx-grid { display: none; }
body[data-theme="light"] .fx-vignette {
  background: radial-gradient(ellipse at center, transparent 60%, rgba(40,50,90,0.10) 100%);
}
body[data-theme="light"] .msg.user .msg-avatar { background: var(--bg-elev-3); }
body[data-theme="light"] .app {
  background:
    radial-gradient(1300px 700px at 80% -140px, rgb(var(--accent-rgb) / 0.06), transparent 62%),
    var(--bg);
}
/* theme toggle icon swap */
.theme-ico-sun { display: none; }
body[data-theme="light"] .theme-ico-sun { display: inline; }
body[data-theme="light"] .theme-ico-moon { display: none; }

/* ════════════════════════════════════════════════════════════
   ⌘K COMMAND PALETTE
   ════════════════════════════════════════════════════════════ */
.palette-backdrop {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(8px);
  display: flex; justify-content: center; align-items: flex-start;
  padding-top: 14vh;
  animation: fadeIn 0.15s ease;
}
.palette-backdrop.hidden { display: none; }
.palette {
  width: 92%; max-width: 560px;
  background: var(--bg-elev-1);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: modalIn 0.18s cubic-bezier(0.16,1,0.3,1);
}
.palette-search {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  color: var(--text-dim);
}
.palette-search input { flex: 1; font-size: 15px; color: var(--text); }
.palette-list { max-height: 50vh; overflow-y: auto; padding: 6px; }
.palette-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; border-radius: var(--r-md);
  cursor: pointer; font-size: 13.5px; color: var(--text);
}
.palette-item .pi-hint {
  font-size: 10.5px; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: 0.06em;
  border: 1px solid var(--border); padding: 1px 7px; border-radius: 999px;
}
.palette-item.sel, .palette-item:hover {
  background: var(--grad-soft);
}
.palette-item.sel { box-shadow: inset 2px 0 0 var(--accent); }
.palette-empty { padding: 24px; text-align: center; color: var(--text-dim); font-size: 13px; }

/* ════════════════════════════════════════════════════════════
   CHAT MESSAGES - calm, content-first (ChatGPT-style):
   the assistant reads as clean prose on the page (no card, no bar),
   the user gets a quiet soft fill so the two roles separate without
   loud bubbles. The orb avatar carries the only glow.
   ════════════════════════════════════════════════════════════ */
.msg.assistant .msg-body {
  position: relative;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  padding-top: 1px;
  overflow: visible;
}
.msg.assistant .msg-body::before { content: none; }
.msg.assistant .msg-body::after { content: none; }
.msg.assistant .msg-avatar { box-shadow: none; }
.msg.user .msg-body {
  flex: 0 1 auto;
  max-width: 100%;
  background: var(--bg-elev-3);
  border: 1px solid var(--border);
  border-radius: 6px 14px 14px 14px;
  padding: 10px 15px;
}
.msg.user .msg-content { color: var(--text); }
/* User row: keep the quiet avatar + content snug at the left, not stretched. */
.msg.user { align-items: flex-start; }

/* message reveal */
.msg { animation: msgReveal 0.34s cubic-bezier(0.16,1,0.3,1); }
@keyframes msgReveal {
  from { opacity: 0; transform: translateY(10px); clip-path: inset(0 0 8% 0); }
  to   { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }
}

/* aside cards: animated top accent on hover */
.aside-card { position: relative; }
.aside-card::before {
  content: "";
  position: absolute; top: 0; left: 12px; right: 12px; height: 1px;
  background: var(--grad);
  opacity: 0; transition: opacity 0.2s;
}
.aside-card:hover::before { opacity: 0.6; }

/* skill cards: corner tick when enabled */
.skill-card.enabled::after {
  content: "";
  position: absolute; bottom: 7px; left: 8px;
  width: 8px; height: 8px;
  border-bottom: 1px solid rgb(var(--accent-rgb) / 0.5);
  border-left: 1px solid rgb(var(--accent-rgb) / 0.5);
}

/* smoother view + project transitions already exist; add stagger to topbar */
.topbar { animation: viewIn 0.4s cubic-bezier(0.16,1,0.3,1); }

/* ════════════════════════════════════════════════════════════
   AUTH SCREEN (hosted mode)
   ════════════════════════════════════════════════════════════ */
.auth-overlay {
  position: fixed; inset: 0; z-index: 1000;
  display: grid; place-items: center;
  background: var(--bg);
}
.auth-overlay.hidden { display: none; }
.auth-card {
  width: 90%; max-width: 360px;
  background: var(--bg-elev-1);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-xl);
  padding: 36px 30px 28px;
  text-align: center;
  box-shadow: var(--shadow-lg);
  animation: modalIn 0.3s cubic-bezier(0.16,1,0.3,1);
}
.auth-logo {
  border-radius: 14px;
  filter: hue-rotate(48deg) saturate(0.78);
  margin-bottom: 14px;
}
.auth-title {
  font-size: 26px; font-weight: 800; letter-spacing: 0.04em;
  background: none; -webkit-text-fill-color: var(--text); color: var(--text);
  margin-bottom: 4px;
}
.auth-sub { color: var(--text-muted); font-size: 13px; margin-bottom: 22px; }
.auth-card input {
  width: 100%;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 12px 14px; margin-bottom: 10px;
  font-size: 14px; color: var(--text);
  transition: border-color 0.15s;
}
.auth-card input:focus { border-color: var(--accent); }
.auth-submit { width: 100%; padding: 12px; margin-top: 6px; font-size: 14px; }
.auth-error { color: var(--danger); font-size: 12px; min-height: 16px; margin-bottom: 4px; }
.auth-switch { margin-top: 18px; font-size: 12.5px; color: var(--text-dim); }
.auth-switch a { color: var(--accent); cursor: pointer; margin-left: 6px; }
.auth-switch a:hover { text-decoration: underline; }

/* ════════════════════════════════════════════════════════════
   BILLING / PAY PAGE
   ════════════════════════════════════════════════════════════ */
.upgrade-cta {
  padding: 10px 12px;
  border-radius: var(--r-md);
  font-size: 12.5px; font-weight: 700;
  color: #06210f;
  background: linear-gradient(135deg, rgb(var(--accent-rgb)), rgb(var(--accent-rgb) / 0.85));
  box-shadow: 0 4px 16px rgba(214,168,95,0.3);
  transition: transform 0.15s, box-shadow 0.15s;
}
.upgrade-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 22px rgba(214,168,95,0.45); }

.billing-modal { max-width: 560px; }
.billing-tagline { color: var(--text-muted); font-size: 13px; margin-bottom: 18px; }
.plan-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.plan-card {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 18px 16px;
  background: var(--bg-elev-2);
}
.plan-card.pro {
  border-color: rgba(214,168,95,0.5);
  background: linear-gradient(180deg, rgba(214,168,95,0.08), transparent);
  box-shadow: 0 0 0 1px rgba(214,168,95,0.2);
}
.plan-badge {
  position: absolute; top: -10px; right: 14px;
  background: linear-gradient(135deg, rgb(var(--accent-rgb)), rgb(var(--accent-rgb) / 0.85));
  color: #06210f; font-size: 10.5px; font-weight: 800;
  padding: 3px 10px; border-radius: 999px; letter-spacing: 0.04em;
}
.plan-name { font-size: 13px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.plan-price { font-size: 30px; font-weight: 800; margin: 6px 0 14px; }
.plan-price span { font-size: 14px; color: var(--text-dim); font-weight: 500; }
.plan-feats { list-style: none; display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; font-size: 12.5px; color: var(--text); }
.plan-feats li::before { content: "✓ "; color: var(--success); font-weight: 700; }
.plan-current { font-size: 11.5px; color: var(--text-dim); text-align: center; padding: 8px; border: 1px dashed var(--border-strong); border-radius: var(--r-md); }
.plan-card .primary-btn { width: 100%; padding: 11px; }
.plan-card.dimmed { opacity: 0.5; }
.billing-note { font-size: 11.5px; color: var(--text-dim); text-align: center; margin-top: 14px; min-height: 14px; }
@media (max-width: 520px) { .plan-grid { grid-template-columns: 1fr; } }

/* ---- Subscription paywall ---- */
.paywall-card { max-width: 380px; }
.plan-badge-lg {
  display: inline-block;
  background: linear-gradient(135deg, rgb(var(--accent-rgb)), rgb(var(--accent-rgb) / 0.85));
  color: #06210f; font-size: 11px; font-weight: 800;
  padding: 3px 12px; border-radius: 999px; letter-spacing: 0.06em;
  margin-bottom: 10px;
}
.paywall-price { font-size: 34px; font-weight: 800; margin: 6px 0 16px; }
.paywall-price span { font-size: 15px; color: var(--text-dim); font-weight: 500; }
.paywall-feats { text-align: left; max-width: 220px; margin: 0 auto 18px; }
.paywall-refresh { width: 100%; margin-top: 8px; }

/* ---- Two-tier paywall ---- */
.paywall-wrap {
  width: 96%; max-width: 1480px; text-align: center;
  animation: modalIn 0.3s cubic-bezier(0.16,1,0.3,1);
}
.paywall-wrap .auth-logo { animation: logoPulse 4.5s ease-in-out infinite; }
.paywall-plans {
  display: flex; flex-direction: column; gap: 16px;
  margin: 18px 0 14px; text-align: left;
}
.pw-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px;
}
.pw-card { padding: 20px 14px; }   /* tighter so 5 fit comfortably */
.pw-card .pw-price { font-size: 24px; }
.pw-card .pw-name { font-size: 11px; }
.pw-card ul { font-size: 12px; gap: 7px; }
@media (max-width: 1180px) { .pw-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .pw-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .pw-grid { grid-template-columns: 1fr; } }

/* ---- Free-tier CTA (the no-card $0 plan choice, under the paid cards) ---- */
.pw-free {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 13px 18px; border-radius: var(--r-sm);
  border: 1px dashed rgb(var(--accent-rgb) / 0.38);
  background: rgb(var(--accent-rgb) / 0.05);
}
.pw-free-txt { display: flex; flex-direction: column; gap: 2px; }
.pw-free-txt strong { font-size: 14px; font-weight: 700; }
.pw-free-txt span { font-size: 12px; color: var(--text-dim); }
.pw-free-btn {
  flex: none; padding: 9px 22px; border-radius: var(--r-sm);
  border: 1px solid rgb(var(--accent-rgb) / 0.55);
  background: transparent; color: var(--hud-accent);
  font-weight: 700; font-size: 13px; cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.pw-free-btn:hover { background: var(--hud-accent); color: #050509; }
.pw-free-current { border-style: solid; opacity: 0.9; }

/* ---- Plan comparison table (scroll down beneath the cards) ---- */
.pw-compare { margin-top: 22px; }
.pw-cmp-h {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-dim);
  text-align: center; margin-bottom: 12px;
}
.pw-cmp-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--r-sm); }
table.pw-cmp { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 680px; }
table.pw-cmp th, table.pw-cmp td {
  padding: 10px 12px; text-align: center;
  border-bottom: 1px solid rgb(255 255 255 / 0.06); white-space: nowrap;
}
table.pw-cmp thead th {
  position: sticky; top: 0; z-index: 1; background: #0a0a14;
  font-weight: 700; font-size: 12px; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--text-muted);
}
table.pw-cmp .lab {
  text-align: left; color: var(--text); font-weight: 500;
  position: sticky; left: 0; z-index: 1; background: #0a0a14;
}
table.pw-cmp thead th.lab { z-index: 2; }
table.pw-cmp .feat { background: rgb(var(--accent-rgb) / 0.08); }
table.pw-cmp thead th.feat { color: var(--hud-accent); }
table.pw-cmp .y { color: var(--success); font-weight: 700; }
table.pw-cmp .n { color: var(--text-dim); }
table.pw-cmp .v { color: var(--text); }

/* The paywall is now tall (cards + free CTA + comparison) → make it scroll, and
   top-align so the very top stays reachable instead of being clipped by centering. */
#paywall-overlay { overflow-y: auto; align-items: start; padding: 28px 0; }
#paywall-overlay .paywall-wrap { margin: auto; }

/* Light theme: sticky cells need a light backing or rows show through them. */
body[data-theme="light"] table.pw-cmp thead th,
body[data-theme="light"] table.pw-cmp .lab { background: #eef1f8; }
body[data-theme="light"] table.pw-cmp th,
body[data-theme="light"] table.pw-cmp td { border-bottom-color: rgb(0 0 0 / 0.08); }
.billing-toggle {
  display: inline-flex; align-self: center;
  background: var(--bg-elev-1); border: 1px solid var(--border-strong);
  border-radius: 999px; padding: 4px; gap: 2px;
}
.billing-toggle button {
  background: transparent; border: 0; color: var(--text-muted);
  padding: 8px 18px; border-radius: 999px; cursor: pointer; font: inherit;
  font-size: 13px; font-weight: 600; transition: all 0.15s ease;
  display: inline-flex; align-items: center; gap: 8px;
}
.billing-toggle button:hover { color: var(--text); }
.billing-toggle button.on {
  background: linear-gradient(135deg,var(--success),rgb(var(--accent-rgb))); color: #04261a;
  box-shadow: 0 4px 14px rgba(116,198,154,0.25);
}
.bt-save {
  background: rgba(0,0,0,0.18); color: inherit;
  font-size: 10px; font-weight: 800; letter-spacing: 0.04em;
  padding: 2px 8px; border-radius: 999px;
}
.billing-toggle button:not(.on) .bt-save {
  background: rgba(116,198,154,0.15); color: var(--success);
}
/* discount badge - high-contrast & enticing (beats themed !important rules) */
.billing-toggle .bt-save {
  background: linear-gradient(135deg, var(--success), var(--success)) !important;
  color: #042310 !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase;
  padding: 3px 9px !important;
  border-radius: 999px !important;
  box-shadow: 0 2px 12px rgba(34,197,94,0.5) !important;
  animation: btSavePulse 2.4s ease-in-out infinite;
}
/* when Annual is the selected (green) button, flip to a dark pill so it still pops */
.billing-toggle button.on .bt-save {
  background: rgba(3, 26, 13, 0.9) !important;
  color: #5ef08f !important;
  box-shadow: none !important;
  animation: none;
}
@keyframes btSavePulse {
  0%, 100% { box-shadow: 0 2px 10px rgba(34,197,94,0.40); }
  50%      { box-shadow: 0 2px 17px rgba(34,197,94,0.80); }
}
.pw-card .pw-sub {
  font-size: 12px; color: var(--text-dim); margin: -10px 0 16px;
}
.pw-card {
  position: relative;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  padding: 22px 20px;
  background: var(--bg-elev-1);
  display: flex; flex-direction: column;
}
.pw-card.pro {
  border-color: rgba(214,168,95,0.55);
  background: linear-gradient(180deg, rgba(214,168,95,0.08), transparent);
  box-shadow: 0 0 0 1px rgba(214,168,95,0.2), 0 12px 40px rgba(0,0,0,0.3);
}
.pw-card .pw-name { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); padding-right: 118px; /* room for the in-card trial badge */ }
.pw-card .pw-price { font-size: 30px; font-weight: 800; margin: 6px 0 16px; }
.pw-card .pw-price span { font-size: 14px; color: var(--text-dim); font-weight: 500; }
.pw-card ul { list-style: none; display: flex; flex-direction: column; gap: 9px; margin-bottom: 18px; font-size: 13px; flex: 1; }
.pw-card li::before { content: "✓ "; color: var(--success); font-weight: 700; }
.pw-card .primary-btn { width: 100%; padding: 11px; white-space: normal; line-height: 1.3; }
.pw-card.current { opacity: 0.6; }
.pw-tag { position: absolute; top: 14px; right: 14px; background: linear-gradient(135deg, rgb(var(--accent-rgb)), rgb(var(--accent-rgb) / 0.85)); color:#10101a; font-size:10px; font-weight:800; padding:3px 10px; border-radius:999px; letter-spacing:0.05em; }
.paywall-refresh { margin-top: 6px; }

/* ════════════════════════════════════════════════════════════
   TRIAL BANNER + ADMIN DASHBOARD
   ════════════════════════════════════════════════════════════ */
.trial-banner {
  margin: 2px 2px 0;
  padding: 9px 12px;
  border-radius: var(--r-md);
  font-size: 11.5px; font-weight: 600;
  color: #06210f;
  background: linear-gradient(135deg, rgb(var(--accent-rgb)), rgb(var(--accent-rgb) / 0.85));
  cursor: pointer;
  text-align: center;
  transition: transform 0.15s;
}
.trial-banner:hover { transform: translateY(-1px); }

body[data-view="admin"] .view-admin { display: grid; grid-template-rows: auto 1fr; }
.admin-page { overflow-y: auto; padding: 32px; }
.admin-hero { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 24px; }
.admin-hero .grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); gap: 12px; max-width: 900px; }
.stat-card {
  background: var(--bg-elev-1); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 18px 18px;
  position: relative; overflow: hidden;
}
.stat-card::before { content:""; position:absolute; top:0; left:14px; right:14px; height:1px; background: var(--grad); opacity:0.4; }
.stat-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); }
.stat-value { font-size: 30px; font-weight: 800; margin-top: 6px; letter-spacing: -0.02em; }
.stat-value.money { color: var(--success); -webkit-text-fill-color: var(--success); }
.stat-sub { font-size: 11.5px; color: var(--text-dim); margin-top: 4px; }
.admin-note { margin-top: 18px; color: var(--text-dim); font-size: 12px; max-width: 900px; }

/* ════════════════════════════════════════════════════════════
   SETTINGS
   ════════════════════════════════════════════════════════════ */
body[data-view="settings"] .view-settings { display: grid; grid-template-rows: auto 1fr; }

/* ── New Settings shell (left tabs + right pane) ─────────────────────── */
.settings-shell {
  display: grid; grid-template-columns: 220px 1fr;
  height: 100%; overflow: hidden;
}
.settings-tabs {
  border-right: 1px solid var(--border);
  background: var(--bg);
  overflow-y: auto;
  padding: 14px 10px 60px;
  display: flex; flex-direction: column; gap: 2px;
}
.settings-tab {
  background: transparent; border: 0; color: var(--text-muted);
  text-align: left; padding: 10px 14px; border-radius: var(--r-md);
  cursor: pointer; font: inherit; font-size: 13px; font-weight: 500;
  transition: all 0.12s;
}
.settings-tab:hover { background: var(--bg-elev-1); color: var(--text); }
.settings-tab.active { background: var(--bg-elev-2); color: var(--text); font-weight: 600; }
.settings-tabs-divider {
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-dim); padding: 18px 14px 6px;
}
.settings-pane {
  overflow-y: auto;
  padding: 32px 44px 80px;
  max-width: 920px;
}
.settings-tab-content { display: none; animation: fadeIn 0.18s ease both; }
.settings-tab-content.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.set-section-title {
  font-size: 16px; font-weight: 700; color: var(--text);
  margin: 28px 0 14px; padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.set-section-title:first-child { margin-top: 0; }
.set-section-title .dim { font-weight: 500; color: var(--text-dim); font-size: 13px; margin-left: 6px; }

.set-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.set-row:last-child { border-bottom: 0; }
.set-row.tall { align-items: flex-start; }
.set-row.danger .set-label { color: var(--danger); }
/* Action buttons in settings rows must never be squeezed below their label
   width by the flex layout (clipped "Import…"/"Start import" at ~1180px). */
.set-row > .ghost-btn, .set-row > .primary-btn { flex-shrink: 0; white-space: nowrap; }

.set-label { font-size: 14px; font-weight: 500; color: var(--text); }
.set-sub { font-size: 12.5px; color: var(--text-dim); margin-top: 4px; line-height: 1.55; max-width: 540px; }
.set-readonly {
  font-size: 13px; color: var(--text-muted);
  background: var(--bg-elev-1); border: 1px solid var(--border);
  padding: 8px 12px; border-radius: var(--r-sm);
}
.set-readonly.mono { font-family: ui-monospace, monospace; font-size: 12px; }

.set-input {
  background: var(--bg-elev-1); border: 1px solid var(--border);
  color: var(--text); padding: 9px 12px; border-radius: var(--r-md);
  font-family: inherit; font-size: 13.5px; min-width: 260px;
}
.set-input:focus { outline: none; border-color: var(--accent); }
.class-color-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.class-swatch {
  width: 26px; height: 26px; border-radius: 50%; padding: 0; cursor: pointer;
  border: 1px solid var(--border); background: var(--bg-elev-3);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text); transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.class-swatch:hover { transform: translateY(-1px); border-color: var(--border-strong); }
.class-swatch .sw-check { opacity: 0; transition: opacity .12s ease; }
.class-swatch.selected { border-color: var(--accent); box-shadow: 0 0 0 2px rgb(var(--accent-rgb) / 0.35); }
.class-swatch.selected .sw-check { opacity: 1; }
.class-swatch.none { background: var(--bg-elev-2); position: relative; }
.class-swatch.none::after {
  content: ''; position: absolute; left: 4px; right: 4px; top: 50%;
  height: 1.5px; background: var(--text-dim); transform: rotate(-45deg); opacity: 0.7;
}
.class-swatch.none.selected::after { opacity: 0; }
.project-item.tinted { border-left: 2px solid transparent; }
.set-textarea {
  background: var(--bg-elev-1); border: 1px solid var(--border);
  color: var(--text); padding: 12px 14px; border-radius: var(--r-md);
  font-family: inherit; font-size: 13.5px; line-height: 1.6;
  width: 100%; min-width: min(380px, 100%); min-height: 140px; resize: vertical;
}
.set-textarea:focus { outline: none; border-color: var(--accent); }

/* iOS-style toggle for Settings rows */
.set-toggle {
  position: relative; width: 42px; height: 24px;
  border-radius: 999px; background: var(--bg-elev-2);
  border: 1px solid var(--border); cursor: pointer; padding: 0;
  transition: all 0.18s; flex-shrink: 0;
}
.set-toggle .seg-knob {
  position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
  border-radius: 50%; background: var(--text-muted);
  transition: all 0.18s;
}
.set-toggle.on { background: linear-gradient(135deg,rgb(var(--accent-rgb)),rgb(var(--accent-rgb))); border-color: transparent; }
.set-toggle.on .seg-knob { left: 22px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.3); }
.set-toggle[disabled] { opacity: 0.45; cursor: not-allowed; }

/* segmented (Appearance / Voice speed) */
.seg-group {
  display: inline-flex; background: var(--bg-elev-1);
  border: 1px solid var(--border); border-radius: var(--r-md); padding: 3px; gap: 2px;
}
.seg-btn {
  background: transparent; border: 0; color: var(--text-muted);
  padding: 6px 14px; border-radius: var(--r-sm); cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 500;
  transition: all 0.12s;
}
.seg-btn:hover { color: var(--text); }
.seg-btn.active {
  background: linear-gradient(135deg,rgb(var(--accent-rgb)),rgb(var(--accent-rgb))); color: #04111a;
  font-weight: 700;
}

.set-callout {
  background: rgb(var(--accent-rgb) / 0.06);
  border: 1px solid rgb(var(--accent-rgb) / 0.18);
  border-radius: var(--r-md);
  padding: 14px 16px; font-size: 13px; color: var(--text-muted);
  margin-bottom: 18px; line-height: 1.55;
}
.set-callout a { color: var(--accent); text-decoration: none; font-weight: 600; }
.set-callout a:hover { text-decoration: underline; }

/* Connector cards */
.connector-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.conn-card {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg-elev-1);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 14px 16px;
  transition: all 0.12s;
}
.conn-card:hover { border-color: var(--border-strong); transform: translateY(-1px); }
.conn-icon { font-size: 24px; flex-shrink: 0; width: 38px; text-align: center; }
.conn-body { flex: 1; min-width: 0; }
.conn-name { font-weight: 600; font-size: 14px; }
.conn-desc { font-size: 12px; color: var(--text-dim); margin-top: 2px; line-height: 1.5; }
.conn-card .ghost-btn[disabled] { opacity: 0.45; cursor: not-allowed; }

/* Billing - plan hero card */
.plan-hero {
  display: flex; align-items: center; gap: 18px;
  padding: 22px; margin-bottom: 22px;
  background: linear-gradient(135deg, rgb(var(--accent-rgb) / 0.08), rgb(var(--accent-rgb) / 0.04));
  border: 1px solid rgb(var(--accent-rgb) / 0.25);
  border-radius: var(--r-lg);
}
.plan-hero-icon {
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle, rgb(var(--accent-rgb)) 0%, transparent 70%);
  color: #fff;
}
.plan-hero-icon svg { width: 26px; height: 26px; }
.plan-hero-text { flex: 1; }
.plan-hero-title { font-size: 22px; font-weight: 800; }
.plan-hero-sub { font-size: 13px; color: var(--text-dim); margin-top: 4px; }

/* Usage progress bars */
.usage-row {
  display: grid; grid-template-columns: 220px 1fr 80px;
  align-items: center; gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.usage-label { font-size: 13.5px; font-weight: 600; color: var(--text); }
.usage-sub { font-size: 11.5px; color: var(--text-dim); margin-top: 3px; }
.usage-bar {
  height: 8px; border-radius: 999px;
  background: var(--bg-elev-2); overflow: hidden;
}
.usage-fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg,rgb(var(--accent-rgb)),rgb(var(--accent-rgb)));
  transition: width 0.4s ease;
  width: 0%;
}
.usage-pct {
  font-size: 12px; color: var(--text-muted); font-weight: 600;
  text-align: right; font-family: ui-monospace, monospace;
}

.danger-btn {
  padding: 8px 14px; border-radius: var(--r-md); font-size: 12.5px; font-weight: 600;
  color: var(--danger); border: 1px solid rgba(223,107,115,0.4); background: rgba(223,107,115,0.06);
  transition: all 0.15s;
}
.danger-btn:hover { background: rgba(223,107,115,0.16); }
.about-credit {
  padding: 22px 0 4px; font-size: 11.5px; color: var(--text-dim); font-family: 'Orbitron', sans-serif;
  letter-spacing: 0.04em;
}
.about-credit b { color: var(--text-muted); }

@media (max-width: 760px) {
  .settings-shell { grid-template-columns: 1fr; }
  .settings-tabs { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--border); padding: 8px; }
  .settings-tab { white-space: nowrap; }
  .settings-tabs-divider { display: none; }
  .settings-pane { padding: 20px 16px 80px; }
  .usage-row { grid-template-columns: 1fr; }
  .set-input, .set-textarea { min-width: 0; width: 100%; }
  .composer-hint { display: none; }   /* keyboard hints are a desktop affordance - declutter on mobile */
  .settings-tabs { -webkit-mask-image: linear-gradient(90deg, #000 95%, transparent); mask-image: linear-gradient(90deg, #000 95%, transparent); }
}

/* ════════════════════════════════════════════════════════════
   ONBOARDING TUTORIAL
   ════════════════════════════════════════════════════════════ */
.tutorial-card {
  width: 92%; max-width: 460px;
  background: var(--bg-elev-1); border: 1px solid var(--border-strong);
  border-radius: var(--r-xl); padding: 32px 30px 24px; text-align: center;
  box-shadow: var(--shadow-lg);
  animation: modalIn 0.3s cubic-bezier(0.16,1,0.3,1);
}
.tut-dots { display: flex; gap: 7px; justify-content: center; margin-bottom: 22px; }
.tut-dots .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--bg-elev-3); transition: all 0.2s; box-shadow: none; }
.tut-dots .dot.on { background: var(--accent); width: 22px; border-radius: 4px; }
.tut-body { min-height: 200px; display: flex; flex-direction: column; align-items: center; justify-content: center; animation: fadeIn 0.25s ease; }
.tut-icon { font-size: 48px; margin-bottom: 16px; filter: none; animation: float 4s ease-in-out infinite; }
.tut-title { font-size: 22px; font-weight: 800; letter-spacing: -0.01em; margin-bottom: 10px; }
.tut-title .grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tut-text { font-size: 14px; color: var(--text-muted); line-height: 1.6; max-width: 340px; }
.tut-nav { display: flex; gap: 8px; justify-content: space-between; margin-top: 24px; align-items: center; }
.tut-nav .primary-btn { padding: 10px 22px; }
.tut-nav .ghost-btn { padding: 9px 14px; }

/* ── Account personalization (post-signup onboarding) ───────────────────── */
.onboard-card {
  position: relative;
  width: 92%; max-width: 480px;
  background: var(--bg-elev-1); border: 1px solid var(--border-strong);
  border-radius: var(--r-xl); padding: 30px 30px 24px;
  box-shadow: var(--shadow-lg);
  animation: modalIn 0.3s cubic-bezier(0.16,1,0.3,1);
}
.onboard-skip {
  position: absolute; top: 16px; right: 18px;
  background: transparent; border: 0; cursor: pointer;
  color: var(--text-faint); font: inherit; font-size: 12.5px; font-weight: 600;
  transition: color 0.12s;
}
.onboard-skip:hover { color: var(--text-muted); }
.onboard-dots { display: flex; gap: 7px; margin: 4px 0 22px; }
.onboard-dots .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--bg-elev-3); transition: all 0.2s; }
.onboard-dots .dot.on { background: var(--accent); width: 22px; border-radius: 4px; }
.onboard-body { min-height: 188px; animation: fadeIn 0.25s ease; }
.onboard-title { font-size: 21px; font-weight: 800; letter-spacing: -0.01em; margin-bottom: 8px; }
.onboard-sub { font-size: 13.5px; color: var(--text-muted); line-height: 1.55; margin-bottom: 18px; }
.onboard-input {
  width: 100%; background: var(--bg-elev-2); border: 1px solid var(--border-strong);
  border-radius: var(--r-md); padding: 12px 14px; font: inherit; font-size: 15px;
  color: var(--text); outline: none; transition: border-color 0.15s, box-shadow 0.15s;
}
.onboard-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / 0.14); }
.onboard-textarea { resize: vertical; min-height: 78px; line-height: 1.5; }
.onboard-choices { display: flex; flex-wrap: wrap; gap: 9px; }
.onboard-chip {
  background: var(--bg-elev-2); border: 1px solid var(--border-strong);
  border-radius: 999px; padding: 9px 16px; cursor: pointer;
  font: inherit; font-size: 13.5px; font-weight: 600; color: var(--text-muted);
  transition: all 0.13s;
}
.onboard-chip:hover { color: var(--text); border-color: var(--text-faint); }
.onboard-chip.sel {
  background: linear-gradient(135deg, rgb(var(--accent-rgb)), rgb(var(--accent-rgb) / 0.82));
  border-color: transparent; color: #04111a;
  box-shadow: 0 4px 16px rgb(var(--accent-rgb) / 0.28);
}
.onboard-nav { display: flex; gap: 8px; align-items: center; margin-top: 26px; }
.onboard-nav .primary-btn { padding: 10px 22px; }
.onboard-nav .ghost-btn { padding: 9px 14px; }
@keyframes shake {
  0%,100% { transform: translateX(0); }
  20%,60% { transform: translateX(-7px); }
  40%,80% { transform: translateX(7px); }
}
.onboard-input.shake { animation: shake 0.4s ease; border-color: var(--danger); }

/* Settings: positive "you're on the desktop app" banner + personalize row */
.set-callout.set-callout-ok {
  background: rgb(var(--success-rgb, 34 197 94) / 0.08);
  border-color: rgb(var(--success-rgb, 34 197 94) / 0.30);
  color: var(--text);
}
.set-callout.set-personalize {
  display: flex; align-items: center; gap: 16px; justify-content: space-between;
}
.set-callout.set-personalize .ghost-btn { flex-shrink: 0; }

.paywall-back {
  position: absolute; top: 0; left: 0;
  color: var(--text-muted); font-size: 13px; font-weight: 500;
  padding: 6px 10px; border-radius: var(--r-md); transition: all 0.15s;
}
.paywall-back:hover { background: var(--bg-elev-2); color: var(--text); }
.paywall-wrap { position: relative; }

/* featured (Professional) plan emphasis - tag/glow colors set in the HUD pass below */
.pw-card.featured { transform: scale(1.04); z-index: 1; }
@media (max-width: 820px){ .pw-card.featured { transform: none; } }

/* ---- Password field with show/hide toggle ---- */
.pw-field { position: relative; }
.pw-field input { width: 100%; padding-right: 44px !important; }
.pw-toggle {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; display: grid; place-items: center;
  color: var(--text-dim); border-radius: 8px; transition: all 0.15s;
}
.pw-toggle:hover { color: var(--text); background: var(--bg-elev-2); }
/* the auth card already gives inputs margin-bottom: 10px; keep the wrapper consistent */
.auth-card .pw-field { margin-bottom: 10px; }
.auth-card .pw-field input { margin-bottom: 0; }

/* ---- Forgot password link on auth screen ---- */
.auth-forgot { margin-top: 12px; font-size: 12.5px; }
.auth-forgot a { color: var(--text-dim); cursor: pointer; }
.auth-forgot a:hover { color: var(--accent); text-decoration: underline; }

/* "Get the desktop app" link in the sidebar */
.download-link {
  display: block;
  text-decoration: none;
  color: var(--text-muted);
  font-weight: 600;
  background: linear-gradient(180deg, rgb(var(--accent-rgb) / 0.07), transparent);
  border-color: rgb(var(--accent-rgb) / 0.25);
}
.download-link:hover { color: var(--accent); border-color: rgb(var(--accent-rgb) / 0.5); }

/* ════════════════════════════════════════════════════════════
   ACCOUNT CARD (sidebar bottom-left, Claude-style)
   ════════════════════════════════════════════════════════════ */
.account-card {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 8px 10px;
  background: var(--bg-elev-1);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  cursor: pointer;
  text-align: left;
  transition: all 0.15s;
  margin-top: 4px;
}
.account-card:hover {
  background: var(--bg-elev-2);
  border-color: var(--border-strong);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}
.ac-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg,rgb(var(--accent-rgb)),rgb(var(--accent-rgb)));
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 13px; color: #fff; flex-shrink: 0;
  text-transform: uppercase;
  box-shadow: none;
}
.ac-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ac-name {
  font-size: 12px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ac-plan {
  font-size: 10.5px; color: var(--text-dim);
  text-transform: capitalize;
}
.ac-chev { color: var(--text-dim); flex-shrink: 0; }

/* nav keyboard hint (⌘K) */
.nav-kbd {
  margin-left: auto;
  font-size: 10px;
  color: var(--text-dim);
  background: var(--bg-elev-1);
  border: 1px solid var(--border);
  padding: 1px 6px;
  border-radius: 4px;
  font-family: ui-monospace, monospace;
}

/* recent-chats list in sidebar */
.recent-chats { display: flex; flex-direction: column; gap: 1px; }
.recent-chat-item {
  display: block;
  padding: 6px 10px;
  font-size: 12.5px;
  color: var(--text-muted);
  border-radius: var(--r-sm);
  cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: all 0.12s;
}
.recent-chat-item:hover { background: var(--bg-elev-1); color: var(--text); }
.recent-chats .empty { font-size: 11px; color: var(--text-dim); padding: 4px 10px; }

/* ════════════════════════════════════════════════════════════
   TASKS VIEW (school-platform assignments)
   ════════════════════════════════════════════════════════════ */
/* 5 markup children (topbar, bulkbar[hidden], disc-banner[hidden], filters,
   body) - the old 2-row template parked the FILTERS in the 1fr track, opening
   a ~320px dead gap between the filter pills and the first task group. Track
   per child; hidden ones collapse to 0; the body takes the remaining space. */
body[data-view="tasks"] .view-tasks { display: grid; grid-template-rows: auto auto auto auto minmax(0, 1fr); }
body[data-view="memories"] .view-memories { display: grid; grid-template-rows: auto auto 1fr; }

/* ────────────── MEMORIES VIEW ────────────── */
.mem-feed-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 32px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.mem-feed-bar .seg-btn {
  background: var(--bg-elev-1); border: 1px solid var(--border);
  color: var(--text-muted); font-size: 12px; padding: 6px 12px;
  border-radius: 999px; cursor: pointer;
}
.mem-feed-bar .seg-btn.active {
  background: linear-gradient(135deg,rgb(var(--accent-rgb)),rgb(var(--accent-rgb))); color: #04111a;
  border-color: transparent; font-weight: 700;
}
.mem-feed-search {
  margin-left: auto; min-width: 220px;
  background: var(--bg-elev-1); border: 1px solid var(--border);
  padding: 7px 12px; border-radius: var(--r-md);
  color: var(--text); font: inherit; font-size: 13px;
}
.mem-feed-search:focus { outline: none; border-color: var(--accent); }

.mem-feed {
  overflow-y: auto;
  padding: 22px 32px 60px;
  display: flex; flex-direction: column; gap: 10px;
}
.mem-atom {
  display: flex; align-items: flex-start; gap: 14px;
  background: var(--bg-elev-1);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 14px 16px;
  transition: all 0.12s;
}
.mem-atom:hover { border-color: var(--border-strong); transform: translateX(2px); }
.mem-atom-kind {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  background: rgb(var(--accent-rgb) / 0.1); color: var(--accent);
}
.mem-atom-kind.fact { background: rgba(116,198,154,0.12); color: var(--success); }
.mem-atom-kind.preference { background: rgba(214,168,95,0.12); color: var(--warning); }
.mem-atom-kind.imported { background: rgb(var(--accent-rgb) / 0.12); color: rgb(var(--accent-rgb)); }
.mem-atom-kind.auto { background: rgb(var(--accent-rgb) / 0.12); color: rgb(var(--accent-rgb)); }
.mem-atom-body { flex: 1; min-width: 0; }
.mem-atom-text {
  font-size: 13.5px; color: var(--text); line-height: 1.55;
  white-space: pre-wrap; word-break: break-word;
}
.mem-atom-meta {
  display: flex; align-items: center; gap: 10px;
  margin-top: 6px; font-size: 11.5px; color: var(--text-dim);
}
.mem-atom-tag {
  background: var(--bg-elev-2); color: var(--text-muted);
  padding: 2px 8px; border-radius: 999px;
  font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase;
}
.mem-atom-actions {
  display: flex; gap: 4px; flex-shrink: 0;
  opacity: 0; transition: opacity 0.12s;
}
.mem-atom:hover .mem-atom-actions { opacity: 1; }
.mem-atom-actions button {
  background: transparent; border: 0; color: var(--text-dim);
  cursor: pointer; padding: 4px 8px; border-radius: var(--r-sm);
  font-size: 14px;
}
.mem-atom-actions button:hover { background: var(--bg-elev-2); color: var(--text); }
.mem-empty {
  padding: 80px 24px; text-align: center; color: var(--text-dim);
}
.mem-empty .empty-icon {
  width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 16px;
  background: radial-gradient(circle,rgb(var(--accent-rgb)) 0%, transparent 70%);
  display: flex; align-items: center; justify-content: center;
  font-size: 32px; box-shadow: none;
}
.mem-empty h3 { font-size: 20px; color: var(--text); margin: 0 0 8px; }
.mem-empty p { font-size: 13.5px; max-width: 460px; margin: 0 auto; line-height: 1.6; }

#mem-atom-text, #mem-atom-tag {
  width: 100%;
  background: var(--bg-elev-1); border: 1px solid var(--border);
  color: var(--text); padding: 11px 13px; border-radius: var(--r-md);
  font-family: inherit; font-size: 13.5px; margin-bottom: 10px;
}
#mem-atom-text:focus, #mem-atom-tag:focus { outline: none; border-color: var(--accent); }

/* Auth modal: inline "Sign in instead →" link inside the error message */
.auth-inline-link {
  background: transparent; border: 0; padding: 6px 0 0;
  color: var(--accent); cursor: pointer; font: inherit;
  font-size: 12.5px; font-weight: 600; text-decoration: underline;
  display: inline-block;
}
.auth-inline-link:hover { color: rgb(var(--accent-rgb)); }

.tasks-body {
  flex: 1; overflow-y: auto; padding: 24px 32px 60px;
}
.tasks-empty {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: 80px 24px; text-align: center;
  gap: 14px;
}
.tasks-empty .empty-icon {
  width: 64px; height: 64px; border-radius: 50%;
  background: radial-gradient(circle,rgb(var(--accent-rgb)) 0%, transparent 70%);
  display: flex; align-items: center; justify-content: center;
  font-size: 32px; box-shadow: none;
}
.tasks-empty h3 { font-size: 22px; font-weight: 700; margin: 0; }
.tasks-empty p {
  font-size: 14px; color: var(--text-dim);
  margin: 0; max-width: 460px; line-height: 1.6;
}
.tasks-empty .primary-btn { margin-top: 10px; }

.task-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 12px;
}
.task-card {
  background: var(--bg-elev-1);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 16px 16px 14px;
  display: flex; flex-direction: column; gap: 9px;
  transition: border-color 0.15s var(--ease-out), background 0.15s var(--ease-out), transform 0.15s var(--ease-out);
  position: relative;
}
.task-card:hover { border-color: var(--border-strong); background: var(--bg-elev-2); transform: translateY(-1px); }
.task-card.done { opacity: 0.55; }
.task-head { display: flex; align-items: center; gap: 10px; }
.task-subject {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--accent);
  padding: 3px 9px 3px 8px; background: rgb(var(--accent-rgb) / 0.08);
  border-radius: 999px; line-height: 1;
}
/* leading color dot makes the subject scannable at a glance */
.task-subject::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; flex-shrink: 0; opacity: 0.9;
}
/* subject color coding (math=blue, science=green, history=orange,
   english=yellow, spanish=purple, chinese=red, french=blue, latin=orange) */
.task-subject.subj-blue   { color: #7cc4ff !important; background: rgba(56,160,255,0.14) !important; }
.task-subject.subj-green  { color: #5fe0a0 !important; background: rgba(52,211,153,0.14) !important; }
.task-subject.subj-orange { color: #ffb066 !important; background: rgba(255,150,60,0.16) !important; }
.task-subject.subj-yellow { color: #ffd75e !important; background: rgba(250,204,21,0.15) !important; }
.task-subject.subj-purple { color: #c6a4ff !important; background: rgba(168,120,255,0.16) !important; }
.task-subject.subj-red    { color: #ff8a8a !important; background: rgba(255,80,80,0.15) !important; }
.task-subject.subj-gray   { color: var(--text-muted) !important; background: var(--bg-elev-2) !important; }
.task-due {
  margin-left: auto; font-size: 11.5px; color: var(--text-dim);
  white-space: nowrap; font-weight: 500;
}
.task-due.urgent { color: rgb(var(--accent-rgb)); font-weight: 700; }
.task-due.soon { color: var(--warning); font-weight: 600; }
.task-title { font-size: 15px; font-weight: 650; line-height: 1.32; letter-spacing: -0.01em; }
.task-desc { font-size: 13px; color: var(--text-muted); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.task-actions {
  display: flex; gap: 7px; margin-top: 5px; align-items: center;
  padding-top: 11px; border-top: 1px solid var(--border);
}
.task-actions button, .task-actions a {
  font-size: 12px; padding: 6px 11px;
  border-radius: var(--r-sm);
  text-decoration: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--border);
  background: transparent; color: var(--text-muted);
  transition: background 0.13s var(--ease-out), color 0.13s var(--ease-out), border-color 0.13s var(--ease-out), transform 0.13s var(--ease-out);
  white-space: nowrap;
}
.task-actions button.do-it,
.task-actions a.do-it {
  background: var(--accent-blue);
  color: #fff; font-weight: 650; border: 0;
  box-shadow: none;
}
.task-actions button:hover { background: var(--bg-elev-3); color: var(--text); border-color: var(--border-strong); }
.task-actions button.do-it:hover { transform: translateY(-1px); }
/* Quiet icon-only buttons (complete + delete) pushed to the right edge. */
.task-actions .task-done-check { margin-left: auto; }
.task-actions .task-done-check,
.task-actions [data-act="del"] {
  padding: 6px 9px; color: var(--text-dim); font-size: 13px;
}
.task-actions [data-act="del"]:hover { color: var(--danger); border-color: rgb(223 107 115 / 0.35); background: rgb(223 107 115 / 0.08); }
.task-due.overdue { color: var(--danger, #ff5e6c); font-weight: 700; }

/* ── Tasks topbar: group selector ─────────────────────────────────────── */
.tasks-group-sel {
  background: var(--bg-elev-1); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 7px 10px; font-size: 12.5px; font-family: var(--font-sans);
  cursor: pointer;
}

/* ── Filter pills (Assigned / Missing + deep time buckets) ────────────── */
.tasks-filters { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 16px; }
.filter-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.filter-row.deep {
  padding-top: 8px; border-top: 1px solid rgba(255,255,255,0.06);
}
.filter-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 13px; border-radius: 999px;
  background: var(--bg-elev-1); border: 1px solid var(--border);
  color: var(--text-muted); font-size: 13px; font-weight: 600;
  cursor: pointer; transition: all 0.13s;
}
.filter-pill:hover { border-color: var(--border-strong); color: var(--text); background: var(--bg-elev-2); }
.filter-pill.active {
  background: rgb(var(--accent-rgb) / 0.10);
  border-color: rgb(var(--accent-rgb) / 0.35);
  color: rgb(var(--accent-rgb));
}
.filter-pill.sub { font-size: 12px; padding: 5px 11px; font-weight: 500; }
.fp-count {
  font-size: 11px; font-weight: 700; min-width: 16px; text-align: center;
  padding: 1px 6px; border-radius: 999px;
  background: rgba(255,255,255,0.06); color: var(--text-dim);
}
.filter-pill.active .fp-count { background: rgb(var(--accent-rgb) / 0.18); color: rgb(var(--accent-rgb)); }

/* ── Task sections (Today / Tomorrow / Missing …) ─────────────────────── */
.task-section { margin-bottom: 28px; }
.task-section-head {
  display: flex; align-items: center; gap: 9px; margin-bottom: 13px;
}
.task-section-head .ts-label {
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.01em; color: var(--text);
}
.task-section-head .ts-count {
  font-size: 11px; font-weight: 700; color: var(--text-dim);
  background: rgba(255,255,255,0.05); border: 1px solid var(--border);
  border-radius: 999px; padding: 0 7px; min-width: 18px; text-align: center; line-height: 17px;
}
/* hairline rule trailing the label - clean data-section feel */
.task-section-head::after {
  content: ""; flex: 1; height: 1px; background: var(--border);
}
.task-section.overdue .ts-label { color: var(--danger, #ff5e6c); }

/* ── Multi-select: checkbox + selected state ──────────────────────────── */
.task-check {
  display: none;
  /* top-LEFT: the due badge owns the top-right corner - never overlap it */
  position: absolute; top: 13px; left: 13px; z-index: 2;
}
.tasks-body.select-mode .task-check { display: block; }
.task-check input {
  width: 19px; height: 19px; cursor: pointer; accent-color: var(--accent, rgb(var(--accent-rgb)));
}
.auth-consent {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 2px 0 4px; text-align: left;
  font-size: 12.5px; line-height: 1.4; color: var(--text-dim);
  cursor: pointer; user-select: none;
}
.auth-consent input[type="checkbox"] {
  width: 16px; height: 16px; margin-top: 1px; flex-shrink: 0;
  cursor: pointer; accent-color: var(--accent, rgb(var(--accent-rgb)));
}
.tasks-body.select-mode .task-card { cursor: pointer; padding-left: 44px; }
.tasks-body.select-mode .task-card:hover { border-color: rgb(var(--accent-rgb) / 0.4); }
.tasks-body.select-mode .task-actions { display: none; }   /* clean select view */
.task-card.selected {
  border-color: rgb(var(--accent-rgb) / 0.6) !important;
  background: rgb(var(--accent-rgb) / 0.07);
  box-shadow: 0 0 0 1px rgb(var(--accent-rgb) / 0.4);
}

/* ── Bulk action bar ──────────────────────────────────────────────────── */
.tasks-bulkbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  margin: 0 0 14px; padding: 10px 14px;
  background: rgb(var(--accent-rgb) / 0.08);
  border: 1px solid rgb(var(--accent-rgb) / 0.30);
  border-radius: var(--r-md);
}
.tasks-bulkbar.hidden { display: none; }
.bulk-count { font-size: 13px; font-weight: 700; color: var(--text); }
.bulk-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.bulk-actions .ghost-btn.danger { color: var(--danger, #ff5e6c); border-color: rgba(223,107,115,0.3); }
.bulk-actions .ghost-btn.danger:hover { background: rgba(223,107,115,0.12); }
.bulk-actions button:disabled { opacity: 0.4; cursor: not-allowed; }

/* ════════════════════════════════════════════════════════════
   SCHOOL ONBOARDING MODAL
   ════════════════════════════════════════════════════════════ */
.school-modal { max-width: 580px; width: 92%; }
.modal-sub { color: var(--text-dim); font-size: 13px; margin: -4px 0 18px; line-height: 1.55; }
.platform-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
}
.platform-btn {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  background: var(--bg-elev-1);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: all 0.12s;
  text-align: left;
  color: var(--text);
}
.platform-btn:hover {
  background: var(--bg-elev-2);
  border-color: var(--accent);
  transform: translateY(-1px);
}
.pf-icon { font-size: 22px; }
.pf-name { font-weight: 600; font-size: 14px; }

.mode-btn {
  display: flex; align-items: flex-start; gap: 14px;
  width: 100%;
  padding: 16px;
  background: var(--bg-elev-1);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  cursor: pointer;
  text-align: left;
  margin-bottom: 10px;
  transition: all 0.12s;
}
.mode-btn:hover {
  border-color: var(--accent);
  background: var(--bg-elev-2);
}
.mode-icon { font-size: 28px; flex-shrink: 0; }
.mode-text { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.mode-title { font-weight: 700; font-size: 14px; display: flex; align-items: center; gap: 8px; }
.mode-tag {
  font-size: 10px; font-weight: 700; letter-spacing: 0.04em;
  padding: 2px 7px; border-radius: 999px;
}
.mode-tag.good { background: rgba(116,198,154,0.15); color: var(--success); }
.mode-tag.warn { background: rgba(214,168,95,0.15); color: var(--warning); }
.mode-desc { font-size: 12.5px; color: var(--text-dim); line-height: 1.55; }

.school-step input, .school-step textarea, .modal input, .modal textarea {
  width: 100%;
  padding: 11px 13px;
  background: var(--bg-elev-1);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text);
  font-size: 14px;
  margin-bottom: 10px;
  font-family: inherit;
}
.school-step input:focus, .modal input:focus { outline: none; border-color: var(--accent); }

.warn-box {
  background: rgba(214,168,95,0.06);
  border: 1px solid rgba(214,168,95,0.25);
  border-radius: var(--r-md);
  padding: 12px 14px;
  font-size: 12.5px;
  color: #c9b385;
  margin-bottom: 14px;
  line-height: 1.55;
}

.school-actions {
  display: flex; justify-content: space-between;
  margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--border);
}

/* Autopilot special-instructions input */
.run-instr-label {
  display: block; margin: 14px 0 6px;
  font-size: 12px; font-weight: 600; color: var(--text-muted);
  letter-spacing: 0.01em;
}
.run-instr-label .optional { font-weight: 400; opacity: 0.6; }
.run-instr-input {
  width: 100%;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  padding: 10px 12px;
  font-family: var(--font-sans);
  font-size: 13.5px; line-height: 1.45; color: var(--text);
  resize: vertical; min-height: 44px; max-height: 160px;
  transition: border-color 0.15s, background 0.15s;
}
.run-instr-input::placeholder { color: var(--text-dim); }
.run-instr-input:focus {
  outline: none;
  border-color: rgb(var(--accent-rgb) / 0.4);
  background: rgba(255,255,255,0.06);
}

.run-modes { display: flex; flex-direction: column; gap: 10px; margin: 12px 0; }
.run-mode-btn {
  display: flex; align-items: flex-start; gap: 12px;
  width: 100%; padding: 14px;
  background: var(--bg-elev-1);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  cursor: pointer; text-align: left;
  transition: all 0.12s;
}
.run-mode-btn:hover { border-color: var(--accent); background: var(--bg-elev-2); }
.run-mode-btn.selected {
  border-color: var(--accent);
  background: rgb(var(--accent-rgb) / 0.08);
  box-shadow: 0 0 0 1px rgb(var(--accent-rgb) / 0.45) inset;
}
.primary-btn.warn { background: linear-gradient(135deg, #fbbf24, #f59e0b) !important; color: #1a1206 !important; }
.rm-icon { flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: rgb(var(--accent-rgb)); }
.rm-icon svg { width: 22px; height: 22px; }
.run-mode-btn.selected .rm-icon { color: rgb(var(--accent-rgb)); }
.rm-text { display: flex; flex-direction: column; gap: 4px; }
.rm-text strong { font-size: 14px; }
.rm-text span { font-size: 12px; color: var(--text-dim); }

/* ── "How would you like to sign in?" modal ───────────────────────────── */
.login-choice { max-width: 460px; width: 92%; }
.login-choice-opts { display: flex; flex-direction: column; gap: 10px; margin: 14px 0 4px; }
.login-opt {
  display: flex; align-items: flex-start; gap: 14px; text-align: left;
  padding: 14px 16px; border-radius: 12px; cursor: pointer;
  background: var(--bg-elev-1); border: 1px solid var(--border);
  transition: all 0.15s;
}
.login-opt:hover { border-color: var(--accent); background: var(--bg-elev-2); }
.login-opt .lc-ico { font-size: 24px; flex-shrink: 0; line-height: 1.2; }
.login-opt .lc-text { display: flex; flex-direction: column; gap: 4px; }
.login-opt .lc-text strong { font-size: 14px; color: var(--text); }
.login-opt .lc-text span { font-size: 12px; color: var(--text-dim); line-height: 1.45; }
.login-creds { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.login-creds.hidden { display: none; }
.login-creds input {
  width: 100%; background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12); border-radius: 10px;
  padding: 11px 13px; font-size: 14px; color: var(--text); font-family: var(--font-sans);
}
.login-creds input:focus { outline: none; border-color: rgb(var(--accent-rgb) / 0.4); background: rgba(255,255,255,0.06); }
.login-creds .lc-note { font-size: 11.5px; color: var(--text-dim); line-height: 1.45; margin: 0; }

@media (max-width: 600px) {
  .platform-grid { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════
   IMPORT FROM OTHER APPS (Claude / Codex)
   ════════════════════════════════════════════════════════════ */
.import-modal { max-width: 560px; width: 92%; }
.import-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 18px 0 6px; }
.import-loading, .import-empty {
  grid-column: 1 / -1; text-align: center; color: var(--text-dim);
  font-size: 13px; padding: 22px 10px; line-height: 1.5;
}
.import-empty a { color: rgb(var(--accent-rgb) / 0.95); cursor: pointer; text-decoration: underline; }
.import-card {
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--bg-elev-1); padding: 16px 14px;
  display: flex; flex-direction: column; gap: 10px;
  transition: border-color 0.15s, transform 0.15s;
}
.import-card:not(.disabled):hover { border-color: rgb(var(--accent-rgb) / 0.45); transform: translateY(-1px); }
.import-card.disabled { opacity: 0.5; }
.ic-head { display: flex; align-items: center; gap: 9px; }
.ic-icon { font-size: 20px; line-height: 1; }
.ic-name { font-size: 15px; font-weight: 700; color: var(--text); }
.ic-sub { font-size: 12px; color: var(--text-muted); line-height: 1.45; min-height: 2.6em; }
.ic-import { margin-top: auto; width: 100%; justify-content: center; }
.ic-import:disabled { opacity: 0.7; cursor: default; }
.import-result {
  margin: 4px 0 2px; padding: 11px 13px; border-radius: var(--r-md);
  background: rgba(74,222,128,0.12); border: 1px solid rgba(74,222,128,0.32);
  color: #4ade80; font-size: 13px; font-weight: 600; line-height: 1.5;
}
.import-result.hidden { display: none; }
@media (max-width: 520px) { .import-cards { grid-template-columns: 1fr; } }

/* ════════════════════════════════════════════════════════════
   MEMORY IMPORT MODAL
   ════════════════════════════════════════════════════════════ */
.mem-import-modal, .mem-view-modal { max-width: 620px; width: 92%; }
.mem-step { margin: 16px 0; }
.mem-step-row {
  display: flex; align-items: center; gap: 10px; margin-bottom: 8px;
}
.mem-num {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--bg-elev-2); border: 1px solid var(--border);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: var(--text-muted);
  flex-shrink: 0;
}
.mem-step-label { font-size: 13.5px; color: var(--text); font-weight: 500; }
.mem-codebox {
  position: relative;
  background: var(--bg-elev-1);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 14px;
  max-height: 220px; overflow-y: auto;
}
.mem-codebox pre {
  margin: 0; padding-right: 80px;
  font-size: 12px; font-family: ui-monospace, monospace;
  color: var(--text-muted); white-space: pre-wrap; line-height: 1.5;
}
.mem-copy {
  position: absolute; top: 10px; right: 10px;
  background: var(--bg-elev-2); border: 1px solid var(--border);
  color: var(--text); padding: 6px 12px; border-radius: var(--r-sm);
  font-size: 12px; cursor: pointer; transition: all 0.12s;
}
.mem-copy:hover { background: var(--accent); color: #04111a; border-color: var(--accent); }
.mem-copy.copied { background: var(--success); color: #04261a; border-color: var(--success); }

#mem-paste, #mem-view-text {
  width: 100%; min-height: 140px;
  background: var(--bg-elev-1); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 12px;
  color: var(--text); font-size: 13px;
  font-family: ui-monospace, monospace;
  resize: vertical;
}
#mem-paste:focus, #mem-view-text:focus { outline: none; border-color: var(--accent); }

.mem-source-row {
  display: flex; align-items: center; gap: 10px;
  margin-top: 10px; font-size: 12px; color: var(--text-dim);
}
.mem-source-row select {
  background: var(--bg-elev-1); border: 1px solid var(--border);
  color: var(--text); padding: 6px 10px; border-radius: var(--r-sm);
  font-size: 12.5px; font-family: inherit;
}

/* ============================================================
   THEME - TERMINAL HUD
   Matches projectjarvis.app marketing site: mono labels, uppercase
   letter-spaced section headers, cyan accent, HUD corner brackets,
   status dots, bracket/slash decorations. "Agentic OS" feel.
   ============================================================ */

/* ── Font + HUD tokens consolidated into the main :root token layer (top of file) ── */

/* ── App-wide foundation ────────────────────────────────────── */
html, body {
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11', 'ss01';
  background: var(--bg);
}
.app {
  background:
    radial-gradient(1400px 800px at 80% -160px, rgb(var(--accent-rgb) / 0.045), transparent 62%),
    var(--bg);
}
::selection { background: rgb(var(--accent-rgb) / 0.28); color: var(--text); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgb(var(--accent-rgb) / 0.08); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: rgb(var(--accent-rgb) / 0.20); background-clip: padding-box; border: 2px solid transparent; }

/* ── Typography rules - mono for labels, sans for content ──── */
/* All buttons + nav items + tags get monospaced + uppercase */
.nav-item, .ghost-btn, .primary-btn, .danger-btn, .seg-btn, .pw-tag,
.set-section-title, .settings-tab, .billing-toggle button,
.task-subject, .mem-atom-tag, .nav-count, .nav-kbd,
.sidebar-header, .ac-plan, .status-line {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.10em;
  font-size: 11.5px;
  font-weight: 500;
}
.nav-item { font-size: 11.5px; }
.primary-btn, .ghost-btn, .danger-btn { font-size: 11px; padding: 11px 18px; }
.seg-btn { font-size: 10.5px; }

/* Big headings keep the sans-serif - bold, tight */
.page-title, .brand-name, #welcome-title, .modal-title,
.tut-title, .pw-name, .plan-hero-title {
  font-family: var(--font-sans);
  letter-spacing: -0.025em;
  font-weight: 800;
}
.page-title { text-transform: none; font-size: 22px; }
.brand-name {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 16px;
}

/* Body chat content stays in Inter for readability */
.msg-content { font-family: var(--font-sans); letter-spacing: -0.003em; }

/* ── Section markers - `// SECTION` like marketing site ────── */
.sidebar-header span { position: relative; padding-left: 18px; }
.sidebar-header span::before {
  content: '//'; position: absolute; left: 0;
  color: var(--hud-accent); font-weight: 700;
}
.set-section-title {
  position: relative;
  padding-left: 22px;
  border-bottom: 1px dashed rgb(var(--accent-rgb) / 0.18);
  padding-bottom: 10px;
  font-size: 11.5px;
  color: var(--hud-accent);
}
.set-section-title::before {
  content: '//'; position: absolute; left: 0;
  color: var(--hud-accent);
}

/* ── Status dot pattern (used in marketing: ● SYSTEMS · OPERATIONAL) ── */
.status-line { padding: 8px 10px; }
.status-line .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--hud-accent);
  animation: hudPulse 2.4s ease-in-out infinite;
}
@keyframes hudPulse {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 1; }
}

/* ── Sidebar refinement ─────────────────────────────────────── */
.sidebar {
  background: linear-gradient(180deg, rgb(var(--accent-rgb) / 0.012) 0%, transparent 60%);
  border-right: 1px solid rgb(var(--accent-rgb) / 0.10);
}
.brand { border-bottom: 1px dashed rgb(var(--accent-rgb) / 0.18); }
.nav-item {
  border-radius: 0;
  padding: 10px 14px;
  border-left: 2px solid transparent;
  color: var(--text-muted);
  transition: all 0.12s var(--ease-out);
}
.nav-item:hover {
  background: rgb(var(--accent-rgb) / 0.04);
  color: var(--text);
  border-left-color: rgb(var(--accent-rgb) / 0.40);
}
.nav-item.active {
  background: linear-gradient(90deg, rgb(var(--accent-rgb) / 0.10), transparent);
  color: var(--hud-accent);
  border-left-color: var(--hud-accent);
  box-shadow: none;
}
.nav-item.active::before { display: none; }    /* kill old left-bar override */
.nav-count {
  background: rgb(var(--accent-rgb) / 0.10);
  color: var(--hud-accent);
  border: 1px solid rgb(var(--accent-rgb) / 0.25);
  padding: 1px 7px; font-size: 9.5px;
}
.nav-kbd {
  background: transparent;
  border: 1px solid rgb(var(--accent-rgb) / 0.20);
  color: var(--hud-accent);
  padding: 1px 6px; font-size: 9.5px;
}
.sidebar-header { padding: 12px 6px 6px; opacity: 0.85; }

.account-card {
  background: rgb(var(--accent-rgb) / 0.025);
  border: 1px solid rgb(var(--accent-rgb) / 0.15);
  border-radius: var(--r-sm);
  padding: 10px 12px;
}
.account-card:hover {
  border-color: rgb(var(--accent-rgb) / 0.40);
  background: rgb(var(--accent-rgb) / 0.05);
  box-shadow: none;
}
.ac-avatar {
  border-radius: var(--r-xs);
  background: linear-gradient(135deg, var(--hud-accent), rgb(var(--accent-rgb) / 0.20));
  box-shadow: none;
}
.ac-name { font-family: var(--font-mono); letter-spacing: 0.04em; text-transform: lowercase; }
.ac-plan { font-size: 9.5px; color: var(--hud-accent); opacity: 0.7; }

/* Sidebar credits - terminal style */
.credit { font-family: var(--font-mono); font-size: 9px; opacity: 0.45; }
.credit-name, .credit-org {
  font-family: var(--font-sans);
  letter-spacing: 0.04em;
}

/* ── Welcome screen - HUD corner brackets + cyan-first ─────── */
.welcome { position: relative; }
/* HUD corner brackets like marketing site */
.welcome .hud { position: absolute; width: 18px; height: 18px; pointer-events: none; }
.welcome .hud.tl { top: 16px; left: 16px; border-top: 1px solid rgb(var(--accent-rgb) / 0.28); border-left: 1px solid rgb(var(--accent-rgb) / 0.28); }
.welcome .hud.tr { top: 16px; right: 16px; border-top: 1px solid rgb(var(--accent-rgb) / 0.28); border-right: 1px solid rgb(var(--accent-rgb) / 0.28); }
.welcome::after, .welcome::before {
  content: ''; position: absolute; width: 18px; height: 18px;
  border-color: rgb(var(--accent-rgb) / 0.28); border-style: solid; border-width: 0;
  pointer-events: none;
}
.welcome::before {
  bottom: 16px; left: 16px;
  border-bottom-width: 1px; border-left-width: 1px;
}
.welcome::after {
  bottom: 16px; right: 16px;
  border-bottom-width: 1px; border-right-width: 1px;
}

#welcome-title {
  font-size: 50px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.06;
}
.welcome .grad {
  background: linear-gradient(90deg, var(--hud-accent), rgb(var(--accent-rgb)));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
#welcome-sub {
  font-family: var(--font-sans);
  font-size: 15px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-muted);
  margin-top: 14px;
}

.suggestion {
  background: var(--bg-elev-1);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 15px 16px;
  transition: border-color 0.18s var(--ease-out), background 0.18s var(--ease-out), transform 0.18s var(--ease-out);
}
.suggestion:hover {
  background: var(--bg-elev-2);
  border-color: rgb(var(--accent-rgb) / 0.30);
  box-shadow: none;
  transform: translateY(-1px);
}
.suggestion-title {
  font-family: var(--font-sans);
  text-transform: none;
  letter-spacing: -0.005em;
  font-weight: 600;
  font-size: 13.5px;
  color: var(--text);
}
.suggestion-desc {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--text-dim);
  letter-spacing: 0;
  margin-top: 3px;
  line-height: 1.4;
}

.bl-line {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--text-dim);
}
.bl-ok { color: var(--hud-accent); font-weight: 700; }

/* ── Composer - terminal-style input ───────────────────────── */
.composer {
  background: linear-gradient(180deg, transparent, rgb(var(--accent-rgb) / 0.02));
  border-top: 1px dashed rgb(var(--accent-rgb) / 0.20);
}
#input {
  background: rgb(var(--accent-rgb) / 0.025);
  border: 1px solid rgb(var(--accent-rgb) / 0.15);
  border-radius: var(--r-sm);
  transition: all 0.18s var(--ease-out);
}
#input:focus {
  border-color: var(--hud-accent);
  background: rgb(var(--accent-rgb) / 0.05);
  box-shadow: 0 0 0 1px var(--hud-accent);
}
#input::placeholder, .composer-hint span {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-dim);
}
.composer-hint span { letter-spacing: 0.04em; }
#send-btn {
  background: var(--accent-blue);
  color: #fff;
  border-radius: 50%;
  box-shadow: 0 4px 14px rgb(var(--accent-rgb) / 0.45), 0 0 22px rgb(var(--accent-rgb) / 0.40);
}
#send-btn:hover { background: rgb(var(--accent-rgb)); box-shadow: 0 4px 16px rgb(var(--accent-rgb) / 0.55), 0 0 30px rgb(var(--accent-rgb) / 0.62); }

/* ── Chat messages - terminal style ─────────────────────────── */
.msg-avatar {
  border-radius: var(--r-xs);
  font-family: var(--font-mono);
  font-weight: 700;
}
.msg.assistant .msg-avatar {
  background: var(--hud-accent);
  color: #04111a;
  box-shadow: none;
}
.msg.user .msg-avatar {
  background: var(--bg-elev-3);
  border: 1px solid rgb(var(--accent-rgb) / 0.20);
}
.msg-role {
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-dim);
}
.msg.assistant .msg-role { color: var(--hud-accent); -webkit-text-fill-color: var(--hud-accent); }
.msg-content code:not(pre code) {
  background: rgb(var(--accent-rgb) / 0.08);
  color: var(--hud-accent);
  font-family: var(--font-mono);
}
.msg-content pre {
  background: rgb(var(--accent-rgb) / 0.02) !important;
  border: 1px solid rgb(var(--accent-rgb) / 0.10);
  border-radius: var(--r-sm);
}

/* ── Paywall - HUD card style with featured = cyan glow ────── */
.paywall-overlay {
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  background: rgba(5,5,9,0.85);
}
.paywall-wrap {
  background: linear-gradient(180deg, #0a0a14, #050509);
  border: 1px solid rgb(var(--accent-rgb) / 0.18);
  border-radius: var(--r-md);
  padding: 36px 38px;
  position: relative;
}
.paywall-wrap::before, .paywall-wrap::after {
  content: ''; position: absolute; width: 22px; height: 22px;
  border-color: var(--hud-accent); border-style: solid; border-width: 0;
  pointer-events: none;
}
.paywall-wrap::before {
  top: 14px; left: 14px;
  border-top-width: 1px; border-left-width: 1px;
}
.paywall-wrap::after {
  bottom: 14px; right: 14px;
  border-bottom-width: 1px; border-right-width: 1px;
}
.paywall-wrap h2 {
  font-family: var(--font-sans);
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.03em;
}
.paywall-wrap > div:first-of-type::before {
  content: '// PRICING';
  display: block;
  font-family: var(--font-mono);
  color: var(--hud-accent);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 10.5px;
  margin-bottom: 6px;
}

.pw-card {
  background: rgb(var(--accent-rgb) / 0.02);
  border: 1px solid rgb(var(--accent-rgb) / 0.12);
  border-radius: var(--r-sm);
  padding: 22px 18px;
  transition: all 0.22s var(--ease-out);
}
.pw-card::before { display: none; }   /* kill radial gradient overlay from POLISH v2 */
.pw-card:hover {
  border-color: rgb(var(--accent-rgb) / 0.40);
  background: rgb(var(--accent-rgb) / 0.05);
  box-shadow: none;
  transform: translateY(-2px);
}
.pw-card.featured {
  background: linear-gradient(180deg, rgb(var(--accent-rgb) / 0.10), rgb(var(--accent-rgb) / 0.03));
  border-color: rgb(var(--accent-rgb) / 0.50);
  box-shadow: none;
  transform: scale(1.04);
}
.pw-card.featured::before {
  content: '';
  display: block; position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: var(--hud-accent);
}
.pw-name {
  font-family: var(--font-mono);
  background: none;
  -webkit-text-fill-color: initial;
  color: var(--hud-accent);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.16em;
}
.pw-price {
  font-family: var(--font-sans);
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text);
}
.pw-price span {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--text-dim);
}
.pw-card ul li {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.02em;
  color: var(--text-muted);
}
.pw-card ul li::before {
  content: '› ';
  color: var(--hud-accent);
  font-weight: 700;
}
.pw-card .primary-btn {
  background: transparent;
  border: 1px solid rgb(var(--accent-rgb) / 0.30);
  color: var(--hud-accent);
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.10em;
  font-size: 10.5px;
  font-weight: 600;
  box-shadow: none;
}
.pw-card .primary-btn:hover {
  background: rgb(var(--accent-rgb) / 0.10);
  border-color: var(--hud-accent);
  box-shadow: none;
}
.pw-card.featured .primary-btn {
  background: var(--hud-accent);
  color: #04111a;
  border-color: var(--hud-accent);
  box-shadow: none;
}
.pw-card.featured .primary-btn:hover { background: rgb(var(--accent-rgb)); box-shadow: none; }
.pw-tag {
  background: var(--hud-accent);
  color: #04111a;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 9.5px;
  letter-spacing: 0.10em;
  border-radius: 0;
  padding: 3px 9px;
}
.billing-toggle {
  background: rgb(var(--accent-rgb) / 0.025);
  border: 1px dashed rgb(var(--accent-rgb) / 0.20);
  border-radius: var(--r-sm);
}
.billing-toggle button { color: var(--text-dim); border-radius: var(--r-xs); }
.billing-toggle button.on {
  background: rgb(var(--accent-rgb) / 0.15);
  color: var(--hud-accent);
  box-shadow: none;
}
.bt-save { background: var(--hud-accent) !important; color: #04111a !important; }

/* ── Auth modal - terminal HUD ─────────────────────────────── */
.auth-overlay { backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px); background: rgba(5,5,9,0.88); }
.auth-wrap {
  background: linear-gradient(180deg, #0a0a14, #050509);
  border: 1px solid rgb(var(--accent-rgb) / 0.18);
  border-radius: var(--r-md);
  position: relative;
}
.auth-wrap::before, .auth-wrap::after {
  content: ''; position: absolute; width: 18px; height: 18px;
  border-color: var(--hud-accent); border-style: solid; border-width: 0;
}
.auth-wrap::before { top: 12px; left: 12px; border-top-width: 1px; border-left-width: 1px; }
.auth-wrap::after { bottom: 12px; right: 12px; border-bottom-width: 1px; border-right-width: 1px; }
.auth-wrap h1, .auth-wrap h2 {
  font-family: var(--font-sans);
  letter-spacing: -0.025em;
  font-weight: 800;
}
.auth-wrap input {
  background: rgb(var(--accent-rgb) / 0.025);
  border: 1px solid rgb(var(--accent-rgb) / 0.15);
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.02em;
}
.auth-wrap input:focus {
  border-color: var(--hud-accent);
  box-shadow: 0 0 0 1px var(--hud-accent);
  background: rgb(var(--accent-rgb) / 0.05);
}
.auth-wrap .primary-btn {
  background: var(--hud-accent);
  color: #04111a;
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.10em;
  box-shadow: none;
}
.auth-wrap .primary-btn:hover { background: rgb(var(--accent-rgb)); box-shadow: none; }
#auth-sub, .auth-wrap label, #auth-switch-text {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--text-muted);
}

/* ── Tutorial - terminal slide deck ─────────────────────────── */
.tutorial-overlay { background: rgba(5,5,9,0.88); }
.tut-wrap {
  background: linear-gradient(180deg, #0a0a14, #050509);
  border: 1px solid rgb(var(--accent-rgb) / 0.18);
  border-radius: var(--r-md);
  position: relative;
}
.tut-icon { filter: none; }
.tut-title { color: var(--text); }
.tut-text { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.01em; color: var(--text-muted); line-height: 1.65; }
.tut-dots .dot { background: rgb(var(--accent-rgb) / 0.20); }
.tut-dots .dot.on {
  background: var(--hud-accent);
  width: 22px; border-radius: 999px;
}
#tut-next {
  background: var(--hud-accent); color: #04111a;
  font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.10em;
}

/* ── Settings - terminal panel ─────────────────────────────── */
.settings-tabs { background: rgb(var(--accent-rgb) / 0.012); border-right: 1px dashed rgb(var(--accent-rgb) / 0.15); }
.settings-tab { border-radius: 0; padding: 10px 14px; border-left: 2px solid transparent; }
.settings-tab.active {
  background: rgb(var(--accent-rgb) / 0.06);
  color: var(--hud-accent);
  border-left-color: var(--hud-accent);
  box-shadow: none;
}
.settings-tabs-divider {
  font-family: var(--font-mono); color: var(--hud-accent);
  border-top: 1px dashed rgb(var(--accent-rgb) / 0.15);
  padding-top: 14px;
}
.set-label {
  font-family: var(--font-mono); text-transform: uppercase;
  letter-spacing: 0.08em; font-size: 11px;
  color: var(--text);
}
.set-sub { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.02em; }
.set-readonly {
  background: rgb(var(--accent-rgb) / 0.025);
  border: 1px solid rgb(var(--accent-rgb) / 0.15);
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.02em;
}
.set-input, .set-textarea {
  background: rgb(var(--accent-rgb) / 0.025);
  border: 1px solid rgb(var(--accent-rgb) / 0.15);
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: 12.5px;
}
.set-input:focus, .set-textarea:focus {
  border-color: var(--hud-accent);
  background: rgb(var(--accent-rgb) / 0.05);
  box-shadow: 0 0 0 1px var(--hud-accent);
}
.set-toggle.on {
  background: var(--hud-accent);
  box-shadow: none;
}

/* ── Cards (Memories, Tasks, Projects, Connectors) ──────────── */
.mem-atom, .task-card, .project-card, .conn-card {
  background: rgb(var(--accent-rgb) / 0.018);
  border: 1px solid rgb(var(--accent-rgb) / 0.10);
  border-radius: var(--r-sm);
  transition: all 0.18s var(--ease-out);
}
.mem-atom:hover, .task-card:hover, .project-card:hover, .conn-card:hover {
  border-color: rgb(var(--accent-rgb) / 0.35);
  background: rgb(var(--accent-rgb) / 0.04);
  box-shadow: none;
}
.mem-atom-tag, .task-subject {
  background: rgb(var(--accent-rgb) / 0.10);
  color: var(--hud-accent);
  border: 1px solid rgb(var(--accent-rgb) / 0.20);
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}
/* Due date uses tabular mono numerals for clean column alignment. */
.task-due { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
/* Calm sentence-case actions (no HUD uppercase). The do-it/Autopilot
   button is the single accent per row - dark-blue depth fill. */
.task-actions button, .task-actions a {
  font-family: var(--font-sans); text-transform: none;
  letter-spacing: 0; font-size: 12px;
  border-radius: var(--r-sm);
}
.task-actions button.do-it, .task-actions a.do-it {
  background: var(--accent-blue); color: #fff;
  box-shadow: none;
}
.task-actions button.do-it:hover, .task-actions a.do-it:hover {
  background: rgb(var(--accent-rgb)); color: #04111a;
}

/* ── Project items / Recent chats ───────────────────────────── */
.project-item, .recent-chat-item, .upcoming-item {
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
  font-size: 11.5px;
  border-radius: 0;
  border-left: 2px solid transparent;
}
.project-item:hover, .recent-chat-item:hover, .upcoming-item:hover {
  background: rgb(var(--accent-rgb) / 0.04);
  border-left-color: rgb(var(--accent-rgb) / 0.40);
  transform: none;
}
.project-item.active { background: rgb(var(--accent-rgb) / 0.08); border-left-color: var(--hud-accent); color: var(--hud-accent); }

/* ── Topbar / breadcrumb ────────────────────────────────────── */
.topbar { backdrop-filter: blur(20px); border-bottom: 1px solid rgb(var(--accent-rgb) / 0.10); }
.ap-label { font-family: var(--font-sans); font-weight: 700; letter-spacing: -0.01em; }
.active-project .muted {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.10em;
  font-size: 10px;
  color: var(--hud-accent);
  opacity: 0.7;
}
.badge.model-badge {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 10.5px;
  background: rgb(var(--accent-rgb) / 0.04);
  border: 1px solid rgb(var(--accent-rgb) / 0.18);
}
.badge.model-badge:hover { border-color: var(--hud-accent); }

/* ── Modals (generic) ────────────────────────────────────────── */
.modal-backdrop { backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); background: rgba(5,5,9,0.85); }
.modal {
  background: linear-gradient(180deg, #0a0a14, #050509);
  border: 1px solid rgb(var(--accent-rgb) / 0.18);
  border-radius: var(--r-md);
  position: relative;
}
.modal::before, .modal::after {
  content: ''; position: absolute; width: 16px; height: 16px;
  border-color: var(--hud-accent); border-style: solid; border-width: 0;
  pointer-events: none;
}
.modal::before { top: 10px; left: 10px; border-top-width: 1px; border-left-width: 1px; }
.modal::after { bottom: 10px; right: 10px; border-bottom-width: 1px; border-right-width: 1px; }
.modal-title { font-family: var(--font-sans); letter-spacing: -0.02em; font-weight: 800; font-size: 22px; }
.modal-sub { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.02em; color: var(--text-muted); }

/* ── Trial banner - status indicator style ──────────────────── */
.trial-banner {
  background: rgb(var(--accent-rgb) / 0.05);
  border: 1px dashed rgb(var(--accent-rgb) / 0.30);
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--hud-accent);
}
.trial-banner::before {
  content: '●  '; color: var(--hud-accent);
  text-shadow: 0 0 8px var(--hud-accent);
}

/* ── Buttons: rebuild as terminal style ─────────────────────── */
.primary-btn {
  background: var(--hud-accent);
  color: #04111a;
  border-radius: var(--r-sm);
  box-shadow: none;
  padding: 11px 22px;
}
.primary-btn:hover { background: rgb(var(--accent-rgb)); box-shadow: none; transform: translateY(-1px); }
.ghost-btn {
  background: transparent;
  border: 1px solid rgb(var(--accent-rgb) / 0.20);
  border-radius: var(--r-sm);
  color: var(--text-muted);
}
.ghost-btn:hover {
  border-color: var(--hud-accent);
  background: rgb(var(--accent-rgb) / 0.04);
  color: var(--hud-accent);
}
.danger-btn {
  background: transparent;
  border: 1px solid rgba(223,107,115,0.30);
  color: var(--danger);
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.10em;
  font-size: 11px;
}
.danger-btn:hover { background: rgba(223,107,115,0.10); border-color: var(--danger); }

/* ── Usage progress bars: HUD style ─────────────────────────── */
.usage-bar { background: rgb(var(--accent-rgb) / 0.06); border: 1px solid rgb(var(--accent-rgb) / 0.12); height: 6px; border-radius: 0; }
.usage-fill { background: var(--hud-accent); border-radius: 0; }
.usage-label { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; font-size: 11px; }
.usage-sub { font-family: var(--font-mono); font-size: 10px; }
.usage-pct { font-family: var(--font-mono); color: var(--hud-accent); }

/* ── Plan hero card on Billing tab ──────────────────────────── */
.plan-hero {
  background: linear-gradient(180deg, rgb(var(--accent-rgb) / 0.08), rgb(var(--accent-rgb) / 0.02));
  border: 1px solid rgb(var(--accent-rgb) / 0.25);
  border-radius: var(--r-sm);
  position: relative;
}
.plan-hero::before {
  content: '// CURRENT PLAN';
  position: absolute; top: 11px; left: 20px;
  font-family: var(--font-mono); font-size: 9.5px;
  letter-spacing: 0.14em; color: var(--hud-accent); opacity: 0.7;
}
/* give the hero room so the label sits above the icon/title, never on the border */
.plan-hero { padding-top: 30px; }
.plan-hero-title { font-family: var(--font-sans); letter-spacing: -0.02em; }
.plan-hero-sub { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.02em; }

/* ── Page-title decoration: // SECTION style on memories/tasks ─ */
.view-memories .topbar .topbar-left::before,
.view-tasks .topbar .topbar-left::before {
  content: '// ';
  font-family: var(--font-mono);
  color: var(--hud-accent);
  letter-spacing: 0.12em;
  font-size: 11px;
  font-weight: 700;
  margin-right: 4px;
}

/* ── Reactor: keep the glow but ensure it's HUD-cyan ────────── */
.reactor-core, .ring-1, .ring-2, .ring-3 { filter: none; }

/* ============================================================
   MINIMALIST PASS - strip noise, fix overlap, breathe
   - Kill HUD corner brackets that overlap content
   - Fix trial-badge clipping
   - Override old colored tints
   - Bigger type, more whitespace, fewer borders
   ============================================================ */

/* Remove HUD corner brackets - they're causing overlap on buttons */
.welcome::before, .welcome::after,
.paywall-wrap::before, .paywall-wrap::after,
.auth-wrap::before, .auth-wrap::after,
.modal::before, .modal::after { display: none !important; }
.welcome .hud { display: none !important; }

/* Paywall: fix badge clipping + card sizing */
.paywall-overlay { background: rgba(5,5,9,0.92); }
.paywall-wrap {
  border-radius: 16px;
  padding: 40px 36px 32px;
  background: linear-gradient(180deg, #0c0c14, #060609);
  border: 1px solid rgb(var(--accent-rgb) / 0.12);
}
.pw-card {
  overflow: visible !important;       /* let badges sit above */
  padding: 26px 20px 22px;
  background: rgba(255,255,255,0.015) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 12px;
  box-shadow: none !important;
}
.pw-card:hover {
  background: rgb(var(--accent-rgb) / 0.025) !important;
  border-color: rgb(var(--accent-rgb) / 0.20) !important;
  box-shadow: none !important;
  transform: translateY(-2px);
}
.pw-card.featured {
  background: linear-gradient(180deg, rgb(var(--accent-rgb) / 0.06), rgba(255,255,255,0.012)) !important;
  border-color: rgb(var(--accent-rgb) / 0.35) !important;
  box-shadow: none !important;
  transform: scale(1.03);
}
.pw-card.featured:hover { transform: scale(1.04) translateY(-1px); }
/* Kill the legacy orange .pw-card.pro tint */
.pw-card.pro:not(.featured) {
  background: rgba(255,255,255,0.015) !important;
  border-color: rgba(255,255,255,0.06) !important;
  box-shadow: none !important;
}

/* Trial / discount badge - sit INSIDE the card, not clipped */
.pw-tag {
  top: 14px !important;
  right: 14px !important;
  font-size: 9px !important;
  padding: 3px 8px !important;
  letter-spacing: 0.08em !important;
  border-radius: 4px !important;
  background: rgb(var(--accent-rgb) / 0.15) !important;
  color: var(--hud-accent) !important;
  border: 1px solid rgb(var(--accent-rgb) / 0.30);
  box-shadow: none !important;
  animation: none !important;
}
.pw-card.featured .pw-tag {
  background: var(--hud-accent) !important;
  color: #04111a !important;
  border-color: var(--hud-accent);
  box-shadow: none !important;
}

/* Plan name + price hierarchy */
.pw-name {
  font-size: 11.5px !important;
  letter-spacing: 0.14em !important;
  color: var(--text-muted) !important;
  font-weight: 600 !important;
  margin-bottom: 6px;
}
.pw-card.featured .pw-name { color: var(--hud-accent) !important; }
.pw-price {
  font-size: 32px !important;
  margin: 4px 0 18px !important;
  font-weight: 700 !important;
  letter-spacing: -0.025em !important;
}
.pw-price span { font-size: 11px !important; opacity: 0.5; }
.pw-sub { font-size: 11px; color: var(--text-dim); margin: -12px 0 3px; }
.pw-save { font-size: 11px; font-weight: 600; color: var(--success); margin: 0 0 14px; letter-spacing: 0.01em; }
/* "MOST POPULAR" ribbon on the featured card - centered, straddling the top edge. */
.pw-popular {
  position: absolute;
  top: -11px; left: 50%; transform: translateX(-50%);
  z-index: 3;
  background: var(--hud-accent); color: #04111a;
  font-family: var(--font-mono); font-size: 9px; font-weight: 800;
  letter-spacing: 0.14em; white-space: nowrap;
  padding: 4px 13px; border-radius: 999px;
  box-shadow: none;
}

/* Feature list - clean */
.pw-card ul {
  gap: 8px;
  margin-bottom: 20px;
  font-size: 12.5px;
}
.pw-card ul li {
  font-family: var(--font-sans) !important;     /* sans-serif reads better */
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 12.5px !important;
  color: var(--text-muted) !important;
  padding-left: 2px;
}
.pw-card ul li::before {
  content: '✓' !important;
  color: var(--hud-accent);
  margin-right: 8px;
  opacity: 0.7;
  font-weight: 700;
}

/* CTA - clean rectangular button */
.pw-card .primary-btn {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  color: var(--text-muted) !important;
  border-radius: 8px !important;
  padding: 11px 14px !important;
  font-size: 11px !important;
  letter-spacing: 0.10em !important;
  width: 100%;
}
.pw-card .primary-btn:hover {
  border-color: var(--hud-accent) !important;
  color: var(--hud-accent) !important;
  background: rgb(var(--accent-rgb) / 0.04) !important;
  box-shadow: none !important;
}
.pw-card.featured .primary-btn {
  background: var(--hud-accent) !important;
  color: #04111a !important;
  border-color: var(--hud-accent) !important;
}
.pw-card.featured .primary-btn:hover {
  background: rgb(var(--accent-rgb)) !important;
  border-color: rgb(var(--accent-rgb)) !important;
  color: #04111a !important;
}

/* Billing toggle - restore visible "Monthly" text + cleaner */
.billing-toggle {
  background: rgba(255,255,255,0.02) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 999px !important;
  padding: 4px;
}
.billing-toggle button {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.10em;
  padding: 7px 16px;
  color: var(--text-muted) !important;
  border-radius: 999px !important;
}
.billing-toggle button.on {
  background: var(--hud-accent) !important;
  color: #04111a !important;
  box-shadow: none !important;
}
.bt-save {
  background: rgba(34,197,94,0.15) !important;
  color: #4ade80 !important;          /* keep the green "savings" identity legible even when Annual is inactive (was inherit → dark-on-dark) */
  font-size: 9px; font-weight: 800;
}

/* "Explore first →" back button - absolutely positioned so it doesn't push
   the centered logo/title off-axis. Sits in the top-left of the paywall card. */
.paywall-wrap { position: relative !important; }
#paywall-back, .paywall-back {
  position: absolute !important;
  top: 22px !important;
  left: 24px !important;
  z-index: 5;
  background: transparent;
  border: 0;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
}
#paywall-back:hover, .paywall-back:hover { color: var(--hud-accent); background: rgb(var(--accent-rgb) / 0.05); }

/* Paywall heading area - keep logo + title properly centered */
.paywall-wrap .auth-logo {
  display: block !important;
  margin: 0 auto 14px !important;
}
.paywall-wrap .auth-title {
  text-align: center !important;
  margin: 0 auto 6px !important;
}
.paywall-wrap .auth-sub {
  text-align: center !important;
  margin: 0 auto 22px !important;
  max-width: 520px;
}
/* Add top padding so the absolute back-button doesn't overlap the logo */
.paywall-wrap { padding-top: 60px !important; }

/* Paywall heading - smaller, more breathing room */
.paywall-wrap h2 {
  font-size: 24px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}
.paywall-wrap > div:first-of-type::before { display: none; }  /* kill // PRICING marker */

/* Sidebar // markers - keep but make them smaller, less shouty */
.sidebar-header span { padding-left: 14px; }
.sidebar-header span::before {
  content: '·' !important;        /* dot instead of `//` */
  font-size: 14px;
  line-height: 1;
  top: -1px;
}

/* Settings - kill the // marker, use a thin underline instead */
.set-section-title {
  padding-left: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  color: var(--text-muted) !important;
  font-size: 10.5px !important;
  letter-spacing: 0.14em !important;
}
.set-section-title::before { display: none !important; }

/* Plan hero badge label */
.plan-hero { padding: 26px 24px; border-radius: 12px; }
.plan-hero::before {
  font-size: 9px !important; letter-spacing: 0.16em !important;
  content: 'CURRENT PLAN' !important;
}

/* Topbar // markers - kill (too noisy) */
.view-memories .topbar .topbar-left::before,
.view-tasks .topbar .topbar-left::before { display: none !important; }

/* Reduce the heavy diagonal-stripe background on app */
.app {
  background:
    radial-gradient(1200px 700px at 75% -150px, rgb(var(--accent-rgb) / 0.035), transparent 60%),
    radial-gradient(800px 500px at -100px 110%, rgb(var(--accent-rgb) / 0.020), transparent 60%) !important;
}

/* Composer - cleaner, less aggressive glow */
#input {
  background: rgba(255,255,255,0.02) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
}
#input:focus {
  border-color: rgb(var(--accent-rgb) / 0.40) !important;
  background: rgb(var(--accent-rgb) / 0.025) !important;
  box-shadow: none !important;
}

/* Generic minimalist refinement on cards */
.mem-atom, .task-card, .project-card, .conn-card {
  background: rgba(255,255,255,0.015) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
}
.mem-atom:hover, .task-card:hover, .project-card:hover, .conn-card:hover {
  background: rgb(var(--accent-rgb) / 0.025) !important;
  border-color: rgb(var(--accent-rgb) / 0.20) !important;
  box-shadow: none !important;
}

/* Trial banner - quieter */
.trial-banner {
  background: rgb(var(--accent-rgb) / 0.06) !important;
  border: 1px solid rgb(var(--accent-rgb) / 0.18) !important;
  border-radius: 8px !important;
}

/* ════════════════════════════════════════════════════════════
   CONNECTORS VIEW - top-level, animated, enticing
   ════════════════════════════════════════════════════════════ */
body[data-view="connectors"] .view-connectors {
  display: flex; flex-direction: column;
  overflow: hidden;          /* let inner .conn-scroll handle scrolling */
}
.view-connectors .topbar { flex-shrink: 0; }
.view-connectors > *:not(.topbar) { flex-shrink: 0; }
.view-connectors {
  /* internal scrolling wrapper for everything below the topbar */
}
/* Wrap hero + grids in a scroll container */
body[data-view="connectors"] .view-connectors {
  overflow-y: auto !important;
  padding-bottom: 60px;
}

/* Hero banner with floating orb */
.conn-hero {
  display: flex; align-items: center; gap: 24px;
  padding: 28px 32px;
  position: relative;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  background:
    radial-gradient(800px 300px at 80% 30%, rgb(var(--accent-rgb) / 0.10), transparent 60%),
    radial-gradient(600px 300px at 20% 70%, rgb(var(--accent-rgb) / 0.08), transparent 60%);
  overflow: hidden;
  min-height: 140px;
}
.conn-hero::before {
  content: ''; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(0deg, transparent 0, transparent 39px, rgb(var(--accent-rgb) / 0.015) 39px, rgb(var(--accent-rgb) / 0.015) 40px),
    repeating-linear-gradient(90deg, transparent 0, transparent 39px, rgb(var(--accent-rgb) / 0.015) 39px, rgb(var(--accent-rgb) / 0.015) 40px);
  pointer-events: none;
  mask: radial-gradient(600px 300px at 50% 50%, #000, transparent);
  -webkit-mask: radial-gradient(600px 300px at 50% 50%, #000, transparent);
}
.conn-hero-orb {
  width: 64px; height: 64px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgb(var(--accent-rgb)) 0%, rgb(var(--accent-rgb)) 30%, rgb(var(--accent-rgb) / 0.30) 60%, transparent 80%);
  box-shadow: inset 0 0 30px rgba(255,255,255,0.20);
  /* SPIN not flash: gentle float + slow continuous core rotation (no opacity/glow pulse). */
  animation: connOrbFloat 4s ease-in-out infinite, connOrbSpin 10s linear infinite;
  flex-shrink: 0;
  position: relative;
  margin-left: 8px;
}
.conn-hero-orb::before, .conn-hero-orb::after {
  content: ''; position: absolute; inset: -14px;
  border: 1px solid rgb(var(--accent-rgb) / 0.30);
  border-radius: 50%;
  animation: connOrbSpin 18s linear infinite;
}
.conn-hero-orb::after {
  inset: -28px;
  border-color: rgb(var(--accent-rgb) / 0.15);
  border-style: dashed;
  animation-duration: 26s;
  animation-direction: reverse;
}
@keyframes connOrbFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes connOrbPulse { 0%,100% { box-shadow: inset 0 0 40px rgba(255,255,255,0.20); } 50% { box-shadow: inset 0 0 50px rgba(255,255,255,0.30); } }
@keyframes connOrbSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.conn-hero-text { flex: 1; min-width: 0; overflow: hidden; }
.conn-hero-title {
  font-size: 22px; font-weight: 800; letter-spacing: -0.02em;
  line-height: 1.2; margin: 0 0 8px;
  color: var(--text);
}
.conn-hero-title .grad {
  background: linear-gradient(90deg, rgb(var(--accent-rgb)) 0%, rgb(var(--accent-rgb)) 60%, rgb(var(--accent-rgb)) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: connShimmer 5s linear infinite;
}
@keyframes connShimmer { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }
.conn-hero-sub {
  font-size: 13px; color: var(--text-muted); line-height: 1.55;
  margin: 0; max-width: 720px;
}
@media (max-width: 720px) {
  .conn-hero { flex-direction: column; align-items: flex-start; padding: 22px; }
  .conn-hero-title { font-size: 20px; }
}

/* Section labels */
.conn-section-title {
  font-family: var(--font-mono);
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-dim);
  padding: 28px 36px 14px;
}

/* Card grid */
.conn-grid {
  display: grid;
  /* Img81: two equal columns that fill the full width of the page (no dead
     right margin). Every card is the same size; a lone trailing card just
     sits in column 1. Collapses to a single column on narrow widths below. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: min-content;  /* natural height so a card can expand to its write-up */
  align-items: start;
  gap: 14px;
  padding: 0 36px;
}

/* Each connector card */
.conn-tile {
  position: relative;
  display: flex; flex-direction: column;   /* so actions can pin to the bottom */
  background: linear-gradient(135deg, rgba(255,255,255,0.025), rgba(255,255,255,0.005));
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  padding: 22px 20px 18px;
  min-height: 0;                /* the always-on blurb fills the body now - no dead space */
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.22s var(--ease-out), border-color 0.22s var(--ease-out), box-shadow 0.22s var(--ease-out);
}
.conn-tile::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(400px 200px at var(--mx,50%) var(--my,0%), var(--accent-color,rgb(var(--accent-rgb) / 0.18)), transparent 60%);
  opacity: 0; transition: opacity 0.3s ease;
  pointer-events: none;
}
.conn-tile:hover {
  transform: translateY(-3px);
  border-color: var(--accent-color, rgb(var(--accent-rgb) / 0.35));
  box-shadow: 0 12px 40px rgba(0,0,0,0.30);
}
.conn-tile:hover::before { opacity: 1; }

/* Per-platform color theming */
.conn-tile[data-platform="google_classroom"] { --accent-color: rgba(116,198,154,0.30); }
.conn-tile[data-platform="canvas"] { --accent-color: rgba(223,107,115,0.30); }
.conn-tile[data-platform="schoology"] { --accent-color: rgb(var(--accent-rgb) / 0.30); }
.conn-tile[data-platform="powerschool"] { --accent-color: rgba(214,168,95,0.30); }
.conn-tile[data-platform="blackboard"] { --accent-color: rgb(var(--accent-rgb) / 0.30); }
.conn-tile[data-platform="gmail"] { --accent-color: rgba(223,107,115,0.30); }
.conn-tile[data-platform="calendar"] { --accent-color: rgb(var(--accent-rgb) / 0.30); }
.conn-tile[data-platform="slack"] { --accent-color: rgb(var(--accent-rgb) / 0.30); }

/* Card body */
.conn-tile-head {
  display: flex; align-items: flex-start; gap: 14px;
  margin-bottom: 12px;
}
.conn-tile-icon {
  width: 44px; height: 44px; border-radius: 12px;
  background: linear-gradient(135deg, var(--accent-color, rgb(var(--accent-rgb) / 0.25)), rgba(255,255,255,0.04));
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; flex-shrink: 0;
  box-shadow: 0 4px 18px rgba(0,0,0,0.20);
}
.conn-tile-info { flex: 1; min-width: 0; }
.conn-tile-name {
  font-family: var(--font-sans); font-weight: 700;
  font-size: 15px; letter-spacing: -0.01em;
  color: var(--text);
}
.conn-tile-status {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 9.5px; letter-spacing: 0.10em;
  text-transform: uppercase;
}
.conn-tile-status .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--text-dim);
}
.conn-tile-status.connected { color: var(--success); }
.conn-tile-status.connected .dot {
  background: var(--success);
  box-shadow: none;
  animation: hudPulse 2s ease-in-out infinite;
}
.conn-tile-status.syncing { color: var(--accent); }
.conn-tile-status.syncing .dot { background: var(--accent); animation: hudPulse 1.2s ease-in-out infinite; }
.conn-tile-status.error { color: var(--danger); }
.conn-tile-status.error .dot { background: var(--danger); }
.conn-tile-status.coming-soon { color: var(--text-dim); }

.conn-tile-desc {
  font-size: 12.5px; color: var(--text-muted); line-height: 1.55;
  margin-bottom: 14px;
}

/* expand-to-read write-up (click the card body) */
.conn-tile-chev {
  margin-left: auto; align-self: center; flex-shrink: 0;
  color: var(--text-dim); opacity: 0.55;
  transition: transform 0.28s var(--ease-out), opacity 0.15s, color 0.15s;
}
.conn-tile:hover .conn-tile-chev { opacity: 0.9; }
.conn-tile.expanded .conn-tile-chev { transform: rotate(180deg); color: var(--accent); opacity: 1; }
.conn-tile-blurb {
  font-size: 12.5px; line-height: 1.55; color: var(--text-muted);
  margin: 13px 0 6px;
}
.conn-tile-about {
  max-height: 0; overflow: hidden; opacity: 0;
  font-size: 12.5px; line-height: 1.65; color: var(--text-muted);
  transition: max-height 0.4s var(--ease-out), opacity 0.3s ease, margin 0.3s ease, padding 0.3s ease;
}
.conn-tile.expanded .conn-tile-about {
  max-height: 640px; opacity: 1;
  margin: 2px 0 14px; padding-top: 13px;
  border-top: 1px solid var(--border);
}

.conn-tile-meta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.04);
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: 0.04em;
  color: var(--text-dim);
}

.conn-tile-actions {
  display: flex; gap: 8px; margin-top: auto;   /* pin to the bottom → buttons align across cards */
  padding-top: 14px;
}
.conn-tile-actions button, .conn-tile-actions a {
  flex: 1;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.10);
  color: var(--text-muted);
  padding: 9px 12px;
  border-radius: 8px;
  font-family: var(--font-sans);
  font-size: 12px; font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  text-decoration: none; text-align: center;
}
.conn-tile-actions button:hover:not(:disabled) {
  border-color: var(--hud-accent);
  background: rgb(var(--accent-rgb) / 0.05);
  color: var(--hud-accent);
}
.conn-tile-actions button[disabled] { opacity: 0.4; cursor: not-allowed; }
.conn-tile-actions button.primary {
  background: var(--hud-accent);
  color: #04111a;
  border-color: var(--hud-accent);
  box-shadow: none;
}
.conn-tile-actions button.primary:hover {
  background: rgb(var(--accent-rgb));
  box-shadow: none;
  transform: translateY(-1px);
}
.conn-tile-actions button.primary[disabled] {
  background: transparent;
  border-color: rgba(255,255,255,0.10);
  color: var(--text-dim);
  box-shadow: none;
}
.conn-tile-actions button.danger {
  color: var(--danger);
  border-color: rgba(223,107,115,0.30);
}
.conn-tile-actions button.danger:hover {
  background: rgba(223,107,115,0.10);
  border-color: var(--danger);
  color: var(--danger);
}

/* ════════════════════════════════════════════════════════════
   AURON CLOUD - perpetual GTA-VI-style tease
   Lives at the bottom of the Connectors page. Heavy on mystique.
   ════════════════════════════════════════════════════════════ */
.cloud-tease {
  margin: 48px 32px 0;
  padding: 56px 36px;
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  background: linear-gradient(180deg, #050509 0%, #0a0a18 60%, #060610 100%);
  border: 1px solid rgba(255,255,255,0.06);
  isolation: isolate;
}
.cloud-tease-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(800px 400px at 20% 0%, rgb(var(--accent-rgb) / 0.15), transparent 60%),
    radial-gradient(800px 400px at 80% 100%, rgb(var(--accent-rgb) / 0.12), transparent 60%),
    radial-gradient(600px 300px at 50% 50%, rgba(255,255,255,0.08), transparent 60%),
    repeating-linear-gradient(0deg, transparent 0, transparent 49px, rgb(var(--accent-rgb) / 0.015) 49px, rgb(var(--accent-rgb) / 0.015) 50px),
    repeating-linear-gradient(90deg, transparent 0, transparent 49px, rgb(var(--accent-rgb) / 0.015) 49px, rgb(var(--accent-rgb) / 0.015) 50px);
  animation: cloudBgDrift 14s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes cloudBgDrift {
  0%, 100% { transform: scale(1) translate(0,0); }
  50%      { transform: scale(1.05) translate(-10px, -8px); }
}
.cloud-tease-inner {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
}
.cloud-tease-badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  background: rgb(var(--accent-rgb) / 0.10);
  color: var(--hud-accent);
  border: 1px solid rgb(var(--accent-rgb) / 0.30);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 24px;
}
.cloud-tease-badge .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--hud-accent);
  animation: hudPulse 1.6s ease-in-out infinite;
}
.cloud-tease-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.24em;
  color: var(--text-dim);
  text-transform: uppercase;
  margin-bottom: 16px;
  opacity: 0.7;
}
.cloud-tease-title {
  font-family: var(--font-sans);
  font-size: 44px; font-weight: 800;
  letter-spacing: -0.035em; line-height: 1.05;
  background: linear-gradient(180deg, #ffffff 0%, rgba(255,255,255,0.55) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  margin: 0 0 22px;
}
.cloud-tease-sub {
  font-size: 16px; color: var(--text-muted);
  line-height: 1.6; max-width: 580px; margin: 0 auto 36px;
}
.cloud-tease-stats {
  display: flex; justify-content: center; gap: 60px;
  margin: 36px 0 40px;
}
.cloud-stat { text-align: center; }
.cloud-stat-num {
  font-family: var(--font-sans);
  font-size: 44px; font-weight: 800;
  letter-spacing: -0.04em;
  background: linear-gradient(135deg, rgb(var(--accent-rgb)) 0%, rgb(var(--accent-rgb)) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: none;
  line-height: 1;
}
.cloud-stat-lbl {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.16em;
  color: var(--text-dim); text-transform: uppercase;
  margin-top: 8px;
}
.cloud-tease-cta {
  background: rgb(var(--accent-rgb) / 0.10);
  border: 1px solid rgb(var(--accent-rgb) / 0.40);
  color: var(--hud-accent);
  font-family: var(--font-sans);
  font-weight: 600; font-size: 14px;
  padding: 14px 32px;
  border-radius: 12px;
  cursor: pointer;
  letter-spacing: 0;
  box-shadow: none;
  transition: all 0.18s ease;
}
.cloud-tease-cta:hover {
  background: var(--hud-accent);
  color: #04111a;
  transform: translateY(-2px);
  box-shadow: none;
}
.cloud-tease-foot {
  margin-top: 28px;
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.10em;
  color: var(--text-dim);
  text-transform: uppercase;
  opacity: 0.5;
}
@media (max-width: 720px) {
  .cloud-tease { margin: 32px 16px 0; padding: 36px 22px; }
  .cloud-tease-title { font-size: 30px; }
  .cloud-tease-stats { gap: 28px; }
  .cloud-stat-num { font-size: 32px; }
}

/* "Coming soon" overlay for not-ready tiles */
.conn-tile.coming-soon::after {
  content: 'COMING SOON';
  position: absolute; top: 14px; right: 14px;
  font-family: var(--font-mono);
  font-size: 8.5px; letter-spacing: 0.14em;
  background: rgba(214,168,95,0.15);
  color: var(--warning);
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(214,168,95,0.30);
}

/* Pulsing dot on the sidebar Connectors badge when not connected */
.nav-pulse { animation: navPulse 2s ease-in-out infinite; }
@keyframes navPulse {
  0%,100% { box-shadow: none; }
  50%     { box-shadow: none; }
}

/* ── Tasks empty-state CTA when no platform connected ─────── */
.tasks-cta-card {
  max-width: 520px; margin: 64px auto;
  padding: 40px 36px;
  background: var(--bg-elev-1);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  text-align: center;
  box-shadow: none;
  position: relative;
  overflow: hidden;
}
.tasks-cta-card::before { content: none; }
/* The orb stand-in: the brand mark carries the only glow on the page. */
.tasks-cta-orb {
  width: 56px; height: 56px; border-radius: 50%;
  margin: 0 auto 20px;
  background:
    radial-gradient(circle at 50% 42%, #fff 0%, rgb(var(--accent-rgb)) 30%, rgb(var(--accent-blue-rgb)) 72%, transparent 73%);
  box-shadow: 0 0 18px rgb(var(--accent-rgb) / 0.45);
  /* SPIN not flash: brand CTA orb rotates slowly under its steady glow. */
  animation: orbSpin 11s linear infinite;
  transform-origin: 50% 50%;
  position: relative; z-index: 1;
}
.tasks-cta-title {
  font-family: var(--font-sans);
  font-size: 24px; font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
  position: relative; z-index: 1;
}
.tasks-cta-sub {
  font-size: 14px; color: var(--text-muted);
  line-height: 1.6;
  max-width: 420px; margin: 0 auto 24px;
  position: relative; z-index: 1;
}
.tasks-cta-btn {
  background: var(--accent-blue) !important;
  color: #fff !important;
  border: 0 !important;
  padding: 11px 24px !important;
  border-radius: var(--r-md) !important;
  font-family: var(--font-sans) !important;
  font-weight: 650 !important;
  font-size: 13.5px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  cursor: pointer;
  box-shadow: none !important;
  transition: background 0.18s var(--ease-out), transform 0.18s var(--ease-out);
  position: relative; z-index: 1;
}
.tasks-cta-btn:hover {
  background: rgb(var(--accent-rgb)) !important;
  color: #04111a !important;
  transform: translateY(-1px);
  box-shadow: none !important;
}
/* two-button CTA row (Sync now + Go to Connectors) */
.tasks-cta-actions {
  display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
  position: relative; z-index: 1;
}
.tasks-cta-btn.ghost {
  background: transparent !important;
  color: var(--text) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  box-shadow: none !important;
}
.tasks-cta-btn.ghost:hover {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.30) !important;
  box-shadow: none !important;
}

/* ── "Connected" badge in the Tasks topbar ────────────────────────────── */
#tasks-platform-label { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 9px; /* breathe under the "Assignments" h1 */ }
.conn-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 11px 3px 9px;
  background: rgba(116,198,154,0.10);
  border: 1px solid rgba(116,198,154,0.28);
  border-radius: 999px;
  font-size: 12px; font-weight: 600; color: var(--text);
}
.conn-pill .dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  background: var(--success); box-shadow: none;
}
.conn-pill.muted {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.12); color: var(--text-dim);
}
.conn-pill.muted .dot { background: var(--text-dim); box-shadow: none; }
.conn-pill.warn {
  background: rgba(214,168,95,0.12);
  border-color: rgba(214,168,95,0.35); color: var(--warning);
}
.conn-pill.warn .dot { background: var(--warning); box-shadow: none; }

/* ── "School disconnected" banner on the Tasks page ───────────────────── */
.tasks-disc-banner {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 16px; padding: 12px 16px;
  background: rgba(214,168,95,0.10);
  border: 1px solid rgba(214,168,95,0.30);
  border-radius: var(--r-md);
  /* The tasks view is a grid - without these the banner stretches to fill its
     whole grid track (a ~285px empty box around one line of text). */
  align-self: start;
  height: fit-content;
}
.tasks-disc-banner.hidden { display: none; }
.tasks-disc-banner .tdb-ico { font-size: 18px; flex-shrink: 0; }
.tasks-disc-banner .tdb-text { flex: 1; font-size: 13px; color: var(--text-muted); line-height: 1.45; }
.tasks-disc-banner .tdb-text strong { color: var(--text); }
.tasks-disc-banner .tdb-btn {
  flex-shrink: 0; cursor: pointer;
  background: var(--warning); color: #2a1a04; border: 0;
  font-weight: 700; font-size: 13px; padding: 8px 16px; border-radius: 8px;
  transition: all 0.15s;
}
.tasks-disc-banner .tdb-btn:hover { background: #ffc16e; transform: translateY(-1px); }

/* ── Button spinner (connect/sync in-flight) ──────────────────────────── */
.btn-spin {
  display: inline-block; width: 12px; height: 12px;
  margin-right: 7px; vertical-align: -1px;
  border: 2px solid rgba(255,255,255,0.35);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: btnspin 0.7s linear infinite;
}
@keyframes btnspin { to { transform: rotate(360deg); } }
.conn-tile.busy { opacity: 0.96; }
.conn-tile.busy .conn-tile-actions button { cursor: progress; }

/* ════════════════════════════════════════════════════════════
   TOASTS - non-blocking notifications (replace alert())
   ════════════════════════════════════════════════════════════ */
/* #toast-wrap: single source of truth lives in the toast-redux section
   (~L24890) - two older definitions removed (last-one-wins trap). */
.toast {
  pointer-events: auto;
  display: flex; align-items: flex-start; gap: 10px;
  padding: 13px 14px;
  background: var(--bg-elev-2, #15151f);
  border: 1px solid rgba(255,255,255,0.10);
  border-left: 3px solid var(--accent, rgb(var(--accent-rgb)));
  border-radius: 12px;
  box-shadow: 0 16px 44px rgba(0,0,0,0.45);
  color: var(--text, #e8e8f0);
  font-size: 13.5px; line-height: 1.4;
  cursor: pointer;
  opacity: 0; transform: translateX(16px) scale(0.98);
  transition: opacity 0.26s ease, transform 0.26s cubic-bezier(0.34,1.4,0.64,1);
}
.toast.show { opacity: 1; transform: none; }
.toast-ico { flex-shrink: 0; font-weight: 700; line-height: 1.4; }
.toast-msg { flex: 1; }
.toast-x { flex-shrink: 0; opacity: 0.4; font-size: 16px; line-height: 1.2; }
.toast:hover .toast-x { opacity: 0.8; }
.toast-success { border-left-color: var(--success); }
.toast-success .toast-ico { color: var(--success); }
.toast-error   { border-left-color: var(--danger, #ff5e6c); }
.toast-error .toast-ico { color: var(--danger, #ff5e6c); }
.toast-sync    { border-left-color: var(--accent, rgb(var(--accent-rgb))); }
.toast-sync .toast-ico { color: var(--accent, rgb(var(--accent-rgb))); animation: btnspin 1.1s linear infinite; }
.toast-info    { border-left-color: rgba(255,255,255,0.35); }
@media (max-width: 600px) {
  #toast-wrap { left: 16px; right: 16px; bottom: 16px; max-width: none; }
}

/* ════════════════════════════════════════════════════════════
   DESKTOP-EXCLUSIVE CTA (cloud web users hitting Connectors/Tasks)
   ════════════════════════════════════════════════════════════ */
.desktop-exclusive {
  /* 80px top+bottom margin pushed the card 41px below the fold at 1440x900.
     Trim to fit the viewport (content still centered, breathing room kept). */
  max-width: 640px; margin: 40px auto;
  padding: 40px 40px 36px;
  background: linear-gradient(135deg, rgb(var(--accent-rgb) / 0.08), rgb(var(--accent-rgb) / 0.05));
  border: 1px solid rgb(var(--accent-rgb) / 0.25);
  border-radius: 22px;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: none;
}
.desktop-exclusive::before {
  content: ''; position: absolute;
  top: -100px; left: 50%; transform: translateX(-50%);
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgb(var(--accent-rgb) / 0.25), transparent 60%);
  pointer-events: none;
  animation: ctaGlow 4s ease-in-out infinite;
}
.desktop-exclusive-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  background: rgb(var(--accent-rgb) / 0.15);
  color: var(--hud-accent);
  border: 1px solid rgb(var(--accent-rgb) / 0.30);
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 18px;
  position: relative; z-index: 1;
}
.desktop-exclusive-badge .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--hud-accent);
 
  animation: hudPulse 2s ease-in-out infinite;
}
.desktop-exclusive-orb {
  width: 86px; height: 86px; border-radius: 50%;
  margin: 0 auto 22px;
  /* The hero mark is the actual Auron arc-reactor logo (logo.svg), STATIC -
     no float/pulse/glow oscillation. Only the dashed rings keep a slow spin. */
  background: none;
  box-shadow: none;
  animation: none;
  position: relative; z-index: 1;
}
.desktop-exclusive-orb img {
  width: 100%; height: 100%; display: block;
  animation: none;
}
/* The hero mark is now the real element-based arc-reactor (.reactor, 140px).
   Scale it to fill the 86px orb. One-shot reactorIn entrance is fine; the ring
   spins are the reactor's own slow rotation (on-brand, not a clip/overlap). */
.desktop-exclusive-orb .reactor {
  width: 140px; height: 140px;
  margin: 0; transform: translate(-50%, -50%) scale(0.6);
  position: absolute; top: 50%; left: 50%;
  /* reactorIn's keyframe `to { transform: none }` (animation-fill-mode: both)
     was overriding the centering + scale above once the 0.9s entrance finished,
     so the 140px reactor jumped off-center and overlapped the heading. Disable
     the entrance here so the static transform holds. (Ring spins live on the
     child elements, so they keep turning.) */
  animation: none;
}
.desktop-exclusive-orb::before, .desktop-exclusive-orb::after {
  content: ''; position: absolute; inset: -14px;
  border: 1px solid rgb(var(--accent-rgb) / 0.30);
  border-radius: 50%;
  animation: connOrbSpin 18s linear infinite;
}
.desktop-exclusive-orb::after {
  inset: -28px;
  border-color: rgb(var(--accent-rgb) / 0.15);
  border-style: dashed;
  animation-duration: 26s;
  animation-direction: reverse;
}
.desktop-exclusive h1 {
  font-family: var(--font-sans);
  font-size: 32px; font-weight: 800;
  letter-spacing: -0.025em; line-height: 1.1;
  margin: 0 0 14px;
  position: relative; z-index: 1;
}
.desktop-exclusive h1 .grad {
  background: linear-gradient(90deg, rgb(var(--accent-rgb)) 0%, rgb(var(--accent-rgb)) 60%, rgb(var(--accent-rgb)) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: connShimmer 5s linear infinite;
}
.desktop-exclusive p {
  font-size: 14.5px; color: var(--text-muted);
  line-height: 1.65; max-width: 460px; margin: 0 auto 28px;
  position: relative; z-index: 1;
}
.desktop-exclusive-actions {
  display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
  position: relative; z-index: 1;
}
.desktop-exclusive-actions .primary {
  background: var(--hud-accent); color: #04111a;
  border: 0; padding: 14px 28px; border-radius: 12px;
  font-family: var(--font-sans); font-weight: 700; font-size: 14px;
  cursor: pointer; text-decoration: none;
  box-shadow: none;
  transition: all 0.2s ease;
  display: inline-flex; align-items: center; gap: 8px;
}
.desktop-exclusive-actions .primary:hover {
  background: rgb(var(--accent-rgb));
  transform: translateY(-2px);
  box-shadow: none;
}
.desktop-exclusive-actions .secondary {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.15);
  color: var(--text-muted);
  padding: 14px 22px; border-radius: 12px;
  font-family: var(--font-sans); font-weight: 600; font-size: 13px;
  cursor: pointer; text-decoration: none;
  transition: all 0.15s ease;
}
.desktop-exclusive-actions .secondary:hover {
  border-color: var(--hud-accent);
  color: var(--hud-accent);
  background: rgb(var(--accent-rgb) / 0.04);
}
/* Tutor web-wall actions: two download buttons side-by-side on top, the primary
   "Continue on web →" centered below the pair (spec round-3A item 5). */
.tw-actions {
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.tw-actions .tw-download-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.tw-actions .tw-download-row .secondary { margin: 0; }
.tw-actions .primary { align-self: center; }
@media (max-width: 480px) {
  .tw-actions .tw-download-row { flex-direction: column; width: 100%; }
  .tw-actions .tw-download-row .secondary { text-align: center; }
}

.desktop-exclusive-features {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 36px;
  padding-top: 32px;
  border-top: 1px solid rgba(255,255,255,0.06);
  position: relative; z-index: 1;
}
.desktop-exclusive-feature {
  text-align: center;
}
.desktop-exclusive-feature .ico {
  font-size: 26px; margin-bottom: 8px;
  filter: none;
}
.desktop-exclusive-feature .lbl {
  font-family: var(--font-sans);
  font-size: 12.5px; font-weight: 600;
  color: var(--text);
}
.desktop-exclusive-feature .desc {
  font-size: 11px; color: var(--text-dim);
  margin-top: 3px; line-height: 1.4;
}
@media (max-width: 600px) {
  .desktop-exclusive-features { grid-template-columns: 1fr; }
  .desktop-exclusive { padding: 36px 24px 28px; margin: 40px 16px; }
}

/* ── School onboarding modal - fix steps showing all + scroll ─ */
.school-step.hidden { display: none !important; }
.modal-backdrop {
  align-items: flex-start !important;     /* allow content above the fold */
  padding: 5vh 16px !important;
  overflow-y: auto !important;            /* the backdrop itself scrolls */
  -webkit-overflow-scrolling: touch;
}
.modal, .school-modal, .mem-import-modal, .mem-view-modal {
  max-height: 90vh !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}
.school-modal { padding: 28px 26px !important; }
/* Keep Cancel / Back visible at the bottom even when the modal scrolls */
.school-actions {
  position: sticky;
  bottom: -28px;
  background: linear-gradient(180deg, transparent, #050509 35%);
  padding: 16px 0 4px;
  margin-top: 8px;
}

/* ── Credit footer - bigger, brighter, like marketing site ───── */
.credit {
  padding: 9px 6px 7px !important;
  border-top: 1px dashed rgba(255,255,255,0.06);
  font-family: var(--font-mono) !important;
  font-size: 9.5px !important;
  letter-spacing: 0.20em !important;
  text-align: center;
  opacity: 1 !important;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  line-height: 1.2;
}
.credit-line {
  display: block !important;
  font-family: var(--font-mono) !important;
  font-size: 7.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase;
  color: var(--text-dim) !important;
}
.credit-name, .credit-org {
  display: block !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 800 !important;
  font-size: 11px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase;
  margin: 0;
  line-height: 1.1;
}
.credit-name {
  background: linear-gradient(90deg, rgb(var(--accent-rgb)) 0%, #ffffff 50%, rgb(var(--accent-rgb)) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 2.5s linear infinite,
             creditDrift 4s ease-in-out infinite,
             glowPulse 2s ease-in-out infinite;
  will-change: transform, filter, background-position;
}
.credit-org {
  background: linear-gradient(90deg, rgb(var(--accent-rgb)) 0%, rgb(var(--accent-rgb)) 40%, rgb(var(--accent-rgb)) 80%, rgb(var(--accent-rgb)) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 3s linear infinite reverse,
             creditDrift 4.6s ease-in-out infinite 0.5s,
             glowPulse 2.4s ease-in-out infinite 0.3s;
  will-change: transform, filter, background-position;
}
@keyframes shimmer {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* ============================================================
   MINIMAL - final pass for calm, sleek, easy-to-use
   - Strip dashed borders, status pulses, repeating cyan tints
   - Quiet the sidebar (hide toggles + clutter)
   - Increase whitespace and type size
   - Reduce # of competing visual signals on every surface
   ============================================================ */

/* Cool down the background - drop the diagonal-stripe pattern */
.app, body {
  background: var(--bg) !important;
}
.app {
  background:
    radial-gradient(1300px 780px at 80% -180px, rgb(var(--accent-rgb) / 0.05), transparent 64%),
    var(--bg) !important;
}

/* Border weights now live in the main :root token layer (top of file) */

/* ── Sidebar: minimal & calm ─────────────────────────────────── */
.sidebar {
  background: transparent !important;
  border-right: 1px solid rgba(255,255,255,0.04) !important;
  padding: 20px 14px !important;
  gap: 14px !important;
}
.brand { border-bottom: 0 !important; padding-bottom: 6px !important; }

/* Hide the bottom sidebar toggles - they cluttered every screen.
   Reachable via Settings → Capabilities now. */
#browser-toggle,
#safesites-toggle,
#voice-out-toggle,
#theme-toggle,
.upgrade-cta,
#reset-btn {
  display: none !important;
}
/* Keep just the Desktop-App link + status + account card visible */
.sidebar-footer {
  margin-top: auto !important;
  padding-top: 14px !important;
  border-top: 1px solid rgba(255,255,255,0.04) !important;
  gap: 8px !important;
}
.download-link {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  font-size: 10.5px !important;
  letter-spacing: 0.10em !important;
  padding: 9px 10px !important;
  text-align: center;
  color: var(--text-muted) !important;
}
.download-link:hover {
  border-color: rgb(var(--accent-rgb) / 0.30) !important;
  color: var(--hud-accent) !important;
}
.status-line {
  padding: 6px 10px !important;
  font-size: 9.5px !important;
  opacity: 0.6;
}

/* Sidebar section headers - quieter, no `//` markers */
.sidebar-header {
  font-size: 9.5px !important;
  letter-spacing: 0.16em !important;
  color: var(--text-dim) !important;
  opacity: 0.7;
  padding: 14px 6px 4px !important;
}
.sidebar-header span { padding-left: 0 !important; }
.sidebar-header span::before { display: none !important; }

/* Nav items - quieter, no left-bar */
.nav-item {
  padding: 9px 12px !important;
  font-size: 11px !important;
  letter-spacing: 0.06em !important;
  border-left: 0 !important;
  border-radius: 6px !important;
  color: var(--text-muted) !important;
  transition: all 0.12s ease;
}
.nav-item:hover {
  background: rgba(255,255,255,0.03) !important;
  color: var(--text) !important;
  border-left: 0 !important;
}
.nav-item.active {
  background: rgb(var(--accent-rgb) / 0.06) !important;
  color: var(--text) !important;
  border-left: 0 !important;
}
.nav-item.active::before { display: none !important; }

/* Trial banner - tone way down */
.trial-banner {
  background: rgb(var(--accent-rgb) / 0.03) !important;
  border: 1px solid rgb(var(--accent-rgb) / 0.10) !important;
  font-size: 10px !important;
  letter-spacing: 0.06em !important;
  padding: 8px 10px !important;
}
.trial-banner::before { display: none; }

/* Account card - minimalist */
.account-card {
  background: rgba(255,255,255,0.025) !important;
  border: 1px solid rgba(255,255,255,0.05) !important;
  border-radius: 8px !important;
  padding: 9px 11px !important;
}
.account-card:hover {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgb(var(--accent-rgb) / 0.20) !important;
  box-shadow: none !important;
}
.ac-avatar { box-shadow: none !important; border-radius: 6px !important; }
.ac-name { letter-spacing: 0.01em !important; font-size: 12px !important; }
.ac-plan { font-size: 9.5px !important; opacity: 0.6; }

/* ── Topbar: cleaner ─────────────────────────────────────────── */
.topbar {
  border-bottom: 1px solid rgba(255,255,255,0.04) !important;
  backdrop-filter: blur(20px);
}
.badge.model-badge {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  color: var(--text-muted) !important;
}
.badge.model-badge:hover {
  border-color: rgb(var(--accent-rgb) / 0.25) !important;
  color: var(--text) !important;
}

/* ── Welcome screen: more breathing room, less HUD noise ────── */
/* Bottom trimmed slightly (60→48) so the welcome container no longer overflows
   the .chat viewport by ~4px at the default height (the link sat right at the fold). */
.welcome { padding: 60px 32px 48px !important; gap: 32px !important; }
.welcome .hud { display: none !important; }
.reactor { transform: scale(0.85); }
#welcome-title {
  font-size: 44px !important;
  font-weight: 700 !important;
  letter-spacing: -0.025em !important;
}
#welcome-sub {
  font-size: 11px !important;
  letter-spacing: 0.10em !important;
  color: var(--text-dim) !important;
  font-weight: 400 !important;
}
.welcome-suggestions { gap: 10px !important; }
.suggestion {
  background: rgba(255,255,255,0.02) !important;
  border: 1px solid rgba(255,255,255,0.04) !important;
  border-radius: 10px !important;
  padding: 14px 16px !important;
  transition: all 0.15s ease !important;
}
.suggestion:hover {
  background: rgb(var(--accent-rgb) / 0.04) !important;
  border-color: rgb(var(--accent-rgb) / 0.20) !important;
  box-shadow: none !important;
  transform: translateY(-1px);
}
.suggestion-icon { font-size: 18px !important; }
.suggestion-title { font-size: 13px !important; letter-spacing: 0 !important; text-transform: none !important; font-weight: 600 !important; font-family: var(--font-sans) !important; }
.suggestion-desc { font-size: 11.5px !important; letter-spacing: 0 !important; font-family: var(--font-sans) !important; color: var(--text-dim) !important; }

/* ── Composer: quieter ──────────────────────────────────────── */
.composer {
  border-top: 1px solid rgba(255,255,255,0.04) !important;
  background: transparent !important;
}
#input {
  background: rgba(255,255,255,0.025) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
}
#input:focus {
  border-color: rgb(var(--accent-rgb) / 0.30) !important;
  background: rgba(255,255,255,0.04) !important;
  box-shadow: none !important;
}
/* Composer hint - quiet helper row; keys as subtle hairline chips */
.composer-hint {
  font-size: 11px !important;
  opacity: 1 !important;
  color: var(--text-dim) !important;
  gap: 16px !important;
  margin-top: 10px !important;
  letter-spacing: 0.01em;
}
.composer-hint span { opacity: 1 !important; color: var(--text-dim) !important; }
/* Free-tier daily-usage meter (sits in the composer hint) */
.usage-meter { display: inline-flex; align-items: center; gap: 6px; }
.usage-meter .um-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--success); box-shadow: 0 0 6px var(--success); flex: none;
}
.usage-meter.urgent .um-dot { background: #f5a623; box-shadow: 0 0 6px #f5a623; }
.usage-meter strong { color: var(--text); font-weight: 700; }
.usage-meter.urgent strong { color: #f5a623; }
.usage-meter .um-up {
  background: none; border: none; padding: 0; font: inherit; font-weight: 700;
  color: var(--hud-accent); cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
}
.usage-meter .um-up:hover { opacity: 0.8; }
.composer-hint kbd {
  display: inline-block;
  vertical-align: middle;
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: 5px;
  padding: 1px 6px;
  margin: 0 2px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  line-height: 1.3;
}

/* ── Message bubbles: cleaner ────────────────────────────────── */
.msg-avatar {
  width: 28px !important; height: 28px !important;
  font-size: 11px !important;
  border-radius: 6px !important;
  box-shadow: none !important;
}
.msg-role { font-size: 12px !important; opacity: 0.85; }

/* ── Cards: uniform & quiet ─────────────────────────────────── */
.mem-atom, .task-card, .project-card, .conn-card, .pw-card, .settings-card,
.skill-card, .recent-card, .stat-card {
  background: rgba(255,255,255,0.022) !important;
  border: 1px solid rgba(255,255,255,0.05) !important;
  border-radius: 10px !important;
  transition: all 0.15s ease !important;
  box-shadow: none !important;
}
.mem-atom:hover, .task-card:hover, .project-card:hover, .conn-card:hover,
.skill-card:hover, .recent-card:hover {
  background: rgb(var(--accent-rgb) / 0.03) !important;
  border-color: rgb(var(--accent-rgb) / 0.18) !important;
  box-shadow: none !important;
  transform: translateY(-1px);
}

/* ── Settings: even calmer ──────────────────────────────────── */
.settings-tabs {
  background: transparent !important;
  border-right: 1px solid rgba(255,255,255,0.04) !important;
  padding: 18px 8px !important;
}
.settings-tab {
  padding: 9px 12px !important;
  font-size: 10.5px !important;
  letter-spacing: 0.06em !important;
  border-radius: 6px !important;
  border-left: 0 !important;
  color: var(--text-muted) !important;
}
.settings-tab:hover { background: rgba(255,255,255,0.03) !important; color: var(--text) !important; }
.settings-tab.active {
  background: rgb(var(--accent-rgb) / 0.06) !important;
  color: var(--text) !important;
  border-left: 0 !important;
  box-shadow: none !important;
}
.settings-tabs-divider {
  border-top: 1px solid rgba(255,255,255,0.04) !important;
  padding-top: 12px !important;
  margin-top: 10px;
  color: var(--text-dim) !important;
  opacity: 0.6;
  font-size: 9.5px !important;
}
.set-row {
  padding: 18px 0 !important;
  border-bottom: 1px solid rgba(255,255,255,0.03) !important;
  gap: 28px !important;
}
.set-label {
  font-family: var(--font-sans) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: -0.005em !important;
  color: var(--text) !important;
}
.set-sub {
  font-family: var(--font-sans) !important;
  font-size: 12px !important;
  letter-spacing: 0 !important;
  color: var(--text-dim) !important;
  line-height: 1.55;
}
.set-section-title {
  font-family: var(--font-mono) !important;
  font-size: 9.5px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  border-bottom: 1px solid rgba(255,255,255,0.04) !important;
  color: var(--text-dim) !important;
  margin: 32px 0 16px !important;
  padding-bottom: 10px !important;
}

/* ── Buttons: minimalist ─────────────────────────────────────── */
.primary-btn {
  background: var(--hud-accent) !important;
  color: #04111a !important;
  border-radius: 8px !important;
  font-family: var(--font-sans) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 10px 18px !important;
  box-shadow: none !important;
  transition: all 0.15s ease !important;
}
.primary-btn:hover { background: rgb(var(--accent-rgb)) !important; transform: translateY(-1px); box-shadow: none !important; }
.ghost-btn {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 8px !important;
  font-family: var(--font-sans) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  padding: 9px 14px !important;
  color: var(--text-muted) !important;
}
.ghost-btn:hover {
  border-color: rgba(255,255,255,0.20) !important;
  background: rgba(255,255,255,0.025) !important;
  color: var(--text) !important;
}

/* ── Empty states: more inviting ────────────────────────────── */
.tasks-empty, .mem-empty {
  padding: 80px 32px !important;
}
.tasks-empty h3, .mem-empty h3 {
  font-family: var(--font-sans) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}
.tasks-empty p, .mem-empty p {
  font-family: var(--font-sans) !important;
  font-size: 13.5px !important;
  color: var(--text-dim) !important;
  line-height: 1.6;
}

/* ── Modals: cleaner ────────────────────────────────────────── */
.modal {
  background: #0a0a14 !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 14px !important;
  padding: 28px !important;
}
.modal-title {
  font-family: var(--font-sans) !important;
  font-size: 20px !important;
  letter-spacing: -0.02em !important;
  font-weight: 700 !important;
}
.modal-sub {
  font-family: var(--font-sans) !important;
  font-size: 13px !important;
  letter-spacing: 0 !important;
  color: var(--text-dim) !important;
  line-height: 1.55;
}

/* ── Paywall: same calm treatment ───────────────────────────── */
.paywall-wrap {
  background: #0a0a14 !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 16px !important;
}
.paywall-wrap h2 { font-size: 26px !important; font-weight: 700 !important; }
.auth-sub { color: var(--text-dim) !important; font-size: 13.5px !important; }

/* ── Auth modal: same ───────────────────────────────────────── */
.auth-wrap {
  background: #0a0a14 !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 16px !important;
}

/* ── Pinned project row: 📌 unpin button on hover ───────────── */
.project-item { position: relative; padding-right: 32px; display: flex; align-items: center; gap: 6px; }
.project-item .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-item .pi-unpin {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%) rotate(0deg);
  width: 24px; height: 24px; border-radius: 6px; padding: 0;
  background: transparent; border: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; line-height: 1; cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s, transform 0.2s var(--ease-spring), background 0.12s;
  /* The 📌 emoji itself - slightly dimmed when idle */
  filter: grayscale(0.4) brightness(0.85);
}
.project-item:hover .pi-unpin {
  opacity: 0.6;
  transform: translateY(-50%) rotate(-12deg);    /* leaning, like it's about to fall out */
}
.project-item .pi-unpin:hover {
  opacity: 1 !important;
  filter: none;
  background: rgb(var(--accent-rgb) / 0.08);
  transform: translateY(-50%) rotate(-30deg) scale(1.1);  /* "pulled out" wobble */
}
.project-item .pi-unpin:active {
  transform: translateY(-50%) rotate(-45deg) scale(0.95);
}

/* ════════════════════════════════════════════════════════════
   HISTORY VIEW
   ════════════════════════════════════════════════════════════ */
body[data-view="history"] .view-history { display: grid; grid-template-rows: auto auto 1fr; }
.hist-bar {
  display: flex; gap: 10px; align-items: center;
  padding: 12px 32px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  flex-wrap: wrap;
}
.hist-search {
  flex: 1; min-width: 240px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--text);
  padding: 9px 14px;
  border-radius: 8px;
  font: inherit; font-size: 13px;
}
.hist-search:focus {
  outline: none;
  border-color: rgb(var(--accent-rgb) / 0.30);
  background: rgb(var(--accent-rgb) / 0.04);
}
.hist-filter {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--text-muted);
  padding: 9px 12px;
  border-radius: 8px;
  font: inherit; font-size: 12px;
  cursor: pointer;
}
.hist-list { overflow-y: auto; padding: 12px 0 60px; }

.hist-row {
  display: grid;
  grid-template-columns: 24px 1fr auto auto;
  align-items: center; gap: 16px;
  padding: 14px 32px;
  border-bottom: 1px solid rgba(255,255,255,0.025);
  cursor: pointer;
  transition: background 0.12s ease;
}
.hist-row:hover { background: rgb(var(--accent-rgb) / 0.03); }
.hist-row .ico {
  color: var(--text-dim);
  display: flex; align-items: center; justify-content: center;
}
.hist-row .title {
  font-size: 13.5px; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hist-row .meta {
  display: flex; align-items: center; gap: 8px;
}
.hist-row .project-tag {
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: 0.06em;
  background: rgb(var(--accent-rgb) / 0.08);
  color: var(--hud-accent);
  border: 1px solid rgb(var(--accent-rgb) / 0.20);
  padding: 3px 9px;
  border-radius: 999px;
  /* long class names ("ETHICS III- SPRING (2X/WK)") must not squeeze the
     1fr title column into "…" - same cap recipe as .file-tag below */
  max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hist-row .file-tag {
  font-family: var(--font-mono);
  font-size: 10.5px;
  background: rgba(255,255,255,0.04);
  color: var(--text-muted);
  border: 1px solid rgba(255,255,255,0.08);
  padding: 3px 9px;
  border-radius: 999px;
  display: inline-flex; align-items: center; gap: 5px;
  max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hist-row .when {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
  white-space: nowrap;
}
.hist-empty {
  text-align: center; padding: 80px 24px;
  color: var(--text-dim);
}
.hist-empty .ico { font-size: 40px; margin-bottom: 16px; opacity: 0.6; }
.hist-empty h3 { font-family: var(--font-sans); font-size: 18px; color: var(--text); margin: 0 0 6px; }
.hist-empty p { font-size: 13px; margin: 0; }

@media (max-width: 720px) {
  .hist-bar { padding: 12px 16px; }
  .hist-row { padding: 14px 16px; grid-template-columns: 20px 1fr auto; }
  .hist-row .meta { display: none; }
}

/* ── Sidebar credit: prominent + animated ──────────────────── */
.credit { padding: 16px 6px 6px !important; }
.credit-name {
  animation: shimmer 5s linear infinite, creditFloat 4s ease-in-out infinite !important;
}
.credit-org {
  animation: shimmer 6s linear infinite reverse, creditFloat 4s ease-in-out infinite 0.5s !important;
}
@keyframes creditFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2px); }
}
/* floaty 2D drift for the footer credit names - more visible movement */
@keyframes creditDrift {
  0%   { transform: translate(0, 0) rotate(0deg) scale(1); }
  20%  { transform: translate(3px, -3px) rotate(0.7deg) scale(1.015); }
  40%  { transform: translate(-2px, -1px) rotate(-0.6deg) scale(1); }
  60%  { transform: translate(2px, -4px) rotate(0.5deg) scale(1.02); }
  80%  { transform: translate(-3px, -1px) rotate(-0.7deg) scale(1); }
  100% { transform: translate(0, 0) rotate(0deg) scale(1); }
}

/* ── Sidebar polish ─────────────────────────────────────────── */
.sidebar {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.018) 0%, rgba(255,255,255,0.005) 100%);
  border-right: 1px solid var(--border);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.brand-name {
  letter-spacing: 0.10em;
  text-shadow: none;
}
.nav-item {
  border-radius: var(--r-md);
  transition: background var(--d-fast) var(--ease-out),
              color var(--d-fast) var(--ease-out),
              transform var(--d-fast) var(--ease-out);
  position: relative;
  overflow: hidden;
}
.nav-item:hover { background: rgba(255,255,255,0.04); transform: translateX(2px); }
.nav-item.active {
  background: linear-gradient(135deg, rgb(var(--accent-rgb) / 0.10), rgb(var(--accent-rgb) / 0.06));
  color: var(--text);
  box-shadow: none;
}
.nav-item.active::before {
  content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px;
  background: var(--grad); border-radius: 999px;
}
.nav-count {
  background: var(--bg-elev-2); color: var(--text-muted);
  font-size: 10px; font-weight: 700; padding: 2px 7px;
  border-radius: 999px; margin-left: auto;
}
.sidebar-header {
  padding: 0 6px 4px;
  font-size: 10.5px; letter-spacing: 0.12em; font-weight: 700;
  color: var(--text-dim); text-transform: uppercase;
}
.recent-chat-item { padding: 7px 10px; font-size: 12px; }
.recent-chat-item:hover { background: rgb(var(--accent-rgb) / 0.05); color: var(--text); transform: translateX(2px); }

.account-card {
  background: var(--glass-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--glass-bord);
  transition: all var(--d-base) var(--ease-out);
}
.account-card:hover {
  border-color: rgb(var(--accent-rgb) / 0.30);
  box-shadow: var(--shadow-accent);
}
.ac-avatar {
  box-shadow: 0 0 0 1px rgba(255,255,255,0.08);
}

/* ── Welcome screen polish ──────────────────────────────────── */
#welcome-title {
  letter-spacing: -0.02em;
  font-weight: 700;
}
.welcome .grad {
  background: var(--grad-text);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 6s linear infinite;
}
#welcome-sub {
  color: var(--text-muted);
  letter-spacing: 0.01em;
  font-weight: 400;
}
.suggestion {
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-bord);
  border-radius: var(--r-lg);
  transition: all var(--d-base) var(--ease-out);
}
.suggestion:hover {
  border-color: rgb(var(--accent-rgb) / 0.30);
  box-shadow: var(--shadow-accent);
}
.suggestion-title { font-weight: 600; letter-spacing: -0.005em; }
.suggestion-desc { color: var(--text-dim); }

.bl-line {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-dim);
  letter-spacing: 0.02em;
}
.bl-ok { color: var(--success); font-weight: 600; }

/* ── Composer / chat polish ─────────────────────────────────── */
.composer {
  background: var(--glass-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--glass-bord);
}
#send-btn {
  background: var(--accent-blue);
  border-radius: 50%;
  box-shadow: 0 4px 14px rgb(var(--accent-rgb) / 0.45), 0 0 22px rgb(var(--accent-rgb) / 0.40);
  transition: transform var(--d-fast) var(--ease-spring),
              box-shadow var(--d-base) var(--ease-out);
}
#send-btn:hover { transform: scale(1.07); box-shadow: 0 4px 16px rgb(var(--accent-rgb) / 0.55), 0 0 30px rgb(var(--accent-rgb) / 0.62); }
#send-btn:active { transform: scale(0.93); }

.msg {
  animation: msgIn var(--d-slow) var(--ease-out) both;
}
/* @keyframes msgIn defined once near top (identical) - dedup'd here. */
.msg-avatar {
  font-weight: 800;
  letter-spacing: 0;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.06), 0 4px 14px rgba(0,0,0,0.30);
}
.msg.assistant .msg-avatar {
  background: var(--grad);
  color: #04111a;
}
.msg.user .msg-avatar {
  background: var(--bg-elev-3);
  border: 1px solid var(--border);
  color: var(--text-muted);
}
/* Role label - small, calm, muted (sentence case, no HUD uppercase). */
.msg-role {
  font-size: 12px; font-weight: 600;
  letter-spacing: -0.005em; text-transform: none;
  color: var(--text-muted);
}
.msg.assistant .msg-role {
  background: none;
  -webkit-background-clip: initial; background-clip: initial;
  -webkit-text-fill-color: var(--text-muted);
  color: var(--text-muted);
}
.msg-content { line-height: 1.68; color: var(--text); letter-spacing: -0.003em; }
.msg-content code:not(pre code) {
  background: rgb(var(--accent-rgb) / 0.10);
  color: var(--accent);
  padding: 1px 6px;
  border-radius: var(--r-xs);
  font-size: 0.88em;
  font-family: var(--font-mono);
}
.msg-content pre {
  background: var(--bg-elev-1) !important;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 14px 16px;
  box-shadow: var(--shadow-sm);
}

/* ── Paywall: 5-card refinement w/ featured Pro plan ──────── */
.paywall-overlay {
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}
.paywall-wrap {
  background: linear-gradient(180deg, var(--glass-bg), rgba(15,15,24,0.92));
  border: 1px solid var(--glass-bord);
  border-radius: var(--r-2xl);
  box-shadow: var(--shadow-xl);
  padding: 32px 38px;
}
.paywall-wrap h2 {
  font-size: 26px; font-weight: 800;
  letter-spacing: -0.02em; margin-bottom: 4px;
}
.billing-toggle {
  box-shadow: var(--shadow-sm);
}
.pw-card {
  background: linear-gradient(180deg, var(--bg-elev-1), rgba(15,15,24,0.9));
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  transition: transform var(--d-base) var(--ease-out),
              border-color var(--d-base) var(--ease-out),
              box-shadow var(--d-base) var(--ease-out);
  position: relative;
  /* visible (not hidden) so the absolutely-positioned "MOST POPULAR" ribbon that
     sits at top:-11px isn't clipped off the top of the card. */
  overflow: visible;
}
.pw-card::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(400px 200px at 50% -50%, rgb(var(--accent-rgb) / 0.06), transparent 70%);
  pointer-events: none;
}
.pw-card:hover {
  transform: translateY(-3px);
  border-color: rgb(var(--accent-rgb) / 0.30);
  box-shadow: var(--shadow-md);
}
.pw-card.featured {
  background: linear-gradient(180deg, rgb(var(--accent-rgb) / 0.06), rgba(15,15,24,0.92));
  border-color: rgb(var(--accent-rgb) / 0.30);
  box-shadow: var(--shadow-md);
  transform: scale(1.04);
  z-index: 1;
}
.pw-card.featured::before {
  background: radial-gradient(400px 200px at 50% -50%, rgb(var(--accent-rgb) / 0.15), transparent 70%);
}
.pw-card.featured:hover { transform: scale(1.06) translateY(-2px); }
.pw-card.pro:not(.featured) {
  border-color: rgb(var(--accent-rgb) / 0.20);
}
.pw-name {
  background: var(--grad-text);
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  font-weight: 800;
  letter-spacing: 0.10em;
}
.pw-price { letter-spacing: -0.02em; font-weight: 800; }
.pw-card .primary-btn {
  background: var(--bg-elev-3);
  color: var(--text);
  border-radius: var(--r-md);
  transition: all var(--d-fast) var(--ease-out);
}
.pw-card .primary-btn:hover { background: var(--bg-elev-4); transform: translateY(-1px); }
.pw-card.featured .primary-btn {
  background: var(--hud-accent);
  color: #04111a;
  font-weight: 700;
  box-shadow: none;
}
.pw-card.featured .primary-btn:hover {
  box-shadow: none;
  transform: translateY(-2px);
}
.pw-tag {
  font-weight: 800; letter-spacing: 0.06em;
  box-shadow: var(--shadow-sm);
}
.pw-card.featured .pw-tag {
  background: var(--hud-accent); color: #04111a;
  animation: tagPulse 2.4s var(--ease-in-out) infinite;
}
@keyframes tagPulse { 0%,100%{box-shadow: none;} 50%{box-shadow: none;} }

/* ── Auth modal: glass + better focus ──────────────────────── */
.auth-overlay { backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }
.auth-wrap {
  background: linear-gradient(180deg, var(--glass-bg), rgba(15,15,24,0.95));
  border: 1px solid var(--glass-bord);
  border-radius: var(--r-2xl);
  box-shadow: var(--shadow-xl);
}
.auth-wrap input {
  background: var(--bg-elev-1);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  transition: border-color var(--d-fast) var(--ease-out),
              box-shadow var(--d-fast) var(--ease-out),
              background var(--d-fast) var(--ease-out);
}
.auth-wrap input:focus {
  border-color: var(--border-focus);
  box-shadow: none;
  background: var(--bg-elev-2);
}
.auth-wrap .primary-btn {
  background: var(--grad);
  color: #04111a;
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: var(--shadow-accent);
  transition: all var(--d-fast) var(--ease-out);
}
.auth-wrap .primary-btn:hover { transform: translateY(-1px); box-shadow: none; }

/* ── Tutorial slides: smoother transitions, refined typography ─ */
.tutorial-overlay { backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.tut-wrap {
  background: linear-gradient(180deg, var(--glass-bg), rgba(15,15,24,0.95));
  border: 1px solid var(--glass-bord);
  border-radius: var(--r-2xl);
  box-shadow: var(--shadow-xl);
}
.tut-icon {
  font-size: 56px;
  filter: none;
  animation: floatY 3s var(--ease-in-out) infinite;
}
@keyframes floatY { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-6px);} }
.tut-title {
  font-size: 24px; font-weight: 800; letter-spacing: -0.02em;
}
.tut-text {
  color: var(--text-muted); line-height: 1.65; letter-spacing: -0.003em;
}
.tut-dots .dot {
  background: rgba(255,255,255,0.10);
  transition: all var(--d-base) var(--ease-out);
}
.tut-dots .dot.on {
  background: var(--grad);
  width: 22px; border-radius: 999px;
  box-shadow: none;
}

/* ── Settings polish ────────────────────────────────────────── */
.settings-tab.active {
  background: linear-gradient(135deg, rgb(var(--accent-rgb) / 0.10), rgb(var(--accent-rgb) / 0.06));
  box-shadow: none;
}
.set-input, .set-textarea, .set-readonly {
  transition: border-color var(--d-fast) var(--ease-out),
              box-shadow var(--d-fast) var(--ease-out),
              background var(--d-fast) var(--ease-out);
}
.set-input:focus, .set-textarea:focus {
  box-shadow: none;
  background: var(--bg-elev-2);
}
.set-toggle { transition: all var(--d-base) var(--ease-out); }
.set-toggle.on { box-shadow: none; }

/* ── Cards everywhere (Memories, Tasks, Projects) ───────────── */
.mem-atom, .task-card, .project-card, .conn-card {
  background: var(--glass-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--glass-bord);
  transition: transform var(--d-base) var(--ease-out),
              border-color var(--d-base) var(--ease-out),
              box-shadow var(--d-base) var(--ease-out);
}
.mem-atom:hover, .task-card:hover, .project-card:hover, .conn-card:hover {
  border-color: rgb(var(--accent-rgb) / 0.25);
  box-shadow: var(--shadow-md);
}

/* ── Buttons: refined ──────────────────────────────────────── */
.primary-btn {
  background: var(--grad);
  color: #04111a;
  font-weight: 700;
  letter-spacing: 0.005em;
  padding: 10px 18px;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-accent);
  transition: all var(--d-fast) var(--ease-out);
}
.primary-btn:hover { transform: translateY(-1px); box-shadow: none; }
.primary-btn:active { transform: translateY(0); }

.ghost-btn {
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  transition: all var(--d-fast) var(--ease-out);
}
.ghost-btn:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.18);
  color: var(--text);
}

/* ── Trial banner: subtle, premium ──────────────────────────── */
.trial-banner {
  background: linear-gradient(135deg, rgba(116,198,154,0.10), rgb(var(--accent-rgb) / 0.06));
  border: 1px solid rgba(116,198,154,0.25);
  border-radius: var(--r-md);
  font-weight: 600;
  letter-spacing: 0.005em;
  box-shadow: var(--shadow-sm);
}

/* ── Page titles: consistent typography ─────────────────────── */
.page-title {
  font-size: 22px; font-weight: 700; letter-spacing: -0.02em;
}
.topbar { backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }

/* ════════════════════════════════════════════════════════════
   MOBILE DRAWER  ·  off-canvas sidebar + hamburger + scrim
   (created dynamically by app.js; styled here)
   ════════════════════════════════════════════════════════════ */

/* Hamburger trigger - desktop: hidden; mobile: fixed top-left */
.mobile-menu-btn {
  display: none;
  position: fixed; top: var(--s-3); left: var(--s-3); z-index: 1002;
  width: 42px; height: 42px;
  align-items: center; justify-content: center;
  border-radius: var(--r-md);
  color: var(--text);
  background: var(--glass-bg);
  border: 1px solid var(--border-strong);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  transition: border-color var(--d-fast) var(--ease-out),
              box-shadow var(--d-fast) var(--ease-out),
              transform var(--d-fast) var(--ease-out);
}
.mobile-menu-btn:hover { border-color: var(--border-focus); box-shadow: var(--glow-accent); }
.mobile-menu-btn:active { transform: scale(0.94); }
.mobile-menu-btn svg { width: 20px; height: 20px; }

/* Scrim behind the open drawer */
.nav-scrim {
  position: fixed; inset: 0; z-index: 999;
  background: rgba(2,4,8,0.62);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none;
  transition: opacity var(--d-base) var(--ease-out);
}
body.nav-open .nav-scrim { opacity: 1; pointer-events: auto; }

@media (max-width: 760px) {
  /* show the trigger (but never over a full-screen auth/paywall overlay) */
  .mobile-menu-btn { display: flex; }
  body:has(.auth-overlay:not(.hidden)) .mobile-menu-btn { display: none; }

  /* topbar content clears the fixed hamburger */
  .topbar { padding-left: 60px; }

  /* sidebar → off-canvas drawer */
  .sidebar {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 1000;
    width: min(86vw, var(--sidebar-w));
    background: var(--bg-elev-1);
    border-right: 1px solid var(--border-strong);
    transform: translateX(-100%);
    transition: transform var(--d-base) var(--ease-out);
    overflow-y: auto;
    will-change: transform;
  }
  body.nav-open .sidebar { transform: translateX(0); box-shadow: var(--shadow-lg); }
}

/* ── Intentional sidebar empty states (Pinned / Recent / Upcoming) ── */
.sidebar-empty {
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  margin: 2px 0;
  font-size: var(--fs-xs);
  color: var(--text-dim);
  border: 1px dashed var(--border);
  border-radius: var(--r-md);
  line-height: var(--leading-normal);
}
.sidebar-empty .se-ico { opacity: 0.7; flex-shrink: 0; }
.recent-chats .empty {
  font-size: var(--fs-xs); color: var(--text-dim);
  padding: var(--s-2) var(--s-3);
  border: 1px dashed var(--border); border-radius: var(--r-md); margin: 2px 0;
}

/* ════════════════════════════════════════════════════════════
   QUICK-ACTION CARDS + COMPOSER  ·  polish pass
   ════════════════════════════════════════════════════════════ */

/* Equal-height cards, consistent icon tile, real hover lift + accent glow */
.suggestion-grid { grid-auto-rows: 1fr; }
.suggestion {
  min-height: 66px;
  cursor: pointer;
  transition: transform var(--d-fast) var(--ease-out),
              border-color var(--d-fast) var(--ease-out),
              box-shadow var(--d-fast) var(--ease-out),
              background var(--d-fast) var(--ease-out);
}
.suggestion:hover {
  border-color: var(--border-focus);
  box-shadow: var(--glow-accent);
  transform: translateY(-3px);
}
.suggestion:active { transform: translateY(-1px); }
.suggestion-icon {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  background: var(--grad-soft);
  border: 1px solid var(--border);
  flex-shrink: 0;
  line-height: 1;
}

/* Composer: stronger focus glow + send-button glow on the unified tokens */
.composer-inner:focus-within {
  border-color: var(--border-focus);
  box-shadow: var(--glow-accent), 0 8px 32px rgba(0,0,0,0.22);
}
.send-btn:hover { box-shadow: var(--glow-accent); }

/* Locked ("Subscribe to start chatting") state - intentional, not an afterthought */
.composer.gated .composer-inner { opacity: 0.7; filter: saturate(0.6); }
.composer.gated #input { cursor: not-allowed; }
.composer.gated .send-btn { pointer-events: none; }
.composer-unlock {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-4);
  font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.01em;
  color: #04121a;
  background: var(--grad);
  border-radius: var(--r-full);
  box-shadow: var(--glow-accent);
  cursor: pointer;
  transition: transform var(--d-fast) var(--ease-out), box-shadow var(--d-fast) var(--ease-out);
}
.composer-unlock:hover { transform: translateY(-1px); }
.composer-unlock:active { transform: none; }

/* ════════════════════════════════════════════════════════════
   ACCESSIBILITY  ·  keyboard focus rings + no-layout-shift
   ════════════════════════════════════════════════════════════ */
/* Visible focus ring for keyboard users only (mouse clicks stay clean) */
:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
:focus:not(:focus-visible) { outline: none; }
/* The composer/project textareas already glow via their container - no inner ring */
#input:focus-visible, #project-input:focus-visible { outline: none; }

/* Reserve the boot-log block height so the greeting doesn't jump as lines type in */
.boot-log { min-height: 94px; }
@media (max-width: 760px) { .boot-log { min-height: 78px; } }

/* ===================================================== */
/* YOUR VOICE - learn & write in the user's own style    */
/* ===================================================== */
body[data-view="voice"] .view-voice { display: grid; grid-template-rows: auto 1fr; }
.view-voice .topbar { padding-left: 28px; padding-right: 28px; }

.voice-page {
  max-width: 720px;
  width: 100%;
  margin: 0 auto;
  padding: 26px 28px 80px;
  overflow-y: auto;
}
.voice-hero {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 6px 0 8px;
}
.voice-hero .grad {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.voice-sub {
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.55;
  margin: 0 0 24px;
  max-width: 600px;
}
.voice-sub em { color: var(--text); font-style: normal; font-weight: 600; }

.voice-card {
  background: var(--bg-elev-1);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px 18px 20px;
  margin-bottom: 16px;
}
.voice-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.voice-card-head h2 {
  font-size: 15px;
  font-weight: 650;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}
.voice-step {
  display: inline-grid;
  place-items: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--grad);
  color: #04121a;
  font-size: 12px;
  font-weight: 800;
}
.voice-meter { font-size: 12px; color: var(--text-dim); white-space: nowrap; }
.voice-meter.ok { color: var(--success); }
.voice-meter #voice-words { color: var(--text); font-weight: 700; }

.voice-add textarea,
#voice-input {
  width: 100%;
  min-height: 96px;
  resize: vertical;
  background: var(--bg-elev-2);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  padding: 12px 13px;
  color: var(--text);
  font: inherit;
  font-size: 13.5px;
  line-height: 1.5;
}
.voice-add textarea:focus,
#voice-input:focus,
#voice-instructions:focus,
#voice-sample-title:focus { outline: none; border-color: var(--border-focus); }
.voice-add-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
#voice-sample-title,
#voice-instructions {
  flex: 1;
  background: var(--bg-elev-2);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  padding: 9px 12px;
  color: var(--text);
  font: inherit;
  font-size: 13px;
}
#voice-instructions { width: 100%; margin-top: 10px; }
.voice-add-actions { display: flex; align-items: center; gap: 8px; }
.voice-upload-btn { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }

.voice-samples { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.voice-sample {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: 11px;
  padding: 10px 12px;
}
.vs-main { flex: 1; min-width: 0; }
.vs-title { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vs-preview { font-size: 12px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.vs-meta { font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.vs-remove {
  background: none; border: none; color: var(--text-dim);
  cursor: pointer; font-size: 13px; padding: 4px 6px; border-radius: 6px; line-height: 1;
}
.vs-remove:hover { color: var(--danger); background: rgba(255,255,255,0.04); }

.voice-empty { color: var(--text-dim); font-size: 13px; line-height: 1.5; margin: 4px 0 0; }
.voice-empty.sm { font-size: 12.5px; text-align: center; padding: 14px; }

.voice-report-wrap { margin-top: 4px; }
.voice-skill-chip {
  display: block;
  background: var(--grad-soft);
  border: 1px solid rgb(var(--accent-rgb) / 0.25);
  border-radius: 11px;
  padding: 10px 13px;
  font-size: 13px;
  color: var(--text);
  margin-bottom: 14px;
}
.voice-skill-chip a { color: var(--accent); text-decoration: none; font-weight: 600; }
.voice-skill-chip a:hover { text-decoration: underline; }
.vsc-dot { margin-right: 4px; }
.voice-report { font-size: 13.5px; line-height: 1.6; color: var(--text); }
.voice-report h1, .voice-report h2, .voice-report h3 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
  margin: 16px 0 6px;
}
.voice-report h1:first-child, .voice-report h2:first-child { margin-top: 0; }
.voice-report p { margin: 0 0 10px; color: var(--text-muted); }
.voice-report strong { color: var(--text); }
.voice-report ul, .voice-report ol { margin: 0 0 10px; padding-left: 20px; color: var(--text-muted); }
.voice-report li { margin: 3px 0; }
.voice-report blockquote {
  border-left: 2px solid rgb(var(--accent-rgb) / 0.4);
  margin: 8px 0;
  padding: 2px 0 2px 12px;
  color: var(--text-dim);
  font-style: italic;
}

#voice-analyze-btn.working { animation: voicePulse 1.2s ease-in-out infinite; }
@keyframes voicePulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }

.voice-use { transition: opacity 0.2s; }
.voice-use.locked { opacity: 0.55; }
.voice-use.locked #voice-input,
.voice-use.locked #voice-instructions,
.voice-use.locked #voice-run-btn,
.voice-use.locked .voice-mode { pointer-events: none; }
.voice-locked-note { font-size: 12px; color: var(--text-dim); }
.voice-use:not(.locked) .voice-locked-note { display: none; }

.voice-mode {
  display: inline-flex; gap: 4px;
  background: var(--bg-elev-2); padding: 3px; border-radius: 9px;
  border: 1px solid var(--border);
}
.voice-mode-btn {
  background: none; border: none; color: var(--text-muted);
  padding: 5px 12px; border-radius: 7px; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.voice-mode-btn.selected { background: var(--bg-elev-4); color: var(--text); }

.voice-use-actions { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.voice-use-actions .primary-btn { margin-left: auto; }

.voice-output-wrap { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 14px; }
.voice-output-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-dim); margin-bottom: 8px;
}
.voice-output {
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text);
  white-space: pre-wrap;
  max-height: 420px;
  overflow-y: auto;
}
.voice-foot { font-size: 11.5px; color: var(--text-dim); text-align: center; margin: 18px 0 0; line-height: 1.5; }

/* Connect AI card (Settings → General, packaged desktop app) */
.set-ai-connect {
  border: 1px solid rgb(var(--accent-rgb) / 0.25);
  background: var(--grad-soft);
  border-radius: 12px;
  padding: 14px 16px;
}
.set-ai-connect .set-hint { margin: 6px 0 0; font-size: 12.5px; color: var(--text-muted); line-height: 1.5; }
.set-ai-connect .set-hint a { color: var(--accent); text-decoration: none; }
.set-ai-connect .set-hint a:hover { text-decoration: underline; }
.ai-status-pill { font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 20px; margin-left: 8px; vertical-align: middle; }
.ai-status-pill.ok { color: var(--success); border: 1px solid rgba(116,198,154,0.45); }
.ai-status-pill.bad { color: var(--warning); border: 1px solid rgba(214,168,95,0.45); }
.ai-key-row { display: flex; gap: 8px; margin-top: 10px; }
.ai-key-row .set-input { flex: 1; }

/* Voice: learn from your connectors */
.voice-import { margin-top: 16px; text-align: center; }
.voice-import-or { display: block; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 12px; }
.voice-import-btn { display: inline-flex; align-items: center; gap: 8px; }
.voice-import-hint { display: block; font-size: 11.5px; color: var(--text-dim); margin: 10px auto 0; line-height: 1.5; max-width: 440px; }

/* ════════════════════════════════════════════════════════════
   POLISH PASS - Autopilot · Tasks · Connectors
   Restrained, additive micro-interactions on the trust-critical
   surfaces. Uses existing tokens only; the global reduced-motion
   guard (above) already neutralizes these transitions/transforms.
   ════════════════════════════════════════════════════════════ */

/* - Autopilot: unify easing + tactile press feedback - */
.ap-card { transition: transform var(--d-base) var(--ease-out), border-color var(--d-base) var(--ease-out), box-shadow var(--d-base) var(--ease-out); }
.ap-card:active { transform: translateY(-1px); }
.ap-row, .ap-mode-btn { transition: transform var(--d-fast) var(--ease-out), border-color var(--d-fast) var(--ease-out), background var(--d-fast) var(--ease-out), color var(--d-fast) var(--ease-out); }
.ap-row:active { transform: scale(0.992); }
/* selected destination reads as deliberate, not just hovered */
.ap-row.on { box-shadow: inset 0 0 0 1px rgb(var(--accent-rgb) / 0.18); }
.ap-mode-btn:active { transform: translateY(0.5px); }
/* the commit button gets a confident lift + settle */
.ap-actions .ap-submit { transition: transform var(--d-fast) var(--ease-out), box-shadow var(--d-fast) var(--ease-out), filter var(--d-fast) var(--ease-out); }
.ap-actions .ap-submit:hover:not(:disabled) { transform: translateY(-1px); }
.ap-actions .ap-submit:active:not(:disabled) { transform: translateY(0); }
/* emergency stop stays reassuringly responsive */
.ap-stop-btn:active { transform: scale(0.97); }

/* - Tasks: match the system easing + press state - */
.task-card { transition: transform var(--d-base) var(--ease-out), border-color var(--d-base) var(--ease-out), box-shadow var(--d-base) var(--ease-out); }
.task-card:hover { box-shadow: 0 10px 30px rgba(0,0,0,0.22); }
.task-card:active { transform: translateY(-1px); }
.task-actions button, .task-actions a { transition: transform var(--d-fast) var(--ease-out), border-color var(--d-fast) var(--ease-out), background var(--d-fast) var(--ease-out), color var(--d-fast) var(--ease-out), box-shadow var(--d-fast) var(--ease-out); }
.task-actions button:active, .task-actions a:active { transform: translateY(0.5px); }
/* "Do it" (the Autopilot trigger from a task) gets a touch more presence on hover */
.task-actions .do-it:hover { box-shadow: none; }
.task-actions .do-it:active { transform: translateY(0); }

/* - Connectors: tactile press to complement the existing hover lift - */
.conn-tile:active { transform: translateY(-1px); }
.conn-tile-actions button, .conn-tile-actions a { transition: transform var(--d-fast) var(--ease-out), border-color var(--d-fast) var(--ease-out), background var(--d-fast) var(--ease-out), color var(--d-fast) var(--ease-out), box-shadow var(--d-fast) var(--ease-out); }
.conn-tile-actions button:active:not(:disabled), .conn-tile-actions a:active { transform: translateY(0.5px); }

/* ════════════════════════════════════════════════════════════
   LIGHT THEME - OVERRIDE LAYER
   Placed last so it wins source-order ties against the earlier
   "minimal pass" blocks that hardcode dark / white-alpha values
   with !important. Only neutralizes what breaks on a light bg
   (dark surfaces, white-alpha borders→invisible, dark-on-light /
   light-on-light text). Accent/status/gradient identity is left
   untouched. Mirrors !important only where the target rule has it.
   ════════════════════════════════════════════════════════════ */

/* ── App canvas + FX - undo the hardcoded #050509 ───────────── */
body[data-theme="light"].app,
body[data-theme="light"] .app,
body[data-theme="light"] {
  background: var(--bg) !important;
}
body[data-theme="light"] .app {
  background:
    radial-gradient(1300px 760px at 78% -150px, rgb(var(--accent-rgb) / 0.06), transparent 62%),
    var(--bg) !important;
}
/* The full-screen scanline/vignette tints are tuned for black - soften on light */
body[data-theme="light"] .fx-scan { opacity: 0.25; }
body[data-theme="light"] .fx-vignette {
  background: radial-gradient(ellipse at center, transparent 62%, rgba(40,50,90,0.07) 100%);
}

/* ── Sidebar / topbar / composer chrome ─────────────────────── */
body[data-theme="light"] .sidebar {
  background: rgba(255,255,255,0.55) !important;
  border-right: 1px solid var(--border) !important;
}
body[data-theme="light"] .sidebar-footer { border-top: 1px solid var(--border) !important; }
body[data-theme="light"] .topbar {
  background: rgba(255,255,255,0.72) !important;
  border-bottom: 1px solid var(--border) !important;
}
body[data-theme="light"] .composer {
  background: rgba(255,255,255,0.70) !important;
  border-top: 1px solid var(--border) !important;
}

/* Nav items + section headers */
body[data-theme="light"] .nav-item:hover { background: rgb(var(--accent-rgb) / 0.07) !important; }
body[data-theme="light"] .nav-item.active { background: rgb(var(--accent-rgb) / 0.10) !important; }
body[data-theme="light"] .settings-tab:hover { background: rgb(var(--accent-rgb) / 0.07) !important; }
body[data-theme="light"] .settings-tab.active { background: rgb(var(--accent-rgb) / 0.10) !important; }

/* Download link + model badge (transparent w/ white-alpha border) */
body[data-theme="light"] .download-link {
  border: 1px solid var(--border-strong) !important;
}
body[data-theme="light"] .download-link:hover { border-color: rgb(var(--accent-rgb) / 0.40) !important; }
body[data-theme="light"] .badge.model-badge { border: 1px solid var(--border-strong) !important; }
body[data-theme="light"] .badge.model-badge:hover { border-color: rgb(var(--accent-rgb) / 0.40) !important; }

/* Account card */
body[data-theme="light"] .account-card {
  background: #ffffff !important;
  border: 1px solid var(--border-strong) !important;
}
body[data-theme="light"] .account-card:hover {
  background: var(--bg-elev-2) !important;
  border-color: rgb(var(--accent-rgb) / 0.30) !important;
}

/* ── Composer input ─────────────────────────────────────────── */
body[data-theme="light"] #input {
  background: #ffffff !important;
  border: 1px solid var(--border-strong) !important;
}
body[data-theme="light"] #input:focus {
  border-color: rgb(var(--accent-rgb) / 0.55) !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / 0.12) !important;
}
body[data-theme="light"] .composer-hint kbd {
  background: var(--bg-elev-2);
  border: 1px solid var(--border-strong);
}

/* ── Welcome suggestions ────────────────────────────────────── */
body[data-theme="light"] .suggestion {
  background: #ffffff !important;
  border: 1px solid var(--border-strong) !important;
}
body[data-theme="light"] .suggestion:hover {
  background: rgb(var(--accent-rgb) / 0.06) !important;
  border-color: rgb(var(--accent-rgb) / 0.30) !important;
}

/* ── Generic cards (memories/tasks/projects/connectors/skills…) ─ */
body[data-theme="light"] .mem-atom,
body[data-theme="light"] .task-card,
body[data-theme="light"] .project-card,
body[data-theme="light"] .conn-card,
body[data-theme="light"] .pw-card,
body[data-theme="light"] .settings-card,
body[data-theme="light"] .skill-card,
body[data-theme="light"] .recent-card,
body[data-theme="light"] .stat-card {
  background: #ffffff !important;
  border: 1px solid var(--border-strong) !important;
}
body[data-theme="light"] .mem-atom:hover,
body[data-theme="light"] .task-card:hover,
body[data-theme="light"] .project-card:hover,
body[data-theme="light"] .conn-card:hover,
body[data-theme="light"] .skill-card:hover,
body[data-theme="light"] .recent-card:hover {
  background: rgb(var(--accent-rgb) / 0.05) !important;
  border-color: rgb(var(--accent-rgb) / 0.28) !important;
}
body[data-theme="light"] .task-card:hover { box-shadow: var(--shadow-md) !important; }

/* ── Settings rows / dividers / section titles ──────────────── */
body[data-theme="light"] .settings-tabs { border-right: 1px solid var(--border) !important; }
body[data-theme="light"] .settings-tabs-divider { border-top: 1px solid var(--border) !important; }
body[data-theme="light"] .set-row { border-bottom: 1px solid var(--border) !important; }
body[data-theme="light"] .set-section-title { border-bottom: 1px solid var(--border) !important; }

/* ── Buttons (ghost variants used white-alpha borders) ──────── */
body[data-theme="light"] .ghost-btn { border: 1px solid var(--border-strong) !important; }
body[data-theme="light"] .ghost-btn:hover {
  border-color: rgb(var(--accent-rgb) / 0.40) !important;
  background: rgb(var(--accent-rgb) / 0.05) !important;
}

/* ── Modals / paywall / auth (hardcoded #0a0a14 panels) ─────── */
body[data-theme="light"] .modal {
  background: #ffffff !important;
  border: 1px solid var(--border-strong) !important;
  box-shadow: var(--shadow-lg) !important;
}
body[data-theme="light"] .paywall-overlay { background: rgba(238,241,248,0.78) !important; }
body[data-theme="light"] .paywall-wrap {
  background: #ffffff !important;
  border: 1px solid var(--border-strong) !important;
  box-shadow: var(--shadow-xl) !important;
}
body[data-theme="light"] .auth-wrap {
  background: #ffffff !important;
  border: 1px solid var(--border-strong) !important;
  box-shadow: var(--shadow-xl) !important;
}

/* Paywall cards */
body[data-theme="light"] .pw-card {
  background: #ffffff !important;
  border: 1px solid var(--border-strong) !important;
}
body[data-theme="light"] .pw-card.pro:not(.featured) {
  background: #ffffff !important;
  border-color: var(--border-strong) !important;
}
body[data-theme="light"] .pw-card:hover {
  background: rgb(var(--accent-rgb) / 0.05) !important;
  border-color: rgb(var(--accent-rgb) / 0.28) !important;
}
body[data-theme="light"] .pw-card.featured {
  background: linear-gradient(180deg, rgb(var(--accent-rgb) / 0.08), #ffffff) !important;
  border-color: rgb(var(--accent-rgb) / 0.40) !important;
  box-shadow: var(--shadow-md) !important;
}
/* Paywall CTA ghost button + billing toggle (white-alpha borders) */
body[data-theme="light"] .pw-card .primary-btn {
  border: 1px solid var(--border-strong) !important;
}
body[data-theme="light"] .pw-card .primary-btn:hover {
  background: rgb(var(--accent-rgb) / 0.06) !important;
}
body[data-theme="light"] .billing-toggle {
  background: var(--bg-elev-2) !important;
  border: 1px solid var(--border-strong) !important;
}
body[data-theme="light"] .bt-save { background: rgb(var(--accent-rgb) / 0.12) !important; }
/* Plan-hero ::before chip sat on a dark #050509 swatch */
body[data-theme="light"] .plan-hero::before { background: var(--bg-elev-1) !important; }

/* Trial banner */
body[data-theme="light"] .trial-banner {
  background: rgb(var(--accent-rgb) / 0.07) !important;
  border: 1px solid rgb(var(--accent-rgb) / 0.20) !important;
}

/* ── Chat: code blocks + inline code ────────────────────────── */
body[data-theme="light"] .msg-content pre {
  background: var(--bg-elev-2) !important;
  border: 1px solid var(--border-strong);
}
body[data-theme="light"] .msg.user .msg-avatar { background: var(--bg-elev-3) !important; color: var(--text); }
/* avatar 1px ring was a near-white inner glow - make it a hairline */
body[data-theme="light"] .msg-avatar { box-shadow: 0 0 0 1px var(--border), 0 4px 12px rgba(40,50,90,0.12); }

/* ── Connectors view ────────────────────────────────────────── */
body[data-theme="light"] .conn-hero { border-bottom: 1px solid var(--border); }
body[data-theme="light"] .conn-tile {
  background: #ffffff;
  border: 1px solid var(--border-strong);
}
body[data-theme="light"] .conn-tile:hover {
  box-shadow: 0 12px 36px rgba(40,50,90,0.14);
}
/* icon tile: blend accent into a light base, not white */
body[data-theme="light"] .conn-tile-icon {
  background: linear-gradient(135deg, var(--accent-color, rgb(var(--accent-rgb) / 0.22)), var(--bg-elev-2));
  box-shadow: 0 4px 14px rgba(40,50,90,0.10);
}
body[data-theme="light"] .conn-tile-meta { border-top: 1px solid var(--border); }
body[data-theme="light"] .conn-tile-actions button,
body[data-theme="light"] .conn-tile-actions a { border: 1px solid var(--border-strong); }
body[data-theme="light"] .conn-tile-actions button:hover:not(:disabled) {
  background: rgb(var(--accent-rgb) / 0.06);
}
body[data-theme="light"] .conn-tile-actions button.primary[disabled] {
  border-color: var(--border-strong);
}
body[data-theme="light"] .conn-pill.muted {
  background: rgba(20,22,40,0.05);
  border-color: var(--border-strong);
}

/* Tasks-CTA ghost button (white-alpha border) */
body[data-theme="light"] .tasks-cta-btn.ghost { border: 1px solid var(--border-strong) !important; }
body[data-theme="light"] .tasks-cta-btn.ghost:hover {
  background: rgb(var(--accent-rgb) / 0.06) !important;
  border-color: rgb(var(--accent-rgb) / 0.30) !important;
}

/* gray subject chip used the (now light) --bg-elev-2 - give it a visible tint */
body[data-theme="light"] .task-subject.subj-gray {
  background: rgba(20,22,40,0.06) !important;
}

/* spinner ring was white-alpha (invisible on light) */
body[data-theme="light"] .btn-spin { border: 2px solid rgba(20,22,40,0.20); border-top-color: currentColor; }

/* ============================================================
   FINAL CALM HARDENING - last word in the cascade.
   Kill the leftover shimmer/float/glow on the footer credit +
   brand wordmark so nothing animates or rainbows. Solid text only.
   ============================================================ */
.brand-name {
  background: none !important;
  background-image: none !important;
  -webkit-text-fill-color: var(--text) !important;
  color: var(--text) !important;
  animation: none !important;
  filter: none !important;
}
.credit-name {
  background: none !important;
  background-image: none !important;
  -webkit-text-fill-color: var(--text-dim) !important;
  color: var(--text-dim) !important;
  animation: none !important;
  filter: none !important;
  will-change: auto !important;
}
.credit-org {
  background: none !important;
  background-image: none !important;
  -webkit-text-fill-color: var(--text-faint) !important;
  color: var(--text-faint) !important;
  animation: none !important;
  filter: none !important;
  will-change: auto !important;
}
.credit-line { -webkit-text-fill-color: var(--text-faint); color: var(--text-faint); }
/* model names in the picker - solid, no shimmer/jitter (covers any later copy) */
.m-name, .m-opus, .m-haiku, .m-sonnet {
  background: none !important;
  background-image: none !important;
  -webkit-text-fill-color: var(--text) !important;
  color: var(--text) !important;
  animation: none !important;
  filter: none !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   BRAND - the Auron orb mark + wordmark (appended last = authoritative).
   The orb (blue ring + glowing white core) is the identity and carries the ONLY
   glow in the app; every other surface stays flat & minimal.
   ════════════════════════════════════════════════════════════════════════════ */
.orb-mark { width: 100%; height: 100%; display: block; object-fit: contain; }

/* Sidebar brand: orb + letter-spaced uppercase mono wordmark (the logo lockup). */
.brand-logo { background: none !important; border: none !important; box-shadow: none !important;
  display: grid; place-items: center; }
.brand-logo img { width: 30px; height: 30px;
  filter: drop-shadow(0 0 7px rgb(var(--accent-rgb) / 0.45)); }
.brand-name {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace !important;
  text-transform: uppercase !important; letter-spacing: 0.18em !important;
  font-weight: 600 !important; color: var(--text) !important;
  background: none !important; -webkit-text-fill-color: var(--text) !important;
  text-shadow: 0 0 10px rgb(var(--accent-rgb) / 0.20);
}

/* Assistant avatar → the orb (transparent container, just the mark). */
.msg-avatar.msg-avatar-orb { background: none !important; border: none !important;
  box-shadow: none !important; padding: 0; overflow: visible; }
.msg-avatar.msg-avatar-orb .orb-mark { filter: drop-shadow(0 0 5px rgb(var(--accent-rgb) / 0.40)); }

/* Welcome hero + auth logos → larger orb glow. */
.welcome-mark { width: 74px !important; height: 74px !important;
  background: none !important; border: none !important; box-shadow: none !important; border-radius: 0 !important;
  animation: orbSpin 10s linear infinite; transform-origin: 50% 50%; }
.auth-logo { background: none !important; border: none !important; box-shadow: none !important; border-radius: 0 !important;
  filter: drop-shadow(0 0 12px rgb(var(--accent-rgb) / 0.40)); }

/* The brand's signature cue: the orb SPINS (continuous rotation), it does not flash.
   Per founder ("make it spin not flash"). Steady glow stays constant; only rotation moves. */
@keyframes orbSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
/* Legacy alias kept so any old reference still resolves to a spin, never a flash. */
@keyframes orbPulse {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.orb-pulse { animation: orbSpin 9s linear infinite; transform-origin: 50% 50%; }
@keyframes orbBreathe {
  0%, 100% { filter: drop-shadow(0 0 12px rgb(var(--accent-rgb) / 0.34)); }
  50%      { filter: drop-shadow(0 0 22px rgb(var(--accent-rgb) / 0.55)); }
}
.typing span { background: rgb(var(--accent-rgb)) !important; }
@media (prefers-reduced-motion: reduce) { .orb-pulse, .welcome-mark { animation: none !important; } }

/* Welcome suggestion-card icons → clean line-SVG chips (UI/UX rule: no emoji). */
.suggestion-icon {
  width: 38px !important; height: 38px !important; flex: 0 0 38px;
  display: grid !important; place-items: center !important;
  border-radius: 10px;
  background: rgb(var(--accent-rgb) / 0.10) !important;
  border: 1px solid rgb(var(--accent-rgb) / 0.16);
  color: rgb(var(--accent-rgb));
  font-size: 0 !important;
}
.suggestion-icon svg { width: 19px; height: 19px; }
.suggestion:hover .suggestion-icon { background: rgb(var(--accent-rgb) / 0.16) !important; }

/* ============================================================================
   PREMIUM CONSISTENCY PASS - appended last = authoritative.
   Brings every remaining surface up to the Chat/Tasks bar: calm sentence-case
   headings (no loud gradient/shimmer, no emoji in titles), one primary per
   surface, hairline cards, tabular numerals, calm filter pills, premium empty
   states around the orb. Reuses :root tokens only. Reserves mono-uppercase for
   the brand wordmark + sidebar nav only. Respects prefers-reduced-motion.
   ============================================================================ */

/* ── Tabular numerals for dates / counts / metrics everywhere ──────────────── */
.hist-row .when, .hist-count, #hist-count, #mem-feed-stat,
.ap-card-meta, .ap-when, .pc-stats, .conn-tile-meta, .stat-value, .stat-val,
.task-sub, .assign-due, .usage-pct, .recent-meta, .badge.ghost, #project-conv-count,
.muted, .muted-text {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* ── Calm any leftover loud "grad" hero text (NOT the Chat welcome, which is
      the approved bar). Solid premium near-white; kill shimmer animations. ─── */
.skills-hero .grad,
.admin-hero .grad,
.voice-hero .grad,
.conn-hero-title .grad,
.desktop-exclusive h1 .grad,
.tour-title .grad,
.tut-title .grad {
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: var(--text) !important;
  color: var(--text) !important;
  animation: none !important;
}

/* ════════════════════════ SIDEBAR - refined chrome ════════════════════════ */
.sidebar { gap: 16px !important; padding: 20px 14px !important; }
.brand { padding: 2px 6px 10px 6px !important; gap: 11px !important; align-items: center; }
.brand-sub {
  color: var(--text-dim) !important; font-size: 10.5px !important;
  letter-spacing: 0.02em !important; margin-top: 3px;
}
/* Section headers: quiet mono-uppercase chrome, consistent rhythm */
.sidebar-header, .sidebar-section .sidebar-header {
  font-family: var(--font-mono) !important;
  font-size: 9.5px !important; font-weight: 600 !important;
  letter-spacing: 0.18em !important; text-transform: uppercase !important;
  color: var(--text-dim) !important; opacity: 0.62 !important;
  padding: 6px 8px 4px !important; margin-bottom: 2px !important;
}
.sidebar-header .icon-btn { opacity: 0.7; }
/* Nav: calm mono-uppercase (intentional chrome), tidy active state */
.nav-section { gap: 1px !important; }
.nav-item {
  font-family: var(--font-mono) !important;
  padding: 8px 12px !important; gap: 11px !important;
  border-radius: 7px !important; min-height: 34px;
}
.nav-item svg { width: 15px; height: 15px; opacity: 0.85; flex: 0 0 15px; }
.nav-item.active svg { opacity: 1; color: var(--accent); }
.nav-item .nav-kbd {
  margin-left: auto; font-family: var(--font-mono);
  font-size: 9.5px; letter-spacing: 0.06em; color: var(--text-faint);
}
.nav-item:hover { transform: none !important; }   /* drop the jitter */
.nav-item.active {
  background: rgb(var(--accent-rgb) / 0.08) !important;
}
.nav-item.active::before {
  top: 9px !important; bottom: 9px !important; width: 2px !important;
  background: var(--accent) !important;
}
/* Pinned / recent rows */
.recent-chat-item, .project-item {
  font-size: 12px !important; letter-spacing: 0 !important;
  border-radius: 7px !important; color: var(--text-muted) !important;
}
.recent-chat-item:hover, .project-item:hover { transform: none !important; }
/* Account card - quiet glass, calm hover */
.account-card { border-radius: 9px !important; box-shadow: none !important; }
.account-card:hover { box-shadow: none !important; border-color: rgb(var(--accent-rgb) / 0.22) !important; }
.ac-avatar { border-radius: 7px !important; }
/* Footer credit - calm, no shimmer/drift (FINAL CALM already neutralizes; reinforce) */
.credit, .sidebar-footer .credit { padding: 12px 6px 4px !important; }
.credit-line { font-size: 8.5px !important; letter-spacing: 0.14em !important; }
.credit-name, .credit-org { animation: none !important; }

/* ════════════════════════ TOPBAR - consistent across views ════════════════ */
.topbar { animation: none !important; }   /* drop per-view slide; calmer */
.page-title { font-weight: 650 !important; letter-spacing: -0.015em !important; }
.topbar .muted, .topbar .muted-text {
  color: var(--text-dim) !important; font-size: 12px !important; letter-spacing: 0 !important;
}
/* Ghost "Refresh ↻" / select / disconnect buttons in topbars share the calm ghost */
.topbar .ghost-btn { font-size: 12px !important; }

/* ════════════════════════ PROJECTS - grid + cards ═════════════════════════ */
.projects-page { padding: 32px 32px 80px !important; }
.project-card .pc-name { font-size: 21px !important; }
.project-card .pc-action {
  font-size: 0 !important;            /* hide raw emoji glyph size; show via opacity */
  opacity: 0; transition: opacity 0.14s ease, background 0.14s ease, color 0.14s ease;
}
.project-card .pc-action { font-size: 12.5px !important; opacity: 0; }
.project-card:hover .pc-action { opacity: 0.55; }
.project-card .pc-action:hover { opacity: 1 !important; }

/* ════════════════════════ PROJECT DETAIL - aside + composer ═══════════════ */
.project-page { gap: 28px !important; }
.project-title { font-size: 30px !important; letter-spacing: -0.02em !important; }
/* Aside cards: hairline, calm header, leading-dot section feel */
.aside-card {
  background: rgba(255,255,255,0.022) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
}
.aside-card-header {
  font-size: 11px !important; letter-spacing: 0.04em !important;
  color: var(--text-muted) !important; font-weight: 600 !important;
  text-transform: none !important;
}
.aside-card-header .icon-btn { color: var(--text-dim) !important; }
.aside-card::before { background: var(--accent) !important; }   /* not full gradient */
/* Assignment rows: leading status dot via the check, calm meta */
.assign-row { gap: 10px !important; padding: 9px 0 !important; }
.assign-title { font-size: 13px !important; font-weight: 500 !important; }
.assign-due { font-size: 11.5px !important; color: var(--text-dim) !important; }
.assign-row.done .assign-title { color: var(--text-dim) !important; text-decoration: line-through; }
/* Suggestion chips: calm pill with leading accent dot */
.suggestion-chip {
  border-radius: 999px !important;
  border: 1px solid var(--border) !important;
  background: rgba(255,255,255,0.02) !important;
  font-size: 12.5px !important; color: var(--text-muted) !important;
  padding: 8px 14px !important;
}
.suggestion-chip:hover {
  border-color: rgb(var(--accent-rgb) / 0.30) !important;
  background: rgb(var(--accent-rgb) / 0.05) !important;
  color: var(--text) !important; transform: none !important;
}
.suggestion-chip .chip-icon {
  font-size: 0 !important; width: 6px; height: 6px; border-radius: 50%;
  background: rgb(var(--accent-rgb) / 0.65); display: inline-block; flex: 0 0 6px;
}
/* New-conversation row + recents */
.new-conv-row { border-radius: 10px !important; }
.recents-label, .recents-section h3 {
  font-size: 11px !important; letter-spacing: 0.04em !important;
  text-transform: none !important; color: var(--text-muted) !important; font-weight: 600 !important;
}
.recent-card { border-radius: 10px !important; }

/* ════════════════════════ AUTOPILOT DASHBOARD ════════════════════════════ */
.ap-dash-scroll { padding: 28px 36px 48px !important; }
.ap-dash {
  /* Plain block container. The run-card grid is the INNER .ap-grid (which has its
     own grid-template-columns). Making .ap-dash itself a grid split the run-DETAIL
     view - back button + report - into two columns, leaving a big empty left pane. */
  display: block !important;
}
.ap-card {
  background: rgba(255,255,255,0.022) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important; gap: 10px !important; padding: 16px 17px !important;
}
.ap-card:hover {
  border-color: rgb(var(--accent-rgb) / 0.22) !important;
  transform: translateY(-1px) !important; box-shadow: none !important;
}
.ap-card-title { font-size: 14px !important; font-weight: 600 !important; }
.ap-when { font-size: 11px !important; color: var(--text-dim) !important; }
.ap-card-meta { font-size: 11.5px !important; color: var(--text-dim) !important; }
/* Badges: calm, desaturated, with a leading status dot */
.ap-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10.5px !important; font-weight: 600 !important; letter-spacing: 0 !important;
  text-transform: none !important;
  background: rgba(255,255,255,0.05) !important; color: var(--text-muted) !important;
  border: 1px solid var(--border) !important; padding: 3px 9px 3px 8px !important;
}
.ap-badge::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; flex: 0 0 6px; opacity: 0.9;
}
.ap-badge.turnedin { background: rgba(116,198,154,0.12) !important; color: var(--success) !important; border-color: rgba(116,198,154,0.22) !important; }
.ap-badge.wrote    { background: rgb(var(--accent-rgb) / 0.10) !important; color: var(--accent) !important; border-color: rgb(var(--accent-rgb) / 0.22) !important; }
.ap-badge.stopped  { background: rgba(223,107,115,0.12) !important; color: var(--danger) !important; border-color: rgba(223,107,115,0.22) !important; }
.ap-badge.failed   { background: rgba(214,168,95,0.12) !important; color: var(--warning) !important; border-color: rgba(214,168,95,0.22) !important; }
/* Premium empty state around the orb */
.ap-dash-empty { padding: 80px 24px !important; }
.ap-dash-empty .ap-empty-ico { font-size: 34px !important; opacity: 0.5; }
.ap-dash-empty h3 { font-size: 20px !important; font-weight: 650 !important; letter-spacing: -0.02em !important; }

/* ════════════════════════ CONNECTORS - hero, tiles, gate ═════════════════ */
/* Hero: calm - drop the scanline grid + shimmer, keep a soft orb glow */
.conn-hero { background: var(--bg) !important; min-height: auto !important; padding: 30px 32px 26px !important; }
.conn-hero::before { display: none !important; }
.conn-hero-title { font-size: 21px !important; font-weight: 650 !important; }
.conn-hero-sub { color: var(--text-dim) !important; }
.conn-section-title {
  font-family: var(--font-mono) !important; font-size: 9.5px !important;
  letter-spacing: 0.18em !important; color: var(--text-dim) !important; opacity: 0.7;
}
/* Tiles: hairline, calm hover, status pill stays */
.conn-tile {
  background: rgba(255,255,255,0.022) !important;
  border: 1px solid var(--border) !important; border-radius: 12px !important;
}
.conn-tile:hover { border-color: rgb(var(--accent-rgb) / 0.22) !important; transform: translateY(-1px); }
.conn-tile-name { font-weight: 600 !important; }
.conn-tile-status { font-size: 11px !important; letter-spacing: 0 !important; text-transform: none !important; }
/* Tile actions: ONE primary (dark-blue) + quiet ghosts */
.conn-tile-actions button.primary, .conn-tile-actions a.primary {
  background: var(--accent-blue) !important; color: #fff !important; border: 0 !important;
}
.conn-tile-actions button.primary:hover { background: rgb(var(--accent-blue-rgb) / 0.88) !important; }
.conn-tile-actions button:not(.primary):not(.danger) {
  background: transparent !important; border: 1px solid var(--border-strong) !important; color: var(--text-muted) !important;
}

/* ── Desktop-only gate: genuinely premium, orb-centered, calm ─────────────── */
.desktop-exclusive {
  max-width: 600px !important; margin: 64px auto !important;
  padding: 44px 40px 36px !important;
  background:
    radial-gradient(420px 220px at 50% -40px, rgb(var(--accent-rgb) / 0.06), transparent 70%),
    rgba(255,255,255,0.018) !important;
  border: 1px solid var(--border) !important; border-radius: 20px !important;
}
.desktop-exclusive::before { display: none !important; }   /* drop the pulsing glow blob */
.desktop-exclusive-badge {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid var(--border-strong) !important;
  color: var(--text-muted) !important;
  font-size: 9.5px !important; letter-spacing: 0.16em !important;
}
.desktop-exclusive-badge .dot { background: var(--accent) !important; }
.desktop-exclusive h1 { font-size: 30px !important; font-weight: 650 !important; }
.desktop-exclusive p { color: var(--text-dim) !important; font-size: 14px !important; }
/* The single primary = dark blue; Windows = quiet ghost */
.desktop-exclusive-actions .primary {
  background: var(--accent-blue) !important; color: #fff !important; box-shadow: none !important;
}
.desktop-exclusive-actions .primary:hover { background: rgb(var(--accent-blue-rgb) / 0.88) !important; transform: translateY(-1px); }
.desktop-exclusive-actions .secondary { border-radius: 12px !important; }
.desktop-exclusive-actions .secondary:hover {
  border-color: var(--border-strong) !important; color: var(--text) !important; background: rgba(255,255,255,0.03) !important;
}
.desktop-exclusive-features { margin-top: 34px !important; padding-top: 30px !important; gap: 18px !important; }
/* Feature icons → clean line-SVG chips (emoji swapped to SVG in app.js) */
.desktop-exclusive-feature .ico {
  width: 36px; height: 36px; margin: 0 auto 10px;
  display: grid; place-items: center; border-radius: 9px;
  background: rgb(var(--accent-rgb) / 0.09);
  border: 1px solid rgb(var(--accent-rgb) / 0.16);
  color: var(--accent);
  font-size: 0 !important;
}
.desktop-exclusive-feature .ico svg { width: 18px; height: 18px; }
.desktop-exclusive-feature .lbl { font-size: 12.5px !important; }
.desktop-exclusive-feature .desc { font-size: 11px !important; }

/* ════════════════════════ CLOUD TEASE - calm the loud eyebrow/title ══════ */
.cloud-tease-eyebrow {
  font-family: var(--font-mono) !important; color: var(--text-dim) !important;
  letter-spacing: 0.18em !important; font-size: 10px !important;
}
.cloud-tease-title { font-weight: 650 !important; letter-spacing: -0.02em !important; }
.cloud-tease-badge { background: rgba(255,255,255,0.04) !important; border-color: var(--border-strong) !important; }

/* ════════════════════════ SKILLS - calm hero + tidy cards ════════════════ */
.skills-page { padding: 40px 28px 80px !important; }
.skills-hero { font-size: 30px !important; font-weight: 650 !important; letter-spacing: -0.02em !important; }
.skills-sub { color: var(--text-dim) !important; }
/* Filter pills: calm, subtle accent tint when active (not a loud fill) */
.filter-pills .pill {
  border-radius: 999px !important; font-size: 12px !important;
  border: 1px solid var(--border) !important; background: transparent !important;
}
.filter-pills .pill.active {
  background: rgb(var(--accent-rgb) / 0.10) !important;
  color: var(--text) !important;
  border-color: rgb(var(--accent-rgb) / 0.28) !important;
}
.skills-section h2 {
  font-family: var(--font-mono) !important; font-size: 9.5px !important;
  letter-spacing: 0.18em !important; color: var(--text-dim) !important; opacity: 0.7;
}
.skill-card { border-radius: 12px !important; padding: 15px 16px !important; }
/* Skill icon tile: calm neutral surface (was a saturated gradient); keep the
   data emoji as a small mark but on-brand and quiet */
.skill-icon {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid var(--border) !important;
  box-shadow: none !important; border-radius: 10px !important;
  width: 40px !important; height: 40px !important; font-size: 19px !important;
}
.skill-card.enabled .skill-icon {
  background: rgb(var(--accent-rgb) / 0.10) !important;
  border-color: rgb(var(--accent-rgb) / 0.22) !important;
}
.skill-name { font-size: 13.5px !important; }
.skill-check { border-color: var(--border-strong) !important; }
.skill-card.enabled .skill-check { background: var(--accent-blue) !important; color: #fff !important; }
.skill-card.enabled::after { display: none !important; }   /* drop redundant corner tick */
.skill-card.enabled { border-color: rgb(var(--accent-rgb) / 0.28) !important; }

/* ════════════════════════ VOICE - calm hero, one primary per card ════════ */
.voice-hero { font-size: 30px !important; font-weight: 650 !important; letter-spacing: -0.02em !important; }
.voice-sub { color: var(--text-dim) !important; }
.voice-card { background: rgba(255,255,255,0.022) !important; border: 1px solid var(--border) !important; border-radius: 14px !important; }
.voice-card-head h2 { font-size: 15px !important; font-weight: 600 !important; }
.voice-step {
  background: rgb(var(--accent-rgb) / 0.12) !important; color: var(--accent) !important;
  border: 1px solid rgb(var(--accent-rgb) / 0.22);
}
/* Step 1 has two actions: "Add sample" is the primary; "Upload" stays ghost.
   Step 2's "Analyze" is its card's single primary. Keep hierarchy clean. */
.voice-mode-btn.selected { background: rgb(var(--accent-rgb) / 0.10) !important; color: var(--text) !important; }
.voice-import-or, .voice-import-hint { color: var(--text-dim) !important; }
.voice-skill-chip { border-radius: 10px !important; }
.voice-foot { color: var(--text-dim) !important; }

/* ════════════════════════ ADMIN - calm hero + stat cards ═════════════════ */
.admin-page { padding: 32px 36px 80px !important; }
.admin-hero { font-size: 28px !important; font-weight: 650 !important; letter-spacing: -0.02em !important; }
.stat-card {
  background: rgba(255,255,255,0.022) !important;
  border: 1px solid var(--border) !important; border-radius: 12px !important;
}
.stat-card::before { background: var(--accent) !important; opacity: 0.25 !important; }
.stat-value { font-size: 28px !important; font-weight: 700 !important; }
.admin-note { color: var(--text-dim) !important; font-size: 13px !important; }

/* ════════════════════════ SETTINGS - appearance seg, calm rows ═══════════ */
/* Segmented controls: sentence-case, calm active tint */
.seg-btn {
  font-family: var(--font-sans) !important; text-transform: none !important;
  letter-spacing: 0 !important; font-size: 12px !important; font-weight: 500 !important;
}
.seg-btn.active {
  background: rgb(var(--accent-rgb) / 0.10) !important; color: var(--text) !important;
  border-color: rgb(var(--accent-rgb) / 0.24) !important;
}
.set-toggle.on { background: var(--accent-blue) !important; }
.set-callout {
  background: rgba(255,255,255,0.022) !important; border: 1px solid var(--border) !important;
  border-radius: 10px !important; color: var(--text-muted) !important;
}
.set-readonly { color: var(--text-muted) !important; }
/* About credit - calm */
.about-credit { color: var(--text-dim) !important; font-size: 12px !important; }
/* Plan hero (billing tab) - calm, single primary */
.plan-hero {
  background: rgba(255,255,255,0.022) !important; border: 1px solid var(--border) !important;
  border-radius: 12px !important;
}
.plan-hero .primary-btn { background: var(--accent-blue) !important; color: #fff !important; }

/* ════════════════════════ MEMORIES - filter bar + atoms ══════════════════ */
.mem-feed-bar .seg-btn.active {
  background: rgb(var(--accent-rgb) / 0.10) !important; color: var(--text) !important;
  border-color: rgb(var(--accent-rgb) / 0.24) !important;
}
.mem-atom { border-radius: 11px !important; background: rgba(255,255,255,0.022) !important; }
.mem-atom:hover { transform: none !important; border-color: rgb(var(--accent-rgb) / 0.20) !important; }
/* Kind = circular icon badge (real render); keep calm desaturated tints */
.mem-atom-kind { box-shadow: none !important; }
.mem-atom-tag {
  background: rgba(255,255,255,0.05) !important; color: var(--text-dim) !important;
  letter-spacing: 0.04em !important;
}

/* ════════════════════════ HISTORY - rows, calm tags ══════════════════════ */
.hist-row .project-tag {
  font-family: var(--font-sans) !important; letter-spacing: 0 !important;
  display: inline-flex; align-items: center; gap: 5px;
  background: rgb(var(--accent-rgb) / 0.08) !important; color: var(--accent) !important;
  border: 1px solid rgb(var(--accent-rgb) / 0.20) !important;
}
.hist-row .project-tag::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex: 0 0 5px;
}
.hist-row .when { font-family: var(--font-sans) !important; }
.hist-empty .ico { opacity: 0.5; }
.hist-empty h3 { font-weight: 650 !important; letter-spacing: -0.02em; }

/* ════════════════════════ MODALS - consistent glass chrome ═══════════════ */
.modal-backdrop { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); background: rgba(0,0,0,0.5) !important; }
.modal {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(24px) saturate(1.2); -webkit-backdrop-filter: blur(24px) saturate(1.2);
  border: 1px solid var(--glass-bord) !important;
  border-radius: 16px !important; box-shadow: var(--shadow-xl) !important;
}
.modal-title { font-weight: 650 !important; }
.modal-sub { color: var(--text-dim) !important; }
/* Modal inputs: consistent hairline fields */
.modal input, .modal textarea, .modal select {
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid var(--border) !important;
  border-radius: 9px !important;
}
.modal input:focus, .modal textarea:focus, .modal select:focus {
  border-color: rgb(var(--accent-rgb) / 0.40) !important;
  background: rgba(255,255,255,0.05) !important;
}
/* Warn boxes inside modals - calm amber, not loud */
.warn-box {
  background: rgba(214,168,95,0.08) !important; border: 1px solid rgba(214,168,95,0.22) !important;
  color: var(--text-muted) !important; border-radius: 10px !important;
}
/* Platform / mode / run-mode selectors share calm hairline + accent-selected */
.platform-btn { border-radius: 10px !important; }
.platform-btn:hover { border-color: rgb(var(--accent-rgb) / 0.30) !important; background: rgb(var(--accent-rgb) / 0.04) !important; }
.mode-btn, .run-mode-btn { border-radius: 12px !important; }
.run-mode-btn.selected, .mode-btn.selected {
  border-color: rgb(var(--accent-rgb) / 0.45) !important;
  background: rgb(var(--accent-rgb) / 0.06) !important;
}
/* Billing modal: Pro card accent + single dark-blue primary */
.billing-modal .plan-card.pro { border-color: rgb(var(--accent-rgb) / 0.28) !important; background: rgb(var(--accent-rgb) / 0.05) !important; }
.billing-modal .plan-badge { background: var(--accent-blue) !important; color: #fff !important; }
.billing-modal .primary-btn { background: var(--accent-blue) !important; color: #fff !important; }
.plan-current { color: var(--text-dim) !important; }
/* Memory import codebox + steps */
.mem-num, .mem-step .mem-num {
  background: rgb(var(--accent-rgb) / 0.12) !important; color: var(--accent) !important;
}
.mem-codebox { border-radius: 10px !important; }

/* ════════════════════════ COMMAND PALETTE - calm + crisp ═════════════════ */
.palette {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(24px) saturate(1.2); -webkit-backdrop-filter: blur(24px) saturate(1.2);
  border: 1px solid var(--glass-bord) !important; box-shadow: var(--shadow-xl) !important;
}
.palette-search input::placeholder { color: var(--text-dim); }
.palette-item { font-size: 13px !important; }
.palette-item .pi-hint {
  font-family: var(--font-sans) !important; text-transform: none !important;
  letter-spacing: 0 !important; color: var(--text-dim) !important;
  background: rgba(255,255,255,0.03); border-color: var(--border) !important;
}
.palette-item.sel, .palette-item:hover {
  background: rgb(var(--accent-rgb) / 0.08) !important;
}
.palette-item.sel { box-shadow: inset 2px 0 0 var(--accent) !important; }

/* ════════════════════════ AUTH - clean, centered, orb ════════════════════ */
.auth-card {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(24px) saturate(1.2); -webkit-backdrop-filter: blur(24px) saturate(1.2);
  border: 1px solid var(--glass-bord) !important; border-radius: 20px !important;
  box-shadow: var(--shadow-xl) !important;
}
.auth-logo { filter: drop-shadow(0 0 12px rgb(var(--accent-rgb) / 0.40)) !important; border-radius: 0 !important; }
.auth-title { font-weight: 650 !important; letter-spacing: -0.01em !important; }
/* Calm the auth sub + switch text to sentence-case sans (was mono-uppercase) */
#auth-sub, .auth-sub, #auth-switch-text, .auth-wrap label {
  font-family: var(--font-sans) !important;
  text-transform: none !important; letter-spacing: 0 !important;
  font-size: 13px !important; color: var(--text-dim) !important;
}
.auth-card input {
  background: rgba(255,255,255,0.03) !important; border: 1px solid var(--border) !important; border-radius: 10px !important;
}
.auth-card input:focus { border-color: rgb(var(--accent-rgb) / 0.45) !important; background: rgba(255,255,255,0.05) !important; }
.auth-submit { background: var(--accent-blue) !important; color: #fff !important; box-shadow: none !important; }
.auth-submit:hover { background: rgb(var(--accent-blue-rgb) / 0.88) !important; transform: translateY(-1px); }
.auth-switch a, .auth-forgot a { color: var(--accent) !important; }

/* ════════════════════════ PAYWALL - calm cards, one primary ══════════════ */
.paywall-wrap {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(28px) saturate(1.2); -webkit-backdrop-filter: blur(28px) saturate(1.2);
  border: 1px solid var(--glass-bord) !important; box-shadow: var(--shadow-xl) !important;
}
.paywall-back { color: var(--text-dim) !important; }
/* Plans side-by-side (premium pricing layout) instead of full-width stack.
   Target .pw-grid (the cards) - NOT .paywall-plans (the wrapper), which also holds
   the monthly/annual toggle; making the wrapper a grid collapsed the toggle into a
   card column. */
.paywall-plans {
  display: flex !important; flex-direction: column !important; gap: 16px !important;
}
.pw-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
  gap: 12px !important; align-items: stretch !important;
}
.pw-card {
  background: rgba(255,255,255,0.022) !important; border: 1px solid var(--border) !important;
  border-radius: 14px !important; box-shadow: none !important;
  display: flex !important; flex-direction: column !important;
}
.pw-card ul { flex: 1 !important; }
.pw-card::before { display: none !important; }
.pw-card:hover { transform: translateY(-2px) !important; border-color: rgb(var(--accent-rgb) / 0.22) !important; box-shadow: none !important; }
.pw-card.featured, .pw-card.pro {
  background: rgb(var(--accent-rgb) / 0.05) !important;
  border-color: rgb(var(--accent-rgb) / 0.28) !important; box-shadow: none !important;
}
.pw-name {
  font-family: var(--font-mono) !important;
  background: none !important; -webkit-text-fill-color: var(--text-muted) !important; color: var(--text-muted) !important;
  font-weight: 600 !important; letter-spacing: 0.12em !important;
}
.pw-card .primary-btn, .pw-card.featured .primary-btn {
  background: var(--accent-blue) !important; color: #fff !important; box-shadow: none !important;
}
.pw-card:not(.featured):not(.pro) .primary-btn {
  background: transparent !important; color: var(--text-muted) !important; border: 1px solid var(--border-strong) !important;
}
.pw-tag, .pw-card.featured .pw-tag {
  background: var(--accent-blue) !important; color: #fff !important; animation: none !important; box-shadow: none !important;
}

/* ════════════════════════ TOASTS / DROPDOWNS - consistent ════════════════ */
#toast-wrap .toast {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-bord) !important; border-radius: 11px !important;
}
.model-dropdown, .dropdown, .menu-dropdown {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-bord) !important; border-radius: 11px !important;
  box-shadow: var(--shadow-lg) !important;
}

/* ── Reduced motion: kill the remaining float/spin on orbs we left intact ─── */
@media (prefers-reduced-motion: reduce) {
  .conn-hero-orb, .desktop-exclusive-orb,
  .conn-hero-orb::before, .conn-hero-orb::after,
  .desktop-exclusive-orb::before, .desktop-exclusive-orb::after { animation: none !important; }
}

/* ════════════ INLINE-SVG ICON SLOTS - sizing for de-emoji'd glyphs ════════ */
/* Autopilot beta warning: icon column + text, amber stroke inherited via color */
.warn-box {
  display: flex !important; align-items: flex-start; gap: 9px;
}
.warn-box .warn-ico {
  width: 17px; height: 17px; flex-shrink: 0; margin-top: 1px;
  color: #d6a85f; opacity: 0.95;
}
/* Theme toggle: moon/sun line icons sit inline with the "Appearance" label */
.theme-ico-moon, .theme-ico-sun { display: inline-flex; align-items: center; vertical-align: -3px; }
body[data-theme="light"] .theme-ico-sun { display: inline-flex; }
.theme-ico-moon svg, .theme-ico-sun svg { width: 15px; height: 15px; }
/* Leading icons inside ghost/text buttons (Delete, Copy, …) */
.btn-ico {
  width: 14px; height: 14px; flex-shrink: 0;
  vertical-align: -2px; margin-right: 6px;
}
.mem-copy { display: inline-flex; align-items: center; }
.mem-copy .btn-ico { margin-right: 5px; }
/* Connect-school mode picker (Your computer / Cloud) line icons */
.mode-icon { display: flex; align-items: center; justify-content: center; color: rgb(var(--accent-rgb)); }
.mode-icon svg { width: 25px; height: 25px; }
/* Onboarding tour: fixed icon box so the orb <img> + line SVGs size cleanly */
.tut-icon {
  width: 64px; height: 64px; margin: 0 auto 18px;
  display: flex; align-items: center; justify-content: center;
  color: rgb(var(--accent-rgb));
}
.tut-icon svg { width: 52px; height: 52px; }
.tut-icon img { width: 60px; height: 60px; filter: drop-shadow(0 0 14px rgb(var(--accent-rgb) / 0.45)); }
/* Autopilot empty-state line icons (dashboard + picker) */
.ap-empty-ico { color: rgb(var(--accent-rgb)); }
.ap-empty-ico svg { width: 38px; height: 38px; opacity: 0.85; }
.ap-dash-empty .ap-empty-ico svg { width: 42px; height: 42px; }
/* Composer paywall-unlock button: flex gap handles spacing (kill btn-ico margin) */
.composer-unlock .btn-ico { margin-right: 0; width: 15px; height: 15px; }

/* ════════════ HERO BUTTON - constellation forms around it on hover ═══════ */
/* Layers on top of .primary-btn: keeps the solid-blue fill, adds an orb-like
   aura + lift; the star constellation itself is painted by the #hero-fx-canvas
   overlay (see app.js hero-fx module). */
.btn-hero {
  position: relative;
  isolation: isolate;
  transition: transform .35s cubic-bezier(.22,.61,.36,1),
              box-shadow .35s cubic-bezier(.22,.61,.36,1),
              filter .35s ease;
  will-change: transform;
}
.btn-hero::before {
  content: ""; position: absolute; inset: -3px; border-radius: 15px;
  background: radial-gradient(130% 150% at 50% 0%, rgb(var(--accent-rgb) / 0.45), transparent 62%);
  opacity: 0; transition: opacity .35s ease; pointer-events: none; z-index: -1;
  filter: blur(2px);
}
.btn-hero:hover, .btn-hero.hovered, .btn-hero[data-hero-hover] {
  transform: translateY(-1px);
  box-shadow: 0 14px 40px rgba(0,0,0,0.5), 0 0 36px rgb(var(--accent-rgb) / 0.38);
  filter: brightness(1.06);
}
.btn-hero:hover::before, .btn-hero.hovered::before, .btn-hero[data-hero-hover]::before { opacity: 1; }
.btn-hero:active { transform: translateY(0); }
#hero-fx-canvas {
  position: fixed; inset: 0; width: 100vw; height: 100vh;
  pointer-events: none; z-index: 90;   /* below every modal/overlay - confetti must never paint over a dialog */
}
@media (prefers-reduced-motion: reduce) {
  #hero-fx-canvas { display: none; }
  .btn-hero { transition: none; }
}

/* ════════════ ORDINARY BUTTONS - calm universal hover (non-hero) ═════════ */
.primary-btn:not(.btn-hero) {
  transition: transform .16s ease, box-shadow .2s ease, filter .2s ease, background .2s ease;
}
.primary-btn:not(.btn-hero):hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.32), 0 0 22px rgb(var(--accent-rgb) / 0.22);
  filter: brightness(1.05);
}
.primary-btn:not(.btn-hero):active { transform: translateY(0); filter: brightness(0.98); }
@media (prefers-reduced-motion: reduce) { .primary-btn:not(.btn-hero) { transition: none; } }


/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  SURFACE FLEET - 8-agent UI/UX upgrade pass (chat, tasks, autopilot,    ║
   ║  connectors, projects, memories, settings, sidebar). Scoped per-surface.║
   ╚══════════════════════════════════════════════════════════════════════╝ */


/* ===== FLEET: CHAT (active thread) ===== */
/* ChatGPT-4.5 / Claude-caliber active conversation. Scoped to .view-chat / .msg* /
   .composer / .chat. Composes ONLY :root tokens. Appended last so it wins the
   cascade; mirrors !important only where prior winning rules used it. */

/* ── Thread surface: roomy rhythm + soft top dissolve under the topbar ── */
body[data-view="chat"] .view-chat .chat {
  gap: 26px;
  padding: 30px 32px 34px;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22px);
          mask-image: linear-gradient(to bottom, transparent 0, #000 22px);
}
body[data-view="chat"] .view-chat .chat::-webkit-scrollbar { width: 10px; }
body[data-view="chat"] .view-chat .chat::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: var(--r-full);
  border: 3px solid transparent;
  background-clip: padding-box;
}
body[data-view="chat"] .view-chat .chat::-webkit-scrollbar-thumb:hover {
  background: rgb(var(--accent-rgb) / 0.45);
  background-clip: padding-box;
}

/* ── Message row geometry: clean user-vs-assistant rhythm ── */
body[data-view="chat"] .view-chat .msg {
  max-width: 768px;
  gap: 16px;
  align-items: flex-start;
}
/* Assistant reads as calm prose; user is a quiet right-leaning soft fill. */
body[data-view="chat"] .view-chat .msg.assistant { padding-right: 44px; }
body[data-view="chat"] .view-chat .msg.user {
  flex-direction: row-reverse;
  padding-left: 56px;
}
body[data-view="chat"] .view-chat .msg.user .msg-body {
  flex: 0 1 auto;
  background: rgb(var(--accent-rgb) / 0.07) !important;
  border: 1px solid rgb(var(--accent-rgb) / 0.14) !important;
  border-radius: 16px 16px 6px 16px !important;
  padding: 11px 16px !important;
}
body[data-view="chat"] .view-chat .msg.user .msg-role {
  text-align: right;
  margin-bottom: 4px;
}

/* ── Avatars: orb for assistant (the ONE glow), quiet ring for user ── */
body[data-view="chat"] .view-chat .msg-avatar {
  width: 30px !important; height: 30px !important;
  border-radius: 9px !important;
  margin-top: 1px;
}
body[data-view="chat"] .view-chat .msg.user .msg-avatar {
  background: var(--bg-elev-3) !important;
  border: 1px solid var(--border-strong) !important;
  color: var(--text-muted) !important;
  font-family: var(--font-mono);
  font-size: 11px !important;
  box-shadow: none !important;
}
/* Assistant avatar = the orb mark floating in a soft accent aura. */
body[data-view="chat"] .view-chat .msg-avatar.msg-avatar-orb {
  position: relative;
  display: grid; place-items: center;
  border-radius: var(--r-full) !important;
}
body[data-view="chat"] .view-chat .msg-avatar.msg-avatar-orb::before {
  content: "";
  position: absolute; inset: -3px;
  border-radius: var(--r-full);
  background: radial-gradient(circle at 50% 50%,
              rgb(var(--accent-rgb) / 0.30), transparent 68%);
  z-index: -1;
}
body[data-view="chat"] .view-chat .msg-avatar.msg-avatar-orb .orb-mark {
  width: 28px; height: 28px;
  filter: drop-shadow(0 0 6px rgb(var(--accent-rgb) / 0.45));
}

/* ── Role label: small, calm, mono micro-label ── */
body[data-view="chat"] .view-chat .msg-role {
  font-family: var(--font-mono);
  font-size: 10.5px !important;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim) !important;
  opacity: 1 !important;
  margin-bottom: 6px;
}
body[data-view="chat"] .view-chat .msg.assistant .msg-role {
  color: rgb(var(--accent-rgb) / 0.85) !important;
  -webkit-text-fill-color: rgb(var(--accent-rgb) / 0.85) !important;
}

/* ── Body typography: gorgeous, content-first markdown ── */
body[data-view="chat"] .view-chat .msg-content {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.72;
  letter-spacing: -0.003em;
  color: var(--text);
}
body[data-view="chat"] .view-chat .msg-content > :first-child { margin-top: 0; }
body[data-view="chat"] .view-chat .msg-content > :last-child { margin-bottom: 0; }
body[data-view="chat"] .view-chat .msg-content p { margin: 0 0 0.85em; }
body[data-view="chat"] .view-chat .msg-content h1,
body[data-view="chat"] .view-chat .msg-content h2,
body[data-view="chat"] .view-chat .msg-content h3 {
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.3;
  margin: 1.3em 0 0.5em;
  color: var(--text);
}
body[data-view="chat"] .view-chat .msg-content h1 { font-size: 1.4em; }
body[data-view="chat"] .view-chat .msg-content h2 { font-size: 1.2em; }
body[data-view="chat"] .view-chat .msg-content h3 { font-size: 1.05em; }
body[data-view="chat"] .view-chat .msg-content strong { color: var(--text); font-weight: 650; }
body[data-view="chat"] .view-chat .msg-content ul,
body[data-view="chat"] .view-chat .msg-content ol { margin: 0.4em 0 0.9em; padding-left: 1.5em; }
body[data-view="chat"] .view-chat .msg-content li { margin-bottom: 0.35em; }
body[data-view="chat"] .view-chat .msg-content li::marker { color: var(--text-dim); }
body[data-view="chat"] .view-chat .msg-content ul li::marker { color: rgb(var(--accent-rgb) / 0.8); }
body[data-view="chat"] .view-chat .msg-content a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid rgb(var(--accent-rgb) / 0.35);
  transition: border-color var(--d-fast) var(--ease-out), background var(--d-fast) var(--ease-out);
}
body[data-view="chat"] .view-chat .msg-content a:hover {
  border-bottom-color: var(--accent);
  background: rgb(var(--accent-rgb) / 0.08);
}
body[data-view="chat"] .view-chat .msg-content blockquote {
  margin: 0.8em 0;
  padding: 2px 0 2px 16px;
  border-left: 2px solid rgb(var(--accent-rgb) / 0.5);
  background: rgb(var(--accent-rgb) / 0.04);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  color: var(--text-muted);
}
body[data-view="chat"] .view-chat .msg-content hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 1.4em 0;
}
/* Tables (marked emits real <table>) - hairline, readable */
body[data-view="chat"] .view-chat .msg-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.8em 0;
  font-size: 13.5px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
}
body[data-view="chat"] .view-chat .msg-content th,
body[data-view="chat"] .view-chat .msg-content td {
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
body[data-view="chat"] .view-chat .msg-content th {
  background: rgb(var(--accent-rgb) / 0.05);
  font-weight: 600;
  color: var(--text);
}
body[data-view="chat"] .view-chat .msg-content tr:last-child td { border-bottom: none; }

/* ── Inline code ── */
body[data-view="chat"] .view-chat .msg-content code:not(pre code) {
  background: rgb(var(--accent-rgb) / 0.10) !important;
  color: var(--accent) !important;
  font-family: var(--font-mono);
  font-size: 0.86em;
  padding: 1.5px 6px;
  border-radius: var(--r-xs);
  border: 1px solid rgb(var(--accent-rgb) / 0.14);
}

/* ── Code blocks: header bar + copy button + soft inner bg (decorated in JS) ── */
body[data-view="chat"] .view-chat .msg-content .cb-wrap {
  margin: 0.85em 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--bg-elev-1);
  box-shadow: var(--shadow-sm);
}
body[data-view="chat"] .view-chat .msg-content .cb-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 10px 7px 14px;
  background: rgb(var(--accent-rgb) / 0.035);
  border-bottom: 1px solid var(--border);
}
body[data-view="chat"] .view-chat .msg-content .cb-lang {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
}
body[data-view="chat"] .view-chat .msg-content .cb-copy {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono);
  font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 3px 9px;
  cursor: pointer;
  transition: color var(--d-fast) var(--ease-out),
              border-color var(--d-fast) var(--ease-out),
              background var(--d-fast) var(--ease-out);
}
body[data-view="chat"] .view-chat .msg-content .cb-copy svg {
  width: 13px; height: 13px; stroke-width: 1.9;
}
body[data-view="chat"] .view-chat .msg-content .cb-copy:hover {
  color: var(--accent);
  border-color: rgb(var(--accent-rgb) / 0.4);
  background: rgb(var(--accent-rgb) / 0.07);
}
body[data-view="chat"] .view-chat .msg-content .cb-copy.copied {
  color: var(--success);
  border-color: rgb(116 198 154 / 0.4);
}
body[data-view="chat"] .view-chat .msg-content .cb-wrap pre {
  margin: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: var(--bg-elev-1) !important;
  padding: 14px 16px !important;
  overflow-x: auto;
}
body[data-view="chat"] .view-chat .msg-content .cb-wrap pre code {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.6;
  background: none;
  border: none;
  padding: 0;
}
/* Bare <pre> that never got decorated (fallback / plain text) still looks right */
body[data-view="chat"] .view-chat .msg-content pre:not(.cb-wrap pre) {
  background: var(--bg-elev-1) !important;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  padding: 14px 16px !important;
  box-shadow: var(--shadow-sm);
}

/* ── Streaming cursor: a sleek blinking accent bar ── */
body[data-view="chat"] .view-chat .msg-content.streaming::after {
  content: "";
  display: inline-block;
  width: 2px; height: 1.05em;
  margin-left: 2px;
  vertical-align: text-bottom;
  border-radius: 1px;
  background: var(--accent);
  box-shadow: 0 0 6px rgb(var(--accent-rgb) / 0.6);
  animation: chatCaret 1.1s steps(2, start) infinite;
}
@keyframes chatCaret { 50% { opacity: 0; } }

/* ── Composer: roomy, premium, with a confident focus ring ── */
body[data-view="chat"] .view-chat .composer {
  padding: 14px 32px 20px;
}
body[data-view="chat"] .view-chat .composer-inner {
  max-width: 768px;
  padding: 9px 9px 9px 18px;
  border-radius: var(--r-xl);
  border: 1px solid var(--border-strong);
  background: var(--bg-elev-2);
  box-shadow: var(--shadow-md);
  transition: border-color var(--d-base) var(--ease-out),
              box-shadow var(--d-base) var(--ease-out),
              transform var(--d-base) var(--ease-out);
}
body[data-view="chat"] .view-chat .composer-inner:focus-within {
  transform: translateY(-1px);
  border-color: var(--border-focus);
  box-shadow: var(--shadow-md), 0 0 0 3px rgb(var(--accent-rgb) / 0.16);
}
body[data-view="chat"] .view-chat .composer #input {
  font-size: 15px;
  line-height: 1.55;
  padding: 8px 4px;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
body[data-view="chat"] .view-chat .composer #input:focus {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
body[data-view="chat"] .view-chat .composer #input::placeholder {
  font-family: var(--font-sans);
  font-size: 15px;
  letter-spacing: 0;
  color: var(--text-dim);
}
/* Send affordance: the single deep-blue primary of this surface */
body[data-view="chat"] .view-chat .composer .send-btn {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--accent-blue) !important;
  color: #fff;
  box-shadow: 0 4px 14px rgb(var(--accent-rgb) / 0.45), 0 0 22px rgb(var(--accent-rgb) / 0.40) !important;
  transition: transform var(--d-fast) var(--ease-out),
              box-shadow var(--d-base) var(--ease-out),
              background var(--d-fast) var(--ease-out),
              filter var(--d-fast) var(--ease-out);
}
body[data-view="chat"] .view-chat .composer .send-btn:hover:not(:disabled) {
  transform: scale(1.07);
  background: rgb(var(--accent-rgb)) !important;
  box-shadow: 0 4px 16px rgb(var(--accent-rgb) / 0.55), 0 0 30px rgb(var(--accent-rgb) / 0.62) !important;
}
body[data-view="chat"] .view-chat .composer .send-btn:active:not(:disabled) { transform: scale(0.93); }
body[data-view="chat"] .view-chat .composer .send-btn:disabled {
  opacity: 0.4;
  transform: none;
  filter: none;
  box-shadow: none !important;
}
body[data-view="chat"] .view-chat .composer .icon-btn {
  width: 38px; height: 38px;
  border-radius: 50%;
  color: var(--text-muted);
  transition: color var(--d-fast) var(--ease-out), background var(--d-fast) var(--ease-out);
}
body[data-view="chat"] .view-chat .composer .icon-btn:hover {
  color: var(--text);
  background: rgb(var(--accent-rgb) / 0.08);
}
/* Quiet hint row */
body[data-view="chat"] .view-chat .composer-hint {
  max-width: 768px;
  margin-top: 10px;
  gap: 16px;
}
body[data-view="chat"] .view-chat .composer-hint span {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--text-dim);
}

/* ── Light theme harmony ── */
body[data-theme="light"][data-view="chat"] .view-chat .msg.user .msg-body {
  background: rgb(var(--accent-rgb) / 0.06) !important;
  border-color: rgb(var(--accent-rgb) / 0.18) !important;
}
body[data-theme="light"][data-view="chat"] .view-chat .msg-content .cb-wrap,
body[data-theme="light"][data-view="chat"] .view-chat .msg-content .cb-wrap pre {
  background: var(--bg-elev-2) !important;
}
body[data-theme="light"][data-view="chat"] .view-chat .msg-content pre:not(.cb-wrap pre) {
  background: var(--bg-elev-2) !important;
}

/* ── Respect reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  body[data-view="chat"] .view-chat .msg-content.streaming::after { animation: none; }
  body[data-view="chat"] .view-chat .composer-inner:focus-within { transform: none; }
}
/* ===== /FLEET: CHAT (active thread) ===== */


/* ===== FLEET: TASKS ===== */
/* Flagship Tasks surface: subject color system (dot + left-edge tint), due-date
   urgency coding, denser cards, an anchored "Autopilot" CTA (calm accent glow,
   NOT .btn-hero), refined group headers, plus skeleton-loading + empty states.
   Scoped under .view-tasks; a few !important props beat the late flatten-cascade
   on .task-card (lines ~4053 / ~5562 / ~6202). No :root / global primitives. */

/* ── Layout rhythm ───────────────────────────────────────────────────── */
.view-tasks .tasks-body { padding: 22px 32px 72px; }
.view-tasks .task-grid {
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 14px;
}
/* Absolute due-date chip ("Apr 17") next to the relative overdue/urgent badge,
   so a "53d overdue" pill also tells you WHEN. Quiet, mono, neutral. */
.view-tasks .task-date {
  display: inline-flex; align-items: center;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.01em;
  padding: 3px 8px; border-radius: 999px; white-space: nowrap;
  color: var(--text-dim); background: rgba(255,255,255,0.035);
  border: 1px solid var(--border);
}

/* ── Card shell: restore quiet elevation the global cascade flattened ──── */
.view-tasks .task-card {
  background: var(--bg-elev-1) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  padding: 14px 15px 12px 16px;
  gap: 8px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.18) !important;
  overflow: hidden;
}
/* Subject identity: a faint vertical tint stripe on the leading edge. The
   color is inherited from the .subj-* class set on the card's .task-subject;
   we re-derive it per card so the whole card reads as "that subject". */
.view-tasks .task-card::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 3px;
  background: var(--subj, var(--border-strong));
  opacity: 0.0; transition: opacity var(--d-base) var(--ease-out);
}
.view-tasks .task-card.has-subj::before { opacity: 0.55; }
.view-tasks .task-card:hover {
  border-color: var(--border-strong) !important;
  background: var(--bg-elev-2) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.26) !important;
  transform: translateY(-1px);
}
.view-tasks .task-card.has-subj:hover { background:
  linear-gradient(0deg, var(--bg-elev-2), var(--bg-elev-2)) padding-box,
  var(--bg-elev-2) !important; }
.view-tasks .task-card.has-subj:hover::before { opacity: 0.9; }
.view-tasks .task-card.done { opacity: 0.5; }
.view-tasks .task-card.done .task-title { text-decoration: line-through; text-decoration-color: var(--text-dim); }

/* Map each subject class to a --subj var consumed by the stripe + dot.
   Mirrors subjectColorClass() in app.js; values match the existing chips. */
.view-tasks .task-card.subj-blue   { --subj: #7cc4ff; }
.view-tasks .task-card.subj-green  { --subj: #5fe0a0; }
.view-tasks .task-card.subj-orange { --subj: #ffb066; }
.view-tasks .task-card.subj-yellow { --subj: #ffd75e; }
.view-tasks .task-card.subj-purple { --subj: #c6a4ff; }
.view-tasks .task-card.subj-red    { --subj: #ff8a8a; }
.view-tasks .task-card.subj-gray   { --subj: var(--text-dim); }

/* ── Card head: subject chip + due pill on one tidy row ───────────────── */
.view-tasks .task-head { gap: 8px; min-height: 18px; }
.view-tasks .task-subject {
  font-size: 10px; padding: 3px 9px 3px 7px; gap: 5px;
  border: 1px solid color-mix(in srgb, var(--subj, var(--accent)) 22%, transparent) !important;
}
.view-tasks .task-subject::before { width: 5px; height: 5px; opacity: 1; }

/* ── Due-date URGENCY coding (overdue=danger / soon=amber / later=dim) ─── */
.view-tasks .task-due {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.01em;
  padding: 3px 9px 3px 8px; border-radius: 999px; white-space: nowrap;
  color: var(--text-dim);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
}
.view-tasks .task-due::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; flex-shrink: 0;
}
.view-tasks .task-due.overdue {
  color: var(--danger); background: rgb(223 107 115 / 0.12);
  border-color: rgb(223 107 115 / 0.30); font-weight: 700;
}
.view-tasks .task-due.urgent {
  color: var(--warning); background: rgba(214,168,95,0.12);
  border-color: rgba(214,168,95,0.30); font-weight: 700;
}
.view-tasks .task-due.soon {
  color: var(--warning); background: rgba(214,168,95,0.09);
  border-color: rgba(214,168,95,0.22);
}
/* gentle pulse on the overdue dot only - calm, respects reduced-motion below */
.view-tasks .task-due.overdue::before { animation: tasks-due-pulse 2.4s ease-in-out infinite; }
@keyframes tasks-due-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.45; } }

/* ── Title + description density ──────────────────────────────────────── */
.view-tasks .task-title { font-size: 15px; font-weight: 650; line-height: 1.34; }
.view-tasks .task-desc { font-size: 12.5px; line-height: 1.5; color: var(--text-muted); margin-bottom: 1px; }

/* ── Action bar: CTA anchored left, quiet icon buttons pinned right ────── */
.view-tasks .task-actions {
  margin-top: auto; padding-top: 11px; gap: 7px;
  border-top: 1px solid var(--border);
}
/* the left cluster (Autopilot + Help + Open) groups together; the right
   cluster (complete + delete) is pushed to the edge - nothing floats. */
.view-tasks .task-cta-group { display: inline-flex; align-items: center; gap: 7px; }
.view-tasks .task-spacer { flex: 1; }
.view-tasks .task-actions button,
.view-tasks .task-actions a {
  font-size: 12px; padding: 6px 11px; font-weight: 550;
  border-radius: var(--r-sm); border: 1px solid var(--border);
  background: transparent; color: var(--text-muted);
}
.view-tasks .task-actions button:hover,
.view-tasks .task-actions a:hover {
  border-color: var(--border-strong); color: var(--text); background: var(--bg-elev-3);
}
.view-tasks .task-actions svg.t-ico { width: 14px; height: 14px; flex-shrink: 0; }

/* THE primary per card: Autopilot. Calm signature treatment - solid deep-blue
   fill + soft accent glow + 1px lift on hover (per brief; NOT .btn-hero). */
.view-tasks .task-actions button.do-it {
  background: rgb(var(--accent-blue-rgb)) !important;
  color: #fff !important; font-weight: 650; border: 0 !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.12);
  transition: transform var(--d-fast) var(--ease-out), box-shadow var(--d-fast) var(--ease-out), filter var(--d-fast) var(--ease-out);
}
.view-tasks .task-actions button.do-it:hover {
  transform: translateY(-1px); filter: brightness(1.05);
  box-shadow: 0 6px 18px rgb(var(--accent-blue-rgb) / 0.40), 0 0 0 1px rgb(var(--accent-rgb) / 0.30) !important;
}
.view-tasks .task-actions button.do-it:active { transform: translateY(0); }

/* complete + delete: quiet, square-ish icon buttons at the right edge */
.view-tasks .task-actions .task-done-check,
.view-tasks .task-actions [data-act="del"] {
  margin-left: 0; padding: 6px; width: 30px; justify-content: center;
  color: var(--text-dim);
}
.view-tasks .task-actions .task-done-check:hover { color: var(--success); border-color: rgb(116 198 154 / 0.35); background: rgb(116 198 154 / 0.10); }
.view-tasks .task-actions [data-act="del"]:hover { color: var(--danger); border-color: rgb(223 107 115 / 0.35); background: rgb(223 107 115 / 0.10); }

/* ── Group / section headers: color-coded urgency dot, hairline rule ───── */
.view-tasks .task-section { margin-bottom: 26px; }
.view-tasks .task-section-head { gap: 10px; margin-bottom: 12px; }
.view-tasks .task-section-head .ts-label {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.02em;
  text-transform: uppercase; color: var(--text-muted);
}
.view-tasks .task-section-head .ts-label::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--text-dim); box-shadow: 0 0 0 3px rgba(255,255,255,0.04);
}
/* urgency keys derive the dot color from the section's data-key */
.view-tasks .task-section[data-key="missing"]   .ts-label { color: var(--danger); }
.view-tasks .task-section[data-key="missing"]   .ts-label::before { background: var(--danger); box-shadow: 0 0 0 3px rgb(223 107 115 / 0.16); }
.view-tasks .task-section[data-key="today"]      .ts-label::before { background: var(--warning); box-shadow: 0 0 0 3px rgba(214,168,95,0.16); }
.view-tasks .task-section[data-key="tomorrow"]   .ts-label::before { background: var(--warning); }
.view-tasks .task-section[data-key="week"]       .ts-label::before { background: rgb(var(--accent-rgb)); }
.view-tasks .task-section[data-key="nextweek"]   .ts-label::before { background: rgb(var(--accent-rgb) / 0.6); }
.view-tasks .task-section[data-key="done"]       .ts-label::before { background: var(--success); }
.view-tasks .task-section[data-key^="class:"]    .ts-label::before { background: rgb(var(--accent-rgb)); }
.view-tasks .task-section-head .ts-count {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
}

/* ── Filter pills: a touch denser, mono counts ────────────────────────── */
.view-tasks .tasks-filters { margin: 2px 0 18px; }
.view-tasks .filter-pill { font-size: 12.5px; }
.view-tasks .filter-pill .fp-count { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ── Empty "nothing matches a filter" state (inline, not the connect CTA) ─ */
.view-tasks .tasks-empty { padding: 64px 24px; gap: 12px; }
.view-tasks .tasks-empty .empty-ico {
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center; color: var(--success);
  background: rgb(116 198 154 / 0.10);
  border: 1px solid rgb(116 198 154 / 0.22);
}
.view-tasks .tasks-empty .empty-ico svg { width: 24px; height: 24px; }
.view-tasks .tasks-empty h3 { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
.view-tasks .tasks-empty p { font-size: 13px; color: var(--text-dim); }

/* ── Skeleton loading state ───────────────────────────────────────────── */
.view-tasks .tasks-skel {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px; padding-top: 6px;
}
.view-tasks .tasks-skel .sk-card {
  background: var(--bg-elev-1); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 15px 16px 13px;
  display: flex; flex-direction: column; gap: 11px;
}
.view-tasks .tasks-skel .sk-row { display: flex; align-items: center; gap: 8px; }
.view-tasks .tasks-skel .sk {
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.09) 37%, rgba(255,255,255,0.04) 63%);
  background-size: 400% 100%;
  animation: tasks-shimmer 1.3s ease-in-out infinite;
}
.view-tasks .tasks-skel .sk-chip { width: 72px; height: 16px; border-radius: 999px; }
.view-tasks .tasks-skel .sk-due  { width: 64px; height: 16px; border-radius: 999px; margin-left: auto; }
.view-tasks .tasks-skel .sk-title { width: 82%; height: 13px; }
.view-tasks .tasks-skel .sk-line  { width: 96%; height: 10px; }
.view-tasks .tasks-skel .sk-line.short { width: 60%; }
.view-tasks .tasks-skel .sk-foot { height: 26px; width: 100%; border-radius: var(--r-sm); margin-top: 4px; }
@keyframes tasks-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

@media (prefers-reduced-motion: reduce) {
  .view-tasks .task-due.overdue::before { animation: none; }
  .view-tasks .tasks-skel .sk { animation: none; }
}
/* ===== /FLEET: TASKS ===== */


/* ===== FLEET: AUTOPILOT (dashboard, run modal, gate) ===== */
/* Appends after the earlier autopilot redesign block; uses !important only
   to win against those existing !important rules. Scoped to .ap-*, .run-mode-btn
   / .rm-*, and .desktop-exclusive*. No :root, no .btn-hero, no global primitives. */

/* ── Dashboard scroll: roomier, capped reading width ─────────────────── */
.ap-dash-scroll { padding: 26px 36px 56px !important; }
.ap-dash-scroll > .ap-grid,
.ap-dash-scroll > .ap-dash > .ap-grid { max-width: 1180px; }

/* ── Run-card grid: the real grid is .ap-grid (injected inside #ap-dash) ─ */
.ap-grid {
  grid-template-columns: repeat(auto-fill, minmax(296px, 1fr)) !important;
  gap: 12px !important;
  align-content: start;
}

/* ── Run card: calm hairline tile, accent left-edge reveal on hover ───── */
.view-autopilot .ap-card {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.014), rgba(255,255,255,0)) ,
    var(--bg-elev-1) !important;
  border: 1px solid var(--border) !important;
  border-radius: 13px !important;
  padding: 15px 16px 14px !important;
  gap: 9px !important;
  overflow: hidden;
  transition: border-color var(--d-base) var(--ease-out),
              transform var(--d-base) var(--ease-out),
              background var(--d-base) var(--ease-out) !important;
}
.view-autopilot .ap-card::before {
  content: ''; position: absolute; left: 0; top: 11px; bottom: 11px; width: 2px;
  border-radius: 2px;
  background: rgb(var(--accent-rgb));
  opacity: 0; transform: scaleY(0.4); transform-origin: center;
  transition: opacity var(--d-base) var(--ease-out), transform var(--d-base) var(--ease-out);
}
.view-autopilot .ap-card:hover {
  border-color: rgb(var(--accent-rgb) / 0.30) !important;
  transform: translateY(-1px) !important;
  background:
    radial-gradient(420px 120px at 0% 0%, rgb(var(--accent-rgb) / 0.05), transparent 70%),
    var(--bg-elev-1) !important;
}
.view-autopilot .ap-card:hover::before { opacity: 0.85; transform: scaleY(1); }
.view-autopilot .ap-card:active { transform: translateY(0) !important; }

.view-autopilot .ap-card-top { gap: 10px !important; align-items: center; }
.view-autopilot .ap-card-title {
  font-size: 14px !important; font-weight: 600 !important;
  letter-spacing: -0.01em; line-height: 1.32 !important; color: var(--text) !important;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.view-autopilot .ap-card-meta {
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px !important; color: var(--text-dim) !important; margin-top: 1px;
}

/* ── Status pill: colored dot + plain text, refined chip ─────────────── */
.view-autopilot .ap-badge {
  border-radius: 999px;
  font-weight: 600 !important; letter-spacing: 0 !important;
  padding: 3px 9px 3px 7px !important; line-height: 1.4;
}
.view-autopilot .ap-badge::before { opacity: 1; box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / 0); }
.view-autopilot .ap-badge.turnedin::before { box-shadow: 0 0 6px rgba(116,198,154,0.5); }
.view-autopilot .ap-badge.wrote::before    { box-shadow: 0 0 6px rgb(var(--accent-rgb) / 0.45); }
.view-autopilot .ap-badge.stopped::before  { box-shadow: 0 0 6px rgba(223,107,115,0.45); }
.view-autopilot .ap-badge.failed::before   { box-shadow: 0 0 6px rgba(214,168,95,0.45); }
/* the unstyled "Done" outcome - give it a calm neutral pill to match the set */
.view-autopilot .ap-badge.done {
  background: rgba(255,255,255,0.05) !important;
  color: var(--text-muted) !important;
  border-color: var(--border) !important;
}

/* ── Empty state: centered around the brief's calm orb energy ────────── */
.view-autopilot .ap-dash-empty .ap-empty-ico {
  width: 60px; height: 60px; margin: 0 auto 16px;
  display: grid; place-items: center; border-radius: 16px;
  background:
    radial-gradient(circle at 50% 40%, rgb(var(--accent-rgb) / 0.10), transparent 70%),
    rgba(255,255,255,0.02);
  border: 1px solid rgb(var(--accent-rgb) / 0.16);
  color: rgb(var(--accent-rgb)); font-size: 0 !important; opacity: 1 !important;
}
.view-autopilot .ap-dash-empty .ap-empty-ico svg { width: 26px !important; height: 26px !important; }
.view-autopilot .ap-dash-empty p {
  color: var(--text-dim) !important; font-size: 13.5px; line-height: 1.6;
  max-width: 420px; margin: 6px auto 0;
}
.view-autopilot .ap-dash-empty p strong {
  font-family: var(--font-mono); font-size: 12px; font-weight: 600;
  color: var(--accent); background: rgb(var(--accent-rgb) / 0.10);
  border: 1px solid rgb(var(--accent-rgb) / 0.18);
  border-radius: 6px; padding: 1px 6px;
}

/* ── Report detail: a real document view ─────────────────────────────── */
.view-autopilot .ap-report { max-width: 780px; margin: 0 auto; }

.view-autopilot .ap-back {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--text-dim); font-size: 12.5px; font-weight: 600;
  padding: 6px 11px 6px 9px; margin: 0 0 20px -2px;
  border: 1px solid var(--border); border-radius: 999px;
  background: rgba(255,255,255,0.015);
  transition: color var(--d-base) var(--ease-out), border-color var(--d-base) var(--ease-out),
              background var(--d-base) var(--ease-out), transform var(--d-base) var(--ease-out);
}
.view-autopilot .ap-back:hover {
  color: var(--text); border-color: var(--border-strong);
  background: rgba(255,255,255,0.04); transform: translateX(-2px);
}

.view-autopilot .ap-report-head { gap: 9px; margin-bottom: 13px; align-items: center; }
.view-autopilot .ap-report-title {
  font-size: 22px !important; font-weight: 700 !important;
  letter-spacing: -0.02em; line-height: 1.22 !important; color: var(--text);
}
.view-autopilot .ap-report-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 7px;
  font-size: 12.5px; color: var(--text-dim); margin-top: 8px; line-height: 1.5;
}
.view-autopilot .ap-report-meta .ap-meta-ico {
  display: inline-flex; align-items: center; color: var(--text-muted);
}
.view-autopilot .ap-report-meta .ap-meta-ico svg { width: 13px; height: 13px; }
.view-autopilot .ap-report-meta .ap-meta-sep { color: var(--border-strong); margin: 0 1px; }
.view-autopilot .ap-report-meta .ap-meta-instr {
  font-style: italic; color: var(--text-muted);
}

/* Actions toolbar: ONE primary (de-emoji'd → leading line icons via JS) */
.view-autopilot .ap-report-actions {
  gap: 8px; margin: 20px 0 4px;
  padding-bottom: 20px; border-bottom: 1px solid var(--border);
}
.view-autopilot .ap-report-actions .primary-btn,
.view-autopilot .ap-report-actions .ghost-btn {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 600;
  padding: 8px 13px; border-radius: 9px;
}
.view-autopilot .ap-report-actions .primary-btn svg,
.view-autopilot .ap-report-actions .ghost-btn svg { width: 14px; height: 14px; flex: 0 0 14px; }
.view-autopilot .ap-report-actions .ghost-btn {
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border); color: var(--text-muted);
  transition: color var(--d-base) var(--ease-out), border-color var(--d-base) var(--ease-out),
              background var(--d-base) var(--ease-out);
}
.view-autopilot .ap-report-actions .ghost-btn:hover {
  color: var(--text); border-color: rgb(var(--accent-rgb) / 0.30);
  background: rgb(var(--accent-rgb) / 0.05);
}

/* Error callout: calm amber band with leading icon */
.view-autopilot .ap-report-err {
  display: flex; align-items: flex-start; gap: 9px;
  background: rgb(214,168,95,0.08) !important;
  border: 1px solid rgb(214,168,95,0.24) !important;
  border-radius: 11px !important; padding: 11px 13px !important;
  color: var(--warning) !important; font-size: 12.5px; line-height: 1.5;
  margin: 16px 0 0 !important;
}
.view-autopilot .ap-report-err svg { width: 15px; height: 15px; flex: 0 0 15px; margin-top: 1px; }

/* Section label + elevated answer panel */
.view-autopilot .ap-report-label {
  font-family: var(--font-mono); font-size: 10px !important; font-weight: 600 !important;
  letter-spacing: 0.16em !important; color: var(--text-dim) !important;
  margin: 24px 0 10px !important;
}
.view-autopilot .ap-report-answer {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.012), rgba(255,255,255,0)),
    var(--bg-elev-1) !important;
  border: 1px solid var(--border) !important; border-radius: 16px !important;
  padding: 22px 24px !important; font-size: 14px; line-height: 1.7 !important;
  color: var(--text);
}
.view-autopilot .ap-report-answer > :first-child { margin-top: 0; }
.view-autopilot .ap-report-answer > :last-child { margin-bottom: 0; }
.view-autopilot .ap-noans { color: var(--text-dim); font-style: italic; }

/* ── Run modal: mode buttons (calm hairline → accent selected) ───────── */
.run-mode-btn {
  padding: 13px 14px !important;
  background: rgba(255,255,255,0.015) !important;
  transition: border-color var(--d-base) var(--ease-out),
              background var(--d-base) var(--ease-out),
              transform var(--d-base) var(--ease-out) !important;
}
.run-mode-btn:hover {
  border-color: rgb(var(--accent-rgb) / 0.30) !important;
  background: rgb(var(--accent-rgb) / 0.04) !important;
}
.run-mode-btn.selected {
  box-shadow: inset 0 0 0 1px rgb(var(--accent-rgb) / 0.28) !important;
}
.run-mode-btn .rm-icon {
  width: 34px; height: 34px; flex: 0 0 34px;
  border-radius: 9px; background: rgb(var(--accent-rgb) / 0.09);
  border: 1px solid rgb(var(--accent-rgb) / 0.16);
  color: rgb(var(--accent-rgb));
  transition: background var(--d-base) var(--ease-out), border-color var(--d-base) var(--ease-out);
}
.run-mode-btn.selected .rm-icon {
  background: rgb(var(--accent-rgb) / 0.14);
  border-color: rgb(var(--accent-rgb) / 0.30);
}
.run-mode-btn .rm-icon svg { width: 19px !important; height: 19px !important; }
.run-mode-btn .rm-text strong { letter-spacing: -0.01em; }

/* ── Desktop-exclusive gate: finishing touches (orb anim untouched) ───── */
.desktop-exclusive { box-shadow: 0 16px 50px rgba(0,0,0,0.28) !important; }
.desktop-exclusive-badge { border-radius: 999px !important; padding: 5px 12px !important; }
.desktop-exclusive-actions .primary {
  border-radius: 12px !important; padding: 13px 26px !important;
  transition: background var(--d-base) var(--ease-out), transform var(--d-base) var(--ease-out),
              box-shadow var(--d-base) var(--ease-out) !important;
}
.desktop-exclusive-actions .primary:hover { box-shadow: 0 8px 22px rgb(var(--accent-blue-rgb) / 0.30) !important; }
.desktop-exclusive-actions .secondary {
  transition: border-color var(--d-base) var(--ease-out), color var(--d-base) var(--ease-out),
              background var(--d-base) var(--ease-out) !important;
}
.desktop-exclusive-feature {
  padding: 4px 6px; border-radius: 11px;
  transition: transform var(--d-base) var(--ease-out), background var(--d-base) var(--ease-out);
}
.desktop-exclusive-feature:hover { transform: translateY(-2px); background: rgba(255,255,255,0.02); }
.desktop-exclusive-feature:hover .ico {
  background: rgb(var(--accent-rgb) / 0.13) !important;
  border-color: rgb(var(--accent-rgb) / 0.24) !important;
}
.desktop-exclusive-feature .ico {
  transition: background var(--d-base) var(--ease-out), border-color var(--d-base) var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
  .view-autopilot .ap-card,
  .view-autopilot .ap-card::before,
  .view-autopilot .ap-back,
  .run-mode-btn,
  .desktop-exclusive-feature,
  .desktop-exclusive-actions .primary { transition: none !important; }
  .view-autopilot .ap-card:hover,
  .desktop-exclusive-feature:hover { transform: none !important; }
}
/* ===== /FLEET: AUTOPILOT (dashboard, run modal, gate) ===== */


/* ===== FLEET: CONNECTORS ===== */
/* Appended last → wins source-order ties against the earlier "minimal pass"
   override layer. Scoped to the Connectors surface + the school modal only.
   CSS-only: markup (status classes, .dot, chevron SVG, brand glyphs, gate copy)
   already supports every change. Brand glyphs (Gmail/Drive/Classroom emoji) are
   left untouched. Composes ONLY existing :root tokens. */

/* - Section labels: calmer mono chrome, more breathing room above grids - */
.view-connectors .conn-section-title {
  font-size: 10px !important;
  letter-spacing: 0.2em !important;
  opacity: 1 !important;
  color: var(--text-dim) !important;
  padding: 32px 36px 12px !important;
}
.view-connectors .conn-grid + .conn-section-title { padding-top: 36px !important; }

/* - Tile: premium hairline card, soft elevation, refined hover lift - */
.view-connectors .conn-tile {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.030), rgba(255,255,255,0.010)) !important;
  border: 1px solid var(--border) !important;
  border-radius: 16px !important;
  padding: 20px 20px 16px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.03) inset,
    0 1px 2px rgba(0,0,0,0.20);
  transition:
    transform 0.18s var(--ease-out),
    border-color 0.18s var(--ease-out),
    box-shadow 0.18s var(--ease-out);
}
.view-connectors .conn-tile:hover {
  transform: translateY(-2px) !important;
  border-color: rgb(var(--accent-rgb) / 0.34) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.05) inset,
    0 0 0 1px rgb(var(--accent-rgb) / 0.10),
    0 16px 40px -16px rgba(0,0,0,0.55);
}
.view-connectors .conn-tile:active { transform: translateY(-1px) !important; }
/* keep the per-platform mouse-tracking glow, just a touch softer */
.view-connectors .conn-tile::before { transition: opacity 0.25s var(--ease-out); }
.view-connectors .conn-tile:hover::before { opacity: 0.85; }

/* - Header: brand icon chip (glyph kept), name, status - */
.view-connectors .conn-tile-head { gap: 13px; margin-bottom: 13px; }
.view-connectors .conn-tile-icon {
  width: 42px; height: 42px;
  border-radius: 11px;
  background:
    linear-gradient(160deg, var(--accent-color, rgb(var(--accent-rgb) / 0.22)), rgba(255,255,255,0.03)) !important;
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 6px 16px -8px rgba(0,0,0,0.5);
}
.view-connectors .conn-tile-name {
  font-weight: 650 !important;
  font-size: 15px;
  letter-spacing: -0.01em;
  color: var(--text);
}

/* - Status row: clear, legible dot system (one tasteful glow per state) - */
.view-connectors .conn-tile-status {
  font-family: var(--font-mono) !important;
  font-size: 10.5px !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  margin-top: 5px;
  gap: 6px;
}
.view-connectors .conn-tile-status .dot {
  width: 7px; height: 7px;
  position: relative;
}
/* disconnected (default) had no colored rule - give it a real muted, ringed dot */
.view-connectors .conn-tile-status.disconnected { color: var(--text-muted); }
.view-connectors .conn-tile-status.disconnected .dot {
  background: var(--text-dim);
  box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / 0.0);
}
.view-connectors .conn-tile-status.connected .dot {
  background: var(--success);
  box-shadow: 0 0 0 3px rgba(116,198,154,0.16), 0 0 8px rgba(116,198,154,0.55);
}
.view-connectors .conn-tile-status.syncing .dot {
  background: var(--accent);
  box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / 0.16);
}
.view-connectors .conn-tile-status.error .dot {
  background: var(--danger);
  box-shadow: 0 0 0 3px rgba(223,107,115,0.16);
}
.view-connectors .conn-tile-status.coming-soon .dot { background: var(--text-dim); opacity: 0.6; }

/* - Chevron: calm affordance, accent on expand - */
.view-connectors .conn-tile-chev { opacity: 0.45; color: var(--text-dim); }
.view-connectors .conn-tile:hover .conn-tile-chev { opacity: 0.8; }
.view-connectors .conn-tile.expanded .conn-tile-chev { color: rgb(var(--accent-rgb)); opacity: 1; }

/* - Copy blocks - */
.view-connectors .conn-tile-blurb {
  font-size: 12.5px; line-height: 1.55;
  color: var(--text-muted);
  margin: 12px 0 6px;
}
.view-connectors .conn-tile-meta {
  border-top: 1px solid var(--border);
  font-size: 10.5px; letter-spacing: 0.03em;
}

/* - Actions: ONE deep-blue primary, quiet hairline ghosts - */
.view-connectors .conn-tile-actions { gap: 8px; padding-top: 16px; }
.view-connectors .conn-tile-actions button,
.view-connectors .conn-tile-actions a {
  padding: 9px 12px;
  border-radius: 9px;
  font-weight: 600;
}
/* ghosts: hairline → accent border on hover, no fill flood */
.view-connectors .conn-tile-actions button:not(.primary):not(.danger) {
  background: transparent !important;
  border: 1px solid var(--border-strong) !important;
  color: var(--text-muted) !important;
}
.view-connectors .conn-tile-actions button:not(.primary):not(.danger):hover:not(:disabled) {
  border-color: rgb(var(--accent-rgb) / 0.45) !important;
  color: var(--text) !important;
  background: rgb(var(--accent-rgb) / 0.04) !important;
}
/* primary: the single deep-blue fill, calm accent glow on hover */
.view-connectors .conn-tile-actions button.primary,
.view-connectors .conn-tile-actions a.primary {
  background: var(--accent-blue) !important;
  color: #fff !important;
  border: 1px solid transparent !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.10) inset;
}
.view-connectors .conn-tile-actions button.primary:hover:not(:disabled),
.view-connectors .conn-tile-actions a.primary:hover {
  background: rgb(var(--accent-blue-rgb) / 0.92) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.12) inset,
    0 6px 18px -6px rgb(var(--accent-blue-rgb) / 0.55) !important;
  transform: translateY(-1px);
}
.view-connectors .conn-tile-actions button.primary[disabled] {
  background: transparent !important;
  border: 1px solid var(--border) !important;
  color: var(--text-dim) !important;
  box-shadow: none !important;
}
/* danger stays restrained */
.view-connectors .conn-tile-actions button.danger {
  border: 1px solid rgba(223,107,115,0.28) !important;
  color: var(--danger) !important;
  flex: 0 0 auto;
}
.view-connectors .conn-tile-actions button.danger:hover:not(:disabled) {
  background: rgba(223,107,115,0.10) !important;
  border-color: rgba(223,107,115,0.50) !important;
}

/* - Coming-soon badge: calm hairline pill, not a loud tint - */
.view-connectors .conn-tile.coming-soon::after {
  font-size: 9px !important;
  letter-spacing: 0.16em !important;
  background: rgba(255,255,255,0.04) !important;
  color: var(--text-dim) !important;
  border: 1px solid var(--border) !important;
  padding: 3px 7px;
  border-radius: 999px;
}
.view-connectors .conn-tile.coming-soon { opacity: 0.92; }
.view-connectors .conn-tile.coming-soon:hover {
  transform: translateY(-1px) !important;
  border-color: var(--border-strong) !important;
}

/* ── Connect-school modal: premium platform / mode pickers, calm warn ── */

/* platform tiles: hairline cards, brand glyph in a soft chip (glyph kept) */
.school-modal .platform-btn {
  gap: 12px;
  padding: 13px 14px;
  background: rgba(255,255,255,0.022) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
}
.school-modal .platform-btn:hover {
  border-color: rgb(var(--accent-rgb) / 0.40) !important;
  background: rgb(var(--accent-rgb) / 0.05) !important;
  transform: translateY(-1px);
}
.school-modal .platform-btn .pf-icon {
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9px;
  font-size: 19px;
  flex-shrink: 0;
  background: linear-gradient(160deg, rgb(var(--accent-rgb) / 0.16), rgba(255,255,255,0.03));
  border: 1px solid rgba(255,255,255,0.06);
}
.school-modal .pf-name { font-weight: 600; font-size: 13.5px; letter-spacing: -0.005em; }

/* mode picker (Your computer / Cloud): hairline card, accent-ring on hover/selected */
.school-modal .mode-btn {
  padding: 15px 16px;
  background: rgba(255,255,255,0.022) !important;
  border: 1px solid var(--border) !important;
  border-radius: 13px !important;
}
.school-modal .mode-btn:hover {
  border-color: rgb(var(--accent-rgb) / 0.34) !important;
  background: rgb(var(--accent-rgb) / 0.04) !important;
}
.school-modal .mode-btn.selected {
  border-color: rgb(var(--accent-rgb) / 0.50) !important;
  background: rgb(var(--accent-rgb) / 0.07) !important;
  box-shadow: 0 0 0 1px rgb(var(--accent-rgb) / 0.18);
}
.school-modal .mode-title { font-weight: 650; letter-spacing: -0.005em; }

/* warn box: calm amber, icon column already handled globally */
.school-modal .warn-box {
  background: rgba(214,168,95,0.07) !important;
  border: 1px solid rgba(214,168,95,0.22) !important;
  color: var(--text-muted) !important;
  border-radius: 11px !important;
  padding: 12px 13px;
}

/* - LIGHT THEME: mirror the surface upgrades so it stays cohesive - */
body[data-theme="light"] .view-connectors .conn-tile {
  background: #ffffff !important;
  border: 1px solid var(--border-strong) !important;
  box-shadow: 0 1px 2px rgba(40,50,90,0.06);
}
body[data-theme="light"] .view-connectors .conn-tile:hover {
  border-color: rgb(var(--accent-rgb) / 0.34) !important;
  box-shadow:
    0 0 0 1px rgb(var(--accent-rgb) / 0.10),
    0 16px 40px -18px rgba(40,50,90,0.22) !important;
}
body[data-theme="light"] .view-connectors .conn-tile-icon {
  background: linear-gradient(160deg, var(--accent-color, rgb(var(--accent-rgb) / 0.20)), var(--bg-elev-2)) !important;
  border: 1px solid var(--border);
  box-shadow: 0 4px 12px -6px rgba(40,50,90,0.18);
}
body[data-theme="light"] .view-connectors .conn-tile-actions button:not(.primary):not(.danger) {
  border: 1px solid var(--border-strong) !important;
}
body[data-theme="light"] .school-modal .platform-btn,
body[data-theme="light"] .school-modal .mode-btn {
  background: #ffffff !important;
  border: 1px solid var(--border-strong) !important;
}
body[data-theme="light"] .school-modal .platform-btn .pf-icon {
  background: linear-gradient(160deg, rgb(var(--accent-rgb) / 0.14), var(--bg-elev-2));
  border: 1px solid var(--border);
}

/* - Respect reduced motion: kill lifts/transitions on this surface - */
@media (prefers-reduced-motion: reduce) {
  .view-connectors .conn-tile,
  .view-connectors .conn-tile:hover,
  .view-connectors .conn-tile-actions button.primary:hover:not(:disabled),
  .school-modal .platform-btn:hover,
  .school-modal .mode-btn:hover {
    transform: none !important;
  }
  .view-connectors .conn-tile-status.connected .dot { box-shadow: 0 0 0 3px rgba(116,198,154,0.16); }
}
/* ===== /FLEET: CONNECTORS ===== */


/* ===== FLEET: PROJECTS - grid + detail right-rail ===== */
/* Scoped to .view-projects and .view-project. Composes :root tokens only.
   Appended last, so these win source-order ties with earlier !important blocks.
   Goal: refined hairline project-card grid + a clean, scannable detail rail. */

/* ── Grid container: roomy, centered, calm rhythm ───────────────── */
body[data-view="projects"] .projects-page { padding: 32px 32px 84px !important; }
body[data-view="projects"] .projects-grid {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
  gap: 14px !important;
  max-width: 1120px;
  margin: 0 auto;
}

/* ── Project card: hairline tile, one calm hover, accent reveal ─── */
body[data-view="projects"] .project-card {
  position: relative;
  padding: 18px 18px 16px !important;
  background: rgba(255,255,255,0.022) !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  overflow: hidden;
  transition: transform 0.16s ease, border-color 0.16s ease,
              background 0.16s ease, box-shadow 0.16s ease !important;
}
/* top hairline accent bar - fades in on hover (the one tasteful flourish) */
body[data-view="projects"] .project-card::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgb(var(--accent-rgb) / 0.55) 22%,
    rgb(var(--accent-rgb) / 0.55) 78%,
    transparent);
  opacity: 0;
  transition: opacity 0.16s ease;
  pointer-events: none;
}
body[data-view="projects"] .project-card:hover {
  transform: translateY(-2px) !important;
  background: rgb(var(--accent-rgb) / 0.035) !important;
  border-color: rgb(var(--accent-rgb) / 0.26) !important;
  box-shadow: 0 8px 22px -14px rgb(var(--accent-blue-rgb) / 0.45) !important;
}
body[data-view="projects"] .project-card:hover::after { opacity: 1; }
body[data-view="projects"] .project-card:active { transform: translateY(-1px) scale(0.995) !important; }

/* Name - brand serif kept for cohesion, refined size/weight/tracking */
body[data-view="projects"] .project-card .pc-name {
  font-size: 18px !important;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: var(--text);
  margin-bottom: 5px;
  padding-right: 56px; /* clear of the action cluster */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Description - quiet, two-line clamp, reserves rhythm even when empty */
body[data-view="projects"] .project-card .pc-desc {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-muted);
  margin-bottom: 14px;
  min-height: 18px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Stats - clean numeric row with dot separators + tabular figures */
body[data-view="projects"] .project-card .pc-stats {
  display: flex;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 11.5px;
  color: var(--text-dim);
}
body[data-view="projects"] .project-card .pc-stats > span {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  position: relative;
  padding: 0 12px;
}
body[data-view="projects"] .project-card .pc-stats > span:first-child { padding-left: 0; }
body[data-view="projects"] .project-card .pc-stats > span + span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--border-strong);
}
body[data-view="projects"] .project-card .pc-stats strong {
  color: var(--text);
  font-weight: 650;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* Action cluster (pin / delete) - ghost squares, reveal on hover, SVG icons */
body[data-view="projects"] .project-card .pc-actions {
  position: absolute;
  top: 12px; right: 12px;
  display: flex;
  gap: 2px;
  z-index: 2;
}
body[data-view="projects"] .project-card .pc-action {
  width: 28px; height: 28px;
  border-radius: 8px;
  display: grid; place-items: center;
  color: var(--text-dim);
  background: transparent;
  opacity: 0;
  font-size: 0 !important;
  transition: opacity 0.14s ease, background 0.14s ease,
              color 0.14s ease, transform 0.14s ease !important;
}
body[data-view="projects"] .project-card .pc-action svg {
  width: 15px; height: 15px;
  display: block;
  pointer-events: none;
}
body[data-view="projects"] .project-card:hover .pc-action { opacity: 0.6; }
body[data-view="projects"] .project-card .pc-action:hover {
  opacity: 1 !important;
  background: var(--bg-elev-3);
  color: var(--text);
}
body[data-view="projects"] .project-card .pc-action.pin.pinned {
  opacity: 1;
  color: rgb(var(--accent-rgb));
}
body[data-view="projects"] .project-card .pc-action.delete:hover {
  background: rgb(223 107 115 / 0.16);
  color: var(--danger);
}

/* ════════════════════════════════════════════════════════════════
   PROJECT DETAIL - right rail: clean + scannable
   ════════════════════════════════════════════════════════════════ */
body[data-view="project"] .project-page { gap: 30px !important; }

/* Aside cards: flat hairline panel, mono-uppercase chrome header */
body[data-view="project"] .project-aside { gap: 14px; }
body[data-view="project"] .aside-card {
  position: relative;
  background: rgba(255,255,255,0.022) !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  overflow: hidden;
  transition: border-color 0.16s ease;
}
body[data-view="project"] .aside-card::before { display: none !important; } /* drop gradient bar */
body[data-view="project"] .aside-card-header {
  padding: 11px 15px !important;
  border-bottom: 1px solid var(--border) !important;
  font-family: var(--font-mono) !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--text-dim) !important;
}
body[data-view="project"] .aside-card-header .icon-btn {
  width: 24px; height: 24px;
  border-radius: 7px;
  display: grid; place-items: center;
  color: var(--text-dim) !important;
  transition: background 0.14s ease, color 0.14s ease;
}
body[data-view="project"] .aside-card-header .icon-btn:hover {
  background: var(--bg-elev-3);
  color: var(--text) !important;
}

/* Instructions body - comfortable reading block + quiet scrollbar */
body[data-view="project"] #instructions-body {
  padding: 14px 15px !important;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text);
  max-height: 220px;
  overflow-y: auto;
  scrollbar-width: thin;
}
body[data-view="project"] #instructions-body.muted-body {
  color: var(--text-dim);
  font-style: italic;
}
body[data-view="project"] .aside-card-body::-webkit-scrollbar { width: 8px; }
body[data-view="project"] .aside-card-body::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

/* Assignment / scheduled rows - checkbox + scannable title/meta */
body[data-view="project"] .assign-row {
  display: flex;
  align-items: center;
  gap: 11px !important;
  padding: 9px 4px !important;
  margin: 0 -4px;
  border-radius: 8px;
  border-bottom: 1px solid var(--border);
  transition: background 0.14s ease;
}
body[data-view="project"] .assign-row:last-child { border-bottom: none; }
body[data-view="project"] .assign-row:hover { background: rgb(var(--accent-rgb) / 0.04); }
body[data-view="project"] .assign-check {
  width: 18px; height: 18px;
  flex-shrink: 0;
  border: 1.5px solid var(--border-strong);
  border-radius: 6px;
  display: grid; place-items: center;
  color: var(--success);
  font-size: 12px; line-height: 1;
  cursor: pointer;
  transition: border-color 0.14s ease, background 0.14s ease;
}
body[data-view="project"] .assign-check:hover { border-color: var(--success); }
body[data-view="project"] .assign-row.done .assign-check {
  background: var(--success);
  color: #06210f;
  border-color: transparent;
}
body[data-view="project"] .assign-title {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--text);
  line-height: 1.35;
}
body[data-view="project"] .assign-row.done .assign-title {
  text-decoration: line-through;
  color: var(--text-dim) !important;
}
body[data-view="project"] .assign-due {
  font-size: 11.5px !important;
  color: var(--text-dim) !important;
  margin-top: 2px;
  line-height: 1.3;
}
body[data-view="project"] .assign-row .fi-del {
  width: 22px; height: 22px;
  border-radius: 6px;
  flex-shrink: 0;
  color: var(--text-dim);
  font-size: 15px; line-height: 1;
  display: grid; place-items: center;
  transition: background 0.14s ease, color 0.14s ease;
}
body[data-view="project"] .assign-row .fi-del:hover {
  background: rgb(223 107 115 / 0.16);
  color: var(--danger);
}

/* Context section labels - mono-uppercase chrome label */
body[data-view="project"] #context-body .label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 0 0 7px;
  padding-left: 1px;
}
body[data-view="project"] #context-body .label:not(:first-child) { margin-top: 12px; }

/* Context items + file rows - hairline rows, scannable, calm */
body[data-view="project"] .context-item {
  display: flex;
  align-items: center;
  gap: 9px !important;
  padding: 8px 10px !important;
  border-radius: 9px !important;
  background: var(--bg-elev-2) !important;
  border: 1px solid transparent;
  font-size: 12.5px;
  color: var(--text);
  margin-bottom: 5px;
  transition: border-color 0.14s ease, background 0.14s ease;
}
body[data-view="project"] .context-item:hover { border-color: var(--border); }
body[data-view="project"] .context-item svg {
  width: 14px; height: 14px;
  flex-shrink: 0;
  color: var(--text-muted);
}
body[data-view="project"] .file-item .fi-name {
  flex: 1; min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body[data-view="project"] .file-item .fi-meta {
  color: var(--text-dim);
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
body[data-view="project"] .file-item .fi-del {
  width: 20px; height: 20px;
  border-radius: 6px;
  flex-shrink: 0;
  color: var(--text-dim);
  font-size: 14px; line-height: 1;
  display: grid; place-items: center;
  transition: background 0.14s ease, color 0.14s ease;
}
body[data-view="project"] .file-item .fi-del:hover {
  background: rgb(223 107 115 / 0.16);
  color: var(--danger);
}

/* Dropzone - calm dashed affordance */
body[data-view="project"] .dropzone {
  margin-top: 8px;
  padding: 13px 12px;
  border: 1px dashed var(--border-strong);
  border-radius: 10px;
  text-align: center;
  font-size: 12px;
  color: var(--text-dim);
  transition: border-color 0.14s ease, background 0.14s ease, color 0.14s ease;
}
body[data-view="project"] .dropzone:hover {
  color: var(--text);
  border-color: rgb(var(--accent-rgb) / 0.4);
  background: rgb(var(--accent-rgb) / 0.04);
}
body[data-view="project"] .dropzone.drag {
  border-color: rgb(var(--accent-rgb));
  background: rgb(var(--accent-rgb) / 0.08);
  color: rgb(var(--accent-rgb));
}

/* Suggestion chips - calm pill, leading accent dot (reinforce existing) */
body[data-view="project"] .suggestion-chip {
  border-radius: 999px !important;
  border: 1px solid var(--border) !important;
  background: rgba(255,255,255,0.02) !important;
  font-size: 12.5px !important;
  color: var(--text-muted) !important;
  padding: 8px 14px !important;
  transition: border-color 0.14s ease, background 0.14s ease, color 0.14s ease !important;
}
body[data-view="project"] .suggestion-chip:hover {
  border-color: rgb(var(--accent-rgb) / 0.32) !important;
  background: rgb(var(--accent-rgb) / 0.06) !important;
  color: var(--text) !important;
  transform: none !important;
}

/* Recents - hairline rows, accent-tint hover */
body[data-view="project"] .recent-card {
  border-radius: 11px !important;
  border: 1px solid var(--border) !important;
  background: rgba(255,255,255,0.022) !important;
  transition: border-color 0.14s ease, background 0.14s ease, transform 0.14s ease !important;
}
body[data-view="project"] .recent-card:hover {
  border-color: rgb(var(--accent-rgb) / 0.24) !important;
  background: rgb(var(--accent-rgb) / 0.035) !important;
  transform: translateX(2px) !important;
}
body[data-view="project"] .recent-card .recent-icon {
  background: var(--bg-elev-3);
  color: var(--text-muted);
  transition: color 0.14s ease;
}
body[data-view="project"] .recent-card:hover .recent-icon { color: rgb(var(--accent-rgb)); }
body[data-view="project"] .recents-empty {
  border-radius: 11px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.018);
  color: var(--text-dim);
}

/* Respect reduced motion within this surface */
@media (prefers-reduced-motion: reduce) {
  body[data-view="projects"] .project-card,
  body[data-view="projects"] .project-card:hover,
  body[data-view="projects"] .project-card:active,
  body[data-view="project"] .recent-card,
  body[data-view="project"] .recent-card:hover {
    transform: none !important;
  }
}
/* ===== /FLEET: PROJECTS - grid + detail right-rail ===== */


/* ===== FLEET: MEMORIES feed + import ===== */
/* Scoped to the Memories feed + import modal. Appends last, so !important is
   used only where it must win over the earlier calm-override block. Tokens only:
   --accent-rgb (imported/auto), --success (fact), --warning (preference),
   --accent-blue, hairlines, --r-*. Calm, scannable, single accent per atom. */

/* ── Feed canvas ─────────────────────────────────────────── */
.view-memories .mem-feed { padding: 20px 32px 64px; gap: 8px; }

/* ── Filter bar: quiet hairline segs, accent-tinted active ── */
.view-memories .mem-feed-bar { gap: 6px; padding: 12px 32px 14px; }
.view-memories .mem-feed-bar .seg-btn {
  background: rgba(255,255,255,0.022); color: var(--text-dim);
  border: 1px solid var(--border); font-size: 12px;
  padding: 6px 13px; border-radius: 999px;
  transition: color .14s ease, border-color .14s ease, background .14s ease;
}
.view-memories .mem-feed-bar .seg-btn:hover {
  color: var(--text-muted); border-color: rgb(var(--accent-rgb) / 0.22);
}
.view-memories .mem-feed-bar .seg-btn.active {
  background: rgb(var(--accent-rgb) / 0.10) !important;
  color: var(--text) !important;
  border-color: rgb(var(--accent-rgb) / 0.28) !important;
  font-weight: 600;
}
.view-memories .mem-feed-search {
  min-width: 230px; padding: 8px 13px; border-radius: var(--r-md);
  background: rgba(255,255,255,0.022); border: 1px solid var(--border);
  transition: border-color .14s ease, background .14s ease;
}
.view-memories .mem-feed-search:hover { border-color: rgb(var(--accent-rgb) / 0.20); }
.view-memories .mem-feed-search:focus {
  border-color: rgb(var(--accent-rgb) / 0.42) !important;
  background: rgba(255,255,255,0.04);
}

/* ── Atom: hairline card with a kind-keyed accent rail ────── */
.view-memories .mem-atom {
  --mem-accent: var(--accent-rgb);                 /* default = imported/auto blue */
  position: relative; isolation: isolate;
  align-items: flex-start; gap: 13px;
  padding: 13px 16px 13px 18px;
  border-radius: 12px !important;
  background: rgba(255,255,255,0.022) !important;
  border: 1px solid var(--border) !important;
  /* overflow:hidden zeroes a flex item's automatic min-size — without
     flex-shrink:0 the fixed-height .mem-feed column SQUASHES every atom to
     fit (≈32px rows, meta hidden below the fold) instead of scrolling. */
  flex-shrink: 0;
  overflow: hidden;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
/* left kind rail - fades in on hover, color follows --mem-accent */
.view-memories .mem-atom::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; border-radius: 3px 0 0 3px;
  background: linear-gradient(180deg,
    rgb(var(--mem-accent) / 0.95), rgb(var(--mem-accent) / 0.35));
  opacity: 0; transition: opacity .15s ease; z-index: 1;
}
.view-memories .mem-atom:hover {
  transform: none !important;
  background: rgba(255,255,255,0.035) !important;
  border-color: rgb(var(--mem-accent) / 0.24) !important;
}
.view-memories .mem-atom:hover::before { opacity: 1; }

/* per-kind accent channel (drives rail + badge) */
.view-memories .mem-atom:has(.mem-atom-kind.fact)       { --mem-accent: 116 198 154; }
.view-memories .mem-atom:has(.mem-atom-kind.preference) { --mem-accent: 214 168 95; }
.view-memories .mem-atom:has(.mem-atom-kind.imported)   { --mem-accent: var(--accent-rgb); }
.view-memories .mem-atom:has(.mem-atom-kind.auto)       { --mem-accent: var(--accent-rgb); }

/* ── Kind badge: soft ring, line-icon, calm tint ─────────── */
.view-memories .mem-atom-kind {
  width: 32px; height: 32px; border-radius: 9px;       /* squircle, not circle */
  flex-shrink: 0; margin-top: 1px;
  display: flex; align-items: center; justify-content: center;
  background: rgb(var(--mem-accent) / 0.11) !important;
  color: rgb(var(--mem-accent)) !important;
  border: 1px solid rgb(var(--mem-accent) / 0.22);
  box-shadow: none !important;
}
.view-memories .mem-atom-kind svg {
  width: 16px; height: 16px; stroke-width: 1.85;
}
.view-memories .mem-atom-kind.fact       { color: var(--success) !important; }
.view-memories .mem-atom-kind.preference { color: var(--warning) !important; }
.view-memories .mem-atom-kind.imported,
.view-memories .mem-atom-kind.auto       { color: rgb(var(--accent-rgb)) !important; }

/* ── Body: readable text, scannable meta with dot leader ─── */
.view-memories .mem-atom-body { padding-top: 2px; }
.view-memories .mem-atom-text {
  font-size: 13.5px; line-height: 1.55; color: var(--text);
  letter-spacing: -0.005em;
}
.view-memories .mem-atom-meta {
  margin-top: 7px; gap: 8px; font-size: 11.5px; color: var(--text-dim);
}
.view-memories .mem-atom-meta > span:not(.mem-atom-tag) {
  position: relative; padding-left: 13px;
}
.view-memories .mem-atom-meta > span:not(.mem-atom-tag)::before {
  content: ''; position: absolute; left: 0; top: 50%;
  width: 3px; height: 3px; margin-top: -1.5px; border-radius: 50%;
  background: currentColor; opacity: 0.5;
}
/* if the tag is absent, the leading dot would float - only show it between items */
.view-memories .mem-atom-meta > span:first-child:not(.mem-atom-tag) { padding-left: 0; }
.view-memories .mem-atom-meta > span:first-child:not(.mem-atom-tag)::before { display: none; }

.view-memories .mem-atom-tag {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgb(var(--mem-accent) / 0.09) !important;
  color: rgb(var(--mem-accent)) !important;
  border: 1px solid rgb(var(--mem-accent) / 0.18);
  padding: 2px 9px; border-radius: 999px;
  font-size: 10px; letter-spacing: 0.05em !important; font-weight: 600;
}
.view-memories .mem-atom-tag::before {
  content: ''; width: 4px; height: 4px; border-radius: 50%;
  background: currentColor; flex: 0 0 4px;
}

/* ── Actions: ghost icon buttons, reveal on hover ────────── */
.view-memories .mem-atom-actions { gap: 2px; margin-top: 1px; }
.view-memories .mem-atom-actions button {
  width: 28px; height: 28px; padding: 0; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-dim); background: transparent; border: 1px solid transparent;
  transition: color .12s ease, background .12s ease, border-color .12s ease;
}
.view-memories .mem-atom-actions button svg { width: 15px; height: 15px; stroke-width: 1.85; }
.view-memories .mem-atom-actions button:hover {
  color: var(--text); background: rgba(255,255,255,0.05);
  border-color: var(--border);
}
.view-memories .mem-atom-actions button[data-act="del"]:hover {
  color: var(--danger); background: rgba(223,107,115,0.10);
  border-color: rgba(223,107,115,0.24);
}

/* ── Empty state: line brain in soft accent halo ─────────── */
.view-memories .mem-empty .empty-icon {
  width: 60px; height: 60px;
  background: rgb(var(--accent-rgb) / 0.10);
  border: 1px solid rgb(var(--accent-rgb) / 0.20);
  color: rgb(var(--accent-rgb)); box-shadow: none;
}
.view-memories .mem-empty .empty-icon svg { width: 28px; height: 28px; stroke-width: 1.7; }
.view-memories .mem-empty h3 { font-weight: 650; letter-spacing: -0.02em; }

/* ════════════════ IMPORT MODAL - premium stepped flow ═════════════ */
.mem-import-modal { max-width: 600px; }

/* connected numbered steps: a hairline guide threads the badges */
.mem-import-modal .mem-step { position: relative; margin: 18px 0; padding-left: 0; }
.mem-import-modal .mem-step-row { gap: 11px; margin-bottom: 11px; }
.mem-import-modal .mem-step:not(:last-of-type) .mem-num::after {
  content: ''; position: absolute; left: 11px; top: 26px; bottom: -14px;
  width: 1px; background: linear-gradient(180deg, var(--border), transparent);
}
.mem-import-modal .mem-num {
  position: relative; width: 23px; height: 23px; border-radius: 7px;
  background: rgb(var(--accent-rgb) / 0.12) !important;
  border: 1px solid rgb(var(--accent-rgb) / 0.28) !important;
  color: rgb(var(--accent-rgb)) !important;
  font-size: 11px; font-weight: 700; font-family: var(--font-mono, ui-monospace, monospace);
}
.mem-import-modal .mem-step-label { font-size: 13px; font-weight: 550; letter-spacing: -0.005em; }

/* codebox: terminal-calm, copy chip aligned to its corner */
.mem-import-modal .mem-codebox {
  background: rgba(255,255,255,0.022); border: 1px solid var(--border);
  border-radius: 10px !important; padding: 14px 16px;
  margin-left: 34px;                              /* align under step label */
}
.mem-import-modal .mem-codebox pre {
  font-size: 12px; line-height: 1.55; color: var(--text-muted);
  padding-right: 84px;
}
.mem-import-modal .mem-copy {
  top: 11px; right: 11px; padding: 6px 11px; border-radius: 8px;
  background: rgba(255,255,255,0.05); border: 1px solid var(--border);
  color: var(--text-muted); font-size: 11.5px; font-weight: 500;
  transition: color .14s ease, background .14s ease, border-color .14s ease;
}
.mem-import-modal .mem-copy:hover {
  background: rgb(var(--accent-rgb) / 0.12); color: rgb(var(--accent-rgb));
  border-color: rgb(var(--accent-rgb) / 0.32);
}
.mem-import-modal .mem-copy.copied {
  background: rgba(116,198,154,0.14); color: var(--success);
  border-color: rgba(116,198,154,0.3);
}

/* paste field + source select share the calm hairline field language */
.mem-import-modal #mem-paste {
  margin-left: 34px; width: calc(100% - 34px);
  min-height: 132px; border-radius: 10px;
  background: rgba(255,255,255,0.022); border: 1px solid var(--border);
}
.mem-import-modal #mem-paste:focus { border-color: rgb(var(--accent-rgb) / 0.42); }
.mem-import-modal .mem-source-row { margin-left: 34px; margin-top: 11px; }
.mem-import-modal .mem-source-row select {
  background: rgba(255,255,255,0.03); border: 1px solid var(--border);
  border-radius: 8px; padding: 6px 11px;
  transition: border-color .14s ease;
}
.mem-import-modal .mem-source-row select:hover { border-color: rgb(var(--accent-rgb) / 0.28); }

/* ── Atom entrance: calm staggered fade + rise (replays on each render) ── */
.view-memories .mem-feed .mem-atom {
  animation: memAtomIn .42s cubic-bezier(0.16,1,0.3,1) both;
  animation-delay: calc(var(--i, 0) * 28ms);
}
@keyframes memAtomIn {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: none; }
}

/* ── Loading skeleton: ghost atoms under one soft shimmer ──────────────── */
.view-memories .mem-skel-wrap {
  display: flex; flex-direction: column; gap: 8px;
  animation: memSkelFade .22s ease both;
}
@keyframes memSkelFade { from { opacity: 0; } to { opacity: 1; } }
.view-memories .mem-atom-skel {
  display: flex; align-items: flex-start; gap: 13px;
  padding: 13px 16px 13px 18px;
  border-radius: 12px;
  background: rgba(255,255,255,0.018);
  border: 1px solid var(--border);
}
.view-memories .mem-skel-badge {
  width: 32px; height: 32px; border-radius: 9px;
  flex-shrink: 0; margin-top: 1px;
}
.view-memories .mem-skel-body {
  flex: 1; min-width: 0; padding-top: 4px;
  display: flex; flex-direction: column; gap: 9px;
}
.view-memories .mem-skel-line { height: 11px; border-radius: 6px; margin: 0; }
.view-memories .mem-skel-line.short { height: 9px; opacity: 0.7; }

@media (prefers-reduced-motion: reduce) {
  .view-memories .mem-atom,
  .view-memories .mem-atom::before,
  .view-memories .mem-atom-actions button,
  .mem-import-modal .mem-copy { transition: none; }
  .view-memories .mem-feed .mem-atom { animation: none; }
  .view-memories .mem-skel-wrap { animation: none; }
  .view-memories .mem-atom-skel .skeleton { animation: none; }
}
/* ===== /FLEET: MEMORIES feed + import ===== */


/* ===== FLEET: SETTINGS ===== */
/* Scope: Settings surface only - tabs, rows, toggles, segmented controls,
   billing plan-hero, usage bars. Composes existing :root tokens only.
   Appended last on purpose: re-asserts the calm-pass values we want and
   sharpens them to flagship quality. Light theme kept correct below. */

/* ── Tabs: crisp rail, premium active indicator ─────────────────────── */
body[data-view="settings"] .settings-tabs {
  padding: 16px 10px 64px !important;
  gap: 1px;
}
body[data-view="settings"] .settings-tab {
  position: relative;
  padding: 9px 12px 9px 15px !important;
  font-size: 10.5px !important;
  letter-spacing: 0.085em !important;
  border-radius: 8px !important;
  color: var(--text-dim) !important;
  transition: color var(--d-fast) var(--ease-out),
              background var(--d-fast) var(--ease-out);
}
body[data-view="settings"] .settings-tab:hover {
  background: rgba(255,255,255,0.035) !important;
  color: var(--text-muted) !important;
}
body[data-view="settings"] .settings-tab.active {
  background: rgb(var(--accent-rgb) / 0.07) !important;
  color: var(--text) !important;
  box-shadow: none !important;
}
/* Hairline accent indicator on the active tab - calm, no glow */
body[data-view="settings"] .settings-tab.active::before {
  content: "";
  position: absolute;
  left: 4px; top: 50%;
  width: 2px; height: 13px;
  transform: translateY(-50%);
  border-radius: 999px;
  background: rgb(var(--accent-rgb) / 0.85);
}
body[data-view="settings"] .settings-tabs-divider {
  font-size: 9px !important;
  letter-spacing: 0.16em !important;
  opacity: 0.5;
  padding: 16px 14px 8px !important;
  margin-top: 8px;
}

/* ── Pane rhythm + section titles ───────────────────────────────────── */
body[data-view="settings"] .settings-pane { padding: 34px 46px 96px; }
body[data-view="settings"] .set-section-title {
  margin: 34px 0 14px !important;
}
body[data-view="settings"] .set-section-title:first-child { margin-top: 4px !important; }

/* ── Rows: calm hairlines, balanced gutters, label clarity ──────────── */
body[data-view="settings"] .set-row {
  gap: 32px !important;
  padding: 17px 0 !important;
  border-bottom: 1px solid rgba(255,255,255,0.045) !important;
}
body[data-view="settings"] .set-row:last-child { border-bottom: 0 !important; }
body[data-view="settings"] .set-label {
  font-size: 13.5px !important;
  font-weight: 500 !important;
  letter-spacing: -0.005em !important;
}
body[data-view="settings"] .set-sub {
  font-size: 12px !important;
  line-height: 1.55 !important;
  color: var(--text-dim) !important;
  max-width: 560px;
}

/* ── iOS toggle: refined track + knob, focus ring ───────────────────── */
body[data-view="settings"] .set-toggle {
  width: 40px; height: 23px;
  background: rgba(255,255,255,0.055);
  border: 1px solid var(--border);
  transition: background 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}
body[data-view="settings"] .set-toggle .seg-knob {
  top: 2px; left: 2px; width: 17px; height: 17px;
  background: var(--text-dim);
  box-shadow: 0 1px 2px rgba(0,0,0,0.25);
  transition: transform 0.24s cubic-bezier(0.34, 1.4, 0.64, 1), background 0.2s;
}
body[data-view="settings"] .set-toggle.on {
  background: var(--accent-blue) !important;
  border-color: transparent;
}
body[data-view="settings"] .set-toggle.on .seg-knob {
  left: 2px;
  transform: translateX(17px);
  background: #fff;
}
body[data-view="settings"] .set-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / 0.28);
}

/* ── Segmented controls (Appearance / Voice speed) ──────────────────── */
body[data-view="settings"] .seg-group {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  padding: 3px;
  gap: 2px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.18);
}
body[data-view="settings"] .seg-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 13px !important;
  font-family: var(--font-sans) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--text-dim) !important;
  border-radius: 6px !important;
  transition: color var(--d-fast) var(--ease-out),
              background var(--d-fast) var(--ease-out);
}
body[data-view="settings"] .seg-btn svg {
  width: 14px; height: 14px; opacity: 0.85;
}
body[data-view="settings"] .seg-btn:hover { color: var(--text-muted) !important; }
body[data-view="settings"] .seg-btn.active {
  background: rgb(var(--accent-rgb) / 0.12) !important;
  color: var(--text) !important;
  font-weight: 600 !important;
  box-shadow: inset 0 0 0 1px rgb(var(--accent-rgb) / 0.22);
}

/* ── Billing: plan-hero ─────────────────────────────────────────────── */
body[data-view="settings"] .plan-hero {
  position: relative;
  gap: 18px;
  padding: 22px 24px !important;
  margin-bottom: 22px;
  background:
    linear-gradient(135deg, rgb(var(--accent-rgb) / 0.07), rgb(var(--accent-blue-rgb) / 0.03)) !important;
  border: 1px solid rgb(var(--accent-rgb) / 0.20) !important;
  border-radius: 14px !important;
  overflow: hidden;
}
/* faint corner light - single, calm, no animation */
body[data-view="settings"] .plan-hero::after {
  content: "";
  position: absolute;
  top: -40%; right: -10%;
  width: 220px; height: 220px;
  background: radial-gradient(circle, rgb(var(--accent-rgb) / 0.10), transparent 65%);
  pointer-events: none;
}
/* keep the // CURRENT PLAN mono chip, refine it */
body[data-view="settings"] .plan-hero::before {
  font-size: 9px !important;
  letter-spacing: 0.16em !important;
}
/* orb-style plan glyph */
body[data-view="settings"] .plan-hero-icon {
  position: relative;
  width: 52px; height: 52px;
  flex-shrink: 0;
  background:
    radial-gradient(circle at 50% 45%, rgb(var(--accent-rgb) / 0.55) 0%, rgb(var(--accent-blue-rgb) / 0.22) 55%, transparent 72%);
  color: #fff;
}
body[data-view="settings"] .plan-hero-icon::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 1px solid rgb(var(--accent-rgb) / 0.45);
}
body[data-view="settings"] .plan-hero-icon svg { width: 24px; height: 24px; position: relative; }
body[data-view="settings"] .plan-hero-title {
  font-size: 21px !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
}
body[data-view="settings"] .plan-hero-sub {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.02em !important;
  color: var(--text-dim) !important;
  margin-top: 5px !important;
}
body[data-view="settings"] .plan-hero .primary-btn {
  background: var(--accent-blue) !important;
  color: #fff !important;
  align-self: center;
}

/* ── Usage bars: premium track + gradient fill ──────────────────────── */
body[data-view="settings"] .usage-row {
  grid-template-columns: 220px 1fr 84px;
  gap: 18px;
  padding: 16px 0 !important;
  border-bottom: 1px solid rgba(255,255,255,0.045);
}
body[data-view="settings"] .usage-row:last-child { border-bottom: 0; }
body[data-view="settings"] .usage-label {
  font-size: 13.5px; font-weight: 600; letter-spacing: -0.005em;
}
body[data-view="settings"] .usage-sub { font-size: 11.5px; color: var(--text-dim); margin-top: 3px; }
body[data-view="settings"] .usage-bar {
  height: 7px;
  background: rgba(255,255,255,0.055);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.22);
}
body[data-view="settings"] .usage-fill {
  background: linear-gradient(90deg, rgb(var(--accent-rgb)) 0%, rgb(var(--accent-blue-rgb)) 100%);
  box-shadow: 0 0 8px rgb(var(--accent-rgb) / 0.25);
  min-width: 7px;
}
body[data-view="settings"] .usage-pct {
  font-family: var(--font-mono);
  font-size: 11.5px; font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

/* ════════ LIGHT THEME CORRECTNESS ════════ */
body[data-theme="light"][data-view="settings"] .settings-tab { color: var(--text-muted) !important; }
body[data-theme="light"][data-view="settings"] .settings-tab:hover {
  background: rgb(var(--accent-rgb) / 0.07) !important; color: var(--text) !important;
}
body[data-theme="light"][data-view="settings"] .settings-tab.active {
  background: rgb(var(--accent-rgb) / 0.10) !important; color: var(--text) !important;
}
body[data-theme="light"][data-view="settings"] .settings-tab.active::before { background: var(--accent-blue); }
body[data-theme="light"][data-view="settings"] .settings-tabs-divider { color: var(--text-dim) !important; }

body[data-theme="light"][data-view="settings"] .set-row { border-bottom: 1px solid var(--border) !important; }
body[data-theme="light"][data-view="settings"] .set-sub { color: var(--text-dim) !important; }

body[data-theme="light"][data-view="settings"] .set-toggle {
  background: rgba(20,22,40,0.08);
  border: 1px solid var(--border-strong);
}
body[data-theme="light"][data-view="settings"] .set-toggle .seg-knob { background: #fff; box-shadow: 0 1px 3px rgba(40,50,90,0.25); }
body[data-theme="light"][data-view="settings"] .set-toggle.on { background: var(--accent-blue) !important; }

body[data-theme="light"][data-view="settings"] .seg-group {
  background: rgb(20,22,40,0.03);
  border: 1px solid var(--border-strong);
  box-shadow: inset 0 1px 2px rgba(40,50,90,0.06);
}
body[data-theme="light"][data-view="settings"] .seg-btn { color: var(--text-muted) !important; }
body[data-theme="light"][data-view="settings"] .seg-btn.active {
  background: rgb(var(--accent-rgb) / 0.12) !important; color: var(--text) !important;
  box-shadow: inset 0 0 0 1px rgb(var(--accent-rgb) / 0.30);
}

body[data-theme="light"][data-view="settings"] .plan-hero {
  background: linear-gradient(135deg, rgb(var(--accent-rgb) / 0.08), rgb(var(--accent-rgb) / 0.03)) !important;
  border: 1px solid rgb(var(--accent-rgb) / 0.22) !important;
}
body[data-theme="light"][data-view="settings"] .plan-hero::before { background: var(--bg-elev-1) !important; }
body[data-theme="light"][data-view="settings"] .plan-hero::after {
  background: radial-gradient(circle, rgb(var(--accent-rgb) / 0.10), transparent 65%);
}
body[data-theme="light"][data-view="settings"] .plan-hero-icon {
  background: radial-gradient(circle at 50% 45%, rgb(var(--accent-rgb) / 0.45) 0%, rgb(var(--accent-rgb) / 0.16) 55%, transparent 72%);
}
body[data-theme="light"][data-view="settings"] .plan-hero-icon::before { border-color: rgb(var(--accent-rgb) / 0.40); }
body[data-theme="light"][data-view="settings"] .plan-hero-sub { color: var(--text-dim) !important; }
body[data-theme="light"][data-view="settings"] .plan-hero .primary-btn { background: var(--accent-blue) !important; color: #fff !important; }

body[data-theme="light"][data-view="settings"] .usage-bar {
  background: rgb(20,22,40,0.06);
  box-shadow: inset 0 1px 2px rgba(40,50,90,0.07);
}
body[data-theme="light"][data-view="settings"] .usage-fill {
  box-shadow: 0 0 6px rgb(var(--accent-rgb) / 0.20);
}

/* Reduced motion: drop knob spring + bar shimmer transitions */
@media (prefers-reduced-motion: reduce) {
  body[data-view="settings"] .set-toggle .seg-knob,
  body[data-view="settings"] .set-toggle,
  body[data-view="settings"] .seg-btn,
  body[data-view="settings"] .settings-tab { transition: none !important; }
}
/* ===== /FLEET: SETTINGS ===== */


/* ===== FLEET: Sidebar + command palette + model picker ===== */
/* Chrome that frames every screen: calm, consistent, crisp. CSS-only.
   Composes ONLY :root tokens. Appended last → authoritative over the
   earlier "refined chrome" pass (matches its !important specificity). */

/* ── Sidebar shell: steady vertical rhythm, hairline frame ───────── */
.sidebar {
  gap: 14px !important;
  padding: 18px 12px 14px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.018) 0%, rgba(255,255,255,0.004) 220px, transparent 60%) !important;
  border-right: 1px solid var(--border) !important;
}

/* Brand lockup: quiet, no divider, orb + wordmark sit on one calm line */
.sidebar .brand {
  border-bottom: 0 !important;
  padding: 4px 8px 12px 8px !important;
  gap: 11px !important;
  align-items: center;
}
.sidebar .brand-sub {
  color: var(--text-dim) !important;
  font-size: 10.5px !important;
  letter-spacing: 0.02em !important;
  margin-top: 3px;
}

/* ── Section headers: quiet mono-uppercase chrome, even cadence ───── */
.sidebar .sidebar-section { gap: 4px !important; }
.sidebar .sidebar-header,
.sidebar .sidebar-section .sidebar-header {
  font-family: var(--font-mono) !important;
  font-size: 9.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--text-dim) !important;
  opacity: 0.62 !important;
  padding: 12px 9px 5px !important;
  margin-bottom: 0 !important;
}
.sidebar .sidebar-header span { padding-left: 0 !important; }
.sidebar .sidebar-header span::before { display: none !important; }
/* "Pinned" + button: quiet, line-icon weight, calm hover */
.sidebar .sidebar-header .icon-btn {
  width: 20px; height: 20px;
  font-size: 15px; line-height: 1;
  color: var(--text-dim) !important; opacity: 0.7;
  border-radius: var(--r-sm);
  transition: background var(--d-fast) var(--ease-out), color var(--d-fast) var(--ease-out), opacity var(--d-fast) var(--ease-out);
}
.sidebar .sidebar-header .icon-btn:hover {
  background: rgb(var(--accent-rgb) / 0.10) !important;
  color: var(--accent) !important; opacity: 1;
}

/* ── Primary nav: calm chrome rows, crisp active state ───────────── */
.sidebar .nav-section { gap: 1px !important; }
.sidebar .nav-item {
  position: relative;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.06em !important;
  font-weight: 500 !important;
  color: var(--text-muted) !important;
  padding: 8px 12px !important;
  gap: 11px !important;
  border-radius: var(--r-sm) !important;
  min-height: 34px;
  border-left: 0 !important;
  transition: background var(--d-fast) var(--ease-out),
              color var(--d-fast) var(--ease-out) !important;
}
.sidebar .nav-item svg {
  width: 15px; height: 15px; flex: 0 0 15px;
  opacity: 0.78; stroke-width: 1.8;
  transition: opacity var(--d-fast) var(--ease-out), color var(--d-fast) var(--ease-out);
}
.sidebar .nav-item:hover {
  background: rgba(255,255,255,0.045) !important;
  color: var(--text) !important;
  transform: none !important;
  border-left: 0 !important;
}
.sidebar .nav-item:hover svg { opacity: 1; }
.sidebar .nav-item.active {
  background: rgb(var(--accent-rgb) / 0.10) !important;
  color: var(--text) !important;
  border-left: 0 !important;
}
.sidebar .nav-item.active svg { opacity: 1; color: var(--accent) !important; }
/* crisp 2px accent bar, vertically inset for a tidy notch */
.sidebar .nav-item.active::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 0 !important; top: 9px !important; bottom: 9px !important;
  width: 2px !important; height: auto !important;
  border-radius: 999px !important;
  background: var(--accent) !important;
  transform: none !important;
  box-shadow: 0 0 8px rgb(var(--accent-rgb) / 0.45);
}
.sidebar .nav-item:not(.active)::before { height: 0 !important; }

/* Trailing chips: ⌘K hint + counts → quiet hairline, consistent metrics */
.sidebar .nav-item .nav-kbd {
  margin-left: auto;
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  letter-spacing: 0.08em;
  color: var(--text-dim) !important;
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid var(--border) !important;
  padding: 2px 6px !important;
  border-radius: var(--r-xs) !important;
  line-height: 1;
}
.sidebar .nav-item:hover .nav-kbd { color: var(--text-muted) !important; border-color: var(--border-strong) !important; }
.sidebar .nav-item .nav-count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 9.5px !important; font-weight: 600 !important;
  letter-spacing: 0.04em;
  padding: 1px 7px !important;
  border-radius: 999px !important;
  background: rgb(var(--accent-rgb) / 0.12) !important;
  color: var(--accent) !important;
}
.sidebar .nav-item.active .nav-count { background: rgb(var(--accent-rgb) / 0.18) !important; }

/* Customize-sidebar row: same chrome weight, gear nudges, calm */
.sidebar .sidebar-customize {
  font-family: var(--font-mono) !important;
  font-size: 10.5px !important;
  letter-spacing: 0.10em !important;
  color: var(--text-dim) !important;
  padding: 7px 12px !important;
  border-radius: var(--r-sm) !important;
  margin-top: 4px !important;
  opacity: 0.72;
  transition: background var(--d-fast) var(--ease-out), color var(--d-fast) var(--ease-out), opacity var(--d-fast) var(--ease-out);
}
.sidebar .sidebar-customize:hover { background: rgba(255,255,255,0.04) !important; color: var(--text-muted) !important; opacity: 1; }
.sidebar .sidebar-customize.active { color: var(--accent) !important; opacity: 1; }
.sidebar .sidebar-customize svg { width: 14px; height: 14px; opacity: 0.85; }

/* ── Pinned projects + recents: tidy rows, leading dot, calm ─────── */
.sidebar .sidebar-scroll { display: flex; flex-direction: column; gap: 2px; }
.sidebar .project-list, .sidebar .upcoming-list { gap: 1px !important; }

.sidebar .project-item {
  position: relative;
  padding: 7px 10px 7px 11px !important;
  border-radius: var(--r-sm) !important;
  border: 1px solid transparent !important;
  background: none !important;
  transition: background var(--d-fast) var(--ease-out), color var(--d-fast) var(--ease-out) !important;
}
.sidebar .project-item:hover { background: rgba(255,255,255,0.04) !important; transform: none !important; }
.sidebar .project-item .name { font-size: 12.5px !important; font-weight: 500 !important; letter-spacing: 0; }
.sidebar .project-item .count {
  font-family: var(--font-mono);
  font-size: 9.5px !important;
  background: rgba(255,255,255,0.05) !important;
  color: var(--text-dim) !important;
  border-radius: 999px !important;
  padding: 1px 7px !important;
}
/* Pinned sidebar rows carry an absolutely-positioned 📌 unpin button (right:4px,
   24px wide). The sidebar `padding` shorthand above resets the right reserve to
   10px, so the count badge slid underneath the pin - pin, "1", and the native
   tooltip all stacked on the same spot. Reserve the pin's lane (only when a pin
   exists) and keep the count from ever reaching into it. */
.sidebar .project-item:has(.pi-unpin) { padding-right: 32px !important; }
.sidebar .project-item:has(.pi-unpin) .count { margin-right: 2px; flex-shrink: 0; }
.sidebar .project-item.active {
  background: rgb(var(--accent-rgb) / 0.08) !important;
  border-color: transparent !important;
}
.sidebar .project-item.active .name {
  background: none !important;
  -webkit-text-fill-color: var(--text) !important;
  color: var(--text) !important;
}
.sidebar .project-item.active::before {
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px;
  width: 2px; border-radius: 999px; background: var(--accent);
  box-shadow: 0 0 8px rgb(var(--accent-rgb) / 0.45);
}

.sidebar .recent-chats { gap: 1px !important; }
.sidebar .recent-chat-item {
  position: relative;
  padding: 6px 10px 6px 18px !important;
  font-size: 12px !important;
  letter-spacing: 0 !important;
  color: var(--text-muted) !important;
  border-radius: var(--r-sm) !important;
  transition: background var(--d-fast) var(--ease-out), color var(--d-fast) var(--ease-out) !important;
}
/* leading hairline dot - quiet at rest, accent on hover/active */
.sidebar .recent-chat-item::before {
  content: ""; position: absolute; left: 9px; top: 50%;
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--text-faint);
  transform: translateY(-50%);
  transition: background var(--d-fast) var(--ease-out);
}
.sidebar .recent-chat-item:hover {
  background: rgba(255,255,255,0.04) !important;
  color: var(--text) !important;
  transform: none !important;
}
.sidebar .recent-chat-item:hover::before { background: rgb(var(--accent-rgb) / 0.7); }
.sidebar .recent-chat-item.active {
  background: rgb(var(--accent-rgb) / 0.08) !important;
  color: var(--text) !important;
}
.sidebar .recent-chat-item.active::before { background: var(--accent); }

/* Empty states: calm, sentence-case sans, never shout */
.sidebar .recent-chats .empty,
.sidebar .sidebar-empty {
  font-family: var(--font-sans) !important;
  font-size: 11.5px !important;
  color: var(--text-dim) !important;
  letter-spacing: 0 !important;
  padding: 6px 11px !important;
  opacity: 0.85;
}

/* ── Footer + account card: quiet glass, calm hover ──────────────── */
.sidebar .sidebar-footer {
  gap: 8px !important;
  padding-top: 12px !important;
  border-top: 1px solid var(--border) !important;
}
.sidebar .account-card {
  padding: 9px 10px !important;
  gap: 10px !important;
  background: rgba(255,255,255,0.025) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-md) !important;
  box-shadow: none !important;
  transition: background var(--d-base) var(--ease-out),
              border-color var(--d-base) var(--ease-out),
              transform var(--d-base) var(--ease-out),
              box-shadow var(--d-base) var(--ease-out) !important;
}
.sidebar .account-card:hover {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgb(var(--accent-rgb) / 0.28) !important;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md) !important;
}
.sidebar .account-card .ac-avatar {
  width: 30px; height: 30px;
  border-radius: var(--r-sm) !important;
  background: linear-gradient(135deg, rgb(var(--accent-rgb)), rgb(var(--accent-blue-rgb))) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12) !important;
  font-size: 12.5px;
}
.sidebar .account-card .ac-name { font-size: 12px !important; font-weight: 600 !important; letter-spacing: 0.01em; }
.sidebar .account-card .ac-plan {
  font-family: var(--font-mono) !important;
  font-size: 9px !important; letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--text-dim) !important; opacity: 0.8;
}
.sidebar .account-card .ac-chev {
  color: var(--text-dim) !important;
  transition: transform var(--d-base) var(--ease-out), color var(--d-fast) var(--ease-out);
}
.sidebar .account-card:hover .ac-chev { color: var(--text-muted) !important; transform: translateX(1px); }

/* ════════════════ TOP MODEL PICKER - crisp badge + premium menu ═══════════ */
.topbar .model-picker .badge.model-badge {
  padding: 5px 9px 5px 11px !important;
  gap: 7px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.025) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-muted) !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important; letter-spacing: 0.04em;
  transition: background var(--d-fast) var(--ease-out),
              border-color var(--d-fast) var(--ease-out),
              color var(--d-fast) var(--ease-out) !important;
}
.topbar .model-picker .badge.model-badge:hover {
  background: rgba(255,255,255,0.045) !important;
  border-color: rgb(var(--accent-rgb) / 0.30) !important;
  color: var(--text) !important;
}
.topbar .model-picker .model-badge svg {
  opacity: 0.6; transition: transform var(--d-base) var(--ease-out), opacity var(--d-fast) var(--ease-out);
}
.topbar .model-picker .model-badge:hover svg { opacity: 0.9; }
.topbar .model-picker:has(.model-dropdown:not(.hidden)) .model-badge svg { transform: rotate(180deg); }
.topbar .model-picker .model-badge .m-name { font-weight: 600 !important; }

.topbar .model-picker .model-dropdown {
  top: calc(100% + 8px) !important;
  min-width: 290px !important;
  padding: 6px !important;
  background: var(--glass-bg) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
  backdrop-filter: blur(24px) saturate(1.2);
  border: 1px solid var(--glass-bord) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-xl) !important;
}
/* quiet caption header */
.topbar .model-picker .model-dropdown::before {
  content: "Model";
  display: block;
  font-family: var(--font-mono);
  font-size: 9px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-dim); opacity: 0.6;
  padding: 6px 10px 7px;
}
.topbar .model-picker .model-option {
  padding: 9px 11px !important;
  border-radius: var(--r-md) !important;
  gap: 3px !important;
  transition: background var(--d-fast) var(--ease-out) !important;
}
.topbar .model-picker .model-option:hover { background: rgba(255,255,255,0.05) !important; }
.topbar .model-picker .model-option .name { font-size: 13px !important; font-weight: 600 !important; }
.topbar .model-picker .model-option .desc { font-size: 11.5px !important; color: var(--text-dim) !important; line-height: 1.35; }
.topbar .model-picker .model-option .check {
  color: var(--accent) !important; font-size: 13px;
  transition: opacity var(--d-fast) var(--ease-out);
}
.topbar .model-picker .model-option.active {
  background: rgb(var(--accent-rgb) / 0.09) !important;
  box-shadow: inset 2px 0 0 var(--accent);
}
.topbar .model-picker .model-option.active .name { font-weight: 700 !important; }
.topbar .model-picker .model-dropdown::-webkit-scrollbar { width: 8px; }
.topbar .model-picker .model-dropdown::-webkit-scrollbar-thumb {
  background: rgb(var(--accent-rgb) / 0.14); border-radius: 999px;
  border: 2px solid transparent; background-clip: padding-box;
}

/* ════════════════ ⌘K COMMAND PALETTE - calm + crisp ══════════════════════ */
#palette-backdrop.palette-backdrop {
  background: rgba(6,7,10,0.62) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.05);
  backdrop-filter: blur(10px) saturate(1.05);
  padding-top: 13vh !important;
}
#palette-backdrop .palette {
  width: 92%; max-width: 580px !important;
  background: var(--glass-bg) !important;
  -webkit-backdrop-filter: blur(28px) saturate(1.2);
  backdrop-filter: blur(28px) saturate(1.2);
  border: 1px solid var(--glass-bord) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-xl) !important;
  overflow: hidden;
}

/* Search row: roomy, line-icon, calm input */
#palette-backdrop .palette-search {
  padding: 15px 16px !important;
  gap: 11px !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--text-dim) !important;
}
#palette-backdrop .palette-search svg { opacity: 0.75; stroke-width: 1.8; flex-shrink: 0; }
#palette-backdrop .palette-search input {
  font-size: 15px !important;
  font-weight: 450;
  letter-spacing: -0.005em;
  color: var(--text) !important;
}
#palette-backdrop .palette-search input::placeholder { color: var(--text-dim) !important; opacity: 1; }
#palette-backdrop .palette-search kbd {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-xs) !important;
  font-family: var(--font-mono) !important;
  font-size: 10px !important; letter-spacing: 0.04em;
  color: var(--text-dim) !important;
  padding: 2px 7px !important;
  text-transform: uppercase;
}

/* Item rhythm */
#palette-backdrop .palette-list { max-height: 52vh !important; padding: 6px !important; }
#palette-backdrop .palette-item {
  padding: 10px 12px !important;
  border-radius: var(--r-md) !important;
  font-size: 13.5px !important;
  color: var(--text) !important;
  transition: background var(--d-fast) var(--ease-out), box-shadow var(--d-fast) var(--ease-out) !important;
}
#palette-backdrop .palette-item > span:first-child { font-weight: 450; letter-spacing: -0.005em; }
/* hint → quiet hairline sans chip (override the uppercase pill) */
#palette-backdrop .palette-item .pi-hint {
  font-family: var(--font-sans) !important;
  font-size: 11px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(--text-dim) !important;
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-sm) !important;
  padding: 2px 8px !important;
}
#palette-backdrop .palette-item.sel,
#palette-backdrop .palette-item:hover {
  background: rgb(var(--accent-rgb) / 0.09) !important;
}
#palette-backdrop .palette-item.sel {
  box-shadow: inset 2px 0 0 var(--accent) !important;
}
#palette-backdrop .palette-item.sel > span:first-child { color: var(--text) !important; }
#palette-backdrop .palette-item.sel .pi-hint {
  color: var(--text-muted) !important;
  border-color: rgb(var(--accent-rgb) / 0.30) !important;
}

/* Empty state: calm centered line */
#palette-backdrop .palette-empty {
  padding: 28px 24px !important;
  font-size: 13px !important;
  color: var(--text-dim) !important;
  letter-spacing: 0;
}

/* Scoped scrollbar for the list */
#palette-backdrop .palette-list::-webkit-scrollbar { width: 8px; }
#palette-backdrop .palette-list::-webkit-scrollbar-thumb {
  background: rgb(var(--accent-rgb) / 0.14); border-radius: 999px;
  border: 2px solid transparent; background-clip: padding-box;
}
#palette-backdrop .palette-list::-webkit-scrollbar-thumb:hover { background: rgb(var(--accent-rgb) / 0.26); background-clip: padding-box; }

/* Motion: transform/opacity only; honor reduced-motion across this chrome */
@media (prefers-reduced-motion: reduce) {
  .sidebar .account-card,
  .sidebar .account-card:hover,
  .sidebar .nav-item,
  .topbar .model-picker .model-badge svg,
  #palette-backdrop .palette,
  #palette-backdrop.palette-backdrop { transition: none !important; animation: none !important; transform: none !important; }
}
/* ===== /FLEET: Sidebar + command palette + model picker ===== */


/* ╔═══════════════ AUDIT FIXES (post-QA adversarial pass) ═══════════════╗ */
/* HIGH: light-theme project cards lost their fill (FLEET 2.2%-white tint == page bg) */
body[data-theme="light"][data-view="projects"] .project-card {
  background: #ffffff !important;
  border-color: var(--border-strong) !important;
}
/* MED: tasks action row wraps so the delete button is never clipped on narrow cards */
.view-tasks .task-actions { flex-wrap: wrap; row-gap: 8px; }
/* MED: long subject names truncate instead of ballooning the card head */
.view-tasks .task-subject {
  max-width: 62%; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* MED(a11y): default/later due pill meets WCAG AA (was --text-dim ~3.64:1) */
.view-tasks .task-due:not(.overdue):not(.urgent):not(.soon) { color: var(--text-muted); }

/* Autopilot empty state: center across the full dashboard width (was left-pinned in the grid) */
.view-autopilot .ap-dash .ap-dash-empty { grid-column: 1 / -1; }

/* School connector LOGO tiles: brand-color SVG fills the icon container edge-to-edge */
.view-connectors .conn-tile-icon:has(svg) { background: none !important; border: none !important; box-shadow: 0 6px 16px -8px rgba(0,0,0,0.5) !important; padding: 0 !important; overflow: hidden; }
.view-connectors .conn-tile-icon svg { width: 100%; height: 100%; display: block; }
/* ╚═══════════════ /AUDIT FIXES ═══════════════╝ */


/* ╔═══ COHESION (post-QA): unify card radius + hover-lift across surfaces ═══╗ */
.view-autopilot .ap-card,
.view-connectors .conn-tile,
.view-memories .mem-atom,
.view-projects .project-card,
.view-project .aside-card { border-radius: var(--r-lg) !important; }
.view-connectors .conn-tile:hover,
.view-projects .project-card:hover { transform: translateY(-1px) !important; }
/* ╚═══ /COHESION ═══╝ */


/* ╔═══════════════ MOBILE POLISH (≤760px responsive refinements) ═══════════════╗ */
@media (max-width: 760px) {
  /* Header: the title clears the fixed hamburger on EVERY view (this beats the
     per-view .view-skills / .view-voice .topbar 28px overrides by cascade order),
     and the action buttons wrap below instead of overflowing/clipping the edge. */
  .topbar { flex-wrap: wrap; row-gap: 8px; padding-left: 58px; padding-right: 14px; }
  .view-skills .topbar, .view-voice .topbar { padding-left: 58px; padding-right: 14px; }
  .topbar-left { min-width: 0; }
  .topbar-right { flex-wrap: wrap; gap: 8px; }

  /* Filter / segment rows wrap instead of clipping; search drops to its own line. */
  .mem-feed-bar { flex-wrap: wrap; }
  .mem-feed-bar .mem-feed-search { flex: 1 1 100%; min-width: 0; }
  .filter-pills { flex-wrap: wrap; }

  /* Voice "add sample" row: label goes full-width, Upload / +Add sample wrap below (no clip). */
  .voice-add-row { flex-wrap: wrap; }
  .voice-add-row #voice-sample-title { flex: 1 1 100%; min-width: 0; }
  .voice-add-actions { flex: 1 1 100%; }
}
/* ╚═══════════════ /MOBILE POLISH ═══════════════╝ */


/* ════════════ SETTINGS SIDEBAR - Easy Access (Sign Out / Delete Account) ═══ */
.settings-tabs .settings-easy-rule {
  height: 1px; background: var(--border); margin: 16px 12px 12px;
}
.settings-tabs .settings-easy {
  display: block; width: 100%; text-align: left;
  background: none; border: 0; cursor: pointer;
  font-family: var(--font-mono); text-transform: uppercase;
  font-size: 12.5px; letter-spacing: 0.07em; font-weight: 600;
  color: var(--text); padding: 10px 14px; border-radius: 9px;
  transition: background .14s ease, color .14s ease;
}
.settings-tabs .settings-easy:hover { background: rgba(255,255,255,0.05); }
.settings-tabs .settings-easy-danger { color: var(--danger); }
.settings-tabs .settings-easy-danger:hover { background: rgb(223 107 115 / 0.09); color: var(--danger); }


/* ════════════ CHAT - selectable text + per-message Copy button ════════════ */
.view-chat .msg-content, .view-chat .msg-content *,
.view-chat .msg.user .msg-body { -webkit-user-select: text; user-select: text; }
.view-chat .msg-body { position: relative; }
.msg-copy-btn {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 9px; padding: 5px 11px;
  background: var(--bg-elev-2); border: 1px solid var(--border);
  color: var(--text-muted); border-radius: 8px; cursor: pointer;
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em;
  /* Resting visible (not opacity:0) so the Copy affordance is readable alongside
     the other action buttons - it was invisible until hover, unlike its siblings. */
  opacity: 0.72; transition: opacity .15s ease, background .15s ease, color .15s ease;
}
.msg.assistant:hover .msg-copy-btn, .msg-copy-btn:focus-visible { opacity: 1; }
.msg-copy-btn:hover { opacity: 1 !important; background: var(--bg-elev-1); color: var(--text); }
.msg-copy-btn.copied { color: var(--success); border-color: rgba(116,198,154,0.32); opacity: 1 !important; }
.msg-copy-btn svg { width: 13px; height: 13px; }


/* ════════════ HISTORY - move chat to / from a project ════════════════════ */
.view-history .hist-row { position: relative; }
.hist-move {
  background: none; border: 0; color: var(--text-dim); cursor: pointer;
  padding: 6px; border-radius: 7px; opacity: 0; flex-shrink: 0;
  display: inline-flex; align-items: center;
  transition: opacity .14s ease, background .14s ease, color .14s ease;
}
.hist-row:hover .hist-move { opacity: 0.65; }
.hist-move:hover { opacity: 1 !important; background: rgba(255,255,255,0.06); color: var(--text); }
.hist-move svg { width: 15px; height: 15px; }
.hist-move-menu {
  position: fixed; z-index: 9997; min-width: 190px;
  background: var(--bg-elev-2); border: 1px solid var(--border);
  border-radius: 10px; padding: 6px; box-shadow: 0 12px 34px rgba(0,0,0,0.55);
}
.hist-move-menu .hmm-label {
  font-family: var(--font-mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--text-dim); padding: 5px 9px 6px;
}
.hist-move-menu .hmm-item {
  display: block; width: 100%; text-align: left; background: none; border: 0;
  color: var(--text); font-size: 13px; padding: 8px 9px; border-radius: 7px; cursor: pointer;
}
.hist-move-menu .hmm-item:hover { background: rgb(var(--accent-rgb) / 0.10); }
.hist-move-menu .hmm-remove { color: var(--danger); }
.hist-move-menu .hmm-remove:hover { background: rgb(223 107 115 / 0.10); }
.hist-move-menu .hmm-sep { height: 1px; background: var(--border); margin: 5px 4px; }

/* ===== FLEET: DIAGRAM (diag-error-ux) ===== */
/* When model-generated mermaid is invalid, renderDiagrams() swaps the diagram
   for .mmd-fallback. It lives where a diagram would - the kid-friendly "worksheet"
   surface - so it stays a calm LIGHT card in BOTH themes (matching .mermaid-diagram
   #f7faff/#dbe4f0), never a dark hole. Self-contained values on purpose; it must
   read identically regardless of [data-theme]. */
.mmd-fallback {
  margin: 0.9em 0;
  background: #f7faff;
  border: 1px solid #dbe4f0;
  border-radius: 14px;
  overflow: hidden;
  text-align: left;
  box-shadow: 0 1px 2px rgba(15, 33, 56, 0.05);
}
.mmd-fallback .mmd-fb-head {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 13px 15px;
  background: rgba(214, 168, 95, 0.09);     /* soft amber: recoverable, not a hard error */
  border-bottom: 1px solid #e4ebf4;
}
.mmd-fallback .mmd-fb-ico {
  flex: 0 0 auto;
  width: 17px; height: 17px;
  margin-top: 1px;
  color: #b3823a;                           /* amber, AA on the tint */
}
.mmd-fallback .mmd-fb-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.mmd-fallback .mmd-fb-title {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #0f2138;
}
.mmd-fallback .mmd-fb-sub {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  line-height: 1.45;
  color: #5b6675;
}
.mmd-fallback .mmd-fb-code {
  position: relative;
}
.mmd-fallback .mmd-fb-code pre {
  margin: 0 !important;
  padding: 13px 15px !important;
  border: none !important;
  border-radius: 0 !important;
  background: #f1f6fd !important;            /* faint inset, distinct from the header */
  box-shadow: none !important;
  overflow-x: auto;
}
.mmd-fallback .mmd-fb-code pre code {
  display: block;
  font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 12px;
  line-height: 1.6;
  color: #334155;
  white-space: pre;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  text-transform: none !important;          /* shield from chrome uppercasing */
  letter-spacing: normal !important;
}
.mmd-fallback .mmd-fb-copy {
  position: absolute;
  top: 9px; right: 9px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #5b6675;
  background: rgba(247, 250, 255, 0.86);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border: 1px solid #d3deec;
  border-radius: 7px;
  padding: 3px 9px;
  cursor: pointer;
  transition: color 0.12s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.12s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.12s cubic-bezier(0.16, 1, 0.3, 1);
}
.mmd-fallback .mmd-fb-copy svg {
  width: 13px; height: 13px;
  stroke-width: 1.9;
}
.mmd-fallback .mmd-fb-copy:hover {
  color: #2563eb;
  border-color: rgba(37, 99, 235, 0.45);
  background: rgba(234, 242, 255, 0.95);
}
.mmd-fallback .mmd-fb-copy.copied {
  color: #2f8f63;
  border-color: rgba(47, 143, 99, 0.45);
}
@media (prefers-reduced-motion: reduce) {
  .mmd-fallback .mmd-fb-copy { transition: none; }
}
/* ===== /FLEET: DIAGRAM (diag-error-ux) ===== */

/* ===== FLEET: DIAGRAM (diag-zoom-pan) =====
   Click-to-zoom / pan + fullscreen lightbox for Visual Learn diagrams.
   Complex flowcharts shrink to fit the chat column and become unreadable;
   this lets the student open any diagram big and pan/zoom it. Scoped to
   .mmd-* selectors only - no token, .btn-hero, or shared-surface edits.
   JS: decorateDiagramZoom() / openLightbox() at EOF of app.js. */

/* Make a rendered diagram a zoom affordance. */
.mermaid-diagram.mmd-zoomable {
  position: relative;
  cursor: zoom-in;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.mermaid-diagram.mmd-zoomable:hover {
  border-color: rgb(var(--accent-rgb) / 0.40);
  box-shadow: 0 0 0 1px rgb(var(--accent-rgb) / 0.18), var(--shadow-md);
}
/* Hover "Expand" button, top-right, on the dark chat surface (not the card). */
.mmd-expand {
  position: absolute;
  top: 10px; right: 10px;
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; margin: 0;
  color: #cfe0f5;
  background: rgba(12, 16, 24, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  cursor: pointer;
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 140ms ease, transform 140ms ease, color 140ms ease,
              background 140ms ease, border-color 140ms ease;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  z-index: 2;
}
.mmd-expand svg { width: 15px; height: 15px; display: block; }
.mermaid-diagram.mmd-zoomable:hover .mmd-expand,
.mmd-expand:focus-visible { opacity: 1; transform: translateY(0); }
.mmd-expand:hover {
  color: #fff;
  background: rgb(var(--accent-blue-rgb) / 0.92);
  border-color: rgb(var(--accent-rgb) / 0.55);
}
.mmd-expand:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px rgb(var(--accent-rgb) / 0.55);
}

/* Lock body scroll while the lightbox is open. */
body.mmd-lb-open { overflow: hidden; }

/* ── Fullscreen lightbox ─────────────────────────────────────────────── */
.mmd-lightbox {
  position: fixed; inset: 0;
  z-index: 9200;            /* above chat modals (≤1000); below tour (9000)? - sits over content */
  display: flex;
  align-items: center; justify-content: center;
  opacity: 1;
  transition: opacity 180ms ease;
}
.mmd-lightbox.hidden { opacity: 0; pointer-events: none; visibility: hidden; }

.mmd-lb-scrim {
  position: absolute; inset: 0;
  background: rgba(5, 7, 12, 0.78);
  -webkit-backdrop-filter: blur(10px) saturate(110%);
  backdrop-filter: blur(10px) saturate(110%);
}

/* The pan/zoom viewport - a clean light "paper" so the diagram reads the same
   in dark and light themes (the diagram itself is always the bright worksheet). */
.mmd-lb-stage {
  position: relative;
  width: min(94vw, 1500px);
  height: min(88vh, 1000px);
  overflow: hidden;
  border-radius: 16px;
  background:
    radial-gradient(120% 120% at 50% 0%, #ffffff 0%, #f5f8fd 100%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: var(--shadow-xl), 0 0 0 1px rgba(0, 0, 0, 0.35);
  cursor: grab;
  touch-action: none;       /* we handle pan/zoom ourselves */
  /* subtle worksheet grid so empty space doesn't feel void */
  background-image:
    radial-gradient(120% 120% at 50% 0%, #ffffff 0%, #f5f8fd 100%),
    linear-gradient(rgba(15, 33, 56, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 33, 56, 0.045) 1px, transparent 1px);
  background-size: auto, 26px 26px, 26px 26px;
}
.mmd-lightbox.mmd-grabbing .mmd-lb-stage { cursor: grabbing; }

.mmd-lb-frame {
  /* Fills the stage and flex-centres the SVG; pan/zoom is applied as a
     transform about the stage centre (which == this element's centre, since
     transforms never move layout). JS writes translate3d(tx,ty) scale(s). */
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-origin: center center;
  transform: translate3d(0,0,0) scale(1);
  will-change: transform;
}
.mmd-lb-frame svg {
  display: block;
  max-width: none !important;
  height: auto;
}
/* Bolder edges in the big view too, matching the in-chat treatment. */
.mmd-lb-frame svg .edgePath path,
.mmd-lb-frame svg .flowchart-link { stroke-width: 2px; }
.mmd-lb-frame svg * { text-transform: none !important; letter-spacing: normal !important; }

/* Floating glass toolbar, bottom-centre. */
.mmd-lb-bar {
  position: absolute;
  bottom: 22px; left: 50%;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 4px;
  padding: 6px;
  background: var(--glass-bg, rgba(18, 20, 26, 0.82));
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 999px;
  box-shadow: var(--shadow-lg);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
}
.mmd-lb-btn {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  transition: color 140ms ease, background 140ms ease, border-color 140ms ease;
}
.mmd-lb-btn svg { width: 18px; height: 18px; display: block; }
.mmd-lb-btn:hover {
  color: var(--text);
  background: rgb(var(--accent-rgb) / 0.12);
  border-color: rgb(var(--accent-rgb) / 0.30);
}
.mmd-lb-btn:focus-visible {
  outline: none;
  color: var(--text);
  box-shadow: 0 0 0 2px rgb(var(--accent-rgb) / 0.55);
}
.mmd-lb-close:hover {
  color: #fff;
  background: rgb(var(--danger-rgb, 223 107 115) / 0.22);
  border-color: rgba(223, 107, 115, 0.5);
}
.mmd-lb-lvl {
  min-width: 56px; height: 36px;
  padding: 0 10px;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  font: 600 12px/1 ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: color 140ms ease, background 140ms ease, border-color 140ms ease;
}
.mmd-lb-lvl:hover { color: var(--text); background: rgb(var(--accent-rgb) / 0.10); }
.mmd-lb-lvl:focus-visible { outline: none; box-shadow: 0 0 0 2px rgb(var(--accent-rgb) / 0.55); }
.mmd-lb-sep {
  width: 1px; height: 20px; margin: 0 3px;
  background: rgba(255, 255, 255, 0.12);
}
.mmd-lb-hint {
  position: absolute;
  top: 20px; left: 50%;
  transform: translateX(-50%);
  padding: 6px 13px;
  color: var(--text-muted);
  background: var(--glass-bg, rgba(18, 20, 26, 0.82));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  font: 500 11.5px/1 ui-monospace, "SF Mono", Menlo, monospace;
  letter-spacing: 0.01em;
  white-space: nowrap;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  pointer-events: none;
}

/* Light theme: keep chrome legible; the diagram stage already reads as paper. */
body[data-theme="light"] .mmd-lb-scrim {
  background: rgba(20, 28, 42, 0.55);
}
body[data-theme="light"] .mmd-expand {
  color: #1f2c3e;
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(15, 33, 56, 0.14);
}
body[data-theme="light"] .mmd-expand:hover {
  color: #fff;
  background: rgb(var(--accent-blue-rgb) / 0.95);
  border-color: rgb(var(--accent-blue-rgb) / 0.6);
}

@media (prefers-reduced-motion: reduce) {
  .mmd-lightbox,
  .mmd-expand,
  .mermaid-diagram.mmd-zoomable { transition: none; }
  .mmd-lb-frame { will-change: auto; }
}
/* ===== /FLEET: DIAGRAM (diag-zoom-pan) ===== */

/* ===== FLEET: DIAGRAM (diag-container-ui) ===== */
/* Promote the rendered-diagram card from a bare worksheet rectangle into a
   premium FRAMED FIGURE: a hairline-bordered card with a subtle mono "DIAGRAM"
   caption header, sibling to the code-block chrome (.cb-wrap) and the error card
   (.mmd-fallback). The SVG stays a bright, high-contrast worksheet (K-9 legibility)
   matted inside the frame; the card reads identically in BOTH themes - never a dark
   hole - so it sits like a figure in a paper. CSS-only; no JS structure required.

   COEXISTENCE (important): the diag-zoom-pan sibling adds .mmd-zoomable + an accent
   :hover ring (border-color + box-shadow at specificity 0,3,0) and an .mmd-expand
   button (top-right). To never clobber that hover, the rest-state border/shadow here
   live on the low-specificity .mermaid-diagram (0,1,0) selector - so they refine the
   baseline (line ~554) yet always yield to the zoom hover. Spacing/overflow (which
   the hover never touches) may safely use the guarded (0,3,0) selector. */

/* Rest-state frame chrome - LOW specificity on purpose (yields to .mmd-zoomable:hover). */
.mermaid-diagram {
  background: radial-gradient(130% 100% at 50% 0%, #0b0f18 0%, #06070b 72%);
  border: 1px solid rgb(94 169 255 / 0.18);
  border-radius: 16px;
  box-shadow: inset 0 0 50px rgb(94 169 255 / 0.05), 0 8px 30px -12px rgba(0,0,0,0.6);
}

/* Layout: zero the baseline padding (caption + canvas own their spacing), give the
   figure room to breathe, and round-clip the caption strip. Properties here are ones
   the zoom hover never sets, so the guarded (0,3,0) selector is safe to win. */
.mermaid-diagram:not(.mermaid-pending):not(.mermaid-failed) {
  margin: 1em 0;
  padding: 0;
  overflow-x: auto;
  overflow-y: hidden;
  text-align: center;
}

/* Caption header - the "figure label" that makes it a framed figure. Mono + UPPERCASE
   + letter-spaced: the chrome-label voice (.cb-lang / .hmm-label). A barely-there blue
   strip + hairline. Sticky-left so the label never scrolls away on a wide diagram, and
   left-aligned so it never collides with the top-right .mmd-expand button. */
.mermaid-diagram:not(.mermaid-pending):not(.mermaid-failed)::before {
  content: "Diagram";
  display: block;
  position: sticky;
  left: 0;
  box-sizing: border-box;
  width: 100%;
  padding: 9px 15px;
  text-align: left;
  font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6b8cb8;                                   /* dim blue label on the neon strip */
  background: rgb(94 169 255 / 0.06);               /* faint blue header strip */
  border-bottom: 1px solid rgb(94 169 255 / 0.12);
  border-radius: 16px 16px 0 0;
}

/* The matted canvas: breathing room around the SVG, below the caption. The SVG stays
   centered + bounded (baseline rule keeps max-width:100%). */
.mermaid-diagram:not(.mermaid-pending):not(.mermaid-failed) svg {
  display: block;
  margin: 18px auto 20px;
  max-width: calc(100% - 36px);
}

/* Pending placeholder ("Drawing diagram…") wears the SAME frame so the layout doesn't
   jump when the real SVG swaps in - just no caption, centered spinner row. (Frame
   border/bg/radius/shadow come from the .mermaid-diagram rule above.) */
.mermaid-diagram.mermaid-pending {
  margin: 1em 0;
  padding: 22px 18px;
  min-height: 62px;
  color: #5b6675;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
}

/* Both themes: the figure is intentionally a LIGHT worksheet regardless of [data-theme]
   (matching .mermaid-diagram + .mmd-fallback). Re-assert so a future light-theme blanket
   rule can't invert the frame or caption into a clashing surface. */
body[data-theme="light"] .mermaid-diagram {
  background: #f7faff;
  border-color: #dbe4f0;
}
body[data-theme="light"] .mermaid-diagram:not(.mermaid-pending):not(.mermaid-failed)::before {
  background: rgba(37, 99, 235, 0.05);
  border-bottom-color: #e4ebf4;
  color: #5b6f8c;
}
/* ===== /FLEET: DIAGRAM (diag-container-ui) ===== */

/* ===== FLEET: DIAGRAM (diag-loading) ===== */
/* Calm loading state while Mermaid (~1MB) lazy-loads + renders. Instead of a tiny
   spinner that pops then snaps to a tall SVG, the placeholder is a DIAGRAM-SHAPED
   skeleton - ghost nodes + connectors - under a single soft blue sheen sweep (the one
   tasteful brand motion). It reserves a figure-sized height so swapping in the real
   SVG never jumps the scroll, and reads identically in BOTH themes (the worksheet is
   always the bright #f7faff card; the diag-container-ui frame border/bg/shadow stay
   as-is). JS: diagramPlaceholder() in app.js emits .mmd-skel structure + a quiet
   .mmd-skel-cap status line. Self-contained values on purpose. */

/* Host the skeleton stage + caption as a centered column. Specificity matches the
   diag-container-ui .mermaid-pending rule (0,2,0) and this block is later in the
   cascade, so these refinements win; frame chrome is left untouched. */
.mermaid-diagram.mermaid-pending {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 22px 20px;
  min-height: 132px;          /* figure-sized: skeleton ≈ rendered diagram → no scroll jump */
}

/* The skeleton stage: a fixed-aspect canvas the ghost graph is laid out inside, with
   the sheen masked to its rounded bounds. */
.mermaid-pending .mmd-skel {
  position: relative;
  width: 100%;
  max-width: 280px;
  height: 84px;
  overflow: hidden;
  border-radius: 10px;
}

/* Ghost nodes - soft, slightly-darker-than-card chips that read as "blocks coming". */
.mermaid-pending .mmd-skel-node {
  position: absolute;
  height: 26px;
  background: #e3ecf8;
  border: 1px solid #d4e0f1;
  border-radius: 7px;
}
.mermaid-pending .mmd-skel-node.n1 { top: 0;    left: 50%; width: 96px; transform: translateX(-50%); }
.mermaid-pending .mmd-skel-node.n2 { bottom: 0; left: 4px;  width: 84px; }
.mermaid-pending .mmd-skel-node.n3 { bottom: 0; right: 4px; width: 84px; }

/* Ghost connectors - thin lines linking the parent node down to the two children. */
.mermaid-pending .mmd-skel-edge {
  position: absolute;
  width: 2px;
  height: 30px;
  background: #d8e2f1;
  border-radius: 2px;
  top: 27px;
}
.mermaid-pending .mmd-skel-edge.e1 { left: 32%; transform: rotate(28deg);  transform-origin: top center; }
.mermaid-pending .mmd-skel-edge.e2 { left: 68%; transform: rotate(-28deg); transform-origin: top center; }

/* The ONE brand motion: a soft light-blue diagonal sheen sweeping across the stage.
   GPU transform-only, calm cadence, low alpha so it whispers rather than flashes. */
.mermaid-pending .mmd-skel-sheen {
  position: absolute;
  top: 0;
  left: 0;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    100deg,
    rgba(94, 169, 255, 0) 0%,
    rgba(94, 169, 255, 0.14) 50%,
    rgba(94, 169, 255, 0) 100%);
  transform: translateX(-180%);
  animation: mmd-skel-sheen 1.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  will-change: transform;
}
@keyframes mmd-skel-sheen {
  0%   { transform: translateX(-180%); }
  100% { transform: translateX(280%); }
}

/* Quiet status caption beneath the skeleton - keeps the existing tiny spinner +
   "Drawing diagram…" wording, demoted to a calm meta line. */
.mermaid-pending .mmd-skel-cap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12.5px;
  letter-spacing: 0.01em;
  color: #6b7a8d;
}

/* Reduced motion: no sweep, no spin. Hold a gentle, static skeleton with a soft
   breathing opacity on the stage so it still reads as "loading", calmly. */
@media (prefers-reduced-motion: reduce) {
  .mermaid-pending .mmd-skel-sheen { animation: none; opacity: 0; }
  .mermaid-pending .mmd-skel-cap .mmd-spin {
    animation: none;
    border-top-color: #cbd5e1;            /* drop the spinner "seam"; read as a calm ring */
  }
  .mermaid-pending .mmd-skel {
    animation: mmd-skel-breathe 2.4s ease-in-out infinite;
  }
}
@keyframes mmd-skel-breathe {
  0%, 100% { opacity: 0.7; }
  50%      { opacity: 1; }
}
/* ===== /FLEET: DIAGRAM (diag-loading) ===== */

/* ===== FLEET: DIAGRAM (diag-responsive) =====
   Make every rendered diagram scale-to-fit the chat column and NEVER overflow the
   message bubble. app.js now passes useMaxWidth:true to all Mermaid types, so each
   SVG ships width:100% + an intrinsic max-width style and shrinks to fit. This block
   hardens that against stray attribute widths, styles the rare residual horizontal
   scroll as a calm worksheet scrollbar (dark thumb on the light card - the global
   light-on-dark thumb is invisible here), and keeps the figure legible + uncropped
   down to very narrow widths without ever clipping. Scoped to .mermaid-*
   only - no tokens / shared surfaces / .mmd-expand hover semantics changed.
   Coexists with diag-container-ui (0,3,0 layout) + diag-zoom-pan (.mmd-expand). */

/* Bulletproof intrinsic sizing: cap at the matted width, force aspect-correct height,
   and let the SVG SHRINK freely (min-width:0) so a wide diagram scales down instead of
   forcing scroll. height:auto + the calc cap override any width/height ATTRIBUTE Mermaid
   may still emit on non-useMaxWidth paths, so the SVG can never burst the bubble.
   Specificity 0,4,1 - wins over the diag-container-ui svg rule (0,4,0) it refines. */
.mermaid-diagram:not(.mermaid-pending):not(.mermaid-failed) svg {
  width: auto;
  min-width: 0;
  max-width: calc(100% - 36px) !important;
  height: auto !important;
}

/* Worksheet scrollbar - only matters when a pathologically wide diagram still overflows.
   Dark, low-contrast thumb sized for the bright #f7faff card (the global thumb is white
   @8% → invisible on white). Thin + pill, matching the app's scrollbar language. */
.mermaid-diagram:not(.mermaid-pending):not(.mermaid-failed) {
  scrollbar-width: thin;
  scrollbar-color: rgba(15, 33, 56, 0.22) transparent;
  scroll-padding: 0 18px;
  overscroll-behavior-x: contain;          /* don't rubber-band the page on trackpad pan */
}
.mermaid-diagram:not(.mermaid-pending):not(.mermaid-failed)::-webkit-scrollbar {
  height: 8px;
}
.mermaid-diagram:not(.mermaid-pending):not(.mermaid-failed)::-webkit-scrollbar-track {
  background: transparent;
  margin: 0 12px;                          /* inset so the bar reads as part of the figure */
}
.mermaid-diagram:not(.mermaid-pending):not(.mermaid-failed)::-webkit-scrollbar-thumb {
  background: rgba(15, 33, 56, 0.18);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.mermaid-diagram:not(.mermaid-pending):not(.mermaid-failed):hover::-webkit-scrollbar-thumb {
  background: rgba(15, 33, 56, 0.30);
  background-clip: padding-box;
}

/* Narrow widths (small app window / collapsed layout): trim the side matting so the
   diagram keeps the most usable width and the whole figure stays visible + uncropped. */
@media (max-width: 560px) {
  .mermaid-diagram:not(.mermaid-pending):not(.mermaid-failed) svg {
    margin: 14px auto 16px;
    max-width: calc(100% - 20px) !important;
  }
}
/* ===== /FLEET: DIAGRAM (diag-responsive) ===== */

/* ===== FLEET: DIAGRAM (diag-fonts-type) =====
   Typography INSIDE rendered Mermaid diagrams - node labels, edge labels, cluster
   titles. app.js pins fontFamily to the exact --font-sans stack (offline-safe) and
   bakes it into foreignObject labels at render time; this block hardens that so EVERY
   label path is on-brand: SVG <text> glyphs (which don't inherit the inline font),
   the cv-variant Inter rendering the rest of the app uses (styles.css line ~101), and
   crisp weights at the worksheet scale. Edge labels get a clean chip so an arrow never
   strikes through "Yes" / "No". Scoped to .mermaid-diagram only; respects the existing
   line-~588 `text-transform/letter-spacing: normal !important` shield (we don't fight
   it) and never touches token/.btn-hero/#hero-fx-canvas or another surface's block.
   The figure is a LIGHT worksheet in BOTH themes, so one rule serves dark + light. */

/* App-font everywhere a label can render: foreignObject HTML labels AND raw SVG <text>
   (e.g. pie/sequence/gantt titles, axis ticks) that don't inherit the inline fontFamily.
   Match the body's refined Inter character set (cv02/03/04/11) + smoothing so glyphs read
   identically to the rest of the UI. Numbers use lining/tabular figures so counts, years,
   and gantt dates align. */
.mermaid-diagram:not(.mermaid-pending):not(.mermaid-failed) svg text,
.mermaid-diagram:not(.mermaid-pending):not(.mermaid-failed) .nodeLabel,
.mermaid-diagram:not(.mermaid-pending):not(.mermaid-failed) .edgeLabel,
.mermaid-diagram:not(.mermaid-pending):not(.mermaid-failed) .cluster-label,
.mermaid-diagram:not(.mermaid-pending):not(.mermaid-failed) .label,
.mermaid-diagram:not(.mermaid-pending):not(.mermaid-failed) .titleText {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11', 'tnum';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Node labels: a touch more weight than Mermaid's default so boxes read crisply at the
   big worksheet size, and graceful wrapping so a long single word in a narrow node breaks
   instead of clipping past the box edge. (Color/fill is left to themeVars' near-black
   primaryTextColor - already AA on every fill.) */
.mermaid-diagram:not(.mermaid-pending):not(.mermaid-failed) .nodeLabel,
.mermaid-diagram:not(.mermaid-pending):not(.mermaid-failed) .nodeLabel p,
.mermaid-diagram:not(.mermaid-pending):not(.mermaid-failed) .cluster-label,
.mermaid-diagram:not(.mermaid-pending):not(.mermaid-failed) .cluster-label p {
  font-weight: 500;
  line-height: 1.3;
  overflow-wrap: break-word;
  word-break: normal;
}

/* Edge labels (flowchart arrow text like "Yes" / "No" / "then"): slightly smaller +
   medium weight, set on a clean rounded chip that matches the worksheet card with a
   hairline - so the label floats over the arrow line instead of being struck through.
   The inline-bg span Mermaid wraps the text in (.edgeLabel > the labelBkg rect already
   gets edgeLabelBackground from themeVars) is reinforced here for the HTML-label path. */
.mermaid-diagram:not(.mermaid-pending):not(.mermaid-failed) .edgeLabel,
.mermaid-diagram:not(.mermaid-pending):not(.mermaid-failed) .edgeLabel p {
  font-size: 0.86em;
  font-weight: 500;
  line-height: 1.25;
}
.mermaid-diagram:not(.mermaid-pending):not(.mermaid-failed) .edgeLabel .labelBkg,
.mermaid-diagram:not(.mermaid-pending):not(.mermaid-failed) .edgeLabel foreignObject > div,
.mermaid-diagram:not(.mermaid-pending):not(.mermaid-failed) span.edgeLabel {
  background-color: #f7faff;
}
/* The HTML edge-label chip: a soft inset so the text reads as a tidy pill on the line. */
.mermaid-diagram:not(.mermaid-pending):not(.mermaid-failed) .edgeLabel p {
  padding: 1px 5px;
  border-radius: 6px;
  background-color: #f7faff;
}

/* Titles (pie / journey / quadrant / xychart headers): heading weight + tight tracking
   exception is NOT applied (line ~588 forces letter-spacing:normal on SVG, which is the
   right call for diagram glyphs); we only firm the weight so a chart title reads as a
   heading, not body. */
.mermaid-diagram:not(.mermaid-pending):not(.mermaid-failed) .titleText,
.mermaid-diagram:not(.mermaid-pending):not(.mermaid-failed) text.titleText {
  font-weight: 600;
}
/* ===== /FLEET: DIAGRAM (diag-fonts-type) ===== */


/* ===== FLEET: TASKS (polish) ===== */
/* Closes the last gaps on the Tasks surface so it is pixel-flawless and fluent
   in BOTH themes: (1) light-theme corrections for FLEET-block elements whose
   dark-tuned alpha values the global light cascade can't reach (they carry
   !important / higher .view-tasks specificity), (2) a proper focus-visible ring
   on the borderless "Autopilot" CTA, (3) a calm staggered card entrance.
   Scoped to .view-tasks; reuses only existing tokens. No :root / .btn-hero /
   #hero-fx-canvas / other-surface edits. */

/* ── (2) Keyboard focus: the .do-it CTA has border:0, so the global 2px
   outline reads off-edge. Give it a crisp accent ring instead. ─────────── */
.view-tasks .task-actions button.do-it:focus-visible {
  outline: none;
  box-shadow: 0 1px 2px rgba(0,0,0,0.25),
              0 0 0 2px var(--bg-elev-1),
              0 0 0 4px rgb(var(--accent-rgb) / 0.55);
}

/* ── (3) Fluent entrance: cards rise + fade as a section paints. Pure
   transform/opacity, cheap stagger, reduced-motion killswitch below.
   Capped at 8 so a giant Missing pile doesn't cascade for a full second. ── */
.view-tasks .task-grid .task-card { animation: tasks-card-in var(--d-base) var(--ease-out) both; }
.view-tasks .task-grid .task-card:nth-child(1) { animation-delay: 0ms; }
.view-tasks .task-grid .task-card:nth-child(2) { animation-delay: 28ms; }
.view-tasks .task-grid .task-card:nth-child(3) { animation-delay: 56ms; }
.view-tasks .task-grid .task-card:nth-child(4) { animation-delay: 84ms; }
.view-tasks .task-grid .task-card:nth-child(5) { animation-delay: 112ms; }
.view-tasks .task-grid .task-card:nth-child(6) { animation-delay: 140ms; }
.view-tasks .task-grid .task-card:nth-child(7) { animation-delay: 168ms; }
.view-tasks .task-grid .task-card:nth-child(n+8) { animation-delay: 196ms; }
@keyframes tasks-card-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── (1) LIGHT THEME corrections ──────────────────────────────────────── */
/* Card hover shadow: the dark rgba(0,0,0,0.26) bloom is far too heavy on a
   white tile. Swap to the soft token shadow + an accent-tinted border. */
body[data-theme="light"] .view-tasks .task-card {
  box-shadow: 0 1px 2px rgba(20,22,40,0.05) !important;
}
body[data-theme="light"] .view-tasks .task-card:hover {
  border-color: rgb(var(--accent-rgb) / 0.28) !important;
  background: rgb(var(--accent-rgb) / 0.04) !important;
  box-shadow: var(--shadow-md) !important;
}
/* Subject stripe reads a touch stronger against white. */
body[data-theme="light"] .view-tasks .task-card.has-subj::before { opacity: 0.7; }
body[data-theme="light"] .view-tasks .task-card.has-subj:hover::before { opacity: 1; }

/* Neutral due pill: rgba(255,255,255,.04) is invisible on white - give it a
   real ink-tinted chip so undated / "Later" tasks still read as a pill. */
body[data-theme="light"] .view-tasks .task-due {
  color: var(--text-muted);
  background: rgba(20,22,40,0.05);
  border-color: var(--border-strong);
}
/* Urgency variants keep their semantic tints (they already use colored alpha),
   just firm up the borders so they don't wash out on white. */
body[data-theme="light"] .view-tasks .task-due.overdue { border-color: rgb(223 107 115 / 0.45); }
body[data-theme="light"] .view-tasks .task-due.urgent  { border-color: rgba(214,168,95,0.45); }
body[data-theme="light"] .view-tasks .task-due.soon    { border-color: rgba(214,168,95,0.36); }

/* Section-header dot's neutral glow ring was white-alpha (invisible on light). */
body[data-theme="light"] .view-tasks .task-section-head .ts-label::before {
  box-shadow: 0 0 0 3px rgba(20,22,40,0.05);
}

/* Quiet action buttons: --bg-elev-3 hover stays correct (token is theme-aware),
   but the resting border can vanish - pin it to the stronger hairline. */
body[data-theme="light"] .view-tasks .task-actions button,
body[data-theme="light"] .view-tasks .task-actions a { border-color: var(--border-strong); }

/* Skeleton shimmer was a white-alpha sweep → invisible on white. Re-tint to ink. */
body[data-theme="light"] .view-tasks .tasks-skel .sk-card {
  background: #fff; border-color: var(--border-strong);
}
body[data-theme="light"] .view-tasks .tasks-skel .sk {
  background: linear-gradient(90deg, rgba(20,22,40,0.05) 25%, rgba(20,22,40,0.10) 37%, rgba(20,22,40,0.05) 63%);
  background-size: 400% 100%;
}

/* ── Reduced motion: no entrance, no shimmer-into-paint jump ───────────── */
@media (prefers-reduced-motion: reduce) {
  .view-tasks .task-grid .task-card { animation: none; }
}
/* ===== /FLEET: TASKS (polish) ===== */


/* ===== FLEET: DIAGRAM (diag-copy-export) ===== */
/* Save affordances on every rendered Visual-Learn figure: copy-as-image, download
   SVG, copy mermaid source - plus the existing Expand - grouped in one hover-revealed
   glass pill, top-right. The diagram card is ALWAYS a light worksheet (both themes),
   so the toolbar is styled to read on that light surface in dark + light alike.
   JS: decorateDiagramZoom() builds .mmd-tools / .mmd-tool[*] at EOF of app.js.
   Scoped to .mmd-* only - no tokens, .btn-hero, or shared-surface edits. */

/* The pill: clusters the tool buttons. Reveals on card hover / keyboard focus,
   mirroring the .mmd-expand reveal (opacity + 2px slide, 140ms ease). */
.mermaid-diagram .mmd-tools {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 1px;
  padding: 3px;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(15, 33, 56, 0.12);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(15, 33, 56, 0.06),
              0 8px 22px -12px rgba(15, 33, 56, 0.5);
  -webkit-backdrop-filter: blur(10px) saturate(130%);
  backdrop-filter: blur(10px) saturate(130%);
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 140ms ease, transform 140ms ease;
}
.mermaid-diagram.mmd-zoomable:hover .mmd-tools,
.mermaid-diagram .mmd-tools:focus-within {
  opacity: 1;
  transform: translateY(0);
}

/* Each save button - slate line glyph on the worksheet; deep-blue accent on hover. */
.mermaid-diagram .mmd-tool {
  position: static;          /* override the standalone .mmd-expand absolute placement */
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  color: #1f2b44;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 7px;
  cursor: pointer;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition: color 130ms ease, background 130ms ease, border-color 130ms ease;
}
.mermaid-diagram .mmd-tool svg {
  width: 15px;
  height: 15px;
  display: block;
  stroke-width: 2.1;
  opacity: 1;
}
/* The toolbar sits on a LIGHT pill in BOTH themes, so its glyphs must stay dark
   regardless of theme. The diagram-body svg blanket (`.mermaid-diagram svg *`
   forces fill/stroke to a near-white #EAF2FF !important for node labels) would
   otherwise wash the toolbar icons to white-on-white. Re-assert dark, stroked,
   un-filled glyphs derived from the pill surface — not the theme. */
.mermaid-diagram .mmd-tools svg,
.mermaid-diagram .mmd-tools svg * {
  stroke: currentColor !important;
  fill: none !important;
  color: inherit !important;
  filter: none !important;
  animation: none !important;
}
/* Reset the original .mmd-expand glass look when it lives INSIDE the pill - it is now
   just one inline tool (its standalone styling stays intact for any other call site). */
.mermaid-diagram .mmd-tools .mmd-expand {
  top: auto;
  right: auto;
  opacity: 1;
  transform: none;
  background: transparent;
  border-color: transparent;
  color: #1f2b44;
}
.mermaid-diagram .mmd-tool:hover,
.mermaid-diagram .mmd-tools .mmd-expand:hover {
  color: #fff;
  background: rgb(var(--accent-blue-rgb) / 0.92);
  border-color: rgb(var(--accent-rgb) / 0.55);
}
.mermaid-diagram .mmd-tool:focus-visible,
.mermaid-diagram .mmd-tools .mmd-expand:focus-visible {
  outline: none;
  color: #16314f;
  background: rgb(var(--accent-rgb) / 0.14);
  border-color: rgb(var(--accent-rgb) / 0.5);
  box-shadow: 0 0 0 2px rgb(var(--accent-rgb) / 0.45);
}
/* Success flash (copied / downloaded) - calm green confirm, on-brand. */
.mermaid-diagram .mmd-tool.mmd-ok,
.mermaid-diagram .mmd-tool.mmd-ok:hover {
  color: #fff;
  background: rgba(116, 198, 154, 0.95);
  border-color: rgba(116, 198, 154, 0.95);
}

/* Hairline dividers between the tool groups (matches .mmd-lb-sep voice). */
.mermaid-diagram .mmd-tool + .mmd-tool {
  position: relative;
  margin-left: 2px;
}
.mermaid-diagram .mmd-tool + .mmd-tool::after {
  content: "";
  position: absolute;
  left: -2px;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: rgba(15, 33, 56, 0.10);
  pointer-events: none;
}
.mermaid-diagram .mmd-tool:hover + .mmd-tool::after,
.mermaid-diagram .mmd-tool + .mmd-tool:hover::after { background: transparent; }

/* Micro tooltip (data-tip) under each icon - mono chrome label, glass, both themes. */
.mermaid-diagram .mmd-tool[data-tip]::before {
  content: attr(data-tip);
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(-2px);
  padding: 4px 8px;
  font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1;
  white-space: nowrap;
  color: #eef3fb;
  background: rgba(13, 18, 28, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  box-shadow: var(--shadow-md);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  z-index: 4;
  transition: opacity 120ms ease, transform 120ms ease;
}
.mermaid-diagram .mmd-tool:hover[data-tip]::before,
.mermaid-diagram .mmd-tool:focus-visible[data-tip]::before {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
/* The right-most tool's tip would clip the card edge - anchor it to the right. */
.mermaid-diagram .mmd-tool:last-child[data-tip]::before {
  left: auto;
  right: 0;
  transform: translateX(0) translateY(-2px);
}
.mermaid-diagram .mmd-tool:last-child:hover[data-tip]::before,
.mermaid-diagram .mmd-tool:last-child:focus-visible[data-tip]::before {
  transform: translateX(0) translateY(0);
}

/* The card already lifts its border/shadow on hover (diag-zoom-pan). Keep cursor as
   zoom-in over the canvas, but make the toolbar feel like normal controls. */
.mermaid-diagram .mmd-tools,
.mermaid-diagram .mmd-tool { cursor: pointer; }

/* Light theme: the worksheet is light in both themes, so the toolbar is already
   correct - re-assert the surface so a future light blanket can't wash it out. */
body[data-theme="light"] .mermaid-diagram .mmd-tools {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(15, 33, 56, 0.14);
}
body[data-theme="light"] .mermaid-diagram .mmd-tool,
body[data-theme="light"] .mermaid-diagram .mmd-tools .mmd-expand { color: #1f2b44; }
body[data-theme="light"] .mermaid-diagram .mmd-tool:hover,
body[data-theme="light"] .mermaid-diagram .mmd-tools .mmd-expand:hover {
  color: #fff;
  background: rgb(var(--accent-blue-rgb) / 0.95);
  border-color: rgb(var(--accent-blue-rgb) / 0.6);
}

@media (prefers-reduced-motion: reduce) {
  .mermaid-diagram .mmd-tools,
  .mermaid-diagram .mmd-tool,
  .mermaid-diagram .mmd-tool[data-tip]::before { transition: none; }
}
/* ===== /FLEET: DIAGRAM (diag-copy-export) ===== */


/* ===== FLEET: CONNECTORS (polish pass - appended last, wins source-order) ===== */
/* Scoped to .view-connectors + .school-modal. Composes existing design tokens
   only; touches no shared or global rules. Fixes: (1) a later cohesion rule clamped the tile hover to
   -1px and overrode the intended -2px lift - restored here; (2) the expanded
   write-up clipped at 640px for the longest blurbs - uncapped so no copy is cut;
   (3) the click-to-expand card is now keyboard-focusable (tabindex via JS) but had
   no focus ring - added; (4) brand-logo chip + chevron micro-feedback; (5) a calm
   GPU entrance so the grid settles instead of popping in flat. */

/* (1) Restore the intended hover lift (beats the generic -1px cohesion override). */
.view-connectors .conn-tile:hover {
  transform: translateY(-2px) !important;
}
.view-connectors .conn-tile.coming-soon:hover {
  transform: translateY(-1px) !important;   /* coming-soon stays a touch flatter */
}
.view-connectors .conn-tile:active,
.view-connectors .conn-tile.coming-soon:active {
  transform: translateY(-1px) !important;
  transition-duration: 0.08s !important;     /* crisp press */
}

/* (2) The expanded write-up must never clip - the longest descriptions run past
   640px. Cap high enough for any blurb at the column width, keep the smooth open. */
.view-connectors .conn-tile.expanded .conn-tile-about {
  max-height: 1400px !important;
}

/* (3) Keyboard focus ring for the now-focusable card (parity with the hover state,
   using the same accent language). Mouse clicks stay clean via :focus-visible. */
.view-connectors .conn-tile:focus-visible {
  outline: none;
  border-color: rgb(var(--accent-rgb) / 0.55) !important;
  box-shadow:
    0 0 0 1px rgb(var(--accent-rgb) / 0.45),
    0 0 0 4px rgb(var(--accent-rgb) / 0.14),
    0 16px 40px -16px rgba(0,0,0,0.55) !important;
}
body[data-theme="light"] .view-connectors .conn-tile:focus-visible {
  box-shadow:
    0 0 0 1px rgb(var(--accent-rgb) / 0.45),
    0 0 0 4px rgb(var(--accent-rgb) / 0.14),
    0 16px 40px -18px rgba(40,50,90,0.22) !important;
}

/* (4) Micro-feedback: the brand-logo chip lifts slightly with the card; chevron
   rotation already handled in base - just make the affordance feel intentional. */
.view-connectors .conn-tile-icon {
  transition: transform 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out);
  will-change: transform;
}
.view-connectors .conn-tile:hover .conn-tile-icon {
  transform: translateY(-1px) scale(1.02);
}
.view-connectors .conn-tile:hover .conn-tile-icon:has(svg) {
  box-shadow: 0 10px 22px -10px rgba(0,0,0,0.6) !important;
}
.view-connectors .conn-tile-chev { transition: transform 0.28s var(--ease-out), opacity 0.15s var(--ease-out), color 0.15s var(--ease-out); }

/* (5) Calm entrance - each tile fades + rises a hair on render. Pure GPU
   (opacity/transform), short, staggered across the first row only so it feels
   alive without being slow. Driven by render order via :nth-child. */
@keyframes connTileIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.view-connectors .conn-grid .conn-tile {
  animation: connTileIn 0.34s var(--ease-out) both;
}
.view-connectors .conn-grid .conn-tile:nth-child(1) { animation-delay: 0.00s; }
.view-connectors .conn-grid .conn-tile:nth-child(2) { animation-delay: 0.04s; }
.view-connectors .conn-grid .conn-tile:nth-child(3) { animation-delay: 0.08s; }
.view-connectors .conn-grid .conn-tile:nth-child(4) { animation-delay: 0.12s; }
.view-connectors .conn-grid .conn-tile:nth-child(5) { animation-delay: 0.16s; }
.view-connectors .conn-grid .conn-tile:nth-child(n+6) { animation-delay: 0.18s; }

/* Reduced-motion: no entrance, no lift/scale - but keep the static focus ring. */
@media (prefers-reduced-motion: reduce) {
  .view-connectors .conn-grid .conn-tile { animation: none !important; }
  .view-connectors .conn-tile:hover { transform: none !important; }
  .view-connectors .conn-tile.coming-soon:hover { transform: none !important; }
  .view-connectors .conn-tile:active,
  .view-connectors .conn-tile.coming-soon:active { transform: none !important; }
  .view-connectors .conn-tile:hover .conn-tile-icon { transform: none !important; }
}
/* ===== /FLEET: CONNECTORS (polish pass) ===== */


/* ===== FLEET: SETTINGS (micro-polish pass) =====================================
   Appended last → authoritative over the earlier SETTINGS FLEET block.
   Closes the remaining gaps to flagship caliber: input focus rings + hover,
   custom select chevrons (kills the native OS arrow), premium connector icon
   tiles, keyboard focus-visible on tabs/buttons, calm CTA lift. CSS-only,
   :root tokens only, scoped to body[data-view="settings"]. Themes both ways
   automatically because --accent-rgb / --accent-blue flip in light mode.
   ============================================================================= */

/* ── Form fields: hover affordance + accent focus ring (matches toggle) ─────── */
body[data-view="settings"] .set-input,
body[data-view="settings"] .set-textarea {
  transition: border-color var(--d-fast) var(--ease-out),
              box-shadow var(--d-fast) var(--ease-out),
              background var(--d-fast) var(--ease-out) !important;
}
body[data-view="settings"] .set-input:hover:not(:focus),
body[data-view="settings"] .set-textarea:hover:not(:focus) {
  border-color: rgb(var(--accent-rgb) / 0.30) !important;
}
body[data-view="settings"] .set-input:focus,
body[data-view="settings"] .set-textarea:focus {
  outline: none !important;
  border-color: rgb(var(--accent-rgb) / 0.55) !important;
  background: rgb(var(--accent-rgb) / 0.04) !important;
  box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / 0.16) !important;
}

/* ── Native selects → premium custom chevron, no OS arrow ───────────────────── */
body[data-view="settings"] select.set-input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 34px !important;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239aa2ad' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  cursor: pointer;
}
body[data-view="settings"] select.set-input:hover { background-color: rgb(var(--accent-rgb) / 0.04) !important; }
/* keep the dropdown popup readable (some engines honor these) */
body[data-view="settings"] select.set-input option { background: var(--bg-elev-1); color: var(--text); }
body[data-theme="light"][data-view="settings"] select.set-input {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23636b78' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* ── Tall row (Instructions): clean top-alignment + full-bleed textarea ─────── */
body[data-view="settings"] .set-row.tall { align-items: flex-start !important; }
body[data-view="settings"] .set-row.tall > div:first-child { padding-top: 2px; }
body[data-view="settings"] .set-row.tall .set-textarea { min-width: 320px; }

/* ── Sidebar: keyboard focus-visible (was missing entirely) ─────────────────── */
body[data-view="settings"] .settings-tab:focus-visible,
body[data-view="settings"] .settings-easy:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgb(var(--accent-rgb) / 0.45) !important;
}
/* Easy-access (Sign Out / Delete): crisper, calmer hover + danger focus ring */
body[data-view="settings"] .settings-easy {
  transition: background var(--d-fast) var(--ease-out), color var(--d-fast) var(--ease-out) !important;
}
body[data-view="settings"] .settings-easy-danger:focus-visible {
  box-shadow: 0 0 0 2px rgb(223 107 115 / 0.45) !important;
}

/* ── Buttons in pane: keyboard focus-visible parity ─────────────────────────── */
body[data-view="settings"] .ghost-btn:focus-visible,
body[data-view="settings"] .danger-btn:focus-visible,
body[data-view="settings"] .seg-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / 0.22) !important;
}
body[data-view="settings"] .danger-btn:focus-visible {
  box-shadow: 0 0 0 3px rgb(223 107 115 / 0.28) !important;
}

/* ── Plan-hero CTA: calm flagship lift (no constellation - reserved) ─────────── */
body[data-view="settings"] .plan-hero .primary-btn {
  transition: transform var(--d-fast) var(--ease-out),
              box-shadow var(--d-base) var(--ease-out),
              filter var(--d-fast) var(--ease-out) !important;
}
body[data-view="settings"] .plan-hero .primary-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgb(var(--accent-blue-rgb) / 0.32) !important;
  filter: brightness(1.06);
}
body[data-view="settings"] .plan-hero .primary-btn:active { transform: translateY(0); }

/* ── AI-connect status pill: at-a-glance status dot ─────────────────────────── */
body[data-view="settings"] .ai-status-pill {
  display: inline-flex; align-items: center; gap: 6px;
}
body[data-view="settings"] .ai-status-pill::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; box-shadow: 0 0 6px currentColor;
}

/* ── Connector cards: frame the glyph in a clean icon tile + hover lift ──────── */
body[data-view="settings"] .conn-card { transition: border-color var(--d-base) var(--ease-out), transform var(--d-base) var(--ease-out), box-shadow var(--d-base) var(--ease-out) !important; }
body[data-view="settings"] .conn-icon {
  display: flex; align-items: center; justify-content: center;
  width: 40px !important; height: 40px;
  font-size: 19px !important;
  border-radius: 10px;
  background: rgb(var(--accent-rgb) / 0.06);
  border: 1px solid rgb(var(--accent-rgb) / 0.12);
  transition: transform var(--d-base) var(--ease-out), background var(--d-base) var(--ease-out);
}
body[data-view="settings"] .conn-card:hover .conn-icon {
  transform: translateY(-1px) scale(1.04);
  background: rgb(var(--accent-rgb) / 0.10);
}
/* "Coming soon" reads as a quiet status chip, not a dead button */
body[data-view="settings"] .conn-card .ghost-btn[disabled] {
  font-size: 11px !important; letter-spacing: 0.01em !important;
  padding: 6px 11px !important; opacity: 1 !important;
  color: var(--text-dim) !important;
  border-color: rgba(255,255,255,0.07) !important;
  background: rgba(255,255,255,0.02) !important;
  cursor: default;
}
body[data-theme="light"][data-view="settings"] .conn-card .ghost-btn[disabled] {
  border-color: var(--border) !important;
  background: rgb(20 22 40 / 0.02) !important;
}

/* ── Disabled toggles: unmistakably "locked" (regulatory / desktop-only) ─────── */
body[data-view="settings"] .set-toggle[disabled] { opacity: 0.5 !important; cursor: not-allowed; }
body[data-view="settings"] .set-toggle[disabled]:hover { filter: none; }

/* ── Callout: subtle leading accent rule for hierarchy ──────────────────────── */
body[data-view="settings"] .set-callout { position: relative; padding-left: 16px; }
body[data-view="settings"] .set-callout::before {
  content: ""; position: absolute; left: 0; top: 10px; bottom: 10px;
  width: 2px; border-radius: 999px; background: rgb(var(--accent-rgb) / 0.45);
}

/* ── Light-theme correctness for the new field states ───────────────────────── */
body[data-theme="light"][data-view="settings"] .set-input:hover:not(:focus),
body[data-theme="light"][data-view="settings"] .set-textarea:hover:not(:focus) {
  border-color: rgb(var(--accent-rgb) / 0.35) !important;
}
body[data-theme="light"][data-view="settings"] .set-input:focus,
body[data-theme="light"][data-view="settings"] .set-textarea:focus {
  background: rgb(var(--accent-rgb) / 0.05) !important;
  box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / 0.14) !important;
}
body[data-theme="light"][data-view="settings"] .conn-icon {
  background: rgb(var(--accent-rgb) / 0.07);
  border-color: rgb(var(--accent-rgb) / 0.16);
}

/* ── Reduced motion: drop the CTA/icon transforms, keep static focus rings ──── */
@media (prefers-reduced-motion: reduce) {
  body[data-view="settings"] .plan-hero .primary-btn,
  body[data-view="settings"] .conn-card,
  body[data-view="settings"] .conn-icon,
  body[data-view="settings"] .set-input,
  body[data-view="settings"] .set-textarea { transition: none !important; }
  body[data-view="settings"] .plan-hero .primary-btn:hover { transform: none; }
  body[data-view="settings"] .conn-card:hover .conn-icon { transform: none; }
}
/* ===== /FLEET: SETTINGS (micro-polish pass) ===== */

/* ===== FLEET: HISTORY (surface polish) ===== */
/* Pixel-clean alignment, fluent hover/focus, calm skeleton + empty states,
   correct in both themes. Scoped to .view-history / .hist-* / .hmm-* only. */

/* ── Filter bar: sticky, consistent hairline, roomier ── */
.view-history .hist-bar {
  position: sticky; top: 0; z-index: 5;
  gap: 8px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.view-history .hist-search,
.view-history .hist-filter {
  height: 36px; box-sizing: border-box;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  transition: border-color .14s ease, background .14s ease, box-shadow .14s ease;
}
.view-history .hist-search { display: inline-flex; align-items: center; }
.view-history .hist-search::placeholder { color: var(--text-dim); }
.view-history .hist-search:hover,
.view-history .hist-filter:hover { border-color: rgba(255,255,255,0.16); }
.view-history .hist-search:focus,
.view-history .hist-search:focus-visible {
  outline: none;
  border-color: rgb(var(--accent-rgb) / 0.55);
  background: rgb(var(--accent-rgb) / 0.05);
  box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / 0.12);
}
.view-history .hist-filter { color: var(--text-muted); padding-right: 28px; }
.view-history .hist-filter:focus-visible {
  outline: none;
  border-color: rgb(var(--accent-rgb) / 0.55);
  box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / 0.12);
}

/* ── Rows: accent left-rail + icon activation on hover/focus ── */
.view-history .hist-row {
  border-bottom: 1px solid var(--border);
  transition: background .14s ease, box-shadow .14s ease;
  outline: none;
}
.view-history .hist-row::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: rgb(var(--accent-rgb) / 0.9);
  transform: scaleY(0); transform-origin: center;
  transition: transform .16s cubic-bezier(0.16,1,0.3,1);
}
.view-history .hist-row:hover,
.view-history .hist-row:focus-visible {
  background: rgb(var(--accent-rgb) / 0.045);
}
.view-history .hist-row:hover::before,
.view-history .hist-row:focus-visible::before { transform: scaleY(1); }
.view-history .hist-row:focus-visible {
  box-shadow: inset 0 0 0 1px rgb(var(--accent-rgb) / 0.30);
}
.view-history .hist-row .ico { transition: color .14s ease; }
.view-history .hist-row:hover .ico,
.view-history .hist-row:focus-visible .ico { color: var(--accent); }
.view-history .hist-row .title { transition: color .14s ease; font-weight: 450; }
.view-history .hist-row:hover .title,
.view-history .hist-row:focus-visible .title { color: var(--text); }

/* File chip: keep the paperclip glyph optically aligned with the label */
.view-history .hist-row .file-tag .clip { flex: 0 0 11px; opacity: 0.8; }

/* Move button: reveal on row hover/focus, clear focus ring */
.view-history .hist-row:focus-visible .hist-move { opacity: 0.65; }
.view-history .hist-move:focus-visible {
  opacity: 1 !important; outline: none;
  background: rgb(var(--accent-rgb) / 0.12); color: var(--text);
  box-shadow: 0 0 0 2px rgb(var(--accent-rgb) / 0.30);
}

/* ── Loading skeleton (mirrors the row grid) ── */
.view-history .hist-skel-row {
  display: grid;
  grid-template-columns: 24px 1fr auto auto;
  align-items: center; gap: 16px;
  padding: 14px 32px;
  border-bottom: 1px solid var(--border);
}
.view-history .hist-skel-ico { width: 14px; height: 14px; border-radius: 4px; }
.view-history .hist-skel-title { height: 11px; border-radius: 5px; }
.view-history .hist-skel-tag { width: 62px; height: 18px; border-radius: 999px; justify-self: end; }
.view-history .hist-skel-when { width: 52px; height: 10px; border-radius: 5px; justify-self: end; }

/* ── Empty state: SVG in a soft ring + CTA ── */
.view-history .hist-empty { padding: 72px 24px; }
.view-history .hist-empty .ico {
  width: 56px; height: 56px; margin: 0 auto 18px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 16px;
  background: rgb(var(--accent-rgb) / 0.06);
  border: 1px solid rgb(var(--accent-rgb) / 0.16);
  color: var(--accent);
  opacity: 1;
  font-size: 0 !important;            /* neutralize legacy emoji sizing */
}
.view-history .hist-empty .ico svg { width: 26px; height: 26px; }
.view-history .hist-empty p { max-width: 340px; margin: 0 auto; line-height: 1.5; }
.view-history .hist-empty-cta {
  margin-top: 18px;
  font: inherit; font-size: 13px; font-weight: 550;
  padding: 8px 16px; border-radius: 8px; cursor: pointer;
  color: var(--text-muted);
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  transition: border-color .14s ease, color .14s ease, background .14s ease, transform .14s ease;
}
.view-history .hist-empty-cta:hover {
  color: var(--text); border-color: rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.05);
}
.view-history .hist-empty-cta.primary {
  color: #fff;
  background: rgb(var(--accent-blue-rgb));
  border-color: transparent;
}
.view-history .hist-empty-cta.primary:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
  box-shadow: 0 6px 18px rgb(var(--accent-blue-rgb) / 0.32);
}
.view-history .hist-empty-cta:focus-visible {
  outline: none; box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / 0.30);
}

/* ── Move menu: light shadow + calm entrance ── */
.hist-move-menu { animation: histMenuIn .13s cubic-bezier(0.16,1,0.3,1); transform-origin: top center; }
@keyframes histMenuIn {
  from { opacity: 0; transform: translateY(-4px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Light theme corrections ── */
body[data-theme="light"] .view-history .hist-bar { background: var(--bg); }
body[data-theme="light"] .view-history .hist-search,
body[data-theme="light"] .view-history .hist-filter,
body[data-theme="light"] .view-history .hist-empty-cta:not(.primary) {
  background: rgba(0,0,0,0.02);
}
body[data-theme="light"] .view-history .hist-search:hover,
body[data-theme="light"] .view-history .hist-filter:hover,
body[data-theme="light"] .view-history .hist-empty-cta:not(.primary):hover {
  border-color: rgba(0,0,0,0.16);
}
body[data-theme="light"] .hist-move:hover { background: rgba(0,0,0,0.05); }
body[data-theme="light"] .hist-move-menu { box-shadow: 0 12px 30px rgba(20,28,48,0.18); }

/* ── Motion off ── */
@media (prefers-reduced-motion: reduce) {
  .view-history .hist-row::before,
  .view-history .hist-row,
  .view-history .hist-row .ico,
  .view-history .hist-row .title,
  .view-history .hist-empty-cta { transition: none !important; }
  .view-history .hist-empty-cta.primary:hover { transform: none; }
  .hist-move-menu { animation: none; }
}
/* ===== /FLEET: HISTORY (surface polish) ===== */

/* ===== FLEET: SKILLS ===== */
/* Visual polish for the Skills surface: keyboard focus, line-icon check/delete,
   calm card entrance, and a real empty/no-results state. Tokens only; scoped to
   .view-skills / .skill* so no other surface is touched. The enabled check FILL
   and icon tile colors are owned by earlier !important rules - we only refine the
   inner SVG glyph, motion, focus, delete affordance, and empty state here. */

/* Card entrance - calm staggered fade (matches recents/projects cadence) */
.view-skills .skill-card {
  animation: skillIn 0.42s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(var(--i, 0) * 28ms);
  will-change: transform, opacity;
}
@keyframes skillIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* Keyboard focus - visible accent ring on cards, search, and pills.
   :focus-visible only, so mouse clicks stay clean. */
.view-skills .skill-card:focus { outline: none; }
.view-skills .skill-card:focus-visible {
  outline: none;
  border-color: rgb(var(--accent-rgb) / 0.55);
  box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / 0.16);
}
.view-skills .search-wrap:focus-within {
  box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / 0.12);
}
.view-skills .filter-pills .pill:focus-visible {
  outline: none;
  border-color: rgb(var(--accent-rgb) / 0.55);
  box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / 0.14);
}

/* Check affordance - empty ring → filled accent tick. SVG sits perfectly
   centered; the glyph scales in when enabled for a crisp confirm. */
.view-skills .skill-check {
  color: transparent;
}
.view-skills .skill-check svg {
  display: block;
  transform: scale(0.6);
  opacity: 0;
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.14s ease;
}
.view-skills .skill-card.enabled .skill-check svg {
  transform: scale(1);
  opacity: 1;
}

/* Icon tile: nudge to top-align with the first text line on 2-line descriptions
   so tall cards never look bottom-heavy, and add a soft lift in/out. */
.view-skills .skill-card { align-items: center; }
.view-skills .skill-icon { transition: transform 0.18s cubic-bezier(0.16,1,0.3,1); }
.view-skills .skill-card:hover .skill-icon { transform: translateY(-1px); }

/* Delete (custom skills): line-X that FADES in on hover/focus instead of
   snapping via display:grid. Parks left of the check so the row stays balanced. */
.view-skills .skill-delete {
  display: grid;
  place-items: center;
  top: 50%;
  right: 46px;
  transform: translateY(-50%) scale(0.9);
  width: 24px; height: 24px;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.view-skills .skill-card.custom:hover .skill-delete,
.view-skills .skill-card.custom:focus-visible .skill-delete,
.view-skills .skill-delete:focus-visible {
  opacity: 1;
  pointer-events: auto;
}
.view-skills .skill-delete svg { display: block; }
.view-skills .skill-delete:hover {
  background: rgb(229 112 122 / 0.14);
  color: var(--danger);
  transform: translateY(-50%) scale(1);
}
.view-skills .skill-delete:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgb(229 112 122 / 0.18);
}

/* "+ Create" CTA - line-icon plus, tight to its label */
.view-skills .topbar #new-skill-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.view-skills .topbar #new-skill-btn svg { display: block; }

/* "N active" note → a quiet hairline pill (mono micro-label, on-brand chrome) */
.view-skills #skills-active-note:not(:empty) {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 4px 9px;
  border: 1px solid rgb(var(--accent-rgb) / 0.24);
  background: rgb(var(--accent-rgb) / 0.08);
  border-radius: 999px;
}

/* Empty / no-results state - centered, calm, line-icon in a hairline tile.
   Replaces the bare ":empty::before" text (which never showed once empty
   sections were hidden, leaving a blank page on no-match searches). */
.view-skills .skills-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  padding: 56px 24px 64px;
  animation: skillIn 0.4s cubic-bezier(0.16,1,0.3,1) both;
}
.view-skills .skills-empty.hidden { display: none; }
.view-skills .skills-empty-icon {
  width: 52px; height: 52px;
  margin-bottom: 14px;
  padding: 13px;
  box-sizing: border-box;
  border-radius: var(--r-lg);
  color: var(--text-dim);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
}
.view-skills .skills-empty-title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}
.view-skills .skills-empty-sub {
  font-size: 13px;
  color: var(--text-dim);
  max-width: 320px;
  line-height: 1.5;
}

/* Light theme - keep the new chrome legible on white surfaces */
body[data-theme="light"] .view-skills .skills-empty-icon {
  background: rgb(var(--accent-rgb) / 0.05);
  border-color: var(--border-strong);
}
body[data-theme="light"] .view-skills .skill-card:focus-visible {
  box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / 0.18);
}

/* Respect reduced-motion - kill entrances + glyph spring, keep states */
@media (prefers-reduced-motion: reduce) {
  .view-skills .skill-card,
  .view-skills .skills-empty { animation: none; }
  .view-skills .skill-check svg,
  .view-skills .skill-icon,
  .view-skills .skill-delete { transition: opacity 0.12s ease; }
}
/* ===== /FLEET: SKILLS ===== */


/* ════ NEON DIAGRAMS - glowing blue line-art on black + draw-in motion ════ */
.mermaid-diagram svg { filter: drop-shadow(0 0 2.5px rgb(94 169 255 / 0.55)); animation: mmd-rise 0.7s var(--ease-out, ease) both; }
.mermaid-diagram svg .nodeLabel, .mermaid-diagram svg .edgeLabel, .mermaid-diagram svg text, .mermaid-diagram svg .label { fill: #EAF2FF !important; color: #EAF2FF !important; }
.mermaid-diagram svg .node rect, .mermaid-diagram svg .node circle, .mermaid-diagram svg .node polygon, .mermaid-diagram svg .node path, .mermaid-diagram svg .cluster rect { stroke: #5EA9FF !important; stroke-width: 1.6px; }
@keyframes mmd-rise { from { opacity: 0; transform: translateY(10px) scale(0.985); } to { opacity: 1; transform: none; } }
body[data-theme="light"] .mermaid-diagram { background: radial-gradient(130% 100% at 50% 0%, #f4f8ff 0%, #e9f0fb 82%); border-color: rgb(37 99 235 / 0.20); box-shadow: none; }
body[data-theme="light"] .mermaid-diagram svg { filter: drop-shadow(0 0 1.5px rgb(37 99 235 / 0.4)); }
body[data-theme="light"] .mermaid-diagram svg .nodeLabel, body[data-theme="light"] .mermaid-diagram svg text, body[data-theme="light"] .mermaid-diagram svg .label { fill: #16213C !important; color: #16213C !important; }
body[data-theme="light"] .mermaid-diagram svg .node rect, body[data-theme="light"] .mermaid-diagram svg .node circle, body[data-theme="light"] .mermaid-diagram svg .node polygon { stroke: #2563EB !important; }


/* ════ NEON DIAGRAMS - force dark node fills + bright labels (beats container-ui) ════ */
.mermaid-diagram svg .node rect, .mermaid-diagram svg .node circle, .mermaid-diagram svg .node polygon, .mermaid-diagram svg .node path { fill: rgb(94 169 255 / 0.07) !important; stroke: #5EA9FF !important; }
.mermaid-diagram svg .labelBkg, .mermaid-diagram svg .edgeLabel > rect, .mermaid-diagram svg rect.label-container { fill: transparent !important; opacity: 0 !important; }
.mermaid-diagram svg .nodeLabel, .mermaid-diagram svg .nodeLabel *, .mermaid-diagram svg .edgeLabel, .mermaid-diagram svg .edgeLabel *, .mermaid-diagram svg text, .mermaid-diagram svg tspan { fill: #EAF2FF !important; color: #EAF2FF !important; }
body[data-theme="light"] .mermaid-diagram svg .node rect, body[data-theme="light"] .mermaid-diagram svg .node circle, body[data-theme="light"] .mermaid-diagram svg .node polygon { fill: rgb(37 99 235 / 0.06) !important; stroke: #2563EB !important; }
body[data-theme="light"] .mermaid-diagram svg .nodeLabel, body[data-theme="light"] .mermaid-diagram svg .nodeLabel *, body[data-theme="light"] .mermaid-diagram svg text, body[data-theme="light"] .mermaid-diagram svg tspan { fill: #16213C !important; color: #16213C !important; }


/* Diagram draw-in motion */
@keyframes mmd-draw { to { stroke-dashoffset: 0; } }
@keyframes mmd-fade { from { opacity: 0; } to { opacity: 1; } }


/* ════ MATH PLOTS - glowing blue curves on near-black (Visual Learn "See it") ════ */
.plot-figure {
  margin: 0.9em 0; padding: 0; overflow: hidden;
  background: radial-gradient(130% 100% at 50% 0%, #0b0f18 0%, #06070b 72%);
  border: 1px solid rgb(94 169 255 / 0.16); border-radius: 16px;
  box-shadow: inset 0 0 50px rgb(94 169 255 / 0.05), 0 8px 30px -12px rgba(0,0,0,0.6);
}
.plot-figure .plot-cap {
  padding: 9px 15px; text-align: left;
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: #6b8cb8;
  background: rgb(94 169 255 / 0.06); border-bottom: 1px solid rgb(94 169 255 / 0.12);
}
.plot-svg { display: block; width: 100%; max-width: 100%; height: auto; padding: 14px 16px 16px; box-sizing: border-box; }
.plot-grid { stroke: rgb(120 150 200 / 0.07); stroke-width: 1; }
.plot-axis { stroke: rgb(180 200 235 / 0.22); stroke-width: 1.2; }
.plot-curve { fill: none; stroke: #5EA9FF; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; shape-rendering: geometricPrecision; filter: drop-shadow(0 0 4px rgb(94 169 255 / 0.75)); }
.plot-dot { fill: #ffffff; filter: drop-shadow(0 0 5px rgb(255 255 255 / 0.85)); }
body[data-theme="light"] .plot-figure { background: radial-gradient(130% 100% at 50% 0%, #f4f8ff 0%, #e9f0fb 82%); border-color: rgb(37 99 235 / 0.20); box-shadow: none; }
body[data-theme="light"] .plot-axis { stroke: rgb(30 50 90 / 0.3); }
body[data-theme="light"] .plot-curve { stroke: #2563EB; filter: drop-shadow(0 0 2px rgb(37 99 235 / 0.5)); }
body[data-theme="light"] .plot-dot { fill: #16213C; filter: none; }
/* Interactive hover crosshair on function plots */
.plot-axislbl { fill: #6b8cb8; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; font-style: italic; font-weight: 600; }
.plot-cross-v { stroke: rgb(var(--accent-rgb) / 0.5); stroke-width: 1; stroke-dasharray: 4 4; }
.plot-cross-dot { fill: #fff; stroke: #5EA9FF; stroke-width: 1.5; filter: drop-shadow(0 0 6px rgb(94 169 255 / 0.9)); }
.plot-cross-label { fill: #EAF2FF; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; font-weight: 700; paint-order: stroke; stroke: rgba(6,7,11,0.85); stroke-width: 3px; }
body[data-theme="light"] .plot-cross-label { fill: #16213C; stroke: rgba(255,255,255,0.92); }

/* ════ INTERACTIVE UNIT CIRCLE (```trig) - drag the angle, live sin/cos/tan ════ */
.trig-figure {
  margin: 0.9em 0; padding: 18px 20px; overflow: hidden;
  display: flex; gap: 22px; align-items: center; flex-wrap: wrap;
  background: radial-gradient(130% 100% at 50% 0%, #0b0f18 0%, #06070b 72%);
  border: 1px solid rgb(94 169 255 / 0.16); border-radius: 16px;
  box-shadow: inset 0 0 50px rgb(94 169 255 / 0.05), 0 8px 30px -12px rgba(0,0,0,0.6);
}
.trig-left { flex: 1 1 190px; min-width: 175px; display: flex; flex-direction: column; gap: 13px; }
.trig-right { flex: 0 1 320px; min-width: 220px; }
.trig-svg { display: block; width: 100%; max-width: 340px; height: auto; margin: 0 auto; touch-action: none; }
.trig-title { font-size: 13.5px; font-weight: 700; color: var(--text); letter-spacing: -0.01em; }
.trig-angle { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.trig-deg { font-size: 34px; font-weight: 800; letter-spacing: -0.02em; color: #EAF2FF;
  font-variant-numeric: tabular-nums; text-shadow: 0 0 16px rgb(94 169 255 / 0.45); }
.trig-rad { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 13px; color: #6b8cb8; }
.trig-quad { font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #50607a; width: 100%; }
.trig-vals { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.trig-vals .tv { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 7px 12px; border-radius: 10px; background: rgb(255 255 255 / 0.025); border: 1px solid rgb(255 255 255 / 0.05); }
.trig-vals .tv-k { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12.5px; color: #9fb3cf; }
.trig-vals .tv-v { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 15px; font-weight: 700;
  font-variant-numeric: tabular-nums; }
.tv-cos .tv-k, .tv-cos .tv-v { color: #74c69a; }
.tv-sin .tv-k, .tv-sin .tv-v { color: #ec6aa6; }
.tv-tan .tv-k, .tv-tan .tv-v { color: #d6a85f; }
.trig-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 5px; border-radius: 5px; cursor: pointer;
  background: linear-gradient(90deg, rgb(94 169 255 / 0.55), rgb(94 169 255 / 0.15)); outline: none; }
.trig-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 17px; height: 17px; border-radius: 50%;
  background: #EAF2FF; border: 2px solid #5EA9FF; box-shadow: 0 0 10px rgb(94 169 255 / 0.8); cursor: grab; }
.trig-slider::-moz-range-thumb { width: 15px; height: 15px; border-radius: 50%; background: #EAF2FF; border: 2px solid #5EA9FF;
  box-shadow: 0 0 10px rgb(94 169 255 / 0.8); cursor: grab; }
/* SVG layers */
.trig-axis { stroke: rgb(180 200 235 / 0.18); stroke-width: 1; }
.trig-tanvert { stroke: rgb(214 168 95 / 0.22); stroke-width: 1; stroke-dasharray: 3 4; }
.trig-circle { fill: rgb(94 169 255 / 0.04); stroke: #5EA9FF; stroke-width: 1.6; filter: drop-shadow(0 0 5px rgb(94 169 255 / 0.45)); }
.trig-arc { stroke: rgb(234 242 255 / 0.55); stroke-width: 2; }
.trig-ray { stroke: #5EA9FF; stroke-width: 2.6; stroke-linecap: round; filter: drop-shadow(0 0 5px rgb(94 169 255 / 0.8)); }
.trig-cos { stroke: #74c69a; stroke-width: 3; stroke-linecap: round; filter: drop-shadow(0 0 4px rgb(116 198 154 / 0.7)); }
.trig-sin { stroke: #ec6aa6; stroke-width: 3; stroke-linecap: round; filter: drop-shadow(0 0 4px rgb(236 106 166 / 0.7)); }
.trig-tan { stroke: #d6a85f; stroke-width: 3; stroke-linecap: round; filter: drop-shadow(0 0 4px rgb(214 168 95 / 0.7)); }
.trig-tanext { stroke: rgb(214 168 95 / 0.5); stroke-width: 1.4; stroke-dasharray: 4 4; }
.trig-pt { fill: #ffffff; stroke: #5EA9FF; stroke-width: 1.5; filter: drop-shadow(0 0 6px rgb(255 255 255 / 0.9)); }
.trig-coord { fill: #EAF2FF; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; font-weight: 600; paint-order: stroke; stroke: rgba(6,7,11,0.82); stroke-width: 3px; }
body[data-theme="light"] .trig-coord { fill: #16213C; stroke: rgba(255,255,255,0.9); }
body[data-theme="light"] .trig-figure { background: radial-gradient(130% 100% at 50% 0%, #f4f8ff 0%, #e9f0fb 82%); border-color: rgb(37 99 235 / 0.20); box-shadow: none; }
body[data-theme="light"] .trig-deg { color: #16213C; text-shadow: none; }
body[data-theme="light"] .trig-circle { stroke: #2563EB; filter: none; }
body[data-theme="light"] .trig-ray { stroke: #2563EB; filter: none; }
body[data-theme="light"] .trig-axis { stroke: rgb(30 50 90 / 0.25); }

/* ════ NUMBER LINE (```numberline) - inequalities, intervals, integer sets ═══ */
.nl-figure { margin: 0.9em 0; padding: 14px 18px 8px; background: radial-gradient(130% 100% at 50% 0%, #0b0f18 0%, #06070b 72%); border: 1px solid rgb(94 169 255 / 0.16); border-radius: 16px; box-shadow: inset 0 0 50px rgb(94 169 255 / 0.05), 0 8px 30px -12px rgba(0,0,0,0.6); }
.nl-label { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 15px; font-weight: 700; color: #EAF2FF; text-align: center; margin-bottom: 2px; letter-spacing: 0.02em; }
.nl-svg { display: block; width: 100%; max-width: 660px; height: auto; margin: 0 auto; }
.nl-axis { stroke: #5EA9FF; stroke-width: 2; filter: drop-shadow(0 0 4px rgb(94 169 255 / 0.5)); }
.nl-arrow { fill: #5EA9FF; }
.nl-tick { stroke: rgb(180 200 235 / 0.4); stroke-width: 1.4; }
.nl-num { fill: #8aa0c0; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; }
.nl-interval { stroke: #ec6aa6; stroke-width: 5; stroke-linecap: round; filter: drop-shadow(0 0 5px rgb(236 106 166 / 0.6)); }
.nl-end { stroke: #ec6aa6; stroke-width: 2.5; }
.nl-end.closed { fill: #ec6aa6; filter: drop-shadow(0 0 5px rgb(236 106 166 / 0.7)); }
.nl-end.open { fill: #0b0f18; }   /* inner-panel color so the hollow ring is visible (was #06070b = bg) */
.nl-ptlbl { fill: #fff; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; font-weight: 700; }
.nl-point { fill: #fff; stroke: #5EA9FF; stroke-width: 1.5; filter: drop-shadow(0 0 6px rgb(255 255 255 / 0.85)); }
body[data-theme="light"] .nl-figure { background: radial-gradient(130% 100% at 50% 0%, #f4f8ff 0%, #e9f0fb 82%); border-color: rgb(37 99 235 / 0.20); box-shadow: none; }
body[data-theme="light"] .nl-label { color: #16213C; }
body[data-theme="light"] .nl-axis { stroke: #2563EB; filter: none; }
body[data-theme="light"] .nl-arrow { fill: #2563EB; }
body[data-theme="light"] .nl-end.open { fill: #e9f0fb; }   /* match light panel so the ring stays visible */

/* ════ LaTeX math (KaTeX) ════════════════════════════════════════════════════ */
.math-block { margin: 14px 0; text-align: center; overflow-x: auto; overflow-y: hidden; padding: 2px 0; }
.katex { font-size: 1.06em; color: inherit; }
.math-block .katex { font-size: 1.22em; }
.katex-display { margin: 0; }
/* the boxed final answer (\boxed{} or our convention) reads as a highlighted chip */
.msg-content .katex .boxed, .msg-content .katex .fbox { border-color: rgb(var(--accent-rgb) / 0.5); }

/* ════ COORDINATE GEOMETRY (```coord) - points, segments, distance triangle ══ */
.coord-figure { margin: 0.9em 0; padding: 14px 16px; background: radial-gradient(130% 100% at 50% 0%, #0b0f18 0%, #06070b 72%); border: 1px solid rgb(94 169 255 / 0.16); border-radius: 16px; box-shadow: inset 0 0 50px rgb(94 169 255 / 0.05), 0 8px 30px -12px rgba(0,0,0,0.6); }
.coord-label { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 14px; font-weight: 700; color: #EAF2FF; text-align: center; margin-bottom: 6px; }
.coord-svg { display: block; width: 100%; max-width: 460px; height: auto; margin: 0 auto; }
.co-grid { stroke: rgb(120 150 200 / 0.07); stroke-width: 1; }
.co-axis { stroke: rgb(180 200 235 / 0.28); stroke-width: 1.3; }
.co-num { fill: #6b8cb8; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; }
.co-seg { stroke: #5EA9FF; stroke-width: 2.6; stroke-linecap: round; filter: drop-shadow(0 0 4px rgb(94 169 255 / 0.7)); }
.co-leg { stroke: rgb(180 200 235 / 0.45); stroke-width: 1.4; stroke-dasharray: 5 4; }
.co-pt { fill: #fff; stroke: #5EA9FF; stroke-width: 1.5; filter: drop-shadow(0 0 6px rgb(94 169 255 / 0.9)); }
.co-pill { fill: #2f6bdb; stroke: #5EA9FF; stroke-width: 1; filter: drop-shadow(0 0 5px rgb(94 169 255 / 0.4)); }
.co-pill-tx { fill: #fff; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; font-weight: 700; }
.co-meas { fill: #9fb3cf; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; font-weight: 600; }
.co-dist { fill: #ec6aa6; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; font-weight: 700; }
.co-mid { fill: #74c69a; stroke: #fff; stroke-width: 1.5; filter: drop-shadow(0 0 5px rgb(116 198 154 / 0.7)); }
.co-midlbl { fill: #74c69a; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; font-weight: 700; }
body[data-theme="light"] .coord-figure { background: radial-gradient(130% 100% at 50% 0%, #f4f8ff 0%, #e9f0fb 82%); border-color: rgb(37 99 235 / 0.20); box-shadow: none; }
body[data-theme="light"] .coord-label { color: #16213C; }
body[data-theme="light"] .co-axis { stroke: rgb(30 50 90 / 0.3); }
body[data-theme="light"] .co-seg { stroke: #2563EB; filter: none; }

/* ════ RIGHT TRIANGLE (```triangle) - Pythagorean / SOH-CAH-TOA ══════════════ */
.tri-figure { margin: 0.9em 0; padding: 14px 16px; background: radial-gradient(130% 100% at 50% 0%, #0b0f18 0%, #06070b 72%); border: 1px solid rgb(94 169 255 / 0.16); border-radius: 16px; box-shadow: inset 0 0 50px rgb(94 169 255 / 0.05), 0 8px 30px -12px rgba(0,0,0,0.6); }
.tri-title { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 14px; font-weight: 700; color: #EAF2FF; text-align: center; margin-bottom: 4px; }
.tri-label { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 13px; color: #9fb3cf; text-align: center; margin-top: 4px; }
.tri-svg { display: block; width: 100%; max-width: 380px; height: auto; margin: 0 auto; }
.tri-fill { fill: rgb(94 169 255 / 0.07); stroke: none; }
.tri-side { stroke-width: 3; stroke-linecap: round; }
.tri-a { stroke: #74c69a; filter: drop-shadow(0 0 4px rgb(116 198 154 / 0.6)); }
.tri-b { stroke: #ec6aa6; filter: drop-shadow(0 0 4px rgb(236 106 166 / 0.6)); }
.tri-c { stroke: #5EA9FF; filter: drop-shadow(0 0 4px rgb(94 169 255 / 0.7)); }
.tri-rt { fill: none; stroke: rgb(180 200 235 / 0.5); stroke-width: 1.4; }
.tri-lbl { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12.5px; font-weight: 700; }
.tri-la { fill: #74c69a; } .tri-lb { fill: #ec6aa6; } .tri-lc { fill: #5EA9FF; }
.tri-theta { fill: #d6a85f; }
body[data-theme="light"] .tri-figure { background: radial-gradient(130% 100% at 50% 0%, #f4f8ff 0%, #e9f0fb 82%); border-color: rgb(37 99 235 / 0.20); box-shadow: none; }
body[data-theme="light"] .tri-title { color: #16213C; }

/* ════ Visual blocks: gentle entrance (polish) + reduced-motion respect (a11y) ═ */
@keyframes vizIn { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
.plot-figure, .trig-figure, .nl-figure, .coord-figure, .tri-figure { animation: vizIn 0.45s var(--ease-out, ease) both; }
@media (prefers-reduced-motion: reduce) {
  .plot-figure, .trig-figure, .nl-figure, .coord-figure, .tri-figure { animation: none; }
}
/* Geometry lines draw themselves in (matches the plot curve) */
@keyframes lineDraw { from { stroke-dashoffset: 600; } to { stroke-dashoffset: 0; } }
.co-seg, .tri-side, .nl-interval { stroke-dasharray: 600; animation: lineDraw 0.75s var(--ease-out, ease) both; }
@media (prefers-reduced-motion: reduce) { .co-seg, .tri-side, .nl-interval { animation: none; stroke-dasharray: 0; } }


/* Plot axis ticks + numbers */
.plot-tick { stroke: rgb(180 200 235 / 0.3); stroke-width: 1; }
.plot-num { fill: rgb(150 170 205 / 0.72); font-size: 11px; font-family: 'JetBrains Mono', ui-monospace, monospace; }
body[data-theme="light"] .plot-tick { stroke: rgb(40 60 100 / 0.35); }
body[data-theme="light"] .plot-num { fill: rgb(40 60 100 / 0.72); }


/* Offline banner (boot-failure / connectivity) */
.offline-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; gap: 9px; padding: 9px 14px; font-size: 13px; font-weight: 500; color: #fff; background: linear-gradient(180deg, rgba(223,107,115,0.96), rgba(200,86,94,0.96)); box-shadow: 0 4px 18px rgba(0,0,0,0.4); animation: ob-slide .3s ease; }
.offline-banner .ob-dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: pulse 1.3s ease-in-out infinite; }
@keyframes ob-slide { from { transform: translateY(-100%); } to { transform: none; } }

/* One-click update banner (desktop app) */
.update-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 10px 16px; font-size: 13px; font-weight: 500; color: #04111a; background: linear-gradient(180deg, rgb(var(--accent-rgb)), rgb(var(--accent-rgb) / 0.92)); box-shadow: 0 4px 18px rgba(0,0,0,0.4); animation: ob-slide .3s ease; }
.update-banner .ub-dot { width: 8px; height: 8px; border-radius: 50%; background: #04111a; animation: pulse 1.3s ease-in-out infinite; }
.update-banner .ub-text strong { font-weight: 800; }
.update-banner .ub-now { background: #04111a; color: #fff; border: 0; border-radius: 8px; padding: 5px 14px; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.update-banner .ub-now:hover { filter: brightness(1.25); }
.update-banner .ub-now:disabled { opacity: 0.6; cursor: default; }
.update-banner .ub-later { background: transparent; border: 0; color: rgba(4,17,26,0.72); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.update-banner .ub-later:hover { color: #04111a; }


/* ===== MAXOUT: Projects Grid ===== */

/* Subject color system - mirrors Tasks design for cohesion */
body[data-view="projects"] .project-card {
  --subj: transparent;
}

/* Derive subject color from dominant assignment class (set by JS) */
body[data-view="projects"] .project-card[data-subject="blue"] { --subj: rgb(124, 196, 255); }
body[data-view="projects"] .project-card[data-subject="green"] { --subj: rgb(95, 224, 160); }
body[data-view="projects"] .project-card[data-subject="orange"] { --subj: rgb(255, 176, 102); }
body[data-view="projects"] .project-card[data-subject="yellow"] { --subj: rgb(255, 215, 94); }
body[data-view="projects"] .project-card[data-subject="purple"] { --subj: rgb(198, 164, 255); }
body[data-view="projects"] .project-card[data-subject="red"] { --subj: rgb(255, 138, 138); }
body[data-view="projects"] .project-card[data-subject="gray"] { --subj: var(--border-strong); }

/* Left-edge subject stripe - fades in on hover, reserves space */
body[data-view="projects"] .project-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--subj);
  border-radius: 14px 0 0 14px;
  opacity: 0;
  transition: opacity 0.16s ease;
  pointer-events: none;
}

body[data-view="projects"] .project-card:hover::before {
  opacity: 0.85;
}

/* Pinned visual accent - corner detail + soft glow when pinned */
body[data-view="projects"] .project-card.has-assignments::before {
  opacity: 0.5; /* always faintly visible */
}

body[data-view="projects"] .project-card.pinned::before {
  opacity: 1;
  background: linear-gradient(180deg, var(--subj) 0%, var(--subj) 70%, transparent);
}

/* Adjust card padding to account for left stripe */
body[data-view="projects"] .project-card {
  padding-left: 18px !important;
}

/* Stats row - urgent vs informational hierarchy */
body[data-view="projects"] .project-card .pc-stats {
  margin-top: 12px;
}

body[data-view="projects"] .project-card .pc-stats span.stat-urgent strong {
  color: rgb(var(--accent-rgb));
  font-weight: 700;
}

body[data-view="projects"] .project-card .pc-stats span.stat-info strong {
  color: var(--text);
  font-weight: 600;
}

/* Conversation count badge in detail view topbar */
#project-conv-count {
  display: inline-block;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
  background: var(--bg-elev-1);
  transition: all 0.15s ease;
}

#project-conv-count:hover {
  border-color: var(--border-strong);
  color: var(--text);
}

/* Pinned card subtle top glow */
body[data-view="projects"] .project-card.pinned::after {
  opacity: 0.85;
  background: linear-gradient(90deg,
    transparent,
    rgb(var(--accent-rgb) / 0.7) 22%,
    rgb(var(--accent-rgb) / 0.7) 78%,
    transparent) !important;
}

/* ===== /MAXOUT: Projects Grid ===== */

/* ===== MAXOUT: connectors ===== */

/* Hero section - premium entrance momentum */
.conn-hero {
  background:
    radial-gradient(800px 300px at 80% 30%, rgb(var(--accent-rgb) / 0.12), transparent 60%),
    radial-gradient(600px 300px at 20% 70%, rgb(var(--accent-rgb) / 0.10), transparent 60%);
  box-shadow: inset 0 -1px 0 rgba(94,169,255,0.08);
}
.conn-hero-title {
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -0.025em;
  line-height: 1.15;
}
.conn-hero-title .grad {
  background: linear-gradient(90deg, rgb(94,169,255) 0%, rgb(94,169,255) 50%, rgba(94,169,255,0.7) 100%);
  background-size: 250% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: connShimmerBold 5.5s linear infinite;
}
@keyframes connShimmerBold {
  0% { background-position: 0% 50%; }
  100% { background-position: 250% 50%; }
}

/* Connector grid - staggered cascade entrance */
.conn-grid {
  animation: cascadeIn 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes cascadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Tiles - per-card stagger, enhanced interactions, generous spacing */
.conn-tile {
  background: linear-gradient(135deg, rgba(255,255,255,0.028), rgba(255,255,255,0.008));
  border: 1px solid rgba(94,169,255,0.08);
  padding: 24px 22px 20px;
  transition: all 0.24s cubic-bezier(0.16, 1, 0.3, 1);
  animation: tileSlideUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
.conn-tile:nth-child(1) { animation-delay: 0.05s; }
.conn-tile:nth-child(2) { animation-delay: 0.1s; }
.conn-tile:nth-child(3) { animation-delay: 0.15s; }
.conn-tile:nth-child(4) { animation-delay: 0.2s; }
.conn-tile:nth-child(5) { animation-delay: 0.25s; }
.conn-tile:nth-child(6) { animation-delay: 0.3s; }
@keyframes tileSlideUp {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

.conn-tile::before {
  background: radial-gradient(450px 220px at var(--mx,50%) var(--my,0%), var(--accent-color,rgb(var(--accent-rgb) / 0.20)), transparent 62%);
  opacity: 0;
  transition: opacity 0.32s ease-out;
}
.conn-tile:hover {
  transform: translateY(-4px);
  border-color: var(--accent-color, rgb(var(--accent-rgb) / 0.40));
  box-shadow: 0 16px 48px rgba(94,169,255,0.15), 0 8px 24px rgba(0,0,0,0.35);
}
.conn-tile:hover::before {
  opacity: 1;
}

.conn-tile-head {
  gap: 16px;
  margin-bottom: 14px;
}
.conn-tile-icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, var(--accent-color, rgb(var(--accent-rgb) / 0.28)), rgba(255,255,255,0.05));
  box-shadow: 0 6px 24px rgba(94,169,255,0.12);
  transition: all 0.22s ease;
}
.conn-tile:hover .conn-tile-icon {
  transform: scale(1.05);
  box-shadow: 0 8px 32px rgba(94,169,255,0.18);
}

.conn-tile-name {
  font-size: 16px;
  font-weight: 750;
  letter-spacing: -0.015em;
}
.conn-tile-status {
  font-size: 10px;
  letter-spacing: 0.12em;
  gap: 6px;
}
.conn-tile-status .dot {
  width: 7px;
  height: 7px;
  box-shadow: 0 0 8px currentColor;
}
.conn-tile-status.connected .dot {
  box-shadow: 0 0 12px var(--success);
}
.conn-tile-status.syncing .dot {
  box-shadow: 0 0 12px var(--accent);
  animation: hudPulse 1.4s ease-in-out infinite;
}

.conn-tile-desc {
  font-size: 13px;
  line-height: 1.6;
  margin-bottom: 16px;
  color: rgba(241,243,246,0.75);
}

.conn-tile-actions {
  gap: 10px;
  padding-top: 16px;
  border-top: 1px solid rgba(94,169,255,0.06);
  margin-top: auto;
}
.conn-tile-actions button,
.conn-tile-actions a {
  padding: 11px 14px;
  border: 1px solid rgba(94,169,255,0.18);
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 650;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  background: rgba(255,255,255,0.02);
}
.conn-tile-actions button:hover:not(:disabled),
.conn-tile-actions a:hover {
  border-color: rgb(var(--accent-rgb) / 0.32);
  background: rgb(var(--accent-rgb) / 0.08);
  color: rgb(94,169,255);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(94,169,255,0.12);
}
.conn-tile-actions button.primary {
  background: rgb(var(--accent-rgb) / 0.12);
  border-color: rgb(var(--accent-rgb) / 0.28);
  color: rgb(94,169,255);
  font-weight: 700;
}
.conn-tile-actions button.primary:hover {
  background: rgb(var(--accent-rgb) / 0.20);
  border-color: rgb(var(--accent-rgb) / 0.40);
  box-shadow: 0 6px 20px rgba(94,169,255,0.16);
  transform: translateY(-2.5px);
}
.conn-tile-actions button[disabled] {
  opacity: 0.3;
  cursor: not-allowed;
}

/* Coming soon state - clarity + hierarchy */
.conn-tile.coming-soon {
  opacity: 0.6;
  border-color: rgba(214,168,95,0.12);
}
.conn-tile.coming-soon::after {
  font-size: 9px;
  letter-spacing: 0.16em;
  background: rgba(214,168,95,0.12);
  border: 1px solid rgba(214,168,95,0.24);
  padding: 4px 10px;
}
.conn-tile.coming-soon .conn-tile-icon {
  opacity: 0.6;
}

/* Section title - subtle accent anchor */
.conn-section-title {
  font-size: 11px;
  letter-spacing: 0.20em;
  color: rgba(154,162,173,0.8);
  padding: 32px 36px 16px;
  position: relative;
  border-left: 2px solid rgba(94,169,255,0.15);
  padding-left: 32px;
}
.conn-section-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 20px;
  background: rgb(var(--accent-rgb) / 0.25);
}

/* Cloud teaser - unified gravity, premium CTA treatment */
.cloud-tease {
  margin: 52px 32px 0;
  padding: 60px 40px;
  border: 1px solid rgba(94,169,255,0.10);
  background: linear-gradient(180deg, rgba(5,5,9,0.5) 0%, rgba(10,10,24,0.35) 60%, rgba(6,6,16,0.4) 100%);
  box-shadow: inset 0 1px 0 rgba(94,169,255,0.06);
}
.cloud-tease-badge {
  background: rgb(var(--accent-rgb) / 0.08);
  border: 1px solid rgb(var(--accent-rgb) / 0.25);
  color: rgb(94,169,255);
  padding: 7px 16px;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  animation: badgeSlideDown 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.3s backwards;
}
@keyframes badgeSlideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
.cloud-tease-badge .dot {
  box-shadow: 0 0 8px rgb(var(--accent-rgb));
}

.cloud-tease-eyebrow {
  font-size: 11.5px;
  letter-spacing: 0.26em;
  color: rgba(154,162,173,0.7);
  margin-bottom: 18px;
}
.cloud-tease-title {
  font-size: 46px;
  font-weight: 900;
  letter-spacing: -0.028em;
  background: linear-gradient(175deg, #ffffff 0%, rgba(255,255,255,0.65) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin: 0 0 24px;
  line-height: 1.08;
}
.cloud-tease-sub {
  font-size: 16.5px;
  color: rgba(154,162,173,0.85);
  line-height: 1.65;
  margin: 0 auto 40px;
}

.cloud-tease-cta {
  background: rgb(var(--accent-rgb) / 0.14);
  border: 1.5px solid rgb(var(--accent-rgb) / 0.35);
  color: rgb(94,169,255);
  font-weight: 700;
  font-size: 15px;
  padding: 16px 36px;
  transition: all 0.20s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 16px rgba(94,169,255,0.10);
}
.cloud-tease-cta:hover {
  background: rgb(var(--accent-rgb) / 0.22);
  border-color: rgb(var(--accent-rgb) / 0.50);
  box-shadow: 0 8px 28px rgba(94,169,255,0.18);
  transform: translateY(-3px);
}

/* Settings connector grid - cohesion with main tiles */
.connector-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 12px;
  margin-bottom: 8px;
}
.conn-card {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(94,169,255,0.10);
  padding: 16px;
  border-radius: 12px;
  transition: all 0.18s ease;
}
.conn-card:hover {
  border-color: rgba(94,169,255,0.20);
  background: rgba(94,169,255,0.05);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(94,169,255,0.08);
}
.conn-icon {
  font-size: 20px;
  opacity: 0.95;
}
.conn-name {
  font-weight: 700;
  font-size: 14px;
  color: var(--text);
}
.conn-desc {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
  margin-top: 3px;
}

/* Responsive grace */
@media (max-width: 720px) {
  .conn-hero { padding: 24px; min-height: auto; }
  .conn-hero-title { font-size: 21px; }
  .conn-grid { grid-template-columns: 1fr; gap: 12px; padding: 0 16px; }
  .conn-section-title { padding: 28px 16px 12px; padding-left: 12px; }
  .cloud-tease { margin: 36px 16px 0; padding: 40px 24px; }
  .cloud-tease-title { font-size: 36px; }
}

/* ===== /MAXOUT: connectors ===== */

/* ===== MAXOUT: AUTOPILOT-DASHBOARD ===== */

/* ── Loading skeleton: shimmer, calm palette ──────────────────────── */
.ap-dash .ap-skel {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(296px, 1fr));
  gap: 12px;
  align-content: start;
}

.ap-skel-card {
  position: relative;
  background: var(--bg-elev-1);
  border: 1px solid var(--border);
  border-radius: 13px;
  padding: 15px 16px 14px;
  gap: 9px;
  overflow: hidden;
}

.ap-skel-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.08) 25%,
    rgba(255,255,255,0) 50%
  );
  animation: ap-shimmer 2s infinite;
}

@keyframes ap-shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
  .ap-skel-card::before { animation: none; opacity: 0.05; }
}

.ap-skel-line { height: 10px; background: rgba(255,255,255,0.06); border-radius: 4px; margin-bottom: 6px; }
.ap-skel-line.title { height: 14px; margin-bottom: 8px; width: 85%; }
.ap-skel-line.meta { height: 9px; width: 60%; }
.ap-skel-top { display: flex; gap: 8px; margin-bottom: 8px; }
.ap-skel-dot { width: 20px; height: 20px; border-radius: 999px; background: rgba(255,255,255,0.06); flex-shrink: 0; }

/* ── Card time display: relative, calm ─────────────────────────── */
.view-autopilot .ap-card-when {
  font-size: 11.5px;
  color: var(--text-muted);
  letter-spacing: 0;
}

/* ── Dashboard padding + max-width: breathing room ──────────────── */
.ap-dash-scroll {
  padding: 28px 40px 64px !important;
}

@media (max-width: 900px) {
  .ap-dash-scroll {
    padding: 24px 24px 48px !important;
  }
  .ap-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
  }
}

@media (max-width: 640px) {
  .ap-dash-scroll {
    padding: 20px 16px 40px !important;
  }
  .ap-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── Card enhanced: visual confidence ──────────────────────────── */
.view-autopilot .ap-card {
  position: relative;
  overflow: hidden;
}

.view-autopilot .ap-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle 280px at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgb(var(--accent-rgb) / 0.04) 0%,
    transparent 70%
  );
  opacity: 0;
  transition: opacity var(--d-base) var(--ease-out);
  pointer-events: none;
}

.view-autopilot .ap-card:hover::after {
  opacity: 1;
}

/* ── Subject color + badge as primary visual hierarchy ──────────── */
.view-autopilot .ap-card-top {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 2px;
}

.view-autopilot .task-subject {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 6px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Badge: tiny leading glow, refined ────────────────────────── */
.view-autopilot .ap-badge {
  margin-left: auto;
  position: relative;
  z-index: 2;
  font-size: 11px;
  padding: 4px 10px 4px 8px !important;
  border-radius: 999px !important;
}

.view-autopilot .ap-badge::before {
  width: 5px;
  height: 5px;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
}

.view-autopilot .ap-badge.turnedin::before {
  box-shadow: 0 0 8px rgba(116,198,154,0.7);
}

.view-autopilot .ap-badge.wrote::before {
  box-shadow: 0 0 8px rgb(var(--accent-rgb) / 0.7);
}

.view-autopilot .ap-badge.stopped::before {
  box-shadow: 0 0 8px rgba(223,107,115,0.7);
}

.view-autopilot .ap-badge.failed::before {
  box-shadow: 0 0 8px rgba(214,168,95,0.7);
}

/* ── Empty state: confident, minimal ────────────────────────────── */
.view-autopilot .ap-dash-empty {
  padding: 100px 24px !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.view-autopilot .ap-dash-empty .ap-empty-ico {
  position: relative;
  width: 70px;
  height: 70px;
  margin: 0 auto 20px !important;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: radial-gradient(
    circle at 50% 35%,
    rgb(var(--accent-rgb) / 0.12),
    transparent 65%
  ),
  linear-gradient(135deg, rgba(255,255,255,0.012), rgba(255,255,255,0));
  border: 1.5px solid rgb(var(--accent-rgb) / 0.18);
  color: rgb(var(--accent-rgb));
  font-size: 0 !important;
  opacity: 1 !important;
  animation: ap-empty-breathe 3s ease-in-out infinite;
}

@keyframes ap-empty-breathe {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.02); opacity: 0.95; }
}

@media (prefers-reduced-motion: reduce) {
  .view-autopilot .ap-dash-empty .ap-empty-ico {
    animation: none;
  }
}

.view-autopilot .ap-dash-empty .ap-empty-ico svg {
  width: 28px !important;
  height: 28px !important;
  stroke: currentColor;
}

.view-autopilot .ap-dash-empty h3 {
  font-size: 20px !important;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0 0 8px !important;
}

.view-autopilot .ap-dash-empty p {
  font-size: 14px;
  line-height: 1.65;
  max-width: 480px;
  color: var(--text-muted);
  margin: 0 !important;
}

.view-autopilot .ap-dash-empty p strong {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: rgb(var(--accent-rgb));
  background: rgb(var(--accent-rgb) / 0.10);
  border: 1px solid rgb(var(--accent-rgb) / 0.20);
  border-radius: 6px;
  padding: 2px 7px;
  display: inline-block;
  margin: 0 4px;
}

/* ── Report detail: enhanced visual hierarchy ───────────────────── */
.view-autopilot .ap-report {
  max-width: 820px;
  margin: 0 auto;
}

.view-autopilot .ap-report-head {
  position: relative;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}

.view-autopilot .ap-report-title {
  font-size: 24px !important;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2 !important;
  color: var(--text);
  margin-bottom: 6px;
}

/* ── Meta: tighter, icons integrated ───────────────────────────── */
.view-autopilot .ap-report-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.4;
}

.view-autopilot .ap-report-meta .ap-meta-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--text-muted);
}

.view-autopilot .ap-report-meta .ap-meta-ico svg {
  width: 14px;
  height: 14px;
}

.view-autopilot .ap-report-meta .ap-meta-sep {
  color: var(--border-strong);
  margin: 0 3px;
}

/* ── Primary action emphasis: Tutor button gets star treatment ─── */
.view-autopilot .ap-report-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin: 22px 0 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}

.view-autopilot .ap-report-actions .primary-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  padding: 10px 16px;
  border-radius: 10px;
  transition: all var(--d-base) var(--ease-out);
}

.view-autopilot .ap-report-actions .primary-btn svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.view-autopilot .ap-report-actions .ghost-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 9px;
}

.view-autopilot .ap-report-actions .ghost-btn svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* ── Error callout: calm, integrated ────────────────────────────── */
.view-autopilot .ap-report-err {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: rgb(214,168,95,0.08) !important;
  border: 1px solid rgb(214,168,95,0.24) !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  color: var(--warning) !important;
  font-size: 12.5px;
  line-height: 1.55;
  margin: 18px 0 0 !important;
}

.view-autopilot .ap-report-err svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 2px;
}

/* ── Answer panel: elevated, readable ──────────────────────────── */
.view-autopilot .ap-report-label {
  font-family: var(--font-mono);
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase;
  color: var(--text-dim) !important;
  margin: 28px 0 12px !important;
}

.view-autopilot .ap-report-answer {
  position: relative;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.015),
    rgba(255,255,255,0)
  ),
  var(--bg-elev-1) !important;
  border: 1px solid var(--border) !important;
  border-radius: 16px !important;
  padding: 24px 26px !important;
  font-size: 14px;
  line-height: 1.75 !important;
  color: var(--text);
  overflow-x: auto;
}

.view-autopilot .ap-report-answer > :first-child {
  margin-top: 0;
}

.view-autopilot .ap-report-answer > :last-child {
  margin-bottom: 0;
}

.view-autopilot .ap-noans {
  display: block;
  padding: 20px;
  text-align: center;
  color: var(--text-dim);
  font-style: italic;
  font-size: 13.5px;
}

/* ── Back button: integrated, interactive ──────────────────────── */
.view-autopilot .ap-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  font-size: 12.5px;
  font-weight: 600;
  padding: 7px 12px 7px 10px;
  margin: 0 0 22px -2px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255,255,255,0.015);
  cursor: pointer;
  transition: all var(--d-base) var(--ease-out);
  user-select: none;
}

.view-autopilot .ap-back::before {
  content: '←';
  font-weight: 400;
  font-size: 13px;
}

.view-autopilot .ap-back:hover {
  color: var(--text);
  border-color: rgb(var(--accent-rgb) / 0.28);
  background: rgb(var(--accent-rgb) / 0.05);
  transform: translateX(-2px);
}

.view-autopilot .ap-back:active {
  transform: translateX(-1px);
}

@media (prefers-reduced-motion: reduce) {
  .ap-skel-card::before,
  .ap-shimmer,
  .ap-empty-breathe { animation: none !important; }
  .view-autopilot .ap-card:hover::after,
  .view-autopilot .ap-back:hover,
  .view-autopilot .ap-card:hover::before { transform: none !important; transition: none !important; }
}

/* ===== /MAXOUT: AUTOPILOT-DASHBOARD ===== */

/* ===== MAXOUT: SURFACE-CHAT ===== */
/* Premium message rhythm, avatar personality, streaming feel, and scroll behavior
   for Apple-keynote caliber chat. Scoped to body[data-view="chat"] .view-chat,
   composing only :root tokens. Zero collision with other surfaces. */

/* ── Staggered message entry: each message reveals sequentially, not all at once ── */
body[data-view="chat"] .view-chat .msg {
  animation: msgReveal 0.5s cubic-bezier(0.16,1,0.3,1);
}
body[data-view="chat"] .view-chat .msg:nth-child(1) { animation-delay: 0ms; }
body[data-view="chat"] .view-chat .msg:nth-child(2) { animation-delay: 80ms; }
body[data-view="chat"] .view-chat .msg:nth-child(3) { animation-delay: 160ms; }
body[data-view="chat"] .view-chat .msg:nth-child(4) { animation-delay: 240ms; }
body[data-view="chat"] .view-chat .msg:nth-child(5) { animation-delay: 320ms; }
body[data-view="chat"] .view-chat .msg:nth-child(n+6) { animation-delay: 400ms; }

/* ── Assistant avatar: settled (not streaming) → constant glow, no flash, no spin.
      (Superseded later in this file too; kept consistent here to avoid a stray flash.) ── */
body[data-view="chat"] .view-chat .msg.assistant:not(.streaming) .msg-avatar.msg-avatar-orb .orb-mark {
  filter: drop-shadow(0 0 7px rgb(var(--accent-rgb) / 0.45));
  animation: none;
}

/* ── Streaming content: multi-stage pulsing cursor (alive, not static) ── */
body[data-view="chat"] .view-chat .msg-content.streaming::after {
  content: "▊";
  display: inline;
  color: var(--accent);
  margin-left: 2px;
  animation: streamCursor 1.4s cubic-bezier(0.45,0,0.55,1) infinite;
  opacity: 0.8;
}
@keyframes streamCursor {
  0%   { opacity: 0.3; transform: scaleY(0.8); }
  25%  { opacity: 0.8; transform: scaleY(1.1); }
  50%  { opacity: 1; transform: scaleY(0.9); }
  75%  { opacity: 0.5; transform: scaleY(1); }
  100% { opacity: 0.3; transform: scaleY(0.8); }
}

/* ── Typing indicator: thoughtful breathing rhythm ── */
body[data-view="chat"] .view-chat .typing span {
  animation: typingThink 1.6s cubic-bezier(0.45,0,0.55,1) infinite;
}
body[data-view="chat"] .view-chat .typing span:nth-child(1) { animation-delay: 0ms; }
body[data-view="chat"] .view-chat .typing span:nth-child(2) { animation-delay: 240ms; }
body[data-view="chat"] .view-chat .typing span:nth-child(3) { animation-delay: 480ms; }
@keyframes typingThink {
  0%   { opacity: 0.3; transform: translateY(0) scale(0.85); }
  40%  { opacity: 1; transform: translateY(-6px) scale(1.05); }
  100% { opacity: 0.3; transform: translateY(0) scale(0.85); }
}

/* ── User message: sent celebration with scale pulse ── */
body[data-view="chat"] .view-chat .msg.user {
  animation: userMsgSent 0.6s cubic-bezier(0.16,1,0.3,1);
}
@keyframes userMsgSent {
  0%   { opacity: 0; transform: translateY(12px) scale(0.92); }
  60%  { transform: translateY(0) scale(1.02); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── User avatar: micro-accent glow ping on message arrival ── */
body[data-view="chat"] .view-chat .msg.user .msg-avatar {
  animation: userAvatarPing 0.5s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes userAvatarPing {
  0%   { box-shadow: 0 0 0 0 rgb(var(--accent-rgb) / 0), inset 0 0 0 1px var(--border-strong); }
  50%  { box-shadow: 0 0 0 6px rgb(var(--accent-rgb) / 0.15), inset 0 0 0 1px var(--border-strong); }
  100% { box-shadow: 0 0 0 0 rgb(var(--accent-rgb) / 0), inset 0 0 0 1px var(--border-strong); }
}

/* ── Assistant avatar: gentle scale-in on first message ── */
body[data-view="chat"] .view-chat .msg.assistant .msg-avatar.msg-avatar-orb {
  animation: orbAvatarArrive 0.5s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes orbAvatarArrive {
  0%   { opacity: 0; transform: scale(0.7); }
  65%  { transform: scale(1.12); }
  100% { opacity: 1; transform: scale(1); }
}

/* ── Copy button: celebratory accent glow on success ── */
body[data-view="chat"] .view-chat .msg-copy-btn.copied {
  animation: copyCelebrate 0.5s cubic-bezier(0.34,1.56,0.64,1);
  box-shadow: 0 0 0 8px rgb(116,198,154,0.25);
}
@keyframes copyCelebrate {
  0%   { box-shadow: 0 0 0 0 rgb(116,198,154,0.6); }
  100% { box-shadow: 0 0 0 12px rgb(116,198,154,0.0); }
}

/* ── Composer send: pulse celebration on send ── */
body[data-view="chat"] .view-chat .composer .send-btn.sending {
  animation: sendPulse 0.6s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes sendPulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}

/* ── Chat container: soft bottom fade (readability + discoverability) ── */
body[data-view="chat"] .view-chat .chat {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22px, #000 calc(100% - 40px), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 22px, #000 calc(100% - 40px), transparent 100%);
}

/* ── Message density: adaptive breathing between different speaker pairs ── */
body[data-view="chat"] .view-chat .msg.assistant + .msg.assistant { margin-top: 8px; }
body[data-view="chat"] .view-chat .msg.user + .msg.user { margin-top: 4px; }
body[data-view="chat"] .view-chat .msg.assistant + .msg.user,
body[data-view="chat"] .view-chat .msg.user + .msg.assistant { margin-top: 18px; }

/* ── Composer lift: enhanced transform and glow on focus ── */
body[data-view="chat"] .view-chat .composer-inner:focus-within {
  transform: translateY(-2px);
  border-color: rgb(var(--accent-rgb) / 0.65);
  box-shadow: var(--shadow-md), 0 0 0 3px rgb(var(--accent-rgb) / 0.16), 0 0 44px rgb(var(--accent-rgb) / 0.18);
}

/* ── Send button hover: enhanced scale and filter ── */
body[data-view="chat"] .view-chat .composer .send-btn:hover:not(:disabled) {
  transform: scale(1.09) translateY(-1px);
  filter: brightness(1.15);
}

/* ── Voice recording: refined pulse animation ── */
body[data-view="chat"] .view-chat .composer .icon-btn.active {
  animation: voicePulse 1.4s ease-in-out infinite;
  background: rgba(223,107,115,0.15);
  color: var(--danger);
}
@keyframes voicePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(223,107,115,0.5); }
  50%      { box-shadow: 0 0 0 10px rgba(223,107,115,0.0); }
}

/* ── Respect reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  body[data-view="chat"] .view-chat .msg,
  body[data-view="chat"] .view-chat .msg.user,
  body[data-view="chat"] .view-chat .msg.assistant .msg-avatar.msg-avatar-orb,
  body[data-view="chat"] .view-chat .msg.user .msg-avatar,
  body[data-view="chat"] .view-chat .msg.assistant:not(.streaming) .msg-avatar.msg-avatar-orb .orb-mark,
  body[data-view="chat"] .view-chat .msg-content.streaming::after,
  body[data-view="chat"] .view-chat .typing span,
  body[data-view="chat"] .view-chat .msg-copy-btn.copied,
  body[data-view="chat"] .view-chat .composer .send-btn.sending,
  body[data-view="chat"] .view-chat .composer .icon-btn.active {
    animation: none !important;
  }
}
/* ===== /MAXOUT: SURFACE-CHAT ===== */

/* ===== MAXOUT: TASKS VIEW ===== */
/* Flagship polish pass on task cards, due-date urgency, completion delight,
   empty state charm, and micro-interaction richness. Scoped to .view-tasks;
   no :root / global redefines, respects all existing tokens. */

/* ── Task card: enhanced lift + subject glow on hover ─────────────────── */
.view-tasks .task-card {
  transition: all var(--d-base) var(--ease-out);
}
.view-tasks .task-card:hover {
  transform: translateY(-2px) !important;
}
.view-tasks .task-card.has-subj:hover {
  box-shadow: 0 10px 30px rgba(0,0,0,0.26), 0 0 18px var(--subj, rgb(var(--accent-rgb))) / 0.18 !important;
}
.view-tasks .task-card.has-subj:hover::before {
  opacity: 0.95 !important;
}

/* ── Due date: stronger urgency visual hierarchy ────────────────────── */
.view-tasks .task-due.overdue {
  background: rgb(223 107 115 / 0.14) !important;
  border-color: rgb(223 107 115 / 0.40) !important;
  font-weight: 700 !important;
}
.view-tasks .task-due.urgent {
  background: rgba(214,168,95,0.14) !important;
  border-color: rgba(214,168,95,0.38) !important;
  font-weight: 700 !important;
}

/* ── Subject badge: micro-lift + glow on card hover ──────────────────── */
.view-tasks .task-subject {
  transition: all var(--d-fast) var(--ease-out);
}
.view-tasks .task-card:hover .task-subject {
  transform: translateY(-1px);
  box-shadow: 0 0 12px currentColor / 0.25;
}

/* ── Help button: make it a touch more discoverable ──────────────────── */
.view-tasks .task-actions button[data-act="help"] {
  color: var(--text-muted) !important;
  transition: all var(--d-fast) var(--ease-out) !important;
}
.view-tasks .task-actions button[data-act="help"]:hover {
  color: rgb(var(--accent-rgb)) !important;
  background: rgb(var(--accent-rgb) / 0.08) !important;
  border-color: rgb(var(--accent-rgb) / 0.25) !important;
}

/* (Empty-state orb keeps its base steady glow + slow orbSpin — no pulsing.) */

/* ── Task completion: card exit animation on mark-done ───────────────── */
.view-tasks .task-card.done-exit {
  animation: tasks-done-exit var(--d-base) var(--ease-out) forwards;
}
@keyframes tasks-done-exit {
  0% { opacity: 1; transform: scale(1) translateY(0); }
  50% { opacity: 0.8; transform: scale(0.98); }
  100% { opacity: 0; transform: scale(0.95) translateY(-12px); }
}

/* ── Section header: leading accent dot for rhythm ────────────────── */
.view-tasks .task-section-head {
  position: relative;
}
.view-tasks .task-section-head::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 6px; height: 6px; border-radius: 50%;
  background: rgb(var(--accent-rgb));
  transform: translateY(-50%);
  opacity: 0.7;
  margin-right: 8px;
}
.view-tasks .task-section-head {
  padding-left: 14px;
}
.view-tasks .task-section-head .ts-label {
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  color: var(--text) !important;
  font-weight: 700 !important;
}
.view-tasks .task-section.overdue .task-section-head::before {
  background: var(--danger) !important;
}

/* ── Task grid: richer cascade-in with staggered pop effect ──────────── */
@keyframes tasks-card-pop {
  0% { opacity: 0; transform: scale(0.92) translateY(8px); }
  70% { transform: scale(1.02); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
.view-tasks .task-grid .task-card {
  animation: tasks-card-pop var(--d-base) var(--ease-out) both !important;
}

/* ── Filter pills: accent tint on hover, smoother transitions ──────── */
.view-tasks .filter-pill {
  transition: all var(--d-fast) var(--ease-out);
}
.view-tasks .filter-pill:hover {
  background: rgb(var(--accent-rgb) / 0.06) !important;
  border-color: rgb(var(--accent-rgb) / 0.25) !important;
  color: var(--text) !important;
}

/* ── Bulk action bar: soften the accent tint background ───────────── */
.view-tasks .tasks-bulkbar {
  background: rgb(var(--accent-rgb) / 0.05) !important;
  border: 1px solid rgb(var(--accent-rgb) / 0.20) !important;
}

/* ── Autopilot button: signature glow depth ────────────────────────── */
.view-tasks .task-actions button.do-it {
  position: relative;
  transition: all var(--d-base) var(--ease-out) !important;
}
.view-tasks .task-actions button.do-it:active {
  transform: translateY(0) !important;
}

/* ── Complete/delete buttons: quiet, with semantic color hints ────── */
.view-tasks .task-actions .task-done-check {
  transition: all var(--d-fast) var(--ease-out) !important;
}
.view-tasks .task-actions .task-done-check:hover {
  color: var(--success) !important;
  background: rgb(116 198 154 / 0.12) !important;
  border-color: rgb(116 198 154 / 0.40) !important;
  transform: scale(1.08);
}
.view-tasks .task-actions [data-act="del"] {
  transition: all var(--d-fast) var(--ease-out) !important;
}
.view-tasks .task-actions [data-act="del"]:hover {
  color: var(--danger) !important;
  background: rgb(223 107 115 / 0.12) !important;
  border-color: rgb(223 107 115 / 0.40) !important;
  transform: scale(1.08);
}

/* ── Task body loading state: gentle shimmer with subject awareness ─ */
.view-tasks .tasks-body.loading .tasks-skel {
  opacity: 0.8;
  animation: tasks-load-fade-in var(--d-base) var(--ease-out);
}
@keyframes tasks-load-fade-in {
  from { opacity: 0; }
  to { opacity: 0.8; }
}

/* Light theme refinements */
body[data-theme="light"] .view-tasks .task-card:hover {
  box-shadow: 0 8px 24px rgba(20,22,40,0.08) !important;
}
body[data-theme="light"] .view-tasks .task-card.has-subj:hover {
  box-shadow: 0 8px 24px rgba(20,22,40,0.08), 0 0 16px var(--subj, rgb(var(--accent-rgb))) / 0.12 !important;
}
body[data-theme="light"] .view-tasks .task-due.overdue {
  background: rgb(223 107 115 / 0.09) !important;
}
body[data-theme="light"] .view-tasks .task-due.urgent {
  background: rgba(214,168,95,0.09) !important;
}

/* ===== /MAXOUT: TASKS VIEW ===== */

/* ===== MAXOUT: surface-project-detail ===== */

/* ── Empty state cards: calm, scannable, intelligent affordance ── */
.rail-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  padding: 20px 16px;
  text-align: center;
  color: var(--text-dim);
  font-size: 13px;
  background: rgba(255,255,255,0.01);
  border-radius: 10px;
  border: 1px solid var(--border);
  min-height: 64px;
}
.rail-empty svg {
  width: 20px;
  height: 20px;
  color: var(--text-dim);
  opacity: 0.6;
}
.rail-empty span {
  font-weight: 500;
  letter-spacing: 0.01em;
}

body[data-view="project"] .rail-empty {
  background: rgba(255,255,255,0.012);
  border: 1px solid var(--border);
  color: var(--text-dim);
  padding: 22px 16px;
  min-height: 68px;
  transition: border-color 0.14s ease, background 0.14s ease;
}
body[data-view="project"] .rail-empty:hover {
  border-color: rgb(var(--accent-rgb) / 0.12);
  background: rgba(255,255,255,0.018);
}
body[data-view="project"] .rail-empty svg {
  opacity: 0.5;
  transition: opacity 0.14s ease;
}
body[data-view="project"] .rail-empty:hover svg {
  opacity: 0.7;
  color: rgb(var(--accent-rgb) / 0.6);
}

/* ── Aside card entrance animation + focus glow layer ── */
body[data-view="project"] .aside-card {
  animation: cardSlideIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}
body[data-view="project"] .aside-card:nth-child(1) { animation-delay: 0.08s; }
body[data-view="project"] .aside-card:nth-child(2) { animation-delay: 0.14s; }
body[data-view="project"] .aside-card:nth-child(3) { animation-delay: 0.20s; }
body[data-view="project"] .aside-card:nth-child(4) { animation-delay: 0.26s; }

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

/* ── Aside card header: stronger visual chrome, accent focus ── */
body[data-view="project"] .aside-card-header {
  position: relative;
  padding: 13px 16px !important;
  background: rgba(255,255,255,0.008);
  transition: background 0.14s ease, border-color 0.14s ease;
}
body[data-view="project"] .aside-card:hover .aside-card-header {
  background: rgba(255,255,255,0.015);
  border-color: rgb(var(--accent-rgb) / 0.15) !important;
}

/* ── Aside body: improved scrollbar + separator clarity ── */
body[data-view="project"] .aside-card-body {
  padding: 14px 16px !important;
  background: transparent;
  /* 240px silently clipped the MEMORY item's bottom by ~9px once a FILE row was
     present (a thin scrollbar that never showed). A touch more room lets the
     common 1-file + memory case sit fully; it still scrolls past that. */
  max-height: 300px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
  transition: background 0.14s ease;
}
body[data-view="project"] .aside-card:hover .aside-card-body {
  background: rgba(255,255,255,0.005);
}

/* ── Urgency color-coding for assignments (overdue/soon/later) ── */
body[data-view="project"] .assign-row.overdue .assign-title {
  color: var(--danger);
  font-weight: 600;
}
body[data-view="project"] .assign-row.overdue .assign-due {
  color: var(--danger) !important;
  font-weight: 500;
}
body[data-view="project"] .assign-row.overdue:hover {
  background: rgb(223 107 115 / 0.06) !important;
}

body[data-view="project"] .assign-row.soon .assign-due {
  color: var(--warning) !important;
  font-weight: 500;
}
body[data-view="project"] .assign-row.soon:hover {
  background: rgb(214 168 95 / 0.06) !important;
}

/* ── Assign-row micro-interaction polish ── */
body[data-view="project"] .assign-row {
  border-radius: 9px !important;
  margin: 0 -5px !important;
  padding: 10px 5px !important;
}
body[data-view="project"] .assign-row:hover {
  background: rgb(var(--accent-rgb) / 0.05) !important;
}
body[data-view="project"] .assign-row.done {
  opacity: 0.7;
  transition: opacity 0.14s ease;
}
body[data-view="project"] .assign-row.done:hover {
  opacity: 0.95;
}

/* ── Checkboxes: subtle glow on hover + smoother transitions ── */
body[data-view="project"] .assign-check {
  transition: all 0.14s ease;
  box-shadow: inset 0 0 0 1.5px var(--border-strong);
}
body[data-view="project"] .assign-check:hover {
  box-shadow: inset 0 0 0 1.5px var(--success), 0 0 0 3px rgb(116 198 154 / 0.2);
}
body[data-view="project"] .assign-row.done .assign-check {
  box-shadow: none;
}

/* ── File items: better icon alignment + hover glow ── */
body[data-view="project"] .file-item {
  border-radius: 9px !important;
  padding: 9px 12px !important;
  margin: 0 -2px !important;
  background: var(--bg-elev-2) !important;
  transition: all 0.14s ease;
}
body[data-view="project"] .file-item:hover {
  background: rgb(var(--accent-rgb) / 0.06) !important;
  border-color: rgb(var(--accent-rgb) / 0.18) !important;
}
body[data-view="project"] .file-item svg {
  width: 15px;
  height: 15px;
  color: var(--text-muted);
  flex-shrink: 0;
}

/* ── Dropzone: premium appearance + drag state glow ── */
body[data-view="project"] .dropzone {
  margin: 10px -2px 0 !important;
  padding: 15px 14px !important;
  background: rgba(255,255,255,0.006) !important;
  border: 1px solid var(--border) !important;
  border-radius: 11px !important;
  color: var(--text-dim);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: all 0.16s ease;
  cursor: pointer;
}
body[data-view="project"] .dropzone:hover {
  border-color: rgb(var(--accent-rgb) / 0.35) !important;
  background: rgb(var(--accent-rgb) / 0.045) !important;
  color: var(--text);
  box-shadow: inset 0 0 0 1px rgb(var(--accent-rgb) / 0.1);
}
body[data-view="project"] .dropzone.drag {
  border-color: rgb(var(--accent-rgb) / 0.6) !important;
  background: rgb(var(--accent-rgb) / 0.12) !important;
  color: rgb(var(--accent-rgb));
  box-shadow: inset 0 0 0 1px rgb(var(--accent-rgb) / 0.2), 0 0 0 1px rgb(var(--accent-rgb) / 0.2);
}
body[data-view="project"] .dropzone input { cursor: pointer; }

/* ── Project header: subtle separator + breathing room ── */
body[data-view="project"] .project-header {
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(255,255,255,0.01);
  margin-bottom: 28px;
}
body[data-view="project"] .project-title {
  transition: color 0.14s ease;
}

/* ── Project composer: glow on focus + smooth transitions ── */
body[data-view="project"] .project-composer {
  background: rgba(255,255,255,0.018) !important;
  border: 1px solid var(--border) !important;
  border-radius: 13px !important;
  transition: all 0.16s ease;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02);
}
body[data-view="project"] .project-composer:focus-within {
  background: rgba(255,255,255,0.028) !important;
  border-color: rgb(var(--accent-rgb) / 0.4) !important;
  box-shadow: inset 0 0 0 1px rgb(var(--accent-rgb) / 0.15), 0 0 0 1px rgb(var(--accent-rgb) / 0.1);
}
body[data-view="project"] .project-composer textarea {
  transition: color 0.14s ease;
}
body[data-view="project"] .project-composer textarea:focus {
  color: var(--text);
}

/* ── Suggestion chips: refined appearance with pill shape + smooth hover ── */
body[data-view="project"] .suggestion-chip {
  border-radius: 999px !important;
  background: rgba(255,255,255,0.016) !important;
  border: 1px solid var(--border) !important;
  padding: 9px 15px !important;
  font-size: 12.5px !important;
  font-weight: 500;
  color: var(--text-muted) !important;
  transition: all 0.14s ease !important;
  position: relative;
  overflow: hidden;
}
body[data-view="project"] .suggestion-chip::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 30%, rgb(var(--accent-rgb) / 0.08), transparent);
  opacity: 0;
  transition: opacity 0.14s ease;
}
body[data-view="project"] .suggestion-chip:hover {
  background: rgb(var(--accent-rgb) / 0.09) !important;
  border-color: rgb(var(--accent-rgb) / 0.35) !important;
  color: var(--text) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgb(var(--accent-rgb) / 0.1);
}
body[data-view="project"] .suggestion-chip:hover::before {
  opacity: 1;
}

/* ── New conversation row: premium cta affordance ── */
body[data-view="project"] .new-conv-row {
  background: rgba(255,255,255,0.014) !important;
  border: 1px dashed var(--border) !important;
  border-radius: 12px !important;
  color: var(--text-dim);
  font-weight: 500;
  transition: all 0.16s ease;
  margin-bottom: 28px;
}
body[data-view="project"] .new-conv-row:hover {
  background: rgb(var(--accent-rgb) / 0.06) !important;
  border: 1px solid rgb(var(--accent-rgb) / 0.35) !important;
  color: var(--text);
  transform: translateY(-1px);
}

/* ── Recents label: stronger hierarchy ── */
body[data-view="project"] .recents-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  color: var(--text-dim);
  margin-bottom: 12px !important;
  text-transform: uppercase;
  padding: 0 1px;
}
body[data-view="project"] .recents-section {
  margin-top: 4px;
}

/* ── Recent card refinement: smooth micro-interactions ── */
body[data-view="project"] .recent-card {
  padding: 13px 14px !important;
  gap: 12px !important;
  border-radius: 11px !important;
  background: rgba(255,255,255,0.016) !important;
  border: 1px solid var(--border) !important;
  transition: all 0.14s ease !important;
}
body[data-view="project"] .recent-card:active {
  transform: translateX(1px) !important;
}
body[data-view="project"] .recent-icon {
  background: var(--bg-elev-3) !important;
  transition: all 0.14s ease;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
}
body[data-view="project"] .recent-card:hover .recent-icon {
  background: rgb(var(--accent-rgb) / 0.12) !important;
  box-shadow: inset 0 0 0 1px rgb(var(--accent-rgb) / 0.2);
}

/* ── Recents empty: intelligent affordance ── */
body[data-view="project"] .recents-empty {
  border-radius: 11px !important;
  border: 1px solid var(--border) !important;
  background: rgba(255,255,255,0.012) !important;
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 500;
  padding: 24px 16px !important;
  text-align: center;
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Context items: cohesive file handling ── */
body[data-view="project"] .context-item {
  border-radius: 10px !important;
  padding: 9px 13px !important;
  margin-bottom: 6px !important;
  background: rgba(255,255,255,0.02) !important;
  border: 1px solid var(--border) !important;
  transition: all 0.14s ease;
}
body[data-view="project"] .context-item:hover {
  background: rgba(255,255,255,0.035) !important;
  border-color: rgb(var(--accent-rgb) / 0.2) !important;
}
body[data-view="project"] .context-item.file-item {
  cursor: pointer;
}

/* ── Context label refinement ── */
body[data-view="project"] #context-body .label {
  margin-top: 14px !important;
  margin-bottom: 9px !important;
}
body[data-view="project"] #context-body .label:first-child {
  margin-top: 0;
}

/* ═════════════════════════════════════════════════════════════ */
/* ═════════════════════════════════════════════════════════════ */
/* ===== /MAXOUT: surface-project-detail ===== */

/* ===== MAXOUT: SURFACE-MEMORIES ===== */

/* Memory feed: generous spacing, calm hierarchy */
.view-memories .mem-feed {
  padding: 24px 32px 80px;
  gap: 10px;
}

/* Filter bar: elevated prominence, better breathing */
.view-memories .mem-feed-bar {
  gap: 8px;
  padding: 16px 32px 18px;
  background: rgba(255,255,255,0.008);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  margin: 0 -32px;
  padding-left: 32px;
  padding-right: 32px;
}

.view-memories .mem-feed-bar .seg-btn {
  background: rgba(255,255,255,0.015);
  color: var(--text-dim);
  border: 1px solid rgba(255,255,255,0.08);
  font-size: 12px;
  padding: 7px 14px;
  border-radius: 999px;
  transition: color .12s ease, border-color .12s ease, background .12s ease;
  cursor: pointer;
  font-weight: 500;
}

.view-memories .mem-feed-bar .seg-btn:hover {
  color: var(--text-muted);
  border-color: rgb(var(--accent-rgb) / 0.28);
  background: rgba(255,255,255,0.028);
}

.view-memories .mem-feed-bar .seg-btn.active {
  background: rgb(var(--accent-rgb) / 0.14) !important;
  color: rgb(var(--accent-rgb)) !important;
  border-color: rgb(var(--accent-rgb) / 0.38) !important;
  font-weight: 650;
  box-shadow: inset 0 0 0 1px rgb(var(--accent-rgb) / 0.08);
}

.view-memories .mem-feed-search {
  min-width: 240px;
  padding: 9px 14px;
  border-radius: 8px;
  background: rgba(255,255,255,0.015);
  border: 1px solid rgba(255,255,255,0.08);
  font-size: 13.5px;
  color: var(--text-dim);
  transition: border-color .12s ease, background .12s ease;
}

.view-memories .mem-feed-search::placeholder {
  color: var(--text-dim);
  opacity: 0.6;
}

.view-memories .mem-feed-search:hover {
  border-color: rgb(var(--accent-rgb) / 0.24);
  background: rgba(255,255,255,0.02);
}

.view-memories .mem-feed-search:focus {
  outline: none;
  border-color: rgb(var(--accent-rgb) / 0.48) !important;
  background: rgba(255,255,255,0.045);
}

/* Atom: elevated card with stronger visual presence */
.view-memories .mem-atom {
  --mem-accent: var(--accent-rgb);
  position: relative;
  isolation: isolate;
  align-items: flex-start;
  gap: 14px;
  padding: 15px 17px 15px 16px;
  border-radius: 13px !important;
  background: rgba(255,255,255,0.025) !important;
  border: 1px solid rgba(255,255,255,0.09) !important;
  flex-shrink: 0;   /* see note on the earlier .mem-atom block: prevents squash */
  overflow: hidden;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
  cursor: pointer;
}

/* Left accent rail: gradient, stronger on hover */
.view-memories .mem-atom::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  border-radius: 3px 0 0 3px;
  background: linear-gradient(180deg,
    rgb(var(--mem-accent) / 0.98), rgb(var(--mem-accent) / 0.40));
  opacity: 0.6;
  transition: opacity .15s ease;
  z-index: 1;
}

.view-memories .mem-atom:hover {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgb(var(--mem-accent) / 0.32) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.20), inset 0 0 0 1px rgb(var(--mem-accent) / 0.12);
}

.view-memories .mem-atom:hover::before {
  opacity: 1;
}

.view-memories .mem-atom:has(.mem-atom-kind.fact) {
  --mem-accent: 116 198 154;
}

.view-memories .mem-atom:has(.mem-atom-kind.preference) {
  --mem-accent: 214 168 95;
}

.view-memories .mem-atom:has(.mem-atom-kind.imported) {
  --mem-accent: var(--accent-rgb);
}

.view-memories .mem-atom:has(.mem-atom-kind.auto) {
  --mem-accent: var(--accent-rgb);
}

/* Kind badge: polished, elevated */
.view-memories .mem-atom-kind {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  flex-shrink: 0;
  margin-top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(var(--mem-accent) / 0.13) !important;
  color: rgb(var(--mem-accent)) !important;
  border: 1px solid rgb(var(--mem-accent) / 0.26);
  box-shadow: inset 0 0 0 1px rgb(var(--mem-accent) / 0.08), 0 2px 8px rgba(0,0,0,0.10);
  transition: box-shadow .15s ease;
}

.view-memories .mem-atom:hover .mem-atom-kind {
  box-shadow: inset 0 0 0 1px rgb(var(--mem-accent) / 0.12), 0 4px 12px rgb(var(--mem-accent) / 0.15);
}

.view-memories .mem-atom-kind svg {
  width: 17px;
  height: 17px;
  stroke-width: 1.8;
}

.view-memories .mem-atom-kind.fact {
  color: var(--success) !important;
}

.view-memories .mem-atom-kind.preference {
  color: var(--warning) !important;
}

.view-memories .mem-atom-kind.imported,
.view-memories .mem-atom-kind.auto {
  color: rgb(var(--accent-rgb)) !important;
}

/* Body: optimized readability */
.view-memories .mem-atom-body {
  padding-top: 1px;
  flex: 1;
  min-width: 0;
}

.view-memories .mem-atom-text {
  font-size: 13.5px;
  line-height: 1.58;
  color: var(--text);
  letter-spacing: -0.005em;
  word-break: break-word;
  overflow-wrap: break-word;
}

.view-memories .mem-atom-meta {
  margin-top: 8px;
  gap: 10px;
  font-size: 11.5px;
  color: var(--text-dim);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.view-memories .mem-atom-meta > span:not(.mem-atom-tag) {
  position: relative;
  padding-left: 14px;
}

.view-memories .mem-atom-meta > span:not(.mem-atom-tag)::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 50%;
  width: 3px;
  height: 3px;
  margin-top: -1.5px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.45;
}

.view-memories .mem-atom-meta > span:first-child:not(.mem-atom-tag) {
  padding-left: 0;
}

.view-memories .mem-atom-meta > span:first-child:not(.mem-atom-tag)::before {
  display: none;
}

/* Tag: polished inline badge */
.view-memories .mem-atom-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgb(var(--mem-accent) / 0.10) !important;
  color: rgb(var(--mem-accent)) !important;
  border: 1px solid rgb(var(--mem-accent) / 0.22);
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 10px;
  letter-spacing: 0.04em !important;
  font-weight: 650;
  transition: background .12s ease, border-color .12s ease;
}

.view-memories .mem-atom:hover .mem-atom-tag {
  background: rgb(var(--mem-accent) / 0.14) !important;
  border-color: rgb(var(--mem-accent) / 0.32);
}

.view-memories .mem-atom-tag::before {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 4px;
  opacity: 0.8;
}

/* Actions: elevated, reveal on hover */
.view-memories .mem-atom-actions {
  gap: 4px;
  margin-top: 0;
  display: flex;
  opacity: 0.5;
  transition: opacity .12s ease;
}

.view-memories .mem-atom:hover .mem-atom-actions {
  opacity: 1;
}

.view-memories .mem-atom-actions button {
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  transition: color .12s ease, background .12s ease, border-color .12s ease;
  cursor: pointer;
}

.view-memories .mem-atom-actions button:hover {
  color: var(--text);
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.12);
}

.view-memories .mem-atom-actions button svg {
  width: 16px;
  height: 16px;
  stroke-width: 1.8;
}

.view-memories .mem-atom-actions button[data-act="del"]:hover {
  color: var(--danger);
  background: rgba(223,107,115,0.12);
  border-color: rgba(223,107,115,0.28);
}

/* Empty state: inviting and clear */
.view-memories .mem-empty {
  padding: 60px 32px;
  text-align: center;
}

.view-memories .mem-empty .empty-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 20px;
  background: rgb(var(--accent-rgb) / 0.12);
  border: 1px solid rgb(var(--accent-rgb) / 0.24);
  color: rgb(var(--accent-rgb));
  box-shadow: 0 4px 16px rgba(0,0,0,0.10);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.view-memories .mem-empty .empty-icon svg {
  width: 32px;
  height: 32px;
  stroke-width: 1.6;
}

.view-memories .mem-empty h3 {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0 0 12px;
}

.view-memories .mem-empty p {
  font-size: 13.5px;
  max-width: 480px;
  margin: 0 auto;
  line-height: 1.62;
  color: var(--text-muted);
}

/* Import modal: premium stepped flow with visual celebration */
.mem-import-modal {
  max-width: 620px;
}

.mem-import-modal .mem-step {
  position: relative;
  margin: 22px 0;
  padding-left: 0;
}

.mem-import-modal .mem-step-row {
  gap: 13px;
  margin-bottom: 12px;
  display: flex;
  align-items: flex-start;
}

.mem-import-modal .mem-step:not(:last-of-type) .mem-num::after {
  content: '';
  position: absolute;
  left: 10px;
  top: 31px;
  bottom: -18px;
  width: 2px;
  background: linear-gradient(180deg,
    rgb(var(--accent-rgb) / 0.40), transparent);
}

.mem-import-modal .mem-num {
  position: relative;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: rgb(var(--accent-rgb) / 0.14) !important;
  border: 1.5px solid rgb(var(--accent-rgb) / 0.32) !important;
  color: rgb(var(--accent-rgb)) !important;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-mono, ui-monospace, monospace);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mem-import-modal .mem-step-label {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--text);
}

/* Codebox: terminal-like, copy integrated */
.mem-import-modal .mem-codebox {
  position: relative;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 11px !important;
  padding: 16px 18px;
  margin-left: 39px;
  margin-top: 8px;
}

.mem-import-modal .mem-codebox pre {
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-muted);
  padding-right: 90px;
  margin: 0;
  font-family: ui-monospace, monospace;
}

.mem-import-modal .mem-copy {
  position: absolute;
  top: 13px;
  right: 13px;
  padding: 7px 12px;
  border-radius: 8px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  color: var(--text-muted);
  font-size: 11.5px;
  font-weight: 550;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: color .14s ease, background .14s ease, border-color .14s ease;
}

.mem-import-modal .mem-copy:hover {
  background: rgb(var(--accent-rgb) / 0.14);
  color: rgb(var(--accent-rgb));
  border-color: rgb(var(--accent-rgb) / 0.36);
}

.mem-import-modal .mem-copy.copied {
  background: rgba(116,198,154,0.16);
  color: var(--success);
  border-color: rgba(116,198,154,0.36);
}

.mem-import-modal .mem-copy .btn-ico {
  width: 14px;
  height: 14px;
  stroke-width: 2;
}

/* Paste field: spacious, accent-tinted on focus */
.mem-import-modal #mem-paste {
  margin-left: 39px;
  width: calc(100% - 39px);
  min-height: 140px;
  border-radius: 11px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.09);
  padding: 14px 16px;
  color: var(--text);
  font-size: 13px;
  line-height: 1.6;
  transition: border-color .14s ease, background .14s ease;
  font-family: inherit;
  resize: vertical;
}

.mem-import-modal #mem-paste::placeholder {
  color: var(--text-dim);
  opacity: 0.5;
}

.mem-import-modal #mem-paste:hover {
  border-color: rgb(var(--accent-rgb) / 0.20);
}

.mem-import-modal #mem-paste:focus {
  outline: none;
  border-color: rgb(var(--accent-rgb) / 0.48) !important;
  background: rgba(255,255,255,0.04);
}

/* Source select */
.mem-import-modal .mem-source-row {
  margin-left: 39px;
  margin-top: 13px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--text-muted);
}

.mem-import-modal .mem-source-row select {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 8px;
  padding: 7px 12px;
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
  transition: border-color .14s ease, background .14s ease;
}

.mem-import-modal .mem-source-row select:hover {
  border-color: rgb(var(--accent-rgb) / 0.28);
  background: rgba(255,255,255,0.06);
}

.mem-import-modal .mem-source-row select:focus {
  outline: none;
  border-color: rgb(var(--accent-rgb) / 0.42);
}

/* Atom entrance animation lives with the Memories view styles (memAtomIn,
   defined once further up) — the duplicate definition here caused conflicts. */

/* Loading skeleton: ghost atoms, soft shimmer */
.view-memories .mem-skel-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: memSkelFade .24s ease both;
}

@keyframes memSkelFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.view-memories .mem-atom-skel {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 15px 17px 15px 16px;
  border-radius: 13px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.07);
}

.view-memories .mem-skel-badge {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  flex-shrink: 0;
}

.view-memories .mem-skel-body {
  flex: 1;
  min-width: 0;
  padding-top: 3px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.view-memories .mem-skel-line {
  height: 12px;
  border-radius: 6px;
  margin: 0;
}

.view-memories .mem-skel-line.short {
  height: 10px;
  opacity: 0.6;
}

@media (prefers-reduced-motion: reduce) {
  .view-memories .mem-atom,
  .view-memories .mem-atom::before,
  .view-memories .mem-atom-actions button,
  .mem-import-modal .mem-copy {
    transition: none;
  }
  .view-memories .mem-feed .mem-atom {
    animation: none;
  }
  .view-memories .mem-skel-wrap {
    animation: none;
  }
}

/* ===== /MAXOUT: SURFACE-MEMORIES ===== */

/* ===== MAXOUT: SIDEBAR ===== */

/* Nav item: active + hover now have smooth glow + lift + accent border */
.nav-item {
  transition: all 0.15s var(--ease-out);
  position: relative;
}
.nav-item::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: transparent;
  border-radius: 0 2px 2px 0;
  transition: all 0.15s var(--ease-out);
}
.nav-item:hover {
  transform: translateY(-1px);
}
.nav-item:hover::after {
  background: rgb(var(--accent-rgb) / 0.40);
}
.nav-item.active::after {
  background: var(--accent);
  box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.25);
}
.nav-item.active {
  transform: translateY(-1px);
}

/* Recent chats: left accent bar + subtle background + hover lift */
.recent-chat-item {
  position: relative;
  padding-left: 12px;
  transition: all 0.12s var(--ease-out);
  border-radius: var(--r-sm);
}
.recent-chat-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: rgb(var(--accent-rgb) / 0.20);
  border-radius: 1px;
  transition: all 0.12s var(--ease-out);
}
.recent-chat-item:hover {
  background: rgb(var(--accent-rgb) / 0.06);
  color: var(--text);
  transform: translateX(2px);
  padding-left: 14px;
}
.recent-chat-item:hover::before {
  background: var(--accent);
  box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.20);
}

/* Pinned projects: left accent bar for active state */
.project-item {
  position: relative;
  padding-left: 10px;
  transition: all 0.15s var(--ease-out);
}
.project-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: transparent;
  border-radius: 0 2px 2px 0;
  transition: all 0.15s var(--ease-out);
}
.project-item:hover {
  transform: translateX(1px);
}
.project-item.active::before {
  background: var(--accent);
  box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.25);
}

/* Account card: hover glow + lift + border subtlety */
.account-card {
  transition: all 0.15s var(--ease-out);
  position: relative;
}
.account-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 20px rgba(var(--accent-rgb), 0.15), 0 4px 14px rgba(0,0,0,0.25);
  border-color: rgb(var(--accent-rgb) / 0.30);
}

/* Avatar: subtle glow on hover */
.ac-avatar {
  transition: all 0.15s var(--ease-out);
  box-shadow: inset 0 0 12px rgba(var(--accent-rgb), 0.08);
}
.account-card:hover .ac-avatar {
  box-shadow: inset 0 0 12px rgba(var(--accent-rgb), 0.15), 0 0 12px rgba(var(--accent-rgb), 0.15);
}

/* Upcoming items: left accent bar matching urgency color */
.upcoming-item {
  position: relative;
  padding-left: 12px;
  transition: all 0.12s var(--ease-out);
  border-radius: var(--r-sm);
}
.upcoming-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 2px;
  bottom: 2px;
  width: 2px;
  background: rgb(var(--accent-rgb) / 0.15);
  border-radius: 1px;
  transition: all 0.12s var(--ease-out);
}
.upcoming-item:hover {
  background: rgba(255,255,255,0.01);
  transform: translateX(2px);
  padding-left: 14px;
}
.upcoming-item:hover::before {
  background: var(--accent);
  box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.20);
}
.upcoming-item .days.urgent::before {
  content: '! ';
  color: var(--danger);
  font-weight: 700;
}
.upcoming-item .days.soon::before {
  content: '→ ';
  color: var(--warning);
  font-weight: 600;
}

/* Customize sidebar: glow on hover */
.sidebar-customize {
  transition: all 0.12s var(--ease-out);
  position: relative;
}
.sidebar-customize:hover {
  transform: translateY(-1px);
}
.sidebar-customize.active {
  box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.15);
}

/* Sidebar header: subtle accent underline (like code editor section headers) */
.sidebar-header {
  position: relative;
  padding-bottom: 8px;
}
.sidebar-header span {
  position: relative;
  display: inline-block;
  padding-bottom: 2px;
}
.sidebar-header span::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--accent);
  transition: width 0.3s var(--ease-out);
}
.sidebar-section:hover .sidebar-header span::after {
  width: 100%;
}

/* Brand section: subtle bottom border refinement */
.brand {
  border-bottom: 1px solid rgb(var(--accent-rgb) / 0.10);
  transition: all 0.15s var(--ease-out);
  padding-bottom: 12px;
}
.brand:hover {
  border-bottom-color: rgb(var(--accent-rgb) / 0.20);
}

/* Sidebar footer: visual separation + polish */
.sidebar-footer {
  border-top: 1px solid rgb(var(--accent-rgb) / 0.08);
  gap: 8px;
}

/* Light theme: accent bar adjustments */
body[data-theme="light"] .nav-item::after,
body[data-theme="light"] .recent-chat-item::before,
body[data-theme="light"] .project-item::before,
body[data-theme="light"] .upcoming-item::before {
  background-color: rgba(var(--accent-rgb), 0.18);
}
body[data-theme="light"] .nav-item:hover::after,
body[data-theme="light"] .recent-chat-item:hover::before,
body[data-theme="light"] .project-item.active::before,
body[data-theme="light"] .upcoming-item:hover::before {
  background-color: var(--accent);
  box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.20);
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .nav-item, .nav-item::after,
  .recent-chat-item, .recent-chat-item::before,
  .project-item, .project-item::before,
  .account-card, .ac-avatar,
  .upcoming-item, .upcoming-item::before,
  .sidebar-customize,
  .sidebar-header span::after,
  .brand {
    transition: none !important;
    transform: none !important;
  }
}

/* ===== /MAXOUT: SIDEBAR ===== */

/* ===== MAXOUT: VOICE-UI ===== */

/* Mic button - premium listening affordance */
#voice-btn {
  position: relative;
  transition: all 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#voice-btn:hover {
  background: rgba(94, 169, 255, 0.12);
  color: rgb(var(--accent-rgb));
  transform: scale(1.05);
  box-shadow: 0 0 0 8px rgba(94, 169, 255, 0.04);
}

#voice-btn:active {
  transform: scale(0.95);
}

/* Listening state - soft, premium glow instead of harsh pulse */
#voice-btn.active {
  background: rgba(94, 169, 255, 0.15);
  color: rgb(var(--accent-rgb));
  animation: voiceListeningGlow 1.8s ease-in-out infinite;
  box-shadow: 0 0 0 1px rgba(94, 169, 255, 0.3), 0 0 12px rgba(94, 169, 255, 0.2);
}

#voice-btn.active::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 6px;
  background: radial-gradient(circle, rgba(94, 169, 255, 0.08), transparent 70%);
  animation: voiceAuraPulse 1.8s ease-in-out infinite;
  pointer-events: none;
}

@keyframes voiceListeningGlow {
  0%, 100% {
    box-shadow: 0 0 0 1px rgba(94, 169, 255, 0.3), 0 0 12px rgba(94, 169, 255, 0.15);
  }
  50% {
    box-shadow: 0 0 0 1px rgba(94, 169, 255, 0.5), 0 0 18px rgba(94, 169, 255, 0.3);
  }
}

@keyframes voiceAuraPulse {
  0%, 100% {
    opacity: 0.4;
    transform: scale(1);
  }
  50% {
    opacity: 0.2;
    transform: scale(1.15);
  }
}

/* Speak responses toggle - elevated affordance with voice cohesion */
#voice-out-toggle {
  position: relative;
  transition: all 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#voice-out-toggle:hover {
  background: var(--bg-elev-2);
  color: var(--text);
  border-color: rgba(94, 169, 255, 0.2);
}

#voice-out-toggle.on {
  color: rgb(var(--accent-rgb));
  border-color: rgba(94, 169, 255, 0.4);
  background: rgba(94, 169, 255, 0.08);
}

#voice-out-toggle.on .toggle-switch {
  background: linear-gradient(135deg, rgba(94, 169, 255, 0.5), rgba(37, 99, 235, 0.5));
  box-shadow: 0 0 8px rgba(94, 169, 255, 0.25);
}

#voice-out-toggle.on .toggle-knob {
  background: white;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.3);
}

/* Speaking indicator - soft glow when response is being spoken */
#voice-out-toggle.on::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: var(--r-md);
  border: 1px solid rgba(94, 169, 255, 0.2);
  pointer-events: none;
}

/* Voice page - enhanced visual polish */
.voice-hero {
  background: linear-gradient(135deg, rgba(94, 169, 255, 0.05), transparent);
  padding: 32px 28px;
  border-radius: var(--r-lg);
  border: 1px solid rgba(94, 169, 255, 0.1);
  margin-bottom: 28px;
}

/* Voice step indicators - premium numbering */
.voice-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: linear-gradient(135deg, rgb(var(--accent-rgb)), rgb(var(--accent-blue-rgb)));
  border-radius: 6px;
  color: white;
  font-weight: 700;
  font-size: 13px;
  margin-right: 10px;
}

/* Voice card - elevated with subtle glow */
.voice-card {
  border: 1px solid rgba(94, 169, 255, 0.1);
  background: rgba(94, 169, 255, 0.02);
  transition: all 0.2s;
}

.voice-card:hover {
  border-color: rgba(94, 169, 255, 0.15);
  background: rgba(94, 169, 255, 0.04);
}

/* Voice meter - enhanced ready state */
.voice-meter.ok {
  color: var(--success);
  font-weight: 600;
}

/* Analyze button - primary action with signature glow */
#voice-analyze-btn {
  transition: all 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

#voice-analyze-btn:hover:not(:disabled) {
  background: rgb(var(--accent-blue-rgb));
  color: white;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(94, 169, 255, 0.25);
}

#voice-analyze-btn.working {
  animation: analyzeWorking 2s ease-in-out infinite;
}

@keyframes analyzeWorking {
  0%, 100% {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  }
  50% {
    box-shadow: 0 4px 12px rgba(94, 169, 255, 0.2);
  }
}

/* Voice samples - refined card design */
.voice-sample {
  background: rgba(94, 169, 255, 0.05);
  border: 1px solid rgba(94, 169, 255, 0.12);
  border-radius: var(--r-md);
  padding: 10px 12px;
  transition: all 0.15s;
}

.voice-sample:hover {
  background: rgba(94, 169, 255, 0.08);
  border-color: rgba(94, 169, 255, 0.2);
  transform: translateX(2px);
}

/* Voice skill chip - highlight ready state */
.voice-skill-chip {
  background: linear-gradient(135deg, rgba(94, 169, 255, 0.1), rgba(37, 99, 235, 0.05));
  border: 1px solid rgba(94, 169, 255, 0.2);
  border-radius: var(--r-md);
  padding: 12px;
}

.voice-skill-chip .vsc-dot {
  margin-right: 4px;
  font-size: 14px;
}

/* Voice mode buttons - subtle tab design */
.voice-mode-btn {
  border-radius: var(--r-md);
  border: 1px solid transparent;
  padding: 8px 14px;
  font-size: 12px;
  color: var(--text-muted);
  background: transparent;
  transition: all 0.15s;
}

.voice-mode-btn:hover {
  color: var(--text);
  border-color: rgba(94, 169, 255, 0.15);
}

.voice-mode-btn.selected {
  background: rgba(94, 169, 255, 0.12);
  color: rgb(var(--accent-rgb));
  border-color: rgba(94, 169, 255, 0.3);
}

/* Voice output - polished display */
.voice-output-wrap {
  border: 1px solid rgba(94, 169, 255, 0.15);
  background: rgba(94, 169, 255, 0.05);
  border-radius: var(--r-lg);
  padding: 16px;
  margin-top: 14px;
}

.voice-output {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text);
}

/* Copy button for voice output */
#voice-copy-btn {
  transition: all 0.15s;
}

#voice-copy-btn:hover {
  color: rgb(var(--accent-rgb));
  background: rgba(94, 169, 255, 0.1);
}

/* ===== /MAXOUT: VOICE-UI ===== */

/* ===== MAXOUT: SKILLS PAGE ===== */

/* _______________________________________________
   SKILL CARD STATE - enabled glow + accent highlight
   Brings the "ONE glow" directive to life. Enabled
   cards now carry a subtle blue aura + stronger
   visual "on" language: border glows, background
   slightly tints, icon floats on accent backdrop.
   _______________________________________________ */
.skill-card.enabled {
  border-color: rgb(var(--accent-rgb) / 0.5);
  background: var(--bg-elev-1);
  box-shadow: 0 0 16px rgb(var(--accent-rgb) / 0.18);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.skill-card.enabled:hover {
  border-color: rgb(var(--accent-rgb) / 0.65);
  box-shadow: 0 0 24px rgb(var(--accent-rgb) / 0.26);
}
.skill-card.enabled .skill-icon {
  background: linear-gradient(135deg, rgb(var(--accent-rgb) / 0.15), rgb(var(--accent-rgb) / 0.08));
  border: 1px solid rgb(var(--accent-rgb) / 0.3);
  box-shadow: 0 4px 16px rgba(0,0,0,0.3), 0 0 12px rgb(var(--accent-rgb) / 0.2);
}
.skill-card.enabled .skill-check {
  background: var(--accent-blue);
  border-color: rgb(var(--accent-rgb) / 0.6);
  box-shadow: 0 0 8px rgb(var(--accent-rgb) / 0.3);
}

/* Custom skill badge - visible tag without text takeover */
.skill-card.custom::before {
  content: 'CUSTOM';
  position: absolute;
  top: 8px;
  left: 8px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--text-dim);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgb(var(--accent-rgb) / 0.15);
  border-radius: 4px;
  padding: 2px 6px;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.skill-card.custom:hover::before {
  opacity: 1;
}

/* _______________________________________________
   FILTER PILLS - active state glow
   Connects active filter to card grid via
   soft accent glow. Hover state more responsive.
   _______________________________________________ */
.pill.active {
  background: rgb(var(--accent-rgb) / 0.1);
  color: var(--accent);
  border-color: rgb(var(--accent-rgb) / 0.4);
  box-shadow: 0 0 0 1px rgb(var(--accent-rgb) / 0.3);
  font-weight: 600;
}
.pill {
  transition: all 0.18s ease;
}
.pill:hover {
  background: var(--bg-elev-2);
  color: var(--text);
  transform: translateY(-1px);
}

/* _______________________________________________
   SKILLS HERO - depth + visual "pull"
   Larger, more confident spacing. Grad text
   gets subtle glow backdrop in dark mode.
   _______________________________________________ */
.skills-hero {
  font-size: 38px;
  line-height: 1.2;
  letter-spacing: -0.025em;
  margin-bottom: 12px;
}
.skills-hero .grad {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 12px rgb(94,169,255,0.12));
}

/* _______________________________________________
   YOUR VOICE - step progress + locked state
   Step circles now carry visual hierarchy.
   Locked card dims slightly with padlock affordance.
   _______________________________________________ */
.voice-step {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--grad);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  box-shadow: 0 0 12px rgb(var(--accent-rgb) / 0.3);
  transition: all 0.2s ease;
}
.voice-card.locked .voice-step {
  opacity: 0.6;
}
.voice-use.locked {
  opacity: 0.72;
  pointer-events: none;
  border-color: var(--border);
}
.voice-use.locked .voice-card-head::after {
  content: '🔒';
  display: inline-block;
  margin-left: 8px;
  font-size: 13px;
  opacity: 0.5;
}
.voice-locked-note {
  color: var(--text-dim);
  font-size: 12px;
  font-style: italic;
}

/* Your Voice samples - better visual separation */
.voice-sample {
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.15s ease;
}
.voice-sample:hover {
  background: var(--bg-elev-3);
  border-color: rgb(var(--accent-rgb) / 0.2);
}
.voice-sample .voice-sample-remove {
  margin-left: auto;
  color: var(--text-dim);
  cursor: pointer;
  opacity: 0.6;
  transition: all 0.12s ease;
}
.voice-sample:hover .voice-sample-remove {
  opacity: 1;
  color: var(--danger);
}

/* Voice report output - subtly glowing result area */
.voice-output-wrap {
  background: var(--bg-elev-2);
  border: 1px solid rgb(var(--accent-rgb) / 0.2);
  border-radius: 12px;
  padding: 14px;
  margin-top: 12px;
  box-shadow: 0 0 16px rgb(var(--accent-rgb) / 0.08);
}

/* _______________________________________________
   CREATE SKILL MODAL - enhanced form + preview
   Better visual hierarchy, icon preview, and
   a hint that this creates a Custom skill.
   _______________________________________________ */
.modal.skill-creation {
  max-width: 480px;
}
.modal.skill-creation .modal-title::after {
  content: 'Custom Skill';
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-top: 6px;
  margin-bottom: -2px;
}
#ns-icon {
  font-size: 16px !important;
  text-align: center;
  letter-spacing: 4px;
}
.skill-icon-preview {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: linear-gradient(135deg, #00d9ff, #b794f6);
  color: #fff;
  font-size: 20px;
  margin: 0 auto 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
  transition: all 0.18s ease;
}
.skill-icon-preview.has-input {
  box-shadow: 0 4px 16px rgba(0,0,0,0.3), 0 0 12px rgba(94,169,255,0.2);
}
#ns-desc {
  resize: vertical;
  min-height: 54px;
}
#ns-prompt {
  resize: vertical;
  min-height: 90px;
  font-family: 'Monaco', 'Menlo', monospace;
  font-size: 12px;
}
.modal-hint {
  font-size: 12px;
  color: var(--text-dim);
  margin: -6px 0 8px;
  line-height: 1.4;
}

/* _______________________________________________
   SEARCH & CONTROLS - refined spacing + affordances
   _______________________________________________ */
.search-wrap:focus-within {
  border-color: rgb(var(--accent-rgb) / 0.5);
  box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / 0.08);
}
.search-wrap svg {
  color: var(--accent);
  transition: color 0.15s ease;
}
.skills-controls {
  margin-bottom: 28px;
}

/* _______________________________________________
   SKILLS SECTION HEADERS - more prominent
   Uppercase labels now carry subtle accent color.
   _______________________________________________ */
.skills-section h2 {
  color: var(--text-dim);
  font-size: 12px;
  letter-spacing: 0.08em;
}

/* _______________________________________________
   EMPTY STATE - visual interest + CTA hint
   _______________________________________________ */
.view-skills .skills-empty {
  padding: 60px 24px 80px;
}
.view-skills .skills-empty-icon {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.08), rgba(var(--accent-rgb), 0.04));
  border: 1px solid rgb(var(--accent-rgb) / 0.2);
  color: var(--accent);
  box-shadow: 0 0 16px rgb(var(--accent-rgb) / 0.08);
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
}
.view-skills .skills-empty-title {
  font-size: 16px;
  font-weight: 650;
  color: var(--text);
  margin-bottom: 6px;
}

/* Respect reduced-motion on new enhanced transitions */
@media (prefers-reduced-motion: reduce) {
  .skill-card.enabled,
  .pill,
  .pill.active,
  .voice-step,
  .voice-sample,
  .voice-output-wrap {
    transition: none !important;
    box-shadow: none !important;
  }
  .skills-hero .grad {
    filter: none !important;
  }
}

/* Light theme - refined contrast for glow effects */
body[data-theme="light"] .skill-card.enabled {
  border-color: rgb(var(--accent-blue-rgb) / 0.4);
  box-shadow: 0 0 16px rgb(var(--accent-blue-rgb) / 0.12);
}
body[data-theme="light"] .skill-card.enabled .skill-icon {
  background: linear-gradient(135deg, rgb(var(--accent-rgb) / 0.1), rgb(var(--accent-rgb) / 0.05));
  border: 1px solid rgb(var(--accent-rgb) / 0.25);
}
body[data-theme="light"] .skill-card.enabled .skill-check {
  box-shadow: 0 0 6px rgb(var(--accent-blue-rgb) / 0.2);
}
body[data-theme="light"] .pill.active {
  background: rgb(var(--accent-rgb) / 0.08);
  border-color: rgb(var(--accent-rgb) / 0.3);
  color: var(--accent-blue);
}
body[data-theme="light"] .voice-output-wrap {
  background: rgb(var(--accent-rgb) / 0.04);
  border-color: rgb(var(--accent-rgb) / 0.15);
  box-shadow: 0 0 12px rgb(var(--accent-rgb) / 0.05);
}

/* ===== /MAXOUT: SKILLS PAGE ===== */

/* ===== MAXOUT: SURFACE-SETTINGS ===== */

/* ── Tab nav: refined active indicator with accent glow ───────────────── */
body[data-view="settings"] .settings-tab {
  position: relative;
  padding: 9px 12px 9px 15px !important;
  font-size: 10.5px !important;
  letter-spacing: 0.085em !important;
  border-radius: 8px !important;
  color: var(--text-dim) !important;
  transition: color var(--d-fast) var(--ease-out),
              background var(--d-fast) var(--ease-out),
              box-shadow var(--d-mid) var(--ease-out);
}
body[data-view="settings"] .settings-tab:hover {
  background: rgba(255,255,255,0.035) !important;
  color: var(--text-muted) !important;
}
/* Active tab: bright indicator + soft accent glow */
body[data-view="settings"] .settings-tab.active {
  background: rgb(var(--accent-rgb) / 0.09) !important;
  color: var(--text) !important;
  box-shadow: inset 0 0 0 1px rgb(var(--accent-rgb) / 0.14) !important;
}
/* Left accent bar - more prominent, glowing */
body[data-view="settings"] .settings-tab.active::before {
  content: "";
  position: absolute;
  left: 4px; top: 50%;
  width: 3px; height: 15px;
  transform: translateY(-50%);
  border-radius: 999px;
  background: rgb(var(--accent-rgb) / 0.95);
  box-shadow: 0 0 8px rgb(var(--accent-rgb) / 0.35);
}

/* ── Easy Access buttons: premium typography + hover polish ───────────── */
.settings-tabs .settings-easy {
  display: block; width: 100%; text-align: left;
  background: transparent; border: 0; cursor: pointer;
  font-family: var(--font-mono); text-transform: uppercase;
  font-size: 11px; letter-spacing: 0.09em; font-weight: 700;
  color: var(--text-muted); padding: 10px 14px; border-radius: 8px;
  transition: all 0.18s var(--ease-out);
}
.settings-tabs .settings-easy:hover {
  background: rgba(255,255,255,0.08);
  color: var(--text);
  transform: translateX(2px);
}
.settings-tabs .settings-easy-danger {
  color: var(--danger);
}
.settings-tabs .settings-easy-danger:hover {
  background: rgb(229,112,122 / 0.12);
  color: var(--danger);
  box-shadow: inset 0 0 0 1px rgb(229,112,122 / 0.25);
}

/* ── Segmented controls: refined active + icon polish ─────────────────── */
body[data-view="settings"] .seg-group {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  padding: 3px;
  gap: 2px;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.24);
  border-radius: 7px;
}
body[data-view="settings"] .seg-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 13px !important;
  font-family: var(--font-sans) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--text-dim) !important;
  border-radius: 6px !important;
  transition: all 0.18s var(--ease-out);
}
body[data-view="settings"] .seg-btn svg {
  width: 14px; height: 14px; opacity: 0.72;
  transition: opacity 0.18s var(--ease-out);
}
body[data-view="settings"] .seg-btn:hover {
  color: var(--text-muted) !important;
}
body[data-view="settings"] .seg-btn:hover svg { opacity: 1; }
body[data-view="settings"] .seg-btn.active {
  background: rgb(var(--accent-rgb) / 0.14) !important;
  color: var(--text) !important;
  font-weight: 600 !important;
  box-shadow: inset 0 0 0 1.5px rgb(var(--accent-rgb) / 0.28),
              inset 0 1px 2px rgba(255,255,255,0.04) !important;
}
body[data-view="settings"] .seg-btn.active svg { opacity: 1; }

/* ── Toggle switches: premium knob + glow on ON state ──────────────────– */
body[data-view="settings"] .set-toggle {
  width: 40px; height: 23px;
  background: rgba(255,255,255,0.055);
  border: 1px solid var(--border);
  transition: all 0.22s var(--ease-out);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.18);
}
body[data-view="settings"] .set-toggle .seg-knob {
  top: 2px; left: 2px; width: 17px; height: 17px;
  background: var(--text-dim);
  box-shadow: 0 1px 3px rgba(0,0,0,0.32);
  transition: all 0.24s cubic-bezier(0.34, 1.4, 0.64, 1);
}
body[data-view="settings"] .set-toggle.on {
  background: var(--accent-blue) !important;
  border-color: transparent;
  box-shadow: 0 0 12px rgb(var(--accent-blue-rgb) / 0.40),
              inset 0 1px 2px rgba(255,255,255,0.12) !important;
}
body[data-view="settings"] .set-toggle.on .seg-knob {
  left: 2px;
  transform: translateX(17px);
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.28);
}
body[data-view="settings"] .set-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / 0.28);
}

/* ── Input fields: refined borders + hover feedback ────────────────────── */
body[data-view="settings"] .set-input,
body[data-view="settings"] .set-textarea {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.08);
  transition: all 0.16s var(--ease-out);
}
body[data-view="settings"] .set-input:hover,
body[data-view="settings"] .set-textarea:hover {
  border-color: rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.035);
}
body[data-view="settings"] .set-input:focus,
body[data-view="settings"] .set-textarea:focus {
  outline: none;
  border-color: rgb(var(--accent-rgb) / 0.70);
  background: rgba(255,255,255,0.04);
  box-shadow: 0 0 0 2px rgb(var(--accent-rgb) / 0.18),
              inset 0 1px 2px rgba(255,255,255,0.03);
}

/* ── Set rows: subtle accent tint + refined dividers ───────────────────– */
body[data-view="settings"] .set-row {
  gap: 32px !important;
  padding: 17px 0 !important;
  border-bottom: 1px solid rgba(255,255,255,0.048) !important;
  transition: background 0.18s var(--ease-out);
}
body[data-view="settings"] .set-row:hover {
  background: rgba(var(--accent-rgb) / 0.015);
}
body[data-view="settings"] .set-row:last-child { border-bottom: 0 !important; }
body[data-view="settings"] .set-label {
  font-size: 13.5px !important;
  font-weight: 500 !important;
  letter-spacing: -0.005em !important;
  color: var(--text) !important;
}
body[data-view="settings"] .set-sub {
  font-size: 12px !important;
  line-height: 1.55 !important;
  color: var(--text-dim) !important;
  max-width: 560px;
}

/* ── Section titles: refined typography + accent underline ────────────── */
body[data-view="settings"] .set-section-title {
  margin: 34px 0 14px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  background: linear-gradient(90deg, 
    rgba(var(--accent-rgb), 0.04), 
    transparent 50%) !important;
}
body[data-view="settings"] .set-section-title:first-child { margin-top: 4px !important; }

/* ── Plan hero: enhanced gradient + corner glow ───────────────────────── */
body[data-view="settings"] .plan-hero {
  position: relative;
  gap: 18px;
  padding: 22px 24px !important;
  margin-bottom: 22px;
  background:
    linear-gradient(135deg, 
      rgb(var(--accent-rgb) / 0.08), 
      rgb(var(--accent-blue-rgb) / 0.04)) !important;
  border: 1px solid rgb(var(--accent-rgb) / 0.22) !important;
  border-radius: 14px !important;
  overflow: hidden;
  transition: all 0.2s var(--ease-out);
}
body[data-view="settings"] .plan-hero:hover {
  border-color: rgb(var(--accent-rgb) / 0.32);
  box-shadow: 0 0 20px rgb(var(--accent-rgb) / 0.12);
}
/* Enhanced corner glow - softer, larger */
body[data-view="settings"] .plan-hero::after {
  content: "";
  position: absolute;
  top: -50%; right: -15%;
  width: 280px; height: 280px;
  background: radial-gradient(circle, rgb(var(--accent-rgb) / 0.12), transparent 70%);
  pointer-events: none;
}

/* ── Connector cards: border accent on hover ───────────────────────────── */
body[data-view="settings"] .conn-card {
  display: flex; align-items: center; gap: 12px;
  background: rgba(255,255,255,0.018);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  padding: 14px 16px;
  transition: all 0.18s var(--ease-out);
}
body[data-view="settings"] .conn-card:hover {
  border-color: rgb(var(--accent-rgb) / 0.30);
  background: rgba(var(--accent-rgb) / 0.032);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.16);
}

/* ── Danger button: softer, accent-aware ──────────────────────────────── */
body[data-view="settings"] .danger-btn {
  padding: 8px 14px; border-radius: 8px; font-size: 12.5px; font-weight: 600;
  color: var(--danger); border: 1px solid rgba(229,112,122,0.32);
  background: rgba(229,112,122,0.06);
  transition: all 0.16s var(--ease-out);
}
body[data-view="settings"] .danger-btn:hover {
  background: rgba(229,112,122,0.14);
  border-color: rgba(229,112,122,0.50);
  box-shadow: 0 0 12px rgba(229,112,122,0.16);
}

/* ── Readonly fields: refined appearance ───────────────────────────────– */
body[data-view="settings"] .set-readonly {
  background: rgba(255,255,255,0.022);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 13px;
  color: var(--text-muted);
  transition: all 0.16s var(--ease-out);
}

/* ── Usage bars: refined gradient + smoother animation ──────────────────– */
body[data-view="settings"] .usage-bar {
  height: 8px; border-radius: 999px;
  background: rgba(255,255,255,0.035);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.24);
}
body[data-view="settings"] .usage-fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg,
    rgb(var(--accent-rgb)),
    rgb(var(--accent-blue-rgb)));
  transition: width 0.5s cubic-bezier(0.34, 1.2, 0.64, 1);
  box-shadow: 0 0 6px rgb(var(--accent-rgb) / 0.28);
}

/* ── Callout boxes: accent-aware background ──────────────────────────── */
body[data-view="settings"] .set-callout {
  background: rgb(var(--accent-rgb) / 0.065);
  border: 1px solid rgb(var(--accent-rgb) / 0.20);
  border-radius: 10px;
  padding: 14px 16px;
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 18px;
  line-height: 1.55;
  transition: all 0.16s var(--ease-out);
}
body[data-view="settings"] .set-callout:hover {
  border-color: rgb(var(--accent-rgb) / 0.32);
  background: rgb(var(--accent-rgb) / 0.085);
}
body[data-view="settings"] .set-callout a {
  color: rgb(var(--accent-rgb));
  text-decoration: none;
  font-weight: 600;
  transition: color 0.16s var(--ease-out);
}
body[data-view="settings"] .set-callout a:hover {
  color: rgb(var(--accent-rgb) / 1.2);
  text-decoration: underline;
}

/* ===== /MAXOUT: SURFACE-SETTINGS ===== */

/* ===== MAXOUT: HISTORY SURFACE ===== */
/* Enhanced visual grouping by time + project, improved move-to-project menu,
   active filter indicators, and micro-interactions that make browsing delightful. */

/* ── Temporal & Project Group Headers ── */
.view-history .hist-group-header {
  display: grid; grid-template-columns: 24px 1fr;
  align-items: center; gap: 16px;
  padding: 16px 32px 10px;
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--text-dim);
  text-transform: uppercase;
  border-bottom: 1px solid rgb(var(--accent-rgb) / 0.08);
}
.view-history .hist-group-header::before {
  content: '';
  display: inline-block;
  width: 2px; height: 14px;
  background: linear-gradient(180deg, rgb(var(--accent-rgb) / 0.6), rgb(var(--accent-rgb) / 0.2));
  border-radius: 999px;
}

/* ── Active Filter Badge ── */
.view-history .hist-bar .hist-filter-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgb(var(--accent-rgb) / 0.12);
  border: 1px solid rgb(var(--accent-rgb) / 0.28);
  color: var(--accent);
  font-size: 11px; font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
  margin-left: -6px;
  animation: filterPulse 0.4s cubic-bezier(0.16,1,0.3,1);
}
.view-history .hist-bar .hist-filter-badge svg {
  width: 12px; height: 12px;
  opacity: 0.8;
}
@keyframes filterPulse {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

/* ── Enhanced Move Button with Preview Glow ── */
.view-history .hist-move {
  position: relative;
}
.view-history .hist-move::before {
  content: '';
  position: absolute; inset: -3px;
  background: rgb(var(--accent-rgb) / 0.20);
  border-radius: 8px;
  opacity: 0;
  transition: opacity .18s ease;
}
.view-history .hist-row:hover .hist-move::before {
  opacity: 0;
}
.view-history .hist-move:hover::before {
  opacity: 1;
}

/* ── Move Menu: Elevated, Scoped Styling ── */
.hist-move-menu {
  animation: histMenuIn .14s cubic-bezier(0.16,1,0.3,1);
  transform-origin: top center;
  backdrop-filter: blur(8px);
  background: linear-gradient(135deg,
    var(--bg-elev-2),
    rgb(var(--accent-rgb) / 0.02));
  box-shadow:
    0 12px 40px rgba(0,0,0,0.48),
    0 0 1px rgb(var(--accent-rgb) / 0.40);
}

.hist-move-menu .hmm-label {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  padding: 6px 9px 8px;
}
.hist-move-menu .hmm-label::before {
  content: '';
  width: 2px; height: 12px;
  background: rgb(var(--accent-rgb) / 0.5);
  border-radius: 999px;
}

.hist-move-menu .hmm-item {
  display: flex; align-items: center; gap: 8px;
  width: 100%; text-align: left;
  background: transparent; border: 0;
  color: var(--text); font-size: 13px; font-weight: 450;
  padding: 9px 9px; border-radius: 7px;
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
  position: relative;
}
.hist-move-menu .hmm-item::before {
  content: '';
  position: absolute; left: 4px;
  width: 3px; height: 3px;
  background: rgb(var(--accent-rgb) / 0.5);
  border-radius: 50%;
  opacity: 0;
  transition: opacity .12s ease;
}
.hist-move-menu .hmm-item:hover {
  background: rgb(var(--accent-rgb) / 0.12);
  color: var(--text);
}
.hist-move-menu .hmm-item:hover::before {
  opacity: 1;
}

.hist-move-menu .hmm-remove {
  color: var(--danger);
}
.hist-move-menu .hmm-remove:hover {
  background: rgb(223,107,115 / 0.12);
  color: var(--danger);
}

/* ── No Projects Nudge ── */
.hist-move-menu .hmm-empty-state {
  padding: 12px 9px;
  text-align: center;
}
.hist-move-menu .hmm-empty-state-text {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.hist-move-menu .hmm-create-project {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600;
  color: var(--accent);
  background: none; border: 0;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 4px;
  transition: background .12s ease;
}
.hist-move-menu .hmm-create-project:hover {
  background: rgb(var(--accent-rgb) / 0.12);
}

/* ── Move Success Toast Accent ── */
.view-history .hist-row.just-moved {
  background: rgb(var(--accent-rgb) / 0.08) !important;
  animation: rowSuccessFlash .5s ease-out;
}
@keyframes rowSuccessFlash {
  from { background: rgb(var(--accent-rgb) / 0.16); }
  to { background: rgb(var(--accent-rgb) / 0.08); }
}

/* ── Enhanced Row Polish ── */
.view-history .hist-row {
  border-bottom: 1px solid var(--border);
}
.view-history .hist-row .title {
  font-weight: 450;
  transition: color .14s ease, text-shadow .14s ease;
}
.view-history .hist-row:hover .title {
  color: var(--text);
  text-shadow: 0 0 12px rgb(var(--accent-rgb) / 0.24);
}

/* ── Mobile Grouping ── */
@media (max-width: 720px) {
  .view-history .hist-group-header {
    grid-template-columns: 24px 1fr;
    padding: 14px 16px 8px;
    font-size: 9.5px;
  }
  .view-history .hist-bar .hist-filter-badge {
    margin-left: 0;
    font-size: 10px;
    padding: 3px 8px;
  }
}

/* ===== /MAXOUT: HISTORY SURFACE ===== */

/* ===== MAXOUT: sys-typography ===== */
/* Coherent typographic ramp: semantic scale + optical sizing + breathing room */

:root {
  /* Type scale: 12 / 14 / 16 / 18 / 20 / 22 / 26 / 32 / 40 (modular 1.15x)  */
  --fs-caption:    11px;   /* smallest: inline meta, status pills               */
  --fs-xs:         12px;   /* input placeholders, secondary hints              */
  --fs-sm:         13px;   /* labels, sidebar nav, metadata, secondary UI     */
  --fs-base:       14px;   /* body default, nav items                          */
  --fs-md:         15px;   /* body prose, message content                      */
  --fs-lg:         16px;   /* emphasized body, modal titles, section headers   */
  --fs-xl:         18px;   /* section title (settings, skills), secondary h2  */
  --fs-2xl:        22px;   /* primary page heading (topbar), h1-like           */
  --fs-3xl:        26px;   /* hero subtitle, card titles (Fraunces), welcome  */
  --fs-4xl:        32px;   /* welcome title, large hero text                  */
  --fs-5xl:        40px;   /* project page title (was 42px → standardized)     */
  
  /* Semantic line heights: matched to size for optical balance */
  --leading-tight:  1.1;   /* dense display text (headings, cards)        */
  --leading-snug:   1.25;  /* titles, labels with slight ascender room    */
  --leading-normal: 1.5;   /* body prose, default rhythm (readable)       */
  --leading-relaxed:1.68;  /* generous content (chat, long-form)          */
  
  /* Letter spacing: consistent per semantic role */
  --tracking-normal:  0;        /* body: no tracking                           */
  --tracking-tight:  -0.01em;   /* headings: optical tightening               */
  --tracking-label:   0.04em;   /* UI labels: subtle lift                     */
  --tracking-chrome:  0.12em;   /* mono labels (UPPERCASE chrome): crisp       */
  --tracking-display: 0.06em;   /* display (brand, large titles)              */
  
  /* Font-weight hierarchy (Inter has 400, 500, 600, 700, 800) */
  --fw-regular:    400;   /* body, prose                                    */
  --fw-medium:     500;   /* emphasis, nav active, labels                   */
  --fw-semibold:   600;   /* headings, strong text, UI labels               */
  --fw-bold:       700;   /* primary headings, active states                */
  --fw-black:      800;   /* hero/display text, massive headings            */
}

/* ─────────────────────────────────────────────────────── */
/* CORE SEMANTIC TYPE STYLES                               */
/* ─────────────────────────────────────────────────────── */

/* Display: hero titles + welcome page */
.type-display {
  font-size: var(--fs-4xl);
  font-weight: var(--fw-black);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

/* Large heading: page titles, section headers */
.type-h1 {
  font-size: var(--fs-3xl);
  font-weight: var(--fw-bold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
}

/* Medium heading: secondary h2, modal titles */
.type-h2 {
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
}

/* Small heading: section labels, card titles */
.type-h3 {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
}

/* Body prose: main content, messages */
.type-body {
  font-size: var(--fs-md);
  font-weight: var(--fw-regular);
  line-height: var(--leading-relaxed);
  letter-spacing: var(--tracking-normal);
}

/* UI label: buttons, form labels, sidebar navigation */
.type-label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-label);
}

/* Monospace chrome: uppercase labels, code references */
.type-chrome {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--tracking-chrome);
  text-transform: uppercase;
}

/* Caption: metadata, secondary hints */
.type-caption {
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  line-height: 1.4;
  letter-spacing: var(--tracking-label);
  color: var(--text-dim);
}

/* ─────────────────────────────────────────────────────── */
/* COMPONENT REFINEMENTS                                   */
/* ─────────────────────────────────────────────────────── */

/* Hero welcome title: apply display ramp, tighten spacing for glow safety */
.welcome-title {
  font-size: var(--fs-4xl);
  font-weight: var(--fw-black);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  padding: 2px 0;
  margin-bottom: 12px;
}

/* Project page title: use 40px instead of 42, benefit from --fs-5xl */
.project-title {
  font-size: var(--fs-5xl);
  font-weight: 500;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug);
}

/* Page title (topbar): enforce size consistency */
.page-title {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
}

/* Message content: breathing room for long-form prose */
.msg-content {
  font-size: var(--fs-md);
  line-height: var(--leading-relaxed);
  letter-spacing: var(--tracking-normal);
}

/* Message role badge: use semantic label size */
.msg-role {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-label);
}

/* Settings section title: consistent h2 treatment */
.set-section-title {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
}

/* Settings label: semantic label */
.set-label {
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  line-height: var(--leading-snug);
}

/* Settings description text: improve contrast */
.set-sub {
  font-size: var(--fs-sm);
  color: var(--text-dim);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-normal);
}

/* Form input: match body size for consistency */
.set-input, .set-textarea, input[type="text"], input[type="password"], textarea {
  font-size: var(--fs-base);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-normal);
}

/* Skills section heading: h2 style */
.skills-section h2 {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-chrome);
  text-transform: uppercase;
}

/* Skills hero: use display scale */
.skills-hero {
  font-size: var(--fs-4xl);
  font-weight: var(--fw-black);
  letter-spacing: var(--tracking-tight);
}

/* Project card name (Fraunces serif): match h1 baseline with serif elegance */
.project-card .pc-name {
  font-size: var(--fs-3xl);
  font-weight: 500;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug);
}

/* Project card description: caption size */
.project-card .pc-desc {
  font-size: var(--fs-sm);
  line-height: var(--leading-normal);
}

/* Sidebar nav item: label size */
.nav-item {
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
}

/* Sidebar header (PINNED / RECENT CHATS): chrome size */
.sidebar-header {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-chrome);
}

/* Modal title: h3 size */
.modal-title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  line-height: var(--leading-snug);
}

/* Suggest ion title (welcome grid): label size */
.suggestion-title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
}

/* Suggestion description: caption */
.suggestion-desc {
  font-size: var(--fs-xs);
  color: var(--text-dim);
}

/* Stat card in admin: respect hierarchy */
.stat-label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-chrome);
}

.stat-value {
  font-size: var(--fs-4xl);
  font-weight: var(--fw-black);
  letter-spacing: var(--tracking-tight);
}

/* Plan hero: h1 style */
.plan-hero-title {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-black);
}

/* Usage label: label size */
.usage-label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
}

/* Recent card title: label size */
.recent-title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
}

/* Responsive: mobile optimization */
@media (max-width: 760px) {
  .welcome-title {
    font-size: var(--fs-3xl);
  }
  
  .project-title {
    font-size: var(--fs-3xl);
  }
  
  .skills-hero {
    font-size: var(--fs-3xl);
  }
  
  .project-card .pc-name {
    font-size: var(--fs-2xl);
  }
}

/* ===== /MAXOUT: sys-typography ===== */

/* ===== MAXOUT: sys-color ===== */

/* Mermaid diagram styling - theme-aware backgrounds and text */
.mermaid-diagram {
  background: radial-gradient(130% 100% at 50% 0%, var(--bg-elev-2) 0%, var(--bg-elev-1) 72%);
  border: 1px solid rgb(var(--accent-rgb) / 0.16);
}

/* Mermaid spinner - theme-aware colors */
.mermaid-diagram.mermaid-pending { color: var(--text-muted); }
.mmd-spin {
  border-color: var(--border-strong);
  border-top-color: var(--accent);
}

.mermaid-diagram.mermaid-failed { color: var(--text-dim); }

/* Autopilot status badges - use CSS var pattern consistently */
.ap-badge.stopped {
  background: rgb(var(--danger) / 0.15);
  color: var(--danger);
}
.ap-badge.failed {
  background: rgb(var(--warning) / 0.15);
  color: var(--warning);
}

/* Emergency stop button - uses danger status color, theme-aware */
.ap-stop-btn {
  background: var(--danger);
  color: #fff;
}

/* Warning banner in Autopilot picker - theme-aware */
.ap-warn {
  background: rgb(var(--warning) / 0.10);
  border-color: rgb(var(--warning) / 0.38);
  color: rgb(var(--warning) / 1);
}
.ap-warn strong { color: rgb(var(--warning) / 1); }

/* Billing/upgrade CTA - status-aware but respects theme */
.upgrade-cta {
  color: var(--text);
  background: linear-gradient(135deg, var(--success), rgb(var(--accent-rgb)));
  box-shadow: 0 4px 16px rgb(var(--success) / 0.25);
}
.upgrade-cta:hover {
  box-shadow: 0 6px 22px rgb(var(--success) / 0.35);
}

/* Plan card highlight (premium tier) */
.plan-card.pro {
  border-color: rgb(var(--success) / 0.5);
  background: linear-gradient(180deg, rgb(var(--success) / 0.08), transparent);
  box-shadow: 0 0 0 1px rgb(var(--success) / 0.2);
}

/* Plan badge (featured tier indicator) */
.plan-badge,
.plan-badge-lg {
  background: linear-gradient(135deg, var(--success), rgb(var(--accent-rgb)));
  color: var(--text);
}

/* Billing toggle active state (annual recommended) */
.billing-toggle button.on {
  background: linear-gradient(135deg, var(--success), rgb(var(--accent-rgb)));
  color: var(--text);
  box-shadow: 0 4px 14px rgb(var(--success) / 0.25);
}

/* Success checkbox (task completion) - light-theme safe */
.assign-row.done .assign-check {
  background: var(--success);
  color: var(--bg);
  border-color: transparent;
}

/* Paywall report error message - theme-aware */
.ap-report-err {
  background: rgb(var(--warning) / 0.10);
  border-color: rgb(var(--warning) / 0.3);
  color: rgb(var(--warning) / 1);
}

/* Danger/stop dot pulse in Autopilot bar */
.ap-stop-dot {
  background: var(--danger);
  box-shadow: none;
}

/* Light theme overrides for status-aware colors */
body[data-theme="light"] .ap-submit.warn {
  background: linear-gradient(135deg, var(--warning), rgb(var(--warning) / 0.85));
  color: var(--text);
}

body[data-theme="light"] .ap-stop-btn {
  background: var(--danger);
  color: #fff;
}

body[data-theme="light"] .assign-row.done .assign-check {
  background: var(--success);
  color: var(--bg);
}

body[data-theme="light"] .upgrade-cta,
body[data-theme="light"] .plan-badge,
body[data-theme="light"] .plan-badge-lg {
  color: var(--text);
}

body[data-theme="light"] .billing-toggle button.on {
  color: var(--text);
}

/* ===== /MAXOUT: sys-color ===== */

/* ===== MAXOUT: sys-spacing =====
   Unified vertical rhythm, optical alignment, and breathing room across all surfaces.
   Baseline: 4px scale (--s-1 through --s-16). All gaps/margins/padding are now
   strictly on-scale. Optical adjustments for text baselines + icon centering.
   ===== */

/* ════ Standardized card spacing ════ */
.skill-card,
.project-card,
.suggestion-chip,
.recent-card,
.suggestion,
.ap-card {
  padding: var(--s-4) var(--s-4);  /* 16px uniform internal spacing */
}

.skill-card {
  gap: var(--s-3);  /* 12px between icon and text */
}

.project-card {
  padding: var(--s-5) var(--s-5) var(--s-4);  /* 20/16px for visual hierarchy */
  gap: var(--s-3);  /* 12px in title/desc stack */
}

.project-card .pc-name {
  margin-bottom: var(--s-2);  /* 8px below title */
}

.project-card .pc-desc {
  margin-bottom: var(--s-3);  /* 12px below subtitle */
}

.suggestion-chip {
  padding: var(--s-2) var(--s-3);  /* 8/12px tighter for chip-like feel */
  gap: var(--s-2);  /* 8px between icon and text */
}

.recent-card {
  padding: var(--s-3) var(--s-3);  /* 12px uniform */
  gap: var(--s-3);  /* 12px between avatar and content */
}

.suggestion {
  padding: var(--s-3) var(--s-4);  /* 12/16px in welcome grid */
  gap: var(--s-3);  /* 12px internal */
}

.ap-card {
  padding: var(--s-4);  /* 16px uniform */
  gap: var(--s-2);  /* 8px between elements */
}

/* ════ Sidebar + Navigation ════ */
.sidebar {
  padding: var(--s-5) var(--s-3);  /* 20/12px breathing */
  gap: var(--s-5);  /* 20px between sections */
}

.nav-item {
  padding: var(--s-2) var(--s-2);  /* 8px uniform (tight but spacious) */
  gap: var(--s-3);  /* 12px between icon and label */
}

.sidebar-section {
  gap: var(--s-1);  /* 4px tight list spacing */
}

.sidebar-header {
  margin-bottom: var(--s-2);  /* 8px below header */
  padding: 0 var(--s-1);  /* 4px horiz align */
}

.project-item {
  padding: var(--s-2) var(--s-2);  /* 8px uniform */
  gap: var(--s-1);  /* 4px tight */
}

.upcoming-item {
  padding: var(--s-2) var(--s-2);  /* 8px uniform */
}

/* ════ Main content areas ════ */
.chat {
  padding: var(--s-9) var(--s-8) var(--s-7);  /* 36/32/28px (kept as is) */
  gap: var(--s-8);  /* 32px between messages */
  scroll-padding-bottom: var(--s-6);  /* 24px */
}

.topbar {
  padding: var(--s-3) var(--s-6);  /* 12/24px */
  gap: var(--s-3);  /* 12px flex items */
}

.topbar-right {
  gap: var(--s-2);  /* 8px between badge + items */
}

/* ════ Composer ════ */
.composer {
  padding: var(--s-3) var(--s-8) var(--s-4);  /* 12/32/16px */
}

.composer-inner {
  padding: var(--s-1) var(--s-1) var(--s-1) var(--s-5);  /* 4/4/4/20px (asymmetric) */
  gap: var(--s-2);  /* 8px flex items */
}

.composer-actions {
  gap: var(--s-1);  /* 4px tight button cluster */
}

#input {
  padding: var(--s-2) var(--s-1);  /* 8/4px */
}

.send-btn {
  width: 40px;
  height: 40px;
}

/* ════ Project + Content areas ════ */
.project-page {
  gap: var(--s-7);  /* 28px column gap */
  padding: var(--s-7) var(--s-8) var(--s-14);  /* 28/32/56px */
}

.project-header {
  margin-bottom: var(--s-6);  /* 24px */
}

.project-composer {
  padding: var(--s-4) var(--s-4) var(--s-3);  /* 16/16/12px */
}

.project-composer-actions {
  margin-top: var(--s-2);  /* 8px */
  gap: var(--s-2);  /* 8px between buttons */
}

.project-suggestions {
  gap: var(--s-2);  /* 8px tight grid */
  margin: var(--s-4) 0;  /* 16px vertical */
}

.new-conv-row {
  padding: var(--s-3) var(--s-3);  /* 12px uniform */
  gap: var(--s-2);  /* 8px */
  margin-bottom: var(--s-6);  /* 24px */
}

.recents-list {
  gap: var(--s-1);  /* 4px tight */
}

.recents-label {
  margin-bottom: var(--s-2);  /* 8px */
}

/* ════ Project aside rail ════ */
.project-aside {
  gap: var(--s-3);  /* 12px between cards */
}

.aside-card-header {
  padding: var(--s-3) var(--s-4);  /* 12/16px */
}

.aside-card-body {
  padding: var(--s-3) var(--s-4);  /* 12/16px */
}

.context-item {
  padding: var(--s-1) var(--s-2);  /* 4/8px */
  gap: var(--s-2);  /* 8px */
  margin-bottom: var(--s-1);  /* 4px */
}

/* ════ Skills page ════ */
.skills-section {
  margin-bottom: var(--s-8);  /* 32px between sections */
}

.skills-section h2 {
  margin-bottom: var(--s-3);  /* 12px */
  padding-bottom: var(--s-2);  /* 8px */
}

.skills-grid {
  gap: var(--s-2);  /* 8px tight compact grid */
}

.skills-controls {
  margin-bottom: var(--s-8);  /* 32px */
  gap: var(--s-3);  /* 12px */
}

/* ════ Projects page ════ */
.projects-page {
  padding: var(--s-7) var(--s-8) var(--s-15);  /* 28/32/60px */
}

.projects-grid {
  gap: var(--s-3);  /* 12px */
}

/* ════ Autopilot modal ════ */
.ap-modal {
  padding: var(--s-5);  /* 20px uniform */
}

.ap-head {
  gap: var(--s-3);  /* 12px */
  margin-bottom: var(--s-3);  /* 12px */
}

.ap-tools {
  gap: var(--s-3);  /* 12px */
  margin-bottom: var(--s-2);  /* 8px */
}

.ap-list {
  gap: var(--s-1);  /* 4px tight */
  margin: 0 -var(--s-1) 0 -var(--s-1);  /* -4px outer */
  padding: var(--s-1) var(--s-1);  /* 4px inner */
}

.ap-row {
  padding: var(--s-2) var(--s-3);  /* 8/12px */
  gap: var(--s-3);  /* 12px */
}

.ap-instr {
  margin-top: var(--s-3);  /* 12px */
  padding: var(--s-2) var(--s-3);  /* 8/11px */
}

.ap-actions {
  gap: var(--s-2);  /* 8px */
  margin-top: var(--s-3);  /* 12px */
}

.ap-mode {
  gap: var(--s-2);  /* 8px */
  margin-top: var(--s-3);  /* 12px */
}

.ap-mode-btn {
  padding: var(--s-2) var(--s-2);  /* 8px uniform */
}

.ap-empty {
  padding: var(--s-7) var(--s-2);  /* 28/8px */
}

.ap-empty-ico {
  margin-bottom: var(--s-2);  /* 8px */
}

.ap-empty p {
  margin-bottom: var(--s-3);  /* 12px */
}

.ap-grid {
  gap: var(--s-3);  /* 12px */
}

/* ════ Autopilot dashboard ════ */
.ap-dash-scroll {
  padding: var(--s-6) var(--s-9) var(--s-10);  /* 24/36/40px */
}

/* ════ Modal / Dialogs ════ */
.modal {
  padding: var(--s-6);  /* 24px uniform */
  gap: var(--s-3);  /* 12px between elements */
}

.modal-actions {
  gap: var(--s-2);  /* 8px */
  margin-top: var(--s-2);  /* 8px */
}

.modal input,
.modal textarea {
  padding: var(--s-2) var(--s-3);  /* 8/12px */
}

/* ════ Tour / Popover ════ */
.tour-pop {
  padding: var(--s-4) var(--s-4) var(--s-3);  /* 16/16/13px */
}

.tour-step {
  margin-bottom: var(--s-1);  /* 4px (implicit from flex) */
}

.tour-title {
  margin-top: var(--s-1);  /* 4px */
}

.tour-text {
  margin-top: var(--s-1);  /* 4px */
}

.tour-nav {
  gap: var(--s-2);  /* 8px */
  margin-top: var(--s-4);  /* 16px */
}

.tour-dots {
  gap: var(--s-1);  /* 4px */
}

/* ════ Menu / Slash command ════ */
.slash-menu {
  padding: var(--s-1);  /* 6px (keep as is, snug) */
}

.slash-item {
  padding: var(--s-2) var(--s-2);  /* 8/10px */
  gap: var(--s-3);  /* 12px → 11px (visual bias: icon left) */
}

.slash-txt {
  gap: var(--s-0);  /* 0px tight (text only stacking) */
}

/* ════ Voice button region ════ */
.voice-add-row {
  gap: var(--s-2);  /* 8px */
  margin-top: var(--s-2);  /* 8px */
}

.voice-add-actions {
  gap: var(--s-2);  /* 8px */
}

/* ════ Message content refinement ════ */
.msg-role {
  margin-bottom: var(--s-1);  /* 4px (was 5px, tighten) */
}

.msg-content blockquote {
  padding-left: var(--s-3);  /* 12px (was 14px, standardize) */
  margin: var(--s-1) 0;  /* 4px vertical (was 0.6em) */
}

.msg-content ul,
.msg-content ol {
  margin: var(--s-1) 0 var(--s-2) var(--s-4);  /* 4/0/8/16px */
}

.msg-content code {
  padding: var(--s-0) var(--s-1);  /* 0/4px (was 2px 6px) */
}

.msg-content pre {
  padding: var(--s-3) var(--s-4) !important;  /* 12/16px (was 14/16) */
  margin: var(--s-1) 0;  /* 4px vertical (was 0.6em) */
}

/* ════ Mermaid diagram spacing ════ */
.mermaid-diagram {
  margin: var(--s-2) 0;  /* 8px vertical (was 0.9em) */
  padding: var(--s-6) var(--s-5);  /* 24/20px (was 24/20, kept as is) */
}

/* ════ Misc refinements ════ */
.brand {
  gap: var(--s-3);  /* 12px */
  padding: var(--s-1) var(--s-1) var(--s-3);  /* 4/4/12px */
}

.brand-sub {
  margin-top: var(--s-0);  /* 0px (was 2px, tighten) */
}

.ghost-btn {
  padding: var(--s-2) var(--s-3);  /* 8/12px */
}

.toggle-btn {
  padding: var(--s-2) var(--s-3);  /* 8/12px */
}

.toggle-left {
  gap: var(--s-2);  /* 8px */
}

.status-line {
  gap: var(--s-2);  /* 8px */
  padding: 0 var(--s-1);  /* 4px horiz */
}

.credit {
  padding: var(--s-2) var(--s-1) var(--s-0);  /* 8/4/0px */
  gap: var(--s-0);  /* 0px (tight stack) */
}

/* ════ Auth card ════ */
.auth-card {
  padding: var(--s-8);  /* 32px uniform (already good) */
}

.auth-card .pw-field {
  margin-bottom: var(--s-2);  /* 8px (was 10px) */
}

.auth-sub {
  margin-bottom: var(--s-6);  /* 24px (was 22px, standardize) */
}

.auth-switch {
  margin-top: var(--s-4);  /* 16px (was 18px) */
}

.auth-submit {
  margin-top: var(--s-1);  /* 4px (was 6px, tighten) */
  padding: var(--s-3);  /* 12px uniform (was 12px, kept) */
}

/* ════ Pill / Badge ════ */
.pill {
  padding: var(--s-1) var(--s-3);  /* 4/12px (was 7/14, tighten) */
}

.badge {
  padding: var(--s-1) var(--s-2);  /* 4/8px (was 4/10, align) */
}

/* ═══════════════════════════════════════════════════════════════
   VERTICAL RHYTHM: Establish consistent baselines across all text.
   Text elements are optically centered within their cards/rows.
   ═══════════════════════════════════════════════════════════════ */

/* All small text (labels, metadata) aligns to a tight line-height
   to prevent excessive vertical drift */
.sidebar-header,
.filter-pills .pill,
.nav-count,
.tooltip,
.muted-text {
  line-height: 1;
}

/* Icon + text rows (nav items, list items) use consistent baseline */
.nav-item,
.project-item,
.slash-item,
.ap-row {
  align-items: center;
  min-height: 32px;  /* optical vertical centering */
}

/* Cards with titles + descriptions maintain rhythm */
.project-card .pc-name,
.skill-card .skill-name,
.recent-card .recent-title {
  line-height: 1.2;
}

.project-card .pc-desc,
.skill-card .skill-desc,
.recent-card .recent-preview {
  line-height: 1.4;
}

/* ════ Horizontal optical alignment ════ */
/* Icons that sit beside text should be centered visually, not just
   mathematically. Gap + flex-shrink-0 + consistent sizing does this. */
.msg-avatar {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
}

.skill-icon,
.skill-check {
  flex-shrink: 0;
}

.icon-btn {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}

.recent-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
}

/* ════ Density modulation (per surface) ════ */
/* Lists that need high density (sidebar, project list) */
.sidebar-section { gap: var(--s-1); }      /* 4px tight */

/* Grids that need breathing room */
.projects-grid,
.skills-grid,
.ap-grid { gap: var(--s-3); }             /* 12px airy */

/* Inline/flex rows that need clarity */
.topbar-right,
.composer-actions,
.project-composer-actions { gap: var(--s-2); }  /* 8px */

/* Large card stacks that need rhythm */
.chat { gap: var(--s-8); }                /* 32px generous */
.project-page { gap: var(--s-7); }        /* 28px generous */

/* ════ Stretch / alignment safety ════ */
/* Prevent cards from being crushed in flex containers */
.ap-card,
.project-card,
.skill-card,
.suggestion-chip {
  min-width: 0;  /* allow text truncation instead of overflow */
}

/* Message column stays centered and has max width */
.msg {
  max-width: 784px;
  width: 100%;
  margin: 0 auto;
}

.chat {
  max-width: 100%;
}

/* ═════════════════════════════════════════════════════════════════ */
/* ===== /MAXOUT: sys-spacing ===== */

/* ===== MAXOUT: sys-microinteractions ===== */

/* ────────────────────────────────────────────────────────────────
   UNIVERSAL MICRO-INTERACTION POLISH
   Bring every clickable to world-class feel: cursor clarity, 
   focus rings, disabled distinction, success/loading states, 
   and consistent easing language.
   ──────────────────────────────────────────────────────────────── */

/* ═══ CURSOR CLARITY - every interactive element signals its nature ═══ */
button, [role="button"], .icon-btn, .nav-item, .nav-pin, .project-item,
.suggestion, .suggestion-chip, .skill-card, .project-card, .pill,
.toggle-btn, .ghost-btn, a, input[type="checkbox"], input[type="radio"],
.recent-card, .ap-row, .ap-card, .ap-mode-btn, .ap-submit, 
.recent-chats button, .new-conv-row, .hist-filter, .hist-row,
.toggle-btn, .back-btn, .tour-skip, .tour-prev, .tour-next,
.ap-x, .skill-delete, .mmd-tool, .mmd-expand, .conn-tile {
  cursor: pointer;
}

button:disabled, [disabled], button[disabled], .icon-btn:disabled {
  cursor: not-allowed;
}

input[type="text"], input[type="email"], input[type="password"], 
textarea, select, [contenteditable="true"] {
  cursor: text;
}

input[type="text"]:disabled, input[type="email"]:disabled,
input[type="password"]:disabled, textarea:disabled, select:disabled {
  cursor: not-allowed;
}

/* ═══ FOCUS RING SYSTEM - keyboard accessibility without mouse clutter ═══ */
/* Use :focus-visible ONLY (not :focus) to avoid ring on mouse clicks.
   Ring appears when TAB-navigating or using keyboard. */
:focus-visible {
  outline: 2px solid rgb(var(--accent-rgb) / 0.55);
  outline-offset: 2px;
}

/* Remove outline for elements that manage their own focus state */
button:focus:not(:focus-visible),
a:focus:not(:focus-visible),
input:focus:not(:focus-visible),
textarea:focus:not(:focus-visible),
select:focus:not(:focus-visible) {
  outline: none;
}

/* For buttons that have their own focus styling (send-btn, primary-btn, etc)
   suppress the default ring but keep the element styled */
.send-btn:focus-visible,
.primary-btn:focus-visible,
.icon-btn:focus-visible,
.nav-item:focus-visible,
.ghost-btn:focus-visible,
.toggle-btn:focus-visible {
  outline: 2px solid rgb(var(--accent-rgb) / 0.65);
  outline-offset: 1px;
}

/* ═══ GHOST BUTTONS - hairline borders need stronger hover + cursor ═══ */
.ghost-btn {
  cursor: pointer;
  transition: all 0.15s var(--ease-out), box-shadow 0.2s var(--ease-out);
}

.ghost-btn:hover {
  background: var(--bg-elev-2);
  color: var(--text);
  border-color: rgb(var(--accent-rgb) / 0.25);
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.ghost-btn:active {
  transform: scale(0.98);
}

.ghost-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  background: transparent;
  box-shadow: none;
}

/* ═══ ICON-ONLY BUTTONS - stronger feedback on small touch targets ═══ */
.icon-btn {
  cursor: pointer;
  transition: all 0.12s var(--ease-out);
  position: relative;
}

.icon-btn:hover {
  background: var(--bg-elev-2);
  color: var(--text);
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.icon-btn:active {
  transform: scale(0.88);
}

.icon-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* ═══ NAV ITEMS - snappy, consistent hover language ═══ */
.nav-item {
  cursor: pointer;
  transition: all 0.12s var(--ease-out);
  position: relative;
}

.nav-item:hover {
  background: var(--bg-elev-2);
  color: var(--text);
  box-shadow: inset 0 0 0 1px rgb(var(--accent-rgb) / 0.08);
}

.nav-item:active {
  transform: scale(0.96);
}

.nav-item:focus-visible {
  outline: 1.5px solid rgb(var(--accent-rgb) / 0.6);
  outline-offset: -2px;
}

/* ═══ PINNING STAR - subtle delight ═══ */
.nav-pin {
  cursor: pointer;
  transition: all 0.12s var(--ease-out), fill 0.12s var(--ease-out);
}

.nav-pin:hover {
  opacity: 1;
  background: rgba(94,169,255,0.12);
  color: var(--accent);
}

.nav-pin:active {
  transform: scale(0.92);
}

.nav-pin.on {
  opacity: 1;
}

/* ═══ LINKS - consistent underline + background feedback ═══ */
a:not([class]) {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid rgb(var(--accent-rgb) / 0.35);
  transition: border-color 0.12s var(--ease-out), 
              background 0.12s var(--ease-out),
              color 0.12s var(--ease-out);
  cursor: pointer;
}

a:not([class]):hover {
  border-bottom-color: var(--accent);
  background: rgb(var(--accent-rgb) / 0.08);
}

a:not([class]):active {
  opacity: 0.85;
}

a:not([class]):focus-visible {
  outline: 1.5px solid rgb(var(--accent-rgb) / 0.6);
  outline-offset: 2px;
}

/* ═══ PROJECT/SKILL CARDS - stronger elevation on interaction ═══ */
.project-card, .skill-card, .ap-card {
  cursor: pointer;
  transition: all 0.15s var(--ease-out), box-shadow 0.2s var(--ease-out);
}

.project-card:hover, .skill-card:hover, .ap-card:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.3), 
              inset 0 0 0 1px rgb(var(--accent-rgb) / 0.12);
}

.project-card:active, .skill-card:active, .ap-card:active {
  transform: scale(0.97);
}

/* ═══ PILLS / FILTER BUTTONS - clear state indication ═══ */
.pill {
  cursor: pointer;
  transition: all 0.12s var(--ease-out);
}

.pill:hover {
  border-color: rgb(var(--accent-rgb) / 0.4);
  background: rgba(94,169,255,0.08);
  color: var(--text);
}

.pill:active {
  transform: scale(0.96);
}

.pill.active {
  box-shadow: 0 0 0 1px rgb(var(--accent-rgb) / 0.5);
}

.pill:focus-visible {
  outline: 1.5px solid rgb(var(--accent-rgb) / 0.6);
  outline-offset: 2px;
}

/* ═══ TOGGLE BUTTONS - state transitions with visual clarity ═══ */
.toggle-btn {
  cursor: pointer;
  transition: all 0.15s var(--ease-out);
}

.toggle-btn:hover:not(:disabled) {
  border-color: rgb(var(--accent-rgb) / 0.2);
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.toggle-btn:active:not(:disabled) {
  transform: scale(0.97);
}

.toggle-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.toggle-btn:focus-visible {
  outline: 1.5px solid rgb(var(--accent-rgb) / 0.6);
  outline-offset: 1px;
}

/* Toggle knob spring animation on activation */
.toggle-knob {
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), 
              background 0.2s var(--ease-out);
}

/* ═══ AUTOPILOT ROW / MODAL ROWS - subtle hover + selection states ═══ */
.ap-row {
  cursor: pointer;
  transition: all 0.12s var(--ease-out);
}

.ap-row:hover {
  border-color: rgb(var(--accent-rgb) / 0.25);
  background: var(--bg-elev-2);
}

.ap-row.on {
  border-color: rgb(var(--accent-rgb) / 0.45);
  background: rgb(var(--accent-rgb) / 0.08);
  box-shadow: inset 0 0 0 1px rgb(var(--accent-rgb) / 0.15);
}

.ap-row:active:not(.on) {
  transform: scale(0.98);
}

/* ═══ DISABLED STATE HIERARCHY - visual distinction beyond opacity ═══ */
button:disabled, [disabled],
.ghost-btn:disabled, .send-btn:disabled, .primary-btn:disabled,
.icon-btn:disabled, .nav-item:disabled, .toggle-btn:disabled {
  opacity: 0.42;
  cursor: not-allowed;
  /* Darken text slightly to increase contrast against disabled background */
  color: var(--text-dim);
}

/* Disabled primary buttons get a slightly desaturated background */
.primary-btn:disabled {
  background: linear-gradient(135deg, 
    rgb(var(--accent-blue-rgb) / 0.3) 0%, 
    rgb(var(--accent-rgb) / 0.2) 100%);
  box-shadow: none;
}

/* ═══ SUCCESS / LOADING MICRO-STATES ═══ */
/* When button class toggles to .copied or .sending, smooth the state change */
button.copied, button.success {
  transition: background 0.2s var(--ease-out), 
              color 0.2s var(--ease-out),
              box-shadow 0.2s var(--ease-out);
}

/* Loading spinner state */
button.loading {
  position: relative;
  color: transparent;
}

button.loading::after {
  content: "";
  position: absolute;
  inset: 50%;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border: 1.5px solid rgb(var(--accent-rgb) / 0.3);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

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

/* ═══ IMPROVED EASING LANGUAGE ═══ */
/* Standardize easing across all micro-interactions for cohesion.
   Use ease-out for enter (snappy), ease-in-out for sustain. */

/* Quick transitions (hovers, borders) */
.icon-btn, .nav-item, .pill, .nav-pin, .ghost-btn,
a, .toggle-btn, .back-btn {
  transition-timing-function: var(--ease-out);
  transition-duration: 0.12s;
}

/* Medium transitions (elevations, shadows) */
.send-btn, .primary-btn, .project-card, .skill-card, .ap-card, .ap-row {
  transition-timing-function: var(--ease-out);
  transition-duration: 0.15s;
}

/* Longer transitions (modals, overlays) */
.modal, .modal-backdrop, .ap-backdrop {
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  transition-duration: 0.22s;
}

/* Spring for kinetic interactions (toggle knob) */
.toggle-knob {
  transition-timing-function: var(--ease-spring);
  transition-duration: 0.28s;
}

/* ═══ RESPECT PREFERS-REDUCED-MOTION ═══ */
@media (prefers-reduced-motion: reduce) {
  button, a, input, textarea, [role="button"],
  .icon-btn, .nav-item, .nav-pin, .project-item,
  .suggestion, .skill-card, .project-card, .pill,
  .toggle-btn, .ghost-btn, .recent-card, .ap-row,
  .ap-card, .back-btn {
    transition: none;
  }
  
  .toggle-knob {
    transition: none;
  }
  
  :focus-visible {
    outline-width: 2px;
  }
}

/* ═══ LIGHT THEME MICRO-INTERACTIONS ═══ */
body[data-theme="light"] :focus-visible {
  outline: 2px solid rgb(var(--accent-blue-rgb) / 0.65);
}

body[data-theme="light"] .icon-btn:hover,
body[data-theme="light"] .nav-item:hover,
body[data-theme="light"] .ghost-btn:hover {
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.15);
}

body[data-theme="light"] a:not([class]):hover {
  background: rgb(var(--accent-blue-rgb) / 0.06);
  border-bottom-color: rgb(var(--accent-blue-rgb) / 0.8);
}

body[data-theme="light"] .project-card:hover,
body[data-theme="light"] .skill-card:hover,
body[data-theme="light"] .ap-card:hover {
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.12),
              inset 0 0 0 1px rgb(var(--accent-blue-rgb) / 0.1);
}

/* ===== /MAXOUT: sys-microinteractions ===== */

/* ===== MAXOUT: sys-motion ===== */

/* Exit animations: reverse-play entrance for coherent motion continuity */
@keyframes moExit {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(12px) scale(0.98); }
}

@keyframes moPanelExit {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(12px) scale(0.94); }
}

@keyframes moViewOut {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(-8px); }
}

/* Modal backdrop close: reverse blur */
.modal-backdrop.closing, .paywall-overlay.closing, .palette-backdrop.closing,
.school-modal-backdrop.closing, .auth-overlay.closing {
  animation: moBackdropExit 0.25s var(--mo-out) forwards !important;
}
@keyframes moBackdropExit {
  from { opacity: 1; backdrop-filter: blur(8px); }
  to   { opacity: 0; backdrop-filter: blur(0); }
}

/* Modal panel close: spring reverse + lift */
.modal-backdrop.closing > .modal,
.modal-backdrop.closing > .import-modal,
.palette-backdrop.closing > *,
.school-modal-backdrop.closing > * {
  animation: moPanelExit 0.28s var(--mo-spring) forwards !important;
}

/* List/grid items exit with staggered fade: for task delete, removal, etc */
.mo-exit {
  animation: moExit 0.3s var(--mo-out) forwards;
  animation-delay: calc(var(--mo-i, 0) * 24ms);
  pointer-events: none;
}

/* Card hover: spring lift + glow (tactile, not linear) */
.task-card, .project-card, .conn-tile, .mem-atom, .skill-card, .ap-card,
.recent-card, .suggestion, .history-item, .aside-card {
  transition: transform 0.28s cubic-bezier(0.34, 1.2, 0.64, 1),
              box-shadow 0.28s var(--mo-out), border-color 0.28s var(--mo-out),
              background 0.28s var(--mo-out);
  will-change: transform;
}

.task-card:hover, .project-card:hover, .conn-tile:hover, .mem-atom:hover,
.skill-card:hover, .ap-card:hover, .recent-card:hover, .history-item:hover {
  transform: translateY(-4px);
}

/* Button hover: spring-based feedback (0.28s spring instead of linear press) */
.primary-btn, .ghost-btn, .danger-btn, .pill, .conn-btn, .seg-btn,
.mode-btn, .ap-mode-btn, .icon-btn, .voice-mode-btn {
  transition: transform 0.28s cubic-bezier(0.34, 1.2, 0.64, 1),
              box-shadow 0.24s var(--mo-out),
              border-color 0.24s var(--mo-out),
              background 0.24s var(--mo-out);
}

.primary-btn:hover, .conn-btn:hover {
  transform: translateY(-2px) scale(1.02);
}

.ghost-btn:hover {
  transform: translateY(-2px);
}

/* Press: crisp scale-down (no overshoot, snap easing) */
.primary-btn:active, .ghost-btn:active, .danger-btn:active,
.pill:active, .conn-btn:active {
  transform: scale(0.96);
  transition: transform 0.12s var(--mo-snap);
}

/* Keyboard focus: spring-ring for tactile a11y feedback */
button:focus-visible, a:focus-visible, .nav-item:focus-visible,
.pill:focus-visible, [role="button"]:focus-visible, .seg-btn:focus-visible {
  outline: 2px solid rgb(var(--accent-rgb) / 0.7);
  outline-offset: 3px;
  border-radius: var(--r-sm);
  animation: moFocusRing 0.26s var(--mo-spring) forwards;
}

@keyframes moFocusRing {
  from { outline-width: 1px; outline-offset: 1px; }
  to   { outline-width: 2px; outline-offset: 3px; }
}

/* Nav active indicator: spring growth + glow bloom */
.nav-item::before {
  transition: transform 0.32s cubic-bezier(0.34, 1.2, 0.64, 1),
              box-shadow 0.36s var(--mo-out);
}

.nav-item.active::before {
  box-shadow: 0 0 16px rgb(var(--accent-rgb) / 0.8);
}

/* Sender button micro: lift + glow bloom on hover (hero-like feel) */
.send-btn, #send-btn, #project-send-btn {
  transition: transform 0.28s cubic-bezier(0.34, 1.2, 0.64, 1),
              box-shadow 0.32s var(--mo-out);
  will-change: transform;
}

.send-btn:hover, #send-btn:hover, #project-send-btn:hover {
  transform: scale(1.08) translateY(-2px);
  box-shadow: 0 0 28px rgb(var(--accent-blue-rgb) / 0.6);
}

.send-btn:active, #send-btn:active, #project-send-btn:active {
  transform: scale(0.92);
  transition: transform 0.14s var(--mo-snap);
}

/* Input focus: glow ring that springs in (no sudden snap) */
#input, .set-input, .set-textarea, .mem-feed-search, #voice-sample-text, #voice-sample-title,
.modal input, .modal textarea, .login-creds input {
  transition: border-color 0.28s var(--mo-out),
              box-shadow 0.36s cubic-bezier(0.34, 1.15, 0.64, 1),
              background 0.28s var(--mo-out);
}

#input:focus, .set-input:focus, .set-textarea:focus, .mem-feed-search:focus,
#voice-sample-text:focus, #voice-sample-title:focus, .modal input:focus, .modal textarea:focus,
.login-creds input:focus {
  box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / 0.18), 0 0 28px rgb(var(--accent-rgb) / 0.16);
  border-color: rgb(var(--accent-rgb) / 0.6);
}

/* Composer focus: lift + bloom (spring easing for premium feel) */
.composer:has(textarea:focus) {
  box-shadow: 0 -1px 36px rgb(var(--accent-rgb) / 0.14);
  transition: box-shadow 0.36s cubic-bezier(0.34, 1.15, 0.64, 1);
}

/* Toggle knobs: spring + curve easing (not just linear) */
.set-toggle .seg-knob, .toggle-btn .seg-knob {
  transition: transform 0.36s cubic-bezier(0.34, 1.2, 0.64, 1),
              background 0.24s var(--mo-out) !important;
}

/* Suggestion chips: spring float on hover */
.suggestion, .starter, .palette-item {
  transition: transform 0.28s cubic-bezier(0.34, 1.2, 0.64, 1),
              background 0.24s var(--mo-out);
}

.suggestion:hover, .starter:hover {
  transform: translateX(6px) translateY(-2px);
}

/* Ripple: pop from center (GPU-accelerated, lower alpha for subtlety) */
.mo-ripple {
  background: radial-gradient(circle, rgb(var(--accent-rgb) / 0.35), transparent 70%);
  animation: moRipplesSpring 0.64s cubic-bezier(0.34, 1.2, 0.64, 1) forwards;
}

@keyframes moRipplesSpring {
  0%   { transform: translate(-50%, -50%) scale(0); opacity: 0.6; }
  50%  { opacity: 0.35; }
  100% { transform: translate(-50%, -50%) scale(1.1); opacity: 0; }
}

/* Typing indicator: softer dance */
.mo-typing i {
  animation: moDotSpring 1.2s cubic-bezier(0.34, 1.15, 0.64, 1) infinite;
}

@keyframes moDotSpring {
  0%, 85%, 100% { opacity: 0.3; transform: translateY(0) scale(1); }
  42%          { opacity: 1; transform: translateY(-6px) scale(1.08); }
}

/* Status ping: smoother easing */
.status-dot::after {
  animation: moPingSpring 2.4s cubic-bezier(0.34, 1.15, 0.64, 1) infinite;
}

@keyframes moPingSpring {
  0%   { box-shadow: 0 0 0 0 rgb(var(--accent-rgb) / 0.5); }
  100% { box-shadow: 0 0 0 8px rgb(var(--accent-rgb) / 0); }
}

/* Badge/pill pop: spring pop (overshoot controlled) */
.pw-popular, .pw-tag, .badge-new {
  animation: moPopSpring 0.6s cubic-bezier(0.34, 1.3, 0.64, 1) both;
}

@keyframes moPopSpring {
  from { opacity: 0; transform: scale(0.5); }
  60%  { transform: scale(1.12); }
  to   { opacity: 1; transform: scale(1); }
}

/* Message entrance: spring rise (not linear decel) */
.msg {
  animation: moMsgInSpring 0.52s cubic-bezier(0.34, 1.15, 0.64, 1) both;
}

@keyframes moMsgInSpring {
  from { opacity: 0; transform: translateY(16px) scale(0.96); }
  60%  { opacity: 1; }
  to   { opacity: 1; transform: none; }
}

/* Avatar pop: spring bounce on arrival */
.msg.assistant .msg-avatar {
  animation: moAvatarSpring 0.72s cubic-bezier(0.34, 1.25, 0.64, 1) both;
}

@keyframes moAvatarSpring {
  from { transform: scale(0.4); opacity: 0; }
  50%  { transform: scale(1.18); }
  to   { transform: scale(1); opacity: 1; }
}

/* Breathing halo: use spring easing for more fluid breathing */
.brand-icon::after, .orb::after {
  animation: moBreathSpring 3.8s cubic-bezier(0.34, 1.1, 0.64, 1) infinite;
}

@keyframes moBreathSpring {
  0%, 100%  { opacity: 0.3; transform: scale(1); }
  50%       { opacity: 0.75; transform: scale(1.06); }
}

/* Skeleton shimmer: slightly smoother */
.skeleton, .skel-card, .skel-line {
  animation: moShimmerSpring 1.6s cubic-bezier(0.34, 1.1, 0.64, 1) infinite;
}

@keyframes moShimmerSpring {
  from { background-position: 100% 0; }
  to   { background-position: -100% 0; }
}

/* Modal open spring: snappier entry (0.38s vs 0.42s + stronger easing) */
@keyframes moPanelSpring {
  from { opacity: 0; transform: translateY(20px) scale(0.92); }
  to   { opacity: 1; transform: none; }
}

.modal-backdrop:not(.hidden) > .modal,
.modal-backdrop:not(.hidden) > .import-modal,
.palette-backdrop:not(.hidden) > *,
.school-modal-backdrop:not(.hidden) > * {
  animation: moPanelSpring 0.38s cubic-bezier(0.34, 1.25, 0.64, 1) both !important;
}

/* View transition: spring-based entry (smoother than decel) */
.view {
  animation: moViewSpring 0.48s cubic-bezier(0.34, 1.15, 0.64, 1) both;
}

@keyframes moViewSpring {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* Reduced motion: instant, no overshoot, no delay */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  
  /* Kill spring overshoot entirely - snap to final state */
  .primary-btn:hover, .ghost-btn:hover, .send-btn:hover,
  .task-card:hover, .project-card:hover, .conn-tile:hover {
    animation: none !important;
    transform: none !important;
  }
}

/* ===== /MAXOUT: sys-motion ===== */

/* ===== MAXOUT: EMPTY-STATES ===== */
/* Unified, premium empty-state system across all views. Consistent icon treatment,
   calm entrance motion, scoped sizing, and on-brand visual hierarchy. Uses :root tokens only. */

/* ─── CORE: radial-gradient orb icon container (reusable across views) ─── */
.empty-icon-base {
  width: 56px; height: 56px; margin: 0 auto 16px;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(var(--accent-rgb)) 0%, transparent 70%);
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; color: #fff; box-shadow: none;
}

/* PROJECTS: proper card layout + full styling hierarchy */
.projects-empty {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: 32px; text-align: center; gap: 16px;
  animation: emptyFadeIn 0.42s cubic-bezier(0.16, 1, 0.3, 1);
}
.projects-empty-icon {
  width: 56px; height: 56px; margin: 0 auto 16px;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(var(--accent-rgb)) 0%, transparent 70%);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; color: #fff;
}
.projects-empty-icon svg { width: 28px; height: 28px; stroke-width: 1.7; }
.projects-empty-title {
  font-size: 22px; font-weight: 700; color: var(--text);
  margin: 0; letter-spacing: -0.02em;
}
.projects-empty-sub {
  font-size: 13.5px; color: var(--text-dim);
  margin: 0; max-width: 480px; line-height: 1.6;
}

/* VOICE: elevate from bare paragraph → card structure */
.voice-empty {
  color: var(--text-dim); font-size: 13px; line-height: 1.5; margin: 4px 0 0;
  padding: 24px 16px; background: rgba(255,255,255,0.012);
  border: 1px solid var(--border); border-radius: var(--r-md);
  text-align: center; animation: emptyFadeIn 0.42s cubic-bezier(0.16, 1, 0.3, 1);
}
.voice-empty.sm { font-size: 12.5px; padding: 14px; }

/* AUTOPILOT: larger picker empty state with proper spacing */
.ap-empty {
  text-align: center; padding: 40px 24px; color: var(--text-muted);
  animation: emptyFadeIn 0.42s cubic-bezier(0.16, 1, 0.3, 1);
}
.ap-empty-ico {
  font-size: 40px; margin-bottom: 12px; color: rgb(var(--accent-rgb));
  animation: emptyIconBreathe 3s ease-in-out infinite;
}
.ap-empty p { font-size: 13.5px; margin-bottom: 16px; }

/* AUTOPILOT DASHBOARD: centered, elevated */
.ap-dash-empty {
  text-align: center; color: var(--text-muted); padding: 80px 32px;
  animation: emptyFadeIn 0.42s cubic-bezier(0.16, 1, 0.3, 1);
}
.ap-dash-empty .ap-empty-ico {
  font-size: 48px; margin-bottom: 16px; opacity: 0.85;
}
.ap-dash-empty h3 {
  color: var(--text); font-size: 21px; margin: 12px 0 8px;
  font-weight: 700; letter-spacing: -0.02em;
}
.ap-dash-empty p {
  font-size: 13.5px; max-width: 480px; margin: 0 auto;
  line-height: 1.6; color: var(--text-dim);
}

/* SIDEBAR: dashed → hairline, SVG icon, proper spacing */
.sidebar-empty {
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-3) var(--s-3);
  margin: 4px 0;
  font-size: 12px;
  color: var(--text-dim);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  line-height: 1.4;
  animation: emptyFadeIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.sidebar-empty .se-ico {
  opacity: 0.65; flex-shrink: 0; font-size: 16px;
  width: 18px; height: 18px; display: flex; align-items: center; justify-content: center;
}

/* RAIL/SIDEBAR-RIGHT: calendar + recurring (project view) */
.rail-empty {
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 12px;
  padding: 24px 16px;
  text-align: center;
  color: var(--text-dim);
  font-size: 12.5px;
  background: rgba(255,255,255,0.01);
  min-height: 72px;
  animation: emptyFadeIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.rail-empty svg {
  width: 22px; height: 22px;
  color: var(--text-dim);
  opacity: 0.65;
}
.rail-empty span { font-weight: 500; letter-spacing: 0.01em; }

body[data-view="project"] .rail-empty {
  background: rgba(255,255,255,0.012);
  border: 1px solid var(--border);
  color: var(--text-dim);
  padding: 24px 16px;
  min-height: 76px;
  transition: border-color 0.15s ease, background 0.15s ease;
}
body[data-view="project"] .rail-empty:hover {
  border-color: rgb(var(--accent-rgb) / 0.15);
  background: rgba(255,255,255,0.018);
}
body[data-view="project"] .rail-empty svg {
  opacity: 0.60;
  transition: opacity 0.15s ease, color 0.15s ease;
}
body[data-view="project"] .rail-empty:hover svg {
  opacity: 0.75; color: rgb(var(--accent-rgb) / 0.65);
}

/* RECENTS (sidebar): card-like with hover subtlety */
.recents-empty {
  padding: 18px 16px;
  text-align: center;
  color: var(--text-dim);
  font-size: 12px;
  background: rgba(255,255,255,0.012);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  animation: emptyFadeIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.sidebar .recent-chats .empty,
.sidebar .recents-empty {
  transition: all 0.15s ease;
}
body[data-view="project"] .recents-empty:hover {
  border-color: rgb(var(--accent-rgb) / 0.12);
}

/* COMMAND PALETTE: upgrade from bare text */
.palette-empty {
  padding: 28px 20px; text-align: center; color: var(--text-dim);
  font-size: 12.5px; animation: emptyFadeIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* RECENT CHATS (sidebar): quiet dashed indication */
.recent-chats .empty {
  font-size: 11px; color: var(--text-dim);
  padding: 6px 12px;
}

/* ─── ANIMATION: calm fade-in + subtle rise ─── */
@keyframes emptyFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* ─── ANIMATION: gentle breathing for icons (not persistent like orb, just during idle) ─── */
@keyframes emptyIconBreathe {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50% { opacity: 0.95; transform: scale(1.04); }
}

/* ─── REDUCED MOTION: respect user preferences ─── */
@media (prefers-reduced-motion: reduce) {
  .projects-empty,
  .voice-empty,
  .ap-empty,
  .ap-dash-empty,
  .sidebar-empty,
  .rail-empty,
  .recents-empty,
  .palette-empty,
  .mem-empty,
  .tasks-empty,
  .hist-empty { animation: none !important; }
  .ap-empty-ico { animation: none !important; }
}

/* ═══ LIGHT THEME ═══ */
body[data-theme="light"] .projects-empty-icon {
  background: rgb(var(--accent-rgb) / 0.08);
  color: rgb(var(--accent-blue-rgb));
}
body[data-theme="light"] .projects-empty-title { color: #1a1a1a; }
body[data-theme="light"] .projects-empty-sub { color: #6b7280; }

body[data-theme="light"] .voice-empty {
  background: rgb(var(--accent-rgb) / 0.04);
  border-color: rgb(var(--accent-rgb) / 0.15);
}

body[data-theme="light"] .ap-dash-empty h3 { color: #1a1a1a; }
body[data-theme="light"] .ap-dash-empty p { color: #6b7280; }

body[data-theme="light"] .sidebar-empty { color: #6b7280; border-color: rgb(var(--accent-rgb) / 0.12); }

body[data-theme="light"] .rail-empty { color: #6b7280; }
body[data-theme="light"] .recents-empty { background: rgb(var(--accent-rgb) / 0.04); border-color: rgb(var(--accent-rgb) / 0.15); color: #6b7280; }
body[data-theme="light"] .palette-empty { color: #6b7280; }

/* ===== /MAXOUT: EMPTY-STATES ===== */

/* ===== MAXOUT: sys-loading-states ===== */
/* Unified loading experience: no layout shift, cohesive brand motion, full 
   accessibility (prefers-reduced-motion). Spinners + skeletons use accent glow,
   directional shimmer, and reserved-height containers. All animations respect
   the ONE brand motion (calm, 120-200ms or 1.3-2s sheen sweep). */

/* ── Send button spinner: accent-glowing blue ring ─────────────────────────── */
.send-btn.loading::after {
  content: "";
  width: 15px; height: 15px;
  border: 2px solid rgba(94,169,255,0.25);
  border-top-color: rgb(94,169,255);
  border-right-color: rgb(94,169,255);
  border-radius: 50%;
  animation: spinner-glow 0.8s linear infinite;
  box-shadow: 0 0 8px rgba(94,169,255,0.4);
}

@keyframes spinner-glow {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .send-btn.loading::after {
    animation: none;
    border-top-color: transparent;
    border-right-color: transparent;
    opacity: 0.6;
    box-shadow: none;
  }
}

/* ── Diagram spinner: accent color system, theme-aware ────────────────────── */
.mmd-spin {
  width: 13px; height: 13px;
  border: 2px solid rgba(94,169,255,0.2);
  border-top-color: rgb(94,169,255);
  border-radius: 50%;
  animation: spinner-glow 0.7s linear infinite;
}

body[data-theme="light"] .mmd-spin {
  border: 2px solid rgba(37,99,235,0.15);
  border-top-color: rgb(37,99,235);
}

@media (prefers-reduced-motion: reduce) {
  .mmd-spin {
    animation: none;
    border-top-color: transparent;
    opacity: 0.5;
  }
}

/* ── Unified shimmer direction: left-to-right sweep for all ─────────────────── */
.view-tasks .tasks-skel .sk {
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
}

.ap-skel-card::before {
  animation: skeleton-shimmer 1.8s ease-in-out infinite;
}

@keyframes skeleton-shimmer {
  0% { background-position: -100% 0; }
  100% { background-position: 100% 0; }
}

/* Diagram skeleton sheen: swept left-to-right for consistency */
.mermaid-pending .mmd-skel-sheen {
  animation: skeleton-sheen 1.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes skeleton-sheen {
  0% { transform: translateX(-180%); }
  100% { transform: translateX(280%); }
}

/* ── Memory skeleton: breathing pulse for reduced-motion ───────────────────── */
.view-memories .mem-skel-wrap {
  animation: memSkelFade 0.22s ease both;
}

@keyframes memSkelFade {
  from { opacity: 0; }
  to { opacity: 0.92; }
}

@media (prefers-reduced-motion: reduce) {
  .view-memories .mem-skel-wrap {
    animation: skeleton-pulse 2.2s ease-in-out infinite;
  }
}

@keyframes skeleton-pulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 0.92; }
}

/* ── Tasks skeleton container: reserved height, fade-in ───────────────────── */
.view-tasks .tasks-body.loading .tasks-skel {
  opacity: 0;
  animation: skeleton-fade-in 0.35s ease-out forwards;
}

@keyframes skeleton-fade-in {
  from { opacity: 0; }
  to { opacity: 0.85; }
}

/* ── Autopilot skeleton: consistent grid layout, no reflow ──────────────────── */
.ap-dash .ap-skel {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(296px, 1fr));
  gap: 12px;
  align-content: start;
  animation: skeleton-fade-in 0.35s ease-out;
}

/* ── Import modal skeleton cards: prevent layout shift, visual balance ─────── */
.import-loading {
  display: grid;
  grid-column: 1 / -1;
  gap: 12px;
  text-align: center;
  color: var(--text-dim);
  font-size: 13px;
  padding: 22px 10px;
  line-height: 1.5;
  position: relative;
  min-height: 120px;
}

.import-loading::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(94,169,255,0.08) 50%,
    transparent 100%
  );
  animation: skeleton-sheen 1.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.import-loading::after {
  content: "Scanning your apps…";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: auto;
  white-space: nowrap;
}

/* Reduced motion: hold a calm static state */
@media (prefers-reduced-motion: reduce) {
  .import-loading::before {
    animation: none;
    opacity: 0.4;
  }
}

/* ── History skeleton: reserved grid, consistent animation ──────────────────── */
.view-history .hist-skel-row {
  animation: skeleton-fade-in 0.35s ease-out;
}

/* All skeleton placeholder elements: consistent base shimmer gradient ────────── */
.skeleton {
  background-size: 200% 100%;
  background-attachment: local;
}

.view-tasks .tasks-skel .sk,
.ap-skel-card::before {
  background-size: 200% 100%;
}

/* Reduced motion: no animation on all skeleton elements ──────────────────── */
@media (prefers-reduced-motion: reduce) {
  .view-tasks .tasks-skel .sk,
  .ap-skel-card::before,
  .view-history .hist-skel-row,
  .send-btn.loading::after,
  .mmd-spin {
    animation: none !important;
  }
}

/* ===== /MAXOUT: sys-loading-states ===== */

/* ===== MAXOUT: sys-error-states ===== */

/* Status indicator: prominent, animated, accessible */
.status-line {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--text-dim);
  padding: 8px 10px;
  border-radius: 8px;
  transition: all 0.3s cubic-bezier(0.34, 1.2, 0.64, 1);
  position: relative;
}

.status-line:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
}

.status-line .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--warning);
  transition: all 0.4s ease;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.05);
}

.status-line .dot.ok {
  background: var(--success);
  box-shadow: 0 0 8px rgba(116, 198, 154, 0.4), 0 0 0 2px rgba(116, 198, 154, 0.1);
  animation: statusPulseOk 2.4s ease-in-out infinite;
}

.status-line .dot.bad {
  background: var(--danger);
  box-shadow: 0 0 8px rgba(229, 112, 122, 0.4), 0 0 0 2px rgba(229, 112, 122, 0.1);
  animation: statusPulseBad 1.8s ease-in-out infinite;
}

@keyframes statusPulseOk {
  0%, 100% {
    box-shadow: 0 0 8px rgba(116, 198, 154, 0.4), 0 0 0 2px rgba(116, 198, 154, 0.1);
  }
  50% {
    box-shadow: 0 0 12px rgba(116, 198, 154, 0.6), 0 0 0 4px rgba(116, 198, 154, 0.15);
  }
}

@keyframes statusPulseBad {
  0%, 100% {
    box-shadow: 0 0 8px rgba(229, 112, 122, 0.4), 0 0 0 2px rgba(229, 112, 122, 0.1);
  }
  50% {
    box-shadow: 0 0 12px rgba(229, 112, 122, 0.6), 0 0 0 4px rgba(229, 112, 122, 0.15);
  }
}

/* Branded error card: replaces raw error messages */
.error-card {
  max-width: 520px;
  margin: 32px auto;
  padding: 32px 28px;
  background: linear-gradient(135deg, rgba(229, 112, 122, 0.06), rgba(229, 112, 122, 0.03));
  border: 1px solid rgba(229, 112, 122, 0.2);
  border-radius: 16px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.error-card::before {
  content: '';
  position: absolute;
  top: -80px;
  left: 50%;
  transform: translateX(-50%);
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(229, 112, 122, 0.15), transparent 70%);
  pointer-events: none;
  animation: errorGlowBreathe 4s ease-in-out infinite;
}

@keyframes errorGlowBreathe {
  0%, 100% {
    opacity: 0.3;
    transform: translateX(-50%) scale(0.95);
  }
  50% {
    opacity: 0.6;
    transform: translateX(-50%) scale(1.05);
  }
}

.error-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0 auto 20px;
  background: rgba(229, 112, 122, 0.12);
  border: 1px solid rgba(229, 112, 122, 0.25);
  border-radius: 12px;
  position: relative;
  z-index: 1;
}

.error-card-icon svg {
  width: 26px;
  height: 26px;
  color: var(--danger);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.error-card-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
  position: relative;
  z-index: 1;
  letter-spacing: -0.02em;
}

.error-card-message {
  font-size: 13.5px;
  color: var(--text-dim);
  line-height: 1.6;
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
}

.error-card-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  position: relative;
  z-index: 1;
  flex-wrap: wrap;
}

.error-card-action-btn {
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.error-card-action-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
  transform: translateY(-1px);
}

.error-card-action-btn.primary {
  background: rgb(var(--accent-blue-rgb));
  border-color: rgb(var(--accent-blue-rgb));
  color: white;
}

.error-card-action-btn.primary:hover {
  background: rgb(var(--accent-blue-rgb) / 0.85);
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.3);
}

/* Offline state: graceful app UI */
.app.offline {
  opacity: 0.92;
}

.app.offline .main {
  pointer-events: none;
}

.app.offline .composer textarea,
.app.offline .composer button,
.app.offline .project-composer textarea,
.app.offline .project-composer button {
  opacity: 0.5;
  cursor: not-allowed;
}

.offline-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9998;
  background: linear-gradient(90deg, rgba(229, 112, 122, 0.12), rgba(229, 112, 122, 0.08));
  border-bottom: 1px solid rgba(229, 112, 122, 0.2);
  padding: 12px 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
  text-align: center;
  font-size: 13px;
  color: var(--text-dim);
  animation: offlineBannerSlideDown 0.4s cubic-bezier(0.34, 1.2, 0.64, 1);
}

@keyframes offlineBannerSlideDown {
  from {
    opacity: 0;
    transform: translateY(-100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.offline-banner .dot {
  width: 6px;
  height: 6px;
  background: var(--danger);
  animation: statusPulseBad 1.8s ease-in-out infinite;
}

.offline-banner-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.offline-banner-text {
  flex: 1;
}

.offline-banner-retry {
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  color: var(--text);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.offline-banner-retry:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-1px);
}

/* Enhanced toast: accessibility + branded polish */
/* (removed duplicate #toast-wrap - see toast-redux section) */

.toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: var(--bg-elev-2, #15151f);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 3px solid var(--accent, rgb(var(--accent-rgb)));
  border-radius: 12px;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  color: var(--text, #e8e8f0);
  font-size: 13.5px;
  line-height: 1.5;
  cursor: pointer;
  opacity: 0;
  transform: translateX(24px) scale(0.96);
  transition: all 0.3s cubic-bezier(0.34, 1.2, 0.64, 1);
  outline: 2px solid transparent;
}

.toast:focus {
  outline-color: rgba(94, 169, 255, 0.4);
}

.toast.show {
  opacity: 1;
  transform: none;
}

.toast-ico {
  flex-shrink: 0;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.4;
  width: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.toast-msg {
  flex: 1;
  word-break: break-word;
}

.toast-x {
  flex-shrink: 0;
  opacity: 0.35;
  font-size: 16px;
  line-height: 1.2;
  cursor: pointer;
  transition: opacity 0.2s ease;
  width: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.toast:hover .toast-x {
  opacity: 0.7;
}

.toast-success {
  border-left-color: var(--success);
  background: linear-gradient(135deg, rgba(116, 198, 154, 0.08), rgba(116, 198, 154, 0.04));
}

.toast-success .toast-ico {
  color: var(--success);
}

.toast-error {
  border-left-color: var(--danger, #e5707a);
  background: linear-gradient(135deg, rgba(229, 112, 122, 0.08), rgba(229, 112, 122, 0.04));
}

.toast-error .toast-ico {
  color: var(--danger, #e5707a);
}

.toast-sync {
  border-left-color: var(--accent, rgb(var(--accent-rgb)));
  background: linear-gradient(135deg, rgb(var(--accent-rgb) / 0.08), rgb(var(--accent-rgb) / 0.04));
}

.toast-sync .toast-ico {
  color: var(--accent, rgb(var(--accent-rgb)));
  animation: btnspin 1.1s linear infinite;
}

.toast-info {
  border-left-color: rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.03);
}

.toast-info .toast-ico {
  color: rgba(255, 255, 255, 0.55);
}

/* Chat error message: branded card instead of raw markdown */
.message.error-message {
  margin-top: 20px;
}

.message.error-message .message-content {
  background: linear-gradient(135deg, rgba(229, 112, 122, 0.08), rgba(229, 112, 122, 0.04));
  border: 1px solid rgba(229, 112, 122, 0.2);
  border-radius: 12px;
  padding: 16px 20px;
}

.message.error-message .message-content strong {
  color: var(--danger);
  font-weight: 700;
}

/* Reconnection UI: subtle + confident */
.reconnecting-indicator {
  display: none;
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 16px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  font-size: 12px;
  color: var(--text-dim);
  z-index: 9997;
  animation: reconnectingFadeIn 0.4s ease;
}

@keyframes reconnectingFadeIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

.reconnecting-indicator.show {
  display: flex;
  align-items: center;
  gap: 8px;
}

.reconnecting-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  animation: dotPulse 1.4s ease-in-out infinite;
}

/* Auth error: branded + accessible */
.auth-error {
  color: var(--danger);
  font-size: 12px;
  min-height: 16px;
  margin-bottom: 8px;
  padding: 8px 12px;
  background: rgba(229, 112, 122, 0.1);
  border: 1px solid rgba(229, 112, 122, 0.2);
  border-radius: 8px;
  line-height: 1.5;
  transition: all 0.3s ease;
  animation: errorShake 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes errorShake {
  0%, 100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-4px);
  }
  75% {
    transform: translateX(4px);
  }
}

.auth-error:empty {
  display: none;
}

/* Composer disabled state: visual feedback when offline */
.composer.disabled {
  opacity: 0.6;
  pointer-events: none;
}

.composer.disabled textarea,
.composer.disabled button {
  cursor: not-allowed;
  opacity: 0.5;
}

.composer-hint.offline-hint {
  color: var(--text-dim);
  font-style: italic;
}

@media (max-width: 600px) {
  #toast-wrap {
    left: 16px;
    right: 16px;
    bottom: 16px;
    max-width: none;
  }

  .error-card {
    margin: 24px 16px;
    padding: 24px 20px;
  }

  .offline-banner {
    padding: 10px 16px;
    flex-direction: column;
    gap: 8px;
  }

  .offline-banner-retry {
    width: 100%;
  }
}

/* ===== /MAXOUT: sys-error-states ===== */

/* ===== MAXOUT: sys-scrollbars ===== */

/* Global smooth scroll + scrollbar layout stability - prevent reflow jank */
html {
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
}

/* CONSOLIDATED WEBKIT BASELINE - replaces scattered rules, 10px premium thin feel */
::-webkit-scrollbar { 
  width: 10px; 
  height: 10px; 
}
::-webkit-scrollbar-track { 
  background: transparent; 
}
::-webkit-scrollbar-thumb { 
  background: rgb(var(--accent-rgb) / 0.08); 
  border-radius: var(--r-full); 
  border: 2px solid transparent; 
  background-clip: padding-box;
  transition: background 0.22s var(--ease-in-out), border-color 0.22s var(--ease-in-out);
}
::-webkit-scrollbar-thumb:hover { 
  background: rgb(var(--accent-rgb) / 0.22); 
  background-clip: padding-box; 
}
::-webkit-scrollbar-thumb:active { 
  background: rgb(var(--accent-rgb) / 0.35); 
  background-clip: padding-box; 
}

/* CONSOLIDATED FIREFOX BASELINE - unified across all overflow areas */
* {
  scrollbar-width: thin;
  scrollbar-color: rgb(var(--accent-rgb) / 0.08) transparent;
}

*:hover {
  scrollbar-color: rgb(var(--accent-rgb) / 0.16) transparent;
}

*:active {
  scrollbar-color: rgb(var(--accent-rgb) / 0.28) transparent;
}

/* ── EXPLICIT OVERRIDES: Light backgrounds (mermaid diagrams) need dark thumb ── */
.mermaid-diagram:not(.mermaid-pending):not(.mermaid-failed) {
  scrollbar-color: rgba(15, 33, 56, 0.20) transparent;
}

.mermaid-diagram:not(.mermaid-pending):not(.mermaid-failed):hover {
  scrollbar-color: rgba(15, 33, 56, 0.32) transparent;
}

.mermaid-diagram:not(.mermaid-pending):not(.mermaid-failed)::-webkit-scrollbar-thumb {
  background: rgba(15, 33, 56, 0.18);
}

.mermaid-diagram:not(.mermaid-pending):not(.mermaid-failed):hover::-webkit-scrollbar-thumb {
  background: rgba(15, 33, 56, 0.30);
  background-clip: padding-box;
}

/* ──────────────────────────────────────────────────────────────
   PREMIUM SCROLL POLISH: Refined scroll-padding + overflow containment
   ────────────────────────────────────────────────────────────── */

/* Chat thread: fade-mask at top already applied; scrollbar rides cleanly */
body[data-view="chat"] .view-chat .chat {
  scroll-padding-top: 22px;
  scroll-padding-bottom: 0;
}

/* Sidebar nav section: clean padding around scrollbar */
.sidebar {
  scroll-padding: 8px 0;
}

/* Dashboard autopilot scroll container: ample breathing room */
.ap-dash-scroll {
  scroll-padding: 24px 0;
}

/* Project aside cards: tight scroll padding for detail panels */
body[data-view="project"] .aside-card-body {
  scroll-padding: 4px 0;
}

/* Model dropdown & palette: ultra-tight for compact UI */
.topbar .model-picker .model-dropdown,
#palette-backdrop .palette-list {
  scroll-padding: 2px 0;
}

/* ===== /MAXOUT: sys-scrollbars ===== */

/* ===== MAXOUT: sys-icons (Lucide-style consistency) ===== */
/* Normalize every line-SVG icon to stroke-width 1.8 (premium optical weight for premium UI).
   All 24×24 viewBox Lucide icons inherit this. Scoped icon-sizing tokens eliminate centering
   misalignment. Brand marks (Google Classroom, Canvas, etc., viewBox 44×44) unchanged. */

:root {
  /* Icon sizing scale - compose all inline icons from these tokens */
  --icon-xs:   12px;    /* tiny: breadcrumb, meta badges */
  --icon-sm:   15px;    /* small: nav sidebar, theme toggle */
  --icon-md:   18px;    /* standard: suggestion cards, list items */
  --icon-lg:   22px;    /* large: button groups, action icons */
  --icon-xl:   28px;    /* XL: hero panels, empty states */
  --icon-2xl:  38px;    /* 2XL: autopilot dashboard, feature tiles */
  --icon-3xl:  52px;    /* 3XL: onboarding tour, brand hero */
}

/* All inline Lucide line-SVGs: normalize stroke-width to 1.8 (Figma export default,
   premium look on dark), round joins/caps, currentColor, no fill. */
svg[viewBox="0 0 24 24"]:not(.brand-mark) {
  stroke-width: 1.8 !important;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  stroke: currentColor;
}

/* Suggestion cards: clean icon tile + hover state */
.suggestion-icon {
  width: var(--icon-lg);
  height: var(--icon-lg);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgb(var(--accent-rgb));
  transition: transform 0.15s, background 0.15s;
}
.suggestion-icon svg {
  width: 100%;
  height: 100%;
}
.suggestion:hover .suggestion-icon {
  background: rgb(var(--accent-rgb) / 0.08);
  transform: scale(1.1);
}

/* Memory kind badges: icon circle on left, calm desaturated background */
.mem-atom-kind svg {
  width: var(--icon-md);
  height: var(--icon-md);
}

/* Action icons (edit, delete, copy): tight icon-only buttons */
.btn-ico {
  width: var(--icon-sm);
  height: var(--icon-sm);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn-ico svg {
  width: 100%;
  height: 100%;
}

/* Feature icons (paywall, desktop exclusive): size up for readability */
.ico svg {
  width: var(--icon-lg);
  height: var(--icon-lg);
  color: rgb(var(--accent-rgb));
}
.desktop-exclusive-feature .ico {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Autopilot empty-state icons: larger, calm muted accent */
.ap-empty-ico svg {
  width: var(--icon-2xl);
  height: var(--icon-2xl);
  color: rgb(var(--accent-rgb));
  opacity: 0.85;
}
.ap-dash-empty .ap-empty-ico svg {
  width: 42px;
  height: 42px;
}

/* Onboarding tour: orb + line SVGs in tall hero box */
.tut-icon svg {
  width: var(--icon-3xl);
  height: var(--icon-3xl);
  color: rgb(var(--accent-rgb));
}

/* Run-mode indicator (IV): inline accent icon */
.rm-icon svg {
  width: var(--icon-lg);
  height: var(--icon-lg);
  color: rgb(var(--accent-rgb));
}

/* Onboarding tour step icons */
.tut-icon img {
  width: 60px;
  height: 60px;
  filter: drop-shadow(0 0 14px rgb(var(--accent-rgb) / 0.45));
}

/* Theme toggle: inline moon/sun icons next to label */
.theme-ico-moon svg,
.theme-ico-sun svg {
  width: var(--icon-sm);
  height: var(--icon-sm);
  vertical-align: -2px;
}

/* Mode-picker icons (Your Computer / Cloud): centered flex icon */
.mode-icon svg {
  width: var(--icon-xl);
  height: var(--icon-xl);
  color: rgb(var(--accent-rgb));
}

/* Mermaid/diagram fallback icon: muted accent */
.mmd-fb-ico {
  width: var(--icon-lg);
  height: var(--icon-lg);
  color: rgb(var(--accent-rgb) / 0.7);
  flex-shrink: 0;
}

/* Connector tile icons: centered large */
.conn-tile-icon {
  font-size: var(--icon-xl);
  flex-shrink: 0;
  width: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ===== /MAXOUT: sys-icons ===== */

/* ===== MAXOUT: sys-focus-a11y ===== */

/* Unified focus ring system: consistent, theme-aware, respects :focus-visible */
:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
:focus:not(:focus-visible) { outline: none; }

/* Button focus rings - clean, elevated, respects shape */
.primary-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / 0.2), 0 0 0 1px var(--border-focus);
}

.ghost-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgb(var(--accent-rgb) / 0.3);
  border-color: rgb(var(--accent-rgb) / 0.5);
}

/* Nav items: focused + active states are distinct but coherent */
.nav-item:focus-visible {
  outline: none;
  background: rgba(var(--accent-rgb), 0.08);
  border-color: rgb(var(--accent-rgb) / 0.35);
  border: 1px solid rgb(var(--accent-rgb) / 0.35);
  border-radius: var(--r-md);
}

.sidebar-customize:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgb(var(--accent-rgb) / 0.3);
}

/* Settings tabs keyboard nav */
.settings-tab:focus-visible {
  outline: none;
  border-bottom: 2px solid var(--border-focus);
  color: var(--text);
}

/* Modal inputs: border + ring for clarity */
.modal input:focus-visible,
.modal textarea:focus-visible,
.school-step input:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 1px;
  border-color: rgb(var(--accent-rgb) / 0.4);
}

/* Settings form inputs */
.set-input:focus-visible,
.set-textarea:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 1px;
  border-color: var(--accent);
}

/* Command palette: visible focus for keyboard users */
.palette-item:focus-visible {
  outline: none;
  background: rgb(var(--accent-rgb) / 0.12);
  border: 1px solid rgb(var(--accent-rgb) / 0.35);
  border-radius: var(--r-md);
  box-shadow: 0 0 0 2px rgb(var(--accent-rgb) / 0.18);
}

/* Memory/atom text inputs */
#mem-atom-text:focus-visible,
#mem-atom-tag:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 1px;
  border-color: var(--accent);
}

/* Voice card inputs */
.voice-add textarea:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 1px;
  border-color: var(--accent);
}

/* Task grid "Do it" button: cleaner focus than current nested box-shadow */
.view-tasks .task-actions button.do-it:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--bg-elev-1), 0 0 0 4px rgb(var(--accent-rgb) / 0.55);
}

/* Connector tiles: simplify the existing beautiful focus, remove !important */
.view-connectors .conn-tile:focus-visible {
  outline: none;
  border-color: rgb(var(--accent-rgb) / 0.55);
  box-shadow: 0 0 0 2px rgb(var(--accent-rgb) / 0.25), 0 16px 40px -16px rgba(0, 0, 0, 0.55);
}

body[data-theme="light"] .view-connectors .conn-tile:focus-visible {
  box-shadow: 0 0 0 2px rgb(var(--accent-rgb) / 0.25), 0 16px 40px -18px rgba(40, 50, 90, 0.22);
}

/* Mermaid diagram tools: use :root tokens instead of hardcoded colors */
.mermaid-diagram .mmd-tool:focus-visible,
.mermaid-diagram .mmd-tools .mmd-expand:focus-visible {
  outline: none;
  background: rgb(var(--accent-rgb) / 0.12);
  border-color: rgb(var(--accent-rgb) / 0.4);
  box-shadow: 0 0 0 2px rgb(var(--accent-rgb) / 0.3);
  color: var(--text);
}

/* Copy button in chat: visible focus */
.msg-copy-btn:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 1px;
}

/* Icon buttons with title tooltips */
.icon-btn:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 1px;
  border-radius: var(--r-sm);
}

/* Voice mode tabs */
.voice-mode [role="tablist"] button:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

/* Light theme adjustments for focus rings */
body[data-theme="light"] .primary-btn:focus-visible {
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.15), 0 0 0 1px rgb(var(--accent-rgb) / 0.4);
}

body[data-theme="light"] .ghost-btn:focus-visible {
  box-shadow: 0 0 0 2px rgb(var(--accent-rgb) / 0.25);
  border-color: rgb(var(--accent-rgb) / 0.5);
}

body[data-theme="light"] .nav-item:focus-visible {
  background: rgba(var(--accent-rgb), 0.06);
  border-color: rgb(var(--accent-rgb) / 0.3);
}

/* Screen reader-only skip link (prepared for nav enhancement) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.sr-only:focus {
  position: static;
  width: auto;
  height: auto;
  padding: inherit;
  margin: inherit;
  overflow: visible;
  clip: auto;
  white-space: normal;
  outline: 2px solid var(--border-focus);
  background: var(--bg-elev-2);
  padding: 8px 12px;
  border-radius: var(--r-sm);
  z-index: 9999;
}

/* Reduced motion: disable outline animations but keep the ring visible */
@media (prefers-reduced-motion: reduce) {
  :focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
}

/* ===== /MAXOUT: sys-focus-a11y ===== */

/* ===== MAXOUT: sys-modals ===== */
/* Ultra-premium modal system: elevation, rhythm, micro-motion, visual hierarchy */

/* ── BACKDROP: consistent blur + elevation ──────────────────── */
.modal-backdrop {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: rgba(5, 5, 9, 0.88);
  /* Exit animation: fade + scale-down */
  animation: backdropFadeIn 0.2s ease-out forwards;
}
.modal-backdrop.hidden {
  display: none;
  animation: backdropFadeOut 0.18s ease-in forwards !important;
}
@keyframes backdropFadeIn {
  from { opacity: 0; backdrop-filter: blur(0px); }
  to { opacity: 1; backdrop-filter: blur(12px); }
}
@keyframes backdropFadeOut {
  from { opacity: 1; backdrop-filter: blur(12px); }
  to { opacity: 0; backdrop-filter: blur(2px); }
}

/* ── MODAL CONTAINER: elevated glass with accent glow ────────── */
.modal {
  background: linear-gradient(180deg, rgba(18, 20, 26, 0.88) 0%, rgba(16, 18, 23, 0.92) 100%);
  border: 1px solid rgb(var(--accent-rgb) / 0.15);
  border-radius: var(--r-lg);
  position: relative;
  box-shadow: 
    0 0 1px rgb(var(--accent-rgb) / 0.35),
    var(--shadow-xl);
  display: flex;
  flex-direction: column;
  gap: 0;
  /* Open animation: spring scale + fade */
  animation: modalScaleIn 0.28s var(--ease-out) forwards;
  animation-delay: 0.04s;
  opacity: 0;
  transform: scale(0.92) translateY(8px);
}

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

/* Close animation (paired with .hidden via JS toggle) */
.modal-backdrop.exiting .modal {
  animation: modalScaleOut 0.2s ease-in forwards;
}
@keyframes modalScaleOut {
  to {
    opacity: 0;
    transform: scale(0.94) translateY(-4px);
  }
}

/* ── MODAL HEADER: unified rhythm ────────────────────────────── */
.modal-title {
  font-size: 20px;
  font-weight: 750;
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: var(--text);
  margin: 0;
  padding: 24px 24px 0 24px;
}
.modal-sub {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-dim);
  margin: 8px 0 0 0;
  padding: 0 24px;
}

/* ── MODAL BODY: unified spacing + input breathing room ──────── */
.modal > input,
.modal > textarea,
.modal > select,
.modal > label,
.modal > p,
.modal > div:not(.modal-actions):not(.warn-box):not(.run-modes):not(.plan-grid):not(.import-cards):not(.import-result):not(.import-modal):not(.mem-step):not(.mem-import-modal):not(.mem-view-modal):not(.school-step):not(.mem-view-modal):not(.mem-import-modal),
.school-step > input,
.school-step > textarea,
.modal > .warn-box,
.modal > .run-modes {
  margin-top: 14px;
  padding-left: 24px;
  padding-right: 24px;
}

.modal > .modal-title {
  padding-bottom: 0;
}

.modal > .modal-sub {
  padding-bottom: 6px;
  margin-bottom: 0;
}

/* First element after title gets smaller gap */
.modal-title + .modal-sub {
  margin-top: 6px;
}

/* ── INPUTS: consistent hairline + glow on focus ───────────── */
.modal input,
.modal textarea,
.modal select,
.school-step input,
.school-step textarea {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 11px 13px;
  font-size: 13px;
  color: var(--text);
  transition: all 0.12s ease-out;
}

.modal input::placeholder,
.modal textarea::placeholder,
.school-step input::placeholder,
.school-step textarea::placeholder {
  color: var(--text-dim);
}

.modal input:focus,
.modal textarea:focus,
.modal select:focus,
.school-step input:focus,
.school-step textarea:focus {
  border-color: rgb(var(--accent-rgb) / 0.45);
  background: rgba(255, 255, 255, 0.035);
  box-shadow: 
    inset 0 0 0 1px rgb(var(--accent-rgb) / 0.20),
    0 0 0 0.5px rgb(var(--accent-rgb) / 0.25);
}

/* ── WARN BOX: calm + integrated spacing ──────────────────── */
.modal .warn-box {
  background: rgba(214, 168, 95, 0.06);
  border: 1px solid rgba(214, 168, 95, 0.18);
  border-radius: var(--r-sm);
  padding: 12px 13px;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.5;
  margin-top: 14px;
  margin-left: 24px;
  margin-right: 24px;
  display: flex;
  align-items: flex-start;
  gap: 11px;
}

.warn-box svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  opacity: 0.8;
}

/* ── BUTTONS: split by type ──────────────────────────────────── */
.modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding: 18px 24px 24px 24px;
  margin-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.modal-actions .primary-btn {
  background: var(--accent-blue);
  color: #ffffff;
  border: none;
  border-radius: var(--r-sm);
  padding: 10px 22px;
  font-weight: 600;
  font-size: 13px;
  transition: all 0.14s ease-out;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25);
}

.modal-actions .primary-btn:hover {
  background: rgb(var(--accent-blue-rgb) / 0.92);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35);
}

.modal-actions .primary-btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 3px rgba(37, 99, 235, 0.25);
}

.modal-actions .ghost-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: var(--r-sm);
  padding: 10px 18px;
  font-weight: 500;
  font-size: 13px;
  transition: all 0.12s ease-out;
}

.modal-actions .ghost-btn:hover {
  border-color: rgb(var(--accent-rgb) / 0.35);
  color: var(--text);
  background: rgb(var(--accent-rgb) / 0.05);
}

/* ── LARGE MODALS: maintain rhythm ──────────────────────────── */
.mem-import-modal,
.mem-view-modal,
.school-modal,
#instructions-modal-backdrop .modal {
  max-width: 540px;
}

/* ── SELECTOR BUTTONS: mode, platform, run-mode ─────────────── */
.modal .platform-btn,
.modal .mode-btn,
.modal .run-mode-btn {
  background: rgba(255, 255, 255, 0.015);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 14px 16px;
  text-align: left;
  color: var(--text-muted);
  transition: all 0.12s ease-out;
  font-size: 13px;
}

.modal .platform-btn:hover,
.modal .mode-btn:hover,
.modal .run-mode-btn:hover {
  border-color: rgb(var(--accent-rgb) / 0.30);
  background: rgb(var(--accent-rgb) / 0.04);
  color: var(--text);
}

.modal .platform-btn.selected,
.modal .mode-btn.selected,
.modal .run-mode-btn.selected {
  border-color: rgb(var(--accent-rgb) / 0.50);
  background: rgb(var(--accent-rgb) / 0.08);
  color: var(--accent);
}

/* ── FORM SECTIONS: break into visual groups ───────────────── */
.modal .mem-step,
.modal .mem-import-modal .mem-step {
  padding: 0 24px;
  margin-top: 18px;
}

.modal .mem-step:first-child,
.modal .mem-import-modal .mem-step:first-child {
  margin-top: 14px;
}

/* ── PLAN CARDS in billing modal: consistent elevation ──────── */
.modal .plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  padding: 0 24px;
  margin-top: 14px;
}

.modal .plan-card {
  background: rgba(255, 255, 255, 0.015);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 18px 16px;
  text-align: center;
  transition: all 0.14s ease-out;
}

.modal .plan-card:hover {
  transform: translateY(-1px);
  border-color: rgb(var(--accent-rgb) / 0.25);
  background: rgb(var(--accent-rgb) / 0.03);
}

.modal .plan-card.pro {
  border-color: rgb(var(--accent-rgb) / 0.35);
  background: rgb(var(--accent-rgb) / 0.07);
}

/* ── ACCESSIBILITY: focus visible on all buttons ────────────── */
.modal button:focus-visible {
  outline: 2px solid rgb(var(--accent-rgb) / 0.60);
  outline-offset: 2px;
}

/* ── LIGHT THEME override ──────────────────────────────────── */
body[data-theme="light"] .modal-backdrop {
  background: rgba(0, 0, 0, 0.45);
}

body[data-theme="light"] .modal {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 
    0 0 1px rgba(0, 0, 0, 0.08),
    0 20px 56px rgba(0, 0, 0, 0.12);
}

body[data-theme="light"] .modal input,
body[data-theme="light"] .modal textarea,
body[data-theme="light"] .modal select {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.08);
}

body[data-theme="light"] .modal input:focus,
body[data-theme="light"] .modal textarea:focus,
body[data-theme="light"] .modal select:focus {
  border-color: rgb(var(--accent-blue-rgb) / 0.50);
  background: rgba(0, 0, 0, 0.03);
  box-shadow: 
    inset 0 0 0 1px rgb(var(--accent-blue-rgb) / 0.15),
    0 0 0 0.5px rgb(var(--accent-blue-rgb) / 0.30);
}

/* ===== /MAXOUT: sys-modals ===== */

/* ===== MAXOUT: sig-diagrams ===== */

/* Push the glow: brighten inset + outer shadows for neon intensity */
.mermaid-diagram {
  border-color: rgb(94 169 255 / 0.26);
  box-shadow: inset 0 0 60px rgb(94 169 255 / 0.09), 
              0 0 0 1px rgb(94 169 255 / 0.08),
              0 8px 30px -12px rgba(0,0,0,0.6);
}

/* Hover elevation: layered depth + lifted card feel */
.mermaid-diagram.mmd-zoomable:hover {
  border-color: rgb(94 169 255 / 0.44);
  box-shadow: inset 0 0 60px rgb(94 169 255 / 0.12),
              0 0 0 1px rgb(94 169 255 / 0.20),
              0 0 28px rgb(94 169 255 / 0.18),
              0 12px 40px -8px rgba(0,0,0,0.7);
  transform: translateY(-1px);
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

/* Caption: elevated, bolder, more presence */
.mermaid-diagram:not(.mermaid-pending):not(.mermaid-failed)::before {
  background: rgb(94 169 255 / 0.10);
  border-bottom-color: rgb(94 169 255 / 0.22);
  color: #8fa4c4;
  font-weight: 700;
  letter-spacing: 0.12em;
  box-shadow: inset 0 1px 0 rgba(94 169 255 / 0.12);
  transition: all 140ms ease;
}

/* Caption glows on card hover */
.mermaid-diagram.mmd-zoomable:hover::before {
  background: rgb(94 169 255 / 0.16);
  color: #a8bbd9;
  box-shadow: inset 0 1px 0 rgba(94 169 255 / 0.20), 
              0 0 20px rgba(94 169 255 / 0.08);
}

/* Breathing room: more margin below caption */
.mermaid-diagram:not(.mermaid-pending):not(.mermaid-failed) svg {
  margin: 22px auto 24px;
}

/* Lightbox stage: gallery-grade presentation. Enhance the light paper backdrop. */
.mmd-lb-stage {
  background:
    radial-gradient(120% 120% at 50% 0%, #ffffff 0%, #f8fafd 100%);
  box-shadow: var(--shadow-xl), 
              0 0 0 1px rgba(94 169 255 / 0.12),
              0 0 80px rgba(94 169 255 / 0.06);
  border: 1px solid rgba(94 169 255 / 0.15);
}

/* Lightbox toolbar: more presence, signature glow accent */
.mmd-lb-bar {
  background: rgba(10, 12, 18, 0.88);
  border: 1px solid rgba(94 169 255 / 0.18);
  box-shadow: 0 0 0 1px rgba(94 169 255 / 0.06),
              0 0 32px rgba(94 169 255 / 0.14),
              var(--shadow-lg);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  backdrop-filter: blur(24px) saturate(150%);
}

/* Lightbox buttons: premium hover treatment */
.mmd-lb-btn:hover {
  background: rgb(94 169 255 / 0.16);
  border-color: rgb(94 169 255 / 0.40);
  color: #d4e4f9;
}

/* Draw-in animation: natural ease-out curve for elegant trace */
@keyframes mmd-draw-premium { 
  0% { stroke-dashoffset: var(--dash-len); opacity: 0.2; }
  50% { opacity: 1; }
  to { stroke-dashoffset: 0; opacity: 1; } 
}

/* Fade-in: snappier, more energy */
@keyframes mmd-fade-premium { 
  from { opacity: 0; transform: scale(0.98); } 
  to { opacity: 1; transform: scale(1); } 
}

/* Tool pill: elevated glass on light worksheet */
.mermaid-diagram .mmd-tools {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(94 169 255 / 0.14);
  box-shadow: 0 2px 8px rgba(15, 33, 56, 0.08),
              0 0 0 1px rgba(94 169 255 / 0.06),
              0 12px 32px -8px rgba(0,0,0,0.12);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
}

/* Light theme: keep paper contrast but lift the neon intensity */
body[data-theme="light"] .mermaid-diagram {
  background: linear-gradient(135deg, #fafbfd 0%, #f6f9fd 50%, #f2f8fe 100%);
  border-color: rgb(37 99 235 / 0.24);
  box-shadow: inset 0 0 40px rgb(37 99 235 / 0.06),
              0 0 0 1px rgba(37, 99, 235, 0.08),
              0 8px 30px -12px rgba(0,0,0,0.08);
}

body[data-theme="light"] .mermaid-diagram.mmd-zoomable:hover {
  border-color: rgb(37 99 235 / 0.36);
  box-shadow: inset 0 0 40px rgb(37 99 235 / 0.10),
              0 0 0 1px rgba(37, 99, 235, 0.16),
              0 0 24px rgb(37 99 235 / 0.12),
              0 12px 40px -8px rgba(0,0,0,0.12);
}

body[data-theme="light"] .mermaid-diagram:not(.mermaid-pending):not(.mermaid-failed)::before {
  background: rgb(37 99 235 / 0.08);
  border-bottom-color: rgb(37 99 235 / 0.18);
  color: #556b8a;
}

body[data-theme="light"] .mermaid-diagram.mmd-zoomable:hover::before {
  background: rgb(37 99 235 / 0.14);
  color: #3a4f6a;
  box-shadow: inset 0 1px 0 rgba(37 99 235 / 0.16), 
              0 0 16px rgba(37, 99, 235, 0.06);
}

/* ===== /MAXOUT: sig-diagrams ===== */

/* ===== MAXOUT: sig-plotter ===== */

/* Curve color palette - cycle through 6 distinct accent tones for multi-curve clarity */
.plot-curve:nth-of-type(1) { stroke: #5EA9FF; filter: drop-shadow(0 0 4px rgb(94 169 255 / 0.75)); }
.plot-curve:nth-of-type(2) { stroke: #74c69a; filter: drop-shadow(0 0 4px rgb(116 198 154 / 0.65)); }
.plot-curve:nth-of-type(3) { stroke: #d6a85f; filter: drop-shadow(0 0 4px rgb(214 168 95 / 0.60)); }
.plot-curve:nth-of-type(4) { stroke: #e5707a; filter: drop-shadow(0 0 4px rgb(229 112 122 / 0.65)); }
.plot-curve:nth-of-type(5) { stroke: #c6a4ff; filter: drop-shadow(0 0 4px rgb(198 164 255 / 0.65)); }
.plot-curve:nth-of-type(6) { stroke: #64d5ff; filter: drop-shadow(0 0 4px rgb(100 213 255 / 0.70)); }

/* Staggered draw-in animation per curve - snappier spring feel */
.plot-curve:nth-of-type(1) { animation: plot-draw 1.0s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.plot-curve:nth-of-type(2) { animation: plot-draw 1.1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.08s forwards; }
.plot-curve:nth-of-type(3) { animation: plot-draw 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) 0.16s forwards; }
.plot-curve:nth-of-type(4) { animation: plot-draw 1.3s cubic-bezier(0.34, 1.56, 0.64, 1) 0.24s forwards; }
.plot-curve:nth-of-type(5) { animation: plot-draw 1.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.32s forwards; }
.plot-curve:nth-of-type(6) { animation: plot-draw 1.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.40s forwards; }

@keyframes plot-draw {
  from { stroke-dashoffset: var(--dash-len, 0); opacity: 0.7; }
  to { stroke-dashoffset: 0; opacity: 1; }
}

/* Axis labels - "x" and "y" positioning */
.plot-axis-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px;
  font-weight: 500;
  fill: rgb(150 170 205 / 0.85);
  letter-spacing: 0.05em;
  pointer-events: none;
}

.plot-axis-label.x { text-anchor: middle; }
.plot-axis-label.y { text-anchor: middle; }

body[data-theme="light"] .plot-axis-label {
  fill: rgb(40 60 100 / 0.75);
}

/* Inequality fill region - subtle semi-transparent polygon */
.plot-fill {
  fill: rgb(var(--accent-rgb) / 0.08);
  stroke: none;
  pointer-events: none;
}

.plot-fill.above { fill: rgb(var(--accent-rgb) / 0.10); }
.plot-fill.below { fill: rgb(var(--accent-rgb) / 0.08); }

body[data-theme="light"] .plot-fill {
  fill: rgb(37 99 235 / 0.06);
}

body[data-theme="light"] .plot-fill.above {
  fill: rgb(37 99 235 / 0.08);
}

/* Light theme curve override */
body[data-theme="light"] .plot-curve:nth-of-type(1) { stroke: #2563EB; filter: drop-shadow(0 0 2px rgb(37 99 235 / 0.5)); }
body[data-theme="light"] .plot-curve:nth-of-type(2) { stroke: #45a962; filter: drop-shadow(0 0 2px rgb(69 169 98 / 0.4)); }
body[data-theme="light"] .plot-curve:nth-of-type(3) { stroke: #c49040; filter: drop-shadow(0 0 2px rgb(196 144 64 / 0.35)); }
body[data-theme="light"] .plot-curve:nth-of-type(4) { stroke: #dc3a4a; filter: drop-shadow(0 0 2px rgb(220 58 74 / 0.4)); }
body[data-theme="light"] .plot-curve:nth-of-type(5) { stroke: #a874e8; filter: drop-shadow(0 0 2px rgb(168 116 232 / 0.4)); }
body[data-theme="light"] .plot-curve:nth-of-type(6) { stroke: #00b8d4; filter: drop-shadow(0 0 2px rgb(0 184 212 / 0.4)); }

/* Improved hover clarity on dots */
.plot-dot {
  transition: r 0.18s ease, filter 0.18s ease;
}

.plot-dot:hover {
  r: 7;
  filter: drop-shadow(0 0 8px rgb(255 255 255 / 1));
}

/* ===== /MAXOUT: sig-plotter ===== */

/* ===== MAXOUT: sig-orb ===== */

/* Unified breathing orb core: soul of the brand */
.sig-orb {
  width: 100%; height: 100%;
  border-radius: 50%;
  position: relative;
  background: radial-gradient(circle at 35% 35%, #4ddfff 0%, #00d9ff 28%, rgba(0,217,255,0.25) 55%, transparent 85%);
  box-shadow:
    /* outer glow layer */
    0 0 40px rgba(0,217,255,0.50),
    /* mid-breath glow */
    0 0 80px rgba(0,217,255,0.28),
    /* inner core highlight */
    inset 0 0 32px rgba(255,255,255,0.22),
    /* depth shadow */
    inset 0 0 20px rgba(0,0,0,0.15);
  animation: orbBreatheCoreUnified 3.2s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}

/* Unified breathing keyframe: organic in/out respiration */
@keyframes orbBreatheCoreUnified {
  0%, 100% {
    box-shadow:
      0 0 40px rgba(0,217,255,0.50),
      0 0 80px rgba(0,217,255,0.28),
      inset 0 0 32px rgba(255,255,255,0.22),
      inset 0 0 20px rgba(0,0,0,0.15);
    filter: drop-shadow(0 0 0px rgba(0,217,255,0));
  }
  25% {
    box-shadow:
      0 0 50px rgba(0,217,255,0.62),
      0 0 100px rgba(0,217,255,0.38),
      inset 0 0 40px rgba(255,255,255,0.28),
      inset 0 0 20px rgba(0,0,0,0.15);
  }
  50% {
    box-shadow:
      0 0 68px rgba(0,217,255,0.75),
      0 0 140px rgba(0,217,255,0.50),
      inset 0 0 48px rgba(255,255,255,0.35),
      inset 0 0 20px rgba(0,0,0,0.15);
    filter: drop-shadow(0 0 8px rgba(0,217,255,0.20));
  }
  75% {
    box-shadow:
      0 0 50px rgba(0,217,255,0.62),
      0 0 100px rgba(0,217,255,0.38),
      inset 0 0 40px rgba(255,255,255,0.28),
      inset 0 0 20px rgba(0,0,0,0.15);
  }
}

/* Outer breath ring: synced depth layer */
.sig-orb::before {
  content: '';
  position: absolute;
  inset: -18px;
  border: 1.5px solid rgba(0,217,255,0.35);
  border-radius: 50%;
  animation: orbBreathRingOuter 3.2s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
  filter: drop-shadow(0 0 6px rgba(0,217,255,0.15));
}

@keyframes orbBreathRingOuter {
  0%, 100% {
    transform: scale(1) rotate(0deg);
    opacity: 0.35;
    border-color: rgba(0,217,255,0.35);
  }
  50% {
    transform: scale(1.08) rotate(45deg);
    opacity: 0.55;
    border-color: rgba(0,217,255,0.50);
  }
}

/* Inner accent ring: counter-rotation for visual depth */
.sig-orb::after {
  content: '';
  position: absolute;
  inset: -28px;
  border: 1px dashed rgba(0,217,255,0.25);
  border-radius: 50%;
  animation: orbBreathRingInner 3.2s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}

@keyframes orbBreathRingInner {
  0%, 100% {
    transform: scale(1) rotate(0deg);
    opacity: 0.25;
  }
  50% {
    transform: scale(1.04) rotate(-45deg);
    opacity: 0.40;
  }
}

/* ── Auth & Paywall logo orb replacement ── */
.auth-logo-orb-wrap {
  width: 60px;
  height: 60px;
  position: relative;
  margin: 0 auto 14px;
}

.auth-logo {
  width: 100%;
  height: 100%;
  border-radius: 14px;
  position: relative;
  z-index: 2;
  opacity: 0.95;
  mix-blend-mode: normal;
}

/* orb glow behind logo */
.auth-logo::before {
  content: '';
  position: absolute;
  inset: -8px;
  background: radial-gradient(circle at 35% 35%, #4ddfff 0%, #00d9ff 25%, rgba(0,217,255,0.2) 50%, transparent 75%);
  border-radius: 14px;
  z-index: -1;
  animation: orbBreatheCoreUnified 3.2s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
  filter: blur(8px);
}

.paywall-wrap .auth-logo {
  width: 56px;
  height: 56px;
}

.paywall-wrap .auth-logo::before {
  inset: -6px;
}

/* ── Account avatar breathing core ── */
.ac-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #00d9ff, #38bdf8);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 13px;
  color: #fff;
  flex-shrink: 0;
  text-transform: uppercase;
  box-shadow:
    0 0 20px rgba(0,217,255,0.42),
    0 0 40px rgba(0,217,255,0.22),
    inset 0 0 16px rgba(255,255,255,0.15);
  animation: orbBreatheCoreSmall 3.2s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
  position: relative;
}

@keyframes orbBreatheCoreSmall {
  0%, 100% {
    box-shadow:
      0 0 20px rgba(0,217,255,0.42),
      0 0 40px rgba(0,217,255,0.22),
      inset 0 0 16px rgba(255,255,255,0.15);
  }
  50% {
    box-shadow:
      0 0 28px rgba(0,217,255,0.55),
      0 0 56px rgba(0,217,255,0.32),
      inset 0 0 20px rgba(255,255,255,0.22);
  }
}

/* ── Message assistant avatar breathing aura ── */
.msg.assistant .msg-avatar {
  background: linear-gradient(135deg, #00d9ff, #38bdf8);
  color: white;
  box-shadow:
    0 0 24px rgba(0,217,255,0.40),
    0 0 48px rgba(0,217,255,0.20),
    inset 0 0 14px rgba(255,255,255,0.18);
  animation: orbBreatheCoreSmall 3.2s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}

/* ── Empty state icons: unified orb style ── */
.tasks-empty .empty-icon,
.mem-empty .empty-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #4ddfff 0%, #00d9ff 30%, rgba(0,217,255,0.25) 60%, transparent 80%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  margin: 0 auto 16px;
  box-shadow:
    0 0 48px rgba(0,217,255,0.45),
    0 0 96px rgba(0,217,255,0.22),
    inset 0 0 28px rgba(255,255,255,0.20);
  animation: orbBreatheCoreUnified 3.2s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
  position: relative;
}

/* Depth ring for empty-state orbs */
.tasks-empty .empty-icon::before,
.mem-empty .empty-icon::before {
  content: '';
  position: absolute;
  inset: -14px;
  border: 1.2px solid rgba(0,217,255,0.30);
  border-radius: 50%;
  animation: orbBreathRingOuter 3.2s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
  pointer-events: none;
}

/* ── Welcome mark: elevated orb treatment ── */
.welcome-mark {
  display: block;
  margin: 0 auto 22px;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  opacity: 0.98;
  position: relative;
  box-shadow:
    0 0 32px rgba(0,217,255,0.35),
    0 0 64px rgba(0,217,255,0.15);
  animation: orbBreatheCoreWelcome 3.2s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}

@keyframes orbBreatheCoreWelcome {
  0%, 100% {
    box-shadow:
      0 0 32px rgba(0,217,255,0.35),
      0 0 64px rgba(0,217,255,0.15),
      0 0 0px rgba(0,217,255,0);
  }
  50% {
    box-shadow:
      0 0 48px rgba(0,217,255,0.50),
      0 0 96px rgba(0,217,255,0.25),
      0 0 12px rgba(0,217,255,0.15);
  }
}

/* Unified entrance animation for orbs */
@keyframes orbEnter {
  from {
    opacity: 0;
    transform: scale(0.6);
    filter: blur(8px);
  }
  to {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
}

/* Apply entrance to all orbs on page load */
.auth-logo-orb-wrap,
.welcome-mark,
.desktop-exclusive-orb,
.conn-hero-orb,
.tasks-empty .empty-icon,
.mem-empty .empty-icon {
  animation-name: orbEnter, var(--breathing-anim, orbBreatheCoreUnified);
  animation-duration: 0.6s, 3.2s;
  animation-delay: 0s, 0.6s;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1), cubic-bezier(0.45, 0.05, 0.55, 0.95);
  animation-fill-mode: both;
}

/* Accessibility: respect prefers-reduced-motion for orb animations */
@media (prefers-reduced-motion: reduce) {
  .sig-orb,
  .ac-avatar,
  .msg.assistant .msg-avatar,
  .tasks-empty .empty-icon,
  .mem-empty .empty-icon,
  .welcome-mark,
  .auth-logo::before,
  .sig-orb::before,
  .sig-orb::after,
  .tasks-empty .empty-icon::before,
  .mem-empty .empty-icon::before {
    animation: none !important;
    box-shadow: 0 0 20px rgba(0,217,255,0.30) !important;
  }
}

/* ===== /MAXOUT: sig-orb ===== */

/* ===== MAXOUT: sig-send-anim ===== */

/* ── INPUT FOCUS: Gentle lift + glow entrance ── */
.composer-inner {
  transition: border-color 0.22s var(--ease-out), box-shadow 0.28s var(--ease-out), background 0.2s, transform 0.24s var(--ease-out);
}
.composer-inner:focus-within {
  transform: translateY(-2px);
  border-color: rgb(var(--accent-rgb) / 0.5);
  box-shadow: 0 6px 26px rgba(0,0,0,0.5), 0 0 0 1px rgb(var(--accent-rgb) / 0.22), 0 0 34px rgb(var(--accent-rgb) / 0.13), 0 0 1px rgb(var(--accent-rgb) / 0.08) inset;
}

/* ── SEND BUTTON: Anticipation + launch polish ── */
.send-btn {
  transition: background 0.15s var(--ease-out), transform 0.16s var(--ease-out), box-shadow 0.2s, opacity 0.15s;
  position: relative;
}

/* Enable pointer on input (pulse incoming) */
#input:not(:placeholder-shown) ~ .composer-actions .send-btn {
  filter: brightness(1.05);
}

/* Plane launch: decelerate exit, ease re-entry */
.send-btn.sending svg {
  display: block !important;
  animation: planeLaunchV2 0.5s cubic-bezier(0.2, 1, 0.3, 1) forwards;
}

@keyframes planeLaunchV2 {
  0%   { transform: translate(0, 0) scale(1) rotate(0deg); opacity: 1; }
  12%  { transform: translate(3px, -3px) scale(0.95) rotate(-5deg); opacity: 1; }
  35%  { transform: translate(18px, -18px) scale(0.7) rotate(-20deg); opacity: 0.6; }
  40%  { transform: translate(22px, -22px) scale(0.6) rotate(-25deg); opacity: 0; }
  41%  { transform: translate(-14px, 14px) scale(0.6) rotate(-25deg); opacity: 0; }
  70%  { transform: translate(-6px, 8px) scale(0.9) rotate(5deg); opacity: 1; }
  85%  { transform: translate(-2px, 2px) scale(1) rotate(1deg); opacity: 1; }
  100% { transform: translate(0, 0) scale(1) rotate(0deg); opacity: 1; }
}

/* Send ripple: more elegant bloom */
.send-btn.sending::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  border: 2px solid rgb(var(--accent-rgb) / 0.6);
  animation: sendRippleV2 0.6s cubic-bezier(0.25, 0.8, 0.3, 1) forwards;
}

@keyframes sendRippleV2 {
  0%   { transform: scale(1); opacity: 0.8; }
  30%  { opacity: 0.6; }
  100% { transform: scale(2.4); opacity: 0; }
}

/* ── TYPING INDICATOR: Glow + personality ── */
.typing {
  display: inline-flex;
  gap: 5px;
  align-items: center;
}

.typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: typingBounce 1.4s ease-in-out infinite;
  box-shadow: 0 0 6px rgb(var(--accent-rgb) / 0.4);
}

.typing span:nth-child(2) { animation-delay: 0.2s; }
.typing span:nth-child(3) { animation-delay: 0.4s; }

@keyframes typingBounce {
  0%, 60%, 100% {
    opacity: 0.4;
    transform: translateY(0) scale(0.85);
    filter: blur(0px);
  }
  30% {
    opacity: 1;
    transform: translateY(-6px) scale(1);
    filter: blur(0px);
  }
  40% {
    opacity: 1;
    transform: translateY(-3px) scale(1);
  }
}

/* ── MESSAGE REVEAL: Staggered, not simultaneous ── */
body[data-view="chat"] .view-chat .msg {
  animation: msgRevealV2 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

body[data-view="chat"] .view-chat .msg:nth-child(1) { animation-delay: 0ms; }
body[data-view="chat"] .view-chat .msg:nth-child(2) { animation-delay: 100ms; }
body[data-view="chat"] .view-chat .msg:nth-child(3) { animation-delay: 160ms; }
body[data-view="chat"] .view-chat .msg:nth-child(4) { animation-delay: 220ms; }
body[data-view="chat"] .view-chat .msg:nth-child(5) { animation-delay: 280ms; }
body[data-view="chat"] .view-chat .msg:nth-child(n+6) { animation-delay: 340ms; }

@keyframes msgRevealV2 {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.97);
    filter: blur(1px);
  }
  60% {
    opacity: 1;
    filter: blur(0);
  }
  to {
    opacity: 1;
    transform: none;
    filter: blur(0);
  }
}

/* ── MESSAGE AVATAR: Elastic bounce on arrival ── */
body[data-view="chat"] .view-chat .msg.assistant .msg-avatar.msg-avatar-orb {
  animation: avatarBounce 0.7s cubic-bezier(0.34, 1.4, 0.5, 1) both;
}

@keyframes avatarBounce {
  0%   { transform: scale(0.4); opacity: 0; }
  45%  { transform: scale(1.18); opacity: 1; }
  70%  { transform: scale(0.95); }
  100% { transform: scale(1); opacity: 1; }
}

/* ── STREAMING CURSOR: Glowing, pulsing caret ── */
.msg-content.streaming::after {
  content: "▋";
  display: inline;
  color: rgb(var(--accent-rgb));
  margin-left: 3px;
  animation: caretGlow 0.8s ease-in-out infinite;
  text-shadow: 0 0 8px rgb(var(--accent-rgb) / 0.6);
}

@keyframes caretGlow {
  0%, 100% { opacity: 0.7; filter: brightness(1); }
  50%      { opacity: 1; filter: brightness(1.3); text-shadow: 0 0 12px rgb(var(--accent-rgb) / 0.8); }
}

/* ── ORB SPIN (while the assistant is actively streaming = "working") ──
   Spin, not flash: continuous rotation under a steady glow. Sensible thinking cue. */
body[data-view="chat"] .view-chat .msg.assistant.streaming .msg-avatar.msg-avatar-orb .orb-mark {
  filter: drop-shadow(0 0 8px rgb(var(--accent-rgb) / 0.55));
  animation: orbSpin 2s linear infinite;
  transform-origin: 50% 50%;
}

/* ── ORB CALM (settled message, not streaming) ──
   No flash and no spin once the answer is done - a single constant glow. */
body[data-view="chat"] .view-chat .msg.assistant:not(.streaming) .msg-avatar.msg-avatar-orb .orb-mark {
  filter: drop-shadow(0 0 7px rgb(var(--accent-rgb) / 0.45));
  animation: none;
}

/* ── FIRST CHARACTER MICRO-DELAY ── */
.msg-content.streaming {
  animation: firstCharDelay 0.2s ease-out both;
}

@keyframes firstCharDelay {
  from { opacity: 0.92; }
  to   { opacity: 1; }
}

/* ── REDUCED MOTION SAFETY ── */
@media (prefers-reduced-motion: reduce) {
  .composer-inner,
  .send-btn,
  .send-btn.sending svg,
  .send-btn.sending::after,
  .typing span,
  .msg,
  .msg.assistant .msg-avatar.msg-avatar-orb,
  .msg-content.streaming::after,
  .msg.assistant.streaming .msg-avatar.msg-avatar-orb .orb-mark,
  .msg.assistant:not(.streaming) .msg-avatar.msg-avatar-orb .orb-mark,
  .msg-content.streaming {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}

/* ===== /MAXOUT: sig-send-anim ===== */

/* ===== MAXOUT: sig-composer ===== */
/* Enhanced microinteractions: focus state, attachment affordance, send delight, hint refinement */

/* ── Composer container: premium breathing on focus ─── */
.composer-inner {
  transition: border-color 0.22s var(--ease-out), 
              box-shadow 0.28s var(--ease-out), 
              background 0.2s var(--ease-out),
              transform 0.22s var(--ease-out);
}

.composer-inner:focus-within {
  border-color: rgb(var(--accent-rgb) / 0.60);
  box-shadow: 
    0 6px 26px rgba(0,0,0,0.5),
    0 0 0 1px rgb(var(--accent-rgb) / 0.28),
    0 0 34px rgb(var(--accent-rgb) / 0.16),
    inset 0 0 0 1px rgb(var(--accent-rgb) / 0.10);
  transform: translateY(-2px);
  background: linear-gradient(180deg, 
    rgb(var(--accent-rgb) / 0.04) 0%,
    var(--bg-elev-1) 100%);
}

/* ── Input: subtle inner glow on focus ─── */
#input {
  flex: 1;
  resize: none;
  font-size: 15px;
  line-height: 1.55;
  padding: 8px 4px;
  max-height: 220px;
  overflow-y: auto;
  transition: background 0.2s var(--ease-out);
}

#input:focus {
  background: rgb(var(--accent-rgb) / 0.025);
}

#input::placeholder {
  color: var(--text-dim);
  letter-spacing: 0.005em;
}

/* ── Send button: premium hero glow ─── */
.send-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--accent-blue);
  color: #fff;
  display: grid;
  place-items: center;
  position: relative;
  box-shadow: 
    0 4px 14px rgb(var(--accent-rgb) / 0.45),
    0 0 18px rgb(var(--accent-rgb) / 0.30);
  transition: 
    background 0.15s var(--ease-out),
    transform 0.16s var(--ease-out),
    box-shadow 0.2s var(--ease-out),
    opacity 0.15s var(--ease-out);
  flex-shrink: 0;
}

.send-btn svg {
  width: 18px;
  height: 18px;
  margin-left: 1px;
  transition: transform 0.16s var(--ease-out);
}

.send-btn:hover:not(:disabled) {
  background: rgb(var(--accent-rgb));
  transform: scale(1.09) translateY(-1px);
  box-shadow: 
    0 6px 20px rgb(var(--accent-rgb) / 0.65),
    0 0 32px rgb(var(--accent-rgb) / 0.55),
    inset 0 0 0 1px rgb(255,255,255,0.20);
}

.send-btn:active:not(:disabled) {
  transform: scale(0.95);
}

.send-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
  background: var(--accent-blue);
  box-shadow: none;
}

/* ── Send animation: constellation-like ripple burst ─── */
.send-btn.sending svg {
  display: block !important;
  animation: plane-launch 0.5s var(--ease-out);
}

.send-btn.sending::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  border: 2px solid rgb(var(--accent-rgb) / 0.6);
  animation: send-ripple 0.55s var(--ease-out) forwards;
}

@keyframes plane-launch {
  0%   { transform: translate(0, 0) scale(1); opacity: 1; }
  40%  { transform: translate(17px, -17px) scale(0.78); opacity: 0; }
  41%  { transform: translate(-13px, 13px) scale(0.78); opacity: 0; }
  100% { transform: translate(0, 0) scale(1); opacity: 1; }
}

@keyframes send-ripple {
  0%   { transform: scale(1); opacity: 0.7; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* ── Voice button: quiet, alive on record ─── */
#voice-btn {
  transition: all 0.15s var(--ease-out);
}

#voice-btn:hover:not(.active) {
  background: rgb(var(--accent-rgb) / 0.12);
  color: var(--accent);
}

#voice-btn.active {
  background: rgba(223, 107, 115, 0.15);
  color: var(--danger);
  animation: pulse 1.2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(223, 107, 115, 0.4); }
  50% { box-shadow: 0 0 0 10px rgba(223, 107, 115, 0); }
}

/* ── Composer actions container: spacer ─── */
.composer-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-shrink: 0;
}

/* ── Hint refinement: cleaner typography + better spacing ─── */
.composer-hint {
  max-width: 784px;
  margin: 10px auto 0;
  font-size: 11px;
  color: var(--text-dim);
  display: flex;
  justify-content: center;
  gap: 14px;
  letter-spacing: 0.005em;
}

.composer-hint span {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.composer-hint kbd {
  background: rgb(var(--accent-rgb) / 0.06);
  border: 1px solid rgb(var(--accent-rgb) / 0.18);
  border-radius: 5px;
  padding: 2px 7px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: all 0.15s var(--ease-out);
  line-height: 1.3;
  display: inline-block;
  min-width: fit-content;
}

.composer-hint kbd:hover {
  background: rgb(var(--accent-rgb) / 0.10);
  border-color: rgb(var(--accent-rgb) / 0.28);
  color: var(--accent);
}

/* ── Attachment affordance: subtle paperclip hint on hover ─── */
.composer-inner::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 56px;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background: url('data:image/svg+xml;utf8,<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="rgba(94,169,255,0.25)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21.5 2v6h-6M2.5 22v-6h6M2 11.5a10 10 0 0 0 19.8-4.3M22 12.5a10 10 0 0 0-19.8 4.2"/></svg>') no-repeat center;
  background-size: contain;
  opacity: 0;
  transition: opacity 0.2s var(--ease-out);
  pointer-events: none;
}

.composer-inner:hover::before {
  opacity: 1;
}

.composer-inner:focus-within::before {
  opacity: 0.5;
}

/* ── Locked state refinement ─── */
.composer.gated .composer-inner {
  opacity: 0.7;
  filter: saturate(0.6);
}

.composer.gated #input {
  cursor: not-allowed;
}

.composer.gated .send-btn {
  pointer-events: none;
}

.composer-unlock {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-4);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #04121a;
  background: var(--grad);
  border-radius: var(--r-full);
  box-shadow: 0 0 0 1px var(--border-strong);
  cursor: pointer;
  transition: transform var(--d-fast) var(--ease-out), box-shadow var(--d-fast) var(--ease-out);
}

.composer-unlock:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgb(var(--accent-rgb) / 0.35), 0 0 0 1px var(--border-focus);
}

.composer-unlock:active {
  transform: none;
}

/* ── Focus ring suppression on textarea (glow via container) ─── */
#input:focus-visible,
#project-input:focus-visible {
  outline: none;
}

/* ── Light theme enhancements ─── */
body[data-theme="light"] .composer-inner:focus-within {
  border-color: rgb(var(--accent-rgb) / 0.55);
  box-shadow:
    0 6px 26px rgba(0,0,0,0.1),
    0 0 0 1px rgb(var(--accent-rgb) / 0.25),
    0 0 20px rgb(var(--accent-rgb) / 0.14),
    inset 0 0 0 1px rgb(var(--accent-rgb) / 0.08);
  background: linear-gradient(180deg,
    rgb(var(--accent-rgb) / 0.06) 0%,
    #ffffff 100%);
}

body[data-theme="light"] #input:focus {
  background: #ffffff;
  box-shadow: inset 0 0 0 1px rgb(var(--accent-rgb) / 0.12);
}

body[data-theme="light"] .send-btn:hover:not(:disabled) {
  box-shadow:
    0 6px 20px rgb(var(--accent-rgb) / 0.40),
    0 0 24px rgb(var(--accent-rgb) / 0.30),
    inset 0 0 0 1px rgb(255,255,255,0.25);
}

body[data-theme="light"] .composer-hint kbd {
  background: rgb(var(--accent-rgb) / 0.08);
  border-color: rgb(var(--accent-rgb) / 0.20);
  color: rgb(var(--accent-blue-rgb));
}

body[data-theme="light"] .composer-hint kbd:hover {
  background: rgb(var(--accent-rgb) / 0.12);
  border-color: rgb(var(--accent-rgb) / 0.30);
  color: var(--accent-blue);
}

/* ===== /MAXOUT: sig-composer ===== */

/* ===== MAXOUT: sig-dark-light ===== */

/* ── Toggle button knob contrast in light mode ── */
body[data-theme="light"] .toggle-btn.on .toggle-knob {
  background: #4a4e63;
  box-shadow: 0 1px 3px rgba(20, 22, 40, 0.25);
}

/* ── Toggle switch background refinement in light mode ── */
body[data-theme="light"] .toggle-btn .toggle-switch {
  background: var(--bg-elev-2);
  border: 1px solid var(--border-strong);
}

/* ── Toggle button refinement: better contrast in light ── */
body[data-theme="light"] .toggle-btn {
  background: rgba(20, 22, 40, 0.03);
}

body[data-theme="light"] .toggle-btn:hover {
  background: rgba(20, 22, 40, 0.07);
}

/* ── Input focus ring contrast in light mode ── */
body[data-theme="light"] #input:focus {
  box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / 0.15) !important;
}

/* ── General scrollbar override for light theme ── */
body[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: rgba(20, 22, 40, 0.12);
}

body[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(20, 22, 40, 0.20);
}

body[data-theme="light"] ::-webkit-scrollbar-thumb:active {
  background: rgba(20, 22, 40, 0.28);
}

body[data-theme="light"] * {
  scrollbar-color: rgba(20, 22, 40, 0.12) transparent;
}

body[data-theme="light"] *:hover {
  scrollbar-color: rgba(20, 22, 40, 0.18) transparent;
}

body[data-theme="light"] *:active {
  scrollbar-color: rgba(20, 22, 40, 0.28) transparent;
}

/* ── Message avatar ring refinement in light mode ── */
body[data-theme="light"] .msg-avatar {
  box-shadow: 0 0 0 1px var(--border-strong), 0 2px 8px rgba(40, 50, 90, 0.08);
}

/* ── Code block scrollbar in light chat ── */
body[data-theme="light"] .view-chat .msg-content pre::-webkit-scrollbar-thumb {
  background: rgba(20, 22, 40, 0.16);
}

body[data-theme="light"] .view-chat .msg-content pre::-webkit-scrollbar-thumb:hover {
  background: rgba(20, 22, 40, 0.24);
}

/* ── Palette/Command dropdown scrollbar in light mode ── */
body[data-theme="light"] .palette-list::-webkit-scrollbar-thumb {
  background: rgba(20, 22, 40, 0.14);
}

body[data-theme="light"] .palette-list::-webkit-scrollbar-thumb:hover {
  background: rgba(20, 22, 40, 0.22);
}

/* ── Model dropdown scrollbar in light mode ── */
body[data-theme="light"] .model-dropdown::-webkit-scrollbar-thumb {
  background: rgba(20, 22, 40, 0.14);
}

body[data-theme="light"] .model-dropdown::-webkit-scrollbar-thumb:hover {
  background: rgba(20, 22, 40, 0.22);
}

/* ── Aside/instructions scrollbar in light mode ── */
body[data-theme="light"] .aside-card-body::-webkit-scrollbar-thumb {
  background: rgba(20, 22, 40, 0.14);
}

body[data-theme="light"] .aside-card-body::-webkit-scrollbar-thumb:hover {
  background: rgba(20, 22, 40, 0.22);
}

/* ── Settings card scrollbar overlay in light mode ── */
body[data-theme="light"] .settings-card::-webkit-scrollbar-thumb {
  background: rgba(20, 22, 40, 0.12);
}

body[data-theme="light"] .settings-card::-webkit-scrollbar-thumb:hover {
  background: rgba(20, 22, 40, 0.20);
}

/* ── Fade masks on chat in light mode (prevent harsh edges) ── */
body[data-theme="light"] .view-chat .chat::before {
  background: linear-gradient(to bottom, var(--bg) 0%, transparent 24px);
}

body[data-theme="light"] .view-chat .chat::after {
  background: linear-gradient(to top, var(--bg) 0%, transparent 40px);
}

/* ===== /MAXOUT: sig-dark-light ===== */

/* ===== MAXOUT: HERO FX CONSTELLATION ===== */
/* Enhanced constellation density, synchronized aura glow, and premium spark/pulse feedback. */

.btn-hero::before {
  content: ""; position: absolute; inset: -3px; border-radius: 15px;
  background: radial-gradient(130% 150% at 50% 0%, rgb(var(--accent-rgb) / 0.45), transparent 62%);
  /* MAXOUT: aura intensity now syncs to constellation reveal via JS data attribute */
  opacity: var(--hero-aura-intensity, 0);
  transition: none;  /* JS drives the opacity for smooth canvas sync */
  pointer-events: none; z-index: -1;
  filter: blur(2px);
  will-change: opacity;
}

/* No other .btn-hero changes - all edits are JS-driven for frame-perfect sync */

/* ===== /MAXOUT: HERO FX CONSTELLATION ===== */

/* ===== MAXOUT: q-streaming ===== */

/* Streaming caret: faster blink, deeper accent color, subtle glow */
.msg-content.streaming::after {
  content: "▋";
  display: inline;
  color: rgb(var(--accent-blue-rgb));
  margin-left: 3px;
  animation: caretBlink 0.7s steps(2, start) infinite;
  text-shadow: 0 0 6px rgb(var(--accent-blue-rgb) / 0.4);
}
@keyframes caretBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* Typing indicator orb: SPIN faster while actively streaming (a sensible "working" cue),
   not a flash. Reuses the brand orbSpin; just a quicker period than the idle mark. */
.typing-msg-streaming .msg-avatar-orb .orb-pulse {
  animation: orbSpin 1.4s linear infinite;
  transform-origin: 50% 50%;
}

/* Code block skeleton during streaming: soft animated placeholder */
.msg-content.streaming pre::after {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(94, 169, 255, 0.05) 50%,
    transparent 100%);
  background-size: 200% 100%;
  animation: codeShimmer 1.4s ease-in-out infinite;
  border-radius: var(--r-md);
  pointer-events: none;
}
@keyframes codeShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.msg-content.streaming pre {
  position: relative;
  overflow: hidden;
}

/* Diagram skeleton: visible breathing during mermaid render */
.mermaid-diagram.mermaid-pending {
  background: linear-gradient(130% 100% at 50% 0%,
    rgba(14, 18, 28, 0.8) 0%,
    rgba(6, 7, 11, 0.8) 72%);
  border-color: rgb(94 169 255 / 0.08);
  animation: diagramBreath 1.8s ease-in-out infinite;
}
@keyframes diagramBreath {
  0%, 100% { border-color: rgb(94 169 255 / 0.08); box-shadow: inset 0 0 44px rgb(94 169 255 / 0.02); }
  50% { border-color: rgb(94 169 255 / 0.12); box-shadow: inset 0 0 44px rgb(94 169 255 / 0.06); }
}

/* Smooth inertial scroll continuation for chat (respects prefers-reduced-motion) */
.chat {
  scroll-behavior: smooth;
}

/* Message reveal: staged entrance with subtle lift */
.msg {
  animation: msgRevealStream 0.36s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes msgRevealStream {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Typing indicator visual clarity: stronger dots with depth */
.typing span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgb(var(--accent-blue-rgb));
  animation: blinkStream 1.3s ease-in-out infinite;
  box-shadow: 0 0 4px rgb(var(--accent-blue-rgb) / 0.3);
}
.typing span:nth-child(1) { animation-delay: 0s; }
.typing span:nth-child(2) { animation-delay: 0.15s; }
.typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes blinkStream {
  0%, 100% { opacity: 1; transform: translateY(0); }
  50% { opacity: 0.4; transform: translateY(-4px); }
}

/* Streaming message container: subtle highlight during active stream */
.msg.assistant.streaming {
  position: relative;
}
.msg.assistant.streaming::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: linear-gradient(135deg,
    rgba(94, 169, 255, 0.03) 0%,
    rgba(94, 169, 255, 0.01) 50%,
    rgba(94, 169, 255, 0.03) 100%);
  animation: streamGlow 2s ease-in-out infinite;
  pointer-events: none;
  opacity: 0;
}
@keyframes streamGlow {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}

/* Code block: prevent content shift during streaming by reserving width */
.msg-content pre code {
  display: block;
  word-break: break-word;
  white-space: pre-wrap;
}

/* Markdown stability: constrain line-height and prevent reflow jank */
.msg-content {
  /* Ensure stable line metrics during incremental markdown parse */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.msg-content p {
  /* Reduce margin collapse during streaming append */
  display: flow-root;
}

/* Composer scroll-ready hint: indicate new content arriving */
.composer.stream-active {
  border-top-color: rgb(var(--accent-blue-rgb) / 0.3);
  transition: border-top-color 0.3s ease;
}

@media (prefers-reduced-motion: reduce) {
  .msg-content.streaming::after,
  .typing span,
  .mermaid-diagram.mermaid-pending,
  .msg.assistant.streaming::after {
    animation: none !important;
  }
  .msg-content.streaming::after { opacity: 1; text-shadow: none; }
}

/* ===== /MAXOUT: q-streaming ===== */

/* ===== MAXOUT: sig-onboarding ===== */
/* Elevated welcome first-run with the missing orb + premium visual hierarchy */

.welcome {
  /* keep in sync with the base rule (~line 422): hero sits toward the TOP */
  margin: 2vh auto auto;
  max-width: 660px;
  text-align: center;
  padding: 48px 24px 56px;
  animation: fadeIn 0.5s ease;
  position: relative;
}

/* Reactor orb - the ONE persistent glow element, proximity-driven */
.reactor {
  position: relative;
  width: 140px;
  height: 140px;
  margin: 0 auto 32px;
  display: grid;
  place-items: center;
  animation: reactorIn 0.9s cubic-bezier(0.16,1,0.3,1) both;
}

@keyframes reactorIn {
  from {
    opacity: 0;
    transform: scale(0.6) rotate(-40deg);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.reactor > * {
  position: absolute;
  border-radius: 50%;
}

.reactor-glow {
  width: 90px;
  height: 90px;
  background: radial-gradient(circle, rgb(var(--accent-rgb) / 0.55), transparent 70%);
  filter: blur(14px);
  animation: reactorPulse 2.6s ease-in-out infinite;
}

@keyframes reactorPulse {
  0%, 100% {
    opacity: 0.5;
    transform: scale(0.9);
  }
  50% {
    opacity: 1;
    transform: scale(1.12);
  }
}

.reactor-ring {
  border-style: solid;
  border-color: transparent;
}

.ring-1 {
  width: 140px;
  height: 140px;
  border-width: 2px;
  border-top-color: rgb(var(--accent-rgb));
  border-right-color: rgb(var(--accent-rgb) / 0.3);
  box-shadow: none;
  animation: spin 7s linear infinite;
}

.ring-2 {
  width: 108px;
  height: 108px;
  border-width: 1.5px;
  border-bottom-color: rgb(var(--accent-rgb));
  border-left-color: rgb(var(--accent-rgb) / 0.35);
  animation: spin 5s linear infinite reverse;
}

.ring-3 {
  width: 78px;
  height: 78px;
  border-width: 1px;
  border-top-color: rgba(255, 255, 255, 0.5);
  border-bottom-color: rgba(255, 255, 255, 0.2);
  animation: spin 3.4s linear infinite;
}

.reactor-ticks {
  width: 124px;
  height: 124px;
  background: repeating-conic-gradient(
    from 0deg,
    rgb(var(--accent-rgb) / 0.6) 0deg 0.6deg,
    transparent 0.6deg 12deg
  );
  -webkit-mask: radial-gradient(circle, transparent 56%, #000 57%, #000 62%, transparent 63%);
  mask: radial-gradient(circle, transparent 56%, #000 57%, #000 62%, transparent 63%);
  animation: spin 22s linear infinite;
  opacity: 0.7;
}

.reactor-core {
  width: 38px;
  height: 38px;
  background: radial-gradient(circle at 40% 35%, #ffffff, #7fd4ff 45%, #00a6d6 80%);
  box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.8);
  animation: corePulse 2.6s ease-in-out infinite;
}

@keyframes corePulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.8);
  }
  50% {
    transform: scale(1.08);
    box-shadow: inset 0 0 14px rgba(255, 255, 255, 1);
  }
}

.reactor-crosshair span {
  position: absolute;
  background: rgb(var(--accent-rgb) / 0.8);
  box-shadow: none;
}

.reactor-crosshair span:nth-child(1) {
  width: 2px;
  height: 12px;
  top: 6px;
  left: 69px;
}

.reactor-crosshair span:nth-child(2) {
  width: 2px;
  height: 12px;
  bottom: 6px;
  left: 69px;
}

.reactor-crosshair span:nth-child(3) {
  height: 2px;
  width: 12px;
  left: 6px;
  top: 69px;
}

.reactor-crosshair span:nth-child(4) {
  height: 2px;
  width: 12px;
  right: 6px;
  top: 69px;
}

/* Welcome mark: elevated with orb-like presence */
.welcome-mark {
  display: block;
  margin: 0 auto 24px;
  width: 60px;
  height: 60px;
  border-radius: 16px;
  opacity: 0.92;
  filter: drop-shadow(0 0 16px rgb(var(--accent-rgb) / 0.25)) drop-shadow(0 4px 12px rgba(0,0,0,0.4));
  animation: welcomeMarkPop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes welcomeMarkPop {
  from {
    opacity: 0;
    transform: scale(0.7) translateY(-8px);
  }
  to {
    opacity: 0.92;
    transform: none;
  }
}

.welcome-mark:hover {
  animation: welcomeMarkGlow 0.6s ease-in-out infinite;
}

@keyframes welcomeMarkGlow {
  0%, 100% {
    filter: drop-shadow(0 0 16px rgb(var(--accent-rgb) / 0.25)) drop-shadow(0 4px 12px rgba(0,0,0,0.4));
    transform: scale(1);
  }
  50% {
    filter: drop-shadow(0 0 24px rgb(var(--accent-rgb) / 0.4)) drop-shadow(0 6px 16px rgba(0,0,0,0.5));
    transform: scale(1.04);
  }
}

/* Title: large, confident, clean entrance */
.welcome h1 {
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  padding: 2px 0;
  margin-bottom: 12px;
  animation: titleReveal 0.65s var(--ease-out) 0.1s both;
}

@keyframes titleReveal {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.welcome .grad {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Subtitle: calm, contextual */
.welcome-sub {
  color: var(--text-muted);
  margin-bottom: 36px;
  font-size: 15px;
  animation: subtitleReveal 0.65s var(--ease-out) 0.2s both;
}

@keyframes subtitleReveal {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Suggestion cards: premium, interactive, staggered entrance */
.suggestion-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  max-width: 560px;
  margin: 40px auto 0;
}

.suggestion {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 16px 18px;
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, var(--bg-elev-1) 0%, var(--bg-elev-2) 100%);
  border: 1px solid var(--border);
  text-align: left;
  transition: all 0.2s;
  animation: suggestionReveal 0.55s var(--ease-out) both;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

@keyframes suggestionReveal {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.suggestion:nth-child(1) {
  animation-delay: 0.35s;
}

.suggestion:nth-child(2) {
  animation-delay: 0.42s;
}

.suggestion:nth-child(3) {
  animation-delay: 0.49s;
}

.suggestion:nth-child(4) {
  animation-delay: 0.56s;
}

.suggestion::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgb(var(--accent-rgb) / 0.1) 0%, transparent 100%);
  opacity: 0;
  transition: opacity 0.2s;
}

.suggestion:hover::before {
  opacity: 1;
}

.suggestion:hover {
  background: linear-gradient(135deg, var(--bg-elev-2) 0%, var(--bg-panel) 100%);
  border-color: rgb(var(--accent-rgb) / 0.3);
  transform: translateY(-3px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3), inset 0 0 20px rgb(var(--accent-rgb) / 0.05);
}

.suggestion-icon {
  font-size: 22px;
  flex-shrink: 0;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: inline-block;
}

.suggestion:hover .suggestion-icon {
  animation: iconPulse 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}

@keyframes iconPulse {
  0%, 100% {
    transform: scale(1) rotate(0deg);
  }
  50% {
    transform: scale(1.12) rotate(4deg);
  }
}

.suggestion-title {
  font-weight: 600;
  font-size: 13.5px;
  color: var(--text);
  transition: color 0.2s;
}

.suggestion:hover .suggestion-title {
  color: rgb(var(--accent-rgb));
}

.suggestion-desc {
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 3px;
  transition: color 0.2s;
}

.suggestion:hover .suggestion-desc {
  color: var(--text-muted);
}

/* Cursor-reactive interactivity */
.welcome {
  perspective: 1000px;
}

.reactor {
  transition: transform 0.18s ease-out;
  transform-style: preserve-3d;
  cursor: crosshair;
}

.reactor.boost .reactor-glow {
  opacity: 1 !important;
  transform: scale(1.35);
}

.reactor.boost .reactor-core {
  animation-duration: 1s;
}

.reactor.boost .ring-1 {
  animation-duration: 2.5s;
}

.reactor.boost .ring-2 {
  animation-duration: 1.8s;
}

.reactor.boost .ring-3 {
  animation-duration: 1.2s;
}

/* Disable CSS animation for rings (JS-driven) */
.reactor .ring-1,
.reactor .ring-2,
.reactor .ring-3,
.reactor .reactor-ticks {
  animation: none !important;
  will-change: transform;
}

/* Parallax-friendly transitions */
.welcome-title,
.welcome-sub {
  transition: transform 0.25s ease-out;
}

/* Reduced motion: disable all animations */
@media (prefers-reduced-motion: reduce) {
  .welcome,
  .welcome-mark,
  .welcome h1,
  .welcome-sub,
  .suggestion,
  .reactor {
    animation: none !important;
  }
  
  .reactor-glow,
  .reactor-core,
  .ring-1,
  .ring-2,
  .ring-3,
  .reactor-ticks {
    animation: none !important;
  }
  
  .suggestion:hover .suggestion-icon {
    animation: none !important;
  }
}

/* ===== /MAXOUT: sig-onboarding ===== */

/* ===== MAXOUT: Command Palette (⌘K) ===== */

/* Fuzzy matching: highlight matched characters in real-time */
#palette-backdrop .palette-item .match {
  color: var(--accent);
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* Category headers: separator + quiet label */
#palette-backdrop .palette-group {
  padding: 8px 12px 4px !important;
  margin-top: 6px;
  font-size: 10px !important;
  font-family: var(--font-mono) !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgb(var(--accent-rgb) / 0.55) !important;
  border-top: 1px solid rgb(var(--accent-rgb) / 0.08) !important;
}

#palette-backdrop .palette-group:first-child {
  margin-top: 0;
  border-top: none;
}

/* Item: 2-line layout with icon, label, hint, + current state badge */
#palette-backdrop .palette-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px !important;
  border-radius: var(--r-md) !important;
  font-size: 13.5px !important;
  color: var(--text) !important;
  transition: background var(--d-fast) var(--ease-out), box-shadow var(--d-fast) var(--ease-out), color var(--d-fast) var(--ease-out) !important;
  cursor: pointer;
  position: relative;
}

#palette-backdrop .palette-item:focus-visible {
  outline: none;
  background: rgb(var(--accent-rgb) / 0.14) !important;
  box-shadow: inset 2px 0 0 var(--accent) !important;
}

/* Icon column: small SVG or circle */
#palette-backdrop .palette-item .pi-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgb(var(--accent-rgb) / 0.65);
  transition: color var(--d-fast) var(--ease-out) !important;
}

#palette-backdrop .palette-item.sel .pi-icon,
#palette-backdrop .palette-item:hover .pi-icon {
  color: var(--accent);
}

/* Middle: label + hint stacked */
#palette-backdrop .palette-item .pi-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

#palette-backdrop .palette-item .pi-label {
  font-weight: 450;
  letter-spacing: -0.005em;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#palette-backdrop .palette-item .pi-sublabel {
  font-size: 11px !important;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* State badge: "current" / "enabled" / etc. */
#palette-backdrop .palette-item .pi-state {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 20px;
  padding: 2px 8px;
  border-radius: 4px;
  font-family: var(--font-sans) !important;
  font-size: 10px !important;
  letter-spacing: 0;
  text-transform: none;
  color: rgb(var(--accent-rgb) / 0.75);
  background: rgba(var(--accent-rgb), 0.08);
  border: 1px solid rgb(var(--accent-rgb) / 0.12);
  white-space: nowrap;
  transition: background var(--d-fast) var(--ease-out), border-color var(--d-fast) var(--ease-out), color var(--d-fast) var(--ease-out) !important;
}

#palette-backdrop .palette-item.sel .pi-state,
#palette-backdrop .palette-item:hover .pi-state {
  color: var(--accent);
  background: rgb(var(--accent-rgb) / 0.12);
  border-color: rgb(var(--accent-rgb) / 0.25);
}

/* Danger state: red tint */
#palette-backdrop .palette-item.pi-danger .pi-state {
  color: #e5707a;
  background: rgba(229, 112, 122, 0.08);
  border-color: rgba(229, 112, 122, 0.12);
}

#palette-backdrop .palette-item.pi-danger.sel .pi-state {
  background: rgba(229, 112, 122, 0.14);
  border-color: rgba(229, 112, 122, 0.28);
}

/* Selected state: bold accent underline + slight lift */
#palette-backdrop .palette-item.sel,
#palette-backdrop .palette-item:hover {
  background: rgb(var(--accent-rgb) / 0.10) !important;
}

#palette-backdrop .palette-item.sel {
  box-shadow: inset 2px 0 0 var(--accent), 0 2px 8px rgb(var(--accent-rgb) / 0.06) !important;
  background: rgb(var(--accent-rgb) / 0.12) !important;
}

#palette-backdrop .palette-item.sel > .pi-label { color: var(--text) !important; }
#palette-backdrop .palette-item.sel .pi-sublabel { color: var(--text-muted) !important; }

/* Smooth Tab cycling: no visual break at list edges */
#palette-backdrop .palette-list { 
  scroll-behavior: smooth;
}

/* Keyboard indicator: subtle hint for power users */
#palette-backdrop .palette-item::after {
  content: '';
  opacity: 0;
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
  transition: opacity var(--d-fast) var(--ease-out) !important;
}

#palette-backdrop .palette-item.sel::after {
  opacity: 0;
}

/* Recent/quick-access indicator */
#palette-backdrop .palette-item.pi-recent .pi-icon::before {
  content: '⭐';
  position: absolute;
  font-size: 10px;
  opacity: 0.7;
}

/* Smooth fade for empty state */
#palette-backdrop .palette-empty {
  padding: 32px 24px !important;
  font-size: 13px !important;
  color: var(--text-dim) !important;
  letter-spacing: 0;
  text-align: center;
  animation: fadeIn var(--d-slow) var(--ease-out) !important;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Scoped scrollbar: thin + accent tint */
#palette-backdrop .palette-list::-webkit-scrollbar { width: 6px; }
#palette-backdrop .palette-list::-webkit-scrollbar-track {
  background: transparent;
}
#palette-backdrop .palette-list::-webkit-scrollbar-thumb {
  background: rgb(var(--accent-rgb) / 0.14);
  border-radius: 3px;
  border: 0px solid transparent;
  background-clip: padding-box;
  transition: background var(--d-base) var(--ease-out) !important;
}
#palette-backdrop .palette-list::-webkit-scrollbar-thumb:hover {
  background: rgb(var(--accent-rgb) / 0.28);
  background-clip: padding-box;
}

/* Light theme tweaks */
body[data-theme="light"] #palette-backdrop .palette-group {
  color: rgb(37, 99, 235 / 0.5) !important;
  border-top-color: rgb(37, 99, 235 / 0.08) !important;
}

body[data-theme="light"] #palette-backdrop .palette-item .pi-icon {
  color: rgb(37, 99, 235 / 0.6);
}

body[data-theme="light"] #palette-backdrop .palette-item.sel .pi-icon,
body[data-theme="light"] #palette-backdrop .palette-item:hover .pi-icon {
  color: rgb(37, 99, 235);
}

/* Reduced motion: respect user preference */
@media (prefers-reduced-motion: reduce) {
  #palette-backdrop .palette-item,
  #palette-backdrop .palette-list::-webkit-scrollbar-thumb {
    transition: none !important;
  }
  #palette-backdrop .palette-empty {
    animation: none !important;
  }
}

/* ===== /MAXOUT: Command Palette (⌘K) ===== */

/* ===== MAXOUT: sig-responsive ===== */
/* Tablet + intermediate breakpoints (768–1280px) for smooth reflow across all common device widths */

/* ════ 1. NEW TABLET BREAKPOINT (768–1024px) - preserve sidebar, tighten padding, reflow grids ════ */
@media (max-width: 1024px) and (min-width: 761px) {
  /* Reduce horizontal padding on main content areas for tablets in portrait or tight desktop */
  .main { padding: 16px 24px; }
  .topbar { padding: 12px 20px 12px 60px; }
  
  /* Tighten spacing on chat/project/task views */
  .view-chat { padding: 0; }
  .view-chat .chat-thread { padding: 20px 20px 60px; }
  .view-tasks .tasks-body,
  .view-memories .mem-feed { padding: 20px 20px 60px; }
  .view-projects .projects-grid,
  .view-project .project-page { padding: 20px 20px 56px; }
  
  /* Grid columns: more aggressive minmax to use space at 768–1024px */
  .skills-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; }
  .task-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
  .ap-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
  .projects-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
  
  /* Reduce card padding on tablets */
  .skill-card, .task-card, .project-card, .conn-tile { padding: 12px 14px; }
  
  /* Right-rail collapses at 1000px instead of 1080px (content area must stay ≥440px) */
  .project-page { grid-template-columns: 1fr 280px; gap: 20px; }
}

/* ════ 2. LARGE TABLET / COMPACT DESKTOP (1025–1440px) - smooth grid reflow ════ */
@media (min-width: 1025px) and (max-width: 1440px) {
  /* At wider tablets or compact desktops, relax padding slightly for breathing room */
  .topbar { gap: 12px; }
  .view-chat .chat-thread { padding: 24px 28px 60px; }
  .view-tasks .tasks-body,
  .view-memories .mem-feed { padding: 24px 28px 60px; }
  .view-projects .projects-grid { padding: 24px 28px 56px; gap: 10px; }
  .view-project .project-page { padding: 24px 28px 56px; gap: 22px; }
  
  /* Grids: optimize for 2–3 columns */
  .skills-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
  .task-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
  .ap-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
  .projects-grid { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
}

/* ════ 3. WIDE DESKTOP (>1440px) - full breathing room ════ */
@media (min-width: 1441px) {
  .topbar { padding: 14px 28px; }
  .view-chat .chat-thread { padding: 28px 32px 60px; }
  .view-tasks .tasks-body,
  .view-memories .mem-feed { padding: 28px 32px 60px; }
  .view-projects .projects-grid { padding: 28px 32px 56px; }
  .view-project .project-page { padding: 28px 32px 56px; gap: 28px; }
  
  /* Grids: 3+ columns at wide widths */
  .skills-grid { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); }
  .ap-grid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
  .projects-grid { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
}

/* ════ 4. LANDSCAPE MOBILE / SPLIT-VIEW (700–760px) ────────────────────────────── */
@media (max-width: 760px) and (min-width: 700px) {
  /* Hamburger + sidebar already off-canvas; just tighten margins slightly */
  .topbar { padding: 12px 16px 12px 56px; gap: 6px; }
  .topbar-right { gap: 6px; }
  
  /* Reduce padding on content for narrow mobile landscape */
  .view-chat .chat-thread { padding: 16px 14px 60px; }
  .view-tasks .tasks-body { padding: 16px 14px 60px; }
  
  /* Single-column grids on narrow mobile */
  .skills-grid { grid-template-columns: 1fr; }
  .task-grid { grid-template-columns: 1fr; }
  .ap-grid { grid-template-columns: 1fr; }
  .projects-grid { grid-template-columns: 1fr; }
}

/* ════ 5. COMPACT MOBILE (<700px) ────────────────────────────────────────────── */
@media (max-width: 699px) {
  .topbar { padding: 11px 12px 11px 54px; gap: 4px; row-gap: 6px; }
  .topbar-left { min-width: 0; flex-basis: 100%; }
  .topbar-right { flex-basis: 100%; gap: 4px; }
  
  .view-chat .chat-thread { padding: 12px 12px 56px; }
  .view-tasks .tasks-body { padding: 12px 12px 56px; }
  .view-memories .mem-feed { padding: 12px 12px 56px; }
  
  /* Reduce card padding further */
  .skill-card, .task-card, .project-card { padding: 11px 12px; gap: 8px; }
  .mem-atom { padding: 10px 12px; }
  
  /* Single-col grids on phone */
  .skills-grid, .task-grid, .ap-grid, .projects-grid { grid-template-columns: 1fr; gap: 8px; }
}

/* ════ 6. CONTENT AREA SAFE MINIMUMS - prevent text wrapping in sidebars ════ */
.sidebar .nav-item,
.sidebar .project-item,
.sidebar .upcoming-item {
  min-width: 0;  /* enables flex text truncation */
}

/* Ensure topbar buttons don't wrap excessively at intermediate widths */
.topbar-right button { white-space: nowrap; }
.topbar-right .badge { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Project page right-rail stays readable even when collapsed */
.aside-card { min-height: auto; overflow-y: auto; max-height: calc(100vh - 120px); }

/* ════ 7. CHAT COMPOSER REFLOW ─────────────────────────────────────────── */
@media (max-width: 600px) {
  .composer { padding: 14px 12px 10px; }
  .composer-actions { gap: 6px; }
  .send-btn { width: 36px; height: 36px; }
}

/* ════ 8. PAYWALL / PRICING GRID (already decent, fine-tune for 1024) ════ */
@media (max-width: 1024px) and (min-width: 761px) {
  .pw-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .plan-grid { grid-template-columns: 1fr; gap: 10px; }
}

/* ───────────────────────────────────────────────────────────────────── */
/* ===== /MAXOUT: sig-responsive ===== */

/* ===== MAXOUT: q-message-actions ===== */
/* Per-message action affordances: copy, regenerate, edit, share.
   Hover-revealed compact group; consistent styling; premium micro-interactions. */

.msg-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 10px;
  padding: 0;
  opacity: 0;
  transition: opacity 0.16s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}
.msg.assistant:hover .msg-actions,
.msg.user:hover .msg-actions,
.msg-actions:has(> button:focus-visible) {
  opacity: 1;
  pointer-events: auto;
}
/* The LATEST tutor reply keeps its actions visible (no hover hunt) so a stuck
   student always sees the one-tap "I'm stuck" escape hatch. */
.msg.assistant:last-of-type .msg-actions {
  opacity: 1;
  pointer-events: auto;
}

/* "I'm stuck" - the accent-tinted primary action of the row */
.msg-action-btn.msg-stuck-btn {
  color: rgb(var(--accent-rgb) / 0.92);
  border-color: rgb(var(--accent-rgb) / 0.30);
  background: rgb(var(--accent-rgb) / 0.07);
}
.msg-action-btn.msg-stuck-btn:hover {
  color: rgb(var(--accent-rgb));
  background: rgb(var(--accent-rgb) / 0.12);
  border-color: rgb(var(--accent-rgb) / 0.45);
}

/* Unified action button: icon + optional label, compact + elegant */
.msg-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 6px 10px;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: 7px;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
  flex-shrink: 0;
}
.msg-action-btn:hover {
  background: var(--bg-elev-1);
  color: var(--text);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.24);
  border-color: rgb(var(--accent-rgb) / 0.28);
}
.msg-action-btn:focus-visible {
  outline: 2px solid rgb(var(--accent-rgb) / 0.5);
  outline-offset: 2px;
}
.msg-action-btn:active {
  transform: translateY(0);
}
.msg-action-btn svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  stroke-width: 1.9;
}

/* Copy button: celebration on success */
.msg-action-btn.msg-copy-btn.copied {
  color: var(--success);
  border-color: rgba(116, 198, 154, 0.32);
  animation: msgActionCopyCelebrate 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 0 0 6px rgb(116, 198, 154, 0.18);
}
@keyframes msgActionCopyCelebrate {
  0% {
    box-shadow: 0 0 0 0 rgb(116, 198, 154, 0.6);
  }
  100% {
    box-shadow: 0 0 0 10px rgb(116, 198, 154, 0.0);
  }
}

/* Regenerate button: subtle accent pulse on hover */
.msg-action-btn.msg-regen-btn:hover {
  color: rgb(var(--accent-rgb));
  border-color: rgb(var(--accent-rgb) / 0.3);
  background: rgb(var(--accent-rgb) / 0.08);
}

/* Edit button: muted styling */
.msg-action-btn.msg-edit-btn:hover {
  color: var(--text);
}

/* Share button: accent on hover */
.msg-action-btn.msg-share-btn:hover {
  color: rgb(var(--accent-rgb));
  border-color: rgb(var(--accent-rgb) / 0.3);
  background: rgb(var(--accent-rgb) / 0.08);
}

/* Explain-differently button: accent on hover */
.msg-action-btn.msg-explain-btn:hover {
  color: rgb(var(--accent-rgb));
  border-color: rgb(var(--accent-rgb) / 0.3);
  background: rgb(var(--accent-rgb) / 0.08);
}

/* "Explain it a different way" popover menu */
.explain-menu {
  position: fixed; z-index: 4000; min-width: 210px;
  background: var(--bg-elev-1, #0f0f1a);
  border: 1px solid rgb(var(--accent-rgb) / 0.25);
  border-radius: 12px; padding: 6px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  animation: explainMenuIn 0.14s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes explainMenuIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.explain-opt {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 11px; background: none; border: none; border-radius: 8px;
  color: var(--text); font: inherit; font-size: 13px; text-align: left; cursor: pointer;
}
.explain-opt:hover { background: rgb(var(--accent-rgb) / 0.12); color: var(--hud-accent); }
.explain-opt .ex-ico { font-size: 15px; line-height: 1; }

/* ── Practice quiz (```practice block) ── */
.pq-set { border: 1px solid var(--border); border-radius: 14px; padding: 18px; margin: 14px 0; background: var(--bg-elev-2); }
.pq-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.pq-title { font-weight: 700; font-size: 15px; color: var(--text); }
.pq-counter { font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); white-space: nowrap; }
.pq-progress { height: 4px; border-radius: 4px; background: var(--bg-elev-1); overflow: hidden; margin-bottom: 16px; }
.pq-progress-fill { height: 100%; background: var(--hud-accent); transition: width .3s ease; }
.pq-q { font-size: 15px; line-height: 1.5; color: var(--text); margin-bottom: 14px; font-weight: 600; }
.pq-opts { display: flex; flex-direction: column; gap: 8px; }
.pq-opt { text-align: left; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-elev-1); color: var(--text); font: inherit; font-size: 14px; cursor: pointer; transition: all .14s ease; }
.pq-opt:hover:not(:disabled) { border-color: rgb(var(--accent-rgb) / 0.5); background: rgb(var(--accent-rgb) / 0.08); }
.pq-opt:disabled { cursor: default; opacity: 0.9; }
.pq-opt.correct { border-color: var(--success); background: rgba(116,198,154,0.14); }
.pq-opt.correct::after { content: ' ✓'; color: var(--success); font-weight: 700; }
.pq-opt.wrong { border-color: #e06363; background: rgba(224,99,99,0.12); }
.pq-opt.wrong::after { content: ' ✕'; color: #e06363; font-weight: 700; }
.pq-show { text-align: center; font-weight: 600; color: var(--hud-accent); }
.pq-answer { padding: 12px 14px; border-radius: 10px; background: rgba(116,198,154,0.12); border: 1px solid rgba(116,198,154,0.3); font-size: 14px; color: var(--text); }
.pq-hint { font-size: 12px; color: var(--text-dim); padding: 4px 2px; }
.pq-why { margin-top: 12px; padding: 11px 13px; border-radius: 10px; background: var(--bg-elev-1); border-left: 3px solid var(--hud-accent); font-size: 13px; line-height: 1.5; color: var(--text-muted); display: none; }
.pq-why.show { display: block; }
.pq-grade { display: flex; gap: 8px; margin-top: 10px; }
.pq-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 14px; }
.pq-foot .pq-next { margin-left: auto; }
.pq-back { background: transparent; border-color: var(--border); color: var(--text-dim); }
.pq-back:not(:disabled):hover { background: var(--bg-elev-1); color: var(--text); border-color: rgb(var(--accent-rgb) / 0.3); }
.pq-recall { margin-top: 8px; font-size: 12px; font-weight: 600; }
.pq-recall-got { color: var(--success); }
.pq-recall-miss { color: #e06363; }
.pq-btn { padding: 9px 18px; border-radius: 9px; border: 1px solid var(--border); background: var(--bg-elev-1); color: var(--text); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: all .14s ease; }
/* Disabled: fade the FILL, never the label. A flat 0.4 opacity on an accent-fill
   button (dark text on accent) made "Next →" dark-on-dark and illegible. Instead
   drop to a neutral muted surface with a visible border and readable muted text. */
/* opacity:1 overrides the global button:disabled{opacity:.5} that was fading the
   label into illegibility - the muted text + visible border carry the disabled cue. */
.pq-btn:disabled { cursor: default; background: var(--bg-elev-1); color: var(--text-dim); border-color: var(--border); filter: none; opacity: 1; }
.pq-next, .pq-again { background: var(--hud-accent); color: #050509; border-color: transparent; }
.pq-studyplan { background: rgb(var(--accent-rgb) / 0.14); color: var(--text); border: 1px solid rgb(var(--accent-rgb) / 0.3); margin-top: 8px; }
.pq-studyplan:hover { background: rgb(var(--accent-rgb) / 0.22); }
.pq-next:disabled, .pq-again:disabled { background: var(--bg-elev-1); color: var(--text-dim); border-color: var(--border); opacity: 1; }
.pq-next:not(:disabled):hover, .pq-again:hover { filter: brightness(1.08); }
.pq-got { background: rgba(116,198,154,0.16); border-color: rgba(116,198,154,0.4); flex: 1; }
.pq-miss { flex: 1; }
.pq-results { text-align: center; padding: 16px 8px; }
.pq-res-emoji { font-size: 44px; }
.pq-res-score { font-size: 30px; font-weight: 800; color: var(--text); margin: 8px 0 2px; }
.pq-res-sub { font-size: 13px; color: var(--text-dim); margin-bottom: 16px; }

/* ── Daily streak badge (topbar habit loop) ── */
.streak-badge { display: inline-flex; align-items: center; gap: 5px; font-weight: 700;
  color: #f5a623; border-color: rgba(245,166,35,0.35); cursor: default; }
.streak-badge .streak-flame { font-size: 13px; line-height: 1; filter: drop-shadow(0 0 4px rgba(245,166,35,0.55)); }
.streak-badge.hidden { display: none; }
.streak-badge.streak-pop { animation: streakPop 0.6s cubic-bezier(0.34,1.56,0.64,1); }
@keyframes streakPop { 0% { transform: scale(1); } 40% { transform: scale(1.28); } 100% { transform: scale(1); } }

/* ── "Out of free messages today" card (the cap-hit moment) ── */
.cap-hit { display: flex; justify-content: center; margin: 14px 0; animation: explainMenuIn 0.2s cubic-bezier(0.16,1,0.3,1); }
.cap-hit .ch-card {
  max-width: 440px; width: 100%; padding: 26px 24px; text-align: center;
  border-radius: 16px; border: 1px solid rgb(var(--accent-rgb) / 0.3);
  background: linear-gradient(160deg, rgb(var(--accent-rgb) / 0.10), var(--bg-elev-2));
}
.cap-hit .ch-glyph { font-size: 34px; line-height: 1; margin-bottom: 10px; }
.cap-hit .ch-title { font-size: 17px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.cap-hit .ch-sub { font-size: 13px; color: var(--text-muted); margin-bottom: 18px; line-height: 1.5; }
.cap-hit .ch-sub .ch-reset { color: var(--hud-accent); font-weight: 700; }
.cap-hit .ch-upgrade {
  display: inline-block; padding: 11px 24px; border-radius: 10px; border: none;
  background: var(--hud-accent); color: #050509; font-weight: 700; font-size: 14px; cursor: pointer;
  transition: filter .15s ease, transform .15s ease;
}
.cap-hit .ch-upgrade:hover { filter: brightness(1.08); transform: translateY(-1px); }
.cap-hit .ch-foot { margin-top: 12px; font-size: 12px; color: var(--text-dim); }

/* ── Study plan (```studyplan block) ── */
.sp-plan { border: 1px solid var(--border); border-radius: 14px; padding: 18px; margin: 14px 0; background: var(--bg-elev-2); }

/* Active-recall / blurting widget (```recall) */
.rc-recall { border: 1px solid var(--border); border-radius: 14px; padding: 18px; margin: 14px 0; background: var(--bg-elev-2); }
.rc-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.rc-title { font-weight: 700; font-size: 15px; color: var(--text); }
.rc-badge { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--hud-accent); background: rgb(var(--accent-rgb) / 0.10); border: 1px solid rgb(var(--accent-rgb) / 0.22); padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.rc-prompt { font-size: 13.5px; color: var(--text-muted); margin: 6px 0 12px; line-height: 1.5; }
.rc-input { width: 100%; box-sizing: border-box; min-height: 96px; resize: vertical; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-elev-1); color: var(--text); padding: 12px 14px; font: inherit; font-size: 14px; line-height: 1.5; }
.rc-input:focus { outline: none; border-color: rgb(var(--accent-rgb) / 0.5); }
.rc-input[readonly] { opacity: 0.7; }
.rc-actions { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.rc-btn { padding: 10px 16px; border-radius: 10px; font-weight: 700; font-size: 13px; cursor: pointer; border: 1px solid transparent; background: rgb(var(--accent-rgb)); color: #0b1020; transition: filter .15s, transform .1s; }
.rc-btn:hover { filter: brightness(1.08); }
.rc-btn:active { transform: translateY(1px); }
.rc-hint { font-size: 12px; color: var(--text-dim); }
.rc-recall hr { border: 0; border-top: 1px solid var(--border); margin: 16px 0 12px; }
.rc-score { font-weight: 700; font-size: 14px; color: var(--text); margin-bottom: 8px; }
.rc-bar { height: 7px; border-radius: 999px; background: var(--bg-elev-1); overflow: hidden; margin-bottom: 14px; }
.rc-bar-fill { height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--hud-accent), rgb(var(--accent-rgb))); transition: width .3s ease; }
.rc-list { display: flex; flex-direction: column; gap: 8px; }
.rc-item { display: flex; align-items: flex-start; gap: 10px; padding: 9px 11px; border-radius: 9px; border: 1px solid var(--border); background: var(--bg-elev-1); cursor: pointer; font-size: 13.5px; line-height: 1.45; color: var(--text-muted); transition: background .15s, border-color .15s, color .15s; }
.rc-item input { margin-top: 2px; flex: 0 0 auto; cursor: pointer; }
.rc-item.hit { border-color: rgb(var(--accent-rgb) / 0.4); background: rgb(var(--accent-rgb) / 0.08); color: var(--text); }
.rc-tip { font-size: 12px; color: var(--text-dim); margin-top: 12px; line-height: 1.5; }
.rc-recall.rc-aced { border-color: rgb(var(--accent-rgb) / 0.5); }

/* Timed exam widget (```exam) */
.ex-exam { border: 1px solid var(--border); border-radius: 14px; padding: 18px; margin: 14px 0; background: var(--bg-elev-2); }
.ex-start { text-align: center; padding: 10px 0 4px; }
.ex-title { font-weight: 800; font-size: 16px; color: var(--text); margin-bottom: 6px; }
.ex-meta { font-size: 13px; color: var(--text-muted); margin-bottom: 4px; }
.ex-rules { font-size: 12px; color: var(--text-dim); margin-bottom: 14px; }
.ex-btn { padding: 10px 18px; border-radius: 10px; font-weight: 700; font-size: 13px; cursor: pointer; border: 1px solid transparent; background: rgb(var(--accent-rgb)); color: #0b1020; transition: filter .15s, transform .1s; }
.ex-btn:hover { filter: brightness(1.08); }
.ex-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.ex-progress { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-dim); }
.ex-timer { font-family: var(--font-mono); font-size: 14px; font-weight: 700; color: var(--text); }
.ex-timer.ex-low { color: var(--danger); }
.ex-q { font-size: 14.5px; color: var(--text); line-height: 1.5; margin-bottom: 12px; }
.ex-opts { display: flex; flex-direction: column; gap: 8px; }
.ex-opt { text-align: left; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-elev-1); color: var(--text-muted); cursor: pointer; font-size: 13.5px; line-height: 1.45; transition: border-color .15s, background .15s, color .15s; }
.ex-opt:hover { border-color: rgb(var(--accent-rgb) / 0.4); color: var(--text); }
.ex-opt.picked { border-color: rgb(var(--accent-rgb) / 0.6); background: rgb(var(--accent-rgb) / 0.10); color: var(--text); }
.ex-free { width: 100%; box-sizing: border-box; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-elev-1); color: var(--text); padding: 10px 12px; font: inherit; font-size: 13.5px; resize: vertical; }
.ex-free:focus { outline: none; border-color: rgb(var(--accent-rgb) / 0.5); }
.ex-foot { display: flex; justify-content: flex-end; margin-top: 12px; }
.ex-results { padding-top: 4px; }
.ex-score { font-size: 22px; font-weight: 800; color: var(--text); text-align: center; }
.ex-sub { font-size: 13px; color: var(--text-muted); text-align: center; margin: 4px 0 14px; }
.ex-row { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: 9px; border: 1px solid var(--border); background: var(--bg-elev-1); margin-bottom: 7px; font-size: 13px; line-height: 1.45; color: var(--text-muted); }
.ex-row.ok .ex-mark { color: var(--success); }
.ex-row.miss { border-color: rgb(255 99 99 / 0.25); }
.ex-row.miss .ex-mark { color: var(--danger); }
.ex-mark { font-weight: 800; flex: 0 0 auto; }
.ex-plan { margin-top: 10px; background: rgb(var(--accent-rgb) / 0.14); color: var(--text); border: 1px solid rgb(var(--accent-rgb) / 0.3); }

/* Socratic hint ladder (```hints) */
.hl-hints { border: 1px solid var(--border); border-radius: 14px; padding: 18px; margin: 14px 0; background: var(--bg-elev-2); }
.hl-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.hl-title { font-weight: 700; font-size: 15px; color: var(--text); }
.hl-badge { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--hud-accent); background: rgb(var(--accent-rgb) / 0.10); border: 1px solid rgb(var(--accent-rgb) / 0.22); padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.hl-q { font-size: 14.5px; color: var(--text); line-height: 1.5; margin-bottom: 12px; }
.hl-slots { display: flex; flex-direction: column; gap: 8px; }
.hl-hint { display: flex; gap: 10px; padding: 10px 12px; border-radius: 10px; border: 1px solid rgb(var(--accent-rgb) / 0.18); background: rgb(var(--accent-rgb) / 0.06); animation: fadeIn .25s ease; }
.hl-hint-n { font-size: 11px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--hud-accent); flex: 0 0 auto; padding-top: 1px; }
.hl-hint-tx { font-size: 13.5px; color: var(--text); line-height: 1.5; }
.hl-actions { display: flex; align-items: center; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.hl-btn { padding: 9px 15px; border-radius: 10px; font-weight: 700; font-size: 13px; cursor: pointer; border: 1px solid transparent; transition: filter .15s, transform .1s, opacity .15s; }
.hl-hint-btn { background: rgb(var(--accent-rgb)); color: #0b1020; }
.hl-hint-btn:hover { filter: brightness(1.08); }
.hl-ans-btn { background: transparent; color: var(--text-muted); border-color: var(--border); }
.hl-ans-btn:not(:disabled):hover { background: var(--bg-elev-1); color: var(--text); }
.hl-ans-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.hl-count { font-size: 12px; color: var(--text-dim); }
.hl-answer { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; padding: 12px 14px; border-radius: 10px; border: 1px solid rgb(var(--accent-rgb) / 0.35); background: rgb(var(--accent-rgb) / 0.10); animation: fadeIn .25s ease; }
.hl-answer-lab { font-size: 11px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--hud-accent); flex: 0 0 auto; padding-top: 2px; }
.hl-answer-tx { font-size: 14px; color: var(--text); line-height: 1.5; }
.sp-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.sp-title { font-weight: 700; font-size: 15px; color: var(--text); }
.sp-counter { font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); white-space: nowrap; }
.sp-progress { height: 4px; border-radius: 4px; background: var(--bg-elev-1); overflow: hidden; margin-bottom: 14px; }
.sp-progress-fill { height: 100%; background: var(--hud-accent); transition: width .3s ease; }
.sp-day { margin-bottom: 14px; }
.sp-day:last-of-type { margin-bottom: 0; }
.sp-day-head { font-weight: 700; font-size: 13px; color: var(--hud-accent); margin-bottom: 7px; text-transform: uppercase; letter-spacing: 0.03em; }
.sp-task { display: flex; align-items: flex-start; gap: 9px; padding: 6px 0; font-size: 14px; color: var(--text); cursor: pointer; line-height: 1.45; }
.sp-task input { margin-top: 2px; width: 16px; height: 16px; accent-color: var(--hud-accent); cursor: pointer; flex: none; }
.sp-task.checked span { text-decoration: line-through; color: var(--text-dim); }
.sp-cheer { display: none; margin-top: 14px; padding: 10px; text-align: center; font-weight: 700; color: var(--success); background: rgba(116,198,154,0.12); border-radius: 10px; }
.sp-complete .sp-cheer { display: block; }

/* ── Referral card (Settings → Billing) ── */
.referral-row .referral-block { width: 100%; }
.referral-link-wrap { display: flex; gap: 8px; margin-top: 10px; }
.referral-link-wrap input {
  flex: 1; min-width: 0; padding: 9px 12px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--bg-elev-1);
  color: var(--text); font-family: var(--font-mono); font-size: 12px;
}
.referral-link-wrap .ghost-btn { flex: none; }
.referral-link-wrap .ghost-btn.copied { color: var(--success); border-color: rgba(116,198,154,0.4); }
#referral-count { color: var(--hud-accent); font-weight: 600; }

/* ── Welcome "your progress" strip ── */
.welcome-progress { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 4px 0 18px; }
/* Per-class assignment completion bar (Classes view cards) */
.pc-progress { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.pc-progress-bar { flex: 1; height: 4px; border-radius: 999px; background: var(--bg-elev-2); overflow: hidden; }
.pc-progress-fill { height: 100%; border-radius: 999px; background: rgb(var(--accent-rgb) / 0.75); transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.pc-progress-fill.complete { background: var(--success, #74c69a); }
.pc-progress-label { font-family: var(--font-mono); font-size: 10px; font-weight: 600; color: var(--text-muted); min-width: 30px; text-align: right; }

/* "Your mastery" strip above the class grid */
.mastery-strip { margin: 0 0 18px; }
.mastery-strip .ms-head { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 10px; }
.mastery-strip .ms-sub { font-size: 11px; font-weight: 500; color: var(--text-muted); margin-left: 6px; }
.mastery-strip .ms-row { display: flex; gap: 8px; flex-wrap: wrap; }
.ms-chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px;
  background: var(--bg-elev-1); border: 1px solid var(--border); cursor: pointer;
  transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1); }
.ms-chip:hover { transform: translateY(-1px); border-color: rgb(var(--accent-rgb) / 0.4); }
.ms-chip .ms-topic { font-size: 12px; font-weight: 600; color: var(--text); max-width: 140px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-chip .ms-bar { width: 44px; height: 4px; border-radius: 999px; background: var(--bg-elev-2); overflow: hidden; }
.ms-chip .ms-fill { display: block; height: 100%; border-radius: 999px; }
.ms-chip .ms-pct { font-family: var(--font-mono); font-size: 10px; font-weight: 600; color: var(--text-muted); }
.ms-chip.strong .ms-fill { background: var(--success, #74c69a); }
.ms-chip.mid .ms-fill { background: #e8b94d; }
.ms-chip.weak .ms-fill { background: #ff8a8a; }
.ms-chip.weak { border-color: rgba(255, 138, 138, 0.35); }

/* "Pick up where you left off" - one-tap resume card above the suggestions */
.welcome-continue {
  display: flex; align-items: center; gap: 12px; width: 100%;
  margin: 0 0 14px; padding: 13px 16px;
  background: rgb(var(--accent-rgb) / 0.06);
  border: 1px solid rgb(var(--accent-rgb) / 0.22);
  border-radius: var(--r-lg); cursor: pointer; text-align: left;
  transition: all 0.16s cubic-bezier(0.16, 1, 0.3, 1);
  animation: fadeUp 0.55s var(--ease-out) 0.22s both;
}
.welcome-continue:hover { background: rgb(var(--accent-rgb) / 0.11); border-color: rgb(var(--accent-rgb) / 0.4); transform: translateY(-1px); }
.welcome-continue .wc-ico { flex-shrink: 0; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; background: rgb(var(--accent-rgb) / 0.12); color: rgb(var(--accent-rgb)); }
.welcome-continue .wc-ico svg { width: 15px; height: 15px; }
.welcome-continue .wc-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.welcome-continue .wc-label { font-family: var(--font-mono); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }
.welcome-continue .wc-title { font-size: 14px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.welcome-continue .wc-proj { flex-shrink: 0; font-size: 11px; color: var(--text-muted); border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px; }
@media (prefers-reduced-motion: reduce) { .welcome-continue { animation: none; } }

.wp-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--bg-elev-2); color: var(--text-muted); font-size: 12px; font-weight: 600; }
.wp-pill .wp-ico { font-size: 13px; line-height: 1; }
.wp-action { cursor: pointer; color: var(--hud-accent); border-color: rgb(var(--accent-rgb) / 0.4); }
.wp-action:hover { background: rgb(var(--accent-rgb) / 0.12); }
/* Streak at risk: warm ember pulse until they study today */
.wp-pill.wp-risk { color: #ffb86b; border-color: rgba(255, 153, 77, 0.45); background: rgba(255, 153, 77, 0.08); animation: wpRiskPulse 2.4s ease-in-out infinite; }
.wp-pill.wp-risk:hover { background: rgba(255, 153, 77, 0.16); }
@keyframes wpRiskPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 153, 77, 0); } 50% { box-shadow: 0 0 0 5px rgba(255, 153, 77, 0.12); } }
@media (prefers-reduced-motion: reduce) { .wp-pill.wp-risk { animation: none; } }
/* Due-soon chip; "urgent" = due today */
.wp-pill.wp-due { color: var(--text); border-color: var(--border); }
.wp-pill.wp-due.urgent { color: #ff8a8a; border-color: rgba(255, 107, 107, 0.45); background: rgba(255, 107, 107, 0.08); }
.wp-pill.wp-due.urgent:hover { background: rgba(255, 107, 107, 0.15); }
.wp-fz { color: #7fc8ff; font-weight: 700; }

/* ── Annual-savings banner (bottom, dismissible) ── */
.annual-banner {
  position: fixed; left: 50%; top: 14px; transform: translate(-50%, -16px);
  display: flex; align-items: center; gap: 14px; z-index: 900;
  max-width: 92%; padding: 11px 14px 11px 18px; border-radius: 12px;
  background: linear-gradient(120deg, rgb(var(--accent-rgb) / 0.16), var(--bg-elev-1));
  border: 1px solid rgb(var(--accent-rgb) / 0.35); box-shadow: 0 10px 40px rgba(0,0,0,0.4);
  opacity: 0; transition: opacity .3s ease, transform .3s cubic-bezier(0.16,1,0.3,1);
}
.annual-banner.show { opacity: 1; transform: translate(-50%, 0); }
.annual-banner .ab-text { font-size: 13px; color: var(--text); }
.annual-banner .ab-cta {
  flex: none; padding: 8px 16px; border-radius: 8px; border: none;
  background: var(--hud-accent); color: #050509; font-weight: 700; font-size: 13px; cursor: pointer;
}
.annual-banner .ab-cta:hover { filter: brightness(1.08); }
.annual-banner .ab-x { flex: none; background: none; border: none; color: var(--text-dim); font-size: 20px; line-height: 1; cursor: pointer; padding: 0 2px; }
.annual-banner .ab-x:hover { color: var(--text); }
@media (max-width: 600px) { .annual-banner { flex-wrap: wrap; top: 8px; } .annual-banner .ab-text { flex: 1 1 100%; } }

/* ── Concept mastery card (/mastery) ── */
.mastery-card { max-width: 520px; margin: 14px 0; padding: 18px 20px; border-radius: 14px; border: 1px solid var(--border); background: var(--bg-elev-2); }
.mc-h { font-weight: 700; font-size: 15px; color: var(--text); margin-bottom: 14px; }
.mc-row { display: flex; align-items: center; gap: 12px; margin-bottom: 9px; }
.mc-topic { flex: 0 0 38%; min-width: 0; font-size: 13px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-bar { flex: 1; height: 8px; border-radius: 6px; background: var(--bg-elev-1); overflow: hidden; }
.mc-fill { height: 100%; border-radius: 6px; transition: width .4s ease; }
.mc-fill.good { background: var(--success); }
.mc-fill.mid { background: #f5a623; }
.mc-fill.low { background: #e06363; }
.mc-pct { flex: 0 0 38px; text-align: right; font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }
.mc-review { margin-top: 12px; width: 100%; padding: 10px; border-radius: 9px; border: 1px solid rgb(var(--accent-rgb) / 0.4); background: rgb(var(--accent-rgb) / 0.1); color: var(--hud-accent); font-weight: 700; font-size: 13px; cursor: pointer; }
.mc-review:hover { background: rgb(var(--accent-rgb) / 0.18); }

/* ── Urgent deadline banner (top, dismissible) ── */
/* Any open modal owns the screen - the floating banners (z 950) would
   otherwise sit on top of modal content (seen: deadline banner occluding the
   Discover modal title). They come back when the modal closes. */
body:has(.modal-backdrop:not(.hidden)) .deadline-banner,
body:has(.modal-backdrop:not(.hidden)) .annual-banner { display: none; }
/* The floating banner must never block interactive UI. Hide it while the
   assignments bulk/select bar is visible (it sits in the same top band and the
   banner's z-index 950 was intercepting clicks on Select all / Complete /
   Delete), and on the connectors hero (it overlapped the hero H1 title). */
body:has(.tasks-bulkbar:not(.hidden)) .deadline-banner,
body:has(.tasks-bulkbar:not(.hidden)) .annual-banner,
body[data-view="connectors"] .deadline-banner,
body[data-view="connectors"] .annual-banner { display: none; }

.deadline-banner {
  position: fixed; left: 50%; top: 72px; transform: translate(-50%, -16px);
  display: flex; align-items: center; gap: 12px; z-index: 950;
  max-width: 92%; padding: 10px 12px 10px 16px; border-radius: 12px;
  /* SOLID: opaque surface base with the amber tint layered on top, so chat
     content can never bleed through (was a translucent single-layer gradient). */
  background: linear-gradient(120deg, rgba(245,166,35,0.16), rgba(245,166,35,0)), var(--bg-elev-3);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid rgba(245,166,35,0.4); box-shadow: 0 14px 48px rgba(0,0,0,0.6);
  opacity: 0; transition: opacity .3s ease, transform .3s cubic-bezier(0.16,1,0.3,1);
}
.deadline-banner.heavy { border-color: rgb(255 184 0 / 0.45); }
.deadline-banner.heavy .db-ico { filter: hue-rotate(-12deg); }
.deadline-banner.show { opacity: 1; transform: translate(-50%, 0); }
.deadline-banner.overdue { background: linear-gradient(120deg, rgba(224,99,99,0.18), rgba(224,99,99,0)), var(--bg-elev-3); border-color: rgba(224,99,99,0.5); }
.deadline-banner .db-ico { font-size: 16px; line-height: 1; }
.deadline-banner .db-text { font-size: 13px; color: var(--text); }
.deadline-banner .db-cta { flex: none; padding: 7px 14px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-elev-2); color: var(--text); font-weight: 700; font-size: 12px; cursor: pointer; }
.deadline-banner .db-cta:hover { background: var(--bg-elev-1); }
.deadline-banner .db-x { flex: none; background: none; border: none; color: var(--text-dim); font-size: 19px; line-height: 1; cursor: pointer; padding: 0 2px; }
.deadline-banner .db-x:hover { color: var(--text); }

/* ── 1.2.40 fixes: class rename/info, ⌘K search padding ─────────────────── */
/* Class page: pencil sits right after the title; teacher/source on its own line */
.project-header { justify-content: flex-start; gap: 14px; align-items: center; margin-bottom: 6px; }
.project-subinfo { color: var(--text-dim); font-size: 13.5px; margin: 0 0 22px; }
#edit-class-btn { flex: none; opacity: 0.55; transition: opacity .15s ease; }
#edit-class-btn:hover { opacity: 1; }
/* Edit-class modal field labels */
.field-label { display: block; font-size: 12px; color: var(--text-dim); margin-bottom: 6px; letter-spacing: 0.02em; }
/* ⌘K palette: give the input breathing room so text isn't flush to the focus ring (Img24) */
.palette-search input { padding: 6px 10px; border-radius: 8px; }
.palette-search input:focus { outline: none; }

/* ── AI Tutor modal: friendly note; hide the removed write/submit run modes ── */
#task-run-backdrop .run-modes { display: none; }
.tutor-note { display: flex; gap: 10px; align-items: flex-start; padding: 11px 13px; border-radius: 10px;
  background: linear-gradient(120deg, rgba(99,160,255,0.10), rgba(99,160,255,0)), var(--bg-elev-3);
  border: 1px solid rgba(99,160,255,0.28); margin: 4px 0 14px; }
.tutor-note .tutor-ico { width: 18px; height: 18px; flex: none; color: var(--accent); margin-top: 1px; }
.tutor-note span { font-size: 12.5px; line-height: 1.5; color: var(--text-dim); }
.tutor-note strong { color: var(--text); }

/* ── Model picker tiers (Img5): color each; the flagship looks incredible ── */
.model-option.tier-mini .name { color: #5fd4e6; }
.model-option.tier-deep .name { color: #b594ff; }
.model-option.tier-flagship .name {
  background: linear-gradient(92deg, #ffd36b, #ff96b6 42%, #8fb6ff 86%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  font-weight: 800; letter-spacing: 0.01em;
}
.model-option.flagship {
  border: 1px solid rgba(255,184,99,0.32); border-radius: 12px;
  background: linear-gradient(120deg, rgba(255,184,99,0.08), rgba(143,182,255,0.06)), var(--bg-elev-2);
}
.model-option.flagship:hover { border-color: rgba(255,184,99,0.6); box-shadow: 0 0 26px rgba(255,184,99,0.16); }
.flagship-pill {
  font-size: 9px; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px; margin-left: 8px; align-self: center;
  background: linear-gradient(90deg, #ffd36b, #ff96b6); color: #20140a;
}

/* ── Compact task cards (Img9/10): they ate huge vertical space ── */
.task-card { padding: 11px 13px 10px !important; gap: 5px !important; }
.task-card .task-title { margin: 0 !important; line-height: 1.25; }
.task-card .task-actions { margin-top: 4px !important; }
.task-card .task-desc { margin: 0 !important; }
/* Long class chips truncate instead of overflowing (Img13/Img17) */
.task-subject { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Img6: Copy / Explain differently / Share stay on one line */
.msg-actions { flex-wrap: nowrap !important; }
/* Img7: center the deadline banner over the CHAT area (right of the sidebar), not the whole window */
.deadline-banner { left: calc(50% + var(--sidebar-w, 264px) / 2); }
@media (max-width: 900px) { .deadline-banner { left: 50%; } }

/* ── AI Tutor teaching-mode picker (Img23) ── */
.tutor-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 4px 0 16px; }
.tutor-mode-btn {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 10px 12px; border-radius: 10px; cursor: pointer; text-align: left;
  background: var(--bg-elev-2); border: 1px solid var(--border); color: var(--text);
  transition: border-color .15s ease, background .15s ease;
}
.tutor-mode-btn:hover { border-color: var(--border-strong); }
.tutor-mode-btn.selected { border-color: rgb(var(--accent-rgb) / 0.7); background: rgb(var(--accent-rgb) / 0.10); }
.tutor-mode-btn .tm-emoji { font-size: 16px; line-height: 1; }
.tutor-mode-btn .tm-l { font-size: 13px; font-weight: 700; }
.tutor-mode-btn .tm-d { font-size: 11px; color: var(--text-dim); }

/* ── Focus / Pomodoro timer (```timer) ── */
.ft-timer { max-width: 360px; margin: 14px 0; padding: 22px; border-radius: 16px; text-align: center;
  border: 1px solid var(--border); background: linear-gradient(160deg, rgb(var(--accent-rgb) / 0.08), var(--bg-elev-2)); }
.ft-timer.ft-break { background: linear-gradient(160deg, rgba(116,198,154,0.1), var(--bg-elev-2)); border-color: rgba(116,198,154,0.3); }
.ft-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.ft-title { font-weight: 700; font-size: 14px; color: var(--text); }
.ft-round { font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); }
.ft-phase { font-size: 13px; font-weight: 600; color: var(--hud-accent); margin-bottom: 6px; }
.ft-timer.ft-break .ft-phase { color: var(--success); }
.ft-time { font-family: var(--font-mono); font-size: 54px; font-weight: 800; color: var(--text); line-height: 1.1; letter-spacing: -0.02em; }
.ft-bar { height: 6px; border-radius: 6px; background: var(--bg-elev-1); overflow: hidden; margin: 14px 0 16px; }
.ft-bar-fill { height: 100%; width: 0; background: var(--hud-accent); transition: width 1s linear; }
.ft-timer.ft-break .ft-bar-fill { background: var(--success); }
.ft-actions { display: flex; gap: 10px; justify-content: center; }
.ft-btn { padding: 10px 22px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-elev-1); color: var(--text); font-weight: 700; font-size: 14px; cursor: pointer; }
.ft-start { background: var(--hud-accent); color: #050509; border-color: transparent; }
.ft-start:hover { filter: brightness(1.08); }
.ft-start:disabled { opacity: 0.5; cursor: default; filter: none; }
.ft-reset:hover { background: var(--bg-elev-2); }
.ft-timer.ft-done .ft-time { color: var(--success); }

/* ── Achievements badge grid (/badges) ── */
.badges-card { max-width: 540px; margin: 14px 0; padding: 18px 20px; border-radius: 14px; border: 1px solid var(--border); background: var(--bg-elev-2); }
.bg-h { font-weight: 700; font-size: 15px; color: var(--text); margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
.bg-count { font-family: var(--font-mono); font-size: 12px; color: var(--hud-accent); }
.bg-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.bg-badge { text-align: center; padding: 12px 6px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg-elev-1); opacity: 0.4; filter: grayscale(1); transition: all .15s ease; }
.bg-badge.earned { opacity: 1; filter: none; border-color: rgb(var(--accent-rgb) / 0.3); background: rgb(var(--accent-rgb) / 0.07); }
.bg-ico { font-size: 26px; line-height: 1; }
.bg-lab { font-size: 11px; color: var(--text-muted); margin-top: 5px; font-weight: 600; }
.bg-badge.earned .bg-lab { color: var(--text); }
@media (max-width: 520px) { .bg-grid { grid-template-columns: repeat(3, 1fr); } }

/* Icon-only variant for compact display (no text label) */
.msg-action-btn.icon-only {
  padding: 6px;
  width: 28px;
  height: 28px;
}
.msg-action-btn.icon-only svg {
  width: 13px;
  height: 13px;
}

/* Responsive: collapse to icon-only on small screens */
@media (max-width: 640px) {
  .msg-action-btn span {
    display: none;
  }
  .msg-action-btn {
    padding: 6px;
    width: 28px;
    height: 28px;
  }
  .msg-action-btn svg {
    width: 13px;
    height: 13px;
  }
  .msg-actions {
    gap: 2px;
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .msg-actions,
  .msg-action-btn,
  .msg-action-btn.msg-copy-btn.copied {
    animation: none !important;
    transition: none !important;
  }
}

/* ===== /MAXOUT: q-message-actions ===== */

/* ===== MAXOUT: Q-TABLES (markdown tables in chat) ===== */

/* Table wrapper: container for horizontal overflow with sticky header support */
body[data-view="chat"] .view-chat .msg-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.8em 0;
  font-size: 13.5px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow-x: auto;   /* wide tables scroll; hidden CLIPPED the right columns */
  display: block;
}

/* Thead: sticky on vertical scroll, always visible at top of overflow */
body[data-view="chat"] .view-chat .msg-content thead {
  /* default table-header-group semantics: thead and tbody must share ONE
     column algorithm or the header cells drift out of line with the body */
  position: sticky;
  top: 0;
  z-index: 2;
}

/* Tbody keeps default semantics (see thead note) */

/* Table cells: premium spacing + zebra striping */
body[data-view="chat"] .view-chat .msg-content th,
body[data-view="chat"] .view-chat .msg-content td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

/* Header cells: bold, clear accent tint, stronger presence */
body[data-view="chat"] .view-chat .msg-content th {
  background: rgb(var(--accent-rgb) / 0.08);
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.002em;
  border-bottom: 1.5px solid rgb(var(--accent-rgb) / 0.25);
}

/* Zebra striping: alternating row backgrounds for legibility on dense tables */
body[data-view="chat"] .view-chat .msg-content tbody tr:nth-child(odd) {
  background: rgba(255, 255, 255, 0.02);
}

body[data-view="chat"] .view-chat .msg-content tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.01);
}

/* Row hover: subtle accent tint + slight lift for interactive feel */
body[data-view="chat"] .view-chat .msg-content tbody tr:hover {
  background: rgb(var(--accent-rgb) / 0.06);
  transition: background var(--d-fast) var(--ease-out);
}

/* No border on last row (cleaner bottom) */
body[data-view="chat"] .view-chat .msg-content tr:last-child td {
  border-bottom: none;
}

/* Numeric columns: right-align (currency, counts, metrics) */
body[data-view="chat"] .view-chat .msg-content td.num,
body[data-view="chat"] .view-chat .msg-content th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* Light theme: invert zebra + header colors for white surface */
body[data-theme="light"] .view-chat .msg-content th {
  background: rgb(var(--accent-blue-rgb) / 0.08);
  border-bottom-color: rgb(var(--accent-blue-rgb) / 0.28);
}

body[data-theme="light"] .view-chat .msg-content tbody tr:nth-child(odd) {
  background: rgba(20, 22, 40, 0.01);
}

body[data-theme="light"] .view-chat .msg-content tbody tr:nth-child(even) {
  background: rgba(20, 22, 40, 0.015);
}

body[data-theme="light"] .view-chat .msg-content tbody tr:hover {
  background: rgb(var(--accent-blue-rgb) / 0.06);
}

/* Reduced motion: no hover transition */
@media (prefers-reduced-motion: reduce) {
  body[data-view="chat"] .view-chat .msg-content tbody tr:hover {
    transition: none;
  }
}

/* ===== /MAXOUT: Q-TABLES ===== */

/* ===== MAXOUT: CODE BLOCKS (cb-wrap) ===== */
/* Elevated code block presentation: language pill with accent, interactive header,
   line numbers, subtle scroll hint, premium copy/select interactions. Syntax theme
   unified with Auron accent palette (light-blue + deep-blue). */

/* Code block container: hover lift + accent border glow */
body[data-view="chat"] .view-chat .msg-content .cb-wrap {
  margin: 0.85em 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--bg-elev-1);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--d-fast) var(--ease-out),
              box-shadow var(--d-fast) var(--ease-out),
              transform var(--d-fast) var(--ease-out);
}

body[data-view="chat"] .view-chat .msg-content .cb-wrap:hover {
  border-color: rgb(var(--accent-rgb) / 0.3);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4),
              0 0 0 1px rgb(var(--accent-rgb) / 0.15);
  transform: translateY(-1px);
}

/* Header: improved spacing, language pill design */
body[data-view="chat"] .view-chat .msg-content .cb-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: rgb(var(--accent-rgb) / 0.04);
  border-bottom: 1px solid var(--border);
  gap: 12px;
}

/* Language label: pill-styled with accent background + text */
body[data-view="chat"] .view-chat .msg-content .cb-lang {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgb(var(--accent-rgb) / 0.12);
  padding: 3px 8px;
  border-radius: 4px;
  flex-shrink: 0;
}

/* Copy + Select buttons container */
body[data-view="chat"] .view-chat .msg-content .cb-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* Shared button style for copy/select */
body[data-view="chat"] .view-chat .msg-content .cb-copy,
body[data-view="chat"] .view-chat .msg-content .cb-select {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 4px 8px;
  cursor: pointer;
  transition: all var(--d-fast) var(--ease-out);
}

body[data-view="chat"] .view-chat .msg-content .cb-copy:hover,
body[data-view="chat"] .view-chat .msg-content .cb-select:hover {
  color: var(--accent);
  border-color: rgb(var(--accent-rgb) / 0.4);
  background: rgb(var(--accent-rgb) / 0.08);
  transform: translateY(-1px);
}

body[data-view="chat"] .view-chat .msg-content .cb-copy svg,
body[data-view="chat"] .view-chat .msg-content .cb-select svg {
  width: 13px;
  height: 13px;
  stroke-width: 2.1;
  opacity: 1;
  flex-shrink: 0;
}

/* Copy button: success state */
body[data-view="chat"] .view-chat .msg-content .cb-copy.copied {
  color: var(--success);
  border-color: rgb(116 198 154 / 0.4);
  background: rgb(116 198 154 / 0.08);
}

body[data-view="chat"] .view-chat .msg-content .cb-copy.copied svg {
  stroke: var(--success);
}

/* Code block body: line numbers + soft scroll hint */
body[data-view="chat"] .view-chat .msg-content .cb-wrap pre {
  margin: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: var(--bg-elev-1) !important;
  padding: 14px 16px !important;
  overflow-x: auto;
  overflow-y: auto;
  max-height: 600px;
  position: relative;
  /* Soft right-edge gradient fade (scroll hint on long lines) */
  background: linear-gradient(
    90deg,
    var(--bg-elev-1) 0%,
    var(--bg-elev-1) calc(100% - 24px),
    rgba(0, 0, 0, 0.2) 100%
  ) !important;
}

body[data-view="chat"] .view-chat .msg-content .cb-wrap pre code {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.6;
  background: none;
  border: none;
  padding: 0;
  /* Line numbers via ::before on each line (requires JS to add data-line) */
  counter-reset: line;
}

body[data-view="chat"] .view-chat .msg-content .cb-wrap.show-lines pre code {
  display: block;
  padding-left: 2.5em;
}

body[data-view="chat"] .view-chat .msg-content .cb-wrap.show-lines pre code > span {
  display: block;
  position: relative;
  padding-left: 0;
}

body[data-view="chat"] .view-chat .msg-content .cb-wrap.show-lines pre code > span::before {
  content: counter(line);
  counter-increment: line;
  position: absolute;
  left: -2.5em;
  width: 2em;
  text-align: right;
  color: var(--text-dim);
  user-select: none;
  opacity: 0.6;
}

/* Bare <pre> fallback (plain text without decoration) */
body[data-view="chat"] .view-chat .msg-content pre:not(.cb-wrap pre) {
  background: var(--bg-elev-1) !important;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  padding: 14px 16px !important;
  box-shadow: var(--shadow-sm);
}

/* Light theme overrides */
body[data-theme="light"][data-view="chat"] .view-chat .msg-content .cb-wrap,
body[data-theme="light"][data-view="chat"] .view-chat .msg-content .cb-wrap pre {
  background: var(--bg-elev-2) !important;
}

body[data-theme="light"][data-view="chat"] .view-chat .msg-content .cb-wrap.show-lines pre {
  background: linear-gradient(
    90deg,
    var(--bg-elev-2) 0%,
    var(--bg-elev-2) calc(100% - 24px),
    rgba(0, 0, 0, 0.1) 100%
  ) !important;
}

body[data-theme="light"][data-view="chat"] .view-chat .msg-content pre:not(.cb-wrap pre) {
  background: var(--bg-elev-2) !important;
}

/* Syntax highlighting theme: Auron accent palette (light-blue + deep-blue primary) */
.hljs { color: #b3bac6; background: var(--bg-elev-1); }
.hljs-comment, .hljs-quote { color: #6c7480; font-style: italic; }
.hljs-keyword, .hljs-selector-tag, .hljs-literal { color: rgb(var(--accent-blue-rgb)); }
.hljs-number, .hljs-attr, .hljs-variable, .hljs-template-variable { color: #d6a85f; }
.hljs-string, .hljs-title, .hljs-section, .hljs-addition { color: rgb(var(--accent-rgb)); }
.hljs-name, .hljs-selector-class, .hljs-selector-id { color: #e06c75; }
.hljs-attr, .hljs-selector-attr { color: #98c379; }
.hljs-type, .hljs-class { color: rgb(var(--accent-blue-rgb)); }
.hljs-emphasis { font-style: italic; }
.hljs-strong { font-weight: 700; }

/* ===== /MAXOUT: CODE BLOCKS (cb-wrap) ===== */

/* ===== MAXOUT: q-autopilot-flow ===== */

/* PICKER MODAL: Stronger visual safeguard on the beta warning */
.ap-warn {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 14px;
  padding: 12px 13px;
  background: linear-gradient(135deg, rgba(214,168,95,0.08), rgba(214,168,95,0.04));
  border: 1.2px solid rgb(214,168,95,0.35);
  border-radius: 12px;
  font-size: 12.5px;
  line-height: 1.55;
  color: #f3c77a;
  box-shadow: inset 0 1px 2px rgba(255,255,255,0.04), 0 4px 12px rgba(0,0,0,0.2);
}
.ap-warn strong {
  color: #ffd98a;
  font-weight: 700;
}
.ap-warn-ico {
  flex-shrink: 0;
  font-size: 16px;
  line-height: 1.4;
  filter: drop-shadow(0 0 4px rgba(214,168,95,0.2));
}

/* PICKER ROWS: Selection glow + accent left-edge reveal (matches dashboard cards) */
.ap-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--bg-elev-2);
  position: relative;
  overflow: hidden;
  transition: border-color var(--d-base) var(--ease-out),
              background var(--d-base) var(--ease-out),
              transform var(--d-base) var(--ease-out);
}
.ap-row::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 2px;
  border-radius: 2px;
  background: rgb(var(--accent-rgb));
  opacity: 0;
  transform: scaleY(0.3);
  transform-origin: center;
  transition: opacity var(--d-base) var(--ease-out), transform var(--d-base) var(--ease-out);
}
.ap-row:hover {
  border-color: var(--border-strong);
  background: linear-gradient(90deg, rgb(var(--accent-rgb) / 0.04) 0%, var(--bg-elev-2) 40%);
}
.ap-row.on {
  border-color: rgb(var(--accent-rgb) / 0.6);
  background: linear-gradient(90deg, rgb(var(--accent-rgb) / 0.12) 0%, rgb(var(--accent-rgb) / 0.04) 30%, var(--bg-elev-2) 60%);
  box-shadow: inset 0 0 0 1px rgb(var(--accent-rgb) / 0.2), 0 0 12px rgb(var(--accent-rgb) / 0.08);
}
.ap-row.on::before {
  opacity: 0.9;
  transform: scaleY(1);
}
.ap-row:active {
  transform: scale(0.992);
}

/* LIVE STATUS NARRATION: Smooth transitions for step progression */
.ap-msg-status {
  animation: ap-status-fade-in var(--d-base) var(--ease-out);
}
@keyframes ap-status-fade-in {
  from { opacity: 0.7; transform: translateY(2px); }
  to { opacity: 1; transform: translateY(0); }
}

/* STOP BAR: Elevated presence with accent aura + glow */
.ap-stopbar {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 9500;
  display: none;
  align-items: center;
  gap: 11px;
  background: var(--bg-elev-1);
  border: 1.2px solid rgba(223,107,115,0.5);
  border-radius: 14px;
  padding: 10px 12px 10px 14px;
  box-shadow: 0 14px 44px rgba(0,0,0,0.5), 0 0 16px rgba(223,107,115,0.15);
  backdrop-filter: blur(8px);
}
.ap-stopbar.show {
  display: flex;
  animation: ap-stopbar-enter var(--d-base) var(--ease-out);
}
@keyframes ap-stopbar-enter {
  from { opacity: 0; transform: translateY(8px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.ap-stop-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ff6b6b;
  box-shadow: 0 0 8px rgba(255,107,107,0.6), inset 0 0 4px rgba(255,255,255,0.2);
  animation: ap-stop-pulse 1.2s cubic-bezier(0.4,0,0.6,1) infinite;
}
@keyframes ap-stop-pulse {
  0%, 100% { box-shadow: 0 0 8px rgba(255,107,107,0.6), inset 0 0 4px rgba(255,255,255,0.2); }
  50% { box-shadow: 0 0 14px rgba(255,107,107,0.8), inset 0 0 6px rgba(255,255,255,0.3); }
}
.ap-stop-label {
  font-size: 12.5px;
  color: var(--text-muted);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.ap-stop-btn {
  padding: 7px 14px;
  border-radius: 9px;
  border: 0;
  cursor: pointer;
  background: linear-gradient(135deg, #ff6b6b, #ff5252);
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  transition: filter var(--d-base), box-shadow var(--d-base), transform var(--d-base);
  box-shadow: 0 4px 12px rgba(255,107,107,0.25);
}
.ap-stop-btn:hover:not(:disabled) {
  filter: brightness(1.15);
  box-shadow: 0 6px 16px rgba(255,107,107,0.35);
  transform: translateY(-1px);
}
.ap-stop-btn:active:not(:disabled) {
  transform: translateY(0);
}
.ap-stop-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

/* EMPTY STATE: Accent-glow container + breathing animation */
.ap-empty-ico {
  color: rgb(var(--accent-rgb));
}
.ap-empty-ico svg {
  width: 38px;
  height: 38px;
  opacity: 0.9;
  filter: drop-shadow(0 0 8px rgb(var(--accent-rgb) / 0.25));
}
.ap-dash-empty .ap-empty-ico {
  margin: 0 auto 16px;
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: linear-gradient(135deg, rgb(var(--accent-rgb) / 0.10), rgb(var(--accent-rgb) / 0.04));
  border: 1.2px solid rgb(var(--accent-rgb) / 0.2);
  box-shadow: inset 0 1px 2px rgba(255,255,255,0.04), 0 0 20px rgb(var(--accent-rgb) / 0.12);
  animation: ap-empty-orbit 4s ease-in-out infinite;
}
.ap-dash-empty .ap-empty-ico svg {
  width: 32px;
  height: 32px;
  opacity: 1;
}
@keyframes ap-empty-orbit {
  0%, 100% {
    box-shadow: inset 0 1px 2px rgba(255,255,255,0.04), 0 0 20px rgb(var(--accent-rgb) / 0.12);
    border-color: rgb(var(--accent-rgb) / 0.2);
  }
  50% {
    box-shadow: inset 0 1px 3px rgba(255,255,255,0.06), 0 0 28px rgb(var(--accent-rgb) / 0.18);
    border-color: rgb(var(--accent-rgb) / 0.28);
  }
}

/* DASHBOARD CARD: Enhanced status integration + subtle motion */
.view-autopilot .ap-card {
  transition: border-color var(--d-base) var(--ease-out),
              transform var(--d-base) var(--ease-out),
              background var(--d-base) var(--ease-out),
              box-shadow var(--d-base) var(--ease-out);
}
.view-autopilot .ap-card:hover {
  box-shadow: 0 0 20px rgb(var(--accent-rgb) / 0.12), 0 10px 28px rgba(0,0,0,0.2);
}

/* BADGE: Glow integration on hover - matches card's accent reveal */
.view-autopilot .ap-badge {
  position: relative;
  transition: all var(--d-base) var(--ease-out);
}
.view-autopilot .ap-card:hover .ap-badge {
  filter: drop-shadow(0 0 6px currentColor);
}

/* STOP BUTTON in Report: Elevated styling to match stop bar */
.ap-report-actions .primary-btn {
  transition: all var(--d-base) var(--ease-out);
}
.ap-report-actions .primary-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(37,99,235,0.25);
}

/* ===== /MAXOUT: q-autopilot-flow ===== */

/* ===== MAXOUT: q-task-interactions ===== */

/* Completion animation: satisfying checkmark glow + fade */
@keyframes task-complete {
  0% {
    transform: scale(1);
    opacity: 1;
    filter: drop-shadow(0 0 0 transparent);
  }
  50% {
    transform: scale(1.08);
    opacity: 1;
    filter: drop-shadow(0 0 6px rgb(var(--accent-rgb) / 0.6));
  }
  100% {
    transform: scale(1);
    opacity: 1;
    filter: drop-shadow(0 0 0 transparent);
  }
}

/* Pulsing glow for urgent/overdue tasks */
@keyframes urgent-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgb(var(--accent-rgb) / 0.3);
  }
  50% {
    box-shadow: 0 0 0 4px rgb(var(--accent-rgb) / 0.1);
  }
}

/* Checkbox slide-in when entering select mode */
@keyframes checkbox-slide {
  from {
    opacity: 0;
    transform: scale(0.7);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Bulk bar elevation & glow on activation */
@keyframes bulkbar-glow {
  0%, 100% {
    box-shadow: 0 0 0 0 rgb(var(--accent-rgb) / 0.2);
  }
  50% {
    box-shadow: 0 0 0 6px rgb(var(--accent-rgb) / 0.08);
  }
}

/* Task card completion: fade to dim state with slight desaturate */
.task-card.completing {
  animation: task-complete 0.4s var(--ease-out) forwards;
}

/* Urgent/overdue cards now have subtle pulsing glow */
.task-card .task-due.urgent,
.task-card .task-due.overdue {
  animation: urgent-pulse 2.2s ease-in-out infinite;
  animation-delay: 0s;
}

/* Checkbox animates in smoothly when entering select mode */
.tasks-body.select-mode .task-check {
  animation: checkbox-slide 0.25s var(--ease-out) forwards;
}

/* Bulk bar gains prominent glow when active */
.tasks-bulkbar:not(.hidden) {
  animation: bulkbar-glow 2.4s ease-in-out infinite;
  box-shadow: 0 0 0 1px rgb(var(--accent-rgb) / 0.4),
              0 0 12px rgb(var(--accent-rgb) / 0.12),
              inset 0 0 0 1px rgb(var(--accent-rgb) / 0.15);
}

/* Complete button in bulk bar is now primary accent (like Autopilot) */
#bulk-complete {
  background: var(--accent-blue) !important;
  color: #fff !important;
  font-weight: 650 !important;
  border: 0 !important;
  transition: background 0.15s var(--ease-out), transform 0.13s var(--ease-out), box-shadow 0.15s;
}

#bulk-complete:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

#bulk-complete:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Task card in select mode: subtle accent glow on hover */
.tasks-body.select-mode .task-card:hover {
  border-color: rgb(var(--accent-rgb) / 0.5);
  box-shadow: 0 0 8px rgb(var(--accent-rgb) / 0.12), inset 0 0 0 1px rgb(var(--accent-rgb) / 0.2);
}

/* Selected tasks get elevated glow */
.task-card.selected {
  border-color: rgb(var(--accent-rgb) / 0.7) !important;
  background: rgb(var(--accent-rgb) / 0.10) !important;
  box-shadow: 0 0 0 1px rgb(var(--accent-rgb) / 0.5), 0 0 8px rgb(var(--accent-rgb) / 0.15) !important;
}

/* Smooth done-check button: lift on hover, glow on completion */
.task-actions .task-done-check {
  transition: color 0.15s var(--ease-out), transform 0.13s var(--ease-out), 
              border-color 0.13s var(--ease-out), filter 0.3s ease;
}

.task-actions .task-done-check:hover {
  transform: translateY(-2px);
  color: var(--text);
  border-color: rgb(var(--accent-rgb) / 0.4);
}

/* When task is done, the checkmark glows slightly */
.task-card.done .task-done-check {
  color: rgb(var(--accent-rgb) / 0.8);
  filter: drop-shadow(0 0 2px rgb(var(--accent-rgb) / 0.3));
}

/* Improved task card transitions for overall polish */
.task-card {
  transition: border-color 0.15s var(--ease-out), 
              background 0.15s var(--ease-out), 
              transform 0.15s var(--ease-out),
              box-shadow 0.15s var(--ease-out);
}

/* Bulk action buttons: improved hover feedback */
.bulk-actions .ghost-btn {
  transition: background 0.13s var(--ease-out), 
              color 0.13s var(--ease-out), 
              border-color 0.13s var(--ease-out),
              transform 0.13s var(--ease-out);
}

.bulk-actions .ghost-btn:hover:not(:disabled) {
  transform: translateY(-1px);
}

/* Urgent tasks get a subtle left accent bar hint (future drag target) */
.task-card .task-due.urgent::before,
.task-card .task-due.overdue::before {
  content: '';
  display: inline-block;
  width: 2px;
  height: 12px;
  background: currentColor;
  border-radius: 1px;
  margin-right: 6px;
  opacity: 0.6;
  animation: urgent-pulse 2.2s ease-in-out infinite;
}

/* Respect motion preferences */
@media (prefers-reduced-motion: reduce) {
  @keyframes task-complete { 0%, 100% { transform: scale(1); opacity: 1; } }
  @keyframes urgent-pulse { 0%, 100% { box-shadow: none; } }
  @keyframes checkbox-slide { from { opacity: 0; } to { opacity: 1; } }
  @keyframes bulkbar-glow { 0%, 100% { box-shadow: 0 0 0 1px rgb(var(--accent-rgb) / 0.4); } }
  
  .task-card.completing,
  .task-card .task-due.urgent,
  .task-card .task-due.overdue,
  .tasks-body.select-mode .task-check,
  .tasks-bulkbar:not(.hidden),
  .bulk-actions .ghost-btn:hover,
  .task-actions .task-done-check:hover {
    animation: none !important;
    transform: none !important;
  }
}

/* ===== /MAXOUT: q-task-interactions ===== */

/* ===== MAXOUT: connector-sync ===== */
/* Enhanced sync UX: clearer progress, better results, confident recovery */

.conn-tile.busy {
  opacity: 1;
  border-color: var(--accent-color, rgb(var(--accent-rgb) / 0.35));
  background: linear-gradient(135deg, rgba(255,255,255,0.035), rgba(255,255,255,0.015));
  box-shadow: 0 8px 32px rgba(0,0,0,0.25),
              inset 0 0 0 1px var(--accent-color, rgb(var(--accent-rgb) / 0.18));
  animation: connBusyPulse 2.2s ease-in-out infinite;
}

@keyframes connBusyPulse {
  0%, 100% { box-shadow: 0 8px 32px rgba(0,0,0,0.25), inset 0 0 0 1px var(--accent-color, rgb(var(--accent-rgb) / 0.18)); }
  50%      { box-shadow: 0 8px 32px rgba(0,0,0,0.25), inset 0 0 0 2px var(--accent-color, rgb(var(--accent-rgb) / 0.28)); }
}

.conn-tile.busy .conn-tile-actions button {
  cursor: progress;
}

.conn-tile-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.04);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  position: relative;
}

/* Styled sync result pill - visible confidence in what was pulled */
.conn-tile-meta .sync-result {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 6px;
  background: rgb(var(--accent-rgb) / 0.08);
  border: 1px solid rgb(var(--accent-rgb) / 0.20);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--accent);
  transition: all 0.3s ease;
}

/* Success result: green + bright background for celebration */
.conn-tile-meta .sync-result.success {
  background: var(--success) / 0.10) !important;
  border-color: var(--success) / 0.30) !important;
  color: var(--success) !important;
}

.conn-tile-meta .sync-result.error {
  background: var(--danger) / 0.10);
  border-color: var(--danger) / 0.25);
  color: var(--danger);
}

/* When syncing: show the label + spinner inline */
.conn-tile-status.syncing::before {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 4px;
  border: 1.5px solid rgba(94, 169, 255, 0.35);
  border-top-color: rgb(var(--accent-rgb));
  border-radius: 50%;
  animation: btnspin 0.7s linear infinite;
  vertical-align: -1px;
}

/* Error state: inline message visible, not hidden in tooltip */
.conn-tile-meta .sync-error-msg {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  color: var(--danger);
  font-weight: 500;
  opacity: 0;
  max-width: 0;
  overflow: hidden;
  transition: opacity 0.3s ease, max-width 0.3s ease;
  white-space: nowrap;
}

.conn-tile[data-status="error"] .conn-tile-meta .sync-error-msg {
  opacity: 1;
  max-width: 200px;
}

.conn-tile[data-status="error"] .conn-tile-meta > span:first-child {
  display: none;
}

/* Retry button in meta - only shows on error */
.conn-tile-meta .sync-retry-btn {
  padding: 3px 8px;
  border-radius: 5px;
  border: 1px solid rgba(223, 107, 115, 0.25);
  background: transparent;
  color: var(--danger);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.05em;
  cursor: pointer;
  opacity: 0;
  transition: all 0.2s ease;
  pointer-events: none;
}

.conn-tile[data-status="error"] .conn-tile-meta .sync-retry-btn {
  opacity: 1;
  pointer-events: auto;
}

.conn-tile-meta .sync-retry-btn:hover {
  background: rgba(223, 107, 115, 0.10);
  border-color: var(--danger);
  color: var(--danger);
}

/* "→ Tasks" button: only show after successful sync */
.conn-tile-meta .goto-tasks-btn {
  padding: 4px 9px;
  border-radius: 5px;
  border: 1px solid rgb(var(--accent-rgb) / 0.25);
  background: rgb(var(--accent-rgb) / 0.08);
  color: var(--accent);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.05em;
  cursor: pointer;
  opacity: 0;
  transition: all 0.3s ease;
  pointer-events: none;
  white-space: nowrap;
}

.conn-tile[data-status="synced"] .conn-tile-meta .goto-tasks-btn {
  opacity: 1;
  pointer-events: auto;
}

.conn-tile-meta .goto-tasks-btn:hover {
  background: rgb(var(--accent-rgb) / 0.15);
  border-color: rgb(var(--accent-rgb) / 0.40);
  transform: translateX(2px);
}

/* Sync duration indicator for confidence */
.conn-tile-meta .sync-duration {
  font-size: 10px;
  color: var(--text-dim);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.conn-tile[data-status="synced"] .conn-tile-meta .sync-duration,
.conn-tile.busy .conn-tile-meta .sync-duration {
  opacity: 1;
}

/* Light theme overrides */
body[data-theme="light"] .conn-tile.busy {
  box-shadow: 0 8px 32px rgba(0,0,0,0.12), inset 0 0 0 1px var(--accent-color, rgb(var(--accent-rgb) / 0.18));
}

body[data-theme="light"] .conn-tile-meta .sync-result {
  background: rgb(var(--accent-rgb) / 0.08);
  border-color: rgb(var(--accent-rgb) / 0.20);
}

body[data-theme="light"] .conn-tile-meta .sync-result.success {
  background: rgba(116, 198, 154, 0.12);
  border-color: rgba(116, 198, 154, 0.30);
}

body[data-theme="light"] .conn-tile-meta .sync-result.error {
  background: rgba(223, 107, 115, 0.12);
  border-color: rgba(223, 107, 115, 0.25);
}
/* ===== /MAXOUT: connector-sync ===== */

/* ===== MAXOUT: MEMORY UX - add/edit/import moments + micro-interactions ===== */

/* ── ADD/EDIT ATOM MODAL: tactile save moment + smooth transitions ────── */
.modal:has(#mem-atom-text) {
  animation: modalSlideIn 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

#mem-atom-text, #mem-atom-tag {
  transition: border-color 0.15s ease, background 0.15s ease,
              box-shadow 0.15s ease;
}
#mem-atom-text:focus, #mem-atom-tag:focus {
  border-color: rgb(var(--accent-rgb) / 0.60);
  background: rgba(var(--accent-rgb), 0.02);
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.08);
}

/* Save button gets tactile feedback: lift + soft glow on save state */
.modal:has(#mem-atom-save) .modal-actions .primary-btn {
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}
.modal:has(#mem-atom-save) .modal-actions .primary-btn:active {
  transform: translateY(1px);
}

/* Delete button - danger styling with red hover */
.modal:has(#mem-atom-delete) .danger-btn {
  color: var(--danger);
  border-color: rgba(223, 107, 115, 0.20);
  background: transparent;
  transition: all 0.15s ease;
}
.modal:has(#mem-atom-delete) .danger-btn:hover {
  background: rgba(223, 107, 115, 0.10);
  border-color: rgba(223, 107, 115, 0.35);
  color: var(--danger);
}

/* ── ATOM FEED: on-insert animation + smooth state transitions ────────── */
.view-memories .mem-atom {
  animation: atomSlideIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) backwards;
  animation-delay: calc(var(--i, 0) * 0.04s);
}
@keyframes atomSlideIn {
  from {
    opacity: 0;
    transform: translateX(-12px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Atom hover: lift + accent glow intensifies */
.view-memories .mem-atom:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(var(--accent-rgb), 0.08) !important;
}

/* Kind badge gets more pronounced on hover */
.view-memories .mem-atom:hover .mem-atom-kind {
  border-color: rgb(var(--mem-accent) / 0.40) !important;
  box-shadow: 0 0 12px rgba(var(--mem-accent), 0.12) !important;
}

/* Actions: appear with better spacing, scale on hover */
.view-memories .mem-atom-actions {
  opacity: 0;
  transition: opacity 0.14s ease;
}
.view-memories .mem-atom:hover .mem-atom-actions {
  opacity: 1;
}
.view-memories .mem-atom-actions button {
  transform: scale(1);
  transition: all 0.12s cubic-bezier(0.16, 1, 0.3, 1);
}
.view-memories .mem-atom-actions button:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(var(--text), 0.06);
}

/* ── IMPORT MODAL: preview area + numbered flow polish ────────────────── */
.mem-import-modal {
  animation: modalSlideIn 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Step number: subtle rotating accent ring on load */
.mem-import-modal .mem-num {
  box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.12) !important;
  transition: all 0.15s ease;
}

/* Step label has better visual weight */
.mem-import-modal .mem-step-label {
  color: var(--text);
  transition: color 0.15s ease;
}

/* Paste textarea: focus state with inline preview hint */
#mem-paste {
  transition: all 0.15s ease;
  min-height: 160px;
  resize: vertical;
}
#mem-paste:focus {
  border-color: rgb(var(--accent-rgb) / 0.50);
  background: rgba(var(--accent-rgb), 0.02);
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.08);
}

/* Copy button: tactile press + haptic-style feedback */
.mem-import-modal .mem-copy {
  transition: all 0.14s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  user-select: none;
}
.mem-import-modal .mem-copy:active {
  transform: scale(0.96);
}
.mem-import-modal .mem-copy:hover {
  background: rgb(var(--accent-rgb) / 0.14);
  color: rgb(var(--accent-rgb));
  border-color: rgb(var(--accent-rgb) / 0.35);
  box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.12);
}
.mem-import-modal .mem-copy.copied {
  background: rgba(116, 198, 154, 0.14);
  color: var(--success);
  border-color: rgba(116, 198, 154, 0.35);
}

/* Source selector: calm styling */
.mem-source-row select {
  transition: all 0.15s ease;
  border-color: var(--border);
  background: rgba(255, 255, 255, 0.02);
}
.mem-source-row select:hover {
  border-color: rgb(var(--accent-rgb) / 0.22);
}
.mem-source-row select:focus {
  outline: none;
  border-color: rgb(var(--accent-rgb) / 0.50);
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.08);
}

/* ── MEMORY VIEW MODAL: edit flow polish ─────────────────────────────── */
.mem-view-modal {
  animation: modalSlideIn 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}

#mem-view-text {
  transition: all 0.15s ease;
}
#mem-view-text:focus {
  border-color: rgb(var(--accent-rgb) / 0.50);
  background: rgba(var(--accent-rgb), 0.02);
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.08);
}

/* ── ATOM FILTER BAR: active state celebration ──────────────────────── */
.view-memories .mem-feed-bar .seg-btn.active {
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 16px rgba(var(--accent-rgb), 0.14);
}

/* Search input gains glow on focus */
.view-memories .mem-feed-search {
  transition: all 0.15s ease;
}
.view-memories .mem-feed-search:focus {
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.12);
}

/* ── AUTO-MEMORY TOAST: celebratory fade-in ─────────────────────────── */
.toast.success {
  animation: toastPulse 0.40s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes toastPulse {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ── EMPTY STATE: personality + breathing accent glow ──────────────────── */
.view-memories .mem-empty {
  animation: emptyFadeIn 0.35s ease 0.08s backwards;
}
@keyframes emptyFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.view-memories .mem-empty .empty-icon {
  animation: emptyIconBreathe 4s ease-in-out infinite;
  box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.12);
}
@keyframes emptyIconBreathe {
  0%, 100% {
    box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.12);
  }
  50% {
    box-shadow: 0 0 24px rgba(var(--accent-rgb), 0.16);
  }
}

/* Modal actions buttons: cohesive spacing + clear hierarchy */
.modal-actions {
  gap: 10px;
  padding: 16px 0;
  display: flex;
  flex-direction: row-reverse;
}

/* Primary action button prominence */
.primary-btn {
  transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}
.primary-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 16px rgba(var(--accent-rgb), 0.16);
}
.primary-btn:active {
  transform: translateY(0);
}

/* Respect reduced motion across all memory interactions */
@media (prefers-reduced-motion: reduce) {
  .view-memories .mem-atom,
  .view-memories .mem-empty,
  .mem-import-modal,
  .modal:has(#mem-atom-text) {
    animation: none !important;
  }
  .view-memories .mem-atom:hover,
  .view-memories .mem-atom-actions button:hover,
  .mem-import-modal .mem-copy:hover,
  .primary-btn:hover {
    transform: none !important;
  }
  .view-memories .mem-empty .empty-icon {
    animation: none !important;
  }
}

/* ===== /MAXOUT: MEMORY UX ===== */

/* ===== MAXOUT: PROJECT INTERACTIONS ===== */
/* Premium pin/rename/archive/delete UX for project cards.
   Elevates: discoverability, state clarity, action feedback, success polish.
   Uses only :root tokens + scoped selectors (no shared button/card redefs). */

/* ── Pinned project: elevated visual hierarchy ─────────────────────────── */
body[data-view="projects"] .project-card.pinned {
  background: linear-gradient(135deg,
    rgba(var(--accent-rgb), 0.06),
    rgba(var(--accent-rgb), 0.02)) !important;
  border-color: rgb(var(--accent-rgb) / 0.24) !important;
}
body[data-view="projects"] .project-card.pinned::after {
  opacity: 1 !important;
  background: linear-gradient(90deg,
    transparent,
    rgb(var(--accent-rgb) / 0.72) 22%,
    rgb(var(--accent-rgb) / 0.72) 78%,
    transparent);
}
body[data-view="projects"] .project-card.pinned .pc-action.pin svg {
  filter: drop-shadow(0 0 4px rgb(var(--accent-rgb) / 0.4));
}

/* ── Action menu button (replaces dual pin/delete) ────────────────────── */
body[data-view="projects"] .project-card .pc-action.menu {
  width: 28px; height: 28px;
  border-radius: 8px;
  display: grid; place-items: center;
  color: var(--text-dim);
  background: transparent;
  opacity: 0;
  font-size: 0 !important;
  transition: opacity 0.14s ease, background 0.14s ease,
              color 0.14s ease, transform 0.14s ease !important;
}
body[data-view="projects"] .project-card .pc-action.menu svg {
  width: 16px; height: 16px;
  display: block;
  pointer-events: none;
}
body[data-view="projects"] .project-card:hover .pc-action.menu {
  opacity: 0.6;
}
body[data-view="projects"] .project-card .pc-action.menu:hover {
  opacity: 1 !important;
  background: var(--bg-elev-3);
  color: var(--text);
  transform: scale(1.05);
}
body[data-view="projects"] .project-card .pc-action.menu:active {
  transform: scale(0.95);
}

/* ── Project context menu (pin/rename/archive/delete) ───────────────── */
.project-card-menu {
  position: fixed;
  z-index: 9998;
  min-width: 200px;
  background: linear-gradient(135deg,
    var(--bg-elev-2),
    rgb(var(--accent-rgb) / 0.02));
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.48),
              0 0 1px rgb(var(--accent-rgb) / 0.40);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  animation: pcmIn 0.14s cubic-bezier(0.16,1,0.3,1);
  transform-origin: top right;
}
@keyframes pcmIn {
  from { opacity: 0; transform: translateY(-4px) scale(0.94); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.project-card-menu .pcm-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  color: var(--text);
  font-size: 13px;
  font-weight: 450;
  padding: 9px 11px;
  border-radius: 7px;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.project-card-menu .pcm-item:hover {
  background: rgb(var(--accent-rgb) / 0.12);
  color: var(--text);
}
.project-card-menu .pcm-item svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0.7;
  transition: opacity 0.12s ease;
}
.project-card-menu .pcm-item:hover svg {
  opacity: 1;
}

.project-card-menu .pcm-item.pinned {
  color: rgb(var(--accent-rgb));
}
.project-card-menu .pcm-item.pinned svg {
  opacity: 1;
}

.project-card-menu .pcm-danger {
  color: var(--danger);
}
.project-card-menu .pcm-danger:hover {
  background: rgb(223,107,115 / 0.12);
  color: var(--danger);
}
.project-card-menu .pcm-danger svg {
  opacity: 0.6;
}
.project-card-menu .pcm-danger:hover svg {
  opacity: 1;
}

.project-card-menu .pcm-sep {
  height: 1px;
  background: var(--border);
  margin: 5px 4px;
}

/* ── Rename modal input field ──────────────────────────────────────────── */
.project-rename-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--bg-elev-2);
  color: var(--text);
  font-size: 14px;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.project-rename-input:focus {
  border-color: rgb(var(--accent-rgb) / 0.55);
  background: var(--bg-elev-3);
  outline: none;
}
.project-rename-input::placeholder {
  color: var(--text-dim);
}

/* ── Project stats: enhanced urgency coding ──────────────────────────── */
body[data-view="projects"] .project-card .pc-stats span.stat-urgent strong {
  color: var(--danger);
  font-weight: 700;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

/* ── Archived indicator badge ──────────────────────────────────────────── */
body[data-view="projects"] .project-card.archived {
  opacity: 0.58;
  border-color: var(--border) !important;
}
body[data-view="projects"] .project-card.archived::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 10px,
    rgba(var(--accent-rgb), 0.02) 10px,
    rgba(var(--accent-rgb), 0.02) 20px);
  pointer-events: none;
  border-radius: 14px;
}
body[data-view="projects"] .project-card.archived .pc-name {
  text-decoration: line-through;
  text-decoration-color: var(--text-dim);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* ── Project card: state-change animations ──────────────────────────── */
body[data-view="projects"] .project-card.just-pinned,
body[data-view="projects"] .project-card.just-archived {
  animation: pcStateChange 0.5s cubic-bezier(0.16,1,0.3,1);
}
@keyframes pcStateChange {
  0% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-2px) scale(1.01); }
  100% { transform: translateY(0) scale(1); }
}

/* ── Action feedback: disabled state ──────────────────────────────────── */
body[data-view="projects"] .project-card .pc-action:disabled {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
}

/* ── Context menu appearance on light theme ──────────────────────────── */
body[data-theme="light"] .project-card-menu {
  background: linear-gradient(135deg,
    #ffffff,
    rgb(var(--accent-rgb) / 0.02));
  border-color: rgba(37,99,235,0.12);
  box-shadow:
    0 12px 30px rgba(20,28,48,0.18),
    0 0 1px rgb(var(--accent-rgb) / 0.20);
}
body[data-theme="light"] .project-card-menu .pcm-item:hover {
  background: rgb(var(--accent-rgb) / 0.08);
}

/* ─────────────────────────────────────────────────────────────────────── */
/* Respect reduced motion: disable lift/scale on this surface */
@media (prefers-reduced-motion: reduce) {
  body[data-view="projects"] .project-card,
  body[data-view="projects"] .project-card:hover,
  body[data-view="projects"] .project-card.just-pinned,
  body[data-view="projects"] .project-card.just-archived,
  .project-card-menu,
  body[data-view="projects"] .project-card .pc-action.menu:hover {
    transform: none !important;
    animation: none !important;
  }
}

/* ===== /MAXOUT: PROJECT INTERACTIONS ===== */

/* ===== MAXOUT: q-first-impression ===== */

/* ══════════════════════════════════════════════════════════════════════════
   WELCOME REACTOR - pull suggestions into orbital field
   ══════════════════════════════════════════════════════════════════════════ */
.welcome {
  /* Enable 3D for suggestion orbital layout */
  perspective: 1200px;
  transform-style: preserve-3d;
}

/* Suggestions orbit the reactor via nth-child stagger + 3D transforms */
.suggestion-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  max-width: 560px;
  margin: 36px auto 0;
  perspective: 1000px;
  transform-style: preserve-3d;
}

.suggestion {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  border-radius: var(--r-lg);
  background: var(--bg-elev-1);
  border: 1px solid var(--border);
  text-align: left;
  
  /* Baseline: calm, no glow */
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  isolation: isolate;
  transform-style: preserve-3d;
}

/* Staggered entrance from reactor outward */
.suggestion:nth-child(1) { animation: suggestionIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both; }
.suggestion:nth-child(2) { animation: suggestionIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.35s both; }
.suggestion:nth-child(3) { animation: suggestionIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both; }
.suggestion:nth-child(4) { animation: suggestionIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.45s both; }

@keyframes suggestionIn {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.92);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Hover: suggestion glows + lifts, tilts toward cursor */
.suggestion:hover {
  background: var(--bg-elev-2);
  border-color: rgb(var(--accent-rgb) / 0.6);
  transform: translateY(-3px) scale(1.02);
  box-shadow: 
    0 8px 24px rgba(0, 0, 0, 0.4),
    0 0 24px rgb(var(--accent-rgb) / 0.28),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.suggestion:active {
  transform: translateY(-1px) scale(1.01);
}

/* Icon jitter remains, but now syncs with the orbital theme */
.suggestion-icon {
  font-size: 22px;
  display: inline-block;
  transition: transform 0.15s;
}

.suggestion:hover .suggestion-icon {
  animation: iconFloat 0.6s ease-in-out infinite;
}

@keyframes iconFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-2px) scale(1.08); }
}

.suggestion-title {
  font-weight: 600;
  font-size: 13px;
  color: var(--text);
  transition: color 0.2s ease;
}

.suggestion:hover .suggestion-title {
  color: rgb(var(--accent-rgb));
}

.suggestion-desc {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 2px;
  transition: color 0.2s ease;
}

.suggestion:hover .suggestion-desc {
  color: rgb(var(--accent-rgb) / 0.7);
}

/* ══════════════════════════════════════════════════════════════════════════
   AUTH SCREEN - orb-centered, premium entrance
   ══════════════════════════════════════════════════════════════════════════ */

.auth-card {
  width: 90%;
  max-width: 360px;
  background: var(--bg-elev-1);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-xl);
  padding: 36px 30px 28px;
  text-align: center;
  box-shadow: 
    0 16px 48px rgba(0, 0, 0, 0.44),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  animation: authCardIn 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

/* Subtle backdrop glow behind card */
.auth-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at 50% -50%,
    rgb(var(--accent-rgb) / 0.06),
    transparent 60%
  );
  pointer-events: none;
  border-radius: var(--r-xl);
  opacity: 0;
  animation: authGlowFade 0.8s ease-in-out 0.2s forwards;
}

@keyframes authCardIn {
  from {
    opacity: 0;
    transform: scale(0.92) translateY(-12px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes authGlowFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.auth-logo {
  border-radius: 14px;
  margin-bottom: 14px;
  
  /* Remove hue-rotate; let the blue logo shine clean */
  filter: none !important;
  
  /* Subtle pulse to reference the reactor's breathing */
  animation: authLogoBreathe 3.2s ease-in-out infinite;
  position: relative;
  z-index: 1;
}

@keyframes authLogoBreathe {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.95; }
  50% { transform: scale(1.04) rotate(0.5deg); opacity: 1; }
}

.auth-title {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--text);
  margin-bottom: 4px;
  animation: fadeInUp 0.5s ease 0.1s both;
}

.auth-sub {
  color: var(--text-muted);
  font-size: 13px;
  margin-bottom: 22px;
  animation: fadeInUp 0.5s ease 0.15s both;
}

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

/* Input fields get premium focus glow */
.auth-card input {
  width: 100%;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 12px 14px;
  margin-bottom: 10px;
  font-size: 14px;
  color: var(--text);
  transition: all 0.2s ease;
  animation: inputFadeIn 0.4s ease both;
}

.auth-card input:nth-of-type(1) { animation-delay: 0.2s; }
.auth-card input:nth-of-type(2) { animation-delay: 0.25s; }
.auth-card input:nth-of-type(3) { animation-delay: 0.3s; }

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

.auth-card input:focus {
  border-color: rgb(var(--accent-rgb) / 0.7);
  background: var(--bg-elev-2);
  box-shadow: 
    0 0 0 2px var(--bg),
    0 0 12px rgb(var(--accent-rgb) / 0.3),
    inset 0 0 0 1px rgb(var(--accent-rgb) / 0.15);
}

/* Auth submit button is .btn-hero; enhance the glow aura */
.auth-submit {
  width: 100%;
  padding: 12px;
  margin-top: 6px;
  font-size: 14px;
  animation: submitFadeIn 0.4s ease 0.35s both;
}

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

.auth-error {
  color: var(--danger);
  font-size: 12px;
  min-height: 16px;
  margin-bottom: 4px;
  animation: shake 0.4s ease;
  animation-fill-mode: none;
}

.auth-error:empty { animation: none; }

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}

.auth-switch {
  margin-top: 18px;
  font-size: 12.5px;
  color: var(--text-dim);
  animation: fadeInUp 0.5s ease 0.4s both;
}

.auth-switch a {
  color: rgb(var(--accent-rgb));
  cursor: pointer;
  margin-left: 6px;
  transition: all 0.2s ease;
}

.auth-switch a:hover {
  color: rgb(var(--accent-rgb) / 1);
  text-decoration: underline;
  filter: brightness(1.2);
}

/* ══════════════════════════════════════════════════════════════════════════
   PAYWALL - featured card floats, price card hierarchy
   ══════════════════════════════════════════════════════════════════════════ */

.paywall-wrap {
  width: 96%;
  max-width: 1480px;
  text-align: center;
  animation: modalIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.paywall-wrap .auth-logo {
  animation: logoPulse 5s ease-in-out infinite;
}

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

/* Individual paywall cards with staggered entrance + hover lift */
.paywall-card {
  max-width: 380px;
  animation: cardSlideUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
  position: relative;
}

.paywall-card:nth-child(1) { animation-delay: 0.15s; }
.paywall-card:nth-child(2) { animation-delay: 0.2s; }
.paywall-card:nth-child(3) { animation-delay: 0.25s; }

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

.paywall-card {
  background: var(--bg-elev-1);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 20px 16px;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.paywall-card:hover {
  border-color: rgb(var(--accent-rgb) / 0.4);
  background: var(--bg-elev-2);
  transform: translateY(-4px);
  box-shadow: 
    0 12px 36px rgba(0, 0, 0, 0.4),
    0 0 20px rgb(var(--accent-rgb) / 0.15);
}

/* Featured/Pro card gets extra lift + glow */
.paywall-card.featured,
.paywall-card.pro {
  border: 1px solid rgb(var(--accent-rgb) / 0.5);
  background: linear-gradient(
    180deg,
    rgb(var(--accent-rgb) / 0.08),
    rgb(var(--accent-blue-rgb) / 0.04)
  );
  box-shadow: 
    0 0 0 1px rgb(var(--accent-rgb) / 0.25),
    0 8px 32px rgba(0, 0, 0, 0.32);
  position: relative;
  z-index: 1;
}

.paywall-card.featured:hover,
.paywall-card.pro:hover {
  border-color: rgb(var(--accent-rgb) / 0.7);
  background: linear-gradient(
    180deg,
    rgb(var(--accent-rgb) / 0.12),
    rgb(var(--accent-blue-rgb) / 0.06)
  );
  box-shadow: 
    0 0 0 1px rgb(var(--accent-rgb) / 0.4),
    0 16px 48px rgba(0, 0, 0, 0.44),
    0 0 32px rgb(var(--accent-rgb) / 0.22);
  transform: translateY(-6px) scale(1.02);
}

.paywall-price {
  font-size: 34px;
  font-weight: 800;
  margin: 6px 0 16px;
  animation: priceSlideIn 0.5s ease-out both;
}

@keyframes priceSlideIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

.paywall-price span {
  font-size: 15px;
  color: var(--text-dim);
  font-weight: 500;
}

.paywall-feats {
  text-align: left;
  max-width: 220px;
  margin: 0 auto 18px;
  font-size: 12.5px;
  list-style: none;
}

.paywall-feats li {
  padding: 4px 0;
  color: var(--text-muted);
  transition: color 0.2s ease;
}

.paywall-feats li::before {
  content: "✓ ";
  color: var(--success);
  font-weight: 700;
  margin-right: 6px;
}

.paywall-card:hover .paywall-feats li {
  color: var(--text);
}

/* ══════════════════════════════════════════════════════════════════════════
   TUTORIAL ONBOARDING - premium entrance + narrative flow
   ══════════════════════════════════════════════════════════════════════════ */

.tutorial-card {
  width: 90%;
  max-width: 480px;
  background: var(--bg-elev-1);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-xl);
  padding: 40px 32px;
  text-align: center;
  box-shadow: 
    0 20px 60px rgba(0, 0, 0, 0.5),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  animation: tutorialSlideIn 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes tutorialSlideIn {
  from {
    opacity: 0;
    transform: scale(0.94) translateY(-20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.tut-dots {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-bottom: 24px;
}

.tut-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border-strong);
  transition: all 0.3s ease;
  cursor: pointer;
}

.tut-dot.active {
  background: rgb(var(--accent-rgb));
  width: 24px;
  border-radius: 4px;
}

.tut-body {
  min-height: 160px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 24px;
  animation: tutBodyFade 0.4s ease;
}

@keyframes tutBodyFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ══════════════════════════════════════════════════════════════════════════
   LIGHT THEME COMPATIBILITY
   ══════════════════════════════════════════════════════════════════════════ */

body[data-theme="light"] .suggestion {
  background: rgba(255, 255, 255, 0.6);
  border-color: rgba(0, 0, 0, 0.08);
}

body[data-theme="light"] .suggestion:hover {
  background: rgba(255, 255, 255, 0.8);
  border-color: rgb(var(--accent-rgb) / 0.5);
  box-shadow: 
    0 8px 24px rgba(0, 0, 0, 0.1),
    0 0 24px rgb(var(--accent-rgb) / 0.2);
}

body[data-theme="light"] .auth-card {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 
    0 16px 48px rgba(0, 0, 0, 0.12),
    inset 0 0 0 1px rgba(0, 0, 0, 0.05);
}

body[data-theme="light"] .auth-card::before {
  background: radial-gradient(
    circle at 50% -50%,
    rgb(var(--accent-rgb) / 0.04),
    transparent 60%
  );
}

body[data-theme="light"] .auth-card input {
  background: rgba(255, 255, 255, 0.5);
  border-color: rgba(0, 0, 0, 0.08);
}

body[data-theme="light"] .auth-card input:focus {
  border-color: rgb(var(--accent-rgb) / 0.6);
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 
    0 0 0 2px #fff,
    0 0 12px rgb(var(--accent-rgb) / 0.25);
}

body[data-theme="light"] .paywall-card {
  background: rgba(255, 255, 255, 0.6);
  border-color: rgba(0, 0, 0, 0.06);
}

body[data-theme="light"] .paywall-card:hover {
  background: rgba(255, 255, 255, 0.75);
  border-color: rgb(var(--accent-rgb) / 0.4);
}

body[data-theme="light"] .paywall-card.featured,
body[data-theme="light"] .paywall-card.pro {
  background: linear-gradient(
    180deg,
    rgb(var(--accent-rgb) / 0.06),
    rgb(var(--accent-blue-rgb) / 0.03)
  );
  border-color: rgb(var(--accent-rgb) / 0.4);
}

body[data-theme="light"] .paywall-card.featured:hover,
body[data-theme="light"] .paywall-card.pro:hover {
  background: linear-gradient(
    180deg,
    rgb(var(--accent-rgb) / 0.1),
    rgb(var(--accent-blue-rgb) / 0.05)
  );
  border-color: rgb(var(--accent-rgb) / 0.6);
}

body[data-theme="light"] .tutorial-card {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 
    0 20px 60px rgba(0, 0, 0, 0.1),
    inset 0 0 0 1px rgba(0, 0, 0, 0.05);
}

/* ===== /FLEET: q-first-impression ===== */

/* ===== MAXOUT: SETTINGS UX ===== */

/* ─ Save feedback indicator ─ */
.pref-save-feedback {
  position: fixed;
  bottom: 32px;
  right: 32px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: linear-gradient(135deg, rgb(var(--accent-rgb)), rgb(var(--accent-blue-rgb)));
  border-radius: var(--r-lg);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  animation: slideInSaveSuccess 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.25);
  z-index: 300;
  pointer-events: none;
}
.pref-save-feedback svg {
  width: 14px;
  height: 14px;
  stroke-width: 2.5;
}
@keyframes slideInSaveSuccess {
  from {
    opacity: 0;
    transform: translateY(12px) translateX(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0) translateX(0);
  }
}

/* ─ Smoother, glowing toggles ─ */
.set-toggle {
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.set-toggle:hover:not([disabled]) {
  border-color: rgb(var(--accent-rgb) / 0.25);
}
.set-toggle.on {
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4),
              0 0 12px rgb(var(--accent-rgb) / 0.3);
}
.set-toggle.on .seg-knob {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35),
              0 0 6px rgb(var(--accent-rgb) / 0.4);
}
.set-toggle .seg-knob {
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ─ Segmented controls - blue inset glow on active ─ */
.seg-btn {
  transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}
.seg-btn:hover {
  background: rgba(255, 255, 255, 0.03);
}
.seg-btn.active {
  box-shadow: inset 0 0 12px rgb(var(--accent-rgb) / 0.25),
              inset 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* ─ Segmented group border glow on interaction ─ */
.seg-group {
  transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}
.seg-group:has(.seg-btn:hover) {
  border-color: rgb(var(--accent-rgb) / 0.15);
}

/* ─ Input focus glow ─ */
.set-input:focus,
.set-textarea:focus {
  box-shadow: inset 0 0 0 1px var(--accent),
              0 0 8px rgb(var(--accent-rgb) / 0.15);
}

/* ─ AI key connection - polish ─ */
.ai-status-pill {
  animation: pillPulse 2s ease-in-out infinite;
  transition: all 0.2s ease;
}
.ai-status-pill.ok {
  color: var(--success);
  border-color: rgba(116, 198, 154, 0.6);
  box-shadow: 0 0 8px rgba(116, 198, 154, 0.15);
}
.ai-status-pill.bad {
  color: var(--warning);
  border-color: rgba(214, 168, 95, 0.6);
  box-shadow: 0 0 8px rgba(214, 168, 95, 0.08);
}
@keyframes pillPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.ai-key-row .primary-btn {
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.ai-key-row .primary-btn:active {
  transform: scale(0.98);
}

/* ─ AI key input enhanced ─ */
.set-ai-connect .set-input {
  font-family: ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.03em;
}

/* ─ Settings tab content transitions - slide + fade ─ */
.settings-tab-content {
  animation: tabSlideIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes tabSlideIn {
  from {
    opacity: 0;
    transform: translateX(8px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ─ Settings tab active indicator glow ─ */
.settings-tab.active {
  box-shadow: inset -2px 0 0 var(--accent);
  background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.06), transparent);
}

/* ─ Model picker dropdown - premium blur + glow ─ */
.topbar .model-picker .model-dropdown {
  box-shadow: 0 12px 40px rgba(37, 99, 235, 0.15),
              inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

/* ─ Model option active state - inset glow ─ */
.topbar .model-picker .model-option.active {
  box-shadow: inset 0 0 12px rgb(var(--accent-rgb) / 0.2),
              inset 2px 0 0 var(--accent) !important;
}

/* ─ Plan hero button confidence ─ */
.plan-hero .primary-btn {
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.plan-hero .primary-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.25);
}

/* ─ Usage bars - smooth color fill ─ */
.usage-fill {
  box-shadow: 0 0 8px rgb(var(--accent-rgb) / 0.3);
}

/* ─ Readonly fields - copyable hint ─ */
.set-readonly {
  transition: all 0.15s;
}
.set-readonly:hover {
  border-color: rgb(var(--accent-rgb) / 0.2);
}

/* ─ Danger buttons - restrained red ─ */
.danger-btn {
  transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}
.danger-btn:hover {
  box-shadow: inset 0 0 12px rgba(229, 112, 122, 0.12);
}

/* ===== /MAXOUT: SETTINGS UX ===== */

/* ===== MAXOUT: Keyboard Shortcuts ===== */

/* Global keyboard help overlay (⌘ + / or ?) */
#keyboard-help-backdrop {
  position: fixed;
  inset: 0;
  z-index: 510;
  background: rgba(6, 7, 10, 0.68);
  -webkit-backdrop-filter: blur(12px) saturate(1.05);
  backdrop-filter: blur(12px) saturate(1.05);
  display: none;
  justify-content: center;
  align-items: center;
  padding: 16px;
  animation: fadeIn 0.15s ease;
}

#keyboard-help-backdrop.shown {
  display: flex;
}

#keyboard-help-backdrop.hidden {
  display: none;
}

/* Help panel: clean grid of shortcuts */
.keyboard-help-panel {
  width: 100%;
  max-width: 880px;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(28px) saturate(1.2);
  backdrop-filter: blur(28px) saturate(1.2);
  border: 1px solid var(--glass-bord);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 88vh;
  animation: modalIn 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Header: title + close btn */
.keyboard-help-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
  gap: 16px;
}

.keyboard-help-header h2 {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
  margin: 0;
}

.keyboard-help-header .kbd-close {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  cursor: pointer;
  color: var(--text-dim);
  transition: background 0.15s ease, color 0.15s ease;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
}

.keyboard-help-header .kbd-close:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-muted);
}

/* Content: scrollable grid */
.keyboard-help-content {
  overflow-y: auto;
  padding: 20px 24px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

/* Section: Nav, Chat, etc. */
.keyboard-help-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.keyboard-help-section-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 0;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

/* Individual shortcut row */
.keyboard-help-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.keyboard-help-item kbd {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
  padding: 4px 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  text-transform: uppercase;
  white-space: nowrap;
}

.keyboard-help-item kbd + span {
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.4;
}

/* Meta: "Press ? to hide" at bottom */
.keyboard-help-footer {
  padding: 12px 24px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  color: var(--text-dim);
  text-align: center;
  background: rgba(255, 255, 255, 0.01);
}

/* Enhance palette search kbd indicator */
#palette-backdrop .palette-search kbd {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-xs) !important;
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  letter-spacing: 0.05em;
  color: var(--text-dim) !important;
  padding: 3px 8px !important;
  text-transform: uppercase;
  font-weight: 600;
}

/* Composer hint visual refinement */
.composer-hint kbd {
  background: rgba(94, 169, 255, 0.08);
  border: 1px solid rgb(var(--accent-rgb) / 0.2);
  border-radius: var(--r-xs);
  padding: 3px 7px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: rgb(var(--accent-rgb));
  line-height: 1.2;
}

/* Focus ring for keyboard nav (visibility) */
.keyboard-help-panel:focus-visible,
.keyboard-help-item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  #keyboard-help-backdrop,
  .keyboard-help-panel {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
}

/* Mobile: full-screen help (no need to show in help overlay) */
@media (max-width: 640px) {
  .keyboard-help-content {
    grid-template-columns: 1fr;
  }

  .keyboard-help-item kbd {
    font-size: 9px;
    padding: 3px 6px;
  }
}

/* ===== /MAXOUT: Keyboard Shortcuts ===== */

/* ===== MAXOUT: PERFORMANCE ===== */

/* 1. CHAT SCROLL & STREAM SMOOTHNESS
   - Stream rendering throttles via RAF (good), but scrollTop is synced on EVERY frame
   - This forces layout recalc per stream chunk. Fix: batch scroll updates.
   - Mask gradient on chat container can cause repaints; use backface-visibility.
*/
body[data-view="chat"] .view-chat .chat {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22px, #000 calc(100% - 40px), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 22px, #000 calc(100% - 40px), transparent 100%);
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
}

/* 2. ANIMATION CONTAINMENT
   - Message animations, typing, orb glow run on every message = paint thrashing
   - Contain layout + paint cost of animations to the message element itself.
*/
body[data-view="chat"] .view-chat .msg {
  contain: layout style paint;
}

body[data-view="chat"] .view-chat .msg.streaming::after {
  will-change: transform, opacity;
}

/* 3. SIDEBAR & LIST RENDERING CONTAINMENT
   - Project list, upcoming list, recent chats all have tight loops + forEach
   - Contain each item to avoid parent layout thrashing during re-render.
*/
.project-item,
.upcoming-item,
.recent-chat-item {
  contain: layout style;
}

/* 4. HISTORY ROW CONTAINMENT
   - renderHistory() creates rows without virtualization; large histories lag.
   - Contain each row; limit animation to first 12 rows (already in code).
*/
.hist-row {
  contain: layout style paint;
}

.hist-row:nth-child(n+13) {
  animation: none !important;
}

/* 5. MEMORY FEED CARD CONTAINMENT
   - Memory atoms filter/render with no virtual scroll; feed can hit 50+ cards.
   - Contain each atom card; skip animation for cards beyond first 12 (code already does this).
*/
.mem-atom {
  contain: layout style paint;
}

/* 6. SKILL CARD GRID CONTAINMENT
   - Skills grid renders all filtered cards; no limit.
   - Contain grid items to prevent cascading reflow.
*/
.skill-card {
  contain: layout style paint;
}

/* 7. INPUT AUTOSIZING
   - Textarea auto-resize on input triggers frequent reflows.
   - Use resize: none + fixed max-height container to prevent layout thrashing.
*/
#input {
  flex: 1;
  resize: none;
  font-size: 15px;
  line-height: 1.55;
  padding: 8px 4px;
  max-height: 220px;
  overflow-y: auto;
  contain: layout style;
}

/* 8. TYPING INDICATOR ANIMATION OPTIMIZATION
   - Three blink spans on every message create frequent paint.
   - Use will-change sparingly; scope to active typing only.
*/
.typing span {
  will-change: transform, opacity;
}

/* 9. ORBED AVATAR GLOW
   - orbGlowBreathe filter animation runs every frame for non-streaming messages.
   - GPU-accelerate the filter via transform + backface.
*/
body[data-view="chat"] .view-chat .msg.assistant:not(.streaming) .msg-avatar.msg-avatar-orb .orb-mark {
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ===== /MAXOUT: PERFORMANCE ===== */

/* ===== MAXOUT: q-accessibility ===== */

/* WCAG 2.1 AA COMPLIANCE: Focus management, contrast, semantic ARIA, reduced-motion */

/* ═══ FOCUS RING SYSTEM AUDIT: Keyboard navigation polish ═══ */
/* Current: :focus-visible uses 2px outline at 55% opacity. Lift to 65% for AA minimum
   on dark backgrounds. The accent-rgb (94,169,255) at 55% opacity = ~4.7:1 contrast.
   Bump to 65% (4.9:1) and ensure all interactive elements are keyboard-accessible. */

:focus-visible {
  outline: 2px solid rgb(var(--accent-rgb) / 0.65);
  outline-offset: 2px;
}

/* Prevent focus ring from being obscured in modals/overlays */
.modal:has(> *:focus-visible),
.modal-backdrop:has(> *:focus-visible) {
  z-index: 1001;
}

/* ═══ ARIA LIVE REGION FOR DYNAMIC UPDATES ═══ */
/* Currently missing: No aria-live regions for async messages, status updates.
   Add a single live region for all toast/alert messages. */
[aria-live="polite"],
#live-region[aria-live="assertive"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* When live region contains visible content, make it visible */
#live-region[aria-live]:not(:empty) {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: auto;
  height: auto;
  padding: 12px 16px;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
  background: var(--bg-elev-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  z-index: 9999;
  font-size: 14px;
  color: var(--text);
  box-shadow: var(--shadow-md);
}

/* ═══ FORM LABEL ASSOCIATIONS ═══ */
/* Fix: Many inputs lack associated <label> elements.
   Use aria-labelledby or aria-label for all unlabeled inputs in settings.
   Ensure every set-label + input pair is programmatically linked. */

.set-row > .set-label {
  margin-bottom: 6px;
  display: block;
}

/* Implicit association: next input after label inherits semantic context */
.set-input,
.set-textarea {
  /* Currently sets own aria-labelledby in JS or relies on proximity.
     Ensure in HTML that id of label is matched to aria-labelledby of input. */
}

/* ═══ DISABLED STATE CONTRAST (WCAG AAA ready) ═══ */
/* Current: opacity 0.42 + text-dim. But disabled buttons can drop below AA minimum.
   Ensure disabled text maintains 4.5:1 contrast. */

button:disabled,
.primary-btn:disabled,
.ghost-btn:disabled,
.send-btn:disabled,
.icon-btn:disabled,
.toggle-btn:disabled {
  opacity: 0.5;
  color: var(--text-dim);
  /* text-dim (#8e97a4) on --bg-elev-2 (#14161c) = ~5.2:1 (AA) at 100% opacity,
     so 50% opacity is safe. */
}

/* ═══ EMPTY STATE / LOADING STATE SEMANTICS ═══ */
/* Missing: No aria-busy, aria-label for loading skeletons/spinners.
   When button.loading, inform screen readers of async operation. */

button.loading {
  position: relative;
  /* Inform AT that button is busy */
  aria-busy: true;
}

button.loading::after {
  /* Spinner inherits aria-hidden from button context */
  content: "";
  position: absolute;
  inset: 50%;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border: 1.5px solid rgb(var(--accent-rgb) / 0.3);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  /* Hide spinner from AT (it's decorative; text state handles semantics) */
  aria-hidden: true;
}

/* ═══ ICON BUTTON LABELING ═══ */
/* Many icon-only buttons (.icon-btn, .nav-pin) lack aria-label.
   Ensure all icon-only buttons have one. This is done in HTML but reinforce
   via CSS :has() selectors for focus visibility. */

.icon-btn:not([aria-label]) {
  /* Catch unlabeled icon buttons in CSS (these should not exist, but warn) */
}

/* ═══ MODAL FOCUS TRAP & SEMANTICS ═══ */
/* Current: Modals exist but no explicit role="dialog" on wrapper.
   Each .modal should have role="dialog" and aria-modal="true" in HTML.
   CSS ensures focus styles are visible over modal backdrop. */

.modal {
  /* Assumed to have role="dialog" aria-modal="true" in HTML */
}

.modal:focus-within *:focus-visible {
  outline-color: rgb(var(--accent-rgb) / 0.75);
  z-index: 1002;
}

/* ═══ SKIP-LINK ACCESSIBILITY ═══ */
/* Good: .sr-only skip link exists. Enhance focus styling. */

.sr-only:focus {
  position: static;
  width: auto;
  height: auto;
  padding: 8px 12px;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
  outline: 2px solid rgb(var(--accent-rgb) / 0.75);
  background: var(--bg-elev-2);
  border-radius: var(--r-sm);
  z-index: 9999;
  box-shadow: var(--shadow-md);
}

/* ═══ REDUCED-MOTION: Comprehensive coverage ═══ */
/* Already present but reinforce: all @media (prefers-reduced-motion: reduce)
   disable animations except focus rings (which stay visible for accessibility). */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  
  /* Keep focus rings visible even with reduced motion */
  :focus-visible,
  button:focus-visible,
  a:focus-visible,
  .nav-item:focus-visible {
    outline: 2px solid rgb(var(--accent-rgb) / 0.75) !important;
    outline-offset: 2px !important;
  }
}

/* ═══ TABLE & LIST SEMANTICS (for task cards, chat history) ═══ */
/* Ensure task cards use semantic <li> or have role="listitem".
   Ensure proper heading hierarchy (only one <h1> per page). */

/* If .nav-item is used as list items (nav items), ensure parent is <nav> or role="navigation" */

/* ═══ BUTTON TEXT CONTRAST IN LIGHT MODE ═══ */
/* Ensure primary-btn text (white/light gray on dark blue bg) maintains 7:1 (AAA)
   in light mode too. Current white text on --accent-blue-rgb (37,99,235) 
   in light mode needs verification. */

body[data-theme="light"] .primary-btn {
  color: #fff;
  background: rgb(var(--accent-blue-rgb));
}

body[data-theme="light"] .primary-btn:disabled {
  color: rgba(255, 255, 255, 0.5);
  background: rgb(var(--accent-blue-rgb) / 0.4);
}

/* ═══ LINK UNDERLINE FOR LOW VISION ═══ */
/* Excellent: links have underlines already. Maintain for WCAG 2.1 Link Underline
   (Guidance Level) but ensure underline-offset is readable. */

a:not([class]) {
  text-decoration: underline;
  text-decoration-color: rgb(var(--accent-rgb) / 0.4);
  text-underline-offset: 3px;
}

a:not([class]):hover {
  text-decoration-color: rgb(var(--accent-rgb) / 0.8);
}

/* ═══ SELECT & INPUT FOCUS CLARITY ═══ */
/* Inputs in settings have outline: none; reinforce focus state. */

.set-input:focus,
.set-textarea:focus {
  box-shadow: inset 0 0 0 2px rgb(var(--accent-rgb) / 0.5);
  outline: none;
}

select:focus {
  box-shadow: inset 0 0 0 2px rgb(var(--accent-rgb) / 0.5);
  outline: none;
}

/* ═══ ERROR STATE SEMANTICS ═══ */
/* Missing: No aria-invalid or aria-describedby on form errors.
   Ensure auth-error, set-error elements have role="alert" aria-live="assertive". */

.auth-error,
[role="alert"] {
  color: var(--danger);
  font-size: 13px;
  margin-top: 8px;
}

[role="alert"] {
  aria-live: assertive;
  aria-atomic: true;
}

/* ═══ TOOLTIP / TITLE ATTRIBUTE FALLBACK ═══ */
/* Many buttons use title="..." but no visible label. Ensure aria-label
   mirrors title content for consistency. Example: #new-project-btn title="New project"
   should also have aria-label="New project". */

/* This is an HTML/JS issue, not CSS, but note it here. */

/* ===== /MAXOUT: q-accessibility ===== */

/* ===== MAXOUT: q-cohesion ===== */

/* CRITICAL: Snap all components to token scales - enforce consistency across the whole app */

/* ──────────────────────────────────────────────────────────────────────
   1. BORDER-RADIUS STANDARDIZATION
   Audit found 30+ hardcoded radii. Enforce :root scale only.
   Token scale: --r-xs(4px) --r-sm(7px) --r-md(10px) --r-lg(14px) --r-xl(20px) --r-2xl(28px)
   ────────────────────────────────────────────────────────────────────── */

/* icon buttons: was 6px, snap to --r-sm */
.icon-btn, .icon-btn:hover {
  border-radius: var(--r-sm) !important;
}

/* input fields in modals: was mixed 1px/2px/3px/4px, use --r-xs */
.modal input, .modal textarea, input[type="text"]:not(.ignore-snap),
input[type="email"]:not(.ignore-snap), input[type="password"]:not(.ignore-snap) {
  border-radius: var(--r-xs) !important;
}

/* inline code in messages: was 4px, keep at --r-xs */
.msg-content code {
  border-radius: var(--r-xs) !important;
}

/* pre/code blocks: was 4px, standardize to --r-sm */
.msg-content pre {
  border-radius: var(--r-sm) !important;
}

/* small pills/badges: was 10px hardcoded, snap to token */
.project-item .count {
  border-radius: var(--r-full) !important;
}

/* Pills and filters: enforce pill scale */
.pill, .badge {
  border-radius: var(--r-full) !important;
}

/* skill/task/project cards: standardize to --r-lg */
.skill-card, .task-card, .project-card, .ap-card, .recent-card {
  border-radius: var(--r-lg) !important;
}

/* Connector tiles: was 12px, snap to --r-lg (14px) */
.conn-tile, .conn-card {
  border-radius: var(--r-lg) !important;
}

/* Suggestion cards: was 14px hardcoded, use --r-lg */
.suggestion, .suggestion-chip {
  border-radius: var(--r-lg) !important;
}

/* Modal/panel backgrounds: use --r-xl */
.modal, .import-modal, .palette-backdrop, .school-modal-backdrop,
.tutorial-card, .paywall-wrap {
  border-radius: var(--r-xl) !important;
}

/* Composer: was 26px, snap to --r-2xl */
.composer-inner {
  border-radius: var(--r-2xl) !important;
}

/* Hero/brand logo icon: was 10px, standardize to --r-lg */
.brand-logo {
  border-radius: var(--r-lg) !important;
}

/* All button-like elements: standardize to --r-md for consistency */
button:not(.send-btn):not([class*="hero"]):not([class*="orb"]),
.ghost-btn, .primary-btn, .danger-btn, .toggle-btn {
  border-radius: var(--r-md) !important;
}

/* Send button: keep circular (50%) - special case */
.send-btn {
  border-radius: 50% !important;
}

/* ──────────────────────────────────────────────────────────────────────
   2. PADDING/SPACING SCALE ENFORCEMENT
   Token scale: --s-1(4px) --s-2(8px) --s-3(12px) --s-4(16px) --s-5(20px) --s-6(24px)
   Rule: all padding must snap to scale; no 1,2,3,5,6,7,9,10,11,14,15,18,19 px!
   ────────────────────────────────────────────────────────────────────── */

/* List items (sidebar, nav): standardize to 8/12px (var(--s-2) / var(--s-3)) */
.project-item, .upcoming-item {
  padding: var(--s-2) var(--s-3) !important;
}

/* Small interactive elements */
.icon-btn {
  /* icon-btn uses internal grid, no padding change needed */
}

/* Suggestion/starter cards: standardize */
.suggestion, .suggestion-chip, .starter {
  padding: var(--s-3) var(--s-4) !important;
}

/* Ghost buttons: enforce consistent spacing */
.ghost-btn {
  padding: var(--s-2) var(--s-3) !important;
}

/* Primary buttons: enforce consistent spacing globally */
.primary-btn:not([class*="ap"]):not([class*="modal"]):not([class*="auth"]):not([class*="paywall"]) {
  padding: var(--s-2) var(--s-4) !important;
}

/* Modal primary buttons: consistent sizing */
.modal-actions .primary-btn {
  padding: var(--s-3) var(--s-4) !important;
}

/* Autopilot primary buttons: consistent with others */
.view-autopilot .ap-report-actions .primary-btn {
  padding: var(--s-3) var(--s-4) !important;
}

/* Auth buttons: standardize */
.auth-submit {
  padding: var(--s-3) var(--s-4) !important;
}

/* Small badges/pills that hold counts */
.project-item .count, .badge {
  padding: var(--s-1) var(--s-2) !important;
}

/* Subject badges (tasks): standardize */
.task-subject, .ap-badge {
  padding: var(--s-1) var(--s-2) !important;
}

/* ──────────────────────────────────────────────────────────────────────
   3. BUTTON STYLE UNIFICATION
   Define .primary-btn globally (was missing!) and ensure consistency.
   ────────────────────────────────────────────────────────────────────── */

/* Primary button: single, unified definition for all surfaces */
.primary-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-4);
  border: none;
  border-radius: var(--r-md);
  font-size: 13.5px;
  font-weight: 600;
  color: #ffffff;
  background: var(--accent-blue);
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
  cursor: pointer;
  transition: all var(--d-base) var(--ease-out);
  white-space: nowrap;
}

.primary-btn:hover:not(:disabled) {
  background: rgb(var(--accent-blue-rgb) / 0.92);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35);
}

.primary-btn:active:not(:disabled) {
  transform: scale(0.96);
  transition: transform 0.12s var(--ease-out);
}

.primary-btn:disabled {
  opacity: 0.42;
  cursor: not-allowed;
  background: linear-gradient(135deg, 
    rgb(var(--accent-blue-rgb) / 0.3) 0%, 
    rgb(var(--accent-rgb) / 0.2) 100%);
  box-shadow: none;
}

.primary-btn:focus-visible {
  outline: 2px solid rgb(var(--accent-rgb) / 0.65);
  outline-offset: 1px;
}

/* Ghost button: unified definition */
.ghost-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
  background: transparent;
  cursor: pointer;
  transition: all var(--d-base) var(--ease-out), box-shadow 0.2s var(--ease-out);
  white-space: nowrap;
}

.ghost-btn:hover:not(:disabled) {
  background: var(--bg-elev-2);
  color: var(--text);
  border-color: rgb(var(--accent-rgb) / 0.25);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  transform: translateY(-1px);
}

.ghost-btn:active:not(:disabled) {
  transform: scale(0.98);
  transition: transform 0.12s var(--ease-out);
}

.ghost-btn:disabled {
  opacity: 0.42;
  cursor: not-allowed;
  background: transparent;
  box-shadow: none;
}

.ghost-btn:focus-visible {
  outline: 2px solid rgb(var(--accent-rgb) / 0.65);
  outline-offset: 1px;
}

/* ──────────────────────────────────────────────────────────────────────
   4. SHADOW STANDARDIZATION
   Replace hardcoded shadows with token-based system.
   ────────────────────────────────────────────────────────────────────── */

/* Cards and elevated surfaces: use --shadow-md consistently */
.skill-card, .task-card, .project-card, .ap-card, .recent-card, .suggestion,
.conn-tile, .conn-card {
  box-shadow: var(--shadow-sm);
}

.skill-card:hover, .task-card:hover, .project-card:hover, .ap-card:hover,
.recent-card:hover, .suggestion:hover, .conn-tile:hover, .conn-card:hover {
  box-shadow: var(--shadow-md);
}

/* Modal and panels: use --shadow-lg */
.modal, .import-modal, .tutorial-card, .paywall-wrap {
  box-shadow: var(--shadow-lg);
}

/* Small interactive elements */
.icon-btn:hover {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* ──────────────────────────────────────────────────────────────────────
   5. TRANSITION DURATION STANDARDIZATION
   Replace hardcoded durations with --d-fast/--d-base/--d-slow.
   ────────────────────────────────────────────────────────────────────── */

/* Fast micro-interactions (icon buttons, nav items) */
.icon-btn, .nav-item, .nav-pin, .pill {
  transition-duration: var(--d-fast) !important;
}

/* Standard interactions (buttons, cards) */
.primary-btn, .ghost-btn, .toggle-btn, .project-item, .skill-card,
.task-card, .ap-card, .recent-card {
  transition-duration: var(--d-base) !important;
}

/* Slower, more deliberate transitions (modals, view changes) */
.modal, .import-modal, .palette-backdrop, .view {
  transition-duration: var(--d-slow) !important;
}

/* ──────────────────────────────────────────────────────────────────────
   6. TYPOGRAPHY HIERARCHY (CONSISTENT VOICE)
   Establish single font-weight scale: regular(400), medium(500), semibold(600), bold(700)
   ────────────────────────────────────────────────────────────────────── */

/* Body text: regular weight */
.msg-content, .task-card .task-title, .project-card .pc-name,
.skill-card .skill-name, .ap-card .ap-title {
  font-weight: 400;
}

/* Secondary/meta text: regular */
.msg-content p, .msg-content li, .text-muted,
.task-card .task-desc, .project-card .pc-desc, .skill-card .skill-desc {
  font-weight: 400;
}

/* Labels and UI chrome: semibold (600) */
.sidebar-header, .section-title, .label, .tag-label,
.upcoming-item .title, .skill-card .skill-name,
button, .nav-item, .pill, .badge {
  font-weight: 600;
}

/* Primary buttons: semibold */
.primary-btn, .ghost-btn, .danger-btn {
  font-weight: 600;
}

/* Headings and emphasis: bold (700) */
.welcome h1, .auth-title, h1, h2, h3,
.ap-label, .page-title, .conn-tile-name {
  font-weight: 700;
}

/* Extra bold for hero/brand: 800-900 only in special cases (.brand-name, etc.) */
.brand-name {
  font-weight: 800;
}

/* ──────────────────────────────────────────────────────────────────────
   7. CONSISTENT LABEL VOICE (case + spacing)
   All structural labels: UPPERCASE + 0.12em letter-spacing
   All body/content: sentence case, no letter-spacing
   ────────────────────────────────────────────────────────────────────── */

/* Structural labels: uppercase + spaced */
.sidebar-header, .section-title, .nav-item,
[class*="-label"], [class*="-header"], .upcoming-item .days {
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
}

/* Body content: sentence case, no extra spacing */
.msg-content, .msg-content p, .msg-content li,
.task-card .task-title, .task-card .task-desc,
.project-card .pc-name, .project-card .pc-desc,
.skill-card .skill-name, .skill-card .skill-desc,
.ap-card .ap-title {
  text-transform: none !important;
  letter-spacing: normal !important;
}

/* Button text: inherit from button weight/case rules */
button, .primary-btn, .ghost-btn, .danger-btn {
  text-transform: none !important;
  letter-spacing: normal !important;
}

/* ===== /MAXOUT: q-cohesion ===== */

/* ===== MAXOUT: q-toasts ===== */
#toast-wrap { position: fixed; bottom: 22px; right: 22px; display: flex; flex-direction: column-reverse; gap: 12px; z-index: 9999; max-width: min(400px, calc(100vw - 44px)); pointer-events: none; }
.toast { pointer-events: auto; display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; background: var(--bg-elev-2, #15151f); border: 1px solid rgba(255, 255, 255, 0.08); border-left: 3px solid var(--accent, rgb(var(--accent-rgb))); border-radius: 12px; box-shadow: 0 20px 48px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08); color: var(--text, #e8e8f0); font-size: 13.5px; line-height: 1.5; cursor: pointer; opacity: 0; transform: translateX(24px) scale(0.96); transition: all 0.3s cubic-bezier(0.34, 1.2, 0.64, 1); outline: 2px solid transparent; outline-offset: 2px; position: relative; overflow: hidden; }
.toast:focus-visible { outline-color: rgba(94, 169, 255, 0.4); }
.toast.show { opacity: 1; transform: translateX(0) scale(1); }
.toast:hover { transform: translateY(-2px) scale(1.01); box-shadow: 0 24px 56px rgba(0, 0, 0, 0.6), 0 0 16px rgba(var(--accent-rgb), 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.12); }
.toast-ico { flex-shrink: 0; font-weight: 700; font-size: 14px; line-height: 1.4; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; }
.toast-msg { flex: 1; word-break: break-word; user-select: text; }
.toast::after { content: ''; position: absolute; bottom: 0; left: 0; height: 2px; width: 100%; background: currentColor; opacity: 0; transform-origin: left; }
.toast.has-timer::after { opacity: 0.4; animation: toast-drain var(--toast-duration, 4500ms) linear forwards; }
@keyframes toast-drain { 0% { width: 100%; } 100% { width: 0%; } }
.toast-x { flex-shrink: 0; opacity: 0.35; font-size: 16px; line-height: 1.2; cursor: pointer; transition: all 0.2s ease; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; padding: 2px; border-radius: 4px; }
.toast:hover .toast-x { opacity: 0.7; background: rgba(255, 255, 255, 0.06); }
.toast-x:active { transform: scale(0.9); }
.toast-success { border-left-color: var(--success); background: linear-gradient(135deg, rgba(116, 198, 154, 0.08), rgba(116, 198, 154, 0.04)); }
.toast-success::before { content: ''; position: absolute; top: -1px; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, var(--success), var(--success) 30%, transparent); opacity: 0; animation: toast-top-glow 0.5s ease-out forwards; }
.toast-success .toast-ico { color: var(--success); }
.toast-success:hover { box-shadow: 0 24px 56px rgba(0, 0, 0, 0.6), 0 0 16px rgba(116, 198, 154, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.12); }
.toast-error { border-left-color: var(--danger, #e5707a); background: linear-gradient(135deg, rgba(229, 112, 122, 0.08), rgba(229, 112, 122, 0.04)); }
.toast-error::before { content: ''; position: absolute; top: -1px; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, var(--danger), var(--danger) 30%, transparent); opacity: 0; animation: toast-top-glow 0.5s ease-out forwards; }
.toast-error .toast-ico { color: var(--danger, #e5707a); }
.toast-error:hover { box-shadow: 0 24px 56px rgba(0, 0, 0, 0.6), 0 0 16px rgba(229, 112, 122, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.12); }
.toast-info { border-left-color: rgba(255, 255, 255, 0.35); background: rgba(255, 255, 255, 0.03); }
.toast-info .toast-ico { color: rgba(255, 255, 255, 0.55); }
.toast-sync { border-left-color: var(--accent, rgb(var(--accent-rgb))); background: linear-gradient(135deg, rgb(var(--accent-rgb) / 0.08), rgb(var(--accent-rgb) / 0.04)); }
.toast-sync::before { content: ''; position: absolute; top: -1px; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, var(--accent), var(--accent) 30%, transparent); opacity: 0; animation: toast-top-glow 0.5s ease-out forwards; }
.toast-sync .toast-ico { color: var(--accent, rgb(var(--accent-rgb))); animation: toast-sync-spin 1.8s cubic-bezier(0.5, 0, 0.5, 1) infinite; }
.toast-sync:hover { box-shadow: 0 24px 56px rgba(0, 0, 0, 0.6), 0 0 16px rgb(var(--accent-rgb) / 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.12); }
.toast-warn { border-left-color: var(--warning, #d6a85f); background: linear-gradient(135deg, rgba(214, 168, 95, 0.08), rgba(214, 168, 95, 0.04)); }
.toast-warn::before { content: ''; position: absolute; top: -1px; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, var(--warning), var(--warning) 30%, transparent); opacity: 0; animation: toast-top-glow 0.5s ease-out forwards; }
.toast-warn .toast-ico { color: var(--warning, #d6a85f); }
.toast-warn:hover { box-shadow: 0 24px 56px rgba(0, 0, 0, 0.6), 0 0 16px rgba(214, 168, 95, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.12); }
.toast.removing { opacity: 0; transform: translateX(24px) scale(0.96); transition: all 0.24s cubic-bezier(0.6, 0.04, 0.98, 0.34); }
@keyframes toast-top-glow { 0% { opacity: 0; } 50% { opacity: 0.6; } 100% { opacity: 0; } }
@keyframes toast-sync-spin { 0% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(180deg) scale(1.08); } 100% { transform: rotate(360deg) scale(1); } }
.toast:nth-child(1) { animation: toast-stagger-enter 0.4s cubic-bezier(0.34, 1.2, 0.64, 1) 0s forwards; }
.toast:nth-child(2) { animation: toast-stagger-enter 0.4s cubic-bezier(0.34, 1.2, 0.64, 1) 0.08s forwards; }
.toast:nth-child(3) { animation: toast-stagger-enter 0.4s cubic-bezier(0.34, 1.2, 0.64, 1) 0.16s forwards; }
.toast:nth-child(n+4) { animation: toast-stagger-enter 0.4s cubic-bezier(0.34, 1.2, 0.64, 1) 0.24s forwards; }
@keyframes toast-stagger-enter { from { opacity: 0; transform: translateX(24px) scale(0.96); } to { opacity: 1; transform: translateX(0) scale(1); } }
@media (prefers-reduced-motion: reduce) { .toast, .toast.show, .toast.removing, .toast-sync .toast-ico, .toast::after, .toast::before { animation: none !important; transition: opacity 0.01ms !important; } }
body[data-theme="light"] .toast { background: var(--bg-elev-2, #f3f5fb); border-color: rgba(20, 22, 40, 0.1); color: var(--text, #161826); box-shadow: 0 20px 48px rgba(40, 50, 90, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.4); }
body[data-theme="light"] .toast:hover { box-shadow: 0 24px 56px rgba(40, 50, 90, 0.16), 0 0 16px rgba(var(--accent-rgb), 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.5); }
body[data-theme="light"] .toast-x { color: var(--text-dim); }
body[data-theme="light"] .toast:hover .toast-x { background: rgba(20, 22, 40, 0.06); }
body[data-theme="light"] .toast-success { border-left-color: #5a9f6f; background: linear-gradient(135deg, rgba(90, 159, 111, 0.1), rgba(90, 159, 111, 0.05)); }
body[data-theme="light"] .toast-success .toast-ico { color: #5a9f6f; }
body[data-theme="light"] .toast-success:hover { box-shadow: 0 24px 56px rgba(40, 50, 90, 0.16), 0 0 16px rgba(90, 159, 111, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.5); }
body[data-theme="light"] .toast-error { border-left-color: #d46070; background: linear-gradient(135deg, rgba(212, 96, 112, 0.1), rgba(212, 96, 112, 0.05)); }
body[data-theme="light"] .toast-error .toast-ico { color: #d46070; }
body[data-theme="light"] .toast-error:hover { box-shadow: 0 24px 56px rgba(40, 50, 90, 0.16), 0 0 16px rgba(212, 96, 112, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.5); }
body[data-theme="light"] .toast-info { border-left-color: rgba(20, 22, 40, 0.25); background: rgba(20, 22, 40, 0.04); }
body[data-theme="light"] .toast-info .toast-ico { color: rgba(20, 22, 40, 0.55); }
body[data-theme="light"] .toast-sync { border-left-color: rgb(var(--accent-rgb)); background: linear-gradient(135deg, rgb(var(--accent-rgb) / 0.1), rgb(var(--accent-rgb) / 0.05)); }
body[data-theme="light"] .toast-sync .toast-ico { color: rgb(var(--accent-rgb)); }
body[data-theme="light"] .toast-sync:hover { box-shadow: 0 24px 56px rgba(40, 50, 90, 0.16), 0 0 16px rgb(var(--accent-rgb) / 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.5); }
body[data-theme="light"] .toast-warn { border-left-color: #b8926a; background: linear-gradient(135deg, rgba(184, 146, 106, 0.1), rgba(184, 146, 106, 0.05)); }
body[data-theme="light"] .toast-warn .toast-ico { color: #b8926a; }
body[data-theme="light"] .toast-warn:hover { box-shadow: 0 24px 56px rgba(40, 50, 90, 0.16), 0 0 16px rgba(184, 146, 106, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.5); }
@media (max-width: 600px) { #toast-wrap { left: 12px; right: 12px; bottom: 12px; max-width: none; gap: 10px; } .toast { padding: 12px 14px; font-size: 13px; } .toast-ico { width: 16px; height: 16px; font-size: 13px; } }
/* ===== /MAXOUT: q-toasts ===== */

/* History menu - Delete chat (destructive) */
.hist-move-menu .hmm-delete { color: var(--danger); }
.hist-move-menu .hmm-delete:hover { background: rgb(223 107 115 / 0.10); color: var(--danger); }


/* Delete-assignment button (project/class detail) */
.assign-row .assign-del { background: none; border: 0; color: var(--text-dim); cursor: pointer; padding: 6px; border-radius: 7px; opacity: 0; flex-shrink: 0; display: inline-flex; align-items: center; transition: opacity .14s ease, background .14s ease, color .14s ease; }
.assign-row:hover .assign-del { opacity: 0.55; }
.assign-row .assign-del:hover { opacity: 1 !important; color: var(--danger); background: rgb(223 107 115 / 0.10); }


/* Empty-classes actions row */
.projects-empty-actions { display: flex; gap: 10px; align-items: center; justify-content: center; flex-wrap: wrap; margin-top: 4px; }


/* Pinned chats in the sidebar PINNED section */
.project-item.pinned-chat .pi-chat-ico { display: inline-flex; align-items: center; color: var(--text-dim); margin-right: 7px; flex-shrink: 0; }
.project-item.pinned-chat .pi-chat-ico svg { width: 14px; height: 14px; }


/* Center the empty Classes/Projects state in the content area (vertical + horizontal) */
body[data-view="projects"] .projects-page:has(.projects-empty) { position: relative; padding: 0 !important; }
body[data-view="projects"] .projects-page:has(.projects-empty) .projects-empty { position: absolute; top: 50%; left: 50%; width: calc(100% - 64px); transform: translate(-50%, -50%); animation: emptyFadeInC 0.42s cubic-bezier(0.16,1,0.3,1); }
@keyframes emptyFadeInC { from { opacity: 0; transform: translate(-50%, calc(-50% + 10px)); } to { opacity: 1; transform: translate(-50%, -50%); } }
body[data-view="projects"] .projects-page:has(.projects-empty) > .projects-grid { width: 100%; display: block !important; max-width: none; margin: 0; min-height: 0; }


/* ════ MATH PLOT - split-panel widget (equation | graph), image-32 look ════ */
.plot-figure.plot-panel { display: flex; align-items: stretch; gap: 0; padding: 0; overflow: hidden; }
.plot-panel .plot-left { flex: 0 0 36%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 22px 18px; border-right: 1px solid rgb(94 169 255 / 0.12); gap: 10px; }
.plot-panel .plot-eq { font-size: 25px; color: #EAF2FF; font-family: 'Iowan Old Style', Georgia, 'Times New Roman', serif; text-align: center; line-height: 1.55; }
.plot-panel .plot-eq sup { font-size: 0.62em; vertical-align: super; }
.plot-panel .plot-eq i { font-style: italic; }
.plot-panel .plot-sub { font-size: 11px; color: var(--text-dim); font-family: 'JetBrains Mono', ui-monospace, monospace; text-transform: uppercase; letter-spacing: 0.08em; text-align: center; }
.plot-panel .plot-right { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; padding: 14px 16px; }
.plot-panel .plot-right .plot-svg { padding: 0; width: 100%; }
body[data-theme="light"] .plot-panel .plot-eq { color: #16213C; }
body[data-theme="light"] .plot-panel .plot-left { border-right-color: rgb(37 99 235 / 0.18); }
@media (max-width: 620px) { .plot-figure.plot-panel { flex-direction: column; } .plot-panel .plot-left { flex-basis: auto; border-right: 0; border-bottom: 1px solid rgb(94 169 255 / 0.12); padding: 16px; } }

/* ── Flashcards: ```flashcards block → interactive flip-card deck ─────────── */
.fc-deck { display: block; box-sizing: border-box; width: 100%; min-width: 260px; margin: 14px 0; max-width: 520px; border: 1px solid rgba(255,255,255,.10); border-radius: 16px; padding: 16px; background: linear-gradient(180deg, rgba(77,168,255,.06), rgba(255,255,255,.02)); }
.fc-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.fc-title { font-weight: 700; font-size: 14px; color: #eaf2ff; }
.fc-counter { font-size: 12px; color: #8a93a6; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fc-progress { height: 5px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; margin-bottom: 14px; }
.fc-progress-fill { height: 100%; width: 0; background: linear-gradient(90deg, #4da8ff, #2563eb); border-radius: 999px; transition: width .35s cubic-bezier(.2,.7,.2,1); }
.fc-stack { display: block; width: 100%; perspective: 1200px; outline: none; }
.fc-stack:focus-visible { box-shadow: 0 0 0 2px rgba(77,168,255,.5); border-radius: 16px; }
.fc-card { display: block; width: 100%; box-sizing: border-box; cursor: pointer; min-height: 150px; }
.fc-inner { position: relative; display: grid; width: 100%; box-sizing: border-box; min-height: 150px; transform-style: preserve-3d; transition: transform .5s cubic-bezier(.4,.2,.2,1); }
.fc-card.flipped .fc-inner { transform: rotateY(180deg); }
.fc-card.fc-done .fc-inner { transform: none !important; }
.fc-face { grid-area: 1 / 1; position: relative; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 14px; border: 1px solid rgba(255,255,255,.12); padding: 34px 20px 28px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; box-sizing: border-box; overflow: hidden; }
.fc-front { background: #141824; }
.fc-back { background: linear-gradient(180deg, #16243a, #13203a); transform: rotateY(180deg); }
.fc-label { position: absolute; top: 12px; left: 14px; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: #4da8ff; }
.fc-text { width: 100%; font-size: 17px; line-height: 1.45; color: #eef2f8; font-weight: 500; overflow-wrap: break-word; word-break: break-word; hyphens: auto; }
.fc-tap { position: absolute; left: 0; right: 0; bottom: 10px; text-align: center; font-size: 10px; color: #5e6678; pointer-events: none; }
.fc-actions { display: flex; gap: 10px; margin-top: 14px; }
.fc-btn { flex: 1; padding: 10px; border-radius: 10px; font-weight: 700; font-size: 13px; cursor: pointer; border: 1px solid transparent; transition: filter .15s, transform .1s, background .15s; }
.fc-prev { flex: 0 0 auto; min-width: 78px; background: transparent; color: #9aa3b5; border-color: rgba(255,255,255,.14); }
.fc-prev:not(:disabled):hover { background: rgba(255,255,255,.08); color: #e6ebf4; }
.fc-prev:disabled { opacity: .35; cursor: default; }
body[data-theme="light"] .fc-prev { color: #6b7280; border-color: #e2e7f0; }
body[data-theme="light"] .fc-prev:not(:disabled):hover { background: #eef1f6; color: #1a1d24; }
.fc-btn:active { transform: translateY(1px); }
.fc-again { background: rgba(255,255,255,.06); color: #c4ccda; border-color: rgba(255,255,255,.12); }
.fc-again:hover { background: rgba(255,255,255,.10); }
.fc-known { background: linear-gradient(135deg, #4da8ff, #2563eb); color: #fff; }
.fc-known:hover { filter: brightness(1.08); }
.fc-known:disabled { opacity: .45; cursor: default; filter: none; }
@media (prefers-reduced-motion: reduce) { .fc-inner { transition: none; } .fc-progress-fill { transition: none; } }
/* light theme */
body[data-theme="light"] .fc-deck { border-color: #e2e7f0; background: linear-gradient(180deg, #f3f8ff, #fbfcfe); }
body[data-theme="light"] .fc-title { color: #0f1320; }
body[data-theme="light"] .fc-counter { color: #6b7280; }
body[data-theme="light"] .fc-progress { background: #e6eaf1; }
body[data-theme="light"] .fc-face { border-color: #e2e7f0; }
body[data-theme="light"] .fc-front { background: #ffffff; }
body[data-theme="light"] .fc-back { background: linear-gradient(180deg, #eef5ff, #f7faff); }
body[data-theme="light"] .fc-text { color: #1a1d24; }
body[data-theme="light"] .fc-tap { color: #9aa0ac; }
body[data-theme="light"] .fc-again { background: #f0f2f6; color: #3a4150; border-color: #e2e7f0; }
body[data-theme="light"] .fc-again:hover { background: #e7ebf2; }

/* ════════════════════════════════════════════════════════════
   FIRST-SESSION WELCOME  ·  teach-first card takeover
   Shown once per window session inside #welcome. Reuses the
   .welcome / .welcome-title / .grad tokens; cards echo .suggestion.
   ════════════════════════════════════════════════════════════ */
.welcome.welcome-first {
  max-width: 760px;
  padding: 48px 24px 40px;
  text-align: center;
}
.welcome-first .ws-intro {
  color: var(--text-muted);
  font-size: 15.5px;
  margin-bottom: 30px;
}

.welcome-first .ws-groups {
  display: flex;
  flex-direction: column;
  gap: 26px;
  text-align: left;
  margin: 0 auto;
  max-width: 700px;
}
.welcome-first .ws-group-label {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 0 2px 11px;
}
.welcome-first .ws-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr;
  gap: 12px;
}

/* Card - same family as .suggestion, with a trailing arrow affordance */
.welcome-first .ws-card {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  min-height: 66px;
  padding: 13px 14px;
  text-align: left;
  border-radius: var(--r-lg);
  background: var(--bg-elev-1);
  border: 1px solid var(--border);
  color: var(--text);
  cursor: pointer;
  animation: fadeUp 0.5s var(--ease-out) both;
  transition: transform var(--d-fast) var(--ease-out),
              border-color var(--d-fast) var(--ease-out),
              box-shadow var(--d-fast) var(--ease-out),
              background var(--d-fast) var(--ease-out);
}
.welcome-first .ws-card:hover {
  background: var(--bg-elev-2);
  border-color: var(--border-focus);
  box-shadow: var(--glow-accent);
  transform: translateY(-3px);
}
.welcome-first .ws-card:active { transform: translateY(-1px); }
.welcome-first .ws-card:focus-visible {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: var(--glow-accent);
}

.welcome-first .ws-card-emoji {
  width: 40px; height: 40px;
  flex-shrink: 0;
  display: grid; place-items: center;
  font-size: 20px;
  line-height: 1;
  border-radius: var(--r-md);
  background: var(--grad-soft);
  border: 1px solid var(--border);
}
.welcome-first .ws-card-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.welcome-first .ws-card-title {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.25;
  color: var(--text);
}
.welcome-first .ws-card-blurb {
  font-size: 11.5px;
  color: var(--text-dim);
  line-height: 1.3;
}
.welcome-first .ws-card-go {
  flex-shrink: 0;
  width: 18px; height: 18px;
  color: var(--text-dim);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--d-fast) var(--ease-out),
              transform var(--d-fast) var(--ease-out),
              color var(--d-fast) var(--ease-out);
}
.welcome-first .ws-card-go svg { width: 18px; height: 18px; }
.welcome-first .ws-card:hover .ws-card-go,
.welcome-first .ws-card:focus-visible .ws-card-go {
  opacity: 1;
  transform: none;
  color: var(--accent);
}

/* Skip → drop to the normal empty-state */
.welcome-first .ws-skip {
  margin: 30px auto 0;
  display: inline-block;
  padding: 7px 14px;
  font-size: 12.5px;
  color: var(--text-dim);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-full, 999px);
  cursor: pointer;
  transition: color var(--d-fast) var(--ease-out),
              background var(--d-fast) var(--ease-out),
              border-color var(--d-fast) var(--ease-out);
}
.welcome-first .ws-skip:hover {
  color: var(--text-muted);
  background: var(--bg-elev-2);
  border-color: var(--border);
}

@media (max-width: 640px) {
  .welcome-first .ws-grid { grid-template-columns: 1fr; }
  .welcome.welcome-first { padding: 36px 16px 32px; }
}

/* Light theme: cards sit on the lighter elevations cleanly */
body[data-theme="light"] .welcome-first .ws-card { background: var(--bg-elev-2); }
body[data-theme="light"] .welcome-first .ws-card:hover { background: var(--bg-elev-3); }
/* ════════════════════════════════════════════════════════════════════
   DISCOVER VIEW - gallery of what Auron can do
   ════════════════════════════════════════════════════════════════════ */
body[data-view="discover"] .view-discover { display: grid; grid-template-rows: auto 1fr; }

.disc-scroll { overflow-y: auto; min-height: 0; }
.disc-body {
  max-width: 1040px;
  width: 100%;
  margin: 0 auto;
  padding: var(--s-6) var(--s-8) var(--s-16);
}

/* ── Hero ── */
.disc-hero {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: var(--grad-soft);
  padding: var(--s-8) var(--s-8) var(--s-6);
  margin-bottom: var(--s-8);
}
.disc-hero-orb {
  position: absolute;
  top: -120px; right: -80px;
  width: 320px; height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgb(var(--accent-rgb) / 0.20), transparent 70%);
  filter: blur(8px);
  pointer-events: none;
}
.disc-hero-title {
  position: relative;
  font-size: var(--fs-2xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: var(--leading-tight);
  margin: 0 0 var(--s-2);
}
.disc-hero-title .grad {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.disc-hero-sub {
  position: relative;
  color: var(--text-muted);
  font-size: var(--fs-md);
  line-height: var(--leading-normal);
  max-width: 60ch;
  margin: 0;
}

/* ── Category groups ── */
.disc-group { margin-top: var(--s-8); }
.disc-group:first-of-type { margin-top: 0; }
.disc-group-head { margin-bottom: var(--s-4); }
.disc-group-title {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 0 0 2px;
}
.disc-group-sub {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  margin: 0;
}

/* ── Card grid ── */
.disc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--s-3);
}

.disc-card {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  text-align: left;
  padding: var(--s-4);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--bg-elev-2);
  color: var(--text);
  cursor: pointer;
  font: inherit;
  width: 100%;
  transition: border-color var(--d-base) var(--ease-out),
              background var(--d-fast) var(--ease-out),
              transform var(--d-fast) var(--ease-out),
              box-shadow var(--d-base) var(--ease-out);
}
.disc-card:hover {
  border-color: var(--border-focus);
  background: var(--bg-elev-3);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.disc-card:focus-visible {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.disc-card:active { transform: translateY(0); }

.disc-card-emoji {
  flex-shrink: 0;
  width: 42px; height: 42px;
  display: grid;
  place-items: center;
  font-size: 22px;
  line-height: 1;
  border-radius: var(--r-md);
  background: var(--grad-soft);
  border: 1px solid var(--border);
}
.disc-card-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.disc-card-title {
  font-size: var(--fs-base);
  font-weight: 600;
  line-height: var(--leading-tight);
  color: var(--text);
}
.disc-card-blurb {
  font-size: var(--fs-sm);
  color: var(--text-dim);
  line-height: 1.35;
}
.disc-card-go {
  flex-shrink: 0;
  color: var(--text-dim);
  display: grid;
  place-items: center;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--d-base) var(--ease-out),
              transform var(--d-base) var(--ease-out),
              color var(--d-base) var(--ease-out);
}
.disc-card:hover .disc-card-go,
.disc-card:focus-visible .disc-card-go {
  opacity: 1;
  transform: translateX(0);
  color: var(--accent);
}

@media (max-width: 760px) {
  .disc-body { padding: var(--s-4) var(--s-4) var(--s-12); }
  .disc-grid { grid-template-columns: 1fr; }
  .disc-hero { padding: var(--s-6) var(--s-5) var(--s-5); }
}
/* ════════════════════════════════════════════════════════════════════════════
   BRAND ORB - SPIN, NOT FLASH (authoritative; appended last = wins the cascade)
   Founder direction: "make it spin not flash." The logo orb mark rotates slowly
   and continuously under a steady glow. This block defeats the older glow/breathe
   flash definitions on the welcome / auth / sidebar brand orb marks regardless of
   where they sit earlier in this file.
   ════════════════════════════════════════════════════════════════════════════ */
@keyframes orbSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* The SVG logo marks (welcome hero, auth/paywall logo, sidebar brand) → slow spin.
   Steady glow held constant; only rotation animates. */
.welcome-mark,
.auth-logo,
.brand-logo img {
  animation: orbSpin 10s linear infinite !important;
  transform-origin: 50% 50% !important;
}
/* keep the auth logo's own steady glow while it spins */
.auth-logo { filter: drop-shadow(0 0 12px rgb(var(--accent-rgb) / 0.40)); }

@media (prefers-reduced-motion: reduce) {
  /* Spin is motion - kill it for users who opt out; the steady glow remains. */
  .welcome-mark,
  .auth-logo,
  .brand-logo img,
  .orb-pulse,
  .conn-hero-orb,
  .desktop-exclusive-orb,
  .conn-hero-orb::before, .conn-hero-orb::after,
  .desktop-exclusive-orb::before, .desktop-exclusive-orb::after,
  .typing-msg-streaming .msg-avatar-orb .orb-pulse,
  body[data-view="chat"] .view-chat .msg.assistant.streaming .msg-avatar.msg-avatar-orb .orb-mark,
  body[data-view="chat"] .view-chat .msg.assistant:not(.streaming) .msg-avatar.msg-avatar-orb .orb-mark {
    animation: none !important;
    transform: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .disc-card, .disc-card-go { transition: none; }
  .disc-card:hover { transform: none; }
}

/* Welcome + Discover cards: render the ICONS SVG in neon-blue (not emoji) */
.welcome-first .ws-card-emoji svg, .disc-card-emoji svg { width: 20px; height: 20px; color: var(--accent); }
.welcome-first .ws-card-emoji, .disc-card-emoji { color: var(--accent); }


/* ════════════════════════════════════════════════════════════════════════
   SIDEBAR - Pinned + Recents + Account row  (clean reference restyle)
   Appended LAST so it wins the cascade. Tokens only; scoped to .sidebar.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Section labels: quiet micro-caps ("Pinned" / "Recents") ───────────── */
.sidebar .sidebar-section { gap: 3px !important; }
.sidebar .sidebar-header,
.sidebar .sidebar-section .sidebar-header {
  font-family: var(--font-mono) !important;
  font-size: 9.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--text-dim) !important;
  opacity: 0.7 !important;
  padding: 12px 8px 5px !important;
  margin-bottom: 0 !important;
}
.sidebar .sidebar-header span { padding-left: 0 !important; }
.sidebar .sidebar-header span::before { display: none !important; }
.sidebar .sidebar-header .icon-btn {
  width: 20px; height: 20px; font-size: 15px; line-height: 1;
  color: var(--text-dim) !important; opacity: 0.7; border-radius: var(--r-sm);
  transition: background var(--d-fast) var(--ease-out), color var(--d-fast) var(--ease-out), opacity var(--d-fast) var(--ease-out);
}
.sidebar .sidebar-header .icon-btn:hover {
  background: rgb(var(--accent-rgb) / 0.10) !important; color: var(--accent) !important; opacity: 1;
}

/* ── Pinned list: tidy rows, leading folder/bookmark icon, one-line name ── */
.sidebar .sidebar-scroll { display: flex; flex-direction: column; gap: 4px; }
.sidebar .project-list { gap: 1px !important; }

.sidebar .project-item {
  position: relative;
  display: flex; align-items: center; gap: 9px;
  padding: 7px 10px !important;
  border-radius: var(--r-sm) !important;
  border: 1px solid transparent !important;
  background: none !important;
  transition: background var(--d-fast) var(--ease-out), color var(--d-fast) var(--ease-out) !important;
}
.sidebar .project-item::before { display: none !important; }       /* kill old accent bar */
.sidebar .project-item:hover { background: rgba(255,255,255,0.045) !important; transform: none !important; }

/* leading glyph (folder for classes, bookmark for pinned chats) */
.sidebar .project-item .pi-chat-ico {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-dim); opacity: 0.85; flex-shrink: 0; margin-right: 0;
  transition: color var(--d-fast) var(--ease-out), opacity var(--d-fast) var(--ease-out);
}
.sidebar .project-item .pi-chat-ico svg { width: 15px; height: 15px; stroke-width: 1.9; }
.sidebar .project-item:hover .pi-chat-ico { color: var(--text-muted); opacity: 1; }

.sidebar .project-item .name {
  flex: 1 1 auto; min-width: 0;
  font-family: var(--font-sans) !important;
  font-size: 12.5px !important; font-weight: 500 !important;
  letter-spacing: 0; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sidebar .project-item .count {
  flex-shrink: 0; margin-left: auto;
  font-family: var(--font-mono);
  font-size: 9.5px !important; font-weight: 600;
  background: rgba(255,255,255,0.05) !important;
  color: var(--text-dim) !important;
  border-radius: var(--r-full) !important;
  padding: 1px 7px !important;
}

/* active pinned row: quiet tint, glyph + name pick up accent */
.sidebar .project-item.active {
  background: rgb(var(--accent-rgb) / 0.10) !important;
  border-color: transparent !important;
}
.sidebar .project-item.active .name {
  background: none !important; -webkit-text-fill-color: var(--text) !important; color: var(--text) !important;
}
.sidebar .project-item.active .pi-chat-ico { color: var(--accent); opacity: 1; }
.sidebar .project-item.active .count { background: rgb(var(--accent-rgb) / 0.18) !important; color: var(--accent) !important; }

/* unpin 📌 button: hidden until row hover so the row reads clean */
.sidebar .project-item .pi-unpin {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; display: grid; place-items: center;
  font-size: 11px; line-height: 1; border-radius: var(--r-sm);
  color: var(--text-dim); opacity: 0; pointer-events: none;
  transition: opacity var(--d-fast) var(--ease-out), background var(--d-fast) var(--ease-out);
}
.sidebar .project-item:hover .pi-unpin,
.sidebar .project-item:focus-within .pi-unpin { opacity: 0.7; pointer-events: auto; }
.sidebar .project-item .pi-unpin:hover { opacity: 1; background: rgba(255,255,255,0.06); }
.sidebar .project-item:has(.pi-unpin) { padding-right: 30px !important; }
.sidebar .project-item:has(.pi-unpin) .count { margin-right: 22px; }

/* ── Recents list: plain single-line titles, truncated, no leading dot ──── */
.sidebar .recent-chats { gap: 0 !important; }
.sidebar .recent-chat-item {
  position: relative;
  display: block;
  padding: 6px 10px !important;
  font-family: var(--font-sans) !important;
  font-size: 12.5px !important; font-weight: 450;
  letter-spacing: 0 !important;
  color: var(--text-muted) !important;
  border-radius: var(--r-sm) !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: background var(--d-fast) var(--ease-out), color var(--d-fast) var(--ease-out) !important;
}
.sidebar .recent-chat-item::before { display: none !important; }   /* remove dot/bar from earlier layers */
.sidebar .recent-chat-item:hover {
  background: rgba(255,255,255,0.045) !important; color: var(--text) !important;
  transform: none !important; padding-left: 10px !important;
}
.sidebar .recent-chat-item.active { background: rgb(var(--accent-rgb) / 0.10) !important; color: var(--text) !important; }

/* empty states */
.sidebar .recent-chats .empty,
.sidebar .sidebar-empty {
  font-family: var(--font-sans) !important;
  font-size: 11.5px !important; color: var(--text-dim) !important;
  letter-spacing: 0 !important; padding: 6px 10px !important; opacity: 0.85;
}

/* ── Account row: round avatar · name · "· Plan" · chevron · export icon ── */
.sidebar .sidebar-footer { gap: 8px !important; padding-top: 12px !important; border-top: 1px solid var(--border) !important; }

.sidebar .account-card {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 8px 9px !important;
  background: var(--bg-elev-1) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-md) !important;
  box-shadow: none !important; text-align: left; cursor: pointer;
  transition: background var(--d-base) var(--ease-out), border-color var(--d-base) var(--ease-out) !important;
}
.sidebar .account-card:hover {
  background: var(--bg-elev-2) !important;
  border-color: var(--border-strong) !important;
  transform: none !important; box-shadow: none !important;
}

/* round avatar (beats the square --r-sm rule at ~10228 and the later .ac-avatar at ~19331) */
.sidebar .account-card .ac-avatar {
  width: 30px; height: 30px;
  border-radius: 50% !important;
  background: linear-gradient(135deg, rgb(var(--accent-rgb)), rgb(var(--accent-blue-rgb))) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12) !important;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: 12.5px; flex-shrink: 0; text-transform: uppercase;
}

.sidebar .account-card .ac-info {
  flex: 1 1 auto; min-width: 0; display: flex; flex-direction: row; align-items: baseline; gap: 5px;
}
.sidebar .account-card .ac-name {
  font-family: var(--font-sans) !important;
  font-size: 12.5px !important; font-weight: 600 !important; letter-spacing: 0 !important;
  color: var(--text) !important; text-transform: none !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.sidebar .account-card .ac-plan {
  flex-shrink: 0;
  font-family: var(--font-sans) !important;
  font-size: 11.5px !important; font-weight: 500 !important;
  letter-spacing: 0 !important; text-transform: none !important;
  color: var(--text-dim) !important; opacity: 1 !important;
}

.sidebar .account-card .ac-chev {
  flex-shrink: 0; color: var(--text-dim) !important; margin-left: 2px;
  transition: color var(--d-fast) var(--ease-out);
}
.sidebar .account-card:hover .ac-chev { color: var(--text-muted) !important; transform: none; }

/* trailing export / download icon */
.sidebar .account-card .ac-export {
  flex-shrink: 0; width: 24px; height: 24px;
  display: grid; place-items: center; border-radius: var(--r-sm);
  color: var(--text-dim); opacity: 0.8; cursor: pointer;
  transition: background var(--d-fast) var(--ease-out), color var(--d-fast) var(--ease-out), opacity var(--d-fast) var(--ease-out);
}
.sidebar .account-card .ac-export:hover {
  background: rgb(var(--accent-rgb) / 0.12); color: var(--accent); opacity: 1;
}
.sidebar .account-card .ac-export:focus-visible {
  outline: 2px solid rgb(var(--accent-rgb) / 0.5); outline-offset: 1px;
}

/* Light theme: keep the row legible on white */
body[data-theme="light"] .sidebar .account-card { background: #fff !important; }
body[data-theme="light"] .sidebar .account-card:hover { background: var(--bg-elev-2) !important; }


/* ============================================================================
   AI Tutor landing header - append near the existing .view-autopilot block
   (after styles.css L8601, the .ap-back hover rule). Scoped to .view-autopilot
   so nothing else is touched. Uses existing tokens: --grad, --accent-rgb,
   --bg-elev-1, --border, --text/-muted/-dim, --d-base, --ease-out, --font-mono.
   ============================================================================ */

/* ── Hero band: calm orb + headline + the "I never do it for you" promise ── */
.view-autopilot .ap-hero {
  display: flex; align-items: center; gap: 22px;
  max-width: 1180px;
  padding: 6px 0 22px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--border);
  position: relative;
}
/* Real product logo (was a CSS placeholder orb). Image element, no gradient/glow
   /ring pseudo-elements - just the mark with a calm float + a slow drop-shadow lift. */
.view-autopilot .ap-hero-orb {
  width: 56px; height: 56px; flex-shrink: 0;
  margin-left: 2px; position: relative;
  display: block; object-fit: contain;
  filter: drop-shadow(0 2px 10px rgb(var(--accent-rgb) / 0.30));
  animation: apOrbFloat 4s ease-in-out infinite;
}
@keyframes apOrbFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

.view-autopilot .ap-hero-text { flex: 1; min-width: 0; }
.view-autopilot .ap-hero-eyebrow {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.18em; color: var(--text-dim);
  margin: 0 0 7px;
}
.view-autopilot .ap-hero-title {
  font-size: 24px; font-weight: 800; letter-spacing: -0.02em;
  line-height: 1.22; margin: 0 0 9px; color: var(--text);
}
.view-autopilot .ap-hero-title .grad {
  background: var(--grad); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.view-autopilot .ap-hero-sub {
  font-size: 13.5px; line-height: 1.6; color: var(--text-muted);
  margin: 0; max-width: 680px;
}
.view-autopilot .ap-hero-sub strong {
  color: var(--text); font-weight: 700;
  text-decoration: underline; text-decoration-color: rgb(var(--accent-rgb) / 0.55);
  text-underline-offset: 2px;
}

/* ── Quick entry points: three tappable tiles, accent left-edge on hover ─── */
.view-autopilot .ap-entries {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px; max-width: 1180px; margin-bottom: 30px;
}
.view-autopilot .ap-entry {
  display: flex; align-items: center; gap: 13px; text-align: left;
  padding: 15px 15px 15px 16px;
  background: linear-gradient(180deg, rgba(255,255,255,0.014), rgba(255,255,255,0)), var(--bg-elev-1);
  border: 1px solid var(--border); border-radius: 14px;
  cursor: pointer; position: relative; overflow: hidden;
  transition: border-color var(--d-base) var(--ease-out),
              transform var(--d-base) var(--ease-out),
              background var(--d-base) var(--ease-out);
}
.view-autopilot .ap-entry::before {
  content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 2px;
  border-radius: 2px; background: rgb(var(--accent-rgb));
  opacity: 0; transform: scaleY(0.4); transform-origin: center;
  transition: opacity var(--d-base) var(--ease-out), transform var(--d-base) var(--ease-out);
}
.view-autopilot .ap-entry:hover {
  border-color: rgb(var(--accent-rgb) / 0.30); transform: translateY(-1px);
  background: radial-gradient(420px 120px at 0% 0%, rgb(var(--accent-rgb) / 0.05), transparent 70%), var(--bg-elev-1);
}
.view-autopilot .ap-entry:hover::before { opacity: 0.85; transform: scaleY(1); }
.view-autopilot .ap-entry:active { transform: translateY(0); }

.view-autopilot .ap-entry-ico {
  width: 38px; height: 38px; flex-shrink: 0;
  display: grid; place-items: center; border-radius: 11px;
  background: radial-gradient(circle at 50% 40%, rgb(var(--accent-rgb) / 0.12), transparent 70%), rgba(255,255,255,0.02);
  border: 1px solid rgb(var(--accent-rgb) / 0.16);
  color: rgb(var(--accent-rgb));
}
.view-autopilot .ap-entry-ico svg { width: 19px; height: 19px; }
.view-autopilot .ap-entry-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.view-autopilot .ap-entry-title { font-size: 14px; font-weight: 650; letter-spacing: -0.01em; color: var(--text); }
.view-autopilot .ap-entry-desc { font-size: 11.5px; line-height: 1.4; color: var(--text-dim); }
.view-autopilot .ap-entry-arrow {
  flex-shrink: 0; color: var(--text-dim); font-size: 16px;
  transition: transform var(--d-base) var(--ease-out), color var(--d-base) var(--ease-out);
}
.view-autopilot .ap-entry:hover .ap-entry-arrow { color: var(--accent); transform: translateX(3px); }

/* ── Run-history block: keep the existing grid, just label it as sessions ── */
.view-autopilot .ap-runs-block { max-width: 1180px; }
.view-autopilot .ap-runs-head {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-dim);
  margin: 0 0 13px;
}
/* Empty state now lives inside .ap-runs-block (a plain block, not the grid), so
   the old grid-column:1/-1 rule (L10442) is a no-op; center it explicitly. */
.view-autopilot .ap-runs-block .ap-dash-empty { padding: 56px 24px !important; }

@media (max-width: 720px) {
  .view-autopilot .ap-hero { flex-direction: column; align-items: flex-start; gap: 16px; }
  .view-autopilot .ap-hero-title { font-size: 21px; }
}

/* ═══ CONNECTOR BRAND LOGOS - sizing ═════════════════════════════════════════
   Append to the END of styles.css so it wins the cascade over the four earlier
   .conn-tile-icon blocks (lines 4901, 8789, 12446, 18456) WITHOUT touching them.

   Two render modes, auto-detected with :has(svg):
   • Glyph marks (Notion / Slack / Linear / GitHub / Todoist / ...) - drawn on a
     ~44 viewBox with built-in rounded-rect background, so we keep the tile plate
     subtle and inset the glyph to ~26px so it reads as a logo, not a wallpaper.
   • The existing school rule at line 10445 already strips the plate and fills
     edge-to-edge; this block keeps that behavior intact and just locks crispness.

   NOTE: the request asks for ~24px marks. The icon plate is 42-48px across the
   themes; a 26px logo inside it is the visual equivalent of a 24px favicon and
   stays optically centered. Tune --conn-logo-size below to taste. ════════════ */

:root { --conn-logo-size: 26px; }

/* Any connector icon that resolved to an SVG: center it, kill the gradient plate
   bleed-through edges, and render the mark crisply. Applies in BOTH the standalone
   .conn-tile-icon and the .view-connectors scope. */
.conn-tile-icon:has(svg) {
  overflow: hidden;
  /* keep a faint plate behind glyph marks; school full-bleed logos override below */
  padding: 0;
}
.conn-tile-icon:has(svg) > svg {
  width: var(--conn-logo-size);
  height: var(--conn-logo-size);
  display: block;
  /* crisp edges on hairline strokes + small text inside the marks */
  shape-rendering: geometricPrecision;
  image-rendering: -webkit-optimize-contrast;
}

/* Full-bleed brand tiles (logos that ship their OWN rounded-rect background:
   Classroom, Canvas, Schoology, PowerSchool, Blackboard, Notion, Slack, GitHub,
   Todoist, Linear, Trello, Discord, etc.) should fill the plate edge-to-edge and
   inherit the tile's corner radius. We detect them structurally: an SVG whose
   first child is a full-cover <rect>. Simpler + robust: opt them in by class. */
.conn-tile-icon.logo-bleed:has(svg) > svg,
.view-connectors .conn-tile-icon.logo-bleed:has(svg) > svg {
  width: 100%;
  height: 100%;
  border-radius: inherit;
}

/* The school rule at line 10445 already strips background/border for view-connectors
   SVGs. Re-assert a clean container there so the productivity glyph marks (which do
   NOT fill the plate) keep the subtle accent plate, while bleed logos sit flush.
   This OVERRIDES 10445's `background:none` for the glyph (non-bleed) case. */
.view-connectors .conn-tile-icon:has(svg) {
  background:
    linear-gradient(160deg, rgb(var(--accent-rgb) / 0.18), rgba(255,255,255,0.03)) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  overflow: hidden;
}
.view-connectors .conn-tile-icon.logo-bleed:has(svg) {
  background: none !important;
  border: none !important;
}
.view-connectors .conn-tile-icon:has(svg) > svg {
  width: var(--conn-logo-size);
  height: var(--conn-logo-size);
}

/* Light theme: white-card brand marks (Notion/Asana/Apple Reminders/Anki/etc.)
   would vanish on a near-white plate, so give SVG plates a faint neutral wash and
   a hairline so the mark always has contrast. */
body[data-theme="light"] .view-connectors .conn-tile-icon:has(svg) {
  background:
    linear-gradient(160deg, rgb(var(--accent-rgb) / 0.10), var(--bg-elev-2)) !important;
  border: 1px solid var(--border) !important;
}
body[data-theme="light"] .view-connectors .conn-tile-icon.logo-bleed:has(svg) {
  background: none !important;
  border: none !important;
}

/* Coming-soon tiles already dim the icon (line 12543); keep logos legible-but-muted. */
.conn-tile.coming-soon .conn-tile-icon:has(svg) > svg { opacity: 0.78; }

/* Hover lift already handled at 11540-11544; nothing to add. */
/* ═══ /CONNECTOR BRAND LOGOS ═════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════
   CONNECTOR "More" CARD + native catalog modal.
   Append to the end of styles.css (or right after the .conn-tile-actions
   block near line 5025). Uses existing tokens; nothing here overrides
   the base .modal / .conn-tile rules.
   ════════════════════════════════════════════════════════════ */

/* The trailing "More" tile - same footprint as a .conn-tile but dashed + centered. */
.conn-tile.conn-more {
  align-items: center; justify-content: center;
  text-align: center;
  border-style: dashed;
  border-color: rgba(255,255,255,0.12);
  background: linear-gradient(135deg, rgba(255,255,255,0.015), rgba(255,255,255,0.002));
  min-height: 170px;
}

/* Img75/Img-more: every card - including "More connectors" and a lone trailing
   card like Blackboard - stays REGULAR size (one column). No full-width spans,
   so the education and productivity "More connectors" tiles match the normal
   connector cards instead of stretching to 2x. */
.conn-tile.conn-more:hover {
  border-color: var(--hud-accent);
  border-style: solid;
}
.conn-more-inner {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  position: relative; z-index: 1;
}
.conn-more-plus {
  width: 46px; height: 46px; border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  background: rgb(var(--accent-rgb) / 0.10);
  border: 1px solid rgb(var(--accent-rgb) / 0.22);
  color: var(--hud-accent);
  transition: transform 0.22s var(--ease-out), background 0.2s;
}
.conn-tile.conn-more:hover .conn-more-plus {
  transform: scale(1.06) rotate(90deg);
  background: rgb(var(--accent-rgb) / 0.16);
}
.conn-more-title {
  font-family: var(--font-sans); font-weight: 700;
  font-size: 15px; letter-spacing: -0.01em; color: var(--text);
}
.conn-more-sub {
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.04em; color: var(--text-dim);
}

/* Catalog modal - wider + scrollable list. Scoped to the new backdrop id. */
#conn-browser-backdrop .conn-browser-modal {
  max-width: 560px;
  max-height: 82vh;
  gap: 0;
  padding: 0;
  overflow: hidden;
}
.conn-browser-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px;
  padding: 22px 24px 16px;
  border-bottom: 1px solid var(--border);
}
.conn-browser-head .modal-title { margin-bottom: 4px; }
.conn-browser-head .modal-sub { margin: 0; }
.conn-browser-x {
  background: transparent; border: none;
  color: var(--text-dim); font-size: 26px; line-height: 1;
  cursor: pointer; padding: 0 4px; flex-shrink: 0;
  transition: color 0.15s;
}
.conn-browser-x:hover { color: var(--text); }

.conn-browser-list {
  overflow-y: auto;
  padding: 8px 12px 16px;
  display: flex; flex-direction: column; gap: 2px;
}
.conn-row {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 12px;
  border-radius: 11px;
  transition: background 0.14s ease;
}
.conn-row:hover { background: rgba(255,255,255,0.035); }
.conn-row-icon {
  width: 40px; height: 40px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; flex-shrink: 0;
  background: linear-gradient(135deg, rgb(var(--accent-rgb) / 0.16), rgba(255,255,255,0.03));
}
/* connlayout: popup rows that resolved to a real SVG logo - drop the gradient
   plate and let the brand mark fill the tile edge-to-edge (mirrors the main
   grid's .conn-tile-icon.logo-bleed treatment). */
.conn-row-icon.logo-bleed,
.conn-row-icon:has(svg) {
  background: none;
  overflow: hidden;
  padding: 0;
}
.conn-row-icon svg { width: 100%; height: 100%; display: block; }
.conn-row-info { flex: 1; min-width: 0; }
.conn-row-name {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-family: var(--font-sans); font-weight: 700;
  font-size: 14px; color: var(--text);
}
.conn-row-state {
  font-family: var(--font-mono); font-size: 8.5px; font-weight: 700;
  letter-spacing: 0.10em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px;
}
.conn-row-state.connected { color: var(--success); background: rgba(120,200,150,0.12); }
.conn-row-state.live { color: var(--hud-accent); background: rgb(var(--accent-rgb) / 0.12); }
.conn-row-state.soon { color: var(--text-dim); background: rgba(255,255,255,0.05); }
.conn-row-desc {
  font-size: 12px; color: var(--text-muted); line-height: 1.45;
  margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.conn-row-btn {
  flex-shrink: 0;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--text-muted);
  padding: 7px 14px; border-radius: 8px;
  font-family: var(--font-sans); font-size: 12px; font-weight: 600;
  cursor: pointer; transition: all 0.15s ease;
}
.conn-row-btn:hover:not(:disabled) {
  border-color: var(--hud-accent);
  background: rgb(var(--accent-rgb) / 0.06);
  color: var(--hud-accent);
}
.conn-row-btn.primary {
  background: var(--hud-accent); color: #04111a; border-color: var(--hud-accent);
}
.conn-row-btn.primary:hover { background: rgb(var(--accent-rgb)); transform: translateY(-1px); }
.conn-row-btn[disabled] { opacity: 0.4; cursor: not-allowed; }
/* ── First-session welcome: symmetric expandable taste-tester cards ── */
.welcome.welcome-first .ws-demos { max-width: 720px; margin: 26px auto 0; }
.welcome.welcome-first .ws-demos-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ws-demo-head { display: flex; align-items: center; gap: 13px; width: 100%; text-align: left;
  padding: 14px 15px; border-radius: var(--r-lg); background: var(--bg-elev-1); border: 1px solid var(--border);
  color: var(--text); cursor: pointer; animation: fadeUp .5s var(--ease-out) both;
  transition: border-color var(--d-fast) var(--ease-out), background var(--d-fast) var(--ease-out), transform var(--d-fast) var(--ease-out); }
.ws-demo-head:hover { background: var(--bg-elev-2); border-color: var(--border-focus); transform: translateY(-2px); }
.ws-demo-head.open { border-color: rgb(var(--accent-rgb) / 0.7); background: rgb(var(--accent-rgb) / 0.08); }
.ws-demo-ico { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: var(--r-md);
  background: var(--grad-soft); border: 1px solid var(--border); color: var(--accent); }
.ws-demo-ico svg { width: 19px; height: 19px; }
.ws-demo-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.ws-demo-title { font-size: 13.5px; font-weight: 600; color: var(--text); }
.ws-demo-blurb { font-size: 11.5px; color: var(--text-dim); }
.ws-demo-chev { flex: none; width: 16px; height: 16px; color: var(--text-dim); transition: transform var(--d-fast) var(--ease-out); }
.ws-demo-chev svg { width: 16px; height: 16px; }
.ws-demo-head.open .ws-demo-chev { transform: rotate(180deg); color: var(--accent); }
.ws-demo-stage { margin-top: 14px; padding: 18px 20px; border-radius: var(--r-lg); background: var(--bg-elev-1);
  border: 1px solid var(--border); text-align: left; animation: fadeUp .35s var(--ease-out) both; }
@media (max-width: 640px) { .welcome.welcome-first .ws-demos-grid { grid-template-columns: 1fr; } }
/* "See everything it can do →" link on the normal new-chat */
.ws-discover-link { display: block; margin: 18px auto 0; padding: 8px 16px; border-radius: 999px;
  background: transparent; border: 1px solid var(--border); color: var(--text-dim); font-size: 12.5px; cursor: pointer;
  transition: color var(--d-fast) ease, border-color var(--d-fast) ease, background var(--d-fast) ease; }
.ws-discover-link:hover { color: var(--text); border-color: var(--border-focus); background: var(--bg-elev-2); }
.ws-discover-link span { color: var(--accent); font-weight: 600; }

/* ── Img41: tighter sidebar nav rows (was 9px → too tall) ── */
.sidebar .nav-item { padding-top: 6px !important; padding-bottom: 6px !important; }

/* ════════════════════════════════════════════════════════════════════
   Img54/55: MAXIMIZE SIDEBAR SPACE  ·  final layer (wins the cascade)
   Tighter nav rows, smaller section gaps, compact borderless empty
   states, and a fix for the big empty gap in the collapsed rail.
   ════════════════════════════════════════════════════════════════════ */

/* (A) Nav rows: shorter min-height + tighter vertical padding */
.sidebar .nav-section { gap: 1px !important; padding: 0 2px !important; }
.sidebar .nav-item {
  min-height: 30px !important;
  padding-top: 5px !important;
  padding-bottom: 5px !important;
}

/* (A) Section gaps: pull the Pinned / Recents / Upcoming groups closer */
.sidebar { gap: 14px !important; }
.sidebar .sidebar-scroll { gap: 12px !important; }
.sidebar .sidebar-section { gap: 4px !important; }
.sidebar .sidebar-header {
  padding: 4px 6px 2px !important;
  margin-bottom: 0 !important;
}

/* (A) Empty states → compact single dim lines, never bordered cards.
   (The earlier .sidebar-empty / .recent-chats .empty layers set a
   dashed/solid border + larger padding; this clears them.) */
.sidebar .sidebar-empty,
.sidebar .recent-chats .empty {
  border: none !important;
  background: none !important;
  padding: 4px 8px !important;
  margin: 0 !important;
  font-size: 11.5px !important;
  line-height: 1.4 !important;
  color: var(--text-dim) !important;
  opacity: 0.8;
  animation: none !important;
}
.sidebar .sidebar-empty .se-ico { font-size: 13px !important; width: auto !important; height: auto !important; }

/* (B) Collapsed rail: kill the margin-top:auto that shoved the footer to
   the very bottom and left a big empty gap under the icons. The account
   avatar now sits tight under the nav. */
body.rail .sidebar { gap: 12px !important; justify-content: flex-start; }
body.rail .sidebar-footer {
  margin-top: 0 !important;
  padding-top: 12px !important;
}

/* ════════════════════════════════════════════════════════════════════
   Img74: SIDEBAR EXTRA-CRAMPED  ·  final override (wins the cascade)
   Pinned / Recents / Upcoming pulled tight together; shorter rows;
   compact empty-states; Upcoming header is a click-through to Assignments.
   ════════════════════════════════════════════════════════════════════ */
.sidebar { gap: 7px !important; }
.sidebar .sidebar-scroll { gap: 5px !important; }
.sidebar .sidebar-section { gap: 2px !important; }
.sidebar .sidebar-header {
  padding: 2px 6px 1px !important;
  margin-bottom: 0 !important;
  font-size: 9.5px !important;
  letter-spacing: 0.15em !important;
}
.sidebar .nav-section { gap: 1px !important; padding: 0 2px !important; }
.sidebar .nav-item { min-height: 25px !important; padding-top: 3px !important; padding-bottom: 3px !important; }
.sidebar .sidebar-empty,
.sidebar .recent-chats .empty {
  padding: 2px 8px !important; font-size: 11px !important; line-height: 1.3 !important; margin: 0 !important;
}
.sidebar .upcoming-list { display: flex; flex-direction: column; gap: 2px !important; }
.sidebar .upcoming-item { padding-top: 4px !important; padding-bottom: 4px !important; }
/* Upcoming header now navigates straight to the Assignments page */
#upcoming-head { cursor: pointer; border-radius: 7px; transition: background .14s ease, color .14s ease; }
#upcoming-head:hover { background: rgba(255,255,255,0.04); }
#upcoming-head:hover span { color: var(--text) !important; }
#upcoming-head .uh-arrow { margin-left: auto; opacity: 0; transition: opacity .14s ease; }
#upcoming-head:hover .uh-arrow { opacity: 0.7; }
/* Footer: snug account row + version */
.sidebar .sidebar-footer { gap: 6px !important; }
.sidebar .credit { margin-top: 4px !important; padding-top: 6px !important; }

/* ── Img88: productivity "More connectors" tile spans both columns ── */
.conn-grid .conn-tile.conn-more-wide { grid-column: 1 / -1; }

/* ── Img87: Connectors hero orb shows the real Auron ringed logo
   (the SVG IS the orb now - drop the solid-ball fill + inner glow, keep
   the floating motion and the orbiting dashed halo rings). ── */
.conn-hero-orb { background: none !important; box-shadow: none !important; }
.conn-hero-orb svg { width: 100%; height: 100%; display: block; position: relative; z-index: 1; }

/* ════════════════════════════════════════════════════════════════════
   Img91/95/96/98 + paste-drop : assignment density + alignment polish
   ════════════════════════════════════════════════════════════════════ */

/* Img91: class-card subject icons render at the inline <svg>'s intrinsic
   (huge) size - there is no width/height on the markup. Constrain them. */
.project-card .pc-name { display: flex; align-items: center; gap: 8px; min-width: 0; } /* icon ≠ glued to title; min-width:0 lets the text child shrink */
/* The name is now an inner span so it can ellipsis instead of hard-clipping
   mid-word (a flex parent can't text-overflow its own text node). */
.project-card .pc-name-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-card .pc-name-ico { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 22px; height: 22px; }
.project-card .pc-name-ico svg { width: 20px !important; height: 20px !important; display: block; }
.project-item .pi-chat-ico svg, .sidebar .pi-chat-ico svg { width: 15px !important; height: 15px !important; }

/* Img98: message action row (Copy · Explain differently · Share) - one aligned
   line, vertically centered, no wrap/offset. */
.msg-actions { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; gap: 8px !important; }
.msg-actions .msg-action-btn { display: inline-flex !important; align-items: center !important; gap: 6px !important; line-height: 1 !important; white-space: nowrap; vertical-align: middle; }
.msg-actions .msg-action-btn svg { flex-shrink: 0; width: 14px; height: 14px; }

/* Assignments PAGE - responsive grid (2-3 cards across on a typical window)
   with every card's actions ALWAYS visible: no click-to-expand step. */
.view-tasks .task-grid {
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)) !important;
  gap: 12px !important;
}
.view-tasks .task-card {
  padding: 12px 14px 11px !important;
  gap: 6px !important;
  border-radius: 12px !important;
}
.view-tasks .task-card .task-head { gap: 8px; flex-wrap: wrap; row-gap: 5px; }
.view-tasks .task-card .task-title { font-size: 13.5px; line-height: 1.35; overflow-wrap: anywhere; }
.view-tasks .task-card .task-desc { margin-top: 2px; }
.view-tasks .task-card .task-actions {
  display: flex; flex-wrap: wrap; align-items: center;
  margin-top: 6px; padding-top: 9px; row-gap: 6px;
}
.view-tasks .tasks-body.select-mode .task-card .task-actions { display: none !important; }

/* Select mode: checkbox lives top-LEFT so it can never collide with the
   "Nd overdue" badge pinned top-right; cards reserve left padding for it. */
.tasks-body.select-mode .task-card { padding-left: 44px !important; padding-right: 14px !important; }

/* Img95/96: class-page assignment rows - keep them tight (already a row), just
   guarantee no tall min-height creeps in. */
body[data-view="project"] .assign-row { padding: 7px 6px !important; min-height: 0 !important; }
body[data-view="project"] #assignments-body { display: flex; flex-direction: column; gap: 0; }

/* The rail's .aside-card-body sets white-space:pre-wrap (for instructions text);
   inherited into assignment/scheduled rows it turned the markup's indentation
   into phantom blank lines, so .assign-info overflowed its row and items
   overlapped. Rows are markup, not prose - restore normal whitespace and let
   each row auto-size (two-line items align to the top). */
#assignments-body, #scheduled-body { white-space: normal; }
.assign-row { height: auto !important; align-items: flex-start !important; }
.assign-row .assign-check { margin-top: 2px; }
.assign-row .assign-info { white-space: normal; }
.assign-row .assign-title { overflow-wrap: anywhere; }

/* Paste / drag-drop: visible drop affordance on the composer. */
.composer.drag-over { outline: 2px dashed rgb(var(--accent-rgb) / 0.55); outline-offset: 3px; border-radius: var(--r-lg); background: rgb(var(--accent-rgb) / 0.04); }

/* Img101/102: the chat "You" avatar should match the account avatar - a blue
   circle with the same initial, not a gray square. */
.msg.user .msg-avatar:not(.msg-avatar-orb) {
  border-radius: 50% !important;
  background: linear-gradient(135deg, #5ea9ff, #2f6fe0) !important;
  color: #fff !important;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

/* Img94: sidebar Upcoming items are click-through shortcuts to Assignments. */
.upcoming-item { cursor: pointer; }
.view-tasks .task-card.flash-highlight { animation: taskFlash 2.2s ease; }
@keyframes taskFlash {
  0%, 100% { box-shadow: 0 0 0 0 rgb(var(--accent-rgb) / 0); }
  18% { box-shadow: 0 0 0 2px rgb(var(--accent-rgb) / 0.65); background: rgb(var(--accent-rgb) / 0.08); }
}

/* Img105: push the FLAGSHIP pill to the right edge of the model row. */
.model-option .top { display: flex !important; align-items: center; gap: 8px; }
.model-option .flagship-pill { margin-left: auto; }

/* Img97: Discover cards expand to reveal an example + a "Go try it out" button. */
/* .disc-card duplicate at 25933 removed — merged into main rule at 25037. */
.disc-card-head { display: flex; align-items: center; gap: 12px; width: 100%; }

/* ── Discover detail modal: fullscreen card spotlight ──────────────────────
   (replaces the old inline card expansion, which squeezed card text into
   one-word columns). Icon + title, a mock You/Auron exchange, an optional
   canned SVG visual, and a primary "Try it →" CTA. */
.disc-modal {
  width: min(860px, calc(100vw - 56px));
  max-width: none;
  max-height: calc(100vh - 72px);
  overflow-y: auto;
  padding: 30px 34px 26px;
  gap: 18px;
  position: relative;
}
.disc-modal-close {
  position: absolute; top: 14px; right: 14px;
  width: 30px; height: 30px; border-radius: 9px;
  display: grid; place-items: center;
  background: transparent; border: 1px solid transparent;
  color: var(--text-dim); cursor: pointer;
  transition: color .14s ease, background .14s ease, border-color .14s ease;
}
.disc-modal-close:hover { color: var(--text); background: rgba(255,255,255,0.05); border-color: var(--border); }
.disc-modal-head { display: flex; align-items: center; gap: 14px; }
.disc-modal-head .disc-card-emoji { width: 48px; height: 48px; }
.disc-modal-titles { min-width: 0; }
.disc-modal-title { font-size: 21px; font-weight: 650; letter-spacing: -0.015em; color: var(--text); }
.disc-modal-sub { font-size: 13.5px; color: var(--text-muted); margin-top: 3px; }
.disc-mock { display: flex; flex-direction: column; gap: 12px; padding: 4px 2px; }
.disc-mock-row { display: flex; }
.disc-mock-row.you { justify-content: flex-end; }
.disc-bubble {
  max-width: 78%;
  padding: 11px 15px;
  border-radius: 14px;
  font-size: 13.5px; line-height: 1.55;
  border: 1px solid var(--border);
}
.disc-bubble.you {
  background: rgb(var(--accent-rgb) / 0.12);
  border-color: rgb(var(--accent-rgb) / 0.26);
  color: var(--text);
  border-bottom-right-radius: 5px;
}
.disc-bubble.bot {
  background: var(--bg-elev-2);
  color: var(--text);
  border-bottom-left-radius: 5px;
}
.disc-bubble-who {
  display: block;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--accent);
  margin-bottom: 5px;
}
.disc-visual {
  margin-top: 12px;
  background: var(--bg-elev-1);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 12px 10px 8px;
  color: var(--text-muted);
}
.disc-visual svg { display: block; width: 100%; height: auto; max-height: 170px; }

/* ── Live interactive demos inside the Discover modal ── */
.disc-bubble.disc-bubble-demo { max-width: 100%; width: 100%; box-sizing: border-box; }
.disc-demo-render { font-size: 13.5px; }
.disc-demo-render > *:first-child { margin-top: 0; }
.disc-demo-render > *:last-child { margin-bottom: 0; }
.disc-demo-render .fc-deck,
.disc-demo-render .pq-set,
.disc-demo-render .sp-plan,
.disc-demo-render .ft-timer { max-width: none; }
.disc-demo-render table { width: 100%; }

/* Mock Google-Doc screenshot (AI-Tutor demo). LIGHT page in both themes →
   every child gets explicit DARK ink; nothing inherits var(--text). */
.gdoc { border-radius: 12px; overflow: hidden; border: 1px solid rgba(0,0,0,0.25); box-shadow: 0 10px 30px rgba(0,0,0,0.35); margin: 4px 0 14px; }
.gdoc-bar { display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: #e8eaf1; border-bottom: 1px solid #d3d7e0; }
.gdoc-dot { width: 9px; height: 9px; border-radius: 50%; background: #c3c8d4; }
.gdoc-dot:nth-child(1) { background: #ee6a5f; } .gdoc-dot:nth-child(2) { background: #f5bd4f; } .gdoc-dot:nth-child(3) { background: #61c454; }
.gdoc-title { margin-left: 8px; font-size: 12px; font-weight: 600; color: #2b2f3a; font-family: var(--font-sans); }
.gdoc-saved { margin-left: auto; font-size: 10.5px; color: #7a8092; }
.gdoc-page { background: #ffffff; padding: 18px 22px 14px; }
.gdoc-h { font-size: 14.5px; font-weight: 700; color: #1a1d26; margin-bottom: 8px; font-family: Georgia, 'Times New Roman', serif; }
.gdoc-pts { font-weight: 400; color: #6b7280; font-size: 12px; }
.gdoc-page p { margin: 0; font-size: 13.5px; line-height: 1.75; color: #202430; font-family: Georgia, 'Times New Roman', serif; }
.gdoc-page mark { padding: 1px 3px; border-radius: 3px; color: #1a1d26; }
mark.gd-y { background: #ffe58a; }
mark.gd-b { background: #bfdcff; }
mark.gd-g { background: #b5ecc4; }
.gdoc-notes { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; padding-top: 10px; border-top: 1px dashed #e0e3ea; }
.gdoc-note { font-size: 11px; font-weight: 600; color: #3a4150; font-family: var(--font-sans); }

.disc-modal-actions { display: flex; justify-content: flex-end; padding-top: 2px; }
.disc-modal-try { font-size: 14px; padding: 10px 22px; }
@media (max-width: 700px) {
  .disc-modal { width: calc(100vw - 24px); padding: 22px 18px; }
  .disc-bubble { max-width: 92%; }
}

.chat-rename-input {
  background: var(--bg-elev-1);
  border: 1px solid var(--accent);
  border-radius: 4px;
  color: var(--text);
  font-family: inherit;
  font-size: inherit;
  padding: 4px 6px;
  width: 100%;
  outline: none;
}
.chat-rename-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.1);
}

/* ════ ADMIN DASHBOARD ════ */
.admin-page {
  padding: var(--s-6) var(--s-6) var(--s-10) var(--s-6);
  max-width: 1400px;
  margin: 0 auto;
}

.admin-hero {
  font-size: var(--fs-3xl);
  font-weight: 700;
  margin-bottom: var(--s-8);
  font-family: var(--font-display);
  letter-spacing: -0.02em;
}

.admin-section {
  margin-top: var(--s-10);
  padding: var(--s-6);
  background: var(--bg-elev-1);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}

.admin-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--s-6);
  gap: var(--s-4);
}

.admin-section-title {
  font-size: var(--fs-lg);
  font-weight: 600;
  margin: 0;
}

.admin-search-box {
  flex: 1;
  max-width: 300px;
  padding: var(--s-2) var(--s-4);
  background: var(--bg-elev-3);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text);
  font-size: var(--fs-sm);
}

.admin-search-box:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: 0 0 0 2px rgb(var(--accent-rgb) / 0.1);
}

.admin-users-container {
  overflow-x: auto;
}

.admin-users-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}

.admin-users-table thead {
  border-bottom: 1px solid var(--border-strong);
  background: var(--bg-elev-2);
}

.admin-users-table th {
  padding: var(--s-3) var(--s-4);
  text-align: left;
  font-weight: 600;
  color: var(--text-dim);
  white-space: nowrap;
}

.admin-users-table tbody tr {
  border-bottom: 1px solid var(--border);
  transition: background-color var(--d-fast) ease;
}

.admin-users-table tbody tr:hover {
  background-color: var(--bg-elev-2);
}

.admin-users-table td {
  padding: var(--s-3) var(--s-4);
  color: var(--text);
}

.admin-cell-email {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--accent);
}

.admin-cell-number {
  text-align: right;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* Users-table footer controls: Show more / Minimize / Export CSV */
.admin-users-ctrl-row td { padding: 10px 8px 4px; border-bottom: 0; }
.admin-users-ctrls { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.admin-users-more {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 8px; cursor: pointer;
  background: var(--bg-elev-2); border: 1px solid var(--border);
  color: var(--text-muted); font: inherit; font-size: 12px; font-weight: 600;
  transition: all .14s ease;
}
.admin-users-more:hover { color: var(--text); border-color: rgb(var(--accent-rgb) / 0.35); background: rgb(var(--accent-rgb) / 0.07); }
.admin-users-more .aum-count { font-weight: 400; color: var(--text-dim); }
.admin-users-more.aum-csv { margin-left: auto; color: rgb(var(--accent-rgb) / 0.9); border-color: rgb(var(--accent-rgb) / 0.3); }
.admin-users-more.aum-csv:hover { color: rgb(var(--accent-rgb)); background: rgb(var(--accent-rgb) / 0.1); }

.admin-badge {
  display: inline-block;
  padding: 2px var(--s-2);
  border-radius: var(--r-sm);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.admin-badge-paid {
  background: rgb(var(--accent-rgb) / 0.2);
  color: var(--accent);
}

.admin-badge-trial {
  background: rgb(116 198 154 / 0.2);
  color: var(--success);
}

.admin-badge-free {
  background: rgb(142 151 164 / 0.2);
  color: var(--text-dim);
}

.admin-log-container {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  max-height: 500px;
  overflow-y: auto;
}

/* Activity Log controls: event-type filter + minimize toggle */
.admin-log-controls { display: flex; align-items: center; gap: var(--s-2); }
.admin-log-filter {
  padding: var(--s-2) var(--s-3);
  background: var(--bg-elev-3);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text);
  font-size: var(--fs-sm);
  cursor: pointer;
}
.admin-log-filter:focus { outline: none; border-color: var(--border-focus); }
.admin-log-toggle {
  width: 30px; height: 30px; padding: 0;
  display: grid; place-items: center;
  font-size: 15px; line-height: 1;
}
#admin-log-section.collapsed .admin-log-container { display: none; }
#admin-log-section.collapsed .admin-section-header { margin-bottom: 0; }

.admin-log-entry {
  padding: var(--s-3) var(--s-4);
  background: var(--bg-elev-2);
  border-left: 2px solid rgb(var(--accent-rgb) / 0.4);
  border-radius: var(--r-sm);
  font-size: var(--fs-xs);
  display: grid;
  grid-template-columns: 160px 120px 1fr;
  gap: var(--s-4);
  align-items: start;
}

.admin-log-time {
  color: var(--text-dim);
  font-family: var(--font-mono);
  white-space: nowrap;
}

.admin-log-action {
  color: var(--accent);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.admin-log-email {
  color: var(--text-muted);
  word-break: break-all;
}

.admin-log-detail {
  grid-column: 1 / -1;
  color: var(--text-dim);
  font-family: var(--font-mono);
  margin-top: var(--s-2);
}

.admin-loading,
.admin-empty,
.admin-error {
  padding: var(--s-6) var(--s-4);
  text-align: center;
  color: var(--text-dim);
}

.admin-error {
  color: var(--danger);
}


/* ════════════════════════════════════════════════════════════
   LIGHT THEME: Admin dashboard table + search + log
   ════════════════════════════════════════════════════════════ */
body[data-theme="light"] .admin-search-box {
  background: #ffffff !important;
  border: 1px solid var(--border-strong) !important;
  color: var(--text) !important;
}
body[data-theme="light"] .admin-search-box:focus {
  outline: none;
  border-color: rgb(var(--accent-rgb) / 0.55) !important;
  box-shadow: 0 0 0 2px rgb(var(--accent-rgb) / 0.1) !important;
}

body[data-theme="light"] .admin-users-table {
  background: #ffffff !important;
}
body[data-theme="light"] .admin-users-table thead {
  background: var(--bg-elev-2) !important;
  border-bottom: 1px solid var(--border-strong) !important;
}
body[data-theme="light"] .admin-users-table th {
  color: var(--text-dim) !important;
}
body[data-theme="light"] .admin-users-table td {
  border-bottom-color: var(--border) !important;
  color: var(--text) !important;
}
body[data-theme="light"] .admin-users-table tbody tr:hover {
  background-color: rgb(var(--accent-rgb) / 0.05) !important;
}

body[data-theme="light"] .admin-cell-email {
  color: var(--accent) !important;
}

body[data-theme="light"] .admin-badge-paid {
  background: rgb(var(--accent-rgb) / 0.15) !important;
  color: var(--accent) !important;
}
body[data-theme="light"] .admin-badge-trial {
  background: rgb(63 155 110 / 0.15) !important;
  color: var(--success) !important;
}
body[data-theme="light"] .admin-badge-free {
  background: rgb(107 112 136 / 0.15) !important;
  color: var(--text-dim) !important;
}

body[data-theme="light"] .admin-log-container {
  background: transparent;
}
body[data-theme="light"] .admin-log-entry {
  background: #ffffff !important;
  border: 1px solid var(--border) !important;
  border-left: 2px solid rgb(var(--accent-rgb) / 0.6) !important;
  box-shadow: var(--shadow-sm) !important;
}
body[data-theme="light"] .admin-log-time {
  color: var(--text-dim) !important;
}
body[data-theme="light"] .admin-log-action {
  color: var(--accent) !important;
}
body[data-theme="light"] .admin-log-email {
  color: var(--text-muted) !important;
}
body[data-theme="light"] .admin-log-detail {
  color: var(--text-dim) !important;
}

body[data-theme="light"] .admin-loading,
body[data-theme="light"] .admin-empty,
body[data-theme="light"] .admin-error {
  color: var(--text-dim) !important;
}
body[data-theme="light"] .admin-error {
  color: var(--danger) !important;
}


/* Improve Discover card spacing consistency */
.disc-card-example {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-muted);
  background: var(--bg-elev-1);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 11px 13px;
  margin: 0;
}

.disc-try {
  margin-top: 10px;
  margin-bottom: 0;
  align-self: flex-start;
  background: rgb(var(--accent-rgb) / 0.14);
  border: 1px solid rgb(var(--accent-rgb) / 0.38);
  color: var(--accent);
  font-weight: 600;
  font-size: 13px;
  padding: 8px 16px;
  border-radius: 9px;
  cursor: pointer;
  transition: background 0.15s var(--ease-out), transform 0.15s var(--ease-out);
}

.disc-try:hover {
  background: rgb(var(--accent-rgb) / 0.22);
  transform: translateY(-1px);
}

/* ════════════════════════════════════════════════════════════
   LIGHT THEME: Discover cards + button
   ════════════════════════════════════════════════════════════ */
body[data-theme="light"] .disc-card {
  background: #ffffff !important;
  border-color: var(--border-strong) !important;
}
body[data-theme="light"] .disc-card:hover {
  background: var(--bg-elev-2) !important;
  border-color: rgb(var(--accent-rgb) / 0.40) !important;
}
body[data-theme="light"] .disc-card-emoji {
  background: linear-gradient(135deg, rgb(var(--accent-rgb) / 0.12), rgba(0,0,0,0.03)) !important;
  border-color: var(--border-strong) !important;
}
body[data-theme="light"] .disc-card-example {
  background: #ffffff !important;
  border-color: var(--border-strong) !important;
  color: var(--text-muted) !important;
}
body[data-theme="light"] .disc-try {
  background: rgb(var(--accent-rgb) / 0.12) !important;
  border-color: rgb(var(--accent-rgb) / 0.30) !important;
  color: var(--accent) !important;
}
body[data-theme="light"] .disc-try:hover {
  background: rgb(var(--accent-rgb) / 0.18) !important;
  border-color: rgb(var(--accent-rgb) / 0.45) !important;
}

/* Img105: recent tutor-session card - the class pill truncates with an ellipsis
   so a long class name (e.g. "ETHICS III- SPRING (2X/WK)") never collides with
   or gets cut off by the status badge ("Failed"); the badge stays put. */
.ap-card-top { display: flex !important; align-items: center; gap: 8px; min-width: 0; }
.ap-card-top .task-subject { flex: 1 1 auto; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-card-top .ap-badge { flex: 0 0 auto; white-space: nowrap; }


/* ════════════════════════════════════════════════════════════
   LIGHT THEME: Discover cards + button  (final hardening layer)
   Ensures Discover section (.disc-card/.disc-try/.disc-card-example)
   renders legibly on light backgrounds. Dark theme uses the default
   elevation colors (--bg-elev-2, --bg-elev-3, --grad-soft).
   ════════════════════════════════════════════════════════════ */
body[data-theme="light"] .disc-card {
  background: #ffffff !important;
  border-color: var(--border-strong) !important;
}
body[data-theme="light"] .disc-card:hover {
  background: var(--bg-elev-2) !important;
  border-color: rgb(var(--accent-rgb) / 0.40) !important;
}
body[data-theme="light"] .disc-card-emoji {
  background: linear-gradient(135deg, rgb(var(--accent-rgb) / 0.12), rgba(0,0,0,0.03)) !important;
  border-color: var(--border-strong) !important;
}
body[data-theme="light"] .disc-card-example {
  background: #ffffff !important;
  border-color: var(--border-strong) !important;
  color: var(--text-muted) !important;
}
body[data-theme="light"] .disc-try {
  background: rgb(var(--accent-rgb) / 0.12) !important;
  border-color: rgb(var(--accent-rgb) / 0.30) !important;
  color: var(--accent) !important;
}
body[data-theme="light"] .disc-try:hover {
  background: rgb(var(--accent-rgb) / 0.18) !important;
  border-color: rgb(var(--accent-rgb) / 0.45) !important;
}

/* ════ Composer model selector: show the active model's NAME, not just a dot.
   Later .icon-btn rules (24px fixed, and the chat composer's 38px circle)
   crushed the pill so only the dot survived - exempt .composer-model. ════ */
.icon-btn.composer-model,
body[data-view="chat"] .view-chat .composer .icon-btn.composer-model {
  width: auto;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.composer-model .model-short {
  display: inline-block;
  font-size: 12px;
  color: var(--text-muted);
  max-width: 110px;
}
.composer-model:hover .model-short { color: var(--text); }

/* ════ Collapsed icon rail: breathe between nav icons + pin the account
   avatar to the BOTTOM of the rail (flex column + margin-top:auto). ════ */
body.rail .sidebar { gap: 16px !important; }
body.rail .sidebar .nav-section { gap: 8px !important; }
body.rail .nav-section .nav-item {
  padding-top: 9px !important;
  padding-bottom: 9px !important;
}
body.rail .sidebar-footer {
  margin-top: auto !important;   /* pin to the bottom of the rail */
  padding-top: 12px !important;
  padding-bottom: 6px;
}

/* ════════════════════════════════════════════════════════════════════════════
   ROUND-2 BUG BASH (items 18/19/20)
   ════════════════════════════════════════════════════════════════════════════ */

/* ── #18: desktop-pitch hero = static Auron logo mark, zero flashing ─────── */
.desktop-exclusive-badge .dot { animation: none !important; }       /* no pulse on the wall */
.desktop-exclusive h1 .grad { animation: none !important; }         /* shimmer off (single-hue anyway) */

/* ── #19a: class-page composer parity (📎 strip, model pill, hint) ────────── */
.project-composer .composer-attachments {
  max-width: none; margin: 0; padding: 0 0 10px;
}
.project-composer-hint {
  margin-top: 8px;
  font-size: 11px; line-height: 1.5;
  color: var(--text-dim);
}
.project-composer-hint strong { color: var(--text-muted); font-weight: 600; }
.project-composer.drag-over {
  border-color: rgb(var(--accent-rgb) / 0.55);
  background: rgb(var(--accent-rgb) / 0.05);
}
.project-composer-actions { justify-content: flex-end; }
.project-composer-actions #project-attach-btn { margin-right: auto; } /* 📎 left, like the main composer */
/* The class composer sits at the TOP of the page - open its model menu DOWN */
#project-model-menu {
  bottom: auto; top: calc(100% + 8px);
  left: auto; right: 0;
}

/* ── #19c: Context dropzone microcopy (persistent ≠ session attachment) ───── */
.dropzone { display: flex; flex-direction: column; gap: 2px; }
.dropzone .dropzone-hint {
  font-size: 10px; color: var(--text-dim); letter-spacing: 0;
}

/* ── #20: AI Tutor web wall - lives inside .ap-dash-scroll, never clips ───── */
.ap-dash .desktop-exclusive {
  margin: 18px auto 48px !important;        /* fits 1280x720 without cutting the icon row */
}
.ap-dash .desktop-exclusive .desktop-exclusive-features {
  overflow: visible;                         /* icon row must never be clipped */
}
.tutor-web-wall .desktop-exclusive-actions .primary { cursor: pointer; }
/* Small dismissible reminder chip once the wall is dismissed */
.tutor-web-chip {
  display: flex; align-items: center; gap: 10px;
  max-width: 720px; margin: 0 auto 18px;
  padding: 8px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: rgba(255,255,255,0.03);
  font-size: 12px; color: var(--text-muted);
}
.tutor-web-chip span { flex: 1; min-width: 0; }
.tutor-web-chip a {
  color: var(--accent); text-decoration: none; font-weight: 600; white-space: nowrap;
}
.tutor-web-chip a:hover { text-decoration: underline; }
.tutor-web-chip button {
  width: 20px; height: 20px; flex: 0 0 auto;
  border: 0; border-radius: 50%;
  background: transparent; color: var(--text-dim);
  font-size: 14px; line-height: 1; cursor: pointer;
}
.tutor-web-chip button:hover { background: rgba(255,255,255,0.08); color: var(--text); }

/* #18 (cont.): the "apply breathe to all orbs" rule (orbEnter + orbBreatheCoreUnified,
   ~line 19563) also catches .desktop-exclusive-orb → that's the FLASH the owner saw.
   Keep the one-shot entrance, kill the breathing/glow oscillation for good. */
.desktop-exclusive-orb {
  animation: orbEnter 0.6s cubic-bezier(0.16, 1, 0.3, 1) both !important;
  box-shadow: none !important;
}

/* ════════════════════════════════════════════════════════════════════════
   AURON SIGN-IN — clean orb mark · spaced "AUR◦N" wordmark · icon inputs ·
   royal-blue gradient. Appended last so it wins over the older .auth-* rules.
   ════════════════════════════════════════════════════════════════════════ */
.auth-overlay {
  background: radial-gradient(130% 100% at 50% -8%, #14161e 0%, #0a0b0f 56%, #07080b 100%) !important;
  backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important;
}
.auth-card {
  max-width: 410px !important; width: calc(100% - 36px);
  padding: 42px 38px 32px !important;
  background: linear-gradient(180deg, rgba(22,24,32,0.72), rgba(13,14,19,0.74)) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 24px !important;
  box-shadow: 0 36px 90px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.04) !important;
  text-align: center;
}
.auth-card .auth-logo {
  width: 74px !important; height: 74px !important; margin: 4px auto 12px !important; display: block;
  filter: drop-shadow(0 0 20px rgba(79,123,255,0.5)) !important;
  border: none !important; border-radius: 0 !important; background: none !important; animation: none !important;
}
/* AURON wordmark — spaced caps with the orb as the O */
.auth-wordmark {
  display: flex; align-items: center; justify-content: center; gap: 0.2em;
  font-family: var(--font-sans); font-size: 42px; font-weight: 300; line-height: 1;
  color: #eef1f7; margin: 0 0 10px;
}
.auth-wordmark > span { display: inline-block; }
.auth-wordmark .wm-o {
  width: 0.6em; height: 0.6em; border-radius: 50%;
  border: 0.085em solid #5b86ff; position: relative;
  box-shadow: 0 0 9px rgba(91,134,255,0.6), inset 0 0 4px rgba(91,134,255,0.4);
}
.auth-wordmark .wm-o::after {
  content: ''; position: absolute; inset: 0; margin: auto;
  width: 0.2em; height: 0.2em; border-radius: 50%; background: #fff;
  box-shadow: 0 0 7px 2px rgba(255,255,255,0.85);
}
.auth-card .auth-sub, #auth-sub.auth-sub {
  color: #868fa3 !important; font-size: 14.5px !important; font-weight: 400 !important; margin: 0 0 26px !important;
}
/* Icon inputs */
.auth-card .auth-field { position: relative; margin-bottom: 12px; text-align: left; }
.auth-card .auth-field .auth-ico {
  position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
  color: #646d83; pointer-events: none; z-index: 2;
}
.auth-card .auth-field input {
  width: 100% !important; box-sizing: border-box !important;
  padding: 15px 16px 15px 44px !important; margin: 0 !important;
  background: rgba(255,255,255,0.025) !important;
  border: 1px solid rgba(255,255,255,0.08) !important; border-radius: 13px !important;
  color: #eef1f7 !important; font-size: 15px !important; letter-spacing: 0;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.auth-card .auth-field input::placeholder { color: #596178 !important; }
.auth-card .auth-field input:focus {
  outline: none !important; border-color: rgba(91,134,255,0.65) !important;
  background: rgba(91,134,255,0.05) !important; box-shadow: 0 0 0 3px rgba(91,134,255,0.13) !important;
}
.auth-card .auth-field.pw-field input { padding-right: 46px !important; }
.auth-card .pw-toggle {
  position: absolute !important; right: 9px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; display: grid; place-items: center;
  color: #646d83; background: none !important; border: 0 !important; border-radius: 8px; cursor: pointer; z-index: 2;
}
.auth-card .pw-toggle:hover { color: #c3cbdb; background: rgba(255,255,255,0.04) !important; }
/* Sign In — royal-blue gradient */
.auth-card .auth-submit, .auth-card .auth-submit.btn-hero {
  width: 100% !important; margin: 8px 0 0 !important; padding: 15px !important;
  font-size: 15.5px !important; font-weight: 650 !important; letter-spacing: 0.01em;
  color: #fff !important; border: 0 !important; border-radius: 13px !important;
  background: linear-gradient(100deg, #5e86ff 0%, #3f63f5 55%, #3a59f0 100%) !important;
  box-shadow: 0 10px 26px rgba(63,99,245,0.42) !important;
  transition: filter .15s, transform .12s, box-shadow .15s; cursor: pointer;
}
.auth-card .auth-submit:hover { filter: brightness(1.07) !important; transform: translateY(-1px); box-shadow: 0 13px 30px rgba(63,99,245,0.52) !important; }
.auth-card .auth-submit:active { transform: translateY(0); }
/* Forgot · divider · switch */
.auth-card .auth-forgot { margin-top: 16px !important; }
.auth-card .auth-forgot a { color: #6e93ff !important; font-size: 13.5px !important; font-weight: 500; text-decoration: none; cursor: pointer; }
.auth-card .auth-forgot a:hover { text-decoration: underline; }
.auth-divider { display: flex; align-items: center; gap: 14px; margin: 15px 2px 13px; color: #5a6276; font-size: 13px; }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: rgba(255,255,255,0.08); }
.auth-card .auth-switch { margin: 0 !important; font-size: 13.5px !important; color: #868fa3 !important; }
.auth-card .auth-switch a { color: #6e93ff !important; font-weight: 500; margin-left: 6px; text-decoration: none; cursor: pointer; }
.auth-card .auth-switch a:hover { text-decoration: underline; }
.auth-card .auth-consent { display: flex; text-align: left; font-size: 12px; color: #868fa3; gap: 8px; margin: 2px 0 8px; align-items: flex-start; }
.auth-card .auth-consent input { width: auto !important; margin: 2px 0 0 !important; padding: 0 !important; }
.auth-card .auth-error { color: #ff6b6b !important; font-size: 12.5px; min-height: 16px; margin: 2px 0 0; }
/* AURON sign-in — polish: centered button label, clean (un-underlined) links,
   slightly wider wordmark to match the mockup proportions. */
.auth-card .auth-submit, .auth-card .auth-submit.btn-hero {
  text-align: center !important; justify-content: center !important; display: flex !important;
  align-items: center !important;
}
.auth-card .auth-forgot a, .auth-card .auth-switch a { text-decoration: none !important; }
.auth-card .auth-forgot a:hover, .auth-card .auth-switch a:hover { text-decoration: underline !important; }
.auth-wordmark { font-size: 44px; gap: 0.24em; letter-spacing: 0; }
/* AURON sign-in — force clean links (no underline / border) at ID level. */
#auth-forgot-link, #auth-switch-link {
  text-decoration: none !important; border-bottom: 0 !important; text-underline-offset: 0 !important;
}
#auth-forgot-link:hover, #auth-switch-link:hover { text-decoration: underline !important; }
/* ════════ AURON app theme — PROJECT-AURON grid welcome + royal glow ════════ */
#welcome.welcome { position: relative; }
#welcome.welcome::before {
  content: ''; position: absolute; left: 50%; top: -8px; transform: translateX(-50%);
  width: min(880px, 94%); height: 380px; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgb(var(--accent-rgb) / 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgb(var(--accent-rgb) / 0.06) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(68% 60% at 50% 28%, #000 0%, transparent 76%);
  mask-image: radial-gradient(68% 60% at 50% 28%, #000 0%, transparent 76%);
}
#welcome.welcome > * { position: relative; z-index: 1; }
.welcome-mark { width: 78px !important; height: 78px !important; filter: drop-shadow(0 0 22px rgb(var(--accent-rgb) / 0.5)) !important; }
/* PROJECT-AURON wordmark lockup on the welcome — chevron-Λ + orb-O, bold caps */
.auron-lockup {
  display: flex; align-items: center; justify-content: center; gap: 0.05em;
  font-family: var(--font-sans); font-weight: 800; font-size: 54px; letter-spacing: 0.02em;
  color: #f0f3fa; line-height: 1; margin: 0 auto 10px;
  animation: fadeUp 0.55s var(--ease-out) both;
}
.auron-lockup > span { display: inline-block; }
.auron-lockup .al-ch { transform: translateY(0.01em); }
.auron-lockup .al-orb {
  width: 0.84em; height: 0.84em; margin: 0 0.04em; align-self: center;
  filter: drop-shadow(0 0 14px rgb(var(--accent-rgb) / 0.55));
}
/* AURON lockup — responsive size + letter rhythm to match the hero */
.auron-lockup { font-size: clamp(32px, 7.5vw, 56px) !important; letter-spacing: 0.04em; gap: 0.06em; }
.welcome-first .auron-lockup { margin-bottom: 6px; }
.ws-greet { font-size: clamp(22px, 4vw, 34px) !important; font-weight: 700 !important; color: #eef1f7 !important; margin: 2px 0 6px !important; }
/* ════ AURON official mark — thin elegant wordmark (Λ chevron + vivid orb-O) ════ */
.auron-lockup { font-weight: 300 !important; letter-spacing: 0.04em; gap: 0.2em !important; }
.auth-wordmark .wm-o { border-color: #2a7bff !important; box-shadow: 0 0 11px rgba(42,123,255,0.7), inset 0 0 5px rgba(42,123,255,0.45) !important; }
.auth-wordmark .wm-o::after { box-shadow: 0 0 7px 2px rgba(255,255,255,0.9) !important; }

/* ═══ Discover card vignettes (1.2.43): every card carries a mini visual ═══ */
/* The card flips to a column so the strip sits under the head row. */
.disc-card { flex-direction: column; align-items: stretch; }
.disc-card-head { display: flex; align-items: center; gap: var(--s-3); min-width: 0; }

.disc-viz {
  height: 56px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: rgba(var(--accent-rgb), .04);
  overflow: hidden;
  font-size: 10px;
  color: var(--text-dim);
  user-select: none;
}

/* graph */
.disc-viz .dv-svg { width: 100%; height: 100%; }
.dv-svg .dv-axis { stroke: var(--border); stroke-width: 1; fill: none; }
.dv-svg .dv-line { stroke: var(--accent); stroke-width: 1.6; fill: none; opacity: .85;
  stroke-dasharray: 220; stroke-dashoffset: 0; }
.dv-svg .dv-dot { fill: var(--accent); }
.disc-card:hover .dv-svg .dv-line { stroke-dashoffset: 220; animation: dv-draw .9s var(--ease-out) forwards; }
@keyframes dv-draw { to { stroke-dashoffset: 0; } }

/* timeline */
.dv-tl { display: flex; align-items: center; width: 100%; gap: 4px; }
.dv-tl-line { flex: 1; height: 1px; background: var(--border); min-width: 6px; }
.dv-tl-node { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.dv-tl-node i { width: 7px; height: 7px; border-radius: 50%; border: 1.4px solid var(--accent);
  background: transparent; transition: background var(--d-fast) var(--ease-out); }
.dv-tl-node b { font-weight: 600; font-size: 9px; color: var(--text-dim); }
.disc-card:hover .dv-tl-node i { background: var(--accent); }

/* mini quiz */
.dv-quiz { display: flex; flex-direction: column; gap: 5px; width: 100%; min-width: 0; }
.dv-quiz .dv-q { font-weight: 600; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dv-quiz .dv-opts { display: flex; gap: 5px; }
.dv-quiz .dv-opts i { font-style: normal; padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--border); color: var(--text-dim); }
.dv-quiz .dv-opts i.ok { border-color: rgba(var(--accent-rgb), .55); color: var(--accent); position: relative; }
.disc-card:hover .dv-quiz .dv-opts i.ok { background: rgba(var(--accent-rgb), .12); box-shadow: 0 0 10px rgba(var(--accent-rgb), .25); }
.disc-card:hover .dv-quiz .dv-opts i.ok::after { content: ' ✓'; }

/* flashcards */
.dv-cards { position: relative; width: 100%; height: 100%; }
.dv-cards span { position: absolute; inset: 4px 0 4px 0; display: flex; align-items: center;
  padding: 0 10px; border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--bg-elev-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dv-cards .dv-c2 { transform: translate(8px, 4px) rotate(1.2deg); opacity: .55; color: var(--accent); }
.dv-cards .dv-c1 { transform: rotate(-.6deg); color: var(--text-muted);
  transition: transform var(--d-base) var(--ease-out), opacity var(--d-base) var(--ease-out); }
.disc-card:hover .dv-cards .dv-c1 { transform: translate(-6px, -3px) rotate(-2.4deg); opacity: .25; }

/* pomodoro bar */
.dv-pomo { display: flex; width: 100%; gap: 3px; height: 22px; }
.dv-pomo i { position: relative; border-radius: 5px; border: 1px solid rgba(var(--accent-rgb), .4);
  overflow: hidden; display: grid; place-items: center; font-style: normal; }
.dv-pomo i b { position: relative; z-index: 1; font-size: 9px; color: var(--text-muted); }
.dv-pomo i::before { content: ''; position: absolute; inset: 0; width: 0;
  background: rgba(var(--accent-rgb), .18); }
.dv-pomo i.brk { border-style: dashed; border-color: var(--border); }
.disc-card:hover .dv-pomo i::before { width: 100%; transition: width 1.1s linear; }

/* countdown */
.dv-count { display: flex; align-items: center; gap: 10px; width: 100%; }
.dv-count b { font-family: var(--font-mono); font-size: 16px; letter-spacing: 1px; color: var(--accent); }
.dv-count .dv-bar { flex: 1; height: 4px; border-radius: 999px; background: rgba(var(--accent-rgb), .14); overflow: hidden; }
.dv-count .dv-bar i { display: block; height: 100%; width: 72%; border-radius: inherit; background: var(--accent); opacity: .8; }
.disc-card:hover .dv-count .dv-bar i { width: 30%; transition: width 1.4s linear; }
.dv-count em { font-style: normal; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); white-space: nowrap; }

/* week strip */
.dv-week { display: flex; width: 100%; gap: 6px; }
.dv-week span { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.dv-week b { font-size: 9px; color: var(--text-dim); font-weight: 600; }
.dv-week i { width: 100%; height: 14px; border-radius: 4px; border: 1px solid var(--border); }
.dv-week .due i { border-color: rgba(var(--accent-rgb), .55); background: rgba(var(--accent-rgb), .12); }
.dv-week .due b { color: var(--accent); }
.disc-card:hover .dv-week .due i { box-shadow: 0 0 8px rgba(var(--accent-rgb), .3); }

/* tiny task list */
.dv-list { display: flex; flex-direction: column; gap: 4px; width: 100%; min-width: 0; }
.dv-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
.dv-row i { width: 5px; height: 5px; border-radius: 50%; background: var(--text-dim); opacity: .6; flex-shrink: 0; }
.dv-row b { font-weight: 500; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dv-row em { font-style: normal; margin-left: auto; padding: 1px 6px; border-radius: 999px;
  border: 1px solid var(--border); color: var(--text-dim); font-size: 9px; white-space: nowrap; flex-shrink: 0; }
.dv-row.hot i { background: var(--accent); opacity: 1; }
.dv-row.hot em { border-color: rgba(var(--accent-rgb), .55); color: var(--accent); }
.disc-card:hover .dv-row.hot em { background: rgba(var(--accent-rgb), .12); }

/* chat bubbles */
.dv-chat { display: flex; flex-direction: column; gap: 4px; width: 100%; min-width: 0; }
.dv-chat span { max-width: 88%; padding: 3px 8px; border-radius: 8px; border: 1px solid var(--border);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dv-chat .you { align-self: flex-end; color: var(--text-muted); background: var(--bg-elev-2); border-bottom-right-radius: 2px; }
.dv-chat .bot { align-self: flex-start; color: var(--accent); border-color: rgba(var(--accent-rgb), .4);
  background: rgba(var(--accent-rgb), .07); border-bottom-left-radius: 2px; }
.disc-card:hover .dv-chat .bot { box-shadow: 0 0 9px rgba(var(--accent-rgb), .18); }

/* mini email */
.dv-mail { display: flex; flex-direction: column; gap: 4px; width: 100%; min-width: 0; position: relative; }
.dv-mail .dv-mailrow b { font-weight: 600; color: var(--text-muted); }
.dv-mail .dv-mailline { color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 52px; }
.dv-mail .dv-send { position: absolute; right: 0; bottom: 0; padding: 2px 8px; border-radius: 999px;
  border: 1px solid rgba(var(--accent-rgb), .5); color: var(--accent); font-size: 9px; }
.disc-card:hover .dv-mail .dv-send { background: rgba(var(--accent-rgb), .14); }

/* recall: your dump vs the key, one gap glowing */
.dv-recall { display: flex; align-items: center; gap: 10px; width: 100%; }
.dv-recall .dump { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.dv-recall .dump i { height: 5px; border-radius: 999px; background: var(--border); }
.dv-recall .dump i:nth-child(2) { width: 78%; }
.dv-recall .dump i.gap { width: 55%; border: 1px dashed rgba(var(--accent-rgb), .65); background: transparent; height: 7px; }
.dv-recall .key { display: flex; flex-direction: column; gap: 2px; text-align: right; flex-shrink: 0; }
.dv-recall .key b { color: var(--text-muted); font-weight: 600; }
.dv-recall .key em { font-style: normal; color: var(--accent); font-size: 9px; }
.disc-card:hover .dv-recall .dump i.gap { box-shadow: 0 0 8px rgba(var(--accent-rgb), .3); }

/* chip flow */
.dv-chips { display: flex; align-items: center; gap: 4px; width: 100%; min-width: 0; flex-wrap: nowrap; overflow: hidden; }
.dv-chips i { font-style: normal; padding: 2px 7px; border-radius: 999px; border: 1px solid var(--border);
  color: var(--text-muted); white-space: nowrap; }
.dv-chips u { text-decoration: none; color: var(--text-dim); font-size: 9px; flex-shrink: 0; }
.dv-chips i.ok { border-color: rgba(var(--accent-rgb), .55); color: var(--accent); }
.disc-card:hover .dv-chips i.ok { background: rgba(var(--accent-rgb), .12); box-shadow: 0 0 8px rgba(var(--accent-rgb), .25); }

/* gauge */
.dv-gauge { display: flex; align-items: center; gap: 10px; width: 100%; }
.dv-gauge svg { width: 64px; height: 36px; flex-shrink: 0; }
.dv-gauge .dv-arc { stroke: var(--border); stroke-width: 3; fill: none; stroke-linecap: round; }
.dv-gauge .dv-needle { stroke: var(--accent); stroke-width: 2; stroke-linecap: round;
  transform-origin: 30px 30px; transition: transform .5s var(--ease-out); }
.dv-gauge .dv-hub { fill: var(--accent); }
.dv-gauge em { font-style: normal; color: var(--text-dim); }
.disc-card:hover .dv-gauge .dv-needle { transform: rotate(14deg); }

/* milestone steps */
.dv-steps { display: flex; align-items: center; gap: 6px; width: 100%; min-width: 0; }
.dv-steps .dv-step { display: flex; align-items: center; gap: 5px; min-width: 0; }
.dv-steps .dv-step i { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(var(--accent-rgb), .5);
  color: var(--accent); font-style: normal; font-size: 8px; display: grid; place-items: center; flex-shrink: 0; }
.dv-steps .dv-step b { font-weight: 500; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dv-steps .dv-step:not(:last-child)::after { content: ''; width: 10px; height: 1px; background: var(--border); flex-shrink: 0; }
.disc-card:hover .dv-steps .dv-step i { background: rgba(var(--accent-rgb), .12); }

@media (prefers-reduced-motion: reduce) {
  .disc-card:hover .dv-svg .dv-line { animation: none; }
  .disc-card:hover .dv-pomo i::before, .disc-card:hover .dv-count .dv-bar i { transition: none; }
}

/* ═══ Microsoft device-code connect (hub modal) ═══ */
.hub-device { display: flex; flex-direction: column; gap: 10px; align-items: center; text-align: center; padding: 6px 0; }
.hub-device-hint { color: var(--text-muted); font-size: 13px; margin: 0; }
.hub-device-hint a { color: var(--accent); }
.hub-device-code {
  font-family: var(--font-mono);
  font-size: 28px;
  letter-spacing: 6px;
  padding: 10px 18px;
  border: 1px dashed rgba(var(--accent-rgb), .55);
  border-radius: var(--r-md);
  color: var(--accent);
  background: rgba(var(--accent-rgb), .07);
  user-select: all;
}
.hub-device-wait { color: var(--text-dim); font-size: 12px; margin: 0; animation: hub-wait-pulse 1.6s ease-in-out infinite; }
@keyframes hub-wait-pulse { 50% { opacity: .45; } }