:root {
  --ink: #151719;
  --ink-2: #2d3135;
  --muted: #707780;
  --faint: #a5abb2;
  --paper: #f4f6f4;
  --paper-2: #eef1ef;
  --surface: #ffffff;
  --surface-strong: #ffffff;
  --line: rgba(18, 22, 26, .10);
  --line-soft: rgba(18, 22, 26, .06);
  --green: #3f9e4a;
  --danger: #d85f5f;
  --shadow: 0 18px 42px rgba(18, 22, 26, .10);
  --shadow-soft: 0 10px 28px rgba(18, 22, 26, .08);
}

body {
  background: #101113 !important;
  color: var(--ink);
}

.phone {
  background:
    linear-gradient(180deg, #101113 0, #181b1e 170px, var(--paper) 170px, var(--paper-2) 100%) !important;
}

.orb { display: none !important; }

.phone::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 172px;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, 0) 44%),
    linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, 0));
  pointer-events: none;
  z-index: 0;
}

.phone > *:not(.orb) {
  position: relative;
  z-index: 1;
}

.top-row,
.intro-head,
.nav {
  color: #fff;
}

.top-row {
  width: min(940px, calc(100% - 40px)) !important;
  max-width: 940px !important;
  margin: 22px auto 0 !important;
  padding: 0 !important;
  align-items: flex-start !important;
}

.greeting-wrap {
  align-items: flex-start !important;
  gap: 10px !important;
}

.brand-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}

.brand-logo {
  width: min(196px, 48vw);
  height: auto;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .28));
}

.greet-title {
  color: rgba(255, 255, 255, .92) !important;
  font-size: 16px !important;
  font-weight: 650 !important;
  letter-spacing: 0 !important;
}

.greet-sub,
.intro-head p,
.nav-title {
  color: rgba(255, 255, 255, .58) !important;
  letter-spacing: 0 !important;
}

.intro-head {
  width: min(840px, calc(100% - 40px));
  margin: 26px auto 6px !important;
  padding: 0 !important;
}

.intro-head h1 {
  color: #fff !important;
  font-size: 22px !important;
  font-weight: 720 !important;
  letter-spacing: 0 !important;
}

.nav {
  width: min(940px, calc(100% - 40px)) !important;
  margin: 22px auto 0 !important;
  padding: 0 !important;
}

.circle-btn {
  width: 42px !important;
  height: 42px !important;
  background: rgba(255, 255, 255, .10) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, .14) !important;
  box-shadow: none !important;
  backdrop-filter: blur(14px);
}

.circle-btn svg polyline,
.circle-btn svg path,
.circle-btn svg rect,
.circle-btn svg circle {
  stroke: currentColor !important;
}

.filter-wrap { gap: 8px !important; }
.filter-switch {
  background: rgba(255, 255, 255, .10) !important;
  border: 1px solid rgba(255, 255, 255, .14) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}
.filter-btn {
  min-width: 48px !important;
  border-radius: 8px !important;
  color: rgba(255, 255, 255, .62) !important;
}
.filter-btn.active {
  background: #fff !important;
  color: var(--ink) !important;
  box-shadow: none !important;
}
.filter-current {
  max-width: 162px !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, .12) !important;
  color: rgba(255, 255, 255, .72) !important;
  border: 1px solid rgba(255, 255, 255, .12) !important;
}

.home-main {
  width: min(940px, calc(100% - 40px)) !important;
  max-width: 940px !important;
  margin: 26px auto 0 !important;
  padding: 0 !important;
  gap: 0 !important;
}

.timeline,
.page-scroll {
  scrollbar-width: none;
}

.tl-body {
  padding: 16px 0 28px;
}

.rail {
  background: linear-gradient(180deg, rgba(20, 23, 26, .14), rgba(20, 23, 26, .26)) !important;
}

.rail-arrow svg polyline { stroke: rgba(20, 23, 26, .34) !important; }

.year-pill,
.year-pill.current {
  background: var(--ink) !important;
  color: #fff !important;
  border-radius: 8px !important;
  box-shadow: 0 12px 24px rgba(18, 22, 26, .14) !important;
}

.year-meta,
.year-meta b,
.month,
.t-date span {
  color: var(--ink) !important;
  letter-spacing: 0 !important;
}

.today-badge {
  color: var(--green) !important;
  letter-spacing: 0 !important;
}

.t-date::after {
  background: rgba(18, 22, 26, .22) !important;
}

.photo,
.moment,
.card,
.card-upload,
.card-generate,
.detail-card,
.persona-card,
.profile-panel,
.stat,
.picker-panel,
.modal,
.confirm-dialog,
.prism-ai-panel {
  border-radius: 8px !important;
  background: var(--surface) !important;
  border: 1px solid var(--line-soft) !important;
  box-shadow: var(--shadow-soft) !important;
  backdrop-filter: blur(18px);
}

.photo:hover,
.moment:hover,
.persona-card:not(.open):hover {
  box-shadow: var(--shadow) !important;
}

.photo.add,
.upload-box,
.input-box,
.thumbs .th,
.media-cell,
.moment-cell {
  border-radius: 8px !important;
  background: var(--surface-strong) !important;
  border: 1px solid var(--line-soft) !important;
  box-shadow: none !important;
}

