:root {
  --page: #dedfe3;
  --bg: #f4f5f7;
  --surface: #fdfdfe;
  --surface-muted: #f0f1f4;
  --ink: #26272b;
  --ink-soft: #6c6e75;
  --ink-faint: #989aa1;
  --line: rgba(52, 54, 61, 0.1);
  --green: #6f927f;
  --green-dark: #567865;
  --green-wash: #edf4ef;
  --coral: #b98078;
  --coral-wash: #f7eeee;
  --gold: #a38b62;
  --gold-wash: #f6f2e9;
  --blue: #52789e;
  --blue-dark: #416889;
  --blue-wash: #edf3f8;
  --shadow: 0 20px 60px rgba(40, 43, 50, 0.12);
  --radius: 8px;
  --bottom-nav-height: 72px;
}

body {
  background: var(--page);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Microsoft YaHei", sans-serif;
}

button:focus-visible,
input:focus-visible {
  outline-color: rgba(93, 131, 170, 0.28);
}

.phone-app {
  background: var(--bg);
  border-color: rgba(40, 43, 50, 0.08);
  box-shadow: var(--shadow);
}

.app-header {
  background: rgba(244, 245, 247, 0.84);
  backdrop-filter: saturate(180%) blur(24px);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
}

.app-header {
  border-bottom-color: rgba(52, 54, 61, 0.09);
}

.app-content {
  inset: 69px 0 var(--bottom-nav-height);
}

.header-kicker,
.section-label {
  color: var(--ink-faint);
  font-weight: 600;
}

.app-header h1 {
  color: #232429;
  font-size: 22px;
  font-weight: 700;
}

.icon-button,
.small-icon-button,
.avatar-button {
  background: rgba(112, 115, 123, 0.08);
  color: var(--blue);
}

.notification-button {
  background: transparent;
}

.notification-dot {
  background: #a4625c;
  border-color: var(--bg);
}

.avatar-button {
  background: #68727e;
  color: #fff;
  font-size: 14px;
}

.demo-mode-button {
  border-color: rgba(52, 54, 61, 0.1);
  background: rgba(112, 115, 123, 0.07);
  color: #74767d;
}

.app-view {
  padding: 20px 16px 36px;
}

.home-greeting {
  margin: 0 2px 14px;
}

.home-greeting p {
  font-size: 16px;
  font-weight: 650;
}

.home-greeting span {
  color: var(--ink-faint);
  font-size: 11px;
}

.demo-guide {
  border-color: var(--line);
  background: rgba(253, 253, 254, 0.72);
}

.demo-guide button,
.account-switch-button {
  background: var(--blue-wash);
  color: var(--blue-dark);
}

.personal-greeting h2 {
  color: #232429;
  font-weight: 700;
}

.personal-start-icon,
.personal-empty > span {
  background: var(--blue-wash);
  color: var(--blue);
}

.round-command {
  background: var(--blue);
}

.personal-starters button {
  color: var(--blue);
}

.view-demo-command {
  color: var(--blue-dark);
}

.story-prompt {
  border: 0;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(40, 43, 50, 0.03);
}

.story-photo-wrap {
  aspect-ratio: 16 / 8.4;
}

.story-photo {
  object-position: center 42%;
}

.story-date {
  height: 26px;
  border-radius: 6px;
  background: rgba(44, 45, 49, 0.58);
  font-weight: 600;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.story-prompt-copy {
  padding: 16px 16px 13px;
}

.story-prompt-copy h2 {
  margin: 7px 0 8px;
  font-size: 19px;
  line-height: 1.42;
  font-weight: 700;
}

.story-prompt-copy p {
  color: var(--ink-faint);
  font-size: 11px;
}

.record-entry {
  min-height: 70px;
  padding: 11px 16px;
  grid-template-columns: 46px 1fr 20px;
  border-top-color: var(--line);
  background: var(--surface);
}

.record-orb {
  width: 44px;
  height: 44px;
  background: var(--blue);
  box-shadow: none;
}

.record-entry strong {
  font-size: 15px;
  font-weight: 650;
}

.record-entry span {
  color: var(--ink-faint);
  font-size: 11px;
}

.record-entry-arrow,
.text-command {
  color: var(--blue);
}

.home-section,
.family-section {
  margin-top: 26px;
}

.section-heading {
  min-height: 25px;
  margin: 0 2px 9px;
}

.section-heading h2 {
  font-size: 15px;
  font-weight: 650;
}

.text-command {
  font-weight: 500;
}

/* iOS grouped list instead of feature cards. */
.quick-actions {
  display: block;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--surface);
}

