@layer reset, base, layout, components, responsive;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; }
  body, h1, h2, h3, p { margin: 0; }
  button, textarea, select, input { font: inherit; }
  button, a { -webkit-tap-highlight-color: transparent; }
  button { border: 0; }
  a { color: inherit; text-decoration: none; }
}

@layer base {
  :root {
    --bg: #07090d;
    --bg-elevated: #0c0f15;
    --surface: rgba(19, 23, 31, 0.82);
    --surface-solid: #12161e;
    --surface-soft: rgba(255, 255, 255, 0.035);
    --line: rgba(255, 255, 255, 0.09);
    --line-strong: rgba(255, 255, 255, 0.16);
    --text: #f4f4f1;
    --text-soft: #c3c5cb;
    --muted: #7d828d;
    --violet: #9a8cff;
    --violet-soft: rgba(154, 140, 255, 0.14);
    --cyan: #6fe5d5;
    --cyan-soft: rgba(111, 229, 213, 0.12);
    --coral: #ff8f76;
    --danger: #ff8178;
    --radius-xl: 28px;
    --radius-lg: 22px;
    --radius-md: 16px;
    --shadow: 0 24px 80px rgba(0, 0, 0, 0.28);
  }

  html { background: var(--bg); color-scheme: dark; }
  body {
    min-height: 100vh;
    background:
      radial-gradient(circle at 80% -10%, rgba(99, 83, 211, 0.13), transparent 32rem),
      radial-gradient(circle at 15% 110%, rgba(36, 168, 150, 0.08), transparent 30rem),
      var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", "Helvetica Neue", sans-serif;
    letter-spacing: -0.012em;
  }
  button, select { color: inherit; }
  button:not(:disabled), select { cursor: pointer; }
  button:focus-visible, a:focus-visible, textarea:focus-visible, input:focus-visible, select:focus-visible {
    outline: 2px solid var(--violet);
    outline-offset: 3px;
  }
  ::selection { background: rgba(154, 140, 255, 0.35); }
}

@layer layout {
  .app-shell { min-height: 100vh; }
  .desktop-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 20;
    display: flex;
    width: 92px;
    flex-direction: column;
    align-items: center;
    border-right: 1px solid var(--line);
    background: rgba(7, 9, 13, 0.78);
    padding: 26px 14px 20px;
    backdrop-filter: blur(24px);
  }
  .app-main { min-height: 100vh; margin-left: 92px; }
  .page-frame { width: min(1360px, 100%); margin: 0 auto; padding: 42px clamp(28px, 4.5vw, 72px) 80px; }
  .inner-page { width: min(1080px, 100%); }
  .today-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 28px; align-items: start; }
  .today-primary { display: grid; gap: 24px; min-width: 0; }
  .today-context { display: grid; gap: 14px; position: sticky; top: 28px; }
  .mobile-nav { display: none; }
}