.photo,
.moment,
.card,
.detail-card,
.detail-actions,
.persona-card,
.profile-panel {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

.upload-box {
  border-style: dashed !important;
  border-color: rgba(18, 22, 26, .18) !important;
}

.card-notch { display: none !important; }
.card h2,
.picker-title,
.confirm-title,
.modal-title,
.display-name,
.p-name,
.detail-caption,
.moment-text {
  color: var(--ink) !important;
  letter-spacing: 0 !important;
}

.hint,
.ai-text,
.detail-date,
.p-desc,
.p-explain,
.account-id,
.stat span,
.empty-state,
.today-tip,
.picker-desc {
  color: var(--muted) !important;
  letter-spacing: 0 !important;
}

.persona-badge,
.p-tag {
  border-radius: 8px !important;
  color: var(--green) !important;
  background: rgba(63, 158, 74, .10) !important;
}

.persona-select,
.picker-option,
.input-row input,
.input-row textarea {
  border-radius: 8px !important;
  background: #fff !important;
  border: 1px solid var(--line-soft) !important;
  box-shadow: none !important;
}

.btn-generate,
.act-btn.primary,
.picker-btn.primary,
.p-use-btn,
.action-btn.primary,
.confirm,
.confirm-btn.danger {
  background: var(--ink) !important;
  color: #fff !important;
  border-radius: 8px !important;
  box-shadow: 0 14px 28px rgba(18, 22, 26, .16) !important;
}

.btn-reselect,
.act-btn.ghost,
.picker-btn.ghost,
.confirm-btn.cancel,
.action-btn.ghost,
.p-edit-btn {
  background: #e9ece9 !important;
  color: var(--ink-2) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}

.act-btn.danger,
.action-btn.danger,
.p-del-btn {
  background: rgba(216, 95, 95, .10) !important;
  color: var(--danger) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}

.tabbar {
  height: 58px !important;
  width: min(420px, calc(100% - 32px)) !important;
  margin: 0 auto calc(12px + env(safe-area-inset-bottom)) !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, .92) !important;
  border: 1px solid rgba(18, 22, 26, .08) !important;
  box-shadow: 0 18px 38px rgba(18, 22, 26, .14) !important;
}

.tab {
  color: #687079;
  border-radius: 10px !important;
}
.tab .pill {
  inset: -3px -8px !important;
  border-radius: 10px !important;
  background: var(--ink) !important;
}
.tab span {
  color: currentColor !important;
}
.tab.active {
  color: #fff !important;
}
.tab.active span {
  color: #fff !important;
}
.tab svg [stroke] {
  stroke: currentColor !important;
}
.tab svg circle[fill]:not([fill="none"]) {
  fill: currentColor !important;
}

.modal-mask,
.picker-mask,
.confirm-mask {
  background: rgba(12, 14, 16, .48) !important;
  backdrop-filter: blur(10px) !important;
}

.modal,
.picker-panel {
  max-width: 520px !important;
}

.toast {
  background: rgba(18, 20, 22, .88) !important;
  border-radius: 8px !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .18) !important;
}

.image-viewer {
  background: rgba(10, 11, 12, .94) !important;
}

.viewer-close,
.viewer-nav,
.viewer-count {
  border-radius: 8px !important;
  background: rgba(255, 255, 255, .13) !important;
}

.viewer-count {
  background: rgba(8, 10, 12, .66) !important;
}

@media (min-width: 768px) {
  .top-row,
  .home-main,
  .nav {
    width: min(940px, calc(100% - 64px)) !important;
  }
  .cards-wrap {
    width: min(940px, calc(100% - 64px)) !important;
    max-width: 940px !important;
    gap: 16px !important;
  }
  .detail-card,
  .detail-actions,
  .profile-panel,
  .persona-list,
  .add-persona,
  .intro-head {
    max-width: 840px !important;
  }
}

@media (max-width: 520px) {
  .phone {
    background:
      linear-gradient(180deg, #101113 0, #181b1e 156px, var(--paper) 156px, var(--paper-2) 100%) !important;
  }
  .phone::before { height: 156px; }
  .top-row {
    width: calc(100% - 28px) !important;
    margin-top: 18px !important;
  }
  .brand-logo {
    width: min(156px, 45vw);
  }
  .greet-title { font-size: 14px !important; }
  .greet-sub { font-size: 11px !important; }
  .filter-switch { padding: 3px !important; }
  .filter-btn {
    min-width: 42px !important;
    padding: 6px 8px !important;
    font-size: 12px !important;
  }
  .filter-current {
    max-width: 128px !important;
    font-size: 11px !important;
  }
  .home-main {
    width: calc(100% - 28px) !important;
    margin-top: 22px !important;
  }
  .nav,
  .intro-head {
    width: calc(100% - 32px) !important;
  }
  .cards-wrap {
    padding: 0 16px !important;
  }
}

/* Home redesign: compact product bar, tighter feed, lighter dock. */
.home-phone {
  background:
    linear-gradient(180deg, #101113 0, #181b1e 138px, var(--paper) 138px, var(--paper-2) 100%) !important;
}

.home-phone::before {
  height: 140px;
}

.home-topbar {
  width: min(1080px, calc(100% - 56px)) !important;
  max-width: 1080px !important;
  min-height: 92px;
  display: grid !important;
  grid-template-columns: minmax(148px, 232px) minmax(0, 1fr) auto;
  align-items: center !important;
  gap: 18px !important;
  margin: 18px auto 0 !important;
}

.home-brand {
  gap: 0;
}

.home-brand .brand-logo {
  width: min(184px, 34vw);
}

.home-greeting {
  min-width: 0;
}

.home-greeting .greet-title {
  font-size: 18px !important;
  line-height: 1.25;
}

.home-greeting .greet-sub {
  margin-top: 5px;
  font-size: 12px !important;
}

.filter-wrap {
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
}

.filter-switch {
  padding: 5px !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, .09) !important;
  border-color: rgba(255, 255, 255, .16) !important;
}

.filter-btn {
  min-width: 54px !important;
  padding: 8px 12px !important;
  border-radius: 11px !important;
  line-height: 1;
}

.filter-current {
  max-width: 180px !important;
  padding: 8px 12px !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, .09) !important;
}

