:root {
  --bg: var(--tg-theme-bg-color, #ffffff);
  --bg2: var(--tg-theme-secondary-bg-color, #f2f3f5);
  --text: var(--tg-theme-text-color, #111111);
  --hint: var(--tg-theme-hint-color, #8a8f98);
  --link: var(--tg-theme-link-color, #2a7ae2);
  --accent: var(--tg-theme-button-color, #2a7ae2);
  --accent-text: var(--tg-theme-button-text-color, #ffffff);
  --danger: var(--tg-theme-destructive-text-color, #d93a3a);
  /* Округлый стиль: таблетка — всё однострочное (кнопки, поля, чипсы, строки списков),
     --radius — многострочное (пузыри, дела, текстовые поля), --radius-card — карточки и шторки */
  --pill: 999px;
  --radius: 22px;
  --radius-card: 26px;
  /* Обводка овалов: полупрозрачный цвет подсказок, чтобы подходила и к светлой, и к тёмной теме */
  --line: var(--bg2);
}
@supports (color: color-mix(in srgb, red, blue)) {
  :root { --line: color-mix(in srgb, var(--hint) 40%, transparent); }
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font: 15px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; cursor: pointer; }
select { border-radius: var(--pill); }
/* Круглые галочки вместо квадратных */
input[type=checkbox] {
  appearance: none; -webkit-appearance: none; flex: none; width: 22px; height: 22px; margin: 0;
  border-radius: 50%; border: 2px solid var(--hint); background: var(--bg) center / 14px no-repeat; cursor: pointer;
}
input[type=checkbox]:checked {
  border-color: var(--accent);
  background-color: var(--accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.hidden { display: none !important; }
.muted { color: var(--hint); }

/* Высота: в Telegram — от Telegram; вне его (iPhone «на экране Домой», браузер) — реальная высота окна
   из app.js: 100dvh в режиме «на экране Домой» на iPhone бывает выше видимой области, и меню уезжает вниз */
#app { display: flex; flex-direction: column; height: 100vh; height: var(--tg-viewport-stable-height, var(--app-height, 100dvh)); }
html.web-app, html.web-app body { overflow: hidden; overscroll-behavior: none; }
/* На iPhone «на экране Домой» высота окна включает полосу статуса, хотя приложение начинается под ней:
   не считаем высоту, а прикрепляем приложение ко всем краям видимой области */
html.web-app #app { position: fixed; inset: 0; height: auto; }
main { flex: 1; min-height: 0; position: relative; }
.view { display: none; flex-direction: column; height: 100%; }
.view.active { display: flex; }

.bar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border-bottom: 1px solid var(--bg2);
}
.bar h1 { flex: 1; margin: 0; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.icon { background: none; border: 0; font-size: 20px; width: 36px; height: 36px; border-radius: 50%; }
.icon:active { background: var(--bg2); }

/* Чат */
.messages { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.msg {
  max-width: 85%; padding: 8px 12px; border-radius: var(--radius);
  white-space: pre-wrap; word-wrap: break-word; overflow-wrap: anywhere;
  /* Текст сообщений можно выделять долгим нажатием (WebView Telegram иногда запрещает по умолчанию) */
  -webkit-user-select: text; user-select: text; -webkit-touch-callout: default;
}
.msg { padding: 9px 14px; }
.msg.user { align-self: flex-end; background: var(--accent); color: var(--accent-text); border-bottom-right-radius: 8px; }
.msg.assistant { align-self: flex-start; background: var(--bg2); border-bottom-left-radius: 8px; }
.msg.pending { opacity: .6; }
.msg.error { align-self: center; background: none; color: var(--danger); text-align: center; font-size: 14px; }
.msg.error button { margin-top: 6px; }
.msg pre { background: rgba(0,0,0,.08); padding: 10px 12px; border-radius: 14px; overflow-x: auto; white-space: pre; }
.msg code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; }
.typing span { display: inline-block; width: 7px; height: 7px; margin: 0 2px; border-radius: 50%; background: var(--hint); animation: blink 1.2s infinite; }
.typing span:nth-child(2) { animation-delay: .2s; }
.typing span:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 80%, 100% { opacity: .2; } 40% { opacity: 1; } }

.composer { display: flex; align-items: flex-end; gap: 8px; padding: 8px 12px 2px; background: var(--bg); }
.composer textarea {
  flex: 1; resize: none; max-height: 140px; padding: 10px 16px; min-height: 42px;
  border: 1px solid var(--line); border-radius: 21px; background: var(--bg2); color: var(--text); font: inherit;
}
.composer button { width: 42px; height: 42px; border: 0; border-radius: 50%; background: var(--accent); color: var(--accent-text); font-size: 18px; }
.composer button:disabled { opacity: .5; }

.composer .mic { background: var(--bg2); font-size: 20px; }
.composer.has-text .mic, .composer:not(.has-text) .mic:not(.hidden) + #send { display: none; }
.recorder {
  display: flex; align-items: center; gap: 10px; margin: 8px 12px 2px; padding: 4px;
  border: 1px solid var(--line); border-radius: var(--pill); background: var(--bg);
}
.recorder button { width: 42px; height: 42px; border: 0; border-radius: 50%; font-size: 18px; }
.rec-cancel { background: var(--bg2); color: var(--hint); }
.rec-send { background: var(--accent); color: var(--accent-text); margin-left: auto; }
.rec-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--danger); animation: blink 1.2s infinite; }
.rec-time { font-variant-numeric: tabular-nums; font-weight: 600; }
.rec-hint { color: var(--hint); font-size: 14px; }
.composer .attach { background: none; color: var(--hint); font-size: 20px; }
.composer .attach:active { background: var(--bg2); }

.pending-files { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 12px 0; }
.file-chip {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  padding: 5px 12px; border-radius: var(--pill); background: var(--bg2); font-size: 13px;
}
.file-chip .name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
.file-chip.uploading { opacity: .6; }
.file-chip.error { color: var(--danger); }
.file-chip button { background: none; border: 0; padding: 0 2px; color: var(--hint); }
.msg .files { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.msg.user .file-chip { background: rgba(255,255,255,.2); color: inherit; }
.msg img.thumb { display: block; max-width: 220px; max-height: 220px; border-radius: 16px; margin-top: 6px; background: rgba(0,0,0,.08); min-width: 60px; min-height: 60px; }

.promo-row { display: flex; gap: 8px; }
.promo-row input {
  flex: 1; min-width: 0; padding: 10px 16px; border-radius: var(--pill); border: 1px solid var(--line);
  background: var(--bg); color: var(--text); font: inherit; text-transform: uppercase;
}
.promo-row .primary { width: auto; padding: 10px 14px; }

.empty { margin: auto; text-align: center; color: var(--hint); padding: 24px; max-width: 320px; }

/* Списки и карточки */
.list { list-style: none; margin: 0; padding: 0; }
.view > .list { overflow-y: auto; flex: 1; }
/* Строки списков — отдельные овалы с отступами, как пункты профиля */
.list { padding: 2px 0 8px; }
.list li {
  display: flex; align-items: center; gap: 10px; margin: 8px 12px 0; padding: 11px 18px;
  border: 1px solid var(--line); border-radius: var(--pill); background: var(--bg);
}
.list li:active { background: var(--bg2); }
.list li > .icon:last-child { margin-right: -10px; flex: none; }
.list li.empty-row { border-style: dashed; justify-content: center; }
.list li .title { flex: 1; min-width: 0; }
.list li .title div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list li small { color: var(--hint); }
.card { background: var(--bg2); border-radius: var(--radius-card); margin: 12px; padding: 16px 18px; }
.card h2 { margin: 0 0 8px; font-size: 16px; }
.primary, .secondary, .danger { width: 100%; padding: 12px 18px; border-radius: var(--pill); border: 0; font-weight: 600; }
.primary:active, .secondary:active, .danger:active { opacity: .85; }
.primary { background: var(--accent); color: var(--accent-text); }
.secondary { background: none; color: var(--accent); border: 1px solid var(--accent); }
.actions .primary, .actions .secondary { margin-top: 8px; }
.danger { background: none; color: var(--danger); border: 1px solid var(--danger); }

/* Паутина */
#graph-wrap { position: relative; flex: 1; min-height: 0; overflow: hidden; }
#graph { width: 100%; height: 100%; display: block; touch-action: none; }
#graph-wrap .empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.link { stroke: var(--hint); stroke-opacity: .45; }
.node circle { stroke: var(--bg); stroke-width: 2px; }
.node text { fill: var(--text); font-size: 11px; paint-order: stroke; stroke: var(--bg); stroke-width: 3px; pointer-events: none; }
.node.selected circle { stroke: var(--text); stroke-width: 3px; }
#legend { position: absolute; left: 8px; bottom: 8px; display: flex; flex-wrap: wrap; gap: 4px; max-width: calc(100% - 16px); pointer-events: none; }
#legend span { font-size: 11px; padding: 3px 10px; border-radius: var(--pill); background: var(--bg2); opacity: .9; }
#legend i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; }

.sheet {
  position: absolute; left: 0; right: 0; bottom: 0; max-height: 60%; overflow-y: auto;
  background: var(--bg); border-top-left-radius: var(--radius-card); border-top-right-radius: var(--radius-card);
  box-shadow: 0 -4px 24px rgba(0,0,0,.18); padding: 18px;
}
.sheet-close { position: absolute; right: 8px; top: 8px; }
.sheet h2 { margin: 0 40px 4px 0; font-size: 18px; }
.sheet h3 { margin: 14px 0 6px; font-size: 14px; color: var(--hint); }
.chip { display: inline-block; margin: 0 6px 6px 0; padding: 5px 12px; border-radius: var(--pill); background: var(--bg2); border: 0; font-size: 13px; }
.link-chip { display: inline-flex; align-items: center; padding: 0; }
.link-chip button { background: none; border: 0; color: inherit; font: inherit; }
.link-open { padding: 4px 4px 4px 10px; }
.link-cut { padding: 4px 10px 4px 6px; color: var(--danger) !important; }
.add-link { color: var(--accent); }
.link-form { margin: 4px 0 10px; }
.link-form input, .link-form select {
  width: 100%; padding: 10px 16px; margin-bottom: 8px; border-radius: var(--pill); border: 1px solid var(--line);
  background: var(--bg); color: var(--text); font: inherit;
}

/* Проекты */
.scroll { flex: 1; overflow-y: auto; }
.section-title { margin: 14px 16px 4px; font-size: 13px; font-weight: 600; color: var(--hint); text-transform: uppercase; letter-spacing: .04em; }
.list li.project .folder { font-size: 22px; }
.list li .badge { font-size: 12px; color: var(--hint); white-space: nowrap; }
.list li.empty-row { color: var(--hint); font-size: 14px; }
.chat-head { flex: 1; min-width: 0; background: none; border: 0; padding: 0; text-align: left; display: flex; flex-direction: column; }
.chat-head h1 { font-size: 17px; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-head small { font-size: 12px; color: var(--hint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-head small.in-project { color: var(--accent); }
.project-description { margin: 0 0 10px; white-space: pre-wrap; }
.project-description.placeholder { color: var(--hint); }
.row-actions { display: flex; gap: 8px; padding: 0 12px 8px; }
.row-actions button { flex: 1; }
#graph-filter {
  max-width: 45%; padding: 6px 12px; border-radius: var(--pill); border: 1px solid var(--line);
  background: var(--bg2); color: var(--text); font: inherit; font-size: 14px;
}

/* Нижняя панель действий */
.overlay { position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 20; }
.panel {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 21; max-height: 80%; overflow-y: auto;
  background: var(--bg); border-top-left-radius: var(--radius-card); border-top-right-radius: var(--radius-card);
  box-shadow: 0 -4px 24px rgba(0,0,0,.2); padding: 20px 16px calc(16px + env(safe-area-inset-bottom));
}
.panel h2 { margin: 0 40px 12px 0; font-size: 18px; }
.panel .option {
  display: flex; align-items: center; gap: 10px; width: 100%; margin-bottom: 8px; padding: 12px 18px;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--pill); text-align: left; font-size: 15px;
}
.panel .option:active { background: var(--bg2); }
.panel .option.current { color: var(--accent); font-weight: 600; border-color: var(--accent); }
.panel .option small { color: var(--hint); margin-left: auto; }
.panel label.option input { width: 18px; height: 18px; flex: none; }
.panel input[type=text], .panel textarea {
  width: 100%; padding: 11px 16px; margin-bottom: 10px; border-radius: var(--pill); border: 1px solid var(--line);
  background: var(--bg); color: var(--text); font: inherit;
}
.panel textarea { min-height: 110px; resize: vertical; border-radius: var(--radius); }
.panel .primary, .panel .secondary, .panel .danger { margin-top: 8px; }

/* Проекты и чаты в паутине */
.project-circle { fill: var(--accent); fill-opacity: .07; stroke: var(--accent); stroke-opacity: .55; stroke-width: 1.5px; cursor: pointer; }
.project-label { fill: var(--accent); font-size: 12px; font-weight: 600; paint-order: stroke; stroke: var(--bg); stroke-width: 3px; cursor: pointer; }
.chat-dot circle { fill: var(--bg); stroke: var(--accent); stroke-width: 2px; }
.chat-dot.free circle { stroke: var(--hint); }
.chat-dot text { fill: var(--hint); font-size: 9px; paint-order: stroke; stroke: var(--bg); stroke-width: 3px; pointer-events: none; }
.mention { stroke: var(--hint); stroke-opacity: .35; stroke-dasharray: 3 3; }

/* План: шапка как на эскизе */
.plan-top { display: flex; align-items: center; gap: 8px; padding: 10px 12px 0; }
.plan-import {
  flex: 1; min-width: 0; padding: 10px 18px; border-radius: var(--pill); border: 1px solid var(--line);
  background: var(--bg); color: var(--text); font: inherit; font-size: 15px; text-align: left;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.plan-import:active { background: var(--bg2); }
.plan-top .round-go { width: 44px; height: 44px; font-size: 22px; }
.plan-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px 12px 4px; }
.plan-tabs button {
  padding: 9px; border-radius: var(--pill); border: 1px solid var(--line); background: var(--bg);
  color: var(--hint); font: inherit; font-weight: 600;
}
.plan-tabs button.active { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }

/* План: плитки дней в две колонки */
.day-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 8px 12px 12px; }
.day-tile {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-height: 104px;
  padding: 12px 26px 12px 14px; border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--bg); color: var(--text); font: inherit; text-align: left;
}
.day-tile:active { background: var(--bg2); }
.day-tile.wide { grid-column: 1 / -1; min-height: 0; }
.day-tile.today { border: 2px solid var(--accent); }
.day-tile.past { background: var(--bg2); }
.day-tile.overdue { border-color: var(--danger); }
.day-tile.someday { border-style: dashed; }
.tile-week { font-size: 12px; color: var(--hint); }
.day-tile.today .tile-week { color: var(--accent); font-weight: 600; }
.tile-date { font-size: 17px; font-weight: 700; }
.tile-count { font-size: 12px; color: var(--hint); }
.tile-extra { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; width: 100%; min-width: 0; }
.tile-extra:empty { display: none; }
.tile-dots { display: flex; gap: 3px; align-items: center; width: 100%; }
.tile-dots i { width: 8px; height: 8px; border-radius: 50%; display: block; }
.tile-tag {
  max-width: 100%; padding: 2px 8px; border-radius: var(--pill); font-size: 11px; font-weight: 600;
  background: #fff2cc; color: #7a5300; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tile-tag.personal { background: #ffe3ec; color: #8a1d43; }
.day-tile .chev { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--hint); font-size: 22px; }

/* План: экран одного дня */
.day-view-head { display: flex; align-items: center; gap: 6px; padding: 8px 12px 0; }
.day-view-title { display: flex; flex-direction: column; min-width: 0; }
.day-view-title b { font-size: 17px; }
.day-view-title small { color: var(--hint); font-size: 13px; }
.day-marks { display: flex; flex-direction: column; gap: 8px; padding: 8px 12px 0; }
.day-mark {
  display: flex; align-items: center; gap: 6px; padding: 8px 8px 8px 16px; border-radius: var(--pill);
  background: #fff2cc; color: #7a5300; font-weight: 600;
}
.day-mark.personal { background: #ffe3ec; color: #8a1d43; }
.day-mark .mark-text { flex: 1; min-width: 0; }
.day-mark .mark-remove { width: 30px; height: 30px; font-size: 14px; color: inherit; opacity: .7; }
.day-sub { font-size: 13px; color: var(--hint); margin: 14px 18px 0; }
.in-day .plan-top, .in-day .plan-tabs { display: none; }
.day-view-head { padding-top: 12px; }
.day-view-title { flex: 1; }
.day-view-head .day-add { width: 44px; height: 44px; font-size: 22px; flex: none; }
.task-list { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px 0; }
.task-row {
  display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 18px 8px 12px;
  border-radius: var(--pill); border: 1px solid var(--line); background: var(--bg);
}
.task-check {
  flex: none; width: 28px; height: 28px; border-radius: 50%; padding: 0; border: 2px solid var(--cube, var(--hint));
  background: none; color: #fff; font-size: 15px; font-weight: 700; line-height: 1;
}
.task-row.done .task-check { background: #3fb68b; border-color: #3fb68b; }
.task-row.habit .task-check { --cube: #3fb68b; }
.task-row.skip .task-check { border-style: dashed; color: var(--hint); }
.task-check:disabled { opacity: .4; }
.task-body { flex: 1; min-width: 0; display: flex; flex-direction: column; cursor: pointer; }
.task-title { overflow-wrap: anywhere; }
.task-row.done .task-title { text-decoration: line-through; color: var(--hint); }
/* Привычка повторяется — сделанную не зачёркиваем */
.task-row.habit.done .task-title { text-decoration: none; color: var(--text); }
.task-meta { color: var(--hint); font-size: 12px; overflow-wrap: anywhere; }
.task-meta:empty { display: none; }
.task-time { flex: none; font-size: 13px; color: var(--hint); white-space: nowrap; }
.task-empty { padding: 14px 18px; border-radius: var(--pill); border: 1px dashed var(--line); color: var(--hint); text-align: center; }

/* План: доска дел */
.segmented { display: flex; gap: 4px; margin: 8px 12px 4px; padding: 4px; background: var(--bg2); border-radius: var(--pill); }
.segmented button { flex: 1; border: 0; background: none; padding: 7px 10px; border-radius: var(--pill); font-size: 14px; color: var(--hint); }
.segmented button.active { background: var(--bg); color: var(--text); font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.day-col { margin: 10px 12px; padding: 12px; border-radius: var(--radius-card); background: var(--bg2); }
.day-col.today { box-shadow: inset 0 0 0 2px var(--accent); }
.day-col.overdue { box-shadow: inset 0 0 0 1px var(--danger); }
.day-head { display: flex; align-items: baseline; gap: 8px; margin: 0 2px 8px; }
.day-head .day-title { flex: 1; font-weight: 600; font-size: 15px; }
.day-head small { color: var(--hint); }
.cubes { display: flex; flex-direction: column; gap: 6px; min-height: 8px; }
.cubes-empty { padding: 10px; border: 1px dashed var(--hint); border-radius: var(--pill); color: var(--hint); font-size: 13px; text-align: center; opacity: .7; }
.cube {
  display: flex; align-items: center; gap: 10px; padding: 9px 8px 9px 14px; border-radius: var(--radius);
  /* Цвет дела — полоской слева, которая повторяет скругление */
  background: var(--bg); box-shadow: inset 5px 0 0 var(--cube, var(--hint)), 0 1px 2px rgba(0,0,0,.06);
}
.cube.done .cube-title { text-decoration: line-through; color: var(--hint); }
.cube.dragging { position: fixed; z-index: 30; pointer-events: none; opacity: .95; box-shadow: 0 8px 24px rgba(0,0,0,.25); transform: scale(1.02); }
.cube-placeholder { border: 2px dashed var(--accent); border-radius: var(--radius); opacity: .5; }
.cube-check {
  flex: none; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--cube, var(--hint));
  background: none; padding: 0; font-size: 13px; line-height: 20px; color: var(--accent-text);
}
.cube.done .cube-check { background: var(--cube, var(--accent)); }
.cube-body { flex: 1; min-width: 0; cursor: pointer; }
.cube-title { overflow-wrap: anywhere; }
.cube-meta { color: var(--hint); font-size: 12px; }
.cube-meta:empty { display: none; }
.drag-handle { flex: none; padding: 6px 8px; color: var(--hint); font-size: 18px; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.add-cube { display: block; width: 100%; margin-top: 8px; padding: 8px 14px; border: 1px dashed var(--line); border-radius: var(--pill); background: none; color: var(--accent); text-align: left; font-size: 14px; }
.limit-note { margin: 4px 16px 16px; font-size: 13px; }
.habit-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.habit-chip { border: 1px solid var(--line); background: var(--bg); border-radius: var(--pill); padding: 4px 12px; font-size: 13px; }
.habit-chip.done { background: #3fb68b; border-color: #3fb68b; color: #fff; }
.habit-chip.skip { opacity: .55; text-decoration: line-through; }
.habit-chip:disabled { opacity: .6; }

/* План: привычки */
#plan-habits { padding: 10px 12px 14px; }
/* Карточка привычки — в стиле строк экрана дня */
#plan-habits { display: flex; flex-direction: column; gap: 10px; }
.habit-list { gap: 10px; }
.habit-card {
  --cube: #3fb68b; flex-direction: column; align-items: stretch; gap: 10px;
  padding: 12px 10px 12px 14px; border-radius: var(--radius-card);
  border: 1px solid var(--line); box-shadow: none;
}
.hc-top { display: flex; align-items: center; gap: 12px; }
.habit-card .task-check { width: 34px; height: 34px; font-size: 17px; }
.habit-card.done .task-check { background: #3fb68b; border-color: #3fb68b; }
.habit-card.skip .task-check { border-style: dashed; color: var(--hint); }
.habit-card .task-check.rest { border-color: var(--line); font-size: 15px; opacity: .7; }
.habit-card .cube-title { font-weight: 600; }
/* Отметка за сегодня не зачёркивает привычку, как у сделанного дела */
.habit-card.done .cube-title { text-decoration: none; color: var(--text); }
.hc-streak {
  flex: none; padding: 4px 10px; border-radius: var(--pill); background: #fff0dc; color: #8a4b00;
  font-size: 13px; font-weight: 700; white-space: nowrap;
}
.habit-card .drag-handle { padding: 6px 4px; }
.habit-card .dots { margin: 0; justify-content: space-between; padding-left: 2px; }
.habit-summary { padding: 14px 18px; border-radius: var(--radius-card); background: var(--bg2); }
.hs-text { display: flex; flex-direction: column; margin-bottom: 10px; }
.hs-text b { font-size: 16px; }
.hs-text small { color: var(--hint); font-size: 13px; }
.hs-bar { height: 10px; border-radius: var(--pill); background: var(--bg); overflow: hidden; }
.hs-bar i { display: block; height: 100%; border-radius: var(--pill); background: #3fb68b; transition: width .3s; }
.habit-empty {
  display: flex; flex-direction: column; gap: 4px; padding: 18px; border-radius: var(--radius-card);
  border: 1px dashed var(--line); color: var(--hint); text-align: center;
}
.habit-empty b { color: var(--text); }
.dots { display: flex; gap: 4px; margin-top: 8px; }
.dot { flex: 1; max-width: 40px; display: flex; flex-direction: column; align-items: center; gap: 2px; background: none; border: 0; padding: 0; }
.dot i {
  display: block; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--hint);
  font-style: normal; font-size: 13px; line-height: 22px; text-align: center;
}
.dot.done i { background: #3fb68b; border-color: #3fb68b; color: #fff; }
.dot.skip i { border-style: dashed; color: var(--hint); }
.dot.off i { opacity: .25; }
.dot.now small { color: var(--accent); font-weight: 600; }
.dot small { font-size: 10px; color: var(--hint); }

/* Формы трекера в нижней панели */
.field-label { margin: 12px 0 6px; font-size: 13px; color: var(--hint); }
.panel .field, .panel input[type=date], .panel input[type=time], .panel select.field {
  width: 100%; padding: 10px 16px; border-radius: var(--pill); border: 1px solid var(--line);
  background: var(--bg); color: var(--text); font: inherit; min-height: 44px;
}
.panel textarea.field { border-radius: var(--radius); }
.panel textarea.short { min-height: 60px; }
.choice-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.choice-row .chip { margin: 0; padding: 7px 14px; }
.chip.active { background: var(--accent); color: var(--accent-text); }
.weekdays .chip { flex: 1; padding: 6px 0; text-align: center; }
.time-row { display: flex; gap: 10px; align-items: center; }
.time-row .field { flex: 1; }
.time-row .emoji-input { flex: none; width: 64px; text-align: center; }
label.check { display: flex; align-items: center; gap: 8px; font-size: 14px; white-space: nowrap; padding: 3px 0; }
.color-dot { width: 30px; height: 30px; border-radius: 50%; border: 3px solid var(--bg); box-shadow: 0 0 0 1px var(--bg2); padding: 0; }
.color-dot.active { box-shadow: 0 0 0 2px var(--text); }

.settings-section { margin: 0 0 12px; padding: 14px 16px; border-radius: var(--radius-card); background: var(--bg2); }
.settings-section h3 { margin: 0 0 4px; font-size: 15px; }
.settings-section p { margin: 0 0 10px; font-size: 13px; }
.settings-section label.check { white-space: normal; font-size: 15px; }
.settings-section .field-label { margin-top: 10px; }
.settings-section .chip { margin-top: 8px; background: var(--bg); }

/* Итоги */
.pad { padding: 16px; }
.bars { display: flex; gap: 6px; align-items: flex-end; margin: 6px 0 10px; }
.bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.bar-track { width: 100%; max-width: 32px; height: 90px; border-radius: var(--pill); background: var(--bg); display: flex; align-items: flex-end; overflow: hidden; }
.bar-fill { width: 100%; background: var(--accent); border-radius: var(--pill); min-height: 2px; }
.bar-col small { font-size: 11px; color: var(--hint); }
.bar-col.now small { color: var(--accent); font-weight: 600; }
.bar-col .pct { font-size: 11px; color: var(--hint); }
.habit-stat { display: flex; gap: 8px; padding: 8px 0; border-top: 1px solid var(--bg); }
.habit-stat .name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.habit-stat .nums { color: var(--hint); font-size: 13px; white-space: nowrap; }
.card .chip { background: var(--bg); }
.review-btn { color: var(--accent); font-weight: 600; }
.review-btn:disabled { opacity: .6; }
.review { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--bg); }
.review h3 { margin: 0 0 6px; font-size: 13px; color: var(--hint); }
.review-text { white-space: pre-wrap; overflow-wrap: anywhere; }

/* Финансы */
.center-title { text-align: center; }
.icon:disabled { opacity: .3; }
.small { font-size: 13px; }
.top-gap { margin-top: 10px; }
.fin-totals { display: flex; gap: 8px; }
.fin-totals div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fin-totals small { color: var(--hint); font-size: 12px; }
.fin-totals b { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plus { color: #2e9e6e; }
.minus { color: var(--danger); }
.fin-row {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 0; border: 0;
  background: none; text-align: left; color: var(--text);
}
.fin-row:disabled { opacity: 1; cursor: default; }
.fin-icon { flex: none; width: 28px; text-align: center; font-size: 18px; }
.fin-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fin-text .t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fin-text small { color: var(--hint); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fin-text small:empty { display: none; }
.fin-amount { flex: none; font-weight: 600; white-space: nowrap; }
.fin-amount.muted { font-weight: 400; }
.fin-cat { padding-bottom: 6px; border-bottom: 1px solid var(--bg); }
.fin-cat:last-of-type { border-bottom: 0; }
.progress { height: 8px; border-radius: var(--pill); background: var(--bg); overflow: hidden; margin: 0 0 6px 38px; }
.progress i { display: block; height: 100%; background: var(--accent); border-radius: var(--pill); }
.progress.plain i { background: var(--hint); }
.progress.warn i { background: #e8891d; }
.progress.over i { background: var(--danger); }
.progress.done i { background: #3fb68b; }
.fin-day { display: flex; justify-content: space-between; margin: 14px 16px 4px; font-size: 13px; font-weight: 600; color: var(--hint); }
.fin-group { margin-top: 0; padding: 4px 14px; }
.fin-group .fin-row + .fin-row { border-top: 1px solid var(--bg); }
.review-head { margin: 0 0 6px; font-size: 13px; color: var(--hint); }
.paywall-list { margin: 8px 0 12px; padding-left: 20px; }
.paywall-list li { margin-bottom: 4px; }
.segmented.in-panel { margin: 0 0 8px; }
.panel select.field { appearance: auto; }

/* Пространства и команды */
#view-profile { overflow-y: auto; }
.space-bar {
  display: block; width: 100%; border: 0; padding: 5px 12px; font-size: 13px; font-weight: 600;
  background: var(--accent); color: var(--accent-text); text-align: center;
}
.space-row {
  display: flex; align-items: center; gap: 4px; margin-top: 8px; padding: 2px 6px 2px 14px;
  border-radius: var(--pill); background: var(--bg); border: 1px solid transparent;
}
.space-row.active { border-color: var(--accent); }
.space-pick { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 9px 0; border: 0; background: none; text-align: left; color: var(--text); }
.space-icon { font-size: 20px; width: 28px; text-align: center; }
.space-check { color: var(--accent); font-weight: 700; padding: 0 6px; }
.space-row.active .t { font-weight: 600; }
.invite-code {
  margin: 0 0 8px; padding: 12px 18px; border-radius: var(--radius); background: var(--bg2); text-align: center;
  font: 600 20px/1.2 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .06em; user-select: all;
}
.member-row {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px; padding: 6px 6px 6px 16px;
  border: 1px solid var(--line); border-radius: var(--pill);
}
.member-row span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.member-row small { color: var(--hint); }
.member-row .chip { margin: 0; color: var(--danger); }
.msg.member { align-self: flex-start; background: var(--bg2); border-bottom-left-radius: 8px; box-shadow: inset 3px 0 0 var(--accent); }
.msg .author { font-size: 12px; font-weight: 600; color: var(--accent); margin-bottom: 2px; }

/* Поиск по чатам */
.search-row { padding: 8px 12px 0; }
.search-row input {
  width: 100%; padding: 10px 18px; border: 1px solid var(--line); border-radius: var(--pill);
  background: var(--bg2); color: var(--text); font: inherit; font-size: 15px;
}
.list li.search-hit { cursor: pointer; }
.search-hit .hit-head { font-size: 13px; color: var(--hint); }
.search-hit .snippet { margin: 2px 0 0; font-size: 14px; overflow-wrap: anywhere; }
.search-hit mark, .snippet mark { background: rgba(255, 196, 0, .45); color: inherit; border-radius: 6px; padding: 0 2px; }
/* Найденные сообщения — многострочные, поэтому не таблетка, а скруглённая карточка */
.list li.search-hit { border-radius: var(--radius); flex-direction: column; align-items: stretch; gap: 0; }
.msg.flash { animation: flash 2.4s ease-out; }
@keyframes flash { 0%, 40% { box-shadow: 0 0 0 3px rgba(255, 196, 0, .8); } 100% { box-shadow: 0 0 0 3px transparent; } }

/* Ответ ИИ: действия и озвучка */
.msg .done-actions {
  margin-top: 8px; padding: 8px 12px; border-radius: 16px; background: var(--bg);
  font-size: 13px; display: flex; flex-direction: column; gap: 3px;
}
.msg .done-actions .chip { align-self: flex-start; margin: 4px 0 0; background: var(--bg2); }
.msg-tools { display: flex; justify-content: flex-end; gap: 14px; margin: 4px 0 -2px; white-space: normal; }
.msg .tool {
  padding: 2px; border: 0; background: none;
  font-size: 15px; opacity: .55; line-height: 1;
}
.msg .tool:active { opacity: 1; }
.msg .tool:disabled { opacity: .35; }
.msg audio { display: block; width: 100%; min-width: 220px; height: 36px; margin-top: 6px; }
.card .segmented.in-panel { margin: 0 0 8px; background: var(--bg); }
.card .segmented button.active { background: var(--bg2); }

/* Характер ИИ и приглашения */
.persona-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.persona {
  display: flex; align-items: center; gap: 10px; padding: 8px 18px 8px 10px; border: 2px solid transparent;
  border-radius: var(--pill); background: var(--bg); color: var(--text); text-align: left; font: inherit;
}
.persona-emoji { width: 36px; height: 36px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--bg2); }
.persona.active { border-color: var(--accent); }
.persona.active .t { font-weight: 600; }
.persona-emoji { font-size: 20px; }
.card .prompt-area {
  width: 100%; min-height: 90px; padding: 12px 16px; border: 0; border-radius: var(--radius); resize: vertical;
  background: var(--bg); color: var(--text); font: inherit; font-size: 14px;
}
/* Профиль: овальные пункты, как на эскизе */
.profile-main { padding: 4px 0 12px; }
.prof-row {
  display: flex; align-items: center; gap: 12px; width: calc(100% - 24px); margin: 12px 12px 0;
  padding: 10px 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg);
  color: var(--text); font: inherit; text-align: left;
}
.prof-row:active { background: var(--bg2); }
.prof-section { margin: 22px 26px -2px; font-size: 14px; font-weight: 600; color: var(--hint); }
.feedback-kinds { margin-bottom: 10px; }
.feedback-form textarea, .feedback-form input {
  width: 100%; box-sizing: border-box; margin: 0 0 10px; padding: 12px 14px; border-radius: 16px;
  border: 1px solid var(--line); background: var(--bg2); color: var(--text); font: inherit; resize: vertical;
}
.feedback-form textarea { min-height: 130px; }
.tip-amounts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 12px; }
.tip-amounts button { padding: 14px 8px; border-radius: 18px; border: 1px solid var(--line); background: var(--bg2); color: var(--text); font-size: 17px; font-weight: 600; }
.tip-amounts button:active { transform: scale(.97); }
.prof-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.prof-text .t { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prof-text small { color: var(--hint); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prof-row .chev { color: var(--hint); font-size: 22px; line-height: 1; }
.prof-icon { width: 40px; height: 40px; flex: none; display: flex; align-items: center; justify-content: center; font-size: 20px; border-radius: 50%; background: var(--bg2); }
.avatar {
  width: 40px; height: 40px; flex: none; border-radius: 50%; overflow: hidden; display: flex; align-items: center;
  justify-content: center; background: var(--accent); color: var(--accent-text); font-weight: 600; font-size: 15px;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.prof-row.promo-row { padding: 6px 6px 6px 18px; gap: 8px; }
.prof-row.promo-row input {
  flex: 1; min-width: 0; border: 0; padding: 8px 0; background: none; color: var(--text); font: inherit;
  text-transform: uppercase; outline: none;
}
.prof-row.promo-row input::placeholder { text-transform: none; color: var(--hint); }
.round-go {
  width: 38px; height: 38px; flex: none; border-radius: 50%; border: 0; background: var(--accent);
  color: var(--accent-text); font-size: 18px; display: flex; align-items: center; justify-content: center;
}
.round-go:disabled { opacity: .5; }
.card.pill-card { padding: 16px 18px; }
/* Карточки тарифов */
.card.pill-card .status { margin: 0 0 4px; }
.card.pill-card .sub-what { margin: 0 0 12px; }
.tariffs { display: flex; flex-direction: column; gap: 10px; }
.tariff { background: var(--bg); border-radius: var(--radius); padding: 14px 16px; border: 2px solid transparent; }
.tariff.best { border-color: var(--accent); }
.tariff-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tariff-head b { font-size: 16px; }
.tariff-badge {
  font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: var(--pill);
  background: var(--accent); color: var(--accent-text);
}
.tariff-price { font-size: 26px; font-weight: 700; margin: 2px 0 0; }
.tariff small { display: block; font-size: 13px; }
.tariff-pay { display: flex; gap: 8px; margin-top: 10px; }
.tariff-pay .primary, .tariff-pay .secondary { flex: 1; padding: 10px 12px; }
.card.pill-card .actions { display: flex; flex-direction: column; gap: 8px; }
.card.pill-card .actions p { margin: 0; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.card-head h2 { margin: 0; }
/* Переключатель вкл/выкл */
.switch { position: relative; width: 46px; height: 28px; flex: none; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.switch span { position: absolute; inset: 0; border-radius: 999px; background: var(--line); transition: background .15s; }
.switch span::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .15s;
}
.switch input:checked + span { background: var(--accent); }
.switch input:checked + span::after { transform: translateX(18px); }

/* Утренняя сводка */
.topic-add { display: flex; gap: 6px; align-items: center; }
.topic-add .field { flex: 1; min-width: 0; margin: 0; }
.topic-add .chip { flex: none; margin: 0; padding: 10px 14px; background: var(--bg); }
.settings-section .choice-row .chip { margin: 0; background: var(--bg); }
.settings-section .choice-row .chip.active { background: var(--accent); color: var(--accent-text); }
#brief-card .status { margin: 0 0 4px; }
#brief-card .brief-parts { margin: 0 0 8px; }
#brief-card .chip { background: var(--bg); }
.brief-preview { white-space: pre-wrap; line-height: 1.5; padding: 14px 18px; border-radius: var(--radius-card); background: var(--bg2); }
.brief-preview a { color: var(--link); }
.card .tz-select {
  width: 100%; min-height: 44px; padding: 10px 16px; border: 0; border-radius: var(--pill);
  background: var(--bg); color: var(--text); font: inherit; appearance: auto;
}
#proactive-card p, #followups-card p, #push-card p { margin: 6px 0 0; }
#push-card .study-add { margin-top: 10px; }
.prompt-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
.prompt-row .primary { width: auto; padding: 10px 22px; }
.card .invite-code { background: var(--bg); }
.invite-code.ref-link { font-size: 14px; letter-spacing: 0; overflow-wrap: anywhere; margin-top: 8px; }

/* Панель администратора */
#view-admin .scroll { padding-bottom: 12px; }
.admin-link {
  display: flex; justify-content: space-between; align-items: center; width: calc(100% - 24px);
  border: 0; color: var(--text); font: inherit; font-weight: 600; text-align: left;
}
.admin-link span { color: var(--hint); font-size: 20px; }
.center-text { text-align: center; margin: 24px; }
.stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 12px; }
.stat { background: var(--bg2); border-radius: var(--radius); padding: 12px 16px; display: flex; flex-direction: column; min-width: 0; }
.stat-label { font-size: 13px; color: var(--hint); }
.stat-value { font-size: 22px; font-weight: 600; margin: 2px 0; }
.stat small { font-size: 12px; color: var(--hint); overflow-wrap: anywhere; }
.stat-grid .stat:first-child { grid-column: 1 / -1; }
.stat-grid .stat:first-child .stat-value { font-size: 34px; }
.admin-range { margin: 4px 12px 0 !important; }
.chart-card { padding: 12px 12px 8px; }
.chart-head { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.chart-title { font-weight: 600; font-size: 15px; }
.chart-total { font-size: 13px; color: var(--hint); white-space: nowrap; }
svg.chart { display: block; width: 100%; height: auto; margin-top: 6px; overflow: visible; }
svg.chart .bar { fill: var(--accent); }
svg.chart .bar.active { fill: var(--text); }
svg.chart .grid { stroke: var(--hint); stroke-opacity: .25; stroke-width: 1; }
svg.chart .axis { fill: var(--hint); font-size: 9px; }
svg.chart .hit { fill: transparent; cursor: pointer; }
.chart-tip { min-height: 18px; margin-top: 2px; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 6px; }
.admin-table th { text-align: left; color: var(--hint); font-weight: 500; padding: 4px 4px; }
.admin-table td { padding: 5px 4px; border-top: 1px solid var(--bg); overflow-wrap: anywhere; }
.admin-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
details.card summary { font-weight: 600; cursor: pointer; }

/* Нижняя навигация */
/* Нижнее меню — овал с отступами от краёв, как пункты профиля */
.tabs {
  display: flex; margin: 6px 10px calc(8px + env(safe-area-inset-bottom)); padding: 2px 6px;
  border-radius: 999px; background: var(--bg); border: 1px solid var(--line);
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
}
.tabs button { flex: 1; min-width: 0; background: none; border: 0; padding: 6px 0 7px; font-size: 18px; color: var(--hint); display: flex; flex-direction: column; align-items: center; }
.tabs button b { font-weight: normal; }
.tabs button span { font-size: 10px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabs button.active { color: var(--accent); }
/* Чат по центру — главная кнопка */
.tabs button[data-view="chat"] span { font-weight: 600; }
.tabs #more-btn.open { color: var(--accent); }

/* Меню «Ещё»: плитки разделов над нижней панелью */
.more-menu {
  position: fixed; left: 10px; right: 10px; z-index: 25;
  bottom: calc(66px + env(safe-area-inset-bottom));
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 10px;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-card);
  box-shadow: 0 8px 30px rgba(0,0,0,.18);
  animation: menu-in .14s ease-out;
}
@keyframes menu-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.more-menu button {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 4px;
  border: 0; border-radius: var(--radius); background: var(--bg2); color: var(--text); font-size: 13px;
}
.more-menu button b { font-size: 24px; font-weight: normal; }
.more-menu button.active { box-shadow: inset 0 0 0 2px var(--accent); color: var(--accent); font-weight: 600; }
.more-menu button:active { opacity: .8; }

/* Большая круглая кнопка (английский, повторение, сон) */
.card .chip.active { background: var(--accent); color: var(--accent-text); }
.focus-go {
  width: 120px; height: 120px; margin: 10px auto 8px; display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%; background: var(--accent); color: var(--accent-text);
  font-size: 20px; font-weight: 700; box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 40%, transparent);
}
.focus-go:active { transform: scale(.96); }
/* Обучение */
.study-add { display: block; width: calc(100% - 24px); margin: 12px 12px 0; }
.exam-head { display: flex; gap: 14px; align-items: center; }
.exam-days {
  width: 64px; height: 64px; flex: none; border-radius: 50%; background: var(--accent); color: var(--accent-text);
  display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1;
}
.exam-days.hot { background: var(--danger); }
.exam-days b { font-size: 22px; }
.exam-days small { font-size: 10px; }
.exam-info { min-width: 0; }
.exam-info h2 { margin: 0 0 2px; overflow-wrap: anywhere; }
.exam-progress { margin-top: 12px; }
.exam-progress .progress { margin-top: 4px; }
.exam-today { margin: 10px 0 0; font-weight: 600; overflow-wrap: anywhere; }
.exam-behind { margin: 8px 0 0; color: #c46d0c; font-size: 13px; }
.exam-buttons { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.exam-buttons .chip { margin: 0; padding: 7px 14px; }
.review-hero { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.review-hero b { display: block; font-size: 20px; }
.review-hero small { color: var(--hint); }
.review-go { width: 96px; height: 96px; margin: 0; font-size: 15px; flex: none; }
.deck-row {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 0; border: 0; border-top: 1px solid var(--bg);
  background: none; color: var(--text); text-align: left; font: inherit;
}
.deck-row .what { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.deck-row .t { font-weight: 600; overflow-wrap: anywhere; }
.deck-row small { color: var(--hint); font-size: 12px; }
.deck-row .due { white-space: nowrap; color: var(--accent); font-weight: 600; }
.card .cards-time { margin-top: 8px; padding: 10px 16px; border: 0; border-radius: var(--pill); background: var(--bg); color: var(--text); font: inherit; }
.deck-buttons { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.deck-buttons .chip { margin: 0; padding: 8px 14px; }
.deck-summary details { background: var(--bg2); border-radius: var(--radius); padding: 10px 14px; margin-bottom: 6px; }
.deck-summary summary { font-weight: 600; cursor: pointer; }
.summary-text { white-space: pre-wrap; margin-top: 8px; font-size: 14px; line-height: 1.45; }
.new-card { margin-top: 12px; }
.review-card { text-align: center; padding: 18px; }
.review-top { display: flex; justify-content: space-between; align-items: center; }
.review-progress .progress { margin: 4px 0 18px; }
.review-q { font-size: 20px; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; min-height: 80px; display: flex; align-items: center; justify-content: center; }
.review-a {
  margin: 14px 0 0; font-size: 16px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere;
}
.review-a:not(:empty) { padding: 14px; border-radius: var(--radius); background: var(--bg); }
.review-buttons { display: flex; gap: 8px; margin-top: 18px; }
.review-buttons button { flex: 1; }
.review-done { font-size: 64px; }

/* Разделы в «Итогах» */
.area-card { position: relative; }
.area-card .focus-nums { margin-bottom: 4px; }
.area-note { margin: 8px 0 0; }
.area-open { position: absolute; top: 12px; right: 14px; margin: 0; padding: 5px 12px; font-size: 12px; }

/* Английский */
.en-stats { display: flex; gap: 8px; margin-bottom: 10px; }
.en-stats div { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 10px 4px; background: var(--bg); border-radius: var(--radius); }
.en-stats b { font-size: 18px; }
.en-stats small { color: var(--hint); font-size: 11px; text-align: center; }
.en-levels { justify-content: center; margin: 0; }
.en-levels .chip { margin: 0; padding: 7px 14px; }
.en-go { width: 110px; height: 110px; margin: 12px auto 4px; font-size: 16px; }
.en-lesson { text-align: left; }
.en-words { display: flex; flex-direction: column; gap: 6px; }
.en-word { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; padding: 10px 12px; background: var(--bg); border-radius: var(--radius); }
.en-word b { color: var(--accent); }
.en-word small { grid-column: 1 / -1; color: var(--hint); font-style: italic; margin-top: 2px; }
.en-tip { margin: 12px 0 0; padding: 12px; border-radius: var(--radius); background: var(--bg); font-size: 14px; line-height: 1.45; }
.en-ex { text-align: center; }
.en-q { font-size: 17px; font-weight: 600; margin: 8px 0 14px; overflow-wrap: anywhere; }
.en-options { display: flex; flex-direction: column; gap: 8px; }
.en-option { padding: 12px 16px; border-radius: var(--pill); border: 1px solid var(--line); background: var(--bg); color: var(--text); font: inherit; }
.en-option.right { background: #3fb68b; border-color: #3fb68b; color: #fff; }
.en-option.wrong { background: var(--danger); border-color: var(--danger); color: #fff; }
.en-option:disabled:not(.right):not(.wrong) { opacity: .6; }
.en-explain { margin: 12px 0; font-size: 14px; color: var(--hint); }
.en-practice .primary { margin-top: 4px; }

/* Тело */
.card textarea.field {
  width: 100%; min-height: 76px; margin: 4px 0 10px; padding: 12px 16px; border: 0; border-radius: var(--radius);
  background: var(--bg); color: var(--text); font: inherit; resize: vertical;
}
.body-top { display: flex; align-items: center; gap: 16px; }
.ring-box { position: relative; width: 128px; height: 128px; flex: none; }
.ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 11; }
.ring .track { stroke: var(--bg); }
.ring .fill { stroke-linecap: round; transition: stroke-dashoffset .4s; }
.ring-text { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ring-text b { font-size: 24px; }
.ring-text small { color: var(--hint); font-size: 11px; }
.macros { flex: 1; min-width: 0; }
.macro-left { margin: 0 0 8px; font-weight: 600; }
.macro { display: flex; justify-content: space-between; font-size: 13px; margin-top: 6px; }
.macro span { color: var(--hint); }
.macros .progress { margin-top: 4px; }
.body-actions { display: flex; gap: 8px; margin: 0 12px; }
.body-actions button {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 4px;
  border: 0; border-radius: var(--radius-card); background: var(--accent); color: var(--accent-text); font-size: 13px; font-weight: 600;
}
.body-actions button:not(:first-child) { background: var(--bg2); color: var(--text); }
.body-actions button b { font-size: 22px; font-weight: normal; }
.body-actions button:active { opacity: .85; }
.body-hint { margin: 8px 16px 0; }
.body-row { display: flex; align-items: center; gap: 8px; padding: 9px 0; border-top: 1px solid var(--bg); }
.body-row .what { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.body-row .t { overflow-wrap: anywhere; }
.body-row small { color: var(--hint); font-size: 12px; overflow-wrap: anywhere; }
.body-row .kcal { white-space: nowrap; font-size: 14px; }
.body-del { width: 30px; height: 30px; font-size: 14px; color: var(--hint); flex: none; }
.bar-fill.over { background: var(--danger); }
/* minmax(0, …): у поля ввода есть своя минимальная ширина — без этого «Жиры» и «Углеводы» уезжали за край */
.macro-inputs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-bottom: 8px; }
.macro-inputs.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.macro-inputs:not(.three):has(label:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.macro-inputs label { min-width: 0; white-space: nowrap; }
.macro-inputs .field { width: 100%; min-width: 0; }
/* Состав блюда: граммы каждого продукта можно поправить */
.meal-parts { display: flex; flex-direction: column; gap: 6px; margin: 2px 0 10px; }
.meal-parts:empty { display: none; }
.meal-part { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 14px; border-radius: 14px; background: var(--bg); }
.meal-part .mp-name { flex: 1; min-width: 0; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.meal-part .mp-kcal { flex: none; min-width: 62px; text-align: right; color: var(--hint); font-size: 12px; }
.meal-part .mp-grams {
  flex: none; display: flex; align-items: center; gap: 4px; padding: 0 10px; height: 36px; border-radius: 10px;
  background: var(--bg2); color: var(--hint); font-size: 13px;
}
.meal-part .mp-grams input {
  width: 46px; border: 0; background: none; color: var(--text); font: inherit; font-size: 15px; font-weight: 600; text-align: right;
  padding: 0; outline: none;
}
.body-row.tap, .habit-stat.tap { cursor: pointer; }
.body-row.tap:active, .habit-stat.tap:active { opacity: .7; }
.macro-inputs label, .time-row label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--hint); flex: 1; }
.macro-inputs .field { padding: 10px 8px; text-align: center; }
.panel .meal-items { margin: -4px 4px 10px; }
.week-dots { display: flex; gap: 6px; margin-bottom: 8px; }
.week-dots .wd { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.week-dots i {
  width: 34px; height: 34px; border-radius: 50%; background: var(--bg); display: flex; align-items: center; justify-content: center;
  font-style: normal; font-weight: 700; color: var(--accent-text);
}
.week-dots .on i { background: var(--accent); }
.week-dots small { font-size: 11px; color: var(--hint); }
.sleep-card { text-align: center; }
.sleep-moon { font-size: 54px; line-height: 1; margin-top: 4px; }
.sleep-state { margin: 8px 0 4px; font-weight: 600; }
.sleep-go { flex-direction: column; gap: 2px; font-size: 26px; }
.sleep-go span { font-size: 14px; }
.focus-nums { display: flex; gap: 8px; margin-bottom: 12px; }
.focus-nums div { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 10px 4px; background: var(--bg); border-radius: var(--radius); }
.focus-nums b { font-size: 18px; }
.focus-nums small { color: var(--hint); font-size: 11px; text-align: center; }

.toast {
  position: fixed; left: 50%; bottom: 80px; transform: translateX(-50%);
  background: rgba(0,0,0,.8); color: #fff; padding: 9px 18px; border-radius: var(--pill); font-size: 14px; z-index: 30;
  max-width: 90%;
}

/* Экран «нет связи» */
.offline { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; padding: 20px; background: var(--bg); }
.offline-card { max-width: 340px; text-align: center; }
.offline-icon { font-size: 56px; }
.offline-card h2 { margin: 8px 0; }
.offline-card ul { text-align: left; margin: 12px 0 18px; padding-left: 20px; line-height: 1.6; }

/* ---------- Оформление: тема, фон, шрифт, пузыри (атрибуты на <html>, см. applyAppearance) ---------- */
:root[data-theme="light"] {
  --bg: #ffffff; --bg2: #f2f3f5; --text: #111111; --hint: #8a8f98; --link: #2a7ae2; --danger: #d93a3a;
}
:root[data-theme="dark"] {
  --bg: #16171b; --bg2: #23252b; --text: #f1f2f4; --hint: #8e939d; --link: #6ea8ff; --danger: #ff6b6b;
}
:root[data-theme="dark"] .toast { background: rgba(255,255,255,.92); color: #111; }
:root[data-bg="glow"] body {
  background: radial-gradient(130% 55% at 100% 0%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 62%) var(--bg);
}
:root[data-bg="aurora"] body {
  background:
    radial-gradient(90% 50% at 0% 0%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 65%),
    radial-gradient(80% 45% at 100% 30%, color-mix(in srgb, #ff6fb1 18%, transparent), transparent 65%),
    radial-gradient(90% 50% at 50% 100%, color-mix(in srgb, #3cc8ff 16%, transparent), transparent 65%) var(--bg);
}
:root[data-bg="dots"] body {
  background: radial-gradient(color-mix(in srgb, var(--hint) 28%, transparent) 1.2px, transparent 1.6px) 0 0 / 18px 18px var(--bg);
}
:root:not([data-bg="plain"]) .composer, :root:not([data-bg="plain"]) .tabs { background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(10px); }
:root[data-font="s"] body { font-size: 14px; }
:root[data-font="l"] body { font-size: 16.5px; }
:root[data-font="l"] .msg { font-size: 16.5px; }
:root[data-bubbles="classic"] .msg { border-radius: 12px; }
:root[data-bubbles="classic"] .msg.user { border-bottom-right-radius: 4px; }
:root[data-bubbles="classic"] .msg.assistant, :root[data-bubbles="classic"] .msg.member { border-bottom-left-radius: 4px; }

/* Экран «Оформление» */
.look-preview { display: flex; flex-direction: column; gap: 8px; padding: 16px; }
.look-preview .msg { max-width: 80%; }
.look-preview .primary { margin-top: 4px; }
.look-row { display: flex; flex-wrap: wrap; gap: 8px; }
.look-option {
  padding: 9px 14px; border-radius: var(--pill); border: 2px solid transparent; background: var(--bg); color: var(--text); font-size: 14px;
}
.look-option.active { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.look-option.swatch {
  width: 40px; height: 40px; margin: 3px; padding: 0; border: 0; border-radius: 50%; background: var(--swatch);
  color: #fff; font-size: 11px; font-weight: 700;
}
/* Выбранный цвет — с кольцом вокруг */
.look-option.swatch.active { box-shadow: 0 0 0 3px var(--bg2), 0 0 0 6px var(--swatch); }
.look-option.bg-option { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px; border-radius: var(--radius); flex: 1; min-width: 70px; }
.bg-option i { width: 100%; height: 54px; border-radius: 14px; background: var(--bg2); display: block; }
.bg-option[data-bg-preview="glow"] i { background: radial-gradient(130% 80% at 100% 0%, color-mix(in srgb, var(--accent) 45%, transparent), transparent 70%) var(--bg2); }
.bg-option[data-bg-preview="aurora"] i {
  background: radial-gradient(90% 70% at 0% 0%, color-mix(in srgb, var(--accent) 45%, transparent), transparent 70%),
    radial-gradient(80% 70% at 100% 100%, color-mix(in srgb, #ff6fb1 40%, transparent), transparent 70%) var(--bg2);
}
.bg-option[data-bg-preview="dots"] i { background: radial-gradient(color-mix(in srgb, var(--hint) 45%, transparent) 1.2px, transparent 1.6px) 0 0 / 10px 10px var(--bg2); }
.bg-option span { font-size: 12px; }
.look-toggle { display: flex; align-items: center; gap: 12px; padding: 6px 0; }
.look-toggle + .look-toggle { border-top: 1px solid var(--bg); padding-top: 12px; margin-top: 6px; }
.look-toggle > div { flex: 1; display: flex; flex-direction: column; gap: 2px; }

/* ---------- Анимации ---------- */
button, .chip, .prof-row, .look-option, .deck-row, .day-tile {
  transition: transform .22s cubic-bezier(.34, 1.56, .64, 1), background-color .2s, color .2s, border-color .2s, box-shadow .2s, opacity .2s;
}
/* Пружинистое нажатие */
button:active:not(:disabled):not(.drag-handle), .prof-row:active, .day-tile:active { transform: scale(.95); }
.tabs button:active:not(:disabled) { transform: scale(.88); }
.tabs button.active { animation: tab-pop .4s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes tab-pop { 0% { transform: scale(.85); } 100% { transform: scale(1); } }
/* Экраны мягко проявляются */
.view.active { animation: view-in .26s cubic-bezier(.2, .8, .2, 1); }
/* Только сдвиг, без прозрачности: если анимация не запустится, экран всё равно виден */
@keyframes view-in { from { transform: translateY(12px); } to { transform: none; } }
/* Карточки въезжают по очереди при открытии экрана */
body[data-entering] .view.active .scroll > .card,
body[data-entering] .view.active .scroll > div > .card,
body[data-entering] .view.active .body-actions,
body[data-entering] .view.active .day-tile {
  animation: card-in .42s cubic-bezier(.2, .8, .2, 1) both;
}
body[data-entering] .view.active .scroll > :nth-child(2), body[data-entering] .view.active .day-tile:nth-child(2) { animation-delay: .04s; }
body[data-entering] .view.active .scroll > :nth-child(3), body[data-entering] .view.active .day-tile:nth-child(3) { animation-delay: .08s; }
body[data-entering] .view.active .scroll > :nth-child(4), body[data-entering] .view.active .day-tile:nth-child(4) { animation-delay: .12s; }
body[data-entering] .view.active .scroll > :nth-child(5), body[data-entering] .view.active .day-tile:nth-child(5) { animation-delay: .16s; }
body[data-entering] .view.active .scroll > :nth-child(n+6), body[data-entering] .view.active .day-tile:nth-child(n+6) { animation-delay: .2s; }
@keyframes card-in { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
/* Шторка выезжает снизу, фон затемняется плавно */
.panel:not(.hidden) { animation: sheet-up .34s cubic-bezier(.2, .9, .25, 1); }
.overlay:not(.hidden) { animation: fade-in .25s ease-out; }
@keyframes sheet-up { from { transform: translateY(100%); } to { transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.toast:not(.hidden) { animation: toast-in .3s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 12px) scale(.95); } to { opacity: 1; transform: translateX(-50%); } }
/* Новые сообщения в чате */
.msg { animation: msg-in .28s cubic-bezier(.2, .8, .2, 1); }
@keyframes msg-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
/* «Загрузка…» — мерцающая заглушка */
p.muted.pad {
  margin: 12px; padding: 22px 16px; border-radius: var(--radius-card); color: transparent; user-select: none;
  background: linear-gradient(100deg, var(--bg2) 30%, color-mix(in srgb, var(--bg2) 55%, var(--bg)) 50%, var(--bg2) 70%) 0 0 / 300% 100%;
  animation: shimmer 1.3s linear infinite;
}
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
.chip.active, .look-option.active { animation: chip-pop .3s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes chip-pop { 0% { transform: scale(.9); } 100% { transform: scale(1); } }

/* Анимации выключены в оформлении или в системе */
:root[data-motion="off"] *, :root[data-motion="off"] *::before, :root[data-motion="off"] *::after {
  animation: none !important; transition: none !important;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
:root[data-motion="off"] p.muted.pad { color: var(--hint); background: none; padding: 16px; }

@keyframes eq { 0%, 100% { height: 3px; } 50% { height: 12px; } }

/* Музыка: как остальные разделы — серая карточка, внутри белые строки */
.ctl {
  flex: none; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; background: none; color: var(--text);
  transition: transform .15s, color .15s, background .15s;
}
.ctl:active { transform: scale(.88); background: color-mix(in srgb, var(--hint) 15%, transparent); }
.ctl .ic { width: 22px; height: 22px; }
.ic.spin { animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.icon-pop .ic { animation: icon-pop .28s cubic-bezier(.34, 1.56, .64, 1); }
.icon-pop .ic.spin { animation: spin .8s linear infinite; }
@keyframes icon-pop { 0% { transform: scale(.55); opacity: .4; } 100% { transform: scale(1); opacity: 1; } }

.music-card { padding: 14px 8px 8px; }
.music-card h2 { margin: 0 8px 10px; }
#music-tabs button, #podcasts-tabs button { white-space: nowrap; padding: 7px 4px; font-size: 13.5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tracks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.track {
  display: flex; align-items: center; gap: 8px; padding: 6px 2px 6px 6px; cursor: pointer;
  background: var(--bg); border-radius: var(--pill); transition: transform .15s, box-shadow .15s;
}
.track:active { transform: scale(.98); }
.track.playing { box-shadow: inset 0 0 0 2px var(--accent); }
.track.playing b { color: var(--accent); }
.track-art { position: relative; flex: none; width: 46px; height: 46px; }
.track-cover { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: var(--bg2); display: block; }
/* Эквалайзер поверх обложки у играющего трека */
.track-eq {
  position: absolute; inset: 0; border-radius: 50%; display: none; align-items: flex-end; justify-content: center;
  gap: 3px; padding-bottom: 14px; background: rgba(0,0,0,.42);
}
.track.playing .track-eq { display: flex; }
.track-eq i { width: 3px; height: 4px; background: #fff; border-radius: 2px; }
.track.sounding .track-eq i { animation: eq 1s ease-in-out infinite; }
.track-eq i:nth-child(2) { animation-delay: .2s; height: 9px; }
.track-eq i:nth-child(3) { animation-delay: .4s; height: 6px; }
.track-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.track-text b, .track-text small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.track-text b { font-weight: 600; font-size: 15px; }
.track-text small { color: var(--hint); font-size: 13px; }
.track .ctl { width: 32px; height: 32px; color: var(--hint); }
.track .ctl:last-child { margin-right: 2px; }
.track .ctl .ic { width: 20px; height: 20px; }
.track-like.on, #player-like.on, #mini-like.on { color: #ec4b8b; }
#mini-like { flex: none; width: 38px; height: 38px; }
/* Перенос плейлиста: поле ссылки и круглая кнопка, как у промокода */
.music-import { padding: 16px 14px 14px; }
.music-import h2 { margin: 0 4px 4px; }
.music-import p { margin: 0 4px 10px; }
.music-import-row {
  display: flex; align-items: center; gap: 6px; padding: 4px 4px 4px 16px;
  background: var(--bg); border-radius: var(--pill);
}
.music-import-row .field { flex: 1; min-width: 0; border: 0; padding: 8px 0; background: none; color: var(--text); font: inherit; outline: none; }
.music-import-row .round-go .ic { width: 20px; height: 20px; }
.playlist-row { padding-right: 12px; }
.playlist-icon {
  flex: none; width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 22px; background: var(--bg2);
}
.playlist-row .chev { color: var(--hint); font-size: 22px; line-height: 1; }
.playlist-head { display: flex; align-items: center; gap: 6px; margin: 0 4px 10px 0; }
.playlist-head .back-ctl .ic { transform: rotate(90deg); }
.playlist-head b { font-size: 16px; }
.playlist-actions { display: flex; gap: 8px; margin: 0 4px 12px; }
.playlist-actions .chip { flex: 1; min-width: 0; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 6px; margin: 0; padding: 9px 12px; font-size: 14px; font-weight: 600; background: var(--bg); }
.playlist-actions .chip.active { background: var(--accent); color: var(--accent-text); }
.playlist-actions .ic { flex: none; width: 16px; height: 16px; }
.playlist-actions .chip span { overflow: hidden; text-overflow: ellipsis; }
.music-note { text-align: center; margin: 8px 0 4px; }
.tracks-more { text-align: center; padding: 12px 0 4px; }
/* Трек из плейлиста, для которого ещё не найден ролик: нота вместо обложки */
.track.unresolved .track-art::before {
  content: "♪"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; font-size: 20px; color: var(--hint); background: var(--bg2); z-index: 1;
}
.track.loading .track-art::after {
  content: ""; position: absolute; inset: 3px; border-radius: 50%;
  border: 2px solid transparent; border-top-color: var(--accent); animation: spin .8s linear infinite;
}
/* «Моя волна»: карточка с мягким градиентом цвета темы и большой кнопкой */
.wave-card {
  padding: 16px 16px 12px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 22%, var(--bg2)), var(--bg2) 70%);
}
.wave-head { display: flex; align-items: center; gap: 12px; }
.wave-text { flex: 1; min-width: 0; }
.wave-text h2 { margin: 0 0 2px; font-size: 18px; }
.wave-text p { margin: 0; }
.wave-go { width: 60px; height: 60px; }
.wave-go .ic { width: 28px; height: 28px; }
.wave-go[data-icon="play"] .ic { margin-left: 3px; }
.wave-go.playing { animation: wave-pulse 2s ease-in-out infinite; }
@keyframes wave-pulse {
  0%, 100% { box-shadow: 0 6px 20px color-mix(in srgb, var(--accent) 35%, transparent); }
  50% { box-shadow: 0 6px 32px color-mix(in srgb, var(--accent) 70%, transparent); }
}
.wave-moods { display: flex; gap: 6px; margin: 12px -16px 0; padding: 0 16px 2px; overflow-x: auto; scrollbar-width: none; }
.wave-moods::-webkit-scrollbar { display: none; }
.wave-moods .chip { flex: none; margin: 0; background: var(--bg); white-space: nowrap; }
.wave-moods .chip.active { background: var(--accent); color: var(--accent-text); }
/* Итоги музыки */
.stats-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.stats-head h2 { margin: 0; }
.stats-period { flex: none; margin: 0; }
.stats-period button { padding: 6px 12px; font-size: 13px; }
.stats-total { display: flex; flex-direction: column; margin: 12px 0 6px; }
.stats-total b { font-size: 30px; font-weight: 800; letter-spacing: -.02em; }
.podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; align-items: end; margin: 10px 0 14px; }
.podium-place { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; padding: 0; border: 0; background: none; color: var(--text); }
.podium-place b { font-size: 13.5px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.podium-place small { font-size: 11.5px; }
.podium-place i {
  display: flex; justify-content: center; padding-top: 6px; width: 100%; margin-top: 6px; border-radius: 12px 12px 4px 4px; font-style: normal;
  background: var(--soft); transform-origin: 50% 100%; animation: podium-up .8s cubic-bezier(.2, .9, .3, 1.1) both;
}
.podium-place.p1 i { height: 64px; background: var(--lime, var(--accent)); animation-delay: .25s; }
.podium-place.p2 i { height: 46px; animation-delay: .1s; }
.podium-place.p3 i { height: 34px; animation-delay: .4s; }
@keyframes podium-up { from { transform: scaleY(0); } to { transform: none; } }
.podium-num { font-size: 17px; font-weight: 800; color: var(--hint); }
.podium-place.p1 .podium-num { color: var(--lime-text, #111); }
.podium-photo {
  position: relative; width: 56px; aspect-ratio: 1; border-radius: 50%; overflow: hidden; margin-bottom: 6px;
  background: var(--soft); display: flex; align-items: center; justify-content: center;
}
.podium-place.p1 .podium-photo { width: 72px; box-shadow: 0 0 0 2px var(--lime, var(--accent)); }
.podium-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.podium-photo em { font-style: normal; font-weight: 800; font-size: 20px; color: var(--hint); }
.artist-mine h2 { margin-bottom: 10px; }
.stats-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.stat-cell { display: flex; flex-direction: column; gap: 2px; padding: 10px; border-radius: 14px; background: var(--bg); min-width: 0; }
.stat-cell b { font-size: 18px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat-cell small { font-size: 11.5px; color: var(--hint); line-height: 1.25; }
.artist-mine p { margin: 10px 0 0; }
/* Истории итогов на весь экран — всегда тёмные: фото артиста на фоне, салатовый акцент */
.wrapped {
  position: fixed; inset: 0; z-index: 60; color: #f2f2f4; background: #0b0b0d; overflow: hidden;
  user-select: none; -webkit-user-select: none; touch-action: none; animation: wrapped-in .35s ease both;
}
.wrapped.closing { animation: wrapped-out .25s ease both; }
@keyframes wrapped-in { from { opacity: 0; transform: scale(1.03); } to { opacity: 1; transform: none; } }
@keyframes wrapped-out { to { opacity: 0; transform: scale(.98); } }
.wrapped-bg { position: absolute; inset: -40px; }
.wrapped-bg img {
  width: 100%; height: 100%; object-fit: cover; opacity: 0; filter: blur(28px) saturate(1.2);
  transition: opacity 1.2s ease; animation: wrapped-drift 22s ease-in-out infinite alternate;
}
.wrapped-bg img.in { opacity: .55; }
.wrapped:not(.has-photo) .wrapped-bg img { opacity: 0; }
@keyframes wrapped-drift { from { transform: scale(1.08) translate(-2%, -1%); } to { transform: scale(1.22) translate(2%, 2%); } }
.wrapped-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgb(11 11 13 / .35), rgb(11 11 13 / .55) 45%, #0b0b0d 92%); }
.wrapped-bars { position: absolute; top: calc(10px + env(safe-area-inset-top)); left: 12px; right: 12px; display: flex; gap: 4px; z-index: 3; }
.wrapped-bars i { position: relative; flex: 1; height: 3px; border-radius: 2px; background: rgb(255 255 255 / .22); overflow: hidden; }
.wrapped-bars i::after { content: ""; position: absolute; inset: 0; background: #fff; transform-origin: 0 50%; transform: scaleX(0); }
.wrapped-bars i.done::after { transform: scaleX(1); }
.wrapped-bars i.now::after { animation: wrapped-bar var(--ms, 7000ms) linear forwards; }
.wrapped.paused .wrapped-bars i.now::after { animation-play-state: paused; }
@keyframes wrapped-bar { to { transform: scaleX(1); } }
.wrapped-top { position: absolute; top: calc(22px + env(safe-area-inset-top)); right: 10px; z-index: 3; display: flex; gap: 4px; }
.wrapped-top button {
  width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgb(255 255 255 / .1); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
}
.wrapped-top .ic { width: 22px; height: 22px; }
.wrapped-slide {
  position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; gap: 12px;
  padding: calc(84px + env(safe-area-inset-top)) 26px calc(48px + env(safe-area-inset-bottom));
}
/* Всё на слайде появляется по очереди, снизу вверх */
.wrapped-slide > *, .w-rank li, .w-list li {
  animation: w-rise .7s cubic-bezier(.2, .9, .3, 1) both; animation-delay: calc(var(--i, 0) * 110ms + 80ms);
}
@keyframes w-rise { from { opacity: 0; transform: translateY(26px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
.wrapped.paused .wrapped-slide * { animation-play-state: paused; }
.w-kicker { font-size: 14px; font-weight: 600; color: #c8f169; }
.w-lead { margin: 0; font-size: 19px; font-weight: 500; color: rgb(242 242 244 / .9); }
.w-big { font-size: clamp(52px, 15vw, 84px); line-height: .95; font-weight: 800; letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.w-big.name { font-size: clamp(36px, 11vw, 64px); line-height: 1; overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }
.w-note { margin: 0; font-size: 16px; color: rgb(242 242 244 / .65); }
.w-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.w-facts div { padding: 14px 12px; border-radius: 18px; background: rgb(255 255 255 / .07); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.w-facts b { font-size: 26px; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.w-facts small { font-size: 12.5px; color: rgb(242 242 244 / .6); line-height: 1.25; }
/* Фото артиста: круг с мягким светом; без фото — первая буква */
.w-photo {
  width: min(64vw, 260px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; flex: none; margin-bottom: 8px;
  background: #1d1d21; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 1px rgb(255 255 255 / .08), 0 30px 80px rgb(0 0 0 / .55);
}
.w-artist .w-photo { animation: w-pop 1s cubic-bezier(.2, .9, .3, 1.15) both, w-breathe 6s ease-in-out 1s infinite; }
@keyframes w-pop { from { opacity: 0; transform: scale(.7) rotate(-6deg); } to { opacity: 1; transform: none; } }
@keyframes w-breathe { 50% { transform: scale(1.03); } }
.w-photo img { width: 100%; height: 100%; object-fit: cover; }
.w-photo span { font-size: 72px; font-weight: 800; color: #c8f169; }
.w-photo.small { width: 48px; margin: 0; box-shadow: none; }
.w-photo.small span { font-size: 20px; }
.w-rank { margin: 6px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.w-rank li { display: flex; align-items: center; gap: 12px; min-width: 0; }
.w-rank li:first-child .w-photo.small { width: 64px; box-shadow: 0 0 0 2px #c8f169; }
.w-rank-num { width: 22px; font-size: 22px; font-weight: 800; color: rgb(242 242 244 / .5); font-variant-numeric: tabular-nums; }
.w-rank li:first-child .w-rank-num { color: #c8f169; }
.w-rank div { display: flex; flex-direction: column; min-width: 0; }
.w-rank b { font-size: 21px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w-rank li:first-child b { font-size: 26px; }
.w-rank small { font-size: 13.5px; color: rgb(242 242 244 / .6); }
.w-track-hero { display: flex; flex-direction: column; gap: 14px; }
.w-cover {
  width: min(70vw, 280px); aspect-ratio: 1; border-radius: 14px; object-fit: cover; background: #1d1d21;
  box-shadow: 0 30px 80px rgb(0 0 0 / .6); animation: w-spin-in 1s cubic-bezier(.2, .9, .3, 1.1) both;
}
@keyframes w-spin-in { from { opacity: 0; transform: perspective(600px) rotateY(-35deg) scale(.85); } to { opacity: 1; transform: none; } }
.w-track-hero b { display: block; font-size: 30px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.w-track-hero small { font-size: 15px; color: rgb(242 242 244 / .65); }
.w-list { margin: 4px 0 0; padding: 0 0 0 26px; display: flex; flex-direction: column; gap: 8px; }
.w-list li::marker { color: rgb(242 242 244 / .45); font-weight: 700; }
.w-list b { display: block; font-size: 17px; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w-list small { font-size: 13px; color: rgb(242 242 244 / .55); }
.w-summary { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 20px; border-radius: 26px; background: rgb(255 255 255 / .07); }
.w-summary .w-photo { width: 84px; margin: 0; box-shadow: 0 0 0 2px #c8f169; }
.w-summary .w-photo span { font-size: 30px; }
.w-summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 12px; width: 100%; }
.w-summary-grid div { display: flex; flex-direction: column; min-width: 0; }
.w-summary-grid b { font-size: 21px; font-weight: 800; letter-spacing: -.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w-summary-grid small { font-size: 12.5px; color: rgb(242 242 244 / .6); }
.w-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.w-actions .primary { background: #c8f169; color: #0b0b0d; box-shadow: none; }
.w-actions .secondary { background: rgb(255 255 255 / .1); color: #fff; }
@media (prefers-reduced-motion: reduce) {
  .wrapped-bg img, .wrapped-slide > *, .w-rank li, .w-list li, .w-photo, .w-cover { animation: none !important; }
}
:root[data-motion="off"] .wrapped-bg img, :root[data-motion="off"] .wrapped-slide > *, :root[data-motion="off"] .w-photo { animation: none !important; }
/* Перенос музыки */
.import-steps { margin: 4px 0 12px; padding-left: 20px; font-size: 14px; line-height: 1.45; }
.import-steps li + li { margin-top: 6px; }
.import-status { margin: 8px 2px 0; }
.import-status:empty { display: none; }
.import-next { margin-top: 10px; }
/* Комната для друзей: реакции */
.reaction-bar { display: flex; justify-content: center; gap: 6px; margin: 0 0 8px; }
.reaction-bar button {
  width: 40px; height: 40px; border: 0; border-radius: 50%; font-size: 20px; line-height: 1; padding: 0;
  background: var(--bg2); box-shadow: var(--card-shadow); transition: transform .15s;
}
.reaction-bar button:active { transform: scale(1.25); }
#player-react .reaction-bar { margin: 6px 0 0; }
#reaction-layer { position: fixed; inset: 0; pointer-events: none; z-index: 70; overflow: hidden; }
.float-reaction {
  position: absolute; bottom: 90px; display: flex; flex-direction: column; align-items: center;
  animation: float-up 2.6s ease-out forwards;
}
.float-reaction span { font-size: 38px; filter: drop-shadow(0 4px 10px rgb(0 0 0 / .2)); }
.float-reaction small { font-size: 11px; font-weight: 700; color: #fff; background: rgb(0 0 0 / .35); padding: 1px 6px; border-radius: 8px; }
.float-reaction small:empty { display: none; }
@keyframes float-up {
  0% { transform: translateY(0) scale(.6); opacity: 0; }
  15% { transform: translateY(-40px) scale(1.1); opacity: 1; }
  100% { transform: translateY(-340px) scale(1); opacity: 0; }
}
.room-block { margin-bottom: 8px; }
/* Невысокий экран (iPhone SE и т.п.): шапка волны компактнее, чтобы всё помещалось без прокрутки */
@media (max-height: 740px) {
  #view-music .wave-top p { display: none; }
  #view-music .wave-top h2 { font-size: 22px; }
  #view-music .wave-switch { margin-top: 2px; }
  #view-music .wave-stage { gap: 6px; }
  .wave-lines { height: 18px; }
  .wave-deck { margin: 0 0 8px; }
  .wave-controls .ctl { width: 42px; height: 42px; }
  #view-music .wave-stage .wave-go { width: 64px; height: 64px; }
}
/* Низ экрана волны — одна строка чипов */
.wave-chips { display: flex; gap: 6px; justify-content: safe center; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; }
.wave-chips::-webkit-scrollbar { display: none; }
.wave-chips .wave-chip { flex: none; margin: 0; max-width: 62vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.panel .wave-pair { margin: 4px 0 0; }
/* Подкасты */
.invisible { visibility: hidden; }
.pod-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 10px; }
.pod-grid.with-why { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pod-tile { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 0; border: 0; background: none; text-align: left; color: var(--text); }
.pod-tile img { width: 100%; aspect-ratio: 1; border-radius: 14px; object-fit: cover; background: var(--soft); }
.pod-tile b { font-size: 13px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pod-tile small { font-size: 11.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pod-episode { align-items: center; }
.pod-episode.done b { opacity: .55; }
.pod-ep-art { flex: none; width: 44px; height: 44px; border-radius: 10px; object-fit: cover; background: var(--soft); }
.pod-progress { display: block; height: 3px; margin-top: 5px; border-radius: 2px; background: var(--soft); overflow: hidden; }
.pod-progress i { display: block; height: 100%; background: var(--accent); }
.pod-about { flex: none; font-size: 12px; font-weight: 600; width: auto; padding: 6px 8px; color: var(--accent); white-space: nowrap; }
.pod-back { margin: 8px 12px 0; }
.pod-head { display: grid; grid-template-columns: 96px 1fr; gap: 12px; align-items: start; }
.pod-head-art { width: 96px; height: 96px; border-radius: 16px; object-fit: cover; background: var(--soft); }
.pod-head-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pod-head-text b { font-size: 17px; line-height: 1.25; }
.pod-sub { width: auto; align-self: flex-start; margin-top: 6px; padding: 8px 14px; }
.pod-sub.on { background: var(--accent); color: var(--accent-text); }
.pod-desc { grid-column: 1 / -1; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pod-desc.open { display: block; }
.pod-skip { font-size: 15px; font-weight: 700; }
.pod-about-ai { white-space: pre-line; line-height: 1.5; }
.player-speed.hidden { display: none; }
.book-pick { display: flex; gap: 12px; padding: 10px; margin-top: 8px; border-radius: var(--radius); background: var(--bg); }
.book-pick-text { flex: 1; min-width: 0; }
.book-pick-text b, .book-pick-text small { display: block; }
.book-pick-text p { margin: 6px 0 8px; font-size: 14px; }
.book-pick-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.book-pick-actions .chip { margin: 0; }
.books-wish { margin-top: 4px; }

/* Вход вне Telegram (приложение на экране «Домой», браузер) */
.web-login {
  position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: var(--bg);
}
.web-login-card { width: 100%; max-width: 360px; text-align: center; }
.web-login-logo { width: 96px; height: 96px; border-radius: 24px; box-shadow: 0 10px 30px rgba(42,122,226,.35); }
.web-login-card h1 { margin: 18px 0 6px; font-size: 24px; }
.web-login-card p { margin: 0 0 22px; }
.web-login-card .primary, .web-login-card .secondary { margin-top: 10px; }
.web-login-status { min-height: 20px; margin-top: 14px !important; }
.web-login-icons { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line); }
.web-login-icons p { margin: 0 0 12px !important; }
/* Выбор значка на экране «Домой» */
.icon-picker { display: flex; justify-content: center; gap: 14px; }
.icon-choice { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: var(--hint); font-size: 12px; }
.icon-choice img { width: 60px; height: 60px; border-radius: 14px; box-shadow: 0 0 0 1px var(--line), 0 4px 12px rgba(0,0,0,.12); transition: transform .15s; }
.icon-choice.active { color: var(--accent); font-weight: 600; }
.icon-choice.active img { box-shadow: 0 0 0 3px var(--accent), 0 4px 14px rgba(0,0,0,.18); transform: scale(1.06); }

/* Фильмы */
#movies-tabs button { white-space: nowrap; padding: 7px 4px; font-size: 13.5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.movies-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 10px; }
.movies-row { display: flex; gap: 10px; overflow-x: auto; margin: 0 -12px; padding: 0 12px 4px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.movies-row::-webkit-scrollbar { display: none; }
.movie-card {
  display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 0; border: 0; background: none;
  text-align: left; transition: transform .15s;
}
.movie-card.wide { flex: none; width: 62%; max-width: 260px; scroll-snap-align: start; }
.movie-card:active { transform: scale(.97); }
.movie-thumb { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: var(--bg); }
.movie-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.movie-time, .movie-official {
  position: absolute; bottom: 6px; padding: 2px 7px; border-radius: var(--pill);
  background: rgba(0,0,0,.65); color: #fff; font-size: 11px; font-weight: 600;
}
.movie-time { right: 6px; }
.movie-official { left: 6px; top: 6px; bottom: auto; background: rgba(31,169,113,.9); }
.movie-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.35); }
.movie-progress i { display: block; height: 100%; background: var(--accent); }
.movie-card b { font-size: 14px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.movie-card small { font-size: 12px; color: var(--hint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.movies-note { margin: 10px 16px; text-align: center; }

/* Кинозал */
.cinema { position: fixed; inset: 0; z-index: 19; display: flex; flex-direction: column; background: #0d0d0f; color: #f2f2f2;
  --r-text: #f2f2f2; --r-muted: #9a9a9f; --r-line: rgba(255,255,255,.1); }
.cinema .reader-bar .ctl { color: #f2f2f2; }
.cinema-frame { width: 100%; aspect-ratio: 16 / 9; background: #000; flex: none; }
.cinema-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.cinema-info { flex: 1; overflow-y: auto; padding: 14px 16px calc(20px + env(safe-area-inset-bottom)); }
.cinema-info .muted { color: #9a9a9f; }
.cinema-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 16px; }
.cinema-actions .chip { margin: 0; background: rgba(255,255,255,.1); color: #f2f2f2; }
.cinema-actions .chip.active { background: var(--accent); color: var(--accent-text); }
.cinema-rate { display: flex; flex-direction: column; gap: 6px; }
.cinema-stars { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; }
.cinema-star {
  aspect-ratio: 1; border: 0; border-radius: 10px; background: rgba(255,255,255,.08); color: #bbb;
  font-size: 13px; font-weight: 600; padding: 0;
}
.cinema-star.on { background: #f5b014; color: #241900; }

/* Шапка кинозала */
.reader-bar { display: flex; align-items: center; gap: 4px; padding: 8px 8px; border-bottom: 1px solid var(--r-line); }
.reader-bar .ctl { color: var(--r-text); }
.reader-head { flex: 1; min-width: 0; display: flex; flex-direction: column; text-align: center; }
.reader-head b, .reader-head small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reader-head b { font-size: 15px; }
.reader-head small { font-size: 12px; color: var(--r-muted); }
.wave-tune { display: flex; align-items: center; gap: 10px; margin-top: 10px; min-width: 0; }
.wave-tune .chip { flex: none; margin: 0; background: var(--bg); }
.wave-tune small { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wave-tune-row .chip { margin: 0 6px 6px 0; }
.panel h3.wave-tune-h { font-size: 14px; font-weight: 600; color: var(--hint); margin: 16px 0 8px; }
.wave-tune-toggle { margin: 14px 0 4px; }
.wave-tune-actions { display: flex; gap: 8px; margin-top: 16px; }
.wave-tune-actions button { flex: 1; }
.music-paywall { padding: 16px 18px; }
.music-paywall p { margin: 0 0 4px; }
.music-empty { text-align: center; padding: 26px 22px; }
.music-empty-icon { font-size: 44px; line-height: 1; margin-bottom: 10px; }
.music-empty p { margin: 0; }

/* Мини-плеер — в стиле нижней панели */
.mini-player {
  position: relative; display: flex; align-items: center; gap: 2px; margin: 6px 10px 0; padding: 5px 6px 5px 5px;
  border-radius: var(--pill); background: var(--bg); border: 1px solid var(--line);
  box-shadow: 0 2px 12px rgba(0,0,0,.06); overflow: hidden;
}
.mini-info { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; background: none; border: 0; padding: 0; text-align: left; }
.mini-info img { flex: none; width: 42px; height: 42px; border-radius: 50%; object-fit: cover; background: var(--bg2); }
.mini-text { min-width: 0; display: flex; flex-direction: column; }
.mini-text b, .mini-text small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-text b { font-size: 14px; }
.mini-text small { font-size: 12px; color: var(--hint); }
.mini-play {
  flex: none; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: var(--accent-text); transition: transform .15s;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 35%, transparent);
}
.mini-play:active { transform: scale(.9); }
.mini-play .ic { width: 20px; height: 20px; }
.mini-play[data-icon="play"] .ic { margin-left: 2px; }
.mini-progress { position: absolute; left: 26px; right: 26px; bottom: 0; height: 2px; }
.mini-progress span { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 2px; }

/* Плеер на весь экран */
.player {
  position: fixed; inset: 0; z-index: 26; display: flex; flex-direction: column;
  padding-bottom: calc(8px + env(safe-area-inset-bottom)); background: var(--bg); overflow-y: auto;
  animation: player-in .32s cubic-bezier(.2, .8, .2, 1);
}
@keyframes player-in { from { transform: translateY(40px); } to { transform: none; } }
.player-bar h1 { display: flex; flex-direction: column; align-items: center; font-size: 15px; line-height: 1.2; }
.player-bar h1 small { font-size: 12px; font-weight: 400; color: var(--hint); }
.player-bar .ctl .ic { width: 24px; height: 24px; }
.player-cover { flex: 1; min-height: 180px; display: flex; align-items: center; justify-content: center; padding: 18px 28px 8px; }
.player-cover img {
  width: 100%; max-width: 340px; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-card);
  background: var(--bg2); box-shadow: 0 14px 40px rgba(0,0,0,.22);
  transform: scale(.9); transition: transform .45s cubic-bezier(.34, 1.4, .64, 1);
}
.player.is-playing .player-cover img { transform: scale(1); }

/* Живой плеер: свет цвета обложки за ней и яркие пятна фона; --beat (0…1) — громкость в этот момент.
   --vibe1/--vibe2 — цвета обложки (ставятся на весь документ), без них — цвет темы */
.player { --beat: 0; isolation: isolate; }
.player-aurora, .wave-aurora {
  position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  opacity: 0; transition: opacity .9s ease;
}
.player-aurora::before, .player-aurora::after, .wave-aurora::before, .wave-aurora::after {
  content: ""; position: absolute; width: 110vmax; height: 110vmax; border-radius: 50%;
}
.player-aurora::before, .wave-aurora::before {
  top: -55vmax; left: -45vmax;
  background: radial-gradient(circle, color-mix(in srgb, var(--vibe1, var(--accent)) 80%, transparent) 0%, transparent 62%);
  animation: aurora-a 19s ease-in-out infinite alternate;
}
.player-aurora::after, .wave-aurora::after {
  bottom: -60vmax; right: -50vmax;
  background: radial-gradient(circle, color-mix(in srgb, var(--vibe2, var(--accent)) 70%, transparent) 0%, transparent 62%);
  animation: aurora-b 23s ease-in-out infinite alternate;
}
@keyframes aurora-a { to { transform: translate(18vmax, 22vmax) scale(1.15); } }
@keyframes aurora-b { to { transform: translate(-20vmax, -16vmax) scale(1.1); } }
@keyframes aurora-c { to { transform: translate(-14vmax, 18vmax) scale(1.2); } }
/* Переливы: пятна трёх цветов обложки по очереди разгораются и притухают (--mix-a/--mix-b 0…1 ставит плеер,
   быстрее на плотных местах), на ударах (--hit) вспыхивает свет за обложкой.
   Только прозрачность и масштаб — без фильтров и огромных слоёв: на iPhone они съедали видеопамять,
   и система перезапускала приложение (звук пропадал) */
.player-aurora::before, .wave-aurora::before { scale: calc(1 + var(--beat, 0) * .12); opacity: calc(.4 + var(--mix-a, .5) * .6); }
.player-aurora::after, .wave-aurora::after { scale: calc(1 + var(--beat, 0) * .1 + var(--hit, 0) * .06); opacity: calc(.45 + var(--mix-b, .5) * .55); }
.player-aurora i, .wave-aurora i { position: absolute; border-radius: 50%; pointer-events: none; }
.player-aurora i:nth-child(1), .wave-aurora i:nth-child(1) {
  width: 70vmax; height: 70vmax; top: 18%; right: -34vmax;
  background: radial-gradient(circle, color-mix(in srgb, var(--vibe3, var(--vibe2, var(--accent))) 70%, transparent) 0%, transparent 62%);
  animation: aurora-c 17s ease-in-out infinite alternate;
  opacity: calc(.2 + (1 - var(--mix-a, .5)) * .6 + var(--hit, 0) * .3); scale: calc(.95 + var(--beat, 0) * .15 + var(--hit, 0) * .1);
}
.player-aurora i:nth-child(2), .wave-aurora i:nth-child(2) {
  width: 90vmin; height: 90vmin; left: 50%; top: 40%; margin: -45vmin 0 0 -45vmin;
  background: radial-gradient(circle, color-mix(in srgb, var(--vibe3, var(--accent)) 65%, transparent) 0%,
    color-mix(in srgb, var(--vibe1, var(--accent)) 35%, transparent) 40%, transparent 68%);
  opacity: calc(var(--hit, 0) * .6); scale: calc(.9 + var(--hit, 0) * .25);
}
:root.vibe .player .player-aurora { opacity: calc(.7 + var(--beat) * .3); }
:root.vibe .player.is-playing .player-aurora { transition: none; }
.player-cover { position: relative; }
.player-glow {
  position: absolute; left: 50%; top: calc(50% + 5px); width: min(340px, calc(100% - 56px)); aspect-ratio: 1;
  translate: -50% -50%; border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(circle, var(--vibe1, var(--accent)) 0%, color-mix(in srgb, var(--vibe2, var(--accent)) 75%, transparent) 45%, transparent 70%);
  filter: blur(20px); transition: opacity .6s ease;
}
.player-cover img { position: relative; }
:root.vibe .player.is-playing .player-glow {
  opacity: calc(.55 + var(--beat) * .3 + var(--hit, 0) * .3); scale: calc(1.2 + var(--beat) * .4 + var(--hit, 0) * .15); transition: none;
}
:root.vibe .player.is-playing .player-cover img {
  scale: calc(1 + var(--beat) * .025 + var(--hit, 0) * .015);
  box-shadow: 0 0 calc(24px + var(--beat) * 70px) calc(var(--beat) * 14px) color-mix(in srgb, var(--vibe1, var(--accent)) 85%, transparent);
}

/* ---------- «Моя волна» на весь экран: светящийся шар в ритм ---------- */
#view-music.wave-mode #music-search { display: none; }
#music-tabs button { padding: 7px 4px; font-size: 13.5px; white-space: nowrap; }
#view-music.wave-mode #music-body { display: flex; flex-direction: column; }
.wave-stage {
  --beat: 0; position: relative; isolation: isolate; flex: 1; min-height: 100%;
  display: flex; flex-direction: column; align-items: center; padding: 10px 16px 12px; text-align: center;
}
.wave-stage .wave-aurora { position: absolute; opacity: .45; }
:root.vibe .wave-stage.is-playing .wave-aurora { opacity: calc(.7 + var(--beat) * .3); transition: none; }
.wave-top h2 { margin: 4px 0 2px; font-size: 24px; }
.wave-top p { margin: 0; }
.wave-orb-wrap {
  position: relative; flex: 1; width: 100%; min-height: 250px;
  display: flex; align-items: center; justify-content: center;
}
.wave-orb {
  position: absolute; width: min(66vw, 290px); aspect-ratio: 1; pointer-events: none;
  animation: orb-breathe 4.5s ease-in-out infinite;
}
.wave-orb::after {
  content: ""; position: absolute; inset: -28%; border-radius: 50%; z-index: -1;
  background: radial-gradient(circle, color-mix(in srgb, var(--vibe1, var(--accent)) 70%, transparent) 0%, transparent 66%);
  opacity: .45;
}
.wave-orb i {
  position: absolute; inset: 0; border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%;
  filter: blur(12px); opacity: .9;
}
.wave-orb i:nth-child(1) {
  background: radial-gradient(circle at 35% 35%, var(--vibe1, var(--accent)), color-mix(in srgb, var(--vibe1, var(--accent)) 30%, transparent) 75%);
  animation: orb-spin 11s linear infinite;
}
.wave-orb i:nth-child(2) {
  inset: 9%; border-radius: 61% 39% 45% 55% / 52% 63% 37% 48%;
  background: radial-gradient(circle at 65% 40%, var(--vibe2, var(--accent)), transparent 75%);
  animation: orb-spin 15s linear infinite reverse;
}
.wave-orb i:nth-child(3) {
  inset: 22%; border-radius: 50% 50% 38% 62% / 58% 42% 58% 42%;
  background: radial-gradient(circle, rgba(255,255,255,.85), color-mix(in srgb, var(--vibe1, var(--accent)) 40%, transparent) 70%);
  animation: orb-spin 8s linear infinite;
}
@keyframes orb-spin { to { rotate: 360deg; } }
@keyframes orb-breathe { 0%, 100% { transform: scale(.94); } 50% { transform: scale(1); } }
:root.vibe .wave-stage.is-playing .wave-orb { animation: none; scale: calc(.92 + var(--beat) * .26); }
:root.vibe .wave-stage.is-playing .wave-orb::after { opacity: calc(.5 + var(--beat) * .5); scale: calc(1 + var(--beat) * .35); }
.wave-stage .wave-go {
  position: relative; width: 84px; height: 84px;
  background: color-mix(in srgb, var(--bg) 88%, transparent); color: var(--text);
  box-shadow: 0 8px 30px rgba(0,0,0,.18); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.wave-stage .wave-go.playing { animation: none; }
.wave-stage .wave-go .ic { width: 36px; height: 36px; }
.wave-now {
  width: 100%; max-width: 440px; min-height: 62px; display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 6px;
}
.wave-now:has(.wave-now-text) {
  justify-content: space-between; padding: 8px 6px 8px 16px; text-align: left; border-radius: 20px;
  background: color-mix(in srgb, var(--bg2) 72%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.wave-now p { margin: 0; }
.wave-now-text { flex: 1; min-width: 0; display: flex; flex-direction: column; cursor: pointer; }
.wave-now-text b, .wave-now-text small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wave-now-text b { font-size: 16px; }
.wave-now-ctl { display: flex; flex: none; }
.wave-now-ctl .ctl { width: 42px; height: 42px; }
.wave-now-ctl .ctl .ic { width: 24px; height: 24px; }
.wave-like.on { color: #ec4b8b; }
.wave-bottom { width: 100%; max-width: 440px; }
.wave-stage .wave-moods { justify-content: safe center; }
.wave-stage .wave-tune { justify-content: center; }
/* Парная волна: переключатель «Моя / Парная» и карточка пары */
.wave-switch {
  display: inline-flex; margin-top: 10px; padding: 3px; border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 80%, transparent);
}
.wave-switch button {
  border: 0; background: none; color: var(--hint); padding: 6px 16px; border-radius: 999px;
  font-size: 14px; font-weight: 600; cursor: pointer;
}
.wave-switch button.active { background: var(--accent); color: var(--accent-text); }
.wave-pair {
  display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 10px 12px; border-radius: 14px;
  background: color-mix(in srgb, var(--bg) 82%, transparent); text-align: left;
}
.wave-pair-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wave-pair-text b { font-size: 15px; }
.wave-pair-text small { font-size: 12.5px; line-height: 1.3; }
.wave-pair-actions { display: flex; gap: 6px; flex: none; }
.wave-pair .chip { flex: none; margin: 0; white-space: nowrap; }
.wave-pair .chip:not(.active) { background: var(--bg); }
.wave-pair .chip.active { background: var(--accent); color: var(--accent-text); }
.player-card { padding: 18px 20px 14px; }
.player-meta { display: flex; flex-direction: column; gap: 2px; margin-bottom: 14px; }
.player-meta b { font-size: 19px; line-height: 1.25; }
/* Имя исполнителя ведёт на его страницу */
#player-artist { overflow-wrap: anywhere; }
.artist-link { cursor: pointer; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 3px; }
/* Страница артиста и альбома */
.artist-hero { position: relative; text-align: center; padding: 18px 16px 6px; }
.artist-hero .back-ctl { position: absolute; left: 8px; top: 8px; }
.artist-hero .back-ctl .ic { transform: rotate(90deg); }
.artist-hero h2 { margin: 12px 0 2px; font-size: 22px; padding: 0 28px; overflow-wrap: anywhere; }
.artist-hero p { margin: 0 0 14px; }
.artist-photo {
  display: block; width: 148px; aspect-ratio: 1; margin: 6px auto 0; border-radius: 16px; overflow: hidden;
  background: var(--bg2); box-shadow: 0 10px 30px rgb(0 0 0 / .18);
}
.artist-photo.round { border-radius: 50%; }
.artist-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.artist-photo.empty { display: flex; align-items: center; justify-content: center; background: var(--bg); }
.artist-photo.empty img { display: none; }
.artist-photo.empty::after { content: "🎤"; font-size: 34px; opacity: .55; }
.artist-tile .artist-photo.empty::after { font-size: 26px; }
.artist-actions { flex-wrap: wrap; justify-content: center; }
.artist-actions .chip { flex: 1 1 40%; }
.artist-scroll {
  display: flex; gap: 12px; overflow-x: auto; padding: 0 8px 8px; scrollbar-width: none;
  scroll-snap-type: x proximity; scroll-padding: 0 8px;
}
.artist-scroll::-webkit-scrollbar { display: none; }
.album-tile, .artist-tile {
  flex: none; width: 112px; border: 0; background: none; padding: 0; color: inherit; text-align: left;
  display: flex; flex-direction: column; gap: 4px; cursor: pointer; scroll-snap-align: start; font: inherit;
}
.album-cover { display: block; width: 112px; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--bg2); }
.album-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.album-tile b, .artist-tile b {
  font-size: 13px; font-weight: 600; line-height: 1.25; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.album-tile small { font-size: 12px; }
.artist-tile { width: 88px; align-items: center; text-align: center; }
.artist-tile .artist-photo { width: 80px; margin: 0; box-shadow: none; }
.tracks-more-btn { display: block; margin: 8px auto 6px; padding: 9px 22px; background: var(--bg); }
/* Полоса перемотки: заполненная часть — цветом темы */
#player-seek {
  --p: 0%; width: 100%; height: 22px; margin: 0; background: none; appearance: none; -webkit-appearance: none; cursor: pointer;
}
#player-seek::-webkit-slider-runnable-track {
  height: 6px; border-radius: 3px;
  background: linear-gradient(to right, var(--accent) var(--p), color-mix(in srgb, var(--hint) 28%, transparent) var(--p));
}
#player-seek::-moz-range-track { height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--hint) 28%, transparent); }
#player-seek::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--accent); }
#player-seek::-webkit-slider-thumb {
  -webkit-appearance: none; width: 16px; height: 16px; margin-top: -5px; border-radius: 50%;
  background: var(--accent); border: 3px solid var(--bg); box-shadow: 0 1px 4px rgba(0,0,0,.25);
}
#player-seek::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); border: 3px solid var(--bg); }
.player-times { display: flex; justify-content: space-between; font-variant-numeric: tabular-nums; }
.player-controls { display: flex; align-items: center; justify-content: space-between; margin: 12px 0 4px; }
.player-controls .ctl.big { width: 54px; height: 54px; }
.player-controls .ctl.big .ic { width: 30px; height: 30px; }
/* Перемешать и повтор: серые, включённые — цвета темы с точкой снизу */
.player-controls .ctl.mode { position: relative; color: var(--hint); }
.player-controls .ctl.mode.on { color: var(--accent); }
.player-controls .ctl.mode.on::after {
  content: ""; position: absolute; bottom: 2px; left: 50%; width: 4px; height: 4px; margin-left: -2px;
  border-radius: 50%; background: var(--accent);
}
.play-big {
  flex: none; width: 76px; height: 76px; padding: 0; border: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: var(--accent-text); transition: transform .15s, box-shadow .3s;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 40%, transparent);
}
.play-big.playing { box-shadow: 0 8px 30px color-mix(in srgb, var(--accent) 55%, transparent); }
.play-big:active { transform: scale(.92); }
.play-big .ic { width: 34px; height: 34px; }
.play-big[data-icon="play"] .ic { margin-left: 4px; }
.player-status { text-align: center; min-height: 18px; margin: 4px 0 0; }
.player-wrong {
  display: block; margin: 2px auto 0; padding: 6px 10px; border: 0; background: none;
  color: var(--hint); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.player-wrong.hidden { display: none; }
.player-extra { display: flex; justify-content: center; align-items: center; gap: 4px 14px; flex-wrap: wrap; }
.player-extra .player-wrong { margin: 2px 0 0; }
.player-dl {
  padding: 6px 12px; margin-top: 2px; border: 0; border-radius: 999px; font-size: 13px; font-weight: 600; cursor: pointer;
  background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent);
}
.player-dl.hidden { display: none; }
.player-dl:disabled { opacity: .75; cursor: default; }
/* Скачанное: строка под шапкой плейлиста */
.offline-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: -4px 8px 12px; }
.offline-row .chip { margin: 0; flex: none; }
.music-offline-note { margin: -4px 8px 12px; }
.offline-listen { width: 100%; margin-top: 10px; }

/* ================= Музыка: яркое оформление =================
   Свой цвет раздела — фиолетово-розовый градиент (на нём белый текст читается в любой теме), им же
   подсвечен фон. Цвета обложки — только там, где они про сам трек: плеер и шар волны.
   Карточки — полупрозрачные, сквозь них видна подсветка. */
#view-music, #mini-player, .player {
  --accent: #8b3df0;
  --accent-text: #ffffff;
  --m1: #8b5cf6;
  --m2: #ec4899;
  --m-grad: linear-gradient(135deg, #7c3aed 0%, #c026d3 55%, #e11d74 100%);
  --m-glass: color-mix(in srgb, var(--bg) 62%, transparent);
  --m-edge: color-mix(in srgb, var(--text) 8%, transparent);
}

/* Фон раздела: мягкие пятна цвета, медленно плывут */
#view-music { position: relative; isolation: isolate; background: var(--bg); }
#view-music::before, #view-music::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none; border-radius: 50%;
  width: 120vmax; height: 120vmax; transition: background 1.2s ease;
}
#view-music::before {
  top: -70vmax; left: -55vmax;
  background: radial-gradient(circle, color-mix(in srgb, var(--m1) 34%, transparent) 0%, transparent 58%);
  animation: aurora-a 26s ease-in-out infinite alternate;
}
#view-music::after {
  top: -40vmax; right: -70vmax;
  background: radial-gradient(circle, color-mix(in srgb, var(--m2) 24%, transparent) 0%, transparent 58%);
  animation: aurora-b 31s ease-in-out infinite alternate;
}
#view-music { overflow: hidden; }
#view-music .bar { border-bottom: 0; padding-top: 12px; }
#view-music .bar h1 {
  font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15;
  background: var(--m-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Поиск и вкладки — стекло */
#view-music .search-row input {
  background: var(--m-glass); border: 1px solid var(--m-edge);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
#view-music .search-row input:focus { outline: none; border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
#music-tabs {
  background: var(--m-glass); border: 1px solid var(--m-edge);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
#music-tabs button { color: var(--text); opacity: .7; font-weight: 600; }
#music-tabs button.active { opacity: 1; }
#music-tabs button.active {
  background: var(--m-grad); color: #fff;
  box-shadow: 0 4px 14px color-mix(in srgb, #c026d3 38%, transparent);
}

/* Карточки — стекло вместо серых плит */
#view-music .music-card, #view-music .wave-pair, #view-music .wave-now:has(.wave-now-text), #view-music .wave-switch {
  background: var(--m-glass); border: 1px solid var(--m-edge);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
}
#view-music .music-card { box-shadow: 0 8px 28px color-mix(in srgb, var(--m1) 10%, transparent); }
#view-music .music-card h2 { font-size: 18px; font-weight: 800; letter-spacing: -.01em; }

/* Треки: без «таблеток» — чистый список, квадратные обложки, играющий подсвечен */
#view-music .tracks { gap: 2px; }
#view-music .track {
  background: none; border-radius: 16px; padding: 6px 4px 6px 6px; gap: 12px;
  transition: background .2s, transform .15s;
}
#view-music .track:active { background: color-mix(in srgb, var(--text) 6%, transparent); }
#view-music .track.playing {
  box-shadow: none;
  background: linear-gradient(90deg, color-mix(in srgb, var(--m1) 22%, transparent), color-mix(in srgb, var(--m2) 12%, transparent));
}
#view-music .track.playing b { color: var(--text); }
#view-music .track-art { width: 50px; height: 50px; }
#view-music .track-cover, #view-music .track-eq,
#view-music .track.unresolved .track-art::before, #view-music .track.loading .track-art::after { border-radius: 12px; }
#view-music .track-cover { box-shadow: 0 3px 10px rgba(0,0,0,.14); }
#view-music .track-eq { background: linear-gradient(135deg, rgb(124 58 237 / .7), rgb(225 29 116 / .6)); }
#view-music .playlist-icon {
  border-radius: 12px; background: var(--m-grad); box-shadow: 0 4px 12px color-mix(in srgb, #c026d3 30%, transparent);
}

/* Кнопки действия — градиент; обычные чипы — стекло */
#view-music .chip { background: color-mix(in srgb, var(--bg) 75%, transparent); border: 1px solid var(--m-edge); color: var(--text); }
#view-music .chip.active, #view-music .playlist-actions .chip.active, #view-music .wave-switch button.active {
  background: var(--m-grad); color: #fff; border-color: transparent;
  box-shadow: 0 4px 14px color-mix(in srgb, #c026d3 32%, transparent);
}
#view-music .round-go, #view-music .play-big:not(.wave-go), .mini-play, .player .play-big {
  background: var(--m-grad); color: #fff;
  box-shadow: 0 6px 18px color-mix(in srgb, #c026d3 40%, transparent);
}
#view-music .music-import-row { background: color-mix(in srgb, var(--bg) 80%, transparent); border: 1px solid var(--m-edge); }
#view-music .music-empty-icon { filter: drop-shadow(0 6px 14px color-mix(in srgb, var(--m1) 45%, transparent)); }

/* Страница артиста: фото с цветным светом, плитки альбомов с тенью */
#view-music .artist-photo { box-shadow: 0 12px 34px color-mix(in srgb, var(--m1) 45%, transparent); }
#view-music .artist-tile .artist-photo { box-shadow: 0 6px 16px color-mix(in srgb, var(--m1) 25%, transparent); }
#view-music .album-cover { border-radius: 14px; box-shadow: 0 8px 20px rgba(0,0,0,.16); }
#view-music .artist-hero h2 { font-size: 26px; font-weight: 800; letter-spacing: -.02em; }

/* Волна: в покое шар фирменных цветов, когда играет — цвета обложки трека */
#view-music .wave-stage:not(.is-playing) { --vibe1: #8b5cf6; --vibe2: #ec4899; --vibe3: #38bdf8; }
/* Подсветка экрана волны — без резких краёв: фон раздела и так светится */
#view-music .wave-stage .wave-aurora {
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
}
#view-music .wave-stage:not(.is-playing) .wave-aurora { opacity: 0; }
/* ---------- Карточка трека со свайпами и звуковая волна под ней ---------- */
#view-music .wave-stage { gap: 10px; }
/* Экран длиннее телефона — прокручивается, а не сжимает ряды */
#view-music .wave-stage > * { flex-shrink: 0; }
#view-music .wave-stage > .wave-moods { width: calc(100% + 32px); margin: 0 -16px; max-width: none; }
#view-music .wave-top h2 { margin-top: 0; }
#view-music .wave-switch { margin-top: 6px; }
.wave-deck { position: relative; width: min(58vw, 250px); margin: 4px 0 18px; touch-action: none; }
.wave-peek {
  position: absolute; left: 8%; right: 8%; bottom: -24px; height: 50px; border-radius: 0 0 20px 20px; z-index: 0;
  display: flex; align-items: flex-end; justify-content: center; padding: 0 12px 5px;
  background: color-mix(in srgb, var(--bg) 55%, transparent); border: 1px solid var(--m-edge);
}
.wave-peek small { font-size: 11px; color: var(--hint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.wave-card {
  --like: 0; --skip: 0;
  position: relative; z-index: 1; padding: 10px 10px 12px; border-radius: 26px; cursor: grab; user-select: none;
  background: var(--bg); border: 1px solid var(--m-edge);
  box-shadow: 0 18px 40px color-mix(in srgb, var(--m1) 22%, rgb(0 0 0 / .12));
  touch-action: none; -webkit-user-select: none;
}
.wave-card.settle { transition: transform .3s cubic-bezier(.2, .9, .3, 1.2); }
.wave-card.gone { transition: transform .25s ease-in; }
.wave-card-art { position: relative; aspect-ratio: 1; border-radius: 18px; overflow: hidden; background: var(--m-grad); }
.wave-card-art img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; -webkit-user-drag: none; }
.wave-card-icon { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; }
.wave-card-icon .ic { width: 64px; height: 64px; filter: drop-shadow(0 4px 12px rgb(0 0 0 / .25)); }
.wave-card.empty .wave-card-art { display: block; }
.wave-tag {
  position: absolute; top: 12px; padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 700;
  color: #fff; pointer-events: none;
}
.wave-tag.like { right: 12px; background: #16a34a; opacity: var(--like); transform: rotate(8deg); }
.wave-tag.skip { left: 12px; background: #e11d48; opacity: var(--skip); transform: rotate(-8deg); }
.wave-card.liked .wave-card-art::after {
  content: "♥"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 110px; color: #fff; text-shadow: 0 6px 24px rgb(0 0 0 / .35); animation: like-pop .7s ease-out forwards;
}
@keyframes like-pop { 0% { opacity: 0; transform: scale(.4); } 30% { opacity: 1; transform: scale(1.1); } 100% { opacity: 0; transform: scale(1); } }
.wave-card-text { display: flex; flex-direction: column; gap: 2px; padding: 10px 6px 0; text-align: left; min-width: 0; }
.wave-card-text b { font-size: 17px; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wave-card-text small { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wave-vibe {
  align-self: flex-start; max-width: 100%; margin-top: 4px; padding: 3px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--text);
}
.wave-lines { width: 100%; max-width: 460px; height: 46px; overflow: visible; }
#view-music .wave-stage { gap: 8px; padding-top: 4px; }
.wave-lines path { fill: none; stroke-linecap: round; }
.wave-lines .l1 { stroke: #ec4899; stroke-width: 3; }
.wave-lines .l2 { stroke: #8b5cf6; stroke-width: 2.2; opacity: .85; }
.wave-lines .l3 { stroke: #22d3ee; stroke-width: 1.6; opacity: .7; }
.wave-progress { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 380px; font-size: 12px; color: var(--hint); font-variant-numeric: tabular-nums; }
.wave-progress.hidden { visibility: hidden; }
.wave-bar { flex: 1; height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--hint) 25%, transparent); overflow: hidden; }
.wave-bar i { display: block; height: 100%; width: 0; background: var(--m-grad); border-radius: 2px; }
.wave-controls { display: flex; align-items: center; justify-content: center; gap: 28px; }
.wave-controls .ctl { width: 48px; height: 48px; border: 1px solid var(--m-edge); background: var(--m-glass); }
.wave-controls .ctl .ic { width: 24px; height: 24px; }
.wave-controls .wave-skip { color: #e11d48; }
.wave-controls .wave-like { color: #db2777; }
.wave-controls .ctl:disabled { opacity: .35; }
#view-music .wave-stage .wave-go {
  width: 64px; height: 64px; background: var(--m-grad); color: #fff;
  box-shadow: 0 8px 26px color-mix(in srgb, #c026d3 45%, transparent); -webkit-backdrop-filter: none; backdrop-filter: none;
}
#view-music .wave-stage .wave-go .ic { width: 32px; height: 32px; }
body.wave-open #mini-player { display: none; }
/* Подписи и переключатель в той же гамме */
#view-music .wave-top h2 { font-size: 28px; font-weight: 800; letter-spacing: -.02em; }
#view-music .wave-switch button.active { box-shadow: none; }

/* Мини-плеер: стекло в цветах раздела, полоса прогресса — градиентом */
.mini-player {
  border: 1px solid var(--m-edge);
  background:
    linear-gradient(100deg, color-mix(in srgb, var(--m1) 20%, transparent), color-mix(in srgb, var(--m2) 14%, transparent)),
    color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  box-shadow: 0 6px 22px color-mix(in srgb, var(--m1) 22%, transparent);
}
.mini-info img { border-radius: 12px; }
.mini-progress span { background: var(--m-grad); }

/* Большой плеер: весь в цветах обложки — свет вокруг, кнопка и полоса перемотки (без обложки — цвета раздела) */
.player {
  background: var(--bg);
  --m-grad: linear-gradient(135deg, var(--vibe1, #7c3aed) 0%, var(--vibe2, #e11d74) 100%);
  --accent: var(--vibe1, #8b3df0);
}
.player .play-big { box-shadow: 0 8px 26px color-mix(in srgb, var(--vibe1, #c026d3) 45%, transparent); }
.player .play-big .ic { filter: drop-shadow(0 1px 2px rgb(0 0 0 / .35)); }
#player-seek::-webkit-slider-runnable-track {
  background:
    linear-gradient(to right, transparent var(--p), color-mix(in srgb, var(--hint) 28%, transparent) var(--p)),
    var(--m-grad);
}
#player-seek::-moz-range-progress { background: var(--m-grad); }
.player .player-card {
  background: var(--m-glass); border: 1px solid var(--m-edge);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
}
.player-meta b { font-size: 21px; font-weight: 800; letter-spacing: -.01em; }

@media (prefers-reduced-motion: reduce) {
  #view-music::before, #view-music::after { animation: none; }
}
:root[data-motion="off"] #view-music::before, :root[data-motion="off"] #view-music::after { animation: none; }

/* =====================================================================================
   «Тихий минимализм» — оформление всего приложения (у «Музыки» своя гамма выше).
   Нейтральные цвета, белые/чёрные главные кнопки, один спокойный акцент для мелочей,
   шрифт Manrope, тонкие линейные иконки. Карточки — на фоне страницы: --bg — страница, --bg2 — карточка.
   ===================================================================================== */
@font-face {
  font-family: "Manrope"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("/fonts/manrope-cyrillic.woff2?v=1") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Manrope"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("/fonts/manrope-latin.woff2?v=1") 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;
}
:root, :root[data-theme="light"] {
  --bg: #f4f4f6; --bg2: #ffffff; --text: #111114; --hint: #86868e; --link: #6e5ce6; --danger: #e0483a;
  --accent: #6e5ce6; --accent-text: #ffffff;
  --pri: #111114; --pri-text: #ffffff;
  --line: rgba(17, 17, 20, .08);
  --soft: rgba(17, 17, 20, .05);
  --card-shadow: 0 1px 2px rgba(17, 17, 20, .04), 0 8px 24px rgba(17, 17, 20, .05);
  --float-shadow: 0 10px 40px rgba(17, 17, 20, .14);
  --radius: 18px; --radius-card: 22px;
}
:root[data-theme="dark"] {
  --bg: #0e0e10; --bg2: #18181b; --text: #f2f2f4; --hint: #8b8b93; --link: #a99cff; --danger: #ff8a7a;
  --accent: #a99cff; --accent-text: #0e0e10;
  --pri: #f2f2f4; --pri-text: #0e0e10;
  --line: rgba(255, 255, 255, .08);
  --soft: rgba(255, 255, 255, .06);
  --card-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
  --float-shadow: 0 10px 40px rgba(0, 0, 0, .5);
}
body {
  font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased; letter-spacing: -.005em;
}
h1, h2, h3, b, strong { letter-spacing: -.015em; }
:root[data-theme="dark"] .toast, .toast { background: var(--pri); color: var(--pri-text); font-weight: 600; box-shadow: var(--float-shadow); }

/* Линейные иконки */
svg.li { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; display: block; }

/* Шапки экранов: без полосы, крупнее заголовок */
.bar { border-bottom: 0; padding: 12px 14px 8px; }
.bar h1 { font-size: 21px; font-weight: 750; letter-spacing: -.03em; }
.icon { display: inline-flex; align-items: center; justify-content: center; color: var(--text); width: 40px; height: 40px; }
.icon:active { background: var(--soft); }

/* Карточки и списки */
.card { background: var(--bg2); border-radius: var(--radius-card); margin: 12px 14px; box-shadow: var(--card-shadow); }
.card h2 { font-size: 16px; font-weight: 700; letter-spacing: -.02em; }
.section-title { font-size: 12.5px; letter-spacing: .02em; text-transform: none; margin: 18px 20px 6px; }
.list li, .prof-row {
  background: var(--bg2); border: 0; border-radius: 16px; box-shadow: var(--card-shadow);
}
.list li { margin: 8px 14px 0; padding: 12px 16px; }
.list li:active, .prof-row:active { background: var(--bg2); }
.list li.empty-row { border: 1px dashed var(--line); box-shadow: none; background: transparent; }
.prof-row { width: calc(100% - 28px); margin: 10px 14px 0; padding: 11px 14px; }
.prof-icon { border-radius: 12px; background: var(--soft); }
.prof-section { margin: 24px 22px 0; font-size: 12.5px; letter-spacing: .02em; }
.avatar { background: var(--pri); color: var(--pri-text); }

/* Кнопки: главная — чёрная/белая, второстепенная — тихая */
.primary, .round-go, .composer button#send, .rec-send {
  background: var(--pri); color: var(--pri-text);
}
.primary { font-weight: 700; padding: 13px 18px; box-shadow: 0 6px 18px color-mix(in srgb, var(--pri) 18%, transparent); }
.secondary { background: var(--soft); color: var(--text); border: 0; font-weight: 600; }
.danger { border: 0; background: color-mix(in srgb, var(--danger) 12%, transparent); }
.chip { background: var(--soft); color: var(--text); font-weight: 500; }
.chip.active { background: var(--pri); color: var(--pri-text); }
.add-link, .chat-head small.in-project { color: var(--accent); }

/* Переключатели-вкладки */
.segmented { background: var(--soft); padding: 3px; }
.segmented button { color: var(--hint); font-weight: 600; }
.segmented button.active { background: var(--bg2); color: var(--text); box-shadow: 0 1px 3px rgba(0, 0, 0, .1); }
:root[data-theme="dark"] .segmented button.active { background: #2a2a2f; box-shadow: none; }
.card .segmented { background: var(--bg); }

/* Поля ввода */
.panel input[type=text], .panel textarea, .panel .field, .panel input[type=date], .panel input[type=time], .panel select.field,
.link-form input, .link-form select, .promo-row input, .card .prompt-area, .feedback-form textarea, .feedback-form input {
  background: var(--bg); border: 1px solid transparent; transition: border-color .2s, box-shadow .2s;
}
input:focus, textarea:focus, select:focus { outline: none; }
.panel .field:focus, .panel textarea:focus, .panel input[type=text]:focus, .link-form input:focus, .feedback-form textarea:focus {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent);
}
input[type=checkbox] { border: 1.6px solid color-mix(in srgb, var(--hint) 70%, transparent); background-color: transparent; }
input[type=checkbox]:checked { border-color: var(--pri); background-color: var(--pri); }
:root[data-theme="dark"] input[type=checkbox]:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5' fill='none' stroke='%230e0e10' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Шторки снизу */
.overlay { background: rgba(0, 0, 0, .4); backdrop-filter: blur(2px); }
.panel { background: var(--bg2); box-shadow: var(--float-shadow); padding-top: 26px; }
.panel::before {
  content: ""; position: absolute; top: 9px; left: 50%; width: 38px; height: 4px; margin-left: -19px;
  border-radius: 2px; background: var(--line);
}
.panel h2 { font-weight: 750; letter-spacing: -.025em; }
.panel .option { background: var(--bg); border: 0; border-radius: 14px; }
.panel .option.current { color: var(--text); box-shadow: inset 0 0 0 1.5px var(--pri); }

/* Плашки, задуманные «белым на белом» (с тонкой рамкой), — теперь карточки на сером фоне страницы */
.plan-import, .plan-tabs button, .day-tile, .task-row, .habit-chip, .en-option {
  background: var(--bg2); border: 1px solid transparent; box-shadow: var(--card-shadow);
}
.plan-import:active, .day-tile:active { background: var(--bg2); }
.day-tile { border-radius: 18px; }
.day-tile.past { background: color-mix(in srgb, var(--bg2) 55%, var(--bg)); box-shadow: none; }
.day-tile.today { border: 1.5px solid var(--pri); }
.day-tile.today .tile-week { color: var(--text); font-weight: 700; }
.day-tile.overdue { border: 1.5px solid color-mix(in srgb, var(--danger) 60%, transparent); }
.day-tile.someday { border: 1px dashed var(--line); box-shadow: none; background: transparent; }
.tile-date { letter-spacing: -.02em; }
.plan-tabs { background: var(--soft); border-radius: var(--pill); padding: 3px; gap: 3px; margin: 10px 14px 4px; }
.plan-tabs button { box-shadow: none; background: transparent; color: var(--hint); border: 0; }
.plan-tabs button.active { background: var(--bg2); color: var(--text); border: 0; box-shadow: 0 1px 3px rgba(0, 0, 0, .1); }
:root[data-theme="dark"] .plan-tabs button.active { background: #2a2a2f; box-shadow: none; }
.task-row { border-radius: 16px; }
.task-check { border-width: 1.6px; }

/* ---------- Чат ---------- */
.messages { padding: 14px 16px; gap: 10px; }
.msg { font-size: 15.5px; line-height: 1.5; }
.msg.user { background: var(--pri); color: var(--pri-text); border-radius: 20px 20px 6px 20px; padding: 10px 15px; }
/* Ответ ИИ — просто текст, без пузыря: читается как разговор, а не переписка */
.msg.assistant { background: transparent; padding: 4px 2px; max-width: 92%; border-radius: 0; }
.msg.member { background: var(--bg2); box-shadow: var(--card-shadow); border-radius: 20px 20px 20px 6px; }
.msg pre { background: var(--bg2); box-shadow: var(--card-shadow); }
.msg.user .file-chip { background: color-mix(in srgb, var(--pri-text) 18%, transparent); }
.msg .done-actions .chip { background: var(--bg2); box-shadow: var(--card-shadow); }
.typing span { background: var(--hint); width: 6px; height: 6px; }
.empty { color: var(--hint); }

.composer { align-items: center; gap: 6px; margin: 6px 12px 4px; padding: 5px; border-radius: 26px; background: var(--bg2); box-shadow: var(--card-shadow); }
:root:not([data-bg="plain"]) .composer { background: var(--bg2); backdrop-filter: none; }
.composer textarea { border: 0; background: transparent; padding: 10px 6px; min-height: 40px; font-size: 15.5px; }
.composer button { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; }
.composer button svg.li { width: 21px; height: 21px; }
.composer .attach, .composer .mic { background: transparent; color: var(--hint); }
.composer .attach:active, .composer .mic:active { background: var(--soft); }
.composer button#send svg.li { stroke-width: 2.1; }

/* ---------- Нижняя панель: тонкие иконки, мелкие подписи, линия над выбранным ---------- */
.tabs {
  margin: 0; padding: 10px 6px calc(8px + env(safe-area-inset-bottom)); border-radius: 0;
  background: var(--bg); border: 0; border-top: 1px solid var(--line); box-shadow: none;
}
:root:not([data-bg="plain"]) .tabs { background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(14px); }
.tabs button { position: relative; gap: 5px; padding: 2px 0 2px; color: var(--hint); }
.tabs button b { display: flex; height: 22px; align-items: center; }
.tabs button span {
  font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.tabs button[data-view="chat"] span { font-weight: 700; }
.tabs button.active, .tabs #more-btn.open { color: var(--text); }
.tabs button::before {
  content: ""; position: absolute; top: -11px; left: 50%; width: 24px; height: 2px; margin-left: -12px;
  border-radius: 1px; background: var(--text); transform: scaleX(0); transition: transform .3s cubic-bezier(.2, .9, .3, 1);
}
.tabs button.active::before { transform: scaleX(1); }
.tabs button.active { animation: none; }

/* Меню разделов: плитки с иконками */
.more-menu {
  left: 12px; right: 12px; bottom: calc(70px + env(safe-area-inset-bottom)); gap: 6px; padding: 8px;
  background: var(--bg2); border: 0; border-radius: 24px; box-shadow: var(--float-shadow);
  animation: menu-in .32s cubic-bezier(.2, .9, .3, 1); transform-origin: 20% 100%;
}
@keyframes menu-in { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
.more-menu button { background: transparent; padding: 12px 4px 10px; gap: 8px; font-size: 12.5px; font-weight: 600; border-radius: 16px; }
.more-menu button b {
  width: 46px; height: 46px; border-radius: 15px; background: var(--soft); display: flex; align-items: center; justify-content: center;
}
.more-menu button.active { box-shadow: none; color: var(--text); }
.more-menu button.active b { background: var(--pri); color: var(--pri-text); }
.more-menu button:active { opacity: 1; background: var(--soft); }
/* Плитки появляются волной */
.more-menu:not(.hidden) button { animation: tile-in .36s cubic-bezier(.2, .9, .3, 1) both; }
.more-menu button:nth-child(2) { animation-delay: .02s; } .more-menu button:nth-child(3) { animation-delay: .04s; }
.more-menu button:nth-child(4) { animation-delay: .06s; } .more-menu button:nth-child(5) { animation-delay: .08s; }
.more-menu button:nth-child(6) { animation-delay: .1s; } .more-menu button:nth-child(7) { animation-delay: .12s; }
.more-menu button:nth-child(8) { animation-delay: .14s; } .more-menu button:nth-child(9) { animation-delay: .16s; }
.more-menu button:nth-child(n+10) { animation-delay: .18s; }
@keyframes tile-in { from { opacity: 0; transform: translateY(10px) scale(.94); } to { opacity: 1; transform: none; } }

/* ---------- Движение: мягкие пружинистые нажатия и переходы ---------- */
button, .chip, .prof-row, .look-option, .deck-row, .day-tile, .list li, .card.tap {
  transition: transform .45s cubic-bezier(.2, .9, .3, 1.35), background-color .2s, color .2s, border-color .2s, box-shadow .25s, opacity .2s;
}
button:active:not(:disabled):not(.drag-handle), .prof-row:active, .day-tile:active, .list li:active {
  transform: scale(.96); transition-duration: .12s;
}
.primary:active:not(:disabled) { transform: scale(.97); opacity: 1; }
.tabs button:active:not(:disabled) { transform: scale(.9); }
.view.active { animation: view-in .42s cubic-bezier(.2, .9, .3, 1); }
/* Только сдвиг, без прозрачности: если анимация не запустится, экран всё равно виден */
@keyframes view-in { from { transform: translateY(14px); } to { transform: none; } }
.msg { animation: msg-in .45s cubic-bezier(.2, .9, .3, 1.2); transform-origin: 0 100%; }
.msg.user { transform-origin: 100% 100%; }
@keyframes msg-in { from { opacity: 0; transform: translateY(12px) scale(.96); } to { opacity: 1; transform: none; } }
.panel:not(.hidden) { animation: sheet-up .5s cubic-bezier(.2, .9, .25, 1); }
body[data-entering] .view.active .scroll > .card,
body[data-entering] .view.active .scroll > div > .card,
body[data-entering] .view.active .prof-row,
body[data-entering] .view.active .list li { animation: card-in .55s cubic-bezier(.2, .9, .3, 1) both; }
@keyframes card-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
body[data-entering] .view.active .prof-row:nth-of-type(2), body[data-entering] .view.active .list li:nth-child(2) { animation-delay: .04s; }
body[data-entering] .view.active .prof-row:nth-of-type(3), body[data-entering] .view.active .list li:nth-child(3) { animation-delay: .08s; }
body[data-entering] .view.active .prof-row:nth-of-type(4), body[data-entering] .view.active .list li:nth-child(4) { animation-delay: .12s; }
body[data-entering] .view.active .prof-row:nth-of-type(n+5), body[data-entering] .view.active .list li:nth-child(n+5) { animation-delay: .16s; }
/* Отмеченная галочка — с пружинкой */
input[type=checkbox]:checked { animation: check-pop .4s cubic-bezier(.2, .9, .3, 1.6); }
@keyframes check-pop { 0% { transform: scale(.6); } 100% { transform: scale(1); } }

/* ---------- Свет по краям экрана в такт музыке, когда «Музыка» не открыта ---------- */
.edge-glow {
  --beat: 0;
  position: fixed; inset: 0; z-index: 24; pointer-events: none; opacity: 0; transition: opacity .8s ease;
  box-shadow:
    inset 0 0 calc(18px + var(--beat) * 46px + var(--hit, 0) * 26px) calc(var(--beat) * 6px)
      color-mix(in srgb, color-mix(in srgb, var(--vibe1, var(--accent)) calc(var(--mix-a, 1) * 100%), var(--vibe3, var(--vibe1, var(--accent)))) 85%, transparent),
    inset 0 0 calc(60px + var(--beat) * 90px) 0
      color-mix(in srgb, color-mix(in srgb, var(--vibe2, var(--accent)) calc(var(--mix-b, 1) * 100%), var(--vibe3, var(--vibe2, var(--accent)))) 45%, transparent);
  border-radius: 0;
}
/* Без плавного перехода яркости — он сдвигал свет на четверть секунды позже музыки; появляется короткой анимацией */
.edge-glow.on {
  opacity: calc(.35 + var(--beat) * .65); transition: none; animation: edge-in .4s ease;
}
@keyframes edge-in { from { opacity: 0; } }
/* Во время записи голосового — свет откликается на голос */
.edge-glow.voice {
  opacity: calc(.3 + var(--beat) * .7);
  box-shadow:
    inset 0 0 calc(16px + var(--beat) * 50px) calc(var(--beat) * 8px) color-mix(in srgb, #ff5a7a 80%, transparent),
    inset 0 0 calc(70px + var(--beat) * 90px) 0 color-mix(in srgb, var(--accent) 50%, transparent);
}

/* ---------- Запись голосового: живые полоски, пульс и свет ---------- */
.recorder {
  --level: 0;
  margin: 6px 12px 4px; padding: 5px; gap: 10px; border: 0; border-radius: 26px; background: var(--bg2);
  box-shadow: var(--card-shadow), 0 0 calc(var(--level) * 34px) calc(var(--level) * 4px) color-mix(in srgb, #ff5a7a 45%, transparent);
  animation: rec-in .4s cubic-bezier(.2, .9, .3, 1.3);
}
@keyframes rec-in { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
.recorder button { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; }
.rec-cancel { background: var(--soft); color: var(--hint); }
.rec-dot { width: 9px; height: 9px; background: #ff5a7a; box-shadow: 0 0 0 calc(var(--level) * 7px) color-mix(in srgb, #ff5a7a 30%, transparent); animation: none; transition: box-shadow .08s linear; }
.rec-time { font-size: 15px; font-weight: 700; min-width: 38px; }
.rec-wave { flex: 1; min-width: 0; height: 32px; display: flex; align-items: center; gap: 3px; overflow: hidden; justify-content: flex-end; }
.rec-wave i {
  flex: none; width: 3px; height: 4px; border-radius: 2px; background: var(--text); opacity: .85;
  transition: height .08s linear;
}
.rec-send { position: relative; }
.rec-send::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--pri);
  opacity: calc(.15 + var(--level) * .6); transform: scale(calc(1 + var(--level) * .35)); transition: transform .08s linear, opacity .08s linear;
}

/* Анимации выключены — без движения и без света */
:root[data-motion="off"] .edge-glow { display: none; }

/* ---------- Репетитор: решаем вместе, тесты, карта знаний ---------- */
#study-tabs button { font-size: 13px; padding: 7px 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.link-btn { border: 0; background: none; padding: 6px 4px; color: var(--hint); font-size: 13px; font-weight: 600; cursor: pointer; }
.tutor-card p.small { margin: -2px 0 10px; }
.tutor-card .field {
  width: 100%; margin-bottom: 10px; padding: 12px 14px; border-radius: 14px; border: 1px solid transparent;
  background: var(--bg); color: var(--text); font: inherit; outline: none; resize: vertical;
}
.tutor-card .field:focus { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.tutor-actions { display: flex; gap: 8px; }
.tutor-actions button { flex: 1; min-width: 0; padding: 12px 10px; }
.tutor-levels { margin: 0 0 10px; }
.tutor-hint { margin: 2px 22px 0; }
.tutor-progress { height: 4px; border-radius: 2px; background: var(--soft); overflow: hidden; margin: 6px 0 2px; }
.tutor-progress i { display: block; height: 100%; border-radius: 2px; background: var(--accent); transition: width .5s cubic-bezier(.2, .9, .3, 1); }
.tutor-task-text { margin: 4px 0 10px; font-size: 17px; font-weight: 600; letter-spacing: -.01em; white-space: pre-wrap; }

/* Шаги решения: линия слева, номера в кружках, текущий шаг — карточкой */
.tutor-steps { position: relative; margin: 4px 14px 0; padding-left: 2px; display: flex; flex-direction: column; gap: 10px; }
.tutor-step { display: flex; gap: 12px; animation: card-in .45s cubic-bezier(.2, .9, .3, 1) both; }
.ts-num {
  flex: none; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; background: var(--soft); color: var(--hint); margin-top: 2px;
}
.tutor-step.solved .ts-num { background: var(--pri); color: var(--pri-text); }
.tutor-step.current .ts-num { background: var(--accent); color: var(--accent-text); }
.ts-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tutor-step.done .ts-body { padding: 4px 0 6px; }
.ts-step { font-size: 16px; font-weight: 600; overflow-wrap: anywhere; }
.ts-why { font-size: 13px; }
.ts-praise { font-size: 13px; font-weight: 600; color: #16a34a; }
.ts-praise:empty { display: none; }
.tutor-step.current .ts-body { background: var(--bg2); border-radius: 18px; padding: 14px; box-shadow: var(--card-shadow); gap: 8px; }
.ts-ask { margin: 0; font-weight: 600; }
.ts-try { display: flex; gap: 8px; align-items: center; }
.ts-try .field { flex: 1; min-width: 0; margin: 0; padding: 11px 14px; border-radius: 14px; background: var(--bg); border: 1px solid transparent; color: var(--text); font: inherit; }
.ts-feedback { margin: 0; color: var(--text); }
.ts-feedback:empty { display: none; }
.ts-feedback.bad { color: var(--danger); }
.ts-show { align-self: flex-start; }
.tutor-answer-text { font-size: 20px; font-weight: 750; margin: 4px 0 4px; letter-spacing: -.02em; }
.tutor-answer .primary { margin-top: 8px; }
.tutor-quit { display: block; margin: 6px auto 20px; }

/* Тест */
.tq-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tq-head small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tq-q { margin: 14px 0 12px; font-size: 19px; line-height: 1.35; letter-spacing: -.02em; }
.tq-options { display: flex; flex-direction: column; gap: 8px; }
.tq-option {
  text-align: left; padding: 13px 16px; border-radius: 14px; border: 1.5px solid transparent; background: var(--bg);
  color: var(--text); font-size: 15px; font-weight: 500;
}
.tq-option.right { border-color: #16a34a; background: color-mix(in srgb, #16a34a 12%, var(--bg)); animation: check-pop .4s cubic-bezier(.2, .9, .3, 1.6); }
.tq-option.wrong { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, var(--bg)); animation: shake .35s; }
.tq-option:disabled { opacity: 1; }
@keyframes shake { 0%, 100% { transform: none; } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.tq-why { margin: 12px 2px 0; color: var(--hint); }
.tq-why:empty { display: none; }
.tq-next { margin-top: 12px; }
.tutor-result h2 { font-size: 34px; letter-spacing: -.03em; margin-bottom: 2px; }
.tutor-wrong { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 14px; }
.tutor-wrong-row { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 14px; background: var(--bg); }
.tutor-wrong-row small { color: var(--hint); }

/* Карта знаний */
.skill-group { margin-top: 10px; }
.skill-title { display: block; font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--hint); margin-bottom: 6px; text-transform: uppercase; }
.skill-group.shaky .skill-title { color: var(--danger); }
.skill-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.skill-chip {
  position: relative; overflow: hidden; border: 0; border-radius: 999px; padding: 8px 14px; background: var(--bg);
  color: var(--text); font-size: 13.5px; font-weight: 600;
}
.skill-chip span { position: relative; z-index: 1; }
.skill-chip i { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--accent); border-radius: 2px; }
.skill-group.shaky .skill-chip i { background: var(--danger); }
.skill-group.know .skill-chip i { background: #16a34a; }

/* «Что дальше»: слабая тема из карты знаний */
.tutor-next { margin: 14px 14px 0; }
.tn-who { display: flex; align-items: center; gap: 6px; margin: 0 6px 6px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--danger); }
.tn-who .li { width: 14px; height: 14px; }
.tutor-next .tn-card { margin: 0; display: flex; flex-direction: column; gap: 4px; cursor: pointer; transition: transform .2s; }
.tutor-next .tn-card:active { transform: scale(.98); }
.tutor-next .tn-card.busy { opacity: .6; }
.tn-card b { font-size: 17px; letter-spacing: -.02em; }
.tn-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.tn-tags span { font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--soft); color: var(--hint); }

/* Картинки репетитора: график и схема */
.tutor-figure { margin: 6px 0 4px; padding: 10px; border-radius: 16px; background: var(--bg); }
.tutor-figure svg { display: block; width: 100%; max-width: 440px; height: auto; margin: 0 auto; }
.tutor-figure figcaption { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; font-size: 12.5px; color: var(--hint); }
.tutor-figure figcaption span { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; color: var(--text); }
.tutor-figure figcaption i { width: 12px; height: 3px; border-radius: 2px; }
.tutor-figure figcaption small { flex-basis: 100%; }
.tutor-plot .axis { stroke: var(--line); stroke-width: 1.2; }
.tutor-plot .curve { fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.tutor-plot .tick, .tutor-diagram .edge-label { fill: var(--hint); font-size: 10.5px; font-family: inherit; }
.tutor-diagram .node { fill: var(--bg2); stroke: color-mix(in srgb, var(--accent) 55%, transparent); stroke-width: 1.4; }
.tutor-diagram .node-label { fill: var(--text); font-size: 12px; font-weight: 600; font-family: inherit; }
.tutor-diagram .edge { stroke: var(--hint); stroke-width: 1.4; }
.tutor-diagram .arrow { fill: var(--hint); }

/* Объяснение темы */
.explain-intro { margin: 2px 0 10px; font-size: 16px; line-height: 1.5; }
.explain-block p, .explain-example p { margin: 0; line-height: 1.55; white-space: pre-wrap; }
.explain-example { padding: 10px 0; border-top: 1px solid var(--line); }
.explain-example:first-of-type { border-top: 0; padding-top: 0; }
.explain-example b { display: block; white-space: pre-wrap; }
.explain-example .link-btn { padding-left: 0; color: var(--accent); }
.explain-example p { display: none; }
.explain-example.open p { display: block; }
.explain-check + .explain-check { margin-top: 16px; }
.ec-q { margin: 0 0 8px; font-weight: 600; }
.explain-actions { margin: 4px 14px 20px; }

/* Лекции */
.lecture-add { display: flex; gap: 8px; }
.lecture-add .field { flex: 1; min-width: 0; margin: 0; padding: 11px 14px; border-radius: 14px; background: var(--bg); border: 1px solid transparent; color: var(--text); font: inherit; outline: none; }
.lecture-add button { width: auto; flex: none; padding: 11px 16px; }
.lecture-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.lecture-list:empty { display: none; }
.lecture-row { display: flex; gap: 10px; align-items: center; text-align: left; padding: 6px; border: 0; border-radius: 14px; background: var(--bg); color: var(--text); }
.lecture-row img { flex: none; width: 88px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; background: var(--soft); }
.lecture-row span { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lecture-row b { font-size: 14px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.lecture-back { margin: 8px 12px 0; }
.lecture-frame { margin: 8px 14px 0; border-radius: 18px; overflow: hidden; background: #000; aspect-ratio: 16 / 9; box-shadow: var(--card-shadow); scroll-margin-top: 10px; }
.lecture-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.lecture-summary, .lecture-answer { margin: 0; line-height: 1.55; white-space: pre-wrap; }
.lecture-answer { margin-top: 12px; }
.time-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.time-chips.column { flex-direction: column; margin-top: 0; }
.time-chip { display: inline-flex; align-items: baseline; gap: 8px; border: 0; border-radius: 12px; padding: 8px 12px; background: var(--bg); color: var(--text); text-align: left; font-size: 14px; }
.time-chip b { flex: none; font-variant-numeric: tabular-nums; color: var(--accent); font-weight: 700; }
.time-chip span:empty { display: none; }


/* ИИ-тренер */
.coach-card .coach-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
.coach-card .coach-head small, .coach-today small { color: var(--hint); font-size: 12px; }
.coach-card .coach-head b { font-size: 17px; }
.coach-today { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; margin-bottom: 10px; border-radius: 16px; background: var(--bg); }
.coach-today b { font-size: 19px; }
.coach-light { margin-bottom: 10px; padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, #e8891d 14%, var(--bg)); font-size: 14px; }
.coach-light p { margin: 0 0 6px; }
.coach-light .option { display: flex; gap: 8px; align-items: center; font-size: 13px; }
.coach-chips { display: flex; flex-wrap: wrap; margin-top: 10px; }
.coach-card .primary + .coach-chips { margin-top: 10px; }
.prog-note { white-space: pre-wrap; }
.prog-day { margin: 12px 0; }
.prog-day h3 { margin: 0 0 6px; font-size: 14px; color: var(--hint); }
.prog-ex { display: flex; flex-direction: column; gap: 2px; padding: 9px 14px; margin-bottom: 6px; border-radius: 14px; background: var(--bg2); }
.prog-ex small { color: var(--hint); font-size: 13px; }
.prog-ex.tap { cursor: pointer; }
.prog-ex.tap:active { opacity: .7; }
.prog-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
.prog-actions .primary { margin-bottom: 4px; }
.panel .equip.hidden { display: none; }

/* Тренировка по программе — на весь экран, панели и подтверждения поверх неё */
.gym {
  position: fixed; inset: 0; z-index: 19; display: flex; flex-direction: column; background: var(--bg); color: var(--text);
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
}
.gym-top { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.gym-progress { flex: 1; display: flex; gap: 4px; }
.gym-progress i { flex: 1; height: 4px; border-radius: 4px; background: var(--bg2); }
.gym-progress i.on { background: #3fb68b; }
.gym-progress i.now { background: var(--accent); }
.gym-clock { font-variant-numeric: tabular-nums; color: var(--hint); font-size: 14px; min-width: 42px; text-align: right; }
.gym-body { flex: 1; overflow-y: auto; padding: 4px 16px 16px; }
.gym-body h2 { margin: 4px 0; font-size: 24px; }
.gym-target { margin: 0 0 10px; color: var(--hint); }
.gym-tip { margin-bottom: 12px; padding: 10px 14px; border-radius: 14px; background: var(--bg2); }
.gym-tip summary { cursor: pointer; font-weight: 600; color: var(--accent); }
.gym-tip p { margin: 8px 0; }
.gym-sets { display: flex; flex-direction: column; gap: 8px; }
.gym-set { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 14px; border-radius: var(--pill); background: var(--bg2); }
.gym-set .n { width: 20px; color: var(--hint); font-weight: 700; }
.gym-set .field { width: 74px; min-height: 40px; padding: 6px 10px; text-align: center; font-size: 17px; border-radius: var(--pill); border: 1px solid var(--line); background: var(--bg); color: var(--text); }
.gym-set span { color: var(--hint); font-size: 14px; }
.gym-set .gym-what { flex: 1; color: var(--text); font-size: 16px; }
.gym-check {
  margin-left: auto; flex: none; width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--hint);
  background: none; color: var(--hint); font-size: 20px; font-weight: 700;
}
.gym-set.done { background: color-mix(in srgb, #3fb68b 16%, var(--bg2)); }
.gym-set.done .gym-check { background: #3fb68b; border-color: #3fb68b; color: #fff; }
.gym-add { align-self: flex-start; margin-top: 2px; }
.gym-feel { margin-top: 14px; }
.gym-feel p { margin: 0 0 6px; font-weight: 600; }
.gym-rest {
  display: flex; align-items: center; gap: 8px; margin: 0 12px 8px; padding: 10px 10px 10px 18px; border-radius: var(--pill);
  background: var(--accent); color: var(--accent-text);
}
.gym-rest b { flex: 1; font-size: 22px; font-variant-numeric: tabular-nums; }
.gym-rest .chip { margin: 0; background: rgb(255 255 255 / .22); color: inherit; }
.gym-nav { display: flex; gap: 8px; padding: 0 12px 12px; }
.gym-nav .gym-prev { width: 64px; flex: none; }
.gym-nav .primary { flex: 1; }
.gym-done { text-align: center; padding-top: 30px; }
.gym-done .big { font-size: 64px; }
.gym-changes { margin: 16px auto; max-width: 340px; padding: 12px 16px; border-radius: 16px; background: var(--bg2); text-align: left; }
.gym-changes:empty { display: none; }
.gym-changes p { margin: 6px 0 0; }

.macro-bonus { margin: 2px 0 6px; }

/* Доски (тест, под ноутбук) */
.board-top { display: flex; gap: 8px; padding: 12px 12px 0; }
.board-top .primary, .board-top .secondary { width: auto; margin: 0; }
.board-intro { margin: 10px 16px 0; }
.board-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.board-card { position: relative; display: flex; flex-direction: column; gap: 4px; min-height: 96px; cursor: pointer; }
.board-card b { font-size: 16px; overflow-wrap: anywhere; padding-right: 36px; }
.board-card-buttons { position: absolute; top: 10px; right: 10px; }
.board-card-buttons .chip { margin: 0; }
.board-empty { display: flex; flex-direction: column; gap: 6px; }
.miro-steps { padding-left: 20px; font-size: 14px; line-height: 1.45; }
.miro-steps li { margin-bottom: 6px; }
.miro-log p { margin: 4px 0; }
.bd {
  position: fixed; inset: 0; z-index: 19; display: flex; flex-direction: column; background: var(--bg); color: var(--text);
  user-select: none; -webkit-user-select: none; font-family: inherit;
}
.bd button { font-family: inherit; }
.bd-top { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--line); background: var(--bg); z-index: 5; }
.bd-title { flex: 1; min-width: 0; max-width: 380px; padding: 6px 12px; border: 1px solid transparent; border-radius: 10px; background: none; color: var(--text); font: inherit; font-weight: 700; font-size: 17px; }
.bd-title:hover, .bd-title:focus { border-color: var(--line); outline: none; }
.bd-status { margin-right: auto; white-space: nowrap; }
.bd-actions, .bd-zoom { display: flex; align-items: center; gap: 2px; padding: 3px; border-radius: 12px; background: var(--bg2); }
.bd-actions button, .bd-zoom button { min-width: 32px; height: 32px; border: 0; border-radius: 9px; background: none; color: var(--text); font-size: 16px; cursor: pointer; }
.bd-actions button:hover, .bd-zoom button:hover { background: var(--bg); }
.bd-zoom button:disabled { opacity: .35; cursor: default; }
.bd-pct { min-width: 48px; text-align: center; font-size: 13px; font-variant-numeric: tabular-nums; }
.bd-search {
  position: absolute; top: 62px; right: 14px; z-index: 6; display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 12px;
  border-radius: 12px; background: var(--bg); box-shadow: 0 4px 18px rgb(0 0 0 / .14);
}
.bd-search input { width: 220px; border: 0; outline: none; background: none; color: var(--text); font: inherit; }
.bd-search button { border: 0; background: none; color: var(--hint); cursor: pointer; }
.bd-tools {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%); z-index: 5; display: flex; flex-direction: column; gap: 2px;
  padding: 6px; border-radius: 14px; background: var(--bg); box-shadow: 0 4px 18px rgb(0 0 0 / .14);
}
.bd-tools button { width: 40px; height: 40px; border: 0; border-radius: 10px; background: none; color: var(--text); font-size: 18px; cursor: pointer; }
.bd-tools button:hover { background: var(--bg2); }
.bd-tools button.on { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.bd-props {
  position: absolute; top: 62px; left: 50%; transform: translateX(-50%); z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 3px;
  max-width: calc(100% - 140px); padding: 6px 8px; border-radius: 14px; background: var(--bg); box-shadow: 0 4px 18px rgb(0 0 0 / .14);
}
.bd-props button { min-width: 30px; height: 30px; padding: 0 6px; border: 0; border-radius: 8px; background: none; color: var(--text); font-size: 14px; font-weight: 600; cursor: pointer; }
.bd-props button:hover { background: var(--bg2); }
.bd-props button.on { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); }
.bd-props .bd-swatch-btn { min-width: 24px; width: 24px; height: 24px; padding: 0; margin: 0 3px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .2); }
.bd-props .bd-ink-btn { font-weight: 800; text-decoration: underline; text-decoration-thickness: 3px; }
.bd-props .bd-b { font-weight: 800; }
.bd-props .bd-i { font-style: italic; font-family: Georgia, serif; }
.bd-props .bd-u { text-decoration: underline; }
.bd-props .bd-s { text-decoration: line-through; }
.bd-sep { width: 1px; height: 22px; margin: 0 4px; background: var(--line); }
.bd-popover {
  position: absolute; z-index: 7; padding: 8px; border-radius: 12px; background: var(--bg); box-shadow: 0 6px 24px rgb(0 0 0 / .18);
  display: flex; flex-direction: column; gap: 6px;
}
.bd-swatches { display: grid; grid-template-columns: repeat(6, 26px); gap: 6px; }
.bd-swatch { width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .15); }
.bd-swatch.on { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent); }
.bd-pop-row { display: flex; gap: 4px; flex-wrap: wrap; }
.bd-pop-row button, .bd-pop-wide, .bd-shape-grid button {
  min-width: 34px; height: 32px; padding: 0 8px; border: 0; border-radius: 8px; background: var(--bg2); color: var(--text); cursor: pointer; font-size: 14px;
}
.bd-pop-row button.on, .bd-shape-grid button.on { background: var(--accent); color: var(--accent-text); }
.bd-shape-grid { display: grid; grid-template-columns: repeat(5, 38px); gap: 4px; }
.bd-shape-grid button { font-size: 20px; padding: 0; height: 38px; }
.bd-card-tags { display: flex; gap: 8px; margin-bottom: 12px; }
.bd-templates { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.bd-templates button { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 8px; border: 0; border-radius: 14px; background: var(--bg2); color: var(--text); cursor: pointer; font: inherit; }
.bd-templates button b { font-size: 28px; }
.bd-stage {
  position: relative; flex: 1; overflow: hidden; touch-action: none; cursor: default;
  background-color: var(--bg2); background-image: radial-gradient(circle, color-mix(in srgb, var(--hint) 45%, transparent) 1px, transparent 1.2px);
}
.bd-stage[data-tool="hand"], .bd-stage.space { cursor: grab; }
.bd-stage.panning { cursor: grabbing; }
.bd-stage[data-tool="eraser"] { cursor: cell; }
.bd-stage:not([data-tool="select"]):not([data-tool="hand"]):not([data-tool="eraser"]):not(.space) { cursor: crosshair; }
.bd-world { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; }
.bd-layer { position: absolute; left: 0; top: 0; }
.bd-svg { position: absolute; left: -50000px; top: -50000px; width: 100000px; height: 100000px; overflow: visible; pointer-events: none; z-index: 100000000; }
.bd-labels { position: absolute; left: 0; top: 0; z-index: 100000001; }
.bd-guides { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 4; }
.bd-guides line { stroke: #f03e3e; stroke-width: 1; stroke-dasharray: 4 3; }
.bd-hitline { fill: none; stroke: transparent; pointer-events: stroke; cursor: pointer; stroke-linecap: round; }
.bd-line { fill: none; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.bd-stroke path:not(.bd-hitline):not(.bd-line), .bd-stroke circle { pointer-events: none; }
.bd-stroke.sel .bd-hitline { stroke: color-mix(in srgb, var(--accent) 30%, transparent); }
.bd-stroke.found .bd-hitline { stroke: rgb(255 212 59 / .6); }
.bd-arrow-label {
  position: absolute; transform: translate(-50%, -50%); padding: 2px 8px; border-radius: 6px; background: #fff; font-size: 14px;
  white-space: pre; cursor: pointer; box-shadow: 0 0 0 1px rgb(0 0 0 / .06);
}
.bd-item { position: absolute; box-sizing: border-box; display: flex; align-items: center; justify-content: center; }
.bd-item.sel { outline: 2px solid var(--accent); outline-offset: 2px; }
.bd-item.found { box-shadow: 0 0 0 6px rgb(255 212 59 / .75); }
.bd-label { position: relative; width: 100%; max-height: 100%; padding: 12px 14px; overflow: hidden; white-space: pre-wrap; overflow-wrap: anywhere; text-align: center; line-height: 1.3; outline: none; }
.bd-label.editing { overflow: auto; cursor: text; user-select: text; -webkit-user-select: text; }
.bd-sticky { box-shadow: 0 3px 10px rgb(0 0 0 / .14); border-radius: 3px; }
.bd-item.bd-text .bd-label { text-align: left; padding: 4px 6px; }
.bd-round { border-radius: 18px; }
.bd-ellipse { border-radius: 50%; }
.bd-shape > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.bd-diamond .bd-label, .bd-triangle .bd-label, .bd-star .bd-label { padding: 22% 24% 12%; }
.bd-hexagon .bd-label, .bd-parallelogram .bd-label { padding: 12px 22%; }
.bd-rarrow .bd-label { padding: 12px 34% 12px 10px; }
.bd-cylinder .bd-label { padding-top: 26%; }
.bd-image img { width: 100%; height: 100%; object-fit: fill; border-radius: 4px; pointer-events: none; }
.bd-frame { align-items: flex-start; border: 1px solid #dee2e6; border-radius: 2px; }
.bd-frame-title {
  position: absolute; left: 0; bottom: 100%; padding: 0 2px 4px; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  font-size: calc(15px * var(--inv, 1)); font-weight: 600; color: var(--hint); cursor: pointer; outline: none;
}
.bd-frame-title.editing { overflow: visible; cursor: text; user-select: text; -webkit-user-select: text; background: #fff; }
.bd-frame.sel { outline-offset: 0; }
.bd-card {
  flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 4px; padding: 10px 12px 10px 16px; background: #fff;
  border: 1px solid #dee2e6; border-radius: 10px; box-shadow: 0 2px 6px rgb(0 0 0 / .06); color: #1d1d1f;
}
.bd-card::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 4px; border-radius: 0 4px 4px 0; background: var(--tag); }
.bd-card-title { font-weight: 700; font-size: 16px; overflow-wrap: anywhere; }
.bd-card-desc { color: #6b7280; font-size: 13px; white-space: pre-wrap; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.bd-card-due { align-self: flex-start; margin-top: auto; padding: 2px 8px; border-radius: 999px; background: #f1f3f5; font-size: 12px; }
.bd-comment {
  width: 34px !important; height: 34px !important; transform: scale(var(--inv, 1)); transform-origin: 0 0; color: #f59f00;
  background: #fff; border-radius: 50% 50% 50% 4px; box-shadow: 0 2px 8px rgb(0 0 0 / .2); cursor: pointer;
}
.bd-link, .bd-lock {
  position: absolute; top: -10px; right: -10px; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgb(0 0 0 / .25); font-size: 12px; transform: scale(var(--inv, 1)); cursor: pointer;
}
.bd-lock { right: auto; left: -10px; cursor: default; }
.bd-handle {
  position: absolute; right: -9px; bottom: -9px; width: 16px; height: 16px; border-radius: 50%; transform: scale(var(--inv, 1));
  background: var(--bg); border: 2px solid var(--accent); cursor: nwse-resize; z-index: 2;
}
.bd-marquee { position: absolute; border: 1px solid var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); pointer-events: none; }
.bd-marquee.frame { border: 2px dashed #868e96; background: rgb(255 255 255 / .4); }
.bd-hint { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); padding: 5px 12px; border-radius: 999px; background: var(--bg); box-shadow: 0 2px 10px rgb(0 0 0 / .08); white-space: nowrap; pointer-events: none; }
.bd.presenting .bd-top, .bd.presenting .bd-tools, .bd.presenting .bd-hint, .bd.presenting .bd-props, .bd.presenting .bd-search { display: none; }
.bd.presenting .bd-stage { background-image: none; }
.bd-present-bar {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 6; display: flex; align-items: center; gap: 10px;
  padding: 6px 10px; border-radius: 999px; background: rgb(0 0 0 / .75); color: #fff; font-size: 14px;
}
.bd-present-bar button { border: 0; background: none; color: #fff; font-size: 16px; cursor: pointer; padding: 4px 10px; }/* Иконки доски: тонкие линии цвета текста */
.bd-ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; display: block; margin: auto; }
.bd-ic .fill { fill: currentColor; }
.bd-ic .fill.soft { fill-opacity: .25; }
.bd-ic .thick { stroke-width: 2.6; }
.bd-ic .thin { stroke-width: 1; }
.bd-ic .thick3 { stroke-width: 3.4; }
.bd-tools button, .bd-actions button, .bd-zoom button, .bd-props button, .bd-pop-row button, .bd-shape-grid button, .bd-back { display: inline-flex; align-items: center; justify-content: center; }
.bd-tools .bd-ic { width: 22px; height: 22px; }
.bd-back .bd-ic { width: 22px; height: 22px; }
.bd-tools button.on .bd-ic { stroke-width: 1.9; }
.bd-shape-grid .bd-ic { width: 24px; height: 24px; }
.bd-comment .bd-ic { width: 20px; height: 20px; fill: currentColor; fill-opacity: .2; }
.bd-link .bd-ic, .bd-lock .bd-ic { width: 13px; height: 13px; stroke-width: 2; color: #1d1d1f; }
/* Меню на неделю и список покупок */
.menu-promo { display: flex; flex-direction: column; gap: 4px; width: calc(100% - 24px); text-align: left; border: 0; color: var(--text); font: inherit; }
.menu-hero { text-align: center; }
.menu-hero-icon { font-size: 48px; }
.menu-hero h2 { font-size: 20px; margin: 6px 0; }
.menu-head h2 { font-size: 19px; margin: 2px 0 8px; }
.menu-sum { display: flex; align-items: baseline; gap: 8px; }
.menu-sum b { font-size: 24px; }
.menu-note { margin: 8px 0 0; }
.menu-warn { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; padding: 8px 12px; border-radius: 14px; background: color-mix(in srgb, #e8891d 15%, var(--bg)); font-size: 14px; }
.menu-warn span { flex: 1; min-width: 160px; }
.menu-warn .chip { margin: 0; }
.menu-tabs { margin-top: 4px; }
.menu-days, .menu-stores { display: flex; gap: 6px; overflow-x: auto; padding: 8px 12px 2px; scrollbar-width: none; }
.menu-days::-webkit-scrollbar, .menu-stores::-webkit-scrollbar { display: none; }
.menu-days .chip, .menu-stores .chip { flex: none; margin: 0; white-space: nowrap; }
.menu-days .chip.today:not(.active) { box-shadow: inset 0 0 0 1.5px var(--accent); }
.menu-stores .chip { display: flex; flex-direction: column; align-items: flex-start; padding: 6px 14px; border-radius: 14px; }
.menu-stores .chip small { font-size: 11px; opacity: .8; }
.menu-meal { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--bg); }
.menu-meal:first-of-type { border-top: 0; }
.menu-meal-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; cursor: pointer; }
.menu-meal-main small { color: var(--accent); font-size: 12px; font-weight: 600; text-transform: capitalize; }
.menu-meal-main b { overflow-wrap: anywhere; }
.menu-meal-buttons { display: flex; gap: 4px; flex: none; }
.menu-meal-buttons .chip { margin: 0; }
.menu-ings { margin: 0 0 6px; padding-left: 20px; }
.menu-steps ol { padding-left: 20px; }
.menu-steps li, .menu-ings li { margin-bottom: 6px; }
.menu-shop-actions { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 12px 0; }
.menu-shop-actions .chip { margin: 0; }
.menu-item { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--bg); }
.menu-item input { flex: none; }
.menu-item-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.menu-item-main b { font-weight: 500; overflow-wrap: anywhere; }
.menu-item.done .menu-item-main b { text-decoration: line-through; color: var(--hint); }
.menu-price { flex: none; color: var(--hint); font-size: 13px; white-space: nowrap; }
.menu-item .menu-find { margin: 0; padding: 4px 8px; }
.menu-budget { display: flex; align-items: center; gap: 8px; }
.menu-budget .field { flex: 1; }
.menu-per-day { margin: 4px 0 0; }
.menu-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 12px 16px; }
.menu-actions .chip { margin: 0; }
.pad-note { margin: 4px 16px 12px; }

/* Английский: курс, урок и тренировка */
.en-head .en-head-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.en-goal, .en-streak { display: flex; flex-direction: column; }
.en-goal b, .en-streak b { font-size: 24px; }
.en-streak { align-items: flex-end; }
.en-goal small, .en-streak small { color: var(--hint); font-size: 12px; }
.en-bar { height: 8px; margin: 10px 0; border-radius: 999px; background: var(--bg); overflow: hidden; }
.en-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #3fb68b, var(--accent)); transition: width .4s; }
.en-head-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.en-head-chips .chip { margin: 0; }
.en-actions { display: flex; flex-direction: column; gap: 8px; padding: 0 12px; }
.en-big {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; padding: 14px 18px; border: 0;
  border-radius: 18px; background: var(--bg2); color: var(--text); text-align: left; font: inherit; cursor: pointer;
}
.en-big b { font-size: 17px; }
.en-big small { color: var(--hint); font-size: 12px; }
.en-big.primary-ish { background: var(--accent); color: var(--accent-text); }
.en-big.primary-ish small { color: color-mix(in srgb, var(--accent-text) 75%, transparent); }
.en-big.warn { background: color-mix(in srgb, #e8891d 16%, var(--bg2)); }
.en-big:disabled { opacity: .55; cursor: default; }
.en-more { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 12px 0; }
.en-more .chip { margin: 0; }
.en-levels { display: flex; gap: 6px; overflow-x: auto; padding: 12px 12px 0; scrollbar-width: none; }
.en-levels::-webkit-scrollbar { display: none; }
.en-levels .chip { flex: none; margin: 0; }
.en-lesson-row {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 0; border: 0; border-top: 1px solid var(--bg);
  background: none; color: var(--text); text-align: left; font: inherit; cursor: pointer;
}
.en-unit h2 + .en-lesson-row { border-top: 0; }
.en-lesson-row .en-ico { width: 24px; text-align: center; }
.en-lesson-row .en-l-title { flex: 1; min-width: 0; }
.en-lesson-row small { color: var(--hint); font-size: 12px; white-space: nowrap; }
.en-lesson-row.next .en-l-title { font-weight: 700; }
.en-lesson-row.next small { color: var(--accent); font-weight: 600; }
.en-back { margin: 12px 12px 0; }
.en-theory h2 { margin: 2px 0 10px; font-size: 20px; }
.en-theory h3 { margin: 16px 0 6px; font-size: 15px; }
.en-theory p { margin: 6px 0; line-height: 1.5; }
.en-rule { margin: 8px 0; padding: 10px 14px; border-radius: 12px; background: var(--bg); font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.en-example { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px dashed color-mix(in srgb, var(--hint) 30%, transparent); }
.en-example > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.en-example b { font-weight: 600; }
.en-example small, .en-example span { color: var(--hint); font-size: 13px; }
.en-word span { color: var(--text); font-size: 14px; }
.en-say { flex: none; margin: 0; padding: 4px 9px; }
.en-warn { padding: 8px 12px; border-radius: 12px; background: color-mix(in srgb, var(--danger) 10%, var(--bg)); font-size: 14px; }
.en-warn::before { content: "⚠️ "; }
.en-tipline { padding: 8px 12px; border-radius: 12px; background: color-mix(in srgb, #3fb68b 12%, var(--bg)); font-size: 14px; }
.en-tipline::before { content: "💡 "; }
.en-li { padding-left: 14px; position: relative; }
.en-li::before { content: "•"; position: absolute; left: 2px; color: var(--accent); }
.en-counts { display: flex; flex-wrap: wrap; gap: 6px; }
.en-counts .chip, .en-counts .primary-chip { margin: 0; min-width: 52px; }
.primary-chip { display: inline-block; padding: 6px 14px; border: 0; border-radius: 999px; background: var(--accent); color: var(--accent-text); font-size: 14px; font-weight: 600; }
.en-nav { display: flex; justify-content: space-between; padding: 0 12px 16px; }
.en-nav .chip { margin: 0; }
/* Тренировка на весь экран */
.en-run { position: fixed; inset: 0; z-index: 19; display: flex; flex-direction: column; background: var(--bg); color: var(--text); padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); }
.en-run-top { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.en-run-bar { flex: 1; height: 8px; border-radius: 999px; background: var(--bg2); overflow: hidden; }
.en-run-bar i { display: block; height: 100%; border-radius: 999px; background: #3fb68b; transition: width .3s; }
.en-run-count { color: var(--hint); font-size: 14px; font-variant-numeric: tabular-nums; min-width: 44px; text-align: right; }
.en-run-body { flex: 1; overflow-y: auto; padding: 8px 18px 16px; }
.en-run-foot { display: flex; gap: 8px; padding: 0 12px 12px; }
.en-run-foot .secondary { flex: 0 0 auto; width: auto; padding: 12px 16px; }
.en-run-foot .primary { flex: 1; }
.en-run-wait { text-align: center; margin-top: 40%; }
.en-run-lesson { display: block; margin-bottom: 6px; }
.en-task { margin: 4px 0 8px; color: var(--hint); font-size: 14px; }
.en-prompt { margin: 0 0 16px; font-size: 21px; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.en-prompt small { display: block; margin-top: 6px; font-size: 14px; font-weight: 400; }
.en-gap { display: inline-block; min-width: 70px; padding: 0 6px; border-bottom: 2px solid var(--accent); color: var(--accent); text-align: center; }
.en-options { display: flex; flex-direction: column; gap: 8px; }
.en-option { width: 100%; padding: 13px 16px; border: 1.5px solid var(--line); border-radius: 14px; background: var(--bg); color: var(--text); text-align: left; font: inherit; font-size: 17px; cursor: pointer; }
.en-option.right { border-color: #3fb68b; background: color-mix(in srgb, #3fb68b 16%, var(--bg)); }
.en-option.wrong { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, var(--bg)); }
.en-answer { width: 100%; font-size: 18px !important; padding: 12px 14px !important; border-radius: 14px !important; border: 1.5px solid var(--line); background: var(--bg); color: var(--text); font: inherit; }
textarea.en-answer { min-height: 90px; resize: none; }
.en-answer.right { border-color: #3fb68b; }
.en-answer.wrong { border-color: var(--danger); }
.en-tile-line { display: flex; flex-wrap: wrap; gap: 6px; min-height: 56px; padding: 8px; border-radius: 14px; border: 1.5px dashed var(--line); margin-bottom: 12px; }
.en-tile-line.right { border-color: #3fb68b; border-style: solid; }
.en-tile-line.wrong { border-color: var(--danger); border-style: solid; }
.en-tile-pool { display: flex; flex-wrap: wrap; gap: 6px; }
.en-tile { padding: 9px 13px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--bg2); color: var(--text); font: inherit; font-size: 16px; cursor: pointer; }
.en-play { margin: 0 6px 0 0; }
.en-rec { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 12px; }
.en-mic { width: auto !important; padding: 16px 28px !important; font-size: 17px; }
.en-mic.recording { background: var(--danger); animation: blink 1.2s infinite; }
.en-feedback { margin-top: 16px; padding: 12px 16px; border-radius: 16px; }
.en-feedback.good { background: color-mix(in srgb, #3fb68b 15%, var(--bg)); }
.en-feedback.bad { background: color-mix(in srgb, var(--danger) 11%, var(--bg)); }
.en-feedback b { font-size: 17px; }
.en-feedback p { margin: 6px 0 0; }
.en-right { font-weight: 600; white-space: pre-line; }
.en-feedback .chip { margin: 8px 6px 0 0; }
.en-done { text-align: center; padding-top: 20px; }
.en-done-icon { font-size: 60px; text-align: center; }
.en-done-list { margin-top: 16px; padding: 12px 16px; border-radius: 16px; background: var(--bg2); text-align: left; }
.en-done-list p { margin: 6px 0 0; font-size: 14px; }
.en-option:disabled { color: var(--text); opacity: 1; cursor: default; }
.en-option.right:disabled { font-weight: 600; }

/* =====================================================================================
   «Графит» — чёрная и светлая темы. Идёт последним и перекрывает «Тихий минимализм» выше.
   Как живой мессенджер: один шрифт Onest, плоские плашки без теней, салатовый — для ваших
   сообщений и полосок прогресса. На белом салатовый текст не читается, поэтому текстовый
   акцент светлой темы — тёмно-зелёный (--accent), а сам салатовый живёт в --lime.
   ===================================================================================== */
@font-face {
  font-family: "Onest"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("/fonts/onest-cyrillic.woff2?v=1") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Onest"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("/fonts/onest-latin.woff2?v=1") 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;
}
:root, :root[data-theme="light"] {
  --bg: #ffffff; --bg2: #f1f1f3; --text: #141416; --hint: #6a6a73; --link: #4e7a0c; --danger: #d4402f;
  --accent: #4e7a0c; --accent-text: #ffffff;
  --lime: #c8f169; --lime-text: #141416; --lime-meta: #45571f;
  --pri: #141416; --pri-text: #ffffff;
  --line: rgba(20, 20, 22, .08);
  --soft: rgba(20, 20, 22, .05);
  --card-shadow: none;
  --float-shadow: 0 12px 40px rgba(20, 20, 22, .16);
}
:root[data-theme="dark"] {
  --bg: #101012; --bg2: #1d1d21; --text: #ececef; --hint: #9a9aa3; --link: #c8f169; --danger: #ff8a7a;
  --accent: #c8f169; --accent-text: #101012;
  --lime: #c8f169; --lime-text: #101012; --lime-meta: #3d4a1f;
  --pri: #ececef; --pri-text: #101012;
  --line: rgba(255, 255, 255, .08);
  --soft: rgba(255, 255, 255, .06);
  --card-shadow: none;
  --float-shadow: 0 12px 40px rgba(0, 0, 0, .6);
}
body { font-family: "Onest", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; letter-spacing: 0; }
h1, h2, h3, b, strong { letter-spacing: -.01em; }

/* Заголовки экранов — крупно и плотно */
.bar h1 { font-size: 24px; font-weight: 800; letter-spacing: -.03em; }

/* Плашки плоские: без теней, просто серая подложка */
.card, .list li, .prof-row, .plan-import, .plan-tabs button, .day-tile, .task-row, .habit-chip, .en-option,
.tutor-step.current .ts-body, .msg pre, .lecture-frame { box-shadow: none; }
.primary { box-shadow: none; }
.segmented button.active, .plan-tabs button.active { box-shadow: none; }
:root[data-theme="light"] .segmented button.active, :root[data-theme="light"] .plan-tabs button.active { background: var(--bg); }
:root[data-theme="dark"] .segmented button.active, :root[data-theme="dark"] .plan-tabs button.active { background: #2c2c32; }
.section-title, .prof-section { color: var(--hint); font-size: 13px; letter-spacing: 0; }

/* ---------- Чат: пузыри с обеих сторон, ваши — салатовые ---------- */
.messages { padding: 12px 10px; gap: 4px; }
.msg { font-size: 15.5px; line-height: 1.4; }
.msg.user {
  background: var(--lime); color: var(--lime-text);
  border-radius: 18px 18px 6px 18px; padding: 8px 13px;
}
.msg.user + .msg.assistant, .msg.assistant + .msg.user { margin-top: 8px; }
.msg.user a { color: inherit; text-decoration: underline; }
.msg.user .file-chip { background: rgba(0, 0, 0, .08); }
.msg.assistant {
  background: var(--bg2); border-radius: 18px 18px 18px 6px; padding: 8px 13px; max-width: 85%;
}
.msg.member { background: var(--bg2); box-shadow: none; }
.msg pre { background: var(--bg); }
.msg .done-actions .chip { background: var(--bg); box-shadow: none; border: 1px solid var(--line); }
.typing { background: var(--bg2); border-radius: 18px 18px 18px 6px; padding: 10px 14px; }

/* Поле ввода — полоса внизу, как в мессенджере */
.composer {
  margin: 0; padding: 8px 8px; gap: 4px; border-radius: 0; background: var(--bg);
  box-shadow: none; border-top: 1px solid var(--line);
}
:root:not([data-bg="plain"]) .composer { background: var(--bg); }
.composer textarea { background: var(--bg2); border-radius: 20px; padding: 9px 14px; min-height: 40px; }
.composer button#send { background: var(--lime); color: var(--lime-text); }
.recorder { box-shadow: none; }

/* ---------- Нижняя панель: обычные подписи, без капса ---------- */
.tabs { border-top: 1px solid var(--line); }
.tabs button span { font-size: 11px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.tabs button.active span { font-weight: 700; }
.tabs button::before { background: var(--lime); height: 3px; border-radius: 2px; }
.more-menu { box-shadow: var(--float-shadow); }
.more-menu button.active b { background: var(--lime); color: var(--lime-text); }

/* Полоски и кольца прогресса — салатовые; главная плитка действия — чёрная/белая */
.tutor-progress i, .en-bar i, .gym-progress i.now, .progress i { background: var(--lime); }
.body-actions button:first-child { background: var(--pri); color: var(--pri-text); }

/* ---------- Музыка: без фиолетовых градиентов и светящихся пятен ---------- */
#view-music, #mini-player, .player {
  --accent: var(--text); --accent-text: var(--bg);
  --m1: var(--hint); --m2: var(--hint);
  --m-grad: var(--pri);
  --m-glass: var(--bg2);
  --m-edge: transparent;
}
#view-music::before, #view-music::after { display: none; }
#view-music .bar h1 { background: none; color: var(--text); }
#view-music .search-row input, #music-tabs, #view-music .music-card, #view-music .wave-pair,
#view-music .wave-now:has(.wave-now-text), #view-music .wave-switch, .mini-player, .player .player-card {
  -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none;
}
#music-tabs button.active, #view-music .chip.active, #view-music .playlist-actions .chip.active, #view-music .wave-switch button.active {
  background: var(--pri); color: var(--pri-text); box-shadow: none;
}
#view-music .chip { background: var(--bg2); border-color: transparent; }
#view-music .round-go, #view-music .play-big:not(.wave-go), .mini-play, .player .play-big, #view-music .wave-stage .wave-go {
  background: var(--pri); color: var(--pri-text); box-shadow: none;
}
#view-music .track.playing { background: var(--soft); }
#view-music .track-eq { background: var(--pri); }
#view-music .playlist-icon { background: var(--pri); color: var(--pri-text); box-shadow: none; }
#view-music .music-card, #view-music .artist-photo, #view-music .artist-tile .artist-photo, #view-music .music-empty-icon { box-shadow: none; filter: none; }
#view-music .track-cover, #view-music .album-cover { box-shadow: none; }
.wave-card { background: var(--bg); box-shadow: none; border: 1px solid var(--line); }
.wave-card-art { background: #000; }
.wave-peek { border-color: var(--line); }
.wave-vibe { background: var(--bg2); }
.wave-lines .l1 { stroke: var(--text); }
.wave-lines .l2 { stroke: var(--hint); }
.wave-lines .l3 { stroke: var(--lime); }
.wave-bar i, .mini-progress span { background: var(--pri); }
.wave-controls .ctl { background: var(--bg2); border: 0; }
.wave-controls .wave-skip { color: var(--hint); }
.wave-controls .wave-like { color: #4e7a0c; }
:root[data-theme="dark"] .wave-controls .wave-like { color: var(--lime); }
.mini-player { background: var(--bg2); border: 0; }
.player .play-big .ic { filter: none; }

/* ---------- Без эмодзи: крупные картинки-смайлы на пустых и итоговых экранах не показываем ---------- */
.music-empty-icon, .review-done, .gym-done .big, .offline-icon, .menu-hero-icon, .en-done-icon { display: none; }
/* Линейные иконки там, где раньше стояли эмодзи */
.prof-icon { display: inline-flex; align-items: center; justify-content: center; color: var(--text); }
.prof-icon svg.li, .space-icon svg.li, .folder svg.li, .en-ico svg.li { width: 20px; height: 20px; }
.space-icon, .folder, .en-ico { display: inline-flex; align-items: center; justify-content: center; color: var(--text); }
.en-lesson-row.done .en-ico { color: var(--accent); }
.body-actions b svg.li { width: 24px; height: 24px; }
.sleep-moon { display: flex; justify-content: center; color: var(--text); }
.sleep-moon svg.li { width: 56px; height: 56px; stroke-width: 1.2; }
#view-music .playlist-icon { display: inline-flex; align-items: center; justify-content: center; }
#view-music .playlist-icon svg.li { width: 22px; height: 22px; }
.msg-tools .tool { display: inline-flex; align-items: center; justify-content: center; color: var(--hint); }
.msg-tools .tool svg.li { width: 18px; height: 18px; }
.chip svg.li, .icon svg.li { width: 18px; height: 18px; }
.chip:has(> svg.li:only-child) { display: inline-flex; align-items: center; justify-content: center; }

/* =====================================================================================
   Движение: всё появляется и уходит медленно и плавно. Одни и те же кривые везде — так интерфейс
   ощущается цельным. Пружина мягкая, без резкого «отскока». Выключенные анимации (в оформлении
   или в системе) отключают и это.
   ===================================================================================== */
:root {
  /* Долгий мягкий выход: быстро трогается и очень плавно доезжает */
  --ease-out: cubic-bezier(.19, 1, .3, 1);
  /* Уход: плавно разгоняется, без рывка в начале */
  --ease-in: cubic-bezier(.55, 0, .7, .2);
  /* Пружина с едва заметным перелётом */
  --ease-spring: cubic-bezier(.3, 1.22, .45, 1);
}

/* «Волна» от пальца */
:where(.primary, .secondary, .danger, .chip, .option, .prof-row, .more-menu button, .body-actions button,
  .fin-row, .round-go, .look-option, .en-option, .tq-option, .menu-promo, .plan-import, .ob-start) {
  position: relative; overflow: hidden; isolation: isolate;
}
rpl-dot {
  position: absolute; z-index: -1; border-radius: 50%; background: currentColor; pointer-events: none;
  opacity: .12; transform: scale(0); animation: ripple 1.25s var(--ease-out) forwards;
}
@keyframes ripple { 60% { opacity: .1; } to { transform: scale(1); opacity: 0; } }

/* Нажатие: кнопка мягко «проседает» и медленно возвращается */
button, .chip, .prof-row, .option, .fin-row, .day-tile, .task-row, .list li, .card.tap {
  transition: transform .94s var(--ease-spring), background-color .5s ease, color .5s ease,
    border-color .5s ease, box-shadow .56s ease, opacity .44s ease, filter .44s ease;
}
button:active:not(:disabled):not(.drag-handle), .prof-row:active, .option:active, .fin-row:active,
.day-tile:active, .task-row:active, .list li:active {
  transform: scale(.965); transition-duration: .18s;
}
.primary:active:not(:disabled), .round-go:active:not(:disabled) { transform: scale(.975); filter: brightness(.94); }
.tabs button:active:not(:disabled) { transform: scale(.9); }
button:disabled { transition: opacity .56s ease; }

/* Экраны: новый медленно въезжает снизу и проявляется */
.view.active { animation: view-in .88s var(--ease-out); }
@keyframes view-in { from { opacity: .2; transform: translateY(16px) scale(.993); } to { opacity: 1; transform: none; } }

/* Нижняя панель: иконка выбранного раздела мягко подпрыгивает, черта растягивается */
.tabs button.active b { animation: tab-pop .94s var(--ease-spring); }
@keyframes tab-pop {
  0% { transform: scale(.85) translateY(2px); }
  55% { transform: scale(1.08) translateY(-2px); }
  100% { transform: none; }
}
.tabs button::before { transition: transform .81s var(--ease-spring), opacity .56s ease; }

/* Шторка снизу: медленно выезжает, плавно уходит вниз, затемнение гаснет */
.panel:not(.hidden) { animation: sheet-up 1s var(--ease-out); }
@keyframes sheet-up { from { transform: translateY(100%); } to { transform: none; } }
.panel.leaving { animation: sheet-down .56s var(--ease-in) forwards; }
@keyframes sheet-down { to { transform: translateY(105%); } }
.panel.settle { transition: transform .75s var(--ease-spring); }
.overlay:not(.hidden) { animation: fade-in .69s ease-out; }
.overlay.leaving { animation: fade-out .52s ease forwards; }
@keyframes fade-out { to { opacity: 0; } }
/* Содержимое шторки — волной при открытии */
.panel.opening #panel-body > * { animation: sheet-item 1s var(--ease-out) both; }
.panel.opening #panel-body > :nth-child(1) { animation-delay: .12s; }
.panel.opening #panel-body > :nth-child(2) { animation-delay: .2s; }
.panel.opening #panel-body > :nth-child(3) { animation-delay: .28s; }
.panel.opening #panel-body > :nth-child(4) { animation-delay: .35s; }
.panel.opening #panel-body > :nth-child(5) { animation-delay: .43s; }
.panel.opening #panel-body > :nth-child(6) { animation-delay: .5s; }
.panel.opening #panel-body > :nth-child(n+7) { animation-delay: .58s; }
@keyframes sheet-item { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.panel::before { transition: width .5s ease, background-color .5s ease; }
.panel.settle::before, .panel:active::before { width: 46px; margin-left: -23px; background: var(--hint); }

/* Меню разделов: неспешно раскрывается от кнопки, плитки — волной; закрывается обратно к кнопке */
.more-menu:not(.hidden) { animation: menu-in .81s var(--ease-out); transform-origin: 85% 100%; }
@keyframes menu-in { from { opacity: 0; transform: translateY(22px) scale(.93); } to { opacity: 1; transform: none; } }
.more-menu.leaving { animation: menu-out .38s var(--ease-in) forwards; pointer-events: none; }
@keyframes menu-out { to { opacity: 0; transform: translateY(16px) scale(.95); } }
.more-menu:not(.hidden) button { animation: tile-in .94s var(--ease-out) both; }
.more-menu button:nth-child(2) { animation-delay: .04s; } .more-menu button:nth-child(3) { animation-delay: .09s; }
.more-menu button:nth-child(4) { animation-delay: .13s; } .more-menu button:nth-child(5) { animation-delay: .18s; }
.more-menu button:nth-child(6) { animation-delay: .22s; } .more-menu button:nth-child(7) { animation-delay: .26s; }
.more-menu button:nth-child(8) { animation-delay: .31s; } .more-menu button:nth-child(9) { animation-delay: .35s; }
.more-menu button:nth-child(n+10) { animation-delay: .39s; }
@keyframes tile-in { from { opacity: 0; transform: translateY(16px) scale(.92); } to { opacity: 1; transform: none; } }
.more-menu.leaving button { animation: none; }
#more-btn b { transition: transform .81s var(--ease-spring); }
#more-btn.open b { transform: scale(1.1); }

/* Плеер на весь экран: медленно выезжает и уезжает вниз */
.player:not(.hidden) { animation: player-in .94s var(--ease-out); }
@keyframes player-in { from { transform: translateY(70px); opacity: .3; } to { transform: none; opacity: 1; } }
.player.leaving { animation: player-out .59s var(--ease-in) forwards; }
@keyframes player-out { to { transform: translateY(100%); } }

/* Подсказки внизу: всплывают и уходят вниз */
.toast:not(.hidden) { animation: toast-in .88s var(--ease-spring); }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 20px) scale(.92); } to { opacity: 1; transform: translateX(-50%); } }
.toast.leaving { animation: toast-out .4s var(--ease-in) forwards; }
@keyframes toast-out { to { opacity: 0; transform: translate(-50%, 14px) scale(.95); } }

/* Сообщения в чате: свои вылетают из поля ввода, ответы — медленно проявляются */
.msg.user { animation: msg-send .88s var(--ease-spring); transform-origin: 100% 100%; }
@keyframes msg-send { from { opacity: 0; transform: translateY(24px) scale(.92); } to { opacity: 1; transform: none; } }
.msg.assistant { animation: msg-in 1s var(--ease-out); transform-origin: 0 100%; }
@keyframes msg-in { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }

/* Переключатели и чипсы: выбранное мягко перетекает */
.segmented button, .plan-tabs button, #music-tabs button { transition: background-color .56s ease, color .56s ease, box-shadow .56s ease, transform .88s var(--ease-spring); }
.segmented button.active, .plan-tabs button.active, #music-tabs button.active { animation: seg-pop .81s var(--ease-spring); }
@keyframes seg-pop { from { transform: scale(.95); } to { transform: none; } }
.chip.active, .look-option.active { animation: chip-pop .81s var(--ease-spring); }
@keyframes chip-pop { from { transform: scale(.92); } to { transform: none; } }

/* Галочки: отметка «распускается» */
input[type=checkbox] { transition: background-color .5s ease, border-color .5s ease, transform .75s var(--ease-spring); }
input[type=checkbox]:checked { animation: check-pop .88s var(--ease-spring); }
@keyframes check-pop { 0% { transform: scale(.72); } 60% { transform: scale(1.08); } 100% { transform: none; } }

/* Карточки и строки при открытии экрана — по очереди, медленнее и дальше */
body[data-entering] .view.active .scroll > .card,
body[data-entering] .view.active .scroll > div > .card,
body[data-entering] .view.active .prof-row,
body[data-entering] .view.active .list li { animation: card-in 1.06s var(--ease-out) both; }
body[data-entering] .view.active .prof-row:nth-of-type(2), body[data-entering] .view.active .list li:nth-child(2) { animation-delay: .09s; }
body[data-entering] .view.active .prof-row:nth-of-type(3), body[data-entering] .view.active .list li:nth-child(3) { animation-delay: .18s; }
body[data-entering] .view.active .prof-row:nth-of-type(4), body[data-entering] .view.active .list li:nth-child(4) { animation-delay: .26s; }
body[data-entering] .view.active .prof-row:nth-of-type(n+5), body[data-entering] .view.active .list li:nth-child(n+5) { animation-delay: .35s; }
@keyframes card-in { from { opacity: 0; transform: translateY(22px) scale(.985); } to { opacity: 1; transform: none; } }

/* Поля ввода: подсветка при фокусе проявляется, а не включается */
input, textarea, select { transition: border-color .5s ease, box-shadow .56s ease, background-color .5s ease; }

/* Обложки и картинки проявляются, когда загрузились */
.track-cover, .album-cover img, .artist-photo img, .player-cover img { transition: opacity .75s ease, transform .94s var(--ease-spring); }

/* Текст песни поверх плеера (пробно, только администраторам) */
.lyrics {
  position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column;
  background: color-mix(in srgb, var(--bg) 90%, transparent); -webkit-backdrop-filter: blur(28px); backdrop-filter: blur(28px);
  padding-top: env(safe-area-inset-top);
}
.lyrics:not(.hidden) { animation: lyrics-in .8s var(--ease-out); }
.lyrics.leaving { animation: lyrics-out .45s var(--ease-in) forwards; }
@keyframes lyrics-in { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
@keyframes lyrics-out { to { opacity: 0; transform: translateY(40px); } }
.lyrics-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px 6px 22px; }
.lyrics-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lyrics-meta b { font-size: 17px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lyrics-meta small { font-size: 13.5px; color: var(--hint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lyrics-head .ctl { width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--soft); color: var(--text); display: inline-flex; align-items: center; justify-content: center; }
.lyrics-head .ctl .ic { width: 22px; height: 22px; }
.lyrics-body {
  position: relative; flex: 1; overflow-y: auto; padding: 18px 24px 45vh; overscroll-behavior: contain;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 7%, #000 82%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 7%, #000 82%, transparent);
}
.lyrics-line {
  margin: 0 0 16px; font-size: 25px; line-height: 1.28; font-weight: 750; letter-spacing: -.02em;
  color: var(--text); opacity: .3; transform-origin: 0 50%; cursor: pointer;
  transition: opacity .7s var(--ease-out), transform .8s var(--ease-out), color .7s ease;
}
.lyrics-line.gap { opacity: .18; font-size: 18px; }
.lyrics-line.past { opacity: .45; }
.lyrics-line.now { opacity: 1; transform: scale(1.03); }
.lyrics-body.synced .lyrics-line.now { color: var(--text); text-shadow: 0 0 24px color-mix(in srgb, var(--lime, var(--accent)) 35%, transparent); }
.lyrics-line.plain { font-size: 21px; font-weight: 650; opacity: .9; cursor: default; margin-bottom: 8px; }
.lyrics-line.plain.gap { margin-bottom: 18px; }
.lyrics-note { margin: 30px 0; font-size: 17px; color: var(--hint); }
.lyrics-source { margin-top: 30px; font-size: 12.5px; color: var(--hint); }

/* Текст песни: строка загорается быстро (без опоздания), гаснет медленно */
.lyrics-line.now { transition: opacity .25s ease-out, transform .45s var(--ease-out), color .25s ease; }
.lyrics-head, .lyrics-body { position: relative; z-index: 1; }
.lyrics { background: color-mix(in srgb, var(--bg) 82%, transparent); }
/* Светомузыка под текстом: пятна в цветах обложки дышат в такт (--beat и --vibe приходят от плеера) */
.lyrics-light { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; opacity: .55; transition: opacity 1.2s ease; }
.lyrics-light i {
  position: absolute; width: 90vmax; height: 90vmax; border-radius: 50%; filter: blur(30px);
  background: radial-gradient(circle, color-mix(in srgb, var(--vibe1, var(--lime, var(--accent))) 70%, transparent) 0%, transparent 62%);
  transform: scale(calc(.85 + var(--beat, 0) * .35 + var(--hit, 0) * .1));
}.lyrics-light i:nth-child(1) { top: -40vmax; left: -35vmax; animation: lyr-drift-a 17s ease-in-out infinite alternate; }
.lyrics-light i:nth-child(2) {
  bottom: -45vmax; right: -40vmax; animation: lyr-drift-b 21s ease-in-out infinite alternate;
  background: radial-gradient(circle, color-mix(in srgb, var(--vibe2, var(--accent)) 65%, transparent) 0%, transparent 62%);
}
.lyrics-light i:nth-child(3) {
  top: 30%; left: 20%; width: 60vmax; height: 60vmax; animation: lyr-drift-a 25s ease-in-out infinite alternate-reverse;
  opacity: calc(.25 + (1 - var(--mix-a, .5)) * .55);
  background: radial-gradient(circle, color-mix(in srgb, var(--vibe3, var(--vibe1, var(--accent))) 50%, transparent) 0%, transparent 60%);
}
@keyframes lyr-drift-a { to { translate: 16vmax 20vmax; } }
@keyframes lyr-drift-b { to { translate: -18vmax -14vmax; } }
:root.vibe .player.is-playing .lyrics-light { opacity: calc(.45 + var(--beat, 0) * .55); transition: none; }
:root[data-theme="light"] .lyrics-light { opacity: .4; }

/* Кнопка «Текст песни»: заметная таблетка с иконкой, подсвечивается в цвет обложки и в такт */
.player-extra .player-lyrics {
  display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; border: 0; border-radius: 999px;
  background: color-mix(in srgb, var(--vibe1, var(--lime, var(--accent))) 26%, var(--bg2)); color: var(--text);
  font-size: 15px; font-weight: 700; letter-spacing: -.01em; order: -1;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--vibe1, var(--lime, var(--accent))) 45%, transparent);
}
.player-extra .player-lyrics.hidden { display: none; }
.player-extra .player-lyrics svg.li { width: 20px; height: 20px; stroke-width: 1.9; }
:root.vibe .player.is-playing .player-extra .player-lyrics {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--vibe1, var(--lime, var(--accent))) 55%, transparent),
    0 0 calc(6px + var(--beat, 0) * 26px) color-mix(in srgb, var(--vibe1, var(--lime, var(--accent))) 55%, transparent);
}
.player-extra { flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 14px; }

/* =====================================================================================
   Текст песни на месте обложки: обложка темнеет и размывается, строки выплывают поверх неё.
   Кнопка «Текст / Обложка» — маленькая таблетка внизу обложки.
   ===================================================================================== */
.cover-box { position: relative; width: 100%; max-width: 340px; aspect-ratio: 1; }
.cover-box > img { display: block; width: 100%; height: 100%; max-width: none; transition: filter .9s var(--ease-out), scale .9s var(--ease-out); }
.player.lyrics-open .cover-box > img { filter: brightness(.38) blur(10px) saturate(1.3); }
.lyrics {
  position: absolute; inset: 0; z-index: 2; display: block; padding: 0; overflow: hidden;
  border-radius: var(--radius-card); background: rgb(0 0 0 / .22);
  -webkit-backdrop-filter: none; backdrop-filter: none; color: #fff;
}
.lyrics:not(.hidden) { animation: lyrics-rise .9s var(--ease-out); }
.lyrics.leaving { animation: lyrics-sink .55s var(--ease-in) forwards; }
@keyframes lyrics-rise { from { opacity: 0; transform: translateY(26px) scale(.97); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes lyrics-sink { to { opacity: 0; transform: translateY(18px) scale(.98); filter: blur(4px); } }
.lyrics .lyrics-light { opacity: .5; }
.lyrics .lyrics-light i { width: 70vmax; height: 70vmax; filter: blur(24px); }
.lyrics-body {
  position: absolute; inset: 0; z-index: 1; overflow-y: auto; padding: 28% 22px 62%; overscroll-behavior: contain;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 16%, #000 74%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 16%, #000 74%, transparent);
  scrollbar-width: none;
}
.lyrics-body::-webkit-scrollbar { display: none; }
.lyrics .lyrics-line { margin: 0 0 12px; font-size: 19px; line-height: 1.3; font-weight: 750; color: #fff; opacity: .32; }
.lyrics .lyrics-line.gap { font-size: 15px; opacity: .2; }
.lyrics .lyrics-line.past { opacity: .5; }
.lyrics .lyrics-line.now { opacity: 1; transform: scale(1.03); color: #fff; }
.lyrics .lyrics-body.synced .lyrics-line.now { text-shadow: 0 0 18px color-mix(in srgb, var(--vibe1, var(--lime, var(--accent))) 70%, transparent); }
.lyrics .lyrics-line.plain { font-size: 16.5px; font-weight: 600; opacity: .92; margin-bottom: 6px; }
.lyrics .lyrics-line.plain.gap { margin-bottom: 14px; }
.lyrics .lyrics-note { margin: 0; text-align: center; font-size: 16px; color: rgb(255 255 255 / .75); }
.lyrics .lyrics-source { margin-top: 18px; font-size: 11.5px; color: rgb(255 255 255 / .5); }

/* Маленькая таблетка внизу обложки */
.cover-box .player-lyrics {
  position: absolute; left: 50%; bottom: 12px; z-index: 3; translate: -50% 0; order: 0;
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px 6px 11px; border: 0; border-radius: 999px;
  background: rgb(0 0 0 / .45); color: #fff; font-size: 13px; font-weight: 700; letter-spacing: 0;
  -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4);
  box-shadow: 0 0 0 1px rgb(255 255 255 / .16);
  transition: background-color .5s ease, box-shadow .5s ease, transform .6s var(--ease-spring);
}
.cover-box .player-lyrics.hidden { display: none; }
.cover-box .player-lyrics svg.li { width: 16px; height: 16px; stroke-width: 2; }
.cover-box .player-lyrics[aria-pressed="true"] { background: rgb(255 255 255 / .16); }
:root.vibe .player.is-playing .cover-box .player-lyrics {
  box-shadow: 0 0 0 1px rgb(255 255 255 / .18), 0 0 calc(4px + var(--beat, 0) * 18px) color-mix(in srgb, var(--vibe1, var(--lime, var(--accent))) 60%, transparent);
}
/* Уменьшение на паузе и пульсация в такт — у всего блока обложки, чтобы текст двигался вместе с ней */
.player .player-cover .cover-box > img { transform: none; }
:root.vibe .player.is-playing .player-cover .cover-box > img { scale: none; }
.cover-box { transform: scale(.9); transition: transform .94s var(--ease-spring); }
.player.is-playing .cover-box { transform: none; }
:root.vibe .player.is-playing .cover-box { scale: calc(1 + var(--beat, 0) * .03); }
/* «Текст не совпадает» — под текстом песни */
.lyrics .lyrics-wrong {
  display: inline-flex; margin-top: 22px; padding: 8px 15px; border: 0; border-radius: 999px;
  background: rgb(255 255 255 / .14); color: #fff; font-size: 13px; font-weight: 650;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.lyrics .lyrics-wrong:active { background: rgb(255 255 255 / .24); }
.lyrics .lyrics-source { margin-top: 12px; }

/* Админ-панель: здоровье, воронка, разделы */
.health-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.health-head h2 { margin: 0; }
.health-head .chip { margin: 0; }
.health-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--hint); }
.health-dot.ok { background: #3fb68b; }
.health-dot.warn { background: #e8a01d; }
.health-dot.bad { background: var(--danger); }
.health-big { margin: 10px 0 2px; font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.health-sub { margin: 0 0 12px; }
.health-form { display: flex; gap: 8px; }
.health-form .field { flex: 1; min-width: 0; margin: 0; }
.health-form .primary { width: auto; flex: none; padding: 10px 16px; }
.check-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.check-row { display: flex; align-items: center; gap: 10px; font-size: 14.5px; }
.check-name { flex: 1; min-width: 0; }
.check-note { font-size: 13px; text-align: right; }
.check-when { margin: 10px 0 0; }
.error-row { margin: 8px 0 0; overflow-wrap: anywhere; }
.funnel-steps { display: flex; flex-direction: column; gap: 12px; margin-top: 10px; }
.funnel-head { display: flex; justify-content: space-between; gap: 8px; font-size: 14.5px; }
.funnel-head b { font-variant-numeric: tabular-nums; }
.funnel-bar { height: 8px; border-radius: 4px; background: var(--soft); overflow: hidden; margin: 6px 0 3px; }
.funnel-bar i { display: block; height: 100%; border-radius: 4px; background: var(--lime, var(--accent)); transition: width .9s var(--ease-out); }
.funnel-step small { font-size: 12px; }
.feature-row { display: grid; grid-template-columns: 96px 1fr 38px; align-items: center; gap: 10px; margin-top: 10px; font-size: 14px; }
.feature-row .funnel-bar { margin: 0; }
.feature-row b { text-align: right; font-variant-numeric: tabular-nums; }

/* Знакомство в пустом чате (первые минуты) */
.empty.onboarding-on { max-width: 460px; width: 100%; margin: auto auto 0; padding: 16px 6px 8px; text-align: left; color: var(--text); }
.empty.onboarding-on > p:first-child { display: none; }
.onboarding { display: flex; flex-direction: column; gap: 12px; }
.onboarding > * { animation: sheet-item .9s var(--ease-out) both; }
.onboarding > :nth-child(2) { animation-delay: .08s; }
.onboarding > :nth-child(3) { animation-delay: .16s; }
.onboarding > :nth-child(4) { animation-delay: .24s; }
.onboarding > :nth-child(n+5) { animation-delay: .32s; }
.ob-title { margin: 0; font-size: 30px; font-weight: 800; letter-spacing: -.035em; line-height: 1.05; }
.ob-text { margin: 0; font-size: 15.5px; line-height: 1.5; color: var(--hint); }
.ob-ask { margin: 8px 0 0; font-size: 17px; font-weight: 700; }
.ob-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ob-chips .chip { margin: 0; padding: 10px 15px; font-size: 14.5px; }
.ob-chips .chip.active { background: var(--lime, var(--accent)); color: var(--lime-text, var(--accent-text)); }
.ob-next { margin-top: 6px; }
.ob-starts { display: flex; flex-direction: column; gap: 8px; }
.ob-start {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px; width: 100%; padding: 14px 16px;
  border: 0; border-radius: 18px; background: var(--bg2); color: var(--text); text-align: left;
}
.ob-start b { font-size: 15.5px; font-weight: 650; line-height: 1.35; }
.ob-start span { font-size: 12.5px; color: var(--hint); }
.ob-back, .ob-skip { align-self: flex-start; padding-left: 2px; }
.ob-skip { margin-top: -6px; }

/* Единый вид: плашки и мелочи в «Графите» */
.movie-official { background: rgb(0 0 0 / .55); color: #fff; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px rgb(200 241 105 / .55); }

/* Память: декоративный свет — меньшими слоями и без лишнего размытия. Огромные размытые пятна
   на весь экран занимают на iPhone десятки мегабайт видеопамяти — без неё Telegram перезагружает
   приложение, и музыка обрывается. В свёрнутом приложении свет не рисуем совсем */
.player-aurora::before, .player-aurora::after, .wave-aurora::before, .wave-aurora::after { width: 75vmax; height: 75vmax; }
.player-aurora::before, .wave-aurora::before { top: -32vmax; left: -28vmax; }
.player-aurora::after, .wave-aurora::after { bottom: -36vmax; right: -30vmax; }
.lyrics .lyrics-light i { filter: none; width: 60vmax; height: 60vmax; }
.lyrics .lyrics-light i:nth-child(3) { display: none; }
html.page-hidden .player-aurora, html.page-hidden .wave-aurora, html.page-hidden .lyrics-light,
html.page-hidden .edge-glow, html.page-hidden .player-glow, html.page-hidden .wrapped-bg { display: none !important; }
html.page-hidden *, html.page-hidden *::before, html.page-hidden *::after { animation-play-state: paused !important; }

/* Обложка — по доступному месту: на невысоком экране и когда под плеером появляются строки
   («Загружаю…», реакции, ссылки) она уменьшается, а не уходит под карточку вместе с кнопкой «Текст» */
.player-cover { container-type: size; min-height: 150px; }
@supports (width: 1cqh) {
  .cover-box { width: min(100cqw, 100cqh, 340px); max-width: none; }
}

/* Видеоредактор: тёмный монтажный стол в любой теме — так кадр виден честно */
.ve-intro h2 { margin: 0 0 6px; }
.ve-intro .primary { margin-top: 12px; }
.ve-projects { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 4px 14px 24px; }
.ve-projects .card { margin: 0; }
.ve-project { display: flex; flex-direction: column; gap: 8px; padding: 8px; border: 0; text-align: left; color: var(--text); margin: 0; }
.ve-project-thumb { display: block; width: 100%; max-height: 220px; border-radius: 12px; background: #111 center / cover no-repeat; }
.ve-project-text { display: flex; flex-direction: column; gap: 2px; padding: 0 4px 4px; min-width: 0; }
.ve-project-text b { font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ve-project-text small { font-size: 12px; }

.ve {
  --ve-bg: #0d0d0f; --ve-panel: #18181b; --ve-line: rgb(255 255 255 / .1); --ve-text: #f4f4f5; --ve-hint: rgb(255 255 255 / .55);
  position: fixed; inset: 0; z-index: 19; display: flex; flex-direction: column; background: var(--ve-bg); color: var(--ve-text);
  user-select: none; -webkit-user-select: none; padding-bottom: env(safe-area-inset-bottom);
  animation: ve-in .7s var(--ease-out, ease);
}
.ve.leaving { animation: ve-out .35s ease forwards; }
@keyframes ve-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes ve-out { to { opacity: 0; transform: translateY(16px); } }
.ve button { font-family: inherit; color: inherit; }
.ve-top { display: flex; align-items: center; gap: 6px; padding: 8px 10px; }
.ve-ic { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border: 0; border-radius: 12px; background: none; }
.ve-ic:active { background: rgb(255 255 255 / .1); }
.ve-ic:disabled { opacity: .3; }
.ve-title {
  flex: 1; min-width: 0; padding: 7px 10px; border: 1px solid transparent; border-radius: 10px; background: none;
  color: var(--ve-text); font: inherit; font-weight: 700; font-size: 16px;
}
.ve-title:focus { outline: none; border-color: var(--ve-line); background: var(--ve-panel); }
.ve-export {
  flex: none; padding: 9px 16px; border: 0; border-radius: 999px; background: var(--lime, #c8f169); color: #141416 !important;
  font-weight: 750; font-size: 14px;
}
.ve-export:active { transform: scale(.96); }

.ve-stage-wrap { position: relative; flex: 1; min-height: 160px; display: grid; place-items: center; overflow: hidden; }
.ve-stage { position: relative; overflow: hidden; background: #000; border-radius: 6px; box-shadow: 0 0 0 1px var(--ve-line); }
.ve-media { position: absolute; left: 50%; top: 50%; width: 100%; height: 100%; opacity: 0; pointer-events: none; transform: translate(-50%, -50%); }
.ve-media.on { opacity: 1; }
.ve-dark { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; }
.ve-texts { position: absolute; inset: 0; }
.ve-text {
  position: absolute; translate: -50% -50%; max-width: 92%; padding: .12em .3em; border-radius: .22em; line-height: 1.15;
  white-space: pre-wrap; text-align: center; overflow-wrap: anywhere; touch-action: none; cursor: grab;
}
.ve-text.box-none { text-shadow: 0 2px 8px rgb(0 0 0 / .55); }
.ve-text.box-dark { background: rgb(0 0 0 / .62); }
.ve-text.box-light { background: rgb(255 255 255 / .92); }
.ve-text.box-lime { background: var(--lime, #c8f169); }
.ve-text.selected { outline: 1.5px dashed rgb(255 255 255 / .9); outline-offset: 3px; }
.ve-text.off-time { opacity: .45; }
.ve-empty {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  padding: 20px; text-align: center; color: var(--ve-hint); font-size: 14px;
}
.ve-empty .primary { width: auto; padding: 10px 22px; }
.ve-upload {
  position: absolute; left: 12px; right: 12px; bottom: 10px; display: flex; flex-direction: column; gap: 6px; padding: 10px 14px;
  border-radius: 14px; background: rgb(24 24 27 / .92); font-size: 13px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.ve-bar { height: 4px; border-radius: 2px; background: rgb(255 255 255 / .12); overflow: hidden; }
.ve-bar i { display: block; width: 0; height: 100%; border-radius: 2px; background: var(--lime, #c8f169); transition: width .6s var(--ease-out, ease); }

.ve-transport { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 14px; }
.ve-time { flex: 1; font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--ve-hint); }
.ve-play { display: grid; place-items: center; width: 42px; height: 42px; border: 0; border-radius: 50%; background: rgb(255 255 255 / .1); }
.ve-play svg { width: 20px; height: 20px; }
.ve-zoom { flex: 1; display: flex; justify-content: flex-end; gap: 4px; }
.ve-zoom button { width: 32px; height: 32px; border: 0; border-radius: 10px; background: rgb(255 255 255 / .07); font-size: 18px; line-height: 1; }

.ve-timeline { position: relative; height: 128px; flex: none; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.ve-timeline::-webkit-scrollbar { display: none; }
.ve-track-wrap { position: relative; height: 100%; box-sizing: content-box; }
.ve-ruler { position: relative; height: 20px; }
.ve-ruler span { position: absolute; top: 4px; translate: -50% 0; font-size: 10px; color: var(--ve-hint); font-variant-numeric: tabular-nums; }
.ve-clips { position: relative; height: 62px; }
.ve-clip {
  position: absolute; top: 4px; height: 54px; border-radius: 8px; background: #26262b repeat-x; overflow: visible;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .08); cursor: pointer;
}
.ve-clip.selected { box-shadow: 0 0 0 2px var(--lime, #c8f169); z-index: 2; }
.ve-clip-tag {
  position: absolute; left: 4px; bottom: 4px; padding: 1px 6px; border-radius: 6px; background: rgb(0 0 0 / .6);
  font-size: 10.5px; font-weight: 650; white-space: nowrap;
}
.ve-fade-mark { position: absolute; left: -7px; top: 50%; width: 12px; height: 12px; translate: 0 -50%; rotate: 45deg; border-radius: 2px; background: #fff; box-shadow: 0 0 0 2px var(--ve-bg); z-index: 3; }
.ve-trim {
  position: absolute; top: -2px; bottom: -2px; width: 16px; background: var(--lime, #c8f169); touch-action: none; z-index: 4;
}
.ve-trim::after { content: ""; position: absolute; left: 50%; top: 50%; width: 2px; height: 18px; translate: -50% -50%; border-radius: 1px; background: #141416; }
.ve-trim-start { left: -14px; border-radius: 8px 0 0 8px; }
.ve-trim-end { right: -14px; border-radius: 0 8px 8px 0; }
.ve-text-track { position: relative; height: 34px; }
.ve-tblock {
  position: absolute; top: 4px; height: 26px; padding: 0 8px; border-radius: 7px; background: #3b3a24; color: #f3f0c8;
  font-size: 11.5px; line-height: 26px; font-weight: 650; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; cursor: pointer;
}
.ve-tblock.selected { box-shadow: 0 0 0 2px var(--lime, #c8f169); }
.ve-tl-box { position: relative; flex: none; }
.ve-playhead {
  position: absolute; left: 50%; top: 18px; bottom: 6px; width: 2px; margin-left: -1px; border-radius: 1px; background: #fff;
  box-shadow: 0 0 0 1px rgb(0 0 0 / .4); pointer-events: none; z-index: 5;
}

.ve-tools { display: flex; gap: 2px; overflow-x: auto; padding: 8px 8px 10px; border-top: 1px solid var(--ve-line); scrollbar-width: none; }
.ve-tools::-webkit-scrollbar { display: none; }
.ve-tool {
  flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 64px; padding: 6px 6px; border: 0;
  border-radius: 12px; background: none; font-size: 11px; color: var(--ve-text);
  animation: sheet-item .6s var(--ease-out, ease) both;
}
.ve-tool:active { background: rgb(255 255 255 / .08); }
.ve-tool.on .ve-tool-ic { color: var(--lime, #c8f169); }
.ve-tool span:last-child { white-space: nowrap; }

.ve-progress { position: absolute; inset: 0; z-index: 10; display: grid; place-items: center; padding: 20px; background: rgb(0 0 0 / .72); }
.ve-progress.hidden { display: none; }
.ve-progress-card { width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: 12px; padding: 20px; border-radius: 20px; background: var(--ve-panel); }
.ve-progress-card b { font-size: 17px; }
.ve-progress-card small { color: var(--ve-hint); font-size: 13px; line-height: 1.45; }
.ve-progress-actions { display: flex; gap: 8px; }
.ve-progress-actions:empty { display: none; }
.ve-progress-actions button { flex: 1; }

/* План: «Сегодня» со шкалой дня, неделя и месяц. Спокойные карточки, цвет только у дел и прогресса */
.plan-top { padding: 10px 14px 0; }
.plan-top h1 { flex: 1; margin: 0; font-size: 30px; font-weight: 800; letter-spacing: -.03em; }
.plan-top .icon { width: 42px; height: 42px; flex: none; }
.plan-tabs { grid-template-columns: repeat(4, 1fr); }
.plan-tabs button { min-width: 0; padding: 8px 2px; font-size: 13.5px; }
#plan-board { padding: 6px 14px 24px; }
.pl-hero { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 18px; border-radius: 22px; background: var(--bg2); animation: sheet-item .8s var(--ease-out, ease) both; }
.pl-hero-text { min-width: 0; }
.pl-hero h2 { margin: 0 0 3px; font-size: 19px; font-weight: 750; letter-spacing: -.02em; }
.pl-hero p { margin: 0; font-size: 14.5px; color: var(--hint); }
.pl-hero small { display: block; margin-top: 8px; font-size: 13.5px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-ring { position: relative; flex: none; width: 72px; height: 72px; display: grid; place-items: center; }
.pl-ring svg { position: absolute; inset: 0; }
.pl-ring circle { fill: none; }
.pl-ring-bg { stroke: var(--soft); }
.pl-ring-fill { stroke: var(--lime, var(--accent)); stroke-linecap: round; transition: stroke-dashoffset .9s var(--ease-out, ease); }
.pl-ring b { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
.pl-overdue { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; padding: 14px 16px; border-radius: 18px; background: color-mix(in srgb, #e8891d 13%, var(--bg2)); }
.pl-overdue b { font-size: 15px; }
.pl-overdue small { font-size: 13px; color: var(--hint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pl-actions .chip { margin: 0; padding: 7px 12px; background: var(--bg2); color: var(--text); }
.pl-actions.row { flex-basis: 100%; margin: 8px 0 0 38px; }
.pl-actions.row .chip { background: var(--soft); }
.pl-day { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.pl-slot { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 8px; align-items: stretch; }
.pl-hours { display: flex; flex-direction: column; justify-content: space-between; padding: 12px 0 8px; text-align: right; }
.pl-hours b { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pl-hours small { font-size: 11.5px; color: var(--hint); font-variant-numeric: tabular-nums; }
.pl-task {
  position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; min-height: 52px; padding: 10px 12px 10px 14px; overflow: hidden;
  border-radius: 16px; background: var(--bg2); transition: opacity .5s ease;
}
.pl-task::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--cube); }
.pl-task.done { opacity: .55; }
.pl-task.done .pl-task-title { text-decoration: line-through; }
.pl-task.clash { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--danger) 60%, transparent); }
.pl-check {
  flex: none; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 2px solid var(--line); border-radius: 50%; background: none;
  color: #141416; font-size: 15px; font-weight: 800; transition: background-color .4s ease, border-color .4s ease, transform .6s var(--ease-spring, ease);
}
.pl-check:active { transform: scale(.88); }
.pl-task.done .pl-check { background: var(--lime, var(--accent)); border-color: var(--lime, var(--accent)); }
.pl-task-body { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 2px; cursor: pointer; }
.pl-task-title { font-size: 15.5px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.pl-task-meta { font-size: 12.5px; color: var(--hint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-task-clash { font-size: 12.5px; font-weight: 600; color: var(--danger); }
.pl-pill { flex: none; padding: 4px 9px; border: 0; border-radius: 999px; background: var(--soft); color: var(--text); font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pl-checklist { flex-basis: 100%; display: flex; flex-direction: column; gap: 2px; padding-left: 38px; }
.pl-subtask { display: flex; align-items: center; gap: 9px; padding: 6px 0; border: 0; background: none; color: var(--text); font-size: 14px; text-align: left; }
.pl-subtask i { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border: 1.5px solid var(--line); border-radius: 6px; font-style: normal; font-size: 12px; font-weight: 800; color: #141416; }
.pl-subtask.done i { background: var(--lime, var(--accent)); border-color: var(--lime, var(--accent)); }
.pl-subtask.done span { color: var(--hint); text-decoration: line-through; }
.pl-now { display: flex; align-items: center; gap: 8px; }
.pl-now span { width: 46px; text-align: right; font-size: 12px; font-weight: 800; color: var(--danger); font-variant-numeric: tabular-nums; }
.pl-now i { flex: 1; height: 2px; border-radius: 1px; background: var(--danger); }
.pl-gap { margin-left: 54px; padding: 3px 0; font-size: 12.5px; color: var(--hint); }
.pl-sub { margin: 16px 2px 6px; font-size: 13px; font-weight: 700; color: var(--hint); }
.pl-day > .pl-sub { margin-bottom: 0; }
.pl-empty { padding: 26px 8px; text-align: center; font-size: 14.5px; color: var(--hint); }
.pl-link { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-top: 12px; padding: 14px 16px; border: 0; border-radius: 16px; background: var(--bg2); color: var(--text); font-size: 15px; font-weight: 600; }
.pl-link small { color: var(--hint); font-size: 13px; font-weight: 500; }
.pl-link.danger { justify-content: center; color: var(--danger); }
.pl-day-head { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.pl-day-head .icon { flex: none; font-size: 24px; }
.pl-day-title { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.pl-day-head .round-go { flex: none; width: 42px; height: 42px; font-size: 21px; }
.pl-day-title b { font-size: 19px; font-weight: 750; letter-spacing: -.02em; }
.pl-day-title small { font-size: 13px; color: var(--hint); }
.pl-planned { margin-top: 6px; padding: 11px 14px; border: 1px dashed var(--line); border-radius: 14px; font-size: 14.5px; color: var(--hint); }
.pl-week { display: flex; flex-direction: column; gap: 8px; }
.pl-week-day { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 14px; border: 0; border-radius: 18px; background: var(--bg2); color: var(--text); text-align: left; }
.pl-week-day.today { box-shadow: inset 0 0 0 2px var(--lime, var(--accent)); }
.pl-week-date { flex: none; display: flex; flex-direction: column; align-items: center; width: 36px; }
.pl-week-date small { font-size: 12px; color: var(--hint); }
.pl-week-date b { font-size: 21px; font-weight: 800; letter-spacing: -.02em; }
.pl-week-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pl-week-label { font-size: 15px; font-weight: 650; }
.pl-week-info small { font-size: 12.5px; color: var(--hint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-dots { flex: none; display: flex; gap: 3px; }
.pl-dots i { width: 7px; height: 7px; border-radius: 50%; }
.pl-dots i.off { opacity: .3; }
.pl-month-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.pl-month-head b { font-size: 17px; font-weight: 750; }
.pl-month-head .icon { font-size: 24px; }
.pl-month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.pl-month-week { padding-bottom: 2px; text-align: center; font-size: 12px; color: var(--hint); }
.pl-cell { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 4px; aspect-ratio: 1 / 1.12; min-width: 0; padding: 6px 0 0; border: 0; border-radius: 12px; background: var(--bg2); color: var(--text); }
.pl-cell b { font-size: 15px; font-weight: 650; font-variant-numeric: tabular-nums; }
.pl-cell.past { opacity: .6; }
.pl-cell.today { background: var(--lime, var(--accent)); color: #141416; opacity: 1; }
.pl-cell.marked b { text-decoration: underline; text-underline-offset: 3px; }
.pl-cell .pl-dots i { width: 6px; height: 6px; }
.pl-month-note { margin: 12px 2px 0; text-align: center; }
.pl-form-subs { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
.pl-form-sub { display: flex; align-items: center; gap: 6px; }
.pl-form-sub .field { flex: 1; min-width: 0; }

/* Личный менеджер: группы разделов, «Собрать день», свободный вечер */
.more-group { display: none; }
.more-menu.grouped .more-group:not(.empty) {
  display: block; grid-column: 1 / -1; margin: 6px 6px -2px; font-size: 12px; font-weight: 700; color: var(--hint);
}
.more-menu.grouped .more-group:first-child { margin-top: 2px; }
.pl-build, .pl-rest {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px; width: 100%; margin: 12px 0 0; padding: 14px 16px;
  border: 0; border-radius: 18px; background: var(--bg2); color: var(--text); text-align: left;
}
.pl-build { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--lime, var(--accent)) 70%, transparent); cursor: pointer; }
.pl-build b, .pl-rest b { font-size: 15.5px; font-weight: 750; }
.pl-build small, .pl-rest small { font-size: 13px; color: var(--hint); }
.pl-rest .pl-actions { margin-top: 8px; }
.pl-draft { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 12px; }
.pl-draft-row { display: flex; align-items: baseline; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--soft); }
.pl-draft-row b { flex: none; font-size: 13px; font-variant-numeric: tabular-nums; }
.pl-draft-row span { flex: 1; min-width: 0; font-size: 14.5px; }
.pl-draft-row small { flex: none; font-size: 12px; color: var(--hint); }
.pl-draft-row:not(.fresh) { opacity: .6; }
.pl-draft-row.fresh { box-shadow: inset 3px 0 0 var(--lime, var(--accent)); }
button.pl-draft-row { width: 100%; border: 0; color: var(--text); text-align: left; cursor: pointer; transition: opacity .25s ease; }
.pl-draft-row.new small { color: #2f9e55; font-weight: 700; }
.pl-draft-row.new.off { opacity: .4; box-shadow: none; }
.pl-draft-row.new.off span { text-decoration: line-through; }
.pl-draft-row.new.off small::after { content: " · убрано"; }
.day-draft-lines { list-style: none; padding-left: 0 !important; font-variant-numeric: tabular-nums; }
/* Этап 2: важные дела, проекты, вложенные цели */
.pl-star { margin-right: 5px; font-style: normal; color: #f2b01e; }
.pl-task.important:not(.done) { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, #f2b01e 55%, transparent); }
.panel .pl-star-chip { align-self: flex-start; margin: 8px 0 2px; }
.panel .pl-star-chip.active { background: color-mix(in srgb, #f2b01e 22%, var(--soft)); color: var(--text); }
.pl-project { cursor: default; }
.pl-project .chip { margin: 8px 0 0; background: var(--lime, var(--accent)); color: var(--lime-text, #141416); font-weight: 700; }
.pl-project.late { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--danger) 60%, transparent); }
.pl-step-meta { display: block; margin-top: 2px; font-size: 12px; color: var(--hint); }
.pl-goal .pl-goal-parent { display: block; margin-top: 2px; color: var(--hint); }
/* Этап 3: аналитика привычки, частичные отметки, гибкое расписание */
#plan-habits .pl-day-head { margin-bottom: 10px; }
.hs-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.hs-tile { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 4px; border-radius: 16px; background: var(--bg2); }
.hs-tile b { font-size: 19px; font-weight: 750; font-variant-numeric: tabular-nums; }
.hs-tile small { font-size: 11.5px; color: var(--hint); text-align: center; }
.hs-heat {
  display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, 18px); grid-auto-columns: 18px;
  gap: 4px; justify-content: center; padding: 12px; border-radius: 16px; background: var(--bg2); overflow-x: auto;
}
.hs-cell { display: block; width: 18px; height: 18px; border-radius: 5px; background: var(--soft); }
.hs-cell.done { background: var(--lime, var(--accent)); }
.hs-cell.part { background: color-mix(in srgb, var(--lime, var(--accent)) 45%, var(--soft)); }
.hs-cell.skip { background: color-mix(in srgb, var(--hint) 35%, var(--soft)); }
.hs-cell.miss { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--danger) 45%, transparent); }
.hs-cell.off, .hs-cell.empty { opacity: .35; }
.hs-cell.empty { visibility: hidden; }
.hs-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 8px 2px 0; font-size: 12px; color: var(--hint); }
.hs-legend span { display: inline-flex; align-items: center; gap: 6px; }
.hs-legend .hs-cell { width: 12px; height: 12px; border-radius: 3px; }
.hs-weekdays { display: flex; gap: 6px; padding: 12px; border-radius: 16px; background: var(--bg2); }
.hs-wd { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.hs-wd b { font-size: 11.5px; font-variant-numeric: tabular-nums; }
.hs-wd span { position: relative; display: block; width: 100%; max-width: 26px; height: 70px; border-radius: 6px; background: var(--soft); overflow: hidden; }
.hs-wd span i { position: absolute; left: 0; right: 0; bottom: 0; background: var(--lime, var(--accent)); border-radius: 6px; }
.hs-wd small { font-size: 11.5px; color: var(--hint); }
.dot.part i { background: color-mix(in srgb, var(--lime, var(--accent)) 45%, var(--soft)); font-size: 10px; }
.muted-off { opacity: .4; }
/* Этап 4: предложение изменений от ассистента в чате */
.proposal { margin: 6px 0 8px; padding: 12px 14px; border-radius: 16px; background: var(--soft); }
.proposal b { display: block; font-size: 14.5px; }
.proposal ul { margin: 8px 0 0; padding-left: 18px; font-size: 14px; line-height: 1.45; }
.proposal-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.proposal-buttons .chip { margin: 0; }
/* Режим секретаря: переключатель, показатели дня и советы */
.sec-pill {
  flex: none; display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 13px 0 11px; border: 0; border-radius: 999px;
  background: var(--soft); color: var(--hint); font-size: 13px; font-weight: 700; cursor: pointer; transition: background .3s ease, color .3s ease;
}
.sec-pill.hidden { display: none; }
.sec-pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--hint); transition: background .3s ease, box-shadow .3s ease; }
.sec-pill.on { background: color-mix(in srgb, var(--lime, var(--accent)) 26%, var(--soft)); color: var(--text); }
.sec-pill.on i { background: #3fae5a; box-shadow: 0 0 0 3px color-mix(in srgb, #3fae5a 25%, transparent); }
.sec-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.sec-row.main { padding: 4px 0 14px; }
.sec-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sec-row-text b { font-size: 15px; }
.sec-row-text small { font-size: 12.5px; color: var(--hint); line-height: 1.35; }
.sec-notices { transition: opacity .3s ease; }
.sec-vitals { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 10px; }
.sec-vital {
  min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 9px 2px 8px; border: 0; border-radius: 14px;
  background: var(--bg2); color: var(--text); cursor: pointer;
}
.sec-vital:disabled { cursor: default; opacity: 1; }
.sec-vital i { font-style: normal; font-size: 16px; }
.sec-vital b { font-size: 14px; font-weight: 750; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sec-vital small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10.5px; color: var(--hint); }
.sec-vital.ok b { color: #2f9e55; }
.sec-vital.warn { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, #f08c3a 60%, transparent); }
.sec-vital.warn b { color: #d9762a; }
.sec-card { margin-top: 10px; padding: 12px 14px 4px; border-radius: 18px; background: var(--bg2); }
.sec-card-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 4px; }
.sec-card-head b { font-size: 15px; font-weight: 750; }
.sec-card-head small { font-size: 12px; color: var(--hint); }
.sec-hint { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.4; }
.sec-card-head + .sec-hint { border-top: 0; }
/* На узком экране кнопка уходит под текст, а не сжимает его в столбик */
.sec-hint span { flex: 1 1 200px; min-width: 0; }
.sec-hint .chip { margin-left: auto !important; }
.sec-hint::before { content: ""; flex: none; align-self: flex-start; width: 6px; height: 6px; margin-top: 7px; border-radius: 50%; background: var(--hint); }
.sec-hint.main::before { background: var(--lime, var(--accent)); }
.sec-hint.warn::before { background: #f08c3a; }
.sec-hint .chip { flex: none; margin: 0; }
.sec-hint.main .chip { background: var(--lime, var(--accent)); color: var(--lime-text, #141416); font-weight: 700; }

/* Чат «Уведомления»: только чтение, под сообщениями — кнопки как в Telegram */
#view-chat.notices .composer { display: none; }
.msg.notice { max-width: 92%; }
.notice-buttons { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.notice-row { display: flex; flex-wrap: wrap; gap: 6px; }
.notice-row .chip { flex: 1 1 auto; margin: 0; justify-content: center; text-align: center; background: var(--soft); color: var(--text); font-weight: 600; }
.notice-row .chip:disabled { opacity: .5; }

/* Ночь секретаря: «Сейчас», распорядок, календарь телефона */
.sec-now { margin-top: 10px; padding: 12px 14px; border-radius: 18px; background: var(--pri, var(--text)); color: var(--pri-text, var(--bg)); }
.sec-now-current { display: flex; align-items: center; gap: 10px; }
.sec-now-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sec-now-text small { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .65; }
.sec-now-text b { font-size: 16.5px; font-weight: 750; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sec-now-text span { font-size: 13px; opacity: .75; }
.sec-now .chip { flex: none; margin: 0; background: var(--lime, var(--accent)); color: var(--lime-text, #141416); font-weight: 700; }
.sec-now-bar { height: 4px; margin-top: 10px; border-radius: 2px; background: rgb(128 128 128 / .3); overflow: hidden; }
.sec-now-bar i { display: block; height: 100%; background: var(--lime, var(--accent)); }
.sec-now-next { margin: 8px 0 0; font-size: 13.5px; opacity: .85; }
.sec-now-current + .sec-now-bar + .sec-now-next { padding-top: 8px; border-top: 1px solid rgb(128 128 128 / .25); }
.sec-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 4px 0 6px; }
.sec-tool { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 12px; border: 0; border-radius: 16px; background: var(--soft); color: var(--text); text-align: left; cursor: pointer; }
.sec-tool b { font-size: 14px; }
.sec-tool small { font-size: 12px; color: var(--hint); line-height: 1.3; }
.sec-link { padding: 10px 12px; border-radius: 12px; background: var(--soft); font-size: 12.5px; word-break: break-all; user-select: all; -webkit-user-select: all; }
.sec-how { display: grid; gap: 4px; margin: 12px 0 4px; font-size: 13.5px; line-height: 1.4; }
.sec-how b { margin-top: 6px; }
.time-row .muted { align-self: center; }
.sec-tool.wide { grid-column: 1 / -1; }
.sec-news {
  margin-top: 10px; padding: 12px 14px; border-radius: 18px;
  background: color-mix(in srgb, var(--lime, var(--accent)) 18%, var(--bg2));
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--lime, var(--accent)) 55%, transparent);
}
.sec-news .sec-card-head .icon { width: 30px; height: 30px; font-size: 14px; }
.sec-news ul { margin: 4px 0 8px; padding-left: 18px; font-size: 13.5px; line-height: 1.45; }
.sec-news .pl-actions { margin: 0; }
.sec-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin: 2px 0 10px; }
.sec-day {
  min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 2px 6px; border: 0;
  border-radius: 14px; background: transparent; color: var(--text); cursor: pointer; transition: background .25s ease;
}
.sec-day small { font-size: 10.5px; color: var(--hint); text-transform: lowercase; }
.sec-day b { font-size: 15px; font-weight: 750; font-variant-numeric: tabular-nums; }
.sec-day i { display: block; width: 70%; height: 3px; border-radius: 2px; background: var(--soft); overflow: hidden; }
.sec-day em { display: block; height: 100%; background: var(--lime, var(--accent)); }
.sec-day em.hot { background: #f08c3a; }
.sec-day span { font-size: 10.5px; color: var(--hint); font-variant-numeric: tabular-nums; }
.sec-day.today b { color: var(--lime-text, var(--text)); }
.sec-day.active { background: var(--bg2); box-shadow: inset 0 0 0 1.5px var(--lime, var(--accent)); }

/* Этап 5: аналитика, энергия, дневник, фокус */
.life-tabs { margin: 4px 0 12px; }
.life-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
.life-tile { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 14px; background: var(--soft); }
.life-tile b { font-size: 17px; font-weight: 750; font-variant-numeric: tabular-nums; }
.life-tile small { font-size: 12px; color: var(--hint); }
.life-tile i { font-style: normal; font-size: 12px; font-weight: 700; }
.life-tile i.up { color: #2f9e55; }
.life-tile i.down { color: var(--danger); }
.life-bars { display: flex; align-items: flex-end; gap: 6px; height: 120px; margin: 14px 0 4px; }
.life-bars.month { gap: 2px; }
.life-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; }
.life-col span { position: relative; flex: 1; width: 100%; max-width: 26px; border-radius: 6px; background: var(--soft); overflow: hidden; }
.life-col em { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 6px; background: var(--lime, var(--accent)); }
.life-col small { font-size: 11px; color: var(--hint); }
.life-energy { width: 8px; height: 8px; border-radius: 50%; background: transparent; }
.life-energy.e1 { background: #d94a3a; } .life-energy.e2 { background: #f08c3a; } .life-energy.e3 { background: #e8c547; }
.life-energy.e4 { background: #9ccc52; } .life-energy.e5 { background: #3fae5a; }
.life-note { margin: 10px 0 0; font-size: 14px; line-height: 1.45; }
.life-energy-row { display: flex; gap: 6px; }
.life-energy-row .chip { flex: 1; margin: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 0; }
.life-energy-row .chip span { font-size: 22px; }
.life-energy-row .chip small { font-size: 11px; color: var(--hint); }
.life-energy-row .chip.active { box-shadow: inset 0 0 0 2px var(--lime, var(--accent)); }
.life-entry { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.life-entry-head { display: flex; align-items: center; justify-content: space-between; }
.life-entry-head small { color: var(--hint); font-weight: 600; }
.life-entry p { margin: 4px 0 0; white-space: pre-wrap; font-size: 14.5px; line-height: 1.45; }
.pl-focus { flex: none; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: var(--soft); color: var(--text); font-size: 12px; }
.focus-screen {
  position: fixed; inset: 0; z-index: 30; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  padding: 24px 24px calc(24px + env(safe-area-inset-bottom)); background: var(--bg); text-align: center; animation: sheet-up .6s var(--ease-out, ease);
}
.focus-screen.hidden { display: none; }
.focus-hide { position: absolute; top: calc(14px + env(safe-area-inset-top)); left: 14px; font-size: 22px; }
.focus-label { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--hint); }
.focus-screen h2 { margin: 0; max-width: 520px; font-size: 22px; font-weight: 750; letter-spacing: -.02em; }
.focus-time { font-size: 72px; font-weight: 800; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.focus-time.small { font-size: 40px; }
.focus-screen.over .focus-time { color: #f08c3a; }
.focus-bar { width: min(320px, 80%); height: 6px; border-radius: 3px; background: var(--soft); overflow: hidden; }
.focus-bar i { display: block; height: 100%; background: var(--lime, var(--accent)); transition: width 1s linear; }
.focus-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; width: min(360px, 100%); margin-top: 12px; }
.focus-actions .primary, .focus-actions .secondary { flex: 1; min-width: 140px; }
.focus-actions .focus-music { flex-basis: 100%; margin: 0; }
.focus-pill {
  position: fixed; right: 14px; bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 24; padding: 10px 14px; border: 0; border-radius: 999px;
  background: var(--lime, var(--accent)); color: var(--lime-text, #141416); font-weight: 800; font-variant-numeric: tabular-nums; box-shadow: var(--float-shadow);
}
.focus-pill.hidden { display: none; }
.proposal-buttons .primary-chip { background: var(--lime, var(--accent)); color: var(--lime-text, #141416); font-weight: 700; }

/* Поиск текста, когда его нет */
.lyrics-more { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.lyrics-more .lyrics-wrong { margin: 0; }
.lyrics-search { flex-basis: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.lyrics-search input { width: 100%; padding: 11px 14px; border: 0; border-radius: 14px; background: rgb(255 255 255 / .14); color: inherit; font-size: 16px; }
.lyrics-search input::placeholder { color: inherit; opacity: .6; }

/* Эквалайзер в плеере */
.eq-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; max-height: 86%; overflow-y: auto;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); border-radius: 24px 24px 0 0;
  background: var(--bg2); box-shadow: 0 -8px 32px rgb(0 0 0 / .3); animation: sheet-up .6s var(--ease-out, ease);
}
.eq-sheet.hidden { display: none; }
.eq-head { display: flex; align-items: center; gap: 10px; }
.eq-head h2 { flex: 1; margin: 0; font-size: 19px; font-weight: 750; letter-spacing: -.02em; }
.eq-switch { position: relative; flex: none; width: 48px; height: 28px; padding: 0; border: 0; border-radius: 14px; background: var(--soft); cursor: pointer; transition: background .3s ease; }
.eq-switch i { position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / .3); transition: transform .3s var(--ease-out, ease); }
.eq-switch[aria-checked="true"] { background: var(--lime, var(--accent)); }
.eq-switch[aria-checked="true"] i { transform: translateX(20px); }
.eq-presets { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.eq-presets .chip { margin: 0; }
.eq-bands { display: flex; justify-content: space-between; gap: 2px; margin-top: 16px; transition: opacity .3s ease; }
.eq-sheet.off .eq-bands { opacity: .45; }
.eq-band { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.eq-band b { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.eq-band small { font-size: 11px; color: var(--hint); }
/* Поворот, а не вертикальный режим: он работает и в старых встроенных браузерах */
.eq-band span { position: relative; display: block; width: 36px; height: 170px; }
.eq-band input { position: absolute; left: 50%; top: 50%; width: 170px; height: 36px; margin: -18px 0 0 -85px; transform: rotate(-90deg); accent-color: var(--lime, var(--accent)); touch-action: none; }
.eq-sheet > p { margin: 14px 0 0; }

.pl-elapsed { flex-basis: 100%; align-self: flex-end; display: flex; align-items: center; gap: 8px; margin-top: auto; }
.pl-elapsed-line { flex: 1; height: 4px; overflow: hidden; border-radius: 2px; background: var(--soft); }
.pl-elapsed-line i { display: block; height: 100%; border-radius: 2px; background: var(--lime, var(--accent)); transition: width .9s var(--ease-out, ease); }
.pl-elapsed small { flex: none; font-size: 11.5px; font-weight: 600; color: var(--hint); font-variant-numeric: tabular-nums; }
.pl-elapsed:not(.running) small { display: none; }
.pl-form-delete { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.pl-form-delete .chip { margin: 0; background: none; border: 1px solid var(--danger); color: var(--danger); }

/* Листание дней */
.pl-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 6px; margin-bottom: 8px; }
.pl-nav .icon { flex: none; width: 42px; height: 42px; font-size: 26px; }
.pl-nav-title { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; }
.pl-nav-title b { font-size: 17px; font-weight: 750; letter-spacing: -.02em; }
.pl-nav-title small { font-size: 12.5px; color: var(--hint); }
.pl-nav .pl-nav-today { flex-basis: 100%; margin: 0; padding: 5px 12px; text-align: center; background: none; color: var(--accent); font-weight: 600; }
#plan-board.slide-next > * { animation: pl-from-right .5s var(--ease-out, ease) both; }
#plan-board.slide-prev > * { animation: pl-from-left .5s var(--ease-out, ease) both; }
@keyframes pl-from-right { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes pl-from-left { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }

/* Расписание вуза */
.pl-room { align-self: flex-start; margin-top: 3px; padding: 2px 9px; border-radius: 8px; background: var(--lime, var(--accent)); color: #141416; font-size: 13px; font-weight: 750; }
.pl-room.guess { background: var(--soft); color: var(--text); font-weight: 600; }
.pl-uni { margin-top: 12px; }
.pl-uni-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; max-height: 300px; overflow-y: auto; }
.pl-uni-group { display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 10px 12px; border: 0; border-radius: 12px; background: var(--soft); color: var(--text); text-align: left; }
.pl-uni-group b { font-size: 14.5px; }
.pl-uni-group small { font-size: 12.5px; }

/* Цели */
.pl-goals { display: flex; flex-direction: column; gap: 8px; }
.pl-goal { display: flex; flex-direction: column; gap: 8px; width: 100%; padding: 14px 16px; border: 0; border-radius: 18px; background: var(--bg2); color: var(--text); text-align: left; }
.pl-goal.done { opacity: .6; }
.pl-goal-head { display: flex; justify-content: space-between; gap: 10px; }
.pl-goal-head b { font-size: 16px; font-weight: 700; overflow-wrap: anywhere; }
.pl-goal-pct { flex: none; font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
.pl-goal .ty-bar { display: block; margin: 0; }
.pl-goal .ty-bar i.behind { background: #e8891d; }
.pl-goal small { font-size: 13px; color: var(--hint); }
.pl-goal-empty { display: flex; flex-direction: column; gap: 8px; padding: 26px 18px; border-radius: 22px; background: var(--bg2); }
.pl-goal-empty b { font-size: 19px; font-weight: 750; }
.pl-goal-empty p { margin: 0; line-height: 1.45; }
.pl-goal-update { display: flex; gap: 8px; margin-top: 10px; }
.pl-goal-update .field { flex: 1; min-width: 0; padding: 10px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg2); color: var(--text); font: inherit; }
.pl-goal-update button { flex: none; width: auto; padding: 10px 16px; }
.pl-goal-note { margin: 8px 2px 0; }
.pl-goal-steps { display: flex; flex-direction: column; gap: 6px; }
.pl-goal-step { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 12px; border-radius: 14px; background: var(--bg2); }
.pl-goal-step > span { flex: 1; min-width: 0; font-size: 15px; overflow-wrap: anywhere; }
.pl-goal-step .chip { flex: none; margin: 0; padding: 5px 10px; font-size: 12.5px; }
.pl-goal-step .icon { flex: none; width: 30px; height: 30px; font-size: 13px; color: var(--hint); }
.pl-goal-step.done > span { color: var(--hint); text-decoration: line-through; }
.pl-goal-step.done .pl-check { background: var(--lime, var(--accent)); border-color: var(--lime, var(--accent)); }
.weekly-card p { margin: 0 0 8px; line-height: 1.45; }
.weekly-facts { margin: 0 0 10px; padding-left: 18px; line-height: 1.5; font-size: 14.5px; }
.weekly-toggle { margin-top: 6px; white-space: normal; }

/* Тренажёр печати: цвет клавиши — палец, который её нажимает */
.ty-hero h2 { margin: 0 0 4px; }
.ty-hero .primary { margin-top: 14px; }
.ty-bar { height: 6px; margin-top: 10px; border-radius: 3px; background: var(--soft); overflow: hidden; }
.ty-bar i { display: block; height: 100%; border-radius: 3px; background: var(--lime, var(--accent)); transition: width .9s var(--ease-out, ease); }
.ty-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 10px; }
.ty-stat { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ty-stat b { font-size: 22px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ty-stat small { font-size: 12px; line-height: 1.25; }
.ty-tools { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 0 14px 12px; }
.ty-tool { display: flex; flex-direction: column; gap: 3px; margin: 0; padding: 14px; border: 0; text-align: left; color: var(--text); }
.ty-tool b { font-size: 15px; }
.ty-tool small { font-size: 12.5px; line-height: 1.3; }
.ty-lang { display: flex; gap: 6px; margin: 0 14px 12px; }
.ty-lang .chip { margin: 0; padding: 8px 14px; }
.ty-chart h2, .ty-heat h2, .ty-module h2 { margin: 0 0 8px; font-size: 16px; }
.ty-bars { display: flex; align-items: flex-end; gap: 3px; height: 90px; }
.ty-bars i { flex: 1; min-width: 2px; border-radius: 3px 3px 0 0; background: var(--lime, var(--accent)); }
.ty-module .muted { margin: 0 0 8px; }
.ty-lesson { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 10px 0; border: 0; border-top: 1px solid var(--line); background: none; color: var(--text); text-align: left; }
.ty-lesson.next b { color: var(--accent); }
.ty-lesson-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ty-lesson-text b { font-size: 15px; font-weight: 650; }
.ty-lesson-text small { font-size: 12.5px; }
.ty-stars { flex: none; color: #d9a514; font-size: 14px; letter-spacing: 1px; }
.ty-stars.big { margin: 0 0 10px; font-size: 26px; }
.ty-theory { padding: 8px 0; }
.ty-theory p { margin: 4px 0 0; line-height: 1.45; }
.ty-theory-title { display: block; margin: 10px 0 6px; }

.ty {
  position: fixed; inset: 0; z-index: 19; display: flex; flex-direction: column; gap: 8px; background: var(--bg); color: var(--text);
  padding: calc(6px + env(safe-area-inset-top)) 14px calc(10px + env(safe-area-inset-bottom)); overflow: hidden;
}
body:has(> .ty) .mini-player { display: none !important; }
.ty button { font-family: inherit; }
.ty-top { display: flex; align-items: center; gap: 8px; }
.ty-close { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 12px; background: none; color: var(--text); }
.ty-head { display: flex; flex-direction: column; min-width: 0; }
.ty-head b { font-size: 16px; }
.ty-head small { font-size: 12.5px; color: var(--hint); line-height: 1.25; }
.ty-live { display: flex; justify-content: space-around; gap: 8px; }
.ty-live span { display: flex; flex-direction: column; align-items: center; }
.ty-live b { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ty-live small { font-size: 11.5px; color: var(--hint); }
.ty-progress { flex: none; height: 4px; border-radius: 2px; background: var(--soft); overflow: hidden; }
.ty-progress i { display: block; width: 0; height: 100%; background: var(--lime, var(--accent)); transition: width .3s linear; }
.ty-text {
  position: relative; flex: 1 1 120px; min-height: 96px; max-width: 760px; width: 100%; margin: 0 auto; overflow: hidden; padding: 10px 2px;
  font-size: clamp(20px, 5.4vw, 27px); line-height: 1.55; font-variant-ligatures: none; white-space: pre-wrap; overflow-wrap: anywhere; cursor: text;
}
.ty-text span { color: var(--hint); border-radius: 3px; }
.ty-text span.done { color: var(--text); }
.ty-text span.now { color: var(--text); background: color-mix(in srgb, var(--lime, var(--accent)) 45%, transparent); box-shadow: 0 2px 0 var(--text); }
.ty-text span.miss { color: #fff; background: var(--danger); box-shadow: none; }
.ty-text span.done.miss { color: var(--danger); background: none; }
.ty-text span.shake { animation: ty-shake .18s ease; }
@keyframes ty-shake { 25% { translate: -2px 0; } 75% { translate: 2px 0; } }
.ty-hint { flex: none; min-height: 18px; margin: 0; text-align: center; font-size: 13px; color: var(--hint); }
.ty-hint.warn { color: var(--danger); font-weight: 650; }
.ty-input { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; font-size: 16px; resize: none; }
.ty-keyboard { flex: none; display: flex; flex-direction: column; gap: 3px; width: 100%; max-width: 760px; margin: 0 auto; user-select: none; -webkit-user-select: none; }
.ty-row { display: flex; gap: 3px; justify-content: center; }
.ty-row.r1 { padding-left: 3%; }
.ty-row.r2 { padding-left: 5%; padding-right: 8%; }
.ty-key {
  flex: 1 1 0; min-width: 0; display: grid; place-items: center; height: clamp(24px, 6.4vw, 40px); border-radius: 6px;
  background: var(--soft); color: var(--text); font-size: clamp(10px, 2.8vw, 14px); font-weight: 600; transition: background-color .12s ease, transform .12s ease;
}
.ty-key.wide { flex: 1.6 1 0; font-size: clamp(8px, 2.2vw, 12px); }
.ty-key.space { flex: 0 1 46%; }
.ty-key.home { box-shadow: inset 0 -3px 0 color-mix(in srgb, var(--text) 40%, transparent); }
.ty-key.f0, .ty-key.f7 { background: color-mix(in srgb, #e8590c 22%, var(--bg2)); }
.ty-key.f1, .ty-key.f6 { background: color-mix(in srgb, #2f9e44 22%, var(--bg2)); }
.ty-key.f2, .ty-key.f5 { background: color-mix(in srgb, #1c7ed6 22%, var(--bg2)); }
.ty-key.f3, .ty-key.f4 { background: color-mix(in srgb, #ae3ec9 20%, var(--bg2)); }
.ty-key.next { background: var(--lime, var(--accent)) !important; color: #141416; transform: translateY(1px); }
.ty-key.heat0 { background: color-mix(in srgb, #2f9e44 25%, var(--bg2)); }
.ty-key.heat1 { background: color-mix(in srgb, #f08c00 28%, var(--bg2)); }
.ty-key.heat2 { background: color-mix(in srgb, #e8590c 45%, var(--bg2)); }
.ty-key.heat3 { background: color-mix(in srgb, #e03131 65%, var(--bg2)); color: #fff; }
.ty-result { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; padding: 16px; background: color-mix(in srgb, var(--bg) 88%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.ty-result .card { width: 100%; max-width: 420px; margin: 0; animation: sheet-item .7s var(--ease-out, ease) both; }
.ty-result h2 { margin: 0 0 10px; }
.ty-actions { display: flex; gap: 8px; margin-top: 12px; }
.ty-actions button { flex: 1; }
/* Экранная клавиатура телефона занимает полэкрана: подсказку-схему убираем, остаётся название пальца */
@media (max-height: 560px) {
  .ty .ty-keyboard { display: none; }
}

/* Голосовой разговор: кольцо и точка, как на значке приложения; точка дышит голосом */
.talk {
  --level: 0; --talk-hint: rgb(255 255 255 / .55);
  position: fixed; inset: 0; z-index: 19; display: flex; flex-direction: column; align-items: center;
  padding: env(safe-area-inset-top) 20px calc(26px + env(safe-area-inset-bottom));
  background: #0d0d0f; color: #f4f4f5; user-select: none; -webkit-user-select: none;
  animation: ve-in .7s var(--ease-out, ease);
}
.talk.leaving { animation: ve-out .35s ease forwards; }
body:has(> .talk) .mini-player, body:has(> .ve) .mini-player { display: none !important; }
.talk button { font-family: inherit; color: inherit; }
.talk-top { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 8px 0; }
.talk-ic { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 12px; background: none; }
.talk-ic:active { background: rgb(255 255 255 / .1); }
.talk-voice { padding: 8px 14px; border: 0; border-radius: 999px; background: rgb(255 255 255 / .1); font-size: 14px; font-weight: 600; }
.talk-lines { flex: 1; min-height: 0; width: 100%; max-width: 460px; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; overflow-y: auto; padding: 8px 0 18px; }
.talk-lines p { margin: 0; text-align: center; }
.talk-lines p:empty { display: none; }
.talk-heard { font-size: 14.5px; line-height: 1.4; color: var(--talk-hint); }
.talk-said { font-size: 18px; line-height: 1.42; font-weight: 600; user-select: text; -webkit-user-select: text; animation: sheet-item .9s var(--ease-out, ease) both; }
.talk-orb {
  position: relative; flex: none; display: grid; place-items: center; width: 190px; height: 190px; padding: 0; border: 0; border-radius: 50%;
  background: none; box-shadow: inset 0 0 0 3px rgb(255 255 255 / .16);
  transition: box-shadow .8s ease, transform .9s var(--ease-spring, ease);
}
.talk-orb:active { transform: scale(.96); }
.talk-orb i {
  display: block; width: 64px; height: 64px; border-radius: 50%; background: var(--lime, #c8f169);
  transform: scale(calc(1 + var(--level) * 1.15)); transition: transform .12s linear, opacity .6s ease;
}
.talk[data-phase="ready"] .talk-orb i { opacity: .55; }
.talk[data-phase="listening"] .talk-orb, .talk[data-phase="manual"] .talk-orb { box-shadow: inset 0 0 0 3px var(--lime, #c8f169); }
.talk[data-phase="recognising"] .talk-orb i, .talk[data-phase="thinking"] .talk-orb i { animation: talk-think 1.8s ease-in-out infinite; }
.talk[data-phase="speaking"] .talk-orb i { animation: talk-speak 1.1s ease-in-out infinite; }
@keyframes talk-think { 0%, 100% { transform: scale(.72); opacity: .55; } 50% { transform: scale(.95); opacity: 1; } }
@keyframes talk-speak { 0%, 100% { transform: scale(1); } 35% { transform: scale(1.32); } 65% { transform: scale(1.12); } }
.talk-foot { flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 62px; padding-top: 18px; text-align: center; }
.talk-status { font-size: 17px; font-weight: 700; }
.talk-hint { font-size: 13px; color: var(--talk-hint); }
.talk-rates { margin-top: 12px; }

/* Шторки редактора: кадр над ними не затемняем и не размываем — правку видно сразу */
body:has(> .ve) .overlay { background: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
body:has(> .ve) .panel { max-height: 55%; }
.ve-slider { display: flex; flex-direction: column; gap: 4px; margin: 10px 0; }
.ve-slider-head { display: flex; justify-content: space-between; font-size: 14px; }
.ve-slider-head b { font-variant-numeric: tabular-nums; font-weight: 650; }
.ve-slider input { width: 100%; accent-color: var(--lime, var(--accent)); }
.ve-filters { display: flex; gap: 10px; overflow-x: auto; padding: 2px 0 8px; scrollbar-width: none; }
.ve-filter { flex: none; display: flex; flex-direction: column; align-items: center; gap: 5px; border: 0; background: none; color: var(--text); padding: 0; }
.ve-filter-swatch { width: 58px; height: 58px; border-radius: 12px; background: #444 center / cover no-repeat; }
.ve-filter small { font-size: 11.5px; }
.ve-colors { display: flex; gap: 10px; margin: 6px 0 12px; }
.ve-color { width: 32px; height: 32px; border-radius: 50%; border: 0; padding: 0; box-shadow: inset 0 0 0 1px rgb(127 127 127 / .4); }
.ve-color.active { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--text); }

/* =====================================================================================
   «Музыка» — тёмная витрина в любой теме (2026-11-12). Без серых карточек: обложки лежат прямо на фоне,
   сверху фон подсвечен цветом играющего трека. Под волной — разделы вертикально, без горизонтальных лент
   ===================================================================================== */
#view-music, body.music-dark .tabs, body.music-dark #mini-player, .player {
  --bg: #0b0b0d; --bg2: rgba(255, 255, 255, .07); --text: #f3f3f5; --hint: #9b9ba4;
  --pri: #f3f3f5; --pri-text: #0b0b0d; --line: rgba(255, 255, 255, .08); --soft: rgba(255, 255, 255, .07);
  --accent: #f3f3f5; --accent-text: #0b0b0d;
  color: var(--text);
}
#view-music {
  background:
    radial-gradient(130% 55% at 50% -10%, color-mix(in srgb, var(--vibe1, #7c5cff) 30%, transparent) 0%, transparent 70%),
    #0b0b0d;
}
body.music-dark .tabs { background: #0b0b0d; border-top-color: rgba(255, 255, 255, .06); }
body.music-dark .mini-player { background: #1b1b20; }

/* Шапка: заголовок и значок поиска; поиск — поле с «Отменой» вместо вкладок */
#view-music .bar { display: flex; align-items: center; justify-content: space-between; }
.music-search-btn {
  width: 40px; height: 40px; border-radius: 50%; border: 0; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .08); color: var(--text);
}
.music-search-btn svg.li { width: 20px; height: 20px; }
#view-music:not(.search-mode) #music-search { display: none; }
#view-music.search-mode #music-tabs, #view-music.search-mode .music-search-btn { display: none; }
#music-search { display: flex; align-items: center; gap: 10px; }
#music-search input { flex: 1; min-width: 0; }
.music-search-cancel { flex: none; background: none; border: 0; color: var(--text); font: inherit; font-size: 15px; font-weight: 600; padding: 8px 2px; }
#music-tabs { background: rgba(255, 255, 255, .06); }
#view-music #music-tabs button { background: transparent; color: var(--hint); opacity: 1; box-shadow: none; }
#view-music #music-tabs button.active { background: #f3f3f5; color: #0b0b0d; }

/* Без серых плашек: заголовок раздела крупно, содержимое прямо на фоне */
#view-music .music-card { background: transparent; border: 0; padding: 6px 2px 4px; }
#view-music .music-card h2, .music-shelf-head h2 { font-size: 21px; font-weight: 800; letter-spacing: -.02em; }
#view-music .music-card h2 { margin: 0 4px 10px; }
#view-music .track.playing { background: rgba(255, 255, 255, .07); }
#view-music .track:active { background: rgba(255, 255, 255, .06); }

/* Разделы витрины */
.music-home { display: flex; flex-direction: column; gap: 26px; padding: 8px 14px 28px; }
#music-body > .music-shelf { margin: 12px 14px 24px; }
.music-shelf-head { display: flex; align-items: baseline; justify-content: space-between; margin: 0 4px 12px; }
.music-shelf-head h2 { margin: 0; }
.music-shelf-more { background: none; border: 0; color: var(--hint); font: inherit; font-size: 14px; font-weight: 600; padding: 4px 0; }
/* Волна — на весь первый экран, но краешек раздела под ней виден: понятно, что ниже есть ещё */
#music-body.has-home .wave-stage { min-height: calc(100% - 46px); }

/* Обложка плейлиста — мозаика из обложек треков */
.mosaic {
  flex: none; width: 52px; height: 52px; border-radius: 10px; overflow: hidden; display: grid;
  background: rgba(255, 255, 255, .07); color: var(--text);
}
.mosaic.four { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.mosaic img { width: 100%; height: 100%; object-fit: cover; display: block; min-width: 0; min-height: 0; }
.mosaic.empty { place-items: center; background: linear-gradient(135deg, hsl(var(--h) 62% 46%), hsl(calc(var(--h) + 50) 58% 20%)); }
.mosaic.add { place-items: center; background: none; border: 1.5px dashed rgba(255, 255, 255, .25); }
.mosaic svg.li, .mosaic .ic { width: 24px; height: 24px; }
#view-music .playlist-row { gap: 12px; padding-right: 4px; }
.pl-more { font-size: 22px; line-height: 1; color: var(--hint); }
.pl-add small { color: var(--hint); }

/* Плейлисты на главной — сетка в две колонки */
.pl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 12px; }
.pl-tile { display: flex; flex-direction: column; gap: 8px; min-width: 0; background: none; border: 0; padding: 0; text-align: left; color: var(--text); font: inherit; }
.pl-tile:active { transform: scale(.98); }
.pl-tile .mosaic { width: 100%; height: auto; aspect-ratio: 1; border-radius: 14px; }
.pl-tile .mosaic.empty svg.li { width: 38px; height: 38px; }
.pl-tile-text { display: flex; flex-direction: column; min-width: 0; padding: 0 2px; }
.pl-tile-text b { font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-tile-text small { color: var(--hint); font-size: 13px; }

/* Артисты — круги сеткой в три колонки */
.artist-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 10px; }
.artist-cell { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; background: none; border: 0; padding: 0; color: var(--text); font: inherit; }
.artist-cell:active { transform: scale(.97); }
.artist-round { width: 100%; max-width: 100px; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: rgba(255, 255, 255, .07); }
.artist-round img { width: 100%; height: 100%; object-fit: cover; display: block; }
.artist-cell b { max-width: 100%; font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.artist-cell small { margin-top: -4px; font-size: 11.5px; color: var(--hint); }

/* Пустой поиск: недавние запросы и плитки настроений */
.recent-searches { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 2px; }
.recent-searches .chip { margin: 0; }
.mood-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mood-tile {
  height: 86px; border: 0; border-radius: 16px; padding: 12px 14px; display: flex; align-items: flex-end; text-align: left;
  font: inherit; font-size: 17px; font-weight: 800; letter-spacing: -.01em; color: #fff;
  background: linear-gradient(135deg, var(--c1, #7c5cff), var(--c2, #241a52));
}
.mood-tile:active { transform: scale(.97); }
.mood-tile[data-mood="any"] { --c1: #7c5cff; --c2: #26185e; }
.mood-tile[data-mood="energy"] { --c1: #ff7a2f; --c2: #8f1740; }
.mood-tile[data-mood="calm"] { --c1: #38bdf8; --c2: #123f5c; }
.mood-tile[data-mood="sad"] { --c1: #6b7cff; --c2: #1c1f45; }
.mood-tile[data-mood="focus"] { --c1: #14b8a6; --c2: #0c3633; }
.mood-tile[data-mood="party"] { --c1: #ec4899; --c2: #4c1880; }
.mood-tile[data-mood="new"] { --c1: #84cc16; --c2: #213b0b; }

/* Волна в покое — цветное «сияние» вместо чёрного квадрата; без лишних подписей */
.wave-card.empty .wave-card-art {
  background:
    radial-gradient(circle at 28% 30%, #8b5cf6 0%, transparent 58%),
    radial-gradient(circle at 76% 72%, #ec4899 0%, transparent 55%),
    radial-gradient(circle at 70% 18%, #38bdf8 0%, transparent 46%),
    #17131f;
}
.wave-card.empty .wave-card-icon { color: #fff; }
.wave-top p:empty { display: none; }
.wave-card-text small { white-space: normal; }

/* Скачать плейлист — круглая кнопка рядом со «Слушать» */
.playlist-actions .pl-dl { flex: none; width: 44px; padding: 9px 0; }

/* Музыкальный бот (?app=music): только «Музыка» — без вкладок, меню разделов и пространств.
   Вкладки держали отступ от «полоски» iPhone — теперь его держит само приложение */
html.music-app .tabs, html.music-app #more-menu, html.music-app #space-bar { display: none !important; }
html.music-app #app { padding-bottom: env(safe-area-inset-bottom); background: #0b0b0d; }
/* Вкладки «Главная / Моё» не нужны: «Моё» открывается из «Все» и профиля */
html.music-app #music-tabs { display: none !important; }
html.music-app #view-music .bar { gap: 8px; }
.music-back { margin-left: -6px; }

/* Аватарка в шапке — вход в профиль. Фото из Telegram ложится поверх буквы */
.music-avatar {
  position: relative; flex: none; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  background: #534ab7; color: #fff; font-size: 15px; font-weight: 700;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .08);
}
.music-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.music-avatar.big { width: 72px; height: 72px; font-size: 28px; }

/* Профиль: кто я и строки связи */
.mp-head { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 4px 0 18px; text-align: center; }
.mp-head b { margin-top: 8px; font-size: 18px; }
.mp-list { display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; background: rgba(255, 255, 255, .05); }
.mp-row {
  display: flex; align-items: center; gap: 14px; width: 100%; padding: 13px 16px; border: 0; background: none;
  color: var(--text); text-align: left; font: inherit;
}
.mp-row + .mp-row { border-top: 1px solid rgba(255, 255, 255, .06); }
.mp-icon { flex: none; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 12px 9px 13px 8px; background: rgba(124, 92, 255, .16); color: #b7a8ff; }
.mp-icon svg.li { width: 19px; height: 19px; }
.mp-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mp-text b { font-weight: 600; }
.mp-text small { color: var(--hint); font-size: 12.5px; }

.mp-logout { display: block; width: 100%; margin-top: 14px; padding: 12px; border: 0; background: none; color: var(--danger); font: inherit; }

/* Установка «Музыки» на экран «Домой»: шаги с неровными номерами */
.mi-steps { margin: 4px 0 12px; padding: 0; list-style: none; counter-reset: mi; display: flex; flex-direction: column; gap: 12px; }
.mi-steps li { position: relative; padding-left: 40px; line-height: 1.4; counter-increment: mi; }
.mi-steps li::before {
  content: counter(mi); position: absolute; left: 0; top: -2px; width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px;
  border-radius: 12px 8px 13px 7px; background: rgba(124, 92, 255, .2); color: #c9bfff;
}
.web-login-hint { margin-top: 18px; }
/* Значок «Изгиб» терракотовый — свечение под него тёплое, а не синее, как у Friend */
.music-login .web-login-logo { box-shadow: 0 12px 40px rgba(200, 85, 61, .35); }

/* ---------- Главный экран музыкального бота: живая клякса волны ---------- */
.blob-stage {
  --beat: 0; --hit: 0;
  display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 8px 16px 22px;
}
.blob {
  position: relative; width: min(64vw, 250px); aspect-ratio: 1 / .9; padding: 0; border: 0; background: none;
  display: flex; align-items: center; justify-content: center; -webkit-tap-highlight-color: transparent;
  transform: scale(calc(1 + var(--beat) * .07 + var(--hit) * .05)); transition: transform .12s ease-out;
}
.blob:active { transform: scale(.96); }
.blob-a, .blob-b { position: absolute; display: block; animation: blob-morph 14s ease-in-out infinite; }
.blob-a {
  inset: 0; background: #534ab7;
  border-radius: 58% 42% 55% 45% / 46% 58% 42% 54%;
}
.blob-b {
  inset: 16% 14% 20% 18%; background: #d4537e; opacity: .78; mix-blend-mode: screen;
  border-radius: 44% 56% 38% 62% / 60% 40% 58% 42%;
  animation-duration: 11s; animation-direction: reverse;
  transform: rotate(calc(var(--hit) * 14deg));
}
.blob-stage.is-playing .blob-a { animation-duration: 6s; }
.blob-stage.is-playing .blob-b { animation-duration: 4.5s; }
.blob-stage.is-loading .blob-a, .blob-stage.is-loading .blob-b { animation-duration: 2.5s; }
@keyframes blob-morph {
  0%, 100% { border-radius: 58% 42% 55% 45% / 46% 58% 42% 54%; }
  25% { border-radius: 42% 58% 40% 60% / 58% 42% 60% 40%; }
  50% { border-radius: 63% 37% 48% 52% / 40% 62% 38% 60%; }
  75% { border-radius: 47% 53% 64% 36% / 55% 45% 52% 48%; }
}
.blob-icon { position: relative; display: inline-flex; color: #fff; filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .25)); }
.blob-icon svg { width: 46px; height: 46px; }
:root[data-motion="off"] .blob-a, :root[data-motion="off"] .blob-b { animation: none; }
@media (prefers-reduced-motion: reduce) { .blob-a, .blob-b { animation: none; } }

/* Шёлковые волны (canvas, см. silkDraw в app.js) в скруглённой карточке-«окне»; под ней строка:
   слева название волны или трек, справа кнопка ▶. Нижний холст — фон и свечение нитей (размыт CSS),
   верхний — чёткие тонкие нити. Углы карточки чуть разные — не идеально ровная форма */
.blob-stage { padding-top: 4px; gap: 16px; }
/* Прозрачное место под волнами (сами волны — фон экрана .yumo-bg): нажатие включает волну или открывает плеер */
.vibe-card { position: relative; align-self: stretch; height: min(72vw, 300px); cursor: pointer; }

/* Шёлковые волны — фон верхней части экрана Yumo, как в большом плеере. Стоят на месте при прокрутке
   и книзу растворяются в тёмном фоне, чтобы списки под ними читались. Только на главной волны */
.yumo-bg { display: none; }
html.music-app #view-music { position: relative; background: #0b0b0d; }
html.music-app #view-music.wave-mode .yumo-bg {
  display: block; position: absolute; left: 0; right: 0; top: 0; height: min(135vw, 600px); z-index: 0; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 100%);
}
.yumo-bg canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.yumo-silk { filter: blur(10px) saturate(1.25); transform: scale(1.06); }
.yumo-silk-detail { mix-blend-mode: screen; opacity: .85; }
html.music-app #view-music > :not(.yumo-bg) { position: relative; z-index: 1; }
html.music-app #view-music.wave-mode #music-body, html.music-app #view-music.wave-mode .bar { background: transparent; }
.vibe-row { align-self: stretch; display: flex; align-items: center; gap: 14px; padding: 2px 4px 0; }
.vibe-info { flex: 1; min-width: 0; }
.vibe-info.tappable { cursor: pointer; }
.vibe-title {
  font-size: 28px; font-weight: 800; line-height: 1.1; letter-spacing: -.025em; color: #fff;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vibe-sub { margin: 3px 0 0; color: #d5a99a; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.blob.vibe-play {
  position: relative; flex: none; width: 62px; height: 62px; aspect-ratio: auto; margin: 0; background: #fff1dc;
  border-radius: 52% 48% 50% 50% / 50% 53% 47% 50%; box-shadow: 0 8px 26px rgba(255, 110, 60, .3);
  transform: scale(calc(1 + var(--beat) * .05 + var(--hit) * .04));
}
.blob.vibe-play:active { transform: scale(.94); }
.blob.vibe-play .blob-icon { color: #2a1410; filter: none; }
.blob.vibe-play .blob-icon svg { width: 28px; height: 28px; }

.blob-text { display: flex; flex-direction: column; align-items: center; gap: 3px; max-width: 100%; text-align: center; }
.blob-text h2 { margin: 0; max-width: 100%; font-size: 22px; font-weight: 800; letter-spacing: -.02em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.blob-text p { margin: 0; max-width: 100%; color: #afa9ec; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.blob-text.tappable { cursor: pointer; }

.blob-controls { display: flex; gap: 14px; }
.blob-btn {
  width: 46px; height: 46px; padding: 0; border: 0; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .08); color: #f2f2f2; border-radius: 52% 48% 45% 55% / 48% 55% 45% 52%;
}
.blob-btn svg { width: 22px; height: 22px; }
.blob-btn.on { color: #ff6b9a; }
.blob-btn:disabled { opacity: .35; }

/* Настроения — переносятся на новую строку, а не уходят за край; углы нарочно неровные */
.blob-moods { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; max-width: 380px; }
.blob-chip {
  padding: 7px 13px; border: 0; background: rgba(255, 255, 255, .08); color: #e8e8ee; font: inherit; font-size: 13.5px;
  border-radius: 15px 7px 14px 8px;
}
.blob-chip:nth-child(2n) { border-radius: 7px 15px 8px 14px; }
.blob-chip:nth-child(3n) { border-radius: 14px 9px 15px 6px; }
.blob-chip.active { background: #f2f2f2; color: #0b0b0d; font-weight: 600; }
.blob-chip.ghost { background: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); color: #afa9ec; }

.blob-import {
  display: flex; align-items: center; gap: 12px; width: calc(100% - 32px); margin: 4px 16px 20px; padding: 12px 14px;
  border: 0; border-radius: 18px 12px 20px 10px; background: rgba(124, 92, 255, .12); color: var(--text); text-align: left; font: inherit;
}
.blob-import > span:last-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.blob-import small { color: var(--hint); font-size: 12.5px; }
.blob-import-icon { flex: none; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 13px 9px 12px 8px; background: rgba(124, 92, 255, .22); color: #c9bfff; }
/* Значок «E» у трека — оригинальная версия без цензуры (пометка Explicit из YouTube Music) */
.track-explicit {
  display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; margin-right: 5px;
  border-radius: 3px; background: rgba(255, 255, 255, .22); color: #0b0b0d; font-size: 9.5px; font-style: normal;
  font-weight: 800; vertical-align: 1px;
}

/* ---------- Yumo: большой плеер в стиле главного экрана ----------
   Фон — шёлковые волны (те же холсты, что на главном экране, см. silkDraw), тёплый тёмный цвет; обложка с
   чуть разными углами, как карточка волн; сливочная кнопка ▶; полоса перемотки — цвета лент. Только в Yumo */
html.music-app #player { background: #0c070b; --m-grad: linear-gradient(90deg, #7b4dff, #ff5fa2, #ffb547); }
html.music-app #player .player-aurora, html.music-app #player .player-glow { display: none; }
.player-silk, .player-silk-detail { display: none; }
html.music-app #player .player-silk, html.music-app #player .player-silk-detail {
  display: block; position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0;
}
html.music-app #player .player-silk { filter: blur(12px) saturate(1.25); opacity: .85; transform: scale(1.06); }
html.music-app #player .player-silk-detail { mix-blend-mode: screen; opacity: .55; }
html.music-app #player > :not(canvas) { position: relative; z-index: 1; }
/* Сверху и снизу — затемнение, чтобы заголовок и кнопки читались поверх волн */
html.music-app #player::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(12, 7, 11, .7) 0%, rgba(12, 7, 11, 0) 22%, rgba(12, 7, 11, 0) 50%, rgba(12, 7, 11, .82) 72%);
}
html.music-app #player .cover-box img, html.music-app #player .cover-box .lyrics {
  border-radius: 30px 22px 32px 24px;
}
html.music-app #player .cover-box img {
  box-shadow: 0 24px 60px -18px rgba(255, 110, 60, .45), 0 0 0 1px rgba(255, 220, 200, .08);
}
html.music-app #player .player-card { background: none; border: 0; box-shadow: none; backdrop-filter: none; }
html.music-app #player .player-meta b { font-size: 26px; font-weight: 800; letter-spacing: -.025em; color: #fff; }
html.music-app #player .player-meta span { color: #d5a99a; }
html.music-app #player .player-times { color: #b99a90; }
html.music-app #player .play-big {
  background: #fff1dc; color: #2a1410; border-radius: 52% 48% 50% 50% / 50% 53% 47% 50%;
  box-shadow: 0 10px 30px rgba(255, 110, 60, .35);
}
html.music-app #player .play-big .ic { filter: none; }
html.music-app #player .ctl { color: #f2e6dc; }
html.music-app #player .ctl.mode.on, html.music-app #player .ctl.on { color: #ffb547; }
html.music-app #player #player-seek::-webkit-slider-thumb { background: #fff1dc; border-color: #0c070b; }
html.music-app #player #player-seek::-moz-range-thumb { background: #fff1dc; border-color: #0c070b; }
html.music-app #player .player-lyrics { background: rgba(20, 12, 22, .72); color: #fff1dc; border-radius: 14px 9px 15px 8px; }
html.music-app #player .link-btn { color: #d5a99a; }
/* Yumo: большой плеер ровно по экрану, без прокрутки — обложка ужимается под оставшееся место
   (размер по контейнеру .player-cover, см. .cover-box), нижние блоки компактнее */
/* clip, а не просто hidden: увеличенный размытый слой волн выходит за край и иначе давал сдвинуть экран */
html.music-app #player { overflow: hidden; overflow: clip; }
html.music-app #player .player-cover { flex: 1 1 0; min-height: 0; padding: 8px 24px 4px; }
html.music-app #player .player-card { flex: none; padding: 6px 22px 4px; }
html.music-app #player .player-meta b { font-size: 24px; }
html.music-app #player .player-controls { margin: 6px 0 2px; }
html.music-app #player #player-status:empty { display: none; }
html.music-app #player .player-extra { gap: 0 14px; }
/* Yumo: «Текст» — обложка полностью пропадает, текст занимает всё место между шапкой и названием трека,
   строки крупнее; подложки нет — фоном остаются шёлковые волны плеера */
html.music-app #player.lyrics-open .player-cover { padding: 0 6px; }
html.music-app #player.lyrics-open .cover-box {
  width: 100%; height: 100%; max-width: none; aspect-ratio: auto; transform: none; scale: 1;
}
/* Обложка скрывается сразу (без перехода): текст и так плавно выплывает своей анимацией */
html.music-app #player.lyrics-open .cover-box > img { transition: none; }
/* !important — иначе анимация появления новой обложки (при смене трека) перекрывает скрытие */
html.music-app #player.lyrics-open .cover-box > img { opacity: 0 !important; visibility: hidden !important; box-shadow: none; }
html.music-app #player.lyrics-open .lyrics { background: transparent; border-radius: 0; }
html.music-app #player.lyrics-open .lyrics .lyrics-light { display: none; }
html.music-app #player.lyrics-open .lyrics-body { padding: 18% 18px 55%; }
html.music-app #player.lyrics-open .lyrics .lyrics-line { margin-bottom: 14px; font-size: 27px; line-height: 1.24; font-weight: 800; letter-spacing: -.02em; }
html.music-app #player.lyrics-open .lyrics .lyrics-line.gap { font-size: 19px; }
html.music-app #player.lyrics-open .lyrics .lyrics-line.plain { font-size: 22px; line-height: 1.3; margin-bottom: 8px; }
html.music-app #player.lyrics-open .lyrics .lyrics-line.now { text-shadow: 0 0 22px rgba(255, 140, 90, .55); }
html.music-app #player.lyrics-open .lyrics .lyrics-note { font-size: 18px; }