/* ============ тема: свои цвета; светлая или тёмная — по Telegram / системе (классы .light / .dark на <html>) ============ */
:root {
  --bg: #f3f4f9;
  --bg-2: #eceef5;
  --card: #ffffff;
  --card-2: #f7f8fc;
  --text: #11131a;
  --sub: #545b6b;
  --hint: #8a90a0;
  --accent: #6d5efc;
  --accent-2: #3d8bff;
  --accent-text: #ffffff;
  --link: #5b4df0;
  --danger: #ef4459;
  --ok: #17b26a;
  --warn: #f08c00;
  --stroke: rgba(17, 19, 30, .07);
  --line: rgba(17, 19, 30, .07);
  --fill: rgba(17, 19, 30, .05);
  --accent-soft: color-mix(in srgb, var(--accent) 12%, transparent);
  --grad: linear-gradient(135deg, #7b5cff 0%, #4f7dff 100%);
  --glow: 0 8px 24px -6px color-mix(in srgb, var(--accent) 55%, transparent);
  --shadow: 0 0 0 1px var(--stroke), 0 1px 2px rgba(17, 19, 30, .04), 0 6px 20px -8px rgba(17, 19, 30, .10);
  --shadow-lg: 0 0 0 1px var(--stroke), 0 20px 50px -12px rgba(17, 19, 30, .25);
  --glass: rgba(255, 255, 255, .78);
  --r: 18px;
  --tab-h: 74px;
  --safe-b: max(env(safe-area-inset-bottom), var(--tg-safe-area-inset-bottom, 0px));
  --ease: cubic-bezier(.2, .9, .25, 1);
}
html.dark {
  --bg: #0b0c10;
  --bg-2: #101218;
  --card: #15171e;
  --card-2: #1b1e27;
  --text: #f1f2f6;
  --sub: #a4aaba;
  --hint: #6c7283;
  --accent: #8b7bff;
  --accent-2: #4f8cff;
  --link: #a397ff;
  --danger: #ff5c70;
  --ok: #34d399;
  --warn: #ffb547;
  --stroke: rgba(255, 255, 255, .065);
  --line: rgba(255, 255, 255, .06);
  --fill: rgba(255, 255, 255, .055);
  --accent-soft: color-mix(in srgb, var(--accent) 16%, transparent);
  --grad: linear-gradient(135deg, #8b6cff 0%, #4f7dff 100%);
  --glow: 0 10px 30px -8px color-mix(in srgb, var(--accent) 60%, transparent);
  --shadow: 0 0 0 1px var(--stroke), inset 0 1px 0 rgba(255, 255, 255, .03), 0 10px 30px -14px rgba(0, 0, 0, .7);
  --shadow-lg: 0 0 0 1px var(--stroke), 0 30px 80px -20px rgba(0, 0, 0, .8);
  --glass: rgba(18, 20, 27, .72);
  color-scheme: dark;
}
html.light { color-scheme: light; }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text);
  font: 16px/1.4 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased; overscroll-behavior-y: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
.hidden { display: none !important; }
svg { display: block; }

#screen { padding: 8px 16px calc(var(--tab-h) + 86px + var(--safe-b)); max-width: 720px; margin: 0 auto;
  animation: fade .18s ease-out; }
body.no-composer #screen { padding-bottom: calc(var(--tab-h) + 24px + var(--safe-b)); }
@keyframes fade { from { opacity: .4; transform: translateY(4px); } }

/* ============ заголовки экранов ============ */
.head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 14px 4px 12px; }
.head h1 { margin: 0; font-size: 30px; line-height: 1.1; font-weight: 750; letter-spacing: -.02em; }
.head .eyebrow { color: var(--hint); font-size: 14px; font-weight: 500; margin-bottom: 4px; }
.head .eyebrow::first-letter { text-transform: uppercase; }
.back-link { display: inline-flex; align-items: center; gap: 4px; color: var(--link); font-size: 16px; font-weight: 500; padding: 8px 4px 0; }
.head .subtitle { color: var(--hint); font-size: 14px; margin-top: 4px; }
.head .big-icon { font-size: 34px; line-height: 1; margin-bottom: 6px; }
.head-actions { display: flex; gap: 8px; flex: none; }
.icon-btn { width: 38px; height: 38px; border-radius: 50%; background: var(--card); box-shadow: var(--shadow);
  display: grid; place-items: center; font-size: 17px; color: var(--accent); }
.icon-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon-btn.on { background: var(--accent); color: var(--accent-text); }

/* ============ секции ============ */
.section { margin-top: 22px; }
.section-head { display: flex; justify-content: space-between; align-items: baseline; padding: 0 4px 8px; }
.section-head h2 { margin: 0; font-size: 13px; font-weight: 650; text-transform: uppercase; letter-spacing: .06em; color: var(--hint); }
.section-head h2.red { color: var(--danger); }
.section-head .link { color: var(--link); font-size: 15px; font-weight: 500; }
.count-pill { display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: 99px; background: var(--fill);
  color: var(--hint); font-size: 12px; line-height: 19px; letter-spacing: 0; vertical-align: 1px; }

.card { background: var(--card); border-radius: var(--r); box-shadow: var(--shadow); overflow: hidden; }

/* ============ чипы-фильтры ============ */
.chips { display: flex; gap: 8px; overflow-x: auto; margin: 0 -16px; padding: 2px 16px 4px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; height: 34px; padding: 0 14px; border-radius: 99px; background: var(--card); box-shadow: var(--shadow);
  font-size: 14.5px; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.chip .n { color: var(--hint); font-size: 13px; }
.chip.on { background: var(--accent); color: var(--accent-text); }
.chip.on .n { color: inherit; opacity: .75; }

/* ============ статистика на главной ============ */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.stat { background: var(--card); border-radius: var(--r); box-shadow: var(--shadow); padding: 12px; text-align: left; }
.stat .num { font-size: 26px; font-weight: 750; line-height: 1.1; letter-spacing: -.02em; }
.stat .lbl { font-size: 13px; color: var(--hint); margin-top: 2px; }
.stat .ico { font-size: 16px; margin-bottom: 6px; display: block; }
.stat.attn .num { color: var(--accent); }

.banner { display: flex; gap: 12px; align-items: center; padding: 14px; margin-top: 14px; }
.banner .b-ico { font-size: 26px; }
.banner .b-text { flex: 1; font-size: 14.5px; line-height: 1.35; }
.banner .b-text b { display: block; font-size: 15.5px; }
.banner .b-actions { display: flex; flex-direction: column; gap: 6px; }

/* ============ строки списка (задачи, записи) ============ */
.list { background: var(--card); border-radius: var(--r); box-shadow: var(--shadow); overflow: hidden; }
.row-wrap { position: relative; touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.row-wrap + .row-wrap .row::before { content: ""; position: absolute; top: 0; left: 52px; right: 0; height: 1px; background: var(--line); }
.row-wrap.note + .row-wrap .row::before, .row-wrap + .row-wrap.note .row::before { left: 16px; }
.row-bg { position: absolute; inset: 0; display: flex; align-items: center; padding: 0 22px; font-size: 20px; color: #fff; opacity: 0; }
.row-bg.l { background: var(--ok); justify-content: flex-start; }
.row-bg.r { background: var(--danger); justify-content: flex-end; }
.row-wrap.sw-right .row-bg.l, .row-wrap.sw-left .row-bg.r { opacity: 1; }
.row { position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px 12px 14px;
  background: var(--card); transition: transform .22s cubic-bezier(.2, .8, .2, 1); min-height: 52px; }
.row-wrap.dragging .row { transition: none; }
.row-wrap.removing { animation: collapse .26s ease forwards; overflow: hidden; }
@keyframes collapse { to { opacity: 0; max-height: 0; } }
.row-main { flex: 1; min-width: 0; cursor: pointer; }
.row-title { font-size: 16px; line-height: 1.35; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden; }
.row-sub { color: var(--sub); font-size: 14px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-meta { display: flex; flex-wrap: wrap; gap: 6px 10px; margin-top: 5px; font-size: 13px; color: var(--hint); align-items: center; }
.row-meta:empty { display: none; }
.row.done .row-title { color: var(--hint); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--hint) 60%, transparent); }
.note-ico { flex: none; width: 26px; height: 26px; display: grid; place-items: center; font-size: 17px; margin-top: -1px; }

.check { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--hint) 70%, transparent);
  display: grid; place-items: center; margin-top: -1px; transition: all .15s; position: relative; }
.check::after { content: ""; position: absolute; inset: -9px; }
.check svg { width: 15px; height: 15px; stroke: #fff; stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: scale(.5); transition: all .15s; }
.check.on, .row.done .check { background: var(--ok); border-color: var(--ok); }
.check.on svg, .row.done .check svg { opacity: 1; transform: none; }
.check.pop { animation: pop .3s; }
@keyframes pop { 50% { transform: scale(1.22); } }

.badge { display: inline-flex; align-items: center; gap: 3px; font-size: 12.5px; font-weight: 600; padding: 1px 7px;
  border-radius: 6px; background: var(--fill); color: var(--sub); }
.badge.overdue { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }
.badge.today { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); }
.badge.soon { background: var(--accent-soft); color: var(--accent); }
.tag { color: var(--link); }
mark { background: color-mix(in srgb, var(--warn) 30%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }

.more-btn { width: 100%; padding: 13px; color: var(--link); font-size: 15px; font-weight: 500; text-align: center; }

/* ============ папки плитками ============ */
.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.tile { background: var(--card); border-radius: var(--r); box-shadow: var(--shadow); padding: 14px; text-align: left;
  display: flex; flex-direction: column; gap: 10px; min-height: 104px; position: relative; transition: transform .12s; }
.tile:active, .stat:active, .note-card:active { transform: scale(.97); }
.tile .t-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 21px; }
.tile .t-name { font-weight: 650; font-size: 15.5px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile .t-sub { color: var(--hint); font-size: 13px; margin-top: 2px; }
.tile .t-n { position: absolute; top: 14px; right: 14px; font-size: 22px; font-weight: 750; color: var(--text); opacity: .85; }
.tile.add { align-items: center; justify-content: center; color: var(--accent); font-weight: 600; background: transparent;
  box-shadow: none; border: 2px dashed color-mix(in srgb, var(--accent) 35%, transparent); }

/* ============ заметки карточками ============ */
.masonry { columns: 2; column-gap: 10px; }
.note-card { break-inside: avoid; background: var(--card); border-radius: var(--r); box-shadow: var(--shadow);
  padding: 13px 14px; margin-bottom: 10px; cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; transition: transform .12s; display: block; width: 100%; text-align: left; }
.note-card .nc-title { font-weight: 650; font-size: 15.5px; line-height: 1.3; word-wrap: break-word; }
.note-card .nc-body { color: var(--sub); font-size: 14px; line-height: 1.4; margin-top: 4px; white-space: pre-wrap; word-wrap: break-word;
  display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden; }
.note-card .nc-foot { color: var(--hint); font-size: 12.5px; margin-top: 10px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.note-card.pinned { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 45%, transparent), var(--shadow); }

/* ============ пустые состояния / подсказки ============ */
.empty { text-align: center; color: var(--hint); padding: 46px 24px 30px; font-size: 15px; }
.empty .e-ico { font-size: 44px; margin-bottom: 10px; }
.empty b { display: block; color: var(--text); font-size: 17px; margin-bottom: 4px; }
.tip { padding: 14px 16px; font-size: 14.5px; line-height: 1.45; color: var(--sub); }
.tip b { color: var(--text); }
.tip ol { margin: 8px 0 0; padding-left: 20px; }
.tip li { margin: 4px 0; }
.tip code { background: var(--fill); padding: 1px 6px; border-radius: 6px; font-size: 13.5px; color: var(--text); font-family: inherit; }

/* ============ быстрый ввод ============ */
#composer { position: fixed; left: 0; right: 0; bottom: calc(var(--tab-h) + var(--safe-b)); z-index: 20;
  padding: 8px 12px 10px; background: linear-gradient(to top, var(--bg) 70%, transparent); }
