@font-face {
  font-family: 'Commissioner';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/miniapp/assets/commissioner-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* =============================================================================
   TODAY CONCEPT FINAL — «личная тёмная тетрадь»
   Эталонный язык главного экрана: мягкий тёмный фон, молочная бумага,
   настоящие предметные ассеты, меньше текста и один ясный фокус.
   ============================================================================= */

:root {
  --mneme-night: #0a1112;
  --mneme-night-2: #10191a;
  --mneme-night-3: #172122;
  --mneme-ink: #1f2a2b;
  --mneme-paper: #f1e5d1;
  --mneme-paper-soft: #e4d5ba;
  --mneme-paper-muted: #aeb6b2;
  --mneme-teal: #2ca5a0;
  --mneme-teal-bright: #36beb5;
  --mneme-green-soft: #9bdc83;
  --mneme-violet-soft: #c295df;
  --mneme-amber-soft: #dfa857;
  --mneme-red-soft: #ee7d6f;
  --mneme-shadow-soft: 0 18px 44px rgba(0, 0, 0, 0.32);
}

body {
  background:
    radial-gradient(circle at 50% 10%, rgba(54, 190, 181, 0.12), transparent 30rem),
    radial-gradient(circle at 100% 36%, rgba(223, 168, 87, 0.08), transparent 22rem),
    linear-gradient(180deg, #080d0e 0%, #0e1718 42%, #0a1112 100%);
}

body::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(241, 229, 209, 0.028) 1px, transparent 1px),
    linear-gradient(180deg, rgba(241, 229, 209, 0.02) 1px, transparent 1px);
  background-size: 64px 64px;
  content: '';
  opacity: 0.2;
  pointer-events: none;
}

.header-notification-text {
  display: none;
}

.screen-today {
  width: min(100%, 740px);
  padding-inline: clamp(14px, 4vw, 24px);
  gap: 20px;
}

@media (max-width: 767px) {
  .app-main {
    padding-top: calc(76px + env(safe-area-inset-top));
    padding-bottom: calc(84px + env(safe-area-inset-bottom));
  }

  .mobile-header {
    right: 0;
    left: 0;
    display: flex;
    height: calc(70px + env(safe-area-inset-top));
    padding: calc(13px + env(safe-area-inset-top)) 20px 12px;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(241, 229, 209, 0.08);
    background:
      linear-gradient(180deg, rgba(241, 229, 209, 0.035), transparent 70%), rgba(8, 13, 14, 0.98);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.34);
    backdrop-filter: blur(18px);
  }

  .mobile-header::after {
    right: 20px;
    left: 20px;
    background: linear-gradient(
      90deg,
      transparent,
      rgba(241, 229, 209, 0.12),
      rgba(54, 190, 181, 0.34),
      rgba(241, 229, 209, 0.12),
      transparent
    );
  }

  .brand-lockup.compact {
    gap: 10px;
  }

  .brand-lockup.compact .brand-mark {
    width: 46px;
    height: 46px;
    overflow: visible;
    border: 0;
    border-radius: 50%;
    background:
      radial-gradient(circle at 35% 28%, rgba(241, 229, 209, 0.3), transparent 28%),
      linear-gradient(145deg, #0b4040, #1b6c69);
    box-shadow:
      inset 0 0 0 1px rgba(241, 229, 209, 0.14),
      0 10px 24px rgba(0, 0, 0, 0.32);
  }

  .brand-lockup.compact .brand-mark img {
    width: 70%;
    height: 70%;
    border-radius: 14px;
    filter: drop-shadow(0 5px 7px rgba(0, 0, 0, 0.3));
  }

  .brand-lockup.compact strong {
    color: var(--mneme-paper);
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 760;
    letter-spacing: 0.035em;
  }

  .brand-lockup.compact small {
    display: none;
  }

  .mobile-header-actions {
    gap: 0;
  }

  .header-notification-button {
    position: absolute;
    top: calc(16px + env(safe-area-inset-top));
    left: 50%;
    display: inline-flex;
    width: auto;
    min-width: 142px;
    height: 42px;
    padding: 0 16px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(241, 229, 209, 0.12);
    border-radius: 999px;
    background:
      linear-gradient(180deg, rgba(241, 229, 209, 0.08), rgba(241, 229, 209, 0.025)), #12191a;
    color: var(--mneme-paper-soft);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.05),
      0 12px 28px rgba(0, 0, 0, 0.22);
    transform: translateX(-50%);
  }

  .header-notification-button.has-items {
    border-color: rgba(223, 168, 87, 0.34);
    background:
      linear-gradient(180deg, rgba(223, 168, 87, 0.13), rgba(241, 229, 209, 0.025)), #12191a;
  }

  .header-notification-icon {
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--mneme-teal-bright);
    box-shadow:
      0 0 0 4px rgba(54, 190, 181, 0.1),
      0 0 18px rgba(54, 190, 181, 0.7);
  }

  .header-notification-button.has-items .header-notification-icon {
    background: var(--mneme-amber-soft);
    box-shadow:
      0 0 0 4px rgba(223, 168, 87, 0.12),
      0 0 18px rgba(223, 168, 87, 0.75);
  }

  .header-notification-icon svg {
    display: none;
  }

  .header-notification-text {
    display: inline;
    max-width: 96px;
    overflow: hidden;
    color: inherit;
    font-size: 14px;
    font-weight: 650;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .header-notification-badge {
    top: -4px;
    right: -4px;
    border-color: #0a1112;
    background: var(--mneme-amber-soft);
    color: #241503;
  }

  .avatar-button {
    width: 44px;
    height: 44px;
    border: 1px solid rgba(54, 190, 181, 0.32);
    border-radius: 50%;
    background:
      radial-gradient(circle at 35% 28%, rgba(241, 229, 209, 0.18), transparent 35%), #142122;
    color: var(--mneme-paper);
    box-shadow: 0 9px 22px rgba(0, 0, 0, 0.28);
  }
}

.screen-today .today-cover {
  position: relative;
  display: grid;
  padding: 30px 0 0;
  justify-items: center;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  text-align: center;
}

.screen-today .today-cover::before,
.screen-today .today-cover::after {
  display: none;
}

.screen-today .today-cover-copy {
  display: grid;
  max-width: 540px;
  justify-items: center;
  gap: 8px;
}

.screen-today .today-cover-date {
  margin: 0;
  color: rgba(241, 229, 209, 0.58);
  font-size: clamp(20px, 5.8vw, 27px);
  font-weight: 520;
  line-height: 1.15;
  letter-spacing: -0.035em;
}

.screen-today .today-cover h1 {
  margin: 0;
  max-width: 15ch;
  color: var(--mneme-paper);
  font-family: var(--font-display);
  font-size: clamp(38px, 10vw, 57px);
  font-weight: 780;
  line-height: 0.98;
  letter-spacing: -0.078em;
  text-shadow: 0 8px 24px rgba(0, 0, 0, 0.32);
}

.screen-today .today-cover-art {
  display: grid;
  width: min(76vw, 320px);
  height: min(70vw, 290px);
  margin: -2px auto 2px;
  place-items: center;
}

.screen-today .today-cover-art img {
  display: block;
  width: min(80vw, 330px);
  height: min(80vw, 330px);
  object-fit: contain;
  transform: rotate(-2.2deg) translateY(-2px);
  filter: drop-shadow(0 24px 22px rgba(0, 0, 0, 0.34))
    drop-shadow(0 2px 0 rgba(241, 229, 209, 0.12));
}

.screen-today .today-thought-card {
  position: relative;
  display: grid;
  width: 100%;
  margin-top: 10px;
  padding: 28px clamp(22px, 6vw, 44px) 24px;
  justify-items: center;
  gap: 18px;
  overflow: hidden;
  border: 1px solid rgba(120, 96, 60, 0.16);
  border-radius: 23px;
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 255, 255, 0.28), transparent 17rem),
    linear-gradient(180deg, #f4ead9, #ebdcc3);
  box-shadow:
    0 18px 34px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

.screen-today .today-thought-card::before {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(72, 56, 35, 0.035) 1px, transparent 1px),
    linear-gradient(180deg, rgba(72, 56, 35, 0.026) 1px, transparent 1px);
  background-size: 34px 34px;
  content: '';
  opacity: 0.42;
  pointer-events: none;
}

.screen-today .today-thought-ribbon {
  position: absolute;
  top: 0;
  right: clamp(34px, 9vw, 58px);
  width: 31px;
  height: 67px;
  background: linear-gradient(180deg, #34bdb4, #227e7b);
  box-shadow: -6px 8px 14px rgba(0, 0, 0, 0.12);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%);
}

.screen-today .today-thought-card textarea {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 52px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #5d5245;
  font: inherit;
  font-size: clamp(18px, 4.8vw, 22px);
  font-weight: 520;
  line-height: 1.35;
  resize: vertical;
  scrollbar-color: rgba(44, 165, 160, 0.45) transparent;
}

.screen-today .today-thought-card textarea:focus {
  outline: none;
}

.screen-today .today-thought-card textarea::placeholder {
  color: rgba(93, 82, 69, 0.56);
}

.screen-today .today-thought-card .btn {
  position: relative;
  z-index: 1;
  width: min(100%, 270px);
  min-height: 54px;
  justify-content: center;
  border: 1px solid rgba(5, 65, 63, 0.2);
  border-radius: 16px;
  background: linear-gradient(180deg, #35bbb3, #238f8a);
  color: #f7ead2;
  box-shadow:
    0 9px 19px rgba(8, 70, 67, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.screen-today .today-cover-example {
  display: none;
}

.screen-today .today-sheet {
  position: relative;
  display: grid;
  padding: clamp(18px, 4vw, 24px);
  gap: 16px;
  overflow: hidden;
  border: 1px solid rgba(241, 229, 209, 0.09);
  border-radius: 25px;
  background:
    radial-gradient(circle at 18% 4%, rgba(241, 229, 209, 0.06), transparent 18rem),
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent), rgba(16, 25, 26, 0.96);
  box-shadow:
    var(--mneme-shadow-soft),
    inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.screen-today .today-sheet::before {
  display: none;
}

.screen-today .today-sheet-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 14px;
}

.screen-today .today-sheet-head h2,
.screen-today .today-mneme-note h2 {
  margin: 0;
  color: var(--mneme-paper);
  font-family: var(--font-display);
  font-size: clamp(27px, 6.4vw, 39px);
  font-weight: 760;
  line-height: 1;
  letter-spacing: -0.066em;
}

.screen-today .today-focus-row {
  display: grid;
  min-height: 58px;
  padding: 0 16px;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(241, 229, 209, 0.08);
  border-radius: 18px 18px 0 0;
  background:
    linear-gradient(180deg, rgba(241, 229, 209, 0.03), transparent), rgba(8, 13, 14, 0.72);
}

.screen-today .today-focus-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--mneme-green-soft);
  box-shadow:
    0 0 0 4px rgba(155, 220, 131, 0.1),
    0 0 18px rgba(155, 220, 131, 0.55);
}

.screen-today .today-focus-row.urgent .today-focus-dot {
  background: var(--mneme-amber-soft);
  box-shadow:
    0 0 0 4px rgba(223, 168, 87, 0.12),
    0 0 18px rgba(223, 168, 87, 0.55);
}

