:root {
  --bg: #f5f6f4;
  --surface: #ffffff;
  --surface-soft: #f8f9f7;
  --ink: #202923;
  --ink-2: #4e5b52;
  --muted: #87928a;
  --line: #e7ebe6;
  --line-dark: #dce3dc;
  --green: #2d6247;
  --green-deep: #214d36;
  --green-soft: #eaf2ec;
  --lime: #dce9c8;
  --sand: #f3efe5;
  --orange: #b77b45;
  --shadow: 0 12px 40px rgba(28, 49, 35, .055);
  --radius: 18px;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body { margin: 0; min-width: 320px; min-height: 100vh; color: var(--ink); background: var(--bg); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 14px; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid rgba(75, 132, 94, .28); outline-offset: 2px; }
a { color: inherit; text-decoration: none; }
.hidden { display: none !important; }
.app-frame { min-height: 100vh; }
.app-shell { min-height: 100vh; display: flex; }
.sidebar { width: 248px; flex: 0 0 248px; min-height: 100vh; padding: 30px 18px 22px; display: flex; flex-direction: column; background: #fff; border-right: 1px solid var(--line); position: sticky; top: 0; height: 100vh; }
.brand, .auth-brand, .mobile-brand { display: flex; align-items: center; gap: 11px; font-weight: 750; letter-spacing: -.03em; }
.brand { padding: 0 10px; margin-bottom: 52px; font-size: 18px; }
.brand-mark { width: 36px; height: 36px; border-radius: 12px; display: inline-grid; place-items: center; color: #fff; background: var(--green); font-size: 17px; font-weight: 750; letter-spacing: -.04em; box-shadow: 0 5px 12px rgba(45, 98, 71, .18); flex: 0 0 auto; }
.brand-name { display: flex; flex-direction: column; gap: 3px; }
.brand-name small { color: #9aa49b; font-size: 8px; letter-spacing: .13em; font-weight: 700; }
.sidebar-label { padding: 0 12px; margin: 0 0 12px; color: #a1aaa3; font-size: 9px; font-weight: 750; letter-spacing: .14em; }
.side-nav { display: grid; gap: 5px; }
.nav-item { width: 100%; display: flex; align-items: center; gap: 13px; padding: 12px 13px; border: 0; border-radius: 11px; color: #6c786f; background: transparent; text-align: left; font-size: 13px; font-weight: 560; transition: background .18s, color .18s, transform .18s; }
.nav-item:hover { background: #f7f9f6; color: var(--ink); }
.nav-item.active { color: var(--green-deep); background: #edf4ee; font-weight: 700; }
.nav-icon { width: 20px; text-align: center; color: inherit; font-size: 19px; line-height: 1; }
.nav-pill { margin-left: auto; padding: 3px 6px; border-radius: 5px; color: #5d805f; background: #e2ecdf; font-size: 8px; font-weight: 800; letter-spacing: .05em; }
.sidebar-spacer { flex: 1; min-height: 35px; }
.sidebar-note { margin: 12px 2px 20px; padding: 17px 16px; border: 1px solid #e7eee5; border-radius: 15px; background: linear-gradient(140deg, #f6f9f2, #f2f6ef); }
.note-icon { color: #73926b; font-size: 18px; margin-bottom: 9px; }
.sidebar-note strong { display: block; font-size: 12px; }
.sidebar-note p { margin: 6px 0 0; color: #79867c; font-size: 11px; line-height: 1.55; }
.sidebar-footer { display: flex; align-items: center; gap: 8px; padding: 0 10px; color: #8e9990; font-size: 10px; }
.status-dot, .today-dot { width: 7px; height: 7px; border-radius: 50%; background: #77a17a; box-shadow: 0 0 0 3px #edf4ed; }
.version { margin-left: auto; color: #a8b0a8; font-size: 9px; letter-spacing: .08em; }
.main-column { min-width: 0; flex: 1; }
.topbar { height: 78px; padding: 0 clamp(24px, 5vw, 64px); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.56); }
.topbar-context { display: flex; align-items: center; gap: 10px; color: #7c887e; font-size: 12px; }
.topbar-actions { display: flex; align-items: center; gap: 16px; }
.topbar-caption { color: #a0aaa1; font-size: 9px; letter-spacing: .12em; font-weight: 700; }
.avatar { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 50%; color: #345b41; background: #e4eee3; font-size: 12px; font-weight: 750; }
.mobile-brand { display: none; }
.main-view { width: 100%; max-width: 1440px; margin: 0 auto; padding: 42px clamp(24px, 5vw, 64px) 76px; }
.page-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 27px; }
.eyebrow { margin: 0 0 10px; color: #819184; font-size: 9px; line-height: 1.3; font-weight: 800; letter-spacing: .15em; }
h1, h2, h3, p { overflow-wrap: anywhere; }
h1, h2, h3 { margin-top: 0; color: var(--ink); }
h1 { margin-bottom: 8px; font-size: clamp(26px, 3.1vw, 36px); line-height: 1.15; letter-spacing: -.055em; font-weight: 670; }
h2 { margin-bottom: 7px; font-size: 17px; letter-spacing: -.035em; font-weight: 680; }
h3 { margin-bottom: 5px; font-size: 13px; letter-spacing: -.02em; font-weight: 680; }
.page-subtitle { margin: 0; max-width: 560px; color: #87928a; font-size: 13px; line-height: 1.65; }
.heading-date { color: #849087; font-size: 11px; white-space: nowrap; }
.hero-panel { position: relative; overflow: hidden; min-height: 224px; padding: 34px 38px; display: flex; align-items: center; justify-content: space-between; gap: 30px; border: 1px solid #e1eade; border-radius: 22px; background: linear-gradient(110deg, #eaf2e9 0%, #f1f5ed 48%, #f4f3e9 100%); }
.hero-panel::after { content: ""; position: absolute; right: 8%; top: -110px; width: 340px; height: 340px; border-radius: 50%; border: 1px solid rgba(84, 119, 82, .1); box-shadow: 0 0 0 34px rgba(255,255,255,.12), 0 0 0 68px rgba(255,255,255,.09); pointer-events: none; }
.hero-copy { position: relative; z-index: 1; max-width: 590px; }
.hero-copy .eyebrow { color: #64806a; }
.hero-copy h1 { max-width: 550px; margin-bottom: 12px; font-size: clamp(28px, 3.5vw, 41px); }
.hero-copy p { max-width: 490px; margin: 0; color: #68796b; font-size: 13px; line-height: 1.7; }
.hero-actions { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 9px; min-width: 175px; }
.button { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 0 16px; border: 1px solid transparent; border-radius: 10px; font-size: 12px; font-weight: 700; transition: transform .18s, box-shadow .18s, background .18s; }
.button:hover { transform: translateY(-1px); }
.button-primary { color: #fff; background: var(--green); box-shadow: 0 5px 13px rgba(45, 98, 71, .13); }
.button-primary:hover { background: var(--green-deep); box-shadow: 0 7px 16px rgba(45, 98, 71, .2); }
.button-secondary { color: #45614d; border-color: #dbe6d9; background: rgba(255,255,255,.75); }
.button-secondary:hover { background: #fff; }
.button-quiet { color: #718078; background: transparent; border-color: transparent; }
.button-quiet:hover { color: var(--green-deep); background: #f4f7f3; }
.button-danger { color: #a05b55; background: #fff7f6; border-color: #f0dfdc; }
.button-full { width: 100%; }
.button-small { min-height: 34px; padding: 0 11px; font-size: 11px; }
.stats-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 18px 0 26px; }
.stat-card { min-width: 0; padding: 18px 20px; display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--line); border-radius: 15px; box-shadow: 0 3px 12px rgba(30,48,34,.02); }
.stat-icon { width: 39px; height: 39px; flex: 0 0 39px; display: grid; place-items: center; border-radius: 12px; color: #5d7e60; background: #eef4ed; font-size: 18px; }
.stat-icon.sand { color: #9a774c; background: #f5f1e9; }
.stat-icon.blue { color: #627e8b; background: #edf3f5; }
.stat-number { display: block; margin-bottom: 2px; font-size: 22px; line-height: 1; font-weight: 720; letter-spacing: -.05em; }
.stat-label { color: #89938b; font-size: 10px; }
.content-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(270px, .8fr); gap: 17px; align-items: start; }
.stack { display: grid; gap: 17px; min-width: 0; }
.card { min-width: 0; padding: 23px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 3px 14px rgba(30,48,34,.025); }
.card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 15px; margin-bottom: 17px; }
.card-header p { margin: 0; color: #8a958d; font-size: 11px; line-height: 1.55; }
.text-link { border: 0; padding: 3px 0; color: #4e7658; background: transparent; font-size: 11px; font-weight: 700; white-space: nowrap; }
.text-link:hover { color: #244d33; }
.inline-label { color: #9aa49c; font-size: 9px; font-weight: 780; letter-spacing: .12em; }
.goal-list, .routine-list { display: grid; gap: 10px; }
.goal-row { display: flex; align-items: flex-start; gap: 12px; padding: 13px 0; border-top: 1px solid #eff1ee; }
.goal-row:first-child { padding-top: 0; border-top: 0; }
.goal-check { width: 19px; height: 19px; flex: 0 0 19px; margin-top: 1px; border: 1.5px solid #cbd6ca; border-radius: 7px; display: grid; place-items: center; color: #fff; background: #fff; padding: 0; font-size: 11px; }
.goal-check:hover { border-color: #6b966f; background: #f1f6ef; }
.goal-check.done { border-color: var(--green); background: var(--green); }
.goal-copy { flex: 1; min-width: 0; }
.goal-copy strong { display: block; font-size: 12px; line-height: 1.5; font-weight: 650; }
.goal-copy p { margin: 3px 0 0; color: #919b93; font-size: 10px; line-height: 1.5; }
.goal-copy.completed strong { color: #9ba49c; text-decoration: line-through; }
.goal-date { color: #9ba49c; font-size: 10px; white-space: nowrap; }
.routine-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid #eff1ee; }
.routine-row:first-child { padding-top: 0; border-top: 0; }
.routine-time { min-width: 49px; color: #5c7660; font-size: 11px; font-weight: 750; font-variant-numeric: tabular-nums; }
.routine-marker { width: 8px; height: 8px; border-radius: 50%; background: #8ba987; box-shadow: 0 0 0 4px #f0f5ef; }
.routine-copy { min-width: 0; flex: 1; }
.routine-copy strong { display: block; font-size: 11px; font-weight: 650; }
.routine-copy span { display: block; margin-top: 3px; color: #97a098; font-size: 10px; }
.insight-card { position: relative; overflow: hidden; border-color: #e7ebe3; background: #fafbf8; }
.insight-card .insight-mark { color: #9aab8e; font-size: 18px; margin-bottom: 13px; }
.insight-card h3 { font-size: 14px; }
.insight-card p { margin: 7px 0 0; color: #7e8a80; font-size: 11px; line-height: 1.7; }
.coach-cta { display: flex; align-items: center; gap: 14px; padding: 18px; border: 1px solid #e3ebe0; border-radius: 15px; background: #f6f9f4; }
.coach-cta-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 13px; color: #fff; background: var(--green); font-size: 18px; flex: 0 0 auto; }
.coach-cta-copy { min-width: 0; flex: 1; }
.coach-cta-copy strong { display: block; font-size: 12px; }
.coach-cta-copy span { display: block; margin-top: 4px; color: #859087; font-size: 10px; line-height: 1.5; }
.empty-state { padding: 24px 14px; text-align: center; border: 1px dashed #e1e8e0; border-radius: 13px; background: #fbfcfa; }
.empty-icon { width: 38px; height: 38px; display: grid; place-items: center; margin: 0 auto 10px; color: #6e8d70; background: #edf4ec; border-radius: 12px; font-size: 18px; }
.empty-state strong { display: block; font-size: 12px; }
.empty-state p { max-width: 290px; margin: 5px auto 12px; color: #909a92; font-size: 10px; line-height: 1.55; }
/* Shared forms */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.field { display: grid; gap: 7px; min-width: 0; }
.field.full { grid-column: 1 / -1; }
.field label { color: #66736a; font-size: 10px; font-weight: 700; }
.field input, .field textarea, .field select, .composer textarea { width: 100%; min-width: 0; padding: 11px 12px; color: var(--ink); background: #fbfcfa; border: 1px solid #e4e9e3; border-radius: 10px; outline: none; transition: border .18s, box-shadow .18s, background .18s; font-size: 12px; }
.field input:focus, .field textarea:focus, .field select:focus, .composer textarea:focus { border-color: #91ae91; background: #fff; box-shadow: 0 0 0 3px rgba(95, 139, 94, .1); }
.field textarea { min-height: 86px; resize: vertical; line-height: 1.6; }
.field-hint { color: #9aa39b; font-size: 10px; line-height: 1.5; }
.form-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 17px; }
/* Coach */
.coach-layout { max-width: 880px; margin: 0 auto; }
.context-chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; color: #5f7c62; background: #edf4ed; border-radius: 99px; font-size: 10px; font-weight: 650; }
.context-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #77a27b; }
.ai-status { margin: 0 0 16px; padding: 11px 13px; border: 1px solid #ede6d9; border-radius: 10px; color: #8d754f; background: #faf7f0; font-size: 10px; line-height: 1.55; }
.chat-card { padding: 0; overflow: hidden; }
.chat-top { display: flex; justify-content: space-between; align-items: center; padding: 17px 21px; border-bottom: 1px solid var(--line); }
.chat-top-left { display: flex; align-items: center; gap: 10px; }
.chat-avatar { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 11px; color: #fff; background: var(--green); font-size: 15px; }
.chat-top-left strong { display: block; font-size: 11px; }
.chat-top-left small { display: block; margin-top: 3px; color: #98a199; font-size: 9px; }
.chat-messages { min-height: 320px; max-height: 58vh; overflow-y: auto; display: flex; flex-direction: column; gap: 18px; padding: 22px; background: #fdfefd; }
.chat-message { display: flex; align-items: flex-start; gap: 10px; max-width: 88%; }
.chat-message.user { align-self: flex-end; flex-direction: row-reverse; }
.message-avatar { width: 25px; height: 25px; flex: 0 0 25px; display: grid; place-items: center; margin-top: 2px; border-radius: 9px; color: #5f7a62; background: #edf3eb; font-size: 10px; font-weight: 750; }
.chat-message.user .message-avatar { color: #fff; background: #718778; }
.message-bubble { padding: 12px 14px; border: 1px solid #edf0ec; border-radius: 4px 14px 14px 14px; color: #4e5b52; background: #fff; font-size: 11px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-message.user .message-bubble { border-color: #e4ece3; border-radius: 14px 4px 14px 14px; color: #2e4535; background: #eef4ec; }
.message-time { margin-top: 5px; color: #a1aaa2; font-size: 9px; }
.chat-empty { margin: auto; max-width: 400px; padding: 26px 10px; text-align: center; }
.chat-empty .empty-icon { margin-bottom: 12px; }
.chat-empty strong { display: block; font-size: 13px; }
.chat-empty p { margin: 6px 0 15px; color: #8e9990; font-size: 11px; line-height: 1.6; }
.suggestion-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; }
.suggestion-chip { padding: 8px 10px; border: 1px solid #e5ebe3; border-radius: 99px; color: #66776a; background: #fff; font-size: 10px; }
.suggestion-chip:hover { border-color: #b9cbb7; color: #365d40; background: #f7faf5; }
.composer { padding: 15px 17px 16px; border-top: 1px solid var(--line); background: #fff; }
.composer textarea { min-height: 76px; max-height: 170px; resize: vertical; padding: 12px; line-height: 1.6; }
.composer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 10px; }
.composer-note { color: #a0a9a0; font-size: 9px; }
/* Goals / routines */
.list-card { display: flex; align-items: flex-start; gap: 14px; padding: 16px 0; border-top: 1px solid #eff1ee; }
.list-card:first-child { padding-top: 0; border-top: 0; }
.list-card-main { flex: 1; min-width: 0; }
.list-card-main strong { display: block; font-size: 12px; }
.list-card-main p { margin: 5px 0 0; color: #87938a; font-size: 10px; line-height: 1.6; }
.list-card-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 9px; color: #9ba49d; font-size: 9px; }
.status-tag { padding: 4px 7px; border-radius: 6px; color: #5d7f60; background: #edf4ec; font-size: 9px; font-weight: 700; }
.status-tag.complete { color: #7e8980; background: #f1f3f0; }
.toggle-button { padding: 6px 9px; border: 1px solid #e5ebe4; border-radius: 8px; color: #64766a; background: #fff; font-size: 9px; white-space: nowrap; }
.toggle-button:hover { border-color: #c7d6c5; background: #f8faf7; }
.day-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.day-pill { display: inline-flex; align-items: center; gap: 5px; color: #78857a; font-size: 10px; }
.day-pill input { accent-color: var(--green); }
/* Profile */
.profile-top { display: flex; align-items: center; gap: 15px; margin-bottom: 22px; }
.profile-avatar { width: 54px; height: 54px; display: grid; place-items: center; color: #365b40; background: #e7f0e5; border-radius: 18px; font-size: 19px; font-weight: 750; }
.profile-top strong { display: block; font-size: 14px; }
.profile-top span { display: block; margin-top: 4px; color: #87938a; font-size: 10px; }
.privacy-note { margin-top: 17px; padding: 13px 14px; border: 1px solid #e8eee5; border-radius: 11px; color: #7c8b7b; background: #f8faf6; font-size: 10px; line-height: 1.65; }
/* Auth */
.auth-gate { min-height: 100vh; padding: 34px 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: radial-gradient(circle at 18% 13%, #eef3e9 0, transparent 34%), radial-gradient(circle at 90% 85%, #eff2e8 0, transparent 28%), #f7f8f5; }
.auth-brand { margin-bottom: 28px; color: #28352b; font-size: 18px; }
.auth-card { width: 100%; max-width: 430px; padding: 34px; border: 1px solid #e7ece5; border-radius: 22px; background: #fff; box-shadow: 0 18px 65px rgba(34, 54, 37, .075); }
.auth-heading h1 { font-size: 29px; }
.auth-heading .muted { margin: 0; color: #87928a; font-size: 12px; line-height: 1.65; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 23px 0 18px; padding: 4px; border-radius: 10px; background: #f4f6f3; }
.auth-tab { padding: 10px; border: 0; border-radius: 8px; color: #849087; background: transparent; font-size: 11px; font-weight: 650; }
.auth-tab.active { color: #34533c; background: #fff; box-shadow: 0 1px 4px rgba(20, 40, 23, .08); }
.setup-notice { padding: 17px; border: 1px solid #e6ebe3; border-radius: 12px; background: #f9fbf8; }
.setup-notice strong { font-size: 12px; }
.setup-notice p { margin: 7px 0 14px; color: #7e8a81; font-size: 11px; line-height: 1.65; }
.setup-notice code { padding: 2px 4px; border-radius: 4px; background: #edf1eb; }
.auth-footnote { margin: 20px 0 0; color: #a0a9a1; font-size: 9px; line-height: 1.6; text-align: center; }
.auth-bottom { margin: 25px 0 0; color: #9aa49a; font-size: 10px; letter-spacing: .04em; }
.auth-form-panel { min-height: 110px; }
/* Feedback / loading */
.toast { position: fixed; z-index: 50; right: 22px; bottom: 22px; max-width: min(360px, calc(100vw - 32px)); padding: 12px 16px; color: #fff; background: #263d2d; border-radius: 11px; box-shadow: 0 12px 30px rgba(20,40,24,.2); font-size: 11px; opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity .2s, transform .2s; }
.toast.show { opacity: 1; transform: translateY(0); }
.loading-state { min-height: 280px; display: flex; justify-content: center; align-items: center; gap: 10px; color: #89958c; font-size: 11px; }
.loader { width: 17px; height: 17px; border: 2px solid #dce8dc; border-top-color: #568260; border-radius: 50%; animation: spin .75s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.mobile-nav { display: none; }
@media (max-width: 1050px) {
  .sidebar { width: 218px; flex-basis: 218px; }
  .topbar { padding: 0 30px; }
  .main-view { padding: 34px 30px 60px; }
  .content-grid { grid-template-columns: minmax(0, 1.15fr) minmax(245px, .85fr); }
  .hero-panel { padding: 30px; }
}
@media (max-width: 800px) {
  .sidebar { display: none; }
  .topbar { height: 64px; padding: 0 22px; }
  .mobile-brand { display: flex; font-size: 15px; }
  .mobile-brand .brand-mark { width: 31px; height: 31px; border-radius: 10px; font-size: 14px; }
  .topbar-context { display: none; }
  .topbar-caption { display: none; }
  .main-view { padding: 29px 22px 102px; }
  .mobile-nav { position: fixed; z-index: 20; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(5, 1fr); padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); border-top: 1px solid #e7ebe6; background: rgba(255,255,255,.96); backdrop-filter: blur(16px); }
  .mobile-nav-item { min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 5px 2px; border: 0; border-radius: 9px; color: #95a097; background: transparent; }
  .mobile-nav-item span { font-size: 19px; line-height: 1.2; }
  .mobile-nav-item small { font-size: 9px; font-weight: 600; }
  .mobile-nav-item.active { color: var(--green); background: #f0f5ef; }
}
@media (max-width: 620px) {
  .topbar { padding: 0 16px; }
  .main-view { padding: 24px 15px 100px; }
  .page-heading { margin-bottom: 20px; align-items: flex-start; flex-direction: column; gap: 8px; }
  .heading-date { white-space: normal; }
  .hero-panel { min-height: unset; padding: 25px 22px; flex-direction: column; align-items: flex-start; gap: 20px; border-radius: 18px; }
  .hero-panel::after { right: -160px; top: -140px; }
  .hero-copy h1 { font-size: 30px; }
  .hero-actions { width: 100%; flex-direction: row; }
  .hero-actions .button { flex: 1; padding: 0 10px; }
  .stats-grid { gap: 8px; margin: 13px 0 17px; }
  .stat-card { padding: 13px 11px; flex-direction: column; align-items: flex-start; gap: 9px; border-radius: 13px; }
  .stat-icon { width: 31px; height: 31px; flex-basis: 31px; border-radius: 9px; font-size: 15px; }
  .stat-number { font-size: 20px; }
  .stat-label { font-size: 9px; line-height: 1.4; }
  .content-grid { grid-template-columns: 1fr; gap: 14px; }
  .card { padding: 18px; border-radius: 15px; }
  .form-grid { grid-template-columns: 1fr; }
  .field.full { grid-column: auto; }
  .form-actions { flex-direction: column-reverse; }
  .form-actions .button { width: 100%; }
  .coach-message { max-width: 96%; }
  .chat-messages { min-height: 320px; max-height: 55vh; padding: 16px 12px; }
  .chat-top { padding: 14px; }
  .composer { padding: 12px; }
  .composer-bottom { align-items: flex-start; }
  .composer-note { max-width: 180px; line-height: 1.5; }
  .auth-gate { padding: 24px 14px; }
  .auth-card { padding: 25px 21px; border-radius: 18px; }
  .auth-heading h1 { font-size: 26px; }
  .toast { right: 12px; bottom: calc(82px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Product polish: clearer hierarchy, touch targets and quick-start actions */
:root {
  --bg: #f6f7f4;
  --surface: #ffffff;
  --ink: #202923;
  --green: #286344;
  --green-deep: #1e4c33;
  --radius: 20px;
  --shadow: 0 8px 28px rgba(28, 49, 35, .045);
}
body { letter-spacing: -.005em; }
button { -webkit-tap-highlight-color: transparent; }
.button { min-height: 44px; border-radius: 12px; }
.button-small { min-height: 38px; }
.button:focus-visible, .nav-item:focus-visible, .mobile-nav-item:focus-visible, .quick-action:focus-visible { outline: 3px solid rgba(75,132,94,.32); outline-offset: 3px; }
.card, .stat-card { box-shadow: var(--shadow); }
.card { transition: border-color .18s ease, box-shadow .18s ease; }
.card:hover { border-color: #dfe7dd; }
.hero-panel { background: linear-gradient(118deg, #eaf3e9 0%, #f3f6ee 55%, #f6f2e8 100%); }
.hero-panel::after { opacity: .8; }
.hero-copy h1 { letter-spacing: -.065em; }
.page-heading h1 { letter-spacing: -.06em; }
.page-subtitle { color: #748177; }
.quick-start { margin: 0 0 26px; }
.quick-start-heading { margin-bottom: 14px; }
.quick-start-heading .eyebrow { margin-bottom: 7px; }
.quick-start-heading h2 { margin-bottom: 5px; font-size: 20px; }
.quick-start-heading p:not(.eyebrow) { margin: 0; color: #87928a; font-size: 12px; line-height: 1.6; }
.quick-action-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.quick-action { min-width: 0; display: flex; align-items: center; gap: 12px; padding: 16px 15px; border: 1px solid #e5eae3; border-radius: 16px; color: var(--ink); background: #fff; text-align: left; box-shadow: 0 4px 16px rgba(28,49,35,.025); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.quick-action:hover { transform: translateY(-2px); border-color: #cbdaca; box-shadow: 0 10px 24px rgba(28,49,35,.07); }
.quick-action-icon { width: 40px; height: 40px; flex: 0 0 40px; display: grid; place-items: center; border-radius: 13px; font-size: 18px; font-weight: 700; }
.quick-action-icon.green { color: #2d6b46; background: #eaf3e9; }
.quick-action-icon.lilac { color: #76679a; background: #f0edfa; }
.quick-action-icon.sand { color: #967343; background: #f7f0e4; }
.quick-action-copy { min-width: 0; flex: 1; }
.quick-action-copy strong { display: block; font-size: 12px; line-height: 1.4; font-weight: 720; }
.quick-action-copy small { display: block; margin-top: 4px; color: #87928a; font-size: 10px; line-height: 1.45; }
.quick-action-arrow { flex: 0 0 auto; color: #93a095; font-size: 16px; }
/* Make inputs comfortable on touch devices and prevent iOS zoom on focus. */
.field input, .field textarea, .field select, .composer textarea { min-height: 44px; font-size: 14px; border-radius: 12px; }
.field label { font-size: 12px; }
.field textarea, .composer textarea { line-height: 1.6; }
.goal-check { width: 23px; height: 23px; flex-basis: 23px; border-radius: 8px; }
.nav-item { min-height: 44px; border-radius: 12px; }
.mobile-nav-item { min-height: 48px; }
.mobile-nav-item span { font-size: 21px; }
.mobile-nav-item small { font-size: 10px; }
.chat-messages { scroll-behavior: smooth; }
.chat-empty p, .message-bubble { font-size: 13px; }
.suggestion-chip { min-height: 36px; font-size: 11px; }
.empty-state p { font-size: 12px; }
.list-card-main strong, .goal-copy strong, .routine-copy strong { font-size: 13px; }
.list-card-main p, .goal-copy p, .routine-copy span { font-size: 11px; }
.status-tag { font-size: 10px; }
.toast { font-size: 12px; padding: 13px 16px; }
@media (max-width: 1050px) {
  .quick-action-grid { grid-template-columns: 1fr; }
  .quick-action { padding: 14px; }
  .quick-action-copy strong { font-size: 13px; }
}
@media (max-width: 800px) {
  .topbar { background: rgba(255,255,255,.88); backdrop-filter: blur(14px); }
  .main-view { padding-top: 26px; }
  .quick-start { margin-bottom: 20px; }
}
@media (max-width: 620px) {
  .main-view { padding: 20px 14px calc(112px + env(safe-area-inset-bottom)); }
  .hero-panel { padding: 24px 20px; }
  .hero-copy h1 { font-size: clamp(29px, 8vw, 35px); }
  .hero-copy p { font-size: 13px; }
  .hero-actions { flex-direction: column; }
  .hero-actions .button { width: 100%; }
  .stats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
  .stat-card { min-height: 110px; padding: 12px 10px; }
  .stat-label { font-size: 10px; }
  .quick-start-heading h2 { font-size: 19px; }
  .quick-action-grid { gap: 9px; }
  .quick-action { min-height: 76px; gap: 11px; padding: 13px 12px; }
  .quick-action-icon { width: 38px; height: 38px; flex-basis: 38px; }
  .quick-action-copy strong { font-size: 12px; }
  .quick-action-copy small { font-size: 11px; }
  .card { padding: 17px; }
  .card-header { gap: 10px; }
  .card-header h2 { font-size: 16px; }
  .form-actions { margin-top: 20px; }
  .form-actions .button { min-height: 46px; }
  .composer-bottom { flex-direction: column; }
  .composer-note { max-width: none; font-size: 10px; }
  .composer-bottom .button { width: 100%; }
  .mobile-nav { padding-left: 6px; padding-right: 6px; }
}

/* Northstar 2.0: lower cognitive load, progressive disclosure, and mobile-first daily flow */
:root {
  --bg: #f6f8f5;
  --surface: #ffffff;
  --ink: #1d2b22;
  --green: #286344;
  --green-deep: #1b4b32;
  --line: #e7ede7;
  --shadow: 0 10px 34px rgba(27, 55, 36, .045);
}
.main-view { width: 100%; max-width: 1320px; margin: 0 auto; }
.today-welcome { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 0 0 21px; }
.today-welcome .eyebrow { margin: 0 0 8px; color: #829187; font-size: 9px; font-weight: 800; letter-spacing: .14em; }
.today-welcome h1 { margin: 0; color: #1d2b22; font-size: clamp(26px, 3vw, 34px); line-height: 1.12; letter-spacing: -.06em; font-weight: 760; }
.today-welcome p:not(.eyebrow) { margin: 7px 0 0; color: #7f8d82; font-size: 13px; line-height: 1.5; }
.today-date { display: inline-flex; align-items: center; gap: 9px; padding: 9px 12px; border: 1px solid #e3eae2; border-radius: 999px; color: #69786d; background: rgba(255,255,255,.75); font-size: 11px; white-space: nowrap; }
.today-layout { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(330px, .82fr); gap: 16px; align-items: stretch; }
.next-step-card { min-width: 0; padding: 26px 27px; display: flex; flex-direction: column; border: 1px solid #dce9de; border-radius: 22px; background: linear-gradient(145deg, #edf5ed 0%, #f7f9f3 75%, #f7f5ed 100%); box-shadow: var(--shadow); }
.next-step-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.today-kicker { display: inline-flex; align-items: center; gap: 8px; color: #58755e; font-size: 9px; font-weight: 800; letter-spacing: .12em; }
.sparkle-dot { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; color: #fff; background: #3d7250; font-size: 13px; }
.fit-tag { color: #69816c; font-size: 9px; font-weight: 650; }
.next-step-card h2 { max-width: 580px; margin: 22px 0 8px; color: #203c2a; font-size: clamp(23px, 2.6vw, 31px); line-height: 1.15; letter-spacing: -.055em; }
.next-step-detail { max-width: 610px; margin: 0; color: #66786b; font-size: 13px; line-height: 1.65; }
.action-preview { display: flex; align-items: flex-start; gap: 11px; margin: 22px 0 18px; padding: 14px 15px; border: 1px solid rgba(204,220,203,.9); border-radius: 13px; color: #3f5946; background: rgba(255,255,255,.64); font-size: 12px; line-height: 1.6; }
.action-preview-icon { width: 25px; height: 25px; flex: 0 0 25px; display: grid; place-items: center; border-radius: 8px; color: #356449; background: #e2eee1; font-size: 14px; font-weight: 800; }
.next-step-bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; }
.reason-note { color: #829185; font-size: 10px; line-height: 1.4; }
.next-step-bottom .button { min-height: 44px; padding: 0 17px; white-space: nowrap; }
.pace-card { padding: 22px; }
.pace-card .card-header { margin-bottom: 19px; }
.pace-card .card-header h2 { font-size: 16px; }
.pace-card .card-header p { margin-top: 4px; font-size: 11px; }
.pace-status { padding: 5px 8px; border-radius: 99px; color: #6f8272; background: #f1f5ef; font-size: 9px; white-space: nowrap; }
.choice-group { margin-top: 16px; }
.choice-label { margin-bottom: 8px; color: #526258; font-size: 11px; font-weight: 720; }
.choice-row { display: grid; gap: 7px; }
.energy-choices { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.choice-button { min-width: 0; min-height: 58px; padding: 8px 6px; display: flex; flex-direction: column; justify-content: center; gap: 4px; border: 1px solid #e5ebe4; border-radius: 11px; color: #66746a; background: #fff; text-align: center; transition: border-color .16s, background .16s, transform .16s; }
.choice-button strong { font-size: 11px; font-weight: 750; }
.choice-button small { color: #96a097; font-size: 9px; line-height: 1.25; }
.choice-button.selected, .time-choice.selected { border-color: #a8c3a7; color: #275c3b; background: #eff6ed; box-shadow: inset 0 0 0 1px rgba(87,130,87,.08); }
.time-choices { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.time-choice { min-height: 39px; padding: 0 5px; border: 1px solid #e5ebe4; border-radius: 10px; color: #69776d; background: #fff; font-size: 10px; font-weight: 700; }
.choice-button:hover, .time-choice:hover { border-color: #bfd2bd; }
.focus-select { width: 100%; min-height: 43px; padding: 0 12px; border: 1px solid #e4eae3; border-radius: 11px; color: #536359; background: #fff; font-size: 11px; }
.pace-save { margin-top: 18px; min-height: 44px; font-size: 11px; }
.pace-save:disabled { opacity: .65; cursor: wait; }
.microcopy { margin: 9px 0 0; color: #9aa49b; font-size: 9px; line-height: 1.5; text-align: center; }
.today-lower-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-top: 17px; }
.today-list-card, .today-goal-card { padding: 21px 22px; }
.today-list-card .card-header, .today-goal-card .card-header { margin-bottom: 11px; }
.today-list-card .card-header h2, .today-goal-card .card-header h2 { font-size: 15px; }
.today-routine-list, .today-goal-list { display: grid; }
.today-routine { min-width: 0; display: flex; align-items: center; gap: 11px; padding: 12px 0; border-top: 1px solid #f0f3ef; }
.today-routine:first-child { border-top: 0; }
.today-routine .routine-time { min-width: 43px; font-size: 11px; }
.today-routine .routine-copy strong { font-size: 11px; }
.today-routine .routine-copy span { max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
.today-goal { display: flex; align-items: flex-start; gap: 10px; padding: 12px 0; border-top: 1px solid #f0f3ef; }
.today-goal:first-child { border-top: 0; }
.goal-bullet { width: 8px; height: 8px; flex: 0 0 8px; margin-top: 5px; border-radius: 50%; background: #88a887; box-shadow: 0 0 0 4px #f0f5ef; }
.today-goal .goal-copy { flex: 1; }
.today-goal .goal-copy strong { font-size: 11px; }
.today-goal .goal-copy p { font-size: 10px; line-height: 1.5; }
.today-goal .goal-check { margin: 0; width: 25px; height: 25px; flex-basis: 25px; }
.inline-empty { display: flex; align-items: center; gap: 11px; padding: 12px 0 3px; }
.inline-empty-icon { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; border-radius: 11px; color: #708875; background: #f0f5ef; font-size: 17px; }
.inline-empty > div { flex: 1; min-width: 0; }
.inline-empty strong { display: block; color: #46564b; font-size: 11px; }
.inline-empty p { margin: 4px 0 0; color: #8a978d; font-size: 10px; line-height: 1.4; }
.inline-empty .text-link { font-size: 10px; }
.help-strip { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin: 17px 0 0; padding: 17px 20px; border: 1px solid #e7ece6; border-radius: 16px; background: rgba(255,255,255,.72); }
.help-strip-copy { display: flex; align-items: center; gap: 11px; min-width: 200px; }
.help-spark { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 11px; color: #648069; background: #eff4ed; font-size: 15px; }
.help-strip-copy strong { display: block; color: #445449; font-size: 11px; }
.help-strip-copy p { margin: 4px 0 0; color: #929d94; font-size: 10px; }
.help-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 6px; }
.help-action { min-height: 36px; padding: 0 11px; border: 1px solid #e7ece6; border-radius: 999px; color: #5e7063; background: #fff; font-size: 10px; white-space: nowrap; }
.help-action span { margin-left: 5px; color: #90a092; }
.help-action:hover { border-color: #cbdaca; color: #285c3b; background: #f8fbf7; }
/* Mobile: put the daily decision first, preserve thumb reach and protect the home indicator. */
@media (max-width: 980px) {
  .today-layout { grid-template-columns: minmax(0, 1fr) minmax(300px, .85fr); }
  .next-step-card { padding: 23px; }
}
@media (max-width: 800px) {
  .today-layout { grid-template-columns: 1fr; }
  .today-lower-grid { grid-template-columns: 1fr 1fr; }
  .help-strip { align-items: flex-start; flex-direction: column; }
  .help-actions { justify-content: flex-start; }
  .mobile-nav { padding: 7px 8px calc(9px + env(safe-area-inset-bottom)); min-height: calc(66px + env(safe-area-inset-bottom)); }
  .mobile-nav-item { min-height: 49px; gap: 4px; }
  .mobile-nav-item small { font-size: 10px; letter-spacing: 0; }
  .topbar { min-height: 62px; }
}
@media (max-width: 620px) {
  .main-view { padding: 17px 13px calc(116px + env(safe-area-inset-bottom)); }
  .today-welcome { align-items: flex-start; flex-direction: column; gap: 11px; margin-bottom: 15px; }
  .today-welcome h1 { font-size: 27px; }
  .today-welcome p:not(.eyebrow) { margin-top: 5px; font-size: 12px; }
  .today-date { padding: 7px 10px; font-size: 10px; }
  .today-layout { gap: 11px; }
  .next-step-card { padding: 19px 17px; border-radius: 18px; }
  .next-step-top { align-items: flex-start; }
  .today-kicker { font-size: 8px; }
  .fit-tag { padding-top: 5px; font-size: 8px; }
  .next-step-card h2 { margin-top: 17px; font-size: 25px; }
  .next-step-detail { font-size: 12px; }
  .action-preview { margin: 16px 0 15px; padding: 12px; font-size: 11px; }
  .next-step-bottom { align-items: stretch; flex-direction: column; gap: 10px; }
  .reason-note { font-size: 9px; }
  .next-step-bottom .button { width: 100%; min-height: 47px; }
  .pace-card { padding: 17px; border-radius: 17px; }
  .pace-card .card-header { margin-bottom: 13px; }
  .choice-group { margin-top: 13px; }
  .choice-label { font-size: 10px; }
  .choice-button { min-height: 55px; }
  .time-choice { min-height: 42px; }
  .today-lower-grid { grid-template-columns: 1fr; gap: 11px; margin-top: 11px; }
  .today-list-card, .today-goal-card { padding: 17px; border-radius: 16px; }
  .today-routine, .today-goal { padding: 10px 0; }
  .help-strip { gap: 12px; margin-top: 11px; padding: 15px; }
  .help-actions { display: grid; grid-template-columns: 1fr; width: 100%; }
  .help-action { width: 100%; min-height: 42px; display: flex; align-items: center; justify-content: space-between; padding: 0 13px; text-align: left; }
/* Mobile layout */
}
/* Mobile Navigation Bar */
.mobile-nav {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 10px;
  z-index: 1000;
  display: none;
  grid-template-columns: repeat(6, 1fr);
  gap: 3px;
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  background: rgba(20, 29, 23, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  box-sizing: border-box;
}

.mobile-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 4px 1px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #a6b7a9;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.18s ease;
  overflow: hidden;
}

.mobile-nav-item span {
  font-size: 17px;
  line-height: 1.1;
}

.mobile-nav-item small {
  font-size: 10px;
  font-weight: 600;
  margin-top: 2px;
  white-space: nowrap;
  letter-spacing: -0.01em;
}

.mobile-nav-item.active {
  background: color-mix(in srgb, var(--accent, #83b58d) 20%, transparent);
  color: #eafbee;
  font-weight: 700;
}

.mobile-nav-item:hover {
  color: #fff;
}

html[data-theme="light"] .mobile-nav {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}

html[data-theme="light"] .mobile-nav-item {
  color: #556658;
}

html[data-theme="light"] .mobile-nav-item.active {
  background: rgba(65, 117, 74, 0.12);
  color: #24582f;
}

@media (max-width: 900px) {
  .mobile-nav { display: grid; }
  .sidebar { display: none; }
  .main-column { margin-left: 0; width: 100%; }
}

@media (max-width: 480px) {
  .mobile-nav {
    left: 8px;
    right: 8px;
    bottom: 6px;
    padding: 4px 2px calc(4px + env(safe-area-inset-bottom));
    gap: 2px;
  }
  .mobile-nav-item {
    min-height: 44px;
    padding: 3px 0;
  }
  .mobile-nav-item span {
    font-size: 16px;
  }
  .mobile-nav-item small {
    font-size: 9px;
  }
}

@media (max-width: 360px) {
  .mobile-nav {
    left: 4px;
    right: 4px;
  }
  .mobile-nav-item small {
    display: none;
  }
  .mobile-nav-item span {
    font-size: 19px;
  }
}
.next-step-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.next-step-actions .button { min-height: 42px; }
@media (max-width: 620px) {
  .next-step-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .next-step-actions .button { min-height: 45px; padding: 0 9px; font-size: 10px; }
}
.routine-done-toggle { flex: 0 0 auto; min-width: 57px; min-height: 34px; padding: 0 9px; border: 1px solid #e2eae1; border-radius: 9px; color: #64776a; background: #fff; font-size: 9px; font-weight: 700; }
.routine-done-toggle:hover { border-color: #b9cfb7; color: #2e6542; }
.routine-done-toggle.done { border-color: #dceade; color: #4d7956; background: #edf5eb; }
.today-routine.is-done .routine-copy strong { color: #87968a; text-decoration: line-through; }
.today-routine.is-done .routine-marker { background: #aec3a9; box-shadow: 0 0 0 4px #f4f7f2; }
@media (max-width: 360px) { .routine-done-toggle { min-width: 51px; padding: 0 6px; } }


/* Theme control */
.theme-toggle { min-height: 36px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 11px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-2); background: var(--surface); font-size: 11px; font-weight: 650; transition: background .18s, border-color .18s, color .18s; }
.theme-toggle:hover { border-color: var(--line-dark); background: var(--surface-soft); }
.theme-toggle-icon { font-size: 15px; line-height: 1; }
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #111713;
  --surface: #19211c;
  --surface-soft: #202a23;
  --ink: #e8eee8;
  --ink-2: #bdc9bf;
  --muted: #8f9d92;
  --line: #2a382e;
  --line-dark: #3a4a3d;
  --green: #78a985;
  --green-deep: #a5c9a8;
  --green-soft: #24372a;
  --lime: #34432e;
  --sand: #393326;
  --shadow: 0 14px 40px rgba(0,0,0,.22);
}
html[data-theme="dark"] body,
html[data-theme="dark"] .app-frame { background: var(--bg); color: var(--ink); }
html[data-theme="dark"] .sidebar,
html[data-theme="dark"] .topbar,
html[data-theme="dark"] .card,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .auth-card { background: var(--surface); border-color: var(--line); }
html[data-theme="dark"] .topbar { background: rgba(25,33,28,.92); }
html[data-theme="dark"] .nav-item { color: #aab9ad; }
html[data-theme="dark"] .nav-item:hover,
html[data-theme="dark"] .nav-item.active { color: #c5e2c8; background: #26392b; }
html[data-theme="dark"] .nav-pill { color: #b5d5b4; background: #304432; }
html[data-theme="dark"] .sidebar-note,
html[data-theme="dark"] .coach-cta,
html[data-theme="dark"] .insight-card,
html[data-theme="dark"] .empty-state,
html[data-theme="dark"] .help-strip { color: var(--ink); border-color: var(--line); background: var(--surface-soft); }
html[data-theme="dark"] .hero-panel { border-color: #34483a; background: linear-gradient(115deg,#24382a,#27332b 54%,#343328); }
html[data-theme="dark"] .hero-copy .eyebrow,
html[data-theme="dark"] .hero-copy p { color: #b4c9b5; }
html[data-theme="dark"] .hero-copy h1 { color: #f0f5ef; }
html[data-theme="dark"] .button-secondary,
html[data-theme="dark"] .help-action,
html[data-theme="dark"] .routine-done-toggle { color: #c4d8c6; border-color: var(--line-dark); background: #202b23; }
html[data-theme="dark"] .button-secondary:hover,
html[data-theme="dark"] .help-action:hover { background: #2a392e; }
html[data-theme="dark"] .button-quiet { color: #aab9ad; }
html[data-theme="dark"] .button-danger { color: #e6aaa3; border-color: #503a36; background: #342523; }
html[data-theme="dark"] .stat-icon,
html[data-theme="dark"] .empty-icon,
html[data-theme="dark"] .context-chip { color: #b7d6b8; background: #293b2c; }
html[data-theme="dark"] .stat-icon.sand { color: #d7bc91; background: #3b3428; }
html[data-theme="dark"] .stat-icon.blue { color: #b3d0dc; background: #293940; }
html[data-theme="dark"] .avatar { color: #d2ead2; background: #304632; }
html[data-theme="dark"] .field input,
html[data-theme="dark"] .field textarea,
html[data-theme="dark"] .field select,
html[data-theme="dark"] .composer textarea { color: var(--ink); border-color: var(--line-dark); background: #141c17; }
html[data-theme="dark"] .field input:focus,
html[data-theme="dark"] .field textarea:focus,
html[data-theme="dark"] .field select:focus,
html[data-theme="dark"] .composer textarea:focus { background: #19241d; }
html[data-theme="dark"] .chat-messages { background: #141c17; }
html[data-theme="dark"] .chat-card,
html[data-theme="dark"] .chat-top { border-color: var(--line); background: var(--surface); }
html[data-theme="dark"] .chat-message:not(.user) .message-bubble { color: var(--ink); background: #243128; }
html[data-theme="dark"] .chat-message.user .message-bubble { color: #f5faf5; background: #355941; }
html[data-theme="dark"] .goal-row,
html[data-theme="dark"] .routine-row { border-color: #29362d; }
html[data-theme="dark"] .goal-check { border-color: #526354; background: #1b261e; }
html[data-theme="dark"] .goal-check.done { background: var(--green); }
html[data-theme="dark"] .routine-marker { box-shadow: 0 0 0 4px #29362d; }
html[data-theme="dark"] .ai-status { color: #ddc69d; border-color: #514631; background: #302b20; }
/* Mobile overrides */
html[data-theme="dark"] .theme-toggle { color: #d4e2d5; border-color: var(--line-dark); background: #202b23; }
html[data-theme="dark"] .auth-gate { background: radial-gradient(ellipse at 50% 0%,#26382a 0%,#111713 65%); }
html[data-theme="dark"] .auth-footnote,
html[data-theme="dark"] .auth-bottom,
html[data-theme="dark"] .muted { color: #9baa9e; }
html[data-theme="dark"] .setup-notice { color: var(--ink); border-color: var(--line); background: var(--surface-soft); }
html[data-theme="dark"] ::placeholder { color: #748278; opacity: 1; }
@media (max-width: 620px) {
  .theme-toggle { width: 37px; min-width: 37px; padding: 0; border-radius: 12px; }
  .theme-toggle-label { display: none; }
  .topbar-actions { gap: 9px; }
}

/* Native account access and management */
.auth-native-form { display: grid; gap: 15px; }
.auth-native-form .field { gap: 8px; }
.auth-native-form .field label { font-size: 12px; }
.auth-native-form .field input { min-height: 46px; font-size: 14px; }
.auth-native-form .auth-submit { min-height: 48px; margin-top: 2px; }
.auth-message { min-height: 0; margin: 0; font-size: 12px; line-height: 1.5; }
.auth-message:empty { display: none; }
.auth-message.is-error { padding: 10px 12px; border: 1px solid #6a3938; border-radius: 9px; color: #f0b4ad; background: rgba(122,49,46,.16); }
.auth-message.is-success { padding: 10px 12px; border: 1px solid #315b40; border-radius: 9px; color: #aad6b1; background: rgba(49,91,64,.16); }
.account-card { display: grid; gap: 18px; }
.account-summary { display: flex; align-items: center; gap: 12px; padding: 13px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface-soft); }
.account-summary-icon { width: 38px; height: 38px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 12px; color: var(--green-deep); background: var(--green-soft); font-weight: 800; }
.account-summary strong, .account-summary span { display: block; overflow-wrap: anywhere; }
.account-summary strong { font-size: 12px; }
.account-summary span { margin-top: 4px; color: var(--muted); font-size: 10px; }
.account-form { display: grid; gap: 11px; padding-top: 17px; border-top: 1px solid var(--line); }
.account-form h3 { margin: 0; }
.account-form .form-actions { justify-content: flex-start; margin-top: 2px; }
.account-form .field input, .danger-zone .field input { min-height: 43px; }
.account-actions { padding-top: 4px; }
.danger-zone { display: grid; gap: 11px; padding: 16px; border: 1px solid #704541; border-radius: 13px; background: rgba(116,52,46,.09); }
.danger-zone h3 { margin: 0; color: #e5a9a2; }
.danger-zone p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.6; }
.danger-zone .button { width: 100%; min-height: 44px; }
html[data-theme="dark"] .account-summary { border-color: var(--line); background: var(--surface-soft); }
html[data-theme="dark"] .account-summary-icon { color: #c4e2c6; background: #293b2c; }
html[data-theme="dark"] .danger-zone { border-color: #64403d; background: rgba(116,52,46,.12); }
html[data-theme="dark"] .danger-zone h3 { color: #e8aaa2; }
html[data-theme="light"] .auth-message.is-error { color: #9c3e38; border-color: #efcfcb; background: #fff5f3; }
html[data-theme="light"] .auth-message.is-success { color: #28613a; border-color: #cfe5d2; background: #f2faf3; }
html[data-theme="light"] .danger-zone { border-color: #efcfcb; background: #fff8f7; }
html[data-theme="light"] .danger-zone h3 { color: #a34c45; }
@media (max-width: 620px) {
  .auth-card { max-width: 460px; }
  .account-card { padding: 16px; }
  .account-form .form-actions .button { width: 100%; }
}

/* Northstar V8 — personal workspace, onboarding and conversation redesign */
:root {
  --bg: #101612;
  --surface: #171f1a;
  --surface-soft: #1e2921;
  --ink: #edf4ee;
  --ink-2: #c6d2c8;
  --muted: #91a095;
  --line: #2d3b31;
  --line-dark: #3a4a3d;
  --green: #83b58d;
  --green-deep: #b9d8bc;
  --green-soft: #203427;
  --shadow: 0 20px 60px rgba(0,0,0,.2);
}
html, body { min-height: 100%; background: var(--bg); color: var(--ink); }
body { background: radial-gradient(ellipse at 80% -20%, rgba(93,145,103,.13), transparent 38%), var(--bg); font-size: 14px; }
.app-shell { background: transparent; }
.sidebar { background: rgba(18,26,21,.96); border-right-color: #29382d; }
.brand-mark { background: linear-gradient(145deg,#b9dbb9,#78a981); color: #122017; box-shadow: 0 8px 24px rgba(108,167,117,.2); }
.nav-item { color: #a6b4a8; }
.nav-item:hover { color: #f1f6f1; background: #1c2a20; }
.nav-item.active { color: #d1e9d3; background: linear-gradient(100deg,#293f2e,#203328); }
.sidebar-note { border-color: #33463a; background: linear-gradient(145deg,#203126,#19251d); }
.sidebar-note strong { color: #e4eee5; }
.sidebar-note p { color: #9ba99e; }
.topbar { border-color: #29382e; background: rgba(15,22,18,.82); backdrop-filter: blur(18px); }
.topbar-context { color: #a8b6aa; }
.topbar-caption { color: #809184; }
.avatar { overflow: hidden; border: 1px solid #3b5540; color: #d9edd9; background: #2a4230; }
.header-avatar-image { width: 100%; height: 100%; display: grid; place-items: center; object-fit: cover; font-size: 17px; }
.main-view { max-width: 1480px; padding-top: 42px; }
h1, h2, h3 { color: #eef5ef; }
.eyebrow { color: #8da993; }
.page-subtitle { color: #9eaea1; }
.card, .stat-card { color: var(--ink); background: linear-gradient(150deg,#19231c,#151e18); border-color: #2d3c31; box-shadow: 0 12px 35px rgba(0,0,0,.12); }
.card-header p { color: #9aa99d; }
.field label { color: #b4c2b6; }
.field input, .field textarea, .field select, .composer textarea { color: #edf5ee; background: #111a14; border-color: #354639; }
.field input:focus, .field textarea:focus, .field select:focus, .composer textarea:focus { background: #121c15; border-color: var(--green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #83b58d) 19%, transparent); }
.field-hint, .muted { color: #91a095; }
.button-primary { color: #102017; background: linear-gradient(135deg,var(--accent, #a8d0aa),color-mix(in srgb,var(--accent, #a8d0aa) 74%,#4b8057)); }
.button-primary:hover { color: #102017; filter: brightness(1.08); }
.button-secondary { color: #d6e6d8; background: #26372b; border-color: #415845; }
.button-secondary:hover { color: #f4faf4; background: #304633; }
.button-quiet { color: #aebcaf; }
.context-chip { color: #c1dfc4; background: #223629; }
.status-tag { color: #c3dfc6; background: #25392a; }
.goal-row, .routine-row, .list-card { border-color: #2b392f; }
.goal-check { border-color: #526455; background: #1e2b22; }
.goal-check.done { background: var(--accent, #83b58d); }
.routine-marker { box-shadow: 0 0 0 4px #29382d; }
.text-link { color: var(--accent, #a8d0aa); }
.empty-state { border-color: #35443a; background: #19231c; }
.empty-state p { color: #9ba99e; }
.empty-icon { color: #c0dabe; background: #263b2b; }
.theme-toggle { color: #d4e4d6; border-color: #34463a; background: #202c23; }
/* Mobile overrides 2 */
.toast { color: #102017; background: #b2d8b5; }

/* Chat experience */
.coach-layout { width: 100%; max-width: 1080px; margin: 0 auto; }
.coach-page-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 24px; }
.coach-page-heading h1 { margin-bottom: 9px; font-size: clamp(31px,3.8vw,44px); letter-spacing: -.065em; }
.coach-page-heading .page-subtitle { max-width: 610px; }
.coach-heading-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.coach-heading-actions .button { min-height: 40px; }
.ai-status { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; padding: 13px 16px; border-color: #625238; border-radius: 14px; color: #e6cfaa; background: #2a271e; font-size: 12px; }
.ai-status strong { color: #f0d9b4; white-space: nowrap; }
.chat-workspace { overflow: hidden; border: 1px solid #35483a; border-radius: 24px; background: #141d17; box-shadow: 0 24px 70px rgba(0,0,0,.22); }
.chat-top { min-height: 76px; padding: 18px 24px; border-bottom: 1px solid #29392e; background: linear-gradient(115deg,#1a271e,#17221a); }
.chat-top-left { gap: 13px; }
.chat-avatar { width: 42px; height: 42px; border: 1px solid #527157; border-radius: 15px; color: #15251a; background: linear-gradient(145deg,#c1dfbd,#7eaf85); font-size: 20px; box-shadow: 0 7px 18px rgba(103,153,110,.2); }
.chat-top-left strong { color: #edf5ee; font-size: 14px; letter-spacing: -.02em; }
.chat-top-left small { margin-top: 5px; color: #9cab9e; font-size: 11px; }
.coach-online-dot { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: #83c28d; box-shadow: 0 0 0 3px rgba(131,194,141,.12); }
.chat-top-right { display: flex; align-items: center; gap: 15px; color: #92a296; font-size: 10px; }
.chat-context-label { color: #bedabd; }
.chat-privacy { padding: 6px 9px; border: 1px solid #34493a; border-radius: 8px; }
.chat-context-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 11px 25px; border-bottom: 1px solid #29382e; color: #91a295; background: #17221a; font-size: 10px; }
.context-spark { color: var(--accent, #a8d0aa); font-size: 14px; }
.chat-messages { min-height: 420px; max-height: min(62vh, 720px); overflow-y: auto; display: flex; flex-direction: column; gap: 27px; padding: 34px clamp(20px,5vw,66px); background: radial-gradient(ellipse at 48% 0%,rgba(85,130,91,.07),transparent 42%),#131c16; scrollbar-color: #3d5142 transparent; scrollbar-width: thin; }
.chat-message { display: flex; align-items: flex-start; gap: 13px; width: 100%; max-width: 850px; }
.chat-message.user { align-self: flex-end; flex-direction: row-reverse; }
.message-avatar { width: 36px; height: 36px; flex: 0 0 36px; display: grid; place-items: center; overflow: hidden; margin-top: 2px; border: 1px solid #35483a; border-radius: 13px; color: #c6e0c8; background: #223529; font-size: 16px; }
.message-avatar-image { width: 100%; height: 100%; display: grid; place-items: center; object-fit: cover; font-size: 15px; }
.chat-message.user .message-avatar { border-color: #526a55; color: #e4f2e5; background: #354d39; }
.message-content { min-width: 0; max-width: min(86%,760px); }
.chat-message.user .message-content { display: flex; flex-direction: column; align-items: flex-end; }
.message-meta { display: flex; align-items: center; gap: 9px; margin: 0 0 8px 3px; color: #95a598; font-size: 10px; }
.message-meta strong { color: #d5e2d7; font-size: 11px; font-weight: 700; }
.message-meta time { color: #738477; font-variant-numeric: tabular-nums; }
.chat-message.user .message-meta { margin-right: 3px; }
.message-bubble { padding: 17px 19px; border: 1px solid #304034; border-radius: 5px 19px 19px 19px; color: #dbe6dc; background: linear-gradient(145deg,#1d2a21,#1a261e); font-size: 14px; line-height: 1.8; overflow-wrap: anywhere; box-shadow: 0 8px 24px rgba(0,0,0,.1); }
.chat-message.user .message-bubble { border-color: #436348; border-radius: 19px 5px 19px 19px; color: #eff8ef; background: linear-gradient(145deg,#314f37,#2b4431); }
.message-richtext p { margin: 0 0 12px; }
.message-richtext p:last-child { margin-bottom: 0; }
.message-richtext h2, .message-richtext h3, .message-richtext h4 { margin: 18px 0 8px; color: #e6f1e7; font-size: 15px; letter-spacing: -.02em; }
.message-richtext h2:first-child, .message-richtext h3:first-child { margin-top: 0; }
.message-richtext ul, .message-richtext ol { margin: 8px 0 14px; padding-left: 23px; }
.message-richtext li { margin: 5px 0; padding-left: 3px; }
.message-richtext li::marker { color: var(--accent, #a8d0aa); }
.message-richtext strong { color: #f0f6f0; font-weight: 700; }
.message-richtext code { padding: 2px 6px; border: 1px solid #3c5041; border-radius: 6px; color: #c5e2c8; background: #101913; font: 12px ui-monospace,SFMono-Regular,Consolas,monospace; }
.message-richtext hr { margin: 16px 0; border: 0; border-top: 1px solid #3a4a3d; }
.message-attachment { width: min(100%, 350px); margin: 12px 0 2px; overflow: hidden; border: 1px solid #526d56; border-radius: 13px; background: rgba(7,18,10,.3); }
.message-attachment img { display: block; width: 100%; max-height: 280px; object-fit: contain; background: #0e160f; }
.message-attachment figcaption { padding: 7px 10px; color: #b1c6b4; font-size: 10px; }
.message-tools { margin: 6px 0 0 3px; }
.message-tool { padding: 4px 7px; border: 0; border-radius: 6px; color: #829487; background: transparent; font-size: 10px; }
.message-tool:hover { color: #d8e8d9; background: #26382b; }
.chat-welcome { width: 100%; max-width: 650px; margin: auto; padding: 12px 0 20px; text-align: center; }
.welcome-orbit { position: relative; width: 94px; height: 94px; display: grid; place-items: center; margin: 0 auto 20px; border: 1px solid #354d3a; border-radius: 50%; background: radial-gradient(circle,#293e2d 0 28%,rgba(40,62,45,.32) 29% 58%,transparent 59%); box-shadow: 0 0 0 13px rgba(101,151,107,.035), 0 0 42px rgba(94,150,101,.09); }
.welcome-star { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid #628269; border-radius: 15px; color: #17261a; background: linear-gradient(145deg,#cee6c9,#80ad87); font-size: 23px; box-shadow: 0 7px 20px rgba(106,165,114,.2); }
.orbit-dot { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #b4d7b5; box-shadow: 0 0 13px rgba(170,216,174,.5); }
.dot-a { top: 4px; left: 20px; }.dot-b { right: 0; top: 42px; }.dot-c { bottom: 7px; left: 8px; }
.chat-welcome .eyebrow { margin-bottom: 10px; }
.chat-welcome h2 { margin-bottom: 9px; color: #eef5ef; font-size: clamp(25px,3vw,32px); letter-spacing: -.045em; }
.chat-welcome > p:not(.eyebrow) { max-width: 500px; margin: 0 auto; color: #9aab9e; font-size: 13px; line-height: 1.75; }
.starter-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin: 28px auto 0; text-align: left; }
.starter-card { min-width: 0; min-height: 76px; display: flex; align-items: center; gap: 12px; padding: 13px 14px; border: 1px solid #344638; border-radius: 15px; color: #e5eee6; background: linear-gradient(145deg,#1c2a20,#18241c); text-align: left; transition: transform .18s,border-color .18s,background .18s; }
.starter-card:hover { transform: translateY(-2px); border-color: #628269; background: #203126; }
.starter-card-icon { width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center; border-radius: 12px; color: #cce3cd; background: #2a4030; font-size: 18px; }
.starter-icon-1 { color: #d9c7a5; background: #403626; }.starter-icon-2 { color: #c2d8ed; background: #263b48; }.starter-icon-3 { color: #d8c9e9; background: #382e48; }
.starter-card-copy { min-width: 0; flex: 1; }
.starter-card-copy strong, .starter-card-copy small { display: block; }
.starter-card-copy strong { font-size: 12px; font-weight: 700; }
.starter-card-copy small { margin-top: 4px; color: #8f9f93; font-size: 10px; line-height: 1.4; }
.starter-arrow { color: #91b896; font-size: 14px; }
.composer { padding: 16px 20px 15px; border-top: 1px solid #2e3d32; background: linear-gradient(180deg,#19241c,#151e18); }
.composer-input-row { display: flex; align-items: flex-end; gap: 10px; min-height: 58px; padding: 8px; border: 1px solid #425846; border-radius: 18px; background: #101a13; box-shadow: inset 0 1px 2px rgba(0,0,0,.14),0 7px 22px rgba(0,0,0,.12); transition: border-color .18s,box-shadow .18s; }
.composer-input-row:focus-within { border-color: var(--accent, #91bf97); box-shadow: 0 0 0 3px color-mix(in srgb,var(--accent, #91bf97) 13%,transparent); }
.composer textarea { min-height: 42px; max-height: 190px; flex: 1; width: 100%; padding: 10px 2px; border: 0; outline: 0; resize: none; color: #eff6f0; background: transparent; font-size: 14px; line-height: 1.6; box-shadow: none; }
.composer textarea:focus { border: 0; outline: 0; background: transparent; box-shadow: none; }
.composer textarea::placeholder { color: #7e8f82; }
.attach-button { width: 39px; height: 39px; flex: 0 0 39px; border: 1px solid #3d5141; border-radius: 12px; color: #b9d2bc; background: #223327; font-size: 23px; line-height: 1; }
.attach-button:hover { color: #f2faf3; border-color: #6a8a70; background: #2a4030; }
.send-button { width: 42px; height: 42px; flex: 0 0 42px; display: grid; place-items: center; border: 0; border-radius: 13px; color: #142318; background: linear-gradient(145deg,#bee0bb,#83b78b); box-shadow: 0 5px 15px rgba(103,161,110,.2); font-size: 23px; font-weight: 700; }
.send-button:hover { filter: brightness(1.08); transform: translateY(-1px); }
.send-button:disabled { opacity: .55; cursor: wait; }
.composer-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 3px 0; color: #788a7d; font-size: 9px; }
.composer-context { display: flex; align-items: center; gap: 7px; }
.mini-context-check { width: 14px; height: 14px; display: grid; place-items: center; border-radius: 50%; color: #9bcca0; background: #2b4230; font-size: 9px; }
.composer-divider { color: #526257; }
.composer-shortcut { color: #738477; }
.attachment-tray { display: flex; gap: 9px; padding: 0 0 12px; }
.attachment-preview { position: relative; width: 110px; padding: 6px; border: 1px solid #435946; border-radius: 12px; background: #1a2a1e; }
.attachment-preview img { display: block; width: 100%; height: 66px; border-radius: 7px; object-fit: cover; }
.attachment-preview span { display: block; overflow: hidden; padding: 5px 2px 0; color: #b9cbbd; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.attachment-preview button { position: absolute; top: 1px; right: 1px; width: 22px; height: 22px; border: 1px solid #637d66; border-radius: 50%; color: #fff; background: #253b2a; font-size: 15px; line-height: 1; }
.typing-bubble { display: flex; align-items: center; gap: 5px; width: max-content; padding: 15px 18px; border: 1px solid #35483a; border-radius: 5px 18px 18px 18px; background: #202e24; }
.typing-bubble span { width: 6px; height: 6px; border-radius: 50%; background: #a4c9a8; animation: northstarTyping 1.2s infinite ease-in-out; }
.typing-bubble span:nth-child(2) { animation-delay: .15s; }.typing-bubble span:nth-child(3) { animation-delay: .3s; }
@keyframes northstarTyping { 0%,60%,100% { opacity: .35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-5px); } }
.coach-footnote { margin: 13px 5px 0; color: #738477; font-size: 10px; text-align: center; }

/* First-run personalisation */
.onboarding-page { width: 100%; max-width: 1010px; margin: 0 auto; padding: 0 0 35px; }
.onboarding-rail { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.onboarding-rail-actions { display: flex; align-items: center; gap: 12px; }
.onboarding-brand { display: flex; align-items: center; gap: 10px; color: #eaf3eb; font-size: 15px; font-weight: 750; }
.onboarding-brand .brand-mark { width: 34px; height: 34px; }
.onboarding-step { color: #85978a; font-size: 9px; font-weight: 800; letter-spacing: .15em; }
.onboarding-intro { position: relative; overflow: hidden; min-height: 245px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; margin-bottom: 18px; padding: 35px 45px; border: 1px solid #3b5140; border-radius: 23px; background: radial-gradient(circle at 86% 45%,rgba(131,181,141,.18),transparent 25%),linear-gradient(110deg,#1d3022,#19271e 70%,#202d23); }
.onboarding-intro .eyebrow { margin-bottom: 11px; }
.onboarding-intro h1 { font-size: clamp(34px,4.5vw,51px); line-height: 1.04; letter-spacing: -.07em; }
.onboarding-intro h1 em { color: #a9d1ad; font-style: normal; }
.onboarding-intro > p:last-of-type { max-width: 490px; margin: 0; color: #a4b4a7; font-size: 13px; line-height: 1.7; }
.onboarding-art { position: absolute; right: 13%; top: 50%; width: 155px; height: 155px; display: grid; place-items: center; transform: translateY(-50%); }
.onboarding-art-core { z-index: 1; width: 67px; height: 67px; display: grid; place-items: center; border: 1px solid #7fae85; border-radius: 23px; color: #142319; background: linear-gradient(145deg,#c5e4c0,#7eaf86); box-shadow: 0 10px 35px rgba(114,173,120,.25); font-size: 33px; }
.art-orbit { position: absolute; border: 1px solid rgba(165,204,169,.26); border-radius: 50%; }
.orbit-one { inset: 7px; }.orbit-two { inset: -15px; border-style: dashed; opacity: .6; }
.art-star { position: absolute; color: #a9d1ad; }.star-one { right: 4px; top: 15px; }.star-two { bottom: 4px; left: 8px; }
.onboarding-form { display: grid; gap: 12px; }
.onboarding-section { display: grid; grid-template-columns: 54px minmax(0,1fr); gap: 10px; padding: 25px 28px; border: 1px solid #2f4034; border-radius: 19px; background: linear-gradient(150deg,#19231c,#151e18); }
.section-count { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid #3e5543; border-radius: 11px; color: #b3d4b7; background: #25382a; font-size: 11px; font-weight: 800; }
.onboarding-section-content { min-width: 0; }
.section-title { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 19px; }
.section-title h2 { margin-bottom: 5px; font-size: 17px; }
.section-title p { margin: 0; color: #91a095; font-size: 11px; }
.avatar-preview-line { display: flex; align-items: center; gap: 13px; margin: 0 0 14px; }
.avatar-preview-large { width: 58px; height: 58px; flex: 0 0 58px; display: grid; place-items: center; overflow: hidden; border: 1px solid #48624d; border-radius: 20px; color: #e0f0e1; background: #2a4230; font-size: 25px; }
.avatar-preview-photo { width: 100%; height: 100%; display: grid; place-items: center; object-fit: cover; font-size: 22px; }
.avatar-preview-line strong, .avatar-preview-line span { display: block; }
.avatar-preview-line strong { color: #e3eee4; font-size: 12px; }
.avatar-preview-line span:not(.avatar-preview-photo) { margin-top: 4px; color: #91a095; font-size: 10px; line-height: 1.5; }
.avatar-choice-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.avatar-choice { width: 42px; height: 42px; border: 1px solid #3a4c3e; border-radius: 13px; color: #dce9dd; background: #1c2a20; font-size: 20px; transition: transform .16s,border-color .16s; }
.avatar-choice:hover { transform: translateY(-2px); border-color: #78977b; }
.avatar-choice.selected { border-color: var(--accent,#8dbb92); background: #304934; box-shadow: 0 0 0 2px color-mix(in srgb,var(--accent,#8dbb92) 23%,transparent); }
.avatar-upload-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.avatar-upload-row .button { min-height: 34px; }
.avatar-upload-row .field-hint { font-size: 10px; }
.choice-cards { display: grid; gap: 9px; }.choice-cards.three { grid-template-columns: repeat(3,minmax(0,1fr)); }
.preference-choice { min-height: 81px; display: flex; flex-direction: column; align-items: flex-start; gap: 7px; padding: 14px; border: 1px solid #374a3c; border-radius: 13px; color: #dce8de; background: #1a271e; text-align: left; }
.preference-choice strong { font-size: 12px; }.preference-choice span { color: #91a195; font-size: 10px; line-height: 1.5; }
.preference-choice.selected { border-color: var(--accent,#8dbb92); background: #263a2a; box-shadow: inset 0 0 0 1px color-mix(in srgb,var(--accent,#8dbb92) 25%,transparent); }
.preference-focus-field { max-width: 520px; margin-top: 17px; }
.theme-choice-row { display: flex; gap: 12px; }.theme-preview-choice { width: 150px; display: grid; grid-template-columns: 64px 1fr; grid-template-rows: auto auto; column-gap: 11px; align-items: center; padding: 10px; border: 1px solid #36483a; border-radius: 13px; color: #e1ece2; background: #1a271e; text-align: left; }.theme-preview-choice.selected { border-color: var(--accent,#8dbb92); box-shadow: 0 0 0 2px color-mix(in srgb,var(--accent,#8dbb92) 18%,transparent); }
.theme-preview { grid-row: span 2; width: 64px; height: 48px; display: flex; flex-direction: column; gap: 4px; padding: 7px; border-radius: 7px; }.theme-preview i { width: 80%; height: 5px; border-radius: 4px; background: #698c70; }.theme-preview i:nth-child(2) { width: 60%; }.theme-preview i:nth-child(3) { width: 90%; }
.dark-preview { background: #121a14; border: 1px solid #415244; }.light-preview { background: #edf2eb; border: 1px solid #c6d3c2; }.light-preview i { background: #7ba27c; }
.theme-preview-choice strong { align-self: end; font-size: 11px; }.theme-preview-choice small { align-self: start; color: #91a195; font-size: 9px; }
.accent-field { margin-top: 19px; }.accent-field > label, .settings-subfield label { display: block; margin-bottom: 9px; color: #b2c1b4; font-size: 10px; font-weight: 700; }
.accent-choices { display: flex; flex-wrap: wrap; gap: 10px; }
.accent-choice { min-width: 48px; display: grid; justify-items: center; gap: 5px; padding: 7px 8px; border: 1px solid transparent; border-radius: 10px; color: #9eafa1; background: transparent; }.accent-choice span { width: 20px; height: 20px; border-radius: 50%; background: var(--swatch); box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }.accent-choice small { font-size: 9px; }.accent-choice.selected { border-color: #4a6250; background: #223328; color: #e2eee3; }
.onboarding-submit { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 22px 27px; border: 1px solid #3a5140; border-radius: 18px; background: linear-gradient(110deg,#1d3022,#19271e); }.onboarding-submit strong,.onboarding-submit small { display: block; }.onboarding-submit strong { color: #e4eee5; font-size: 12px; }.onboarding-submit small { margin-top: 5px; color: #91a194; font-size: 10px; }.onboarding-privacy { margin: 13px 5px 0; color: #77887b; font-size: 10px; text-align: center; }

/* Profile experience controls */
.profile-settings-grid { align-items: start; }
.profile-avatar { overflow: hidden; border: 1px solid #526b56; color: #e3f0e4; background: #304834; }
.profile-avatar-photo { width: 100%; height: 100%; display: grid; place-items: center; object-fit: cover; font-size: 22px; }
.experience-card { display: grid; gap: 0; }
.experience-card .card-header { margin-bottom: 9px; }
.settings-spark { color: #b2d7b5; font-size: 20px; }
.settings-block { padding: 19px 0; border-top: 1px solid #2d3c31; }
.settings-label { display: grid; gap: 4px; margin-bottom: 13px; }.settings-label strong { color: #e1ece2; font-size: 12px; }.settings-label span { color: #91a095; font-size: 10px; }
.settings-avatar-line { align-items: flex-start; }.avatar-settings-actions { min-width: 0; flex: 1; }.avatar-settings-actions > strong { display: block; margin: 5px 0 10px; color: #dfeadf; font-size: 11px; }
.settings-subfield { margin-top: 17px; }.theme-choice-row.compact .theme-preview-choice { width: 130px; }
.inline-choice-row { display: flex; gap: 8px; }.inline-choice { padding: 9px 14px; border: 1px solid #394b3d; border-radius: 10px; color: #a9b9ac; background: #1a271e; font-size: 11px; }.inline-choice.selected { color: #e0eee1; border-color: var(--accent,#8dbb92); background: #293e2d; }
.experience-card .form-actions { padding-top: 8px; border-top: 1px solid #2d3c31; }
.password-required-banner { display: grid; gap: 4px; margin: -9px 0 20px; padding: 14px 17px; border: 1px solid #735e38; border-radius: 13px; color: #e8d3a9; background: #2b281e; }.password-required-banner strong { font-size: 12px; }.password-required-banner span { font-size: 11px; line-height: 1.5; }

/* Accent palette and compact spacing */
html[data-accent="sage"] { --accent: #9fcca3; }
html[data-accent="blue"] { --accent: #85b9e2; }
html[data-accent="violet"] { --accent: #b39fe4; }
html[data-accent="amber"] { --accent: #e0b878; }
html[data-accent="rose"] { --accent: #dfa0ad; }
html[data-density="compact"] .card { padding: 18px; }
html[data-density="compact"] .main-view { padding-top: 30px; }
html[data-theme="light"] { --bg:#f3f6f2;--surface:#fff;--surface-soft:#f8faf7;--ink:#1f2b22;--ink-2:#4c5b4e;--muted:#758478;--line:#e1e9e1;--line-dark:#d5dfd5;--green:#477d54;--green-deep:#2c5b38;--green-soft:#e8f1e8; }
html[data-theme="light"] body { background: radial-gradient(ellipse at 80% -20%,rgba(105,157,111,.12),transparent 38%),var(--bg); }
html[data-theme="light"] .sidebar { background: rgba(255,255,255,.96); border-right-color: #dfe8df; }
html[data-theme="light"] .brand-name, html[data-theme="light"] h1, html[data-theme="light"] h2, html[data-theme="light"] h3 { color: #203025; }
html[data-theme="light"] .nav-item { color: #69796c; }.light html[data-theme="light"] .nav-item.active, html[data-theme="light"] .nav-item.active { color: #315d3a; background: #eaf3e9; }
html[data-theme="light"] .topbar { background: rgba(255,255,255,.86); border-color: #e0e9e0; }
html[data-theme="light"] .card, html[data-theme="light"] .stat-card { color: #233126; background: #fff; border-color: #e0e9e0; box-shadow: 0 12px 35px rgba(35,68,40,.06); }
html[data-theme="light"] .page-subtitle, html[data-theme="light"] .card-header p { color: #748276; }
html[data-theme="light"] .field label { color: #536257; }
html[data-theme="light"] .field input, html[data-theme="light"] .field textarea, html[data-theme="light"] .field select { color: #27362a; background: #fbfdfb; border-color: #dfe8df; }
html[data-theme="light"] .chat-workspace { background: #fff; border-color: #dce7dc; box-shadow: 0 20px 60px rgba(34,66,40,.1); }
html[data-theme="light"] .chat-top { background: linear-gradient(115deg,#f7fbf6,#eff6ee); border-color: #e1eae1; }
html[data-theme="light"] .chat-top-left strong { color: #243428; }
html[data-theme="light"] .chat-top-left small, html[data-theme="light"] .chat-top-right { color: #758579; }
html[data-theme="light"] .chat-context-bar { color: #718174; background: #f6faf5; border-color: #e1eae1; }
html[data-theme="light"] .chat-messages { background: radial-gradient(ellipse at 48% 0%,rgba(105,157,111,.06),transparent 42%),#fbfdfb; }
html[data-theme="light"] .message-meta { color: #829185; }.light html[data-theme="light"] .message-meta strong, html[data-theme="light"] .message-meta strong { color: #415346; }
html[data-theme="light"] .message-bubble { color: #334438; background: #f4f8f3; border-color: #e2ebe1; box-shadow: 0 6px 18px rgba(31,63,37,.04); }
html[data-theme="light"] .chat-message.user .message-bubble { color: #203d28; background: #e8f2e7; border-color: #d4e5d2; }
html[data-theme="light"] .message-richtext h2, html[data-theme="light"] .message-richtext h3, html[data-theme="light"] .message-richtext h4, html[data-theme="light"] .message-richtext strong { color: #2d4933; }
html[data-theme="light"] .message-richtext code { color: #345e3d; background: #edf5ec; border-color: #d8e6d7; }
html[data-theme="light"] .starter-card { color: #2b3e2f; background: linear-gradient(145deg,#fff,#f6faf5); border-color: #e0eae0; }
html[data-theme="light"] .starter-card-copy small { color: #7d8b80; }
html[data-theme="light"] .starter-card:hover { background: #f2f8f1; border-color: #a8c6a8; }
html[data-theme="light"] .chat-welcome h2 { color: #25372a; }
html[data-theme="light"] .chat-welcome > p:not(.eyebrow) { color: #738276; }
html[data-theme="light"] .composer { background: #fff; border-color: #e1eae1; }
html[data-theme="light"] .composer-input-row { background: #fbfdfb; border-color: #cfddcf; box-shadow: 0 7px 22px rgba(41,77,47,.06); }
html[data-theme="light"] .composer textarea { color: #243529; background: transparent; }
html[data-theme="light"] .composer textarea::placeholder { color: #89968b; }
html[data-theme="light"] .composer-context, html[data-theme="light"] .composer-shortcut { color: #809084; }
html[data-theme="light"] .chat-privacy { border-color: #dce8dc; }
html[data-theme="light"] .onboarding-intro, html[data-theme="light"] .onboarding-submit { background: linear-gradient(110deg,#e8f2e7,#edf5eb 70%,#e9f1e8); border-color: #cfdfcd; }
html[data-theme="light"] .onboarding-brand { color: #26382a; }
html[data-theme="light"] .onboarding-intro h1 { color: #26392b; }.light html[data-theme="light"] .onboarding-intro > p:last-of-type, html[data-theme="light"] .onboarding-intro > p:last-of-type { color: #647665; }
html[data-theme="light"] .onboarding-section { background: #fff; border-color: #e0e9e0; }
html[data-theme="light"] .section-title p, html[data-theme="light"] .settings-label span { color: #77877a; }
html[data-theme="light"] .section-title h2, html[data-theme="light"] .settings-label strong { color: #2a3b2e; }
html[data-theme="light"] .avatar-choice, html[data-theme="light"] .preference-choice, html[data-theme="light"] .theme-preview-choice, html[data-theme="light"] .inline-choice { color: #304233; background: #f8fbf7; border-color: #e0e9df; }
html[data-theme="light"] .preference-choice span, html[data-theme="light"] .theme-preview-choice small { color: #77867a; }
html[data-theme="light"] .avatar-choice.selected, html[data-theme="light"] .preference-choice.selected, html[data-theme="light"] .theme-preview-choice.selected, html[data-theme="light"] .inline-choice.selected { background: #eaf3e9; }
html[data-theme="light"] .accent-choice { color: #718074; }
html[data-theme="light"] .accent-choice.selected { background: #edf5eb; border-color: #cbdccb; color: #344c38; }
html[data-theme="light"] .settings-block, html[data-theme="light"] .experience-card .form-actions { border-color: #e4ece3; }
html[data-theme="light"] .avatar-preview-line strong { color: #304233; }
html[data-theme="light"] .privacy-note { color: #66776a; background: #f6faf5; border-color: #e2ebe0; }
html[data-theme="light"] .profile-avatar { color: #365b40; background: #e7f0e5; }
html[data-theme="light"] .password-required-banner { color: #876525; background: #fff8e9; border-color: #ead9b4; }
html[data-theme="light"] .mobile-nav { background: rgba(255,255,255,.96); border-color: #dfe8df; }
html[data-theme="light"] .mobile-nav-item { color: #758478; }.light html[data-theme="light"] .mobile-nav-item.active, html[data-theme="light"] .mobile-nav-item.active { color: #315d3a; background: #eaf3e9; }
@media (max-width: 900px) {
  .coach-page-heading { align-items: flex-start; flex-direction: column; }
  .coach-heading-actions { width: 100%; justify-content: space-between; }
  .onboarding-art { right: 8%; opacity: .72; }
  .profile-settings-grid { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 620px) {
  .main-view { padding: 25px 15px 100px; }
  .coach-page-heading h1 { font-size: 34px; }
  .chat-workspace { border-radius: 17px; }
  .chat-top { padding: 13px 14px; }
  .chat-top-right { display: none; }
  .chat-context-bar { gap: 5px; padding: 10px 14px; font-size: 9px; }
  .chat-messages { min-height: 430px; max-height: 57vh; padding: 22px 13px; gap: 22px; }
  .chat-message { gap: 8px; }
  .message-avatar { width: 30px; height: 30px; flex-basis: 30px; border-radius: 10px; }
  .message-content { max-width: calc(100% - 38px); }
  .message-bubble { padding: 13px 14px; font-size: 13px; line-height: 1.72; }
  .starter-grid { grid-template-columns: 1fr; gap: 8px; margin-top: 22px; }
  .starter-card { min-height: 66px; }
  .chat-welcome { padding: 8px 0; }
  .composer { padding: 12px 10px; }
  .composer-footer { align-items: flex-start; flex-direction: column; gap: 5px; }
  .composer-shortcut { display: none; }
  .onboarding-rail { margin-bottom: 15px; }
  .onboarding-intro { min-height: 240px; padding: 27px 23px; border-radius: 18px; }
  .onboarding-intro h1 { font-size: 36px; }
  .onboarding-intro > p:last-of-type { max-width: 80%; }
  .onboarding-art { right: -20px; top: 38px; width: 105px; height: 105px; opacity: .35; transform: none; }
  .onboarding-art-core { width: 48px; height: 48px; border-radius: 16px; font-size: 23px; }
  .onboarding-section { grid-template-columns: 35px minmax(0,1fr); gap: 8px; padding: 18px 13px; border-radius: 16px; }
  .section-count { width: 29px; height: 29px; border-radius: 9px; font-size: 9px; }
  .section-title h2 { font-size: 15px; }
  .section-title p { font-size: 10px; line-height: 1.5; }
  .choice-cards.three { grid-template-columns: 1fr; }
  .preference-choice { min-height: 0; }
  .theme-choice-row { gap: 8px; }
  .theme-preview-choice { width: 50%; grid-template-columns: 50px 1fr; padding: 8px; }
  .theme-preview { width: 50px; height: 42px; }
  .onboarding-submit { align-items: stretch; flex-direction: column; padding: 18px; }
  .onboarding-submit .button { width: 100%; }
  .settings-avatar-line { align-items: flex-start; }
  .settings-avatar-line .avatar-choice-grid { gap: 5px; }
  .avatar-choice { width: 35px; height: 35px; }
  .theme-choice-row.compact .theme-preview-choice { width: 50%; }
  .profile-settings-grid { gap: 13px; }
}

/* Rich assistant output and accessibility polish */
.message-richtext a { color: var(--accent, #a8d0aa); text-decoration: underline; text-decoration-color: color-mix(in srgb,var(--accent,#a8d0aa) 45%,transparent); text-underline-offset: 3px; overflow-wrap: anywhere; }
.message-richtext a:hover { text-decoration-color: currentColor; }
.message-richtext blockquote { margin: 12px 0; padding: 10px 15px; border-left: 3px solid var(--accent,#8fbe95); border-radius: 0 10px 10px 0; color: #b6c9b9; background: rgba(95,139,102,.09); }
.message-richtext pre { max-width: 100%; overflow-x: auto; margin: 12px 0; padding: 15px 17px; border: 1px solid #3a4d3e; border-radius: 12px; color: #d6e9d8; background: #0e1711; font-size: 12px; line-height: 1.65; tab-size: 2; }
.message-richtext pre code { display: block; padding: 0; border: 0; color: inherit; background: transparent; font-size: inherit; white-space: pre; }
.message-bubble > .message-richtext:first-child > :first-child { margin-top: 0; }
.message-bubble > .message-richtext:last-child > :last-child { margin-bottom: 0; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--accent,#a8d0aa); outline-offset: 3px; }
html[data-theme="light"] .message-richtext blockquote { color: #53675a; background: #eef5ee; }
html[data-theme="light"] .message-richtext pre { color: #e1eee2; background: #1a261d; border-color: #344b38; }
html[data-theme="light"] .message-richtext a { color: #477a50; }

/* Northstar V10 — Tabbed workspaces, 28-day Progress analytics, command palette & dark-mode fixes */
.skip-link { position: fixed; left: 16px; top: -100px; z-index: 9999; padding: 10px 14px; border-radius: 10px; background: var(--accent, #83b58d); color: #102017; font-weight: 700; transition: top .18s; }
.skip-link:focus { top: 14px; }
.noscript-banner, .offline-banner { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid #594626; background: #261f14; color: #f0d7a7; font-size: 12px; text-align: center; }
.offline-dot { width: 8px; height: 8px; border-radius: 50%; background: #e0a84c; box-shadow: 0 0 0 3px rgba(224,168,76,.22); }

/* Fix contrast of privacy note & toggle buttons in dark mode */
.privacy-note { padding: 15px 17px; border: 1px solid #2e4033; border-radius: 14px; color: #b9c8bc; background: #131c16; font-size: 12px; line-height: 1.68; }
.toggle-button { padding: 7px 11px; border: 1px solid #384b3c; border-radius: 9px; color: #cfe0d1; background: #1d2b21; font-size: 11px; font-weight: 600; transition: background .16s, border-color .16s, color .16s; }
.toggle-button:hover { background: #283b2d; border-color: #547159; color: #eff7f0; }
.toggle-button.danger-text { color: #e9b1aa; border-color: #4d3533; background: #261b1a; }
.toggle-button.danger-text:hover { background: #382422; border-color: #6e4844; color: #ffd4cf; }
.card-item-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.list-card .stat-icon.sand { width: 38px; height: 38px; flex: 0 0 38px; font-size: 14px; color: #d8c7a0; background: #2a261d; border: 1px solid #473f2d; }
.status-tag.overdue { color: #f3b8b0; background: #382321; border: 1px solid #5c3834; }

/* View tabs (Goals, Routines, Profile) */
.view-tabs { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0 0 22px; padding: 5px; border: 1px solid #2b3b2f; border-radius: 14px; background: #141d17; }
.view-tab { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 15px; border: 1px solid transparent; border-radius: 10px; color: #9eb0a2; background: transparent; font-size: 12px; font-weight: 650; transition: background .16s, color .16s, border-color .16s; }
.view-tab:hover { color: #e8f2e9; background: rgba(255,255,255,.03); }
.view-tab.active { color: #102017; background: linear-gradient(135deg, var(--accent, #a8d0aa), color-mix(in srgb, var(--accent, #a8d0aa) 76%, #4e835a)); font-weight: 750; box-shadow: 0 4px 14px rgba(0,0,0,.22); }
.tab-icon { font-size: 13px; line-height: 1; }
.tab-badge { padding: 2px 7px; border-radius: 999px; background: rgba(255,255,255,.08); color: inherit; font-size: 10px; font-weight: 750; }
.view-tab.active .tab-badge { background: rgba(16,32,23,.18); color: #102017; }
.tab-panel { max-width: 920px; }

/* Momentum strip on Today */
.momentum-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 18px; }
.momentum-pill { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border: 1px solid #2b3b2f; border-radius: 15px; background: linear-gradient(145deg, #18221b, #141c17); color: var(--ink); text-align: left; transition: transform .16s, border-color .16s; }
.momentum-pill:hover { transform: translateY(-1px); border-color: #46614c; }
.momentum-icon { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; border-radius: 10px; background: #223528; color: var(--accent, #a8d0aa); font-size: 15px; }
.momentum-pill strong { display: block; font-size: 13px; color: #eef5ef; }
.momentum-pill small { display: block; margin-top: 2px; color: #91a195; font-size: 11px; }

/* 28-day Progress & insights */
.insights-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.metric-card { display: flex; flex-direction: column; gap: 6px; padding: 20px 22px; }
.metric-card strong { font-size: clamp(24px, 2.6vw, 32px); letter-spacing: -.04em; color: #f0f7f1; }
.metric-unit { color: #7e9082; font-size: 16px; font-weight: 600; margin-left: 2px; }
.metric-card small { color: #93a397; font-size: 11px; }
.heatmap-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; margin-top: 6px; }
.heat-cell { aspect-ratio: 1.25 / 1; min-height: 42px; display: flex; align-items: flex-end; justify-content: flex-end; padding: 7px 9px; border: 1px solid #29382d; border-radius: 11px; background: #131b16; color: #7e8f82; font-size: 10px; font-weight: 650; }
.heat-cell.level-1 { background: color-mix(in srgb, var(--accent, #83b58d) 22%, #141e17); border-color: color-mix(in srgb, var(--accent, #83b58d) 38%, #29382d); color: #d6e8d8; }
.heat-cell.level-2 { background: color-mix(in srgb, var(--accent, #83b58d) 44%, #141e17); border-color: color-mix(in srgb, var(--accent, #83b58d) 60%, #29382d); color: #f0f8f1; }
.heat-cell.level-3 { background: var(--accent, #83b58d); border-color: var(--accent, #83b58d); color: #102017; font-weight: 800; }
.heat-legend { display: inline-flex; align-items: center; gap: 6px; color: #8fa093; font-size: 10px; }
.heat-dot { width: 11px; height: 11px; border-radius: 4px; display: inline-block; }
.heat-dot.level-1 { background: color-mix(in srgb, var(--accent, #83b58d) 26%, #141e17); }
.heat-dot.level-2 { background: color-mix(in srgb, var(--accent, #83b58d) 52%, #141e17); }
.heat-dot.level-3 { background: var(--accent, #83b58d); }
.energy-bars { display: grid; gap: 11px; margin-top: 6px; }
.energy-bar-row { display: grid; grid-template-columns: 54px 1fr 28px; align-items: center; gap: 10px; font-size: 12px; color: #c9d7cb; }
.bar-track progress { width: 100%; height: 9px; border: 0; border-radius: 999px; overflow: hidden; background: #121a14; appearance: none; -webkit-appearance: none; }
.bar-track progress::-webkit-progress-bar { background: #121a14; border-radius: 999px; }
.bar-track progress::-webkit-progress-value { background: var(--accent, #83b58d); border-radius: 999px; }
.bar-track progress::-moz-progress-bar { background: var(--accent, #83b58d); border-radius: 999px; }

/* Password visibility, strength meter & accent swatches */
.password-wrap { position: relative; display: flex; align-items: center; }
.password-wrap input { padding-right: 64px; }
.password-toggle { position: absolute; right: 7px; height: 30px; padding: 0 10px; border: 1px solid #354739; border-radius: 8px; background: #1a261e; color: #bcd0bf; font-size: 11px; font-weight: 650; }
.password-toggle:hover { color: #eff7f0; border-color: #526d57; }
.strength-meter { height: 5px; margin-top: 7px; border-radius: 999px; background: #1c271f; overflow: hidden; }
.strength-meter span { display: block; width: 0; height: 100%; border-radius: 999px; background: #cf7d73; transition: width .2s, background .2s; }
.strength-meter span[data-tone="fair"] { background: #d8ad62; }
.strength-meter span[data-tone="strong"] { background: #7fc08a; }
.match-hint[data-tone="strong"] { color: #95cfa0; }
.match-hint[data-tone="weak"] { color: #e59c93; }
.caps-hint { display: inline-block; margin-top: 5px; color: #e5be78; font-size: 11px; font-weight: 600; }
.accent-choice .swatch-sage { background: #83b58d; }
.accent-choice .swatch-blue { background: #76a9d5; }
.accent-choice .swatch-violet { background: #a995d6; }
.accent-choice .swatch-amber { background: #d5a45c; }
.accent-choice .swatch-rose { background: #d68e9c; }

/* Quick actions command palette (Ctrl/Cmd + K) */
.command-trigger { display: inline-flex; align-items: center; gap: 8px; height: 35px; padding: 0 11px; border: 1px solid #2e4033; border-radius: 10px; background: #151f18; color: #b5c5b8; font-size: 12px; }
.command-trigger:hover { border-color: #49634e; color: #edf5ee; }
.command-trigger kbd, .command-search kbd, .command-footer kbd { padding: 2px 6px; border: 1px solid #344638; border-radius: 6px; background: #101712; color: #93a496; font-family: inherit; font-size: 10px; }
.command-palette { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: start center; padding: 11vh 16px 24px; }
.command-backdrop { position: fixed; inset: 0; background: rgba(7, 11, 8, .68); backdrop-filter: blur(5px); }
.command-panel { position: relative; z-index: 1; width: min(560px, 100%); overflow: hidden; border: 1px solid #364a3b; border-radius: 18px; background: #162019; box-shadow: 0 28px 80px rgba(0,0,0,.5); }
.command-search { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-bottom: 1px solid #29392d; }
.command-search input { flex: 1; border: 0; background: transparent; color: #eef5ef; font-size: 14px; outline: none; }
.command-list { list-style: none; max-height: 330px; overflow-y: auto; margin: 0; padding: 7px; }
.command-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 11px; cursor: pointer; color: #cedbcf; }
.command-item.active, .command-item:hover { background: #223327; color: #f2f8f3; }
.command-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: #1d2b21; color: var(--accent, #a8d0aa); font-size: 14px; }
.command-copy { flex: 1; min-width: 0; }
.command-copy strong { display: block; font-size: 12.5px; }
.command-copy small { display: block; color: #8ea092; font-size: 11px; }
.command-enter { color: #7e9082; font-size: 12px; }
.command-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 9px 14px; border-top: 1px solid #263529; background: #121a14; color: #839487; font-size: 10.5px; }

html[data-theme="light"] .view-tabs { background: #eef4ed; border-color: #d9e4d8; }
html[data-theme="light"] .view-tab { color: #546658; }
html[data-theme="light"] .view-tab.active { color: #fff; background: var(--green); }
html[data-theme="light"] .view-tab.active .tab-badge { color: #fff; background: rgba(255,255,255,.22); }
html[data-theme="light"] .momentum-pill { background: #fff; border-color: #dfe8df; }
html[data-theme="light"] .momentum-pill strong, html[data-theme="light"] .metric-card strong { color: #203125; }
html[data-theme="light"] .heat-cell { background: #f2f6f1; border-color: #dce6dc; color: #6c7c70; }
html[data-theme="light"] .toggle-button { background: #f5f9f4; border-color: #d7e3d7; color: #36493a; }
html[data-theme="light"] .command-trigger { background: #f5f9f4; border-color: #d7e3d7; color: #435647; }
html[data-theme="light"] .command-panel { background: #fff; border-color: #d8e3d8; }
html[data-theme="light"] .command-search input { color: #203125; }
html[data-theme="light"] .command-item { color: #2b3c2f; }
html[data-theme="light"] .command-item.active, html[data-theme="light"] .command-item:hover { background: #eaf3e9; color: #1d2e22; }
html[data-theme="light"] .command-footer { background: #f5f9f4; border-color: #e1eae1; }
html[data-theme="light"] .password-toggle { background: #eef4ed; border-color: #d4e0d4; color: #394d3d; }

@media (max-width: 900px) {
  .insights-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .momentum-strip { grid-template-columns: 1fr; }
  .command-trigger-label, .command-trigger kbd { display: none; }
}
@media (max-width: 620px) {
  .view-tabs { width: 100%; display: flex; }
  .view-tab { flex: 1; justify-content: center; padding: 0 10px; font-size: 11.5px; }
  .insights-stats { grid-template-columns: 1fr 1fr; gap: 10px; }
  .heatmap-grid { gap: 5px; }
  .heat-cell { min-height: 34px; padding: 4px 6px; font-size: 9px; }
}

/* Interactive AI Coach Widgets (northstar-ui protocol) */
.coach-summary-banner { display: flex; align-items: flex-start; gap: 11px; margin: 14px 0 10px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--accent, #83b58d) 36%, #2b3c30); border-radius: 13px; background: linear-gradient(135deg, color-mix(in srgb, var(--accent, #83b58d) 14%, #18231b), #151f18); }
.coach-summary-icon { width: 24px; height: 24px; flex: 0 0 24px; display: grid; place-items: center; border-radius: 7px; background: color-mix(in srgb, var(--accent, #83b58d) 24%, #1e2d22); color: var(--accent, #a8d0aa); font-size: 12px; }
.coach-summary-banner strong { display: block; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--accent, #a8d0aa); }
.coach-summary-banner p { margin: 3px 0 0; font-size: 12.5px; line-height: 1.55; color: #e5f0e6; }

.coach-interactive-box { margin-top: 14px; padding: 14px 15px; border: 1px solid #324637; border-radius: 15px; background: #141e17; display: grid; gap: 12px; }
.coach-interactive-header { display: flex; align-items: center; gap: 8px; color: #a7bca9; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.coach-question-card { padding: 12px 13px; border: 1px solid #28382c; border-radius: 12px; background: #18231b; display: grid; gap: 10px; }
.coach-question-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.coach-question-num { padding: 2px 7px; border-radius: 6px; background: #243629; color: var(--accent, #a8d0aa); font-size: 10px; font-weight: 800; }
.coach-question-head strong { flex: 1; min-width: 180px; font-size: 13px; color: #edf5ee; }
.coach-question-head small { color: #87988a; font-size: 10.5px; }
.coach-option-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(195px, 1fr)); gap: 7px; }
.coach-option-pill { display: flex; align-items: center; gap: 9px; min-height: 38px; padding: 8px 12px; border: 1px solid #334637; border-radius: 10px; background: #131c16; color: #cfe0d1; font-size: 12px; font-weight: 560; text-align: left; transition: transform .14s, border-color .14s, background .14s, color .14s; }
.coach-option-pill:hover { border-color: #55735b; background: #1c2920; color: #f1f8f2; transform: translateY(-1px); }
.coach-option-pill.selected { border-color: var(--accent, #83b58d); background: color-mix(in srgb, var(--accent, #83b58d) 20%, #1a281e); color: #f4fbf5; font-weight: 700; box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent, #83b58d) 35%, transparent); }
.coach-option-check { width: 18px; height: 18px; flex: 0 0 18px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.06); color: var(--accent, #a8d0aa); font-size: 11px; font-weight: 800; }
.coach-option-pill.selected .coach-option-check { background: var(--accent, #83b58d); color: #102017; }
.coach-interactive-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding-top: 4px; }
.coach-selection-status { color: #93a596; font-size: 11.5px; }

.coach-actions-tray { display: grid; gap: 8px; margin-top: 12px; }
.coach-action-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 11px 13px; border: 1px solid #2e4133; border-radius: 12px; background: #152019; }
.coach-action-badge { padding: 3px 8px; border-radius: 7px; background: #223427; color: var(--accent, #a8d0aa); font-size: 10.5px; font-weight: 750; white-space: nowrap; }
.coach-action-copy { flex: 1; min-width: 180px; }
.coach-action-copy strong { display: block; font-size: 12.5px; color: #ecf4ed; }
.coach-action-copy small { display: block; margin-top: 2px; color: #90a193; font-size: 11px; }

.coach-followup-row { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 13px; padding-top: 11px; border-top: 1px solid rgba(255,255,255,.06); }
.coach-followup-chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border: 1px solid #35493a; border-radius: 999px; background: #18241c; color: #cde0cf; font-size: 11.5px; font-weight: 600; transition: background .15s, border-color .15s, transform .15s; }
.coach-followup-chip:hover { background: #233528; border-color: var(--accent, #83b58d); color: #f3faf4; transform: translateY(-1px); }

.msg-table-wrap { overflow-x: auto; margin: 12px 0; border: 1px solid #2e4033; border-radius: 11px; }
.msg-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.msg-table th, .msg-table td { padding: 9px 12px; border-bottom: 1px solid #26352a; text-align: left; }
.msg-table th { background: #162119; color: #cfe2d1; font-weight: 700; }
.msg-table tr:last-child td { border-bottom: 0; }

html[data-theme="light"] .coach-summary-banner { background: #eaf3e9; border-color: #c8dec8; }
html[data-theme="light"] .coach-summary-banner p, html[data-theme="light"] .coach-question-head strong, html[data-theme="light"] .coach-action-copy strong { color: #203225; }
html[data-theme="light"] .coach-interactive-box { background: #f7faf6; border-color: #dce7dc; }
html[data-theme="light"] .coach-question-card, html[data-theme="light"] .coach-action-item { background: #fff; border-color: #dfe9df; }
html[data-theme="light"] .coach-option-pill { background: #f5f9f4; border-color: #d5e2d5; color: #2b3e30; }
html[data-theme="light"] .coach-option-pill.selected { background: #e3f0e2; border-color: var(--green); color: #1b3321; }
html[data-theme="light"] .coach-followup-chip { background: #eef5ed; border-color: #d1e0d1; color: #2c4532; }

/* Northstar V12 — Best-Pick Badges, Proactive Life Radar, Sleep Alert & Memory Vault */
.coach-interactive-header { justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.coach-interactive-header > div { display: inline-flex; align-items: center; gap: 7px; }
.coach-mode-switch { padding: 5px 10px; border: 1px solid #3c5442; border-radius: 999px; background: #1c2b21; color: var(--accent, #a8d0aa); font-size: 10.5px; font-weight: 700; cursor: pointer; transition: background .15s, border-color .15s; }
.coach-mode-switch:hover { background: #263b2d; border-color: var(--accent, #83b58d); }
.coach-option-label { flex: 1; }
.coach-best-badge { padding: 2px 7px; border-radius: 999px; background: rgba(131, 181, 141, .18); border: 1px solid rgba(131, 181, 141, .38); color: var(--accent, #b5dfB8); font-size: 9.5px; font-weight: 800; white-space: nowrap; }
.coach-option-pill.selected .coach-best-badge { background: rgba(16, 32, 23, .32); border-color: rgba(255,255,255,.22); color: #d8f3da; }
.followup-label { font-size: 10.5px; font-weight: 700; color: #8fa293; align-self: center; margin-right: 4px; }
.coach-did-you-know { display: flex; align-items: flex-start; gap: 10px; margin: 12px 0; padding: 11px 14px; border: 1px solid #48422b; border-radius: 12px; background: #211f16; color: #ead7a7; font-size: 12px; line-height: 1.55; }
.dyk-badge { padding: 3px 8px; border-radius: 7px; background: #36301e; color: #f2cf7e; font-size: 10.5px; font-weight: 800; white-space: nowrap; }
.coach-did-you-know p { margin: 0; }
.coach-memory-detected { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 10px; padding: 9px 12px; border: 1px dashed #354c3b; border-radius: 10px; background: rgba(25, 40, 30, .55); font-size: 11px; color: #a8c0ab; }
.memory-mini-pill { padding: 3px 8px; border-radius: 6px; background: #1d2d22; color: #d9ebd9; }

.proactive-radar-section { margin: 0 0 22px; padding: 18px 20px; border: 1px solid #2f4234; border-radius: 20px; background: linear-gradient(150deg, #17221b, #131c16); display: grid; gap: 15px; }
.radar-sleep-alert { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; padding: 14px 16px; border: 1px solid #594b2d; border-radius: 15px; background: linear-gradient(125deg, #272217, #1f1d16); }
.radar-sleep-icon { width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center; border-radius: 12px; background: #38301e; font-size: 20px; }
.radar-sleep-copy { flex: 1; min-width: 220px; }
.radar-sleep-copy strong { display: block; color: #f4dfb4; font-size: 13px; }
.radar-sleep-copy p { margin: 3px 0 0; color: #cbb993; font-size: 11.5px; line-height: 1.5; }
.radar-sleep-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.radar-header { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.radar-header h3 { margin: 4px 0 0; font-size: 16px; color: #edf5ee; }
.radar-header-actions { display: flex; align-items: center; gap: 14px; }
.radar-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.radar-card { padding: 15px 16px; border: 1px solid #2b3c30; border-radius: 15px; background: #18231b; display: flex; flex-direction: column; gap: 8px; }
.radar-card-wide { grid-column: span 2; background: linear-gradient(135deg, #1b281f, #17211a); border-color: #364d3c; }
.radar-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.radar-badge { padding: 3px 9px; border-radius: 999px; background: #233528; color: var(--accent, #a8d0aa); font-size: 10.5px; font-weight: 750; }
.radar-time { color: #87998b; font-size: 10.5px; font-weight: 650; }
.radar-card strong { font-size: 13.5px; color: #eff7f0; }
.radar-card p { margin: 0; color: #a2b3a5; font-size: 12px; line-height: 1.55; flex: 1; }
.radar-card-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 4px; }

.choice-cards.two-col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.memory-vault-list { display: grid; gap: 10px; }
.memory-vault-item { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 13px 15px; border: 1px solid #2b3b2f; border-radius: 13px; background: #151f18; }
.memory-cat-tag { padding: 4px 10px; border-radius: 8px; background: #213226; color: var(--accent, #a8d0aa); font-size: 11px; font-weight: 750; white-space: nowrap; }
.memory-vault-copy { flex: 1; min-width: 200px; }
.memory-vault-copy strong { display: block; font-size: 13px; color: #ecf4ed; }
.memory-vault-copy p { margin: 3px 0 0; color: #96a799; font-size: 11.5px; }

.music-connection-status { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 13px 16px; border: 1px solid #1db954; border-radius: 14px; background: rgba(29, 185, 84, 0.08); }
.music-conn-icon { width: 36px; height: 36px; flex: 0 0 36px; display: grid; place-items: center; border-radius: 10px; background: #1db954; color: #000; font-size: 18px; font-weight: 800; }
.music-conn-copy { flex: 1; min-width: 180px; }
.music-conn-copy strong { display: block; font-size: 13px; color: #eaf5eb; }
.music-conn-copy span { font-size: 11px; color: #a4cca8; }
.coach-action-music { border-color: rgba(29, 185, 84, 0.45); background: linear-gradient(135deg, rgba(29, 185, 84, 0.12), #141f17); }

html[data-theme="light"] .proactive-radar-section { background: #f6faf5; border-color: #dce7dc; }
html[data-theme="light"] .radar-card, html[data-theme="light"] .memory-vault-item { background: #fff; border-color: #dfe9df; }
html[data-theme="light"] .radar-card strong, html[data-theme="light"] .radar-header h3, html[data-theme="light"] .memory-vault-copy strong { color: #1f3124; }
html[data-theme="light"] .radar-card p, html[data-theme="light"] .memory-vault-copy p { color: #5b6d5f; }
@media (max-width: 760px) {
  .radar-grid, .choice-cards.two-col { grid-template-columns: 1fr; }
  .radar-card-wide { grid-column: span 1; }
}

/* Floating Now Playing Bar (Spotify Web API / Music Launcher) */
.now-playing-bar {
  position: fixed;
  right: 20px;
  bottom: 84px;
  z-index: 65;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(390px, calc(100vw - 28px));
  padding: 11px 13px;
  border: 1px solid rgba(29, 185, 84, 0.55);
  border-radius: 16px;
  background: rgba(16, 26, 20, 0.96);
  backdrop-filter: blur(14px);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.45);
}
.now-playing-bar:not(.show) {
  display: none !important;
}
.np-head {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}
.np-embed {
  width: 100%;
  height: 80px;
  border: 0;
  border-radius: 12px;
}
.np-cover {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 10px;
  object-fit: cover;
}
.np-cover-fallback {
  display: grid;
  place-items: center;
  background: #1db954;
  color: #07120a;
  font-size: 18px;
  font-weight: 800;
}
.np-copy {
  flex: 1;
  min-width: 0;
}
.np-copy strong {
  display: block;
  color: #eef7ef;
  font-size: 12.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.np-copy span {
  display: block;
  color: #9dc4a3;
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.np-open {
  white-space: nowrap;
  text-decoration: none;
}
.np-close {
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #cfe0d1;
  font-size: 15px;
  cursor: pointer;
}
.np-close:hover {
  background: rgba(255, 255, 255, 0.16);
}

/* Contacts Permission & Quick-Link Modal */
.contacts-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(7, 12, 9, 0.78);
  backdrop-filter: blur(8px);
}
.contacts-modal-card {
  width: min(560px, 100%);
  max-height: 88vh;
  overflow-y: auto;
  padding: 22px;
  border: 1px solid #354c3b;
  border-radius: 20px;
  background: #141e17;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
  display: grid;
  gap: 14px;
}
.contacts-modal-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.contacts-modal-head > div {
  flex: 1;
}
.contacts-modal-head h3 {
  margin: 3px 0 0;
  font-size: 17px;
  color: #eef6ef;
}
.contacts-perm-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: #223528;
  font-size: 20px;
}
.contacts-modal-copy {
  margin: 0;
  color: #b5c7b8;
  font-size: 13px;
  line-height: 1.6;
}
.contacts-privacy-pill {
  padding: 10px 13px;
  border: 1px solid #2b3f31;
  border-radius: 12px;
  background: #19261d;
  color: #9ec2a4;
  font-size: 11.5px;
  line-height: 1.5;
}
.contacts-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}
.contacts-preset-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.contacts-saved-list {
  display: grid;
  gap: 9px;
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

/* Dynamic Welcome-Back Catch-Up Briefing, Before-Sleep Checklist & Native Device Apps */
.welcome-catchup-hero {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid #354c3b;
  border-radius: 18px;
  background: linear-gradient(145deg, #1a271e, #131d16);
}
.welcome-catchup-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.welcome-catchup-top h3 {
  margin: 5px 0 4px;
  font-size: 18px;
  color: #f0f8f1;
}
.welcome-catchup-sub {
  margin: 0;
  color: #a4baa8;
  font-size: 12.5px;
  line-height: 1.55;
  max-width: 760px;
}
.work-mood-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid #2b3f30;
  border-radius: 13px;
  background: rgba(18, 28, 21, 0.72);
}
.catchup-two-col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
}
.before-sleep-box,
.news-catchup-box {
  padding: 14px 16px;
  border: 1px solid #2d4032;
  border-radius: 15px;
  background: #152019;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.before-sleep-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}
.before-sleep-head strong {
  font-size: 13px;
  color: #ecf5ed;
}
.before-sleep-list {
  display: grid;
  gap: 7px;
}
.sleep-check-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border: 1px solid #26372b;
  border-radius: 10px;
  background: #19261d;
  color: #d6e6d8;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.sleep-check-row:hover {
  border-color: var(--accent, #83b58d);
}
.sleep-check-row.checked {
  background: rgba(131, 181, 141, 0.12);
  border-color: rgba(131, 181, 141, 0.42);
  color: #9bb59e;
  text-decoration: line-through;
}
.news-catchup-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.news-catchup-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 11px;
  border: 1px solid #26372b;
  border-radius: 11px;
  background: #19261d;
}
.news-catchup-list li > div {
  flex: 1;
  min-width: 0;
}
.news-catchup-list li strong {
  display: block;
  font-size: 12px;
  color: #edf6ee;
}
.news-catchup-list li p {
  margin: 2px 0 0;
  font-size: 11px;
  color: #9ab09e;
}
.news-tag {
  padding: 3px 8px;
  border-radius: 7px;
  background: #233629;
  color: var(--accent, #a8d0aa);
  font-size: 10px;
  font-weight: 750;
  white-space: nowrap;
}
.device-linked-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 14px;
  border: 1px dashed #36503e;
  border-radius: 13px;
  background: rgba(20, 32, 24, 0.78);
}
.device-linked-info {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
}
.device-pill {
  padding: 4px 10px;
  border-radius: 999px;
  background: #233829;
  color: #d6eed8;
  font-size: 11px;
  font-weight: 750;
}
.device-sub {
  font-size: 11.5px;
  color: #9bb19f;
}
.device-linked-buttons {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}
.np-actions-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}
.np-embed-slot {
  width: 100%;
  margin-top: 4px;
}
@media (max-width: 820px) {
  .catchup-two-col {
    grid-template-columns: 1fr;
  }
}

/* Direct Input Cards & Custom Option Inputs in Coach */
.coach-direct-input-row {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 8px;
}
.coach-inline-input {
  flex: 1;
  min-width: 0;
  padding: 10px 13px;
  border: 1px solid #38513f;
  border-radius: 11px;
  background: #101913;
  color: #eef6ef;
  font-size: 13px;
}
.coach-inline-input:focus {
  outline: none;
  border-color: var(--accent, #83b58d);
  box-shadow: 0 0 0 2px rgba(131, 181, 141, 0.2);
}
.coach-escape-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 9px;
}
.coach-custom-input-wrap {
  margin-top: 10px;
}
.coach-option-escape {
  border-style: dashed;
  opacity: 0.9;
}

/* De-congested Today Page & Streamlined Coach Layout */
.today-welcome-compact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 14px;
}
.today-welcome-compact h1 {
  margin: 2px 0 0;
  font-size: clamp(1.45rem, 2.5vw, 1.95rem);
}
.today-top-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.mini-stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(23, 35, 28, 0.75);
  color: var(--text);
  font-size: 12.5px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.mini-stat-pill:hover {
  border-color: var(--accent, #83b58d);
  background: rgba(34, 52, 41, 0.9);
}
.compact-pulse-card {
  padding: 16px 18px;
  margin-bottom: 0;
}
.compact-pulse-card .welcome-catchup-top {
  margin-bottom: 10px;
}
.compact-pulse-card .view-tabs {
  margin-bottom: 12px;
}
.today-brief-pane {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.before-sleep-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 7px;
}
.radar-inline-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.pace-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(16, 25, 19, 0.7);
  color: var(--muted);
  font-size: 12px;
  cursor: pointer;
}
.pace-toggle-btn:hover {
  color: var(--text);
  border-color: var(--accent, #83b58d);
}
.pace-inline-drawer {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.chat-top-right {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

/* Remove wasted space above Coach & style Actions-Before-Options tray */
.coach-page-heading,
.chat-context-bar,
.composer-footer,
.coach-footnote {
  display: none !important;
}
.coach-compact-shell {
  padding-top: 0 !important;
}
.coach-compact-shell .chat-workspace {
  min-height: calc(100dvh - 140px);
}
.coach-compact-shell .chat-messages {
  max-height: calc(100dvh - 250px);
  min-height: 420px;
}
.actions-tray-header {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #83b58d;
  margin-bottom: 4px;
}
.coach-actions-tray {
  margin: 12px 0 14px;
  padding: 11px 13px;
  border-radius: 13px;
  border: 1px solid rgba(131, 181, 141, 0.28);
  background: rgba(18, 30, 22, 0.72);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.coach-action-whatsapp {
  border-color: rgba(37, 211, 102, 0.35) !important;
  background: rgba(20, 42, 28, 0.75) !important;
}
.coach-ideas-row {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed rgba(131, 181, 141, 0.2);
}

/* ==========================================================================
   v21 Dynamic, Interactive & Mobile-Friendly Enhancements
   ========================================================================== */

/* Dark-mode glassmorphic overrides for previously light-hardcoded cards */
body.theme-dark .next-step-card {
  background: linear-gradient(155deg, rgba(24, 36, 27, 0.92), rgba(16, 25, 19, 0.95));
  border-color: rgba(131, 181, 141, 0.26);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35);
}
body.theme-dark .action-preview {
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(131, 181, 141, 0.22);
  color: var(--text);
}
body.theme-dark .choice-button {
  background: rgba(255, 255, 255, 0.035);
  border-color: rgba(255, 255, 255, 0.11);
}
body.theme-dark .choice-button:hover {
  border-color: rgba(131, 181, 141, 0.45);
  background: rgba(131, 181, 141, 0.08);
}
body.theme-dark .choice-button.selected {
  border-color: var(--accent-2);
  background: rgba(131, 181, 141, 0.14);
}
body.theme-dark .time-choice {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
}
body.theme-dark .time-choice.active {
  background: rgba(131, 181, 141, 0.18);
  border-color: var(--accent-2);
}
body.theme-dark .today-date {
  background: rgba(24, 35, 27, 0.85);
  border-color: rgba(131, 181, 141, 0.28);
  color: var(--text);
}

/* Live Focus Sprint Timer Bar */
.live-focus-timer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 13px;
  background: rgba(131, 181, 141, 0.09);
  border: 1px solid rgba(131, 181, 141, 0.28);
  margin: 4px 0;
  transition: all 0.2s ease;
}
.live-focus-timer-bar.running {
  background: rgba(131, 181, 141, 0.16);
  border-color: rgba(131, 181, 141, 0.55);
  box-shadow: 0 0 18px rgba(131, 181, 141, 0.18);
}
.focus-timer-left {
  display: flex;
  align-items: center;
  gap: 8px;
}
.focus-timer-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--muted);
}
.focus-timer-dot.pulse {
  background: #4ade80;
  box-shadow: 0 0 10px #4ade80;
  animation: nsPulse 1.4s infinite ease-in-out;
}
@keyframes nsPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.3); opacity: 0.65; }
}
.focus-timer-readout {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.04em;
}
.focus-timer-label {
  font-size: 12px;
  color: var(--text-soft);
}
.focus-timer-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Inline Quick-Add Form on Today */
.today-quick-add {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.today-quick-add input {
  flex: 1;
  min-height: 40px;
  padding: 8px 13px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  font-size: 13px;
}
.today-quick-add input:focus {
  outline: none;
  border-color: var(--accent-2);
  box-shadow: 0 0 0 3px rgba(131, 181, 141, 0.15);
}

/* Progress Bar on Tonight's Before-Sleep Checklist */
.mini-progress-track {
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
  margin: 4px 0 8px;
}
.mini-progress-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-2), #4ade80);
  transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Horizontally Scrollable Quick Dock & Voice Dictation Button in Coach */
.horizontal-scroll-chips {
  display: flex;
  align-items: center;
  gap: 7px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.horizontal-scroll-chips::-webkit-scrollbar {
  display: none;
}
.horizontal-scroll-chips > * {
  flex-shrink: 0;
}
.composer-quick-dock {
  margin-bottom: 8px;
  padding: 2px 2px 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.voice-btn {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 16px;
}
.voice-btn.recording {
  background: rgba(239, 68, 68, 0.22) !important;
  border-color: #ef4444 !important;
  box-shadow: 0 0 14px rgba(239, 68, 68, 0.45);
  animation: nsPulse 1.1s infinite ease-in-out;
}

/* Mobile-First Responsive Overrides */
@media (max-width: 680px) {
  .chat-top-bar {
    flex-direction: column;
    align-items: stretch !important;
    gap: 8px;
    padding: 10px 12px;
  }
  .chat-top-right {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .chat-top-right::-webkit-scrollbar {
    display: none;
  }
  .chat-top-right > * {
    flex-shrink: 0;
  }
  .coach-compact-shell .chat-workspace {
    min-height: calc(100dvh - 128px);
    border-radius: 18px;
  }
  .coach-compact-shell .chat-messages {
    max-height: calc(100dvh - 265px);
    min-height: 320px;
    padding: 12px;
  }
  .chat-composer {
    padding: 10px 12px;
  }
  .coach-options-grid {
    grid-template-columns: 1fr !important;
  }
  .proactive-header {
    flex-direction: column;
    align-items: stretch;
  }
  .today-subtabs {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 6px;
  }
  .today-subtabs::-webkit-scrollbar {
    display: none;
  }
  .today-subtabs .pill-button {
    flex: 1 0 auto;
    justify-content: center;
    text-align: center;
  }
  .live-focus-timer-bar {
    flex-wrap: wrap;
  }
}