.home-main {
  width: min(1080px, calc(100% - 56px)) !important;
  max-width: 1080px !important;
  flex-direction: column !important;
  margin: 18px auto 0 !important;
  padding: 0 0 calc(96px + env(safe-area-inset-bottom)) !important;
}

.home-feed-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  padding: 0 0 12px 112px;
}

.home-feed-title {
  color: var(--ink);
  font-size: 18px;
  font-weight: 760;
  line-height: 1.2;
}

.home-feed-sub {
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
}

.home-feed-count {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}

.home-feed-count b {
  color: var(--ink);
  font-size: 18px;
  font-weight: 800;
}

.timeline {
  flex: 1 !important;
  padding: 0 !important;
}

.tl-body {
  padding: 4px 0 38px !important;
}

.tl-head {
  height: 42px !important;
}

.rail,
.rail-arrow,
.year-pill,
.year-pill.current {
  left: 48px !important;
}

.rail {
  top: 42px !important;
}

.year-meta {
  left: 112px !important;
}

.month {
  width: 96px !important;
  margin: 14px 0 -10px !important;
  padding-right: 36px;
  font-size: 22px !important;
}

.t-row {
  gap: 16px;
}

.t-date {
  flex: 0 0 96px !important;
}

.t-date span,
.today-badge {
  left: 54px !important;
}

.t-date::after {
  left: 48px !important;
  right: 8px !important;
}

.cards {
  align-items: flex-start;
}

.moment-stack {
  width: min(100%, 700px);
  gap: 14px !important;
}

.moment {
  width: 100%;
  padding: 16px 18px !important;
}

.moment-text {
  font-size: 15px !important;
  line-height: 1.72 !important;
}

.moment-grid {
  max-width: 318px !important;
  gap: 8px !important;
}

.moment-grid.one {
  max-width: 280px !important;
}

.moment-grid.two,
.moment-grid.four {
  max-width: 260px !important;
}

.cards > .photo.add {
  width: 112px !important;
  height: 112px;
}

.today-tip {
  margin-left: 112px !important;
}

.tabbar {
  position: fixed !important;
  left: 50%;
  right: auto;
  bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 24;
  height: 60px !important;
  width: auto !important;
  min-width: 360px;
  margin: 0 !important;
  padding: 6px !important;
  gap: 4px;
  transform: translateX(-50%);
  border-radius: 18px !important;
  background: rgba(255, 255, 255, .88) !important;
  border: 1px solid rgba(18, 22, 26, .08) !important;
  box-shadow: 0 18px 44px rgba(18, 22, 26, .16) !important;
  justify-content: center !important;
}

.tab {
  min-width: 78px;
  height: 48px;
  justify-content: center;
  border-radius: 14px !important;
  padding: 4px 10px !important;
}

.tab .pill {
  inset: 0 !important;
  border-radius: 14px !important;
}

@media (min-width: 768px) {
  .top-row.home-topbar,
  .home-main {
    width: min(1080px, calc(100% - 64px)) !important;
    max-width: 1080px !important;
  }
}

@media (max-width: 520px) {
  .home-phone {
    background:
      linear-gradient(180deg, #101113 0, #181b1e 152px, var(--paper) 152px, var(--paper-2) 100%) !important;
  }

  .home-phone::before {
    height: 152px;
  }

  .home-topbar {
    width: calc(100% - 28px) !important;
    min-height: 118px;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    column-gap: 12px !important;
    row-gap: 10px !important;
    margin-top: 18px !important;
  }

  .home-brand {
    grid-column: 1;
    grid-row: 1;
  }

  .home-greeting {
    grid-column: 1;
    grid-row: 2;
  }

  .filter-wrap {
    grid-column: 2;
    grid-row: 1 / span 2;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 8px !important;
  }

  .home-main {
    width: calc(100% - 28px) !important;
    margin-top: 16px !important;
    padding-bottom: calc(92px + env(safe-area-inset-bottom)) !important;
  }

  .home-feed-head {
    padding-left: 0;
    align-items: center;
  }

  .home-feed-title {
    font-size: 16px;
  }

  .home-feed-sub {
    display: none;
  }

  .home-feed-count b {
    font-size: 16px;
  }

  .rail,
  .rail-arrow,
  .year-pill,
  .year-pill.current {
    left: 34px !important;
  }

  .year-meta {
    left: 82px !important;
  }

  .month {
    width: 68px !important;
    padding-right: 24px;
    font-size: 18px !important;
  }

  .t-row {
    gap: 10px;
  }

  .t-date {
    flex-basis: 68px !important;
  }

  .t-date span,
  .today-badge {
    left: 40px !important;
  }

  .t-date::after {
    left: 34px !important;
    right: 6px !important;
  }

  .moment-stack {
    width: 100%;
  }

  .moment {
    padding: 14px !important;
  }

  .moment-grid {
    max-width: 248px !important;
  }

  .cards > .photo.add {
    width: 96px !important;
    height: 96px;
  }

  .today-tip {
    margin-left: 78px !important;
  }

  .tabbar {
    min-width: 0;
    width: calc(100% - 32px) !important;
    height: 58px !important;
    bottom: calc(12px + env(safe-area-inset-bottom));
  }

  .tab {
    min-width: 0;
    flex: 1;
    height: 46px;
    padding: 4px 6px !important;
  }

  .tab span {
    font-size: 10px !important;
  }
}

/* Prism dark mode: one unified AI-native surface system. */
:root {
  --ink: #f5f7fb;
  --ink-2: #dce2ea;
  --muted: #96a0ad;
  --faint: #65707f;
  --paper: #08090c;
  --paper-2: #0c0f14;
  --surface: rgba(18, 21, 27, .86);
  --surface-strong: rgba(25, 29, 37, .92);
  --surface-soft: rgba(255, 255, 255, .055);
  --line: rgba(255, 255, 255, .13);
  --line-soft: rgba(255, 255, 255, .08);
  --green: #7ee787;
  --accent: #8cc8ff;
  --accent-2: #f3a6ff;
  --danger: #ff7b7b;
  --shadow: 0 24px 80px rgba(0, 0, 0, .36);
  --shadow-soft: 0 16px 48px rgba(0, 0, 0, .26);
}

html,
body {
  background: #06070a !important;
}

body {
  color: var(--ink) !important;
}

.phone,
.home-phone {
  background:
    linear-gradient(180deg, #0b0d12 0, #11151d 126px, #0c0f14 238px, #08090c 100%) !important;
}

.phone::before,
.home-phone::before {
  height: 100%;
  background:
    linear-gradient(115deg, rgba(140, 200, 255, .14), rgba(243, 166, 255, .07) 38%, rgba(126, 231, 135, .05) 64%, rgba(255, 255, 255, 0) 82%),
    linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0) 32%) !important;
  opacity: .9;
}

