:root {
  color-scheme: dark;
  --bg: #1b1b1d; --card: #252528; --card2: #2e2e33; --line: #34343a;
  --text: #f2f2f4; --muted: #9b9ba4; --faint: #6f6f78;
  --good: #8fe0a0; --warn: #ffb27a; --bad: #e8736d;
  /* категориальные слоты в проверенном порядке (проверено validate_palette, dark) */
  --top-inset: calc(env(safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px));
  --c1: #6cc4f7; --c2: #a57bf0; --c3: #8fe0a0; --c4: #6d78e0;
  --c5: #ef7fa6; --c6: #efe27a; --c7: #e8736d; --c8: #ffb27a; --c9: #5ad8c8; --c10: #d98be8; --c11: #bfe36a; --c12: #d9a066; --other: #7b7b86;
  --seg-on: #ececf0; --seg-on-text: #1b1b1d; --tip-bg: #3a3a40; --tip-text: var(--text);
}
/* светлая тема: те же слоты палитры, чуть темнее и плотнее, чтобы читались на белом, но оставались пастельными */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f3f3f6; --card: #ffffff; --card2: #ebebf0; --line: #dcdce3;
  --text: #1c1c1f; --muted: #6a6a74; --faint: #9a9aa4;
  --good: #3a9d5d; --warn: #d9782f; --bad: #d4504a;
  --c1: #3ea4e0; --c2: #8c64e0; --c3: #4db46c; --c4: #5a64cc;
  --c5: #e0668f; --c6: #d6b93c; --c7: #d9564f; --c8: #ee944f; --c9: #2fbaa9; --c10: #c473d4; --c11: #8dba3e; --c12: #b8864b; --other: #9a9aa6;
  --seg-on: #1c1c1f; --seg-on-text: #ffffff; --tip-bg: #2b2b30; --tip-text: #f5f5f7;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--bg); color: var(--text); }
body { font: 15px/1.35 -apple-system, "SF Pro Text", "Segoe UI", Roboto, system-ui, sans-serif; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#view { max-width: 480px; margin: 0 auto; padding: calc(14px + var(--top-inset, 0px)) 16px calc(96px + env(safe-area-inset-bottom)); min-height: 100vh; }
h1 { font-size: 22px; margin: 0; font-weight: 650; letter-spacing: -.2px; }
.muted { color: var(--muted); }
.row { display: flex; align-items: center; gap: 10px; }
.between { justify-content: space-between; }

/* шапка и переключатель периода */
.head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.seg { display: flex; background: var(--card); border-radius: 999px; padding: 3px; }
.seg button { padding: 6px 12px; border-radius: 999px; color: var(--muted); font-size: 14px; }
.seg button.on { background: var(--seg-on); color: var(--seg-on-text); font-weight: 600; }

/* карусель месяцев */
.carousel { display: flex; align-items: center; justify-content: space-between; margin: 6px 0 4px; }
.carousel button { color: var(--faint); font-size: 15px; padding: 6px 8px; min-width: 84px; }
.carousel .cur { color: var(--text); font-weight: 650; font-size: 17px; flex: 1; text-align: center; }
.carousel button:disabled { opacity: .25; cursor: default; }
.carousel .side { display: flex; align-items: center; gap: 2px; }

/* кольцо */
.donut { position: relative; width: 272px; height: 272px; margin: 6px auto 8px; }
.donut svg { width: 100%; height: 100%; overflow: visible; }
.donut path { fill: none; stroke-width: 24; stroke-linecap: round; transition: opacity .2s, stroke-width .2s; cursor: pointer; }
.donut.dim path { opacity: .35; }
.donut.dim path.sel { opacity: 1; stroke-width: 28; }
.donut .center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; pointer-events: none; padding: 0 56px; }
.center .big { font-size: 32px; font-weight: 700; letter-spacing: -.5px; line-height: 1.1; }
.center .cap { color: var(--muted); font-size: 13px; margin-top: 2px; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; padding: 3px 9px; border-radius: 999px; background: var(--card); font-size: 12.5px; }
.chip .ic { width: 14px; height: 14px; }
.good { color: var(--good); } .warn { color: var(--warn); } .bad { color: var(--bad); }

