:root {
  --bg: #f3f6f5;
  --surface: #ffffff;
  --surface-soft: #edf2ef;
  --glass: #ffffff;
  --text: #121615;
  --text-2: #3e4744;
  --muted: #626d68;
  --line: rgba(54,74,68,.10);
  --accent: #117963;
  --accent-2: #0f7968;
  --accent-soft: #e6f4f0;
  --reward: #edf6f3;
  --danger: #cf4f4f;
  --shadow: 0 2px 8px rgba(33,56,49,.025);
  --glass-shadow: none;
  --keyboard: 0px;
  /* Область нажатия одна на весь интерфейс: отдельные значения по
     кнопкам разъезжаются и на узких экранах промахиваются мимо. */
  --tap: 44px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { width:100%; height:100%; margin:0; overflow:hidden; background:#0f1312; color:var(--text); }
button, input, textarea, select { font:inherit; }
button { color:inherit; -webkit-tap-highlight-color:transparent; }
button, [role="button"] { min-height:var(--tap); }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline:3px solid color-mix(in srgb,var(--accent) 32%,transparent);
  outline-offset:2px;
}
svg { fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

.app-shell {
  position:relative;
  display:grid;
  grid-template-rows:minmax(0,1fr) auto;
  isolation:isolate;
  width:min(100%,760px);
  height:100dvh;
  margin:0 auto;
  overflow:hidden;
  background:var(--bg);
}
.ambient { display:none; }

.screens { height:100%; min-height:0; overflow:hidden; }
.screen { height:100%; min-width:0; overflow-x:hidden; background:transparent; }
.screen[hidden] { display:none !important; }
.screen-today {
  display:flex;
  flex-direction:column;
  gap:20px;
  padding:max(14px,env(safe-area-inset-top)) 18px 22px;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:none;
}
.screen-today::-webkit-scrollbar,.scroll-content::-webkit-scrollbar { display:none; }
.screen-today > * { flex:0 0 auto; }

/* Компактный utility-bar: служебный статус, а не отдельная карточка */
.utility-bar {
  display:grid;
  grid-template-columns:38px minmax(0,1fr) auto;
  gap:9px;
  align-items:center;
  min-height:42px;
}
.utility-avatar {
  --ring-progress:28%;
  position:relative;
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:var(--accent-2);
  background:
    linear-gradient(var(--bg),var(--bg)) padding-box,
    conic-gradient(var(--accent) var(--ring-progress),rgba(22,143,122,.10) 0) border-box;
  border:2px solid transparent;
}
.utility-avatar::after {
  content:"";
  position:absolute;
  inset:4px;
  z-index:-1;
  border-radius:50%;
  background:linear-gradient(145deg,#f6fbf9,#e7f3ef);
}
.utility-avatar svg { width:19px; height:19px; }

.utility-copy {
  min-width:0;
  display:flex;
  align-items:center;
}
.utility-copy strong {
  overflow:hidden;
  color:var(--text-2);
  font-size:12.5px;
  line-height:1.2;
  font-weight:720;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.streak-pill {
  min-width:48px;
  height:36px;
  padding:0 9px;
  border:1px solid rgba(22,143,122,.16);
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  color:var(--accent-2);
  background:rgba(22,143,122,.08);
  box-shadow:inset 0 0 0 .5px rgba(22,143,122,.06);
}
.streak-pill svg { width:15px; height:15px; }
.streak-pill strong { font-size:13.5px; font-weight:800; }
.streak-pill.is-milestone {
  background:rgba(22,143,122,.13);
  box-shadow:0 0 0 3px rgba(22,143,122,.045),inset 0 0 0 .5px rgba(22,143,122,.10);
}
.streak-pill.is-grace { border-style:dashed; }

/* Единственный главный CTA */
.hero-card {
  position:relative;
  overflow:hidden;
  min-height:252px;
  padding:20px;
  border-radius:24px;
  color:var(--text);
  background:var(--surface);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}
.hero-meta {
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.hero-badge,.hero-duration {
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:5px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:720;
}
.hero-badge { color:var(--accent-2); background:var(--accent-soft); }
.hero-duration { color:var(--muted); background:var(--surface-soft); border:1px solid var(--line); white-space:nowrap; }
.hero-copy { position:relative; z-index:2; margin-top:20px; }
.hero-copy h2 {
  margin:0;
  max-width:540px;
  font-size:clamp(24px,6vw,32px);
  line-height:1.14;
  overflow-wrap:anywhere;
  font-weight:790;
  letter-spacing:-.045em;
}
.hero-copy p { max-width:520px; margin:7px 0 0; color:var(--muted); font-size:13.5px; line-height:1.34; }
.hero-cta {
  position:relative;
  z-index:3;
  width:100%;
  min-height:58px;
  margin-top:20px;
  padding:0 18px;
  border:0;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  color:#fff;
  background:var(--accent);
  box-shadow:none;
  font-size:16px;
  font-weight:800;
  transition:transform .16s ease;
}
.hero-cta:active { transform:scale(.982); }
.hero-cta:disabled { opacity:.58; cursor:default; transform:none; }
.hero-cta span:last-child { font-size:25px; font-weight:300; line-height:1; }
.week-progress { position:relative; z-index:2; margin-top:15px; }
.week-progress-copy {
  color:var(--text-2);
  font-size:11.5px;
  font-weight:700;
}
.progress-track {
  height:9px;
  margin-top:7px;
  overflow:hidden;
  border-radius:999px;
  background:var(--line);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.08);
}
.progress-track > span { display:block; height:100%; border-radius:inherit; background:var(--accent); transition:width .28s ease; box-shadow:none; }


/* Одна variable-reward карточка: стабильная форма, меняющееся содержание */
.reward-card {
  position:relative;
  min-height:124px;
  display:grid;
  grid-template-columns:46px minmax(0,1fr) auto;
  align-items:center;
  gap:13px;
  padding:15px;
  border-radius:27px;
  background:var(--surface);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}
.reward-icon {
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border-radius:16px;
  color:var(--accent-2);
  background:var(--accent-soft);
}
.reward-icon svg { width:25px; height:25px; }
.reward-copy { min-width:0; }
.reward-type { display:block; color:var(--accent-2); font-size:10px; font-weight:740; }
.reward-copy h3 { display:-webkit-box; margin:4px 0 0; overflow:hidden; font-size:17px; line-height:1.16; font-weight:750; letter-spacing:-.024em; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.reward-copy p { overflow:hidden; margin:5px 0 0; color:var(--muted); font-size:11.5px; line-height:1.25; white-space:nowrap; text-overflow:ellipsis; }
.reward-action {
  min-width:86px;
  height:42px;
  padding:0 13px;
  border:1px solid rgba(22,143,122,.12);
  border-radius:999px;
  color:var(--accent-2);
  background:rgba(255,255,255,.54);
  font-size:11.5px;
  font-weight:720;
}
.reward-action:active { transform:scale(.98); }
.reward-card[data-reward-kind="milestone"] {
  background:linear-gradient(145deg,rgba(255,255,255,.92),rgba(235,247,243,.82));
}
.reward-card[data-reward-kind="milestone"] .reward-icon { background:rgba(22,143,122,.14); }

/* Investment block: заметен, но не конкурирует с CTA */
.profile-investment {
  width:100%;
  min-height:136px;
  padding:16px;
  border:1px solid var(--line);
  border-radius:24px;
  background:var(--surface);
  box-shadow:var(--shadow);
  text-align:left;
}
.profile-investment-top { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.profile-investment-top > div { display:flex; align-items:baseline; gap:10px; }
.profile-investment-top span { color:var(--text); font-size:14px; font-weight:720; }
.profile-investment-top strong { color:var(--accent-2); font-size:19px; font-weight:800; }
.profile-track { height:7px; margin-top:11px; background:rgba(22,143,122,.11); }
.profile-track > span { background:var(--accent); }
.profile-dimensions { display:flex; flex-wrap:wrap; gap:7px 13px; margin-top:11px; color:var(--muted); font-size:10.5px; }
.profile-dimensions b { color:var(--text-2); }
.profile-value-note {
  margin:8px 0 0;
  color:var(--muted);
  font-size:10px;
  line-height:1.2;
}

.profile-next-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:11px;
  padding-top:10px;
  border-top:1px solid var(--line);
  font-size:10.5px;
}
.profile-next-row span { color:var(--text-2); font-weight:620; }
.profile-next-row strong {
  display:inline-flex;
  align-items:center;
  gap:3px;
  color:var(--accent-2);
  font-size:11px;
  font-weight:780;
}
.profile-next-row strong b { font-size:17px; line-height:.8; font-weight:300; }
.profile-investment:active { transform:scale(.992); }

.micro-investment-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}
.micro-investment-grid .secondary-action {
  min-width:0;
  width:100%;
  min-height:46px;
  padding:9px 10px;
  white-space:normal;
  line-height:1.15;
}
.first-value-grid {
  display:grid;
  gap:9px;
}
.first-value-choice {
  width:100%;
  min-height:68px;
  padding:12px 14px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  text-align:left;
}
.first-value-choice strong {
  font-size:14px;
  color:var(--text);
}
.first-value-choice span {
  margin-top:3px;
  color:var(--muted);
  font-size:11px;
  line-height:1.25;
}
.first-value-result h3 {
  margin:6px 0 0;
  font-size:19px;
  line-height:1.2;
}
.first-value-result p {
  margin:8px 0 0;
  color:var(--muted);
}

.mood-investment-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;
}
.mood-investment-grid .choice-button:last-child {
  grid-column:1 / -1;
}
.reward-detail-more {
  margin-top:10px !important;
  padding-top:9px;
  border-top:1px solid var(--line);
  color:var(--text-2) !important;
}
.perfect-streak-card {
  background:linear-gradient(145deg,rgba(255,255,255,.94),rgba(238,248,245,.88));
  border-color:rgba(22,143,122,.14);
}
.streak-pill.is-perfect {
  box-shadow:0 0 0 3px rgba(22,143,122,.07),inset 0 0 0 .5px rgba(22,143,122,.16);
}

.investment-actions {
  display:grid;
  gap:8px;
  margin-top:12px;
}
.reward-detail h3 { margin:0; }
.reward-detail p { margin-top:7px; color:var(--muted); }
.streak-protection { border-style:dashed; }


/* Внутренние вкладки */
.inner-screen { display:flex; flex-direction:column; min-height:0; padding-top:max(14px,env(safe-area-inset-top)); }
.screen-header { flex:0 0 auto; display:flex; align-items:flex-start; justify-content:space-between; gap:14px; padding:8px 20px 16px; }
.screen-kicker { display:block; margin-bottom:5px; color:var(--muted); font-size:10px; font-weight:740; letter-spacing:.06em; text-transform:uppercase; }
.screen-header h1 { margin:0; font-size:35px; line-height:1; font-weight:790; letter-spacing:-.045em; }
.screen-header p { max-width:520px; margin:7px 0 0; color:var(--muted); font-size:13px; line-height:1.35; }
.header-add { min-width:48px; width:48px; height:48px; padding:0; border-radius:50%; border:0; font-size:28px; line-height:1; color:#fff; background:var(--accent); }

.glass-control,.liquid-glass,.glass-segmented {
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  background:var(--glass);
  border:1px solid var(--line);
  box-shadow:var(--glass-shadow);
}
.glass-control { transition:transform .16s ease; }
.glass-control:active,.nav-item:active { transform:scale(.965); }
.glass-segmented {
  flex:0 0 auto;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:4px;
  margin:0 16px 13px;
  padding:4px;
  border-radius:999px;
}
.glass-segmented button { min-height:44px; border:0; border-radius:999px; color:var(--muted); background:transparent; font-weight:690; }
.glass-segmented button.is-active { color:var(--text); background:var(--accent-soft); box-shadow:none; }
.scroll-content {
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  padding:0 16px 22px;
  overscroll-behavior:contain;
  scrollbar-width:none;
}
.section-stack { display:grid; gap:10px; }
.section-card,.profile-summary,.settings-row,.summary-pill,.empty-state {
  background:var(--surface);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}
.section-card { padding:17px 18px; border-radius:20px; }
.section-card h2,.section-card h3 { margin:0; letter-spacing:-.025em; }
.section-card p { margin:7px 0 0; color:var(--muted); line-height:1.43; }
.eyebrow { display:block; margin:0 0 5px; color:var(--muted); font-size:10px; font-weight:760; letter-spacing:.1em; }
/* Список диалогов прокручивается внутри листа: их бывает много, и
   вместе с формой создания они иначе выталкивают друг друга за экран. */
.conversation-list { display:grid; gap:10px; max-height:52vh; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.conversation-badge { display:inline-block; margin-left:8px; padding:2px 8px; border-radius:999px; font-size:12px; font-weight:640; color:var(--accent-2); background:var(--accent-soft); }
.conversation-action { min-height:var(--tap); }
.action-row { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.action-row > * { flex:1 1 140px; }
.primary-action,.secondary-action,.danger-action {
  min-height:48px;
  padding:10px 16px;
  border-radius:16px;
  font-weight:720;
}
.primary-action { border:1px solid var(--accent); color:#fff; background:var(--accent); }
.secondary-action { border:1px solid var(--line); color:var(--text); background:#fff; }
.danger-action { border:1px solid rgba(207,79,79,.22); color:var(--danger); background:#fff; }

.summary-row { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.summary-pill { border-radius:20px; padding:14px 8px; text-align:center; }
.summary-pill strong { display:block; color:var(--accent); font-size:24px; font-weight:760; }
.summary-pill span { display:block; margin-top:3px; color:var(--muted); font-size:10px; }
.goal-progress { height:7px; margin-top:11px; overflow:hidden; border-radius:999px; background:rgba(22,143,122,.09); }
.goal-progress span { display:block; height:100%; border-radius:inherit; background:var(--accent); }

.journal-toolbar { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:10px; }
.journal-entry { width:100%; text-align:left; }
.journal-meta { display:flex; flex-wrap:wrap; gap:6px 11px; margin-top:9px; color:var(--muted); font-size:11px; }
.review-finding { margin-top:7px; }
.chip-row { display:flex; flex-wrap:wrap; gap:6px; margin-top:9px; }
.chip { min-height:38px; display:inline-flex; align-items:center; padding:7px 11px; border-radius:999px; background:rgba(22,143,122,.07); }
.chip small { margin-left:5px; color:var(--muted); }

.profile-stack { display:grid; gap:10px; }
.profile-summary { min-height:94px; display:grid; grid-template-columns:52px minmax(0,1fr); align-items:center; gap:13px; padding:15px 17px; border-radius:20px; }
.profile-avatar { width:52px; height:52px; display:grid; place-items:center; border-radius:17px; color:var(--accent-2); background:var(--accent-soft); }
.profile-avatar svg { width:28px; height:28px; }
.profile-summary h3 { margin:0; font-size:20px; letter-spacing:-.025em; }
.profile-summary p { margin:3px 0 0; color:var(--muted); font-size:12px; }
.known-grid { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-top:11px; }
.known-card { min-height:64px; padding:10px; border-radius:16px; background:rgba(22,143,122,.05); }
.known-card small { display:block; color:var(--muted); font-size:10px; }
.known-card strong { display:block; margin-top:3px; overflow-wrap:anywhere; }
.settings-list { display:grid; gap:8px; }
.settings-row {
  width:100%; min-height:68px; padding:11px 14px; border-radius:21px;
  display:grid; grid-template-columns:34px minmax(0,1fr) auto; gap:10px; align-items:center; text-align:left;
}
.settings-row > svg { width:27px; height:27px; color:var(--accent); }
.settings-row strong { display:block; font-size:14px; }
.settings-row small { display:block; margin-top:2px; color:var(--muted); font-size:11px; line-height:1.25; }
.settings-row em { color:var(--muted); font-size:10px; font-style:normal; }

/* Нижняя навигация: пять понятных сценариев */
.bottom-nav {
  position:relative;
  z-index:30;
  margin:0 8px max(8px,env(safe-area-inset-bottom));
  min-height:70px;
  display:grid;
  grid-template-columns:1fr 1.45fr 1fr .85fr 1fr;
  gap:2px;
  align-items:center;
  padding:5px;
  border-radius:22px;
  background:var(--surface);
}
.nav-item {
  min-width:0;
  height:59px;
  padding:5px 2px;
  display:grid;
  place-items:center;
  align-content:center;
  gap:2px;
  border:0;
  border-radius:22px;
  color:#727b78;
  background:transparent;
}
.nav-item svg { width:23px; height:23px; }
.nav-item b { font-size:10.2px; font-weight:680; }
.nav-item.is-active { color:var(--accent-2); background:rgba(255,255,255,.64); box-shadow:inset 0 0 0 .5px var(--line); }
/* Sheets/forms */
.sheet,.confirm { width:100%; height:100%; max-width:none; max-height:none; padding:0; border:0; background:transparent; }
.sheet::backdrop,.confirm::backdrop { background:rgba(13,22,19,.25); -webkit-backdrop-filter:none; backdrop-filter:none; }
.sheet-card {
  position:absolute;
  left:50%;
  bottom:calc(4px + var(--keyboard));
  transform:translateX(-50%);
  width:min(calc(100% - 8px),752px);
  max-height:min(89dvh,calc(100dvh - var(--keyboard) - 8px));
  overflow-y:auto;
  padding:9px 17px calc(19px + env(safe-area-inset-bottom));
  border-radius:31px;
  background:var(--surface);
}
.grabber { width:40px; height:5px; margin:1px auto 10px; border-radius:999px; background:rgba(70,82,78,.22); }
.sheet-header { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.sheet-header h2 { margin:0; font-size:24px; font-weight:750; letter-spacing:-.03em; }
.sheet-header p { margin:4px 0 0; color:var(--muted); line-height:1.4; }
.sheet-close { min-width:46px; width:46px; height:46px; display:grid; place-items:center; padding:0; border:0; border-radius:50%; font-size:29px; color:var(--text-2); }
.sheet-content { margin-top:14px; }
.form-grid { display:grid; gap:13px; }
.form-grid label > span,fieldset > legend { display:block; margin-bottom:6px; font-weight:680; }
.form-grid input:not([type="range"]),.form-grid textarea,.form-grid select {
  width:100%; min-height:50px; padding:12px 13px; color:var(--text); border-radius:17px;
  border:1px solid var(--line); background:rgba(255,255,255,.82); box-shadow:none;
}
.form-grid textarea { min-height:94px; resize:vertical; }
fieldset { min-width:0; margin:0; padding:0; border:0; }
.choice-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
.choice-button { min-height:49px; padding:9px; border-radius:17px; border:1px solid var(--line); background:#fff; }
.choice-button.is-selected { color:var(--accent-2); background:var(--accent-soft); border-color:rgba(22,143,122,.20); }
.range-row input { width:100%; min-height:32px; accent-color:var(--accent); }
.empty-state { padding:26px 18px; border-radius:20px; text-align:center; }
.empty-state strong { display:block; font-size:19px; letter-spacing:-.02em; }
.empty-state span { display:block; margin-top:6px; color:var(--muted); line-height:1.4; }
.confirm-card { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:min(calc(100% - 32px),430px); padding:20px; border-radius:29px; background:var(--surface); }
.confirm-card h2 { margin:0; letter-spacing:-.03em; }
.confirm-card p { color:var(--muted); line-height:1.45; }
.confirm-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.toast { position:fixed; z-index:50; left:50%; bottom:calc(94px + env(safe-area-inset-bottom)); transform:translateX(-50%); width:min(calc(100% - 28px),520px); padding:12px 15px; border-radius:21px; text-align:center; color:#fff; background:rgba(35,45,42,.78); }
.toast.is-error { background:rgba(126,48,48,.82); }
.loading-skeleton { height:82px; border-radius:23px; background:linear-gradient(90deg,rgba(255,255,255,.45) 20%,rgba(255,255,255,.82) 40%,rgba(255,255,255,.45) 60%); background-size:220% 100%; animation:load 1.2s linear infinite; }
@keyframes load { to { background-position:-220% 0; } }