.top-row,
.home-topbar,
.intro-head,
.nav {
  color: var(--ink) !important;
}

.home-topbar {
  min-height: 104px;
}

.brand-logo {
  filter: drop-shadow(0 14px 30px rgba(140, 200, 255, .16)) drop-shadow(0 2px 18px rgba(243, 166, 255, .12)) !important;
}

.greet-title,
.home-feed-title,
.intro-head h1,
.nav-title,
.card h2,
.picker-title,
.confirm-title,
.modal-title,
.display-name,
.p-name,
.detail-caption,
.moment-text,
.month,
.t-date span,
.year-meta b,
.home-feed-count b {
  color: var(--ink) !important;
}

.greet-sub,
.home-feed-count,
.intro-head p,
.detail-date,
.p-desc,
.p-explain,
.account-id,
.stat span,
.empty-state,
.today-tip,
.picker-desc,
.ai-text,
.hint {
  color: var(--muted) !important;
}

.home-feed-head {
  padding-left: 104px;
}

.home-feed-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 17px;
}

.home-feed-title::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 18px rgba(140, 200, 255, .78);
}

.home-feed-count {
  padding: 8px 11px;
  border-radius: 999px;
  background: var(--surface-soft);
  border: 1px solid var(--line-soft);
}

.filter-switch,
.filter-current,
.circle-btn,
.tabbar {
  background: rgba(18, 21, 27, .72) !important;
  border: 1px solid var(--line) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 18px 54px rgba(0, 0, 0, .28) !important;
  backdrop-filter: blur(22px) saturate(1.2);
}

.filter-btn {
  color: rgba(245, 247, 251, .58) !important;
}

.filter-btn.active {
  color: #fff !important;
  background: linear-gradient(135deg, rgba(140, 200, 255, .24), rgba(243, 166, 255, .16)) !important;
  border: 1px solid rgba(255, 255, 255, .10) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10), 0 10px 28px rgba(140, 200, 255, .14) !important;
}

.filter-current {
  color: rgba(245, 247, 251, .76) !important;
}

.filter-current.unset {
  color: rgba(245, 247, 251, .46) !important;
}

.rail {
  background: linear-gradient(180deg, rgba(140, 200, 255, .44), rgba(243, 166, 255, .26), rgba(126, 231, 135, .16)) !important;
  box-shadow: 0 0 22px rgba(140, 200, 255, .22);
}

.rail-arrow svg polyline {
  stroke: rgba(140, 200, 255, .7) !important;
}

.year-pill,
.year-pill.current {
  color: #fff !important;
  background:
    linear-gradient(135deg, rgba(140, 200, 255, .22), rgba(243, 166, 255, .14)),
    rgba(18, 21, 27, .92) !important;
  border: 1px solid rgba(255, 255, 255, .12) !important;
  box-shadow: 0 16px 34px rgba(0, 0, 0, .32), 0 0 24px rgba(140, 200, 255, .16) !important;
}

.today-badge {
  color: var(--green) !important;
  text-shadow: 0 0 16px rgba(126, 231, 135, .36);
}

.t-date::after {
  background: rgba(140, 200, 255, .38) !important;
  box-shadow: 0 0 14px rgba(140, 200, 255, .18);
}

.photo,
.moment,
.card,
.card-upload,
.card-generate,
.detail-card,
.persona-card,
.profile-panel,
.stat,
.picker-panel,
.modal,
.confirm-dialog,
.prism-ai-panel {
  background: var(--surface) !important;
  border: 1px solid var(--line-soft) !important;
  box-shadow: var(--shadow-soft) !important;
}

.moment,
.detail-card,
.card-upload,
.card-generate,
.persona-card,
.profile-panel,
.picker-panel,
.modal,
.confirm-dialog {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .035)),
    var(--surface) !important;
}

.photo:hover,
.moment:hover,
.persona-card:not(.open):hover {
  border-color: rgba(140, 200, 255, .22) !important;
  box-shadow: var(--shadow), 0 0 0 1px rgba(140, 200, 255, .08) !important;
}

.photo.add,
.upload-box,
.input-box,
.thumbs .th,
.media-cell,
.moment-cell,
.moment-photo {
  background: var(--surface-strong) !important;
  border: 1px solid var(--line-soft) !important;
}

