/* ═══════════════════════════════════════════════════════════════════
   JackyBot — "Quiet Power" Design System v19
   Mineral palette: warm desaturated tones, atmospheric dark UI
   ═══════════════════════════════════════════════════════════════════ */

/* ── Google Fonts — Inter + Inter Tight + JetBrains Mono ─────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Inter+Tight:wght@600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* ── Design Tokens — Mineral Palette ─────────────────────────────── */
:root {
  /* Background: deep graphite to smoke */
  --bg:           var(--jb-surface-s0, #1c1917);
  --text:         var(--jb-color-stone100, #f5f5f4);
  --hint:         var(--jb-color-stone500, #78716c);
  --link:         var(--jb-color-copper400, #c2956a);
  --btn-bg:       var(--jb-color-primary, #b5854d);
  --btn-text:     #ffffff;
  --secondary-bg: var(--jb-surface-s1, #292524);
  --section-bg:   var(--jb-surface-s1, #292524);
  --separator:    rgba(255,255,255,0.06);

  /* Accent system: mineral copper + slate + sage + clay */
  --accent-1:     var(--jb-color-primary, #b5854d);
  --accent-2:     var(--jb-color-copper400, #c2956a);
  --accent-3:     var(--jb-color-slate400, #8899aa);
  --accent-4:     var(--jb-color-sage400, #8fac8f);

  /* Gradients: warm atmospheric — no more neon purple */
  --gradient-primary: linear-gradient(135deg, var(--jb-color-copper500, #b5854d), var(--jb-color-copper400, #c2956a));
  --gradient-warm:    linear-gradient(135deg, var(--jb-color-clay400, #c97c5c), var(--jb-color-clay500, #b86742));
  --gradient-cool:    linear-gradient(135deg, var(--jb-color-slate400, #8899aa), var(--jb-color-slate500, #6a8094));
  --gradient-green:   linear-gradient(135deg, var(--jb-color-sage400, #8fac8f), var(--jb-color-sage500, #6d9b6d));
  --gradient-purple:  linear-gradient(135deg, var(--jb-color-slate500, #6a8094), var(--jb-color-copper400, #c2956a));
  --gradient-hero:    linear-gradient(160deg, rgba(181,133,77,0.12) 0%, rgba(106,128,148,0.06) 40%, transparent 70%);
  --gradient-mesh:    radial-gradient(at 20% 80%, rgba(181,133,77,0.06) 0%, transparent 50%),
                      radial-gradient(at 80% 20%, rgba(106,128,148,0.04) 0%, transparent 50%);

  /* Semantic status colors: desaturated, mineral */
  --mood-great: var(--jb-color-sage400, #8fac8f);
  --mood-good: var(--jb-color-slate400, #8899aa);
  --mood-mid: var(--jb-color-copper400, #c2956a);
  --mood-low: var(--jb-color-clay400, #c97c5c);
  --success: var(--jb-color-success, #6d9b6d);
  --warning: var(--jb-color-warning, #c97c5c);
  --danger:  var(--jb-color-danger, #c44444);
  --info:    var(--jb-color-info, #6a8094);

  /* Surfaces: warm charcoal + frosted slate */
  --card-bg:      rgba(255,255,255,0.035);
  --card-border:  rgba(255,255,255,0.065);
  --card-glow:    rgba(181,133,77,0.06);
  --glass:        rgba(28,25,23,0.82);
  --glass-border: rgba(255,255,255,0.07);
  --glass-blur:   20px;
  --miniapp-panel-bg: rgba(255,255,255,0.05);
  --miniapp-panel-border: rgba(255,255,255,0.06);
  --miniapp-panel-text: rgba(255,255,255,0.75);
  --miniapp-surface-bg: rgba(255,255,255,0.035);
  --miniapp-surface-border: rgba(255,255,255,0.07);

  --radius: 20px; --radius-sm: 12px; --radius-xs: 8px;
  --gap: 16px; --pad: 18px;
  --tabbar-h: 64px; --header-h: 0px;

  /* Shadows: warm-toned, restrained */
  --shadow-sm:  0 2px 8px rgba(0,0,0,0.25);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.3);
  --shadow-lg:  0 8px 32px rgba(0,0,0,0.4);
  --shadow-glow: 0 0 20px rgba(181,133,77,0.12);

  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration:    0.3s;
}

/* ── Reset ───────────────────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--jb-font-body, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
  padding-bottom: calc(var(--tabbar-h) + 80px);
  min-height: 100vh;
  background-image: var(--gradient-mesh);
  background-attachment: fixed;
}

/* ── Common UI Components ────────────────────────────────────────── */
.jb-input { background: rgba(255,255,255,0.06); border: 1px solid var(--card-border); border-radius: 10px; padding: 10px 14px; font-size: 0.88rem; color: var(--text); outline: none; font-family: inherit; width: 100%; transition: border-color 0.2s; }
.jb-input:focus { border-color: var(--accent-1); }
.jb-input::placeholder { color: var(--hint); }
textarea.jb-input { resize: vertical; }
.btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 20px; background: var(--gradient-primary); color: #fff; border: none; border-radius: 10px; font-size: 0.84rem; font-weight: 600; cursor: pointer; font-family: inherit; transition: transform 0.15s, box-shadow 0.15s; box-shadow: 0 2px 12px rgba(181,133,77,0.15); }
.btn-primary:active { transform: scale(0.97); }
.btn-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 20px; background: rgba(255,255,255,0.06); color: var(--text); border: 1px solid var(--card-border); border-radius: 10px; font-size: 0.84rem; font-weight: 600; cursor: pointer; font-family: inherit; transition: transform 0.15s; }
.btn-secondary:active { transform: scale(0.97); }

/* ── SVG Icon System ─────────────────────────────────────────────── */
.jb-icon { width: 20px; height: 20px; flex-shrink: 0; display: inline-block; vertical-align: middle; }
.jb-icon.sm { width: 16px; height: 16px; }
.jb-icon.lg { width: 28px; height: 28px; }
.jb-icon.xl { width: 36px; height: 36px; }
.jb-icon.hero-size { width: 48px; height: 48px; }

.jb-icon-box { width: 40px; height: 40px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.jb-icon-box .jb-icon { width: 22px; height: 22px; }
.jb-icon-box.indigo  { background: rgba(181,133,77,0.12); color: #c2956a; }
.jb-icon-box.violet  { background: rgba(106,128,148,0.1); color: #8fac8f; }
.jb-icon-box.blue    { background: rgba(59,130,246,0.15); color: #60a5fa; }
.jb-icon-box.cyan    { background: rgba(6,182,212,0.15); color: #22d3ee; }
.jb-icon-box.green   { background: rgba(16,185,129,0.15); color: #34d399; }
.jb-icon-box.amber   { background: rgba(245,158,11,0.15); color: #fbbf24; }
.jb-icon-box.red     { background: rgba(239,68,68,0.15); color: #f87171; }
.jb-icon-box.rose    { background: rgba(244,63,94,0.15); color: #fb7185; }
.jb-icon-box.purple  { background: rgba(168,85,247,0.15); color: #b3ccb3; }

.jb-mood { width: 28px; height: 28px; }
.jb-mood.lg { width: 36px; height: 36px; }
.jb-mood.xl { width: 44px; height: 44px; }

/* ── Hero Header ─────────────────────────────────────────────────── */
.hero { position: relative; padding: 28px var(--pad) 22px; overflow: hidden; }
.hero::before { content: ''; position: absolute; inset: 0; background: var(--gradient-hero); pointer-events: none; }
.hero::after {
  content: ''; position: absolute; top: -50%; right: -30%; width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(181,133,77,0.1) 0%, transparent 70%);
  border-radius: 50%; animation: hero-orb 8s ease-in-out infinite; pointer-events: none;
}
@keyframes hero-orb {
  0%, 100% { transform: translate(0,0) scale(1); opacity: 0.6; }
  50% { transform: translate(-30px,20px) scale(1.2); opacity: 1; }
}

.hero-content { position: relative; z-index: 1; display: flex; align-items: center; gap: 16px; }
.hero-avatar, .hero-avatar-placeholder { width: 52px; height: 52px; border-radius: 16px; flex-shrink: 0; }
.hero-avatar { object-fit: cover; border: 2px solid rgba(255,255,255,0.1); background: var(--card-bg); }
.hero-avatar-placeholder {
  background: var(--gradient-primary); display: flex; align-items: center; justify-content: center;
  font-family: var(--jb-font-display); font-size: 1.3rem; font-weight: 800; color: #fff; box-shadow: 0 4px 16px rgba(181,133,77,0.2);
}
.hero-text { flex: 1; min-width: 0; }
.hero-greeting {
  font-family: var(--jb-font-display); font-size: 1.25rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1.2;
  background: linear-gradient(135deg, var(--text) 30%, var(--accent-3));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.hero-date { font-size: 0.78rem; color: var(--hint); margin-top: 3px; font-weight: 500; }

.hero-stats { display: flex; gap: 8px; margin-top: 18px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.hero-stats::-webkit-scrollbar { display: none; }
.hero-chip {
  display: flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: var(--radius);
  background: var(--card-bg); border: 1px solid var(--card-border); backdrop-filter: blur(8px);
  font-size: 0.75rem; font-weight: 600; white-space: nowrap; flex-shrink: 0;
  transition: transform var(--duration) var(--ease-spring);
}
.hero-chip:active { transform: scale(0.95); }
.hero-chip .jb-icon { width: 16px; height: 16px; }

/* ── Tab Bar ─────────────────────────────────────────────────────── */
#tabbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 200;
  display: flex; justify-content: space-around;
  background: var(--glass);
  -webkit-backdrop-filter: saturate(180%) blur(var(--glass-blur));
  backdrop-filter: saturate(180%) blur(var(--glass-blur));
  border-top: 1px solid var(--glass-border);
  height: var(--tabbar-h); padding-bottom: env(safe-area-inset-bottom, 0);
}
.tabbar-item {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; border: none; background: none; color: var(--hint); font-family: inherit;
  font-size: 0.62rem; font-weight: 600; letter-spacing: 0.02em; cursor: pointer;
  transition: color var(--duration), transform var(--duration); -webkit-tap-highlight-color: transparent; position: relative;
}
.tabbar-item.active { color: var(--accent-1); }
.tabbar-item.active::after {
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 24px; height: 3px; border-radius: 0 0 3px 3px;
  background: var(--gradient-primary); box-shadow: 0 2px 8px rgba(181,133,77,0.3);
}
.tabbar-icon { width: 24px; height: 24px; transition: transform var(--duration) var(--ease-spring); }
.tabbar-item.active .tabbar-icon { transform: scale(1.1); }

/* FAB never shows active indicator bar */
.tabbar-fab::after { display: none !important; }

/* Assistant FAB (center elevated button) */
.tabbar-fab {
  flex: 0 0 56px; width: 56px; height: 56px; border-radius: 50%;
  background: var(--gradient-primary); color: #fff;
  margin-top: -20px; box-shadow: 0 4px 16px rgba(181,133,77,0.35);
  transition: transform 0.2s var(--ease-spring), box-shadow 0.2s;
  position: relative;
}
.tabbar-fab:active { transform: scale(0.92); }
.tabbar-fab .tabbar-icon { width: 26px; height: 26px; stroke: #fff; }
.tabbar-fab.open { box-shadow: 0 4px 24px rgba(181,133,77,0.5); transform: scale(1.05); }

/* Unread badge on center FAB */
.tabbar-fab .co-badge {
  position: absolute; top: -4px; right: -4px;
  background: linear-gradient(135deg, #ef4444, #f97316);
  color: #fff; font-size: 0.65rem; font-weight: 700;
  min-width: 18px; height: 18px; line-height: 18px;
  border-radius: 9px; text-align: center; padding: 0 4px;
  box-shadow: 0 2px 6px rgba(239,68,68,0.4);
  pointer-events: none;
}
.tabbar-fab .co-badge.hidden { display: none; }

/* Body-level FAB (dock-config.js appends FAB to body for hit-testing) */
body > .tabbar-fab {
  position: fixed;
  bottom: calc(var(--tabbar-h, 64px) + env(safe-area-inset-bottom, 0px) + 12px);
  right: 20px;
  z-index: 250;
  margin-top: 0;
}

/* ── Context Mode Visual Shifts ──────────────────────────────────── */
/* Subtle accent tone changes based on the adaptive bar context */

[data-bar-context="work"] {
  --accent-1: var(--jb-color-slate500, #6a8094);
  --accent-2: var(--jb-color-slate400, #8899aa);
  --gradient-primary: linear-gradient(135deg, var(--jb-color-slate500, #6a8094), var(--jb-color-slate400, #8899aa));
  --shadow-glow: 0 0 20px rgba(106,128,148,0.12);
}

[data-bar-context="health"] {
  --accent-1: var(--jb-color-sage500, #6d9b6d);
  --accent-2: var(--jb-color-sage400, #8fac8f);
  --gradient-primary: linear-gradient(135deg, var(--jb-color-sage500, #6d9b6d), var(--jb-color-sage400, #8fac8f));
  --shadow-glow: 0 0 20px rgba(109,155,109,0.12);
}

/* ── Content ─────────────────────────────────────────────────────── */
#content { padding: 16px var(--pad) var(--gap); min-height: 50vh; }

/* ── View Transition ─────────────────────────────────────────────── */
.view-enter { animation: fadeUp var(--duration) var(--ease-out); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

.stagger > * { opacity: 0; animation: fadeUp 0.4s var(--ease-out) forwards; }
.stagger > *:nth-child(1) { animation-delay: 0.05s; }
.stagger > *:nth-child(2) { animation-delay: 0.1s; }
.stagger > *:nth-child(3) { animation-delay: 0.15s; }
.stagger > *:nth-child(4) { animation-delay: 0.2s; }
.stagger > *:nth-child(5) { animation-delay: 0.25s; }
.stagger > *:nth-child(6) { animation-delay: 0.3s; }
.stagger > *:nth-child(7) { animation-delay: 0.35s; }
.stagger > *:nth-child(8) { animation-delay: 0.4s; }

/* ── Loading ─────────────────────────────────────────────────────── */
.loading-wrapper {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: calc(100vh - var(--tabbar-h) - 32px); gap: 14px;
}
.loading-spinner { width: 32px; height: 32px; border: 2.5px solid rgba(255,255,255,0.06); border-top-color: var(--accent-1); border-radius: 50%; animation: spin 0.7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.loading-text { font-size: 0.82rem; color: var(--hint); font-weight: 500; }

/* ── Cards — Glass Morphism ──────────────────────────────────────── */
.card {
  background: var(--card-bg); border-radius: var(--radius); padding: var(--gap); margin-bottom: 14px;
  border: 1px solid var(--card-border); backdrop-filter: blur(8px);
  transition: transform var(--duration), box-shadow var(--duration); position: relative; overflow: hidden;
}
.card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent); pointer-events: none;
}
.card:active { transform: scale(0.98); }
.card-title { font-family: var(--jb-font-display); font-weight: 700; font-size: 0.9rem; margin-bottom: 12px; letter-spacing: -0.02em; display: flex; align-items: center; gap: 8px; }
.card-title .jb-icon { opacity: 0.7; }
.miniapp-deck { padding: 18px; }
.miniapp-deck__header { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.miniapp-deck__copy { line-height: 1.6; max-width: 34rem; }
.miniapp-deck__meta { display: flex; gap: 8px; flex-wrap: wrap; }
.miniapp-deck__panels { margin: 14px 0 0; }
.miniapp-empty-card { padding: 20px; }
.miniapp-empty-card__hero { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 14px; }
.miniapp-empty-card__icon { font-size: 2rem; line-height: 1; }
.miniapp-empty-card__icon--lg { font-size: 2.2rem; }
.miniapp-empty-card__title { font-family: var(--jb-font-display); font-weight: 800; font-size: 1.02rem; margin-bottom: 6px; }
.miniapp-empty-card__title--lg { font-size: 1.05rem; }
.miniapp-empty-card__text { line-height: 1.6; }
.miniapp-empty-card__actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.miniapp-empty-card__panels { margin-bottom: 14px; }
.miniapp-center-card { text-align: center; }
.vault-file__body { flex: 1; }
.vault-file__meta { font-size: 0.8rem; color: var(--hint); }
.vault-file__summary { font-size: 0.8rem; color: var(--text-secondary, rgba(255,255,255,0.75)); margin-top: 4px; }
.vault-preview-card { padding: 20px; text-align: center; }
.vault-preview-card__icon { font-size: 3rem; }
.vault-preview-actions { margin-top: 12px; width: 100%; }
.card-subtitle { font-size: 0.75rem; color: var(--hint); margin-top: 6px; font-weight: 500; }
.card-accent { border-left: 3px solid var(--accent-1); }
.card-gradient { background: linear-gradient(135deg, rgba(181,133,77,0.08), rgba(106,128,148,0.04)); border-color: rgba(181,133,77,0.12); }
.card-compact { padding: 12px var(--gap); }
.card-clickable { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.card-clickable:active { transform: scale(0.97); box-shadow: var(--shadow-glow); }
.card-row { display: flex; justify-content: space-between; align-items: center; font-size: 0.86rem; padding: 4px 0; }

/* ── Diary Cards ─────────────────────────────────────────────────── */
.diary-card {
  background: var(--card-bg); border-radius: var(--radius); padding: 18px 18px 16px; margin-bottom: 12px;
  border: 1px solid var(--card-border); position: relative; overflow: hidden;
  backdrop-filter: blur(8px); transition: transform var(--duration);
}
.diary-card:active { transform: scale(0.98); }
.diary-card::before { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; border-radius: 4px 0 0 4px; }
.diary-card.mood-great::before { background: var(--gradient-green); }
.diary-card.mood-good::before  { background: var(--gradient-cool); }
.diary-card.mood-mid::before   { background: linear-gradient(180deg, #fbbf24, #f59e0b); }
.diary-card.mood-low::before   { background: var(--gradient-warm); }
.diary-card.mood-none::before  { background: rgba(255,255,255,0.1); }

.diary-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.diary-date { font-weight: 700; font-size: 0.84rem; letter-spacing: -0.01em; }
.diary-mood .jb-mood { width: 24px; height: 24px; }
.diary-text { font-size: 0.86rem; line-height: 1.7; color: var(--text-secondary, rgba(255,255,255,0.78)); }
.diary-text.collapsed { display: -webkit-box; line-clamp: 3; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.diary-expand {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; font-size: 0.75rem;
  color: var(--accent-3); cursor: pointer; font-weight: 600; border: none; background: none; padding: 0; font-family: inherit;
}
.diary-footer { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.diary-footer > span { font-size: 0.72rem; color: var(--hint); font-weight: 500; }

/* ── Section Headers ─────────────────────────────────────────────── */
.section-title {
  font-family: var(--jb-font-body); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--hint); margin: 22px 0 10px; display: flex; align-items: center; gap: 6px;
}
.section-title:first-child { margin-top: 4px; }
.section-title .jb-icon { width: 14px; height: 14px; opacity: 0.6; }

/* ── List items ──────────────────────────────────────────────────── */
.list-item { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; font-size: 0.86rem; border-bottom: 1px solid var(--separator); }
.list-item:last-child { border-bottom: none; }

/* ── Badges ──────────────────────────────────────────────────────── */
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; font-size: 0.68rem; font-weight: 700; border-radius: 20px; background: var(--badge-bg, rgba(255,255,255,0.06)); color: var(--badge-color, rgba(255,255,255,0.65)); }
.badge.primary { background: rgba(181,133,77,0.12); color: var(--accent-3); }
.badge.success { background: rgba(52,211,153,0.12); color: var(--success); }
.badge.warning { background: rgba(251,191,36,0.12); color: var(--warning); }
.badge.danger  { background: rgba(248,113,113,0.12); color: var(--danger); }
.badge.info    { background: rgba(96,165,250,0.12); color: var(--info); }

/* ── Progress Bars ───────────────────────────────────────────────── */
.progress { height: 6px; background: rgba(255,255,255,0.05); border-radius: 3px; overflow: hidden; margin: 8px 0; }
.progress-bar {
  height: 100%; border-radius: 3px; background: var(--gradient-primary);
  transition: width 1s var(--ease-out); position: relative;
}
.progress-bar::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  animation: shimmer 2s infinite;
}
@keyframes shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.progress-bar.warning { background: linear-gradient(90deg, #fbbf24, #f59e0b); }
.progress-bar.danger  { background: var(--gradient-warm); }
.progress-bar.success { background: var(--gradient-green); }

/* ── Stats Grid ──────────────────────────────────────────────────── */
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.stat-card {
  background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius);
  padding: 16px 10px 14px; text-align: center; backdrop-filter: blur(8px);
  transition: transform var(--duration) var(--ease-spring); position: relative; overflow: hidden;
}
.stat-card:active { transform: scale(0.95); }
.stat-icon { margin-bottom: 6px; display: flex; justify-content: center; }
.stat-icon .jb-icon { width: 24px; height: 24px; }
.stat-emoji { font-size: 1.3rem; margin-bottom: 2px; display: flex; justify-content: center; }
.stat-emoji .jb-icon { width: 24px; height: 24px; }
.stat-value { font-family: var(--jb-font-display); font-size: 1.4rem; font-weight: 800; letter-spacing: -0.04em; line-height: 1.2; font-variant-numeric: tabular-nums; }
.stat-label { font-size: 0.65rem; color: var(--hint); margin-top: 3px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }
.stats-grid-compact { grid-template-columns: repeat(4, 1fr); gap: 8px; }
.stat-card-compact { padding: 12px 6px 10px; }
.stat-card-compact .stat-icon .jb-icon { width: 20px; height: 20px; }
.stat-card-compact .stat-value { font-size: 1.05rem; }
.stat-card-compact .stat-label { font-size: 0.58rem; }

/* ── Chart ───────────────────────────────────────────────────────── */
.chart-container { position: relative; height: 200px; margin: 14px 0 6px; }

/* ── Habits ──────────────────────────────────────────────────────── */
.habit-item { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--separator); }
.habit-item:last-child { border-bottom: none; }
.habit-check {
  width: 24px; height: 24px; border-radius: 8px; border: 2px solid rgba(255,255,255,0.15);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  cursor: pointer; transition: all var(--duration) var(--ease-spring);
}
.habit-check .jb-icon { width: 14px; height: 14px; opacity: 0; transition: opacity 0.2s; }
.habit-check.done { background: var(--gradient-green); border-color: transparent; box-shadow: 0 2px 8px rgba(52,211,153,0.3); }
.habit-check.done .jb-icon { opacity: 1; color: #fff; }
.habit-check:active { transform: scale(1.2); }
.habit-info { flex: 1; min-width: 0; }
.habit-name { font-size: 0.86rem; font-weight: 600; }
.habit-streak { font-size: 0.74rem; color: var(--hint); display: flex; align-items: center; gap: 3px; }
.habit-streak .jb-icon { width: 12px; height: 12px; color: #f97316; }

.habit-mini { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--separator); font-size: 0.84rem; }
.habit-mini:last-child { border-bottom: none; }
.habit-mini-check {
  width: 20px; height: 20px; border-radius: 6px; border: 2px solid rgba(255,255,255,0.15);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.habit-mini-check .jb-icon { width: 12px; height: 12px; opacity: 0; }
.habit-mini-check.done { background: var(--gradient-green); border-color: transparent; box-shadow: 0 2px 6px rgba(52,211,153,0.25); }
.habit-mini-check.done .jb-icon { opacity: 1; color: #fff; }
.habit-mini-name { flex: 1; font-weight: 500; }
.habit-mini-streak { font-size: 0.72rem; color: var(--hint); display: flex; align-items: center; gap: 2px; }

/* ── Goals ────────────────────────────────────────────────────────── */
.goal-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius); padding: var(--gap); margin-bottom: 12px; }
.goal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.goal-title { font-weight: 700; font-size: 0.86rem; }
.goal-pct { font-weight: 800; font-size: 0.84rem; color: var(--accent-3); }
.goal-mini { margin: 8px 0; }

/* ── Empty states ────────────────────────────────────────────────── */
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 4rem 2rem 2rem; text-align: center; }
.empty-icon {
  width: 80px; height: 80px; border-radius: 24px; background: var(--card-bg); border: 1px solid var(--card-border);
  display: flex; align-items: center; justify-content: center; margin-bottom: 20px; animation: float 3s ease-in-out infinite;
}
.empty-icon .jb-icon { width: 36px; height: 36px; color: var(--accent-3); }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.empty-title { font-size: 1.05rem; font-weight: 700; margin-bottom: 8px; }
.empty-text { font-size: 0.84rem; color: var(--hint); line-height: 1.6; max-width: 280px; }

/* ── Expenses ────────────────────────────────────────────────────── */
.expense-total {
  font-size: 2.4rem; font-weight: 900; text-align: center; padding: 10px 0 0; letter-spacing: -0.05em;
  background: linear-gradient(135deg, var(--text), var(--accent-3));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.budget-item { margin: 12px 0; }
.budget-row { display: flex; justify-content: space-between; font-size: 0.84rem; margin-bottom: 6px; }
.budget-cat { font-weight: 600; }
.budget-nums { color: var(--hint); font-size: 0.78rem; font-weight: 500; }
.budget-mini { margin: 10px 0; }
.budget-mini .budget-row { font-size: 0.8rem; margin-bottom: 4px; }
.mood-chip { font-size: 0.9rem; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.expense-badge { font-size: 1.05rem; font-weight: 800; letter-spacing: -0.02em; }
.hint { color: var(--hint); font-size: 0.78rem; font-weight: 500; }
.highlight-row { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.exp-legend { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 8px; }
.exp-legend-item { display: flex; align-items: center; gap: 4px; font-size: 0.75rem; color: var(--hint); }
.exp-legend-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.exp-amount-input { font-family: var(--jb-font-mono); font-size: 2rem !important; text-align: center; font-weight: 800; letter-spacing: -0.03em; }
.exp-item { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--separator, rgba(255,255,255,0.06)); }
.exp-item:last-child { border-bottom: none; }
.exp-item-icon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; }
.exp-item-info { flex: 1; min-width: 0; }
.exp-item-title { font-size: 0.88rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.exp-item-meta { font-size: 0.75rem; color: var(--hint); margin-top: 2px; }
.exp-item-amount { font-family: var(--jb-font-mono); font-size: 0.92rem; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.exp-date-header { display: flex; justify-content: space-between; align-items: center; padding: 8px 4px 4px; font-size: 0.78rem; font-weight: 600; color: var(--hint); }
.exp-date-total { font-weight: 700; color: var(--text); }

/* ── Quick actions ───────────────────────────────────────────────── */
.quick-actions { display: flex; gap: 10px; margin: 16px 0; overflow-x: auto; scrollbar-width: none; }
.quick-actions::-webkit-scrollbar { display: none; }
.quick-btn {
  display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: var(--radius);
  background: rgba(181,133,77,0.08); border: 1px solid rgba(181,133,77,0.12);
  color: var(--accent-3); font-size: 0.78rem; font-weight: 600; font-family: inherit;
  white-space: nowrap; cursor: pointer; flex-shrink: 0; -webkit-tap-highlight-color: transparent;
  transition: all var(--duration) var(--ease-spring);
}
.quick-btn .jb-icon { width: 16px; height: 16px; }
.quick-btn:active { transform: scale(0.92); background: rgba(181,133,77,0.12); }

::-webkit-scrollbar { width: 0; height: 0; }

/* ── Buttons & Forms ─────────────────────────────────────────────── */
.btn-action {
  padding: 10px 18px; border-radius: var(--radius-sm); background: var(--gradient-primary);
  color: #fff; font-size: 0.84rem; font-weight: 700; font-family: inherit; border: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent; transition: all var(--duration);
  box-shadow: 0 4px 12px rgba(181,133,77,0.2);
}
.btn-action:active { transform: scale(0.96); }
.btn-action.btn-secondary { background: rgba(255,255,255,0.06); color: var(--text); box-shadow: none; border: 1px solid var(--card-border); }

.form-input {
  padding: 12px 14px; border-radius: var(--radius-sm); border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03); color: var(--text); font-size: 0.88rem; font-family: inherit;
  outline: none; transition: border-color var(--duration), box-shadow var(--duration); width: 100%;
}
.form-input:focus { border-color: var(--accent-1); box-shadow: 0 0 0 3px rgba(181,133,77,0.12); }
.form-input::placeholder { color: var(--hint); }
.form-row { display: flex; gap: 8px; margin-bottom: 10px; }
.form-actions { display: flex; gap: 8px; justify-content: flex-end; }

/* ── Mood picker ─────────────────────────────────────────────────── */
.mood-picker { display: flex; justify-content: space-around; gap: 6px; }
.mood-btn {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 14px;
  border: 2px solid transparent; border-radius: var(--radius); background: rgba(255,255,255,0.03);
  cursor: pointer; transition: all 0.25s var(--ease-spring); -webkit-tap-highlight-color: transparent;
  font-family: inherit; min-width: 52px;
}
.mood-btn:active { transform: scale(0.9); }
.mood-btn:hover, .mood-btn.selected { border-color: var(--accent-1); background: rgba(181,133,77,0.1); box-shadow: 0 0 16px rgba(181,133,77,0.12); }
.mood-emoji { display: flex; }
.mood-emoji .jb-mood { width: 32px; height: 32px; }
.mood-label { font-size: 0.68rem; color: var(--hint); font-weight: 600; }

/* ── AI usage ────────────────────────────────────────────────────── */
.ai-model { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--separator); }
.ai-model:last-child { border-bottom: none; }
.ai-model-name { font-size: 0.84rem; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.ai-model-calls { font-size: 0.78rem; color: var(--hint); font-weight: 500; }

/* ── Search overlay ──────────────────────────────────────────────── */
.search-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: flex; align-items: flex-start; justify-content: center; padding-top: 10vh; z-index: 1000; backdrop-filter: blur(8px); }
.search-modal { width: 92%; max-width: 480px; background: var(--secondary-bg); border: 1px solid var(--card-border); border-radius: var(--radius); box-shadow: var(--shadow-lg); overflow: hidden; max-height: 70vh; display: flex; flex-direction: column; }
.search-input-wrap { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--separator); }
.search-icon .jb-icon { width: 18px; height: 18px; }
.search-input { flex: 1; background: none; border: none; color: var(--text); font-size: 1rem; font-family: inherit; outline: none; }
.search-results { overflow-y: auto; max-height: 55vh; }
.search-hint { padding: 28px 18px; text-align: center; color: var(--hint); font-size: 0.88rem; }
.search-result { padding: 12px 18px; border-bottom: 1px solid var(--separator); cursor: pointer; transition: background 0.15s; }
.search-result:active { background: rgba(255,255,255,0.04); }
.search-result-header { display: flex; justify-content: space-between; margin-bottom: 4px; }
.search-result-source { font-size: 0.72rem; color: var(--accent-3); font-weight: 700; text-transform: uppercase; }
.search-result-date { font-size: 0.72rem; color: var(--hint); }
.search-result-title { font-size: 0.88rem; font-weight: 700; margin-bottom: 3px; }
.search-result-snippet { font-size: 0.8rem; color: var(--hint); line-height: 1.45; }

/* ═══════════════════════════════════════════════════════════════════
   Login Page
   ═══════════════════════════════════════════════════════════════════ */
.login-page { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 80vh; padding: 2rem var(--pad); text-align: center; }
.login-logo { margin-bottom: 28px; }
.login-icon { width: 100px; height: 100px; border-radius: 28px; box-shadow: 0 8px 40px rgba(181,133,77,0.25); }
.login-title { font-size: 2rem; font-weight: 900; letter-spacing: -0.04em; margin-bottom: 6px; background: linear-gradient(135deg, var(--text), var(--accent-3)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.login-subtitle { font-size: 0.92rem; color: var(--hint); margin-bottom: 44px; font-weight: 500; }
.login-methods { width: 100%; max-width: 340px; }
.login-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 15px 24px; border-radius: var(--radius); font-size: 0.96rem; font-weight: 700; font-family: inherit; text-decoration: none; cursor: pointer; transition: all var(--duration); -webkit-tap-highlight-color: transparent; border: none; }
.login-btn:active { transform: scale(0.97); }
.login-btn-primary { background: var(--gradient-primary); color: #fff; box-shadow: 0 4px 20px rgba(181,133,77,0.3); }
.login-hint { margin-top: 24px; font-size: 0.82rem; color: var(--hint); line-height: 1.6; }
.login-hint strong { color: var(--accent-3); }

/* ═══════════════════════════════════════════════════════════════════
   Segments, Meds, Health
   ═══════════════════════════════════════════════════════════════════ */
.segment-control { display: flex; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius-sm); padding: 3px; margin: 10px 0 16px; }
.segment-btn { flex: 1; padding: 10px 6px; border: none; background: transparent; color: var(--hint); font-size: 0.8rem; font-weight: 700; font-family: inherit; border-radius: 10px; cursor: pointer; transition: all 0.25s var(--ease-spring); -webkit-tap-highlight-color: transparent; display: flex; align-items: center; justify-content: center; gap: 4px; }
.segment-btn .jb-icon { width: 14px; height: 14px; }
.segment-btn.active { background: var(--gradient-primary); color: #fff; box-shadow: 0 2px 12px rgba(181,133,77,0.2); }

.med-item { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--separator); }
.med-item:last-child { border-bottom: none; }
.med-icon { width: 40px; height: 40px; border-radius: var(--radius-sm); background: rgba(239,68,68,0.1); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.med-icon .jb-icon { color: #f87171; }
.med-info { flex: 1; min-width: 0; }
.med-name { font-size: 0.86rem; font-weight: 700; }
.med-detail { font-size: 0.74rem; color: var(--hint); margin-top: 2px; font-weight: 500; }
.med-notes { font-size: 0.72rem; color: var(--hint); font-style: italic; margin-top: 3px; }
.med-time { font-size: 0.8rem; font-weight: 700; color: var(--accent-3); white-space: nowrap; }

.health-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--separator); }
.health-row:last-child { border-bottom: none; }
.health-label { font-size: 0.84rem; color: var(--hint); font-weight: 500; }
.health-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; }
.health-metric-card { text-align: center; padding: 10px 8px; border-radius: var(--radius-xs); background: rgba(255,255,255,0.03); }
.health-metric-value { font-size: 1.3rem; font-weight: 800; color: var(--text); }
.health-metric-unit { font-size: 0.68rem; font-weight: 500; color: var(--hint); margin-left: 2px; }
.health-metric-label { font-size: 0.72rem; color: var(--hint); margin-top: 2px; }

/* ═══════════════════════════════════════════════════════════════════
   Profile & Facts
   ═══════════════════════════════════════════════════════════════════ */
.profile-identity { text-align: center; padding: 20px 0 24px; }
.profile-avatar { width: 72px; height: 72px; border-radius: 22px; background: var(--gradient-primary); color: #fff; font-size: 1.8rem; font-weight: 800; display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; box-shadow: 0 8px 32px rgba(181,133,77,0.25); }
.profile-name { font-size: 1.4rem; font-weight: 800; letter-spacing: -0.03em; }
.profile-since { font-size: 0.8rem; color: var(--hint); margin-top: 3px; font-weight: 500; }

.fact-item { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; font-size: 0.86rem; }
.fact-item:not(:last-child) { border-bottom: 1px solid var(--separator); }
.fact-key { color: var(--hint); font-size: 0.8rem; font-weight: 500; }
.fact-value { font-weight: 600; text-align: right; max-width: 60%; }

.interest-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 0 14px; }
.interest-chip { padding: 7px 16px; border-radius: 20px; background: rgba(181,133,77,0.1); color: var(--accent-3); font-size: 0.82rem; font-weight: 600; display: flex; align-items: center; gap: 5px; }
.interest-chip .jb-icon { width: 14px; height: 14px; }

/* ═══════════════════════════════════════════════════════════════════
   Discover View
   ═══════════════════════════════════════════════════════════════════ */
.disc-hero { text-align: center; padding: 10px 0 20px; }
.disc-hero-icon { margin: 0 auto 12px; }
.disc-hero-icon .jb-icon { width: 48px; height: 48px; color: var(--accent-1); filter: drop-shadow(0 4px 16px rgba(181,133,77,0.25)); }
.disc-hero-title { font-size: 1.4rem; font-weight: 900; letter-spacing: -0.04em; margin-bottom: 6px; }
.disc-hero-sub { font-size: 0.84rem; color: var(--hint); line-height: 1.55; font-weight: 500; }

.disc-cta { display: flex; align-items: center; gap: 14px; margin: 0 0 22px; border-radius: var(--radius); background: linear-gradient(135deg, color-mix(in srgb, var(--miniapp-surface-bg) 88%, rgba(181,133,77,0.14)), color-mix(in srgb, var(--miniapp-surface-bg) 92%, rgba(106,128,148,0.08))); border: 1px solid color-mix(in srgb, var(--miniapp-surface-border) 72%, rgba(181,133,77,0.18)); padding: 16px; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: all var(--duration) var(--ease-spring); box-shadow: var(--shadow-md); }
.disc-cta:active { transform: scale(0.98); }
.disc-cta .jb-icon { width: 28px; height: 28px; color: var(--accent-1); flex-shrink: 0; }
.disc-cta-text { flex: 1; }
.disc-cta-text strong { display: block; font-size: 0.92rem; }
.disc-cta-text span { font-size: 0.77rem; color: var(--hint); font-weight: 500; }
.disc-cta-arrow { color: var(--accent-3); font-size: 1.4rem; }

.disc-views { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.disc-view-chip {
  display: flex; align-items: center; gap: 6px; padding: 10px 16px;
  border-radius: var(--radius-sm); background: var(--miniapp-surface-bg); border: 1px solid var(--miniapp-surface-border);
  color: var(--text); font-size: 0.82rem; font-weight: 600; text-decoration: none;
  transition: all 0.15s; -webkit-tap-highlight-color: transparent; flex: 1; justify-content: center;
  min-width: calc(50% - 4px); box-sizing: border-box;
}
.disc-view-chip .jb-icon { width: 15px; height: 15px; color: var(--accent-1); }
.disc-view-chip:active { background: color-mix(in srgb, var(--miniapp-surface-bg) 72%, rgba(181,133,77,0.12)); transform: scale(0.96); }

.disc-domain { margin-bottom: 10px; }
.disc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.disc-card {
  border-radius: var(--radius); padding: 18px 16px; border: 1px solid var(--card-border);
  background: var(--card-bg); backdrop-filter: blur(8px); -webkit-tap-highlight-color: transparent;
  transition: all var(--duration) var(--ease-spring); min-height: 110px; display: flex; flex-direction: column;
  position: relative; overflow: hidden;
}
.disc-card::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--gradient-primary); opacity: 0; transition: opacity 0.3s; }
.disc-card.actionable { cursor: pointer; }
.disc-card.actionable:active { transform: scale(0.96); box-shadow: var(--shadow-glow); }
.disc-card.actionable:active::after { opacity: 1; }
.disc-card-icon { margin-bottom: 8px; }
.disc-card-icon .jb-icon { width: 22px; height: 22px; }
.disc-card-title { font-size: 0.84rem; font-weight: 700; margin-bottom: 4px; }
.disc-card-desc { font-size: 0.72rem; color: var(--hint); line-height: 1.5; flex: 1; font-weight: 500; }

.disc-tips { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; }
.disc-tip { display: flex; align-items: flex-start; gap: 12px; padding: 14px; background: var(--miniapp-surface-bg); border: 1px solid var(--miniapp-surface-border); border-radius: var(--radius-sm); font-size: 0.8rem; line-height: 1.5; color: var(--text-secondary, rgba(255,255,255,0.78)); backdrop-filter: blur(8px); }
.disc-tip em { color: var(--accent-3); font-style: normal; font-weight: 600; }
.disc-tip-icon { flex-shrink: 0; margin-top: 2px; }
.disc-tip-icon .jb-icon { width: 18px; height: 18px; color: var(--accent-3); }
.disc-invite { padding: 16px; background: var(--miniapp-surface-bg); border: 1px solid var(--miniapp-surface-border); border-radius: var(--radius); margin-bottom: 22px; text-align: center; box-shadow: var(--shadow-md); }
.disc-invite p { font-size: 0.84rem; margin-bottom: 12px; color: var(--hint); }

/* ═══════════════════════════════════════════════════════════════════
   News View
   ═══════════════════════════════════════════════════════════════════ */
.nw-header { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.nw-header h2 { font-size: 1.2rem; flex: 1; }
.nw-article { display: flex; gap: 14px; padding: 14px; margin-bottom: 10px; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius-sm); overflow: hidden; transition: border-color 0.2s; }
.nw-article:hover { border-color: var(--nw-color, var(--accent-1)); }
.nw-article-visual { flex-shrink: 0; width: 56px; height: 56px; border-radius: var(--radius-xs); background: linear-gradient(135deg, color-mix(in srgb, var(--nw-color, var(--accent-1)) 18%, transparent), color-mix(in srgb, var(--nw-color, var(--accent-1)) 6%, transparent)); display: flex; align-items: center; justify-content: center; }
.nw-article-visual-icon .jb-icon { width: 26px; height: 26px; color: var(--nw-color, var(--accent-1)); }
.nw-article-content { flex: 1; min-width: 0; }
.nw-article-top { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; flex-wrap: wrap; }
.nw-article-title { font-weight: 600; font-size: 0.92rem; line-height: 1.4; margin-bottom: 4px; }
.nw-article-snippet { font-size: 0.82rem; color: var(--hint); line-height: 1.5; margin-bottom: 8px; display: -webkit-box; line-clamp: 3; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.nw-article-foot { display: flex; align-items: center; gap: 6px; font-size: 0.78rem; flex-wrap: wrap; }
.nw-ago { color: var(--hint); font-size: 0.75rem; margin-left: auto; }
.nw-source { color: var(--text-secondary, rgba(255,255,255,0.65)); font-weight: 500; }
.nw-link { color: var(--accent-1); font-weight: 600; background: none; border: none; cursor: pointer; margin-left: auto; font-size: 0.78rem; }
.nw-expand-hint { color: var(--accent-1); font-weight: 500; font-size: 0.78rem; margin-left: auto; opacity: 0.8; }
.nw-article { cursor: pointer; }
.nw-article-detail { display: none; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--card-border); }
.nw-article.expanded .nw-article-detail { display: block; }
.nw-article.expanded .nw-article-snippet { display: none; }
.nw-article.expanded .nw-expand-hint { display: none; }
.nw-article.expanded { border-color: var(--nw-color, var(--accent-1)); }
.nw-article-full { font-size: 0.85rem; color: var(--text-secondary, rgba(255,255,255,0.75)); line-height: 1.65; margin-bottom: 10px; white-space: pre-line; }
.nw-article-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
.nw-source-link { display: inline-flex; align-items: center; gap: 4px; color: var(--accent-1); font-weight: 600; font-size: 0.82rem; text-decoration: none; padding: 6px 0; }
.nw-source-link:hover { text-decoration: underline; }
.nw-topics { display: flex; flex-direction: column; gap: 8px; }
.nw-topic { display: flex; align-items: center; gap: 8px; padding: 12px 14px; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius-sm); }
.nw-topic-name { font-weight: 600; font-size: 0.9rem; }
.nw-topic-btn { padding: 6px 14px; border-radius: var(--radius-sm); background: var(--card-bg); border: 1px solid var(--card-border); color: var(--accent-1); font-size: 0.78rem; font-weight: 600; cursor: pointer; margin-left: auto; transition: all 0.2s; }
.nw-topic-btn:hover { background: rgba(255,255,255,0.04); }
.nw-topic-btn.nw-followed { background: var(--accent-1); color: #fff; border-color: var(--accent-1); }
.nw-section-label { font-size: 0.82rem; font-weight: 700; color: var(--hint); text-transform: uppercase; letter-spacing: 0.03em; padding: 8px 0 6px; }
.nw-save-btn { display: inline-flex; align-items: center; gap: 3px; padding: 3px 8px; border-radius: 6px; border: 1px solid var(--card-border); background: transparent; color: var(--hint); font-size: 0.72rem; font-weight: 600; cursor: pointer; transition: all 0.2s; white-space: nowrap; margin-left: auto; }
.nw-save-btn:hover { border-color: var(--accent-1); color: var(--accent-1); }
.nw-save-btn.nw-saved { background: var(--accent-1); color: #fff; border-color: var(--accent-1); }
.nw-share-btn { display: inline-flex; align-items: center; padding: 3px 6px; border-radius: 6px; border: 1px solid var(--card-border); background: transparent; color: var(--hint); cursor: pointer; transition: all 0.2s; }
.nw-share-btn:hover { border-color: var(--accent-1); color: var(--accent-1); }

/* ═══════════════════════════════════════════════════════════════════
   Places View
   ═══════════════════════════════════════════════════════════════════ */
.pl-header { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.pl-header h2 { font-size: 1.2rem; flex: 1; }
.pl-badges { display: flex; gap: 6px; }
.pl-map { height: 350px; border-radius: var(--radius); background: var(--miniapp-panel-bg); border: 1px solid var(--miniapp-panel-border); box-shadow: 0 16px 34px rgba(15,23,42,0.16); overflow: hidden; }
.pl-map-loading { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--hint); }
.pl-popup { font-size: 14px; line-height: 1.5; }
.pl-list { display: flex; flex-direction: column; gap: 8px; }
.pl-place { display: flex; align-items: flex-start; gap: 12px; padding: 14px; background: var(--miniapp-panel-bg); border: 1px solid var(--miniapp-panel-border); border-left: 3px solid var(--pl-cat-color, var(--accent-1)); border-radius: var(--radius-sm); box-shadow: 0 12px 28px rgba(15,23,42,0.14); }
.pl-place-icon { font-size: 1.4rem; flex-shrink: 0; }
.pl-place-info { flex: 1; min-width: 0; }
.pl-place-name { font-weight: 600; font-size: 0.9rem; margin-bottom: 4px; }
.pl-place-meta { display: flex; gap: 6px; flex-wrap: wrap; }
.pl-place-notes { font-size: 0.8rem; color: var(--hint); margin-top: 4px; }
.pl-place-rating { font-weight: 600; flex-shrink: 0; }
.pl-link { color: var(--accent-1); font-weight: 600; background: none; border: none; cursor: pointer; font-size: 0.78rem; }

/* ── Profile View ────────────────────────────────────────────*/
.prof-identity { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 20px 0 12px; }
.prof-avatar { width: 64px; height: 64px; border-radius: 50%; background: var(--gradient-primary); display: flex; align-items: center; justify-content: center; font-size: 1.6rem; font-weight: 700; color: #fff; }
.prof-name { font-weight: 700; font-size: 1.1rem; }
.prof-since { font-size: 0.72rem; color: var(--hint); }
.prof-nav { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; }
.prof-nav-btn { padding: 8px 14px; border-radius: var(--radius-sm); background: var(--card-bg); border: 1px solid var(--card-border); color: var(--text); font-size: 0.78rem; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 6px; transition: background 0.2s; }
.prof-nav-btn:active { background: rgba(255,255,255,0.06); }
.prof-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.prof-stat { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 8px; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius-sm); }
.prof-stat-icon { opacity: 0.7; }
.prof-stat-val { font-weight: 700; font-size: 1rem; }
.prof-stat-lbl { font-size: 0.68rem; color: var(--hint); }
.prof-fact { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--card-border); }
.prof-fact:last-child { border-bottom: none; }
.prof-fact-key { font-size: 0.8rem; color: var(--hint); }
.prof-fact-val { font-size: 0.85rem; font-weight: 600; }
.prof-interests { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 0; }
.prof-code-input, .prof-link-input { width: 100%; padding: 10px 14px; border-radius: var(--radius-sm); border: 1px solid var(--card-border); background: var(--bg); color: var(--text); font-size: 0.85rem; margin-top: 8px; }

/* ── Settings View ───────────────────────────────────────────*/
.set-push { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; gap: 12px; }
.set-hint { font-size: 0.72rem; color: var(--hint); margin-top: 4px; }
.set-action { width: 100%; padding: 12px; border-radius: var(--radius-sm); border: 1px solid var(--card-border); background: var(--card-bg); color: var(--text); font-size: 0.85rem; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: background 0.2s; }
.set-action:active { background: rgba(255,255,255,0.06); }
.set-danger { border-color: #ef4444; color: #ef4444; }
.set-danger:active { background: rgba(239,68,68,0.1); }

/* ── Stats View ──────────────────────────────────────────────*/
.stat-ring-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.st-model { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--card-border); }
.st-model:last-child { border-bottom: none; }
.st-model-name { font-size: 0.85rem; display: flex; align-items: center; gap: 6px; }
.st-model-calls { font-size: 0.78rem; color: var(--hint); }

/* ── People View ─────────────────────────────────────────────*/
.people-list { display: flex; flex-direction: column; gap: 8px; }
.people-card { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius-sm); cursor: pointer; transition: background 0.2s; }
.people-card:active { background: rgba(255,255,255,0.06); }
.people-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--gradient-primary); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1rem; color: #fff; flex-shrink: 0; }
.people-info { flex: 1; min-width: 0; }
.people-name { font-weight: 600; font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.people-rel { font-size: 0.72rem; color: var(--accent-3); font-weight: 500; margin-left: 6px; }
.people-meta { font-size: 0.72rem; color: var(--hint); margin-top: 2px; display: flex; gap: 10px; flex-wrap: wrap; }
.people-bday .jb-icon { width: 12px; height: 12px; }
.people-arrow { color: var(--hint); font-size: 1.2rem; }
.people-detail { padding: 12px 0 4px; display: flex; flex-direction: column; gap: 10px; }
.people-detail-row { display: flex; flex-direction: column; gap: 4px; }
.people-detail-row label { font-size: 0.72rem; color: var(--hint); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.people-save-btn { margin-top: 4px; }
.ppl-item { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.ppl-avatar { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.95rem; color: #fff; flex-shrink: 0; }
.ppl-info { flex: 1; min-width: 0; }
.ppl-name { font-weight: 600; font-size: 0.88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ppl-tag { font-size: 0.68rem; color: color-mix(in srgb, var(--accent-1) 78%, var(--text) 22%); font-weight: 600; margin-left: 4px; background: color-mix(in srgb, var(--miniapp-surface-bg) 80%, rgba(181,133,77,0.1)); border: 1px solid color-mix(in srgb, var(--miniapp-surface-border) 72%, rgba(181,133,77,0.15)); padding: 1px 6px; border-radius: 999px; }
.ppl-meta { font-size: 0.72rem; color: var(--hint); margin-top: 2px; }
.ppl-card { cursor: pointer; margin-bottom: 6px; }
.ppl-expanded { border-color: var(--accent-1); }
.ppl-avatar--lg { width: 56px; height: 56px; font-size: 1.3rem; }
.ppl-profile { display: flex; flex-direction: column; gap: 12px; padding: 12px 0 4px; }
.ppl-profile-header { display: flex; align-items: center; gap: 12px; }
.ppl-profile-info { flex: 1; min-width: 0; }
.ppl-profile-name { font-weight: 700; font-size: 1rem; margin-bottom: 2px; }
.ppl-profile-bday { font-size: 0.78rem; color: var(--hint); margin-top: 4px; display: flex; align-items: center; gap: 4px; }
.ppl-profile-section { padding: 8px 0; }
.ppl-profile-label { font-size: 0.72rem; color: var(--hint); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
.ppl-profile-notes { font-size: 0.85rem; color: var(--text-secondary, rgba(255,255,255,0.75)); line-height: 1.5; white-space: pre-line; }
.ppl-profile-actions { display: flex; gap: 8px; margin-top: 4px; }
.ppl-profile-actions .btn-action { flex: 1; }
.ppl-edit-form { display: flex; flex-direction: column; gap: 10px; padding-top: 8px; }

/* ── Social View ─────────────────────────────────────────────*/
.social-tabs { display: flex; gap: 4px; margin-bottom: 14px; overflow-x: auto; }
.social-tab { padding: 8px 14px; border-radius: 20px; border: 1px solid var(--card-border); background: transparent; color: var(--hint); font-size: 0.78rem; font-weight: 600; cursor: pointer; white-space: nowrap; transition: all 0.2s; }
.social-tab.active { background: var(--gradient-primary); color: #fff; border-color: transparent; }
.social-badge { background: #ef4444; color: #fff; border-radius: 10px; padding: 1px 6px; font-size: 0.65rem; margin-left: 4px; }
.social-item { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius-sm); margin-bottom: 8px; }
.social-item--unread { border-left: 3px solid var(--accent-1); }
.social-item__icon { flex-shrink: 0; margin-top: 2px; }
.social-item__icon .jb-icon { width: 18px; height: 18px; color: var(--accent-1); }
.social-item__body { flex: 1; min-width: 0; }
.social-item__text { font-size: 0.84rem; line-height: 1.5; }
.social-item__time { font-size: 0.72rem; color: var(--hint); margin-top: 4px; }
.social-invite { text-align: center; padding: 32px 16px; }
.social-invite__text { font-size: 0.9rem; margin-bottom: 16px; }
.social-invite-link { display: flex; gap: 8px; margin-top: 16px; align-items: center; }
.social-invite-link input { flex: 1; }
.social-invite-expire { font-size: 0.72rem; color: var(--hint); margin-top: 8px; }
.social-feature-list { display: flex; flex-direction: column; gap: 8px; }
.social-feature { display: flex; align-items: center; gap: 8px; font-size: 0.84rem; color: var(--text-secondary, rgba(255,255,255,0.7)); }
.social-feature .jb-icon { width: 14px; height: 14px; color: var(--accent-1); flex-shrink: 0; }
.social-onboard { background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03)); }
.dm-friends-list { display: flex; flex-direction: column; gap: 8px; }
.dm-friend-card { margin-bottom: 0; transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease; }
.dm-friend-card--active { border-color: rgba(181,133,77,0.3); background: rgba(181,133,77,0.08); transform: translateY(-1px); }
.dm-friend-row { display: flex; align-items: center; gap: 12px; }
.dm-friend-avatar { width: 42px; height: 42px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(59,130,246,0.9), rgba(14,165,233,0.72)); color: #fff; font-weight: 800; }
.dm-friend-info { flex: 1; min-width: 0; }
.dm-friend-name { font-size: 0.88rem; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.dm-friend-meta { font-size: 0.74rem; color: var(--hint); margin-top: 2px; }
.dm-friend-arrow { color: var(--hint); font-size: 1.15rem; }
.dm-unread-badge { min-width: 18px; height: 18px; padding: 0 6px; border-radius: 999px; background: rgba(239,68,68,0.92); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 0.65rem; font-weight: 700; }

/* ── Activity View ───────────────────────────────────────────*/
.act-counters { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 12px; }
.act-counter { display: flex; flex-direction: column; align-items: center; padding: 14px 8px; text-align: center; }
.act-counter-icon { margin-bottom: 4px; }
.act-counter-icon .jb-icon { width: 20px; height: 20px; color: var(--accent-1); }
.act-counter-val { font-size: 1.4rem; font-weight: 800; line-height: 1.2; }
.act-model-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; }
.act-model-row:not(:last-child) { border-bottom: 1px solid var(--card-border); }
.act-model-name { font-weight: 600; font-size: 0.85rem; min-width: 70px; }
.act-daily { display: flex; align-items: flex-end; gap: 4px; padding: 16px 14px 10px; justify-content: space-around; }
.act-day-col { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.act-day-bar { width: 24px; background: var(--accent-1); border-radius: 4px 4px 0 0; min-height: 4px; transition: height 0.3s; }
.act-day-label { font-size: 0.65rem; color: var(--hint); text-transform: uppercase; }

/* ── Mini App Hero ─────────────────────────────────────────── */
.miniapp-hero {
  --miniapp-hero-accent: 129, 140, 248;
  position: relative;
  overflow: hidden;
  margin-bottom: 14px;
  padding: 18px;
  border-radius: 28px;
  border: 1px solid var(--miniapp-surface-border);
  background:
    radial-gradient(circle at top right, rgba(var(--miniapp-hero-accent), 0.18), transparent 34%),
    linear-gradient(180deg, rgba(var(--miniapp-hero-accent), 0.08), transparent 65%),
    var(--miniapp-surface-bg);
  box-shadow: var(--shadow-lg);
}
.miniapp-hero__glow {
  position: absolute;
  inset: auto -40px -60px auto;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: rgba(var(--miniapp-hero-accent), 0.18);
  filter: blur(28px);
  pointer-events: none;
}
.miniapp-hero__content { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 16px; }
.miniapp-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(var(--miniapp-hero-accent), 0.12);
  border: 1px solid rgba(var(--miniapp-hero-accent), 0.16);
  color: var(--text);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.miniapp-hero__title { margin: 10px 0 0; font-size: 1.38rem; line-height: 1.05; letter-spacing: -0.04em; }
.miniapp-hero__description { margin: 8px 0 0; max-width: 34rem; color: var(--text-secondary, var(--hint)); font-size: 0.9rem; line-height: 1.55; }
.miniapp-hero__metrics { display: grid; grid-template-columns: repeat(auto-fit,minmax(92px,1fr)); gap: 10px; }
.miniapp-hero__metric {
  padding: 12px 12px 10px;
  border-radius: 18px;
  background: linear-gradient(180deg, var(--miniapp-panel-bg), rgba(var(--miniapp-hero-accent), 0.04));
  border: 1px solid var(--miniapp-panel-border);
  backdrop-filter: blur(12px);
}
.miniapp-hero__metric-value { font-size: 1.05rem; font-weight: 800; letter-spacing: -0.03em; }
.miniapp-hero__metric-label { margin-top: 4px; color: var(--hint); font-size: 0.72rem; }
.miniapp-hero__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.miniapp-hero__action { min-width: 0; }
.miniapp-hero--social { --miniapp-hero-accent: 56, 189, 248; }
.miniapp-hero--people { --miniapp-hero-accent: 251, 146, 60; }
.miniapp-hero--calendar { --miniapp-hero-accent: 34, 197, 94; }
.miniapp-hero--vault { --miniapp-hero-accent: 14, 165, 233; }
.miniapp-hero--places { --miniapp-hero-accent: 16, 185, 129; }
.miniapp-hero--profile { --miniapp-hero-accent: 251, 191, 36; }
.miniapp-hero--settings { --miniapp-hero-accent: 96, 165, 250; }
.miniapp-hero--activity { --miniapp-hero-accent: 244, 114, 182; }
.miniapp-hero--family { --miniapp-hero-accent: 251, 146, 60; }
.miniapp-hero--business { --miniapp-hero-accent: 16, 185, 129; }
.miniapp-hero--discover { --miniapp-hero-accent: 168, 85, 247; }
.miniapp-hero--work { --miniapp-hero-accent: 99, 102, 241; }
.miniapp-panel-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap: 10px; margin-bottom: 14px; }
.miniapp-panel {
  padding: 14px;
  border-radius: 18px;
  background: linear-gradient(180deg, var(--miniapp-panel-bg), rgba(255,255,255,0.03));
  border: 1px solid var(--miniapp-panel-border);
}
.miniapp-panel__eyebrow { font-size: 0.68rem; color: var(--hint); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; }
.miniapp-panel__value { margin-top: 8px; font-size: 1.1rem; font-weight: 800; letter-spacing: -0.03em; color: var(--text); }
.miniapp-panel__text { margin-top: 6px; color: var(--miniapp-panel-text); font-size: 0.8rem; line-height: 1.45; }

.miniapp-surface {
  padding: 18px;
  border-radius: 20px;
  background: var(--miniapp-surface-bg);
  border: 1px solid var(--miniapp-surface-border);
}
.miniapp-surface__lead {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 14px;
}
.miniapp-surface__icon {
  font-size: 2rem;
  line-height: 1;
  flex-shrink: 0;
}
.miniapp-surface__title {
  font-weight: 800;
  font-size: 1.02rem;
  margin-bottom: 6px;
  color: var(--text);
}
.miniapp-surface__copy {
  color: var(--text-secondary, var(--hint));
  line-height: 1.6;
}
.miniapp-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
}
.miniapp-metric-board {
  display: flex;
  justify-content: space-around;
  gap: 14px;
  text-align: center;
}
.miniapp-metric-board > div {
  min-width: 0;
}

/* ── Business View ───────────────────────────────────────────*/
.biz-features { display: flex; flex-direction: column; gap: 10px; text-align: left; margin-top: 12px; }
.biz-feature { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--text-secondary, rgba(255,255,255,0.7)); }
.biz-feature .jb-icon { width: 16px; height: 16px; color: var(--accent-2, #8fac8f); flex-shrink: 0; }

/* ── Search Modal (Ctrl+K) ───────────────────────────────────*/
.search-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: flex-start; justify-content: center; padding-top: 15vh; }
.search-modal.hidden { display: none; }
.search-modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(4px); }
.search-modal__panel { position: relative; width: 90%; max-width: 480px; background: var(--bg); border: 1px solid var(--card-border); border-radius: var(--radius-md); box-shadow: 0 20px 60px rgba(0,0,0,0.5); overflow: hidden; }
.search-modal__header { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--card-border); }
.search-modal__header .jb-icon { width: 18px; height: 18px; color: var(--hint); flex-shrink: 0; }
.search-modal__input { flex: 1; background: transparent; border: none; outline: none; color: var(--text); font-size: 0.95rem; }
.search-modal__input::placeholder { color: var(--hint); }
.search-modal__kbd { font-size: 0.65rem; padding: 2px 6px; border-radius: 4px; border: 1px solid var(--card-border); color: var(--hint); font-family: monospace; }
.search-modal__results { max-height: 50vh; overflow-y: auto; padding: 8px; }
.search-hint { text-align: center; padding: 24px; color: var(--hint); font-size: 0.84rem; }
.search-result { padding: 10px 12px; border-radius: var(--radius-sm); cursor: pointer; transition: background 0.15s; }
.search-result:hover { background: rgba(255,255,255,0.05); }
.search-result__source { font-size: 0.65rem; color: var(--accent-3); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; }
.search-result__title { font-size: 0.84rem; font-weight: 600; margin-top: 2px; }
.search-result__snippet { font-size: 0.78rem; color: var(--hint); margin-top: 4px; line-height: 1.5; }
.search-result__snippet b { color: var(--accent-1); font-weight: 600; }
.discover-invite { margin-bottom: 28px; }
.discover-share-btn { width: 100%; text-align: center; }

/* ═══════════════════════════════════════════════════════════════════
   Settings
   ═══════════════════════════════════════════════════════════════════ */
.toggle { position: relative; width: 50px; height: 30px; flex-shrink: 0; }
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle-slider { position: absolute; inset: 0; border-radius: 15px; background: rgba(255,255,255,0.1); transition: background 0.3s; cursor: pointer; }
.toggle-slider::after { content: ''; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: transform 0.3s var(--ease-spring); box-shadow: 0 2px 6px rgba(0,0,0,0.2); }
.toggle input:checked + .toggle-slider { background: var(--gradient-primary); }
.toggle input:checked + .toggle-slider::after { transform: translateX(20px); }
.setting-select { background: rgba(255,255,255,0.06); color: var(--text); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius-sm); padding: 8px 12px; font-size: 0.88rem; font-family: inherit; appearance: none; -webkit-appearance: none; min-width: 100px; }
.push-status { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; color: var(--hint); }
.push-info { font-size: 0.8rem; color: var(--hint); margin-top: 5px; }
.connections-card .list-item { display: flex; align-items: center; justify-content: space-between; }

/* ═══════════════════════════════════════════════════════════════════
   Calendar
   ═══════════════════════════════════════════════════════════════════ */
.calendar-header { display: flex; align-items: center; justify-content: space-between; padding: 14px var(--pad); }
.cal-nav { background: none; border: none; color: var(--accent-3); font-size: 1.3rem; padding: 10px 14px; cursor: pointer; border-radius: var(--radius-xs); transition: background 0.15s; }
.cal-nav:active { background: rgba(255,255,255,0.06); }
.cal-title { font-size: 1.05rem; font-weight: 700; min-width: 140px; text-align: center; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; padding: 0 var(--pad); }
.cal-weekday { text-align: center; font-size: 0.7rem; font-weight: 700; color: var(--hint); padding: 8px 0; text-transform: uppercase; }
.cal-cell { aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: var(--radius-sm); cursor: pointer; transition: background 0.15s; position: relative; }
.cal-cell:active { background: rgba(255,255,255,0.06); }
.cal-empty { pointer-events: none; }
.cal-today { background: rgba(181,133,77,0.12); font-weight: 800; box-shadow: inset 0 0 0 2px rgba(181,133,77,0.2); }
.cal-has-events .cal-day-num { font-weight: 700; }
.cal-day-num { font-size: 0.88rem; line-height: 1; }
.cal-dots { display: flex; gap: 2px; margin-top: 4px; min-height: 6px; }
.cal-dot { width: 5px; height: 5px; border-radius: 50%; }
.cal-day-detail { padding: 14px var(--pad); }
.cal-day-title { font-weight: 700; margin-bottom: 10px; }
.cal-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; padding: 10px var(--pad) 18px; }
.cal-legend-item { display: flex; align-items: center; gap: 6px; font-size: 0.77rem; color: var(--hint); font-weight: 500; }
.cal-shell { display: flex; flex-direction: column; gap: 12px; }
.cal-stage { padding: 14px; border-radius: 24px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); }
.cal-day-detail-card { padding: 0; overflow: hidden; }
.cal-event-list { display: flex; flex-direction: column; }
.cal-event-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.cal-event-row + .cal-event-row { border-top: 1px solid var(--card-border); }
.cal-event-icon { width: 34px; height: 34px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.06); flex-shrink: 0; }
.cal-event-copy { flex: 1; min-width: 0; }
.cal-event-title { font-size: 0.86rem; font-weight: 700; }
.cal-event-meta { margin-top: 4px; color: var(--hint); font-size: 0.74rem; }
.cal-empty-detail { text-align: center; padding: 18px; color: var(--hint-color,#888); }

/* ═══════════════════════════════════════════════════════════════════
   Onboarding
   ═══════════════════════════════════════════════════════════════════ */
.onboarding-container { min-height: 80vh; display: flex; flex-direction: column; padding: var(--pad); }
.ob-progress { height: 4px; background: rgba(255,255,255,0.06); border-radius: 2px; margin-bottom: 36px; overflow: hidden; }
.ob-progress-bar { height: 100%; background: var(--gradient-primary); border-radius: 2px; transition: width 0.5s var(--ease-out); }
.ob-content { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.ob-step { width: 100%; max-width: 380px; }
.ob-emoji { width: 72px; height: 72px; border-radius: 22px; background: var(--gradient-primary); display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; box-shadow: 0 8px 32px rgba(181,133,77,0.2); }
.ob-emoji .jb-icon { width: 36px; height: 36px; color: #fff; }
.ob-title { font-size: 1.35rem; font-weight: 800; margin-bottom: 10px; }
.ob-desc { font-size: 0.92rem; color: var(--hint); margin-bottom: 28px; line-height: 1.55; font-weight: 500; }
.ob-input { width: 100%; padding: 16px 18px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius); color: var(--text); font-size: 1.05rem; text-align: center; outline: none; transition: border-color 0.25s, box-shadow 0.25s; font-family: inherit; }
.ob-input:focus { border-color: var(--accent-1); box-shadow: 0 0 0 4px rgba(181,133,77,0.1); }
.ob-btn { width: 100%; padding: 16px; border: none; border-radius: var(--radius); background: var(--gradient-primary); color: #fff; font-size: 1.02rem; font-weight: 700; cursor: pointer; margin-top: 18px; transition: opacity 0.15s, transform 0.15s; box-shadow: 0 4px 20px rgba(181,133,77,0.2); font-family: inherit; }
.ob-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.ob-btn:active:not(:disabled) { transform: scale(0.97); }
.ob-chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 24px; }
.ob-chip { padding: 10px 18px; border-radius: 24px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); color: var(--text); font-size: 0.88rem; cursor: pointer; transition: all 0.25s var(--ease-spring); font-weight: 600; display: flex; align-items: center; gap: 6px; font-family: inherit; }
.ob-chip .jb-icon { width: 16px; height: 16px; }
.ob-chip.selected { background: var(--gradient-primary); color: #fff; border-color: transparent; box-shadow: 0 4px 12px rgba(181,133,77,0.2); }

/* ═══════════════════════════════════════════════════════════════════
   Vault, Activity, Profile actions
   ═══════════════════════════════════════════════════════════════════ */
.vault-filters { display: flex; gap: 8px; overflow-x: auto; padding: 10px var(--pad); scrollbar-width: none; }
.vault-filters::-webkit-scrollbar { display: none; }
.filter-chip { padding: 8px 16px; border-radius: 20px; background: var(--miniapp-surface-bg); border: 1px solid var(--miniapp-surface-border); color: var(--miniapp-panel-text); font-size: 0.82rem; white-space: nowrap; cursor: pointer; transition: all 0.25s; font-weight: 600; display: flex; align-items: center; gap: 5px; box-shadow: 0 10px 22px rgba(15,23,42,0.12); }
.filter-chip .jb-icon { width: 14px; height: 14px; }
.filter-chip.active { background: linear-gradient(135deg, color-mix(in srgb, var(--accent-1) 88%, #ffffff 12%), color-mix(in srgb, var(--accent-2) 82%, #0f172a 18%)); color: #fff; border-color: transparent; box-shadow: 0 12px 24px rgba(181,133,77,0.18); }
.vault-list { padding: 0 var(--pad); }
.vault-file { display: flex; align-items: center; gap: 12px; }
.vault-actions { display: flex; gap: 6px; flex-shrink: 0; }
.vault-btn { background: var(--miniapp-surface-bg); border: 1px solid var(--miniapp-surface-border); padding: 8px; cursor: pointer; border-radius: var(--radius-xs); transition: background 0.15s, border-color 0.15s, transform 0.15s; color: var(--miniapp-panel-text); }
.vault-btn .jb-icon { width: 18px; height: 18px; }
.vault-btn:active { background: color-mix(in srgb, var(--miniapp-surface-bg) 82%, rgba(181,133,77,0.1)); transform: translateY(1px); }
.vault-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; }
.vault-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.8); backdrop-filter: blur(8px); }
.vault-modal-content { position: relative; z-index: 1; width: 92%; max-width: 500px; max-height: 90vh; overflow-y: auto; padding: var(--pad); background: var(--miniapp-panel-bg); border: 1px solid var(--miniapp-panel-border); border-radius: var(--radius); box-shadow: 0 28px 64px rgba(15,23,42,0.34); }
.vault-stats { font-size: 0.88rem; }

.approval-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius); padding: 16px; margin-bottom: 12px; backdrop-filter: blur(8px); }
.approval-btns { display: flex; gap: 10px; margin-top: 12px; }
.approval-btn { flex: 1; padding: 10px 14px; border: none; border-radius: var(--radius-sm); font-size: 0.88rem; font-weight: 700; cursor: pointer; transition: all 0.15s; font-family: inherit; }
.approval-btn:active { transform: scale(0.96); }
.approval-btn.approve { background: var(--gradient-green); color: #fff; }
.approval-btn.reject { background: rgba(255,255,255,0.06); color: var(--text); }

.profile-actions { display: flex; gap: 10px; padding: 0 var(--pad); margin-bottom: 18px; }
.profile-action-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 16px; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius); color: var(--text); font-size: 0.88rem; font-weight: 600; text-decoration: none; transition: all 0.15s; backdrop-filter: blur(8px); }
.profile-action-btn .jb-icon { width: 18px; height: 18px; }
.profile-action-btn:active { background: rgba(255,255,255,0.08); transform: scale(0.97); }

.vita-tools { display: flex; gap: 8px; padding: 4px var(--pad) 14px; }
.vita-tool-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 5px; padding: 10px 14px; background: var(--miniapp-surface-bg); border: 1px solid var(--miniapp-surface-border); border-radius: var(--radius-sm); color: var(--hint); font-size: 0.82rem; text-decoration: none; transition: all 0.15s; font-weight: 600; }
.vita-tool-btn .jb-icon { width: 14px; height: 14px; }
.vita-tool-btn:active { background: color-mix(in srgb, var(--miniapp-surface-bg) 76%, rgba(181,133,77,0.12)); color: var(--text); }
.habit-card { margin-bottom: 8px; }
.habit-heatmap { margin-top: 8px; overflow-x: auto; }
.goal-card-v2 { margin-bottom: 8px; }
.goal-card-v2 .goal-title { font-weight: 700; font-size: 0.92rem; }

.invite-btn.secondary { background: rgba(255,255,255,0.06); color: var(--text); }

/* ═══════════════════════════════════════════════════════════════════
   Home — Action-first daily launchpad
   ═══════════════════════════════════════════════════════════════════ */

/* ── Smart Hero ── */
.hm-smart-hero {
  position: relative; overflow: hidden;
  margin: -16px calc(-1 * var(--pad)) 12px;
  padding: 34px var(--pad) 22px;
  border-radius: 0 0 24px 24px;
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.24);
}
.hm-smart-hero-bg {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,0.24) 0, rgba(255,255,255,0) 26%),
    radial-gradient(circle at 88% 12%, rgba(56,189,248,0.18) 0, rgba(56,189,248,0) 24%),
    linear-gradient(155deg, rgba(15,23,42,0.18) 0%, rgba(181,133,77,0.28) 24%, rgba(244,114,182,0.18) 58%, rgba(6,182,212,0.18) 100%);
}
.hm-smart-hero::before,
.hm-smart-hero::after {
  content: '';
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
  filter: blur(2px);
}
.hm-smart-hero::before {
  width: 180px;
  height: 180px;
  right: -36px;
  bottom: -92px;
  background: radial-gradient(circle, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 68%);
  opacity: 0.72;
}
.hm-smart-hero::after {
  width: 120px;
  height: 120px;
  left: -30px;
  top: -48px;
  background: radial-gradient(circle, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0) 72%);
  opacity: 0.66;
}
.hm-smart-hero-content { position: relative; z-index: 1; }
.hm-smart-greeting {
  font-size: 1.68rem; font-weight: 900; color: var(--text);
  line-height: 1.08; margin-bottom: 6px; letter-spacing: -0.03em;
  max-width: 11ch;
}
.hm-smart-date {
  font-size: 0.84rem; color: rgba(255,255,255,0.78); margin-bottom: 12px;
}
.hm-smart-kpis {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.hm-mission-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}
.hm-mission-card {
  position: relative;
  overflow: hidden;
  padding: 16px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(155deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.14);
}
.hm-mission-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(145deg, rgba(255,255,255,0.08), rgba(255,255,255,0));
  pointer-events: none;
}
.hm-mission-card--primary {
  background: linear-gradient(145deg, rgba(181,133,77,0.14), rgba(15,23,42,0.08) 56%, rgba(255,255,255,0.03));
}
.hm-mission-card > * { position: relative; z-index: 1; }
.hm-mission-card__eyebrow {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hint);
}
.hm-mission-card__title {
  margin-top: 10px;
  font-size: 1.04rem;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.02em;
}
.hm-mission-card__copy {
  margin-top: 8px;
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--hint);
}
.hm-mission-card__stat {
  margin-top: 12px;
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: -0.04em;
}
.hm-mission-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.hm-kpi {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: 20px;
  background: rgba(255,255,255,0.08);
  border: 1px solid var(--kpi-color, rgba(255,255,255,0.12));
  font-size: 0.76rem; font-weight: 700; color: var(--kpi-color, var(--text));
  backdrop-filter: blur(14px);
}
.hm-kpi svg { width: 12px; height: 12px; }

/* ── Home premium sections ── */
.hm-focus-grid,
.hm-collab-grid,
.hm-plan-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.hm-focus-card,
.hm-collab-card,
.hm-plan-card,
.hm-tier-ladder {
  position: relative;
  overflow: hidden;
  padding: 16px;
  border-radius: 22px;
  backdrop-filter: blur(18px);
  box-shadow: 0 18px 46px rgba(2, 6, 23, 0.18);
}

.hm-focus-card::before,
.hm-collab-card::before,
.hm-plan-card::before,
.hm-tier-ladder::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(145deg, rgba(255,255,255,0.08), rgba(255,255,255,0));
  opacity: 0.9;
  pointer-events: none;
}

.hm-focus-card {
  cursor: pointer;
  min-height: 156px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--hm-focus-bg, var(--card-bg));
  border: 1px solid var(--hm-focus-border, var(--card-border));
  transition: transform 0.18s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.hm-focus-card:active {
  transform: translateY(1px) scale(0.985);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.18);
}
.hm-focus-card__body,
.hm-collab-card > *,
.hm-plan-card > *,
.hm-tier-ladder > * {
  position: relative;
  z-index: 1;
}
.hm-focus-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.hm-focus-card__badge,
.hm-collab-card__badge {
  width: 42px;
  height: 42px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  background: var(--hm-focus-badge, rgba(255,255,255,0.08));
  color: var(--hm-focus-accent, var(--text));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}
.hm-focus-card__badge .jb-icon,
.hm-collab-card__badge .jb-icon {
  width: 18px;
  height: 18px;
}
.hm-focus-card__eyebrow {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--text-secondary, var(--hint));
}
.hm-focus-card__title {
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.28;
  margin-bottom: 8px;
  letter-spacing: -0.02em;
}
.hm-focus-card__hint {
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--text-secondary, var(--hint));
  max-width: 28ch;
}
.hm-focus-card__cta {
  margin-top: 14px;
  font-size: 0.83rem;
  font-weight: 800;
  color: var(--hm-focus-accent, var(--accent-1));
  letter-spacing: 0.01em;
}

.hm-collab-card {
  padding: 18px;
  border: 1px solid var(--card-border);
}
.hm-collab-card--message {
  background: linear-gradient(160deg, rgba(59,130,246,0.14), rgba(15,23,42,0.06) 55%, rgba(255,255,255,0.02));
}
.hm-collab-card--share {
  background: linear-gradient(160deg, rgba(16,185,129,0.14), rgba(15,23,42,0.06) 55%, rgba(255,255,255,0.02));
}
.hm-collab-card__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.hm-collab-card__title {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.hm-collab-card__sub {
  font-size: 0.76rem;
  color: var(--text-secondary, var(--hint));
  margin-top: 2px;
}
.hm-collab-card__copy {
  font-size: 0.84rem;
  line-height: 1.6;
  color: var(--text-secondary, var(--hint));
  margin-bottom: 14px;
}
.hm-collab-card__btn {
  width: 100%;
  justify-content: center;
}

.hm-share-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 12px;
}
.hm-share-tag {
  display: inline-flex;
  align-items: center;
  padding: 7px 11px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--text);
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
.disc-route-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.disc-route-card {
  --disc-route-accent: 99, 102, 241;
  position: relative;
  overflow: hidden;
  padding: 16px;
  border-radius: 22px;
  border: 1px solid var(--miniapp-surface-border);
  background:
    radial-gradient(circle at top right, rgba(var(--disc-route-accent), 0.14), transparent 42%),
    linear-gradient(180deg, rgba(var(--disc-route-accent), 0.06), transparent 62%),
    var(--miniapp-surface-bg);
  box-shadow: var(--shadow-md);
}
.disc-route-card--now { --disc-route-accent: 59, 130, 246; }
.disc-route-card--system { --disc-route-accent: 16, 185, 129; }
.disc-route-card--intel { --disc-route-accent: 168, 85, 247; }
.disc-route-card__eyebrow {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hint);
}
.disc-route-card__title {
  margin-top: 10px;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.02em;
}
.disc-route-card__copy {
  margin-top: 8px;
  margin-bottom: 14px;
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--hint);
}

.hm-plan-card {
  padding: 18px;
  border: 1px solid var(--card-border);
}
.hm-plan-card--current {
  background: linear-gradient(150deg, rgba(181,133,77,0.15), rgba(59,130,246,0.08) 55%, rgba(255,255,255,0.03));
}
.hm-plan-card--free {
  background: linear-gradient(150deg, rgba(251,191,36,0.12), rgba(16,185,129,0.08) 58%, rgba(255,255,255,0.03));
}
.hm-plan-card__top,
.hm-tier-ladder__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.hm-plan-card__kicker,
.hm-tier-ladder__title {
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.hm-plan-card__mode {
  font-size: 0.74rem;
  color: var(--text-secondary, var(--hint));
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: 2px;
}
.hm-plan-card__pill,
.hm-tier-row__pill {
  flex-shrink: 0;
}
.hm-plan-card__headline {
  font-size: 1.02rem;
  font-weight: 850;
  line-height: 1.3;
  margin-bottom: 8px;
  letter-spacing: -0.02em;
}
.hm-plan-card__copy,
.hm-plan-card__meta,
.hm-tier-row__copy {
  font-size: 0.83rem;
  line-height: 1.58;
  color: var(--text-secondary, var(--hint));
}
.hm-plan-card__meta {
  margin-top: 12px;
  font-weight: 600;
}

.hm-tier-ladder {
  padding: 18px;
  margin-bottom: 16px;
  border: 1px solid var(--miniapp-panel-border);
  background: linear-gradient(180deg, var(--miniapp-panel-bg), color-mix(in srgb, var(--miniapp-panel-bg) 82%, rgba(255,255,255,0.02)));
}
.hm-tier-ladder__rows {
  display: grid;
  gap: 9px;
}
.hm-tier-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 13px;
  border-radius: 16px;
  background: var(--miniapp-surface-bg);
  border: 1px solid var(--miniapp-surface-border);
}
.hm-tier-row__name {
  font-size: 0.87rem;
  font-weight: 800;
  margin-bottom: 3px;
}

.hm-focus-grid + .hm-collab-grid {
  margin-top: 2px;
}

/* ── Native emoji (replaces SVG mood faces) ── */
.mood-emoji-native { font-size: 1.3em; line-height: 1; }

/* ── Mood check-in card ── */
.hm-mood-card {
  margin: 0 0 14px;
  padding: 16px 18px;
  border-radius: var(--radius-sm);
  background: var(--miniapp-surface-bg);
  border: 1px solid var(--miniapp-surface-border);
  box-shadow: var(--shadow-md);
}
.hm-mood-picker .hm-mood-prompt {
  font-size: 1rem; font-weight: 700; color: var(--text);
  margin-bottom: 12px; text-align: center;
}
.hm-mood-options {
  display: flex; justify-content: space-around; gap: 6px;
}
.hm-mood-btn {
  background: var(--miniapp-panel-bg); border: 2px solid transparent;
  border-radius: 50%; width: 50px; height: 50px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: transform 0.15s, border-color 0.2s, background 0.2s;
}
.hm-mood-btn:hover { border-color: var(--accent-1); background: color-mix(in srgb, var(--miniapp-panel-bg) 78%, rgba(181,133,77,0.14)); }
.hm-mood-btn:active { transform: scale(0.88); }
.hm-mood-emoji { font-size: 1.5rem; line-height: 1; }

.hm-mood-logged {
  display: flex; align-items: center; gap: 10px;
}
.hm-mood-current { font-size: 1.8rem; line-height: 1; }
.hm-mood-label { flex: 1; font-size: 0.88rem; color: var(--hint); }
.hm-mood-label strong { color: var(--text); }
.hm-mood-change {
  background: none; border: none; color: var(--link);
  font-size: 0.78rem; font-weight: 600; cursor: pointer;
  padding: 4px 8px; border-radius: var(--radius-xs);
}
.hm-mood-change:hover { background: rgba(181,133,77,0.1); }

/* ── Dashboard Grid — 2x2 metric cards ── */
.hm-dashboard {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 10px; margin-bottom: 14px;
}
.hm-dash-card {
  background: var(--miniapp-surface-bg); border: 1px solid var(--miniapp-surface-border);
  border-radius: var(--radius-sm); padding: 16px 14px;
  display: flex; flex-direction: column; gap: 6px;
  cursor: pointer; transition: border-color 0.2s, transform 0.15s;
  position: relative; overflow: hidden; box-shadow: var(--shadow-md);
}
.hm-dash-card:hover { border-color: var(--accent-1); }
.hm-dash-card:active { transform: scale(0.97); }
.hm-dash-icon { opacity: 0.5; }
.hm-dash-icon svg { width: 18px; height: 18px; }
.hm-dash-label {
  font-size: 0.72rem; font-weight: 600; color: var(--hint);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.hm-dash-value {
  font-family: var(--jb-font-display); font-size: 1.3rem; font-weight: 800; color: var(--text); line-height: 1; font-variant-numeric: tabular-nums;
}
.hm-dash-unit { font-size: 0.68rem; font-weight: 500; color: var(--hint); margin-left: 1px; }
.hm-dash-hint { font-size: 0.72rem; color: var(--hint); }
.hm-dash-spark { margin-top: 2px; }
.hm-dash-spark svg { display: block; width: 100%; }
.hm-dash-bar {
  width: 100%; height: 5px; border-radius: 3px;
  background: color-mix(in srgb, var(--miniapp-surface-border) 82%, transparent); overflow: hidden;
}
.hm-dash-bar-fill {
  height: 100%; border-radius: 3px;
  background: var(--accent-1); transition: width 0.8s ease;
}
.hm-dash-ring { display: flex; align-items: center; gap: 8px; }
.hm-dash-ring-text {
  font-size: 1.1rem; font-weight: 800; color: var(--text); line-height: 1;
}

/* ── Dash card accent borders ── */
.hm-dash-finance { border-top: 2px solid #60a5fa; }
.hm-dash-mood    { border-top: 2px solid #8fac8f; }
.hm-dash-habits  { border-top: 2px solid #34d399; }
.hm-dash-social  { border-top: 2px solid #f59e0b; }

/* ── Quick Actions strip ── */
.hm-qa-strip {
  display: flex; gap: 8px; padding: 0 0 16px;
  overflow-x: auto; scrollbar-width: none;
}
.hm-qa-strip::-webkit-scrollbar { display: none; }
.hm-qa {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  min-width: 62px; padding: 10px 6px 8px;
  border-radius: var(--radius-sm);
  background: var(--miniapp-surface-bg); border: 1px solid var(--miniapp-surface-border);
  font-size: 0.7rem; font-weight: 600; color: var(--hint);
  cursor: pointer; flex-shrink: 0; white-space: nowrap;
  transition: transform 0.12s, border-color 0.2s; box-shadow: var(--shadow-sm);
}
.hm-qa:active { transform: scale(0.93); }
.hm-qa:hover { border-color: var(--accent-1); color: var(--text); }
.hm-qa svg { width: 20px; height: 20px; opacity: 0.7; }
.hm-qa-primary {
  background: var(--gradient-primary); border-color: transparent; color: #fff;
}
.hm-qa-primary svg { opacity: 1; }
.hm-qa-primary:hover { opacity: 0.92; border-color: transparent; color: #fff; }

/* ── Activity feed ── */
.hm-feed { margin-bottom: var(--gap); }
.hm-feed-date {
  font-size: 0.72rem; font-weight: 700; color: var(--hint); text-transform: uppercase;
  letter-spacing: 0.06em; padding: 12px 0 6px;
}
.hm-feed-date:first-child { padding-top: 4px; }
.hm-feed-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: var(--radius-xs);
  background: var(--miniapp-surface-bg); border: 1px solid var(--miniapp-surface-border);
  margin-bottom: 6px; transition: border-color 0.15s;
}
.hm-feed-item:hover { border-color: rgba(255,255,255,0.12); }
.hm-feed-icon { flex-shrink: 0; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; }
.hm-feed-icon svg { width: 20px; height: 20px; }
.hm-feed-text { flex: 1; font-size: 0.84rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-feed-right { flex-shrink: 0; font-size: 0.78rem; font-weight: 600; }
.hm-feed-amount { color: var(--warning); }
.hm-feed-streak { color: var(--mood-great); display: flex; align-items: center; gap: 2px; }
.hm-feed-mood-great { border-left: 3px solid var(--mood-great); }
.hm-feed-mood-mid   { border-left: 3px solid var(--mood-mid); }
.hm-feed-mood-low   { border-left: 3px solid var(--danger); }

/* ── People spotlight ── */
.hm-people-scroll {
  display: flex; gap: 14px; overflow-x: auto; padding: 4px 0 12px;
  scrollbar-width: none; -ms-overflow-style: none;
}
.hm-people-scroll::-webkit-scrollbar { display: none; }
.hm-person { display: flex; flex-direction: column; align-items: center; gap: 4px; flex-shrink: 0; cursor: pointer; min-width: 56px; }
.hm-person-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; font-weight: 700; color: #fff;
  transition: transform 0.15s;
}
.hm-person:active .hm-person-avatar { transform: scale(0.9); }
.hm-person-name { font-size: 0.72rem; font-weight: 600; color: var(--text); text-align: center; max-width: 56px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-person-sub { font-size: 0.64rem; color: var(--hint); }

/* ── Bottom spacer ── */
.hm-people-scroll { margin-bottom: calc(var(--tabbar-h) + 16px); }

@media (max-width: 680px) {
  .hm-focus-grid,
  .hm-collab-grid,
  .hm-plan-grid,
  .hm-dashboard {
    grid-template-columns: 1fr;
  }

  .hm-smart-hero {
    padding: 30px var(--pad) 20px;
  }

  .hm-smart-greeting {
    max-width: none;
    font-size: 1.48rem;
  }

  .hm-focus-card,
  .hm-collab-card,
  .hm-plan-card,
  .hm-tier-ladder {
    border-radius: 20px;
    padding: 15px;
  }

  .hm-tier-row,
  .hm-tier-ladder__head,
  .hm-plan-card__top {
    flex-direction: column;
    align-items: flex-start;
  }

  .hm-tier-row__pill,
  .hm-plan-card__pill {
    align-self: flex-start;
  }
}

@media (max-width: 420px) {
  .hm-focus-card {
    min-height: 144px;
  }

  .hm-collab-card__title,
  .hm-plan-card__headline,
  .hm-focus-card__title {
    font-size: 0.95rem;
  }

  .hm-share-tags {
    gap: 6px;
  }

  .hm-share-tag {
    font-size: 0.7rem;
    padding: 6px 10px;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   Light Theme
   ═══════════════════════════════════════════════════════════════════ */
@media (prefers-color-scheme: light) {
  :root:not([data-tg-theme]) {
    --bg: #faf8f6; --text: #1c1917; --hint: #78716c; --link: #b5854d; --btn-bg: #b5854d; --btn-text: #ffffff;
    --secondary-bg: #ffffff; --section-bg: #ffffff; --separator: rgba(28,25,23,0.06);
    --card-bg: rgba(28,25,23,0.025); --card-border: rgba(28,25,23,0.08); --glass: rgba(250,248,246,0.88);
    --glass-border: rgba(28,25,23,0.07);
    --text-secondary: rgba(28,25,23,0.65);
    --badge-bg: rgba(28,25,23,0.04); --badge-color: rgba(28,25,23,0.55);
    --miniapp-panel-bg: rgba(255,255,255,0.85);
    --miniapp-panel-border: rgba(28,25,23,0.06);
    --miniapp-panel-text: rgba(28,25,23,0.62);
    --miniapp-surface-bg: rgba(255,255,255,0.78);
    --miniapp-surface-border: rgba(28,25,23,0.07);
    --shadow-sm: 0 2px 8px rgba(28,25,23,0.05);
    --shadow-md: 0 4px 16px rgba(28,25,23,0.07);
    --shadow-lg: 0 8px 32px rgba(28,25,23,0.09);
  }
  :root:not([data-tg-theme]) body { background-image: radial-gradient(at 20% 80%, rgba(181,133,77,0.06) 0%, transparent 50%), radial-gradient(at 80% 20%, rgba(106,128,148,0.04) 0%, transparent 50%); }

  /* ── Text & content ── */
  :root:not([data-tg-theme]) .diary-text { color: rgba(28,25,23,0.65); }
  :root:not([data-tg-theme]) .discover-tip { color: rgba(28,25,23,0.65); }

  /* ── Inputs & forms ── */
  :root:not([data-tg-theme]) .jb-input { background: rgba(28,25,23,0.025); }
  :root:not([data-tg-theme]) .form-input { background: rgba(28,25,23,0.025); border-color: rgba(0,0,0,0.1); }
  :root:not([data-tg-theme]) .ob-input { background: rgba(28,25,23,0.025); border-color: rgba(0,0,0,0.1); }
  :root:not([data-tg-theme]) .setting-select { background: rgba(28,25,23,0.025); border-color: rgba(0,0,0,0.1); }

  /* ── Buttons (secondary/ghost) ── */
  :root:not([data-tg-theme]) .btn-secondary { background: rgba(28,25,23,0.035); }
  :root:not([data-tg-theme]) .btn-action.btn-secondary { background: rgba(28,25,23,0.035); }
  :root:not([data-tg-theme]) .approval-btn.reject { background: rgba(28,25,23,0.035); }
  :root:not([data-tg-theme]) .invite-btn.secondary { background: rgba(28,25,23,0.035); }

  /* ── Cards & decorations ── */
  :root:not([data-tg-theme]) .card::before { background: linear-gradient(90deg, transparent, rgba(0,0,0,0.05), transparent); }
  :root:not([data-tg-theme]) .diary-card.mood-none::before { background: rgba(0,0,0,0.1); }

  /* ── Loading & progress ── */
  :root:not([data-tg-theme]) .loading-spinner { border-color: rgba(0,0,0,0.08); }
  :root:not([data-tg-theme]) .progress { background: rgba(0,0,0,0.06); }
  :root:not([data-tg-theme]) .progress-bar::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent); }

  /* ── Badges ── */
  :root:not([data-tg-theme]) .badge { background: rgba(28,25,23,0.035); color: rgba(0,0,0,0.55); }

  /* ── Tabbar ── */
  :root:not([data-tg-theme]) #tabbar { border-top-color: rgba(0,0,0,0.06); }

  /* ── Habits & checkboxes ── */
  :root:not([data-tg-theme]) .habit-check { border-color: rgba(0,0,0,0.15); }
  :root:not([data-tg-theme]) .habit-mini-check { border-color: rgba(0,0,0,0.15); }

  /* ── Toggle switch ── */
  :root:not([data-tg-theme]) .toggle-slider { background: rgba(0,0,0,0.12); }
  :root:not([data-tg-theme]) .toggle-slider::after { background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,0.15); }

  /* ── Mood picker ── */
  :root:not([data-tg-theme]) .mood-btn { background: rgba(28,25,23,0.025); }
  :root:not([data-tg-theme]) .hm-mood-btn { background: var(--miniapp-panel-bg); }
  :root:not([data-tg-theme]) .hm-mood-btn:hover { border-color: var(--accent-1); background: color-mix(in srgb, var(--miniapp-panel-bg) 88%, rgba(181,133,77,0.08)); }
  :root:not([data-tg-theme]) .hm-share-tag { background: var(--miniapp-surface-bg); border-color: var(--miniapp-surface-border); }
  :root:not([data-tg-theme]) .hm-tier-row { background: var(--miniapp-surface-bg); border-color: var(--miniapp-surface-border); }
  :root:not([data-tg-theme]) .hm-collab-card,
  :root:not([data-tg-theme]) .hm-plan-card,
  :root:not([data-tg-theme]) .hm-tier-ladder,
  :root:not([data-tg-theme]) .hm-focus-card {
    box-shadow: 0 18px 36px rgba(148, 163, 184, 0.16);
  }
  :root:not([data-tg-theme]) .miniapp-panel {
    background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.74));
    box-shadow: 0 10px 24px rgba(148, 163, 184, 0.12);
  }
  :root:not([data-tg-theme]) .miniapp-surface,
  :root:not([data-tg-theme]) .card {
    box-shadow: 0 12px 28px rgba(148, 163, 184, 0.12);
  }
  :root:not([data-tg-theme]) .biz-feature {
    color: rgba(28,25,23,0.65);
  }
  :root:not([data-tg-theme]) .biz-feature .jb-icon {
    color: color-mix(in srgb, var(--accent-1) 78%, #0f172a 22%);
  }
  :root:not([data-tg-theme]) .filter-chip {
    background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.78));
    box-shadow: 0 12px 24px rgba(148, 163, 184, 0.16);
  }

  /* ── Onboarding & chips ── */
  :root:not([data-tg-theme]) .ob-chip { background: rgba(28,25,23,0.025); border-color: rgba(0,0,0,0.1); }
  :root:not([data-tg-theme]) .ob-progress { background: rgba(0,0,0,0.06); }
  :root:not([data-tg-theme]) .filter-chip { background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.78)); border-color: rgba(0,0,0,0.08); }

  /* ── Vita tools ── */
  :root:not([data-tg-theme]) .vita-tool-btn:active { background: color-mix(in srgb, var(--miniapp-surface-bg) 84%, rgba(181,133,77,0.08)); }

  /* ── Discover view chips ── */
  :root:not([data-tg-theme]) .disc-view-chip:active { background: color-mix(in srgb, var(--miniapp-surface-bg) 84%, rgba(181,133,77,0.08)); }

  /* ── Home pulse/feed/checklist ── */
  :root:not([data-tg-theme]) .hm-pulse-bar { background: rgba(0,0,0,0.06); }
  :root:not([data-tg-theme]) .hm-check-box { border-color: rgba(0,0,0,0.2); }
  :root:not([data-tg-theme]) .hm-check-item:hover { border-color: rgba(0,0,0,0.12); }
  :root:not([data-tg-theme]) .hm-check-go { color: rgba(0,0,0,0.4); }
  :root:not([data-tg-theme]) .hm-feed-item:hover { border-color: rgba(0,0,0,0.12); }

  /* ── Hero avatar ── */
  :root:not([data-tg-theme]) .hero-avatar { border-color: rgba(0,0,0,0.08); }

  /* ── People ── */
  :root:not([data-tg-theme]) .people-card:active { background: rgba(28,25,23,0.035); }
  :root:not([data-tg-theme]) .profile-action-btn:active { background: rgba(28,25,23,0.035); }

  /* ── Calendar ── */
  :root:not([data-tg-theme]) .cal-nav:active { background: rgba(28,25,23,0.035); }
  :root:not([data-tg-theme]) .cal-cell:active { background: rgba(28,25,23,0.035); }

  /* ── Search ── */
  :root:not([data-tg-theme]) .search-result:active,
  :root:not([data-tg-theme]) .search-result:hover { background: rgba(28,25,23,0.035); }

  /* ── Vault ── */
  :root:not([data-tg-theme]) .vault-btn:active { background: color-mix(in srgb, var(--miniapp-surface-bg) 84%, rgba(181,133,77,0.1)); }
}

:root[data-theme-mode="light"]:not([data-tg-theme]) {
  --bg: #faf8f6;
  --text: #1c1917;
  --hint: #78716c;
  --link: #b5854d;
  --btn-bg: #b5854d;
  --btn-text: #ffffff;
  --secondary-bg: #ffffff;
  --section-bg: #ffffff;
  --separator: rgba(28,25,23,0.06);
  --card-bg: rgba(28,25,23,0.025);
  --card-border: rgba(28,25,23,0.08);
  --glass: rgba(250,248,246,0.88);
  --glass-border: rgba(28,25,23,0.07);
  --text-secondary: rgba(28,25,23,0.65);
  --badge-bg: rgba(28,25,23,0.04);
  --badge-color: rgba(28,25,23,0.55);
  --miniapp-panel-bg: rgba(255,255,255,0.85);
  --miniapp-panel-border: rgba(28,25,23,0.06);
  --miniapp-panel-text: rgba(28,25,23,0.62);
  --miniapp-surface-bg: rgba(255,255,255,0.78);
  --miniapp-surface-border: rgba(28,25,23,0.07);
  --shadow-sm: 0 2px 8px rgba(28,25,23,0.05);
  --shadow-md: 0 4px 16px rgba(28,25,23,0.07);
  --shadow-lg: 0 8px 32px rgba(28,25,23,0.09);
}

:root[data-theme-mode="light"]:not([data-tg-theme]) body { background-image: radial-gradient(at 20% 80%, rgba(181,133,77,0.06) 0%, transparent 50%), radial-gradient(at 80% 20%, rgba(106,128,148,0.04) 0%, transparent 50%); }
:root[data-theme-mode="light"]:not([data-tg-theme]) .jb-input { background: rgba(28,25,23,0.025); }
:root[data-theme-mode="light"]:not([data-tg-theme]) .btn-secondary { background: rgba(28,25,23,0.035); }
:root[data-theme-mode="light"]:not([data-tg-theme]) .setting-select { background: rgba(28,25,23,0.025); border-color: rgba(0,0,0,0.1); }
:root[data-theme-mode="light"]:not([data-tg-theme]) .miniapp-panel {
  background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.74));
  box-shadow: 0 10px 24px rgba(148, 163, 184, 0.12);
}
:root[data-theme-mode="light"]:not([data-tg-theme]) .miniapp-surface,
:root[data-theme-mode="light"]:not([data-tg-theme]) .card,
:root[data-theme-mode="light"]:not([data-tg-theme]) .disc-route-card,
:root[data-theme-mode="light"]:not([data-tg-theme]) .miniapp-hero {
  box-shadow: 0 12px 28px rgba(148, 163, 184, 0.12);
}
:root[data-theme-mode="light"]:not([data-tg-theme]) .disc-tip { color: rgba(28,25,23,0.65); }

:root[data-theme-preference="dark"]:not([data-tg-theme]) {
  --bg: #1c1917;
  --text: #f5f5f4;
  --hint: #78716c;
  --link: #c2956a;
  --btn-bg: #b5854d;
  --btn-text: #ffffff;
  --secondary-bg: #292524;
  --section-bg: #292524;
  --separator: rgba(255,255,255,0.06);
  --card-bg: rgba(255,255,255,0.035);
  --card-border: rgba(255,255,255,0.065);
  --glass: rgba(28,25,23,0.82);
  --glass-border: rgba(255,255,255,0.07);
  --text-secondary: rgba(255,255,255,0.72);
  --badge-bg: rgba(255,255,255,0.08);
  --badge-color: rgba(255,255,255,0.65);
  --miniapp-panel-bg: rgba(255,255,255,0.05);
  --miniapp-panel-border: rgba(255,255,255,0.06);
  --miniapp-panel-text: rgba(255,255,255,0.75);
  --miniapp-surface-bg: rgba(255,255,255,0.035);
  --miniapp-surface-border: rgba(255,255,255,0.07);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.25);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.3);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.4);
}

:root[data-theme-preference="dark"]:not([data-tg-theme]) body {
  background-image: var(--gradient-mesh);
}

/* ═══════════════════════════════════════════════════════════════════
   Utility animations
   ═══════════════════════════════════════════════════════════════════ */
@keyframes pulse-ring { 0% { box-shadow: 0 0 0 0 rgba(181,133,77,0.2); } 100% { box-shadow: 0 0 0 12px rgba(181,133,77,0); } }
.pulse { animation: pulse-ring 2s ease-out infinite; }
.glow-text { text-shadow: 0 0 20px rgba(181,133,77,0.2); }
.gradient-text { background: var(--gradient-primary); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
@keyframes count-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.count-animate { animation: count-up 0.6s var(--ease-out) forwards; }

/* ── Motion Families ─────────────────────────────────────────────── */

/* 1. Dissolve + Slide — view enter/exit */
@keyframes jb-dissolve-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes jb-dissolve-down {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(8px); }
}
.jb-motion-enter { animation: jb-dissolve-up 0.25s var(--ease-out) both; }
.jb-motion-exit  { animation: jb-dissolve-down 0.15s ease-in both; }

/* 2. Stack Reveal — staggered list items */
@keyframes jb-stack-reveal {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.jb-stagger > * {
  opacity: 0;
  animation: jb-stack-reveal 0.3s var(--ease-out) both;
}
.jb-stagger > *:nth-child(1)  { animation-delay: 0ms; }
.jb-stagger > *:nth-child(2)  { animation-delay: 50ms; }
.jb-stagger > *:nth-child(3)  { animation-delay: 100ms; }
.jb-stagger > *:nth-child(4)  { animation-delay: 150ms; }
.jb-stagger > *:nth-child(5)  { animation-delay: 200ms; }
.jb-stagger > *:nth-child(6)  { animation-delay: 250ms; }
.jb-stagger > *:nth-child(7)  { animation-delay: 300ms; }
.jb-stagger > *:nth-child(8)  { animation-delay: 350ms; }
.jb-stagger > *:nth-child(n+9) { animation-delay: 400ms; }

/* 3. Sheet Rise — bottom sheet open */
@keyframes jb-sheet-rise {
  from { opacity: 0; transform: translateY(100%); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes jb-sheet-drop {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(100%); }
}
.jb-sheet-enter { animation: jb-sheet-rise 0.3s var(--ease-spring) both; }
.jb-sheet-exit  { animation: jb-sheet-drop 0.2s ease-in both; }

/* 4. Pulse Trace — notification, status dot */
@keyframes jb-pulse-trace {
  0%, 100% { box-shadow: 0 0 0 0 rgba(181,133,77,0.25); }
  50%      { box-shadow: 0 0 0 8px rgba(181,133,77,0); }
}
.jb-pulse { animation: jb-pulse-trace 1.5s ease-out infinite; }

/* 5. Morph Transition — tab/segment switch */
@keyframes jb-morph-in {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}
.jb-morph { animation: jb-morph-in 0.2s var(--ease-out) both; }

/* 6. Collapse/Expand — accordion toggle */
.jb-collapse {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.2s ease-out;
  overflow: hidden;
}
.jb-collapse.open { grid-template-rows: 1fr; }
.jb-collapse > * { overflow: hidden; min-height: 0; }

/* Skeleton shimmer for loading states */
@keyframes jb-shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}
.jb-skeleton {
  background: linear-gradient(90deg, var(--card-bg) 25%, rgba(255,255,255,0.06) 50%, var(--card-bg) 75%);
  background-size: 200% 100%;
  animation: jb-shimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-sm);
}

/* ═════════════════════════════════════════════════════════════════
   Responsive Breakpoints
   ═════════════════════════════════════════════════════════════════ */

/* Small phones (iPhone SE, Galaxy S8) */
@media (max-width: 374px) {
  :root { --pad: 12px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .hero-greeting { font-size: 1.1rem; }
  .hero-chip { font-size: 0.7rem; padding: 5px 8px; }
  .stat-value { font-size: 1.1rem; }
  .stat-label { font-size: 0.58rem; }
  .section-title { font-size: 0.78rem; }
  .profile-actions { flex-direction: column; }
  .interest-chips { gap: 6px; }
}

/* Standard phones (375–427px) — default layout, tweak edges */
@media (min-width: 375px) and (max-width: 427px) {
  .stats-grid { gap: 8px; }
}

/* Large phones / small tablets (428px+) */
@media (min-width: 428px) {
  :root { --pad: 20px; }
  .stats-grid { gap: 12px; }
  .card { padding: 18px; }
  .hero-content { gap: 16px; }
}

/* Tablets / desktop (768px+) */
@media (min-width: 768px) {
  :root { --pad: 24px; }
  .stats-grid { grid-template-columns: repeat(4, 1fr); gap: 14px; }
  .main-content { max-width: 600px; margin: 0 auto; }
  #tabbar { max-width: 600px; margin: 0 auto; border-radius: 16px 16px 0 0; }
  .hero-stats { justify-content: flex-start; }
  .card { padding: 20px; }
  .chart-container { height: 260px; }
}

/* ═══════════════════════════════════════════════════════════════════
   Places — delete button, add card
   ═══════════════════════════════════════════════════════════════════ */
.pl-delete-btn { background: none; border: none; color: var(--hint); font-size: 1rem; cursor: pointer; padding: 4px 8px; border-radius: 6px; opacity: 0.5; transition: all 0.2s; flex-shrink: 0; }
.pl-delete-btn:hover { opacity: 1; color: var(--error, #f87171); }
.pl-add-card { border: 1px dashed var(--card-border); }

/* ═══════════════════════════════════════════════════════════════════
   People — header row, interaction profile
   ═══════════════════════════════════════════════════════════════════ */
.ppl-header-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px; background: var(--miniapp-panel-bg); border: 1px solid var(--miniapp-panel-border); border-radius: var(--radius-sm); box-shadow: 0 12px 28px rgba(15,23,42,0.14); }
.ppl-interactions { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.ppl-ix-item { display: flex; gap: 10px; padding: 8px 10px; border-radius: 8px; background: var(--miniapp-surface-bg); border: 1px solid var(--miniapp-surface-border); }
.ppl-ix-icon { font-size: 1.1rem; flex-shrink: 0; padding-top: 2px; }
.ppl-ix-content { flex: 1; min-width: 0; }
.ppl-ix-text { font-size: 0.82rem; line-height: 1.5; color: var(--text-secondary, rgba(255,255,255,0.75)); }
.ppl-ix-meta { font-size: 0.72rem; color: var(--hint); margin-top: 4px; }

/* ═══════════════════════════════════════════════════════════════════
   Person Detail — full page profile
   ═══════════════════════════════════════════════════════════════════ */
.pd-view { padding: 0 4px; }
.pd-back { background: none; border: none; color: var(--accent-1); font-size: 0.85rem; font-weight: 600; cursor: pointer; padding: 8px 0; display: flex; align-items: center; gap: 6px; }
.pd-hero { display: flex; align-items: center; gap: 16px; padding: 16px; background: var(--miniapp-panel-bg); border: 1px solid var(--miniapp-panel-border); border-radius: var(--radius-sm); box-shadow: 0 14px 30px rgba(15,23,42,0.16); }
.pd-avatar { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.5rem; color: #fff; flex-shrink: 0; }
.pd-hero-info { flex: 1; min-width: 0; }
.pd-name { font-weight: 800; font-size: 1.2rem; margin-bottom: 4px; }
.pd-tag { font-size: 0.75rem; }
.pd-bday { font-size: 0.78rem; color: var(--hint); margin-top: 6px; display: flex; align-items: center; gap: 4px; }
.pd-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.pd-actions .btn-action { flex: 1; min-width: 0; font-size: 0.78rem; }
.pd-section { padding: 14px; }
.pd-section-label { font-size: 0.72rem; color: var(--hint); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; }
.pd-notes { font-size: 0.85rem; color: var(--text-secondary, rgba(255,255,255,0.75)); line-height: 1.6; white-space: pre-line; }
.pd-contact-row { font-size: 0.85rem; padding: 4px 0; display: flex; align-items: center; gap: 8px; }
.pd-edit-form { padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.pd-edit-actions { display: flex; gap: 8px; margin-top: 4px; }
.pd-friend-badge { display: flex; align-items: center; gap: 6px; font-size: 0.72rem; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--miniapp-surface-border); background: var(--miniapp-surface-bg); box-shadow: 0 12px 24px rgba(15,23,42,0.12); }
.pd-friend-badge--hint { color: var(--hint); }
.pd-friend-badge--live { color: var(--green, #22c55e); }
.pd-timeline { margin-top: 4px; }
.pd-ix-list { display: flex; flex-direction: column; gap: 8px; }
.pd-ix-item { display: flex; gap: 10px; padding: 10px 12px; border-radius: 8px; background: var(--miniapp-surface-bg); border: 1px solid var(--miniapp-surface-border); }
.pd-ix-icon { font-size: 1.1rem; flex-shrink: 0; padding-top: 2px; }
.pd-ix-content { flex: 1; min-width: 0; }
.pd-ix-text { font-size: 0.82rem; line-height: 1.5; color: var(--text-secondary, rgba(255,255,255,0.75)); }
.pd-ix-meta { font-size: 0.72rem; color: var(--hint); margin-top: 4px; }

/* ═══════════════════════════════════════════════════════════════════
   DM Thread — E2E encrypted direct messaging
   ═══════════════════════════════════════════════════════════════════ */
.pd-dm-container { margin-top: 4px; }
.dm-thread { background: var(--miniapp-panel-bg); border: 1px solid var(--miniapp-panel-border); border-radius: var(--radius-sm); box-shadow: 0 16px 34px rgba(15,23,42,0.18); overflow: hidden; }
.dm-header { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--card-border); font-size: 0.82rem; font-weight: 600; }
.dm-header-icon { font-size: 0.9rem; }
.dm-header-text { flex: 1; }
.dm-header-badge { font-size: 0.65rem; font-weight: 700; color: var(--green, #22c55e); background: color-mix(in srgb, var(--miniapp-surface-bg) 76%, rgba(34,197,94,0.14)); border: 1px solid color-mix(in srgb, var(--miniapp-surface-border) 68%, rgba(34,197,94,0.2)); padding: 2px 6px; border-radius: 6px; letter-spacing: 0.5px; }
.dm-messages { max-height: 320px; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 6px; scrollbar-width: thin; }
.dm-msg { display: flex; }
.dm-msg--own { justify-content: flex-end; }
.dm-msg--peer { justify-content: flex-start; }
.dm-msg-bubble { max-width: 80%; padding: 8px 12px; border-radius: 14px; font-size: 0.85rem; line-height: 1.45; }
.dm-msg--own .dm-msg-bubble { background: var(--accent-1, #b5854d); color: #fff; border-bottom-right-radius: 4px; }
.dm-msg--peer .dm-msg-bubble { background: var(--miniapp-surface-bg); border: 1px solid var(--miniapp-surface-border); color: var(--text); border-bottom-left-radius: 4px; }
.dm-msg-time { font-size: 0.65rem; opacity: 0.6; margin-top: 2px; text-align: right; }
.dm-input-row { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--miniapp-panel-border); background: color-mix(in srgb, var(--miniapp-surface-bg) 88%, rgba(15,23,42,0.12)); }
.dm-input { flex: 1; background: var(--miniapp-panel-bg); border: 1px solid var(--miniapp-panel-border); border-radius: 20px; padding: 8px 14px; color: var(--text); font-size: 0.85rem; outline: none; }
.dm-input:focus { border-color: var(--accent-1, #b5854d); }
.dm-send-btn { width: 38px; height: 38px; border-radius: 50%; background: var(--accent-1, #b5854d); border: none; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: opacity 0.2s; }

@media (max-width: 640px) {
  .miniapp-hero { padding: 16px; border-radius: 24px; }
  .miniapp-hero__title { font-size: 1.2rem; }
  .miniapp-hero__metrics { grid-template-columns: repeat(2, 1fr); }
  .miniapp-panel-grid { grid-template-columns: 1fr 1fr; }
  .hm-mission-grid,
  .disc-route-grid { grid-template-columns: 1fr; }
}
.dm-send-btn:active { opacity: 0.7; }
.dm-loading { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 24px; }
.dm-empty { padding: 24px; text-align: center; }
.dm-empty-icon { font-size: 2rem; margin-bottom: 8px; }
.dm-empty-text { font-size: 0.82rem; color: var(--hint); line-height: 1.5; }
.dm-empty-chat { padding: 32px 16px; text-align: center; }

/* DM friends list (Social → Messaggi tab) */
.dm-friends-list { display: flex; flex-direction: column; gap: 6px; }
.dm-friend-card { cursor: pointer; transition: border-color 0.2s; }
.dm-friend-card--active { border-color: var(--accent-1, #b5854d); }
.dm-friend-row { display: flex; align-items: center; gap: 12px; padding: 4px 0; }
.dm-friend-avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--gradient-primary, linear-gradient(135deg, #b5854d, #8899aa)); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1rem; color: #fff; flex-shrink: 0; }
.dm-friend-info { flex: 1; min-width: 0; }
.dm-friend-name { font-weight: 600; font-size: 0.9rem; display: flex; align-items: center; gap: 8px; }
.dm-friend-meta { font-size: 0.72rem; color: var(--hint); margin-top: 2px; }
.dm-friend-arrow { color: var(--hint); font-size: 1.2rem; }
.dm-unread-badge { background: var(--accent-1, #b5854d); color: #fff; font-size: 0.65rem; font-weight: 700; padding: 1px 6px; border-radius: 10px; min-width: 18px; text-align: center; }

/* ═══════════════════════════════════════════════════════════════════
   Habits — emoji picker, create forms
   ═══════════════════════════════════════════════════════════════════ */
.hab-emoji-picker { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.hab-emoji-opt { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; border-radius: 8px; border: 1px solid var(--card-border); cursor: pointer; transition: all 0.2s; }
.hab-emoji-opt:hover { background: rgba(255,255,255,0.06); }
.hab-emoji-opt.active { background: var(--accent-1); border-color: var(--accent-1); }

/* ═══════════════════════════════════════════════════════════════════
   Radar View — Signal monitoring dashboard
   ═══════════════════════════════════════════════════════════════════ */
.radar-view { padding: 0 0 24px; }

.signal-summary-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 10px; margin-bottom: 16px;
}
.signal-card {
  background: var(--miniapp-surface-bg); border: 1px solid var(--miniapp-surface-border);
  border-radius: var(--radius-sm); padding: 16px 12px;
  text-align: center; transition: border-color 0.2s;
}
.signal-card.signal-critical { border-left: 3px solid #ef4444; }
.signal-card.signal-important { border-left: 3px solid #f59e0b; }
.signal-card.signal-info { border-left: 3px solid #b5854d; }
.signal-count {
  display: block; font-size: 1.6rem; font-weight: 800; color: var(--text); line-height: 1;
}
.signal-label {
  display: block; font-size: 0.72rem; font-weight: 600; color: var(--hint);
  text-transform: uppercase; letter-spacing: 0.04em; margin-top: 4px;
}

.signal-undelivered { margin-bottom: 16px; }
.signal-undelivered h4 {
  font-size: 0.82rem; font-weight: 700; color: var(--text); margin: 0 0 8px;
}
.signal-event {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 12px; margin-bottom: 6px;
  background: var(--miniapp-surface-bg); border: 1px solid var(--miniapp-surface-border);
  border-radius: var(--radius-sm); font-size: 0.82rem;
}
.signal-event.critical { border-left: 3px solid #ef4444; }
.signal-event.important { border-left: 3px solid #f59e0b; }
.signal-event.informative { border-left: 3px solid #b5854d; }
.signal-event-title { font-weight: 600; color: var(--text); }
.signal-event-time { font-size: 0.72rem; color: var(--hint); }

.radar-actions {
  display: flex; gap: 8px; margin-top: 12px;
}
.radar-empty {
  padding: 24px 16px; text-align: center;
  color: var(--hint); font-size: 0.85rem;
}

/* Feed list */
.feed-list { display: flex; flex-direction: column; gap: 10px; }
.feed-item {
  background: var(--miniapp-surface-bg); border: 1px solid var(--miniapp-surface-border);
  border-radius: var(--radius-sm); padding: 14px;
}
.feed-item-header {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px;
}
.feed-source {
  font-size: 0.72rem; font-weight: 700; color: var(--accent-1);
  text-transform: uppercase; letter-spacing: 0.03em;
}
.feed-time { font-size: 0.68rem; color: var(--hint); }
.feed-title { font-size: 0.9rem; font-weight: 600; color: var(--text); line-height: 1.3; }
.feed-summary { font-size: 0.78rem; color: var(--hint); margin-top: 4px; line-height: 1.4; }
.feed-link {
  display: inline-block; margin-top: 8px; font-size: 0.78rem; font-weight: 600;
  color: var(--accent-1); text-decoration: none;
}
.feed-link:hover { text-decoration: underline; }

/* Watchlist */
.watchlist-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.watchlist-item {
  background: var(--miniapp-surface-bg); border: 1px solid var(--miniapp-surface-border);
  border-radius: var(--radius-sm); padding: 14px; position: relative;
}
.watchlist-badge {
  font-size: 0.65rem; font-weight: 700; color: var(--accent-1);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.watchlist-name { font-size: 0.88rem; font-weight: 600; color: var(--text); margin-top: 4px; }
.watchlist-value { font-size: 0.78rem; color: var(--hint); margin-top: 2px; }
.watchlist-item .btn-xs {
  position: absolute; top: 8px; right: 8px;
  opacity: 0.4; transition: opacity 0.15s;
}
.watchlist-item:hover .btn-xs { opacity: 1; }

/* ═══════════════════════════════════════════════════════════════════
   Operator View — Conversation management
   ═══════════════════════════════════════════════════════════════════ */
.op-inbox-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 10px; margin-bottom: 18px;
}
.op-inbox-card {
  background: var(--miniapp-surface-bg); border: 1px solid var(--miniapp-surface-border);
  border-radius: var(--radius-sm); padding: 16px 12px; text-align: center;
}
.op-inbox-card.op-escalated { border-left: 3px solid #ef4444; }
.op-inbox-count {
  display: block; font-size: 1.4rem; font-weight: 800; color: var(--text); line-height: 1;
}
.op-inbox-label {
  display: block; font-size: 0.72rem; font-weight: 600; color: var(--hint);
  text-transform: uppercase; margin-top: 4px;
}

.op-conversation-list { display: flex; flex-direction: column; gap: 8px; }
.op-conversation-card {
  display: flex; align-items: center; gap: 12px;
  background: var(--miniapp-surface-bg); border: 1px solid var(--miniapp-surface-border);
  border-radius: var(--radius-sm); padding: 14px; cursor: pointer;
  transition: border-color 0.2s, transform 0.15s;
}
.op-conversation-card:hover { border-color: var(--accent-1); }
.op-conversation-card:active { transform: scale(0.98); }
.op-conversation-card.op-escalated { border-left: 3px solid #ef4444; }
.op-conversation-info { flex: 1; min-width: 0; }
.op-conversation-name { font-weight: 600; font-size: 0.88rem; color: var(--text); }
.op-conversation-preview { font-size: 0.78rem; color: var(--hint); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op-conversation-time { font-size: 0.68rem; color: var(--hint); }
.op-status {
  display: inline-block; font-size: 0.65rem; font-weight: 700; padding: 2px 8px;
  border-radius: 10px; text-transform: uppercase;
}
.op-status--escalated { background: rgba(239,68,68,0.15); color: #ef4444; }
.op-status--active { background: rgba(34,197,94,0.15); color: #22c55e; }
.op-status--closed { background: rgba(107,114,128,0.15); color: #6b7280; }

/* ═══════════════════════════════════════════════════════════════════
   Discover — Accent chip variant for Radar
   ═══════════════════════════════════════════════════════════════════ */
.disc-view-chip--accent {
  background: rgba(181,133,77,0.1); border-color: var(--accent-1);
  color: var(--accent-1); font-weight: 700;
}
.disc-view-chip--accent .jb-icon { color: var(--accent-1); }

/* ═══════════════════════════════════════════════════════════════════
   Vault — Sub-navigation row
   ═══════════════════════════════════════════════════════════════════ */
.vault-subnav {
  display: flex; gap: 8px; margin-bottom: 14px;
}
.vault-subnav-btn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 5px;
  padding: 10px 14px; background: var(--miniapp-surface-bg);
  border: 1px solid var(--miniapp-surface-border); border-radius: var(--radius-sm);
  color: var(--hint); font-size: 0.82rem; font-weight: 600;
  text-decoration: none; transition: all 0.15s;
}
.vault-subnav-btn .jb-icon { width: 14px; height: 14px; }
.vault-subnav-btn:active { background: color-mix(in srgb, var(--miniapp-surface-bg) 76%, rgba(181,133,77,0.12)); color: var(--text); }

/* ═══════════════════════════════════════════════════════════════════
   Home Dashboard — Radar card color accent
   ═══════════════════════════════════════════════════════════════════ */
.hm-dash-radar .hm-dash-icon svg { color: var(--accent-1); }
.hm-dash-radar::before {
  content: ''; position: absolute; top: 0; right: 0;
  width: 40px; height: 40px; border-radius: 0 var(--radius-sm) 0 50%;
  background: linear-gradient(135deg, transparent 40%, rgba(181,133,77,0.08));
}

/* ═══════════════════════════════════════════════════════════════════
   Home Dashboard — Memory card color accent
   ═══════════════════════════════════════════════════════════════════ */
.hm-dash-memory .hm-dash-icon svg { color: #8fac8f; }
.hm-dash-memory::before {
  content: ''; position: absolute; top: 0; right: 0;
  width: 40px; height: 40px; border-radius: 0 var(--radius-sm) 0 50%;
  background: linear-gradient(135deg, transparent 40%, rgba(167,139,250,0.08));
}

/* ═══════════════════════════════════════════════════════════════════
   Memory View — Il Secondo Cervello
   ═══════════════════════════════════════════════════════════════════ */
.memory-view { padding: 0 0 24px; }

.mem-type-chips { display: flex; gap: 6px; padding: 8px 16px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.mem-type-chip {
  flex-shrink: 0; padding: 6px 12px; border-radius: 16px;
  background: var(--miniapp-surface-bg); border: 1px solid var(--border);
  font-size: 0.78rem; cursor: pointer; transition: all 0.15s;
  color: var(--hint); white-space: nowrap;
}
.mem-type-chip.active { background: var(--accent-1); color: #fff; border-color: var(--accent-1); }
.mem-type-chip:active { transform: scale(0.96); }

.mem-facts-list { display: flex; flex-direction: column; gap: 8px; padding: 0 16px; }
.mem-fact-card {
  background: var(--miniapp-surface-bg); border-radius: var(--radius-sm);
  padding: 12px 14px; border: 1px solid var(--border);
}
.mem-fact-type { font-size: 0.72rem; font-weight: 600; margin-bottom: 4px; }
.mem-fact-key { font-weight: 600; font-size: 0.88rem; color: var(--text); margin-bottom: 2px; }
.mem-fact-value { font-size: 0.82rem; color: var(--hint); line-height: 1.4; }
.mem-fact-meta { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.mem-fact-confidence { font-size: 0.72rem; }
.mem-fact-time { font-size: 0.72rem; color: var(--hint); }

.badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 0.7rem; font-weight: 600; }
.badge--green { background: rgba(52,211,153,0.15); color: #059669; }
.badge--yellow { background: rgba(251,191,36,0.15); color: #d97706; }
.badge--gray { background: rgba(148,163,184,0.15); color: #64748b; }
.badge--blue { background: rgba(96,165,250,0.15); color: #2563eb; }
.badge--red { background: rgba(248,113,113,0.15); color: #dc2626; }
.badge--purple { background: rgba(167,139,250,0.15); color: #7c3aed; }

.mem-load-more { margin: 16px auto; display: block; }

.mem-sessions-list { display: flex; flex-direction: column; gap: 8px; padding: 0 16px; }
.mem-session-card {
  background: var(--miniapp-surface-bg); border-radius: var(--radius-sm);
  padding: 12px 14px; border: 1px solid var(--border);
}
.mem-session-header { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.mem-session-date { font-size: 0.78rem; font-weight: 600; color: var(--text); }
.mem-session-summary { font-size: 0.82rem; color: var(--hint); line-height: 1.4; }
.mem-session-topics { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.mem-topic-chip {
  background: rgba(181,133,77,0.1); color: var(--accent-1);
  padding: 2px 8px; border-radius: 10px; font-size: 0.72rem; font-weight: 500;
}

.mem-scenes-grid { display: grid; grid-template-columns: 1fr; gap: 10px; padding: 0 16px; }
@media (min-width: 480px) { .mem-scenes-grid { grid-template-columns: 1fr 1fr; } }
.mem-scene-card {
  background: var(--miniapp-surface-bg); border-radius: var(--radius-sm);
  padding: 14px; border: 1px solid var(--border);
}
.mem-scene-mood { font-size: 0.72rem; font-weight: 600; color: #8fac8f; margin-bottom: 6px; }
.mem-scene-synopsis { font-size: 0.82rem; color: var(--text); line-height: 1.4; margin-bottom: 6px; }
.mem-scene-keyline { font-size: 0.78rem; color: var(--hint); font-style: italic; margin-bottom: 8px; }
.mem-scene-meta { display: flex; align-items: center; gap: 6px; }
.mem-scene-time { font-size: 0.72rem; color: var(--hint); }

.mem-digests-list { display: flex; flex-direction: column; gap: 10px; padding: 0 16px; }
.mem-digest-card {
  background: var(--miniapp-surface-bg); border-radius: var(--radius-sm);
  padding: 14px; border: 1px solid var(--border);
}
.mem-digest-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.mem-digest-period { font-size: 0.78rem; font-weight: 600; color: var(--text); }
.mem-digest-text { font-size: 0.82rem; color: var(--hint); line-height: 1.5; }

/* ═══════════════════════════════════════════════════════════════════
   Finance View
   ═══════════════════════════════════════════════════════════════════ */
.finance-view { padding: 0 0 24px; }

.fin-positions { display: flex; flex-direction: column; gap: 8px; padding: 0 16px; }
.fin-position-card {
  background: var(--miniapp-surface-bg); border-radius: var(--radius-sm);
  padding: 12px 14px; border: 1px solid var(--border);
}
.fin-pos-header { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.fin-pos-ticker { font-weight: 700; font-size: 0.9rem; color: var(--text); }
.fin-pos-name { font-size: 0.78rem; color: var(--hint); }
.fin-pos-values { display: flex; align-items: baseline; gap: 10px; }
.fin-pos-price { font-family: var(--jb-font-mono); font-size: 1rem; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.fin-pos-change { font-size: 0.82rem; font-weight: 600; }
.fin-pos-change.positive { color: #059669; }
.fin-pos-change.negative { color: #dc2626; }
.fin-pos-qty { font-size: 0.72rem; color: var(--hint); margin-top: 4px; }

.fin-watchlist { display: flex; flex-direction: column; gap: 4px; padding: 0 16px; }
.fin-watch-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: var(--radius-sm);
  background: var(--miniapp-surface-bg); border: 1px solid var(--border);
}
.fin-watch-ticker { font-weight: 600; flex: 1; color: var(--text); }
.fin-watch-price { font-family: var(--jb-font-mono); font-size: 0.88rem; color: var(--text); font-variant-numeric: tabular-nums; }
.fin-watch-change { font-size: 0.82rem; font-weight: 600; }
.fin-watch-change.positive { color: #059669; }
.fin-watch-change.negative { color: #dc2626; }

.fin-alerts-list { display: flex; flex-direction: column; gap: 8px; padding: 0 16px; }
.fin-alert-card {
  background: var(--miniapp-surface-bg); border-radius: var(--radius-sm);
  padding: 12px 14px; border: 1px solid var(--border);
}
.fin-alert-card.triggered { border-color: rgba(248,113,113,0.4); }
.fin-alert-header { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.fin-alert-ticker { font-weight: 600; color: var(--text); }
.fin-alert-condition { font-size: 0.82rem; color: var(--hint); }
.fin-alert-time { font-size: 0.72rem; color: var(--hint); margin-top: 4px; }

.fin-news-list { display: flex; flex-direction: column; gap: 8px; padding: 0 16px; }
.fin-news-card {
  background: var(--miniapp-surface-bg); border-radius: var(--radius-sm);
  padding: 12px 14px; border: 1px solid var(--border);
}
.fin-news-title { font-weight: 600; font-size: 0.88rem; color: var(--text); margin-bottom: 4px; }
.fin-news-snippet { font-size: 0.8rem; color: var(--hint); line-height: 1.4; margin-bottom: 6px; }
.fin-news-meta { display: flex; gap: 10px; font-size: 0.72rem; color: var(--hint); }

/* ═══════════════════════════════════════════════════════════════════
   Modules View
   ═══════════════════════════════════════════════════════════════════ */
.modules-view { padding: 0 0 24px; }

.mod-grid { display: grid; grid-template-columns: 1fr; gap: 10px; padding: 0 16px; }
@media (min-width: 480px) { .mod-grid { grid-template-columns: 1fr 1fr; } }
.mod-card {
  background: var(--miniapp-surface-bg); border-radius: var(--radius-sm);
  padding: 14px; border: 1px solid var(--border); transition: border-color 0.15s;
}
.mod-card.mod-active { border-color: rgba(52,211,153,0.4); }
.mod-card-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.mod-card-icon svg { width: 20px; height: 20px; color: var(--accent-1); }
.mod-card-info { flex: 1; }
.mod-card-name { font-weight: 600; font-size: 0.88rem; color: var(--text); }
.mod-card-version { font-size: 0.72rem; color: var(--hint); }
.mod-card-desc { font-size: 0.8rem; color: var(--hint); line-height: 1.4; margin-bottom: 10px; }
.mod-card-actions { display: flex; gap: 6px; }

.btn-sm { font-size: 0.78rem; padding: 6px 12px; }

/* ═══════════════════════════════════════════════════════════════════
   Professional View
   ═══════════════════════════════════════════════════════════════════ */
.pro-view { padding: 0 0 24px; }

.pro-activation { padding: 0 16px; }
.pro-profession-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (min-width: 480px) { .pro-profession-grid { grid-template-columns: 1fr 1fr 1fr; } }
.pro-prof-btn {
  display: flex; align-items: center; gap: 6px; padding: 10px 12px;
  background: var(--miniapp-surface-bg); border: 1px solid var(--border);
  border-radius: var(--radius-sm); cursor: pointer; transition: all 0.15s;
  font-size: 0.82rem; color: var(--text); font-weight: 500;
}
.pro-prof-btn:active { background: color-mix(in srgb, var(--miniapp-surface-bg) 80%, rgba(181,133,77,0.1)); }

.pro-overview { padding: 0 16px; }
.pro-info-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); }
.pro-info-label { font-size: 0.82rem; color: var(--hint); }
.pro-info-value { font-size: 0.88rem; font-weight: 600; color: var(--text); }

.pro-data-list { display: flex; flex-direction: column; gap: 8px; padding: 0 16px; }
.pro-data-card {
  background: var(--miniapp-surface-bg); border-radius: var(--radius-sm);
  padding: 12px 14px; border: 1px solid var(--border);
}
.pro-data-header { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.pro-data-time { font-size: 0.72rem; color: var(--hint); }
.pro-data-title { font-weight: 600; font-size: 0.88rem; color: var(--text); margin-bottom: 2px; }
.pro-data-content { font-size: 0.82rem; color: var(--hint); line-height: 1.4; }

.pro-layers-list { display: flex; flex-direction: column; gap: 8px; padding: 0 16px; }
.pro-layer-card {
  display: flex; align-items: center; gap: 10px;
  background: var(--miniapp-surface-bg); border-radius: var(--radius-sm);
  padding: 12px 14px; border: 1px solid var(--border);
}
.pro-layer-name { flex: 1; font-weight: 600; font-size: 0.88rem; color: var(--text); }
.pro-layer-desc { font-size: 0.78rem; color: var(--hint); flex: 2; }

/* ═══════════════════════════════════════════════════════════════════
   Agent View
   ═══════════════════════════════════════════════════════════════════ */
.agent-view { padding: 0 0 24px; }

.agent-pending-list { display: flex; flex-direction: column; gap: 10px; padding: 0 16px; }
.agent-pending-card {
  background: var(--miniapp-surface-bg); border-radius: var(--radius-sm);
  padding: 14px; border: 1px solid rgba(251,191,36,0.3);
}
.agent-pending-desc { font-weight: 600; font-size: 0.88rem; color: var(--text); margin-bottom: 4px; }
.agent-pending-reason { font-size: 0.8rem; color: var(--hint); line-height: 1.4; margin-bottom: 10px; }
.agent-pending-actions { display: flex; gap: 8px; margin-bottom: 6px; }
.agent-pending-time { font-size: 0.72rem; color: var(--hint); }

.agent-activity-list { display: flex; flex-direction: column; gap: 6px; padding: 0 16px; }
.agent-activity-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 8px 12px; border-radius: var(--radius-sm);
  background: var(--miniapp-surface-bg); border: 1px solid var(--border);
}
.agent-activity-info { flex: 1; }
.agent-activity-desc { font-size: 0.82rem; color: var(--text); }
.agent-activity-time { font-size: 0.72rem; color: var(--hint); margin-top: 2px; }
.text-success { color: #059669; }
.text-error { color: #dc2626; }
.text-muted { color: #94a3b8; }

/* ── PWA Install Banner ──────────────────────────────────────────── */
.install-banner {
  display: flex; align-items: center; gap: 12px;
  margin: 12px 16px 0; padding: 12px 16px;
  background: linear-gradient(135deg, rgba(51,161,153,0.15), rgba(217,196,154,0.10));
  border: 1px solid var(--color-teal, #33A199);
  border-radius: var(--radius-md, 12px);
  animation: install-slide-in 0.4s ease-out forwards;
  opacity: 1; /* override .stagger > * opacity: 0 */
}
.install-banner.hidden { display: none; }
.install-banner__icon { flex-shrink: 0; }
.install-banner__icon img { border-radius: 10px; }
.install-banner__text { flex: 1; min-width: 0; }
.install-banner__text strong { display: block; font-size: 0.9rem; color: var(--text); }
.install-banner__text span { font-size: 0.78rem; color: var(--hint); line-height: 1.4; }
.install-banner__text em { font-style: normal; font-weight: 600; }
.install-banner__btn {
  flex-shrink: 0; padding: 7px 16px;
  background: var(--color-teal, #33A199); color: #fff;
  border: none; border-radius: 8px; font-size: 0.82rem; font-weight: 600;
  cursor: pointer; white-space: nowrap;
}
.install-banner__btn:active { opacity: 0.8; }
.install-banner__btn:disabled { opacity: 0.5; cursor: default; }
.install-banner__close {
  flex-shrink: 0; width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; color: var(--hint);
  font-size: 1.2rem; cursor: pointer; border-radius: 50%;
}
.install-banner__close:hover { background: rgba(255,255,255,0.08); }
@keyframes install-slide-in {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}