.quick-action {
  position: relative;
  width: 100%;
  height: 60px;
  padding: 8px 40px 8px 12px;
  border: 0;
  border-radius: 0;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  justify-items: start;
  gap: 11px;
  background: transparent;
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  text-align: left;
}

.quick-action + .quick-action::before {
  content: "";
  position: absolute;
  top: 0;
  left: 57px;
  right: 0;
  height: 1px;
  background: var(--line);
}

.quick-action::after {
  content: "";
  position: absolute;
  right: 17px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-top: 1.5px solid #b7b9bf;
  border-right: 1.5px solid #b7b9bf;
  transform: translateY(-50%) rotate(45deg);
}

.quick-action:active {
  background: #f0f1f4;
}

.quick-icon {
  width: 32px;
  height: 32px;
  border-radius: 7px;
  color: currentColor;
}

.quick-icon.coral { color: #a96f67; background: #f5e9e7; }
.quick-icon.green { color: #638873; background: #eaf2ed; }
.quick-icon.gold { color: #957d54; background: #f4efe5; }

.recent-section {
  overflow: visible;
}

.recent-section .memory-row {
  min-height: 86px;
  padding: 9px 12px;
  grid-template-columns: 66px minmax(0, 1fr) 18px;
  gap: 11px;
  border: 0;
  border-radius: 0;
  background: var(--surface);
}

.recent-section .memory-row:first-of-type {
  border-radius: var(--radius) var(--radius) 0 0;
}

.recent-section .memory-row:last-of-type {
  border-radius: 0 0 var(--radius) var(--radius);
}

.recent-section .memory-row + .memory-row {
  position: relative;
  margin-top: 0;
}

.recent-section .memory-row + .memory-row::before {
  content: "";
  position: absolute;
  top: 0;
  left: 89px;
  right: 0;
  height: 1px;
  background: var(--line);
}

.memory-row img {
  width: 66px;
  height: 66px;
  border-radius: 6px;
}

.memory-meta {
  color: var(--ink-faint);
  font-weight: 500;
}

.memory-row-copy h3 {
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
}

.memory-row-copy p {
  color: var(--ink-soft);
  font-size: 10px;
}

.bottom-nav {
  background: rgba(250, 250, 252, 0.88);
  border-top-color: rgba(52, 54, 61, 0.12);
  backdrop-filter: saturate(180%) blur(24px);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
}

.nav-button {
  color: #92949a;
  font-weight: 500;
}

.nav-button.is-active {
  color: var(--blue);
}

.nav-button b {
  background: #a4625c;
}

.compact-intro h2,
.family-hero h2 {
  color: #232429;
  font-weight: 700;
}

.segmented-control {
  height: 34px;
  margin: 17px 0 18px;
  padding: 2px;
  gap: 2px;
  background: rgba(112, 115, 123, 0.09);
}

.segment {
  font-size: 12px;
  font-weight: 500;
}

.segment.is-active {
  box-shadow: 0 1px 3px rgba(40, 43, 50, 0.09);
}

.memory-panel[data-memory-panel="timeline"] {
  padding: 13px 14px 4px;
  border-radius: var(--radius);
  background: var(--surface);
}

.timeline-year span {
  color: var(--blue);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif;
  font-weight: 700;
}

.timeline-year strong {
  font-weight: 600;
}

.timeline-item {
  border-left-color: rgba(82, 85, 92, 0.16);
}

.timeline-dot {
  border-color: var(--surface);
  background: var(--blue);
  box-shadow: 0 0 0 1px var(--blue);
}

.timeline-copy h3 {
  font-weight: 650;
}

.evidence-line {
  color: var(--green);
}

.people-summary {
  margin-bottom: 0;
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--surface);
}

.people-count {
  color: var(--blue);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif;
  font-weight: 700;
}

.person-row {
  padding: 9px 12px;
  border-bottom-color: var(--line);
  background: var(--surface);
}

.person-row:last-child {
  border-radius: 0 0 var(--radius) var(--radius);
  border-bottom: 0;
}

.person-row strong {
  font-weight: 600;
}

.person-avatar.elder { color: var(--green-dark); background: var(--green-wash); }
.person-avatar.family { color: #9f6a63; background: var(--coral-wash); }
.person-avatar.friend { color: #8d774f; background: var(--gold-wash); }

.photo-grid {
  grid-auto-rows: 148px;
  gap: 6px;
}

.photo-cell span {
  background: rgba(44, 45, 49, 0.56);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.book-cover {
  background: #34363b;
}

.book-cover::after {
  background: rgba(31, 32, 36, 0.24);
}

.book-cover-copy h2 {
  max-width: 320px;
  font-family: "Songti SC", "STSong", serif;
  font-size: 25px;
}

.book-progress {
  margin-top: 12px;
  padding: 11px 0;
  border: 0;
  border-radius: var(--radius);
  background: var(--surface);
}

.book-progress div + div {
  border-left-color: var(--line);
}

.chapter-list {
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--surface);
}

.chapter-row {
  padding: 11px 12px;
  border-bottom-color: var(--line);
}

.chapter-row:last-child {
  border-bottom: 0;
}

.chapter-index {
  color: var(--ink-faint);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif;
  font-size: 15px;
  font-weight: 600;
}

.chapter-copy strong {
  font-weight: 600;
}

.source-status.verified { color: var(--green-dark); background: var(--green-wash); }
.source-status.pending { color: #8d774f; background: var(--gold-wash); }

.export-button,
.primary-command {
  background: var(--blue);
}

.export-button:active,
.primary-command:active {
  background: var(--blue-dark);
}

.family-hero {
  min-height: 74px;
  padding: 7px 10px 14px;
  border-bottom: 0;
  border-radius: var(--radius);
  background: var(--surface);
}

.family-avatar {
  border-color: var(--surface);
}

.family-avatar.one { background: #707985; }
.family-avatar.two { background: #b78179; }
.family-avatar.three { background: #a18b67; }

.count-badge {
  background: #a4625c;
  color: #fff;
}

.review-task {
  padding: 14px;
  border: 0;
  background: var(--surface);
}

.review-icon {
  border-radius: 7px;
  color: var(--green-dark);
  background: var(--green-wash);
}

.review-icon.photo {
  color: #8d774f;
  background: var(--gold-wash);
}

.review-task-top h3 {
  font-weight: 600;
}

.audio-snippet {
  background: var(--surface-muted);
}

.small-icon-button {
  color: var(--blue);
}

.mini-wave i {
  background: #9699a0;
}

.choice-button {
  border-color: rgba(52, 54, 61, 0.13);
  color: var(--blue);
}

.choice-button.is-selected {
  border-color: var(--blue);
  background: var(--blue-wash);
  color: var(--blue-dark);
}

.secondary-command {
  background: rgba(112, 115, 123, 0.09);
}

.activity-row {
  min-height: 66px;
  padding: 0 10px;
  background: var(--surface);
}

.family-section .section-heading + .activity-row {
  border-radius: var(--radius) var(--radius) 0 0;
}

.activity-row:last-child {
  border-bottom: 0;
  border-radius: 0 0 var(--radius) var(--radius);
}

.activity-avatar.daughter { color: #9f6a63; background: var(--coral-wash); }
.activity-avatar.grandson { color: #8d774f; background: var(--gold-wash); }

/* Recording is intentionally neutral and focused; blue means an active system control. */
.flow-overlay {
  background: #191a1e;
}

.flow-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.icon-button.on-dark {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.agent-mark {
  border-color: rgba(111, 150, 189, 0.38);
  background: rgba(111, 150, 189, 0.13);
  color: #86a9ca;
}

.listening-label,
.listening-label[data-status="ready"] {
  color: #adb4bd;
}

.listening-label[data-status="warning"] { color: #e4c46e; }
.listening-label[data-status="error"] { color: #df847d; }

.interview-stage h2 {
  font-size: 22px;
  font-weight: 650;
}

.live-transcript {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.06);
}

.waveform i {
  background: #6f96bd;
}

.stop-record-button {
  border-color: rgba(255, 255, 255, 0.14);
  color: #d87872;
}

.text-composer {
  box-shadow: 0 12px 32px rgba(10, 11, 13, 0.28);
}

.send-text-button {
  background: var(--blue);
  color: #fff;
}

.review-overlay {
  background: var(--bg);
}

.review-header {
  background: rgba(244, 245, 247, 0.88);
  border-bottom-color: var(--line);
  backdrop-filter: saturate(180%) blur(24px);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
}

.model-status {
  background: var(--green-wash);
  color: var(--green-dark);
}

.review-check {
  background: var(--green);
}

.fact-list {
  overflow: hidden;
  border: 0;
  border-radius: var(--radius);
  background: var(--surface);
}

.fact-list div {
  min-height: 50px;
  padding: 0 12px;
  border-bottom-color: var(--line);
}

.fact-list div:last-child {
  border-bottom: 0;
}

.review-audio-button {
  background: var(--blue-wash);
  color: var(--blue-dark);
}

.next-thread {
  border-left: 0;
  border-radius: var(--radius);
  background: var(--surface);
}

.next-thread span {
  color: var(--ink-faint);
}

.review-actions {
  background: rgba(250, 250, 252, 0.9);
  border-top-color: var(--line);
  backdrop-filter: saturate(180%) blur(24px);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
}

.sheet-backdrop {
  background: rgba(35, 36, 40, 0.22);
}

.bottom-sheet {
  background: var(--bg);
  box-shadow: 0 -10px 36px rgba(40, 43, 50, 0.12);
}

.sheet-handle {
  background: #bbbcc2;
}

.settings-list {
  overflow: hidden;
  border: 0;
  border-radius: var(--radius);
  background: var(--surface);
}

.guest-account-panel,
.member-account-panel {
  border-bottom-color: var(--line);
}

.member-avatar {
  background: #68727e;
}

.account-logout-button {
  border-color: rgba(169, 69, 53, 0.18);
  background: rgba(246, 231, 226, 0.78);
  color: #a94535;
}

.auth-mode-control {
  background: rgba(112, 115, 123, 0.1);
}

.auth-mode-control button.is-active {
  box-shadow: 0 1px 4px rgba(40, 43, 50, 0.1);
}

.auth-form input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-wash);
}

.setting-row {
  min-height: 62px;
  padding: 8px 12px;
  border-bottom-color: var(--line);
}

.setting-row:last-child {
  border-bottom: 0;
}

.setting-icon {
  background: var(--blue);
  color: #fff;
}

.ios-switch:checked {
  background: var(--green);
}

.range-control input[type="range"] {
  --range-fill: var(--blue);
  --range-track: #d8dae0;
}

.range-control input[type="range"]::-webkit-slider-thumb {
  box-shadow: 0 2px 8px rgba(40, 43, 50, 0.2), 0 0 0 0 var(--blue-wash);
}

.range-control input[type="range"]:active::-webkit-slider-thumb {
  box-shadow: 0 2px 9px rgba(40, 43, 50, 0.22), 0 0 0 7px var(--blue-wash);
}

.provider-line {
  padding: 0 12px;
}

.online-dot {
  background: var(--green);
  box-shadow: none;
}

.chapter-preview {
  color: #424348;
}

.source-footer button {
  color: var(--blue);
}

.toast {
  background: rgba(54, 55, 60, 0.92);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

@media (max-width: 600px) {
  .app-header,
  .bottom-nav,
  .review-header,
  .review-actions {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
}