.photo.add svg line,
.upload-box svg line,
.photo.add svg [stroke],
.upload-box svg [stroke] {
  stroke: rgba(140, 200, 255, .72) !important;
}

.upload-box {
  border-style: dashed !important;
  border-color: rgba(140, 200, 255, .34) !important;
}

.moment-cell img,
.media-cell img,
.detail-photo img,
.photo img,
.thumbs img {
  background: #11151d;
}

.persona-badge,
.p-tag {
  color: var(--green) !important;
  background: rgba(126, 231, 135, .12) !important;
  border: 1px solid rgba(126, 231, 135, .16) !important;
}

.persona-select,
.picker-option,
.input-row input,
.input-row textarea,
textarea,
input {
  color: var(--ink) !important;
  background: rgba(255, 255, 255, .06) !important;
  border: 1px solid var(--line-soft) !important;
}

.input-row input::placeholder,
.input-row textarea::placeholder,
textarea::placeholder,
input::placeholder {
  color: rgba(150, 160, 173, .68) !important;
}

.picker-option.active {
  color: var(--ink) !important;
  background: rgba(140, 200, 255, .13) !important;
  border-color: rgba(140, 200, 255, .34) !important;
}

.picker-emoji,
.p-avatar,
.avatar {
  background: rgba(255, 255, 255, .09) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08) !important;
}

.btn-generate,
.act-btn.primary,
.picker-btn.primary,
.p-use-btn,
.action-btn.primary,
.confirm,
.confirm-btn.danger {
  color: #fff !important;
  background:
    linear-gradient(135deg, rgba(140, 200, 255, .30), rgba(243, 166, 255, .18)),
    #161b24 !important;
  border: 1px solid rgba(255, 255, 255, .12) !important;
  box-shadow: 0 18px 38px rgba(140, 200, 255, .16) !important;
}

.btn-reselect,
.act-btn.ghost,
.picker-btn.ghost,
.confirm-btn.cancel,
.action-btn.ghost,
.p-edit-btn {
  color: var(--ink-2) !important;
  background: rgba(255, 255, 255, .07) !important;
  border: 1px solid var(--line-soft) !important;
}

.act-btn.danger,
.action-btn.danger,
.p-del-btn,
.confirm-btn.danger {
  color: var(--danger) !important;
  background: rgba(255, 123, 123, .11) !important;
  border: 1px solid rgba(255, 123, 123, .16) !important;
}

.tabbar {
  background: rgba(12, 15, 20, .82) !important;
  border-color: rgba(255, 255, 255, .12) !important;
}

.tab {
  color: rgba(245, 247, 251, .56) !important;
}

.tab .pill {
  background: linear-gradient(135deg, rgba(140, 200, 255, .22), rgba(243, 166, 255, .18)) !important;
  border: 1px solid rgba(255, 255, 255, .10);
}

.tab.active {
  color: #fff !important;
}

.tab.active .pill {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 24px rgba(140, 200, 255, .18);
}

.tab svg [stroke],
.circle-btn svg [stroke] {
  stroke: currentColor !important;
}

.tab svg circle[fill]:not([fill="none"]) {
  fill: currentColor !important;
}

.modal-mask,
.picker-mask,
.confirm-mask,
.prism-ai-overlay {
  background: rgba(4, 5, 7, .72) !important;
  backdrop-filter: blur(16px) saturate(1.1) !important;
}

.toast {
  background: rgba(18, 21, 27, .94) !important;
  border: 1px solid var(--line-soft);
  color: var(--ink) !important;
}

.image-viewer {
  background: rgba(3, 4, 6, .96) !important;
}

.viewer-close,
.viewer-nav,
.viewer-count {
  color: var(--ink) !important;
  background: rgba(255, 255, 255, .09) !important;
  border: 1px solid var(--line-soft) !important;
}

@media (max-width: 520px) {
  .phone,
  .home-phone {
    background:
      linear-gradient(180deg, #0b0d12 0, #11151d 142px, #0c0f14 238px, #08090c 100%) !important;
  }

  .home-feed-head {
    padding-left: 0;
  }
}

/* Final layout pass: centered dark Moments feed and compact app surfaces. */
body {
  min-height: 100dvh;
}

.phone,
.home-phone {
  width: 100% !important;
  max-width: none !important;
  background:
    radial-gradient(900px 520px at 16% -8%, rgba(70, 112, 165, .28), transparent 64%),
    radial-gradient(760px 440px at 88% 8%, rgba(98, 154, 130, .14), transparent 66%),
    linear-gradient(180deg, #121722 0, #0b0e13 56%, #07090c 100%) !important;
}

.phone::before,
.home-phone::before {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .055), transparent 34%),
    linear-gradient(115deg, rgba(140, 200, 255, .10), rgba(243, 166, 255, .045) 42%, transparent 76%) !important;
}

.page-scroll {
  width: 100% !important;
  padding-bottom: calc(96px + env(safe-area-inset-bottom)) !important;
}

.top-row,
.nav,
.intro-head,
.home-main,
.cards-wrap,
.profile-panel,
.persona-list,
.add-persona,
.detail-card,
.detail-actions {
  box-sizing: border-box;
}