body.typing #composer { bottom: 0; padding-bottom: calc(10px + var(--safe-b)); }
body.no-composer #composer { display: none; }
.cmp-bar { display: flex; align-items: flex-end; gap: 8px; max-width: 696px; margin: 0 auto; background: var(--card);
  border-radius: 24px; padding: 5px 5px 5px 16px; box-shadow: 0 2px 12px rgba(0, 0, 0, .08), 0 0 0 1px var(--line); }
#cmpText { flex: 1; border: 0; outline: none; background: none; resize: none; padding: 8px 0; max-height: 140px; line-height: 1.35; min-height: 37px; }
#cmpText::placeholder { color: var(--hint); }
#cmpSend { flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--accent); color: var(--accent-text);
  display: grid; place-items: center; transition: transform .15s, opacity .15s; }
#cmpSend:disabled { opacity: .35; transform: scale(.9); }
.cmp-hint { display: flex; gap: 6px; max-width: 696px; margin: 0 auto 7px; padding: 0 6px; flex-wrap: wrap; }
.cmp-chip { font-size: 13px; font-weight: 600; padding: 4px 10px; border-radius: 99px; background: var(--card);
  box-shadow: var(--shadow), 0 0 0 1px var(--line); color: var(--accent); display: inline-flex; gap: 4px; align-items: center; }
.cmp-chip.due { color: var(--warn); }

/* ============ таб-бар ============ */
#tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 21; display: flex; justify-content: space-around;
  height: calc(var(--tab-h) + var(--safe-b)); padding-bottom: var(--safe-b); background: color-mix(in srgb, var(--card) 88%, transparent);
  backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px); border-top: 1px solid var(--line); }
body.typing #tabbar { display: none; }
#tabbar button { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  color: var(--hint); font-size: 11px; font-weight: 600; }
#tabbar svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#tabbar button.on { color: var(--accent); }
#tabbar button.on svg { stroke-width: 2.2; }

/* ============ редактор записи ============ */
.props { display: flex; gap: 8px; flex-wrap: wrap; padding: 6px 0 4px; }
.prop { height: 34px; padding: 0 12px; border-radius: 10px; background: var(--card); box-shadow: var(--shadow);
  font-size: 14.5px; font-weight: 550; display: inline-flex; align-items: center; gap: 6px; }
.prop.accent { color: var(--accent); }
.prop.done { background: var(--ok); color: #fff; }
.prop.pin-on { background: var(--accent-soft); color: var(--accent); }
.prop .badge { margin-left: 2px; }
.editor-card { margin-top: 12px; padding: 6px 16px; }
#edText { width: 100%; border: 0; outline: none; background: none; resize: none; font-size: 17px; line-height: 1.5;
  min-height: 42vh; padding: 10px 0; }
.ed-meta { color: var(--hint); font-size: 13px; padding: 10px 4px 0; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ed-save { transition: opacity .3s; }
.ed-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }

/* ============ кнопки ============ */
.btn { height: 46px; padding: 0 16px; border-radius: 13px; background: var(--card); box-shadow: var(--shadow); font-weight: 600;
  font-size: 15.5px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; color: var(--accent); }
.btn.primary { background: var(--accent); color: var(--accent-text); }
.btn.danger { color: var(--danger); }
.btn.small { height: 34px; font-size: 14px; border-radius: 10px; padding: 0 12px; }
.btn.block { width: 100%; }
.btn:active { opacity: .7; }
.btn-row { display: flex; gap: 10px; margin-top: 14px; }
.btn-row .btn { flex: 1; }

/* ============ поиск ============ */
.search-box { display: flex; align-items: center; gap: 10px; background: var(--card); box-shadow: var(--shadow); border-radius: 14px; padding: 0 14px; height: 46px; }
.search-box svg { width: 19px; height: 19px; fill: none; stroke: var(--hint); stroke-width: 2.2; stroke-linecap: round; flex: none; }
.search-box input { flex: 1; border: 0; outline: none; background: none; font-size: 16px; min-width: 0; height: 100%; }
.seg { display: flex; background: var(--fill); border-radius: 11px; padding: 3px; margin-top: 12px; }
.seg button { flex: 1; height: 32px; border-radius: 9px; font-size: 14px; font-weight: 600; color: var(--sub); }
.seg button.on { background: var(--card); color: var(--text); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }

/* ============ управление папками ============ */
.frow { display: flex; align-items: center; gap: 12px; padding: 11px 10px 11px 14px; position: relative; }
.frow + .frow::before { content: ""; position: absolute; top: 0; left: 66px; right: 0; height: 1px; background: var(--line); }
.frow .t-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 20px; flex: none; }
.frow .f-main { flex: 1; min-width: 0; cursor: pointer; }
.frow .f-name { font-weight: 600; }
.frow .f-sub { color: var(--hint); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.frow .arrows { display: flex; gap: 2px; }
.frow .arrows button { width: 32px; height: 32px; border-radius: 8px; color: var(--hint); font-size: 16px; }
.frow .arrows button:disabled { opacity: .25; }

/* ============ нижняя шторка ============ */
#backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, .38); z-index: 40; animation: fadeIn .2s; }
@keyframes fadeIn { from { opacity: 0; } }
#sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 41; background: var(--bg); border-radius: 20px 20px 0 0;
  max-height: 90vh; overflow-y: auto; padding: 8px 16px calc(18px + var(--safe-b)); animation: sheetUp .26s cubic-bezier(.2, .9, .3, 1);
  max-width: 720px; margin: 0 auto; overscroll-behavior: contain; }
@keyframes sheetUp { from { transform: translateY(100%); } }
.grabber { width: 38px; height: 5px; border-radius: 3px; background: var(--line); margin: 0 auto 10px; }
.sheet-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.sheet-title h3 { margin: 0; font-size: 19px; font-weight: 700; }
.sheet-title .x { width: 30px; height: 30px; border-radius: 50%; background: var(--fill); color: var(--hint); font-size: 14px; display: grid; place-items: center; }
.menu { background: var(--card); border-radius: var(--r); overflow: hidden; }
.menu button { width: 100%; display: flex; align-items: center; gap: 14px; padding: 14px 16px; font-size: 16px; text-align: left; position: relative; }
.menu button + button::before { content: ""; position: absolute; top: 0; left: 52px; right: 0; height: 1px; background: var(--line); }
.menu button .m-ico { width: 24px; text-align: center; font-size: 19px; }
.menu button .m-check { margin-left: auto; color: var(--accent); font-weight: 700; }
.menu button.danger { color: var(--danger); }
.menu + .menu { margin-top: 12px; }
.sheet-preview { background: var(--card); border-radius: var(--r); padding: 12px 14px; margin-bottom: 12px; font-size: 15px;
  color: var(--sub); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.field { margin-top: 14px; }
.field > label { display: block; font-size: 13px; font-weight: 650; text-transform: uppercase; letter-spacing: .05em; color: var(--hint); margin: 0 4px 7px; }
.input { width: 100%; height: 46px; border: 0; border-radius: 13px; background: var(--card); padding: 0 14px; outline: none; font-size: 16px; }
.hint { color: var(--hint); font-size: 13px; margin: 7px 4px 0; line-height: 1.4; }
.emoji-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; background: var(--card); border-radius: var(--r); padding: 8px; }
.emoji-grid button { aspect-ratio: 1; font-size: 22px; border-radius: 10px; }
.emoji-grid button.on { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent); }
.kw-box { background: var(--card); border-radius: var(--r); padding: 10px; }
.kw-list { display: flex; flex-wrap: wrap; gap: 6px; }
.kw { display: inline-flex; align-items: center; gap: 2px; background: var(--accent-soft); color: var(--accent);
  border-radius: 99px; padding: 5px 4px 5px 12px; font-size: 14.5px; font-weight: 550; }
.kw button { width: 22px; height: 22px; border-radius: 50%; color: inherit; opacity: .7; font-size: 15px; }
.kw-add { display: flex; gap: 8px; margin-top: 10px; }
.kw-add input { flex: 1; height: 40px; border: 0; border-radius: 11px; background: var(--fill); padding: 0 12px; outline: none; min-width: 0; }
.quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.quick button { height: 54px; border-radius: 13px; background: var(--card); font-size: 14px; font-weight: 600; display: flex;
  flex-direction: column; align-items: center; justify-content: center; line-height: 1.2; }
.quick button small { color: var(--hint); font-weight: 500; font-size: 12px; }
.quick button.on, .times button.on { background: var(--accent); color: var(--accent-text); }
.quick button.on small { color: inherit; opacity: .8; }
.times { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.times button { flex: none; height: 36px; padding: 0 14px; border-radius: 10px; background: var(--card); font-size: 14.5px; font-weight: 600; }
.pickers { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pickers input { height: 44px; border: 0; border-radius: 12px; background: var(--card); padding: 0 12px; width: 100%; outline: none; }
.due-preview { text-align: center; font-size: 15px; color: var(--sub); margin: -4px 0 14px; }
.due-preview b { color: var(--text); }

/* ============ уведомление ============ */
#toast { position: fixed; left: 0; right: 0; margin: 0 auto; width: max-content; bottom: calc(var(--tab-h) + 82px + var(--safe-b)); z-index: 60;
  background: rgba(28, 29, 33, .94); color: #fff; padding: 10px 10px 10px 16px; border-radius: 14px; font-size: 14.5px;
  display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 32px); box-shadow: 0 8px 30px rgba(0, 0, 0, .25);
  animation: toastIn .22s cubic-bezier(.2, .9, .3, 1); }
body.typing #toast { bottom: 120px; }
#toastText { padding: 2px 6px 2px 0; }
#toastAction { color: #7fb2ff; font-weight: 700; padding: 4px 8px; border-radius: 8px; white-space: nowrap; }
@keyframes toastIn { from { opacity: 0; transform: translateY(10px); } }

.skeleton { height: 64px; border-radius: var(--r); background: var(--card); margin-top: 10px; opacity: .6; animation: pulse 1s infinite alternate; }
@keyframes pulse { to { opacity: .3; } }

@media (min-width: 560px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
  .masonry { columns: 3; }
}

