/* MNEME themes — две самостоятельные палитры, а не инверсия экрана. */

html {
  --theme-origin-x: calc(100vw - 96px);
  --theme-origin-y: 36px;
  background: var(--theme-bg);
}

html[data-theme='dark'] {
  color-scheme: dark;
  --theme-bg: #05090a;
  --theme-surface: #0c1314;
  --theme-surface-soft: #111a1b;
  --theme-surface-raised: #162021;
  --theme-text: #f1e4cd;
  --theme-text-muted: rgba(241, 228, 205, 0.6);
  --theme-line: rgba(241, 228, 205, 0.085);
  --theme-shadow: 0 18px 42px rgba(0, 0, 0, 0.38);

  --bg: #070b0c;
  --bg-raised: #0a1011;
  --surface: #0e1617;
  --surface-2: #131d1f;
  --surface-3: #1a2527;
  --ink-900: #05090a;
  --ink-800: #091011;
  --ink-700: #0f1718;
  --ink-600: #151f21;
  --ink-500: #1c282a;
  --mneme-night: #05090a;
  --mneme-ink: #091011;
  --mneme-panel: #0e1718;
  --mneme-panel-2: #131e20;
}

html[data-theme='dark'] body {
  background:
    radial-gradient(circle at 50% -10%, rgba(50, 185, 176, 0.14), transparent 31rem),
    radial-gradient(circle at 86% 18%, rgba(195, 151, 223, 0.055), transparent 23rem),
    linear-gradient(180deg, #030708 0%, #071011 44%, #040a0b 100%) !important;
}

html[data-theme='dark']
  :where(
    .card,
    .mn-card,
    .today-sheet,
    .today-thought-card,
    .money-card,
    .notes-capture-card,
    .notes-paper,
    .finance-paper,
    .report-card,
    .ask-shell
  ) {
  background-color: #0c1415 !important;
}

html[data-theme='light'] {
  color-scheme: light;
  --theme-bg: #e8e2d6;
  --theme-surface: #f8f4ec;
  --theme-surface-soft: #eee8dd;
  --theme-surface-raised: #fffaf2;
  --theme-text: #182321;
  --theme-text-muted: rgba(24, 35, 33, 0.62);
  --theme-line: rgba(24, 54, 50, 0.13);
  --theme-shadow: 0 16px 38px rgba(63, 55, 42, 0.14);

  --bg: #e8e2d6;
  --bg-raised: #f2ede4;
  --surface: #f8f4ec;
  --surface-2: #eee8dd;
  --surface-3: #e1dacd;
  --paper: #172220;
  --paper-muted: #4c5a57;
  --ink: #172220;
  --muted: #64716f;
  --muted-2: #7b8582;
  --line: rgba(24, 54, 50, 0.12);
  --line-strong: rgba(24, 54, 50, 0.2);
  --shadow: 0 18px 48px rgba(63, 55, 42, 0.14);

  --ink-900: #e8e2d6;
  --ink-800: #f1ece2;
  --ink-700: #f8f4ec;
  --ink-600: #eee8dd;
  --ink-500: #ded7ca;
  --paper-warm: #3c362c;
  --paper-dim: #53615e;
  --paper-mute: #74807d;
  --rule: rgba(24, 54, 50, 0.1);
  --rule-strong: rgba(24, 54, 50, 0.18);
  --layer-today: #9a7b43;
  --layer-plan: #168f88;
  --layer-money: #3d9652;
  --layer-sport: #b57425;
  --layer-memory: #795ba4;
  --signal-alert: #c7544a;
  --signal-done: #408f51;

  --mneme-night: #e8e2d6;
  --mneme-ink: #f1ece2;
  --mneme-panel: #f8f4ec;
  --mneme-panel-2: #eee8dd;
  --mneme-paper: #182321;
  --mneme-paper-soft: #4f554d;
  --mneme-paper-muted: rgba(24, 35, 33, 0.62);
  --mneme-line: rgba(24, 54, 50, 0.12);
  --mneme-line-soft: rgba(24, 54, 50, 0.075);
  --mneme-teal: #168f88;
  --mneme-teal-bright: #118c85;
  --mneme-green: #3d9652;
  --mneme-violet: #795ba4;
  --mneme-amber: #b57425;
  --mneme-red: #c7544a;
  --mneme-shadow: 0 18px 42px rgba(63, 55, 42, 0.14);
  --header-icon-bg: rgba(255, 252, 246, 0.64);
  --header-icon-border: rgba(24, 54, 50, 0.14);
}

html[data-theme='light'] .photo-portion-notice {
  border-color: rgba(20, 144, 137, 0.22);
  background: rgba(20, 144, 137, 0.08);
  color: var(--mneme-paper);
}

html[data-theme='light'] .photo-portion-notice span {
  color: var(--mneme-paper-muted);
}

html[data-theme='light'] body {
  color: var(--theme-text);
  background:
    radial-gradient(circle at 50% -8%, rgba(32, 171, 160, 0.2), transparent 32rem),
    radial-gradient(circle at 92% 18%, rgba(121, 91, 164, 0.105), transparent 25rem),
    radial-gradient(circle at 6% 58%, rgba(181, 116, 37, 0.08), transparent 23rem),
    linear-gradient(180deg, #e9e4da 0%, #eee9df 46%, #e4ded2 100%) !important;
}

html[data-theme='light'] body::before {
  background:
    radial-gradient(circle at 50% 22%, rgba(255, 255, 255, 0.48), transparent 28rem),
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 42%) !important;
}

html[data-theme='light'] .grain {
  opacity: 0.055;
  mix-blend-mode: multiply;
}

/* Переключатель живёт в шапке и сохраняет крупную безопасную зону касания. */
.theme-toggle {
  position: relative;
  display: grid;
  width: 56px;
  min-width: 56px;
  height: 44px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 18px;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.theme-toggle-track {
  position: relative;
  display: block;
  width: 52px;
  height: 30px;
  overflow: hidden;
  border: 1px solid rgba(241, 228, 205, 0.11);
  border-radius: 999px;
  background: rgba(2, 7, 8, 0.78);
  box-shadow:
    inset 0 2px 5px rgba(0, 0, 0, 0.3),
    0 4px 10px rgba(0, 0, 0, 0.16);
  transition:
    border-color 360ms ease,
    background 360ms ease,
    box-shadow 360ms ease;
}

.theme-toggle svg {
  position: absolute;
  top: 7px;
  z-index: 2;
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.16));
  pointer-events: none;
  transition:
    color 320ms ease,
    opacity 320ms ease,
    transform 420ms cubic-bezier(0.32, 0.72, 0.3, 1);
}

.theme-toggle-sun {
  left: 8px;
  color: rgba(224, 170, 90, 0.6);
  opacity: 0.58;
}

.theme-toggle-moon {
  right: 8px;
  color: #c5b2dd;
  opacity: 1;
}

.theme-toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  z-index: 1;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 26%, rgba(255, 255, 255, 0.26), transparent 36%),
    linear-gradient(145deg, #3a5557, #1b2c2e);
  box-shadow:
    0 3px 8px rgba(0, 0, 0, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.13);
  transform: translateX(24px);
  transition:
    transform 460ms cubic-bezier(0.32, 0.72, 0.3, 1),
    background 360ms ease,
    box-shadow 360ms ease;
}

html[data-theme='light'] .theme-toggle-track {
  border-color: rgba(116, 84, 35, 0.16);
  background: rgba(231, 210, 170, 0.64);
  box-shadow:
    inset 0 2px 5px rgba(92, 67, 32, 0.12),
    0 4px 10px rgba(74, 59, 37, 0.1);
}

html[data-theme='light'] .theme-toggle-thumb {
  background:
    radial-gradient(circle at 34% 26%, rgba(255, 255, 255, 0.72), transparent 36%),
    linear-gradient(145deg, #f0c66f, #c89035);
  box-shadow:
    0 3px 8px rgba(102, 73, 26, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.52);
  transform: translateX(0);
}

html[data-theme='light'] .theme-toggle-sun {
  color: #8f5b14;
  opacity: 1;
  transform: rotate(90deg);
}

html[data-theme='light'] .theme-toggle-moon {
  color: rgba(78, 61, 101, 0.45);
  opacity: 0.5;
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--mneme-teal-bright);
  outline-offset: 1px;
}

@media (max-width: 767px) {
  .mobile-header .brand-lockup.compact {
    max-width: calc(100% - 142px) !important;
  }
}

/* Шапка, dock и системные оболочки действительно меняют материал. */
html[data-theme='light'] .mobile-header {
  border-bottom-color: rgba(24, 54, 50, 0.1) !important;
  background:
    radial-gradient(circle at 8% 50%, rgba(22, 143, 136, 0.08), transparent 32%),
    rgba(246, 241, 232, 0.965) !important;
  box-shadow:
    0 8px 22px rgba(67, 57, 42, 0.12),
    inset 0 -1px 0 rgba(22, 143, 136, 0.03) !important;
}

html[data-theme='light'] .mobile-header::after {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(22, 143, 136, 0.24) 28%,
    rgba(116, 84, 35, 0.12) 74%,
    transparent
  ) !important;
}

html[data-theme='light'] .mobile-header .brand-lockup.compact strong {
  color: #1d2a28 !important;
  text-shadow: none;
}

html[data-theme='light'] .brand-mark .mneme-symbol-monogram {
  stroke: #23312e !important;
}

html[data-theme='light'] .brand-mark .mneme-symbol-shadow {
  stroke: rgba(108, 91, 62, 0.16) !important;
}

html[data-theme='light'] .header-notification-button {
  color: #495551 !important;
}

html[data-theme='light'] .header-notification-icon .mneme-glyph [data-glyph-main] {
  fill: #685739 !important;
}

html[data-theme='light'] .header-notification-icon .mneme-glyph [data-glyph-soft] {
  fill: rgba(104, 87, 57, 0.45) !important;
}

html[data-theme='light'] .avatar-button {
  border-color: rgba(24, 54, 50, 0.2) !important;
  background: #e6dfd2 !important;
  color: #1d2a28 !important;
  box-shadow:
    0 5px 13px rgba(68, 58, 42, 0.12),
    inset 0 0 0 2px rgba(255, 255, 255, 0.48) !important;
}

html[data-theme='light'] .dock-surface {
  border-color: rgba(24, 54, 50, 0.11);
  background:
    radial-gradient(circle at 50% 0%, rgba(22, 143, 136, 0.07), transparent 9rem),
    rgba(244, 239, 229, 0.97);
  box-shadow:
    0 10px 24px rgba(67, 57, 42, 0.14),
    0 0 0 1px rgba(255, 255, 255, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.62);
}

html[data-theme='light'] .dock-tab {
  color: rgba(29, 42, 40, 0.66);
}

html[data-theme='light'] .dock-tab.active {
  background: transparent !important;
  color: #1c2927;
  box-shadow: none !important;
}

html[data-theme='light'] .header-notification-icon .mneme-glyph [data-glyph-outline],
html[data-theme='light'] .header-notification-icon .mneme-glyph [data-glyph-soft-line] {
  stroke: #3b433f !important;
}

html[data-theme='light'] .header-notification-icon .mneme-glyph [data-glyph-signal] {
  fill: #168f88 !important;
  stroke: rgba(248, 244, 236, 0.72);
}