.nav,
.intro-head,
.profile-panel,
.persona-list,
.add-persona,
.detail-card,
.detail-actions {
  width: min(720px, calc(100% - 32px)) !important;
  max-width: 720px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.intro-head {
  margin-top: 26px !important;
  margin-bottom: 8px !important;
  padding: 0 !important;
}

.intro-head h1,
.p-name,
.p-explain-title,
.persona-name,
.display-name,
.stat strong,
.card h2,
.picker-title,
.modal-title,
.confirm-title {
  color: var(--ink) !important;
}

.intro-head p,
.p-desc,
.p-explain,
.account-id,
.ai-text,
.hint,
.picker-desc {
  color: var(--muted) !important;
}

.tabbar {
  width: min(360px, calc(100% - 28px)) !important;
  min-width: 0 !important;
  height: 58px !important;
  padding: 6px !important;
  border-radius: 20px !important;
  background: rgba(8, 11, 16, .84) !important;
  border: 1px solid rgba(255, 255, 255, .12) !important;
  box-shadow: 0 18px 58px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .05) !important;
}

.tab {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  height: 46px !important;
  border-radius: 15px !important;
}

.tab span {
  color: currentColor !important;
  letter-spacing: 0 !important;
}

.tab .pill {
  border-radius: 15px !important;
}

.home-topbar {
  width: min(760px, calc(100% - 32px)) !important;
  max-width: 760px !important;
  min-height: 88px !important;
  grid-template-columns: minmax(132px, 188px) minmax(0, 1fr) auto !important;
  gap: 18px !important;
  margin: 22px auto 0 !important;
}

.home-brand .brand-logo {
  width: min(174px, 35vw) !important;
}

.home-greeting .greet-title {
  font-size: 17px !important;
  line-height: 1.25 !important;
}

.home-greeting .greet-sub {
  font-size: 12px !important;
}

.filter-switch {
  border-radius: 14px !important;
}

.filter-btn {
  min-width: 50px !important;
  padding: 8px 11px !important;
  border-radius: 10px !important;
}

.filter-current {
  display: none !important;
}

.home-main {
  width: min(760px, calc(100% - 32px)) !important;
  max-width: 760px !important;
  margin: 22px auto 0 !important;
  padding: 0 0 calc(102px + env(safe-area-inset-bottom)) !important;
}

.home-feed-head {
  padding: 0 0 16px 74px !important;
  align-items: center !important;
}

.home-feed-title {
  font-size: 16px !important;
}

.home-feed-count {
  padding: 7px 10px !important;
}

.home-feed-count b {
  font-size: 17px !important;
}

.timeline {
  width: 100% !important;
}

.tl-body {
  padding: 2px 0 44px !important;
}

.tl-head {
  height: 40px !important;
}

.rail,
.rail-arrow,
.year-pill,
.year-pill.current {
  left: 38px !important;
}

.rail {
  top: 42px !important;
  bottom: 0 !important;
}

.year-pill,
.year-pill.current {
  height: 32px !important;
  min-width: 68px !important;
  padding: 0 13px !important;
  border-radius: 10px !important;
  font-size: 15px !important;
}

.year-meta {
  left: 82px !important;
  top: 7px !important;
}

.month {
  width: 74px !important;
  margin: 14px 0 8px !important;
  padding: 0 22px 0 0 !important;
  text-align: right !important;
  font-size: 20px !important;
  line-height: 1.1 !important;
}

.t-row {
  align-items: flex-start !important;
  gap: 10px !important;
  margin-top: 0 !important;
}

.t-row + .t-row {
  margin-top: 16px !important;
}

.t-date {
  flex: 0 0 74px !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 1px 22px 0 0 !important;
  position: relative !important;
  text-align: right !important;
}

.t-date span,
.today-badge {
  position: static !important;
  left: auto !important;
  top: auto !important;
  right: auto !important;
  display: block !important;
  transform: none !important;
  text-align: right !important;
}

.t-date span {
  font-size: 18px !important;
  line-height: 1.15 !important;
}

.today-badge {
  margin-top: 4px !important;
  font-size: 10px !important;
}

.t-date::after {
  left: 36px !important;
  right: 8px !important;
  top: 11px !important;
}

.cards {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  align-items: flex-start !important;
}

.moment-stack {
  width: 100% !important;
  max-width: 646px !important;
  gap: 12px !important;
}

.moment {
  width: 100% !important;
  min-height: auto !important;
  padding: 14px 16px !important;
  border-radius: 12px !important;
}

.moment-text {
  font-size: 15px !important;
  line-height: 1.68 !important;
}

.moment-grid {
  max-width: 286px !important;
  gap: 7px !important;
}

.moment-grid.one {
  max-width: min(320px, 100%) !important;
}

.moment-grid.two,
.moment-grid.four {
  max-width: 262px !important;
}

.moment-cell,
.media-cell {
  border-radius: 8px !important;
}

.cards > .photo.add {
  width: 104px !important;
  height: 104px !important;
}

.today-tip {
  margin-left: 84px !important;
}

.cards-wrap {
  width: min(640px, calc(100% - 32px)) !important;
  max-width: 640px !important;
  margin: 16px auto 0 !important;
  padding: 0 !important;
  gap: 14px !important;
  align-items: stretch !important;
}

.cards-wrap > .card {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  flex: none !important;
}

.card,
.card-upload,
.card-generate,
.card-generate-inner {
  border-radius: 14px !important;
}

.card-upload,
.card-generate-inner {
  padding: 18px !important;
}

.upload-row {
  margin-top: 14px !important;
  justify-content: flex-start !important;
}

.upload-box {
  flex: 0 0 104px !important;
  max-width: 104px !important;
  border-radius: 12px !important;
}