/* ============ v3: медиа, учёба, просмотр ============ */
#cmpAttach { flex: none; width: 36px; height: 38px; margin-left: -10px; color: var(--hint); display: grid; place-items: center; }
#cmpAttach:active { color: var(--accent); }
.chips.wrap { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; }
.chips.wrap .chip { background: var(--card); }
.chips.wrap .chip.on { background: var(--accent); color: var(--accent-text); }
.m-sub { margin-left: auto; color: var(--hint); font-size: 13px; }
.menu button .m-sub + .m-check { margin-left: 10px; }
.f-kind { color: var(--hint); font-weight: 400; font-size: 13px; }
.link-inline { color: var(--link); }
.badge.now { background: var(--ok); color: #fff; }

/* строки: превью фото справа */
.row-thumb { flex: none; width: 48px; height: 48px; border-radius: 10px; object-fit: cover; background: var(--fill); }

/* карточки контента */
.note-card { padding: 0; overflow: hidden; }
.note-card .nc-text { padding: 12px 14px 0; }
.note-card .nc-foot { padding: 0 14px 12px; }
.note-card:not(.has-media) .nc-foot { margin-top: 10px; }
.note-card.has-media .nc-text + .nc-foot, .note-card.has-media > .nc-foot:first-child { margin-top: 8px; }
.note-card.has-media .nc-foot { margin-top: 10px; }
.cc-media { overflow: hidden; background: var(--fill); }
.cc-media.one img { width: 100%; height: 100%; object-fit: cover; display: block; max-height: 420px; }
.cc-media.one { max-height: 420px; }
.cc-media.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.cc-media.grid.g3 .cell:first-child { grid-column: span 2; }
.cc-media .cell { position: relative; aspect-ratio: 1; overflow: hidden; background: #000; }
.cc-media.g3 .cell:first-child { aspect-ratio: 2/1; }
.cc-media .cell img { width: 100%; height: 100%; object-fit: cover; }
.cc-media .more { position: absolute; inset: 0; background: rgba(0,0,0,.5); color: #fff; display: grid; place-items: center; font-size: 22px; font-weight: 700; }
.vid-ph { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 22px; background: linear-gradient(135deg, #2b2f3a, #14161b); }
.cc-video { position: relative; background: linear-gradient(135deg, #2b2f3a, #14161b); overflow: hidden; max-height: 360px; }
.cc-video img { width: 100%; height: 100%; object-fit: cover; opacity: .9; }
.play-ic { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 48px; height: 48px; border-radius: 50%;
  background: rgba(0,0,0,.55); color: #fff; display: grid; place-items: center; font-size: 18px; padding-left: 3px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.play-ic.sm { width: 32px; height: 32px; font-size: 12px; }
.cc-video .dur { position: absolute; right: 8px; bottom: 8px; background: rgba(0,0,0,.6); color: #fff; font-size: 12px; font-weight: 600; padding: 2px 6px; border-radius: 6px; }
.link-card { display: flex; align-items: center; gap: 8px; margin: 10px 10px 0; padding: 10px 12px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); font-weight: 600; font-size: 14px; }
.link-card .l-dom { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.f-open { color: var(--hint); font-size: 15px; }

/* плеер */
.player { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin: 8px 8px 0; border-radius: 12px; background: var(--fill); }
.pl-btn { flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--accent); color: var(--accent-text); display: grid; place-items: center; }
.pl-btn svg { width: 18px; height: 18px; fill: currentColor; }
.pl-btn .i-pause, .player.playing .pl-btn .i-play { display: none; }
.player.playing .pl-btn .i-pause { display: block; }
.pl-body { flex: 1; min-width: 0; cursor: pointer; }
.pl-name { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-bar { height: 4px; border-radius: 2px; background: var(--line); margin-top: 7px; overflow: hidden; }
.pl-bar i { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 2px; transition: width .2s linear; }
.pl-time { font-size: 11.5px; color: var(--hint); font-variant-numeric: tabular-nums; margin-top: 4px; }

/* файлы */
.file-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin: 8px 8px 0; border-radius: 12px; background: var(--fill); cursor: pointer; }
.f-ico { font-size: 24px; flex: none; }
.f-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.f-name { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.f-size { font-size: 12px; color: var(--hint); }
.f-del { flex: none; width: 30px; height: 30px; border-radius: 50%; color: var(--hint); background: var(--card); font-size: 13px; }
.pad-list { padding-bottom: 8px; }

/* сетка фото */
.pgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; border-radius: var(--r); overflow: hidden; }
.pcell { position: relative; aspect-ratio: 1; background: var(--fill); cursor: pointer; overflow: hidden; }
.pcell img { width: 100%; height: 100%; object-fit: cover; }

/* редактор: вложения */
.ed-atts { margin-top: 12px; }
.ed-atts > .file-row, .ed-audio { margin: 8px 0 0; background: var(--card); box-shadow: var(--shadow); }
.ed-audio { display: flex; align-items: center; gap: 6px; border-radius: 12px; padding-right: 8px; }
.ed-audio .player { flex: 1; margin: 0; background: none; }
.ed-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; border-radius: var(--r); overflow: hidden; }
.ed-grid.single { grid-template-columns: 1fr; }
.ed-cell { position: relative; aspect-ratio: 1; background: #000; overflow: hidden; cursor: pointer; }
.ed-grid.single .ed-cell { aspect-ratio: auto; max-height: 60vh; }
.ed-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ed-grid.single .ed-cell img { object-fit: contain; max-height: 60vh; background: #000; }
.ed-del { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; font-size: 12px; }
.ed-actions.three { grid-template-columns: 1fr 1fr auto; }
.ed-actions.three .btn.danger { width: 52px; }

/* просмотр */
#viewer { position: fixed; inset: 0; z-index: 80; background: #000; display: flex; align-items: center; justify-content: center; animation: fadeIn .2s; touch-action: none; }
#vwStage { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
#vwStage img, #vwStage video { max-width: 100%; max-height: 100%; object-fit: contain; user-select: none; -webkit-user-select: none; }
.vw-top { position: absolute; top: 0; left: 0; right: 0; z-index: 2; display: flex; align-items: center; gap: 12px; padding: calc(10px + env(safe-area-inset-top)) 12px 10px;
  background: linear-gradient(to bottom, rgba(0,0,0,.6), transparent); color: #fff; }
.vw-top button { color: #fff; height: 36px; min-width: 36px; padding: 0 10px; border-radius: 18px; background: rgba(255,255,255,.14); font-weight: 600; font-size: 15px; }
#vwCount { font-size: 15px; font-weight: 600; opacity: .85; }
.vw-actions { margin-left: auto; display: flex; gap: 8px; }
.vw-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 44px; height: 64px; color: #fff; font-size: 34px; opacity: .7; }
.vw-nav.l { left: 4px; } .vw-nav.r { right: 4px; }
@media (hover: none) { .vw-nav { display: none; } }
body.viewing #tabbar, body.viewing #composer { display: none; }

/* учёба */
.week-pill { color: var(--link); font-size: 14px; font-weight: 600; padding: 0; }
.info-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.info-chip { height: 34px; padding: 0 12px; border-radius: 10px; background: var(--card); box-shadow: var(--shadow); font-size: 14px; font-weight: 550; color: var(--sub); }
.info-chip.hot { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }
.seg-wide button { font-size: 13.5px; padding: 0 4px; }
.seg-wide button { white-space: nowrap; }
.seg-n { font-size: 11.5px; color: var(--hint); font-weight: 600; margin-left: 1px; vertical-align: 1px; }
.seg button.on .seg-n { color: var(--accent); }
.seg-days { margin-top: 4px; }
.seg-days button { position: relative; font-size: 14px; }
.seg-days button.is-today { color: var(--accent); }
.seg-days button i { position: absolute; top: 3px; right: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); font-size: 0; }
.lesson { display: flex; align-items: stretch; gap: 12px; padding: 12px 14px; position: relative; cursor: pointer; }
.lesson + .lesson::before { content: ""; position: absolute; top: 0; left: 76px; right: 0; height: 1px; background: var(--line); }
.lesson .l-time { width: 48px; flex: none; display: flex; flex-direction: column; font-variant-numeric: tabular-nums; }
.lesson .l-time b { font-size: 15.5px; }
.lesson .l-time span { font-size: 13px; color: var(--hint); }
.lesson .l-bar { width: 4px; border-radius: 2px; flex: none; }
.lesson .l-main { flex: 1; min-width: 0; }
.lesson .l-name { font-weight: 600; font-size: 15.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lesson .l-sub { color: var(--hint); font-size: 13.5px; margin-top: 2px; }
.lesson .l-badges { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.lesson.past, .lesson.other-week { opacity: .5; }
.lesson.current { background: color-mix(in srgb, var(--ok) 9%, transparent); }
.t-flag { display: inline-block; margin-top: 6px; font-size: 11.5px; font-weight: 700; color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, transparent); padding: 2px 7px; border-radius: 6px; }
.frow[data-a] { cursor: pointer; }

/* ============ v4: планировщик ============ */
.seg.mini { margin: 0; padding: 2px; }
.seg.mini button { height: 30px; padding: 0 10px; font-size: 13.5px; }
.wstrip { display: flex; align-items: stretch; gap: 2px; background: var(--card); border-radius: var(--r); box-shadow: var(--shadow); padding: 6px 2px; user-select: none; -webkit-user-select: none; touch-action: pan-y; }
.wnav { width: 22px; flex: none; color: var(--hint); font-size: 20px; }
.wcell { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0 4px; border-radius: 12px; min-width: 0; }
.wcell span { font-size: 11.5px; color: var(--hint); font-weight: 600; text-transform: uppercase; }
.wcell b { font-size: 18px; font-weight: 700; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; }
.wcell.today b { color: var(--accent); }
.wcell.on b { background: var(--accent); color: var(--accent-text); }
.wcell .dots { display: flex; gap: 2px; height: 5px; }
.wcell .dots em { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); opacity: .55; }
.day-title { display: flex; flex-direction: column; padding: 16px 4px 0; }
.day-title b { font-size: 19px; }
.day-title span { color: var(--hint); font-size: 14px; margin-top: 2px; }
.timeline { position: relative; padding: 4px 0; overflow: hidden; }
.hrow { position: relative; border-top: 1px solid var(--line); margin-left: 52px; cursor: copy; }
.hrow:first-child { border-top-color: transparent; }
.hrow span { position: absolute; left: -48px; top: -9px; font-size: 12px; color: var(--hint); font-variant-numeric: tabular-nums; width: 40px; text-align: right; }
.hrow:first-child span { top: 0; }
.blocks { position: absolute; top: 4px; left: 54px; right: 6px; bottom: 4px; pointer-events: none; }
.pblock { position: absolute; pointer-events: auto; border-radius: 9px; padding: 4px 8px; display: flex; gap: 6px; overflow: hidden; cursor: pointer;
  --c: var(--accent); background: color-mix(in srgb, var(--c) 16%, var(--card)); border-left: 3px solid var(--c); box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.pblock.task { --c: var(--warn); }
.pblock.lesson-b { background: color-mix(in srgb, var(--c) 12%, var(--card)); border-left-style: dashed; }
.pblock.done { opacity: .55; }
.pblock.done .pb-title { text-decoration: line-through; }
.pb-main { min-width: 0; flex: 1; }
.pblock.short { padding-top: 2px; padding-bottom: 2px; align-items: center; }
.pblock.short .pb-title { -webkit-line-clamp: 1; font-size: 12.5px; }
.pblock.short .pb-time { display: none; }
.pblock.short .pcheck { width: 16px; height: 16px; margin: 0; font-size: 9px; }
.pb-at { color: var(--sub); font-weight: 600; font-variant-numeric: tabular-nums; }
.pb-title { font-size: 13.5px; font-weight: 650; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pb-time { font-size: 11.5px; color: var(--sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcheck { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--hint) 70%, transparent); color: #fff; font-size: 11px; font-weight: 800; display: grid; place-items: center; margin-top: 1px; }
.pcheck.on { background: var(--ok); border-color: var(--ok); }
.nowline { position: absolute; left: 46px; right: 0; height: 2px; background: var(--danger); pointer-events: none; z-index: 2; }
.nowline i { position: absolute; left: -5px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--danger); }
.uns { display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 14px; position: relative; }
.uns + .uns::before { content: ""; position: absolute; top: 0; left: 50px; right: 0; height: 1px; background: var(--line); }
.uns-t { flex: 1; min-width: 0; font-size: 15px; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uns-t small { display: block; color: var(--hint); font-size: 12.5px; }
.uns .btn.small { flex: none; height: 30px; font-size: 13px; padding: 0 10px; }
.ag-row { display: flex; align-items: center; gap: 10px; padding: 10px 14px; position: relative; cursor: pointer; }
.ag-row + .ag-row::before { content: ""; position: absolute; top: 0; left: 76px; right: 0; height: 1px; background: var(--line); }
.ag-time { width: 52px; flex: none; font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--sub); }
.ag-bar { width: 4px; align-self: stretch; border-radius: 2px; flex: none; background: var(--accent); }
.ag-bar.task { background: var(--warn); }
.ag-main { flex: 1; min-width: 0; font-size: 15px; font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-main small { display: block; font-size: 12.5px; color: var(--hint); font-weight: 400; }
.ag-row.done .ag-main { text-decoration: line-through; color: var(--hint); }
.ag-empty { padding: 14px; color: var(--hint); font-size: 14px; }
.section.is-today h2 { color: var(--accent); }
.times.wrap { flex-wrap: wrap; overflow: visible; }
.qa-text { height: auto; min-height: 64px; padding: 12px 14px; resize: none; line-height: 1.4; }
.l-bring { font-size: 13px; color: var(--sub); margin-top: 3px; }
.pairs { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.pairs button { height: 52px; border-radius: 12px; background: var(--card); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.pairs button b { font-size: 17px; }
.pairs button small { font-size: 10.5px; color: var(--hint); font-variant-numeric: tabular-nums; }
.pairs button.on { background: var(--accent); color: var(--accent-text); }
.pairs button.on small { color: inherit; opacity: .8; }

/* ============ v5: адаптивность — телефон и широкий экран ============ */
.nav-brand, .nav-foot { display: none; }
.cols, .col, .plan-grid, .pg-top, .pg-tl, .pg-bot { display: block; min-width: 0; }
.flow2 > .section, .flow3 > .section { break-inside: avoid; }

body.wide { --side: 232px; --tab-h: 0px; }
body.wide #tabbar { top: 0; bottom: 0; right: auto; width: var(--side); height: auto; flex-direction: column; justify-content: flex-start;
  gap: 2px; padding: 18px 12px; border-top: 0; border-right: 1px solid var(--line); background: var(--card); backdrop-filter: none; }
body.wide.typing #tabbar { display: flex; }
body.wide #tabbar > button, body.wide #tabbar .nav-small { flex: none; flex-direction: row; justify-content: flex-start; gap: 12px; height: 42px;
  padding: 0 12px; border-radius: 11px; font-size: 15px; font-weight: 600; color: var(--sub); width: 100%; }
body.wide #tabbar > button svg { width: 22px; height: 22px; }
body.wide #tabbar > button:hover, body.wide #tabbar .nav-small:hover { background: var(--fill); }
body.wide #tabbar > button.on { background: var(--accent-soft); color: var(--accent); }
body.wide .nav-brand { display: flex; align-items: center; gap: 10px; padding: 4px 12px 18px; font-weight: 750; font-size: 19px; }
body.wide .nb-logo { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--accent-soft); font-size: 18px; }
body.wide .nav-foot { display: flex; flex-direction: column; gap: 2px; margin-top: auto; border-top: 1px solid var(--line); padding-top: 10px; }
body.wide #tabbar .nav-small { font-size: 14px; height: 38px; font-weight: 550; display: flex; align-items: center; }
body.wide .nav-small svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
body.wide .nav-small.hidden { display: none; }
kbd { font: 600 11px/1 inherit; padding: 2px 5px; border-radius: 5px; background: var(--fill); color: var(--hint); margin-left: 4px; }

body.wide #screen { margin-left: var(--side); max-width: none; padding: 18px 40px 120px; }
body.wide #screen > * { max-width: 1180px; margin-left: auto; margin-right: auto; }
body.wide #screen > .chips { margin-left: auto; margin-right: auto; padding-left: 0; padding-right: 0; }
body.wide.no-composer #screen { padding-bottom: 48px; }
body.wide .head h1 { font-size: 34px; }
body.wide #composer { left: var(--side); bottom: 0; padding: 10px 40px 18px; }
body.wide .cmp-bar, body.wide .cmp-hint { max-width: 1180px; }
body.wide #toast { left: var(--side); bottom: 96px; }

body.wide .cols { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 28px; align-items: start; }
body.wide .flow2 { columns: 2; column-gap: 24px; margin-top: 18px; }
body.wide .flow3 { columns: 3; column-gap: 20px; }
body.wide .flow2 > .section, body.wide .flow3 > .section { display: inline-block; width: 100%; margin-top: 0; margin-bottom: 22px; }
body.wide .plan-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr); grid-template-areas: "tl top" "tl bot"; grid-template-rows: auto 1fr; gap: 0 28px; align-items: start; }
body.wide .pg-top { grid-area: top; } body.wide .pg-tl { grid-area: tl; } body.wide .pg-bot { grid-area: bot; }
body.wide .pg-top:empty + .pg-tl + .pg-bot > .section:first-child, body.wide .pg-top > .section:first-child { margin-top: 22px; }
body.wide .grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
body.wide .col .grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
body.wide .masonry { columns: 4 230px; }
body.wide .col .masonry { columns: 2; }
body.wide .pgrid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
body.wide .stats { grid-template-columns: repeat(3, minmax(0, 260px)); }
body.wide .wstrip { padding: 8px 6px; }
body.wide .wcell { cursor: pointer; } body.wide .wcell:hover b { background: var(--fill); } body.wide .wcell.on:hover b { background: var(--accent); }
body.wide .editor-card, body.wide .props, body.wide .ed-meta, body.wide .ed-actions, body.wide .ed-atts { max-width: 860px !important; }
body.wide #edText { min-height: 50vh; font-size: 17.5px; }
body.wide .search-box, body.wide #searchSeg { max-width: 720px; }

/* наведение мышью */
body.wide .row:hover, body.wide .ag-row:hover, body.wide .lesson:hover, body.wide .frow[data-a]:hover, body.wide .uns:hover { background: color-mix(in srgb, var(--text) 3%, var(--card)); }
body.wide .tile:hover, body.wide .note-card:hover, body.wide .stat:hover { box-shadow: 0 2px 6px rgba(0,0,0,.06), 0 10px 28px rgba(0,0,0,.08); }
body.wide .tile, body.wide .note-card, body.wide .stat { transition: transform .12s, box-shadow .15s; }
body.wide .pblock:hover { filter: brightness(.98); box-shadow: 0 2px 8px rgba(0,0,0,.12); }
body.wide .hrow:hover { background: color-mix(in srgb, var(--accent) 4%, transparent); }

/* шторки на ПК — окно по центру */
body.wide #sheet { top: 50%; bottom: auto; left: 50%; right: auto; width: min(560px, calc(100vw - var(--side) - 48px)); max-height: 86vh;
  transform: translate(calc(-50% + var(--side) / 2), -50%); border-radius: 20px; padding-bottom: 22px; animation: popIn .18s ease-out;
  box-shadow: 0 24px 80px rgba(0,0,0,.25); }
body.wide .grabber { display: none; }
@keyframes popIn { from { opacity: 0; transform: translate(calc(-50% + var(--side) / 2), -48%) scale(.98); } }
body.wide #viewer .vw-nav { display: block; }
/* слоты пар */
.slots { display: flex; flex-direction: column; gap: 8px; }
.slot { display: flex; gap: 12px; align-items: stretch; background: var(--card); border-radius: var(--r); box-shadow: var(--shadow); padding: 10px 12px; }
.slot.live { box-shadow: inset 0 0 0 2px var(--ok), var(--shadow); }
.s-num { width: 46px; flex: none; display: flex; flex-direction: column; align-items: flex-start; }
.s-num b { font-size: 20px; line-height: 1.1; }
.s-num span { font-size: 11.5px; color: var(--hint); font-variant-numeric: tabular-nums; line-height: 1.35; margin-top: 2px; }
.s-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; position: relative; justify-content: center; }
.s-empty { height: 100%; min-height: 44px; border: 1.5px dashed color-mix(in srgb, var(--hint) 45%, transparent); border-radius: 12px; color: var(--hint); font-size: 14.5px; font-weight: 600; }
.s-empty:hover, .s-empty:active { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.slot-card { border-radius: 11px; padding: 8px 40px 8px 11px; cursor: pointer; --c: var(--accent); background: color-mix(in srgb, var(--c) 13%, var(--card)); border-left: 3px solid var(--c); }
.slot-card.other-week { opacity: .5; }
.sc-name { font-weight: 650; font-size: 15px; }
.sc-sub { font-size: 12.5px; color: var(--sub); margin-top: 2px; }
.s-more { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; border-radius: 50%; background: var(--card); color: var(--accent); font-size: 16px; box-shadow: var(--shadow); }
.seg.mini button { white-space: nowrap; }
.plan-modes { margin: 0 0 12px; }
body.wide .plan-modes { max-width: 480px !important; margin-left: 0 !important; }

/* ============ v6: доход ============ */
.pos { color: var(--ok) !important; } .neg { color: var(--danger) !important; }
.money-hero { border-radius: 22px; padding: 18px 18px 14px; color: #fff; background: linear-gradient(135deg, #2f6df6, #7c4dff);
  box-shadow: 0 10px 30px rgba(60, 80, 255, .25); }
.mh-label { font-size: 14px; opacity: .85; font-weight: 600; }
.mh-bal { font-size: 36px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; margin-top: 2px; font-variant-numeric: tabular-nums; }
.mh-usd { font-size: 14px; opacity: .85; margin-top: 2px; }
.mh-today { display: flex; gap: 12px; align-items: center; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.25); font-size: 14px; }
.mh-today span { opacity: .85; flex: 1; }
.mh-today b { background: rgba(255,255,255,.18); padding: 3px 9px; border-radius: 8px; color: #fff !important; font-variant-numeric: tabular-nums; }
.money-actions { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-top: 12px; }
.money-actions .btn { height: 46px; font-size: 15px; padding: 0 6px; }
.neg-btn { color: var(--danger); } .pos-btn { color: var(--ok); }
.month-nav { display: flex; align-items: center; justify-content: space-between; margin: 20px 4px 10px; }
.month-nav b { font-size: 18px; }
.month-nav button { width: 36px; height: 36px; border-radius: 50%; background: var(--card); box-shadow: var(--shadow); font-size: 20px; color: var(--accent); }
.month-nav button:disabled { opacity: .3; }
.stats .num.pos, .stats .num.neg { font-size: 19px; }
.budget { padding: 14px; margin-top: 12px; }
.budget-cta { display: block; width: 100%; text-align: left; margin-top: 12px; cursor: pointer; }
.b-top { display: flex; justify-content: space-between; font-size: 14px; color: var(--sub); gap: 10px; }
.b-top b { color: var(--text); }
.b-bar { height: 8px; border-radius: 4px; background: var(--fill); margin: 10px 0 6px; overflow: hidden; }
.b-bar i { display: block; height: 100%; border-radius: 4px; background: var(--accent); transition: width .4s; }
.b-bar i.warn { background: var(--warn); } .b-bar i.over { background: var(--danger); } .b-bar i.pos { background: var(--ok); }
.b-sub { font-size: 13px; color: var(--hint); }
.daybars { display: flex; align-items: flex-end; gap: 2px; height: 120px; padding: 12px 10px 22px; position: relative; }
.db { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; position: relative; min-width: 0; }
.db i { display: block; width: 100%; max-width: 14px; border-radius: 3px 3px 1px 1px; background: color-mix(in srgb, var(--danger) 70%, transparent); }
.db.today i { background: var(--danger); }
.db span { position: absolute; bottom: -17px; font-size: 10px; color: var(--hint); }
.db.today span { color: var(--danger); font-weight: 700; }
.catbars { padding: 6px 12px; }
.cb { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.cb + .cb { border-top: 1px solid var(--line); }
.cb-ico { font-size: 22px; width: 30px; text-align: center; flex: none; }
.cb-main { flex: 1; min-width: 0; }
.cb-top { display: flex; justify-content: space-between; font-size: 14.5px; gap: 8px; }
.cb-bar { height: 6px; border-radius: 3px; background: var(--fill); margin-top: 6px; overflow: hidden; }
.cb-bar i { display: block; height: 100%; background: var(--danger); border-radius: 3px; opacity: .8; }
.cb-bar i.pos { background: var(--ok); }
.cb-pct { width: 38px; text-align: right; font-size: 13px; color: var(--hint); font-weight: 600; flex: none; }
.goals { display: flex; flex-direction: column; gap: 10px; }
.goal { padding: 14px; cursor: pointer; }
.g-top { display: flex; align-items: center; gap: 12px; }
.g-ico { font-size: 28px; width: 44px; height: 44px; border-radius: 13px; background: var(--fill); display: grid; place-items: center; flex: none; }
.g-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.g-main span { font-size: 13.5px; color: var(--sub); margin-top: 2px; }
.g-pct { font-size: 18px; font-weight: 800; color: var(--ok); }
.g-btns { display: flex; gap: 8px; margin-top: 10px; }
.g-btns .btn { flex: 1; }
.day-sum { font-size: 13.5px; } .day-sum b { font-weight: 700; }
.m-row { display: flex; align-items: center; gap: 12px; padding: 11px 14px; position: relative; cursor: pointer; }
.m-row + .m-row::before { content: ""; position: absolute; top: 0; left: 56px; right: 0; height: 1px; background: var(--line); }
.m-ico { font-size: 22px; width: 30px; text-align: center; flex: none; }
.m-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.m-main b { font-weight: 550; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-main span { font-size: 12.5px; color: var(--hint); }
.m-right { display: flex; flex-direction: column; align-items: flex-end; flex: none; }
.m-amt { font-weight: 700; font-size: 15.5px; font-variant-numeric: tabular-nums; }
.m-amt.pos { color: var(--ok); } .m-amt.neg { color: var(--text); } .m-amt.goal { color: var(--accent); }
.m-right small { font-size: 11.5px; color: var(--hint); }
.amt-row { display: flex; gap: 10px; align-items: center; margin-top: 14px; }
.amt-input { flex: 1; min-width: 0; height: 64px; border: 0; border-radius: 16px; background: var(--card); padding: 0 16px; outline: none;
  font-size: 34px; font-weight: 800; font-variant-numeric: tabular-nums; }
.cur-seg { margin: 0; flex: none; }
.cur-seg button { width: 50px; height: 54px; font-size: 22px; }
.cur-fixed { font-size: 28px; font-weight: 800; color: var(--hint); padding: 0 8px; }
.m-conv { min-height: 18px; margin: 8px 6px 0; font-size: 14px; color: var(--sub); font-weight: 600; }
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
.cat-grid button { min-height: 62px; border-radius: 13px; background: var(--card); font-size: 12.5px; font-weight: 600; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px; padding: 4px; line-height: 1.2; text-align: center; }
.cat-grid button span { font-size: 22px; }
.cat-grid button.on { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent); color: var(--accent); }
body.wide .money-hero { padding: 22px 24px 18px; }
body.wide .mh-bal { font-size: 42px; }
@media (max-width: 380px) { #tabbar button span { font-size: 10px; } }
/* счета */
.accs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.acc { background: var(--card); border-radius: var(--r); box-shadow: var(--shadow); padding: 12px 14px; text-align: left; display: flex; flex-direction: column; gap: 2px; min-height: 96px; }
.acc-top { display: flex; align-items: center; gap: 8px; }
.acc-ico { font-size: 20px; }
.acc-name { font-size: 14px; font-weight: 600; color: var(--sub); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-bal { font-size: 21px; font-weight: 800; letter-spacing: -.01em; margin-top: 6px; font-variant-numeric: tabular-nums; }
.acc-sub { font-size: 12.5px; color: var(--hint); }
.acc .b-bar { margin: 6px 0 0; height: 6px; }
.acc.add { align-items: center; justify-content: center; color: var(--accent); font-weight: 600; background: transparent; box-shadow: none; border: 2px dashed color-mix(in srgb, var(--accent) 35%, transparent); }
.acc.crypto .acc-bal { color: #f0a020; }
.acc-big { text-align: center; padding: 4px 0 6px; }
.ab-bal { font-size: 34px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ab-sub { color: var(--hint); font-size: 14px; margin-top: 4px; }
.acc-chips .chip { box-shadow: none; }
.acc-chips .chip:disabled { opacity: .35; }
.acc-chips .chip .n { font-size: 12px; }
body.wide .acc:hover { box-shadow: 0 2px 6px rgba(0,0,0,.06), 0 10px 28px rgba(0,0,0,.08); }

/* ---------- расписание по неделям и датам ---------- */
.wkbar { display: flex; align-items: center; gap: 4px; background: var(--card); border-radius: var(--r); box-shadow: var(--shadow); padding: 6px 4px; margin-top: 10px; user-select: none; -webkit-user-select: none; }
.wkbar .wnav { width: 44px; height: 40px; font-size: 26px; border-radius: 12px; }
.wk-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 1px; }
.wk-mid b { font-size: 16px; }
.wk-mid span { font-size: 13px; color: var(--hint); }
.seg-days.dated button { height: 48px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; line-height: 1.1; }
.seg-days.dated button small { font-size: 12.5px; font-weight: 500; color: var(--hint); }
.seg-days.dated button.on small { color: var(--sub); }
.datejump { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.datejump input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; }
.del-opts { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 12px; }
.frow.cancelled { opacity: .65; }
body.wide .wkbar .wnav:hover { background: var(--fill); }
.pickers.dlab label { display: flex; align-items: center; gap: 6px; background: var(--card); border-radius: 12px; padding-left: 12px; }
.pickers.dlab span { font-size: 14px; color: var(--hint); flex: none; }
.pickers.dlab input { padding-left: 4px; min-width: 0; }

/* =====================================================================
   v7 — премиум-дизайн: слои, свечения, стекло, градиентные акценты
   ===================================================================== */
html, body { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  letter-spacing: -.005em; }
body { background: var(--bg); }
body::before { content: ""; position: fixed; inset: -20vh -20vw auto; height: 70vh; z-index: -1; pointer-events: none;
  background: radial-gradient(40% 50% at 15% 30%, color-mix(in srgb, #7b5cff 22%, transparent), transparent 70%),
              radial-gradient(35% 45% at 85% 20%, color-mix(in srgb, #3d8bff 16%, transparent), transparent 70%); opacity: .55; }
html.dark body::before { opacity: 1; }
::selection { background: color-mix(in srgb, var(--accent) 35%, transparent); }
#screen { animation: screenIn .32s var(--ease); }
@keyframes screenIn { from { opacity: 0; transform: translateY(8px); } }

/* --- заголовки --- */
.head { padding: 18px 4px 14px; }
.head h1 { font-size: 32px; font-weight: 800; letter-spacing: -.035em; }
.head .eyebrow { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--hint); }
.head .subtitle { font-size: 14px; }
.back-link { color: var(--link); font-weight: 600; }
.icon-btn { width: 40px; height: 40px; background: var(--card); box-shadow: var(--shadow); color: var(--text); transition: transform .15s var(--ease); }
.icon-btn svg { width: 19px; height: 19px; }
.icon-btn:active { transform: scale(.92); }
.icon-btn[style*="accent"] { background: var(--grad) !important; color: #fff !important; box-shadow: var(--glow) !important; }
.icon-btn.on { background: var(--grad); color: #fff; box-shadow: var(--glow); }

/* --- секции --- */
.section { margin-top: 26px; }
.section-head { padding: 0 4px 10px; align-items: center; }
.section-head h2 { font-size: 12px; font-weight: 750; letter-spacing: .09em; color: var(--hint); }
.section-head .link { color: var(--link); font-size: 14.5px; font-weight: 600; }
.count-pill { background: var(--accent-soft); color: var(--accent); font-weight: 700; padding: 0 8px; }

/* --- поверхности --- */
.card, .list, .tile, .stat, .note-card, .acc, .slot, .wstrip, .wkbar, .search-box, .menu, .emoji-grid, .kw-box {
  background: var(--card); box-shadow: var(--shadow); border-radius: var(--r); }
.input, .pickers input, .pickers.dlab label, .times button, .pairs button, .quick button, .cat-grid button, .amt-input, .chips.wrap .chip {
  background: var(--card); box-shadow: 0 0 0 1px var(--stroke); }
.input:focus, .amt-input:focus, .pickers input:focus, .qa-text:focus { box-shadow: 0 0 0 2px var(--accent), 0 0 0 6px var(--accent-soft); }
.sheet-preview { background: var(--card); box-shadow: 0 0 0 1px var(--stroke); }

/* --- чипы --- */
.chip { height: 36px; padding: 0 15px; background: var(--card); box-shadow: 0 0 0 1px var(--stroke); font-weight: 600; transition: transform .15s var(--ease), background .15s; }
.chip:active { transform: scale(.95); }
.chip.on, .chips.wrap .chip.on { background: var(--grad); color: #fff; box-shadow: var(--glow); }

/* --- кнопки --- */
.btn { height: 48px; border-radius: 14px; background: var(--card); box-shadow: 0 0 0 1px var(--stroke); color: var(--text); font-weight: 650;
  transition: transform .15s var(--ease), box-shadow .15s, opacity .15s; }
.btn:active { transform: scale(.97); opacity: 1; }
.btn.primary { background: var(--grad); color: #fff; box-shadow: var(--glow), inset 0 1px 0 rgba(255, 255, 255, .18); }
.btn.danger { color: var(--danger); background: color-mix(in srgb, var(--danger) 9%, var(--card)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--danger) 18%, transparent); }
.btn.small { height: 36px; border-radius: 11px; font-size: 14px; }
.neg-btn { color: var(--danger) !important; } .pos-btn { color: var(--ok) !important; }

/* --- сегменты --- */
.seg { background: var(--fill); border-radius: 13px; padding: 3px; box-shadow: inset 0 0 0 1px var(--stroke); }
.seg button { border-radius: 10px; height: 34px; color: var(--sub); transition: background .2s, color .2s; }
.seg button.on { background: var(--card); color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, .12), 0 0 0 1px var(--stroke); }
html.dark .seg button.on { background: var(--card-2); }
.seg-days button.is-today { color: var(--accent); }
.seg-days button i { background: var(--accent); box-shadow: 0 0 8px var(--accent); }

/* --- статистика на главной --- */
.stats { gap: 10px; }
.stat { padding: 14px; position: relative; overflow: hidden; transition: transform .15s var(--ease); }
.stat::after { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 9%, transparent), transparent 55%); pointer-events: none; }
.stat .num { font-size: 28px; font-weight: 800; letter-spacing: -.03em; }
.stat .lbl { font-weight: 550; }
.stat .ico { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: var(--fill); margin-bottom: 10px; font-size: 15px; }
.stat.attn .num { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.banner { border-radius: var(--r); }

/* --- списки --- */
.list { overflow: hidden; }
.row { background: var(--card); padding: 13px 14px; }
.row-title { font-weight: 500; }
.check { width: 24px; height: 24px; border: 2px solid color-mix(in srgb, var(--hint) 55%, transparent); }
.check.on, .row.done .check { background: linear-gradient(135deg, #34d399, #10b981); border-color: transparent; box-shadow: 0 4px 12px -2px rgba(16, 185, 129, .55); }
.badge { border-radius: 7px; font-weight: 650; padding: 2px 8px; }
.badge.now { background: linear-gradient(135deg, #34d399, #10b981); color: #fff; box-shadow: 0 4px 12px -4px rgba(16, 185, 129, .7); }
.more-btn { color: var(--link); font-weight: 600; }

/* --- плитки папок --- */
.tile { padding: 15px; min-height: 112px; transition: transform .15s var(--ease), box-shadow .2s; overflow: hidden; }
.tile .t-ico { width: 42px; height: 42px; border-radius: 13px; font-size: 21px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.tile .t-n { font-size: 24px; font-weight: 800; letter-spacing: -.03em; opacity: 1; }
.tile.add, .acc.add { border: 1.5px dashed color-mix(in srgb, var(--accent) 40%, transparent); background: color-mix(in srgb, var(--accent) 5%, transparent); box-shadow: none; color: var(--accent); }
.tile:active, .stat:active, .note-card:active, .acc:active { transform: scale(.97); }

/* --- заметки --- */
.note-card { transition: transform .15s var(--ease), box-shadow .2s; }
.note-card.pinned { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--accent) 55%, transparent), var(--glow); }

/* --- пустые состояния --- */
.empty .e-ico { width: 84px; height: 84px; margin: 0 auto 14px; border-radius: 28px; display: grid; place-items: center; font-size: 40px;
  background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--accent) 30%, transparent), color-mix(in srgb, var(--accent) 6%, transparent) 70%);
  box-shadow: 0 0 0 1px var(--stroke), var(--glow); }
.empty b { font-size: 18px; font-weight: 750; }
.tip { color: var(--sub); }
.card.tip { background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 10%, var(--card)), var(--card) 60%); }

/* --- быстрый ввод --- */
#composer { padding: 8px 12px 10px; background: linear-gradient(to top, var(--bg) 55%, color-mix(in srgb, var(--bg) 0%, transparent)); }
.cmp-bar { background: var(--glass); backdrop-filter: saturate(170%) blur(22px); -webkit-backdrop-filter: saturate(170%) blur(22px);
  border-radius: 26px; padding: 6px 6px 6px 16px; box-shadow: 0 0 0 1px var(--stroke), 0 10px 30px -12px rgba(0, 0, 0, .35); transition: box-shadow .2s; }
body.typing .cmp-bar { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--accent) 70%, transparent), 0 0 0 6px var(--accent-soft), 0 12px 32px -12px rgba(0, 0, 0, .4); }
#cmpSend { width: 40px; height: 40px; background: var(--grad); color: #fff; box-shadow: var(--glow); }
#cmpSend:disabled { opacity: .3; box-shadow: none; }
.cmp-chip { background: var(--glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 0 0 1px var(--stroke); color: var(--accent); }

/* --- нижняя панель: парящая «капсула» --- */
#tabbar { left: 10px; right: 10px; bottom: calc(8px + var(--safe-b)); height: 62px; padding: 0 4px; border-radius: 24px; border: 0;
  background: var(--glass); backdrop-filter: saturate(180%) blur(24px); -webkit-backdrop-filter: saturate(180%) blur(24px);
  box-shadow: 0 0 0 1px var(--stroke), 0 16px 40px -14px rgba(0, 0, 0, .45); max-width: 700px; margin: 0 auto; }
#tabbar > button { position: relative; gap: 3px; font-size: 10.5px; font-weight: 650; color: var(--hint); transition: color .2s; }
#tabbar > button svg { width: 24px; height: 24px; transition: transform .25s var(--ease); }
#tabbar > button::before { content: ""; position: absolute; top: 7px; left: 50%; width: 46px; height: 30px; margin-left: -23px; border-radius: 12px;
  background: var(--accent-soft); opacity: 0; transform: scale(.6); transition: opacity .2s, transform .25s var(--ease); z-index: -1; }
#tabbar > button.on { color: var(--accent); }
#tabbar > button.on::before { opacity: 1; transform: none; }
#tabbar > button.on svg { transform: translateY(-1px); }
#tabbar > button:active svg { transform: scale(.88); }
#toast { bottom: calc(var(--tab-h) + 86px + var(--safe-b)); }

/* --- шторки --- */
#backdrop { background: rgba(5, 6, 10, .5); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
#sheet { background: var(--bg-2); border-radius: 26px 26px 0 0; box-shadow: 0 -1px 0 var(--stroke), 0 -20px 60px -20px rgba(0, 0, 0, .5); animation: sheetUp .32s var(--ease); }
html.dark #sheet { background: linear-gradient(180deg, #14161d, #0f1116 220px); }
.grabber { width: 40px; background: color-mix(in srgb, var(--hint) 45%, transparent); }
.sheet-title h3 { font-size: 21px; font-weight: 800; letter-spacing: -.02em; }
.sheet-title .x { background: var(--fill); box-shadow: 0 0 0 1px var(--stroke); }
.field > label { font-size: 11.5px; font-weight: 750; letter-spacing: .09em; }
.input { border-radius: 14px; height: 48px; transition: box-shadow .15s; }
.menu button { transition: background .15s; }
.menu button:active { background: var(--fill); }
.quick button.on, .times button.on, .pairs button.on { background: var(--grad); color: #fff; box-shadow: var(--glow); }
.emoji-grid button.on, .cat-grid button.on { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent); color: var(--accent); }
.due-preview { background: var(--card); box-shadow: 0 0 0 1px var(--stroke); border-radius: 14px; padding: 10px 14px; margin: -2px 0 12px; }
.kw { background: var(--accent-soft); color: var(--accent); }

/* --- уведомление --- */
#toast { background: color-mix(in srgb, #15171e 88%, transparent); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-radius: 16px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 20px 50px -12px rgba(0, 0, 0, .5); }
#toastAction { color: #b3a8ff; }

/* --- скелетон --- */
.skeleton { opacity: 1; background: linear-gradient(90deg, var(--card) 25%, var(--card-2) 50%, var(--card) 75%); background-size: 200% 100%;
  animation: shimmer 1.2s infinite linear; box-shadow: 0 0 0 1px var(--stroke); }
@keyframes shimmer { to { background-position: -200% 0; } }

/* --- учёба и план --- */
.lesson.current { background: linear-gradient(90deg, color-mix(in srgb, var(--ok) 14%, transparent), transparent); }
.slot { padding: 11px 12px; }
.slot.live { box-shadow: 0 0 0 1.5px var(--ok), 0 10px 30px -12px color-mix(in srgb, var(--ok) 60%, transparent); }
.s-num b { font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.s-empty { border-color: color-mix(in srgb, var(--hint) 30%, transparent); }
.slot-card { border-radius: 13px; background: linear-gradient(120deg, color-mix(in srgb, var(--c) 22%, var(--card)), color-mix(in srgb, var(--c) 8%, var(--card)));
  border-left: 0; box-shadow: inset 3px 0 0 var(--c), 0 0 0 1px color-mix(in srgb, var(--c) 20%, transparent); }
.s-more { background: var(--card); box-shadow: 0 0 0 1px var(--stroke); }
.wstrip, .wkbar { padding: 8px 4px; }
.wcell b { width: 34px; height: 34px; font-weight: 750; transition: background .2s, transform .2s var(--ease); }
.wcell.on b { background: var(--grad); color: #fff; box-shadow: var(--glow); }
.wcell .dots em { background: var(--accent); opacity: .8; }
.wnav { color: var(--sub); }
.day-title b { font-size: 21px; font-weight: 800; letter-spacing: -.02em; }
.pblock { border-radius: 10px; border-left: 0; box-shadow: inset 3px 0 0 var(--c), 0 0 0 1px color-mix(in srgb, var(--c) 18%, transparent);
  background: linear-gradient(120deg, color-mix(in srgb, var(--c) 24%, var(--card)), color-mix(in srgb, var(--c) 10%, var(--card))); }
.pblock.lesson-b { border-left: 0; background: linear-gradient(120deg, color-mix(in srgb, var(--c) 20%, var(--card)), color-mix(in srgb, var(--c) 7%, var(--card))); }
.nowline { background: linear-gradient(90deg, var(--danger), transparent); }
.nowline i { box-shadow: 0 0 10px var(--danger); }
.pcheck.on { background: linear-gradient(135deg, #34d399, #10b981); border-color: transparent; }
.ag-bar { background: var(--grad); }

/* --- доход --- */
.money-hero { position: relative; overflow: hidden; border-radius: 26px; padding: 20px 20px 16px;
  background: radial-gradient(120% 140% at 0% 0%, #8f6bff 0%, #5b5cff 38%, #2f7cff 70%, #14b8d4 120%);
  box-shadow: 0 20px 50px -18px rgba(91, 92, 255, .7), inset 0 1px 0 rgba(255, 255, 255, .25); }
.money-hero::before { content: ""; position: absolute; width: 260px; height: 260px; right: -80px; top: -120px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .28), transparent 65%); pointer-events: none; }
.money-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .12) 50%, transparent 60%); }
.mh-label { text-transform: uppercase; letter-spacing: .09em; font-size: 12px; font-weight: 750; opacity: .8; }
.mh-bal { font-size: 40px; font-weight: 850; letter-spacing: -.04em; text-shadow: 0 2px 20px rgba(0, 0, 0, .15); }
.mh-today { border-top-color: rgba(255, 255, 255, .2); }
.mh-today b { background: rgba(255, 255, 255, .16); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15); }
.money-actions .btn { background: var(--card); box-shadow: var(--shadow); }
.month-nav b { font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.month-nav button { background: var(--card); box-shadow: var(--shadow); color: var(--text); }
.acc { padding: 14px; min-height: 104px; position: relative; overflow: hidden; transition: transform .15s var(--ease), box-shadow .2s; }
.acc::after { content: ""; position: absolute; right: -30px; top: -30px; width: 100px; height: 100px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%); pointer-events: none; }
.acc.crypto::after { background: radial-gradient(circle, rgba(255, 181, 71, .18), transparent 70%); }
.acc-ico { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: var(--fill); font-size: 17px; }
.acc-bal { font-size: 22px; letter-spacing: -.03em; margin-top: 8px; }
.acc.crypto .acc-bal { color: var(--warn); }
.b-bar, .cb-bar { background: var(--fill); }
.b-bar i { background: var(--grad); box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 50%, transparent); }
.b-bar i.warn { background: linear-gradient(90deg, #ffb547, #ff8a3d); } .b-bar i.over { background: linear-gradient(90deg, #ff6b7a, #ef4459); }
.b-bar i.pos { background: linear-gradient(90deg, #34d399, #10b981); }
.cb-bar i { background: linear-gradient(90deg, color-mix(in srgb, var(--danger) 60%, transparent), var(--danger)); opacity: 1; }
.cb-bar i.pos { background: linear-gradient(90deg, color-mix(in srgb, var(--ok) 60%, transparent), var(--ok)); }
.db i { background: linear-gradient(180deg, var(--danger), color-mix(in srgb, var(--danger) 40%, transparent)); border-radius: 4px 4px 2px 2px; }
.db.today i { box-shadow: 0 0 12px color-mix(in srgb, var(--danger) 60%, transparent); }
.g-ico { background: var(--fill); box-shadow: inset 0 0 0 1px var(--stroke); }
.g-pct { background: linear-gradient(135deg, #34d399, #10b981); -webkit-background-clip: text; background-clip: text; color: transparent; }
.amt-input { border-radius: 18px; font-weight: 850; letter-spacing: -.03em; }
.m-ico { width: 38px; height: 38px; border-radius: 12px; background: var(--fill); display: grid; place-items: center; font-size: 19px; }
.m-row + .m-row::before { left: 64px; }
.cb-ico { width: 36px; height: 36px; border-radius: 11px; background: var(--fill); display: grid; place-items: center; font-size: 18px; }

/* --- просмотр медиа и плеер --- */
.pl-btn { background: var(--grad); color: #fff; box-shadow: var(--glow); }
.pl-bar i { background: var(--grad); }
.link-card { background: var(--accent-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 20%, transparent); }

/* --- широкий экран (ПК): боковая панель --- */
body.wide { --tab-h: 0px; }
body.wide #tabbar { left: 0; right: auto; top: 0; bottom: 0; width: var(--side); height: auto; margin: 0; max-width: none; border-radius: 0;
  padding: 20px 12px; background: var(--glass); box-shadow: 1px 0 0 var(--stroke); }
body.wide #tabbar > button { font-size: 15px; font-weight: 600; color: var(--sub); }
body.wide #tabbar > button::before { display: none; }
body.wide #tabbar > button.on { background: var(--accent-soft); color: var(--accent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent); }
body.wide #tabbar > button.on svg { transform: none; }
body.wide .nb-logo { background: var(--grad); box-shadow: var(--glow); color: #fff; }
body.wide .nb-logo svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
body.wide .nav-brand { font-weight: 800; letter-spacing: -.02em; }
body.wide #toast { bottom: 100px; }
body.wide #sheet { background: var(--bg-2); box-shadow: var(--shadow-lg); border-radius: 22px; }
html.dark body.wide #sheet { background: #12141a; }
body.wide .tile:hover, body.wide .note-card:hover, body.wide .stat:hover, body.wide .acc:hover { transform: translateY(-2px);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 25%, var(--stroke)), 0 18px 40px -16px rgba(0, 0, 0, .35); }
body.wide .btn:hover { box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 30%, var(--stroke)); }
body.wide .btn.primary:hover { filter: brightness(1.07); box-shadow: var(--glow); }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
/* нижний край: поле ввода и панель на сплошном затухании, чтобы контент не мелькал между ними */
#composer { bottom: 0; padding-bottom: calc(var(--tab-h) + var(--safe-b) + 2px);
  background: linear-gradient(to top, var(--bg) calc(var(--tab-h) + var(--safe-b) + 40px), color-mix(in srgb, var(--bg) 0%, transparent)); }
body.no-composer::after { content: ""; position: fixed; left: 0; right: 0; bottom: 0; height: calc(var(--tab-h) + var(--safe-b) + 16px); z-index: 19; pointer-events: none;
  background: linear-gradient(to top, var(--bg) 60%, transparent); }
body.wide.no-composer::after { display: none; }
body.wide #composer { background: linear-gradient(to top, var(--bg) 70%, transparent); }
.m-amt.goal { padding: 0; box-shadow: none; background: none; }

/* =====================================================================
   v8 — свой цвет у каждого раздела, герой-карточка, быстрые действия
   ===================================================================== */
html, body { font-family: "Onest", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif; }
body {
  --accent-soft: color-mix(in srgb, var(--accent) 14%, transparent);
  --glow: 0 10px 28px -8px color-mix(in srgb, var(--accent) 60%, transparent);
  --hero: radial-gradient(120% 120% at 0% 0%, #9a6bff 0%, #6a5cff 40%, #3b7bff 80%, #20b6e6 120%);
}
body[data-sec="home"]    { --accent: #6d5efc; --link: #5b4df0; --grad: linear-gradient(135deg, #8b5cff, #4f7dff); }
body[data-sec="tasks"]   { --accent: #2f7bff; --link: #1f6bef; --grad: linear-gradient(135deg, #3b82f6, #06b6d4); }
body[data-sec="study"]   { --accent: #a24bf2; --link: #9333ea; --grad: linear-gradient(135deg, #a855f7, #ec4899); }
body[data-sec="content"] { --accent: #e5397f; --link: #db2777; --grad: linear-gradient(135deg, #f43f8e, #fb923c); }
body[data-sec="plan"]    { --accent: #0891b2; --link: #0e7490; --grad: linear-gradient(135deg, #0ea5e9, #14b8a6); }
body[data-sec="money"]   { --accent: #0f9f6e; --link: #059669; --grad: linear-gradient(135deg, #10b981, #22c55e); }
html.dark body[data-sec="home"]    { --accent: #8b7bff; --link: #a397ff; }
html.dark body[data-sec="tasks"]   { --accent: #5b9bff; --link: #7db0ff; }
html.dark body[data-sec="study"]   { --accent: #c084fc; --link: #d0a2ff; }
html.dark body[data-sec="content"] { --accent: #fb6aa6; --link: #ff8cbb; }
html.dark body[data-sec="plan"]    { --accent: #22c3e6; --link: #5dd6f0; }
html.dark body[data-sec="money"]   { --accent: #34d399; --link: #5be3b0; }
body[data-sec="money"] .money-hero { background: radial-gradient(120% 140% at 0% 0%, #34d399 0%, #10b981 35%, #0d9488 75%, #0e7490 120%);
  box-shadow: 0 20px 50px -18px rgba(16, 185, 129, .65), inset 0 1px 0 rgba(255, 255, 255, .25); }

/* фоновые свечения — в цвет раздела */
body::before { background: radial-gradient(45% 55% at 12% 25%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 70%),
  radial-gradient(35% 45% at 88% 15%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%); transition: background .4s; }

/* заголовки экранов со значком раздела */
.head h1 { font-size: 30px; }
.head h1.with-badge { display: flex; align-items: center; gap: 12px; }
.h-badge { width: 42px; height: 42px; flex: none; border-radius: 14px; display: grid; place-items: center; background: var(--grad); box-shadow: var(--glow); }
.h-badge svg { width: 23px; height: 23px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* заголовки секций — крупно и по-человечески */
.section-head h2 { font-size: 19px; font-weight: 750; text-transform: none; letter-spacing: -.015em; color: var(--text); }
.section-head h2.red { color: var(--danger); }
.section-head .link { font-size: 14.5px; padding: 4px 10px; border-radius: 99px; background: var(--accent-soft); color: var(--accent); }
.count-pill { font-size: 12.5px; line-height: 20px; vertical-align: 2px; }
.section { margin-top: 28px; }

/* ---------- главная: герой ---------- */
.hero { position: relative; overflow: hidden; margin-top: 10px; padding: 18px 16px 16px; border-radius: 28px; color: #fff; background: var(--hero);
  box-shadow: 0 24px 60px -22px rgba(91, 92, 255, .75), inset 0 1px 0 rgba(255, 255, 255, .25); }
.hero::before { content: ""; position: absolute; width: 300px; height: 300px; right: -110px; top: -150px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .32), transparent 65%); pointer-events: none; }
.hero::after { content: ""; position: absolute; width: 220px; height: 220px; left: -90px; bottom: -120px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .16), transparent 65%); pointer-events: none; }
.hero > * { position: relative; z-index: 1; }
.hero-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.hero-date { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; opacity: .8; }
.hero-date::first-letter { text-transform: uppercase; }
.hero-title { margin: 4px 0 0; font-size: 26px; line-height: 1.15; font-weight: 800; letter-spacing: -.03em; }
.hero-actions { display: flex; gap: 8px; flex: none; }
.hero-btn { width: 38px; height: 38px; border-radius: 13px; display: grid; place-items: center; color: #fff;
  background: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.hero-btn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hero-btn:active { transform: scale(.92); }
.hero-next { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 16px; padding: 12px; border-radius: 20px; text-align: left; color: #fff;
  background: rgba(255, 255, 255, .15); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.hero-next:active { transform: scale(.98); }
.hn-ico { width: 46px; height: 46px; flex: none; border-radius: 15px; display: grid; place-items: center; font-size: 24px; background: rgba(255, 255, 255, .2); }
.hn-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.hn-main small { font-size: 12.5px; font-weight: 600; opacity: .8; }
.hn-main b { font-size: 17px; font-weight: 750; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hn-main span { font-size: 13px; opacity: .85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hn-when { flex: none; font-size: 12.5px; font-weight: 700; padding: 5px 10px; border-radius: 99px; background: rgba(255, 255, 255, .22); white-space: nowrap; }
.hn-when.live { background: #fff; color: #10b981; display: inline-flex; align-items: center; gap: 6px; }
.hn-when.live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #10b981; animation: livePulse 1.4s infinite; }
@keyframes livePulse { 0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, .6); } 100% { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); } }
.hero-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.hero-metrics button { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 10px 12px; border-radius: 16px; color: #fff; text-align: left;
  background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); min-width: 0; }
.hero-metrics button:active { transform: scale(.96); }
.hero-metrics b { font-size: 20px; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.hero-metrics span { font-size: 11.5px; font-weight: 600; opacity: .82; line-height: 1.25; }

/* ---------- главная: быстрые действия ---------- */
.qa-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
.qa { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 4px 11px; border-radius: 20px; background: var(--card); box-shadow: var(--shadow);
  font-size: 13px; font-weight: 650; color: var(--text); transition: transform .15s var(--ease); }
.qa:active { transform: scale(.94); }
.qa i { width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; }
.qa i svg { width: 23px; height: 23px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.qa.t-task i { background: linear-gradient(135deg, #3b82f6, #06b6d4); box-shadow: 0 8px 20px -8px #3b82f6; }
.qa.t-note i { background: linear-gradient(135deg, #f43f8e, #fb923c); box-shadow: 0 8px 20px -8px #f43f8e; }
.qa.t-spend i { background: linear-gradient(135deg, #10b981, #22c55e); box-shadow: 0 8px 20px -8px #10b981; }
.qa.t-pair i { background: linear-gradient(135deg, #a855f7, #ec4899); box-shadow: 0 8px 20px -8px #a855f7; }

.calm-card { display: flex; align-items: center; gap: 14px; padding: 16px; color: var(--sub); font-size: 14px; line-height: 1.4; }
.calm-card > span { font-size: 30px; }
.calm-card b { display: block; color: var(--text); font-size: 16px; margin-bottom: 2px; }

/* плитки папок — счётчик в углу */
.tile .t-n { top: 14px; right: 16px; font-size: 22px; color: var(--text); }

/* шире — герой и действия в ряд */
body.wide .hero { padding: 24px 24px 20px; }
body.wide .hero-title { font-size: 32px; }
body.wide .hero-metrics { max-width: 640px; }
body.wide .qa-grid { grid-template-columns: repeat(3, minmax(0, 180px)); }
body.wide .qa { flex-direction: row; justify-content: flex-start; padding: 12px 14px; gap: 12px; font-size: 15px; }
body.wide .qa:hover { transform: translateY(-2px); }

/* =====================================================================
   v9 — быстродействие: без живого размытия на закреплённых панелях
   (размытие пересчитывается на каждом кадре прокрутки — на телефоне это лаги)
   ===================================================================== */
html, html.light { --glass: rgba(255, 255, 255, .96); }
html.dark { --glass: rgba(22, 24, 32, .96); }
#tabbar, .cmp-bar, .cmp-chip, #toast, #backdrop { backdrop-filter: none; -webkit-backdrop-filter: none; }
#toast { background: #15171e; }
#backdrop { background: rgba(5, 6, 10, .55); }

/* --- вкладка «Задачи»: сводка, кнопка «Новая задача», фильтр, подсказка --- */
.ts-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.ts-stat { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 14px; background: var(--card); box-shadow: var(--shadow);
  font-size: 12.5px; color: var(--hint); line-height: 1.2; }
.ts-stat b { font-size: 22px; font-weight: 700; color: var(--text); }
.ts-stat.red b { color: var(--danger); }
.ts-bar { display: flex; gap: 8px; margin-top: 10px; }
.ts-new { flex: 1.1; }
.ts-filter { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 4px; font-weight: 600; }
.ts-filter span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ts-filter.on { box-shadow: inset 0 0 0 2px var(--accent); color: var(--accent); }
.ts-tip { position: relative; margin-top: 12px; display: flex; flex-direction: column; gap: 5px; padding-right: 44px; }
.ts-tip b:first-of-type { color: var(--text); }
.ts-tip .x { position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; border-radius: 50%; background: var(--fill); color: var(--hint);
  font-size: 13px; display: grid; place-items: center; }
.tf-text { min-height: 64px; resize: none; padding-top: 12px; line-height: 1.4; font: inherit; }
.tf-when { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tf-when button { height: 44px; border-radius: 12px; background: var(--card); box-shadow: 0 0 0 1px var(--stroke); font-weight: 600; font-size: 14.5px; }
.tf-when button.on { background: var(--grad); color: #fff; box-shadow: var(--glow); }
.tf-folder { justify-content: flex-start; text-align: left; font-weight: 500; }

/* =====================================================================
   v10 — анимации: только сдвиг/масштаб/прозрачность, короткие, по действию
   ===================================================================== */
/* выполнение задачи: линия зачёркивает текст слева направо, потом строка сворачивается */
.row-title { position: relative; }
.row.striking .row-title { text-decoration: none; }
.row.striking .row-title::after { content: ""; position: absolute; left: 0; right: 0; top: .68em; height: 2px; border-radius: 2px;
  background: var(--ok); transform-origin: left center; animation: strike .3s cubic-bezier(.3, .7, .3, 1) forwards; }
@keyframes strike { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.row-wrap.removing { animation: collapse .28s cubic-bezier(.4, 0, .2, 1) forwards; }
@keyframes collapse { to { opacity: 0; max-height: 0; transform: translateX(14px); } }
/* салют */
.confetti { position: fixed; z-index: 90; width: 8px; height: 11px; border-radius: 2px; pointer-events: none; will-change: transform, opacity; }
/* свайп: значок под строкой «щёлкает», когда протянул достаточно */
.row-bg i { font-style: normal; display: inline-block; transform: scale(.7); opacity: .65; transition: transform .22s cubic-bezier(.3, 1.6, .5, 1), opacity .15s; }
.row-wrap.armed .row-bg i { transform: scale(1.3); opacity: 1; }
/* нажатия: всё, что нажимается, чуть «вдавливается» */
.row-wrap:not(.dragging) .row:active { transform: scale(.985); }
.lesson, .frow, .tf-when button, .ts-stat { transition: transform .15s var(--ease); }
.lesson:active, .frow:active, .tf-when button:active { transform: scale(.97); }
.menu button:active { transform: scale(.985); }
.menu button { transition: background .15s, transform .15s var(--ease); }
/* «идёт сейчас»: точка мерцает прозрачностью вместо перерисовки тени */
.hn-when.live::before { animation: livePulse 1.4s ease-in-out infinite; }
@keyframes livePulse { 50% { opacity: .3; } }

/* --- «Контент»: плитки по типам, своя раскладка колонок --- */
.masonry, body.wide .masonry, body.wide .col .masonry { columns: auto; display: flex; gap: 10px; align-items: flex-start; }
.m-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ct-types { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.ct-type { display: flex; flex-direction: column; align-items: stretch; gap: 4px; padding: 10px 12px; border-radius: 14px; background: var(--card); box-shadow: var(--shadow);
  font-size: 14px; font-weight: 600; text-align: left; transition: transform .15s var(--ease); min-width: 0; }
.ct-type:active { transform: scale(.96); }
.ct-type .ct-ico { font-size: 18px; flex: none; }
.ct-type .ct-top { display: flex; align-items: center; justify-content: space-between; }
.ct-type .ct-l { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-type b { font-size: 15px; color: var(--hint); font-weight: 700; }
.ct-type.zero { opacity: .45; }
.ct-type.on { background: var(--grad); color: #fff; box-shadow: var(--glow); opacity: 1; }
.ct-type.on b { color: rgba(255, 255, 255, .85); }
.ct-active { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 12px; font-size: 14px; color: var(--hint); }
.ct-active b { color: var(--text); }
.ct-active .link { margin-left: auto; }
.ct-empty { margin-top: 14px; padding: 22px 18px; text-align: center; }
.ct-empty .e-ico { font-size: 40px; margin-bottom: 8px; }
.ct-empty b { display: block; font-size: 17px; margin-bottom: 10px; }
.ct-empty ol { text-align: left; margin: 0 auto; padding-left: 20px; max-width: 320px; color: var(--sub); line-height: 1.5; font-size: 14.5px; }
body.wide .ct-types { grid-template-columns: repeat(6, 1fr); }

/* --- быстродействие: строки и карточки за пределами экрана браузер не рисует, пока до них не долистаешь --- */
.row-wrap { content-visibility: auto; contain-intrinsic-size: auto 66px; }
.note-card { content-visibility: auto; contain-intrinsic-size: auto 200px; }
.ct-active .link, .empty .link { color: var(--link); font-weight: 600; font-size: 14px; }

/* --- «Деньги»: итог дня --- */
.day-card { margin-top: 12px; padding: 14px 16px; }
.dc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.dc-label { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--hint); }
.dc-sum { margin-top: 2px; color: var(--hint); font-size: 14px; }
.dc-sum b { font-size: 24px; font-weight: 800; color: var(--text); margin-right: 4px; }
.dc-badge { flex: none; padding: 6px 11px; border-radius: 99px; font-size: 14px; font-weight: 800; background: var(--fill); color: var(--sub); }
.dc-badge.good { background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--ok); }
.dc-badge.bad { background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--danger); }
.dc-line { margin-top: 4px; font-size: 14px; color: var(--sub); }
.dc-chart { position: relative; display: flex; gap: 6px; align-items: flex-end; height: 92px; margin-top: 12px; }
.dc-bar { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; }
.dc-bar i { display: block; width: 100%; height: 78%; border-radius: 6px; background: color-mix(in srgb, var(--hint) 30%, transparent);
  transform-origin: bottom; animation: barUp .5s cubic-bezier(.2, .8, .2, 1) backwards; }
.dc-bar span { font-size: 11px; color: var(--hint); height: 14px; line-height: 14px; }
.dc-bar.today i { background: var(--accent); }
.dc-bar.today.good i { background: var(--ok); }
.dc-bar.today.bad i { background: var(--danger); }
.dc-bar.today span { color: var(--text); font-weight: 700; }
.dc-bar:nth-child(2) i { animation-delay: .03s; } .dc-bar:nth-child(3) i { animation-delay: .06s; } .dc-bar:nth-child(4) i { animation-delay: .09s; }
.dc-bar:nth-child(5) i { animation-delay: .12s; } .dc-bar:nth-child(6) i { animation-delay: .15s; } .dc-bar:nth-child(7) i { animation-delay: .18s; } .dc-bar:nth-child(8) i { animation-delay: .21s; }
@keyframes barUp { from { transform: scaleY(0); } }
.dc-avg { position: absolute; left: 0; right: 0; border-top: 1.5px dashed color-mix(in srgb, var(--hint) 70%, transparent); pointer-events: none; z-index: 1; }
.dc-avg span { position: absolute; right: 0; top: -17px; font-size: 10.5px; color: var(--hint); background: var(--card); padding: 0 4px; border-radius: 4px; }
.dc-extra { margin-top: 10px; font-size: 13px; color: var(--hint); line-height: 1.45; }

/* --- «Деньги»: столбик дня = доход (зелёный) + расход (красный); переключатель над графиком --- */
.dc-bar i { display: flex; flex-direction: column; overflow: hidden; background: color-mix(in srgb, var(--hint) 18%, transparent); }
.dc-bar.today i { background: color-mix(in srgb, var(--hint) 18%, transparent); }
.dc-bar i em { display: block; min-height: 0; }
.dc-bar i em.in { background: var(--ok); }
.dc-bar i em.out { background: var(--danger); }
.dc-bar:not(.today) i em { opacity: .55; }
.dc-legend { display: flex; gap: 14px; margin-top: 8px; font-size: 12px; color: var(--hint); }
.dc-legend span::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.dc-legend .in::before { background: var(--ok); }
.dc-legend .out::before { background: var(--danger); }
.m-show { margin-top: 18px; }
.daybars.pos .db i { background: linear-gradient(180deg, var(--ok), color-mix(in srgb, var(--ok) 40%, transparent)); }
.daybars.pos .db.today i { box-shadow: 0 0 12px color-mix(in srgb, var(--ok) 60%, transparent); }
.daybars.pos .db.today span { color: var(--ok); }