/* легенда */
.legend { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 14px 0; }
.lg { display: flex; align-items: center; gap: 8px; background: var(--card); border-radius: 16px; padding: 10px 10px; text-align: left; min-width: 0; }
.lg .ic { width: 22px; height: 22px; }
.lg .t { min-width: 0; }
.lg .n { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg .v { font-weight: 650; font-size: 15px; }

/* карточки */
.kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.kpi { background: var(--card); border-radius: 18px; padding: 12px 14px; }
.kpi .l { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; }
.kpi .l .ic { width: 16px; height: 16px; }
.kpi .v { font-size: 19px; font-weight: 650; margin-top: 4px; letter-spacing: -.2px; }
.card { background: var(--card); border-radius: 20px; padding: 14px; margin-bottom: 12px; }
.card h2 { font-size: 14px; font-weight: 600; margin: 0 0 8px; color: var(--muted); }
.bars { width: 100%; height: 130px; display: block; touch-action: pan-y; }
.bars text { fill: var(--faint); font-size: 10px; }
.pill { display: block; margin: 14px auto 0; padding: 10px 26px; border: 1px solid var(--line); border-radius: 999px; font-size: 16px; }

/* списки */
.item { background: var(--card); border-radius: 18px; padding: 12px 14px; margin-bottom: 8px; }
.sw .item { margin-bottom: 0; }
.ico { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; flex: none; background: color-mix(in srgb, var(--cc, var(--other)) 16%, transparent); color: var(--cc, var(--other)); }
.item .grow { flex: 1; min-width: 0; }
.item .ttl { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item .sub { color: var(--muted); font-size: 13px; }
.amt { font-weight: 650; white-space: nowrap; }
.amt.in { color: var(--good); }
.prog { height: 8px; background: var(--card2); border-radius: 999px; overflow: hidden; margin-top: 10px; }
.prog i { display: block; height: 100%; border-radius: 999px; background: var(--cc, var(--c1)); }
.badge { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; margin-top: 8px; }
.badge .ic { width: 15px; height: 15px; }
.daylabel { color: var(--muted); font-size: 13px; margin: 14px 4px 6px; }
.search { display: flex; align-items: center; gap: 8px; background: var(--card); border-radius: 14px; padding: 10px 12px; margin: 8px 0 4px; color: var(--muted); }
.search input { flex: 1; background: none; border: 0; outline: 0; color: var(--text); font: inherit; min-width: 0; }
.empty { text-align: center; color: var(--muted); padding: 36px 12px; }
.empty .ic { width: 34px; height: 34px; margin-bottom: 8px; opacity: .6; }

/* нижнее меню */
#tabs { position: fixed; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-around; max-width: 480px; margin: 0 auto; padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--line); }
#tabs button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--faint); font-size: 11.5px; padding: 6px 0; }
#tabs button.on { color: var(--text); }
#tabs button.on .ic { color: var(--c1); }

/* шторка и подсказка */
#sheet { position: fixed; inset: 0; z-index: 10; }
#sheet[hidden], #tip[hidden] { display: none; }
#sheet .backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.5); }
#sheet .panel { position: absolute; left: 0; right: 0; bottom: 0; max-width: 480px; margin: 0 auto; max-height: 82vh; overflow: auto; background: var(--card); border-radius: 24px 24px 0 0; padding: 18px 18px calc(24px + env(safe-area-inset-bottom)); animation: up .22s ease-out; }
@keyframes up { from { transform: translateY(40px); opacity: 0; } }
#tip { position: fixed; z-index: 20; pointer-events: none; background: var(--tip-bg); color: var(--tip-text); padding: 6px 10px; border-radius: 10px; font-size: 13px; box-shadow: 0 6px 20px rgba(0,0,0,.4); transform: translate(-50%, -110%); white-space: nowrap; }
.sub-row { margin-top: 14px; }
.sub-row .top { display: flex; justify-content: space-between; font-size: 14px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* саммари от ИИ */
.ai h2 { display: flex; align-items: center; gap: 6px; }
.ai h2 .ic { width: 16px; height: 16px; color: var(--c2); }
.ai-body p { margin: 0 0 8px; }
.ai-body .muted { font-size: 14px; }
.ai-btn { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin-top: 10px; padding: 10px; border-radius: 14px; background: color-mix(in srgb, var(--c2) 22%, transparent); color: var(--c2); font-weight: 600; }
.ai-btn:disabled { opacity: .6; }

/* свайп-карточки */
.sw { position: relative; margin-bottom: 8px; border-radius: 18px; overflow: hidden; }
.sw-card { position: relative; touch-action: pan-y; user-select: none; -webkit-user-select: none; will-change: transform; }
.sw-act { position: absolute; top: 0; bottom: 0; right: 0; width: 168px; display: flex; gap: 6px; padding: 0 0 0 6px; }
.sw-act button { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 12.5px; border-radius: 14px; }
.a-edit { background: color-mix(in srgb, var(--c1) 22%, var(--card2)); color: var(--c1); }
.a-del { background: color-mix(in srgb, var(--bad) 24%, var(--card2)); color: var(--bad); }
.hint { text-align: center; color: var(--faint); font-size: 12.5px; margin: 10px 0 0; }
.plus { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--c1) 22%, transparent); color: var(--c1); }
.plus .ic { width: 22px; height: 22px; }

/* формы и кнопки в шторке */
.fld { display: block; margin: 12px 0; }
.fld > span { display: block; color: var(--muted); font-size: 13px; margin-bottom: 5px; }
.fld input, .fld select, .irow input, .irow select { width: 100%; background: var(--card2); color: var(--text); border: 1px solid var(--line); border-radius: 12px; padding: 11px 12px; font: inherit; outline: 0; min-width: 0; }
.fld input:focus, .fld select:focus, .irow input:focus, .irow select:focus { border-color: var(--c1); }
.irow { display: grid; grid-template-columns: 1fr 96px 34px; gap: 6px; margin-bottom: 6px; align-items: center; }
.irow .x { color: var(--faint); display: grid; place-items: center; height: 38px; }
.link { color: var(--c1); padding: 6px 0; font-size: 14px; }
.btns { display: flex; gap: 8px; margin-top: 16px; }
.btn { flex: 1; padding: 12px; border-radius: 14px; background: var(--c1); color: #14202b; font-weight: 650; }
.btn.ghost { background: var(--card2); color: var(--text); font-weight: 500; }
.btn.danger { background: var(--bad); color: #2a1210; }
.btn:disabled { opacity: .6; }
#toast { position: fixed; left: 50%; bottom: calc(86px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 30; background: var(--tip-bg); color: var(--tip-text); padding: 10px 16px; border-radius: 14px; font-size: 14px; max-width: 86vw; box-shadow: 0 8px 24px rgba(0,0,0,.45); }
#toast.bad { background: color-mix(in srgb, var(--bad) 40%, #2a2a2e); }
#toast[hidden] { display: none; }
.static { padding: 11px 12px; background: var(--card2); border: 1px solid var(--line); border-radius: 12px; color: var(--muted); }
#sheet .panel { overflow-x: hidden; }
.fld input[type=date] { -webkit-appearance: none; appearance: none; display: block; width: 100%; max-width: 100%; min-height: 44px; text-align: left; }
.fld input[type=date]::-webkit-date-and-time-value { text-align: left; }
.fld input[type=date]::-webkit-calendar-picker-indicator { filter: invert(.7); }
.row > .grow { flex: 1; min-width: 0; }
.amt.in { color: var(--good); }

/* центральная кнопка «+» в нижнем меню */
#tabs button.add { flex: 0 0 56px; height: 44px; align-self: center; padding: 0; margin: 0 6px; border-radius: 16px; background: var(--card2); color: var(--text); align-items: center; justify-content: center; }
#tabs button.add .ic { width: 26px; height: 26px; color: var(--text); }
#qaText { width: 100%; background: var(--card2); color: var(--text); border: 1px solid var(--line); border-radius: 12px; padding: 11px 12px; font: inherit; resize: none; outline: 0; }
#qaText:focus { border-color: var(--c1); }
.draft { background: var(--card2); border-radius: 14px; padding: 12px; margin-top: 10px; }
.draft .sub { margin-top: 4px; }
.dseg { margin: 4px 0 12px; width: 100%; } .dseg button { flex: 1; }

.catgrp { margin-bottom: 14px; }
.subwrap { margin: 6px 0 0 18px; }
.subwrap .item { background: var(--card2); padding: 9px 12px; }
.addsub { display: block; margin: 4px 0 0 18px; }
.plus.back { background: var(--card); color: var(--text); margin-right: 8px; }
.head .row { gap: 0; }