.thumbs {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

.hint {
  margin-top: 12px !important;
  text-align: left !important;
}

.input-box {
  width: 100% !important;
  height: 104px !important;
  margin: 14px 0 0 !important;
  border-radius: 12px !important;
}

.input-box textarea {
  border-radius: 12px !important;
}

.persona-select {
  min-height: 52px !important;
  border-radius: 12px !important;
}

.persona-name {
  font-weight: 650 !important;
}

.gen-actions {
  align-items: stretch !important;
  gap: 10px !important;
  margin-top: 18px !important;
}

.btn-generate,
.btn-reselect {
  width: 100% !important;
  min-height: 46px !important;
  justify-content: center !important;
  border-radius: 12px !important;
}

.persona-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  padding: 14px 0 4px !important;
}

.persona-card {
  width: 100% !important;
  border-radius: 14px !important;
}

.persona-card.selected {
  background:
    linear-gradient(135deg, rgba(126, 231, 135, .12), rgba(140, 200, 255, .08)),
    var(--surface) !important;
  border-color: rgba(126, 231, 135, .28) !important;
}

.p-head {
  min-height: 74px !important;
  padding: 14px 16px !important;
}

.p-main {
  min-width: 0 !important;
}

.p-name-row {
  gap: 8px !important;
  flex-wrap: wrap !important;
}

.p-name {
  font-size: 16px !important;
  line-height: 1.25 !important;
}

.p-desc {
  margin-top: 4px !important;
  line-height: 1.35 !important;
}

.add-persona {
  min-height: 56px !important;
  border-radius: 16px !important;
  color: var(--ink-2) !important;
  background: rgba(255, 255, 255, .055) !important;
  border: 1px dashed rgba(140, 200, 255, .28) !important;
}

.profile-panel {
  margin-top: 42px !important;
  padding: 24px !important;
  border-radius: 16px !important;
}

.profile-panel .avatar {
  color: var(--ink) !important;
}

.stat {
  border-radius: 12px !important;
}

.detail-card,
.detail-actions {
  margin-top: 16px !important;
}

body.from-home-detail .nav {
  animation: detail-nav-enter .32s cubic-bezier(.22, .8, .32, 1) both !important;
}

body.from-home-detail .detail-card {
  animation: detail-card-enter .44s cubic-bezier(.18, .86, .28, 1) both !important;
}

body.from-home-detail .detail-actions {
  animation: detail-actions-enter .5s cubic-bezier(.18, .86, .28, 1) .06s both !important;
}