.screen-today .today-focus-row strong {
  overflow: hidden;
  color: var(--mneme-paper);
  font-size: 15px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.screen-today .today-focus-row > span:not(.today-focus-dot) {
  color: rgba(241, 229, 209, 0.68);
  font-size: 14px;
  white-space: nowrap;
}

.screen-today .today-focus-row .link-button {
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--mneme-teal-bright);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

.screen-today .today-progress {
  margin-top: -6px;
  padding-top: 10px;
}

.screen-today .today-progress::before,
.screen-today .today-progress > span {
  height: 5px;
  border-radius: 999px;
}

.screen-today .today-progress::before {
  background: rgba(241, 229, 209, 0.07);
}

.screen-today .today-progress > span {
  background: linear-gradient(90deg, var(--mneme-teal-bright), var(--mneme-green-soft));
}

.screen-today .today-progress small {
  color: rgba(241, 229, 209, 0.52);
  font-size: 12px;
}

.screen-today .today-agenda {
  display: grid;
  overflow: hidden;
  gap: 0;
  border: 1px solid rgba(241, 229, 209, 0.08);
  border-top: 0;
  border-radius: 0 0 18px 18px;
  background: rgba(8, 13, 14, 0.55);
}

.screen-today .today-agenda-row {
  display: grid;
  min-height: 62px;
  padding: 0 14px;
  grid-template-columns: 78px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border: 0;
  border-top: 1px solid rgba(241, 229, 209, 0.075);
  border-radius: 0;
  background: transparent;
  color: var(--mneme-paper);
  text-align: left;
}

.screen-today .today-agenda-row:first-child {
  border-top: 0;
}

.screen-today .today-agenda-row:hover {
  background: rgba(241, 229, 209, 0.035);
}

.screen-today .today-agenda-row.done {
  opacity: 0.64;
}

.screen-today .today-agenda-time {
  color: var(--mneme-teal-bright);
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 680;
  letter-spacing: -0.05em;
}

.screen-today .today-agenda-row:nth-child(2) .today-agenda-time {
  color: var(--mneme-amber-soft);
}

.screen-today .today-agenda-row:nth-child(3) .today-agenda-time {
  color: var(--mneme-violet-soft);
}

.screen-today .today-agenda-row strong {
  display: block;
  overflow: hidden;
  color: var(--mneme-paper);
  font-size: 17px;
  font-weight: 660;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.screen-today .today-agenda-status {
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(54, 190, 181, 0.12);
  color: var(--mneme-teal-bright);
  font-size: 13px;
  font-weight: 650;
  white-space: nowrap;
}

.screen-today .today-agenda-row:nth-child(n + 2) .today-agenda-status {
  background: rgba(223, 168, 87, 0.12);
  color: var(--mneme-amber-soft);
}

.screen-today .today-agenda-row.done .today-agenda-status {
  background: rgba(155, 220, 131, 0.12);
  color: var(--mneme-green-soft);
}

.screen-today .today-empty-line {
  min-height: 92px;
  padding: 18px;
  grid-template-columns: 46px minmax(0, 1fr);
  border: 1px dashed rgba(241, 229, 209, 0.14);
  border-radius: 18px;
  background: rgba(241, 229, 209, 0.025);
}

.screen-today .today-empty-mark {
  width: 34px;
  height: 40px;
  border: 1.5px solid rgba(54, 190, 181, 0.72);
  border-radius: 8px 8px 3px 3px;
  background: rgba(54, 190, 181, 0.12);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 77%, 0 100%);
}

.screen-today .today-empty-line strong {
  color: var(--mneme-paper);
  font-size: 16px;
}

.screen-today .today-empty-line small {
  color: rgba(241, 229, 209, 0.54);
  font-size: 13px;
  line-height: 1.45;
}

.screen-today .today-action-row {
  display: grid;
  margin-top: 2px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
}

.screen-today .today-action-row .btn,
.screen-today .today-action-row .btn:last-child {
  grid-column: auto;
  min-height: 56px;
  justify-content: center;
  border-radius: 16px;
}

.screen-today .today-action-row .btn.primary {
  border: 1px solid rgba(54, 190, 181, 0.34);
  background: linear-gradient(180deg, #35bdb4, #218d88);
  color: #f7ead2;
}

.screen-today .today-action-row .btn.ghost {
  border: 1px solid rgba(241, 229, 209, 0.09);
  background: linear-gradient(180deg, rgba(241, 229, 209, 0.08), rgba(241, 229, 209, 0.035));
  color: var(--mneme-paper);
}

.screen-today .today-pockets {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 13px;
}

.screen-today .today-pocket {
  position: relative;
  display: grid;
  min-height: 142px;
  padding: 17px 18px 16px;
  grid-template-columns: 54px minmax(0, 1fr) 12px;
  grid-template-rows: auto auto auto;
  align-content: end;
  align-items: center;
  gap: 3px 12px;
  overflow: hidden;
  border: 1px solid rgba(241, 229, 209, 0.09);
  border-radius: 19px;
  background:
    radial-gradient(
      circle at 24% 16%,
      color-mix(in srgb, var(--pocket) 19%, transparent),
      transparent 4.5rem
    ),
    linear-gradient(180deg, rgba(241, 229, 209, 0.045), rgba(241, 229, 209, 0.012)),
    rgba(16, 25, 26, 0.95);
  color: var(--mneme-paper);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
  text-align: left;
}

.screen-today .today-pocket::before {
  display: none;
}

.screen-today .today-pocket-asset {
  grid-row: 1 / 4;
  align-self: center;
  width: 56px;
  height: 56px;
  object-fit: contain;
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.24));
}

.screen-today .today-pocket-name {
  overflow: hidden;
  color: var(--mneme-paper);
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.04em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.screen-today .today-pocket small {
  color: rgba(241, 229, 209, 0.52);
  font-size: 13px;
  line-height: 1.2;
}

.screen-today .today-pocket strong {
  justify-self: start;
  color: var(--mneme-paper);
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 740;
  line-height: 1.05;
  letter-spacing: -0.055em;
  text-align: left;
}

.screen-today .today-pocket-tail {
  position: absolute;
  right: 18px;
  top: 50%;
  width: 9px;
  height: 9px;
  border-top: 2px solid rgba(241, 229, 209, 0.48);
  border-right: 2px solid rgba(241, 229, 209, 0.48);
  transform: translateY(-50%) rotate(45deg);
}

.screen-today .today-mneme-note {
  min-height: 146px;
  padding: 20px 62px 20px 22px;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: center;
  gap: 20px;
}

.screen-today .today-note-tag {
  display: grid;
  width: 44px;
  min-height: 108px;
  place-items: center;
  border: 1px solid rgba(120, 96, 60, 0.15);
  border-radius: 11px;
  background: linear-gradient(180deg, rgba(120, 96, 60, 0.08), transparent), #d9c5a1;
  color: #78664d;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 730;
  letter-spacing: 0.08em;
  text-orientation: mixed;
  transform: rotate(180deg);
  writing-mode: vertical-rl;
  box-shadow:
    0 10px 18px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.36);
}

.screen-today .today-note-ribbon {
  position: absolute;
  top: 0;
  right: 56px;
  width: 32px;
  height: 62px;
  background: linear-gradient(180deg, rgba(241, 229, 209, 0.5), rgba(150, 164, 158, 0.38));
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%);
  opacity: 0.76;
}

.screen-today .today-note-copy {
  display: grid;
  gap: 9px;
}

.screen-today .today-note-copy p {
  max-width: 36ch;
  color: rgba(241, 229, 209, 0.68);
  font-size: 18px;
  line-height: 1.44;
}

.screen-today .today-note-copy .link-button {
  justify-self: start;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--mneme-teal-bright);
  font-size: 16px;
  font-weight: 700;
}