html[data-theme='light'] .dock-active-drop {
  border-color: rgba(16, 133, 151, 0.2);
  background:
    radial-gradient(circle at 50% 8%, rgba(23, 156, 171, 0.14), transparent 78%),
    rgba(22, 143, 136, 0.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    0 5px 14px rgba(45, 77, 73, 0.08);
}

html[data-theme='light'] .dock-tab.active svg [data-fill] {
  fill: #263a36;
}

html[data-theme='light'] .dock-tab.active svg [data-solid],
html[data-theme='light'] .dock-tab.active svg [data-accent] {
  stroke: #263a36;
}

/* Базовые карточки: тёплая бумага, а цветные слои остаются светом сверху. */
html[data-theme='light']
  :where(
    .card,
    .mn-card,
    .today-sheet,
    .today-thought-card,
    .money-card,
    .notes-capture-card,
    .notes-paper,
    .finance-paper,
    .report-card,
    .ask-shell,
    .admin-system-card,
    .admin-subscription-card
  ) {
  border-color: var(--theme-line) !important;
  background:
    radial-gradient(circle at 96% 0%, rgba(121, 91, 164, 0.055), transparent 12rem),
    radial-gradient(circle at 0% 0%, rgba(22, 143, 136, 0.07), transparent 11rem),
    linear-gradient(150deg, rgba(255, 252, 246, 0.96), rgba(239, 233, 222, 0.96)) !important;
  color: var(--theme-text) !important;
  box-shadow:
    0 13px 30px rgba(67, 57, 42, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.66) !important;
}

html[data-theme='light']
  :where(.mn-plan-hero, .finance-cover-note, .notes-cover-note, .mn-profile-hero, .mn-sport-cover) {
  border-color: rgba(24, 54, 50, 0.14) !important;
  color: var(--theme-text) !important;
  box-shadow:
    0 18px 40px rgba(67, 57, 42, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.62) !important;
}

html[data-theme='light'] .mn-plan-hero {
  background:
    radial-gradient(circle at 90% 2%, rgba(121, 91, 164, 0.14), transparent 15rem),
    radial-gradient(circle at 8% 5%, rgba(22, 143, 136, 0.17), transparent 14rem),
    linear-gradient(150deg, #fbf7ef, #e6eee8) !important;
}

html[data-theme='light'] .finance-cover-note {
  background:
    radial-gradient(circle at 88% 3%, rgba(61, 150, 82, 0.18), transparent 15rem),
    radial-gradient(circle at 8% 8%, rgba(22, 143, 136, 0.12), transparent 13rem),
    linear-gradient(150deg, #fbf8ef, #e5eee4) !important;
}

html[data-theme='light'] .notes-cover-note {
  background:
    radial-gradient(circle at 88% 3%, rgba(121, 91, 164, 0.18), transparent 15rem),
    radial-gradient(circle at 8% 8%, rgba(22, 143, 136, 0.11), transparent 13rem),
    linear-gradient(150deg, #fbf7f0, #ebe5ef) !important;
}

html[data-theme='light'] .mn-profile-hero {
  background:
    radial-gradient(circle at 90% 4%, rgba(121, 91, 164, 0.14), transparent 15rem),
    radial-gradient(circle at 8% 5%, rgba(22, 143, 136, 0.16), transparent 14rem),
    linear-gradient(150deg, #fbf8f1, #e5eeea) !important;
}

html[data-theme='light'] .mn-sport-cover {
  background:
    radial-gradient(circle at 88% 4%, rgba(181, 116, 37, 0.2), transparent 15rem),
    radial-gradient(circle at 5% 10%, rgba(22, 143, 136, 0.11), transparent 14rem),
    linear-gradient(150deg, #fcf8ef, #eee5d7) !important;
}

/* Вложенные поверхности меняют гамму вместе с карточкой. */
html[data-theme='light']
  :where(
    .task-item,
    .plan-block,
    .mn-plan-entry,
    .mn-tool-card,
    .transaction-item,
    .finance-transaction,
    .memory-note-item,
    .notification-item,
    .mn-setting-row,
    .mn-profile-status-grid > div,
    .mn-profile-report > div,
    .mn-sport-tabs,
    .mn-sport-range,
    .mn-sport-macro,
    .mn-sport-glance,
    .mn-sport-meal-journal,
    .mn-sport-entry,
    .mn-sport-plan-row,
    .mn-sport-week-trace > span,
    .calendar-day,
    .onboarding-route-card,
    .onboarding-rhythm-card,
    .onboarding-example,
    .onboarding-legal-grid > article,
    .sport-form-section,
    .preview-item
  ) {
  border-color: rgba(24, 54, 50, 0.11) !important;
  background:
    radial-gradient(circle at 96% 0%, rgba(121, 91, 164, 0.045), transparent 9rem),
    rgba(255, 252, 246, 0.62) !important;
  color: var(--theme-text) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

/* Навигация, дата и рабочие строки — один светлый материал без тёмных островков. */
html[data-theme='light'] :where(.mn-plan-nav, .mn-date-control, .plan-dashboard-control) {
  border-color: rgba(24, 54, 50, 0.12) !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(22, 143, 136, 0.09), transparent 10rem),
    rgba(247, 243, 235, 0.88) !important;
  box-shadow:
    0 11px 24px rgba(67, 57, 42, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.62) !important;
}

html[data-theme='light'] .plan-dashboard {
  border-color: rgba(24, 54, 50, 0.14) !important;
  background:
    radial-gradient(circle at 88% 5%, rgba(121, 91, 164, 0.13), transparent 14rem),
    radial-gradient(circle at 10% 0%, rgba(22, 143, 136, 0.15), transparent 14rem),
    linear-gradient(150deg, #fbf8f1, #e5eeea) !important;
  box-shadow:
    0 18px 40px rgba(67, 57, 42, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.62) !important;
}

html[data-theme='light'] :where(.plan-dashboard .plan-tabs, .mn-sport-tabs) {
  border-color: rgba(24, 54, 50, 0.1) !important;
  background: rgba(239, 234, 224, 0.74) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.46) !important;
}

html[data-theme='light']
  :where(
    .mn-metrics article,
    .plan-dashboard-metrics > span,
    .mn-plan-entry-open,
    .mn-task-open,
    .today-agenda-row,
    .screen-today .today-now-card
  ) {
  border-color: rgba(24, 54, 50, 0.11) !important;
  background:
    radial-gradient(circle at 96% 0%, rgba(22, 143, 136, 0.075), transparent 9rem),
    rgba(255, 252, 246, 0.68) !important;
  color: var(--theme-text) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.48) !important;
}

html[data-theme='light']
  :where(.mn-metrics article.success, .plan-dashboard-metrics > span.success) {
  background:
    radial-gradient(circle at 88% 0%, rgba(61, 150, 82, 0.14), transparent 8rem),
    rgba(248, 248, 238, 0.76) !important;
}

html[data-theme='light']
  :where(
    .mn-metrics article.danger,
    .plan-dashboard-metrics > span.danger,
    .screen-today .today-now-card.overdue
  ) {
  background:
    radial-gradient(circle at 90% 0%, rgba(199, 84, 74, 0.13), transparent 8rem),
    rgba(252, 245, 237, 0.78) !important;
}

html[data-theme='light'] :where(.mn-metrics article.quiet, .plan-dashboard-metrics > span.quiet) {
  background: rgba(244, 239, 230, 0.76) !important;
}

html[data-theme='light'] :where(.mn-date-arrow, .plan-date-nav) {
  border-color: rgba(24, 54, 50, 0.11) !important;
  background: rgba(229, 224, 214, 0.86) !important;
  color: #33423f !important;
}

html[data-theme='light'] .mn-date-value {
  border-color: transparent !important;
  background: transparent !important;
  color: var(--theme-text) !important;
  box-shadow: none !important;
}

html[data-theme='light'] .mn-date-value:active {
  background: rgba(22, 143, 136, 0.08) !important;
}

html[data-theme='light'] .mn-date-arrow span {
  border-color: #3c4c48 !important;
}

/* Финансы сохраняют зелёный/красный смысл, но сами карточки становятся светлыми. */
html[data-theme='light'] :where(.finance-balance-slip, .notes-count-slip) {
  border-color: rgba(24, 54, 50, 0.11) !important;
  background: rgba(255, 252, 246, 0.58) !important;
}

html[data-theme='light'] .finance-flow-card.income {
  border-color: rgba(61, 150, 82, 0.18) !important;
  background:
    radial-gradient(circle at 86% 6%, rgba(61, 150, 82, 0.18), transparent 9rem),
    linear-gradient(150deg, #fbf9f0, #e5eee3) !important;
}

html[data-theme='light'] .finance-flow-card.expense {
  border-color: rgba(199, 84, 74, 0.17) !important;
  background:
    radial-gradient(circle at 86% 6%, rgba(199, 84, 74, 0.16), transparent 9rem),
    linear-gradient(150deg, #fbf8f0, #f2e3dc) !important;
}

html[data-theme='light'] .finance-flow-card.income strong,
html[data-theme='light'] .finance-transaction.income .amount,
html[data-theme='light'] .finance-balance-slip.positive strong {
  color: #347d47 !important;
}

html[data-theme='light'] .finance-flow-card.expense strong,
html[data-theme='light'] .finance-transaction.expense .amount,
html[data-theme='light'] .finance-balance-slip.negative strong {
  color: #b74d44 !important;
}

html[data-theme='light'] :where(.finance-report-card .report-balance, .finance-ledger) {
  border-color: rgba(24, 54, 50, 0.1) !important;
  background: rgba(255, 252, 246, 0.58) !important;
}

/* Аналитика на сером материале использует тёмные чернила. Цвет суммы остаётся
   смысловым, но в светлой теме он темнее и не превращается в неоновое пятно. */
html[data-theme='light'] .mn-period-switch {
  border-color: rgba(24, 54, 50, 0.14) !important;
  background: rgba(24, 35, 33, 0.39) !important;
}

html[data-theme='light'] .mn-period-switch button {
  color: #253330 !important;
}

html[data-theme='light'] .mn-period-switch button.active {
  color: #fff8ec !important;
  background:
    radial-gradient(circle at 24% 0%, rgba(52, 197, 187, 0.2), transparent 80%), #356b67 !important;
}

html[data-theme='light'] .finance-ledger-row {
  border-color: rgba(24, 54, 50, 0.14) !important;
  background: rgba(24, 35, 33, 0.38) !important;
}

html[data-theme='light'] .finance-ledger-row > span {
  color: #182321 !important;
}

html[data-theme='light'] .finance-ledger-row > small {
  color: #2e3b38 !important;
}

html[data-theme='light'] :where(.finance-ledger-row.balance, .finance-ledger-row.income) strong {
  color: #155729 !important;
}

html[data-theme='light']
  :where(.finance-ledger-row.balance.negative, .finance-ledger-row.expense)
  strong {
  color: #7d2524 !important;
}

html[data-theme='light']
  :where(
    .mn-analytics-head small,
    .mn-analytics-section-title span,
    .mn-finance-trend-column small,
    .mn-chart-legend,
    .mn-finance-category-list > div,
    .mn-analytics-empty small,
    .mn-analytics-loading,
    .mn-sport-analytics-loading,
    .mn-sport-analytics-metrics small,
    .mn-sport-analytics-metrics span,
    .mn-data-confidence small
  ) {
  color: var(--theme-text-muted) !important;
}

html[data-theme='light'] :where(.mn-sport-analytics-metrics > div, .mn-data-confidence) {
  border-color: rgba(24, 54, 50, 0.11) !important;
  background: rgba(255, 252, 246, 0.62) !important;
}

html[data-theme='light'] .mn-finance-donut::before {
  background: #273936 !important;
  box-shadow: inset 0 0 0 1px rgba(255, 248, 236, 0.12) !important;
}

html[data-theme='light'] .mn-finance-donut :where(strong, small) {
  color: #f4ead7 !important;
}

html[data-theme='light'] .notes-search-field {
  border-color: rgba(24, 54, 50, 0.13) !important;
  background:
    radial-gradient(circle at 0% 50%, rgba(22, 143, 136, 0.08), transparent 10rem),
    rgba(250, 247, 240, 0.82) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.62),
    0 10px 22px rgba(67, 57, 42, 0.08) !important;
}

/* Спорт: цвет остаётся в данных и графиках, а не в тяжёлой подложке. */
html[data-theme='light']
  :where(
    .mn-sport-today,
    .mn-sport-week,
    .mn-sport-recommendation,
    .mn-sport-progress-overview,
    .mn-sport-chart-card,
    .mn-sport-measurement-history,
    .mn-sport-training-day,
    .mn-sport-workout-history,
    .mn-sport-plan-journal,
    .mn-sport-upcoming
  ) {
  border-color: rgba(24, 54, 50, 0.12) !important;
  background:
    radial-gradient(circle at 96% 0%, rgba(181, 116, 37, 0.075), transparent 11rem),
    radial-gradient(circle at 4% 0%, rgba(22, 143, 136, 0.07), transparent 12rem),
    linear-gradient(155deg, #fbf8f0, #ede8de) !important;
  box-shadow:
    0 14px 32px rgba(67, 57, 42, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.58) !important;
}

html[data-theme='light'] :where(.mn-sport-glance, .mn-sport-meal-journal) {
  border-color: rgba(24, 54, 50, 0.1) !important;
  background: rgba(255, 252, 246, 0.62) !important;
}

html[data-theme='light']
  :where(
    .finance-balance-slip > span,
    .finance-flow-card > span,
    .finance-transaction .transaction-description,
    .finance-transaction .transaction-date,
    .memory-note-item .note-content,
    .screen-today .today-now-copy > span,
    .today-agenda-status,
    .mn-sport-value,
    .mn-sport-week-legend > span
  ) {
  color: var(--theme-text-muted) !important;
}

html[data-theme='light'] .memory-note-item .item-tail {
  color: rgba(24, 35, 33, 0.42) !important;
}

html[data-theme='light'] .task-advanced {
  border-color: var(--theme-line) !important;
  background: rgba(24, 54, 50, 0.025) !important;
}

html[data-theme='light']
  :where(.screen-today .today-now-copy > em, .capture-effects li, .compact-follow-up small) {
  color: var(--theme-text-muted) !important;
}

/* В светлой теме карманы остаются цветными акцентами, но используют общий
   бумажный материал страницы вместо трёх чужеродных тёмных плиток. */
html[data-theme='light'] .screen-today .today-pocket {
  border-color: rgba(24, 54, 50, 0.14) !important;
  background:
    radial-gradient(
      circle at 50% 4%,
      color-mix(in srgb, var(--pocket) 18%, transparent),
      transparent 7rem
    ),
    linear-gradient(155deg, #fffaf2, #e7e0d4) !important;
  color: #1d2a28 !important;
  box-shadow:
    0 12px 26px rgba(67, 57, 42, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.68) !important;
}

html[data-theme='light'] .screen-today .today-pocket :where(.today-pocket-name, strong) {
  color: #1d2a28 !important;
}

html[data-theme='light'] .screen-today .today-pocket small {
  color: rgba(29, 42, 40, 0.58) !important;
}

html[data-theme='light'] .screen-today .today-pocket-tail {
  border-color: rgba(29, 42, 40, 0.38) !important;
}

html[data-theme='light'] .screen-today .today-pocket-asset {
  filter: drop-shadow(0 8px 10px color-mix(in srgb, var(--pocket) 24%, transparent)) !important;
}

html[data-theme='light']
  :where(.mn-sport-tabs button, .mn-plan-nav button, .chip, .segmented button) {
  border-color: rgba(24, 54, 50, 0.1) !important;
  background: rgba(239, 234, 224, 0.74) !important;
  color: rgba(24, 35, 33, 0.62) !important;
}

html[data-theme='light']
  :where(
    .mn-sport-tabs button.active,
    .mn-plan-nav button.active,
    .chip.active,
    .segmented button.active
  ) {
  border-color: rgba(22, 143, 136, 0.28) !important;
  background: rgba(22, 143, 136, 0.11) !important;
  color: #126f6a !important;
}

html[data-theme='light']
  :where(input:not([type='checkbox']):not([type='radio']), textarea, select) {
  border-color: rgba(24, 54, 50, 0.14) !important;
  background: rgba(255, 252, 246, 0.78) !important;
  color: #182321 !important;
  box-shadow: inset 0 1px 3px rgba(66, 55, 38, 0.045) !important;
}

/* Главная уже имеет одну бумажную карточку ввода. Общее правило форм
   не должно рисовать внутри неё второй прямоугольник. */
html[data-theme='light'] .screen-today .today-thought-card textarea {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-theme='light'] :where(input, textarea)::placeholder {
  color: rgba(24, 35, 33, 0.38) !important;
}

html[data-theme='light'] :where(.progress-track, .mn-sport-range-track, .mn-sport-macro > div) {
  background: rgba(24, 54, 50, 0.1) !important;
}

/* Типографика остаётся контрастной даже там, где старые экраны имели цвет напрямую. */
html[data-theme='light']
  :where(.app-main, .modal-sheet, .voice-panel, .onboarding-shell)
  :where(h1, h2, h3, h4, .item-main > strong, .mn-setting-copy > strong) {
  color: var(--theme-text) !important;
  text-shadow: none !important;
}

html[data-theme='light']
  :where(.app-main, .modal-sheet, .voice-panel, .onboarding-shell)
  :where(p, small, label, .mn-eyebrow, .eyebrow) {
  color: var(--theme-text-muted) !important;
}

html[data-theme='light'] :where(.mn-sport-range > strong, .mn-sport-macro > strong, .amount) {
  color: #2a3633 !important;
}

html[data-theme='light'] :where(.btn.primary, .btn.success, .btn.danger) {
  color: #fffaf2 !important;
}

html[data-theme='light'] .btn.primary {
  border-color: rgba(15, 104, 99, 0.32) !important;
  background: linear-gradient(145deg, #2aa49c, #187d77) !important;
}

html[data-theme='light'] .btn.success {
  border-color: rgba(44, 112, 57, 0.28) !important;
  background: linear-gradient(145deg, #5baa69, #3e854d) !important;
}

html[data-theme='light'] .btn.danger {
  border-color: rgba(147, 49, 42, 0.24) !important;
  background: linear-gradient(145deg, #d36a5f, #ae453d) !important;
}

html[data-theme='light'] :where(.btn.ghost, .btn.secondary, .icon-button) {
  border-color: rgba(24, 54, 50, 0.13) !important;
  background: rgba(235, 229, 218, 0.86) !important;
  color: #293734 !important;
}

/* Переход — самостоятельное действие, а не бледная ссылка. Один цветовой
   язык объединяет «Открыть», «Посмотреть» и похожие навигационные CTA. */
:where(.btn, .link-button).open-action {
  min-height: 36px;
  padding-inline: 13px;
  border: 1px solid rgba(72, 224, 211, 0.34) !important;
  border-radius: 12px;
  background: rgba(52, 197, 187, 0.11) !important;
  box-shadow: none;
  color: #58d7ce !important;
  font-weight: 820;
  text-decoration: none;
}

:where(.btn, .link-button).open-action::after {
  content: '›';
  margin-left: 3px;
  font-size: 1.15em;
  line-height: 1;
}

:where(.btn, .link-button).open-action:hover {
  border-color: rgba(103, 239, 226, 0.58) !important;
  background: rgba(52, 197, 187, 0.17) !important;
}

:where(.btn, .link-button).open-action:focus-visible {
  outline: 2px solid rgba(98, 235, 223, 0.86);
  outline-offset: 2px;
}

.btn.small.open-action {
  min-width: 92px;
}

html[data-theme='light'] :where(.btn, .link-button).open-action {
  border-color: rgba(13, 105, 100, 0.28) !important;
  background: rgba(20, 144, 137, 0.1) !important;
  box-shadow: none;
  color: #0b746f !important;
}

html[data-theme='light'] :where(.product-guide > header, .product-guide > aside) {
  border-color: rgba(13, 105, 100, 0.16) !important;
  background: rgba(20, 144, 137, 0.07) !important;
}

html[data-theme='light'] .product-guide-card {
  border-color: rgba(24, 54, 50, 0.1) !important;
  background: rgba(255, 252, 246, 0.72) !important;
}

.mn-plan-entry-open:focus-visible {
  outline: none !important;
  border-color: rgba(72, 224, 211, 0.34) !important;
  box-shadow: inset 0 0 0 1px rgba(72, 224, 211, 0.12) !important;
}

/* Модалки, голос и onboarding не остаются тёмными поверх светлого приложения. */
html[data-theme='light'] :where(.modal-backdrop, .voice-scrim) {
  background: rgba(72, 69, 61, 0.26) !important;
  backdrop-filter: blur(16px) saturate(0.9) !important;
}

html[data-theme='light'] .onboarding-root.active {
  background:
    radial-gradient(circle at 50% -8%, rgba(32, 171, 160, 0.18), transparent 31rem),
    radial-gradient(circle at 92% 18%, rgba(121, 91, 164, 0.09), transparent 24rem),
    linear-gradient(180deg, #e9e4da, #e4ded2) !important;
  backdrop-filter: none !important;
}

html[data-theme='light'] :where(.modal-sheet, .voice-panel, .onboarding-shell, .onboarding-stage) {
  border-color: rgba(24, 54, 50, 0.14) !important;
  background:
    radial-gradient(circle at 8% 0%, rgba(22, 143, 136, 0.1), transparent 13rem),
    radial-gradient(circle at 92% 2%, rgba(121, 91, 164, 0.075), transparent 12rem),
    linear-gradient(160deg, #fbf7ef, #eee8dd) !important;
  color: var(--theme-text) !important;
  box-shadow:
    0 24px 60px rgba(52, 46, 35, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
}

.text-processing-sheet .modal-body {
  display: grid;
  min-height: min(42vh, 320px);
}

.text-processing {
  min-height: 250px;
  padding: 12px 0 4px;
}

.text-processing-steps {
  max-width: 330px;
  margin-inline: auto;
}

.text-processing-hint {
  max-width: 310px;
  margin: 16px auto 0;
  line-height: 1.45;
}

html[data-theme='light'] :where(.onboarding-welcome, .onboarding-story) {
  border-color: rgba(24, 54, 50, 0.13) !important;
  background:
    radial-gradient(circle at 88% 12%, rgba(22, 143, 136, 0.14), transparent 14rem),
    linear-gradient(150deg, #fbf8f1, #e4ede7) !important;
}

html[data-theme='light'] .onboarding-story-capture {
  background:
    radial-gradient(circle at 86% 16%, rgba(181, 116, 37, 0.16), transparent 14rem),
    linear-gradient(150deg, #fcf8ef, #eee5d8) !important;
}

html[data-theme='light'] .onboarding-story-day {
  background:
    radial-gradient(circle at 88% 16%, rgba(61, 150, 82, 0.15), transparent 14rem),
    linear-gradient(150deg, #fbf9f0, #e5eee4) !important;
}

html[data-theme='light'] .onboarding-story-memory {
  background:
    radial-gradient(circle at 88% 16%, rgba(121, 91, 164, 0.16), transparent 14rem),
    linear-gradient(150deg, #fbf7f0, #ebe4ef) !important;
}

html[data-theme='light'] .onboarding-story-access {
  background:
    radial-gradient(circle at 88% 14%, rgba(22, 143, 136, 0.15), transparent 14rem),
    radial-gradient(circle at 8% 100%, rgba(181, 116, 37, 0.08), transparent 12rem),
    linear-gradient(150deg, #fbf8f1, #e5eeea) !important;
}

html[data-theme='light'] .onboarding-route-card {
  border-color: rgba(24, 54, 50, 0.12) !important;
  background: rgba(255, 252, 246, 0.68) !important;
  color: var(--theme-text) !important;
}

html[data-theme='light'] .onboarding-route-card.recommended {
  border-color: rgba(22, 143, 136, 0.3) !important;
  background:
    radial-gradient(circle at 92% 0%, rgba(22, 143, 136, 0.14), transparent 9rem),
    rgba(237, 244, 236, 0.86) !important;
}

html[data-theme='light']
  :where(
    .onboarding-access-list > span,
    .onboarding-example,
    .onboarding-proof-row,
    .onboarding-memory-line,
    .onboarding-module-grid > article,
    .onboarding-guide-grid > article,
    .onboarding-choice,
    .onboarding-rhythm-card,
    .onboarding-terms,
    .onboarding-consent
  ) {
  border-color: rgba(24, 54, 50, 0.11) !important;
  background: rgba(255, 252, 246, 0.6) !important;
  color: var(--theme-text) !important;
}

html[data-theme='light'] .onboarding-stage p,
html[data-theme='light'] :where(.onboarding-route-time, .onboarding-route-card small),
html[data-theme='light']
  :where(
    .onboarding-access-list small,
    .onboarding-example small,
    .onboarding-choice small,
    .onboarding-rhythm-card small
  ) {
  color: var(--theme-text-muted) !important;
}

html[data-theme='light'] :where(.onboarding-example blockquote, .onboarding-route-card strong) {
  color: var(--theme-text) !important;
}

html[data-theme='light'] :where(.modal-head, .modal-actions, .onboarding-top, .onboarding-actions) {
  border-color: rgba(24, 54, 50, 0.09) !important;
  background-color: rgba(248, 244, 236, 0.88) !important;
}

html[data-theme='light'] .toast {
  border-color: rgba(24, 54, 50, 0.14) !important;
  background: rgba(249, 245, 237, 0.97) !important;
  color: var(--theme-text) !important;
  box-shadow: 0 14px 34px rgba(59, 51, 38, 0.16) !important;
}

/* Анимация раскрывает новую палитру от тумблера в правом верхнем углу. */
html.theme-animating::view-transition-old(root),
html.theme-animating::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

html.theme-animating::view-transition-old(root) {
  z-index: 1;
}

html.theme-animating::view-transition-new(root) {
  z-index: 2;
  animation: mneme-theme-reveal 620ms cubic-bezier(0.32, 0.72, 0.3, 1) both;
}

@keyframes mneme-theme-reveal {
  from {
    clip-path: circle(0 at var(--theme-origin-x) var(--theme-origin-y));
  }
  to {
    clip-path: circle(150vmax at var(--theme-origin-x) var(--theme-origin-y));
  }
}

/* На телефоне нет движения по экрану: короткий неподвижный слой только
   смягчает единственный repaint палитры. Snapshot, blur и clip-path не нужны. */
html.theme-mobile-switching::before {
  position: fixed;
  z-index: 2147483646;
  inset: 0;
  opacity: 0;
  background:
    radial-gradient(
      circle at 82% 8%,
      var(--theme-mobile-wash-accent, rgba(48, 177, 169, 0.24)),
      transparent 42%
    ),
    var(--theme-mobile-wash-color, #05090a);
  content: '';
  contain: strict;
  pointer-events: none;
  will-change: opacity;
  animation: mneme-mobile-theme-soften 260ms ease-out both;
}

@keyframes mneme-mobile-theme-soften {
  0% {
    opacity: 0;
  }
  28% {
    opacity: 0.16;
  }
  100% {
    opacity: 0;
  }
}

/* Небольшой отклик остаётся привязан к месту касания и делает начало
   перехода понятным, не размывая и не перекрывая сам тумблер. */
html.theme-mobile-switching::after {
  position: fixed;
  z-index: 2147483647;
  top: calc(var(--theme-origin-y) - 24px);
  left: calc(var(--theme-origin-x) - 24px);
  width: 48px;
  height: 48px;
  border: 1px solid var(--theme-mobile-wash-accent, rgba(48, 177, 169, 0.3));
  border-radius: 50%;
  opacity: 0;
  background: radial-gradient(
    circle,
    var(--theme-mobile-wash-accent, rgba(48, 177, 169, 0.24)),
    transparent 68%
  );
  content: '';
  contain: strict;
  pointer-events: none;
  transform: translateZ(0) scale(0.72);
  will-change: transform, opacity;
  animation: mneme-mobile-theme-halo 220ms ease-out both;
}

html.theme-mobile-switching .theme-toggle-track {
  animation: mneme-theme-toggle-settle 260ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes mneme-mobile-theme-halo {
  0% {
    opacity: 0.28;
    transform: translateZ(0) scale(0.82);
  }
  100% {
    opacity: 0;
    transform: translateZ(0) scale(1.55);
  }
}

@keyframes mneme-theme-toggle-settle {
  0%,
  100% {
    transform: translateZ(0) scale(1);
  }
  18% {
    transform: translateZ(0) scale(0.96);
  }
  58% {
    transform: translateZ(0) scale(1.015);
  }
}

html.theme-fallback body,
html.theme-fallback .mobile-header,
html.theme-fallback .dock-surface,
html.theme-fallback .card,
html.theme-fallback .mn-card,
html.theme-fallback .today-sheet,
html.theme-fallback .modal-sheet,
html.theme-fallback .voice-panel {
  transition:
    color 300ms ease,
    border-color 360ms ease,
    background-color 440ms ease,
    box-shadow 440ms ease !important;
}

@media (max-width: 390px) {
  .theme-toggle {
    width: 54px;
    min-width: 54px;
  }

  .theme-toggle-track {
    width: 50px;
  }

  .theme-toggle-thumb {
    transform: translateX(22px);
  }

  html[data-theme='light'] .theme-toggle-thumb {
    transform: translateX(0);
  }

  .mobile-header .brand-lockup.compact {
    max-width: calc(100% - 150px) !important;
  }
}

/* --------------------------------------------------------------------------
   Navigation repair: one clear action, then progressive detail.
   The MNEME materials stay expressive; only competing controls are reduced.
   -------------------------------------------------------------------------- */

.mn-plan-entry-open {
  min-height: 82px !important;
  padding: 13px 14px !important;
  grid-template-columns: 52px 5px minmax(0, 1fr) !important;
  gap: 10px !important;
}

.mn-plan-entry .item-main strong {
  display: -webkit-box;
  overflow: hidden;
  line-height: 1.18;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.mn-plan-entry-meta {
  overflow: hidden;
  color: var(--ui-text-muted) !important;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-filter-button,
.notes-filter-button {
  display: inline-flex;
  flex: 0 0 auto;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 11px;
  border: 1px solid rgba(77, 226, 214, 0.18);
  border-radius: 14px;
  background: rgba(52, 197, 187, 0.07);
  color: var(--mneme-teal-bright);
  font: inherit;
  font-size: 11px;
  font-weight: 820;
}

.task-filter-button {
  margin-left: auto;
}

.task-filter-button .action-icon,
.notes-filter-button .action-icon {
  width: 15px;
  height: 15px;
}

.mn-task-section > .mn-section-head.has-collapsible-list-toggle > .mn-count,
.notes-list-controls.has-collapsible-list-toggle > .mn-count {
  margin-left: 0 !important;
}

.mn-task-section > .mn-section-head.has-collapsible-list-toggle > .task-filter-button {
  margin-left: auto;
}

.section-head.has-collapsible-list-toggle > .mn-count + .collapsible-list-toggle,
.notes-list-controls.has-collapsible-list-toggle > .mn-count + .collapsible-list-toggle {
  margin-left: 0 !important;
}

.mn-calendar-layout {
  align-items: start;
}

.mn-calendar-day {
  order: 1;
}

.mn-calendar-month {
  order: 2;
  padding: 14px !important;
}

.mn-calendar-month.collapsed {
  min-height: 64px;
}

.mn-calendar-head {
  grid-template-columns: 44px minmax(0, 1fr) 44px !important;
}

.mn-calendar-month-toggle {
  display: inline-flex;
  min-width: 0;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 8px;
  border: 0;
  background: transparent;
  color: var(--theme-text);
  font: inherit;
}

.mn-calendar-month-toggle strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mn-disclosure-chevron {
  display: inline-flex;
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  color: #4dded6;
  transform: rotate(90deg);
  transition: transform 180ms ease;
}

.mn-disclosure-chevron svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
}

.mn-disclosure-chevron svg path {
  fill: none !important;
  stroke: currentColor !important;
}

.mn-calendar-month.open .mn-calendar-month-toggle .mn-disclosure-chevron {
  transform: rotate(-90deg);
}

.mn-calendar-quick-actions {
  display: grid;
  margin: 2px 0 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.mn-calendar-quick-actions .btn {
  min-width: 0;
  min-height: 42px;
  padding-inline: 9px;
  border-radius: 14px;
  font-size: 11px;
}

:is(.finance-cover-note, .notes-cover-note) {
  min-height: 124px !important;
  padding: 15px 14px !important;
  gap: 7px !important;
}

:is(.finance-cover-note, .notes-cover-note) .mn-section-cover-copy {
  align-self: start !important;
}

:is(.finance-cover-note, .notes-cover-note) .mn-section-cover-copy h1 {
  font-size: clamp(32px, 8.5vw, 40px) !important;
}

.notes-find-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.notes-find-row .notes-search-field {
  min-width: 0;
  margin: 0 !important;
}

.notes-list-controls {
  display: flex !important;
  min-height: 34px;
  align-items: center;
  justify-content: flex-end !important;
  gap: 8px;
}

.mn-sport-quick-actions.one {
  grid-template-columns: minmax(0, 1fr);
}

.mn-sport-quick-actions.one .btn {
  width: 100%;
}

.mn-sport-meal-journal > header.has-collapsible-list-toggle > div {
  margin-right: auto;
}

.mn-profile-hero {
  min-height: 112px !important;
  padding: 18px 16px !important;
  align-content: center !important;
}

.mn-profile-hero-copy {
  align-self: center;
}

.mn-profile-sport-card {
  gap: 12px !important;
}

.mn-profile-summary {
  margin: 0;
  color: var(--ui-text-muted);
  font-size: 12px;
  line-height: 1.45;
}

.mn-profile-disclosure {
  padding: 0 !important;
  overflow: hidden;
}

.mn-profile-disclosure > summary {
  display: grid;
  min-height: 72px;
  padding: 14px 16px;
  grid-template-columns: minmax(0, 1fr) 14px;
  gap: 12px;
  align-items: center;
  cursor: pointer;
  list-style: none;
}

.mn-profile-disclosure > summary::-webkit-details-marker {
  display: none;
}

.mn-profile-disclosure > summary > span:first-child {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.mn-profile-disclosure > summary strong {
  font-size: 15px;
}

.mn-profile-disclosure > summary small {
  overflow: hidden;
  color: var(--ui-text-muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mn-profile-disclosure > summary .mn-disclosure-chevron {
  transform: rotate(90deg);
  transition: transform 180ms ease;
}

.mn-profile-disclosure[open] > summary .mn-disclosure-chevron {
  transform: rotate(-90deg);
}

.mn-profile-disclosure > :not(summary) {
  margin-inline: 14px;
}

.mn-profile-disclosure > :last-child {
  margin-bottom: 14px;
}

.ask-page {
  display: grid;
  gap: 12px;
}

.ask-page-head {
  padding: 4px 4px 0;
}

.ask-page-head h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(32px, 9vw, 42px);
  line-height: 0.95;
  letter-spacing: -0.06em;
}

.ask-page-head p {
  margin: 7px 0 0;
  color: var(--ui-text-muted);
  font-size: 12px;
}

.ask-suggestions {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  scrollbar-width: none;
}

.ask-suggestions::-webkit-scrollbar {
  display: none;
}

.ask-suggestions button {
  min-height: 36px;
  padding: 0 11px;
  flex: 0 0 auto;
  border: 1px solid rgba(77, 226, 214, 0.16);
  border-radius: 999px;
  background: rgba(52, 197, 187, 0.07);
  color: var(--mneme-teal-bright);
  font: inherit;
  font-size: 11px;
  font-weight: 800;
}

body:has(#modal-root > .modal-backdrop) #bottom-navigation,
body:has(#voice-root.active) #bottom-navigation {
  opacity: 0.26;
  filter: saturate(0.35);
  pointer-events: none;
  transform: translateY(4px) scale(0.985);
}

#bottom-navigation {
  transition:
    opacity 180ms ease,
    filter 180ms ease,
    transform 180ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .mn-disclosure-chevron,
  #bottom-navigation {
    transition: none !important;
  }
}

/* Промокод — самостоятельная категория профиля, а не нижняя часть тарифа. */
.mn-promo-entry {
  margin: 0;
}

.mn-promo-entry label > span {
  display: block;
  margin-bottom: 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.mn-promo-entry label > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.mn-promo-entry input {
  min-width: 0;
  height: 42px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: color-mix(in srgb, var(--surface-2) 84%, transparent);
  color: var(--text);
  font: inherit;
  font-weight: 750;
  text-transform: uppercase;
}

.mn-promo-entry button {
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 52%, var(--line));
  border-radius: 13px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent-strong);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
}

.payment-price.has-discount del {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.payment-promo-applied {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
}

.payment-promo-applied > span {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 10px;
  background: color-mix(in srgb, var(--success) 18%, transparent);
  color: var(--success);
}

.payment-promo-applied svg {
  width: 16px;
  height: 16px;
}

.payment-promo-applied div {
  display: grid;
  gap: 2px;
}

.payment-promo-applied small {
  color: var(--muted);
  line-height: 1.35;
}

.admin-trial-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.admin-trial-control > div {
  display: grid;
  gap: 3px;
}

.admin-trial-control small {
  color: var(--muted);
}

.admin-trial-days {
  display: flex;
  gap: 6px;
  align-items: center;
  color: var(--muted);
  font-size: 12px;
}

.admin-trial-days input {
  width: 58px;
  height: 38px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-weight: 800;
}

.admin-promo-card .admin-plan-limit {
  min-height: 0;
}

@media (max-width: 430px) {
  .admin-trial-control {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .admin-trial-days {
    grid-column: 1 / -1;
  }
}

.onboarding-back-top {
  position: absolute !important;
  z-index: 6 !important;
  top: 14px !important;
  left: 15px !important;
  display: grid !important;
  width: 42px !important;
  height: 42px !important;
  padding: 0 !important;
  place-items: center !important;
  border: 0 !important;
  background: transparent !important;
  color: rgba(241, 228, 205, 0.72) !important;
}

.onboarding-back-top .mneme-glyph {
  width: 22px;
  height: 22px;
}

.onboarding-back-top .mneme-glyph path {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.onboarding-actions {
  grid-template-columns: 1fr !important;
}

@media (max-width: 700px) {
  .onboarding-back-top {
    top: 9px !important;
    left: 9px !important;
  }
}

@media (max-width: 820px), (pointer: coarse) {
  .theme-toggle-track {
    transition-duration: 220ms;
  }

  .theme-toggle-thumb {
    transition-duration: 280ms;
  }

  .theme-toggle svg {
    transition-duration: 220ms;
  }

  html.theme-fallback :where(body, .mobile-header, .dock-surface, .card, .mn-card) {
    transition: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .theme-toggle-track,
  .theme-toggle-thumb,
  .theme-toggle svg {
    transition: none;
  }

  html.theme-animating::view-transition-new(root) {
    animation-duration: 1ms;
  }

  html.theme-mobile-switching::before,
  html.theme-mobile-switching::after,
  html.theme-mobile-switching .theme-toggle-track {
    animation: none;
  }
}

/* Сумма операции всегда видна в верхней строке карточки. */
.finance-transaction {
  grid-template-columns: 34px minmax(0, 1fr) !important;
}

.finance-transaction-head {
  display: flex;
  min-width: 0;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.finance-transaction .finance-transaction-head > strong {
  min-width: 0;
}

.finance-transaction .finance-transaction-head > .amount {
  min-width: 0;
  flex: 0 0 auto;
  padding: 0;
  align-self: auto;
  grid-column: auto;
  justify-self: auto;
  font-size: 16px;
  line-height: 1;
  text-align: right;
  white-space: nowrap;
}

@media (max-width: 420px) {
  .finance-transaction {
    grid-template-columns: 29px minmax(0, 1fr) !important;
  }

  .finance-transaction .finance-transaction-head > .amount {
    font-size: 15px;
  }
}

/* План дня: время, дело и статус остаются одной строкой на телефоне. */
@media (max-width: 620px) {
  .screen-today .today-agenda-row {
    min-height: 52px;
    padding-inline: 11px;
    grid-template-columns: 54px minmax(0, 1fr) auto !important;
    gap: 8px;
  }

  .screen-today .today-agenda-row .item-main,
  .screen-today .today-agenda-status {
    grid-column: auto !important;
  }

  .screen-today .today-agenda-status {
    margin-top: 0 !important;
    padding: 4px 7px;
    justify-self: end;
    font-size: 10px;
    line-height: 1.1;
  }
}

/* Предложение расписания: короткая дата и неломающийся интервал. */
.plan-suggestion-sheet .modal-body {
  gap: 12px;
}

.plan-suggestion-sheet .plan-suggestion-list {
  margin-top: 8px;
  border-radius: 18px;
}

.plan-suggestion-sheet .plan-suggestion-row {
  display: grid;
  padding: 14px 15px 15px;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  align-items: start;
}

.plan-suggestion-sheet .plan-suggestion-time {
  display: flex;
  min-width: 0;
  grid-row: auto;
  align-items: baseline;
  gap: 8px;
  color: var(--mneme-teal-bright);
  line-height: 1.12;
  white-space: nowrap;
}

.plan-suggestion-sheet .plan-suggestion-time > b {
  font-family: inherit;
  font-size: 14px;
  font-weight: 820;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.025em;
}

.plan-suggestion-sheet .plan-suggestion-date {
  margin: 0;
  color: rgba(52, 197, 187, 0.74);
  font-size: 11px;
  font-weight: 760;
  line-height: 1;
}

.plan-suggestion-sheet .plan-suggestion-copy {
  display: grid;
  min-width: 0;
  grid-row: auto;
  gap: 4px;
  color: inherit;
  font-weight: inherit;
}

.plan-suggestion-sheet .plan-suggestion-copy > strong {
  min-width: 0;
  font-size: 15px;
  line-height: 1.22;
  text-wrap: pretty;
}

.plan-suggestion-sheet .plan-suggestion-copy > small {
  min-width: 0;
  color: var(--muted);
  font-weight: 500;
  line-height: 1.3;
  text-wrap: pretty;
}

@media (max-width: 380px) {
  .screen-today .today-agenda-row {
    grid-template-columns: 49px minmax(0, 1fr) auto !important;
    gap: 6px;
  }

  .screen-today .today-agenda-time,
  .screen-today .today-agenda-row strong {
    font-size: 14px !important;
  }

  .screen-today .today-agenda-status {
    padding-inline: 6px;
    font-size: 9.5px;
  }

  .plan-suggestion-sheet .plan-suggestion-row {
    padding-inline: 12px;
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
  }
}

/* Детали дела: одна спокойная текстовая поверхность вместо панели настроек. */
.task-detail-quiet {
  gap: 16px;
}

.task-detail-summary {
  display: grid;
  gap: 10px;
  padding: 4px 3px 8px;
}

.task-detail-summary h3 {
  margin: 0;
  color: var(--theme-text);
  font-size: clamp(25px, 7.2vw, 32px);
  line-height: 1.04;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

.task-detail-summary p {
  margin: 0;
  color: var(--paper-muted);
  font-size: 15px;
  line-height: 1.45;
  white-space: pre-wrap;
}

.task-detail-summary small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.35;
}

.modal-actions .task-delete-action {
  border-color: transparent !important;
  background: transparent !important;
  color: rgba(235, 126, 118, 0.82) !important;
}

/* В светлой теме активность тоже рисует единая движущаяся капсула, а не
   отдельные фоны на каждой кнопке. */
html[data-theme='light'] .mn-plan-nav button,
html[data-theme='light'] .mn-period-switch button {
  background: transparent !important;
}

html[data-theme='light'] .mn-plan-nav::before {
  border-color: rgba(22, 143, 136, 0.24);
  background:
    radial-gradient(circle at 50% 0%, rgba(22, 143, 136, 0.15), transparent 76%),
    rgba(22, 143, 136, 0.1);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.48),
    0 6px 14px rgba(58, 79, 75, 0.08);
}

html[data-theme='light'] .mn-period-switch::before {
  border-color: rgba(255, 255, 255, 0.2);
  background: #356b67;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.13);
}

html[data-theme='light'] .mn-plan-nav button.active {
  color: #126f6a !important;
}

html[data-theme='light'] .mn-sport-nutrition-chart .empty.has-skips i {
  border-color: rgba(105, 73, 143, 0.25);
  background: repeating-linear-gradient(
    135deg,
    rgba(121, 91, 164, 0.2) 0 4px,
    rgba(56, 45, 67, 0.06) 4px 8px
  );
}

html[data-theme='light'] .mn-nutrition-skip-count {
  border-color: rgba(105, 73, 143, 0.2);
  background: #e7dced;
  color: #654781;
}

html[data-theme='light'] .mn-period-switch button.active {
  color: #fff8ec !important;
}

/* Быстрое фото: тот же нижний ввод, но с явной локальной проверкой снимка. */
.voice-fab.camera-mode {
  background:
    radial-gradient(circle at 32% 20%, rgba(241, 228, 205, 0.23), transparent 34%),
    linear-gradient(180deg, #3abfc4, #247f93) !important;
}

.voice-fab.text-mode {
  background:
    radial-gradient(circle at 32% 20%, rgba(241, 228, 205, 0.24), transparent 34%),
    linear-gradient(180deg, #8c70ab, #675080) !important;
}

.voice-fab .voice-fab-icon {
  transition:
    transform 180ms ease,
    opacity 160ms ease;
}

.voice-fab.pressed .voice-fab-icon {
  transform: translateY(-2px) scale(0.93);
}

.voice-root.photo-source .voice-panel,
.voice-root.camera-requesting .voice-panel,
.voice-root.camera-live .voice-panel,
.voice-root.camera-review .voice-panel,
.voice-root.camera-upgrade .voice-panel {
  height: auto !important;
  max-height: min(760px, calc(100dvh - var(--dock-clearance) - 18px)) !important;
}

.voice-root.camera-requesting .voice-panel {
  top: auto !important;
}

.voice-root.photo-source .voice-panel-body,
.voice-root.camera-requesting .voice-panel-body,
.voice-root.camera-live .voice-panel-body,
.voice-root.camera-review .voice-panel-body,
.voice-root.camera-upgrade .voice-panel-body {
  max-height: min(760px, calc(100dvh - var(--dock-clearance) - 18px)) !important;
  padding-bottom: 0 !important;
}

.voice-root.photo-source .voice-panel-body,
.voice-root.camera-requesting .voice-panel-body {
  height: auto !important;
}

.camera-stage {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  margin-top: 14px;
  border: 1px solid rgba(93, 218, 211, 0.22);
  border-radius: 22px;
  background: #05090a;
}

.camera-mode-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  margin-top: 12px;
  padding: 4px;
  border: 1px solid rgba(93, 218, 211, 0.13);
  border-radius: 16px;
  background: rgba(5, 13, 14, 0.72);
}

.camera-mode-switch button {
  min-height: 40px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--theme-text-muted, rgba(241, 228, 205, 0.58));
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  transition:
    transform 180ms ease,
    color 180ms ease,
    background-color 180ms ease;
}

.camera-mode-switch button.active {
  background: rgba(55, 188, 190, 0.2);
  color: #dffdfa;
}

.camera-mode-switch button:active {
  transform: scale(0.97);
}

.camera-video,
.camera-review-image {
  display: block;
  width: 100%;
  max-height: min(46dvh, 440px);
  object-fit: cover;
}

.camera-review-image {
  margin-top: 14px;
  border: 1px solid rgba(93, 218, 211, 0.18);
  border-radius: 22px;
}

.camera-focus {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 72px;
  height: 72px;
  border: 2px solid rgba(255, 247, 230, 0.64);
  border-radius: 22px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.camera-stage.precise .camera-focus {
  width: min(70%, 250px);
  height: min(70%, 250px);
  border-radius: 50%;
}

.camera-first-shot {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: flex;
  max-width: calc(100% - 20px);
  align-items: center;
  gap: 8px;
  padding: 5px 9px 5px 5px;
  border: 1px solid rgba(93, 218, 211, 0.34);
  border-radius: 14px;
  background: rgba(5, 13, 14, 0.88);
  color: #dffdfa;
  font-size: 11px;
  font-weight: 800;
  backdrop-filter: blur(10px);
}

.camera-first-shot img {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  object-fit: cover;
}

.camera-first-shot .mneme-glyph {
  width: 15px;
  height: 15px;
  color: #65d7a1;
}

.camera-review-composite {
  aspect-ratio: 8 / 3;
}

.camera-plate-size,
.camera-weight-hint {
  margin-top: 12px;
}

.camera-privacy {
  margin: 10px 2px 0;
  color: var(--theme-text-muted, rgba(241, 228, 205, 0.58));
  font-size: 12px;
  line-height: 1.45;
}

.camera-food-upgrade {
  display: grid;
  gap: 6px;
  margin-top: 12px;
  padding: 14px 15px;
  border: 1px solid rgba(93, 218, 211, 0.16);
  border-radius: 18px;
  background: rgba(44, 112, 116, 0.1);
}

.camera-food-upgrade strong {
  color: var(--theme-text, #f1e4cd);
  font-size: 14px;
}

.camera-food-upgrade p {
  margin: 0;
  color: var(--theme-text-muted, rgba(241, 228, 205, 0.62));
  font-size: 12px;
  line-height: 1.5;
}

.voice-result-actions .mneme-glyph {
  width: 20px;
  height: 20px;
}

.mn-meal-actions {
  display: flex !important;
  min-width: auto !important;
  flex: 0 0 auto;
  align-items: center;
  gap: 7px !important;
}

.mn-meal-camera,
.mn-meal-add {
  transition:
    transform 180ms ease,
    background-color 180ms ease,
    border-color 180ms ease;
}

.mn-meal-camera {
  display: inline-flex;
  min-height: 38px;
  padding: 0 10px;
  align-items: center;
  gap: 5px;
  border: 1px solid rgba(99, 181, 222, 0.22);
  border-radius: 14px;
  background: rgba(43, 105, 132, 0.2);
  color: #83cce9;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
}

.mn-meal-camera .mneme-glyph {
  width: 17px;
  height: 17px;
}

.mn-meal-camera:active,
.mn-meal-add:active {
  transform: translateY(1px) scale(0.96);
}

.notes-action-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.notes-action-row .btn:last-child {
  grid-column: 1 / -1;
}

html[data-theme='light'] .camera-stage,
html[data-theme='light'] .camera-review-image {
  border-color: rgba(22, 143, 136, 0.2);
  background: #d8d3ca;
}

html[data-theme='light'] .camera-mode-switch {
  border-color: rgba(22, 143, 136, 0.16);
  background: rgba(238, 235, 227, 0.88);
}

html[data-theme='light'] .camera-mode-switch button.active {
  background: rgba(22, 143, 136, 0.14);
  color: #0b5e5c;
}

html[data-theme='light'] .mn-meal-camera {
  border-color: rgba(20, 112, 142, 0.2);
  background: rgba(40, 140, 171, 0.1);
  color: #176d8d;
}

@media (max-width: 380px) {
  .mn-meal-camera span,
  .mn-meal-add span {
    display: none;
  }

  .mn-meal-camera,
  .mn-meal-add {
    width: 38px;
    padding: 0;
    justify-content: center;
  }
}

.routine-week-overview {
  display: grid;
  grid-template-columns: repeat(7, minmax(56px, 1fr));
  gap: 7px;
  overflow-x: auto;
  padding: 2px 1px 7px;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

.routine-week-overview::-webkit-scrollbar {
  display: none;
}

.routine-week-day {
  display: grid;
  min-width: 64px;
  min-height: 66px;
  padding: 9px 8px;
  align-content: space-between;
  gap: 7px;
  border: 1px solid rgba(241, 228, 205, 0.09);
  border-radius: 15px;
  background: rgba(7, 14, 15, 0.5);
  scroll-snap-align: start;
}

.routine-week-day strong {
  color: var(--mneme-paper);
  font-size: 12px;
}

.routine-week-day span {
  overflow: hidden;
  color: rgba(241, 228, 205, 0.52);
  font-size: 9px;
  line-height: 1.25;
  text-overflow: ellipsis;
}

.routine-week-day.busy {
  border-color: rgba(52, 197, 187, 0.2);
  background: rgba(26, 95, 91, 0.17);
}

.routine-week-day.weekend {
  border-color: rgba(184, 154, 216, 0.2);
  background: rgba(111, 79, 143, 0.14);
}

.routine-week-day.weekend span {
  color: #c7a9e0;
  font-weight: 760;
}

html[data-theme='light'] .routine-week-day {
  border-color: rgba(24, 54, 50, 0.1);
  background: rgba(255, 252, 246, 0.65);
}

html[data-theme='light'] .routine-week-day strong {
  color: var(--theme-text);
}

html[data-theme='light'] .routine-week-day span {
  color: var(--theme-text-muted);
}

html[data-theme='light'] .routine-week-day.busy {
  border-color: rgba(22, 143, 136, 0.18);
  background: rgba(34, 153, 145, 0.09);
}

html[data-theme='light'] .routine-week-day.weekend {
  border-color: rgba(105, 73, 143, 0.16);
  background: rgba(121, 91, 164, 0.09);
}

html[data-theme='light'] .routine-week-day.weekend span {
  color: #654781;
}

.today-smart-plan-button {
  display: grid;
  width: 100%;
  min-height: 66px;
  padding: 12px 14px;
  grid-template-columns: 38px minmax(0, 1fr) 12px;
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(52, 197, 187, 0.25);
  border-radius: 20px;
  color: var(--mneme-paper);
  text-align: left;
  background:
    radial-gradient(circle at 8% 0%, rgba(52, 197, 187, 0.2), transparent 9rem),
    rgba(16, 34, 34, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.today-smart-plan-button > span:nth-child(2) {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.today-smart-plan-button strong {
  font-size: 15px;
  line-height: 1.1;
}

.today-smart-plan-button small {
  overflow: hidden;
  color: var(--mneme-paper-muted);
  font-size: 11px;
  line-height: 1.25;
  text-overflow: ellipsis;
}

.today-smart-plan-icon {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 14px;
  color: #071313;
  background: linear-gradient(145deg, #58ddd5, #20aaa3);
}

.today-smart-plan-icon svg {
  width: 21px;
  height: 21px;
}

.today-smart-plan-button:active {
  transform: translateY(1px) scale(0.99);
}

html[data-theme='light'] .today-smart-plan-button {
  border-color: rgba(22, 143, 136, 0.2);
  color: var(--theme-text);
  background:
    radial-gradient(circle at 8% 0%, rgba(34, 153, 145, 0.16), transparent 9rem),
    rgba(255, 252, 246, 0.72);
}

html[data-theme='light'] .today-smart-plan-button small {
  color: var(--theme-text-muted);
}

/* У галочки один центр и одна система размеров: раньше псевдоэлемент был
   смещён transform-ом и на узких карточках визуально уезжал вниз-вправо. */
.mn-entry-done {
  align-items: center !important;
  justify-items: center !important;
}

.mn-entry-done > span {
  display: grid !important;
  width: 18px !important;
  height: 18px !important;
  place-items: center !important;
  border: 0 !important;
  transform: none !important;
}

.mn-entry-done > span::before {
  width: 9px;
  height: 5px;
  border-bottom: 2.5px solid #fff;
  border-left: 2.5px solid #fff;
  content: '';
  transform: translateY(-1px) rotate(-45deg);
}
/* Smart capture: duplicate protection remains visible without resembling an error toast. */
.smart-duplicate-warning {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  margin-top: 14px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--warning, #e8b85b) 42%, transparent);
  border-radius: 18px;
  background: color-mix(in srgb, var(--warning, #e8b85b) 9%, var(--surface, #111b19));
}

.smart-duplicate-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--warning, #e8b85b) 22%, transparent);
  color: var(--warning, #e8b85b);
  font-weight: 900;
}

.smart-duplicate-warning strong,
.smart-duplicate-warning p {
  display: block;
  margin: 0;
}

.smart-duplicate-warning p {
  margin-top: 4px;
  color: var(--text-muted);
  line-height: 1.4;
}

.smart-duplicate-warning .text-button {
  min-height: 36px;
  margin-top: 8px;
  padding-inline: 0;
  justify-content: flex-start;
}

/* Светлая модалка — одна непрерывная бумажная поверхность. Старый тёмный
   градиент заголовка и подложки действий не должен просвечивать ни в одном
   разделе. */
html[data-theme='light'] .modal-head {
  border-color: rgba(24, 54, 50, 0.08) !important;
  background: linear-gradient(
    180deg,
    rgba(251, 247, 239, 0.98) 0%,
    rgba(248, 244, 236, 0.94) 76%,
    rgba(248, 244, 236, 0) 100%
  ) !important;
}

html[data-theme='light'] .modal-head h2 {
  color: var(--theme-text) !important;
}

html[data-theme='light'] .modal-head .eyebrow {
  color: #168f88 !important;
}

html[data-theme='light'] .modal-head .icon-button {
  border-color: rgba(24, 54, 50, 0.14) !important;
  background: rgba(235, 229, 218, 0.82) !important;
  color: #293734 !important;
}

html[data-theme='light'] .modal-body {
  background: transparent !important;
}

html[data-theme='light'] .modal-actions {
  border-color: rgba(24, 54, 50, 0.09) !important;
  background: rgba(244, 238, 227, 0.97) !important;
  box-shadow: none !important;
}

html[data-theme='light'] .voice-result-actions,
html[data-theme='light'] .voice-save-success .voice-result-actions {
  border-color: rgba(24, 54, 50, 0.09) !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-theme='light'] .sport-entry-editable {
  color: var(--theme-text) !important;
}

html[data-theme='light'] .sport-entry-editable .mn-open-tail {
  border-color: rgba(24, 54, 50, 0.4) !important;
}

html[data-theme='light'] .mn-profile-tabs {
  border-color: rgba(24, 54, 50, 0.1);
  background: rgba(235, 230, 220, 0.72);
}

html[data-theme='light'] .mn-profile-tabs button {
  color: rgba(29, 42, 40, 0.58);
}

html[data-theme='light'] .mn-profile-tabs button.active {
  background: rgba(255, 252, 246, 0.88);
  color: #1d2a28;
  box-shadow:
    inset 0 0 0 1px rgba(22, 143, 136, 0.16),
    0 4px 12px rgba(67, 57, 42, 0.07);
}

html[data-theme='light'] .header-notification-icon .mneme-glyph [data-glyph-outline],
html[data-theme='light'] .header-notification-icon .mneme-glyph [data-glyph-soft-line] {
  stroke: rgba(56, 66, 62, 0.66) !important;
}

html[data-theme='light'] .header-notification-icon .mneme-glyph [data-glyph-signal] {
  fill: rgba(56, 66, 62, 0.5) !important;
  stroke: rgba(248, 244, 236, 0.72) !important;
}

/* Calm hierarchy: large dark surfaces are separated by tone and spacing,
   not by several competing glows, gradients and deep shadows. */
html[data-theme='dark']
  :where(
    .mn-card,
    .notes-capture-card,
    .notes-paper,
    .mn-profile-section,
    .mn-profile-hero,
    .notes-cover-note
  ) {
  border-color: rgba(241, 228, 205, 0.085) !important;
  background: #10191a !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18) !important;
}

html[data-theme='dark']
  :where(
    .mn-task-open,
    .mn-plan-entry-open,
    .mn-setting-row,
    .mn-profile-report > div,
    .mn-profile-status-grid > div,
    .memory-note-item
  ) {
  border-color: rgba(241, 228, 205, 0.07) !important;
  background: rgba(4, 10, 11, 0.32) !important;
  box-shadow: none !important;
}

html[data-theme='dark'] :where(.mn-profile-hero, .notes-cover-note)::before {
  background: none !important;
}

/* The Notes illustration is one coherent accent. The extra hanging ribbon
   used to make it look as if the asset had slipped out of position. */
.notes-cover-note::before {
  display: none !important;
}

html body .notes-cover-copy {
  max-width: calc(100% - 92px);
  padding-right: 0 !important;
}

html body .notes-cover-asset {
  top: 50% !important;
  right: 16px !important;
  bottom: auto !important;
  width: 78px !important;
  transform: translateY(-50%) rotate(-2deg) !important;
}

/* Profile display names need a little vertical breathing room: the display
   font has low descenders and was clipped by the former 0.9 line height. */
.mn-profile-hero-copy h1 {
  padding-block: 2px 4px;
  overflow: visible !important;
  line-height: 1.02 !important;
  letter-spacing: -0.06em !important;
  text-overflow: clip !important;
}

@media (max-width: 520px) {
  .mn-profile-report {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
}

/* Task cards use a quiet status bar and a circular completion target. A large
   two-colour bookmark plus a glowing check made every row look selected. */
.mn-task-list:not(.timeline) .mn-task-open {
  padding: 12px 56px 12px 13px !important;
  grid-template-areas:
    'mark main tail'
    'mark badge tail';
  grid-template-columns: 7px minmax(0, 1fr) 12px !important;
  grid-template-rows: auto auto;
  column-gap: 11px !important;
  row-gap: 4px !important;
}

.mn-task-list:not(.timeline) .mn-entry-flag {
  width: 5px !important;
  min-width: 5px !important;
  height: 32px !important;
  grid-area: mark;
  align-self: center;
  border-radius: 999px !important;
  clip-path: none !important;
  background: rgba(57, 203, 196, 0.72) !important;
  box-shadow: none !important;
}

.mn-task-list:not(.timeline) .mn-task-entry.overdue .mn-entry-flag {
  background: rgba(217, 121, 112, 0.78) !important;
}

.mn-task-list:not(.timeline) .mn-task-entry.upcoming .mn-entry-flag {
  background: rgba(169, 139, 199, 0.72) !important;
}

.mn-task-list:not(.timeline) .mn-task-open .item-main {
  grid-area: main;
}

.mn-task-list:not(.timeline) .mn-task-open :where(.mn-priority, .mn-waiting, .mn-repeat) {
  grid-area: badge !important;
  justify-self: start;
  margin: 0 !important;
}

.mn-task-list:not(.timeline) .mn-task-open .mn-open-tail {
  grid-area: tail !important;
  align-self: center;
}

.mn-task-list:not(.timeline) .item-main strong {
  display: -webkit-box;
  overflow: hidden;
  line-height: 1.18;
  text-overflow: clip;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.mn-plan-entry-open .mn-entry-flag {
  width: 5px !important;
  min-width: 5px !important;
  height: 34px !important;
  border-radius: 999px !important;
  clip-path: none !important;
  background: rgba(57, 203, 196, 0.72) !important;
  box-shadow: none !important;
}

@media (max-width: 767px) {
  .mn-plan-entry-open {
    padding-right: 54px !important;
    grid-template-columns: 48px 7px minmax(0, 1fr) auto !important;
    gap: 9px !important;
  }
}

.mn-entry-done {
  top: 50% !important;
  right: 12px !important;
  bottom: auto !important;
  width: 34px !important;
  height: 34px !important;
  border: 1.5px solid rgba(241, 228, 205, 0.3) !important;
  border-radius: 50% !important;
  background: rgba(241, 228, 205, 0.02) !important;
  box-shadow: none !important;
  transform: translateY(-50%) !important;
}

.mn-entry-done > span {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: transparent !important;
}

.mn-entry-done > span::before {
  display: none !important;
}

.mn-entry-done:is(:hover, :focus-visible) {
  border-color: rgba(57, 203, 196, 0.72) !important;
}

.mn-entry-done:is(:hover, :focus-visible) > span {
  background: rgba(57, 203, 196, 0.72) !important;
}

.mn-entry-done:active {
  transform: translateY(-50%) scale(0.92) !important;
}

.task-status-action.complete {
  border-color: rgba(241, 228, 205, 0.3) !important;
  border-radius: 50% !important;
  background: transparent !important;
  box-shadow: none !important;
}

.task-status-action.complete .action-icon {
  display: none !important;
}

.screen-tasks .task-open {
  padding: 12px 54px 12px 13px !important;
  grid-template-areas:
    'mark main tail'
    'mark badge tail';
  grid-template-columns: 7px minmax(0, 1fr) 12px !important;
  grid-template-rows: auto auto;
  column-gap: 11px !important;
  row-gap: 4px !important;
}

.screen-tasks .task-item-ribbon {
  width: 5px !important;
  min-width: 5px !important;
  height: 34px !important;
  grid-area: mark;
  align-self: center;
  border-radius: 999px !important;
  clip-path: none !important;
  box-shadow: none !important;
}

.screen-tasks .task-open .item-main {
  grid-area: main;
}

.screen-tasks .task-open :where(.task-priority, .task-waiting) {
  grid-area: badge !important;
  justify-self: start !important;
  margin: 0 !important;
}

.screen-tasks .task-open .item-tail {
  grid-area: tail !important;
  align-self: center;
}

.task-status-action.complete {
  top: 50% !important;
  right: 12px !important;
  bottom: auto !important;
  width: 34px !important;
  height: 34px !important;
  transform: translateY(-50%) !important;
}

html[data-theme='light'] :where(.mn-entry-done, .task-status-action.complete) {
  border-color: rgba(24, 54, 50, 0.32) !important;
  background: rgba(24, 54, 50, 0.02) !important;
}

/* Единая семантика задач: просрочка и повторные переносы заметны, но не
   превращают весь экран в тревожную красную ленту. */
:where(.mn-task-entry, .mn-plan-entry, .task-item).attention-warning {
  border-color: rgba(219, 151, 88, 0.24) !important;
  background: linear-gradient(90deg, rgba(219, 151, 88, 0.075), transparent 62%) !important;
}

:where(.mn-task-entry, .mn-plan-entry, .task-item).attention-critical {
  border-color: rgba(218, 104, 94, 0.3) !important;
  background: linear-gradient(90deg, rgba(218, 104, 94, 0.12), transparent 68%) !important;
}

:where(.mn-task-entry, .mn-plan-entry).attention-critical .mn-entry-flag {
  background: #d66f64 !important;
  box-shadow: 0 0 0 4px rgba(214, 111, 100, 0.08) !important;
}

:where(.mn-task-entry, .mn-plan-entry, .task-item).attention-critical .item-main small {
  color: #dd9188 !important;
}

.task-attention-note,
.task-recurrence-note {
  display: grid;
  padding: 12px 3px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  gap: 4px;
}

.task-attention-note strong,
.task-attention-note span,
.task-recurrence-note strong,
.task-recurrence-note small {
  display: block;
}

.task-attention-note strong {
  color: #dea098;
  font-size: 13px;
}

.task-attention-note span,
.task-recurrence-note small {
  color: var(--theme-text-muted);
  font-size: 12px;
  line-height: 1.45;
}

.task-recurrence-note {
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: start;
}

.task-recurrence-note .action-icon {
  width: 19px;
  height: 19px;
  color: var(--teal-bright);
}

.task-action-panel {
  display: grid;
  padding-top: 4px;
  gap: 13px;
}

.task-actions-primary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.task-actions-primary .btn {
  min-height: 52px;
  padding-inline: 10px;
}

.task-quick-delay {
  display: grid;
  gap: 8px;
}

.task-quick-delay > span {
  color: var(--theme-text-muted);
  font-size: 11px;
  font-weight: 720;
}

.task-quick-delay > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.task-quick-delay .btn {
  min-height: 42px;
  padding: 8px 6px;
  border: 1px solid var(--line) !important;
  background: rgba(255, 255, 255, 0.035) !important;
  color: var(--theme-text) !important;
  font-size: 11px;
}

.task-accountability-lock {
  display: grid;
  padding: 14px;
  border: 1px solid rgba(218, 104, 94, 0.24);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(218, 104, 94, 0.1), rgba(219, 151, 88, 0.045));
  gap: 7px;
}

.task-accountability-lock strong {
  color: #e8a39b;
  font-size: 13px;
}

.task-accountability-lock span {
  color: var(--theme-text-muted);
  font-size: 12px;
  line-height: 1.45;
}

.task-accountability-lock .btn {
  min-height: 44px;
  margin-top: 3px;
}

.task-accountability-lock .btn.warning {
  border-color: rgba(239, 189, 102, 0.28) !important;
  color: #281b0b !important;
  background: linear-gradient(135deg, #efc36d, #d9983e) !important;
  box-shadow: 0 12px 28px rgba(189, 127, 40, 0.14);
}

.modal-actions .task-delete-action.btn.danger {
  border-color: rgba(230, 108, 92, 0.35) !important;
  background: var(--red-soft) !important;
  color: #ff9183 !important;
}

.notes-pagination {
  display: grid;
  margin-top: 14px;
  grid-template-columns: 42px minmax(0, 1fr) 42px;
  align-items: center;
  gap: 9px;
}

.notes-pagination button {
  display: grid;
  width: 42px;
  height: 42px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.035);
  color: var(--theme-text);
}

.notes-pagination button:disabled {
  opacity: 0.28;
}

.notes-pagination svg {
  width: 18px;
  height: 18px;
}

.notes-pagination span {
  color: var(--theme-text-muted);
  font-size: 12px;
  font-weight: 750;
  text-align: center;
}

.mn-sport-day-signal {
  display: grid;
  padding: 12px 2px;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 10px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.mn-sport-day-signal .action-icon {
  width: 20px;
  height: 20px;
  color: var(--teal-bright);
}

.mn-sport-day-signal strong,
.mn-sport-day-signal small {
  display: block;
}

.mn-sport-day-signal strong {
  margin-bottom: 4px;
  color: var(--theme-text);
  font-size: 13px;
}

.mn-sport-day-signal small {
  color: var(--theme-text-muted);
  font-size: 12px;
  line-height: 1.45;
}

@media (max-width: 390px) {
  .task-actions-primary {
    grid-template-columns: minmax(0, 1fr);
  }

  .task-quick-delay > div {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .task-quick-delay > div .btn:last-child {
    grid-column: 1 / -1;
  }
}

html[data-theme='light'] .mn-entry-done:is(:hover, :focus-visible) {
  border-color: rgba(22, 143, 136, 0.72) !important;
}

/* With no pending notifications the intro duplicated the empty state and, in
   light mode, looked like a stray black card. For non-empty lists it remains
   a quiet text summary rather than another surface. */
.notification-sheet .notification-intro {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Quiet focus pass: identity stays in ribbons and semantic colour, while
   navigation and finance surfaces stop competing with the actual content. */
.plan-dashboard::before,
:where(.finance-transaction, .finance-report-card)::after {
  display: none !important;
}

html[data-theme='dark']
  :where(
    .plan-dashboard,
    .plan-dashboard .plan-tabs,
    .plan-dashboard-control,
    .mn-date-control,
    .plan-date-switcher,
    .plan-dashboard-metrics > span
  ) {
  background-image: none !important;
  box-shadow: none !important;
}

html[data-theme='dark'] .plan-dashboard {
  border-color: rgba(241, 228, 205, 0.09) !important;
  background-color: #10191a !important;
}

html[data-theme='dark']
  :where(
    .plan-dashboard .plan-tabs,
    .plan-dashboard-control,
    .mn-date-control,
    .plan-date-switcher
  ) {
  border-color: rgba(241, 228, 205, 0.075) !important;
  background-color: rgba(4, 10, 11, 0.34) !important;
}

:where(.screen-plan, .screen-tasks, .screen-calendar) .plan-tabs button.active {
  background-image: none !important;
  background-color: rgba(52, 197, 187, 0.12) !important;
  box-shadow: inset 0 0 0 1px rgba(52, 197, 187, 0.1) !important;
}

html[data-theme='dark'] .plan-dashboard-metrics > span {
  background-color: rgba(4, 10, 11, 0.28) !important;
}

html[data-theme='light']
  :where(
    .plan-dashboard,
    .plan-dashboard .plan-tabs,
    .plan-dashboard-control,
    .mn-date-control,
    .plan-date-switcher,
    .plan-dashboard-metrics > span
  ) {
  background-image: none !important;
  box-shadow: none !important;
}

html[data-theme='light'] .plan-dashboard {
  background-color: #f4efe5 !important;
}

html[data-theme='light']
  :where(
    .plan-dashboard .plan-tabs,
    .plan-dashboard-control,
    .mn-date-control,
    .plan-date-switcher
  ) {
  background-color: rgba(226, 221, 211, 0.72) !important;
}

html[data-theme='light'] .plan-dashboard-metrics > span {
  background-color: rgba(255, 252, 246, 0.62) !important;
}

/* Tasks are dense, full-width rows. The completion target is a small neutral
   ring with a visible centre, so it reads as an action without looking done. */
.mn-task-section {
  padding: 17px 13px 15px !important;
  gap: 11px !important;
}

.mn-task-section > .mn-section-head {
  padding-inline: 4px;
}

/* Заголовок списка одновременно открывает единственный фильтр: без второй
   строки, которая повторяла выбранный раздел. */
.task-section-filter {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 9px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--theme-text);
  font: inherit;
  cursor: pointer;
  text-align: left;
}

.task-section-filter > span {
  display: inline-flex;
  width: 20px;
  color: var(--mneme-teal-bright);
}

.task-section-filter > span svg {
  width: 20px;
  height: 20px;
}

.task-section-filter strong {
  font-family: var(--font-display);
  font-size: clamp(24px, 7.4vw, 31px);
  line-height: 0.96;
  letter-spacing: -0.035em;
}

.task-filter-options {
  display: grid;
  gap: 7px;
}

.task-filter-options button {
  display: flex;
  min-height: 50px;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border: 1px solid var(--ui-border);
  border-radius: 16px;
  background: var(--ui-surface-inset);
  color: var(--theme-text);
  font: inherit;
  font-size: 14px;
  font-weight: 780;
  text-align: left;
}

.task-filter-options button.active {
  border-color: rgba(52, 197, 187, 0.3);
  background: rgba(19, 72, 68, 0.55);
  color: var(--mneme-teal-bright);
}

.task-filter-options svg {
  width: 18px;
  height: 18px;
}

html[data-theme='light'] .task-filter-options button.active {
  border-color: rgba(22, 143, 136, 0.24);
  background: rgba(22, 143, 136, 0.1);
}

.mn-task-list:not(.timeline),
.screen-tasks .task-list {
  gap: 7px !important;
}

.mn-task-list:not(.timeline) .mn-task-open,
.screen-tasks .task-open {
  min-height: 70px !important;
  padding: 10px 48px 10px 11px !important;
  column-gap: 9px !important;
  border-radius: 18px !important;
}

.mn-task-list:not(.timeline) .mn-entry-flag,
.screen-tasks .task-item-ribbon {
  height: 28px !important;
}

.mn-entry-done,
.task-status-action.complete {
  right: 9px !important;
  width: 30px !important;
  height: 30px !important;
  border-width: 1.5px !important;
  border-color: rgba(241, 228, 205, 0.25) !important;
  background: rgba(241, 228, 205, 0.018) !important;
}

.mn-entry-done:not(.reopen) > span {
  width: 6px !important;
  height: 6px !important;
  background: rgba(241, 228, 205, 0.22) !important;
}

html[data-theme='light'] :where(.mn-entry-done, .task-status-action.complete) {
  border-color: rgba(24, 54, 50, 0.25) !important;
  background: rgba(24, 54, 50, 0.015) !important;
}

html[data-theme='light'] .mn-entry-done:not(.reopen) > span {
  background: rgba(24, 54, 50, 0.2) !important;
}

/* Active directions are a readable list, not a clipped horizontal carousel. */
.mn-active-areas {
  padding: 17px 13px 15px !important;
  gap: 11px !important;
}

.mn-active-areas .mn-section-head {
  margin: 0 !important;
  padding-inline: 4px;
}

.mn-active-area-list,
.mn-active-areas.compact .mn-active-area-list {
  display: grid !important;
  margin: 0 !important;
  padding: 0 !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px !important;
  overflow: visible !important;
  scroll-snap-type: none !important;
}

.mn-active-area {
  width: 100%;
  min-height: 68px !important;
  padding: 10px 11px !important;
  grid-template-areas:
    'mark main tail'
    'mark meta tail';
  grid-template-columns: 5px minmax(0, 1fr) 10px !important;
  gap: 3px 9px !important;
  border-radius: 17px !important;
  background-image: none !important;
  box-shadow: none !important;
}

.mn-active-area-mark {
  width: 4px !important;
  height: 30px !important;
  grid-area: mark;
  align-self: center;
}

.mn-active-area > span:nth-child(2) {
  grid-area: main;
}

.mn-active-area em {
  grid-area: meta;
  justify-self: start;
}

.mn-active-area .mn-open-tail {
  grid-area: tail;
  align-self: center;
}

@media (max-width: 620px) {
  .mn-active-area-list,
  .mn-active-areas.compact .mn-active-area-list {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .mn-active-area {
    flex: none !important;
  }

  .mn-active-areas .mn-section-head p {
    display: none;
  }
}

/* Notes and Finance keep a single stronger bookmark. Their illustrations are
   offset from it so neither detail covers the other or the copy. */
.notes-cover-note::before,
.finance-cover-note::before {
  display: block !important;
  z-index: 0;
  right: 15px !important;
  width: 40px !important;
  height: 92px !important;
  opacity: 0.88 !important;
}

.notes-cover-note::before {
  background: linear-gradient(180deg, #b48bd2, #745d98) !important;
}

.finance-cover-note::before {
  background: linear-gradient(180deg, #42cfc5, #217d79) !important;
}

html body .notes-cover-asset {
  right: 58px !important;
  width: 72px !important;
}

html body .notes-cover-copy {
  max-width: calc(100% - 116px);
}

.finance-cover-asset {
  right: 62px !important;
  width: 92px !important;
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.18)) !important;
}

.finance-cover-copy {
  max-width: calc(100% - 118px) !important;
}

/* Finance uses quiet paper; green and red stay in amounts and charts. */
html[data-theme='dark']
  :where(
    .finance-cover-note,
    .finance-flow-card,
    .finance-paper,
    .finance-report-card,
    .finance-balance-slip,
    .finance-transaction,
    .finance-ledger-row
  ) {
  background-image: none !important;
  box-shadow: none !important;
}

html[data-theme='dark'] :where(.finance-cover-note, .finance-flow-card, .finance-paper) {
  border-color: rgba(241, 228, 205, 0.085) !important;
  background: #10191a !important;
}

html[data-theme='dark']
  :is(
    .finance-cover-note.positive,
    .finance-cover-note.negative,
    .finance-cover-note.neutral,
    .finance-flow-card.income,
    .finance-flow-card.expense,
    .finance-paper.mn-analytics-card
  ) {
  background: #10191a !important;
}

html[data-theme='dark'] :where(.finance-balance-slip, .finance-transaction, .finance-ledger-row) {
  border-color: rgba(241, 228, 205, 0.065) !important;
  background: rgba(4, 10, 11, 0.3) !important;
}

html[data-theme='light']
  :where(
    .finance-cover-note,
    .finance-flow-card,
    .finance-paper,
    .finance-report-card,
    .finance-balance-slip,
    .finance-transaction,
    .finance-ledger-row
  ) {
  background-image: none !important;
  box-shadow: none !important;
}

html[data-theme='light'] :where(.finance-cover-note, .finance-flow-card, .finance-paper) {
  background: #f5f0e6 !important;
}

html[data-theme='light'] .finance-flow-card.income {
  background: #edf2e7 !important;
}

html[data-theme='light'] .finance-flow-card.expense {
  background: #f4e9e2 !important;
}

html[data-theme='light'] :where(.finance-balance-slip, .finance-transaction, .finance-ledger-row) {
  background: rgba(255, 252, 246, 0.62) !important;
}

.mn-finance-trend-column b.income,
.mn-finance-trend-column b.expense {
  box-shadow: none !important;
}

@media (max-width: 420px) {
  .notes-cover-note::before,
  .finance-cover-note::before {
    right: 12px !important;
    width: 36px !important;
    height: 78px !important;
  }

  html body .notes-cover-asset {
    right: 51px !important;
    width: 64px !important;
  }

  html body .notes-cover-copy {
    max-width: calc(100% - 104px);
  }

  .finance-cover-asset {
    right: 54px !important;
    width: 82px !important;
  }
}

/* Task completion belongs inside the card. The row owns the surface and the
   open/details button plus completion action occupy separate real columns. */
.mn-task-list:not(.timeline) .mn-task-entry {
  display: grid !important;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) 44px;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid rgba(241, 228, 205, 0.075);
  border-radius: 18px;
  background: rgba(4, 10, 11, 0.3);
  box-sizing: border-box;
}

.mn-task-list:not(.timeline) .mn-task-open {
  min-height: 70px !important;
  padding: 10px 7px 10px 11px !important;
  grid-column: 1;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.mn-task-list:not(.timeline) .mn-entry-done {
  position: static !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  justify-self: center;
  transform: none !important;
}

.mn-task-list:not(.timeline) .mn-entry-done:active {
  transform: scale(0.92) !important;
}

.mn-task-list:not(.timeline) .mn-task-entry:not(:has(> .mn-entry-done)) .mn-task-open {
  grid-column: 1 / -1;
  padding-right: 12px !important;
}

html[data-theme='light'] .mn-task-list:not(.timeline) .mn-task-entry {
  border-color: rgba(24, 54, 50, 0.11);
  background: rgba(255, 252, 246, 0.62);
}

/* The same two-column ownership applies to tasks placed in a day plan. */
.mn-plan-entry.task:has(> .mn-entry-done) {
  grid-template-columns: minmax(0, 1fr) 44px;
  overflow: hidden;
  border: 1px solid rgba(241, 228, 205, 0.075);
  border-radius: 20px;
  background: rgba(4, 10, 11, 0.3);
}

.mn-plan-entry.task:has(> .mn-entry-done) .mn-plan-entry-open {
  min-width: 0;
  grid-column: 1;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.mn-plan-entry.task:has(> .mn-entry-done) .mn-entry-done {
  position: static !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  grid-column: 2;
  align-self: center;
  justify-self: center;
  transform: none !important;
}

html[data-theme='light'] .mn-plan-entry.task:has(> .mn-entry-done) {
  border-color: rgba(24, 54, 50, 0.11);
  background: rgba(255, 252, 246, 0.62);
}

/* A modal action row is part of the sheet flow, not a black footer floating
   behind the buttons. Direct content blocks receive one consistent rhythm. */
.modal-body {
  display: grid !important;
  align-content: start;
  gap: 14px !important;
}

.modal-body > * {
  margin-block: 0 !important;
}

.modal-actions,
html[data-theme='light'] .modal-actions {
  padding-top: 8px !important;
  border-top: 0 !important;
  background: transparent !important;
  background-image: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}

/* Compact detail icons use the same rounded line language as the dashboard
   dock instead of the older filled square pictograms. */
.compact-line-icon,
.compact-line-icon.green {
  width: 34px !important;
  height: 34px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: rgba(241, 228, 205, 0.58) !important;
}

.compact-line-icon .mneme-glyph {
  width: 24px !important;
  height: 24px !important;
}

html[data-theme='light'] .compact-line-icon,
html[data-theme='light'] .compact-line-icon.green {
  color: rgba(29, 42, 40, 0.58) !important;
}

/* Active directions keep a deliberate inset and every row includes its own
   padding in the declared width instead of spilling past the parent card. */
.mn-active-areas,
.mn-active-areas.compact {
  padding: 17px !important;
}

.mn-active-area-list,
.mn-active-area {
  max-width: 100%;
  box-sizing: border-box !important;
}

/* Keep the cover bookmarks explicit in both palettes. An earlier calm-theme
   rule removed the Notes fill through a more specific selector. */
html[data-theme='dark'] .notes-cover-note::before,
html[data-theme='light'] .notes-cover-note::before {
  display: block !important;
  background: linear-gradient(180deg, #b48bd2, #745d98) !important;
}

/* The wallet belongs beside the title, not on top of the balance slip. */
html body .finance-cover-asset {
  top: 28px !important;
  right: 62px !important;
  bottom: auto !important;
  width: 86px !important;
  opacity: 1 !important;
  transform: none !important;
}

html body .notes-cover-asset {
  right: 62px !important;
}

@media (max-width: 420px) {
  html body .finance-cover-asset {
    top: 22px !important;
    right: 54px !important;
    width: 76px !important;
  }

  html body .notes-cover-asset {
    right: 56px !important;
  }
}

/* The weekly rhythm is a contained grid, not a clipped horizontal carousel. */
.routine-week-overview {
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  overflow: visible;
  padding: 0;
  scroll-snap-type: none;
}

.routine-week-day {
  min-width: 0;
  min-height: 58px;
}

@media (max-width: 430px) {
  .routine-week-overview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Payment providers use their recognizable marks instead of placeholder letters. */
.payment-method {
  grid-template-columns: 38px minmax(0, 1fr) 18px;
}

.payment-method-mark {
  width: 38px;
  height: 38px;
}

.payment-method-mark .payment-brand-icon {
  display: block;
  width: 38px;
  height: 38px;
}

/* A quiet, conventional bell: one outline and one clapper line. */
.header-notification-icon .simple-bell,
.header-notification-button.has-items .header-notification-icon .simple-bell {
  width: 27px !important;
  height: 27px !important;
  color: rgba(221, 218, 207, 0.72) !important;
  filter: none !important;
}

.header-notification-icon .simple-bell path {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.header-notification-badge,
.header-notification-button.has-items .header-notification-badge {
  border-color: #081111 !important;
  background: #43c9d0 !important;
  color: #061112 !important;
  box-shadow: 0 3px 10px rgba(67, 201, 208, 0.28) !important;
}

html[data-theme='light'] .header-notification-icon .simple-bell {
  color: rgba(42, 52, 49, 0.72) !important;
}

.mn-setting-row.with-leading {
  grid-template-columns: 38px minmax(0, 1fr) auto;
}

.mn-setting-leading,
.admin-telegram-mark {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 13px;
  background: linear-gradient(145deg, #4ac3f0, #168fd6);
  color: #fff;
}

.mn-setting-leading svg,
.admin-telegram-mark svg {
  width: 22px;
  height: 22px;
}

.mn-setting-leading svg [data-fill],
.admin-telegram-mark svg [data-fill] {
  fill: currentColor !important;
  stroke: none !important;
}

.admin-command-center {
  display: grid;
  margin-top: 14px;
  grid-template-columns: minmax(0, 0.82fr) minmax(320px, 1.18fr);
  align-items: stretch;
  gap: 12px;
}

.admin-command-center .admin-system-card {
  min-height: 100%;
  margin: 0;
}

.admin-publication-card {
  display: grid;
  min-width: 0;
  padding: 17px;
  gap: 14px;
  border: 1px solid var(--ui-border);
  border-radius: 22px;
  background: var(--ui-surface-inset);
}

.admin-publication-head {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.admin-publication-head > div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.admin-publication-head strong {
  color: var(--theme-text);
  font-size: 16px;
}

.admin-publication-head small {
  overflow: hidden;
  color: var(--ui-text-muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-channel-field {
  display: grid;
  gap: 6px;
}

.admin-channel-field > span {
  color: var(--ui-text-muted);
  font-size: 10px;
}

.admin-channel-field input,
.admin-channel-field textarea {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 0 13px;
  border: 1px solid var(--ui-border);
  border-radius: 14px;
  outline: none;
  background: rgba(4, 10, 10, 0.42);
  color: var(--theme-text);
  font: 600 13px/1.2 var(--font-text);
}

.admin-channel-field textarea {
  min-height: 86px;
  padding-block: 12px;
  resize: vertical;
  line-height: 1.35;
}

.admin-channel-field small {
  color: var(--ui-text-muted);
  font-size: 9px;
  line-height: 1.35;
}

.admin-channel-field input:focus,
.admin-channel-field textarea:focus {
  border-color: rgba(67, 201, 208, 0.55);
}

.admin-welcome-promo-select select {
  min-height: 38px;
  padding: 0 30px 0 11px;
  border: 1px solid var(--ui-border);
  border-radius: 12px;
  outline: none;
  background: var(--ui-surface);
  color: var(--theme-text);
  font: 700 11px/1 var(--font-ui);
}

.admin-monitoring .section-head p {
  margin: 4px 0 0;
  color: var(--ui-text-muted);
  font-size: 11px;
}

.admin-monitor-grid {
  display: grid;
  overflow: hidden;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--ui-border);
  border-radius: 20px;
  background: var(--ui-surface-inset);
}

.admin-monitor-grid article {
  display: grid;
  min-width: 0;
  padding: 15px;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  border-right: 1px solid var(--ui-border);
  border-bottom: 1px solid var(--ui-border);
}

.admin-monitor-grid article:nth-child(3n) {
  border-right: 0;
}

.admin-monitor-grid article:nth-last-child(-n + 3) {
  border-bottom: 0;
}

.admin-monitor-grid article > span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 11px;
  background: rgba(52, 197, 187, 0.09);
  color: #55d5cc;
}

.admin-monitor-grid article > span svg {
  width: 18px;
  height: 18px;
}

.admin-monitor-grid article > div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.admin-monitor-grid small,
.admin-monitor-grid p {
  margin: 0;
  color: var(--ui-text-muted);
  font-size: 9px;
  line-height: 1.35;
}

.admin-monitor-grid strong {
  color: var(--theme-text);
  font-size: 12px;
}

.admin-monitor-alerts {
  display: grid;
  margin-top: 10px;
  gap: 6px;
}

.admin-monitor-alerts p {
  display: flex;
  margin: 0;
  padding: 9px 11px;
  align-items: center;
  gap: 8px;
  border-radius: 12px;
  color: #e9bd64;
  background: rgba(215, 164, 64, 0.08);
  font-size: 10px;
}

.admin-monitor-alerts svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.admin-publication-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-publication-actions .status-badge {
  margin-right: auto;
}

.admin-publication-actions .btn {
  min-height: 38px;
  padding: 0 14px;
  border-radius: 13px;
}

html[data-theme='light'] .admin-publication-card {
  background: rgba(255, 252, 246, 0.58);
}

html[data-theme='light'] .admin-channel-field input,
html[data-theme='light'] .admin-channel-field textarea {
  background: rgba(255, 252, 246, 0.76);
}

@media (max-width: 767px) {
  .admin-command-center {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-command-center .admin-system-card {
    min-height: 76px;
  }

  .admin-publication-actions .btn {
    flex: 1 1 auto;
  }

  .admin-monitor-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-monitor-grid article,
  .admin-monitor-grid article:nth-child(3n),
  .admin-monitor-grid article:nth-last-child(-n + 3) {
    border-right: 0;
    border-bottom: 1px solid var(--ui-border);
  }

  .admin-monitor-grid article:last-child {
    border-bottom: 0;
  }
}

/* Sport sub-sections use actions that belong to the current job. Training is
   intentionally a short path: act now, scan the week, then open history only
   when it is needed. */
.mn-sport-quick-actions.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mn-sport-quick-actions.two .btn {
  min-height: 50px;
  gap: 7px;
  font-size: 13px;
}

.mn-sport-training-day .mn-sport-section-title,
.mn-sport-plan-journal .mn-sport-section-title {
  display: flex !important;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.mn-sport-training-day .mn-sport-section-title > div,
.mn-sport-plan-journal .mn-sport-section-title > div {
  min-width: 0;
}

.mn-sport-plan-journal .mn-sport-section-title .btn {
  flex: 0 0 auto;
}

.mn-sport-training-day .mn-sport-list {
  margin-top: 13px;
}

.mn-sport-plan-journal .mn-sport-week-trace {
  margin-top: 16px;
}

.mn-sport-history-disclosure {
  padding: 0 !important;
  overflow: hidden;
}

.mn-sport-history-disclosure > summary {
  display: grid;
  min-height: 62px;
  padding: 12px 15px;
  grid-template-columns: minmax(0, 1fr) 32px 14px;
  gap: 9px;
  align-items: center;
  cursor: pointer;
  list-style: none;
}

.mn-sport-history-disclosure > summary::-webkit-details-marker {
  display: none;
}

.mn-sport-history-disclosure > summary > strong {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1;
}

.mn-sport-history-disclosure > summary .mn-open-tail {
  transition: transform 180ms ease;
}

.mn-sport-history-disclosure[open] > summary .mn-open-tail {
  transform: rotate(90deg);
}

.mn-sport-history-disclosure > .mn-sport-list {
  padding: 0 12px 12px;
}

@media (prefers-reduced-motion: reduce) {
  .mn-sport-history-disclosure > summary .mn-open-tail {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   Unified interaction grammar

   Historical screens keep their domain classes, but sheets, rows, choices,
   fields and action areas resolve to one geometry here. This is the final
   cascade layer and the source of truth for repeated interaction surfaces.
   -------------------------------------------------------------------------- */

:root {
  --ui-space-1: 4px;
  --ui-space-2: 8px;
  --ui-space-3: 12px;
  --ui-space-4: 16px;
  --ui-space-5: 20px;
  --ui-space-6: 24px;
  --ui-control-height: 44px;
  --ui-field-height: 52px;
  --ui-icon-size: 40px;
  --ui-radius-control: 14px;
  --ui-radius-row: 17px;
  --ui-radius-sheet: 24px;
  --ui-sheet-gutter: 16px;
  --ui-row-gap: 10px;
  --ui-surface-inset: rgba(241, 228, 205, 0.035);
  --ui-surface-choice: rgba(52, 197, 187, 0.075);
  --ui-border: rgba(241, 228, 205, 0.11);
  --ui-border-accent: rgba(52, 197, 187, 0.24);
  --ui-text-muted: rgba(241, 228, 205, 0.58);
}

html[data-theme='light'] {
  --ui-surface-inset: rgba(255, 252, 246, 0.58);
  --ui-surface-choice: rgba(20, 144, 137, 0.07);
  --ui-border: rgba(24, 54, 50, 0.13);
  --ui-border-accent: rgba(20, 144, 137, 0.22);
  --ui-text-muted: rgba(24, 35, 33, 0.62);
}

/* Sheets: the same head/body/actions rhythm in every section. */
#modal-root > .modal-backdrop {
  padding: max(10px, env(safe-area-inset-top)) 10px calc(var(--dock-clearance) + var(--ui-space-2)) !important;
}

#modal-root > .modal-backdrop .modal-sheet {
  width: min(520px, 100%) !important;
  max-height: calc(100dvh - var(--dock-clearance) - max(20px, env(safe-area-inset-top))) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-sheet) !important;
}

.modal-sheet::before {
  top: 8px !important;
  width: 42px !important;
  height: 3px !important;
}

.modal-head {
  padding: var(--ui-space-6) var(--ui-sheet-gutter) var(--ui-space-3) !important;
  grid-template-columns: minmax(0, 1fr) var(--ui-control-height) !important;
  gap: var(--ui-space-3) !important;
  border: 0 !important;
  background: transparent !important;
}

.modal-head .eyebrow,
.voice-panel-head .eyebrow {
  margin: 0 0 var(--ui-space-1) !important;
  font-size: 10px !important;
  line-height: 1.2 !important;
  letter-spacing: 0.13em !important;
}

.modal-head h2,
.voice-panel-head h2 {
  margin: 0 !important;
  font-size: clamp(25px, 6.5vw, 34px) !important;
  line-height: 0.98 !important;
  letter-spacing: -0.05em !important;
}

.modal-head .icon-button,
.voice-panel-head .icon-button {
  width: var(--ui-control-height) !important;
  min-width: var(--ui-control-height) !important;
  height: var(--ui-control-height) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-control) !important;
  background: var(--ui-surface-inset) !important;
  box-shadow: none !important;
}

.modal-body {
  padding: var(--ui-space-1) var(--ui-sheet-gutter) var(--ui-space-4) !important;
  gap: var(--ui-space-3) !important;
  scrollbar-gutter: stable;
}

.modal-actions,
html[data-theme='light'] .modal-actions {
  padding: var(--ui-space-2) var(--ui-sheet-gutter)
    calc(var(--ui-space-4) + env(safe-area-inset-bottom)) !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: var(--ui-space-2) !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.modal-actions .btn,
.voice-result-actions .btn,
.notification-actions .btn {
  min-height: var(--ui-control-height) !important;
  padding: 0 var(--ui-space-3) !important;
  border-radius: var(--ui-radius-control) !important;
  font-size: 12px !important;
  line-height: 1.15 !important;
  box-shadow: none !important;
}

.modal-actions .btn.full,
.modal-actions:has(> :only-child) > *,
.modal-actions > :only-child {
  grid-column: 1 / -1 !important;
}

/* Fields: labels, inputs and optional disclosure blocks no longer change
   their density between plan, finance, sport and memory. */
.modal-body .field,
.modal-body .field-grid {
  gap: var(--ui-space-2) !important;
}

.modal-body .field > span,
.modal-body fieldset > legend {
  color: var(--ui-text-muted) !important;
  font-size: 11px !important;
  font-weight: 760 !important;
  line-height: 1.25 !important;
  letter-spacing: 0.01em !important;
}

.modal-body .field input,
.modal-body .field select,
.modal-body .field textarea {
  width: 100% !important;
  min-height: var(--ui-field-height) !important;
  padding: 0 var(--ui-space-4) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-row) !important;
  background: var(--ui-surface-inset) !important;
  box-shadow: none !important;
}

.modal-body .field textarea {
  min-height: 116px !important;
  padding-block: var(--ui-space-3) !important;
}

.modal-body .field input:focus,
.modal-body .field select:focus,
.modal-body .field textarea:focus {
  border-color: var(--ui-border-accent) !important;
  box-shadow: 0 0 0 3px rgba(52, 197, 187, 0.08) !important;
}

:where(.routine-extra-settings, .routine-planning-settings, .routine-saved-list, .task-advanced) {
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-row) !important;
  background: var(--ui-surface-inset) !important;
  box-shadow: none !important;
}

:where(.routine-extra-settings, .routine-planning-settings, .routine-saved-list, .task-advanced)
  > summary {
  min-height: var(--ui-field-height) !important;
  padding: 0 42px 0 var(--ui-space-4) !important;
  align-content: center !important;
}

/* Entity rows: one border, one radius, one inset and one content rhythm. */
:where(
  .notification-item,
  .routine-day-entry,
  .routine-day-empty,
  .routine-row,
  .routine-feed-row,
  .sport-entry-editable
) {
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-row) !important;
  background: var(--ui-surface-inset) !important;
  box-shadow: none !important;
}

:where(.routine-day-entry, .routine-day-empty, .routine-row, .routine-feed-row) {
  min-height: 64px !important;
  padding: var(--ui-space-3) !important;
  gap: var(--ui-row-gap) !important;
}

/* Choice cards: photo source and form choices share the same material. */
:where(.photo-source-grid, .category-choice-grid) {
  gap: var(--ui-space-2) !important;
}

:where(.photo-source-grid > button, .category-choice span) {
  border: 1px solid var(--ui-border-accent) !important;
  border-radius: var(--ui-radius-row) !important;
  background: var(--ui-surface-choice) !important;
  box-shadow: none !important;
}

.photo-source-grid > button {
  min-height: 132px !important;
  padding: var(--ui-space-4) var(--ui-space-2) !important;
  gap: var(--ui-space-2) !important;
}

.photo-source-grid > button > span {
  width: 44px !important;
  height: 44px !important;
  border-radius: var(--ui-radius-control) !important;
  background: rgba(52, 197, 187, 0.13) !important;
  box-shadow: none !important;
}

.photo-source-grid > button strong {
  font-size: 13px !important;
  line-height: 1.2 !important;
}

.photo-source-grid > button small {
  color: var(--ui-text-muted) !important;
  font-size: 10px !important;
  line-height: 1.3 !important;
}

/* Compact quick-input sheets use the same shell rhythm as regular modals. */
.voice-root:not(.camera-live):not(.camera-review):not(.camera-upgrade) .voice-panel {
  width: min(520px, calc(100vw - 20px)) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-sheet) !important;
}

.voice-root:not(.camera-live):not(.camera-review):not(.camera-upgrade) .voice-panel-body {
  padding: var(--ui-space-6) var(--ui-sheet-gutter) var(--ui-space-4) !important;
}

.voice-panel-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) var(--ui-control-height) !important;
  align-items: start !important;
  gap: var(--ui-space-3) !important;
}

.voice-result-actions {
  display: grid !important;
  width: 100% !important;
  margin-top: var(--ui-space-3) !important;
  padding-top: var(--ui-space-2) !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: var(--ui-space-2) !important;
  border-top: 1px solid var(--ui-border) !important;
}

/* Notification center is a list of the same entity rows, followed by the
   same 2+1 action grammar used elsewhere. */
.modal-sheet.notification-sheet {
  width: min(440px, 100%) !important;
  max-height: calc(100dvh - var(--dock-clearance) - max(20px, env(safe-area-inset-top))) !important;
}

.notification-sheet .modal-head {
  padding: var(--ui-space-6) var(--ui-sheet-gutter) var(--ui-space-3) !important;
}

.notification-sheet .modal-body {
  padding: 0 var(--ui-space-3) var(--ui-space-3) !important;
  gap: var(--ui-space-3) !important;
}

.notification-intro,
.notification-sheet .notification-intro {
  margin: 0 !important;
  padding: 0 var(--ui-space-1) var(--ui-space-2) !important;
  gap: var(--ui-space-1) !important;
  border: 0 !important;
  background: transparent !important;
}

.notification-intro strong {
  color: var(--theme-text) !important;
  font-size: 18px !important;
  line-height: 1.2 !important;
}

.notification-intro span {
  color: var(--ui-text-muted) !important;
  font-size: 11px !important;
  line-height: 1.4 !important;
}

.notification-list,
.notification-sheet .notification-list {
  gap: var(--ui-space-2) !important;
}

.notification-sheet .notification-item {
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-row) !important;
  background: var(--ui-surface-inset) !important;
  box-shadow: none !important;
}

.notification-item::before {
  inset: var(--ui-space-3) auto var(--ui-space-3) 0 !important;
  width: 3px !important;
  box-shadow: none !important;
}

.notification-item .notification-open,
.notification-sheet .notification-item .notification-open {
  min-height: 72px !important;
  padding: var(--ui-space-3) !important;
  grid-template-columns: var(--ui-icon-size) minmax(0, 1fr) 16px !important;
  gap: var(--ui-row-gap) !important;
}

.notification-kind {
  width: var(--ui-icon-size) !important;
  height: var(--ui-icon-size) !important;
  border-radius: var(--ui-radius-control) !important;
  box-shadow: none !important;
}

.notification-item .item-main {
  display: grid !important;
  min-width: 0 !important;
  gap: 3px !important;
}

.notification-item .notification-meta {
  margin: 0 !important;
  font-size: 9px !important;
  line-height: 1.2 !important;
}

.notification-item .item-main strong {
  font-size: 14px !important;
  line-height: 1.25 !important;
}

.notification-item .item-main small {
  color: var(--ui-text-muted) !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
}

.notification-item.actionable .notification-actions,
.notification-item.recommendation .notification-actions {
  display: grid !important;
  padding: 0 var(--ui-space-3) var(--ui-space-3) !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: var(--ui-space-2) !important;
}

.notification-item.actionable .notification-actions .btn:last-child:nth-child(3) {
  grid-column: 1 / -1 !important;
}

.notification-sheet .modal-actions {
  padding: var(--ui-space-2) var(--ui-space-3) calc(var(--ui-space-3) + env(safe-area-inset-bottom)) !important;
}

@media (max-width: 430px) {
  :root {
    --ui-sheet-gutter: 14px;
  }

  .modal-head h2,
  .voice-panel-head h2 {
    font-size: clamp(24px, 7.1vw, 30px) !important;
  }

  .field-grid.two {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .modal-actions .btn,
  .voice-result-actions .btn,
  .notification-actions .btn {
    min-height: var(--ui-control-height) !important;
  }
}

/* Вложенные окна: виден только спокойный край предыдущего уровня. */
#modal-root > .modal-backdrop {
  transition:
    background-color 180ms ease,
    backdrop-filter 180ms ease;
}

#modal-root > .modal-backdrop .modal-sheet {
  transition:
    transform 180ms ease,
    filter 180ms ease,
    opacity 180ms ease,
    box-shadow 180ms ease;
}

#modal-root > .modal-backdrop.modal-underlay {
  background: transparent !important;
  backdrop-filter: none !important;
  pointer-events: none !important;
}

#modal-root > .modal-backdrop.modal-underlay .modal-sheet {
  opacity: calc(0.98 - var(--modal-stack-depth, 1) * 0.08);
  outline: 1px solid rgba(88, 218, 207, 0.16);
  filter: brightness(calc(0.9 - var(--modal-stack-depth, 1) * 0.05)) saturate(0.76);
  transform: translateY(calc(var(--modal-stack-depth, 1) * -14px))
    scale(calc(1 - var(--modal-stack-depth, 1) * 0.014));
  transform-origin: 50% 100%;
  box-shadow:
    0 -1px 0 rgba(88, 218, 207, 0.2),
    0 18px 52px rgba(0, 0, 0, 0.44) !important;
}

#modal-root > .modal-backdrop.modal-stacked {
  background: rgba(2, 5, 6, 0.34) !important;
  backdrop-filter: blur(3px) saturate(0.82) !important;
}

#modal-root > .modal-backdrop.modal-stacked .modal-sheet {
  box-shadow:
    0 -12px 0 -5px rgba(20, 35, 35, 0.94),
    0 -23px 0 -11px rgba(15, 28, 29, 0.78),
    0 30px 90px rgba(0, 0, 0, 0.58),
    0 -1px 0 rgba(88, 218, 207, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.055) !important;
}

html[data-theme='light'] #modal-root > .modal-backdrop.modal-stacked {
  background: rgba(18, 39, 37, 0.18) !important;
  backdrop-filter: blur(3px) saturate(0.76) !important;
}

html[data-theme='light'] #modal-root > .modal-backdrop.modal-underlay .modal-sheet {
  outline-color: rgba(13, 105, 100, 0.2);
  filter: brightness(calc(0.99 - var(--modal-stack-depth, 1) * 0.025)) saturate(0.86);
  box-shadow:
    0 -1px 0 rgba(13, 105, 100, 0.22),
    0 18px 46px rgba(24, 54, 50, 0.22) !important;
}

html[data-theme='light'] #modal-root > .modal-backdrop.modal-stacked .modal-sheet {
  box-shadow:
    0 -12px 0 -5px rgba(225, 231, 221, 0.96),
    0 -23px 0 -11px rgba(196, 211, 202, 0.78),
    0 30px 82px rgba(24, 54, 50, 0.24),
    0 -1px 0 rgba(13, 105, 100, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.45) !important;
}

@media (prefers-reduced-motion: reduce) {
  #modal-root > .modal-backdrop,
  #modal-root > .modal-backdrop .modal-sheet {
    transition: none !important;
  }
}

.quick-text-form textarea {
  min-height: 124px;
}

.mn-sport-meal-journal > header strong {
  white-space: normal;
  line-height: 1.15;
}

.mn-sport-meal-journal .mn-meal-timeline-row {
  grid-template-columns: 48px minmax(0, 1fr) auto 14px;
  gap: 9px;
}

.mn-meal-time {
  align-self: start;
  padding-top: 2px;
  color: #55d5cc;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.mn-meal-timeline-row .item-main strong {
  white-space: normal;
  line-height: 1.3;
}

html[data-theme='light'] .mn-meal-time {
  color: #0d756f;
}

@media (max-width: 380px) {
  .mobile-header-actions {
    gap: 4px !important;
  }

  .header-notification-button {
    width: 40px !important;
    min-width: 40px !important;
  }

  .mn-sport-meal-journal .mn-meal-timeline-row {
    grid-template-columns: 43px minmax(0, 1fr) 14px;
  }

  .mn-meal-timeline-row .mn-sport-value {
    display: none;
  }
}

/* «Моя неделя» читается как мобильная повестка, а не как панель внутренних
   параметров планировщика. Технические настройки и список источников остаются
   доступны, но не заслоняют само расписание. */
.routine-overview-modal .modal-head h2,
.routine-editor-modal .modal-head h2 {
  max-width: 360px;
  font-size: clamp(26px, 6.2vw, 34px) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.045em !important;
}

.routine-overview-modal .modal-body,
.routine-editor-modal .modal-body {
  gap: 12px !important;
}

.routine-overview-modal .routine-settings-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end !important;
}

.routine-overview-modal .routine-week-overview {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 7px !important;
}

.routine-overview-modal .routine-week-day {
  display: grid !important;
  min-height: 54px !important;
  padding: 10px 12px !important;
  grid-template-columns: 54px minmax(0, 1fr) 16px;
  align-items: center;
  align-content: center !important;
  gap: 10px !important;
  border-radius: 16px !important;
}

.routine-overview-modal .routine-week-day {
  width: 100%;
  appearance: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.routine-day-chevron,
.routine-disclosure {
  display: block;
  width: 9px;
  height: 9px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  color: var(--mneme-teal-bright);
  transform: rotate(45deg);
  transition: transform 160ms ease;
}

.routine-day-chevron {
  grid-column: 3;
  grid-row: 1;
  align-self: center;
  justify-self: end;
  opacity: 0.72;
}

.routine-overview-modal .routine-week-day > strong {
  align-self: start;
  font-size: 13px;
}

.routine-overview-modal .routine-week-day > div {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.routine-overview-modal .routine-week-entry,
.routine-overview-modal .routine-week-free {
  display: block !important;
  overflow: visible !important;
  white-space: normal !important;
  text-overflow: clip !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
}

.routine-overview-modal .routine-week-entry b {
  display: inline-block;
  min-width: 42px;
}

.routine-overview-modal .routine-week-day mark {
  grid-column: 2;
}

.routine-overview-modal .routine-week-day:focus-visible {
  outline: 2px solid rgba(72, 224, 211, 0.7);
  outline-offset: 2px;
}

.routine-overview-modal .routine-import-actions {
  grid-template-columns: 1fr !important;
}

.routine-overview-modal .routine-import-actions > .btn {
  width: 100%;
  min-height: 46px;
  justify-content: flex-start;
  text-align: left;
}

.routine-overview-modal .routine-import-actions > div {
  grid-column: 1 !important;
}

.routine-planning-settings,
.routine-saved-list {
  overflow: hidden;
  border: 1px solid rgba(163, 193, 181, 0.14);
  border-radius: 17px;
  background: rgba(7, 16, 18, 0.32);
}

.routine-planning-settings > summary,
.routine-saved-list > summary {
  display: grid;
  padding: 13px 14px;
  grid-template-columns: minmax(0, 1fr) auto 16px;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  list-style: none;
  color: var(--mneme-paper);
  font-weight: 780;
}

.routine-planning-settings[open] .routine-disclosure,
.routine-saved-list[open] .routine-disclosure {
  transform: rotate(135deg);
}

.routine-planning-settings > summary::-webkit-details-marker,
.routine-saved-list > summary::-webkit-details-marker {
  display: none;
}

.routine-planning-settings > summary small,
.routine-saved-list > summary small {
  color: var(--mneme-teal-bright);
  font-size: 11px;
}

.routine-planning-settings[open] > summary,
.routine-saved-list[open] > summary {
  border-bottom: 1px solid rgba(163, 193, 181, 0.1);
}

.routine-planning-settings > :not(summary),
.routine-saved-list > :not(summary) {
  margin: 12px 14px 14px;
}

.routine-planning-settings > .field-grid,
.routine-planning-settings > .task-notify-toggle {
  margin-top: 12px;
}

.routine-cycle-weeks[hidden],
.routine-cycle-weeks label[hidden],
.routine-cycle-anchor[hidden] {
  display: none !important;
}

.routine-editor-modal .routine-extra-settings > summary {
  font-size: 13px;
}

.routine-editor-modal .modal-actions .btn.full {
  width: 100%;
}

.routine-day-editor,
.routine-day-editor-list {
  display: grid;
  gap: 10px;
}

.routine-day-editor > p {
  margin: 0;
  line-height: 1.5;
}

.routine-day-entry,
.routine-day-empty {
  display: grid;
  width: 100%;
  min-height: 62px;
  padding: 11px 12px;
  grid-template-columns: 46px minmax(0, 1fr) 14px;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(52, 197, 187, 0.2);
  border-radius: 17px;
  background: rgba(20, 72, 70, 0.15);
  color: var(--mneme-paper);
  text-align: left;
}

.routine-day-empty {
  grid-template-columns: minmax(0, 1fr) 14px;
}

.routine-day-entry-time {
  color: var(--mneme-teal-bright);
  font-size: 12px;
  font-weight: 820;
}

.routine-day-entry .item-main small,
.routine-day-empty .item-main small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.35;
}

html[data-theme='light'] :where(.routine-day-entry, .routine-day-empty) {
  border-color: rgba(13, 105, 100, 0.18);
  background: rgba(20, 144, 137, 0.07);
  color: var(--theme-text);
}

html[data-theme='light'] .routine-planning-settings,
html[data-theme='light'] .routine-saved-list {
  border-color: rgba(24, 54, 50, 0.11);
  background: rgba(255, 252, 246, 0.55);
}

html[data-theme='light'] .routine-planning-settings > summary,
html[data-theme='light'] .routine-saved-list > summary {
  color: var(--theme-text);
}

@media (max-width: 430px) {
  .routine-overview-modal .routine-settings-head {
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
  }

  .routine-overview-modal .routine-settings-head > .btn {
    width: 100%;
    min-height: 44px;
    justify-content: center;
  }

  .routine-overview-modal .modal-actions,
  .routine-editor-modal .modal-actions {
    padding-bottom: calc(14px + env(safe-area-inset-bottom)) !important;
  }
}

/* --------------------------------------------------------------------------
   Primary section covers — one structure for Money, Notes and Sport

   A cover identifies the section; changing data lives in the next content
   block. This keeps all three main sections familiar without removing their
   semantic colour or illustration.
   -------------------------------------------------------------------------- */

:is(.finance-cover-note, .notes-cover-note, .mn-sport-cover:not(.mn-sport-welcome)) {
  position: relative !important;
  display: grid !important;
  min-height: 176px !important;
  padding: 20px 18px !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-content: start !important;
  gap: 8px !important;
  overflow: hidden !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 24px !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.2) !important;
}

:is(.finance-cover-note, .notes-cover-note)::before,
.mn-sport-cover:not(.mn-sport-welcome) .mn-hanging-ribbon {
  position: absolute !important;
  top: 0 !important;
  right: 12px !important;
  width: 34px !important;
  height: 80px !important;
  opacity: 0.9 !important;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 76%, 0 100%) !important;
}

:is(
  .finance-cover-copy,
  .notes-cover-copy,
  .mn-sport-cover:not(.mn-sport-welcome) .mn-sport-cover-copy
) {
  position: relative !important;
  z-index: 2 !important;
  display: grid !important;
  max-width: calc(100% - 112px) !important;
  padding: 0 !important;
  gap: 6px !important;
}

:is(.finance-eyebrow, .notes-eyebrow, .mn-sport-cover:not(.mn-sport-welcome) .mn-eyebrow) {
  font-size: 11px !important;
  font-weight: 820 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
}

:is(
    .finance-cover-copy,
    .notes-cover-copy,
    .mn-sport-cover:not(.mn-sport-welcome) .mn-sport-cover-copy
  )
  h1 {
  max-width: none !important;
  margin: 0 !important;
  font-size: clamp(36px, 9vw, 48px) !important;
  line-height: 0.95 !important;
  letter-spacing: -0.075em !important;
}

:is(.notes-cover-copy, .mn-sport-cover:not(.mn-sport-welcome) .mn-sport-cover-copy) p {
  display: -webkit-box !important;
  max-width: 30ch !important;
  margin: 0 !important;
  overflow: hidden !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

:is(
  .finance-cover-asset,
  .notes-cover-asset,
  .mn-sport-cover:not(.mn-sport-welcome) .mn-sport-cover-asset
) {
  position: absolute !important;
  top: auto !important;
  right: 54px !important;
  bottom: 12px !important;
  z-index: 1 !important;
  max-width: none !important;
  opacity: 1 !important;
  pointer-events: none !important;
}

html body .finance-cover-asset {
  width: 112px !important;
  transform: rotate(-3deg) !important;
}

html body .notes-cover-asset {
  width: 82px !important;
  transform: rotate(2deg) !important;
}

.mn-sport-cover:not(.mn-sport-welcome) .mn-sport-cover-asset {
  width: 112px !important;
  transform: rotate(-3deg) !important;
}

.finance-summary {
  display: grid;
  gap: 8px;
}

.finance-summary > .finance-balance-slip {
  width: 100% !important;
  min-height: 76px !important;
  padding: 13px 16px !important;
  align-content: center !important;
  justify-items: center !important;
  gap: 0 !important;
  border-radius: 21px !important;
  text-align: center !important;
}

.finance-summary > .finance-balance-slip > small:first-child {
  color: var(--ui-text-muted) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

.finance-summary > .finance-balance-slip > span:last-child {
  font-size: 11px !important;
  line-height: 1.35 !important;
}

.finance-summary > .finance-balance-slip > strong {
  font-size: clamp(30px, 9vw, 40px) !important;
  line-height: 1 !important;
}

/* На главных экранах остаются названия и действия, без декоративных рубрик. */
:is(.finance-cover-note, .notes-cover-note) {
  min-height: 142px !important;
}

:is(.finance-cover-note, .notes-cover-note) .mn-section-cover-copy {
  align-self: center;
}

.mn-sport-quick-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.mn-sport-quick-actions .btn {
  min-width: 0;
  min-height: 46px;
  padding-inline: 8px;
  border-radius: 15px;
  box-shadow: none;
}

.notes-list-controls {
  min-height: 34px;
  justify-content: flex-end !important;
  padding-inline: 2px;
}

.notes-list-controls .notes-limit-hint:empty {
  display: none;
}

.notes-list-controls .mn-count {
  margin-left: auto;
}

@media (max-width: 380px) {
  .mn-sport-quick-actions {
    gap: 6px;
  }

  .mn-sport-quick-actions .btn {
    font-size: 11px !important;
  }
}

.notes-count-slip {
  display: none !important;
}

@media (max-width: 420px) {
  :is(.finance-cover-note, .notes-cover-note, .mn-sport-cover:not(.mn-sport-welcome)) {
    min-height: 154px !important;
    padding: 16px 14px !important;
  }

  :is(
    .finance-cover-copy,
    .notes-cover-copy,
    .mn-sport-cover:not(.mn-sport-welcome) .mn-sport-cover-copy
  ) {
    max-width: calc(100% - 104px) !important;
  }

  :is(
      .finance-cover-copy,
      .notes-cover-copy,
      .mn-sport-cover:not(.mn-sport-welcome) .mn-sport-cover-copy
    )
    h1 {
    font-size: clamp(34px, 9vw, 42px) !important;
  }

  html body .finance-cover-asset,
  .mn-sport-cover:not(.mn-sport-welcome) .mn-sport-cover-asset {
    right: 48px !important;
    bottom: 8px !important;
    width: 104px !important;
  }

  html body .notes-cover-asset {
    right: 52px !important;
    bottom: 10px !important;
    width: 76px !important;
  }
}

/* --------------------------------------------------------------------------
   Canonical controls — final cascade boundary

   This block intentionally stays last. Domain screens may choose a semantic
   accent, label or icon, but they must not redefine the geometry of a field,
   action, compact choice or boolean control.
   -------------------------------------------------------------------------- */

:is(.field-grid) {
  gap: var(--ui-space-3) !important;
}

:is(.field) {
  display: grid !important;
  min-width: 0 !important;
  gap: var(--ui-space-2) !important;
}

:is(.field > span, .field-label, fieldset > legend) {
  color: var(--ui-text-muted) !important;
  font-size: 11px !important;
  font-weight: 760 !important;
  line-height: 1.25 !important;
}

:is(.field input:not([type='checkbox']):not([type='radio']), .field select, .field textarea) {
  width: 100% !important;
  min-height: var(--ui-field-height) !important;
  padding-inline: var(--ui-space-4) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-row) !important;
  background: var(--ui-surface-inset) !important;
  color: var(--theme-text) !important;
  box-shadow: none !important;
}

:is(.field textarea) {
  min-height: 116px !important;
  padding-block: var(--ui-space-3) !important;
}

:is(
  .field input:not([type='checkbox']):not([type='radio']):focus,
  .field select:focus,
  .field textarea:focus
) {
  border-color: var(--ui-border-accent) !important;
  outline: 0 !important;
  box-shadow: 0 0 0 3px rgba(52, 197, 187, 0.08) !important;
}

:is(.field small, .field-hint) {
  color: var(--ui-text-muted) !important;
  font-size: 11px !important;
  line-height: 1.4 !important;
}

:is(.btn) {
  min-height: var(--ui-control-height) !important;
  padding-inline: var(--ui-space-3) !important;
  border-radius: var(--ui-radius-control) !important;
  font-size: 12px !important;
  line-height: 1.15 !important;
  box-shadow: none !important;
}

:is(.icon-button) {
  width: var(--ui-control-height) !important;
  min-width: var(--ui-control-height) !important;
  height: var(--ui-control-height) !important;
  border-radius: var(--ui-radius-control) !important;
}

/* Compact alternatives are one component across tasks, money, rhythm and
   sport. Semantic colours may differ only after selection. */
:is(
  .task-priority-grid,
  .category-choice-grid,
  .routine-weekdays > div,
  .sport-day-picker,
  .sport-activity-picker
) {
  gap: var(--ui-space-2) !important;
}

:is(
    .task-priority-grid,
    .category-choice-grid,
    .routine-weekdays > div,
    .sport-day-picker,
    .sport-activity-picker
  )
  label {
  position: relative !important;
  min-width: 0 !important;
}

:is(
    .task-priority-grid,
    .category-choice-grid,
    .routine-weekdays > div,
    .sport-day-picker,
    .sport-activity-picker
  )
  input {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  opacity: 0 !important;
  cursor: pointer !important;
}

:is(
    .task-priority-grid,
    .category-choice-grid,
    .routine-weekdays > div,
    .sport-day-picker,
    .sport-activity-picker
  )
  label
  > span {
  display: grid !important;
  min-height: var(--ui-control-height) !important;
  padding: var(--ui-space-2) !important;
  place-items: center !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-control) !important;
  background: var(--ui-surface-inset) !important;
  color: var(--ui-text-muted) !important;
  font-size: 12px !important;
  font-weight: 760 !important;
  line-height: 1.2 !important;
  text-align: center !important;
  box-shadow: none !important;
  cursor: pointer !important;
}

:is(
    .task-priority-grid,
    .category-choice-grid,
    .routine-weekdays > div,
    .sport-day-picker,
    .sport-activity-picker
  )
  input:checked
  + span {
  border-color: rgba(52, 197, 187, 0.48) !important;
  background: rgba(52, 197, 187, 0.14) !important;
  color: var(--mneme-teal-bright) !important;
  box-shadow: inset 0 0 0 1px rgba(52, 197, 187, 0.08) !important;
}

:is(
    .task-priority-grid,
    .category-choice-grid,
    .routine-weekdays > div,
    .sport-day-picker,
    .sport-activity-picker
  )
  input:focus-visible
  + span {
  outline: 2px solid var(--mneme-teal-bright) !important;
  outline-offset: 2px !important;
}

:where(
    .task-priority-grid,
    .category-choice-grid,
    .routine-weekdays > div,
    .sport-day-picker,
    .sport-activity-picker
  )
  input:disabled
  + span {
  opacity: 0.42 !important;
  cursor: default !important;
}

.task-priority-grid label:last-child input:checked + span {
  border-color: rgba(226, 184, 110, 0.45) !important;
  background: var(--amber-soft) !important;
  color: var(--amber) !important;
}

.transaction-form.income .category-choice input:checked + span {
  border-color: rgba(105, 198, 112, 0.5) !important;
  background: rgba(105, 198, 112, 0.14) !important;
  color: var(--green) !important;
}

.transaction-form.expense .category-choice input:checked + span {
  border-color: rgba(230, 108, 92, 0.5) !important;
  background: rgba(230, 108, 92, 0.14) !important;
  color: var(--red) !important;
}

/* A checkbox with explanatory copy always uses the same row and check tile.
   Immediate settings keep the separate switch component (`.mn-toggle`). */
:is(.task-notify-toggle, .check-line) {
  display: grid !important;
  min-width: 0 !important;
  min-height: 64px !important;
  padding: var(--ui-space-3) !important;
  grid-template-columns: 38px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: var(--ui-space-3) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-row) !important;
  background: var(--ui-surface-inset) !important;
  color: var(--theme-text) !important;
  box-shadow: none !important;
  cursor: pointer !important;
}

:is(.task-notify-toggle, .check-line):has(input:checked) {
  border-color: rgba(105, 198, 112, 0.34) !important;
  background: rgba(105, 198, 112, 0.09) !important;
}

:is(.task-notify-box, .rhythm-check, .onboarding-consent-control, .check-line > input) {
  display: grid !important;
  width: 38px !important;
  min-width: 38px !important;
  height: 38px !important;
  margin: 0 !important;
  place-items: center !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-control) !important;
  background-color: var(--ui-surface-inset) !important;
  color: transparent !important;
  box-shadow: none !important;
}

.check-line > input {
  position: relative !important;
  appearance: none !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 20px !important;
}

.check-line > input:checked {
  border-color: var(--green) !important;
  background-color: var(--green) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 4 4L19 6'/%3E%3C/svg%3E") !important;
}

:is(
  .task-notify-toggle input:checked + .task-notify-box,
  .rhythm-toggle input:checked + .rhythm-check,
  .onboarding-consent input:checked + .onboarding-consent-control
) {
  border-color: var(--green) !important;
  background: var(--green) !important;
  color: #fff !important;
}

:is(.task-notify-box, .rhythm-check, .onboarding-consent-control) svg {
  width: 20px !important;
  height: 20px !important;
  opacity: 0 !important;
  transform: scale(0.7) !important;
}

:is(
    .task-notify-toggle input:checked + .task-notify-box,
    .rhythm-toggle input:checked + .rhythm-check,
    .onboarding-consent input:checked + .onboarding-consent-control
  )
  svg {
  opacity: 1 !important;
  transform: scale(1) !important;
}

:is(.task-notify-toggle, .check-line):focus-within {
  outline: 2px solid rgba(52, 197, 187, 0.45) !important;
  outline-offset: 2px !important;
}

:is(.task-notify-toggle, .check-line) strong,
:is(.task-notify-toggle, .check-line) > span:last-child {
  font-size: 13px !important;
  font-weight: 760 !important;
  line-height: 1.3 !important;
}

:is(.task-notify-toggle, .check-line) small {
  display: block !important;
  margin-top: var(--ui-space-1) !important;
  color: var(--ui-text-muted) !important;
  font-size: 10px !important;
  line-height: 1.35 !important;
}

:is(.sport-form-section) {
  padding: var(--ui-space-4) !important;
  gap: var(--ui-space-3) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-row) !important;
  background: var(--ui-surface-inset) !important;
  box-shadow: none !important;
}

@media (max-width: 430px) {
  :is(.field-grid.two) {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* --------------------------------------------------------------------------
   Asset-free section covers — one real component

   Money, Notes and Sport now follow the same structure as the plan hero:
   eyebrow, title, explanation, bookmark and useful actions. Decorative raster
   objects are deliberately excluded so the cover never reserves a mismatched
   empty corner or depends on an illustration crop.
   -------------------------------------------------------------------------- */

:is(.mn-section-cover) {
  position: relative !important;
  display: grid !important;
  min-height: 184px !important;
  padding: 17px 16px 16px !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-content: start !important;
  gap: 13px !important;
  overflow: hidden !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 24px !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.2) !important;
}

:is(.mn-section-cover)::before {
  display: none !important;
  content: none !important;
}

:is(.mn-section-cover) > .mn-hanging-ribbon {
  position: absolute !important;
  top: -1px !important;
  right: 15px !important;
  width: 34px !important;
  height: 64px !important;
  opacity: 0.92 !important;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 76%, 0 100%) !important;
}

:is(.mn-section-cover) > .mn-hanging-ribbon.memory,
:is(.mn-section-cover) > .mn-hanging-ribbon.sport {
  background: linear-gradient(180deg, #b993d7 0%, #7d5aa5 100%) !important;
}

:is(.mn-section-cover-copy) {
  position: relative !important;
  z-index: 2 !important;
  display: grid !important;
  max-width: calc(100% - 52px) !important;
  padding: 0 !important;
  gap: 4px !important;
}

:is(.mn-section-cover-copy) h1 {
  max-width: none !important;
  margin: 0 !important;
  color: var(--ui-text) !important;
  font-size: clamp(35px, 9vw, 44px) !important;
  line-height: 0.96 !important;
  letter-spacing: -0.075em !important;
}

:is(.mn-section-cover-copy) p {
  display: -webkit-box !important;
  max-width: 42ch !important;
  margin: 2px 0 0 !important;
  overflow: hidden !important;
  color: var(--ui-text-muted) !important;
  font-size: 11px !important;
  line-height: 1.34 !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

:is(.mn-section-cover-actions) {
  position: relative !important;
  z-index: 2 !important;
  display: grid !important;
  width: 100% !important;
  margin: auto 0 0 !important;
  padding: 0 !important;
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)) !important;
  gap: 8px !important;
}

:is(.mn-section-cover-actions) > .btn {
  width: 100% !important;
  height: 44px !important;
  min-width: 0 !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding-inline: 9px !important;
  padding-block: 0 !important;
  grid-column: auto !important;
  justify-content: center !important;
  border-radius: 14px !important;
  font-size: 12px !important;
  white-space: nowrap;
}

.mn-section-cover-actions.mn-sport-primary-actions > .btn {
  display: inline-flex !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 5px 6px 6px !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 1px !important;
  overflow: visible !important;
  line-height: 1.05 !important;
  white-space: normal !important;
}

.mn-section-cover-actions.mn-sport-primary-actions .action-icon {
  display: grid !important;
  width: 15px !important;
  height: 15px !important;
  min-height: 15px !important;
  margin: 0 !important;
  place-items: center !important;
}

.mn-section-cover-actions.mn-sport-primary-actions .action-icon svg {
  display: block !important;
  width: 15px !important;
  height: 15px !important;
}

.mn-section-cover-actions.mn-sport-primary-actions .mn-sport-action-label {
  display: block !important;
  max-width: 100% !important;
  margin: 0 !important;
  overflow: visible !important;
  color: inherit !important;
  font-size: 10.5px !important;
  font-weight: 850 !important;
  line-height: 1.08 !important;
  text-align: center !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}

:is(.finance-cover-asset, .notes-cover-asset, .mn-sport-cover-asset) {
  display: none !important;
}

.mn-section-cover.mn-sport-welcome {
  min-height: 0 !important;
}

.mn-section-cover.mn-sport-welcome .mn-section-cover-copy p {
  display: block !important;
  overflow: visible !important;
  -webkit-line-clamp: unset;
}

@media (max-width: 370px) {
  :is(.mn-section-cover) {
    padding-inline: 14px !important;
  }

  :is(.mn-section-cover-actions) {
    gap: 6px !important;
  }

  :is(.mn-section-cover-actions) > .btn {
    padding-inline: 6px !important;
    font-size: 11px !important;
  }
}

/* --------------------------------------------------------------------------
   Profile order, promo ticket and full-screen onboarding

   The welcome flow is the page itself: no tinted shell inside the viewport.
   Narrative steps keep the object high and reserve the lower part for copy.
   -------------------------------------------------------------------------- */

.mn-profile-welcome-promo > .mn-profile-promo-code {
  position: relative;
  display: grid;
  width: min(100%, 290px);
  min-height: 86px;
  margin-inline: auto;
  padding: 13px 24px 12px;
  place-items: center;
  gap: 4px;
  overflow: hidden;
  border: 1px dashed rgba(232, 198, 117, 0.62);
  border-radius: 17px;
  background: linear-gradient(135deg, rgba(232, 198, 117, 0.11), rgba(232, 198, 117, 0.035));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
  grid-template-columns: minmax(0, 1fr);
}

.mn-profile-promo-code::before,
.mn-profile-promo-code::after {
  position: absolute;
  top: 50%;
  width: 18px;
  height: 18px;
  border: 1px solid rgba(232, 198, 117, 0.32);
  border-radius: 50%;
  background: var(--theme-card, #0f1919);
  content: '';
  transform: translateY(-50%);
}

.mn-profile-promo-code::before {
  left: -10px;
}

.mn-profile-promo-code::after {
  right: -10px;
}

.mn-profile-promo-code > small {
  color: rgba(241, 228, 205, 0.52);
  font-size: 9px;
  font-weight: 760;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.mn-profile-promo-code > strong {
  color: #e8c675;
  font-family: var(--font-display);
  font-size: clamp(29px, 8vw, 36px);
  line-height: 1;
  letter-spacing: 0.04em;
}

.mn-profile-welcome-promo.redeemed .mn-profile-promo-code {
  border-color: rgba(85, 213, 204, 0.48);
  background: linear-gradient(135deg, rgba(85, 213, 204, 0.1), rgba(85, 213, 204, 0.025));
}

.mn-profile-welcome-promo.redeemed .mn-profile-promo-code > strong {
  color: #55d5cc;
}

.plan-suggestion-sheet {
  grid-template-rows: auto minmax(0, 1fr) auto !important;
}

.plan-suggestion-sheet .modal-actions {
  position: relative !important;
  z-index: 4 !important;
  flex: none;
  min-height: 78px;
  padding-top: 12px !important;
  padding-bottom: max(16px, env(safe-area-inset-bottom)) !important;
  background: #121b1c !important;
  box-shadow: 0 -10px 24px rgba(3, 8, 8, 0.32) !important;
  backdrop-filter: none !important;
}

.plan-suggestion-sheet .plan-suggestion-accept {
  min-height: 52px !important;
  border-color: rgba(99, 209, 165, 0.42) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

.onboarding-stage[data-onboarding-page='choose'],
.onboarding-stage[data-onboarding-page='capture'],
.onboarding-stage[data-onboarding-page='day'],
.onboarding-stage[data-onboarding-page='memory'],
.onboarding-stage[data-onboarding-page='access'] {
  width: min(100%, 700px);
  min-height: 0;
  margin-inline: auto;
  align-content: stretch;
}

.onboarding-stage[data-onboarding-page='choose'] {
  grid-template-rows: minmax(0, 1fr) auto;
}

.onboarding-stage[data-onboarding-page='capture'],
.onboarding-stage[data-onboarding-page='day'],
.onboarding-stage[data-onboarding-page='memory'],
.onboarding-stage[data-onboarding-page='access'] {
  grid-template-rows: minmax(0, 1fr) auto;
}

.onboarding-shell-page-choose .onboarding-welcome,
.onboarding-shell-page-capture .onboarding-story,
.onboarding-shell-page-day .onboarding-story,
.onboarding-shell-page-memory .onboarding-story,
.onboarding-shell-page-access .onboarding-story {
  min-height: 0 !important;
  height: 100%;
  align-content: stretch;
}

@media (max-width: 620px) {
  .onboarding-stage[data-onboarding-page='choose'],
  .onboarding-stage[data-onboarding-page='capture'],
  .onboarding-stage[data-onboarding-page='day'],
  .onboarding-stage[data-onboarding-page='memory'],
  .onboarding-stage[data-onboarding-page='access'] {
    padding-inline: 22px !important;
  }

  .onboarding-shell-page-choose .onboarding-welcome,
  .onboarding-shell-page-capture .onboarding-story,
  .onboarding-shell-page-day .onboarding-story,
  .onboarding-shell-page-memory .onboarding-story,
  .onboarding-shell-page-access .onboarding-story {
    grid-template-rows: minmax(118px, 1fr) auto !important;
    gap: 12px !important;
  }

  .onboarding-shell-page-choose .onboarding-visual,
  .onboarding-shell-page-capture .onboarding-visual,
  .onboarding-shell-page-day .onboarding-visual,
  .onboarding-shell-page-memory .onboarding-visual,
  .onboarding-shell-page-access .onboarding-visual {
    height: auto;
    min-height: 0;
    align-content: start;
    padding-top: 4px;
  }

  .onboarding-shell-page-choose .onboarding-welcome-copy,
  .onboarding-shell-page-capture .onboarding-story-copy,
  .onboarding-shell-page-day .onboarding-story-copy,
  .onboarding-shell-page-memory .onboarding-story-copy,
  .onboarding-shell-page-access .onboarding-story-copy {
    align-self: end !important;
  }

  .onboarding-shell-page-choose .onboarding-visual img,
  .onboarding-shell-page-capture .onboarding-visual img,
  .onboarding-shell-page-day .onboarding-visual img,
  .onboarding-shell-page-memory .onboarding-visual img,
  .onboarding-shell-page-access .onboarding-visual img {
    height: clamp(124px, 24dvh, 205px) !important;
    max-height: clamp(124px, 24dvh, 205px) !important;
  }
}

@media (max-width: 620px) and (max-height: 680px) {
  .onboarding-stage[data-onboarding-page='choose'],
  .onboarding-stage[data-onboarding-page='capture'],
  .onboarding-stage[data-onboarding-page='day'],
  .onboarding-stage[data-onboarding-page='memory'],
  .onboarding-stage[data-onboarding-page='access'] {
    padding-top: 42px !important;
    padding-bottom: 10px !important;
    gap: 7px !important;
  }

  .onboarding-shell-page-choose .onboarding-welcome,
  .onboarding-shell-page-capture .onboarding-story,
  .onboarding-shell-page-day .onboarding-story,
  .onboarding-shell-page-memory .onboarding-story,
  .onboarding-shell-page-access .onboarding-story {
    grid-template-rows: minmax(96px, 1fr) auto !important;
    gap: 5px !important;
  }

  .onboarding-shell-page-choose .onboarding-visual img,
  .onboarding-shell-page-capture .onboarding-visual img,
  .onboarding-shell-page-day .onboarding-visual img,
  .onboarding-shell-page-memory .onboarding-visual img,
  .onboarding-shell-page-access .onboarding-visual img {
    height: 112px !important;
    max-height: 112px !important;
  }
}

/* --------------------------------------------------------------------------
   Dark-system repair: one quiet material language

   Light mode already has a coherent final cascade. Dark mode used to inherit
   several older gradients, so neighboring sections could look like different
   products. This layer keeps the MNEME night mood but makes pages, rows,
   sheets and notification decisions share the same surface family.
   -------------------------------------------------------------------------- */

html[data-theme='dark'] {
  --theme-bg: #05090a;
  --theme-surface: #0c1516;
  --theme-surface-soft: #101b1c;
  --theme-surface-raised: #142021;
  --theme-text: #f1e4cd;
  --theme-text-muted: rgba(241, 228, 205, 0.6);
  --theme-line: rgba(241, 228, 205, 0.1);
  --theme-shadow: 0 18px 42px rgba(0, 0, 0, 0.36);
  --ui-surface-inset: rgba(241, 228, 205, 0.04);
  --ui-surface-choice: rgba(52, 197, 187, 0.07);
  --ui-border: rgba(241, 228, 205, 0.105);
  --ui-border-accent: rgba(52, 197, 187, 0.22);
  --ui-text-muted: rgba(241, 228, 205, 0.58);
  --mn-dark-card: linear-gradient(150deg, rgba(15, 25, 26, 0.97), rgba(8, 15, 16, 0.97));
  --mn-dark-card-soft: linear-gradient(150deg, rgba(17, 29, 30, 0.96), rgba(9, 17, 18, 0.96));
  --mn-dark-row: rgba(241, 228, 205, 0.04);
  --mn-dark-row-hover: rgba(52, 197, 187, 0.07);
  --mn-dark-glow: radial-gradient(circle at 92% 0%, rgba(52, 197, 187, 0.075), transparent 12rem);
}

html[data-theme='dark'] body {
  color: var(--theme-text);
  background:
    radial-gradient(circle at 50% -10%, rgba(52, 197, 187, 0.11), transparent 31rem),
    radial-gradient(circle at 88% 14%, rgba(180, 147, 211, 0.04), transparent 22rem),
    linear-gradient(180deg, #030707 0%, #071011 50%, #040909 100%) !important;
}

html[data-theme='dark']
  :where(
    .card,
    .mn-card,
    .today-sheet,
    .today-thought-card,
    .money-card,
    .notes-capture-card,
    .notes-paper,
    .finance-paper,
    .report-card,
    .ask-shell,
    .admin-system-card,
    .admin-subscription-card,
    .plan-dashboard,
    .mn-plan-hero,
    .mn-section-cover,
    .finance-cover-note,
    .notes-cover-note,
    .mn-profile-hero,
    .mn-sport-cover,
    .mn-alert-card
  ) {
  border-color: var(--ui-border) !important;
  background: var(--mn-dark-glow), var(--mn-dark-card) !important;
  color: var(--theme-text) !important;
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
}

html[data-theme='dark']
  :where(
    .task-item,
    .plan-block,
    .mn-plan-entry,
    .mn-tool-card,
    .transaction-item,
    .finance-transaction,
    .finance-flow-card,
    .finance-report-card,
    .memory-note-item,
    .notification-item,
    .mn-setting-row,
    .mn-profile-status-grid > div,
    .mn-profile-report > div,
    .mn-sport-tabs,
    .mn-sport-range,
    .mn-sport-macro,
    .mn-sport-glance,
    .mn-sport-meal-journal,
    .mn-sport-entry,
    .mn-sport-plan-row,
    .mn-sport-week-trace > span,
    .calendar-day,
    .routine-row,
    .routine-feed-row,
    .sport-form-section,
    .preview-item,
    .product-guide-card,
    .photo-source-grid > button,
    .category-choice span
  ) {
  border-color: var(--ui-border) !important;
  background: var(--mn-dark-row) !important;
  color: var(--theme-text) !important;
  box-shadow: none !important;
}

html[data-theme='dark']
  :where(
    .task-item:hover,
    .mn-plan-entry:hover,
    .finance-transaction:hover,
    .memory-note-item:hover,
    .calendar-day:hover,
    .notification-item:hover,
    .product-guide-card:hover
  ) {
  background: var(--mn-dark-row-hover) !important;
}

html[data-theme='dark'] :where(.modal-sheet, .voice-panel, .onboarding-shell, .onboarding-stage) {
  border-color: var(--ui-border) !important;
  background:
    radial-gradient(circle at 10% 0%, rgba(52, 197, 187, 0.105), transparent 12rem),
    radial-gradient(circle at 92% 2%, rgba(180, 147, 211, 0.055), transparent 11rem),
    var(--mn-dark-card-soft) !important;
  color: var(--theme-text) !important;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.46),
    inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

html[data-theme='dark'] :where(.modal-head, .modal-actions, .voice-result-actions) {
  border-color: transparent !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

html[data-theme='dark'] :where(input:not([type='checkbox']):not([type='radio']), textarea, select) {
  border-color: var(--ui-border) !important;
  background: rgba(241, 228, 205, 0.045) !important;
  color: var(--theme-text) !important;
  box-shadow: none !important;
}

html[data-theme='dark']
  :where(input:not([type='checkbox']):not([type='radio']), textarea, select):focus {
  border-color: rgba(52, 197, 187, 0.34) !important;
  background: rgba(52, 197, 187, 0.075) !important;
}

html[data-theme='dark'] :where(input, textarea)::placeholder {
  color: rgba(241, 228, 205, 0.36) !important;
}

html[data-theme='dark'] :where(.app-main, .modal-sheet, .voice-panel) :where(h1, h2, h3) {
  color: var(--theme-text) !important;
  text-shadow: none !important;
}

html[data-theme='dark']
  :where(.app-main, .modal-sheet, .voice-panel)
  :where(p, small, label, .mn-eyebrow, .eyebrow) {
  color: var(--theme-text-muted) !important;
}

html[data-theme='dark'] .notification-sheet {
  width: min(430px, 100%) !important;
}

html[data-theme='dark'] .notification-sheet .modal-head h2 {
  font-size: clamp(24px, 6.4vw, 32px) !important;
  letter-spacing: 0 !important;
}

.notification-sheet .notification-intro {
  padding: 0 var(--ui-space-1) var(--ui-space-1) !important;
}

.notification-sheet .notification-intro strong {
  font-size: 16px !important;
  letter-spacing: 0 !important;
}

.notification-sheet .notification-intro span {
  max-width: 34ch;
}

.notification-sheet .notification-item {
  isolation: isolate;
  border-radius: var(--ui-radius-row) !important;
}

.notification-sheet .notification-item::before {
  inset: 12px auto 12px 0 !important;
  width: 3px !important;
  border-radius: 0 5px 5px 0 !important;
  background: #45c8bf !important;
  opacity: 0.86 !important;
}

.notification-sheet .notification-item.priority-high {
  border-color: rgba(225, 118, 103, 0.2) !important;
}

.notification-sheet .notification-item.priority-high::before {
  background: #e6786c !important;
  box-shadow: none !important;
}

.notification-sheet .notification-item.priority-gentle::before {
  background: #7fb4cf !important;
}

.notification-sheet .notification-item .notification-kind {
  color: #55d8cf !important;
  background: rgba(52, 197, 187, 0.1) !important;
}

.notification-sheet .notification-item.category-sport .notification-kind {
  color: #9edb82 !important;
  background: rgba(105, 198, 112, 0.11) !important;
}

.notification-sheet .notification-item.category-calendar .notification-kind {
  color: #88badc !important;
  background: rgba(119, 168, 200, 0.12) !important;
}

.notification-sheet .notification-item .notification-meta {
  color: #55d8cf !important;
  font-size: 9px !important;
  letter-spacing: 0.08em !important;
}

.notification-sheet .notification-item.priority-high .notification-meta {
  color: #ed9586 !important;
}

.notification-sheet .notification-item .item-main strong {
  color: var(--theme-text) !important;
}

.notification-sheet .notification-item .item-main small {
  display: -webkit-box !important;
  overflow: hidden !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.notification-sheet .notification-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.notification-sheet .notification-actions .btn {
  min-width: 0 !important;
  min-height: 44px !important;
  padding-inline: 8px !important;
  white-space: normal !important;
}

.notification-sheet .notification-actions .btn:nth-child(3):last-child,
.notification-sheet .notification-actions .btn:nth-child(3):not(:last-child),
.notification-sheet .notification-actions .btn:nth-child(4) {
  grid-column: auto !important;
}

.notification-sheet .modal-actions {
  padding-top: var(--ui-space-1) !important;
}

html[data-theme='dark'] .toast {
  border-color: rgba(241, 228, 205, 0.12) !important;
  background:
    radial-gradient(circle at 8% 0%, rgba(52, 197, 187, 0.13), transparent 7rem),
    var(--mn-dark-card-soft) !important;
  color: var(--theme-text) !important;
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
}

/* Верхние переключатели «Дела» и «Спорт» остаются той же структурой, но в
   тёмной теме читаются как плотный системный control, а не как яркая карточка. */
html[data-theme='dark'] .mn-plan-nav {
  border-color: rgba(241, 228, 205, 0.075) !important;
  background: linear-gradient(180deg, rgba(7, 14, 15, 0.94), rgba(3, 8, 9, 0.94)) !important;
  box-shadow:
    0 10px 22px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.025) !important;
}

html[data-theme='dark'] .mn-plan-nav::before {
  border-color: rgba(52, 197, 187, 0.2) !important;
  background: linear-gradient(180deg, rgba(17, 61, 58, 0.86), rgba(8, 43, 41, 0.86)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    inset 0 0 0 1px rgba(52, 197, 187, 0.05) !important;
}

html[data-theme='dark'] .mn-plan-nav button {
  color: rgba(241, 228, 205, 0.46) !important;
}

html[data-theme='dark'] .mn-plan-nav button small {
  color: rgba(241, 228, 205, 0.3) !important;
}

html[data-theme='dark'] .mn-plan-nav button.active {
  color: var(--theme-text) !important;
}

html[data-theme='dark'] .mn-plan-nav button.active small {
  color: rgba(241, 228, 205, 0.52) !important;
}

/* Быстрый ввод на главной остаётся светлой «бумажной запиской» и в ночной
   теме: это намеренный акцент, а не обычная тёмная карточка раздела. */
.screen-today .today-thought-card,
html[data-theme='dark'] .screen-today .today-thought-card,
html[data-theme='light'] .screen-today .today-thought-card {
  border-color: rgba(120, 96, 60, 0.18) !important;
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 255, 255, 0.3), transparent 17rem),
    linear-gradient(180deg, #f4ead9, #ebdcc3) !important;
  color: #5b5145 !important;
  box-shadow:
    0 18px 34px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.64) !important;
}

.screen-today .today-thought-card textarea,
html[data-theme='dark'] .screen-today .today-thought-card textarea,
html[data-theme='light'] .screen-today .today-thought-card textarea {
  border: 0 !important;
  background: transparent !important;
  color: #5b5145 !important;
  box-shadow: none !important;
}

.screen-today .today-thought-card textarea::placeholder {
  color: rgba(91, 81, 69, 0.56) !important;
}

.screen-today .today-thought-card .btn {
  background: linear-gradient(180deg, #35bbb3, #238f8a) !important;
  color: #f7ead2 !important;
}

/* Единая сворачиваемость списков: маленький тихий chevron без текстовой плашки. */
.has-collapsible-list-toggle {
  gap: var(--ui-space-2, 8px) !important;
}

.has-collapsible-list-toggle > :first-child {
  min-width: 0;
}

/* The total and collapse chevron are one cluster. Previously the chevron's
   auto margin left the count floating next to the title. */
.mn-section-head.has-collapsible-list-toggle > .mn-count {
  margin-left: auto;
}

.mn-section-head.has-collapsible-list-toggle > .mn-count + .collapsible-list-toggle {
  margin-left: 0;
}

.collapsible-list-toggle {
  display: inline-flex !important;
  flex: 0 0 30px;
  align-items: center;
  justify-content: center;
  width: 30px;
  min-width: 30px;
  height: 30px;
  min-height: 30px;
  margin-left: auto;
  padding: 0;
  border: 1px solid rgba(77, 226, 214, 0.12);
  border-radius: 12px;
  background: rgba(241, 228, 205, 0.035);
  color: #4dded6;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
  cursor: pointer;
  transition:
    border-color 160ms ease,
    background 160ms ease,
    color 160ms ease,
    transform 160ms ease;
  -webkit-tap-highlight-color: transparent;
}

.collapsible-list-toggle:hover,
.collapsible-list-toggle:focus-visible {
  border-color: rgba(77, 226, 214, 0.2);
  background: rgba(52, 197, 187, 0.08);
  color: var(--mneme-teal-bright);
}

.collapsible-list-toggle:active {
  transform: translateY(1px);
}

.collapsible-list-chevron {
  display: inline-flex;
  width: 14px;
  height: 14px;
  color: #4dded6;
  transition: transform 180ms ease;
  transform: rotate(90deg);
}

.collapsible-list-chevron svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  filter: drop-shadow(0 0 6px rgba(77, 226, 214, 0.18));
}

.collapsible-list-chevron svg path {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2.2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

[data-collapsible-list][data-list-collapsed='true'] .collapsible-list-chevron {
  transform: rotate(0deg);
}

[data-collapsible-list]
  :is(
    .notification-list,
    .timeline,
    .mn-active-area-list,
    .task-list,
    .scheduled-task-list,
    .missed-list,
    .mn-task-list,
    .mn-tool-grid,
    .mn-feed-list,
    .transaction-list,
    .finance-transaction-list,
    .mn-finance-category-list,
    .money-flow-grid,
    .reminder-list,
    .meal-journal-list,
    .mn-sport-list,
    .mn-sport-plan-list,
    .mn-measurement-set-list,
    .sport-entry-list,
    .note-list,
    .memory-note-list,
    .mn-settings-list,
    .product-guide-grid,
    .admin-subscription-list,
    .admin-progress-list,
    .admin-data-grid,
    .report-table,
    .admin-plan-grid,
    .admin-source-list,
    .admin-feedback-list,
    .preview-list
  ) {
  max-height: var(--collapsible-list-open-height, 1200px);
  overflow: hidden;
  opacity: 1;
  transform: translateY(0);
  transition:
    max-height 220ms ease,
    opacity 160ms ease,
    transform 180ms ease;
  will-change: max-height, opacity, transform;
}

[data-collapsible-list][data-list-collapsed='true']
  :is(
    .notification-list,
    .timeline,
    .mn-active-area-list,
    .task-list,
    .scheduled-task-list,
    .missed-list,
    .mn-task-list,
    .mn-tool-grid,
    .mn-feed-list,
    .transaction-list,
    .finance-transaction-list,
    .mn-finance-category-list,
    .money-flow-grid,
    .reminder-list,
    .meal-journal-list,
    .mn-sport-list,
    .mn-sport-plan-list,
    .mn-measurement-set-list,
    .sport-entry-list,
    .note-list,
    .memory-note-list,
    .mn-settings-list,
    .product-guide-grid,
    .admin-subscription-list,
    .admin-progress-list,
    .admin-data-grid,
    .report-table,
    .admin-plan-grid,
    .admin-source-list,
    .admin-feedback-list,
    .preview-list
  ) {
  max-height: 0 !important;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
}

html[data-theme='light'] .collapsible-list-toggle {
  border-color: rgba(36, 151, 145, 0.16);
  background: rgba(36, 151, 145, 0.055);
  color: #168f88;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.52);
}

html[data-theme='light'] .collapsible-list-toggle:hover,
html[data-theme='light'] .collapsible-list-toggle:focus-visible {
  border-color: rgba(36, 151, 145, 0.22);
  background: rgba(36, 151, 145, 0.08);
  color: #168f88;
}

html[data-theme='light'] .collapsible-list-chevron {
  color: #168f88;
}

/* Финансовая подсказка — компактная карточка в общей левой сетке. */
.finance-guidance {
  padding: 16px 18px !important;
  justify-items: start !important;
  gap: 6px !important;
  text-align: left !important;
}

.finance-guidance > small {
  font-size: 10px !important;
  letter-spacing: 0.09em !important;
}

.finance-guidance > strong {
  max-width: 25ch;
  color: var(--theme-text, var(--mneme-paper)) !important;
  font-size: 15px !important;
  line-height: 1.18 !important;
}

.finance-guidance p {
  max-width: 30ch;
  color: var(--theme-text-muted, var(--muted)) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
}

.finance-guidance > span {
  max-width: 28ch;
  color: var(--theme-text-muted, var(--muted)) !important;
  font-size: 11px !important;
  line-height: 1.3 !important;
}

.finance-guidance .link-button {
  justify-self: start !important;
  margin-top: 5px !important;
}

/* Поиск заметок — цельная капсула без вложенного прямоугольника input. */
.notes-search-field {
  isolation: isolate;
}

.notes-search-field input[type='search'] {
  appearance: none;
  -webkit-appearance: none;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.notes-search-field input[type='search']::-webkit-search-cancel-button,
.notes-search-field input[type='search']::-webkit-search-decoration {
  appearance: none;
  -webkit-appearance: none;
}

/* Mobile performance layer — сохраняем ощущение движения, но убираем дорогие
   для Telegram WebView эффекты: глубокий blur, фильтры, огромные repaint-тени
   и слишком долгие layout-анимации. */
@media (hover: none) and (pointer: coarse), (max-width: 767px) {
  .screen {
    animation-duration: 180ms !important;
  }

  :where(.modal-sheet, .voice-panel, .notification-sheet, .dock-surface, .mobile-header, .toast) {
    backdrop-filter: blur(8px) saturate(0.9) !important;
  }

  :where(
    .card,
    .mn-card,
    .today-sheet,
    .money-card,
    .notes-paper,
    .finance-paper,
    .report-card,
    .ask-shell,
    .modal-sheet,
    .voice-panel,
    .notification-item,
    .mn-plan-entry,
    .task-item,
    .finance-transaction,
    .memory-note-item,
    .mn-sport-entry
  ) {
    box-shadow:
      0 10px 24px rgba(0, 0, 0, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
  }

  :where(
    .today-pocket-asset,
    .finance-cover-asset,
    .notes-cover-asset,
    .mn-sport-cover-asset,
    .mn-section-cover img,
    .mn-empty-art,
    .empty-state svg
  ) {
    filter: drop-shadow(0 6px 9px rgba(0, 0, 0, 0.2)) !important;
  }

  :where(
    button,
    .btn,
    .dock-tab,
    .chip,
    .segmented button,
    .mn-plan-nav button,
    .mn-sport-tabs button,
    .calendar-day,
    .task-item,
    .mn-plan-entry,
    .finance-transaction,
    .memory-note-item,
    .notification-item
  ) {
    transition-duration: 140ms !important;
  }

  [data-collapsible-list]
    :is(
      .notification-list,
      .timeline,
      .mn-active-area-list,
      .task-list,
      .scheduled-task-list,
      .missed-list,
      .mn-task-list,
      .mn-tool-grid,
      .mn-feed-list,
      .transaction-list,
      .finance-transaction-list,
      .mn-finance-category-list,
      .money-flow-grid,
      .reminder-list,
      .meal-journal-list,
      .mn-sport-list,
      .mn-sport-plan-list,
      .mn-measurement-set-list,
      .sport-entry-list,
      .note-list,
      .memory-note-list,
      .mn-settings-list,
      .product-guide-grid,
      .admin-subscription-list,
      .admin-progress-list,
      .admin-data-grid,
      .report-table,
      .admin-plan-grid,
      .admin-source-list,
      .admin-feedback-list,
      .preview-list
    ) {
    contain: layout paint;
    transition:
      max-height 160ms ease,
      opacity 120ms ease,
      transform 140ms ease !important;
    will-change: auto;
  }

  .collapsible-list-chevron {
    transition-duration: 140ms !important;
    filter: none !important;
  }

  .collapsible-list-chevron svg {
    filter: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-collapsible-list]
    :is(
      .notification-list,
      .timeline,
      .mn-active-area-list,
      .task-list,
      .scheduled-task-list,
      .missed-list,
      .mn-task-list,
      .mn-tool-grid,
      .mn-feed-list,
      .transaction-list,
      .finance-transaction-list,
      .mn-finance-category-list,
      .money-flow-grid,
      .reminder-list,
      .meal-journal-list,
      .mn-sport-list,
      .mn-sport-plan-list,
      .mn-measurement-set-list,
      .sport-entry-list,
      .note-list,
      .memory-note-list,
      .mn-settings-list,
      .product-guide-grid,
      .admin-subscription-list,
      .admin-progress-list,
      .admin-data-grid,
      .report-table,
      .admin-plan-grid,
      .admin-source-list,
      .admin-feedback-list,
      .preview-list
    ) {
    transition: none !important;
  }
}

/* Nutrition rows are readings with a track, not nested cards. Theme-wide
   surface rules must not draw dark rectangular plates behind each reading. */
.mn-sport-ranges > .mn-sport-range,
html[data-theme='dark'] .mn-sport-ranges > .mn-sport-range,
html[data-theme='light'] .mn-sport-ranges > .mn-sport-range {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* Meal history keeps every entry inside its own row even when the recognised
   phrase contains several foods. */
.mn-sport-meal-journal .mn-meal-timeline-row {
  min-height: 86px;
  padding: 12px;
  grid-template-columns: 48px minmax(0, 1fr) minmax(58px, auto) 12px;
  gap: 8px;
  align-items: center;
}

/* Nutrition stays visible as the day summary; only its meal history folds. */
.mn-sport-nutrition-content {
  display: grid;
  min-width: 0;
  gap: 14px;
}

.mn-sport-nutrition-content > .mn-sport-meal-journal {
  margin-top: 0;
}

.mn-sport-meal-journal > header.has-collapsible-list-toggle {
  justify-content: flex-start;
}

.mn-sport-meal-journal > header.has-collapsible-list-toggle > div {
  margin-right: auto;
}

.mn-sport-meal-journal
  > header.has-collapsible-list-toggle
  > .mn-meal-add
  + .collapsible-list-toggle {
  margin-left: 0;
}

/* Scheduled rows used the generic two-row badge grid even though their date
   already lives below the title. On long titles that pushed the date and
   chevron into the bottom edge. */
.mn-task-list.scheduled .mn-task-open {
  min-height: 90px !important;
  height: auto !important;
  padding: 13px 14px !important;
  grid-template-areas: 'mark main tail' !important;
  grid-template-columns: 7px minmax(0, 1fr) 12px !important;
  grid-template-rows: auto !important;
  gap: 11px !important;
  align-items: center !important;
}

.mn-task-list.scheduled .mn-waiting {
  display: none;
}

.mn-task-list.scheduled .item-main {
  align-self: center;
}

.mn-task-list.scheduled .item-main small {
  display: block;
  overflow: visible;
  line-height: 1.25;
  text-overflow: clip;
  white-space: normal;
}

.routine-day-empty {
  min-height: 84px !important;
  padding: 15px 16px !important;
}

.routine-day-empty .item-main {
  min-width: 0;
}

.routine-day-empty .item-main strong {
  line-height: 1.24;
  overflow-wrap: anywhere;
}

.mn-meal-timeline-row .item-main {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.mn-meal-timeline-row .item-main strong {
  display: -webkit-box;
  overflow: hidden;
  line-height: 1.25;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.mn-meal-timeline-row .item-main small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mn-meal-timeline-row :where(.mn-meal-time, .mn-sport-value) {
  align-self: center;
  white-space: nowrap;
}

/* A single meal uses the same visual nutrition language as the day summary. */
.sport-meal-macros {
  display: grid;
  margin-top: 2px;
  gap: 8px;
}

.sport-meal-macros > .mn-sport-macro-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.sport-meal-macros > .mn-sport-macro-grid.micronutrients {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sport-meal-detail-sheet .modal-body {
  display: grid !important;
  gap: 12px;
}

.sport-meal-detail-sheet .sport-entry-list {
  max-height: none !important;
  overflow: visible !important;
}

@media (max-width: 430px) {
  .mn-sport-meal-journal .mn-meal-timeline-row {
    grid-template-columns: 44px minmax(0, 1fr) minmax(54px, auto);
  }

  .mn-sport-meal-journal .mn-meal-timeline-row .mn-open-tail {
    display: none;
  }

  .sport-meal-macros .mn-sport-macro {
    min-height: 88px;
    padding: 10px 8px;
  }
}

/* Final cascade ownership for the navigation repair above. */
.mn-plan-entry-open,
.mn-plan-entry.task:has(> .mn-entry-done) .mn-plan-entry-open {
  min-height: 82px !important;
  padding: 13px 14px !important;
  grid-template-columns: 52px 5px minmax(0, 1fr) !important;
  gap: 10px !important;
}

.mn-plan-entry .item-main strong {
  display: -webkit-box !important;
  line-height: 1.18 !important;
  overflow-wrap: anywhere;
  text-overflow: clip !important;
  white-space: normal !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

:is(.finance-cover-note, .notes-cover-note) {
  min-height: 124px !important;
  padding: 15px 14px !important;
  gap: 7px !important;
}

:is(.finance-cover-note, .notes-cover-note) .mn-section-cover-copy {
  align-self: start !important;
}

:is(.finance-cover-note, .notes-cover-note) .mn-section-cover-copy h1 {
  font-size: clamp(32px, 8.5vw, 40px) !important;
}

.notes-list-controls {
  display: flex !important;
  min-height: 34px;
  align-items: center;
  justify-content: flex-end !important;
  gap: 8px;
}

.notes-list-controls .mn-count {
  margin-left: 0 !important;
}

.mn-profile-hero {
  min-height: 112px !important;
  padding: 18px 16px !important;
  align-content: center !important;
}

.mn-calendar-month {
  padding: 14px !important;
}

.finance-balance-actions,
.mn-page-actions {
  display: grid !important;
  gap: 8px;
}

.finance-balance-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

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

.finance-balance-actions .btn,
.mn-page-actions .btn {
  min-width: 0;
  min-height: 46px;
  padding-inline: 8px;
  border-radius: 15px;
  font-size: 11px;
}

.mn-page-actions .btn:last-child {
  grid-column: auto !important;
}

/* An open sheet covers the dock as one intact object. No scaling or shifting. */
#modal-root > .modal-backdrop {
  z-index: 42 !important;
}

body:has(#modal-root > .modal-backdrop) #bottom-navigation,
body:has(#voice-root.active) #bottom-navigation {
  opacity: 1 !important;
  filter: none !important;
  transform: translateX(-50%) !important;
  pointer-events: none;
}

/* Short confirmations can be dismissed with a horizontal swipe. */
.toast[data-swipe-dismissable='true'] {
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  will-change: transform, opacity;
}

.toast[data-swipe-dismissable='true']:active {
  cursor: grabbing;
}

@media (prefers-reduced-motion: reduce) {
  .toast[data-swipe-dismissable='true'] {
    transition-duration: 1ms !important;
  }
}

/* The header rule communicates scroll position. At the top it disappears;
   after a small movement it returns without moving any content. */
@media (max-width: 767px) {
  html[data-theme='dark'] {
    --mneme-mobile-shell: #06100f;
  }

  html[data-theme='light'] {
    --mneme-mobile-shell: #e9e4da;
  }

  html[data-theme] body {
    background: var(--mneme-mobile-shell) !important;
  }

  .screen-today .today-cover {
    padding-top: 0 !important;
  }

  .screen-today .today-cover-copy {
    min-height: 96px !important;
    padding-top: 4px !important;
    gap: 3px !important;
  }

  .art-ribbon {
    display: none !important;
  }

  .mobile-header {
    border-bottom-color: transparent !important;
    background: var(--mneme-mobile-shell) !important;
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0) !important;
    backdrop-filter: none !important;
    transition:
      border-color 180ms ease,
      box-shadow 220ms ease !important;
  }

  .mobile-header::after {
    opacity: 0 !important;
    transition: opacity 180ms ease !important;
  }

  .mobile-header.is-page-scrolled {
    border-bottom-color: rgba(241, 229, 209, 0.08) !important;
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.22) !important;
  }

  .mobile-header.is-page-scrolled::after {
    opacity: 1 !important;
  }

  html[data-theme='light'] .mobile-header.is-page-scrolled {
    border-bottom-color: rgba(24, 54, 50, 0.11) !important;
    box-shadow: 0 10px 24px rgba(24, 54, 50, 0.11) !important;
  }
}

/* A plan proposal is one chronological sequence, not a stack of unrelated cards. */
.plan-suggestion-sheet .modal-body {
  gap: 14px !important;
}

.plan-suggestion-sheet .plan-suggestion-intro {
  padding: 2px 2px 4px !important;
  border: 0 !important;
  background: transparent !important;
}

.plan-suggestion-sequence,
.plan-suggestion-day {
  display: grid;
  gap: 8px;
}

.plan-suggestion-sequence {
  gap: 15px;
}

.plan-suggestion-day > header {
  display: flex;
  padding-inline: 2px;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.plan-suggestion-day > header strong {
  color: var(--theme-text);
  font-size: 14px;
  line-height: 1.2;
}

.plan-suggestion-day > header small {
  color: var(--theme-text-muted);
  font-size: 11px;
  white-space: nowrap;
}

.plan-suggestion-sheet .plan-suggestion-list {
  margin-top: 0 !important;
  overflow: hidden;
  border: 1px solid var(--theme-line);
  border-radius: 17px;
  background: color-mix(in srgb, var(--theme-surface) 78%, transparent) !important;
}

.plan-suggestion-sheet .plan-suggestion-row {
  display: grid;
  min-height: 72px;
  padding: 14px 15px !important;
  grid-template-columns: 88px minmax(0, 1fr) !important;
  align-items: start;
  gap: 12px !important;
}

.plan-suggestion-sheet .plan-suggestion-row + .plan-suggestion-row {
  border-top: 1px solid var(--theme-line);
}

.plan-suggestion-sheet .plan-suggestion-time {
  display: block;
  padding-top: 1px;
  color: var(--mneme-teal-bright);
  white-space: nowrap;
}

.plan-suggestion-sheet .plan-suggestion-time > b {
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.035em;
}

.plan-suggestion-sheet .plan-suggestion-copy {
  gap: 5px;
}

.plan-suggestion-sheet .plan-suggestion-copy > strong {
  font-size: 15px;
  line-height: 1.25;
}

.plan-suggestion-sheet .plan-suggestion-copy > small {
  line-height: 1.32;
}

.plan-suggestion-sheet .plan-suggestion-rest {
  display: flex;
  min-height: 32px;
  padding: 6px 15px 6px 115px;
  align-items: center;
  gap: 8px;
  border-top: 1px solid var(--theme-line);
  color: var(--theme-text-muted);
}

.plan-suggestion-sheet .plan-suggestion-rest:first-child {
  border-top: 0;
}

.plan-suggestion-sheet .plan-suggestion-rest > span {
  width: 12px;
  height: 1px;
  background: currentColor;
}

.plan-suggestion-sheet .plan-suggestion-rest > small {
  font-size: 11px;
}

.plan-suggestion-note {
  margin: 0;
  padding: 10px 12px;
  border-left: 2px solid rgba(49, 189, 180, 0.62);
  color: var(--theme-text-muted);
  font-size: 13px;
  line-height: 1.42;
}

@media (max-width: 380px) {
  .plan-suggestion-sheet .plan-suggestion-row {
    padding-inline: 12px !important;
    grid-template-columns: 80px minmax(0, 1fr) !important;
    gap: 9px !important;
  }

  .plan-suggestion-sheet .plan-suggestion-time > b {
    font-size: 11.5px;
  }

  .plan-suggestion-sheet .plan-suggestion-rest {
    padding-left: 101px;
  }
}

/* One task grammar across All tasks, My day and Calendar:
   quiet status stroke, readable title/meta, optional completion target. */
.mn-unified-entry {
  display: grid !important;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  overflow: hidden;
  border: 1px solid rgba(241, 228, 205, 0.075);
  border-radius: 18px;
  background: rgba(4, 10, 11, 0.3);
  box-sizing: border-box;
}

.mn-unified-entry:has(> .mn-entry-done) {
  grid-template-columns: minmax(0, 1fr) 44px;
}

.mn-unified-entry > .mn-unified-entry-open {
  display: grid !important;
  min-width: 0;
  min-height: 70px !important;
  padding: 11px 12px !important;
  grid-column: 1;
  grid-template-areas: 'mark main badge' !important;
  grid-template-columns: 5px minmax(0, 1fr) auto !important;
  grid-template-rows: auto !important;
  align-items: center !important;
  gap: 10px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.mn-plan-entry.mn-unified-entry.task:has(> .mn-entry-done)
  > .mn-plan-entry-open.mn-unified-entry-open {
  padding: 11px 12px !important;
  grid-template-columns: 5px minmax(0, 1fr) auto !important;
  gap: 10px !important;
}

.mn-task-list .mn-task-entry.mn-unified-entry > .mn-task-open.mn-unified-entry-open {
  min-height: 70px !important;
  padding: 11px 12px !important;
  grid-template-areas: 'mark main badge' !important;
  grid-template-columns: 5px minmax(0, 1fr) auto !important;
  grid-template-rows: auto !important;
  gap: 10px !important;
}

.mn-unified-entry .mn-entry-flag {
  width: 5px !important;
  min-width: 5px !important;
  height: 30px !important;
  grid-area: mark !important;
  align-self: center;
  border-radius: 999px !important;
  clip-path: none !important;
  background: rgba(57, 203, 196, 0.72) !important;
  box-shadow: none !important;
}

.mn-unified-entry .item-main {
  grid-area: main !important;
  min-width: 0;
}

.mn-unified-entry .item-main strong {
  display: -webkit-box !important;
  overflow: hidden;
  line-height: 1.2 !important;
  overflow-wrap: anywhere;
  text-overflow: clip !important;
  white-space: normal !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.mn-unified-entry .item-main small {
  display: block;
  overflow: hidden;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mn-unified-entry :where(.mn-priority, .mn-waiting, .mn-repeat) {
  grid-area: badge !important;
  justify-self: end !important;
  margin: 0 !important;
}

.mn-unified-entry > .mn-entry-done {
  position: static !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  justify-self: center;
  transform: none !important;
}

.mn-unified-entry > .mn-entry-done:active {
  transform: scale(0.92) !important;
}

/* An unfinished task is an empty ring, not a ring with a second dot. */
.mn-unified-entry > .mn-entry-done > span {
  display: none !important;
}

html[data-theme='light'] .mn-unified-entry {
  border-color: rgba(24, 54, 50, 0.11);
  background: rgba(255, 252, 246, 0.62);
}

.mn-calendar-month {
  order: 1 !important;
}

.mn-calendar-day {
  order: 2 !important;
}

@media (prefers-reduced-motion: reduce) {
  .mobile-header,
  .mobile-header::after {
    transition-duration: 1ms !important;
  }
}

/* --------------------------------------------------------------------------
   Mobile overlays: familiar jobs, one MNEME language

   A picker is a compact action sheet, the signal centre belongs to the bell
   at the top, and only detail/edit sheets keep the larger editorial heading.
   -------------------------------------------------------------------------- */

#modal-root > .modal-backdrop .modal-sheet::before {
  display: none !important;
}

#modal-root > .modal-backdrop .modal-head {
  padding-top: 20px !important;
}

.modal-back-button .mneme-glyph {
  width: 20px;
  height: 20px;
}

.modal-back-button .mneme-glyph path {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

/* Filters are connected option lists, not a set of nested cards. */
.modal-sheet.choice-sheet {
  width: min(400px, 100%) !important;
}

.choice-sheet .modal-head {
  padding: 18px var(--ui-sheet-gutter) 10px !important;
  align-items: center !important;
}

.choice-sheet .modal-head h2 {
  font-size: 23px !important;
  line-height: 1.05 !important;
  letter-spacing: -0.035em !important;
}

.choice-sheet .modal-head .icon-button {
  width: 38px !important;
  min-width: 38px !important;
  height: 38px !important;
}

.choice-sheet .modal-body {
  padding: 2px var(--ui-sheet-gutter) 16px !important;
}

.choice-list {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-row);
  background: var(--ui-surface-inset);
}

.choice-row {
  display: grid;
  width: 100%;
  min-height: 58px;
  padding: 10px 13px;
  grid-template-columns: minmax(0, 1fr) 24px;
  align-items: center;
  gap: 12px;
  border: 0;
  border-bottom: 1px solid var(--ui-border);
  border-radius: 0;
  background: transparent;
  color: var(--theme-text);
  font: inherit;
  text-align: left;
}

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

.choice-row .item-main {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.choice-row strong {
  font-size: 14px;
  line-height: 1.25;
}

.choice-row small {
  color: var(--ui-text-muted);
  font-size: 11px;
  line-height: 1.3;
}

.choice-row.active {
  background: rgba(52, 197, 187, 0.075);
  color: var(--mneme-teal-bright);
}

.choice-check {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  color: var(--mneme-teal-bright);
}

.choice-check .mneme-glyph {
  width: 19px;
  height: 19px;
}

html[data-theme='light'] .choice-row.active {
  background: rgba(22, 143, 136, 0.085);
  color: #117f79;
}

/* The current task filter is an icon control; the selected filter is already
   the section title, so repeating the word "Фильтр" only adds noise. */
.mn-task-section .task-filter-button {
  width: 32px;
  min-width: 32px;
  min-height: 32px;
  padding: 0;
  border-color: transparent;
  background: transparent;
}

.mn-task-section .task-filter-button .action-icon {
  width: 18px;
  height: 18px;
}

/* Signals open near the control that summoned them. Rows are decisions in one
   list, without icon cards, arrows and repeated priority eyebrows. */
@media (max-width: 767px) {
  #modal-root > .modal-backdrop:has(> .notification-sheet) {
    align-items: flex-start !important;
    padding-top: calc(76px + env(safe-area-inset-top)) !important;
  }
}

.modal-sheet.notification-sheet {
  width: min(420px, 100%) !important;
  max-height: calc(100dvh - var(--dock-clearance) - 84px - env(safe-area-inset-top)) !important;
  border-radius: 22px !important;
}

.notification-sheet .modal-head {
  padding: 18px var(--ui-sheet-gutter) 10px !important;
  align-items: center !important;
}

.notification-sheet .modal-head h2,
html[data-theme='dark'] .notification-sheet .modal-head h2 {
  font-size: 24px !important;
  line-height: 1.05 !important;
  letter-spacing: -0.035em !important;
}

.notification-sheet .modal-head .icon-button {
  width: 38px !important;
  min-width: 38px !important;
  height: 38px !important;
}

.notification-sheet .modal-body {
  padding: 2px var(--ui-sheet-gutter) 16px !important;
}

.notification-sheet .notification-list {
  display: grid !important;
  overflow: hidden;
  gap: 0 !important;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-row);
  background: var(--ui-surface-inset);
}

.notification-sheet .notification-item {
  position: relative;
  display: block !important;
  min-height: 0 !important;
  padding: 0 !important;
  grid-template-columns: none !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ui-border) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.notification-sheet .notification-item:last-child {
  border-bottom: 0 !important;
}

.notification-sheet .notification-item::before {
  inset: 11px auto 11px 0 !important;
  width: 3px !important;
}

.notification-sheet .notification-item .notification-open,
.notification-sheet .notification-item .notification-open.static {
  display: grid !important;
  width: 100%;
  min-height: 64px !important;
  padding: 12px 13px 9px 15px !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: start;
  gap: 10px !important;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
}

.notification-sheet .notification-item .notification-open .item-main {
  display: grid !important;
  min-width: 0;
  gap: 3px !important;
}

.notification-sheet .notification-item .notification-open .item-main strong {
  font-size: 14px !important;
  line-height: 1.25 !important;
}

.notification-sheet .notification-item .notification-open .item-main small {
  color: var(--ui-text-muted) !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
  -webkit-line-clamp: 2;
}

.notification-sheet .notification-meta {
  align-self: start;
  padding-top: 2px;
  color: var(--mneme-teal-bright) !important;
  font-size: 10px !important;
  font-weight: 800;
  letter-spacing: 0 !important;
  text-transform: none;
  white-space: nowrap;
}

.notification-sheet .notification-actions {
  padding: 0 13px 12px 15px !important;
  gap: 7px !important;
}

.notification-sheet .notification-actions .btn {
  min-height: 40px !important;
  border-radius: 13px !important;
}

.notification-empty {
  display: grid;
  padding: 22px 16px 24px;
  justify-items: center;
  gap: 5px;
  text-align: center;
}

.notification-empty > span {
  display: grid;
  width: 36px;
  height: 36px;
  margin-bottom: 4px;
  place-items: center;
  border-radius: 50%;
  background: rgba(52, 197, 187, 0.1);
  color: var(--mneme-teal-bright);
}

.notification-empty svg {
  width: 19px;
  height: 19px;
}

.notification-empty strong {
  color: var(--theme-text);
  font-size: 15px;
}

.notification-empty small {
  color: var(--ui-text-muted);
  font-size: 11px;
}

/* Photo source is the same kind of immediate choice as a filter. */
.voice-root.photo-source .voice-panel {
  width: min(400px, calc(100vw - 20px)) !important;
}

.voice-root.photo-source .voice-panel::before {
  display: none !important;
}

.voice-root.photo-source .voice-panel-body {
  padding: 18px var(--ui-sheet-gutter) 16px !important;
}

.voice-root.photo-source .voice-panel-head {
  align-items: center !important;
}

.voice-root.photo-source .voice-panel-head h2 {
  font-size: 23px !important;
  line-height: 1.05 !important;
  letter-spacing: -0.035em !important;
}

.voice-root.photo-source .voice-panel-head .icon-button {
  width: 38px !important;
  min-width: 38px !important;
  height: 38px !important;
}

.voice-root.photo-source .photo-source-grid {
  display: grid !important;
  overflow: hidden;
  margin-top: 10px;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0 !important;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-row);
  background: var(--ui-surface-inset);
}

.voice-root.photo-source .photo-source-grid > button {
  display: grid !important;
  min-height: 66px !important;
  padding: 10px 12px !important;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  justify-items: stretch !important;
  place-content: normal !important;
  gap: 11px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ui-border) !important;
  border-radius: 0 !important;
  background: transparent !important;
  text-align: left;
}

.voice-root.photo-source .photo-source-grid > button:last-child {
  border-bottom: 0 !important;
}

.voice-root.photo-source .photo-source-grid > button > span:first-child {
  width: 40px !important;
  height: 40px !important;
}

.voice-root.photo-source .photo-source-grid .item-main {
  display: grid;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  place-items: start !important;
  gap: 2px;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--theme-text) !important;
}

.voice-root.photo-source .photo-source-grid strong {
  font-size: 14px !important;
}

.voice-root.photo-source .photo-source-grid small {
  font-size: 11px !important;
}

.voice-root.photo-source .camera-privacy {
  margin: 10px 2px 0;
  font-size: 11px;
}

/* --------------------------------------------------------------------------
   Tariff discovery and checkout

   The tariff uses MNEME's bookmark motif as its one strong visual signal.
   Checkout itself stays linear: offer, included features, payment choice.
   -------------------------------------------------------------------------- */

.header-tariff-button {
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid rgba(52, 197, 187, 0.28);
  border-radius: 999px;
  background: rgba(52, 197, 187, 0.1);
  color: var(--mneme-teal-bright);
  font: 800 11px/1 var(--font-body);
}

.header-tariff-button:active {
  transform: scale(0.97);
}

html[data-theme='light'] .header-tariff-button {
  border-color: rgba(13, 105, 100, 0.22);
  background: rgba(13, 105, 100, 0.08);
  color: #0d6964;
}

.mn-access-card {
  position: relative;
  display: grid;
  overflow: hidden;
  padding: 18px !important;
  gap: 15px;
  border-color: rgba(52, 197, 187, 0.25) !important;
}

.mn-access-ribbon {
  position: absolute;
  top: 0;
  right: 22px;
  width: 32px;
  height: 49px;
  background: linear-gradient(180deg, #45cfc6 0%, #1e9e98 100%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 76%, 0 100%);
}

.mn-access-card.is-active .mn-access-ribbon {
  background: linear-gradient(180deg, #74c984 0%, #4d985d 100%);
}

.mn-access-head {
  display: grid;
  padding-right: 44px;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
}

.mn-access-mark {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 14px;
  background: rgba(52, 197, 187, 0.12);
  color: var(--mneme-teal-bright);
}

.mn-access-mark svg {
  width: 21px;
  height: 21px;
}

.mn-access-head h2 {
  margin: 0;
  font-size: 22px !important;
  line-height: 1.05;
  letter-spacing: -0.035em;
}

.mn-access-head p {
  margin: 4px 0 0;
  color: var(--ui-text-muted);
  font-size: 12px;
}

.mn-access-price {
  grid-column: 2;
  color: var(--theme-text);
  font-size: 18px;
  line-height: 1;
}

.mn-access-price small {
  color: var(--ui-text-muted);
  font-size: 10px;
  font-weight: 650;
}

.mn-access-features,
.payment-feature-list {
  display: grid;
  gap: 9px;
}

.mn-access-features > span,
.payment-feature-list > span {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  color: var(--theme-text);
}

.mn-access-features svg,
.payment-feature-list svg {
  width: 18px;
  height: 18px;
  color: var(--mneme-teal-bright);
}

.mn-access-features b,
.payment-feature-list b {
  font-size: 12px;
  font-weight: 650;
}

.mn-access-usage {
  display: flex;
  gap: 16px;
  color: var(--ui-text-muted);
  font-size: 11px;
}

.mn-access-usage strong {
  margin-right: 4px;
  color: var(--theme-text);
  font-size: 14px;
}

.mn-access-action {
  min-height: 48px !important;
}

.mn-access-free-note {
  margin: -6px 0 0;
  color: var(--ui-text-muted);
  font-size: 10px;
  line-height: 1.4;
  text-align: center;
}

.payment-sheet {
  width: min(460px, 100%) !important;
}

.payment-sheet .modal-head h2 {
  font-size: clamp(24px, 6.5vw, 30px) !important;
  letter-spacing: -0.04em !important;
}

.payment-sheet .modal-body {
  display: grid;
  gap: 16px !important;
}

.payment-offer {
  position: relative;
  display: grid;
  overflow: hidden;
  padding: 16px;
  gap: 15px;
  border: 1px solid rgba(52, 197, 187, 0.24);
  border-radius: 20px;
  background: rgba(52, 197, 187, 0.06);
}

.payment-offer::after {
  position: absolute;
  top: 0;
  right: 18px;
  width: 25px;
  height: 38px;
  background: #35bdb5;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 76%, 0 100%);
  content: '';
}

.payment-offer-main {
  display: grid;
  padding-right: 32px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
}

.payment-offer-main > div:first-child > strong {
  color: var(--theme-text);
  font-size: 20px;
  line-height: 1.05;
}

.payment-offer-main p {
  max-width: 29ch;
  margin: 5px 0 0;
  color: var(--ui-text-muted);
  font-size: 11px;
  line-height: 1.4;
}

.payment-price {
  display: grid;
  justify-items: end;
  gap: 3px;
  text-align: right;
}

.payment-price strong {
  color: var(--theme-text);
  font-size: 19px;
  white-space: nowrap;
}

.payment-price small {
  color: var(--ui-text-muted);
  font-size: 9px;
}

.payment-choice-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
}

.payment-choice-head strong {
  color: var(--theme-text);
  font-size: 14px;
}

.payment-choice-head small {
  color: var(--ui-text-muted);
  font-size: 9px;
  text-align: right;
}

.payment-methods {
  display: grid !important;
  overflow: hidden;
  margin-top: -6px !important;
  gap: 0 !important;
  border: 1px solid var(--ui-border);
  border-radius: 18px;
  background: var(--ui-surface-inset);
}

.payment-method {
  display: grid !important;
  min-height: 64px !important;
  padding: 10px 12px !important;
  grid-template-columns: 38px minmax(0, 1fr) 18px;
  align-items: center !important;
  gap: 11px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ui-border) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.payment-method:last-child {
  border-bottom: 0 !important;
}

.payment-method-mark {
  display: grid !important;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 12px;
  background: rgba(52, 197, 187, 0.11);
  color: var(--mneme-teal-bright);
  font-size: 15px;
  font-style: normal;
  font-weight: 850;
}

.payment-method-mark svg {
  width: 20px;
  height: 20px;
}

.payment-method-copy {
  display: grid !important;
  min-width: 0;
  gap: 2px !important;
}

.payment-method strong {
  font-size: 14px !important;
}

.payment-method small {
  overflow: hidden;
  font-size: 10px !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.payment-method > i {
  display: grid;
  width: 18px !important;
  place-items: center;
  color: var(--mneme-teal-bright) !important;
}

.payment-method > i svg {
  width: 17px;
  height: 17px;
}

.payment-note {
  margin: -4px 2px 0 !important;
  color: var(--ui-text-muted) !important;
  font-size: 10px !important;
  line-height: 1.4 !important;
  text-align: center;
}

.payment-unavailable {
  display: grid;
  padding: 15px;
  gap: 3px;
  border: 1px solid var(--ui-border);
  border-radius: 16px;
  background: var(--ui-surface-inset);
}

.payment-unavailable strong {
  color: var(--theme-text);
  font-size: 13px;
}

.payment-unavailable small {
  color: var(--ui-text-muted);
  font-size: 11px;
}

.wallet-payment {
  gap: 12px !important;
}

.wallet-payment-summary {
  padding: 16px !important;
  border-color: rgba(52, 197, 187, 0.24) !important;
  background: rgba(52, 197, 187, 0.07) !important;
}

.wallet-payment-summary strong {
  color: var(--theme-text);
  font-size: 22px;
}

.wallet-payment-summary small {
  color: var(--ui-text-muted);
  font-size: 11px;
}

.wallet-address {
  gap: 6px !important;
}

.payment-success,
.payment-wait {
  display: grid !important;
  padding: 8px 2px 4px !important;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 13px;
  text-align: left !important;
}

.payment-success > span,
.payment-wait > span {
  display: grid;
  width: 48px !important;
  height: 48px !important;
  margin: 0 !important;
  place-items: center;
  border-radius: 15px !important;
  background: rgba(52, 197, 187, 0.12) !important;
  color: var(--mneme-teal-bright) !important;
  font-size: 22px !important;
}

.payment-success h3,
.payment-wait h3 {
  margin: 0;
  font-size: 16px !important;
  line-height: 1.2;
}

.payment-success p,
.payment-wait p {
  margin: 4px 0 0;
}

@media (max-width: 380px) {
  .header-tariff-button {
    min-height: 32px;
    padding-inline: 9px;
    font-size: 10px;
  }

  .payment-price {
    justify-items: end;
    text-align: right;
  }

  .payment-choice-head small {
    display: none;
  }
}

@media (max-height: 700px) {
  .payment-sheet .modal-head {
    padding-top: 16px !important;
    padding-bottom: 8px !important;
  }

  .payment-sheet .modal-body {
    padding-bottom: 10px !important;
    gap: 10px !important;
  }

  .payment-offer {
    padding: 12px 14px;
    gap: 10px;
  }

  .payment-offer-main p {
    margin-top: 3px;
    line-height: 1.3;
  }

  .payment-feature-list {
    gap: 5px;
  }

  .payment-feature-list > span {
    gap: 6px;
  }

  .payment-feature-list b {
    font-size: 10px;
  }

  .payment-method {
    min-height: 55px !important;
    padding-block: 8px !important;
  }

  .payment-note {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .header-tariff-button {
    transition: none !important;
  }
}

/* Occurrence-level routine changes live with the day that is being changed.
   The sheet is deliberately flat: one summary, one optional explanation, one action. */
.routine-occurrence-modal .modal-body {
  gap: 14px !important;
}

.routine-occurrence-form {
  gap: 18px !important;
}

.routine-occurrence-summary {
  position: relative;
  display: grid;
  padding: 4px 2px 4px 18px;
  gap: 4px;
}

.routine-occurrence-summary::before {
  position: absolute;
  inset: 2px auto 2px 0;
  width: 5px;
  border-radius: 999px;
  background: linear-gradient(180deg, #48d7ce, #238e88);
  content: '';
}

.routine-occurrence-summary > span {
  color: #5adbd2;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.routine-occurrence-summary > strong {
  color: var(--theme-text);
  font-family: var(--font-display);
  font-size: clamp(23px, 6vw, 30px);
  line-height: 1.04;
  letter-spacing: -0.045em;
}

.routine-occurrence-summary > small {
  max-width: 36ch;
  color: var(--ui-text-muted);
  font-size: 12px;
  line-height: 1.45;
}

.routine-reason-field {
  margin: 0 !important;
}

/* A quiet in-product finance habit: no push, no extra dashboard block. */
.screen-today .today-pocket.money.quick-entry strong {
  color: #5adbd2;
}

.screen-today .today-pocket.money.quick-entry .today-pocket-tail {
  border-color: #5adbd2;
}

/* Meal history is one ledger, not a card inside a card. Meal periods replace
   raw timestamps as the strongest visual cue. */
.mn-sport-meal-journal,
html[data-theme='dark'] .mn-sport-meal-journal,
html[data-theme='light'] .mn-sport-meal-journal {
  margin-top: 2px !important;
  padding: 0 !important;
  gap: 10px !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

.mn-sport-meal-journal > header {
  padding: 0 2px;
}

.mn-sport-meal-journal .meal-journal-list {
  margin: 0 !important;
  border: 0;
  border-block: 1px solid rgba(241, 228, 205, 0.09);
  border-radius: 0;
  background: transparent;
}

html[data-theme='light'] .mn-sport-meal-journal .meal-journal-list {
  border-color: rgba(24, 54, 50, 0.12);
  background: transparent;
}

.mn-sport-meal-journal .mn-meal-timeline-row {
  min-height: 84px;
  padding: 11px 13px !important;
  grid-template-columns: 48px minmax(0, 1fr) minmax(58px, auto) 10px !important;
  gap: 10px !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.mn-meal-period {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--meal-period-color) 34%, transparent);
  border-radius: 16px;
  background: color-mix(in srgb, var(--meal-period-color) 11%, transparent);
  color: var(--meal-period-color);
}

.mn-meal-period svg {
  width: 27px;
  height: 27px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mn-meal-period.breakfast {
  --meal-period-color: #e4ba61;
}

.mn-meal-period.lunch {
  --meal-period-color: #75c98a;
}

.mn-meal-period.dinner {
  --meal-period-color: #b99be0;
}

.mn-meal-period.snack {
  --meal-period-color: #55d5cc;
}

.mn-meal-period.other {
  --meal-period-color: #aeb7ad;
}

.mn-meal-timeline-row .item-main strong {
  font-size: 15px;
  -webkit-line-clamp: 1;
}

.mn-meal-timeline-row .item-main small {
  line-height: 1.35;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* Checkout keeps a single hierarchy: plan, benefits, payment methods. */
.mn-access-mark {
  width: 26px;
  height: 26px;
  border-radius: 0;
  background: transparent;
  color: #fff;
}

.mn-access-head {
  grid-template-columns: 26px minmax(0, 1fr);
}

.mn-access-mark svg,
.mn-access-mark svg path,
.mn-access-features svg [data-glyph-main],
.payment-feature-list svg [data-glyph-main] {
  fill: #fff !important;
  color: #fff !important;
}

.payment-offer,
html[data-theme='light'] .payment-offer {
  overflow: visible;
  padding: 0 2px 15px;
  border: 0;
  border-bottom: 1px solid var(--ui-border);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.payment-offer::after {
  top: -12px;
  right: 4px;
}

.payment-method-mark {
  width: 28px;
  height: 28px;
  border-radius: 0;
  background: transparent;
  color: #fff;
}

.payment-method {
  grid-template-columns: 28px minmax(0, 1fr) 18px;
}

.payment-method > i,
.payment-method > i svg {
  color: #fff !important;
}

.payment-method > i svg path {
  fill: none !important;
  stroke: #fff !important;
}

.payment-method-mark svg [data-glyph-main],
.payment-method-mark svg [data-glyph-soft],
.payment-method-mark svg [data-glyph-accent] {
  fill: #fff !important;
}

@media (max-width: 430px) {
  .mn-sport-meal-journal .mn-meal-timeline-row {
    grid-template-columns: 44px minmax(0, 1fr) minmax(54px, auto) !important;
  }

  .mn-meal-period {
    width: 42px;
    height: 42px;
    border-radius: 14px;
  }

  .mn-meal-period svg {
    width: 24px;
    height: 24px;
  }
}

/* Keep provider artwork at its intended branded size after the tariff reset above. */
.payment-method {
  grid-template-columns: 38px minmax(0, 1fr) 18px;
}

.payment-method-mark,
.payment-method-mark .payment-brand-icon {
  width: 38px;
  height: 38px;
}

/* --------------------------------------------------------------------------
   Destination-first navigation

   Profile and payment surfaces stay content-led. Decorative illustration is
   reserved for explicitly approved placements, not inferred from a section.
   -------------------------------------------------------------------------- */

.mn-profile-hero {
  min-height: 126px !important;
  padding: 18px !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: center !important;
}

.mn-profile-identity {
  display: grid;
  padding-right: 26px;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.mn-profile-avatar {
  display: grid;
  width: 54px;
  height: 54px;
  overflow: hidden;
  place-items: center;
  border: 1px solid var(--ui-border);
  border-radius: 19px;
  background: rgba(52, 197, 187, 0.12);
  color: var(--theme-text);
  font-family: var(--font-display);
  font-size: 20px;
}

.mn-profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mn-profile-hero-copy {
  padding-right: 0 !important;
  align-self: center;
  align-content: center;
}

.mn-profile-hero-copy h1 {
  font-size: clamp(29px, 8.5vw, 39px) !important;
}

.mn-profile-hero-copy p {
  max-width: 24ch;
  line-height: 1.35;
}

.mn-profile-activity {
  display: grid !important;
  overflow: hidden;
  padding: 16px !important;
  gap: 0 !important;
}

.mn-profile-activity-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 36px;
  align-items: center;
  gap: 10px;
}

.mn-profile-activity-head h2,
.mn-profile-community-head h2 {
  margin: 0;
  color: var(--theme-text);
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1;
  letter-spacing: -0.04em;
}

.mn-profile-activity-head p,
.mn-profile-community-head p {
  margin: 5px 0 0;
  color: var(--ui-text-muted);
  font-size: 10px;
  line-height: 1.4;
}

.mn-profile-activity-head > span {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 13px;
  background: rgba(52, 197, 187, 0.1);
  color: #55d5cc;
}

.mn-profile-activity-head > span svg {
  width: 20px;
  height: 20px;
}

.mn-profile-usage-grid {
  display: grid;
  margin-top: 15px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-block: 1px solid var(--ui-border);
}

.mn-profile-usage-item {
  display: grid;
  min-width: 0;
  min-height: 76px;
  padding: 11px 10px;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}

.mn-profile-usage-item:nth-child(odd) {
  border-right: 1px solid var(--ui-border);
}

.mn-profile-usage-item:nth-child(n + 3) {
  border-top: 1px solid var(--ui-border);
}

.mn-profile-usage-icon {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 11px;
  background: rgba(52, 197, 187, 0.1);
  color: #55d5cc;
}

.mn-profile-usage-icon svg {
  width: 17px;
  height: 17px;
}

.mn-profile-usage-item.finance .mn-profile-usage-icon {
  background: rgba(115, 204, 118, 0.1);
  color: #87d58a;
}

.mn-profile-usage-item.food .mn-profile-usage-icon {
  background: rgba(224, 181, 91, 0.1);
  color: #e0b55b;
}

.mn-profile-usage-item.sport .mn-profile-usage-icon {
  background: rgba(176, 125, 218, 0.1);
  color: #b98add;
}

.mn-profile-usage-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.mn-profile-usage-copy strong {
  overflow: hidden;
  color: var(--theme-text);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mn-profile-usage-copy small {
  overflow: hidden;
  color: var(--ui-text-muted);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mn-profile-usage-item > b {
  color: var(--theme-text);
  font-family: var(--font-display);
  font-size: 19px;
  letter-spacing: -0.04em;
}

.mn-profile-category {
  display: grid;
  width: 100%;
  min-height: 76px;
  padding: 14px 16px !important;
  grid-template-columns: 42px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 12px;
  color: inherit;
  text-align: left;
}

.mn-profile-category-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 14px;
  background: rgba(52, 197, 187, 0.1);
  color: #55d5cc;
}

.mn-profile-category-icon.promo {
  background: rgba(224, 181, 91, 0.11);
  color: #e0b55b;
}

.mn-profile-category-icon svg,
.mn-profile-category-tail svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mn-profile-category-copy {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.mn-profile-category-copy strong,
.mn-profile-promo-head h2 {
  margin: 0;
  color: var(--theme-text);
  font-family: var(--font-display);
  font-size: 21px;
  line-height: 1;
  letter-spacing: -0.04em;
}

.mn-profile-category-copy small,
.mn-profile-promo-head p {
  margin: 0;
  color: var(--ui-text-muted);
  font-size: 10px;
  line-height: 1.4;
}

.mn-profile-category-tail {
  color: var(--ui-text-muted);
}

.mn-profile-category-tail svg {
  width: 18px;
  height: 18px;
}

.mn-profile-achievements-category {
  min-height: 124px;
  align-items: start;
}

.mn-profile-achievements-category .mn-profile-category-icon,
.mn-profile-achievements-category .mn-profile-category-tail {
  margin-top: 2px;
}

.mn-achievement-segments {
  display: block;
  width: 100%;
  height: 5px;
  margin-top: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--ui-border);
}

.mn-achievement-segments i {
  display: block;
  width: var(--achievement-profile-progress);
  height: 100%;
  border-radius: inherit;
  background: #55d5cc;
}

.mn-profile-achievement-next {
  overflow: hidden;
  margin-top: 1px;
  color: var(--theme-text);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mn-profile-promo-category {
  display: grid !important;
  padding: 16px !important;
  gap: 14px !important;
}

.mn-profile-promo-head {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.mn-profile-promo-head > div {
  display: grid;
  gap: 5px;
}

.mn-profile-welcome-promo {
  display: grid;
  padding: 13px 13px 13px 15px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(224, 181, 91, 0.25);
  border-radius: 17px;
  background: rgba(224, 181, 91, 0.07);
}

.mn-profile-welcome-promo > div {
  display: grid;
  min-width: 0;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 3px 9px;
}

.mn-profile-welcome-promo span,
.mn-profile-welcome-promo small {
  color: var(--ui-text-muted);
  font-size: 9px;
}

.mn-profile-welcome-promo strong {
  color: #e8c675;
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: 0.03em;
}

.mn-profile-welcome-promo small {
  grid-column: 1 / -1;
}

.mn-profile-welcome-promo button {
  min-height: 38px;
  padding: 0 13px;
  border: 0;
  border-radius: 13px;
  color: #102322;
  background: #63d1a5;
  font: 820 11px/1 var(--font-ui);
}

.mn-profile-welcome-promo.redeemed {
  border-color: rgba(52, 197, 187, 0.22);
  background: rgba(52, 197, 187, 0.07);
}

.mn-profile-welcome-promo.redeemed strong {
  color: #55d5cc;
}

.mn-profile-welcome-promo .mn-promo-check {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  background: rgba(52, 197, 187, 0.12);
  color: #55d5cc;
}

.mn-profile-welcome-promo .mn-promo-check svg {
  width: 18px;
  height: 18px;
}

.mn-profile-community {
  display: grid !important;
  padding: 16px !important;
  gap: 14px !important;
}

.mn-profile-community-head {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.mn-profile-community-icon {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 16px;
  background: #2aabee;
  color: #fff;
}

.mn-profile-community-icon svg {
  width: 25px;
  height: 25px;
}

.mn-profile-channel-action {
  min-height: 44px;
}

.mn-profile-community-links {
  display: grid;
  border-top: 1px solid var(--ui-border);
}

.mn-profile-community-links > button {
  display: grid;
  min-height: 64px;
  padding: 10px 0;
  grid-template-columns: 34px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 10px;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}

.mn-profile-community-links > button + button {
  border-top: 1px solid var(--ui-border);
}

.mn-profile-community-links > button > span:first-child {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 12px;
  background: rgba(52, 197, 187, 0.1);
  color: #55d5cc;
}

.mn-profile-community-links > button > span:first-child svg {
  width: 18px;
  height: 18px;
}

.mn-profile-community-links > button > span:nth-child(2) {
  display: grid;
  gap: 3px;
}

.mn-profile-community-links strong {
  color: var(--theme-text);
  font-size: 13px;
}

.mn-profile-community-links small {
  color: var(--ui-text-muted);
  font-size: 9px;
}

.mn-profile-community-links i {
  color: var(--ui-text-muted);
}

.mn-profile-community-links i svg {
  width: 17px;
  height: 17px;
}

body.channel-gate-open #bottom-navigation,
body.channel-gate-open .voice-root {
  display: none !important;
}

.channel-gate-page {
  display: grid;
  min-height: calc(100dvh - var(--mobile-header-height, 92px) - 28px);
  padding: 18px 0 calc(24px + env(safe-area-inset-bottom));
  place-items: center;
}

.channel-gate-card {
  display: grid;
  width: min(100%, 420px);
  padding: 24px 20px;
  gap: 15px;
  border: 1px solid var(--ui-border);
  border-radius: 28px;
  background:
    radial-gradient(circle at 78% 8%, rgba(67, 201, 208, 0.16), transparent 36%),
    var(--ui-surface-inset);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.24);
  text-align: center;
}

.channel-gate-mark {
  display: grid;
  width: 62px;
  height: 62px;
  margin-inline: auto;
  place-items: center;
  border-radius: 22px;
  background: #2aabee;
  color: #fff;
}

.channel-gate-mark svg {
  width: 32px;
  height: 32px;
}

.channel-gate-card h1 {
  margin: 0;
  color: var(--theme-text);
  font-family: var(--font-display);
  font-size: clamp(28px, 8vw, 42px);
  line-height: 0.95;
}

.channel-gate-card p {
  margin: 0;
  color: var(--ui-text-muted);
  font-size: 13px;
  line-height: 1.45;
}

.channel-gate-list {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--ui-border);
  border-radius: 18px;
  background: rgba(2, 8, 8, 0.22);
}

.channel-gate-list > button {
  display: grid;
  min-height: 66px;
  padding: 11px 13px;
  grid-template-columns: 38px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 10px;
  border: 0;
  border-bottom: 1px solid var(--ui-border);
  background: transparent;
  color: inherit;
  text-align: left;
}

.channel-gate-list > button:last-child {
  border-bottom: 0;
}

.channel-gate-list > button > span:first-child {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 13px;
  background: rgba(52, 197, 187, 0.11);
  color: #55d5cc;
}

.channel-gate-list > button.done > span:first-child {
  background: rgba(98, 195, 129, 0.14);
  color: #79d897;
}

.channel-gate-list svg {
  width: 18px;
  height: 18px;
}

.channel-gate-list strong {
  display: block;
  overflow: hidden;
  color: var(--theme-text);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.channel-gate-list small,
.channel-gate-note {
  color: var(--ui-text-muted);
  font-size: 10px;
  line-height: 1.35;
}

.channel-gate-list i {
  color: var(--ui-text-muted);
}

@media (max-width: 370px) {
  .mn-profile-identity {
    padding-right: 22px;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 10px;
  }

  .mn-profile-avatar {
    width: 48px;
    height: 48px;
    border-radius: 17px;
  }

  .mn-profile-hero-copy h1 {
    font-size: 28px !important;
  }

  .mn-profile-hero-copy p {
    font-size: 9px !important;
  }

  .mn-profile-usage-item {
    min-height: 70px;
    padding-inline: 7px;
    grid-template-columns: 29px minmax(0, 1fr) auto;
    gap: 6px;
  }

  .mn-profile-usage-icon {
    width: 29px;
    height: 29px;
    border-radius: 10px;
  }

  .mn-profile-usage-item > b {
    font-size: 17px;
  }
}

/* A meal period is the navigation row. Individual entries are quiet ledger
   lines under it, avoiding the old card-inside-card hierarchy. */
.mn-sport-meal-journal .meal-period-list {
  overflow: hidden;
  border-block: 1px solid var(--ui-border);
}

.mn-meal-period-group + .mn-meal-period-group {
  border-top: 1px solid var(--ui-border);
}

.mn-meal-period-head {
  display: grid;
  min-height: 72px;
  padding: 10px 4px 10px 2px;
  grid-template-columns: 46px minmax(0, 1fr) 42px;
  align-items: center;
  gap: 11px;
}

.mn-meal-period-head .item-main strong {
  color: var(--theme-text);
  font-size: 16px;
}

.mn-meal-period-head .item-main small {
  margin-top: 3px;
  color: var(--ui-text-muted);
  font-size: 10px;
}

.mn-meal-period-add {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 0;
  border-radius: 14px;
  background: rgba(52, 197, 187, 0.1);
  color: #55d5cc;
}

.mn-meal-period-add svg {
  width: 21px;
  height: 21px;
}

.mn-meal-period-entries {
  margin-left: 58px;
  border-top: 1px solid color-mix(in srgb, var(--ui-border) 72%, transparent);
}

.mn-meal-entry {
  display: grid;
  width: 100%;
  min-height: 58px;
  padding: 9px 4px 9px 0;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}

.mn-meal-entry + .mn-meal-entry {
  border-top: 1px solid color-mix(in srgb, var(--ui-border) 72%, transparent);
}

.mn-meal-entry .item-main strong {
  font-size: 13px;
  -webkit-line-clamp: 1;
}

.mn-meal-entry .item-main small {
  margin-top: 3px;
  color: var(--ui-text-muted);
  font-size: 9px;
}

.mn-meal-entry .mn-sport-value {
  font-size: 11px;
  white-space: nowrap;
}

/* Navigational sheets use a familiar top-left back action. Closing sheets keep
   the X on the right; these jobs no longer swap places from screen to screen. */
#modal-root > .modal-backdrop .modal-head.has-back {
  grid-template-columns: 44px minmax(0, 1fr) !important;
  align-items: center !important;
}

.modal-head.has-back .modal-back-button {
  grid-column: 1;
  grid-row: 1;
}

.modal-head.has-back > div {
  grid-column: 2;
  grid-row: 1;
}

.modal-head.has-back h2 {
  font-size: clamp(24px, 6.2vw, 34px) !important;
}

.mn-achievements-summary {
  display: grid;
  padding: 4px 2px 16px;
  gap: 5px;
  border-bottom: 1px solid var(--ui-border);
}

.mn-achievements-summary strong {
  color: var(--theme-text);
  font-size: 15px;
  line-height: 1.25;
}

.mn-achievements-summary span {
  color: var(--ui-text-muted);
  font-size: 10px;
  line-height: 1.45;
}

.mn-achievement-list {
  display: grid;
}

.mn-achievement-row {
  display: grid;
  min-height: 72px;
  padding: 11px 2px;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  opacity: 0.52;
  border-bottom: 1px solid var(--ui-border);
}

.mn-achievement-row.ready {
  opacity: 1;
}

.mn-achievement-row > span {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 12px;
  background: rgba(52, 197, 187, 0.1);
  color: #55d5cc;
}

.mn-achievement-row > span svg {
  width: 18px;
  height: 18px;
}

.mn-achievement-row div {
  display: grid;
  gap: 4px;
}

.mn-achievement-row strong {
  color: var(--theme-text);
  font-size: 14px;
}

.mn-achievement-row small {
  color: var(--ui-text-muted);
  font-size: 10px;
  line-height: 1.4;
}

/* Sport overview uses real pictograms. The colored bookmark is reserved for
   section identity, not repeated as a generic list marker. */
.mn-sport-day-glance .mn-sport-glance-row {
  grid-template-columns: 44px minmax(0, 1fr) auto !important;
  gap: 12px !important;
}

.mn-sport-glance-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 14px;
  background: color-mix(in srgb, var(--sport-glance-color) 12%, transparent);
  color: var(--sport-glance-color);
}

.mn-sport-glance-icon.nutrition {
  --sport-glance-color: #55d5cc;
}

.mn-sport-glance-icon.training {
  --sport-glance-color: #75c98a;
}

.mn-sport-glance-icon.measurement {
  --sport-glance-color: #b99be0;
}

.mn-sport-glance-icon .mneme-glyph {
  width: 23px;
  height: 23px;
}

/* Signals are a decision queue, not a stack of cards. Urgency is expressed
   once by group order; every row then keeps one icon, one text block and a
   compact pair of decisions. */
.notification-sheet .modal-body {
  padding: 4px var(--ui-sheet-gutter) 18px !important;
}

.notification-queue,
.notification-group {
  display: grid;
}

.notification-queue {
  gap: 19px;
}

.notification-group {
  gap: 5px;
}

.notification-group-head {
  display: flex;
  min-height: 28px;
  padding: 0 2px;
  align-items: center;
  justify-content: space-between;
}

.notification-group-head strong {
  color: var(--theme-text);
  font-size: 13px;
  line-height: 1.2;
}

.notification-group-head span {
  display: grid;
  min-width: 25px;
  height: 25px;
  padding-inline: 7px;
  place-items: center;
  border-radius: 50%;
  background: rgba(52, 197, 187, 0.09);
  color: var(--mneme-teal-bright);
  font-size: 10px;
  font-weight: 800;
}

.notification-sheet .notification-list {
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.notification-sheet .notification-item,
html[data-theme='dark'] .notification-sheet .notification-item,
html[data-theme='light'] .notification-sheet .notification-item {
  display: grid !important;
  min-height: 0 !important;
  padding: 13px 0 !important;
  grid-template-columns: 38px minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 11px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ui-border) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.notification-sheet .notification-item:last-child {
  border-bottom: 0 !important;
}

.notification-sheet .notification-item::before {
  display: none !important;
}

.notification-kind {
  display: grid;
  width: 36px;
  height: 36px;
  margin-top: 1px;
  place-items: center;
  border-radius: 12px;
  background: rgba(52, 197, 187, 0.09);
  color: #55d5cc;
}

.notification-item.category-sport .notification-kind {
  background: rgba(117, 201, 138, 0.1);
  color: #75c98a;
}

.notification-item.category-calendar .notification-kind,
.notification-item.category-event .notification-kind {
  background: rgba(228, 186, 97, 0.1);
  color: #e4ba61;
}

.notification-kind svg {
  width: 20px;
  height: 20px;
}

.notification-item-body {
  display: grid;
  min-width: 0;
  gap: 9px;
}

.notification-sheet .notification-item .notification-open,
.notification-sheet .notification-item .notification-open.static {
  display: block !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
}

.notification-sheet .notification-item .notification-open .item-main {
  display: grid !important;
  gap: 4px !important;
}

.notification-sheet .notification-item .notification-open .item-main strong {
  font-size: 14px !important;
  line-height: 1.3 !important;
  -webkit-line-clamp: 2;
}

.notification-sheet .notification-item .notification-open .item-main small {
  font-size: 10px !important;
  line-height: 1.4 !important;
  -webkit-line-clamp: 2;
}

.notification-sheet .notification-actions {
  display: flex !important;
  padding: 0 !important;
  flex-wrap: wrap;
  gap: 7px !important;
}

.notification-action {
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 12px;
  font: inherit;
  font-size: 11px;
  font-weight: 820;
}

.notification-action.is-primary {
  background: #2e918a;
  color: #fff;
}

.notification-action.is-quiet {
  border-color: var(--ui-border);
  background: transparent;
  color: var(--theme-text);
}

/* Meal entries visibly branch from their named period. The tree mark carries
   hierarchy; it replaces another icon or nested card. */
.mn-sport-meal-journal .mn-meal-period-entries {
  margin-left: 36px;
}

.mn-sport-meal-journal .mn-meal-entry {
  grid-template-columns: 21px minmax(0, 1fr) auto;
  gap: 8px;
}

.mn-meal-branch {
  align-self: stretch;
  padding-top: 5px;
  color: color-mix(in srgb, var(--ui-text-muted) 68%, transparent);
  font-family: Arial, sans-serif;
  font-size: 19px;
  line-height: 1;
}

/* Text analysis is one changing state, not three decorative badges. */
.text-processing-sheet .modal-body {
  min-height: 220px;
}

.text-processing-sheet .text-processing {
  display: grid;
  min-height: 190px;
  padding: 22px 2px 10px;
  align-content: center;
  text-align: left;
}

.text-processing-progress {
  overflow: hidden;
  width: 100%;
  height: 3px;
  margin-bottom: 24px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ui-border) 76%, transparent);
}

.text-processing-progress span {
  display: block;
  width: 34%;
  height: 100%;
  border-radius: inherit;
  background: var(--mneme-teal-bright);
  transform: translateX(0);
  transition: width 420ms ease;
  animation: text-processing-pulse 1.4s ease-in-out infinite alternate;
}

.text-processing-progress span[data-stage='1'] {
  width: 66%;
}

.text-processing-progress span[data-stage='2'] {
  width: 88%;
}

.text-processing-sheet .text-processing h2 {
  margin: 0;
  color: var(--theme-text);
  font-size: clamp(21px, 6.6vw, 28px);
  line-height: 1.05;
  text-align: left;
}

.text-processing-sheet .text-processing-hint {
  max-width: none;
  margin: 12px 0 0;
  font-size: 12px;
  line-height: 1.45;
  text-align: left;
}

@keyframes text-processing-pulse {
  from {
    opacity: 0.68;
  }

  to {
    opacity: 1;
  }
}

/* The meal review is one editable table: every row owns a product name and
   its grams. Number badges, nested cards and repeated source quotes are gone. */
.meal-review-sheet .modal-body {
  padding-top: 4px !important;
}

.meal-review-form {
  display: grid;
  gap: 10px;
}

.meal-review-meta {
  display: flex;
  min-width: 0;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.meal-review-meta strong {
  color: var(--theme-text);
  font-size: 15px;
}

.meal-review-meta span,
.meal-review-hint {
  color: var(--ui-text-muted);
  font-size: 10px;
  line-height: 1.4;
}

.meal-review-meta span {
  text-align: right;
}

.meal-review-hint {
  margin: 0 0 2px;
}

.meal-review-sheet .meal-preview-list {
  display: grid;
  gap: 0;
  border-block: 1px solid var(--ui-border);
}

.meal-review-sheet .meal-preview-item,
.meal-review-sheet .meal-preview-item.estimated {
  display: grid;
  padding: 13px 0;
  grid-template-columns: minmax(0, 1fr) minmax(92px, 0.38fr);
  align-items: end;
  gap: 9px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.meal-review-sheet .meal-preview-item + .meal-preview-item {
  border-top: 1px solid var(--ui-border);
}

.meal-review-sheet .meal-preview-item .field,
.meal-review-sheet .meal-preview-item .field.amount {
  min-width: 0;
  grid-column: auto;
}

.meal-review-sheet .meal-preview-item .field > span {
  overflow: hidden;
  color: var(--ui-text-muted);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.meal-review-sheet .meal-preview-item input,
.meal-review-sheet .meal-grams {
  width: 100%;
  min-height: 48px;
  border-radius: 13px !important;
}

.meal-review-sheet .meal-grams {
  position: relative;
  display: block;
}

.meal-review-sheet .meal-grams input {
  width: 100% !important;
  min-width: 0 !important;
  height: 46px !important;
  min-height: 46px !important;
  padding-inline: 10px 27px !important;
  font-size: 16px !important;
  font-variant-numeric: tabular-nums;
}

.meal-review-sheet .meal-grams em {
  position: absolute;
  top: 50%;
  right: 9px;
  padding: 0;
  transform: translateY(-50%);
}

@media (max-width: 370px) {
  .meal-review-meta {
    display: grid;
    gap: 2px;
  }

  .meal-review-meta span {
    text-align: left;
  }

  .meal-review-sheet .meal-preview-item,
  .meal-review-sheet .meal-preview-item.estimated {
    grid-template-columns: minmax(0, 1fr) 88px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .text-processing-progress span {
    animation: none;
  }
}

/* Signals live in the application flow. There is no backdrop or enclosing
   sheet: the same page background continues behind one flat decision list. */
.screen-notifications {
  background: none !important;
}

.notification-page {
  display: grid;
  gap: 8px;
  padding-bottom: calc(var(--dock-clearance) + 18px);
  background: none !important;
}

.notification-page-head {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 4px 0 12px;
  border-bottom: 1px solid var(--ui-border);
}

.notification-page-head h1 {
  margin: 0;
  color: var(--theme-text);
  font-size: clamp(27px, 8vw, 34px);
  line-height: 0.96;
  letter-spacing: -0.045em;
}

.notification-back {
  display: grid;
  width: 42px;
  height: 42px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--ui-border);
  border-radius: 14px;
  background: transparent;
  color: var(--theme-text);
}

.notification-back svg {
  width: 19px;
  height: 19px;
}

.notification-back .mneme-glyph path {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

/* Achievements use the same in-app navigation model as Signals: one page in
   the flow, a top return action and the persistent dock. The content itself is
   a flat progress ledger, not a modal or another stack of cards. */
.screen-achievements {
  background: none !important;
}

.achievement-page {
  display: grid;
  padding-bottom: calc(var(--dock-clearance) + 18px);
  background: none !important;
}

.achievement-page-head {
  display: grid;
  padding: 4px 0 12px;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--ui-border);
}

.achievement-page-head h1 {
  margin: 0;
  color: var(--theme-text);
  font-size: clamp(27px, 8vw, 34px);
  line-height: 0.96;
  letter-spacing: -0.045em;
}

.achievement-back {
  display: grid;
  width: 42px;
  height: 42px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--ui-border);
  border-radius: 14px;
  background: transparent;
  color: var(--theme-text);
}

.achievement-back svg {
  width: 19px;
  height: 19px;
}

.achievement-back .mneme-glyph path {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.achievement-overview {
  display: grid;
  padding: 22px 0 18px;
  grid-template-columns: minmax(0, 1fr) 46px;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--ui-border);
}

.achievement-overview > div {
  display: grid;
  gap: 3px;
}

.achievement-overview strong {
  color: var(--theme-text);
  font-family: var(--font-display);
  font-size: clamp(42px, 12vw, 58px);
  line-height: 0.85;
  letter-spacing: -0.07em;
}

.achievement-overview strong span {
  color: var(--ui-text-muted);
  font-size: 0.48em;
  letter-spacing: -0.03em;
}

.achievement-overview p {
  margin: 0;
  color: var(--ui-text-muted);
  font-size: 11px;
}

.achievement-overview-mark {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 16px;
  background: rgba(52, 197, 187, 0.1);
  color: #55d5cc;
}

.achievement-overview-mark svg {
  width: 24px;
  height: 24px;
}

.achievement-overview-progress {
  height: 5px;
  overflow: hidden;
  grid-column: 1 / -1;
  border-radius: 999px;
  background: var(--ui-border);
}

.achievement-overview-progress i {
  display: block;
  width: var(--achievement-progress);
  height: 100%;
  border-radius: inherit;
  background: #55d5cc;
}

.achievement-list {
  display: grid;
}

.achievement-group {
  display: grid;
}

.achievement-group > h2 {
  margin: 20px 0 4px;
  color: var(--ui-text-muted);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.achievement-row {
  --achievement-accent: #55d5cc;
  --achievement-accent-rgb: 52, 197, 187;
  display: grid;
  width: 100%;
  min-height: 88px;
  padding: 15px 0;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  border: 0;
  border-bottom: 1px solid var(--ui-border);
  background: transparent;
  color: inherit;
  text-align: left;
}

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

.achievement-row-icon {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid var(--ui-border);
  border-radius: 13px;
  color: var(--ui-text-muted);
}

.achievement-row.ready .achievement-row-icon {
  border-color: rgba(var(--achievement-accent-rgb), 0.3);
  background: rgba(var(--achievement-accent-rgb), 0.1);
  color: var(--achievement-accent);
}

.achievement-row.tone-amber,
.achievement-row.tone-gold {
  --achievement-accent: #e9bd64;
  --achievement-accent-rgb: 215, 164, 64;
}

.achievement-row.tone-violet {
  --achievement-accent: #c59be7;
  --achievement-accent-rgb: 166, 118, 207;
}

.achievement-row.tone-blue {
  --achievement-accent: #70c6e9;
  --achievement-accent-rgb: 72, 159, 204;
}

.achievement-row.tone-green {
  --achievement-accent: #8bd38c;
  --achievement-accent-rgb: 91, 178, 98;
}

.achievement-row-icon svg {
  width: 19px;
  height: 19px;
}

.achievement-row-copy {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.achievement-row-title {
  display: flex;
  min-width: 0;
  align-items: baseline;
  justify-content: flex-start;
  gap: 10px;
}

.achievement-row-title strong {
  min-width: 0;
  color: var(--theme-text);
  font-size: 14px;
  line-height: 1.25;
}

.achievement-row-title em {
  color: var(--ui-text-muted);
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
  white-space: nowrap;
}

.achievement-row.ready .achievement-row-title em {
  color: var(--achievement-accent, #55d5cc);
}

.achievement-row-copy small {
  color: var(--ui-text-muted);
  font-size: 10px;
  line-height: 1.4;
}

.achievement-row-progress {
  width: min(100%, 180px);
  height: 3px;
  margin-top: 3px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--ui-border);
}

.achievement-row-progress i {
  display: block;
  width: var(--achievement-item-progress);
  height: 100%;
  border-radius: inherit;
  background: var(--achievement-accent, #55d5cc);
}

.notification-page .notification-queue {
  gap: 0;
  background: none !important;
}

.notification-page .notification-list {
  display: grid;
  gap: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: none !important;
}

.notification-page .notification-item,
html[data-theme='dark'] .notification-page .notification-item,
html[data-theme='light'] .notification-page .notification-item {
  display: grid !important;
  min-height: 0 !important;
  padding: 14px 0 !important;
  grid-template-columns: 2.5rem minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 12px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ui-border) !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

.notification-page .notification-item:last-child {
  border-bottom: 0 !important;
}

.notification-page .notification-item::before {
  display: none !important;
}

.notification-page .notification-item::after {
  display: none !important;
  background: none !important;
  content: none !important;
}

.notification-page .notification-kind {
  width: 38px;
  height: 38px;
  border: 1px solid color-mix(in srgb, currentColor 24%, transparent);
  background: transparent;
}

.notification-page .notification-item-body {
  background: none !important;
}

.notification-page .notification-open,
.notification-page .notification-open.static {
  display: block !important;
  width: 100%;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0;
  background: none !important;
  color: inherit;
  font: inherit;
  text-align: left;
}

.notification-page .notification-open .item-main {
  display: grid !important;
  gap: 4px !important;
}

.notification-page .notification-open .item-main strong {
  color: var(--theme-text);
  font-size: 14px !important;
  line-height: 1.3 !important;
  -webkit-line-clamp: 2;
}

.notification-page .notification-open .item-main small {
  color: var(--ui-text-muted) !important;
  font-size: 10px !important;
  line-height: 1.4 !important;
  -webkit-line-clamp: 2;
}

.notification-page .notification-actions {
  display: flex !important;
  padding: 0 !important;
  flex-wrap: wrap;
  gap: 7px !important;
}

.notification-page .notification-action {
  min-height: 34px;
  padding-inline: 15px;
}

.meal-product-context {
  display: block;
  margin-top: 5px;
  color: var(--mneme-teal-bright);
  font-size: 10px;
  font-weight: 700;
}

/* Знакомство 3D — цельная продуктовая сцена вместо карточки внутри карточки. */
.onboarding-root.active,
html[data-theme='light'] .onboarding-root.active {
  background: #050b0b !important;
  backdrop-filter: none !important;
}

.onboarding-shell,
html[data-theme='light'] .onboarding-shell {
  border-color: rgba(241, 228, 205, 0.1) !important;
  background:
    radial-gradient(circle at 82% 12%, rgba(44, 175, 169, 0.1), transparent 19rem),
    radial-gradient(circle at 14% 88%, rgba(141, 111, 177, 0.07), transparent 18rem), #071110 !important;
}

.onboarding-stage {
  gap: 14px !important;
}

.onboarding-welcome,
.onboarding-story,
html[data-theme='light'] :where(.onboarding-welcome, .onboarding-story) {
  min-height: 330px !important;
  padding: 20px 12px 18px 18px !important;
  grid-template-areas: 'copy art' !important;
  grid-template-columns: minmax(0, 1fr) minmax(230px, 1fr) !important;
  gap: 4px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.onboarding-welcome-copy,
.onboarding-story-copy {
  grid-area: copy !important;
  align-self: center !important;
}

.onboarding-visual {
  position: relative;
  display: grid;
  min-width: 0;
  height: 100%;
  grid-area: art;
  place-items: center;
  isolation: isolate;
}

.onboarding-visual::before {
  position: absolute;
  z-index: -1;
  width: min(240px, 72%);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(53, 188, 181, 0.19), transparent 69%);
  filter: blur(8px);
  content: '';
}

.onboarding-story-memory .onboarding-visual::before {
  background: radial-gradient(circle, rgba(151, 119, 189, 0.2), transparent 69%);
}

.onboarding-welcome img,
.onboarding-story img,
html[data-theme='light'] :where(.onboarding-welcome, .onboarding-story) img {
  width: min(100%, 300px) !important;
  height: auto !important;
  max-height: 300px !important;
  filter: drop-shadow(0 28px 24px rgba(0, 0, 0, 0.32)) !important;
  transform-origin: 50% 80%;
  animation: onboarding-object-arrive 620ms cubic-bezier(0.2, 0.82, 0.28, 1) both;
}

.onboarding-stage h1 {
  max-width: 9.5em;
  font-size: clamp(38px, 6vw, 55px) !important;
  line-height: 0.93 !important;
}

.onboarding-stage p {
  max-width: 31rem !important;
  color: rgba(241, 228, 205, 0.67) !important;
}

.onboarding-route-grid {
  gap: 9px !important;
}

.onboarding-route-card {
  min-height: 148px !important;
  padding: 18px 19px !important;
  border-radius: 22px !important;
  background: rgba(241, 228, 205, 0.035) !important;
}

.onboarding-route-card.recommended,
html[data-theme='light'] .onboarding-route-card.recommended {
  border-color: rgba(67, 205, 198, 0.36) !important;
  background: #12302d !important;
}

.onboarding-route-card em {
  background: rgba(67, 205, 198, 0.12) !important;
}

.onboarding-example,
.onboarding-story-note,
.onboarding-proof-row,
.onboarding-memory-line,
html[data-theme='light'] :where(.onboarding-example, .onboarding-story-note) {
  max-width: 620px !important;
  width: 100% !important;
  margin-inline: auto !important;
  padding: 12px 2px 2px !important;
  border: 0 !important;
  border-top: 1px solid rgba(241, 228, 205, 0.11) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.onboarding-example blockquote {
  margin: 0 !important;
  color: var(--mneme-paper) !important;
  font-size: 14px !important;
  line-height: 1.42 !important;
}

.onboarding-example small {
  display: block;
  margin-top: 7px;
  color: #63d4cd !important;
  font-size: 11px !important;
  font-weight: 760;
}

.onboarding-story-note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
}

.onboarding-story-note strong {
  color: #63d4cd;
  font-size: 12px;
  font-weight: 820;
}

.onboarding-story-note span {
  color: rgba(241, 228, 205, 0.58);
  font-size: 12px;
  line-height: 1.42;
}

.onboarding-access-list,
html[data-theme='light'] .onboarding-access-list {
  gap: 0 !important;
  border-top: 1px solid rgba(241, 228, 205, 0.11) !important;
}

.onboarding-access-list span,
html[data-theme='light'] .onboarding-access-list > span {
  padding: 13px 14px 8px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.onboarding-access-list span + span {
  border-left: 1px solid rgba(241, 228, 205, 0.09) !important;
}

.onboarding-copy {
  padding-top: 20px !important;
}

.onboarding-name,
.onboarding-choice,
.onboarding-rhythm-card,
.onboarding-legal-grid article,
.onboarding-legal-note,
.onboarding-consent,
html[data-theme='light']
  :where(
    .onboarding-name,
    .onboarding-choice,
    .onboarding-rhythm-card,
    .onboarding-legal-grid > article,
    .onboarding-legal-note,
    .onboarding-consent
  ) {
  background: rgba(241, 228, 205, 0.035) !important;
  box-shadow: none !important;
}

.onboarding-name,
html[data-theme='light'] .onboarding-name {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.onboarding-rhythm-card,
.onboarding-rhythm-card:has(input:checked),
html[data-theme='light'] .onboarding-rhythm-card {
  padding: 14px 2px !important;
  border: 0 !important;
  border-top: 1px solid rgba(241, 228, 205, 0.11) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.onboarding-legal-grid article,
html[data-theme='light'] .onboarding-legal-grid > article {
  min-height: 0 !important;
  padding: 14px 2px !important;
  border: 0 !important;
  border-top: 1px solid rgba(241, 228, 205, 0.11) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.onboarding-actions,
html[data-theme='light'] .onboarding-actions {
  border-color: rgba(241, 228, 205, 0.07) !important;
  background: rgba(7, 17, 16, 0.96) !important;
}

@keyframes onboarding-object-arrive {
  from {
    opacity: 0;
    transform: translate3d(0, 18px, 0) rotate(-2deg) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(0) scale(1);
  }
}

@media (max-width: 620px) {
  .onboarding-root.active,
  html[data-theme='light'] .onboarding-root.active {
    padding: 0 !important;
  }

  .onboarding-shell,
  .onboarding-shell-terms,
  html[data-theme='light'] .onboarding-shell {
    width: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .onboarding-progress {
    margin-top: max(18px, env(safe-area-inset-top)) !important;
  }

  .onboarding-stage {
    padding: 18px 20px 22px !important;
    gap: 12px !important;
  }

  .onboarding-stage[data-onboarding-page='choose'] {
    padding-top: max(50px, calc(env(safe-area-inset-top) + 44px)) !important;
  }

  .onboarding-welcome,
  .onboarding-story,
  html[data-theme='light'] :where(.onboarding-welcome, .onboarding-story) {
    min-height: 0 !important;
    padding: 0 !important;
    grid-template-areas:
      'art'
      'copy' !important;
    grid-template-columns: 1fr !important;
    gap: 3px !important;
  }

  .onboarding-visual {
    height: clamp(142px, 24dvh, 205px);
  }

  .onboarding-welcome .onboarding-visual img,
  .onboarding-story .onboarding-visual img,
  html[data-theme='light'] :where(.onboarding-welcome, .onboarding-story) img {
    width: auto !important;
    max-width: min(88%, 250px) !important;
    height: clamp(142px, 24dvh, 205px) !important;
    max-height: clamp(142px, 24dvh, 205px) !important;
    margin: 0 auto !important;
  }

  .onboarding-welcome-copy,
  .onboarding-story-copy {
    align-self: start !important;
  }

  .onboarding-stage h1 {
    max-width: 10.5em;
    font-size: clamp(31px, 8.8vw, 38px) !important;
    line-height: 0.96 !important;
  }

  .onboarding-stage p {
    margin-top: 9px !important;
    font-size: 13.5px !important;
    line-height: 1.44 !important;
  }

  .onboarding-route-card {
    min-height: 0 !important;
    padding: 15px 17px !important;
    gap: 5px !important;
  }

  .onboarding-route-card small {
    padding-right: 3px;
  }

  .onboarding-story-note {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .onboarding-access-list span + span {
    border-top: 1px solid rgba(241, 228, 205, 0.09) !important;
    border-left: 0 !important;
  }

  .onboarding-copy {
    padding-top: 30px !important;
  }
}

@media (max-width: 620px) and (max-height: 680px) {
  .onboarding-stage[data-onboarding-page='choose'] {
    padding: 40px 20px 12px !important;
    gap: 7px !important;
  }

  .onboarding-visual {
    height: 116px;
  }

  .onboarding-welcome .onboarding-visual img {
    display: block !important;
    width: auto !important;
    max-width: min(72%, 190px) !important;
    height: 116px !important;
    max-height: 116px !important;
  }

  .onboarding-stage[data-onboarding-page='choose'] .onboarding-visual {
    height: 82px;
  }

  .onboarding-stage[data-onboarding-page='choose'] .onboarding-welcome .onboarding-visual img {
    height: 82px !important;
    max-height: 82px !important;
  }

  .onboarding-stage[data-onboarding-page='choose'] h1 {
    font-size: 28px !important;
  }

  .onboarding-stage[data-onboarding-page='choose'] p {
    margin-top: 6px !important;
    font-size: 12px !important;
    line-height: 1.34 !important;
  }

  .onboarding-stage[data-onboarding-page='choose'] .onboarding-route-grid {
    gap: 6px !important;
  }

  .onboarding-stage[data-onboarding-page='choose'] .onboarding-route-card {
    padding: 10px 14px !important;
    gap: 2px !important;
    border-radius: 18px !important;
  }

  .onboarding-stage[data-onboarding-page='choose'] .onboarding-route-time {
    font-size: 10px !important;
  }

  .onboarding-stage[data-onboarding-page='choose'] .onboarding-route-card strong {
    font-size: 17px !important;
  }

  .onboarding-stage[data-onboarding-page='choose'] .onboarding-route-card small {
    font-size: 10.5px !important;
    line-height: 1.28 !important;
  }

  .onboarding-stage[data-onboarding-page='choose'] .onboarding-route-card em {
    top: 8px !important;
    right: 10px !important;
    padding: 4px 7px !important;
    font-size: 9px !important;
  }

  .onboarding-story .onboarding-visual img {
    width: auto !important;
    max-width: min(76%, 205px) !important;
    height: 116px !important;
    max-height: 116px !important;
  }

  .onboarding-stage h1 {
    font-size: clamp(28px, 8vw, 33px) !important;
  }

  .onboarding-route-card {
    padding-block: 12px !important;
  }

  .onboarding-route-card small {
    font-size: 11.5px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .onboarding-welcome img,
  .onboarding-story img {
    animation: none !important;
  }
}

/* --------------------------------------------------------------------------
   Profile clarity pass

   Decorative marks no longer compete with profile actions. The paid plan has
   one centred summary, the welcome offer reads top-to-bottom, and learning is
   a visible three-step path instead of a link hidden inside the community card.
   -------------------------------------------------------------------------- */

.mn-profile-activity-head {
  grid-template-columns: minmax(0, 1fr);
}

.mn-access-card {
  text-align: left;
}

.mn-access-head {
  padding-right: 0;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: 5px;
  text-align: center;
}

.mn-access-mark {
  width: 30px;
  height: 30px;
  margin-bottom: 2px;
}

.mn-access-mark svg {
  width: 20px;
  height: 20px;
}

.mn-access-head p {
  margin-top: 4px;
}

.mn-access-price {
  grid-column: auto;
  margin-top: 5px;
  text-align: center;
}

.mn-profile-promo-category {
  gap: 16px !important;
}

.mn-profile-welcome-promo {
  display: grid;
  padding: 2px 0 16px;
  grid-template-columns: minmax(0, 1fr);
  justify-items: stretch;
  gap: 10px;
  border: 0;
  border-bottom: 1px solid var(--ui-border);
  border-radius: 0;
  background: transparent;
  text-align: center;
}

.mn-profile-welcome-promo > .mn-profile-promo-offer {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: 3px;
}

.mn-profile-welcome-promo .mn-profile-promo-offer > span {
  color: var(--theme-text);
  font-size: 14px;
  font-weight: 800;
}

.mn-profile-welcome-promo .mn-profile-promo-offer > small {
  color: var(--ui-text-muted);
  font-size: 10px;
  line-height: 1.4;
}

.mn-profile-welcome-promo > strong {
  color: #e8c675;
  font-family: var(--font-display);
  font-size: clamp(29px, 8vw, 36px);
  line-height: 1;
  letter-spacing: 0.04em;
}

.mn-profile-welcome-promo > button {
  width: 100%;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 14px;
  font-size: 12px;
}

.mn-profile-welcome-promo.redeemed {
  border-color: var(--ui-border);
  background: transparent;
}

.mn-profile-welcome-promo.redeemed > strong {
  color: #55d5cc;
}

.mn-profile-welcome-promo .mn-promo-check {
  justify-self: center;
}

.mn-promo-entry label > span {
  margin-bottom: 8px;
  color: var(--ui-text-muted);
  font-size: 10px;
  font-weight: 700;
}

.mn-profile-learning {
  display: grid !important;
  padding: 17px 16px !important;
  gap: 15px !important;
}

.mn-profile-learning > header {
  display: grid;
  gap: 5px;
}

.mn-profile-learning > header h2 {
  margin: 0;
  color: var(--theme-text);
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1;
  letter-spacing: -0.04em;
}

.mn-profile-learning > header p {
  margin: 0;
  color: var(--ui-text-muted);
  font-size: 10px;
  line-height: 1.45;
}

.mn-profile-learning-steps {
  display: grid;
  border-block: 1px solid var(--ui-border);
}

.mn-profile-learning-steps > div {
  display: grid;
  min-height: 67px;
  padding: 10px 0;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.mn-profile-learning-steps > div + div {
  border-top: 1px solid var(--ui-border);
}

.mn-profile-learning-steps > div > span {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid rgba(52, 197, 187, 0.3);
  border-radius: 50%;
  color: #55d5cc;
  font-size: 11px;
  font-weight: 850;
}

.mn-profile-learning-steps p {
  display: grid;
  min-width: 0;
  margin: 0;
  gap: 3px;
}

.mn-profile-learning-steps strong {
  color: var(--theme-text);
  font-size: 13px;
}

.mn-profile-learning-steps small {
  color: var(--ui-text-muted);
  font-size: 10px;
  line-height: 1.4;
}

.mn-profile-learning-actions {
  display: grid;
  gap: 8px;
}

.mn-profile-learning-actions .btn {
  min-height: 44px;
}

.product-guide > header,
.product-guide > aside {
  border-radius: 16px;
}

.product-guide-grid {
  grid-template-columns: minmax(0, 1fr);
}

.product-guide-card {
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 5px 10px;
}

.product-guide-card > span {
  display: grid;
  width: 28px;
  height: 28px;
  grid-row: 1 / span 2;
  place-items: center;
  border: 1px solid rgba(52, 197, 187, 0.28);
  border-radius: 50%;
  letter-spacing: 0;
}

.product-guide-card > strong,
.product-guide-card > p,
.product-guide-card .open-action {
  grid-column: 2;
}

.product-guide-card .open-action {
  margin-top: 5px;
}

@media (max-width: 370px) {
  .mn-profile-promo-head {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 10px;
  }

  .mn-profile-promo-head .mn-profile-category-icon {
    width: 38px;
    height: 38px;
    border-radius: 13px;
  }

  .mn-promo-entry label > div {
    grid-template-columns: minmax(0, 1fr) 90px;
  }

  .mn-promo-entry button {
    padding-inline: 8px;
    font-size: 11px;
  }
}

/* Final onboarding surface: the shell and the page are one continuous canvas. */
.onboarding-root.active,
html[data-theme='light'] .onboarding-root.active,
html[data-theme='dark'] .onboarding-root.active,
.onboarding-shell,
html[data-theme='light'] .onboarding-shell,
html[data-theme='dark'] .onboarding-shell,
.onboarding-actions,
html[data-theme='light'] .onboarding-actions,
html[data-theme='dark'] .onboarding-actions {
  background: #050b0b !important;
  background-image: none !important;
}

.onboarding-shell,
html[data-theme='light'] .onboarding-shell,
html[data-theme='dark'] .onboarding-shell {
  width: 100% !important;
  height: 100dvh !important;
  max-width: none !important;
  max-height: 100dvh !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.onboarding-actions,
html[data-theme='light'] .onboarding-actions,
html[data-theme='dark'] .onboarding-actions {
  border-top-color: rgba(241, 228, 205, 0.07) !important;
  box-shadow: 0 -14px 34px rgba(5, 11, 11, 0.82) !important;
}

.onboarding-stage,
html[data-theme='light'] .onboarding-stage,
html[data-theme='dark'] .onboarding-stage {
  border: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}