@layer components {
  .brand-mark { position: relative; display: grid; width: 48px; height: 48px; place-items: center; margin-bottom: 42px; }
  .brand-orbit { position: absolute; inset: 3px; border: 1px solid rgba(154, 140, 255, 0.48); border-radius: 50%; transform: rotate(-28deg) scaleY(.68); }
  .brand-core { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 50%; background: linear-gradient(145deg, #b8afff, #6a5dd8); box-shadow: 0 0 26px rgba(154, 140, 255, .28); font-size: 13px; font-weight: 700; }
  .desktop-nav { display: flex; width: 100%; flex-direction: column; gap: 10px; }
  .nav-item { display: flex; min-height: 57px; flex-direction: column; align-items: center; justify-content: center; gap: 5px; border: 1px solid transparent; border-radius: 15px; color: var(--muted); font-size: 10px; transition: .2s ease; }
  .nav-item:hover { color: var(--text-soft); background: var(--surface-soft); }
  .nav-item.is-active { border-color: rgba(154, 140, 255, .15); background: var(--violet-soft); color: #c9c2ff; }
  .nav-settings { width: 100%; margin-top: auto; }

  .eyebrow { color: var(--muted); font-size: 11px; font-weight: 650; letter-spacing: .16em; text-transform: uppercase; }
  .today-header, .page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 34px; }
  .today-header h1, .page-header h1 { margin-top: 8px; font-size: clamp(30px, 3.2vw, 48px); font-weight: 560; letter-spacing: -.045em; }
  .page-description { max-width: 600px; margin-top: 12px; color: var(--muted); font-size: 15px; line-height: 1.65; }
  .avatar-button, .icon-button { display: grid; flex: 0 0 auto; place-items: center; border: 1px solid var(--line); background: var(--surface-soft); color: var(--text-soft); }
  .avatar-button { width: 42px; height: 42px; border-radius: 50%; font-size: 13px; font-weight: 650; }
  .icon-button { width: 38px; height: 38px; border-radius: 12px; }
  .icon-button:hover { border-color: var(--line-strong); color: var(--text); }
  .icon-button.danger:hover { color: var(--danger); }
  .icon-button.subtle { width: 32px; height: 32px; border-color: transparent; }

  .hero-brief { position: relative; min-height: 320px; overflow: hidden; border: 1px solid rgba(154, 140, 255, .16); border-radius: var(--radius-xl); background: linear-gradient(145deg, rgba(30, 28, 48, .9), rgba(14, 17, 24, .96) 62%); padding: clamp(28px, 5vw, 56px); box-shadow: var(--shadow); }
  .hero-glow { position: absolute; width: 280px; height: 280px; border-radius: 50%; background: rgba(137, 121, 255, .16); filter: blur(70px); right: -70px; top: -100px; pointer-events: none; }
  .hero-label { position: relative; display: inline-flex; align-items: center; gap: 8px; color: #b6adff; font-size: 11px; font-weight: 700; letter-spacing: .16em; }
  .hero-brief h2 { position: relative; max-width: 720px; margin-top: 42px; font-size: clamp(30px, 4.5vw, 58px); font-weight: 520; letter-spacing: -.052em; line-height: 1.08; }
  .hero-brief > p { position: relative; max-width: 700px; margin-top: 22px; color: var(--text-soft); font-size: clamp(15px, 1.5vw, 18px); line-height: 1.75; }
  .evidence-trigger { position: relative; display: inline-flex; align-items: center; gap: 7px; margin-top: 28px; padding: 0; background: transparent; color: #aaa3e9; font-size: 13px; }
  .evidence-list { position: relative; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
  .evidence-list span { border: 1px solid rgba(154, 140, 255, .14); border-radius: 999px; background: rgba(154, 140, 255, .07); padding: 7px 10px; color: #a9a5bd; font-size: 11px; }

  .section-block { border: 1px solid var(--line); border-radius: var(--radius-xl); background: rgba(15, 18, 25, .68); padding: clamp(24px, 3.5vw, 38px); }
  .section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
  .section-heading h2 { margin-top: 7px; font-size: clamp(22px, 2.5vw, 30px); font-weight: 560; letter-spacing: -.035em; }
  .status-pill { display: inline-flex; align-items: center; gap: 6px; border: 1px solid rgba(111, 229, 213, .15); border-radius: 999px; background: var(--cyan-soft); padding: 7px 10px; color: #96e8dc; font-size: 11px; }
  .training-card { margin-top: 30px; }
  .training-meta { color: var(--cyan); font-size: 12px; letter-spacing: .04em; }
  .training-copy { max-width: 760px; margin-top: 12px; color: var(--text-soft); font-size: 17px; line-height: 1.7; }
  .action-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 28px; }
  .primary-button, .secondary-button, .text-button, .compact-primary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 13px; transition: transform .18s ease, opacity .18s ease, background .18s ease; }
  .primary-button { min-height: 45px; background: var(--text); padding: 0 17px; color: #111319; font-size: 13px; font-weight: 650; }
  .primary-button:hover { transform: translateY(-1px); }
  .primary-button:disabled { cursor: not-allowed; opacity: .35; }
  .secondary-button { min-height: 45px; border: 1px solid var(--line-strong); background: transparent; padding: 0 16px; color: var(--text-soft); font-size: 13px; }
  .text-button { min-height: 42px; background: transparent; padding: 0 11px; color: var(--muted); font-size: 13px; }
  .text-button:disabled { opacity: .2; }
  .full-width { width: 100%; }
  .compact-primary { min-height: 34px; background: var(--text); padding: 0 12px; color: #111319; font-size: 12px; font-weight: 650; }
  .feedback-state { display: flex; align-items: center; gap: 9px; margin-top: 26px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-soft); padding: 13px 15px; color: var(--text-soft); font-size: 13px; }
  .feedback-state button { margin-left: auto; background: transparent; color: var(--muted); font-size: 12px; }
  .feedback-accepted, .feedback-recovery { border-color: rgba(111,229,213,.18); color: #a8ddd5; }

  .reflection-invite { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; border: 1px solid var(--line); border-radius: var(--radius-xl); background: linear-gradient(120deg, rgba(23, 27, 37, .92), rgba(12, 15, 21, .88)); padding: 25px; }
  .reflection-icon { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 15px; background: rgba(154,140,255,.12); color: #b8afff; }
  .reflection-invite h2 { margin-top: 5px; font-size: 19px; font-weight: 560; }
  .reflection-invite p:not(.eyebrow) { margin-top: 6px; color: var(--muted); font-size: 13px; line-height: 1.55; }
  .round-arrow { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--text-soft); }

  .context-card { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); padding: 22px; backdrop-filter: blur(18px); }
  .context-card-top { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 11px; letter-spacing: .05em; }
  .context-card h3 { margin-top: 18px; font-size: 16px; font-weight: 550; line-height: 1.45; }
  .context-card p { margin-top: 10px; color: var(--muted); font-size: 12px; line-height: 1.55; }
  .tiny-status { border-radius: 999px; background: var(--violet-soft); padding: 5px 8px; color: #ada5f0; }
  .tiny-status.calm { background: var(--surface-soft); color: var(--muted); }
  .progress-track { overflow: hidden; height: 3px; margin-top: 20px; border-radius: 99px; background: rgba(255,255,255,.07); }
  .progress-track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--violet), var(--cyan)); }
  .challenge-card { background: linear-gradient(145deg, rgba(30, 28, 48, .75), rgba(16, 18, 25, .9)); }
  .inline-action { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; padding: 0; background: transparent; color: #b5adf6; font-size: 12px; }
  .source-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 12px rgba(111,229,213,.55); }
  .source-label { display: block; margin-top: 14px; color: #696e78; font-size: 10px; }

  .capture-fab { position: fixed; z-index: 18; right: 28px; bottom: 28px; display: inline-flex; align-items: center; gap: 9px; min-height: 48px; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; background: rgba(242, 242, 238, .95); padding: 0 18px; color: #111319; box-shadow: 0 14px 50px rgba(0,0,0,.35); font-size: 13px; font-weight: 650; backdrop-filter: blur(20px); }
  .sheet-backdrop { position: fixed; z-index: 100; inset: 0; display: grid; place-items: end center; background: rgba(0,0,0,.52); padding: 18px; backdrop-filter: blur(8px); }
  .capture-sheet { width: min(620px, 100%); border: 1px solid var(--line-strong); border-radius: 28px; background: #11151d; padding: 14px 24px 24px; box-shadow: 0 30px 100px rgba(0,0,0,.5); }
  .sheet-handle { width: 36px; height: 4px; margin: 0 auto 18px; border-radius: 99px; background: rgba(255,255,255,.18); }
  .sheet-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
  .sheet-heading h2 { margin-top: 7px; font-size: 24px; font-weight: 560; }
  .capture-sheet textarea, .reflection-step textarea, .memory-editor { width: 100%; resize: vertical; border: 1px solid var(--line); border-radius: 16px; background: rgba(0,0,0,.2); color: var(--text); line-height: 1.65; }
  .capture-sheet textarea { min-height: 130px; margin-top: 22px; padding: 16px; }
  textarea::placeholder { color: #5f646e; }
  .capture-prompts { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 18px; }
  .capture-prompts button { border: 1px solid var(--line); border-radius: 999px; background: transparent; padding: 7px 10px; color: var(--muted); font-size: 11px; }
  .capture-success { display: flex; min-height: 180px; align-items: center; justify-content: center; gap: 10px; color: #a8e1d8; }

  .filter-row { display: flex; gap: 7px; overflow-x: auto; margin: 8px 0 38px; padding-bottom: 3px; scrollbar-width: none; }
  .filter-row button, .segmented-control button { white-space: nowrap; border: 1px solid transparent; background: transparent; color: var(--muted); }
  .filter-row button { border-radius: 999px; padding: 8px 13px; font-size: 12px; }
  .filter-row button.is-active { border-color: var(--line); background: var(--surface-soft); color: var(--text); }
  .timeline-list { display: grid; }
  .timeline-entry { display: grid; grid-template-columns: 28px 88px minmax(0, 1fr); gap: 14px; min-height: 150px; }
  .timeline-rail { position: relative; display: flex; justify-content: center; }
  .timeline-node { position: relative; z-index: 1; width: 11px; height: 11px; margin-top: 8px; border: 2px solid var(--bg); border-radius: 50%; background: var(--violet); box-shadow: 0 0 0 1px rgba(154,140,255,.34); }
  .node-workout { background: var(--cyan); box-shadow: 0 0 0 1px rgba(111,229,213,.34); }
  .node-milestone { background: var(--coral); box-shadow: 0 0 0 1px rgba(255,143,118,.34); }
  .timeline-line { position: absolute; top: 19px; bottom: -8px; width: 1px; background: var(--line); }
  .timeline-date { display: flex; flex-direction: column; gap: 5px; padding-top: 5px; }
  .timeline-date strong { font-size: 12px; font-weight: 560; }
  .timeline-date span { color: var(--muted); font-size: 11px; }
  .timeline-card { margin-bottom: 18px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: rgba(16,19,26,.7); padding: 20px 22px; }
  .timeline-card-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
  .tag-row { display: flex; flex-wrap: wrap; gap: 6px; }
  .tag-row span { border-radius: 999px; background: var(--surface-soft); padding: 5px 8px; color: var(--muted); font-size: 10px; }
  .timeline-card h2 { margin-top: 15px; font-size: 18px; font-weight: 560; }
  .timeline-card > p { margin-top: 8px; color: var(--text-soft); font-size: 13px; line-height: 1.65; }
  .event-state { display: flex; gap: 8px; margin-top: 16px; }
  .event-state span { border-left: 1px solid var(--line-strong); padding-left: 9px; color: var(--muted); font-size: 11px; }

  .segmented-control { display: inline-flex; gap: 4px; margin-bottom: 22px; border: 1px solid var(--line); border-radius: 14px; background: rgba(0,0,0,.16); padding: 4px; }
  .segmented-control button { border-radius: 10px; padding: 9px 12px; font-size: 12px; }
  .segmented-control button span { margin-left: 5px; color: #676c76; }
  .segmented-control button.is-active { background: rgba(255,255,255,.08); color: var(--text); }
  .memory-list { display: grid; gap: 12px; }
  .memory-card { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: start; gap: 16px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: rgba(16,19,26,.72); padding: 22px; }
  .memory-status-dot { width: 9px; height: 9px; margin-top: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 12px rgba(111,229,213,.3); }
  .memory-status-dot.proposed { background: var(--violet); box-shadow: 0 0 12px rgba(154,140,255,.3); }
  .memory-content h2 { font-size: 17px; font-weight: 520; line-height: 1.5; }
  .memory-source { display: flex; align-items: center; gap: 6px; margin-top: 12px; color: var(--muted); font-size: 11px; }
  .memory-updated { margin-top: 7px; color: #5d626c; font-size: 10px; }
  .memory-actions { display: flex; gap: 7px; }
  .memory-editor { min-height: 90px; padding: 12px; }
  .memory-note { display: flex; align-items: flex-start; gap: 9px; max-width: 720px; margin-top: 22px; color: var(--muted); }
  .memory-note p { font-size: 12px; line-height: 1.65; }
  .empty-state { display: grid; min-height: 260px; place-items: center; align-content: center; gap: 10px; border: 1px dashed var(--line); border-radius: var(--radius-lg); color: var(--muted); text-align: center; }
  .empty-state h2 { color: var(--text-soft); font-size: 18px; }
  .empty-state p { font-size: 12px; }

  .reflection-page { display: grid; min-height: 100vh; place-items: center; padding: 36px; }
  .reflection-flow, .reflection-complete { width: min(680px, 100%); }
  .reflection-progress { overflow: hidden; height: 3px; border-radius: 99px; background: var(--surface-soft); }
  .reflection-progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--violet), var(--cyan)); transition: width .25s ease; }
  .reflection-step { min-height: 520px; padding: 64px 0 38px; }
  .reflection-step h1, .reflection-complete h1 { margin-top: 12px; font-size: clamp(32px, 5vw, 52px); font-weight: 520; letter-spacing: -.05em; line-height: 1.1; }
  .step-hint, .reflection-complete > p { max-width: 570px; margin-top: 16px; color: var(--muted); font-size: 14px; line-height: 1.7; }
  .mood-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 40px; }
  .mood-grid button { min-height: 56px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface-soft); color: var(--text-soft); }
  .mood-grid button.is-selected, .choice-list button.is-selected { border-color: rgba(154,140,255,.36); background: var(--violet-soft); color: #d6d1ff; }
  .energy-control { display: grid; grid-template-columns: 1fr auto; gap: 14px; margin-top: 34px; color: var(--text-soft); font-size: 13px; }
  .energy-control strong { color: var(--cyan); font-size: 12px; }
  .energy-control input { grid-column: 1 / -1; width: 100%; accent-color: var(--violet); }
  .reflection-step textarea { min-height: 210px; margin-top: 38px; padding: 18px; font-size: 16px; }
  .choice-list { display: grid; gap: 10px; margin-top: 38px; }
  .choice-list button { display: flex; min-height: 68px; align-items: center; justify-content: space-between; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-soft); padding: 0 18px; color: var(--text-soft); text-align: left; }
  .choice-list button span { display: flex; flex-direction: column; gap: 5px; }
  .choice-list small { color: var(--muted); font-size: 11px; }
  .privacy-note { display: flex; align-items: flex-start; gap: 8px; margin-top: 18px; color: var(--muted); font-size: 11px; line-height: 1.55; }
  .reflection-footer { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 20px; }
  .reflection-footer > span { color: var(--muted); font-size: 11px; }
  .reflection-complete { text-align: center; }
  .success-orbit { display: grid; width: 72px; height: 72px; place-items: center; margin: 0 auto 28px; border: 1px solid rgba(111,229,213,.28); border-radius: 50%; background: var(--cyan-soft); color: var(--cyan); box-shadow: 0 0 50px rgba(111,229,213,.1); }
  .reflection-complete > p { margin-inline: auto; }
  .reflection-summary { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin: 36px 0 26px; }
  .reflection-summary div { display: flex; flex-direction: column; gap: 7px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface-soft); padding: 16px; }
  .reflection-summary span { color: var(--muted); font-size: 10px; }
  .reflection-summary strong { font-size: 13px; font-weight: 550; }

  .settings-sections { display: grid; gap: 18px; }
  .settings-card { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: rgba(16,19,26,.72); padding: 24px; }
  .settings-heading { margin-bottom: 12px; }
  .settings-heading h2 { margin-top: 6px; font-size: 20px; font-weight: 560; }
  .setting-row, .setting-link { display: flex; min-height: 74px; align-items: center; justify-content: space-between; gap: 20px; width: 100%; border-top: 1px solid var(--line); background: transparent; text-align: left; }
  .setting-row > div, .setting-link > span:first-child { display: flex; flex-direction: column; gap: 6px; }
  .setting-row strong, .setting-link strong { font-size: 13px; font-weight: 550; }
  .setting-row span, .setting-link small { color: var(--muted); font-size: 11px; }
  .toggle { position: relative; width: 43px; height: 25px; flex: 0 0 auto; border-radius: 99px; background: #272b34; transition: .2s ease; }
  .toggle span { position: absolute; left: 3px; top: 3px; width: 19px; height: 19px; border-radius: 50%; background: #90949d; transition: .2s ease; }
  .toggle.is-on { background: var(--violet); }
  .toggle.is-on span { left: 21px; background: white; }
  .select-row select { border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); padding: 8px 28px 8px 10px; color: var(--text-soft); font-size: 12px; }
  .setting-link > span:last-child { color: var(--muted); font-size: 11px; }
  .danger-text strong { color: #e5938d; }
}

@layer responsive {
  @media (max-width: 1080px) {
    .today-layout { grid-template-columns: 1fr; }
    .today-context { position: static; grid-template-columns: repeat(2, minmax(0,1fr)); }
    .related-card { grid-column: 1 / -1; }
  }

  @media (max-width: 760px) {
    .desktop-sidebar { display: none; }
    .app-main { margin-left: 0; padding-bottom: 78px; }
    .page-frame { padding: 26px 18px 96px; }
    .mobile-nav { position: fixed; z-index: 50; inset: auto 10px 10px; display: grid; grid-template-columns: repeat(3, 1fr); min-height: 62px; border: 1px solid var(--line-strong); border-radius: 20px; background: rgba(15,18,25,.86); padding: 5px; box-shadow: 0 12px 44px rgba(0,0,0,.38); backdrop-filter: blur(24px); }
    .mobile-nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border-radius: 15px; color: var(--muted); font-size: 10px; }
    .mobile-nav-item.is-active { background: var(--violet-soft); color: #c5bdff; }
    .today-header, .page-header { margin-bottom: 25px; }
    .today-header h1, .page-header h1 { font-size: 31px; }
    .page-description { font-size: 13px; }
    .hero-brief { min-height: 340px; padding: 28px 23px; }
    .hero-brief h2 { margin-top: 52px; font-size: 37px; }
    .hero-brief > p { font-size: 15px; line-height: 1.7; }
    .section-block { padding: 23px 19px; }
    .section-heading { align-items: center; }
    .section-heading h2 { font-size: 23px; }
    .status-pill { padding: 6px 8px; }
    .training-copy { font-size: 15px; }
    .action-row { display: grid; grid-template-columns: 1fr 1fr; }
    .action-row .primary-button { grid-column: 1 / -1; }
    .feedback-state { align-items: flex-start; }
    .reflection-invite { grid-template-columns: auto 1fr; padding: 20px 17px; }
    .reflection-invite .round-arrow { display: none; }
    .today-context { grid-template-columns: 1fr; }
    .related-card { grid-column: auto; }
    .capture-fab { right: 18px; bottom: 87px; }
    .capture-fab span { display: none; }
    .capture-fab { width: 48px; padding: 0; justify-content: center; }
    .sheet-backdrop { padding: 0; }
    .capture-sheet { border-radius: 28px 28px 0 0; padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
    .timeline-entry { grid-template-columns: 22px minmax(0,1fr); gap: 9px; }
    .timeline-date { grid-column: 2; grid-row: 1; flex-direction: row; align-items: center; }
    .timeline-card { grid-column: 2; grid-row: 2; margin-top: -106px; padding: 18px; }
    .timeline-rail { grid-row: 1 / span 2; }
    .timeline-entry { padding-top: 22px; }
    .memory-card { grid-template-columns: auto 1fr; padding: 18px; }
    .memory-actions { grid-column: 2; flex-wrap: wrap; margin-top: 5px; }
    .reflection-page { min-height: calc(100vh - 78px); padding: 24px 18px 96px; place-items: start center; }
    .reflection-step { min-height: 500px; padding-top: 44px; }
    .mood-grid { grid-template-columns: repeat(2,1fr); }
    .reflection-summary { grid-template-columns: 1fr; }
    .settings-card { padding: 19px; }
    .setting-row, .setting-link { min-height: 82px; }
    .select-row { align-items: flex-start; flex-direction: column; padding: 18px 0; }
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  }
}

.prototype-brand, .desktop-sidebar button, .mobile-nav button, .prototype-reflection-link { color: inherit; }
.prototype-brand { border: 0; background: transparent; cursor: pointer; padding: 0; }
.nav-symbol { font-size: 20px; line-height: 1; }
.desktop-sidebar .nav-item { width: 100%; }
.desktop-sidebar button.nav-item { border-color: transparent; background: transparent; }
.desktop-sidebar button.nav-item.is-active { border-color: rgba(154,140,255,.15); background: var(--violet-soft); }
.prototype-reflection-link { width: 100%; text-align: left; }
.prototype-view[hidden], [hidden] { display: none !important; }
.mobile-nav button { border: 0; background: transparent; }
.mobile-nav button.is-active { background: var(--violet-soft); }
.prototype-toast { position: fixed; z-index: 200; left: 50%; bottom: 30px; transform: translateX(-50%); border: 1px solid var(--line-strong); border-radius: 999px; background: rgba(20,24,32,.94); padding: 11px 16px; color: var(--text-soft); box-shadow: var(--shadow); font-size: 12px; backdrop-filter: blur(20px); }
#view-reflection .reflection-page { padding-bottom: 40px; }
#reflection-content .reflection-demo-options { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; margin-top: 34px; }
#reflection-content .reflection-demo-options button { min-height: 56px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface-soft); color: var(--text-soft); }
#reflection-content .reflection-demo-options button.is-selected { border-color: rgba(154,140,255,.36); background: var(--violet-soft); color: #d6d1ff; }
#reflection-content textarea { width: 100%; min-height: 210px; margin-top: 34px; resize: vertical; border: 1px solid var(--line); border-radius: 16px; background: rgba(0,0,0,.2); padding: 18px; color: var(--text); font: inherit; line-height: 1.65; }
@media (max-width:760px) { .prototype-toast { bottom: 90px; white-space: nowrap; } }


/* One AI core, two genuinely different workspaces */
.workspace-topbar { position: sticky; top: 0; z-index: 45; display: flex; min-height: 74px; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--line); background: rgba(7,9,13,.82); padding: 12px clamp(18px,4.5vw,72px); backdrop-filter: blur(28px); }
.workspace-switch { display: inline-grid; grid-template-columns: 1fr 1fr; gap: 4px; border: 1px solid var(--line); border-radius: 16px; background: rgba(0,0,0,.18); padding: 4px; }
.workspace-switch button { display: flex; min-width: 128px; align-items: center; justify-content: space-between; gap: 16px; border: 0; border-radius: 12px; background: transparent; padding: 9px 12px; color: var(--muted); text-align: left; }
.workspace-switch button span { font-size: 13px; font-weight: 650; }
.workspace-switch button small { font-size: 10px; }
.workspace-switch button[data-space="life"].is-active { background: linear-gradient(120deg, rgba(154,140,255,.22), rgba(255,143,118,.1)); color: #d6d1ff; }
.workspace-switch button[data-space="work"].is-active { background: linear-gradient(120deg, rgba(74,133,255,.24), rgba(61,190,255,.1)); color: #b9d4ff; }
.core-state { display: flex; align-items: center; gap: 10px; }
.core-state > div { display: flex; flex-direction: column; gap: 3px; }
.core-state strong { color: var(--text-soft); font-size: 11px; font-weight: 600; }
.core-state small { color: var(--muted); font-size: 9px; }
.core-pulse { display: block; width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 14px rgba(111,229,213,.58); }

body.space-work { background: radial-gradient(circle at 75% -10%, rgba(45,99,190,.16), transparent 34rem), linear-gradient(180deg,#070b12,#080a0f 60%); }
.space-work .brand-core { background: linear-gradient(145deg,#8ab9ff,#315db6); box-shadow: 0 0 28px rgba(73,130,225,.3); }
.space-work .brand-orbit { border-color: rgba(93,153,255,.55); }
.space-work .desktop-sidebar button.nav-item.is-active, .space-work .mobile-nav button.is-active { border-color: rgba(75,135,237,.2); background: rgba(64,116,207,.14); color: #9dc2ff; }
.space-work .workspace-topbar { background: rgba(7,11,18,.88); }

.work-page { width: min(1360px,100%); }
.work-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 38px; }
.work-header h1 { margin-top: 8px; font-size: clamp(30px,3.2vw,46px); font-weight: 540; letter-spacing: -.045em; }
.work-header > div > p:last-child { margin-top: 10px; color: #758092; font-size: 13px; }
.work-mode-badge { border: 1px solid rgba(94,151,248,.2); border-radius: 8px; background: rgba(56,103,187,.1); padding: 8px 10px; color: #7aa8ef; font: 600 9px/1 -apple-system,BlinkMacSystemFont,sans-serif; letter-spacing: .14em; }
.work-layout { display: grid; grid-template-columns: minmax(0,1fr) 286px; gap: 28px; align-items: start; }
.work-main-flow { display: grid; gap: 24px; }
.work-focus-panel { display: grid; grid-template-columns: 52px minmax(0,1fr); gap: 24px; border: 1px solid rgba(91,139,219,.18); border-left: 3px solid #5687d8; border-radius: 10px; background: linear-gradient(115deg,rgba(20,31,50,.9),rgba(12,16,23,.95)); padding: 34px; }
.work-focus-index { color: #5475a9; font: 500 12px/1 ui-monospace,SFMono-Regular,Menlo,monospace; }
.work-focus-content h2 { max-width: 720px; margin-top: 13px; font-size: clamp(27px,3.5vw,43px); font-weight: 520; letter-spacing: -.045em; line-height: 1.15; }
.work-focus-content > p { max-width: 700px; margin-top: 18px; color: #aab3c2; font-size: 15px; line-height: 1.7; }
.work-focus-meta { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 22px; color: #667387; font-size: 11px; }
.work-primary, .work-secondary { min-height: 43px; border-radius: 8px; padding: 0 15px; font-size: 12px; }
.work-primary { background: #dbe9ff; color: #0b1728; font-weight: 650; }
.work-secondary { border: 1px solid rgba(118,159,226,.2); background: rgba(69,111,180,.08); color: #9eb9e4; }
.work-flow-section { border-top: 1px solid var(--line); padding-top: 26px; }
.work-section-title { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 14px; }
.work-section-title h2 { margin-top: 6px; font-size: 20px; font-weight: 550; }
.work-section-title > span { color: #617087; font-size: 11px; }
.work-task-list { border-top: 1px solid rgba(255,255,255,.07); }
.work-task { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; width: 100%; min-height: 76px; border-bottom: 1px solid rgba(255,255,255,.07); background: transparent; color: inherit; text-align: left; }
.work-task:hover { background: rgba(63,101,162,.05); }
.work-task-check { width: 17px; height: 17px; border: 1px solid #3c4d68; border-radius: 4px; }
.work-task > span:nth-child(2) { display: flex; flex-direction: column; gap: 6px; }
.work-task strong { color: #d5dbe5; font-size: 13px; font-weight: 550; }
.work-task small { color: #657084; font-size: 10px; }
.work-task em { color: #6680a9; font-size: 10px; font-style: normal; }
.work-task.is-complete { opacity: .45; }
.work-task.is-complete strong { text-decoration: line-through; }
.work-task.is-complete .work-task-check { background: #6e9eea; box-shadow: inset 0 0 0 4px #15243a; }
.work-intelligence-strip { display: flex; align-items: center; gap: 13px; border: 1px solid rgba(84,139,230,.15); border-radius: 10px; background: rgba(28,48,80,.16); padding: 16px 18px; }
.work-intelligence-strip > div { display: flex; flex: 1; flex-direction: column; gap: 4px; }
.work-intelligence-strip p { color: #6d8fc5; font-size: 10px; }
.work-intelligence-strip strong { color: #aeb9c9; font-size: 12px; font-weight: 500; }
.work-intelligence-strip button { background: transparent; color: #759bda; font-size: 10px; }
.work-agenda { position: sticky; top: 98px; border-left: 1px solid rgba(255,255,255,.09); padding-left: 24px; }
.work-agenda-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 28px; }
.work-agenda-head strong { font-size: 13px; font-weight: 550; }
.work-agenda ol { display: grid; gap: 0; padding: 0; list-style: none; }
.work-agenda li { position: relative; display: grid; grid-template-columns: 48px 1fr; gap: 12px; min-height: 78px; }
.work-agenda li::before { position: absolute; left: 52px; top: 18px; bottom: -5px; width: 1px; background: #253247; content: ""; }
.work-agenda li:last-child::before { display: none; }
.work-agenda time { color: #64748b; font: 500 10px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace; }
.work-agenda li div { position: relative; display: flex; flex-direction: column; gap: 5px; padding-left: 18px; }
.work-agenda li div::before { position: absolute; left: -1px; top: 4px; width: 7px; height: 7px; border: 2px solid #101722; border-radius: 50%; background: #628fd5; box-shadow: 0 0 0 1px #35537f; content: ""; }
.work-agenda li strong { color: #bdc6d4; font-size: 12px; font-weight: 530; }
.work-agenda li span { color: #5e697a; font-size: 10px; }
.work-close-entry { display: flex; width: 100%; align-items: center; justify-content: space-between; border: 1px solid rgba(90,139,219,.16); border-radius: 9px; background: rgba(47,83,140,.1); padding: 14px; color: #9fb8df; text-align: left; }
.work-close-entry > span:first-child { display: flex; flex-direction: column; gap: 4px; }
.work-close-entry small { color: #5f789f; font-size: 9px; }
.work-close-entry strong { font-size: 12px; }

.work-record-capture { border: 1px solid rgba(90,139,219,.16); border-radius: 10px; background: rgba(17,25,38,.82); padding: 24px; }
.work-record-capture textarea { width: 100%; min-height: 110px; margin-top: 16px; resize: vertical; border: 0; border-bottom: 1px solid rgba(255,255,255,.08); background: transparent; padding: 0 0 16px; color: var(--text); font: inherit; line-height: 1.6; outline: 0; }
.work-record-capture > div { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px; }
.work-record-capture > div > span { color: #5f6b7e; font-size: 10px; }
.work-record-stream { display: grid; margin-top: 38px; }
.work-record-stream article { display: grid; grid-template-columns: 110px minmax(0,1fr); gap: 24px; border-top: 1px solid rgba(255,255,255,.08); padding: 25px 0; }
.work-record-stream time { color: #5d6879; font: 500 10px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace; }
.record-source { color: #759fe2; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.record-source.manual { color: #8791a0; }
.record-source.future { color: #566275; }
.work-record-stream h2 { margin-top: 8px; color: #d2d9e3; font-size: 17px; font-weight: 540; }
.work-record-stream p { margin-top: 9px; color: #7c8798; font-size: 12px; line-height: 1.65; }
.future-record { opacity: .55; }

.work-close-page { display: grid; grid-template-columns: minmax(280px,1fr) minmax(360px,560px); gap: 8vw; width: min(1200px,100%); min-height: calc(100vh - 74px); align-items: center; margin: 0 auto; padding: 60px clamp(28px,5vw,72px) 100px; }
.work-close-intro h1 { margin-top: 14px; font-size: clamp(38px,5vw,66px); font-weight: 500; letter-spacing: -.055em; line-height: 1.08; }
.work-close-intro > p:last-child { max-width: 480px; margin-top: 22px; color: #788496; font-size: 14px; line-height: 1.7; }
.work-close-form { display: grid; gap: 18px; border-left: 1px solid #273248; padding-left: 40px; }
.work-close-form label { display: grid; gap: 9px; }
.work-close-form label > span { color: #8b98aa; font-size: 11px; }
.work-close-form textarea, .work-close-form input { width: 100%; border: 1px solid rgba(255,255,255,.09); border-radius: 8px; background: rgba(11,17,26,.76); padding: 13px; color: var(--text); font: inherit; line-height: 1.55; }
.work-close-form textarea { min-height: 90px; resize: vertical; }

@media (max-width:900px) {
  .work-layout { grid-template-columns: 1fr; }
  .work-agenda { position: static; border-left: 0; border-top: 1px solid var(--line); padding: 24px 0 0; }
  .work-close-page { grid-template-columns: 1fr; align-content: start; gap: 44px; }
  .work-close-form { border-left: 0; border-top: 1px solid #273248; padding: 32px 0 0; }
}
@media (max-width:760px) {
  .workspace-topbar { min-height: 68px; padding: 10px 14px; }
  .workspace-switch { flex: 1; }
  .workspace-switch button { min-width: 0; justify-content: center; padding-inline: 9px; }
  .workspace-switch button small { display: none; }
  .core-state > div { display: none; }
  .work-header { margin-bottom: 26px; }
  .work-header > div > p:last-child { line-height: 1.55; }
  .work-mode-badge { display: none; }
  .work-focus-panel { grid-template-columns: 1fr; gap: 16px; padding: 24px 20px; }
  .work-focus-content h2 { font-size: 30px; }
  .work-task { grid-template-columns: auto 1fr; padding: 10px 0; }
  .work-task em { grid-column: 2; }
  .work-intelligence-strip { align-items: flex-start; }
  .work-intelligence-strip button { display: none; }
  .work-record-capture { padding: 20px 17px; }
  .work-record-capture > div { align-items: stretch; flex-direction: column; }
  .work-record-stream article { grid-template-columns: 1fr; gap: 10px; }
  .work-close-page { padding: 42px 18px 110px; }
  .work-close-intro h1 { font-size: 43px; }
}


/* Life workspace — luminous, warm and alive. This intentionally differs from Work. */
body.space-life {
  --bg: #f3f1ed;
  --bg-elevated: #faf9f6;
  --surface: rgba(255,255,255,.78);
  --surface-solid: #ffffff;
  --surface-soft: rgba(35,30,47,.045);
  --line: rgba(40,35,52,.095);
  --line-strong: rgba(40,35,52,.16);
  --text: #24212a;
  --text-soft: #55515e;
  --muted: #817c88;
  --violet: #7766e8;
  --violet-soft: rgba(119,102,232,.11);
  --cyan: #188f86;
  --cyan-soft: rgba(42,174,161,.11);
  --coral: #ef765e;
  --danger: #d85353;
  background:
    radial-gradient(circle at 8% 10%, rgba(255,196,119,.24), transparent 25rem),
    radial-gradient(circle at 92% 6%, rgba(137,120,244,.18), transparent 27rem),
    radial-gradient(circle at 78% 85%, rgba(77,205,185,.13), transparent 25rem),
    linear-gradient(145deg,#f8f4ee 0%,#f2f0ed 48%,#f4f1f7 100%);
  color: var(--text);
}
body.space-life .workspace-topbar {
  border-bottom-color: rgba(48,40,61,.08);
  background: rgba(250,248,244,.8);
  box-shadow: 0 8px 35px rgba(67,51,85,.035);
}
body.space-life .desktop-sidebar {
  border-right-color: rgba(48,40,61,.08);
  background: rgba(248,246,241,.76);
  box-shadow: 10px 0 35px rgba(67,51,85,.03);
}
body.space-life .brand-core {
  background: linear-gradient(145deg,#8c72f3 10%,#f17b72 58%,#efae62);
  box-shadow: 0 8px 25px rgba(178,102,154,.25);
  color: white;
}
body.space-life .brand-orbit { border-color: rgba(128,92,218,.52); }
body.space-life .nav-item:hover { background: rgba(119,102,232,.065); color: #645e6d; }
body.space-life .desktop-sidebar button.nav-item.is-active,
body.space-life .mobile-nav button.is-active {
  border-color: rgba(119,102,232,.1);
  background: linear-gradient(135deg,rgba(119,102,232,.13),rgba(240,125,104,.08));
  color: #6658c9;
}
body.space-life .mobile-nav {
  border-color: rgba(60,49,73,.1);
  background: rgba(250,248,245,.88);
  box-shadow: 0 14px 45px rgba(60,46,75,.14);
}
body.space-life .core-state strong { color: #5c5664; }
body.space-life .core-state small { color: #97919d; }
body.space-life .core-pulse {
  background: #45c9b4;
  box-shadow: 0 0 0 4px rgba(69,201,180,.1),0 0 18px rgba(69,201,180,.45);
}
body.space-life .workspace-switch {
  border-color: rgba(52,43,65,.09);
  background: rgba(255,255,255,.52);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}
body.space-life .workspace-switch button[data-space="life"].is-active {
  background: linear-gradient(120deg,rgba(132,107,238,.18),rgba(242,130,105,.16),rgba(247,186,98,.13));
  box-shadow: 0 4px 15px rgba(121,91,170,.09);
  color: #6554bd;
}
body.space-life .workspace-switch button[data-space="work"] { color: #77727d; }

body.space-life .avatar-button,
body.space-life .icon-button {
  border-color: rgba(48,40,61,.09);
  background: rgba(255,255,255,.66);
  box-shadow: 0 5px 18px rgba(61,48,75,.06);
  color: #655e6c;
}
body.space-life .eyebrow { color: #8b8490; }
body.space-life .today-header h1,
body.space-life .page-header h1 { color: #27232d; }

body.space-life .hero-brief {
  border-color: rgba(255,255,255,.66);
  background:
    radial-gradient(circle at 86% 14%,rgba(255,246,179,.9),transparent 19rem),
    radial-gradient(circle at 8% 90%,rgba(109,209,191,.55),transparent 20rem),
    radial-gradient(circle at 50% 110%,rgba(238,117,148,.48),transparent 22rem),
    linear-gradient(135deg,#9c86f1 0%,#c59ce7 35%,#f4a28e 68%,#f2c77d 100%);
  box-shadow: 0 28px 75px rgba(120,79,142,.2), inset 0 1px 0 rgba(255,255,255,.5);
}
body.space-life .hero-glow {
  right: -35px;
  top: -55px;
  width: 340px;
  height: 340px;
  background: rgba(255,240,168,.48);
  filter: blur(58px);
}
body.space-life .hero-brief::after {
  position: absolute;
  right: -70px;
  bottom: -120px;
  width: 380px;
  height: 300px;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 50%;
  transform: rotate(-18deg);
  content: "";
  pointer-events: none;
}
body.space-life .hero-label { color: rgba(58,38,75,.66); }
body.space-life .hero-brief h2 { color: #302438; text-shadow: 0 1px rgba(255,255,255,.2); }
body.space-life .hero-brief > p { color: rgba(49,37,55,.72); }
body.space-life .evidence-trigger { color: rgba(58,40,78,.68); }
body.space-life .evidence-list span {
  border-color: rgba(64,43,79,.1);
  background: rgba(255,255,255,.25);
  color: rgba(52,38,63,.72);
  backdrop-filter: blur(8px);
}

body.space-life .section-block {
  border-color: rgba(37,86,81,.08);
  background:
    radial-gradient(circle at 90% 20%,rgba(95,220,195,.18),transparent 18rem),
    linear-gradient(145deg,rgba(255,255,255,.9),rgba(235,249,245,.78));
  box-shadow: 0 18px 55px rgba(49,86,80,.075), inset 0 1px 0 white;
}
body.space-life .section-heading h2 { color: #26332f; }
body.space-life .status-pill {
  border-color: rgba(24,143,134,.12);
  background: rgba(60,190,170,.1);
  color: #137a72;
}
body.space-life .training-meta { color: #16857c; }
body.space-life .training-copy { color: #56615e; }
body.space-life .primary-button {
  background: #28242e;
  box-shadow: 0 8px 22px rgba(48,38,57,.15);
  color: #fff;
}
body.space-life .secondary-button {
  border-color: rgba(38,65,61,.13);
  background: rgba(255,255,255,.48);
  color: #465651;
}
body.space-life .text-button { color: #817d85; }
body.space-life .feedback-state {
  border-color: rgba(43,158,142,.15);
  background: rgba(72,187,169,.08);
  color: #34766e;
}

body.space-life .reflection-invite {
  border-color: rgba(134,93,181,.1);
  background:
    radial-gradient(circle at 87% 18%,rgba(255,182,133,.2),transparent 14rem),
    linear-gradient(120deg,rgba(251,244,255,.95),rgba(255,242,232,.85));
  box-shadow: 0 16px 45px rgba(108,72,130,.07),inset 0 1px 0 white;
}
body.space-life .reflection-icon {
  background: linear-gradient(145deg,rgba(143,111,232,.17),rgba(244,133,113,.16));
  color: #7c61d3;
}
body.space-life .reflection-invite h2 { color: #362d3d; }
body.space-life .reflection-invite p:not(.eyebrow) { color: #807482; }
body.space-life .round-arrow { border-color: rgba(88,61,103,.11); color: #705d7b; }

body.space-life .context-card {
  border-color: rgba(57,45,66,.075);
  background: rgba(255,255,255,.72);
  box-shadow: 0 12px 34px rgba(79,55,92,.065),inset 0 1px 0 rgba(255,255,255,.8);
}
body.space-life .context-card h3 { color: #37313d; }
body.space-life .context-card p { color: #817a85; }
body.space-life .goal-card {
  background: linear-gradient(145deg,rgba(239,235,255,.92),rgba(255,255,255,.82));
}
body.space-life .tiny-status {
  background: rgba(122,98,225,.1);
  color: #6e59c4;
}
body.space-life .tiny-status.calm { background: rgba(37,39,45,.045); color: #88838c; }
body.space-life .progress-track { background: rgba(60,48,70,.08); }
body.space-life .progress-track span { background: linear-gradient(90deg,#8873e9,#ed806d,#49bba9); }
body.space-life .challenge-card {
  background:
    radial-gradient(circle at 95% 0,rgba(255,184,94,.2),transparent 12rem),
    linear-gradient(145deg,rgba(255,240,230,.92),rgba(255,251,246,.82));
}
body.space-life .inline-action { color: #b96050; }
body.space-life .related-card {
  background:
    radial-gradient(circle at 100% 0,rgba(86,183,225,.14),transparent 14rem),
    linear-gradient(145deg,rgba(235,248,251,.92),rgba(255,255,255,.8));
}
body.space-life .source-label { color: #98929b; }

body.space-life .capture-fab {
  border-color: rgba(255,255,255,.55);
  background: linear-gradient(135deg,#7a65dc,#ee7f70);
  box-shadow: 0 16px 38px rgba(134,77,139,.28);
  color: #fff;
}
body.space-life .sheet-backdrop { background: rgba(73,58,78,.26); }
body.space-life .capture-sheet {
  border-color: rgba(68,51,79,.1);
  background: #fbfaf8;
  box-shadow: 0 30px 100px rgba(68,49,78,.2);
}
body.space-life .sheet-handle { background: rgba(48,39,55,.14); }
body.space-life .capture-sheet textarea,
body.space-life .reflection-step textarea,
body.space-life .memory-editor,
body.space-life #reflection-content textarea {
  border-color: rgba(53,43,60,.1);
  background: rgba(52,42,59,.035);
  color: #302b34;
}
body.space-life textarea::placeholder { color: #a7a1aa; }
body.space-life .capture-prompts button {
  border-color: rgba(64,49,72,.09);
  background: rgba(255,255,255,.55);
  color: #78717c;
}

body.space-life .timeline-card,
body.space-life .memory-card,
body.space-life .settings-card {
  border-color: rgba(52,43,60,.08);
  background: rgba(255,255,255,.7);
  box-shadow: 0 13px 40px rgba(69,51,80,.055),inset 0 1px 0 white;
}
body.space-life .timeline-line { background: rgba(64,53,72,.12); }
body.space-life .timeline-node { border-color: #f3f1ed; }
body.space-life .timeline-card h2,
body.space-life .memory-content h2,
body.space-life .settings-heading h2 { color: #332e38; }
body.space-life .timeline-card > p { color: #6d6771; }
body.space-life .tag-row span { background: rgba(118,99,169,.07); color: #777080; }
body.space-life .event-state span { border-left-color: rgba(57,46,65,.14); color: #8a848e; }
body.space-life .segmented-control {
  border-color: rgba(58,45,67,.09);
  background: rgba(255,255,255,.42);
}
body.space-life .segmented-control button.is-active { background: white; box-shadow: 0 4px 15px rgba(67,48,78,.08); color: #3a333f; }
body.space-life .memory-status-dot { box-shadow: 0 0 0 4px rgba(24,143,134,.08); }
body.space-life .memory-source,
body.space-life .memory-note { color: #89828c; }
body.space-life .compact-primary { background: #7561d2; color: white; }
body.space-life .empty-state { border-color: rgba(59,47,67,.12); color: #928b95; }
body.space-life .empty-state h2 { color: #5b5560; }

body.space-life .reflection-page {
  background:
    radial-gradient(circle at 10% 15%,rgba(255,196,112,.2),transparent 22rem),
    radial-gradient(circle at 90% 75%,rgba(111,207,191,.14),transparent 24rem);
}
body.space-life .reflection-progress { background: rgba(50,40,58,.08); }
body.space-life .reflection-step h1,
body.space-life .reflection-complete h1 { color: #302a35; }
body.space-life .step-hint,
body.space-life .reflection-complete > p { color: #817a85; }
body.space-life .mood-grid button,
body.space-life #reflection-content .reflection-demo-options button,
body.space-life .choice-list button {
  border-color: rgba(62,48,71,.09);
  background: rgba(255,255,255,.6);
  color: #625b67;
  box-shadow: 0 7px 20px rgba(72,50,83,.035);
}
body.space-life .mood-grid button.is-selected,
body.space-life #reflection-content .reflection-demo-options button.is-selected,
body.space-life .choice-list button.is-selected {
  border-color: rgba(125,99,222,.22);
  background: linear-gradient(135deg,rgba(132,106,227,.14),rgba(241,132,107,.1));
  color: #6751bd;
}
body.space-life .reflection-footer { border-top-color: rgba(54,43,62,.09); }
body.space-life .success-orbit {
  border-color: rgba(35,163,147,.18);
  background: rgba(67,195,177,.12);
  color: #168d83;
}
body.space-life .reflection-summary div {
  border-color: rgba(54,43,62,.08);
  background: rgba(255,255,255,.62);
}
body.space-life .setting-row,
body.space-life .setting-link { border-top-color: rgba(52,43,60,.08); }
body.space-life .setting-row strong,
body.space-life .setting-link strong { color: #413a47; }
body.space-life .toggle { background: #d9d5dc; }
body.space-life .toggle span { background: white; box-shadow: 0 2px 8px rgba(48,38,55,.15); }
body.space-life .toggle.is-on { background: linear-gradient(120deg,#7a66db,#d77baf); }
body.space-life .select-row select {
  border-color: rgba(53,42,61,.1);
  background: rgba(255,255,255,.7);
  color: #5e5763;
}

@media (max-width:760px) {
  body.space-life .hero-brief {
    background:
      radial-gradient(circle at 92% 12%,rgba(255,243,172,.82),transparent 14rem),
      radial-gradient(circle at 0 100%,rgba(99,205,186,.48),transparent 17rem),
      linear-gradient(145deg,#9b86ed,#d39bd7 48%,#f3a07f 100%);
  }
  body.space-life .hero-brief h2 { font-size: 36px; }
}


/* Work workspace — bright, precise and calm rather than black. */
body.space-work {
  --bg: #edf2f7;
  --bg-elevated: #f7f9fc;
  --surface: rgba(255,255,255,.78);
  --surface-solid: #ffffff;
  --surface-soft: rgba(35,69,112,.045);
  --line: rgba(35,60,94,.1);
  --line-strong: rgba(35,60,94,.17);
  --text: #172234;
  --text-soft: #4e5d71;
  --muted: #7b899b;
  background:
    radial-gradient(circle at 88% 0,rgba(109,166,238,.18),transparent 30rem),
    radial-gradient(circle at 10% 100%,rgba(119,194,218,.11),transparent 28rem),
    linear-gradient(145deg,#f6f8fb,#edf2f7 52%,#eef5f8);
  color: var(--text);
}
body.space-work .workspace-topbar {
  border-bottom-color: rgba(39,69,108,.09);
  background: rgba(246,249,252,.86);
  box-shadow: 0 8px 30px rgba(34,65,105,.04);
}
body.space-work .desktop-sidebar {
  border-right-color: rgba(39,69,108,.09);
  background: rgba(243,247,251,.84);
  box-shadow: 10px 0 35px rgba(35,66,104,.035);
}
body.space-work .brand-core {
  background: linear-gradient(145deg,#77a9eb,#346bb8);
  box-shadow: 0 8px 25px rgba(53,105,180,.25);
  color: white;
}
body.space-work .brand-orbit { border-color: rgba(61,115,191,.55); }
body.space-work .workspace-switch {
  border-color: rgba(40,70,107,.1);
  background: rgba(255,255,255,.58);
}
body.space-work .workspace-switch button[data-space="work"].is-active {
  background: linear-gradient(120deg,rgba(75,132,211,.17),rgba(75,179,208,.11));
  box-shadow: 0 4px 15px rgba(52,100,163,.08);
  color: #315f9f;
}
body.space-work .workspace-switch button[data-space="life"] { color: #7d8998; }
body.space-work .core-state strong { color: #506076; }
body.space-work .core-state small { color: #8b98a8; }
body.space-work .core-pulse {
  background: #4a92d5;
  box-shadow: 0 0 0 4px rgba(74,146,213,.1),0 0 16px rgba(74,146,213,.35);
}
body.space-work .desktop-sidebar button.nav-item.is-active,
body.space-work .mobile-nav button.is-active {
  border-color: rgba(61,113,184,.12);
  background: linear-gradient(135deg,rgba(70,126,204,.13),rgba(67,169,198,.07));
  color: #3569ab;
}
body.space-work .nav-item:hover { background: rgba(66,112,174,.06); color: #52677f; }
body.space-work .mobile-nav {
  border-color: rgba(40,69,106,.11);
  background: rgba(246,249,252,.9);
  box-shadow: 0 14px 44px rgba(31,62,101,.14);
}
body.space-work .work-header h1 { color: #1b2a3e; }
body.space-work .work-header > div > p:last-child { color: #738296; }
body.space-work .work-mode-badge {
  border-color: rgba(55,112,191,.14);
  background: rgba(63,126,211,.08);
  color: #4578b9;
}
body.space-work .work-focus-panel {
  border-color: rgba(62,115,188,.14);
  border-left-color: #4f87d2;
  background:
    radial-gradient(circle at 95% 8%,rgba(109,183,221,.15),transparent 19rem),
    linear-gradient(120deg,rgba(255,255,255,.94),rgba(234,243,253,.9));
  box-shadow: 0 18px 50px rgba(48,87,137,.08),inset 0 1px 0 white;
}
body.space-work .work-focus-index { color: #7893b7; }
body.space-work .work-focus-content h2 { color: #1b304b; }
body.space-work .work-focus-content > p { color: #596b82; }
body.space-work .work-focus-meta { color: #7e8da0; }
body.space-work .work-primary {
  background: #255b9d;
  box-shadow: 0 8px 20px rgba(37,91,157,.18);
  color: white;
}
body.space-work .work-secondary {
  border-color: rgba(56,105,170,.14);
  background: rgba(255,255,255,.55);
  color: #50709a;
}
body.space-work .work-flow-section { border-top-color: rgba(38,67,104,.09); }
body.space-work .work-section-title h2 { color: #26374d; }
body.space-work .work-section-title > span { color: #8491a1; }
body.space-work .work-task-list { border-top-color: rgba(39,67,102,.08); }
body.space-work .work-task {
  border-bottom-color: rgba(39,67,102,.08);
  color: #24334a;
}
body.space-work .work-task:hover { background: rgba(70,126,204,.045); }
body.space-work .work-task-check { border-color: #9aacbf; background: white; }
body.space-work .work-task strong { color: #314156; }
body.space-work .work-task small { color: #8491a0; }
body.space-work .work-task em { color: #6683aa; }
body.space-work .work-task.is-complete .work-task-check { background: #5a8fd4; box-shadow: inset 0 0 0 4px #e8f0fa; }
body.space-work .work-intelligence-strip {
  border-color: rgba(64,123,199,.13);
  background: linear-gradient(110deg,rgba(224,239,253,.8),rgba(239,247,252,.72));
}
body.space-work .work-intelligence-strip p,
body.space-work .work-intelligence-strip button { color: #527eb8; }
body.space-work .work-intelligence-strip strong { color: #53647a; }
body.space-work .work-agenda { border-left-color: rgba(39,68,104,.1); }
body.space-work .work-agenda-head strong { color: #33465e; }
body.space-work .work-agenda li::before { background: #cfdae7; }
body.space-work .work-agenda time { color: #8090a3; }
body.space-work .work-agenda li div::before { border-color: #edf2f7; background: #5e91d2; box-shadow: 0 0 0 1px #7ca2d0; }
body.space-work .work-agenda li strong { color: #42536a; }
body.space-work .work-agenda li span { color: #8a97a6; }
body.space-work .work-close-entry {
  border-color: rgba(58,112,186,.13);
  background: linear-gradient(115deg,rgba(222,237,253,.72),rgba(242,248,252,.75));
  color: #4d72a3;
}
body.space-work .work-close-entry small { color: #7a96ba; }
body.space-work .work-record-capture {
  border-color: rgba(52,105,175,.13);
  background: rgba(255,255,255,.76);
  box-shadow: 0 14px 42px rgba(43,79,125,.06),inset 0 1px 0 white;
}
body.space-work .work-record-capture textarea {
  border-bottom-color: rgba(43,72,108,.1);
  color: #26374d;
}
body.space-work .work-record-capture > div > span { color: #8391a1; }
body.space-work .work-record-stream article { border-top-color: rgba(39,68,104,.09); }
body.space-work .work-record-stream time { color: #8593a4; }
body.space-work .record-source { color: #4d7dbb; }
body.space-work .work-record-stream h2 { color: #314156; }
body.space-work .work-record-stream p { color: #758398; }
body.space-work .work-close-intro h1 { color: #1d3049; }
body.space-work .work-close-intro > p:last-child { color: #748399; }
body.space-work .work-close-form { border-left-color: rgba(44,75,113,.12); }
body.space-work .work-close-form label > span { color: #697a90; }
body.space-work .work-close-form textarea,
body.space-work .work-close-form input {
  border-color: rgba(42,73,110,.11);
  background: rgba(255,255,255,.72);
  box-shadow: inset 0 1px 0 white;
  color: #26374d;
}
body.space-work .prototype-toast {
  border-color: rgba(44,74,110,.12);
  background: rgba(250,252,255,.94);
  color: #46586f;
}

/* Life navigation now represents the complete life architecture. */
body.space-life .desktop-nav {
  overflow-y: auto;
  gap: 4px;
  padding-right: 1px;
  scrollbar-width: none;
}
body.space-life .desktop-nav .nav-item {
  min-height: 50px;
  gap: 3px;
}
body.space-life .desktop-nav .nav-item > span:first-child { font-size: 17px; }
body.space-life .desktop-nav .nav-item > span:last-child { font-size: 9px; }

.life-area-page { width: min(1240px,100%); }
.life-area-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 28px; margin: 5px 0 34px; }
.life-area-header h1 { margin-top: 9px; color: #2c2731; font-size: clamp(34px,4.3vw,58px); font-weight: 520; letter-spacing: -.052em; }
.life-area-header > div > p:last-child { max-width: 650px; margin-top: 13px; color: #79727e; font-size: 14px; line-height: 1.7; }
.life-area-mark { display: grid; width: 52px; height: 52px; flex: 0 0 auto; place-items: center; border: 1px solid rgba(62,47,73,.09); border-radius: 18px; background: rgba(255,255,255,.58); box-shadow: 0 10px 28px rgba(73,50,87,.07); color: #695c72; font: 600 14px/1 ui-monospace,SFMono-Regular,Menlo,monospace; }
.life-area-hero { position: relative; display: grid; grid-template-columns: minmax(0,1fr) 250px; min-height: 300px; align-items: center; overflow: hidden; border: 1px solid rgba(255,255,255,.58); border-radius: 30px; background: linear-gradient(135deg,#9c87ec,#d49cd9 50%,#f2a37f); padding: clamp(28px,5vw,54px); box-shadow: 0 25px 70px rgba(109,70,127,.16),inset 0 1px 0 rgba(255,255,255,.5); }
.life-area-hero-copy { position: relative; z-index: 2; }
.life-area-hero-copy > p:first-child { color: rgba(57,39,68,.62); font-size: 10px; font-weight: 700; letter-spacing: .15em; }
.life-area-hero h2 { max-width: 680px; margin-top: 25px; color: #302437; font-size: clamp(30px,4vw,51px); font-weight: 520; letter-spacing: -.05em; line-height: 1.1; }
.life-area-hero-copy > p:last-child { max-width: 640px; margin-top: 18px; color: rgba(50,38,56,.7); font-size: 15px; line-height: 1.7; }
.life-area-orbit { position: relative; width: 210px; height: 210px; justify-self: end; }
.life-area-orbit::before,.life-area-orbit::after { position: absolute; inset: 20px; border: 1px solid rgba(255,255,255,.34); border-radius: 50%; content: ""; }
.life-area-orbit::after { inset: 55px -5px; transform: rotate(35deg); }
.life-area-orbit span { position: absolute; left: 82px; top: 82px; width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,.48); box-shadow: 0 0 50px rgba(255,255,255,.38); backdrop-filter: blur(8px); }
.life-area-orbit i { position: absolute; right: 22px; top: 48px; width: 13px; height: 13px; border-radius: 50%; background: #fff1a8; box-shadow: 0 0 25px rgba(255,241,168,.8); }
.life-metric-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-top: 18px; }
.life-metric-row > div { display: flex; min-height: 92px; flex-direction: column; justify-content: center; gap: 7px; border: 1px solid rgba(54,43,62,.075); border-radius: 19px; background: rgba(255,255,255,.64); padding: 18px 20px; box-shadow: 0 12px 35px rgba(72,50,83,.045),inset 0 1px 0 white; }
.life-metric-row strong { color: #39313f; font-size: 20px; font-weight: 570; }
.life-metric-row span { color: #8c8590; font-size: 10px; }
.life-feature-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; margin-top: 28px; }
.life-feature-card { position: relative; min-height: 190px; overflow: hidden; border: 1px solid rgba(54,43,62,.075); border-radius: 23px; background: rgba(255,255,255,.7); padding: 24px; box-shadow: 0 13px 38px rgba(75,52,87,.05),inset 0 1px 0 white; }
.life-feature-card::after { position: absolute; right: -55px; bottom: -65px; width: 150px; height: 150px; border-radius: 50%; background: rgba(125,102,218,.055); content: ""; }
.life-feature-card > p { color: #938b97; font-size: 9px; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; }
.life-feature-card h2 { margin-top: 17px; color: #342e39; font-size: 22px; font-weight: 550; }
.life-feature-card > span { display: block; max-width: 420px; margin-top: 10px; color: #77707b; font-size: 12px; line-height: 1.65; }
.life-feature-card small { position: absolute; left: 24px; bottom: 21px; color: #9a929d; font-size: 9px; }
.life-feature-card button { position: absolute; left: 24px; bottom: 17px; z-index: 2; border: 0; background: transparent; padding: 0; color: #6856bd; font-size: 11px; }

/* Every Life area has its own emotional color without becoming cartoonish. */
.area-growth .life-area-hero { background: radial-gradient(circle at 92% 10%,rgba(226,255,191,.68),transparent 18rem),linear-gradient(135deg,#75d0b7,#b1df9f 45%,#f1cf79); }
.area-growth .life-area-orbit i { background: #f7eb8c; }
.area-explore .life-area-hero { background: radial-gradient(circle at 90% 5%,rgba(255,232,166,.78),transparent 18rem),linear-gradient(135deg,#69b9db,#7bd2c1 46%,#edc77b); }
.area-connect .life-area-hero { background: radial-gradient(circle at 90% 0,rgba(255,231,194,.7),transparent 17rem),linear-gradient(135deg,#d995bd,#f19a93 50%,#f2c186); }
.area-contribution .life-area-hero { background: radial-gradient(circle at 88% 5%,rgba(199,250,218,.7),transparent 18rem),linear-gradient(135deg,#6dbca8,#9bd39c 52%,#dfc87c); }
.area-wealth .life-area-hero { background: radial-gradient(circle at 90% 5%,rgba(247,239,170,.78),transparent 18rem),linear-gradient(135deg,#7ec8af,#b4d49b 52%,#e8cb76); }
.area-information .life-area-hero { background: radial-gradient(circle at 90% 5%,rgba(205,234,255,.78),transparent 18rem),linear-gradient(135deg,#7ba8e9,#a89de4 52%,#e0a8cb); }
.area-memory .life-area-hero { background: radial-gradient(circle at 90% 5%,rgba(255,221,179,.68),transparent 18rem),linear-gradient(135deg,#9b82e8,#d198d4 52%,#efa07e); }
.area-growth .life-feature-card::after { background: rgba(63,182,144,.07); }
.area-explore .life-feature-card::after { background: rgba(67,158,203,.07); }
.area-connect .life-feature-card::after { background: rgba(221,103,137,.07); }
.area-contribution .life-feature-card::after { background: rgba(64,159,121,.07); }
.area-wealth .life-feature-card::after { background: rgba(170,150,54,.07); }
.area-information .life-feature-card::after { background: rgba(74,116,196,.07); }

@media (max-width:760px) {
  body.space-life .mobile-nav { display: flex; grid-template-columns: none; overflow-x: auto; justify-content: flex-start; padding: 5px 7px; scrollbar-width: none; }
  body.space-life .mobile-nav-item { min-width: 68px; flex: 0 0 68px; }
  body.space-life .mobile-nav-item > span:first-child { font-size: 17px; }
  body.space-life .mobile-nav-item > span:last-child { font-size: 8px; }
  .life-area-header { margin-top: 2px; }
  .life-area-header h1 { font-size: 37px; }
  .life-area-mark { width: 43px; height: 43px; border-radius: 15px; }
  .life-area-hero { grid-template-columns: 1fr; min-height: 390px; align-items: start; padding: 28px 23px; }
  .life-area-hero h2 { font-size: 37px; }
  .life-area-orbit { position: absolute; right: -40px; bottom: -55px; width: 210px; height: 210px; opacity: .65; }
  .life-metric-row { grid-template-columns: 1fr 1fr; }
  .life-metric-row > div:first-child { grid-column: 1 / -1; }
  .life-feature-grid { grid-template-columns: 1fr; }
  .life-feature-card { min-height: 180px; }
  body.space-work .mobile-nav { display: grid; grid-template-columns: repeat(3,1fr); }
  body.space-work .work-focus-panel { background: linear-gradient(135deg,rgba(255,255,255,.96),rgba(229,241,253,.93)); }
  body.space-work .work-close-form { border-top-color: rgba(44,75,113,.12); }
}


/* Work internal architecture: Tasks, Projects, People, Knowledge, Growth, Review, Assistant. */
body.space-work .desktop-nav {
  overflow-y: auto;
  gap: 4px;
  padding-right: 1px;
  scrollbar-width: none;
}
body.space-work .desktop-nav .nav-item { min-height: 50px; gap: 3px; }
body.space-work .desktop-nav .nav-item > span:first-child { font-size: 17px; }
body.space-work .desktop-nav .nav-item > span:last-child { font-size: 9px; }
.work-area-page { width: min(1240px,100%); }
.work-area-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 28px; margin: 5px 0 34px; }
.work-area-header h1 { margin-top: 9px; color: #1b2b40; font-size: clamp(34px,4.1vw,56px); font-weight: 520; letter-spacing: -.05em; }
.work-area-header > div > p:last-child { max-width: 680px; margin-top: 13px; color: #738195; font-size: 14px; line-height: 1.7; }
.work-area-badge { border: 1px solid rgba(48,101,170,.13); border-radius: 8px; background: rgba(61,125,209,.07); padding: 8px 10px; color: #4b78b4; font: 650 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing: .12em; }
.work-area-focus { position: relative; display: grid; grid-template-columns: 1fr auto; min-height: 260px; align-items: center; overflow: hidden; border: 1px solid rgba(52,106,178,.14); border-left: 3px solid #4e86cf; border-radius: 11px; background: radial-gradient(circle at 92% 10%,rgba(113,184,222,.16),transparent 19rem),linear-gradient(120deg,rgba(255,255,255,.94),rgba(232,242,252,.88)); padding: clamp(28px,4vw,46px); box-shadow: 0 18px 50px rgba(43,81,129,.075),inset 0 1px 0 white; }
.work-area-focus > div { position: relative; z-index: 2; }
.work-area-focus h2 { max-width: 760px; margin-top: 18px; color: #213751; font-size: clamp(28px,3.6vw,45px); font-weight: 520; letter-spacing: -.043em; line-height: 1.15; }
.work-area-focus > div > p:last-child { max-width: 720px; margin-top: 16px; color: #5f7085; font-size: 14px; line-height: 1.72; }
.work-focus-signal { position: relative; width: 130px; height: 130px; margin-right: 30px; border: 1px solid rgba(65,125,202,.18); border-radius: 50%; }
.work-focus-signal::before,.work-focus-signal::after { position: absolute; border-radius: 50%; content: ""; }
.work-focus-signal::before { inset: 26px; border: 1px solid rgba(65,125,202,.24); }
.work-focus-signal::after { inset: 52px; background: #4b86cf; box-shadow: 0 0 0 11px rgba(75,134,207,.08),0 0 28px rgba(75,134,207,.25); }
.work-area-metrics { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-top: 16px; }
.work-area-metrics > div { display: flex; min-height: 84px; flex-direction: column; justify-content: center; gap: 6px; border: 1px solid rgba(40,72,109,.08); border-radius: 10px; background: rgba(255,255,255,.68); padding: 15px 18px; box-shadow: 0 10px 30px rgba(42,76,118,.04),inset 0 1px 0 white; }
.work-area-metrics strong { color: #29415e; font-size: 19px; font-weight: 570; }
.work-area-metrics span { color: #8491a1; font-size: 10px; }
.work-area-notice { margin-top: 18px; border: 1px solid rgba(188,135,55,.16); border-left: 3px solid #d39a48; border-radius: 8px; background: rgba(255,246,224,.78); padding: 14px 16px; color: #765f3d; font-size: 11px; line-height: 1.65; }
.work-area-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-top: 26px; }
.work-feature-card { position: relative; min-height: 190px; border: 1px solid rgba(40,71,108,.08); border-radius: 11px; background: rgba(255,255,255,.73); padding: 23px; box-shadow: 0 12px 34px rgba(42,75,115,.04),inset 0 1px 0 white; }
.work-feature-card > p { color: #6683a8; font-size: 9px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; }
.work-feature-card h2 { margin-top: 17px; color: #2d4057; font-size: 20px; font-weight: 550; }
.work-feature-card > span { display: block; margin-top: 9px; color: #748296; font-size: 12px; line-height: 1.6; }
.work-feature-card small { position: absolute; left: 23px; bottom: 20px; color: #8796a8; font-size: 10px; }
.work-feature-card button { position: absolute; left: 23px; bottom: 17px; border: 0; background: transparent; padding: 0; color: #4777b5; font-size: 11px; }
.work-area-projects .work-area-focus { background: radial-gradient(circle at 92% 8%,rgba(139,203,211,.18),transparent 20rem),linear-gradient(120deg,rgba(255,255,255,.95),rgba(232,245,247,.9)); }
.work-area-projects .work-feature-card { border-left: 3px solid rgba(63,135,177,.45); }
.work-area-people .work-area-focus { background: radial-gradient(circle at 92% 8%,rgba(173,180,233,.17),transparent 20rem),linear-gradient(120deg,rgba(255,255,255,.95),rgba(238,240,251,.9)); }
.work-area-knowledge .work-area-focus { background: radial-gradient(circle at 92% 8%,rgba(111,188,180,.17),transparent 20rem),linear-gradient(120deg,rgba(255,255,255,.95),rgba(233,247,244,.9)); }
.work-area-growth .work-area-focus { background: radial-gradient(circle at 92% 8%,rgba(116,172,230,.18),transparent 20rem),linear-gradient(120deg,rgba(255,255,255,.95),rgba(232,242,253,.9)); }
.work-area-review .work-area-focus { background: radial-gradient(circle at 92% 8%,rgba(231,185,111,.17),transparent 20rem),linear-gradient(120deg,rgba(255,255,255,.95),rgba(251,245,232,.9)); }
.work-area-assistant .work-area-focus { background: radial-gradient(circle at 92% 8%,rgba(130,168,231,.19),transparent 20rem),linear-gradient(120deg,rgba(255,255,255,.95),rgba(234,240,252,.9)); }
.work-assistant-console { margin-top: 16px; border: 1px solid rgba(49,103,174,.13); border-radius: 12px; background: linear-gradient(120deg,rgba(244,249,255,.92),rgba(255,255,255,.82)); padding: 24px; box-shadow: 0 16px 45px rgba(43,78,122,.055); }
.work-assistant-console > div:first-child { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 10px; }
.work-assistant-console > div:first-child p { color: #365a88; font-size: 12px; font-weight: 600; }
.work-assistant-console > div:first-child small { grid-column: 2; margin-top: 3px; color: #8794a5; font-size: 9px; }
.work-assistant-console textarea { width: 100%; min-height: 105px; margin-top: 20px; resize: vertical; border: 1px solid rgba(42,75,113,.11); border-radius: 9px; background: rgba(255,255,255,.74); padding: 14px; color: #2b3e55; font: inherit; line-height: 1.6; }
.assistant-suggestions { display: flex; flex-wrap: wrap; gap: 7px; margin: 11px 0 18px; }
.assistant-suggestions button { border: 1px solid rgba(51,91,142,.1); border-radius: 999px; background: rgba(69,119,184,.055); padding: 7px 10px; color: #617a9c; font-size: 10px; }

@media (max-width:760px) {
  body.space-work .mobile-nav { display: flex; grid-template-columns: none; overflow-x: auto; justify-content: flex-start; padding: 5px 7px; scrollbar-width: none; }
  body.space-work .mobile-nav-item { min-width: 68px; flex: 0 0 68px; }
  body.space-work .mobile-nav-item > span:first-child { font-size: 17px; }
  body.space-work .mobile-nav-item > span:last-child { font-size: 8px; }
  .work-area-header h1 { font-size: 37px; }
  .work-area-badge { display: none; }
  .work-area-focus { grid-template-columns: 1fr; min-height: 330px; align-items: start; padding: 26px 21px; }
  .work-area-focus h2 { font-size: 34px; }
  .work-focus-signal { position: absolute; right: -45px; bottom: -58px; opacity: .55; }
  .work-area-metrics { grid-template-columns: 1fr 1fr; }
  .work-area-metrics > div:first-child { grid-column: 1 / -1; }
  .work-area-grid { grid-template-columns: 1fr; }
  .work-feature-card { min-height: 180px; }
}


/* Mobile uses one complete side drawer; there is no bottom navigation. */
.mobile-menu-button,.mobile-sidebar,.mobile-sidebar-backdrop { display: none; }
@media (max-width:760px) {
  body.mobile-menu-open { overflow: hidden; }
  .app-main { padding-bottom: 0; }
  .mobile-menu-button {
    display: flex;
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: rgba(255,255,255,.52);
    box-shadow: 0 5px 16px rgba(52,40,63,.055);
  }
  .mobile-menu-button span { display: block; width: 16px; height: 1.5px; border-radius: 2px; background: currentColor; }
  .workspace-topbar { gap: 9px; }
  .workspace-switch { flex: 1; }
  .core-state { display: none; }
  .mobile-sidebar-backdrop {
    position: fixed;
    z-index: 89;
    inset: 0;
    display: block;
    background: rgba(35,30,41,.27);
    backdrop-filter: blur(5px);
  }
  .mobile-sidebar-backdrop[hidden] { display: none !important; }
  .mobile-sidebar {
    position: fixed;
    z-index: 90;
    inset: 0 auto 0 0;
    display: flex;
    width: min(84vw,330px);
    flex-direction: column;
    border-right: 1px solid rgba(53,43,62,.1);
    border-radius: 0 26px 26px 0;
    background: rgba(250,249,247,.96);
    padding: max(22px,env(safe-area-inset-top)) 16px max(20px,env(safe-area-inset-bottom));
    box-shadow: 24px 0 70px rgba(53,39,63,.18);
    transform: translateX(-105%);
    transition: transform .24s cubic-bezier(.2,.72,.25,1);
    backdrop-filter: blur(28px);
  }
  .mobile-sidebar.is-open { transform: translateX(0); }
  .mobile-sidebar-header { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 3px 4px 22px; border-bottom: 1px solid rgba(53,43,62,.08); }
  .mobile-sidebar-header > div { display: flex; align-items: center; gap: 11px; }
  .mobile-sidebar-header > div > div { display: flex; flex-direction: column; gap: 4px; }
  .mobile-sidebar-header strong { color: #342e39; font-size: 13px; font-weight: 630; }
  .mobile-sidebar-header small { color: #8c8590; font-size: 9px; }
  .mobile-sidebar-core { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 12px; background: linear-gradient(145deg,#8c72f3,#ee806f); color: white; font-size: 11px; font-weight: 700; }
  .mobile-sidebar-header button { display: grid; width: 34px; height: 34px; place-items: center; border: 0; border-radius: 11px; background: rgba(47,38,54,.045); color: #6d6671; font-size: 20px; }
  body.space-work .mobile-sidebar { border-right-color: rgba(39,70,108,.1); background: rgba(247,250,253,.97); box-shadow: 24px 0 70px rgba(32,61,98,.18); }
  body.space-work .mobile-sidebar-header { border-bottom-color: rgba(39,70,108,.09); }
  body.space-work .mobile-sidebar-header strong { color: #293d56; }
  body.space-work .mobile-sidebar-header small { color: #8492a3; }
  body.space-work .mobile-sidebar-core { background: linear-gradient(145deg,#77a9eb,#346bb8); }
  body.space-work .mobile-menu-button { border-color: rgba(40,70,107,.1); background: rgba(255,255,255,.64); color: #48627f; }

  body.space-life .mobile-nav,
  body.space-work .mobile-nav,
  .mobile-nav {
    position: static;
    inset: auto;
    display: flex;
    min-height: 0;
    flex: 1;
    flex-direction: column;
    gap: 4px;
    overflow-x: visible;
    overflow-y: auto;
    justify-content: flex-start;
    margin: 14px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 0 2px;
    box-shadow: none;
    transform: none;
    backdrop-filter: none;
    scrollbar-width: none;
  }
  body.space-life .mobile-nav-item,
  body.space-work .mobile-nav-item,
  .mobile-nav-item {
    display: grid;
    width: 100%;
    min-width: 0;
    min-height: 50px;
    flex: 0 0 auto;
    grid-template-columns: 31px 1fr;
    align-items: center;
    justify-content: stretch;
    gap: 10px;
    border-radius: 13px;
    padding: 0 12px;
    color: #77707d;
    text-align: left;
  }
  body.space-life .mobile-nav-item > span:first-child,
  body.space-work .mobile-nav-item > span:first-child,
  .mobile-nav-item > span:first-child { font-size: 17px; text-align: center; }
  body.space-life .mobile-nav-item > span:last-child,
  body.space-work .mobile-nav-item > span:last-child,
  .mobile-nav-item > span:last-child { font-size: 12px; font-weight: 550; }
  body.space-life .mobile-nav-item.is-active { background: linear-gradient(120deg,rgba(122,101,221,.14),rgba(238,127,109,.08)); color: #6856c2; }
  body.space-work .mobile-nav-item.is-active { background: linear-gradient(120deg,rgba(67,124,201,.14),rgba(70,169,197,.07)); color: #3569aa; }
  .mobile-sidebar-settings { display: grid; min-height: 50px; grid-template-columns: 31px 1fr auto; align-items: center; gap: 10px; border: 0; border-top: 1px solid rgba(53,43,62,.08); background: transparent; padding: 14px 12px 0; color: #77707d; text-align: left; }
  .mobile-sidebar-settings span:nth-child(2) { font-size: 12px; font-weight: 550; }
  .mobile-sidebar-settings span:last-child { color: #a099a3; }
  body.space-work .mobile-sidebar-settings { border-top-color: rgba(39,70,108,.09); color: #63758b; }
  .capture-fab { bottom: 20px; }
  .reflection-page { padding-bottom: 34px; }
  .prototype-toast { bottom: 22px; }
}


/* Sign-in gate for the private cloud version. */
.auth-gate {
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: 28px 20px;
  background:
    radial-gradient(circle at 12% 8%, rgba(255,196,119,.26), transparent 24rem),
    radial-gradient(circle at 88% 4%, rgba(137,120,244,.2), transparent 26rem),
    radial-gradient(circle at 76% 92%, rgba(77,205,185,.14), transparent 24rem),
    linear-gradient(145deg,#f8f4ee,#f2f0ed 52%,#f4f1f7);
}
.auth-card {
  width: min(430px, 100%);
  border: 1px solid rgba(255,255,255,.66);
  border-radius: 28px;
  background: rgba(255,255,255,.76);
  padding: clamp(28px, 5vw, 40px);
  box-shadow: 0 26px 70px rgba(96,68,116,.13), inset 0 1px 0 white;
  backdrop-filter: blur(22px);
}
.auth-brand { position: relative; display: grid; width: 50px; height: 50px; place-items: center; margin-bottom: 26px; }
.auth-brand .brand-orbit { position: absolute; inset: 2px; border: 1px solid rgba(128,92,218,.5); border-radius: 50%; transform: rotate(-26deg) scaleY(.66); }
.auth-brand .brand-core {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(145deg,#8c72f3 10%,#f17b72 60%,#efae62);
  box-shadow: 0 8px 22px rgba(178,102,154,.26);
  color: white;
  font-size: 13px;
  font-weight: 700;
}
.auth-card h1 { margin-top: 10px; color: #29232f; font-size: clamp(28px, 4.4vw, 36px); font-weight: 540; letter-spacing: -.045em; }
.auth-copy { margin-top: 14px; color: #7c7581; font-size: 13px; line-height: 1.7; }
#auth-form { display: grid; gap: 14px; margin-top: 26px; }
#auth-form label { display: grid; gap: 8px; color: #6d6674; font-size: 11px; }
#auth-form input {
  width: 100%;
  min-height: 48px;
  border: 1px solid rgba(53,43,60,.11);
  border-radius: 14px;
  background: rgba(255,255,255,.82);
  padding: 0 14px;
  color: #2c2732;
  font-size: 15px;
}
#auth-form input:focus-visible { outline: 2px solid #8674e4; outline-offset: 2px; }
.auth-error {
  border: 1px solid rgba(200,80,80,.18);
  border-radius: 12px;
  background: rgba(238,150,140,.12);
  padding: 11px 13px;
  color: #a4514c;
  font-size: 12px;
  line-height: 1.6;
}
#auth-form .primary-button { min-height: 50px; margin-top: 4px; background: #28242e; color: white; }
#auth-form .text-button { color: #7a6fd0; }
.auth-footnote { margin-top: 20px; color: #918a95; font-size: 11px; line-height: 1.65; text-align: center; }
.topbar-right { display: flex; align-items: center; gap: 12px; }

@media (max-width: 760px) {
  .auth-card { border-radius: 24px; padding: 26px 21px; }
  .auth-copy { font-size: 12.5px; }
  .topbar-right .core-state { display: none; }
}


/* Native-app behaviour on phones: no horizontal drift, no rubber-band page. */
/* Constrain width without touching vertical scrolling.
   `overflow-x` on html/body can freeze vertical scroll on desktop, so the
   horizontal clamp is applied to inner containers instead. */
html, body { max-width: 100%; }
body { position: relative; overflow-x: hidden; overflow-y: visible; }
.app-shell, .app-main, .page-frame, .today-page { max-width: 100%; min-width: 0; }

@media (max-width: 900px) {
  /* Fill the device viewport like an installed app. */
  html, body { width: 100%; }
  body {
    min-height: 100svh;
    /* Respect the iPhone safe areas instead of floating inside them. */
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
  .app-shell { width: 100%; min-height: 100svh; }
  .app-main { width: 100%; min-height: 100svh; }
  .workspace-topbar {
    position: sticky;
    top: 0;
    padding-top: max(12px, env(safe-area-inset-top));
  }
  .page-frame {
    width: 100%;
    padding-left: 16px;
    padding-right: 16px;
    padding-bottom: calc(96px + env(safe-area-inset-bottom));
  }
  .today-layout, .today-primary, .today-context { width: 100%; min-width: 0; }
  .hero-brief, .section-block, .context-card, .reflection-invite,
  .timeline-card, .memory-card, .settings-card,
  .life-area-hero, .life-feature-card,
  .work-area-focus, .work-feature-card { max-width: 100%; }

  /* Long words and links must wrap instead of widening the layout. */
  h1, h2, h3, p, span, small, strong, em, button, textarea, input {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* Horizontal strips scroll inside themselves, never the whole page. */
  .filter-row, .tag-row, .evidence-list, .capture-prompts, .segmented-control {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .capture-fab { bottom: calc(20px + env(safe-area-inset-bottom)); }
  .reflection-page { min-height: 100svh; padding-bottom: calc(40px + env(safe-area-inset-bottom)); }
  .auth-gate { min-height: 100svh; padding: 24px 18px calc(24px + env(safe-area-inset-bottom)); }
  .mobile-sidebar { width: min(86vw, 340px); max-width: 340px; }
  .prototype-toast { max-width: calc(100vw - 36px); white-space: normal; text-align: center; }
}

/* Installed PWA: prevent accidental text selection drag on tap targets. */
@media (display-mode: standalone) {
  .nav-item, .mobile-nav-item, .workspace-switch button,
  .mobile-menu-button, .capture-fab, .primary-button, .work-primary {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }
}


/* Sign-in mark uses the same planet artwork as the home screen icon. */
.auth-logo {
  display: block;
  width: 62px;
  height: 62px;
  margin-bottom: 24px;
  border-radius: 18px;
  box-shadow: 0 12px 30px rgba(126, 92, 158, .18);
}