.voice-fab,
.voice-root.ready .voice-fab {
  width: 62px;
  height: 62px;
  border: 1px solid rgba(241, 229, 209, 0.18);
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 20%, rgba(241, 229, 209, 0.24), transparent 32%),
    linear-gradient(180deg, #35bdb4, #218d88);
  color: #f8ead3;
  box-shadow:
    0 0 0 8px rgba(54, 190, 181, 0.13),
    0 16px 30px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.voice-root.active .voice-fab,
.voice-root.recording .voice-fab {
  background:
    radial-gradient(circle at 32% 20%, rgba(241, 229, 209, 0.2), transparent 32%),
    linear-gradient(180deg, #ee7d6f, #bd473f);
  color: #fff0e8;
}

.dock-surface {
  background:
    linear-gradient(rgba(241, 229, 209, 0.08), rgba(241, 229, 209, 0.08)) top / 100% 1px no-repeat,
    rgba(9, 15, 16, 0.96);
}

.dock-cradle {
  border-color: rgba(54, 190, 181, 0.2);
  box-shadow: inset 0 1px 0 rgba(241, 229, 209, 0.06);
}

.dock-tab {
  color: rgba(241, 229, 209, 0.55);
}

.dock-tab.active {
  color: var(--mneme-teal-bright);
}

.dock-tab.active svg [data-fill] {
  fill: var(--mneme-teal-bright);
}

@media (max-width: 620px) {
  .screen-today {
    width: 100%;
    padding-inline: 14px;
    gap: 18px;
  }

  .screen-today .today-cover {
    padding-top: 20px;
  }

  .screen-today .today-cover h1 {
    font-size: clamp(34px, 10.8vw, 44px);
  }

  .screen-today .today-cover-date {
    font-size: clamp(18px, 5.4vw, 24px);
  }

  .screen-today .today-cover-art {
    width: min(74vw, 275px);
    height: min(66vw, 240px);
    margin-top: -4px;
  }

  .screen-today .today-cover-art img {
    width: min(78vw, 288px);
    height: min(78vw, 288px);
  }

  .screen-today .today-focus-row {
    min-height: auto;
    padding: 13px 14px;
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .screen-today .today-focus-row .link-button {
    grid-column: 2 / 4;
    justify-self: start;
    margin-top: -4px;
  }

  .screen-today .today-agenda-row {
    min-height: 64px;
    grid-template-columns: 64px minmax(0, 1fr);
  }

  .screen-today .today-agenda-status {
    justify-self: start;
    grid-column: 2;
    margin-top: -9px;
    padding: 4px 9px;
    font-size: 12px;
  }

  .screen-today .today-pockets {
    grid-template-columns: 1fr;
  }

  .screen-today .today-pocket {
    min-height: 104px;
    grid-template-columns: 62px minmax(0, 1fr) 12px;
  }

  .screen-today .today-pocket-asset {
    width: 62px;
    height: 62px;
  }
}

@media (max-width: 420px) {
  .screen-today {
    padding-inline: 12px;
  }

  .screen-today .today-thought-card {
    padding: 26px 18px 20px;
    border-radius: 22px;
  }

  .screen-today .today-thought-card textarea {
    font-size: 18px;
  }

  .screen-today .today-sheet {
    padding: 18px;
    border-radius: 24px;
  }

  .screen-today .today-action-row {
    gap: 10px;
  }

  .screen-today .today-action-row .btn {
    min-height: 52px;
    font-size: 12px;
  }

  .screen-today .today-mneme-note {
    padding: 18px 50px 18px 18px;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 15px;
  }

  .screen-today .today-note-tag {
    width: 38px;
    min-height: 98px;
    font-size: 12px;
  }

  .screen-today .today-note-copy p {
    font-size: 16px;
  }
}

/* TODAY CONCEPT POLISH — мобильная шапка и карманы после визуального smoke. */
@media (max-width: 767px) {
  .mobile-header {
    height: calc(68px + env(safe-area-inset-top));
    padding: calc(12px + env(safe-area-inset-top)) 16px 10px;
  }

  .brand-lockup.compact {
    max-width: 118px;
    gap: 8px;
  }

  .brand-lockup.compact .brand-mark {
    width: 40px;
    height: 40px;
  }

  .brand-lockup.compact strong {
    max-width: 64px;
    overflow: hidden;
    font-size: 14px;
    letter-spacing: 0.01em;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .header-notification-button {
    top: calc(15px + env(safe-area-inset-top));
    min-width: 124px;
    height: 38px;
    padding: 0 13px;
    gap: 8px;
  }

  .header-notification-text {
    max-width: 84px;
    font-size: 13px;
  }

  .avatar-button {
    width: 40px;
    height: 40px;
  }
}

.screen-today .today-pocket-name,
.screen-today .today-pocket small,
.screen-today .today-pocket strong {
  grid-column: 2;
  min-width: 0;
}

@media (max-width: 620px) {
  .screen-today .today-pockets {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }

  .screen-today .today-pocket {
    min-height: 126px;
    padding: 14px 9px 13px;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
    justify-items: center;
    align-content: center;
    gap: 5px;
    text-align: center;
  }

  .screen-today .today-pocket-asset,
  .screen-today .today-pocket-name,
  .screen-today .today-pocket small,
  .screen-today .today-pocket strong {
    grid-column: 1;
    grid-row: auto;
    justify-self: center;
    text-align: center;
  }

  .screen-today .today-pocket-asset {
    width: 46px;
    height: 46px;
  }

  .screen-today .today-pocket-name {
    max-width: 100%;
    font-size: 14px;
  }

  .screen-today .today-pocket small {
    display: none;
  }

  .screen-today .today-pocket strong {
    max-width: 100%;
    overflow: hidden;
    font-size: 15px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .screen-today .today-pocket-tail {
    display: none;
  }
}

@font-face {
  font-family: 'Commissioner';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/miniapp/assets/commissioner-latin.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/miniapp/assets/unbounded-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/miniapp/assets/unbounded-latin.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* =============================================================================
   MNEME UI — базовый слой дизайн-системы.
   Подключается после styles.css и задаёт единые правила, которым обязаны
   подчиняться все экраны.

   Три принципа, из которых выведено всё остальное:

   1. СЕТКА. Любой отступ и размер кратен 4px. Радиусов ровно три: 10 для
      мелких элементов, 16 для карточек, 24 для листов-модалок. Плюс пилюля.
      Разнобой 11/13/15/17px — главная причина, по которой экран рассыпается.

   2. ЦВЕТ = СЛОЙ ПАМЯТИ, а не украшение. У каждого слоя (день, план, деньги,
      спорт, память) один закреплённый цвет. Он появляется только там, где
      сообщает принадлежность записи: корешок карточки, иконка раздела,
      отметка в списке. Красить им фоны и градиенты запрещено.

   3. ЭЛЕМЕНТ ОБЯЗАН НЕСТИ СМЫСЛ. Если декоративную деталь убрать и ничего не
      изменится — её не должно быть. Поэтому здесь нет градиентов «чтобы
      заполнить пустоту», стекла под пустыми карточками и капса с разрядкой.
   ============================================================================= */

:root {
  --font-text:
    'Commissioner', ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display:
    'Unbounded', 'Commissioner', ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI',
    sans-serif;

  /* --- Грунт: тёмная комната ---------------------------------------------- */
  --ink-900: #0b0f10; /* фон приложения */
  --ink-800: #101718; /* шапка, док, приподнятые поверхности */
  --ink-700: #151e20; /* карточка */
  --ink-600: #1c2629; /* поле ввода, карточка внутри карточки */
  --ink-500: #242f32; /* заливка разделителей, неактивные элементы */

  /* --- Бумага: всё, что читается ------------------------------------------ */
  --paper: #f1ebdf; /* основной текст */
  --paper-warm: #e4d7be; /* суммы, даты, значения — тёплее основного */
  --paper-dim: #b4bcbb; /* вторичный текст */
  --paper-mute: #7c8a8b; /* подписи и метки */

  /* --- Линии --------------------------------------------------------------- */
  --rule: rgba(233, 226, 212, 0.09);
  --rule-strong: rgba(233, 226, 212, 0.17);

  /* --- Слои памяти ---------------------------------------------------------
     Один слой — один цвет. Везде: в доке, на корешке карточки, в уведомлениях. */
  --layer-today: #d9c9a6;
  --layer-plan: #35b7ac;
  --layer-money: #6ec97a;
  --layer-sport: #e0a961;
  --layer-memory: #a98be8;

  /* Сигналы состояния — отдельно от слоёв, их всего два */
  --signal-alert: #e8705f; /* просрочено, ошибка, удаление */
  --signal-done: #6ec97a; /* выполнено, подтверждено */

  /* --- Шкала отступов: шаг 4 -----------------------------------------------
     Весь styles.css переведён на неё: 358 сырых значений вида 13/15/17/22px
     сведены к этим восьми ступеням. Новые значения вне шкалы не добавлять. */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 20px;
  --s6: 24px;
  --s7: 32px;
  --s8: 48px;

  /* --- Радиусы: три назначения --------------------------------------------- */
  --r-sm: 10px; /* поля, чипы, мелкие кнопки */
  --r-md: 16px; /* карточки */
  --r-lg: 24px; /* модальные листы */
  --r-pill: 999px;

  /* --- Типографика ---------------------------------------------------------
     Иерархия строится размером и цветом. Капс с разрядкой не используется. */
  --t-display: 26px;
  --t-title: 19px;
  --t-body: 15px;
  --t-small: 13px;
  --t-micro: 11px;

  /* --- Каркас нижнего дока -------------------------------------------------
     Радиус люльки и положение её центра. Из этих двух значений считаются и
     вырез в панели, и кольцо вокруг кнопки голоса — поэтому они совпадают
     пиксель в пиксель при любой ширине экрана. */
  --mic-size: 60px;
  --cradle-r: 38px;
  --cradle-y: 20px;
  --dock-h: 64px;

  --ease: cubic-bezier(0.32, 0.72, 0.3, 1);

  font-family: var(--font-text);
}

html,
body,
button,
input,
textarea,
select {
  font-family: var(--font-text);
}

h1,
h2,
h3,
.btn,
.brand-lockup strong,
.dock .nav-item,
.status-badge,
.stamp,
.amount,
.ledger-figure,
.stat-card strong,
[data-figure] {
  font-family: var(--font-display);
}

/* =============================================================================
   ТИПОГРАФИКА
   ============================================================================= */

/* Метка раздела. Была капсом с разрядкой 0.12em — теперь обычный регистр с
   короткой чертой цвета слоя. Черта не декоративная: она сообщает, к какому
   слою памяти относится блок, и повторяет цвет корешка карточек под ним. */
.eyebrow {
  display: flex;
  margin: 0 0 var(--s3);
  align-items: center;
  gap: var(--s2);
  color: var(--paper-mute);
  font-size: var(--t-small);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.eyebrow::before {
  width: 14px;
  height: 2px;
  border-radius: 2px;
  background: var(--layer, var(--layer-plan));
  content: '';
}

/* Цифры — это журнал: колонки должны совпадать по разрядам */
.amount,
.stat-card strong,
.ledger-figure,
[data-figure] {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* =============================================================================
   КАРТОЧКА-КАРТОТЕКА
   Запись памяти = карточка с корешком слева. Корешок окрашен в цвет своего
   слоя — на смешанном экране «Сегодня» это единственный способ мгновенно
   отличить трату от напоминания, не читая подписи. Убери корешок — потеряешь
   информацию, а не украшение.
   ============================================================================= */

.card {
  position: relative;
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  background: var(--ink-700);
  box-shadow: none;
}

.card-pad {
  padding: var(--s4);
}

/* Карточка записи: с корешком */
.record {
  position: relative;
  padding-left: calc(var(--s4) + 6px);
  overflow: hidden;
}

.record::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  background: var(--layer, var(--layer-plan));
  content: '';
}

/* Разлиновка — только на поверхностях, где лежит сохранённая запись.
   Не фон «для красоты»: она отделяет сохранённое от интерфейса. */
.record.ruled {
  background-image: repeating-linear-gradient(
    180deg,
    transparent 0,
    transparent 27px,
    var(--rule) 27px,
    var(--rule) 28px
  );
  background-position: 0 var(--s4);
}

/* Привязка слоя. Ставится на любой контейнер, дальше цвет наследуется. */
[data-layer='today'] {
  --layer: var(--layer-today);
}
[data-layer='plan'] {
  --layer: var(--layer-plan);
}
[data-layer='money'] {
  --layer: var(--layer-money);
}
[data-layer='sport'] {
  --layer: var(--layer-sport);
}
[data-layer='memory'] {
  --layer: var(--layer-memory);
}
[data-layer='alert'] {
  --layer: var(--signal-alert);
}

/* =============================================================================
   ШТАМП
   Статус записи — это отметка поверх карточки, как штамп в картотеке, а не
   очередная разноцветная пилюля. Контур, без заливки, лёгкий наклон.
   ============================================================================= */

.stamp {
  display: inline-flex;
  padding: 3px var(--s2);
  align-items: center;
  gap: 6px;
  border: 1.5px solid currentColor;
  border-radius: var(--r-sm);
  color: var(--layer, var(--paper-mute));
  font-size: var(--t-micro);
  font-weight: 700;
  opacity: 0.9;
}

.stamp.done {
  color: var(--signal-done);
  transform: rotate(-2.5deg);
}

.stamp.overdue {
  color: var(--signal-alert);
}

/* =============================================================================
   НИЖНИЙ ДОК
   Панель физически обхватывает кнопку голоса: в её поверхности вырезана
   круглая люлька, а по краю выреза идёт кольцо, которое поднимается выше
   панели и обнимает кнопку. Вырез и кольцо построены из одних и тех же
   переменных, поэтому люлька остаётся круглой на любой ширине экрана.
   ============================================================================= */

.dock {
  position: fixed;
  z-index: 40;
  right: 0;
  bottom: 0;
  left: 0;
  height: calc(var(--dock-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  border: 0;
  background: none;
}

/* Поверхность с вырезом. Верхняя линия нарисована фоном, поэтому маска
   срезает и её — линия сама обходит люльку по дуге. */
.dock-surface {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(var(--rule-strong), var(--rule-strong)) top / 100% 1px no-repeat,
    var(--ink-800);
  -webkit-mask-image: radial-gradient(
    circle var(--cradle-r) at 50% var(--cradle-y),
    transparent calc(var(--cradle-r) - 1px),
    #000 var(--cradle-r)
  );
  mask-image: radial-gradient(
    circle var(--cradle-r) at 50% var(--cradle-y),
    transparent calc(var(--cradle-r) - 1px),
    #000 var(--cradle-r)
  );
}

/* Кольцо люльки: верхняя дуга выходит за панель и обхватывает кнопку */
.dock-cradle {
  position: absolute;
  top: var(--cradle-y);
  left: 50%;
  width: calc(var(--cradle-r) * 2);
  height: calc(var(--cradle-r) * 2);
  border: 1px solid var(--rule-strong);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.dock-slots {
  position: relative;
  display: grid;
  height: var(--dock-h);
  padding: 0 var(--s2);
  grid-template-columns:
    repeat(3, minmax(0, 1fr))
    calc(var(--cradle-r) * 2)
    repeat(3, minmax(0, 1fr));
  align-items: center;
}

.dock-gap,
.dock-balance {
  min-width: 0;
  pointer-events: none;
}

.dock-tab {
  display: flex;
  min-width: 0;
  height: 100%;
  padding: 0;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  border: 0;
  background: none;
  color: var(--paper-mute);
  font-size: var(--t-micro);
  font-weight: 600;
  cursor: pointer;
  transition: color 160ms var(--ease);
}

.dock-tab svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.75;
}

/* Правило набора иконок: ровно одна залитая деталь. В покое она приглушена,
   в активном разделе загорается цветом слоя — то есть заливка работает как
   индикатор, а не как стиль рисунка. */
.dock-tab svg [data-fill] {
  fill: currentColor;
  stroke: none;
  opacity: 0.45;
  transition: opacity 160ms var(--ease);
}

.dock-tab.active {
  color: var(--paper);
}

.dock-tab.active svg [data-fill] {
  fill: var(--layer, var(--layer-plan));
  opacity: 1;
}

.dock-tab:disabled {
  opacity: 0.4;
}

/* =============================================================================
   КНОПКА ГОЛОСА
   Садится в люльку по центру. Круглая, без градиента: заливка сплошная,
   состояние читается цветом и кольцом, а не свечением.
   ============================================================================= */

.voice-fab {
  position: fixed;
  z-index: 64;
  right: auto;
  bottom: calc(env(safe-area-inset-bottom) + var(--dock-h) - var(--cradle-y) - var(--mic-size) / 2);
  left: 50%;
  display: grid;
  width: var(--mic-size);
  height: var(--mic-size);
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--layer-plan);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
  color: #06201f;
  cursor: pointer;
  touch-action: none;
  user-select: none;
  transform: translateX(-50%);
  transition:
    background 180ms var(--ease),
    transform 180ms var(--ease);
}

.voice-root.ready .voice-fab {
  opacity: 1;
  transform: translateX(-50%);
}

.voice-fab-icon svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
}

/* Подпись «Удерживай» висела ярлыком сбоку от кнопки. В центре дока для неё
   нет места и нет нужды: подсказка показывается один раз в панели записи. */
.voice-fab-label {
  display: none;
}

.voice-root.active .voice-fab,
.voice-root.recording .voice-fab {
  right: auto;
  bottom: calc(env(safe-area-inset-bottom) + var(--dock-h) - var(--cradle-y) - var(--mic-size) / 2);
  background: var(--signal-alert);
  color: #2a0b07;
  transform: translateX(-50%) scale(1.06);
}

.voice-root.recording .voice-fab {
  animation: mic-pulse 1.6s var(--ease) infinite;
}

/* Пульс — это индикатор идущей записи, поэтому он есть только во время записи */
@keyframes mic-pulse {
  50% {
    box-shadow:
      0 6px 20px rgba(0, 0, 0, 0.45),
      0 0 0 10px rgba(232, 112, 95, 0.14);
  }
}

/* =============================================================================
   СИГНАЛ В ШАПКЕ
   Не колокольчик из стандартного набора, а карточка памяти с тихой волной:
   «MNEME что-то держит для тебя». Так уведомления остаются частью продукта,
   а не системной иконкой, которую пользователь видел тысячу раз.
   ============================================================================= */

.header-notification-button {
  position: relative;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid rgba(217, 201, 166, 0.16);
  border-radius: 15px;
  background:
    linear-gradient(180deg, rgba(241, 235, 223, 0.055), rgba(241, 235, 223, 0.015)), var(--ink-800);
  color: var(--paper-dim);
  cursor: pointer;
  transition:
    border-color 180ms var(--ease),
    color 180ms var(--ease),
    background 180ms var(--ease),
    transform 180ms var(--ease);
}

.header-notification-icon svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.75;
  overflow: visible;
}

.header-notification-icon svg .signal-card {
  transform-origin: 12px 12px;
  transition: transform 220ms var(--ease);
}

.header-notification-icon svg .signal-pulse {
  opacity: 0.55;
  stroke: currentColor;
  stroke-dasharray: 14;
  stroke-dashoffset: 0;
}

.header-notification-icon svg .signal-dot {
  fill: currentColor;
  stroke: none;
  opacity: 0.5;
  transition:
    fill 200ms var(--ease),
    opacity 200ms var(--ease);
}

.header-notification-button.has-items {
  border-color: rgba(224, 169, 97, 0.45);
  background:
    linear-gradient(180deg, rgba(224, 169, 97, 0.13), rgba(224, 169, 97, 0.035)), var(--ink-800);
  color: var(--paper);
}

.header-notification-button.has-items .signal-dot {
  fill: var(--layer-sport);
  opacity: 1;
  animation: signal-dot 1200ms var(--ease) 1;
}

.header-notification-button.has-items .signal-card {
  animation: signal-nudge 900ms var(--ease) 1;
}

@keyframes signal-dot {
  45% {
    transform: scale(1.28);
    opacity: 1;
  }
}

@keyframes signal-nudge {
  25% {
    transform: translateY(-1px) rotate(-2deg);
  }
  60% {
    transform: translateY(1px) rotate(1deg);
  }
}

/* Счётчик — цифра на бумаге, без заливки-«пузыря» поверх иконки */
.header-notification-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  display: grid;
  min-width: 17px;
  height: 17px;
  padding: 0 5px;
  place-items: center;
  border: 2px solid var(--ink-900);
  border-radius: var(--r-pill);
  background: var(--layer-sport);
  color: #241503;
  font-size: 10px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* =============================================================================
   ЗНАК MNEME
   В шапке теперь не условная буква, а маленькая фирменная обложка. Большой
   исходный PNG ужат до отдельного ассета, поэтому знак можно использовать в
   меню без тяжёлой загрузки и без ощущения временной заглушки.
   ============================================================================= */

.brand-mark {
  position: relative;
  display: grid;
  width: 38px;
  height: 38px;
  flex: none;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(217, 201, 166, 0.24);
  border-radius: 14px;
  background: #0b0f10;
  box-shadow: none;
}

.brand-mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.brand-mark svg {
  width: 64%;
  height: 64%;
  fill: none;
  stroke: var(--paper);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.brand-mark svg [data-fill] {
  fill: var(--layer-plan);
  stroke: none;
}

.splash-card .brand-mark {
  width: 52px;
  height: 52px;
  border-radius: 18px;
}

/* =============================================================================
   РЕЖИМ ДЕСКТОПА
   Док — мобильный элемент. На широком экране остаётся боковая навигация,
   кнопка голоса возвращается в правый нижний угол.
   ============================================================================= */

@media (min-width: 768px) {
  .dock {
    display: none;
  }

  .voice-fab {
    right: var(--s6);
    bottom: var(--s6);
    left: auto;
    transform: none;
  }

  .voice-root.ready .voice-fab,
  .voice-root.active .voice-fab,
  .voice-root.recording .voice-fab {
    right: var(--s6);
    bottom: var(--s6);
    left: auto;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .voice-root.recording .voice-fab,
  .header-notification-button.has-items .signal-dot,
  .header-notification-button.has-items .signal-card {
    animation: none;
  }
}

/* Остатки капса с разрядкой по экранам. Приоритет метки задаётся цветом и
   размером, а не растянутыми прописными: «ПРИМЕР» превращается в «Пример»,
   и строка перестаёт кричать громче заголовка, к которому относится. */
.capture-example > span,
.today-subhead > span,
.attention-head > span,
.task-priority,
.task-detail-grid strong,
.task-detail-grid span,
.meal-example span,
.calendar-weekday {
  letter-spacing: 0;
  text-transform: none;
}

.calendar-weekday {
  color: var(--paper-mute);
  font-size: var(--t-micro);
}

/* =============================================================================
   ГРУНТ СТРАНИЦЫ
   Одна мягкая подсветка сверху — это свет в комнате, у неё есть источник и
   направление. Вторую (тёплое пятно слева по центру) убрал: она ничего не
   освещала, только заполняла пустоту.
   ============================================================================= */

body {
  background:
    radial-gradient(circle at 92% -6%, rgba(53, 183, 172, 0.13), transparent 26rem), var(--ink-900);
  color: var(--paper);
}

/* =============================================================================
   ШАПКА РАЗДЕЛА
   Название и одна живая строка. Раньше тут стояло три строки текста, из-за
   чего содержимое любого экрана начиналось ниже первого сгиба.
   ============================================================================= */

.page-head {
  display: flex;
  margin-bottom: var(--s1);
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s4);
}

.page-head h1 {
  margin: 0;
  font-size: var(--t-display);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.page-status {
  margin: var(--s1) 0 0;
  color: var(--paper-mute);
  font-size: var(--t-small);
}

.page-subtitle {
  display: none;
}

/* =============================================================================
   ВКЛАДКИ ВНУТРИ РАЗДЕЛА
   Три сегмента вместо четырёх, без стекла и тени: это переключатель, а не
   ещё одна плавающая панель поверх содержимого.
   ============================================================================= */

.sport-tabs {
  position: static;
  display: grid;
  margin: 0 0 var(--s2);
  padding: var(--s1);
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s1);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  background: var(--ink-800);
  box-shadow: none;
  backdrop-filter: none;
}

.sport-tabs button {
  padding: var(--s2) 0;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--paper-mute);
  font-size: var(--t-small);
  font-weight: 600;
  cursor: pointer;
}

.sport-tabs button.active {
  background: var(--ink-600);
  color: var(--paper);
}

/* =============================================================================
   СПОРТ: ДЕНЬ
   ============================================================================= */

.sport-content {
  display: grid;
  gap: var(--s3);
}

/* Главная цифра дня. Единственное место на экране с таким кеглем — по ней
   понятно, куда смотреть первым. */
.sport-energy {
  display: flex;
  margin: var(--s3) 0 var(--s4);
  align-items: baseline;
  gap: var(--s2);
}

.sport-energy strong {
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
  color: var(--paper-warm);
}

.sport-energy span {
  color: var(--paper-mute);
  font-size: var(--t-small);
}

.sport-macro-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s3);
}

.sport-metric > div {
  display: flex;
  margin-bottom: var(--s1);
  flex-direction: column;
  gap: 2px;
}

.sport-metric span {
  color: var(--paper-mute);
  font-size: var(--t-micro);
}

.sport-metric strong {
  font-size: var(--t-body);
  font-weight: 650;
}

.sport-metric .progress-track {
  margin-top: var(--s2);
}

/* Полоса заполнения — цвет слоя, а не радуга по нутриентам */
.progress-track {
  height: 4px;
  border-radius: 2px;
  background: var(--ink-500);
}

.progress-track > span {
  background: var(--layer, var(--layer-plan));
}

.sport-water {
  margin-top: var(--s4);
  padding-top: var(--s4);
  border-top: 1px solid var(--rule);
}

.sport-water-head {
  display: flex;
  margin-bottom: var(--s2);
  align-items: baseline;
  justify-content: space-between;
}

.sport-water-head span {
  color: var(--paper-mute);
  font-size: var(--t-small);
}

.sport-water .button-row {
  margin-top: var(--s3);
}

/* Строка записи: без цветной плашки-иконки слева. Принадлежность к слою уже
   сообщает корешок карточки, второй раз её дублировать незачем. */
.sport-entry {
  display: flex;
  width: 100%;
  padding: var(--s3) 0;
  align-items: center;
  gap: var(--s3);
  border: 0;
  border-bottom: 1px solid var(--rule);
  background: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.sport-entry:last-child {
  border-bottom: 0;
}

.sport-entry .item-main {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: 2px;
}

.sport-entry .item-main strong {
  font-size: var(--t-body);
  font-weight: 600;
}

.sport-entry .item-main small {
  overflow: hidden;
  color: var(--paper-mute);
  font-size: var(--t-small);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sport-entry-value {
  color: var(--paper-warm);
  font-size: var(--t-small);
  font-weight: 650;
  white-space: nowrap;
}

.sport-entry-list {
  margin-top: var(--s2);
}

/* Свод показателей: одна карточка-кнопка вместо трёх отдельных плиток,
   которые повторяли содержимое вкладки «Прогресс». */
.sport-figures {
  display: grid;
  width: 100%;
  grid-template-columns: 1fr 1fr 1fr auto;
  align-items: center;
  gap: var(--s3);
  border: 1px solid var(--rule);
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.sport-figures span {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.sport-figures small {
  color: var(--paper-mute);
  font-size: var(--t-micro);
}

.sport-figures strong {
  font-size: var(--t-title);
  font-weight: 650;
}

.sport-figures .item-tail {
  color: var(--paper-mute);
}

/* Дисклеймеры и служебные пояснения. Раньше каждый занимал отдельную карточку
   с рамкой и повторялся на нескольких вкладках. */
.fine-print {
  margin: 0;
  color: var(--paper-mute);
  font-size: var(--t-small);
  line-height: 1.45;
}

.sport-note {
  display: none;
}

/* =============================================================================
   СЕГОДНЯ
   ============================================================================= */

/* Поле захвата. Раньше над ним стояло пять строк обучающего текста — кикер,
   заголовок, пояснение, слово «Пример» и подпись «Нажми, чтобы подставить».
   Осталось само поле и одна строка примера: она подставляется по нажатию,
   то есть работает, а не объясняет. */
.capture-card {
  display: grid;
  gap: var(--s3);
}

.capture-card .capture-copy,
.capture-card .capture-kicker {
  display: none;
}

.smart-input {
  display: grid;
  gap: var(--s2);
}

.smart-input textarea {
  width: 100%;
  padding: var(--s3);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  background: var(--ink-600);
  color: var(--paper);
  font: inherit;
  font-size: var(--t-body);
  resize: none;
}

.smart-input textarea::placeholder {
  color: var(--paper-mute);
}

.capture-example {
  padding: var(--s2) var(--s3);
  border: 1px dashed var(--rule-strong);
  border-radius: var(--r-sm);
  background: none;
  color: var(--paper-mute);
  font: inherit;
  font-size: var(--t-small);
  text-align: left;
  cursor: pointer;
}

.capture-example:hover {
  border-style: solid;
  color: var(--paper-dim);
}

/* Итоги дня: три ссылки на слои вместо четырёх плиток, одна из которых
   повторяла счётчик планов из виджета ниже. */
.today-figures {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s2);
}

.today-figures > * {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s1);
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.today-figures small {
  color: var(--paper-mute);
  font-size: var(--t-micro);
}

.today-figures strong {
  font-size: var(--t-body);
  font-weight: 650;
  line-height: 1.25;
}

/* Каждая плитка помечена корешком своего слоя — так видно, куда она ведёт,
   до нажатия. */
.today-figures > *::before {
  position: absolute;
  top: var(--s3);
  bottom: var(--s3);
  left: 0;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: var(--layer);
  content: '';
}

.insight-card h2 {
  margin: 0 0 var(--s2);
  font-size: var(--t-title);
}

.insight-card p {
  margin: 0 0 var(--s2);
}

.insight-card blockquote {
  display: none;
}

.insight-card .button-row {
  margin-top: var(--s3);
}

/* Экраны дышат одним ритмом: расстояние между блоками одно и то же везде */
.screen {
  gap: var(--s3);
}

.today-dashboard,
.hero-grid,
.notes-layout,
.sport-summary-grid,
.sport-two-columns {
  display: grid;
  gap: var(--s3);
}

/* =============================================================================
   ЗАМЕТКИ
   ============================================================================= */

.search-field {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s2);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  background: var(--ink-600);
}

.search-field input {
  width: 100%;
  padding: var(--s3) var(--s3) var(--s3) 0;
  border: 0;
  background: none;
  color: var(--paper);
  font: inherit;
  font-size: var(--t-body);
}

.search-field input:focus {
  outline: none;
}

.search-glyph {
  padding-left: var(--s3);
  color: var(--paper-mute);
}

/* Ряд фильтров. Пилюли одинаковой формы и цвета: активная отличается
   заливкой, а не собственным оттенком — иначе пять цветов начинают
   соревноваться за внимание с содержимым списка. */
.chip-row {
  display: flex;
  overflow-x: auto;
  gap: var(--s2);
  scrollbar-width: none;
}

.chip-row::-webkit-scrollbar {
  display: none;
}

.chip {
  padding: 6px var(--s3);
  flex: none;
  border: 1px solid var(--rule);
  border-radius: var(--r-pill);
  background: none;
  color: var(--paper-mute);
  font: inherit;
  font-size: var(--t-small);
  font-weight: 600;
  cursor: pointer;
}

.chip.active {
  border-color: transparent;
  background: var(--layer-memory);
  color: #17102b;
}

/* Строка заметки: метка типа набрана текстом слева, без цветного бейджа на
   каждый тип. Цвет здесь один — слой памяти. */
.note-item {
  display: flex;
  width: 100%;
  padding: var(--s3) 0;
  align-items: flex-start;
  gap: var(--s3);
  border: 0;
  border-bottom: 1px solid var(--rule);
  background: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.note-item:last-child {
  border-bottom: 0;
}

.kind-badge {
  padding: 2px var(--s2);
  flex: none;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-sm);
  background: none;
  color: var(--paper-mute);
  font-size: var(--t-micro);
  font-weight: 600;
}

.note-content {
  display: -webkit-box;
  overflow: hidden;
  color: var(--paper-dim);
  font-size: var(--t-small);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.note-tags {
  display: flex;
  margin-top: var(--s1);
  flex-wrap: wrap;
  gap: var(--s1);
}

.tag {
  color: var(--layer-memory);
  font-size: var(--t-micro);
}

.memory-safety,
.notes-layout > div > .insight-card {
  display: none;
}

/* =============================================================================
   НАСТРОЙКИ
   Группы с названиями и одинаковыми строками. Раньше строки различались
   цветными квадратами-иконками, где цвет выбирался произвольно.
   ============================================================================= */

.more-layout {
  display: grid;
  gap: var(--s3);
}

.settings-group h2 {
  margin: 0 0 var(--s2);
  font-size: var(--t-title);
}

.settings-item {
  display: flex;
  width: 100%;
  padding: var(--s3) 0;
  align-items: center;
  gap: var(--s3);
  border: 0;
  border-bottom: 1px solid var(--rule);
  background: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.settings-item:last-child {
  border-bottom: 0;
}

.settings-copy {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.settings-copy strong {
  font-size: var(--t-body);
  font-weight: 600;
}

.settings-copy small {
  color: var(--paper-mute);
  font-size: var(--t-small);
}

.settings-item .stat-icon {
  display: none;
}

.settings-item .item-tail {
  color: var(--paper-mute);
}

/* =============================================================================
   РИСОВАННЫЕ АССЕТЫ
   Линия проходит через фильтр ink-rough: turbulence уводит штрих в сторону,
   как дрожит рука. Именно из-за этой неровности рисунок читается живым, а не
   выведенным по линейке.
   ============================================================================= */

.art-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.art-scene {
  position: relative;
  display: grid;
  width: 128px;
  height: 128px;
  place-items: center;
  flex: none;
  isolation: isolate;
}

.art-scene.art-sm {
  width: 92px;
  height: 92px;
}

.art-scene.art-lg {
  width: 168px;
  height: 168px;
}

/* Пятно слоя под рисунком. Медленно плывёт — на глаз почти незаметно, но
   экран перестаёт выглядеть замершим. */
.art-blob {
  position: absolute;
  z-index: 0;
  width: 100%;
  height: 100%;
  fill: var(--layer, var(--layer-plan));
  opacity: 0.16;
  filter: url(#ink-rough-soft);
  animation: blob-drift 14s ease-in-out infinite alternate;
}

@keyframes blob-drift {
  from {
    transform: translate(-2px, 1px) rotate(-2deg) scale(1);
  }
  to {
    transform: translate(3px, -2px) rotate(3deg) scale(1.05);
  }
}

.art-figure {
  position: relative;
  z-index: 1;
  width: 78%;
  height: 78%;
  overflow: visible;
}

.art-scene.art-external .art-blob {
  width: 92%;
  height: 92%;
  opacity: 0.1;
}

.art-ink {
  fill: none;
  stroke: var(--paper-dim);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  filter: url(#ink-rough);
}

.art-ink .art-thin {
  stroke-width: 1.4;
  opacity: 0.7;
}

.art-ink .art-dash {
  stroke-dasharray: 3 5;
  opacity: 0.8;
}

.art-ink .art-dot {
  fill: var(--layer, var(--layer-plan));
  stroke: none;
}

/* Росчерк на фоне экрана: длинная линия, уходящая за край листа */
/* Росчерк намеренно уходит за край листа, поэтому слой, в котором он живёт,
   обязан его обрезать — иначе появляется горизонтальный скролл. */
.app-main {
  position: relative;
  overflow-x: clip;
}

.art-ribbon {
  position: absolute;
  z-index: 0;
  top: -24px;
  right: -40px;
  width: 150%;
  height: 260px;
  fill: none;
  stroke: var(--paper);
  stroke-width: 1;
  opacity: 0.07;
  filter: url(#ink-rough-soft);
  pointer-events: none;
  animation: ribbon-drift 26s ease-in-out infinite alternate;
}

@keyframes ribbon-drift {
  to {
    transform: translate(-14px, 8px);
  }
}

.screen > * {
  position: relative;
  z-index: 1;
}

/* =============================================================================
   ДВИЖЕНИЕ
   Анимации привязаны к смыслу: появление объясняет, откуда взялся блок,
   нажатие подтверждает касание, полоса заполняется — значит, значение росло.
   Ничего не крутится вечно просто так.
   ============================================================================= */

/* Блоки экрана въезжают по очереди — глаз успевает заметить порядок */
.screen > * {
  animation: block-in 420ms var(--ease) both;
}

.screen > *:nth-child(1) {
  animation-delay: 0ms;
}
.screen > *:nth-child(2) {
  animation-delay: 45ms;
}
.screen > *:nth-child(3) {
  animation-delay: 90ms;
}
.screen > *:nth-child(4) {
  animation-delay: 135ms;
}
.screen > *:nth-child(5) {
  animation-delay: 180ms;
}
.screen > *:nth-child(n + 6) {
  animation-delay: 220ms;
}

@keyframes block-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

/* Строки списка проявляются следом за своей карточкой */
.sport-entry-list > *,
.plan-widget-list > *,
.note-list > *,
.settings-list > * {
  animation: row-in 340ms var(--ease) both;
}

.sport-entry-list > *:nth-child(2),
.plan-widget-list > *:nth-child(2),
.note-list > *:nth-child(2),
.settings-list > *:nth-child(2) {
  animation-delay: 40ms;
}

.sport-entry-list > *:nth-child(3),
.plan-widget-list > *:nth-child(3),
.note-list > *:nth-child(3),
.settings-list > *:nth-child(3) {
  animation-delay: 80ms;
}

.sport-entry-list > *:nth-child(n + 4),
.plan-widget-list > *:nth-child(n + 4),
.note-list > *:nth-child(n + 4),
.settings-list > *:nth-child(n + 4) {
  animation-delay: 120ms;
}

@keyframes row-in {
  from {
    opacity: 0;
    transform: translateX(-6px);
  }
}

/* Отклик на касание: карточка проседает под пальцем */
.card,
.chip,
.btn,
.dock-tab,
.sport-entry,
.note-item,
.settings-item {
  transition:
    transform 140ms var(--ease),
    border-color 160ms var(--ease),
    background 160ms var(--ease),
    color 160ms var(--ease);
}

button.card:active,
.chip:active,
.btn:active,
.sport-entry:active,
.note-item:active,
.settings-item:active {
  transform: scale(0.985);
}

.dock-tab:active {
  transform: scale(0.92);
}

/* Полоса заполнения растёт от нуля — видно движение, а не готовый результат */
.progress-track > span {
  animation: track-fill 720ms var(--ease) both;
  transform-origin: left center;
}

@keyframes track-fill {
  from {
    transform: scaleX(0);
  }
}

/* Кнопка голоса в покое едва заметно дышит: это приглашение говорить */
.voice-root.ready .voice-fab:not(.pressed) {
  animation: mic-breathe 3.4s var(--ease) infinite;
}

@keyframes mic-breathe {
  50% {
    box-shadow:
      0 6px 20px rgba(0, 0, 0, 0.45),
      0 0 0 6px rgba(53, 183, 172, 0.1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .screen > *,
  .sport-entry-list > *,
  .plan-widget-list > *,
  .note-list > *,
  .settings-list > *,
  .progress-track > span,
  .art-blob,
  .art-ribbon,
  .voice-root.ready .voice-fab {
    animation: none;
  }
}

/* =============================================================================
   ОБЛОЖКА ЭКРАНА «СЕГОДНЯ»
   Рисунок, приветствие и дата стоят на одной оси по центру. Раньше эта строка
   прижималась к левому краю, а справа оставалось пустое место под кнопки,
   которых на этом экране нет.
   ============================================================================= */

.page-head.hero {
  display: block;
  padding: var(--s2) 0 var(--s4);
  text-align: center;
}

.page-head.hero .art-scene {
  margin: 0 auto;
}

.page-head.hero h1 {
  margin-top: var(--s3);
  font-size: 30px;
}

.page-head.hero .page-status {
  margin-top: var(--s1);
}

/* =============================================================================
   ПУСТОЕ СОСТОЯНИЕ
   Единственное место, где у раздела есть свой рисунок: пусто — не значит
   «ничего», значит «здесь пока тихо».
   ============================================================================= */

.empty-state {
  display: grid;
  padding: var(--s5) var(--s4);
  justify-items: center;
  gap: var(--s3);
  text-align: center;
}

.empty-state.compact {
  padding: var(--s4) var(--s3);
}

.empty-state.compact .art-scene {
  width: 92px;
  height: 92px;
}

.empty-state h3 {
  margin: var(--s2) 0 0;
  font-size: var(--t-title);
  font-weight: 650;
}

.empty-state p {
  margin: 0;
  max-width: 32ch;
  color: var(--paper-mute);
  font-size: var(--t-small);
  line-height: 1.5;
}

.empty-state .btn {
  margin-top: var(--s3);
}

.empty-icon {
  display: none;
}

/* =============================================================================
   ПЛАН ДНЯ
   ============================================================================= */

/* Один ряд действий вместо четырёх кнопок, разбросанных по экрану */
.action-row {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: var(--s2);
}

.action-row .btn.ghost {
  padding: 0 var(--s3);
}

.plan-date-switcher {
  display: flex;
  padding: var(--s2);
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  background: var(--ink-800);
  text-align: center;
}

.plan-date-switcher strong {
  display: block;
  font-size: var(--t-body);
}

.plan-date-switcher small {
  color: var(--paper-mute);
  font-size: var(--t-small);
}

.plan-overview {
  display: flex;
  align-items: center;
  gap: var(--s4);
}

.plan-overview-copy h2 {
  margin: 0 0 var(--s1);
  font-size: var(--t-title);
}

.plan-overview-copy p {
  margin: 0;
  font-size: var(--t-small);
}

/* Кольцо прогресса заполняется при появлении экрана */
.plan-progress-ring {
  display: grid;
  width: 68px;
  height: 68px;
  flex: none;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(var(--layer-plan) var(--progress, 0deg), var(--ink-500) 0);
  animation: ring-fill 900ms var(--ease) both;
}

.plan-progress-ring::before {
  position: absolute;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--ink-700);
  content: '';
}

.plan-progress-ring strong {
  position: relative;
  font-size: var(--t-small);
  font-weight: 700;
}

@keyframes ring-fill {
  from {
    transform: rotate(-90deg) scale(0.9);
    opacity: 0;
  }
}

.plan-alert {
  display: flex;
  align-items: center;
  gap: var(--s3);
  border-color: rgba(232, 112, 95, 0.4);
}

.plan-alert .item-main {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
}

.plan-alert small {
  color: var(--paper-mute);
  font-size: var(--t-small);
}

.plan-sidebar,
.tasks-back {
  display: none;
}

/* Пятно слоя за названием раздела. Цвет совпадает с вкладкой в доке и
   корешками карточек ниже — по нему видно, где ты находишься. */
.page-head {
  position: relative;
}

.head-blob {
  position: absolute;
  z-index: 0;
  top: -18px;
  left: -22px;
  width: 84px;
  height: 84px;
  opacity: 0.13;
  pointer-events: none;
}

.page-head > div,
.page-head > .header-actions {
  position: relative;
  z-index: 1;
}

/* Готовая иллюстрация вместо нарисованной кодом сцены. Занимает то же место,
   поэтому подмена не сдвигает вёрстку. */
.art-photo {
  position: relative;
  z-index: 1;
  width: 94%;
  height: 94%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

/* =============================================================================
   MNEME STRUCTURE PASS — меньше “AI dashboard”, больше продукта.
   ============================================================================= */

body {
  overflow-x: hidden;
  background: var(--ink-900);
  font-feature-settings:
    'ss01' 1,
    'tnum' 1;
}

.grain {
  opacity: 0.13;
}

.art-ribbon,
.head-blob {
  display: none;
}

.screen {
  width: min(100%, 560px);
  margin: 0 auto;
  gap: var(--s5);
}

.screen > *,
.hero-grid,
.today-dashboard,
.finance-layout,
.calendar-layout,
.notes-layout,
.tasks-layout,
.settings-column,
.sport-content {
  min-width: 0;
}

.app-main {
  overflow-x: hidden;
}

.page-head {
  margin-bottom: var(--s2);
  align-items: flex-start;
}

.page-head h1 {
  max-width: 13ch;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(28px, 7vw, 38px);
  font-weight: 720;
  line-height: 0.98;
  letter-spacing: -0.045em;
}

.page-status {
  max-width: 32ch;
  margin-top: var(--s2);
  color: var(--paper-mute);
  font-size: var(--t-small);
  line-height: 1.42;
}

.eyebrow,
.capture-kicker,
.today-subhead > span,
.attention-head > span,
.missed-list-title,
.sport-log-divider,
.sport-form-section .eyebrow,
.onboarding-hero .eyebrow,
.onboarding-copy .eyebrow {
  font-family: var(--font-text);
  letter-spacing: 0;
  text-transform: none;
}

.eyebrow::before {
  width: 18px;
  height: 3px;
}

.card,
.capture-card,
.day-plan-widget,
.today-schedule-card,
.insight-card,
.calendar-card,
.report-card,
.sport-score-card,
.sport-workout-hero,
.sport-plan-hero,
.sport-today-nutrition,
.sport-water-card,
.sport-quick-card,
.sport-energy-card,
.sport-log,
.admin-system-card,
.admin-plan-card,
.tariff-card,
.companion-card {
  border-color: var(--rule);
  background: var(--ink-700);
  box-shadow: none;
  backdrop-filter: none;
}

.card::before,
.card::after,
.capture-card::before,
.capture-card::after,
.balance-hero::after,
.transaction-detail-hero::after,
.calendar-detail-hero::after,
.sport-welcome::after,
.onboarding-hero::after,
.tariff-card::after {
  display: none;
}

.section-head {
  display: flex;
  margin-bottom: var(--s4);
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s4);
}

.section-head h2,
.section-head h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(19px, 4.8vw, 24px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.035em;
}

.btn {
  min-height: 48px;
  border-radius: 17px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 680;
  letter-spacing: -0.025em;
}

.btn.primary,
.btn.success,
.btn.danger {
  border: 1px solid color-mix(in srgb, var(--layer, var(--layer-plan)) 38%, transparent);
  box-shadow: none;
}

.btn.primary {
  background: color-mix(in srgb, var(--layer-plan) 68%, var(--ink-700));
}

.btn.success {
  background: color-mix(in srgb, var(--signal-done) 64%, var(--ink-700));
}

.btn.danger {
  background: color-mix(in srgb, var(--signal-alert) 62%, var(--ink-700));
}

.btn.ghost {
  background: var(--ink-600);
}

.action-icon {
  flex: none;
}

.capture-card {
  min-height: auto;
  padding: var(--s4);
}

.smart-input {
  display: grid;
  padding: var(--s2);
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s2);
  border-color: color-mix(in srgb, var(--layer-today) 26%, transparent);
  border-radius: 22px;
  background: var(--ink-800);
  box-shadow: inset 0 0 0 1px rgba(241, 235, 223, 0.035);
}

.smart-input textarea {
  min-height: 72px;
  padding: var(--s3);
  font-size: 15px;
}

.smart-input .btn {
  width: 100%;
  justify-content: center;
}

button.capture-example {
  display: block;
  width: 100%;
  margin-top: var(--s3);
  padding: var(--s3) var(--s4);
  border: 1px dashed var(--rule-strong);
  border-radius: 18px;
  background: rgba(241, 235, 223, 0.035);
  color: var(--paper-dim);
  font: 500 13px/1.45 var(--font-text);
  text-align: left;
}

.day-plan-widget {
  margin: 0;
  gap: var(--s4);
}

.day-plan-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s4);
}

.day-plan-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(24px, 6vw, 31px);
  line-height: 1;
  letter-spacing: -0.045em;
}

.day-plan-head p {
  margin: var(--s2) 0 0;
  color: var(--paper-mute);
  font-size: var(--t-small);
  line-height: 1.35;
}

.day-plan-head .link-button {
  flex: none;
  color: var(--layer-plan);
}

.attention-clear,
.today-status-strip {
  border: 1px solid color-mix(in srgb, var(--signal-done) 22%, transparent);
  border-radius: 18px;
  background: rgba(110, 201, 122, 0.09);
}

.attention-check {
  position: relative;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 14px;
  background: rgba(110, 201, 122, 0.13);
  color: var(--signal-done);
}

.attention-check svg,
.plan-kind svg,
.task-check .action-icon {
  display: none;
}

.attention-check::before,
.plan-kind::before,
.task-check::before {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: currentColor;
  content: '';
}

.today-subhead {
  display: flex;
  margin: 0;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  color: var(--paper-mute);
  font-size: var(--t-small);
}

.plan-widget-list {
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.plan-widget-row {
  margin-bottom: var(--s2);
  padding: var(--s3);
  grid-template-columns: 46px 28px minmax(0, 1fr) 16px;
  border: 1px solid var(--rule);
  border-radius: 18px;
  background: var(--ink-600);
}

.plan-widget-row:last-child {
  margin-bottom: 0;
  border-bottom: 1px solid var(--rule);
}

.plan-widget-time {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: -0.03em;
}

.plan-kind {
  width: 24px;
  height: 24px;
  border-radius: 10px;
}

/* =============================================================================
   МИКРОЯЗЫК СТАТУСОВ
   Статусы больше не строятся на «галочка/колокольчик/кружок». Везде один
   мотив: маленькая карточка памяти. Пустая — ждёт действия, залитая — закрыта,
   тёплая — требует внимания. Так пользователь видит состояние даже без текста.
   ============================================================================= */

.attention-check,
.plan-kind,
.task-check {
  --micro-fill: currentColor;
}

.attention-check,
.plan-kind {
  border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
  border-radius: 13px;
  background: color-mix(in srgb, currentColor 14%, transparent);
}

.attention-check.urgent,
.today-status-strip.urgent .attention-check {
  color: var(--layer-sport);
}

.attention-check::before,
.plan-kind::before,
.task-check::before {
  display: block;
  width: 13px;
  height: 17px;
  border: 1.7px solid currentColor;
  border-radius: 5px 5px 2px 2px;
  background: transparent;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 76%, 0 100%);
  content: '';
}

.attention-check::after,
.plan-kind::after {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 2px;
  background: currentColor;
  content: '';
  opacity: 0.75;
  transform: translate(6px, -7px);
}

.attention-check,
.plan-kind {
  position: relative;
}

.attention-clear:not(.urgent) .attention-check::before,
.task-item.completed .task-check::before {
  background: currentColor;
}

.today-status-strip.urgent .attention-check::before,
.plan-widget-row:not(.completed) .plan-kind::before {
  border-style: solid;
}

.plan-kind::before {
  width: 10px;
  height: 14px;
  border-width: 1.5px;
}

.plan-kind::after {
  width: 4px;
  height: 4px;
  transform: translate(5px, -6px);
}

.task-check {
  color: var(--paper-mute);
}

.task-check::before {
  width: 12px;
  height: 16px;
  border-color: currentColor;
}

.task-check:hover::before {
  border-color: var(--signal-done);
}

.task-item.completed .task-check::before {
  border-color: var(--signal-done);
  color: var(--signal-done);
}

/* =============================================================================
   ШАПКА И БРЕНД
   Без тяжёлого стекла и случайных плашек: знак, название, входящий сигнал и
   профиль лежат на одной спокойной планке. Это «обложка тетради», а не панель
   админки.
   ============================================================================= */

.brand-lockup {
  gap: 10px;
  border-radius: 18px;
  color: var(--paper);
}

.brand-lockup span:last-child {
  min-width: 0;
}

.brand-lockup strong {
  font-size: 13px;
  line-height: 1.05;
  letter-spacing: 0.055em;
}

.brand-lockup small {
  margin-top: 3px;
  color: var(--paper-mute);
  font-size: 12px;
  line-height: 1.2;
}

.desktop-sidebar {
  border-right-color: var(--rule);
  background: rgba(11, 15, 16, 0.96);
  backdrop-filter: none;
}

.desktop-sidebar .brand-lockup {
  padding: var(--s2);
  border: 1px solid transparent;
}

.desktop-sidebar .brand-lockup:hover {
  border-color: var(--rule);
  background: rgba(241, 235, 223, 0.035);
}

.avatar-button {
  width: 42px;
  height: 42px;
  border: 1px solid rgba(53, 183, 172, 0.28);
  border-radius: 15px;
  background: var(--ink-800);
  color: var(--paper);
  box-shadow: none;
}

.avatar-button img {
  border-radius: inherit;
}

.mobile-header-actions {
  gap: var(--s2);
}

@media (max-width: 767px) {
  .app-main {
    padding-top: calc(78px + env(safe-area-inset-top));
  }

  .mobile-header {
    right: 0;
    left: 0;
    height: calc(66px + env(safe-area-inset-top));
    padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
    border-bottom: 1px solid var(--rule-strong);
    background: rgba(11, 15, 16, 0.97);
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.26);
    backdrop-filter: none;
  }

  .mobile-header::after {
    position: absolute;
    right: 16px;
    bottom: -1px;
    left: 16px;
    height: 1px;
    background: linear-gradient(
      90deg,
      transparent,
      rgba(217, 201, 166, 0.34),
      rgba(53, 183, 172, 0.34),
      transparent
    );
    content: '';
  }

  .brand-lockup.compact {
    max-width: min(58vw, 260px);
    padding: 0;
    align-items: center;
  }

  .brand-lockup.compact strong {
    font-size: 14px;
    letter-spacing: 0.065em;
  }

  .brand-lockup.compact small {
    max-width: 180px;
  }

  .brand-lockup.compact .brand-mark {
    width: 42px;
    height: 42px;
    border-radius: 15px;
  }
}

.today-actions,
.hybrid-plan-actions,
.button-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s2);
}

.today-actions .btn,
.hybrid-plan-actions .btn {
  justify-content: center;
}

.today-actions .action-icon,
.hybrid-plan-actions .action-icon {
  display: none;
}

.art-scene.art-external .art-blob {
  display: none;
}

.art-photo {
  width: 112%;
  height: 112%;
  transform: translateY(2px);
}

.empty-state {
  gap: var(--s3);
}

.empty-state .art-scene {
  margin-bottom: var(--s1);
}

.empty-state h3 {
  font-family: var(--font-display);
  letter-spacing: -0.035em;
}

@media (max-width: 720px) {
  .screen {
    width: 100%;
  }

  .page-head h1 {
    max-width: 12ch;
  }

  .today-actions,
  .hybrid-plan-actions,
  .button-row {
    grid-template-columns: 1fr;
  }

  .day-plan-head {
    align-items: flex-start;
  }
}

/* =============================================================================
   ЭТАЛОННЫЙ ЭКРАН «СЕГОДНЯ»
   Первая поверхность MNEME: не dashboard, а тёмная личная тетрадь. Центр,
   бумага, карточки, память. Этот экран — образец языка для следующих разделов.
   ============================================================================= */

.screen-today {
  width: min(100%, 560px);
  margin-inline: auto;
  gap: var(--s4);
}

.today-cover {
  position: relative;
  display: grid;
  overflow: hidden;
  padding: var(--s5);
  justify-items: center;
  border: 1px solid rgba(217, 201, 166, 0.18);
  border-radius: 34px;
  background:
    linear-gradient(180deg, rgba(241, 235, 223, 0.035), transparent 34%),
    repeating-linear-gradient(
      0deg,
      rgba(241, 235, 223, 0.018) 0,
      rgba(241, 235, 223, 0.018) 1px,
      transparent 1px,
      transparent 26px
    ),
    #101718;
  color: var(--paper);
  text-align: center;
}

.today-cover::before {
  position: absolute;
  top: var(--s4);
  right: var(--s4);
  bottom: var(--s4);
  width: 6px;
  border-radius: var(--r-pill);
  background: linear-gradient(
    180deg,
    rgba(53, 183, 172, 0.9),
    rgba(217, 201, 166, 0.72),
    rgba(241, 235, 223, 0.08)
  );
  content: '';
  opacity: 0.72;
}

.today-cover::after {
  position: absolute;
  right: 14%;
  bottom: -38px;
  width: 170px;
  height: 170px;
  border: 1px solid rgba(217, 201, 166, 0.08);
  border-radius: 50%;
  content: '';
  opacity: 0.8;
}

.today-cover > * {
  position: relative;
  z-index: 1;
}

.today-cover-art {
  display: grid;
  width: min(72vw, 270px);
  height: min(72vw, 245px);
  margin: calc(var(--s2) * -1) auto 0;
  place-items: center;
}

.today-cover-art img {
  display: block;
  width: min(72vw, 270px);
  height: min(72vw, 270px);
  object-fit: contain;
  transform: rotate(-2deg);
  filter: drop-shadow(0 22px 28px rgba(0, 0, 0, 0.32));
}

.today-cover-copy {
  display: grid;
  max-width: 420px;
  justify-items: center;
  gap: var(--s2);
}

.today-cover-date {
  margin: 0;
  color: var(--paper-warm);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.35;
}

.today-cover h1 {
  margin: 0;
  max-width: 10ch;
  font-family: var(--font-display);
  font-size: clamp(34px, 10vw, 48px);
  font-weight: 760;
  line-height: 0.98;
  letter-spacing: -0.07em;
}

.today-cover-line {
  margin: 0;
  max-width: 36ch;
  color: var(--paper-dim);
  font-size: 15px;
  line-height: 1.45;
}

.today-smart-input {
  width: min(100%, 440px);
  margin: var(--s5) auto 0;
  padding: var(--s2);
  border: 1px solid rgba(217, 201, 166, 0.18);
  border-radius: 25px;
  background: rgba(11, 15, 16, 0.78);
}

.today-smart-input textarea {
  min-height: 86px;
  border: 1px solid rgba(241, 235, 223, 0.07);
  border-radius: 19px;
  background: #151e20;
  text-align: center;
}

.today-smart-input textarea::placeholder {
  color: rgba(180, 188, 187, 0.68);
}

.today-smart-input .btn {
  max-width: 260px;
  margin-inline: auto;
}

.today-cover-example {
  width: auto;
  margin-top: var(--s3);
  padding: var(--s2) var(--s4);
  border: 0;
  background: transparent;
  color: var(--paper-mute);
  text-align: center;
}

.today-cover-example:hover {
  color: var(--paper-warm);
}

.screen-today .today-hybrid-card,
.screen-today .insight-card,
.screen-today .today-figures > * {
  border-color: rgba(217, 201, 166, 0.12);
  background: linear-gradient(180deg, rgba(241, 235, 223, 0.026), transparent), var(--ink-700);
}

.screen-today .today-status-strip {
  padding: var(--s3);
  border-color: rgba(110, 201, 122, 0.18);
  background: rgba(110, 201, 122, 0.075);
}

.screen-today .today-status-strip.urgent {
  border-color: rgba(224, 169, 97, 0.28);
  background: rgba(224, 169, 97, 0.08);
}

.screen-today .plan-widget-row {
  padding: var(--s3);
  grid-template-columns: 48px minmax(0, 1fr) 16px;
}

.screen-today .plan-widget-row .plan-kind {
  display: none;
}

.screen-today .today-actions,
.screen-today .hybrid-plan-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.screen-today .today-actions .btn,
.screen-today .hybrid-plan-actions .btn {
  min-height: 50px;
  justify-content: center;
}

.screen-today .today-figures {
  grid-template-columns: 1fr;
}

.screen-today .today-figures > * {
  min-height: 64px;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  border-radius: 20px;
}

.screen-today .today-figures small {
  font-size: 13px;
}

.screen-today .today-figures strong {
  max-width: 55%;
  font-family: var(--font-display);
  text-align: right;
}

.screen-today .insight-card .eyebrow {
  margin-bottom: var(--s2);
}

.screen-today .insight-card .button-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 420px) {
  .screen-today {
    gap: var(--s3);
  }

  .today-cover {
    padding: var(--s4);
    border-radius: 30px;
  }

  .today-cover::before {
    width: 5px;
  }

  .today-cover-art {
    width: min(74vw, 230px);
    height: min(70vw, 210px);
  }

  .today-cover-art img {
    width: min(74vw, 230px);
    height: min(74vw, 230px);
  }

  .today-cover h1 {
    font-size: clamp(31px, 11vw, 42px);
  }

  .today-cover-line {
    font-size: 14px;
  }

  .today-smart-input textarea {
    min-height: 78px;
  }

  .screen-today .today-actions,
  .screen-today .hybrid-plan-actions,
  .screen-today .insight-card .button-row {
    grid-template-columns: 1fr;
  }
}

/* =============================================================================
   TODAY V2 — цельная первая страница
   Этот слой намеренно стоит последним: он перебирает главный экран целиком,
   а не чинит отдельные карточки поверх старого dashboard-ритма.
   ============================================================================= */

.screen-today {
  width: min(100%, 540px);
  gap: 14px;
}

.today-cover,
.today-sheet,
.today-pocket {
  box-shadow: none;
}

.today-cover {
  padding: 22px;
  border-color: rgba(217, 201, 166, 0.16);
  border-radius: 32px;
  background: #101718;
  box-shadow: inset 0 1px 0 rgba(241, 235, 223, 0.045);
}

.today-cover::before {
  top: 18px;
  right: 18px;
  bottom: 18px;
  width: 5px;
  background: #35b7ac;
  opacity: 0.58;
}

.today-cover::after {
  display: none;
}

.today-cover-art {
  width: min(68vw, 250px);
  height: min(58vw, 216px);
  margin: -8px auto -2px;
}

.today-cover-art img {
  width: min(72vw, 260px);
  height: min(72vw, 260px);
  transform: rotate(-2deg) translateY(-4px);
  filter: drop-shadow(0 20px 24px rgba(0, 0, 0, 0.28));
}

.today-cover-date {
  color: var(--paper-warm);
  font-size: 12px;
  font-weight: 560;
}

.today-cover h1 {
  max-width: 11ch;
  font-size: clamp(35px, 9.8vw, 50px);
  font-weight: 780;
  letter-spacing: -0.075em;
}

.today-cover-line {
  max-width: 34ch;
  color: var(--paper-dim);
  font-size: 14px;
}

.today-smart-input {
  width: min(100%, 420px);
  margin-top: 18px;
  border-color: rgba(217, 201, 166, 0.14);
  border-radius: 24px;
  background: #0b0f10;
}

.today-smart-input textarea {
  min-height: 74px;
  border: 0;
  border-radius: 18px;
  background: #151e20;
  line-height: 1.42;
}

.today-smart-input .btn {
  min-height: 48px;
  border-radius: 18px;
}

.today-cover-example {
  margin-top: 10px;
  color: var(--paper-mute);
  font-size: 13px;
}

.today-sheet {
  position: relative;
  display: grid;
  padding: 18px;
  gap: 14px;
  overflow: hidden;
  border: 1px solid rgba(217, 201, 166, 0.13);
  border-radius: 28px;
  background: #11191a;
}

.today-sheet::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: color-mix(in srgb, var(--layer, var(--layer-plan)) 82%, transparent);
  content: '';
  opacity: 0.72;
}

.today-sheet-head {
  display: grid;
  gap: 12px;
}

.today-sheet-head > div:first-child {
  display: grid;
  gap: 5px;
}

.today-sheet-label,
.today-note-label {
  color: var(--paper-warm);
  font-size: 12px;
  font-weight: 700;
}

.today-sheet h2,
.today-mneme-note h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(24px, 6vw, 32px);
  line-height: 1;
  letter-spacing: -0.055em;
}

.today-sheet p,
.today-mneme-note p {
  margin: 0;
  color: var(--paper-dim);
  font-size: 14px;
  line-height: 1.42;
}

.today-sheet-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.today-sheet-links .link-button {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(217, 201, 166, 0.13);
  border-radius: var(--r-pill);
  background: rgba(241, 235, 223, 0.035);
  color: var(--paper-warm);
}

.today-state {
  position: relative;
  display: grid;
  min-height: 70px;
  padding: 12px;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(110, 201, 122, 0.18);
  border-radius: 20px;
  background: rgba(110, 201, 122, 0.075);
  color: var(--paper);
  text-align: left;
}

button.today-state {
  width: 100%;
  cursor: pointer;
}

.today-state.urgent {
  border-color: rgba(224, 169, 97, 0.28);
  background: rgba(224, 169, 97, 0.08);
}

.today-state-mark,
.today-agenda-mark,
.today-empty-mark,
.today-note-mark {
  position: relative;
  display: block;
  width: 24px;
  height: 30px;
  justify-self: center;
  border: 1.6px solid currentColor;
  border-radius: 7px 7px 3px 3px;
  color: var(--signal-done);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 77%, 0 100%);
}

.today-state.calm .today-state-mark,
.today-agenda-row.done .today-agenda-mark {
  background: currentColor;
}

.today-state.urgent .today-state-mark {
  color: var(--layer-sport);
}

.today-state strong,
.today-state small {
  display: block;
}

.today-state small {
  margin-top: 3px;
  color: var(--paper-mute);
  font-size: 12px;
}

.today-progress {
  position: relative;
  display: grid;
  padding-top: 12px;
  gap: 7px;
}

.today-progress::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  display: block;
  height: 5px;
  overflow: hidden;
  border-radius: var(--r-pill);
  background: rgba(241, 235, 223, 0.07);
  content: '';
}

.today-progress > span {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  height: 5px;
  border-radius: var(--r-pill);
  background: var(--layer-plan);
}

.today-progress small {
  color: var(--paper-mute);
  font-size: 12px;
}

.today-agenda {
  display: grid;
  gap: 9px;
}

.today-agenda-row {
  position: relative;
  display: grid;
  min-height: 66px;
  padding: 12px;
  grid-template-columns: 48px 24px minmax(0, 1fr) 12px;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(241, 235, 223, 0.075);
  border-radius: 19px;
  background: #172021;
  color: var(--paper);
  text-align: left;
}

.today-agenda-row.done {
  opacity: 0.68;
}

.today-agenda-time {
  color: var(--layer-plan);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 760;
  line-height: 1;
}

.today-agenda-mark {
  width: 17px;
  height: 21px;
  color: var(--layer-plan);
}

.today-agenda-row.task .today-agenda-mark {
  color: var(--signal-done);
}

.today-agenda-row.workout .today-agenda-mark {
  color: var(--layer-sport);
}

.today-agenda-row strong,
.today-agenda-row small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.today-agenda-row small {
  margin-top: 4px;
  color: var(--paper-mute);
  font-size: 12px;
}

.today-agenda-tail {
  width: 8px;
  height: 8px;
  border-top: 1.5px solid var(--paper-mute);
  border-right: 1.5px solid var(--paper-mute);
  transform: rotate(45deg);
}

.today-empty-line {
  display: grid;
  min-height: 84px;
  padding: 14px;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  border: 1px dashed rgba(217, 201, 166, 0.18);
  border-radius: 20px;
  color: var(--paper);
}

.today-empty-mark {
  color: var(--layer-plan);
  opacity: 0.7;
}

.today-empty-line strong,
.today-empty-line small {
  display: block;
}

.today-empty-line small {
  margin-top: 4px;
  color: var(--paper-mute);
  font-size: 13px;
}

.today-action-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.today-action-row .btn {
  justify-content: center;
}

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

.today-pockets {
  display: grid;
  gap: 10px;
}

.today-pocket {
  --pocket: var(--layer-plan);
  position: relative;
  display: grid;
  min-height: 74px;
  padding: 14px 16px 14px 18px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 5px 14px;
  overflow: hidden;
  border: 1px solid rgba(217, 201, 166, 0.12);
  border-radius: 22px;
  background: #11191a;
  color: var(--paper);
  text-align: left;
}

.today-pocket::before {
  position: absolute;
  top: 14px;
  bottom: 14px;
  left: 0;
  width: 5px;
  border-radius: 0 4px 4px 0;
  background: var(--pocket);
  content: '';
}

.today-pocket.money {
  --pocket: var(--layer-money);
}

.today-pocket.memory {
  --pocket: var(--layer-memory);
}

.today-pocket.sport {
  --pocket: var(--layer-sport);
}

.today-pocket-name {
  color: var(--paper-warm);
  font-size: 13px;
  font-weight: 700;
}

.today-pocket strong {
  justify-self: end;
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 1.1;
  text-align: right;
}

.today-pocket small {
  color: var(--paper-mute);
  font-size: 12px;
}

.today-mneme-note {
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: start;
}

.today-note-mark {
  width: 22px;
  height: 28px;
  margin-top: 4px;
  color: var(--layer-memory);
  background: color-mix(in srgb, var(--layer-memory) 26%, transparent);
}

.today-note-copy {
  display: grid;
  gap: 8px;
}

.today-note-copy small {
  color: var(--paper-mute);
  font-size: 12px;
  line-height: 1.4;
}

.today-note-actions {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.today-note-actions .btn {
  justify-content: center;
}

@media (max-width: 420px) {
  .today-cover {
    padding: 18px;
    border-radius: 28px;
  }

  .today-cover-art {
    width: min(68vw, 220px);
    height: min(58vw, 188px);
  }

  .today-cover-art img {
    width: min(72vw, 232px);
    height: min(72vw, 232px);
  }

  .today-sheet {
    padding: 16px;
    border-radius: 25px;
  }

  .today-agenda-row {
    grid-template-columns: 44px minmax(0, 1fr) 12px;
  }

  .today-agenda-mark {
    display: none;
  }

  .today-action-row,
  .today-note-actions {
    grid-template-columns: 1fr;
  }

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

  .today-pocket strong {
    justify-self: start;
    text-align: left;
  }
}

/* =============================================================================
   TODAY CONCEPT LOCK — финальный слой поверх старых правил.
   Не даёт прошлому dashboard-ритму перетереть обложку, шапку и центральный
   голос после кэш-баста.
   ============================================================================= */

body {
  background:
    radial-gradient(circle at 50% 8%, rgba(54, 190, 181, 0.13), transparent 30rem),
    radial-gradient(circle at 100% 36%, rgba(223, 168, 87, 0.08), transparent 22rem),
    linear-gradient(180deg, #080d0e 0%, #0e1718 44%, #0a1112 100%) !important;
}

.screen-today {
  width: min(100%, 740px);
  padding-inline: clamp(14px, 4vw, 24px);
  gap: 20px;
}

@media (max-width: 767px) {
  .app-main {
    padding-top: calc(76px + env(safe-area-inset-top));
    padding-bottom: calc(84px + env(safe-area-inset-bottom));
  }

  .mobile-header {
    right: 0;
    left: 0;
    display: flex;
    height: calc(70px + env(safe-area-inset-top));
    padding: calc(13px + env(safe-area-inset-top)) 20px 12px;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(241, 229, 209, 0.08);
    background:
      linear-gradient(180deg, rgba(241, 229, 209, 0.035), transparent 70%), rgba(8, 13, 14, 0.98);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.34);
    backdrop-filter: blur(18px);
  }

  .mobile-header::after {
    right: 20px;
    left: 20px;
    background: linear-gradient(
      90deg,
      transparent,
      rgba(241, 229, 209, 0.12),
      rgba(54, 190, 181, 0.34),
      rgba(241, 229, 209, 0.12),
      transparent
    );
  }

  .brand-lockup.compact {
    gap: 10px;
  }

  .brand-lockup.compact .brand-mark {
    width: 46px;
    height: 46px;
    overflow: visible;
    border: 0;
    border-radius: 50%;
    background:
      radial-gradient(circle at 35% 28%, rgba(241, 229, 209, 0.3), transparent 28%),
      linear-gradient(145deg, #0b4040, #1b6c69);
    box-shadow:
      inset 0 0 0 1px rgba(241, 229, 209, 0.14),
      0 10px 24px rgba(0, 0, 0, 0.32);
  }

  .brand-lockup.compact .brand-mark img {
    width: 70%;
    height: 70%;
    border-radius: 14px;
    filter: drop-shadow(0 5px 7px rgba(0, 0, 0, 0.3));
  }

  .brand-lockup.compact strong {
    color: var(--mneme-paper);
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 760;
    letter-spacing: 0.035em;
  }

  .brand-lockup.compact small {
    display: none;
  }

  .mobile-header-actions {
    gap: 0;
  }

  .header-notification-button {
    position: absolute;
    top: calc(16px + env(safe-area-inset-top));
    left: 50%;
    display: inline-flex;
    width: auto;
    min-width: 142px;
    height: 42px;
    padding: 0 16px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(241, 229, 209, 0.12);
    border-radius: 999px;
    background:
      linear-gradient(180deg, rgba(241, 229, 209, 0.08), rgba(241, 229, 209, 0.025)), #12191a;
    color: var(--mneme-paper-soft);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.05),
      0 12px 28px rgba(0, 0, 0, 0.22);
    transform: translateX(-50%);
  }

  .header-notification-button.has-items {
    border-color: rgba(223, 168, 87, 0.34);
    background:
      linear-gradient(180deg, rgba(223, 168, 87, 0.13), rgba(241, 229, 209, 0.025)), #12191a;
  }

  .header-notification-icon {
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--mneme-teal-bright);
    box-shadow:
      0 0 0 4px rgba(54, 190, 181, 0.1),
      0 0 18px rgba(54, 190, 181, 0.7);
  }

  .header-notification-button.has-items .header-notification-icon {
    background: var(--mneme-amber-soft);
    box-shadow:
      0 0 0 4px rgba(223, 168, 87, 0.12),
      0 0 18px rgba(223, 168, 87, 0.75);
  }

  .header-notification-icon svg {
    display: none;
  }

  .header-notification-text {
    display: inline;
    max-width: 96px;
    overflow: hidden;
    color: inherit;
    font-size: 14px;
    font-weight: 650;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .header-notification-badge {
    top: -4px;
    right: -4px;
    border-color: #0a1112;
    background: var(--mneme-amber-soft);
    color: #241503;
  }

  .avatar-button {
    width: 44px;
    height: 44px;
    border: 1px solid rgba(54, 190, 181, 0.32);
    border-radius: 50%;
    background:
      radial-gradient(circle at 35% 28%, rgba(241, 229, 209, 0.18), transparent 35%), #142122;
    color: var(--mneme-paper);
    box-shadow: 0 9px 22px rgba(0, 0, 0, 0.28);
  }
}

.screen-today .today-cover {
  position: relative;
  display: grid;
  padding: 30px 0 0;
  justify-items: center;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  text-align: center;
}

.screen-today .today-cover::before,
.screen-today .today-cover::after {
  display: none;
}

.screen-today .today-cover-copy {
  display: grid;
  max-width: 540px;
  justify-items: center;
  gap: 8px;
}

.screen-today .today-cover-date {
  margin: 0;
  color: rgba(241, 229, 209, 0.58);
  font-size: clamp(20px, 5.8vw, 27px);
  font-weight: 520;
  line-height: 1.15;
  letter-spacing: -0.035em;
}

.screen-today .today-cover h1 {
  margin: 0;
  max-width: 15ch;
  color: var(--mneme-paper);
  font-family: var(--font-display);
  font-size: clamp(38px, 10vw, 57px);
  font-weight: 780;
  line-height: 0.98;
  letter-spacing: -0.078em;
  text-shadow: 0 8px 24px rgba(0, 0, 0, 0.32);
}

.screen-today .today-cover-art {
  display: grid;
  width: min(76vw, 320px);
  height: min(70vw, 290px);
  margin: -2px auto 2px;
  place-items: center;
}

.screen-today .today-cover-art img {
  display: block;
  width: min(80vw, 330px);
  height: min(80vw, 330px);
  object-fit: contain;
  transform: rotate(-2.2deg) translateY(-2px);
  filter: drop-shadow(0 24px 22px rgba(0, 0, 0, 0.34))
    drop-shadow(0 2px 0 rgba(241, 229, 209, 0.12));
}

.screen-today .today-thought-card {
  position: relative;
  display: grid;
  width: 100%;
  margin-top: 10px;
  padding: 28px clamp(22px, 6vw, 44px) 24px;
  justify-items: center;
  gap: 18px;
  overflow: hidden;
  border: 1px solid rgba(120, 96, 60, 0.16);
  border-radius: 23px;
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 255, 255, 0.28), transparent 17rem),
    linear-gradient(180deg, #f4ead9, #ebdcc3);
  box-shadow:
    0 18px 34px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

.screen-today .today-thought-card::before {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(72, 56, 35, 0.035) 1px, transparent 1px),
    linear-gradient(180deg, rgba(72, 56, 35, 0.026) 1px, transparent 1px);
  background-size: 34px 34px;
  content: '';
  opacity: 0.42;
  pointer-events: none;
}

.screen-today .today-thought-ribbon {
  position: absolute;
  top: 0;
  right: clamp(34px, 9vw, 58px);
  width: 31px;
  height: 67px;
  background: linear-gradient(180deg, #34bdb4, #227e7b);
  box-shadow: -6px 8px 14px rgba(0, 0, 0, 0.12);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%);
}

.screen-today .today-thought-card textarea {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 52px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #5d5245;
  font: inherit;
  font-size: clamp(18px, 4.8vw, 22px);
  font-weight: 520;
  line-height: 1.35;
  resize: vertical;
  scrollbar-color: rgba(44, 165, 160, 0.45) transparent;
}

.screen-today .today-thought-card textarea:focus {
  outline: none;
}

.screen-today .today-thought-card textarea::placeholder {
  color: rgba(93, 82, 69, 0.56);
}

.screen-today .today-thought-card .btn {
  position: relative;
  z-index: 1;
  width: min(100%, 270px);
  min-height: 54px;
  justify-content: center;
  border: 1px solid rgba(5, 65, 63, 0.2);
  border-radius: 16px;
  background: linear-gradient(180deg, #35bbb3, #238f8a);
  color: #f7ead2;
  box-shadow:
    0 9px 19px rgba(8, 70, 67, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.screen-today .today-cover-example {
  display: none;
}

.screen-today .today-sheet {
  position: relative;
  display: grid;
  padding: clamp(18px, 4vw, 24px);
  gap: 16px;
  overflow: hidden;
  border: 1px solid rgba(241, 229, 209, 0.09);
  border-radius: 25px;
  background:
    radial-gradient(circle at 18% 4%, rgba(241, 229, 209, 0.06), transparent 18rem),
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent), rgba(16, 25, 26, 0.96);
  box-shadow:
    var(--mneme-shadow-soft),
    inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.screen-today .today-sheet::before {
  display: none;
}

.screen-today .today-sheet-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 14px;
}

.screen-today .today-sheet-head h2,
.screen-today .today-mneme-note h2 {
  margin: 0;
  color: var(--mneme-paper);
  font-family: var(--font-display);
  font-size: clamp(27px, 6.4vw, 39px);
  font-weight: 760;
  line-height: 1;
  letter-spacing: -0.066em;
}

.screen-today .today-focus-row {
  display: grid;
  min-height: 58px;
  padding: 0 16px;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(241, 229, 209, 0.08);
  border-radius: 18px 18px 0 0;
  background:
    linear-gradient(180deg, rgba(241, 229, 209, 0.03), transparent), rgba(8, 13, 14, 0.72);
}

.screen-today .today-focus-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--mneme-green-soft);
  box-shadow:
    0 0 0 4px rgba(155, 220, 131, 0.1),
    0 0 18px rgba(155, 220, 131, 0.55);
}

.screen-today .today-focus-row.urgent .today-focus-dot {
  background: var(--mneme-amber-soft);
  box-shadow:
    0 0 0 4px rgba(223, 168, 87, 0.12),
    0 0 18px rgba(223, 168, 87, 0.55);
}

.screen-today .today-focus-row strong {
  overflow: hidden;
  color: var(--mneme-paper);
  font-size: 15px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.screen-today .today-focus-row > span:not(.today-focus-dot) {
  color: rgba(241, 229, 209, 0.68);
  font-size: 14px;
  white-space: nowrap;
}

.screen-today .today-focus-row .link-button {
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--mneme-teal-bright);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

.screen-today .today-progress::before,
.screen-today .today-progress > span {
  height: 5px;
  border-radius: 999px;
}

.screen-today .today-progress::before {
  background: rgba(241, 229, 209, 0.07);
}

.screen-today .today-progress > span {
  background: linear-gradient(90deg, var(--mneme-teal-bright), var(--mneme-green-soft));
}

.screen-today .today-agenda {
  display: grid;
  overflow: hidden;
  gap: 0;
  border: 1px solid rgba(241, 229, 209, 0.08);
  border-top: 0;
  border-radius: 0 0 18px 18px;
  background: rgba(8, 13, 14, 0.55);
}

.screen-today .today-agenda-row {
  display: grid;
  min-height: 62px;
  padding: 0 14px;
  grid-template-columns: 78px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border: 0;
  border-top: 1px solid rgba(241, 229, 209, 0.075);
  border-radius: 0;
  background: transparent;
  color: var(--mneme-paper);
  text-align: left;
}

.screen-today .today-agenda-row:first-child {
  border-top: 0;
}

.screen-today .today-agenda-time {
  color: var(--mneme-teal-bright);
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 680;
  letter-spacing: -0.05em;
}

.screen-today .today-agenda-row:nth-child(2) .today-agenda-time {
  color: var(--mneme-amber-soft);
}

.screen-today .today-agenda-row:nth-child(3) .today-agenda-time {
  color: var(--mneme-violet-soft);
}

.screen-today .today-agenda-row strong {
  display: block;
  overflow: hidden;
  color: var(--mneme-paper);
  font-size: 17px;
  font-weight: 660;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.screen-today .today-agenda-status {
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(54, 190, 181, 0.12);
  color: var(--mneme-teal-bright);
  font-size: 13px;
  font-weight: 650;
  white-space: nowrap;
}

.screen-today .today-agenda-row:nth-child(n + 2) .today-agenda-status {
  background: rgba(223, 168, 87, 0.12);
  color: var(--mneme-amber-soft);
}

.screen-today .today-agenda-row.done .today-agenda-status {
  background: rgba(155, 220, 131, 0.12);
  color: var(--mneme-green-soft);
}

.screen-today .today-empty-line {
  min-height: 92px;
  padding: 18px;
  grid-template-columns: 46px minmax(0, 1fr);
  border: 1px dashed rgba(241, 229, 209, 0.14);
  border-radius: 18px;
  background: rgba(241, 229, 209, 0.025);
}

.screen-today .today-empty-mark {
  width: 34px;
  height: 40px;
  border: 1.5px solid rgba(54, 190, 181, 0.72);
  border-radius: 8px 8px 3px 3px;
  background: rgba(54, 190, 181, 0.12);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 77%, 0 100%);
}

.screen-today .today-action-row {
  display: grid;
  margin-top: 2px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
}

.screen-today .today-action-row .btn,
.screen-today .today-action-row .btn:last-child {
  grid-column: auto;
  min-height: 56px;
  justify-content: center;
  border-radius: 16px;
}

.screen-today .today-action-row .btn.primary {
  border: 1px solid rgba(54, 190, 181, 0.34);
  background: linear-gradient(180deg, #35bdb4, #218d88);
  color: #f7ead2;
}

.screen-today .today-action-row .btn.ghost {
  border: 1px solid rgba(241, 229, 209, 0.09);
  background: linear-gradient(180deg, rgba(241, 229, 209, 0.08), rgba(241, 229, 209, 0.035));
  color: var(--mneme-paper);
}

.screen-today .today-pockets {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 13px;
}

.screen-today .today-pocket {
  position: relative;
  display: grid;
  min-height: 142px;
  padding: 17px 18px 16px;
  grid-template-columns: 54px minmax(0, 1fr) 12px;
  grid-template-rows: auto auto auto;
  align-content: end;
  align-items: center;
  gap: 3px 12px;
  overflow: hidden;
  border: 1px solid rgba(241, 229, 209, 0.09);
  border-radius: 19px;
  background:
    radial-gradient(
      circle at 24% 16%,
      color-mix(in srgb, var(--pocket) 19%, transparent),
      transparent 4.5rem
    ),
    linear-gradient(180deg, rgba(241, 229, 209, 0.045), rgba(241, 229, 209, 0.012)),
    rgba(16, 25, 26, 0.95);
  color: var(--mneme-paper);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
  text-align: left;
}

.screen-today .today-pocket::before {
  display: none;
}

.screen-today .today-pocket-asset {
  grid-row: 1 / 4;
  align-self: center;
  width: 56px;
  height: 56px;
  object-fit: contain;
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.24));
}

.screen-today .today-pocket-name {
  overflow: hidden;
  color: var(--mneme-paper);
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.04em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.screen-today .today-pocket small {
  color: rgba(241, 229, 209, 0.52);
  font-size: 13px;
  line-height: 1.2;
}

.screen-today .today-pocket strong {
  justify-self: start;
  color: var(--mneme-paper);
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 740;
  line-height: 1.05;
  letter-spacing: -0.055em;
  text-align: left;
}

.screen-today .today-pocket-tail {
  position: absolute;
  right: 18px;
  top: 50%;
  width: 9px;
  height: 9px;
  border-top: 2px solid rgba(241, 229, 209, 0.48);
  border-right: 2px solid rgba(241, 229, 209, 0.48);
  transform: translateY(-50%) rotate(45deg);
}

.screen-today .today-mneme-note {
  min-height: 146px;
  padding: 20px 62px 20px 22px;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: center;
  gap: 20px;
}

.screen-today .today-note-tag {
  display: grid;
  width: 44px;
  min-height: 108px;
  place-items: center;
  border: 1px solid rgba(120, 96, 60, 0.15);
  border-radius: 11px;
  background: linear-gradient(180deg, rgba(120, 96, 60, 0.08), transparent), #d9c5a1;
  color: #78664d;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 730;
  letter-spacing: 0.08em;
  text-orientation: mixed;
  transform: rotate(180deg);
  writing-mode: vertical-rl;
  box-shadow:
    0 10px 18px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.36);
}

.screen-today .today-note-ribbon {
  position: absolute;
  top: 0;
  right: 56px;
  width: 32px;
  height: 62px;
  background: linear-gradient(180deg, rgba(241, 229, 209, 0.5), rgba(150, 164, 158, 0.38));
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%);
  opacity: 0.76;
}