@keyframes detail-nav-enter {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes detail-card-enter {
  from { opacity: 0; transform: translateY(18px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes detail-actions-enter {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (min-width: 768px) {
  .cards-wrap {
    width: min(760px, calc(100% - 48px)) !important;
    max-width: 760px !important;
    flex-direction: row !important;
    gap: 16px !important;
  }

  .cards-wrap > .card {
    flex: 1 1 0 !important;
  }

  .card-upload,
  .card-generate-inner {
    padding: 22px !important;
  }

  .home-topbar,
  .home-main {
    width: min(760px, calc(100% - 48px)) !important;
    max-width: 760px !important;
  }
}

@media (max-width: 640px) {
  .nav,
  .intro-head,
  .profile-panel,
  .persona-list,
  .add-persona,
  .detail-card,
  .detail-actions,
  .cards-wrap {
    width: calc(100% - 28px) !important;
  }

  .nav {
    margin-top: 18px !important;
  }

  .home-topbar {
    width: calc(100% - 28px) !important;
    min-height: 104px !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto !important;
    row-gap: 8px !important;
  }

  .home-brand {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  .home-brand .brand-logo {
    width: min(152px, 46vw) !important;
  }

  .home-greeting {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }

  .filter-wrap {
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;
    align-items: flex-end !important;
  }

  .home-main {
    width: calc(100% - 28px) !important;
    margin-top: 16px !important;
  }

  .home-feed-head {
    padding-left: 0 !important;
  }

  .tl-body {
    padding-top: 0 !important;
  }

  .rail,
  .rail-arrow,
  .year-pill,
  .year-pill.current {
    left: 32px !important;
  }

  .year-meta {
    left: 72px !important;
  }

  .month,
  .t-date {
    width: 62px !important;
    flex-basis: 62px !important;
    padding-right: 20px !important;
  }

  .month {
    font-size: 18px !important;
  }

  .t-date span {
    font-size: 17px !important;
  }

  .t-date::after {
    left: 30px !important;
    right: 6px !important;
  }

  .t-row {
    gap: 8px !important;
  }

  .moment {
    padding: 13px !important;
  }

  .moment-grid {
    max-width: min(246px, 100%) !important;
  }

  .moment-grid.one {
    max-width: min(292px, 100%) !important;
  }

  .card-upload,
  .card-generate-inner {
    padding: 17px !important;
  }

  .thumbs {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .profile-panel {
    margin-top: 28px !important;
    padding: 20px !important;
  }
}

/* Alignment hotfix: explicit timeline geometry and form navigation anchors. */
.home-feed-head {
  padding-left: 92px !important;
}

.tl-body {
  --axis-x: 68px;
  --label-x: 92px;
  --date-col: 174px;
}

.rail,
.rail-arrow {
  left: var(--axis-x) !important;
}

.year-pill,
.year-pill.current {
  left: var(--label-x) !important;
  top: 0 !important;
  transform: none !important;
  min-width: 86px !important;
  height: 36px !important;
  padding: 0 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

.month {
  width: var(--date-col) !important;
  margin: 24px 0 14px !important;
  padding: 0 0 0 var(--label-x) !important;
  text-align: left !important;
  line-height: 1.15 !important;
}

.t-date {
  flex: 0 0 var(--date-col) !important;
  padding: 0 0 0 var(--label-x) !important;
  text-align: left !important;
}

.t-date span,
.today-badge {
  text-align: left !important;
}

.t-date::after {
  display: none !important;
}

.cards {
  padding-top: 0 !important;
}

.nav,
.cards-wrap {
  width: min(1520px, calc(100% - 88px)) !important;
  max-width: 1520px !important;
}

.nav {
  padding: 0 !important;
  align-items: center !important;
}

.circle-btn.confirm {
  width: auto !important;
  min-width: 84px !important;
  padding: 0 20px !important;
  border-radius: 14px !important;
}

.picker-name,
.picker-option .picker-name,
.picker-option.active .picker-name {
  color: var(--ink) !important;
}

.picker-desc,
.picker-empty,
.picker-option .picker-desc,
.picker-option.active .picker-desc {
  color: var(--muted) !important;
}

.picker-option,
.picker-option.active {
  background: rgba(255, 255, 255, .065) !important;
}

.picker-option.active {
  border-color: rgba(140, 200, 255, .38) !important;
}

@media (min-width: 768px) {
  .cards-wrap {
    width: min(1520px, calc(100% - 88px)) !important;
    max-width: 1520px !important;
  }
}

@media (max-width: 640px) {
  .home-feed-head {
    padding-left: 46px !important;
  }

  .tl-body {
    --axis-x: 28px;
    --label-x: 46px;
    --date-col: 112px;
  }

  .year-pill,
  .year-pill.current {
    min-width: 72px !important;
    height: 34px !important;
    padding: 0 12px !important;
  }

  .month {
    margin-top: 20px !important;
    padding-left: var(--label-x) !important;
  }

  .t-date {
    padding-left: var(--label-x) !important;
  }

  .nav,
  .cards-wrap {
    width: calc(100% - 28px) !important;
    max-width: none !important;
  }

  .circle-btn.confirm {
    min-width: 76px !important;
    padding: 0 16px !important;
  }
}

/* Timeline final alignment: year centered on rail, month on rail-left. */
.home-main {
  --timeline-axis-x: 64px;
  --timeline-date-col: 168px;
  --timeline-title-x: 16px;
}

.home-feed-head {
  padding-left: var(--timeline-title-x) !important;
}

.home-feed-title,
.home-feed-count b,
.month,
.t-date span {
  color: var(--ink) !important;
}

.tl-body {
  --axis-x: var(--timeline-axis-x);
  --date-col: var(--timeline-date-col);
}

.rail,
.rail-arrow {
  left: var(--axis-x) !important;
}

.year-pill,
.year-pill.current {
  left: var(--axis-x) !important;
  transform: translateX(-50%) !important;
  min-width: 96px !important;
  height: 38px !important;
  padding: 0 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff !important;
}

.month {
  width: var(--axis-x) !important;
  margin: 28px 0 16px !important;
  padding: 0 18px 0 0 !important;
  text-align: right !important;
  font-size: 28px !important;
  line-height: 1.05 !important;
  white-space: nowrap !important;
}

.t-date {
  flex: 0 0 var(--date-col) !important;
  padding: 0 0 0 calc(var(--axis-x) + 24px) !important;
  text-align: left !important;
}

.t-date span,
.today-badge {
  text-align: left !important;
}

.today-badge {
  color: var(--green) !important;
}

@media (max-width: 640px) {
  .home-main {
    --timeline-axis-x: 54px;
    --timeline-date-col: 124px;
    --timeline-title-x: 11px;
  }

  .home-feed-head {
    padding-left: var(--timeline-title-x) !important;
  }

  .year-pill,
  .year-pill.current {
    min-width: 86px !important;
    height: 36px !important;
    padding: 0 14px !important;
  }

  .month {
    width: var(--axis-x) !important;
    padding-right: 16px !important;
    font-size: 26px !important;
  }

  .t-date {
    flex-basis: var(--date-col) !important;
    padding-left: calc(var(--axis-x) + 20px) !important;
  }
}

/* Bottom dock hotfix: full-bleed content with scroll-safe inner padding. */
.phone,
.home-phone {
  padding-bottom: 0 !important;
}

.home-main {
  padding-bottom: 0 !important;
}

.page-scroll {
  padding-bottom: calc(132px + env(safe-area-inset-bottom)) !important;
}

.timeline {
  padding-bottom: 0 !important;
}

.tl-body {
  padding-bottom: calc(142px + env(safe-area-inset-bottom)) !important;
}

.spacer {
  min-height: calc(112px + env(safe-area-inset-bottom)) !important;
}

.tabbar {
  bottom: calc(8px + env(safe-area-inset-bottom)) !important;
  margin: 0 !important;
  background: rgba(7, 10, 15, .56) !important;
  border-color: rgba(255, 255, 255, .16) !important;
  box-shadow:
    0 18px 52px rgba(0, 0, 0, .36),
    inset 0 1px 0 rgba(255, 255, 255, .10) !important;
  backdrop-filter: blur(28px) saturate(1.18) !important;
  -webkit-backdrop-filter: blur(28px) saturate(1.18) !important;
}

.tabbar::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02));
}

.tabbar .tab {
  position: relative;
  z-index: 1;
}

.today-tip {
  margin-left: var(--timeline-date-col) !important;
  padding-left: 0 !important;
  text-align: left !important;
  transform: translateX(0) !important;
}

@media (max-width: 640px) {
  .tabbar {
    bottom: calc(6px + env(safe-area-inset-bottom)) !important;
  }

  .page-scroll {
    padding-bottom: calc(120px + env(safe-area-inset-bottom)) !important;
  }

  .tl-body {
    padding-bottom: calc(128px + env(safe-area-inset-bottom)) !important;
  }

  .today-tip {
    margin-left: var(--timeline-date-col) !important;
  }
}