.screen-today .today-note-copy {
  display: grid;
  gap: 9px;
}

.screen-today .today-note-copy p {
  max-width: 36ch;
  color: rgba(241, 229, 209, 0.68);
  font-size: 18px;
  line-height: 1.44;
}

.screen-today .today-note-copy .link-button {
  justify-self: start;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--mneme-teal-bright);
  font-size: 16px;
  font-weight: 700;
}

.voice-fab,
.voice-root.ready .voice-fab {
  width: 62px;
  height: 62px;
  border: 1px solid rgba(241, 229, 209, 0.18);
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 20%, rgba(241, 229, 209, 0.24), transparent 32%),
    linear-gradient(180deg, #35bdb4, #218d88);
  color: #f8ead3;
  box-shadow:
    0 0 0 8px rgba(54, 190, 181, 0.13),
    0 16px 30px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.voice-root.active .voice-fab,
.voice-root.recording .voice-fab {
  background:
    radial-gradient(circle at 32% 20%, rgba(241, 229, 209, 0.2), transparent 32%),
    linear-gradient(180deg, #ee7d6f, #bd473f);
  color: #fff0e8;
}

.dock-surface {
  background:
    linear-gradient(rgba(241, 229, 209, 0.08), rgba(241, 229, 209, 0.08)) top / 100% 1px no-repeat,
    rgba(9, 15, 16, 0.96);
}

.dock-cradle {
  border-color: rgba(54, 190, 181, 0.2);
  box-shadow: inset 0 1px 0 rgba(241, 229, 209, 0.06);
}

.dock-tab {
  color: rgba(241, 229, 209, 0.55);
}

.dock-tab.active {
  color: var(--mneme-teal-bright);
}

.dock-tab.active svg [data-fill] {
  fill: var(--mneme-teal-bright);
}

@media (max-width: 620px) {
  .screen-today {
    width: 100%;
    padding-inline: 14px;
    gap: 18px;
  }

  .screen-today .today-cover {
    padding-top: 20px;
  }

  .screen-today .today-cover h1 {
    font-size: clamp(34px, 10.8vw, 44px);
  }

  .screen-today .today-cover-date {
    font-size: clamp(18px, 5.4vw, 24px);
  }

  .screen-today .today-cover-art {
    width: min(74vw, 275px);
    height: min(66vw, 240px);
    margin-top: -4px;
  }

  .screen-today .today-cover-art img {
    width: min(78vw, 288px);
    height: min(78vw, 288px);
  }

  .screen-today .today-focus-row {
    min-height: auto;
    padding: 13px 14px;
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .screen-today .today-focus-row .link-button {
    grid-column: 2 / 4;
    justify-self: start;
    margin-top: -4px;
  }

  .screen-today .today-agenda-row {
    min-height: 64px;
    grid-template-columns: 64px minmax(0, 1fr);
  }

  .screen-today .today-agenda-status {
    justify-self: start;
    grid-column: 2;
    margin-top: -9px;
    padding: 4px 9px;
    font-size: 12px;
  }

  .screen-today .today-pockets {
    grid-template-columns: 1fr;
  }

  .screen-today .today-pocket {
    min-height: 104px;
    grid-template-columns: 62px minmax(0, 1fr) 12px;
  }

  .screen-today .today-pocket-asset {
    width: 62px;
    height: 62px;
  }
}

@media (max-width: 420px) {
  .screen-today {
    padding-inline: 12px;
  }

  .screen-today .today-thought-card {
    padding: 26px 18px 20px;
    border-radius: 22px;
  }

  .screen-today .today-thought-card textarea {
    font-size: 18px;
  }

  .screen-today .today-sheet {
    padding: 18px;
    border-radius: 24px;
  }

  .screen-today .today-action-row {
    gap: 10px;
  }

  .screen-today .today-action-row .btn {
    min-height: 52px;
    font-size: 12px;
  }

  .screen-today .today-mneme-note {
    padding: 18px 50px 18px 18px;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 15px;
  }

  .screen-today .today-note-tag {
    width: 38px;
    min-height: 98px;
    font-size: 12px;
  }

  .screen-today .today-note-copy p {
    font-size: 16px;
  }
}
.payment-loading {
  padding: 30px 10px;
  color: var(--muted);
  text-align: center;
}

.payment-plan {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.payment-plan p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

.payment-plan > strong {
  flex: 0 0 auto;
  color: var(--text);
  font-size: 20px;
  white-space: nowrap;
}

.payment-plan > strong small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
}

.payment-methods {
  display: grid;
  gap: 9px;
  margin-top: 14px;
}

.payment-method {
  display: flex;
  min-height: 66px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  color: var(--text);
  text-align: left;
}

.payment-method span {
  display: grid;
  gap: 3px;
}

.payment-method strong {
  font-size: 16px;
}

.payment-method small,
.payment-note,
.wallet-payment p,
.payment-wait p,
.payment-success p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.payment-method i {
  width: 20px;
  color: var(--accent);
}

.payment-method:disabled {
  opacity: 0.45;
}

.payment-note {
  margin: 14px 4px 0;
}

.wallet-payment {
  display: grid;
  gap: 10px;
}

.wallet-payment > div,
.wallet-address {
  display: grid;
  gap: 5px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  color: var(--text);
  text-align: left;
}

.wallet-payment span,
.wallet-address small {
  color: var(--muted);
  font-size: 12px;
}

.wallet-address code {
  overflow-wrap: anywhere;
  color: var(--accent);
  font-family: ui-monospace, monospace;
  font-size: 13px;
}

.payment-success,
.payment-wait {
  padding: 12px 4px;
  text-align: center;
}

.payment-success > span {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--success, #4ad0c6);
  color: white;
  font-size: 28px;
}