/* ============================================================ JABA */
:root {
  --bg: #060807;
  --bg2: #0c0f0d;
  --card: rgba(255, 255, 255, .045);
  --card2: rgba(255, 255, 255, .075);
  --card3: rgba(255, 255, 255, .11);
  --line: rgba(255, 255, 255, .07);
  --line2: rgba(255, 255, 255, .13);
  --text: #f4f6f2;
  --muted: #9ba49d;
  --dim: #626b65;
  --accent: #7fd34e;
  --accent-2: #a8e870;
  --cyan: #a8e870;
  --gold: #f2c14e;
  --gold-2: #ffd97a;
  --accent-soft: rgba(168, 232, 112, .12);
  --inc: #4fe3a3;
  --exp: #ff6f83;
  --warn: #fbbf24;
  --track: rgba(255, 255, 255, .06);
  --r: 22px;
  --shadow: 0 18px 50px rgba(0, 0, 0, .55);
  --ease: cubic-bezier(.2, .9, .25, 1);
  --spring: cubic-bezier(.34, 1.4, .5, 1);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  color-scheme: dark;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--bg); color: var(--text); }
html.locked, html.locked body { overflow: hidden; }
body {
  font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 15px; line-height: 1.4; min-height: 100dvh; -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(900px 520px at 10% -12%, rgba(131, 232, 70, .22), transparent 62%),
    radial-gradient(700px 420px at 105% 4%, rgba(255, 255, 255, .10), transparent 60%),
    radial-gradient(800px 500px at 90% 110%, rgba(245, 192, 74, .06), transparent 60%), var(--bg);
  background-attachment: fixed;
  overscroll-behavior-y: none;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
button:disabled { cursor: default; }
input, select, textarea { outline: none; }
:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; border-radius: 10px; }
.num, .amt, .big, .donut-v, .big-num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; }
a { color: var(--accent-2); text-decoration: none; }
.hidden { display: none !important; }
.i { display: block; flex: none; }
.emo { line-height: 1; }
.muted { color: var(--muted); } .dim { color: var(--dim); }
.c-inc { color: var(--inc); } .c-exp { color: var(--exp); } .c-warn { color: var(--warn); }
.hint { color: var(--muted); font-size: 13px; line-height: 1.45; margin: 10px 0 0; }
.hint b { color: var(--text); }
.small-b { font-size: 12.5px; font-weight: 700; }

/* ---------- анімації ---------- */
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop { 0% { transform: scale(.92); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes growY { from { transform: scaleY(0); } to { transform: none; } }
@keyframes growX { from { transform: scaleX(0); } to { transform: none; } }
@keyframes dseg { from { stroke-dasharray: 0 var(--c); } }
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes shimmer { from { background-position: -400px 0; } to { background-position: 400px 0; } }
@keyframes shake { 10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(4px); } 30%, 50%, 70% { transform: translateX(-6px); } 40%, 60% { transform: translateX(6px); } }
@keyframes glow { 0%, 100% { box-shadow: 0 10px 28px rgba(131, 232, 70, .45), inset 0 1px 0 rgba(255, 255, 255, .3); } 50% { box-shadow: 0 10px 36px rgba(129, 223, 49, .55), inset 0 1px 0 rgba(255, 255, 255, .3); } }
@keyframes floaty { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-14px, 10px); } }
.page.enter > * { animation: fadeUp .45s var(--ease) both; }
.page.enter > *:nth-child(2) { animation-delay: .04s; } .page.enter > *:nth-child(3) { animation-delay: .08s; }
.page.enter > *:nth-child(4) { animation-delay: .12s; } .page.enter > *:nth-child(n+5) { animation-delay: .16s; }
.page.enter .tx, .page.enter .legend-row, .page.enter .rc, .page.enter .kpi { animation: fadeUp .45s var(--ease) both; animation-delay: calc(var(--i, 0) * 30ms + 120ms); }
.page.enter .ins { animation: pop .5s var(--spring) both; animation-delay: calc(var(--i, 0) * 60ms + 80ms); }
.page.enter .grow { transform-box: fill-box; transform-origin: bottom; animation: growY .7s var(--ease) both; animation-delay: var(--d, 0ms); }
.page.enter g .grow { animation-delay: var(--d, 0ms); }
.page.enter .bar > i, .page.enter .stack > i { transform-origin: left; animation: growX .8s var(--ease) both; animation-delay: .15s; }
.page.enter .dseg { animation: dseg .9s var(--ease) both; }
.page.enter .p-cur { stroke-dasharray: 1; animation: draw 1.1s var(--ease) both .1s; }
.page.enter .hm-c:not(.empty) { animation: pop .35s var(--ease) both; animation-delay: var(--d, 0ms); }
.shake { animation: shake .45s; }
.enter { animation: fadeUp .5s var(--ease) both; }

/* ---------- каркас ---------- */
.app { min-height: 100dvh; }
.side { display: none; }
main#view { padding: calc(14px + var(--safe-t)) 16px calc(112px + var(--safe-b)); max-width: 1240px; margin: 0 auto; overflow-x: clip; }

.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: grid; grid-template-columns: repeat(5, 1fr); align-items: end;
  padding: 8px 8px calc(8px + var(--safe-b));
  background: rgba(16, 19, 17, .8); backdrop-filter: blur(20px) saturate(1.5); -webkit-backdrop-filter: blur(20px) saturate(1.5);
  border-top: 1px solid var(--line);
}
.tab { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 0 2px; color: var(--dim); font-size: 10.5px; font-weight: 700; min-width: 0; transition: color .2s; }
.tab span { white-space: nowrap; }
.tab.on { color: var(--text); }
.tab .i { transition: transform .25s var(--spring); }
.tab.on .i { color: var(--accent-2); transform: translateY(-2px); filter: drop-shadow(0 4px 10px rgba(163, 237, 113, .55)); }

/* ---------- шапка ---------- */
.top { display: flex; align-items: center; gap: 12px; margin: 4px 0 16px; flex-wrap: wrap; }
.top h1 { font-size: 26px; letter-spacing: -.03em; margin: 0; font-weight: 800; flex: 1; min-width: 0; }
.top .hello { flex: 1; min-width: 0; }
.hello small { display: block; color: var(--muted); font-size: 13px; font-weight: 600; }
.hello b { font-size: 21px; font-weight: 800; letter-spacing: -.02em; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar { width: 42px; height: 42px; border-radius: 15px; display: grid; place-items: center; font-weight: 800; color: #161a17; flex: none; font-size: 17px; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15); }
.avatar.sm { width: 26px; height: 26px; border-radius: 9px; font-size: 12px; }
.avatar.xs { width: 20px; height: 20px; border-radius: 7px; font-size: 10.5px; }
.icon-btn { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; background: var(--card); border: 1px solid var(--line); color: var(--muted); flex: none; transition: color .2s, transform .2s var(--spring), background .2s; }
.icon-btn:hover { color: var(--text); background: var(--card2); }
.icon-btn:active { transform: scale(.92); }
.icon-btn.sm { width: 36px; height: 36px; border-radius: 12px; }

.seg { display: inline-flex; padding: 4px; background: rgba(28, 33, 30, .8); border: 1px solid var(--line); border-radius: 15px; gap: 2px; max-width: 100%; }
.seg button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 14px; border-radius: 11px; font-size: 13px; font-weight: 700; color: var(--muted); white-space: nowrap; transition: background .25s var(--ease), color .2s, box-shadow .25s; }
.seg button.on { background: linear-gradient(180deg, var(--card3), var(--card2)); color: var(--text); box-shadow: 0 4px 14px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .06); }
.seg button.on .i { color: var(--accent-2); }
.seg.full { display: flex; width: 100%; }
.seg.full button { flex: 1; }
.scope-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }

.monthnav { display: inline-flex; align-items: center; gap: 2px; background: var(--card); border: 1px solid var(--line); border-radius: 15px; padding: 4px; }
.monthnav button { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; color: var(--muted); transition: background .2s, color .2s; }
.monthnav button:hover:not(:disabled) { background: var(--card2); color: var(--text); }
.monthnav button:disabled { opacity: .3; }
.monthnav span { min-width: 120px; text-align: center; font-weight: 800; font-size: 14px; }

/* ---------- картки ---------- */
.card { background: linear-gradient(180deg, rgba(40, 47, 42, .55), rgba(28, 33, 30, .9)); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; position: relative; }
.card.pad-s { padding: 6px 10px; }
.card + .card { margin-top: 14px; }
.card h3, .section > h3 { margin: 0 0 12px; font-size: 15px; font-weight: 800; letter-spacing: -.01em; display: flex; align-items: center; gap: 8px; }
.card h3 .i, .section > h3 .i { color: var(--accent-2); }
.card h3 .more, .section > h3 .more { margin-left: auto; font-size: 13px; font-weight: 700; color: var(--accent-2); }
.h-sub { font-weight: 600; font-size: 12.5px; white-space: nowrap; }
.section { margin-top: 22px; }

/* ---------- головна: герой ---------- */
.hero {
  position: relative; overflow: hidden; border-radius: 28px; padding: 20px;
  background: linear-gradient(145deg, #5dbc27 0%, #3e8119 42%, #2b322d 100%);
  border: 1px solid rgba(176, 240, 135, .25);
  box-shadow: 0 20px 50px rgba(70, 149, 26, .35), inset 0 1px 0 rgba(255, 255, 255, .12);
  isolation: isolate;
}
.hero::before { content: ''; position: absolute; right: -70px; top: -90px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(129, 223, 49, .45), transparent 68%); z-index: -1; animation: floaty 9s ease-in-out infinite; }
.hero::after { content: ''; position: absolute; left: -60px; bottom: -110px; width: 260px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(245, 192, 74, .32), transparent 70%); z-index: -1; }

.hero .big { font-size: clamp(30px, 10vw, 42px); font-weight: 800; letter-spacing: -.035em; margin: 6px 0 10px; line-height: 1.1; white-space: nowrap; }
.hero .big small { font-size: .55em; color: var(--gold-2); }

.wallets { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; margin: 14px -16px 0; padding: 2px 16px 4px; scroll-snap-type: x proximity; }
.wallets::-webkit-scrollbar { display: none; }

/* ---------- кнопки ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 16px; border-radius: 15px; font-weight: 800; font-size: 14.5px;
  background: var(--card2); border: 1px solid var(--line); transition: transform .15s var(--spring), background .2s, box-shadow .2s, opacity .2s;
}
.btn:hover { background: var(--card3); }
.btn:active { transform: scale(.96); }
.btn.primary { background: linear-gradient(135deg, #97eb5e, #81e846 60%, #6ed833); border: 0; color: #fff; box-shadow: 0 8px 22px rgba(129, 232, 70, .38), inset 0 1px 0 rgba(255, 255, 255, .22); }
.btn.primary:hover { box-shadow: 0 10px 28px rgba(129, 232, 70, .5), inset 0 1px 0 rgba(255, 255, 255, .22); }
.btn.gold { background: linear-gradient(135deg, rgba(245, 192, 74, .2), rgba(245, 192, 74, .08)); border-color: rgba(245, 192, 74, .35); color: var(--gold-2); }
.btn.danger { color: var(--exp); background: rgba(255, 107, 129, .08); border-color: rgba(255, 107, 129, .22); }
.btn.ghost { background: transparent; }
.btn.block { width: 100%; }
.btn.sm { padding: 8px 12px; font-size: 13px; border-radius: 12px; }
.btn[disabled] { opacity: .5; pointer-events: none; }
.btn-row { display: flex; gap: 10px; }
.btn-row > * { flex: 1; }

/* ---------- іконки ---------- */
.ico { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; flex: none; position: relative; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04); }
.ico.sm { width: 36px; height: 36px; border-radius: 12px; }
.ico.xs { width: 30px; height: 30px; border-radius: 10px; }
.ico.lg { width: 56px; height: 56px; border-radius: 18px; }
.ico-wrap { position: relative; flex: none; }
.ico-wrap .by { position: absolute; right: -5px; bottom: -5px; border: 2px solid var(--card); }

/* ---------- операції ---------- */
.tx-list { display: flex; flex-direction: column; }
.tx { display: flex; align-items: center; gap: 12px; padding: 9px 6px; border-radius: 15px; width: 100%; text-align: left; transition: background .15s, transform .15s; }
.tx:hover { background: rgba(255, 255, 255, .05); }
.tx:active { transform: scale(.985); }
.tx .mid { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tx .t1 { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tx .t2 { color: var(--muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tx .amt { font-weight: 800; white-space: nowrap; text-align: right; flex: none; }
.tx .amt small { display: block; font-size: 11.5px; color: var(--dim); font-weight: 600; }
.day-h { display: flex; justify-content: space-between; padding: 14px 6px 4px; color: var(--muted); font-size: 12.5px; font-weight: 700; }
.empty { text-align: center; color: var(--muted); padding: 32px 10px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.empty .e-ico { width: 60px; height: 60px; border-radius: 20px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-2); margin-bottom: 8px; }
.empty b { color: var(--text); }
.empty.small { padding: 22px 10px; font-size: 13.5px; }

/* ---------- прогрес / ліміти ---------- */
.lim { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 5px 12px; align-items: center; padding: 9px 4px; width: 100%; text-align: left; border-radius: 12px; }
.lim + .lim { border-top: 1px solid var(--line); }
.lim .ico { grid-row: span 2; }
.lim .lt { display: flex; justify-content: space-between; gap: 8px; font-weight: 700; font-size: 14px; min-width: 0; }
.lim .lt span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lim .lt span:last-child { color: var(--muted); font-weight: 600; font-size: 12.5px; white-space: nowrap; }
.bar { display: block; height: 8px; border-radius: 99px; background: var(--track); overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #22c98a, var(--inc)); transition: width .5s var(--ease); }
.bar.warn > i { background: linear-gradient(90deg, #f59e0b, var(--warn)); } .bar.over > i { background: linear-gradient(90deg, #f43f5e, var(--exp)); }

/* ---------- регулярні ---------- */
.due { display: flex; align-items: center; gap: 10px; padding: 10px 2px; }
.due + .due { border-top: 1px solid var(--line); }
.due .mid { flex: 1; min-width: 0; }
.due .t1 { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.due .t2 { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.due .t2 b { color: var(--text); }
.pill { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 800; padding: 4px 9px; border-radius: 99px; background: var(--card2); color: var(--muted); white-space: nowrap; flex: none; }
.pill.ok { background: rgba(52, 224, 161, .12); color: var(--inc); }
.pill.bad { background: rgba(255, 107, 129, .12); color: var(--exp); }

/* ---------- підказки (статуси) ---------- */

.ins-track { display: flex; align-items: flex-start; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px 16px 6px; scrollbar-width: none; }
.ins-track::-webkit-scrollbar { display: none; }
.ins {
  --lc: var(--accent-2);
  flex: 0 0 calc(100% - 28px); scroll-snap-align: center; position: relative; display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 40px 14px 14px; border-radius: 20px; overflow: hidden;
  background: linear-gradient(135deg, color-mix(in srgb, var(--lc) 16%, transparent), rgba(28, 33, 30, .92) 60%);
  border: 1px solid color-mix(in srgb, var(--lc) 32%, transparent);
  transition: transform .3s var(--ease), opacity .3s;
}
.ins::before { content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; background: var(--lc); }
.ins.lvl-danger { --lc: var(--exp); } .ins.lvl-warn { --lc: var(--gold); } .ins.lvl-good { --lc: var(--inc); } .ins.lvl-info { --lc: var(--accent-2); }
.ins.out { transform: translateY(-8px) scale(.96); opacity: 0; }

.ins-x { position: absolute; right: 8px; top: 8px; width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; color: var(--dim); }
.ins-x:hover { color: var(--text); background: rgba(255, 255, 255, .06); }
.ins-dots { display: flex; justify-content: center; gap: 5px; margin-top: 2px; }
.ins-dots i { width: 6px; height: 6px; border-radius: 99px; background: var(--dim); opacity: .5; transition: width .3s var(--ease), opacity .3s, background .3s; }
.ins-dots i.on { width: 18px; background: var(--accent-2); opacity: 1; }

/* ---------- фільтри ---------- */
.search { display: flex; align-items: center; gap: 8px; background: var(--card); border: 1px solid var(--line); border-radius: 15px; padding: 0 12px; margin-bottom: 10px; color: var(--dim); transition: border-color .2s; }
.search:focus-within { border-color: rgba(163, 237, 113, .5); }
.search input { flex: 1; min-width: 0; background: none; border: 0; padding: 12px 0; color: var(--text); font-size: 16px; }
.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px 8px; padding: 0 16px 2px; }
.chips::-webkit-scrollbar { display: none; }
.chip-sel { flex: none; appearance: none; -webkit-appearance: none; background-color: var(--card); border: 1px solid var(--line); border-radius: 99px; padding: 8px 30px 8px 14px; font-size: 13px; font-weight: 700; color: var(--muted); max-width: 200px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238c9bc4' fill='none' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; }
.chip-sel.on { color: var(--text); border-color: rgba(163, 237, 113, .45); background-color: var(--accent-soft); }
.chip { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 99px; font-size: 13px; font-weight: 700; color: var(--muted); border: 1px solid var(--line); background: var(--card); }
.chip.on { color: var(--text); border-color: rgba(163, 237, 113, .45); background: var(--accent-soft); }
.chip.ghost { background: transparent; border-color: transparent; color: var(--accent-2); }
.summary-line { display: flex; gap: 6px 14px; flex-wrap: wrap; font-size: 13px; color: var(--muted); font-weight: 600; margin: 6px 4px 4px; }
.summary-line b { color: var(--text); }

/* ---------- аналітика ---------- */
.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.kpi { background: linear-gradient(180deg, rgba(40, 47, 42, .55), rgba(28, 33, 30, .9)); border: 1px solid var(--line); border-radius: 18px; padding: 13px 14px; min-width: 0; }
.kpi small { color: var(--muted); font-size: 12px; font-weight: 700; display: block; }
.kpi b { font-size: 19px; font-weight: 800; letter-spacing: -.02em; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi .delta { font-size: 12px; font-weight: 700; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.masonry { margin-top: 14px; columns: 1; column-gap: 14px; }
.masonry > .card { break-inside: avoid; margin: 0 0 14px; display: block; width: 100%; }
.masonry > .card + .card { margin-top: 0; }
.donut-wrap { display: flex; justify-content: center; margin: 4px 0 10px; }
.donut { width: 210px; height: 210px; max-width: 100%; }
.donut-v { fill: var(--text); font-size: 24px; font-weight: 800; }
.donut-s { fill: var(--muted); font-size: 12px; font-weight: 600; }
.legend-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; width: 100%; padding: 8px 2px; text-align: left; border-radius: 12px; transition: background .15s; }
.legend-row:hover { background: rgba(255, 255, 255, .05); }
.legend-row + .legend-row { border-top: 1px solid var(--line); }
.legend-row .ico { grid-row: span 2; }
.legend-row .n { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.legend-row .v { font-weight: 800; text-align: right; white-space: nowrap; }
.legend-row .p { color: var(--muted); font-size: 12px; font-weight: 600; text-align: right; white-space: nowrap; }
.legend-row .bar { height: 5px; }
.bars { width: 100%; height: auto; display: block; overflow: visible; }
.pace { width: 100%; height: auto; display: block; }
.b-inc { fill: rgba(52, 224, 161, .5); } .b-exp { fill: rgba(255, 107, 129, .5); }
.mb.on .b-inc { fill: var(--inc); } .mb.on .b-exp { fill: var(--exp); }
.b-hl { fill: rgba(255, 255, 255, .07); }
.mb { cursor: pointer; }
.b-lbl { fill: var(--muted); font-size: 11px; font-weight: 700; }
.b-lbl.we { fill: var(--gold); }
.mb.on .b-lbl { fill: var(--text); }
.b-val { fill: var(--text); font-size: 11px; font-weight: 800; }
.wd { fill: rgba(163, 237, 113, .35); } .wd-top { fill: var(--accent-2); }
.p-cur { fill: none; stroke: var(--accent-2); stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.p-prev { fill: none; stroke: var(--dim); stroke-width: 1.6; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.p-lim { stroke: var(--exp); stroke-width: 1.2; stroke-dasharray: 2 4; vector-effect: non-scaling-stroke; opacity: .7; }
.p-grid { stroke: var(--track); stroke-width: 1; }
.p-dot { fill: var(--accent-2); stroke: var(--bg); stroke-width: 2.5; filter: drop-shadow(0 0 6px rgba(163, 237, 113, .8)); }
.legend-inline { display: flex; gap: 6px 14px; font-size: 12px; color: var(--muted); font-weight: 600; margin-top: 8px; flex-wrap: wrap; }
.legend-inline i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.people { display: flex; flex-direction: column; gap: 12px; }
.person { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px 10px; align-items: center; }
.person .bar { grid-column: 2 / 4; height: 8px; }
.person b { font-weight: 800; }
.big-num { font-size: 28px; font-weight: 800; letter-spacing: -.03em; line-height: 1.15; }
.dyn { display: grid; grid-template-columns: auto minmax(0, 1fr) auto 64px 40px; align-items: center; gap: 10px; padding: 7px 0; }
.dyn + .dyn { border-top: 1px solid var(--line); }
.dyn .n { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.dyn .v { font-weight: 800; white-space: nowrap; font-size: 14px; }
.dyn .avg { color: var(--dim); font-size: 12px; font-weight: 700; text-align: right; }
.badge { font-size: 11px; font-weight: 800; padding: 3px 7px; border-radius: 8px; background: var(--card2); color: var(--muted); text-align: center; white-space: nowrap; min-height: 21px; }
.badge.up { background: rgba(255, 107, 129, .14); color: var(--exp); }
.badge.down { background: rgba(52, 224, 161, .14); color: var(--inc); }
.badge.new { background: rgba(163, 237, 113, .14); color: var(--accent-2); }
.place { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 4px 10px; align-items: center; padding: 7px 0; }
.place + .place { border-top: 1px solid var(--line); }
.place .ico { grid-row: span 2; }
.place .n { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.place .cnt { font-size: 12px; font-weight: 700; }
.place b { font-weight: 800; white-space: nowrap; font-size: 14px; }
.place .bar { grid-column: 2 / 5; height: 5px; }
.stack { display: flex; height: 14px; border-radius: 99px; overflow: hidden; background: var(--track); gap: 2px; }
.stack > i { display: block; height: 100%; }
.split-legend { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; font-size: 13.5px; font-weight: 600; }
.split-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 8px; }
.split-legend b { margin-left: 6px; }
/* календар */
.hm-h, .hm-g { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.hm-h span { text-align: center; font-size: 11px; font-weight: 700; color: var(--dim); padding-bottom: 4px; }
.hm-c { height: clamp(32px, 9vw, 40px); width: 100%; border-radius: 9px; display: grid; place-items: center; font-size: 11.5px; font-weight: 700; color: var(--muted); background: var(--track); border: 1px solid transparent; transition: transform .15s var(--spring); }
button.hm-c:hover { transform: scale(1.08); }
.hm-c.empty { background: none; }
.hm-c.l1 { background: rgba(131, 232, 70, .22); color: #e3fad4; }
.hm-c.l2 { background: rgba(131, 232, 70, .42); color: #fff; }
.hm-c.l3 { background: rgba(129, 223, 49, .55); color: #fff; }
.hm-c.l4 { background: linear-gradient(135deg, var(--gold), #f59e0b); color: #2a1a00; }
.hm-c.today { border-color: var(--accent-2); }
.hm-c.future { opacity: .35; }
.hm-legend { display: flex; align-items: center; gap: 4px; justify-content: flex-end; margin-top: 10px; font-size: 11px; color: var(--dim); font-weight: 700; }
.hm-legend .hm-c { width: 14px; height: 14px; border-radius: 4px; }
.hm-legend span { margin: 0 4px; }

/* ---------- звірка ---------- */

.rh-ico { width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; flex: none; background: rgba(52, 224, 161, .15); color: var(--inc); }

.rc-grid-wrap { display: grid; gap: 12px; }
.rc { background: linear-gradient(180deg, rgba(40, 47, 42, .55), rgba(28, 33, 30, .92)); border: 1px solid var(--line); border-radius: 22px; padding: 14px; min-width: 0; }
.rc.bad { border-color: rgba(255, 107, 129, .35); }
.rc-h { display: flex; align-items: center; gap: 12px; }
.rc-h .mid { flex: 1; min-width: 0; }
.rc-h .t1 { font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-h .t2 { font-size: 12.5px; color: var(--muted); }
.t-own { font-size: 11.5px; font-weight: 700; }
.rc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.rc-cell { background: rgba(12, 15, 13, .45); border: 1px solid var(--line); border-radius: 15px; padding: 10px 12px; min-width: 0; display: block; }
.rc-cell small { display: block; color: var(--muted); font-size: 11.5px; font-weight: 700; }
.rc-cell b { font-size: 18px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.rc-cell.in { border-color: rgba(163, 237, 113, .3); cursor: text; transition: border-color .2s, box-shadow .2s; }
.rc-cell.in:focus-within { border-color: var(--accent-2); box-shadow: 0 0 0 3px rgba(163, 237, 113, .15); }
.rc-cell input { width: 100%; background: none; border: 0; font-size: 18px; font-weight: 800; padding: 0; color: var(--text); }
.rc-cell input::placeholder { color: var(--dim); }
.rc-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.rc-diff { font-size: 13px; font-weight: 700; min-height: 20px; }
.chip-ok, .chip-bad, .chip-warn { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 10px; animation: pop .3s var(--spring); }
.chip-ok { color: var(--inc); background: rgba(52, 224, 161, .12); }
.chip-bad { color: var(--exp); background: rgba(255, 107, 129, .12); }
.chip-warn { color: var(--gold); background: rgba(245, 192, 74, .12); }
.rc-alert { display: flex; gap: 10px; margin-top: 12px; padding: 11px 12px; border-radius: 14px; background: rgba(255, 107, 129, .08); border: 1px solid rgba(255, 107, 129, .2); font-size: 13px; line-height: 1.45; color: #ffd0d8; }
.rc-alert .i { color: var(--exp); margin-top: 1px; }
.rc-toggle { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 13px; font-weight: 700; color: var(--accent-2); padding: 6px 2px; text-align: left; }
.rc-list { margin-top: 4px; border-top: 1px solid var(--line); padding-top: 4px; animation: fadeIn .3s; }
.rc-compare { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 14px; color: var(--dim); }
.rc-compare small { display: block; font-size: 12px; font-weight: 700; color: var(--muted); }
.rc-compare b { font-size: 19px; font-weight: 800; color: var(--text); white-space: nowrap; }
.rc-compare > div:last-child { text-align: right; }
.choice { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.choice-btn { display: flex; gap: 12px; align-items: center; text-align: left; padding: 14px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); transition: border-color .2s, transform .15s var(--spring), background .2s; }
.choice-btn:hover { border-color: var(--line2); background: var(--card2); }
.choice-btn:active { transform: scale(.98); }
.choice-btn b { display: block; font-weight: 800; }
.choice-btn small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; }

/* ---------- списки налаштувань ---------- */
.list { background: linear-gradient(180deg, rgba(40, 47, 42, .45), rgba(28, 33, 30, .9)); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; width: 100%; text-align: left; color: var(--text); transition: background .15s; }
.li + .li { border-top: 1px solid var(--line); }
.li:hover { background: rgba(255, 255, 255, .05); }
.li .mid { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.li .t1 { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.li .t2 { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.li b { white-space: nowrap; }
.li .chev { color: var(--dim); }
.li.add { color: var(--accent-2); font-weight: 800; }
.li.off { opacity: .45; }
.li.compact { padding: 8px 2px; }
.card .li + .li { border-top: 1px solid var(--line); }
.group-t { font-size: 12px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin: 22px 4px 8px; }
.back { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-weight: 700; margin-bottom: 6px; }
.demo-banner { display: flex; gap: 10px; align-items: flex-start; background: rgba(245, 192, 74, .08); border: 1px solid rgba(245, 192, 74, .25); color: var(--gold-2); border-radius: 15px; padding: 11px 12px; font-size: 13px; font-weight: 600; margin-bottom: 14px; line-height: 1.45; }

/* ---------- шит (модалка) ---------- */
.sheet-bg { position: fixed; inset: 0; z-index: 50; background: rgba(7, 9, 8, .66); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); opacity: 0; transition: opacity .25s; }
.sheet-bg.show { opacity: 1; }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 51; max-height: calc(100dvh - 24px - var(--safe-t)); overflow-y: auto; overscroll-behavior: contain;
  background: linear-gradient(180deg, #202522, var(--bg2) 140px); border-top-left-radius: 28px; border-top-right-radius: 28px; border: 1px solid var(--line2); border-bottom: 0;
  padding: 8px 16px calc(18px + var(--safe-b));
  transform: translateY(100%); transition: transform .38s var(--ease);
  box-shadow: 0 -20px 60px rgba(0, 0, 0, .5);
}
.sheet.show { transform: none; }
.grab { width: 42px; height: 5px; border-radius: 99px; background: var(--line2); margin: 2px auto 10px; }
.sheet-h { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.sheet-h h2 { flex: 1; margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -.02em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.x { width: 38px; height: 38px; border-radius: 13px; background: var(--card); display: grid; place-items: center; color: var(--muted); flex: none; transition: color .2s, transform .2s var(--spring); }
.x:hover { color: var(--text); transform: rotate(90deg); }

.amount-box { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 12px 16px; margin: 12px 0; display: flex; align-items: center; gap: 10px; transition: border-color .2s, box-shadow .2s; }
.amount-box:focus-within { border-color: rgba(163, 237, 113, .55); box-shadow: 0 0 0 4px rgba(255, 255, 255, .1); }
.amount-box input { flex: 1; min-width: 0; background: none; border: 0; font-size: 34px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; padding: 0; }
.amount-box input::placeholder { color: var(--dim); }
.amount-box .cur { font-size: 26px; font-weight: 800; color: var(--muted); }
.amount-box .calc { font-size: 12px; color: var(--muted); font-weight: 700; white-space: nowrap; }
.amount-box.exp input { color: var(--exp); } .amount-box.inc input { color: var(--inc); }

.f-label { font-size: 12.5px; color: var(--muted); font-weight: 800; margin: 14px 2px 8px; display: flex; justify-content: space-between; gap: 8px; }
.cat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.cat-btn { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px; border-radius: 17px; background: var(--card); border: 1.5px solid transparent; font-size: 12px; font-weight: 700; color: var(--muted); min-width: 0; transition: transform .15s var(--spring), border-color .2s, background .2s; }
.cat-btn:active { transform: scale(.94); }
.cat-btn span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 2px; }
.cat-btn.on { border-color: var(--c, var(--accent-2)); color: var(--text); background: color-mix(in srgb, var(--c, #a3ed71) 12%, var(--card)); }
.cat-btn.on .ico { transform: scale(1.06); }
.cat-btn .ico { width: 40px; height: 40px; border-radius: 13px; transition: transform .25s var(--spring); }
.opt-row { display: flex; gap: 8px; flex-wrap: wrap; }
.opt { padding: 9px 12px; border-radius: 13px; background: var(--card); border: 1.5px solid transparent; font-weight: 700; font-size: 13.5px; color: var(--muted); display: inline-flex; gap: 7px; align-items: center; transition: border-color .2s, color .2s, background .2s; max-width: 100%; }
.opt.on { border-color: var(--accent-2); color: var(--text); background: var(--accent-soft); }
.opt.on .i { color: var(--accent-2); }
.opt small { color: var(--dim); font-weight: 600; }
.opt[disabled] { opacity: .45; }
.date-opt input[type=date] { background: none; border: 0; color: inherit; font-weight: 700; padding: 0; color-scheme: dark; width: 128px; font-size: 14px; min-width: 0; }
.field { width: 100%; background: var(--card); border: 1px solid var(--line); border-radius: 15px; padding: 13px 14px; font-weight: 600; font-size: 16px; transition: border-color .2s, box-shadow .2s; }
.field:focus { border-color: rgba(163, 237, 113, .55); box-shadow: 0 0 0 4px rgba(255, 255, 255, .1); }
select.field { appearance: none; -webkit-appearance: none; }
input[type=date].field { color-scheme: dark; min-height: 50px; }
.grid2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.sheet-foot { display: flex; gap: 10px; margin-top: 20px; }
.sheet-foot .btn.primary { flex: 1; padding: 15px; font-size: 15.5px; }
.sheet-foot .btn.danger { min-width: 54px; }
.meta { font-size: 12px; color: var(--dim); text-align: center; margin-top: 12px; }
.note-ro { display: flex; gap: 10px; background: var(--card); border-radius: 15px; padding: 12px 14px; color: var(--muted); font-size: 13.5px; line-height: 1.45; }
.swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.sw { width: 34px; height: 34px; border-radius: 11px; border: 2px solid transparent; transition: transform .15s var(--spring); }
.sw:hover { transform: scale(1.1); }
.sw.on { border-color: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .15); }
.icon-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 6px; }
.icon-pick button { height: 44px; border-radius: 13px; background: var(--card); display: grid; place-items: center; color: var(--muted); border: 1.5px solid transparent; transition: transform .15s var(--spring), color .2s; }
.icon-pick button:hover { color: var(--text); }
.icon-pick button.on { border-color: var(--c); color: var(--c); background: color-mix(in srgb, var(--c) 14%, var(--card)); transform: scale(1.05); }
.cat-head { display: flex; gap: 12px; align-items: center; }
.cat-head .field { flex: 1; }
.switch { position: relative; width: 48px; height: 29px; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.switch span { position: absolute; inset: 0; border-radius: 99px; background: var(--card3); transition: background .25s; }
.switch span::after { content: ''; position: absolute; width: 23px; height: 23px; left: 3px; top: 3px; border-radius: 50%; background: #fff; transition: transform .3s var(--spring); box-shadow: 0 2px 6px rgba(0, 0, 0, .3); }
.switch input:checked + span { background: linear-gradient(135deg, #97eb5e, #81e846); }
.switch input:checked + span::after { transform: translateX(19px); }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.toggle { margin-top: 16px; font-weight: 700; cursor: pointer; }
.toggle .dim { font-weight: 600; font-size: 13px; }
.w-head { display: flex; gap: 14px; align-items: center; }
.w-last { display: flex; gap: 8px; align-items: center; margin-top: 14px; padding: 10px 12px; border-radius: 14px; background: rgba(52, 224, 161, .08); color: #b4f5dd; font-size: 13px; font-weight: 600; }
.w-last.bad { background: rgba(255, 107, 129, .1); color: #ffd0d8; }
.action-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.act-btn { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 12px 4px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); font-size: 12.5px; font-weight: 700; color: var(--muted); transition: transform .15s var(--spring), background .2s; }
.act-btn:hover { background: var(--card2); color: var(--text); }
.act-btn:active { transform: scale(.94); }

/* ---------- toast ---------- */
#toast { position: fixed; left: 50%; bottom: calc(104px + var(--safe-b)); transform: translate(-50%, 20px) scale(.96); z-index: 80; opacity: 0; pointer-events: none;
  display: flex; align-items: center; gap: 9px;
  background: rgba(53, 62, 56, .96); border: 1px solid var(--line2); color: var(--text); padding: 11px 16px; border-radius: 16px; font-weight: 700; font-size: 14px; box-shadow: var(--shadow);
  transition: opacity .25s, transform .35s var(--spring); max-width: calc(100vw - 32px); backdrop-filter: blur(10px); }
#toast.show { opacity: 1; transform: translate(-50%, 0) scale(1); }
#toast.ok .i { color: var(--inc); }
#toast.err { background: rgba(70, 22, 36, .96); border-color: rgba(255, 107, 129, .4); }
#toast.err .i { color: var(--exp); }

/* ---------- логін / скелет ---------- */
.login { min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; }
.login-card { width: 100%; max-width: 380px; }
.logo { display: flex; align-items: center; gap: 12px; margin-bottom: 26px; color: var(--text); }
.logo-img { border-radius: 24%; display: block; flex: none; box-shadow: 0 10px 30px rgba(129, 232, 70, .35); }
.logo b { font-size: 26px; font-weight: 800; letter-spacing: .06em; display: block; background: linear-gradient(90deg, #fff, #c8f4aa 60%, var(--gold-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.logo small { color: var(--muted); font-weight: 600; }
.login form { display: flex; flex-direction: column; gap: 10px; }
.err-text { color: var(--exp); font-size: 13.5px; font-weight: 600; min-height: 18px; }
.skel-wrap { max-width: 640px; margin: 0 auto; padding: calc(20px + var(--safe-t)) 16px; display: flex; flex-direction: column; gap: 14px; }
.skel { border-radius: 18px; background: linear-gradient(90deg, var(--card) 0%, var(--card2) 50%, var(--card) 100%); background-size: 800px 100%; animation: shimmer 1.4s linear infinite; }

/* ---------- обгортки ---------- */
.only-m { display: grid; }

/* ---------- планшет ---------- */
@media (min-width: 640px) {
  .ins { flex-basis: 340px; }
  .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .masonry { columns: 2; }
  .rc-grid-wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cat-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* ---------- десктоп ---------- */
@media (min-width: 960px) {
  .app { display: grid; grid-template-columns: 252px minmax(0, 1fr); }
  .side {
    display: flex; flex-direction: column; gap: 4px; position: sticky; top: 0; height: 100dvh; padding: 24px 16px;
    border-right: 1px solid var(--line); background: rgba(15, 17, 16, .65); backdrop-filter: blur(10px);
  }
  .side .logo { margin: 0 6px 26px; }
  .side .logo b { font-size: 21px; }
  .side > a { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 13px; color: var(--muted); font-weight: 700; transition: background .2s, color .2s; }
  .side > a:hover { background: var(--card); color: var(--text); }
  .side > a.on { background: linear-gradient(90deg, var(--accent-soft), transparent); color: var(--text); box-shadow: inset 2px 0 0 var(--accent-2); }
  .side > a.on .i { color: var(--accent-2); }
  .side .btn.primary { margin: 0 0 18px; }
  .side .who { margin-top: auto; display: flex; gap: 10px; align-items: center; padding: 10px; color: var(--muted); font-weight: 700; font-size: 13.5px; }
  .tabbar, .only-m { display: none; }
  main#view { padding: 28px 32px 48px; width: 100%; }
  .top h1 { font-size: 30px; }
  .home-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 20px; align-items: start; }
  .home-grid > div > .section:first-child { margin-top: 0; }
  
  .ins-track { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); overflow: visible; padding: 0; }
  .ins-dots { display: none; }
  .kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .masonry { columns: 2; }
  .wallets { margin: 14px 0 0; padding: 2px 0 4px; flex-wrap: wrap; overflow: visible; }
  .chips { margin: 0 0 8px; padding: 0; flex-wrap: wrap; }
  .sheet { left: 50%; right: auto; bottom: auto; top: 50%; width: 560px; max-height: 88dvh; border-radius: 28px; border-bottom: 1px solid var(--line2);
    transform: translate(-50%, -46%) scale(.97); opacity: 0; transition: transform .3s var(--ease), opacity .25s; padding: 18px 22px 22px; }
  .sheet.show { transform: translate(-50%, -50%); opacity: 1; }
  .grab { display: none; }
  #toast { bottom: 28px; }
  .history-wrap { max-width: 800px; }
  .narrow { max-width: 680px; }
  .narrow-l { max-width: 1040px; }
}
@media (min-width: 1320px) { .masonry { columns: 3; } }
@media (max-width: 370px) {
  main#view { padding-left: 12px; padding-right: 12px; }
  .wallets, .chips { margin-left: -12px; margin-right: -12px; }
  .wallets, .chips, .ins-track { padding-left: 12px; padding-right: 12px; }
  .cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .seg button { padding: 8px 10px; }
    
  .h-sub { display: none; }
  .ins { padding-right: 34px; }
  .monthnav span { min-width: 104px; font-size: 13px; }
  .action-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dyn { grid-template-columns: auto minmax(0, 1fr) auto 58px; } .dyn .avg { display: none; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* ============================================================ v3: герой, стан казни, календар, чеки, продукти, сповіщення */
/* ---------- герой «Сімейна казна» ---------- */
.hero2 {
  position: relative; overflow: hidden; isolation: isolate; border-radius: 30px; padding: 18px 18px 14px;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(129, 223, 49, .28), transparent 55%),
    radial-gradient(90% 80% at 0% 100%, rgba(245, 192, 74, .2), transparent 60%),
    linear-gradient(150deg, #63ca29 0%, #42861b 45%, #282f2a 100%);
  border: 1px solid rgba(187, 242, 153, .28);
  box-shadow: 0 24px 60px rgba(65, 140, 23, .38), inset 0 1px 0 rgba(255, 255, 255, .14);
}
.hero2::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: .5;
  background-image: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px); background-size: 16px 16px;
  mask-image: linear-gradient(180deg, #000, transparent 70%); -webkit-mask-image: linear-gradient(180deg, #000, transparent 70%); }
.hero2.tight { background:
    radial-gradient(120% 90% at 100% 0%, rgba(255, 107, 129, .25), transparent 55%),
    radial-gradient(90% 80% at 0% 100%, rgba(245, 192, 74, .18), transparent 60%),
    linear-gradient(150deg, #4f8832 0%, #39443d 50%, #202622 100%); }
.h2-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.h2-lbl { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #e7fadb; }
.h2-day { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; color: #d7f8c3; background: rgba(17, 19, 18, .3); padding: 4px 10px 4px 5px; border-radius: 99px; }
.h2-cap { margin-top: 14px; font-size: 13px; font-weight: 700; color: #cbf6b2; }
.h2-big { display: flex; align-items: baseline; gap: 6px; font-size: clamp(36px, 11vw, 50px); font-weight: 800; letter-spacing: -.04em; line-height: 1.05; margin: 2px 0 6px; white-space: nowrap; }
.h2-big small { font-size: .5em; color: var(--gold-2); letter-spacing: 0; }
.h2-big.neg { color: #ffb3bf; }
.h2-sub { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: #dbf9ca; min-height: 18px; }
.h2-sub .i { color: var(--gold-2); }
.h2-bar { display: flex; gap: 3px; height: 6px; border-radius: 99px; overflow: hidden; margin: 14px 0 0; background: rgba(255, 255, 255, .1); }
.h2-bar i { display: block; min-width: 4px; }
.h2-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; margin-top: 12px; }
.h2-tile { position: relative; text-align: left; padding: 10px 11px; border-radius: 17px; min-width: 0; color: var(--text);
  background: linear-gradient(160deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .04)); border: 1px solid rgba(255, 255, 255, .12);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); display: flex; flex-direction: column; gap: 1px; transition: transform .18s var(--spring), background .2s; }
.h2-tile::after { content: ''; position: absolute; left: 11px; right: 11px; top: 0; height: 2px; border-radius: 0 0 3px 3px; background: var(--wc); opacity: .9; }
.h2-tile:hover { background: linear-gradient(160deg, rgba(255, 255, 255, .17), rgba(255, 255, 255, .06)); }
.h2-tile:active { transform: scale(.96); }
.h2-ti { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; color: var(--wc); background: rgba(16, 19, 17, .35); margin-bottom: 6px; }
.h2-tn { font-size: 12px; font-weight: 700; color: #dbf9ca; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.h2-tile b { font-size: 15.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.h2-tile small { font-size: 11px; font-weight: 700; color: #b4e09a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.h2-month { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .1); }
.h2-m { display: flex; align-items: center; gap: 8px; min-width: 0; }
.h2-m > span:last-child { min-width: 0; display: flex; flex-direction: column; }
.h2-m small { font-size: 11px; font-weight: 700; color: #cbf6b2; }
.h2-m b { font-size: 13.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.h2-mi { width: 28px; height: 28px; border-radius: 10px; display: grid; place-items: center; flex: none; background: rgba(16, 19, 17, .35); color: #e3fad4; }
.h2-mi.exp { color: var(--exp); } .h2-mi.inc { color: var(--inc); }
.ring { display: block; }
.h2-contrib { margin-top: 12px; width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 11px; border-radius: 15px; font-weight: 800; font-size: 14px;
  color: #2a1a00; background: linear-gradient(135deg, #ffe08a, #f5c04a 60%, #e6a523); box-shadow: 0 8px 20px rgba(245, 192, 74, .3); transition: transform .15s var(--spring); }
.h2-contrib:active { transform: scale(.97); }

/* ---------- блок «Стан казни» ---------- */
.status { --lc: var(--inc); margin-top: 14px; border-radius: 24px; padding: 14px; position: relative; overflow: hidden;
  background: linear-gradient(160deg, color-mix(in srgb, var(--lc) 12%, transparent), rgba(28, 33, 30, .94) 55%);
  border: 1px solid color-mix(in srgb, var(--lc) 30%, transparent); }
.status.lvl-danger { --lc: var(--exp); } .status.lvl-warn { --lc: var(--gold); } .status.lvl-info { --lc: var(--accent-2); } .status.lvl-good { --lc: var(--inc); }
.sc-head { display: flex; align-items: center; gap: 12px; }
.sc-hico { width: 40px; height: 40px; border-radius: 14px; display: grid; place-items: center; flex: none; color: var(--lc); background: color-mix(in srgb, var(--lc) 16%, transparent); }
.status.lvl-danger .sc-hico { animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--lc) 40%, transparent); } 50% { box-shadow: 0 0 0 8px transparent; } }
.sc-ht { flex: 1; min-width: 0; }
.sc-ht b { display: block; font-size: 16px; font-weight: 800; letter-spacing: -.01em; }
.sc-ht small { display: block; color: var(--muted); font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-pill { font-size: 11.5px; font-weight: 800; padding: 5px 10px; border-radius: 99px; color: var(--lc); background: color-mix(in srgb, var(--lc) 15%, transparent); white-space: nowrap; }
.sc-list { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.sc-item { --ic: var(--accent-2); position: relative; display: flex; gap: 11px; align-items: flex-start; padding: 11px 36px 11px 11px; border-radius: 16px;
  background: rgba(12, 15, 13, .45); border: 1px solid var(--line); transition: transform .25s var(--ease), opacity .25s; }
.sc-item.lvl-danger { --ic: var(--exp); } .sc-item.lvl-warn { --ic: var(--gold); } .sc-item.lvl-good { --ic: var(--inc); }
.sc-item::before { content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: var(--ic); }
.sc-item.out { opacity: 0; transform: translateX(30px); }
.sc-ico { width: 34px; height: 34px; border-radius: 12px; display: grid; place-items: center; flex: none; color: var(--ic); background: color-mix(in srgb, var(--ic) 14%, transparent); }
.sc-body { min-width: 0; }
.sc-body b { display: block; font-size: 14px; font-weight: 800; line-height: 1.3; }
.sc-body p { margin: 2px 0 0; color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.sc-cta { margin-top: 8px; display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 800; color: var(--ic); padding: 5px 10px; border-radius: 9px; background: color-mix(in srgb, var(--ic) 14%, transparent); }
.sc-x { position: absolute; right: 6px; top: 6px; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; color: var(--dim); }
.sc-x:hover { color: var(--text); background: rgba(255, 255, 255, .06); }
.sc-more { display: flex; align-items: center; justify-content: center; gap: 4px; width: 100%; margin-top: 8px; padding: 9px; border-radius: 12px; font-size: 13px; font-weight: 800; color: var(--accent-2); }
.sc-more:hover { background: rgba(255, 255, 255, .04); }
.sc-calm { display: flex; align-items: center; gap: 8px; margin: 10px 2px 0; color: var(--muted); font-size: 13px; }
.page.enter .sc-item { animation: fadeUp .4s var(--ease) both; animation-delay: calc(var(--i, 0) * 50ms + 150ms); }
.page.enter .h2-tile { animation: pop .45s var(--spring) both; animation-delay: calc(var(--i, 0) * 60ms + 120ms); }

/* ---------- вкладки аналітики ---------- */
.kpis-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.link-btn { display: inline-flex; align-items: center; gap: 5px; color: var(--accent-2); font-weight: 800; font-size: 13px; padding: 8px 2px; }
.link-btn.inline { padding: 0 0 0 4px; font-size: 12.5px; }
.legend-row.static { cursor: default; }

/* ---------- календар ---------- */
.cal-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.cal-stats span { background: rgba(12, 15, 13, .45); border: 1px solid var(--line); border-radius: 13px; padding: 8px 10px; min-width: 0; }
.cal-stats small { display: block; font-size: 11px; font-weight: 700; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-stats b { font-size: 14px; font-weight: 800; white-space: nowrap; }
.cal-h, .cal-g { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)) 38px; gap: 4px; }
.cal-h span { text-align: center; font-size: 11px; font-weight: 800; color: var(--dim); padding-bottom: 4px; }
.cal-h span.we { color: var(--gold); opacity: .8; }
.cal-h .cal-wh { color: var(--muted); font-size: 10px; }
.cal-c { position: relative; height: clamp(40px, 11.2vw, 50px); border-radius: 11px; display: flex; flex-direction: column; justify-content: space-between; padding: 4px 5px;
  background: rgba(255, 255, 255, .05); border: 1.5px solid transparent; color: var(--muted); min-width: 0; transition: transform .15s var(--spring), border-color .15s; text-align: left; }
button.cal-c:hover { transform: translateY(-2px); }
.cal-c.empty { background: none; }
.cal-c .cd { font-size: 10.5px; font-weight: 800; line-height: 1; opacity: .85; }
.cal-c .cv { font-size: 10.5px; font-weight: 800; line-height: 1; align-self: flex-end; color: var(--text); letter-spacing: -.02em; }
.cal-c.we .cd { color: var(--gold-2); }
.cal-c.l1 { background: rgba(131, 232, 70, .16); }
.cal-c.l2 { background: rgba(131, 232, 70, .34); }
.cal-c.l3 { background: linear-gradient(160deg, rgba(129, 223, 49, .55), rgba(131, 232, 70, .45)); }
.cal-c.l4 { background: linear-gradient(160deg, #ffd978, #f5a524); color: #3a2400; }
.cal-c.l4 .cv, .cal-c.l4 .cd { color: #2a1a00; }
.cal-c.l3 .cd, .cal-c.l2 .cd { color: #eafbdf; }
.cal-c.today { border-color: var(--accent-2); box-shadow: 0 0 0 2px rgba(163, 237, 113, .2); }
.cal-c.future { opacity: .3; pointer-events: none; }
.cal-c.sel { border-color: #fff; transform: scale(1.04); box-shadow: 0 6px 18px rgba(0, 0, 0, .4); z-index: 1; }
.cal-w { display: grid; place-items: center; font-size: 10.5px; font-weight: 800; color: var(--muted); border-left: 1px dashed var(--line2); }
.cal-legend { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 12px; font-size: 11px; font-weight: 700; color: var(--muted); }
.cal-legend span { display: inline-flex; align-items: center; gap: 5px; }
.cal-legend .cal-c { width: 14px; height: 14px; border-radius: 4px; padding: 0; display: inline-block; }
.cal-detail { margin-top: 12px; padding: 12px; border-radius: 16px; background: rgba(12, 15, 13, .45); border: 1px solid var(--line2); animation: fadeUp .3s var(--ease); }
.cd-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.cd-h b { font-size: 14.5px; }
.cd-h .num { font-weight: 800; display: inline-flex; gap: 6px; align-items: center; }
.page.enter .cal-c:not(.empty) { animation: pop .35s var(--ease) both; animation-delay: var(--d, 0ms); }

/* ---------- чек і товари ---------- */
.rcpt { background: rgba(12, 15, 13, .4); border: 1px solid var(--line); border-radius: 18px; padding: 10px; }
.rthumbs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.rthumbs::-webkit-scrollbar { display: none; }
.rthumb { position: relative; flex: none; width: 70px; height: 88px; border-radius: 13px; overflow: hidden; background: var(--card2); border: 1px solid var(--line2); }
.rthumb img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: zoom-in; }
.rthumb.new { border-color: rgba(163, 237, 113, .5); }
.rx { position: absolute; right: 4px; top: 4px; width: 22px; height: 22px; border-radius: 8px; display: grid; place-items: center; background: rgba(12, 15, 13, .75); color: #fff; }

.btn.ai { margin-top: 10px; background: linear-gradient(135deg, rgba(167, 139, 250, .22), rgba(129, 223, 49, .16)); border-color: rgba(167, 139, 250, .4); color: #e4dcff; }
.btn.ai .i { color: #c4b5fd; }
.spin-s { width: 16px; height: 16px; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, .25); border-top-color: #fff; animation: sp .8s linear infinite; display: inline-block; }
.items { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.it { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px 8px; align-items: center; padding: 8px; border-radius: 13px; background: var(--card); border: 1px solid var(--line); }
.it .ico.xs { width: 28px; height: 28px; border-radius: 9px; }
.it-name { background: none; border: 0; font-weight: 700; font-size: 16px; min-width: 0; padding: 2px 0; color: var(--text); }
.it-x { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; color: var(--dim); }
.it-x:hover { color: var(--exp); background: rgba(255, 107, 129, .1); }
.it-nums { grid-column: 2 / 4; display: grid; grid-template-columns: 62px 58px auto 76px auto minmax(0, 1fr); gap: 6px; align-items: center; }
.it-nums input, .it-nums select { width: 100%; min-width: 0; background: var(--bg2); border: 1px solid var(--line); border-radius: 9px; padding: 6px 7px; font-size: 16px; font-weight: 700; color: var(--text); }
.it-nums select { appearance: none; -webkit-appearance: none; text-align: center; padding: 6px 4px; }
.it-nums b { text-align: right; font-size: 13.5px; font-weight: 800; white-space: nowrap; }
.it-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.it-sum { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.it-sum b { color: var(--text); }
.clip { display: inline-flex; vertical-align: -1px; margin-left: 6px; color: var(--accent-2); opacity: .8; }
/* перегляд фото */
.viewer { position: fixed; inset: 0; z-index: 90; background: rgba(6, 6, 6, .94); display: grid; place-items: center; opacity: 0; transition: opacity .2s; padding: calc(20px + var(--safe-t)) 10px calc(20px + var(--safe-b)); }
.viewer.show { opacity: 1; }
.viewer img { max-width: 100%; max-height: 100%; border-radius: 12px; box-shadow: 0 20px 60px rgba(0, 0, 0, .6); }
.vw-x { position: absolute; top: calc(12px + var(--safe-t)); right: 12px; width: 42px; height: 42px; border-radius: 14px; background: rgba(255, 255, 255, .1); color: #fff; font-size: 18px; }
.vw-prev, .vw-next { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 64px; border-radius: 14px; background: rgba(255, 255, 255, .08); color: #fff; font-size: 30px; }
.vw-prev { left: 8px; } .vw-next { right: 8px; }
.vw-count { position: absolute; bottom: calc(14px + var(--safe-b)); left: 50%; transform: translateX(-50%); color: #fff; font-weight: 800; font-size: 13px; background: rgba(255, 255, 255, .1); padding: 5px 12px; border-radius: 99px; }

/* ---------- продукти ---------- */
.empty-prod { text-align: center; padding: 28px 18px; margin-top: 6px; }
.ep-ico { width: 74px; height: 74px; border-radius: 24px; display: grid; place-items: center; margin: 0 auto 14px; color: var(--gold-2); background: linear-gradient(135deg, rgba(245, 192, 74, .2), rgba(131, 232, 70, .14)); }
.empty-prod .btn { margin-top: 16px; }
.sg { display: flex; gap: 11px; align-items: flex-start; padding: 10px 0; }
.sg + .sg { border-top: 1px solid var(--line); }
.sg-ico { width: 34px; height: 34px; border-radius: 12px; display: grid; place-items: center; flex: none; color: var(--accent-2); background: var(--accent-soft); }
.sg-ico.up { color: var(--exp); background: rgba(255, 107, 129, .12); }
.sg-ico.down { color: var(--inc); background: rgba(52, 224, 161, .12); }
.sg b { display: block; font-size: 14px; font-weight: 800; line-height: 1.3; }
.sg p { margin: 2px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.45; }

.card h3 button.more { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 800; color: var(--accent-2); }
.search.sm { margin-bottom: 8px; }
.search.sm input { padding: 9px 0; }
.sort-row { margin-bottom: 6px; }
.sort-row .seg button { padding: 6px 11px; font-size: 12.5px; }
.prod { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; padding: 9px 4px; border-radius: 13px; transition: background .15s; }
.prod + .prod { border-top: 1px solid var(--line); }
.prod:hover { background: rgba(255, 255, 255, .05); }
.prod .mid { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.prod .t1 { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prod .t2 { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr { display: flex; flex-direction: column; align-items: flex-end; flex: none; }
.pr b { font-weight: 800; white-space: nowrap; }
.pr small { font-size: 11.5px; color: var(--dim); font-weight: 700; white-space: nowrap; }
.page.enter .prod { animation: fadeUp .4s var(--ease) both; animation-delay: calc(var(--i, 0) * 25ms + 120ms); }
.mini-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.mini-kpis > div { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 9px 11px; min-width: 0; }
.mini-kpis small { display: block; font-size: 11.5px; color: var(--muted); font-weight: 700; }
.mini-kpis b { font-size: 14.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.spark { width: 100%; height: auto; display: block; background: var(--card); border: 1px solid var(--line); border-radius: 14px; }
.sp-area { fill: rgba(255, 255, 255, .12); }
.sp-line { fill: none; stroke: var(--accent-2); stroke-width: 2.4; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.sp-dot { fill: var(--accent-2); } .sp-dot.last { fill: var(--gold); stroke: var(--bg); stroke-width: 2; }
.sp-t { fill: var(--dim); font-size: 10px; font-weight: 700; }
.shop { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 11px 12px; color: var(--text); transition: background .15s, opacity .2s; }
.shop + .shop { border-top: 1px solid var(--line); }
.shop > .i { color: var(--accent-2); }
.shop .mid { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.shop .t1 { font-weight: 700; }
.shop .t2 { font-size: 12px; color: var(--muted); }
.shop.on { opacity: .5; }
.shop.on .t1 { text-decoration: line-through; }
.shop.on > .i { color: var(--inc); }

/* ---------- сповіщення ---------- */
.push-st { display: flex; gap: 12px; align-items: flex-start; }
.push-st b { display: block; font-size: 15px; font-weight: 800; }
.push-st p { margin: 3px 0 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.steps { margin: 8px 0 0; padding-left: 18px; color: var(--muted); font-size: 13.5px; line-height: 1.7; }
.steps b { color: var(--text); }
.steps .i { display: inline-block; vertical-align: -2px; color: var(--accent-2); }
.li.pref { cursor: pointer; }
.li.pref .t2 { white-space: normal; }

@media (min-width: 640px) {
  .kpis-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .h2-tiles { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
}
@media (min-width: 960px) {
  .kpis.kpis-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hero2 { padding: 22px 22px 16px; }
  .cal-c { height: 48px; }
}
@media (max-width: 370px) {
  .h2-month { gap: 4px; } .h2-m { gap: 5px; } .h2-mi { width: 24px; height: 24px; } .h2-m b { font-size: 12px; }
  .it-nums { grid-template-columns: 54px 52px auto 64px auto minmax(0, 1fr); gap: 4px; }
  .cal-h, .cal-g { grid-template-columns: repeat(7, minmax(0, 1fr)) 30px; gap: 3px; }
  .cal-c .cv { font-size: 9.5px; }
  .cal-stats b { font-size: 12.5px; }
}

/* ---------- план бюджету ---------- */
.plan { padding: 14px; }
.plan-rate { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13.5px; font-weight: 700; color: var(--muted); }
.plan-rate .i { color: var(--gold); }
.plan-rate b { color: var(--text); }
.plan-rate small { margin-left: auto; font-size: 11.5px; color: var(--dim); font-weight: 700; }
.plan-in { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.plan-field { display: grid; grid-template-columns: auto 1fr; gap: 4px 8px; align-items: center; background: rgba(12, 15, 13, .45); border: 1px solid var(--line); border-radius: 15px; padding: 10px 12px; cursor: text; min-width: 0; }
.plan-field:focus-within { border-color: var(--accent-2); }
.plan-field > span:nth-child(2) { font-size: 12px; font-weight: 700; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-in { grid-column: 1 / 3; display: flex; align-items: baseline; gap: 4px; }
.pf-in input { width: 100%; min-width: 0; background: none; border: 0; font-size: 22px; font-weight: 800; padding: 0; color: var(--text); }
.pf-in i { font-style: normal; font-size: 16px; font-weight: 800; color: var(--inc); }
.plan-share { grid-column: 1 / 3; background: rgba(12, 15, 13, .45); border: 1px solid var(--line); border-radius: 15px; padding: 10px 12px; }
.ps-top { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.ps-top span { display: inline-flex; align-items: center; gap: 5px; }
.ps-top b { color: var(--text); font-size: 15px; }
.plan-share input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border-radius: 99px; margin: 12px 0 4px;
  background: linear-gradient(90deg, var(--gold) 0 var(--p), rgba(163, 237, 113, .35) var(--p) 100%); outline: none; }
.plan-share input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .4); cursor: pointer; }
.plan-share input[type=range]::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 0; }
.plan-tbl { margin-top: 12px; border-radius: 15px; overflow: hidden; border: 1px solid var(--line); }
.pt-row { display: grid; grid-template-columns: minmax(0, 1.1fr) repeat(3, minmax(0, 1fr)); gap: 6px; padding: 9px 10px; align-items: center; }
.pt-row + .pt-row { border-top: 1px solid var(--line); }
.pt-row > span { min-width: 0; display: flex; flex-direction: column; }
.pt-row b { font-size: 13px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pt-row small { font-size: 11px; color: var(--dim); font-weight: 700; }
.pt-row .fam b { color: var(--gold-2); }
.pt-h { background: rgba(12, 15, 13, .5); font-size: 11px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.pt-h span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pt-n { flex-direction: row !important; align-items: center; gap: 6px; font-weight: 700; font-size: 13px; white-space: nowrap; overflow: hidden; }
.pt-t { background: rgba(245, 192, 74, .06); }
.pt-t .pt-n { font-weight: 800; }
.plan-due { margin-top: 12px; padding: 12px; border-radius: 15px; background: linear-gradient(160deg, rgba(245, 192, 74, .1), rgba(12, 15, 13, .45)); border: 1px solid rgba(245, 192, 74, .22); }
.pd-h { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 800; color: var(--gold-2); margin-bottom: 8px; }
.pd-row + .pd-row { margin-top: 10px; }
.pd-top { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13.5px; margin-bottom: 6px; }
.pd-top b { margin-left: auto; font-weight: 800; }
.pd-row small { display: block; margin-top: 4px; font-size: 11.5px; }
@media (max-width: 370px) { .pt-row { grid-template-columns: minmax(0, .9fr) repeat(3, minmax(0, 1fr)); padding: 8px 6px; gap: 4px; } .pt-row b { font-size: 12px; } .pt-n .avatar { display: none; } }

.f-label > span { display: inline-flex; align-items: center; gap: 6px; }
.cal-c.l1 { background: rgba(131, 232, 70, .26); }
.cal-c.l2 { background: rgba(131, 232, 70, .48); }
.cal-c.l0:not(.future) { background: rgba(255, 255, 255, .045); border: 1px dashed rgba(255, 255, 255, .12); }

/* ============================================================ v4: JABA */
:root { --jaba: #8bdc55; --jaba-2: #c2f08f; }
/* навігація: 5 вкладок + плаваюча кнопка */
.tabbar { grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: center; padding-top: 6px; }
.tab { padding: 6px 0 2px; font-size: 10.5px; }

main#view { padding-bottom: calc(150px + var(--safe-b)); }
#toast { bottom: calc(150px + var(--safe-b)); }
@media (min-width: 960px) {  main#view { padding-bottom: 48px; } #toast { bottom: 28px; } }

/* бренд */
.logo b { background: linear-gradient(90deg, var(--jaba-2), var(--jaba) 45%, var(--gold-2)); -webkit-background-clip: text; background-clip: text; color: transparent; letter-spacing: .08em; }
.logo small { font-size: 11.5px; font-style: italic; }
.side .logo small { display: block; max-width: 150px; line-height: 1.3; }
.brand-word { display: block; font-size: 40px; font-weight: 800; letter-spacing: .12em; background: linear-gradient(90deg, var(--jaba-2), var(--jaba) 45%, var(--gold-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.brand-word.sm { font-size: 24px; margin-top: 8px; }
.motto { margin: 4px 0 0; font-size: 15px; font-weight: 700; font-style: italic; color: var(--muted); }
.login-hero { text-align: center; margin-bottom: 22px; }
.login-frog { width: 132px; height: 132px; border-radius: 30%; display: block; margin: 0 auto 14px; box-shadow: 0 18px 44px rgba(123, 211, 74, .28); animation: frogIn .8s var(--spring) both, frogBob 4s ease-in-out .8s infinite; }
@keyframes frogIn { from { transform: scale(.6) rotate(-8deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes frogBob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-6px) rotate(-2deg); } }
.about { text-align: center; margin: 26px 0 8px; }
.about .logo-img { margin: 0 auto; }
.pill.fam { color: var(--jaba-2); background: rgba(123, 211, 74, .12); }
.h2-motto { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; font-style: italic; color: #ffd0a0; margin-top: 2px; }

/* вибір періоду */
.period { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: -6px 0 14px; }
.period .monthnav { flex: 1 1 auto; min-width: 0; }
.pn-label { flex: 1; min-width: 0; display: inline-flex !important; align-items: center; justify-content: center; gap: 7px; width: auto !important; padding: 0 8px; font-weight: 800; font-size: 14px; color: var(--text) !important; white-space: nowrap; overflow: hidden; }
.pn-label span { overflow: hidden; text-overflow: ellipsis; }
.pn-label .i { color: var(--accent-2); flex: none; }
.presets { flex: 1 1 100%; display: flex; }
.presets button { flex: 1; padding: 7px 6px; font-size: 12.5px; }
@media (min-width: 640px) { .presets { flex: 0 0 auto; } .period .monthnav { flex: 0 1 320px; } }
.mrow { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%; text-align: left; padding: 8px 2px; border-radius: 12px; }
.mrow + .mrow { border-top: 1px solid var(--line); }
.mrow:hover { background: rgba(255, 255, 255, .05); }
.mr-n { font-weight: 800; font-size: 14px; }
.mr-n small { color: var(--dim); font-weight: 700; font-size: 11px; }
.mr-bars { display: flex; flex-direction: column; gap: 4px; }
.mr-bars .bar { height: 7px; }
.mr-bars .bar.exp > i { background: linear-gradient(90deg, #f43f5e, var(--exp)); }
.mr-bars .bar.inc > i { background: linear-gradient(90deg, #22c98a, var(--inc)); }
.mr-v { display: flex; flex-direction: column; align-items: flex-end; }
.mr-v b { font-weight: 800; font-size: 13.5px; white-space: nowrap; }
.mr-v small { font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.page.enter .mrow { animation: fadeUp .4s var(--ease) both; animation-delay: calc(var(--i, 0) * 40ms + 120ms); }
@media (max-width: 370px) { .tab { font-size: 9.5px; } .presets button { padding: 7px 3px; font-size: 11.5px; } }

/* ============================================================ v5: premium glass */
/* Ідея: графітова основа без кольору, скляні поверхні, зелений лише як акцент, золото — для грошей. */
:root {
  --glass: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .025));
  --glass-solid: rgba(17, 20, 18, .72);
  --glass-brd: rgba(255, 255, 255, .08);
  --glass-hi: inset 0 1px 0 rgba(255, 255, 255, .07);
  --blur: blur(22px) saturate(1.5);
  --well: rgba(0, 0, 0, .28);
  --on-accent: #0b1606;
}
body {
  background: var(--bg);
  font-feature-settings: 'tnum' 1, 'cv11' 1;
}
/* фонове світіння, яке «просвічує» крізь скло */
body::before {
  content: ''; position: fixed; inset: -10vmax; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38vmax 30vmax at 12% 6%, rgba(127, 211, 78, .16), transparent 70%),
    radial-gradient(30vmax 26vmax at 92% 30%, rgba(242, 193, 78, .07), transparent 70%),
    radial-gradient(34vmax 28vmax at 20% 88%, rgba(79, 227, 163, .06), transparent 70%);
  filter: saturate(1.1);
}
::selection { background: rgba(168, 232, 112, .3); }

/* ---------- скляні поверхні ---------- */
.card, .kpi, .list, .rc, .status, .rc-compare, .choice-btn, .act-btn, .mini-kpis > div, .cal-stats span, .spark {
  background: var(--glass), var(--glass-solid);
  border: 1px solid var(--glass-brd);
  box-shadow: var(--glass-hi), 0 10px 30px rgba(0, 0, 0, .25);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
}
.mini-kpis > div, .cal-stats span, .spark { box-shadow: var(--glass-hi); backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(255, 255, 255, .035); }
.card { border-radius: 24px; padding: 18px; }
.card h3, .section > h3 { font-size: 15.5px; letter-spacing: -.015em; color: var(--text); }
.card h3 .i, .section > h3 .i { color: var(--accent-2); }
.kpi { border-radius: 20px; padding: 14px 15px; }
.kpi small { color: var(--muted); letter-spacing: .01em; }
.kpi b { font-size: 20px; letter-spacing: -.025em; }
.choice-btn:hover, .act-btn:hover { background: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .04)), var(--glass-solid); border-color: rgba(255, 255, 255, .14); }
.group-t { color: var(--dim); }

/* поглиблені «колодязі» всередині карток */
.sc-item, .rc-cell, .plan-field, .plan-share, .cal-detail, .rcpt, .it-nums input, .it-nums select { background: var(--well); border-color: rgba(255, 255, 255, .06); }
.pt-h { background: rgba(255, 255, 255, .035); }
.it, .note-ro { background: rgba(255, 255, 255, .035); border-color: rgba(255, 255, 255, .06); }

/* ---------- поля, кнопки, перемикачі ---------- */
.field, .amount-box, .search, .chip-sel, .chip, .opt, .cat-btn, .icon-pick button, .monthnav, .seg, .icon-btn, .x {
  background-color: rgba(255, 255, 255, .045); border-color: rgba(255, 255, 255, .08);
}
.icon-btn, .x { border: 1px solid rgba(255, 255, 255, .08); box-shadow: var(--glass-hi); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }
.seg { background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .07); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }
.seg button.on { background: rgba(255, 255, 255, .12); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 4px 14px rgba(0, 0, 0, .3); }
.seg button.on .i { color: var(--accent-2); }
.monthnav { border: 1px solid rgba(255, 255, 255, .07); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }
.monthnav button:hover:not(:disabled) { background: rgba(255, 255, 255, .08); }
.field:focus, .amount-box:focus-within, .search:focus-within { border-color: rgba(168, 232, 112, .55); box-shadow: 0 0 0 4px rgba(168, 232, 112, .12); }
.chip.on, .chip-sel.on, .opt.on { background-color: rgba(168, 232, 112, .12); border-color: rgba(168, 232, 112, .5); color: #fff; }
.cat-btn.on { background: color-mix(in srgb, var(--c, #a8e870) 14%, rgba(255, 255, 255, .04)); }

.btn { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .09); box-shadow: var(--glass-hi); }
.btn:hover { background: rgba(255, 255, 255, .1); }
.btn.primary, .switch input:checked + span {
  background: linear-gradient(180deg, #b6ef7f 0%, #8fdc58 55%, #74c843 100%);
  color: var(--on-accent); border: 0;
  box-shadow: 0 10px 26px rgba(127, 211, 78, .28), inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -1px 0 rgba(0, 0, 0, .12);
}
.btn.primary:hover { box-shadow: 0 12px 32px rgba(127, 211, 78, .4), inset 0 1px 0 rgba(255, 255, 255, .45); filter: brightness(1.04); }
.btn.primary .i, .btn.primary svg { color: var(--on-accent); }
.btn.gold { background: linear-gradient(180deg, rgba(242, 193, 78, .2), rgba(242, 193, 78, .08)); border-color: rgba(242, 193, 78, .35); }
.btn.ai { background: linear-gradient(135deg, rgba(167, 139, 250, .22), rgba(168, 232, 112, .12)); }
.switch span { background: rgba(255, 255, 255, .12); }

/* ---------- навігація: плаваюча скляна панель ---------- */
.tabbar {
  left: 12px; right: 12px; bottom: calc(10px + var(--safe-b) * .6);
  padding: 6px; border-radius: 26px;
  background: rgba(18, 22, 19, .8);
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .08);
  backdrop-filter: blur(26px) saturate(1.8); -webkit-backdrop-filter: blur(26px) saturate(1.8);
}
.tab { position: relative; padding: 7px 0 6px; border-radius: 20px; color: #7d8680; transition: color .2s, background .25s var(--ease); }
.tab.on { color: #fff; background: rgba(255, 255, 255, .09); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); }
.tab.on .i { color: var(--accent-2); transform: none; filter: drop-shadow(0 0 8px rgba(168, 232, 112, .55)); }

main#view { padding-bottom: calc(170px + var(--safe-b)); }
#toast { bottom: calc(166px + var(--safe-b)); background: rgba(26, 30, 27, .82); border: 1px solid rgba(255, 255, 255, .12); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }
#toast.err { background: rgba(70, 22, 34, .85); }

/* ---------- шапка ---------- */
.hello small { color: var(--muted); }
.hello b { font-size: 22px; letter-spacing: -.025em; }
.top h1 { letter-spacing: -.035em; }

/* ---------- герой «Сімейна казна»: темне скло зі світінням ---------- */
.hero2, .hero {
  background:
    radial-gradient(85% 70% at 100% 0%, rgba(127, 211, 78, .34), transparent 62%),
    radial-gradient(70% 70% at 0% 100%, rgba(242, 193, 78, .14), transparent 62%),
    linear-gradient(160deg, #18201a 0%, #0f1411 60%, #0b0e0c 100%);
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 30px 60px rgba(0, 0, 0, .5), 0 0 0 1px rgba(127, 211, 78, .06), inset 0 1px 0 rgba(255, 255, 255, .1);
}
.hero2::before { opacity: .35; }
.hero2::after { content: ''; position: absolute; z-index: -1; right: -40px; top: -60px; width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, rgba(168, 232, 112, .35), transparent 65%); filter: blur(10px); animation: floaty 10s ease-in-out infinite; pointer-events: none; }
.hero2.tight { background:
    radial-gradient(85% 70% at 100% 0%, rgba(255, 111, 131, .28), transparent 62%),
    radial-gradient(70% 70% at 0% 100%, rgba(242, 193, 78, .12), transparent 62%),
    linear-gradient(160deg, #201719 0%, #131011 60%, #0d0b0c 100%); }
.hero2.tight::after { background: radial-gradient(circle, rgba(255, 111, 131, .28), transparent 65%); }
.h2-lbl { color: #dfe6dc; }
.h2-lbl .i { color: var(--accent-2); }
.h2-day { background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .08); color: #e6ece3; }
.h2-cap { color: var(--muted); }
.h2-big { color: #fff; text-shadow: 0 2px 24px rgba(127, 211, 78, .18); }
.h2-big small { color: var(--accent-2); }
.h2-sub { color: #c9d0c6; }
.h2-bar { background: rgba(255, 255, 255, .07); }
.h2-tile { background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .03)); border: 1px solid rgba(255, 255, 255, .09); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07); }
.h2-tile:hover { background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .05)); }
.h2-ti, .h2-mi { background: rgba(0, 0, 0, .3); border: 1px solid rgba(255, 255, 255, .06); }
.h2-tn, .h2-m small { color: #aeb7ab; }
.h2-tile small { color: #7f8a7d; }
.h2-month { border-top-color: rgba(255, 255, 255, .08); }
.h2-motto { color: var(--gold-2); opacity: .9; }

/* ---------- блок «Стан казни» ---------- */
.status { background: linear-gradient(160deg, color-mix(in srgb, var(--lc) 9%, transparent), transparent 55%), var(--glass), var(--glass-solid); border-color: color-mix(in srgb, var(--lc) 26%, rgba(255, 255, 255, .06)); }
.ins { background: linear-gradient(135deg, color-mix(in srgb, var(--lc) 12%, transparent), transparent 60%), var(--glass-solid); }

/* ---------- графіки та календар ---------- */
.cal-c { background: rgba(255, 255, 255, .035); }
.cal-c.l0:not(.future) { background: rgba(255, 255, 255, .025); border: 1px dashed rgba(255, 255, 255, .08); }
.cal-c.l1 { background: rgba(127, 211, 78, .2); }
.cal-c.l2 { background: rgba(127, 211, 78, .4); }
.cal-c.l3 { background: linear-gradient(160deg, #8fdc58, #5fae36); }
.cal-c.l3 .cd, .cal-c.l3 .cv { color: var(--on-accent); }
.cal-c.l2 .cd { color: #f1f7ec; }
.cal-c.today { border-color: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .12); }
.hm-c.l1 { background: rgba(127, 211, 78, .22); } .hm-c.l2 { background: rgba(127, 211, 78, .42); } .hm-c.l3 { background: #8fdc58; color: var(--on-accent); }
.wd { fill: rgba(255, 255, 255, .14); } .wd-top { fill: var(--accent-2); }
.b-hl { fill: rgba(255, 255, 255, .05); }
.p-cur { stroke: var(--accent-2); }
.bar > i { background: linear-gradient(90deg, #6fc23f, var(--accent-2)); }
.mr-bars .bar.inc > i { background: linear-gradient(90deg, #2fbf86, var(--inc)); }

/* ---------- шит ---------- */
.sheet-bg { background: rgba(0, 0, 0, .55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.sheet {
  background: linear-gradient(180deg, rgba(34, 40, 35, .9), rgba(14, 17, 15, .94) 160px);
  border: 1px solid rgba(255, 255, 255, .1); border-bottom: 0;
  box-shadow: 0 -24px 70px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .08);
  backdrop-filter: blur(30px) saturate(1.6); -webkit-backdrop-filter: blur(30px) saturate(1.6);
}
.grab { background: rgba(255, 255, 255, .22); }

/* ---------- десктоп ---------- */
@media (min-width: 960px) {
  .side { background: rgba(14, 17, 15, .55); border-right: 1px solid rgba(255, 255, 255, .06); backdrop-filter: blur(24px) saturate(1.5); -webkit-backdrop-filter: blur(24px) saturate(1.5); }
  .side > a.on { background: rgba(255, 255, 255, .07); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); color: #fff; }
  .side > a.on .i { color: var(--accent-2); }
  .sheet { border-bottom: 1px solid rgba(255, 255, 255, .1); background: linear-gradient(180deg, rgba(30, 36, 31, .92), rgba(14, 17, 15, .96)); }
  main#view { padding-bottom: 48px; }
  #toast { bottom: 28px; }
}
@media (max-width: 370px) { .tabbar { left: 8px; right: 8px; } .tab { font-size: 9.5px; } }
.hint > .i:first-child { display: inline-block; vertical-align: -2px; margin-right: 5px; color: var(--accent-2); }
.amount-box input:focus, .amount-box input:focus-visible, .rc-cell input:focus-visible, .pf-in input:focus-visible, .search input:focus-visible { outline: none; }

/* ============================================================ v6: офлайн, розбиття, борги, прогноз, досягнення, Wrapped */
.net-bar { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 9px 12px; border-radius: 14px; font-size: 13px; font-weight: 700; color: #cfe9ff; background: rgba(125, 211, 252, .1); border: 1px solid rgba(125, 211, 252, .22); }
.net-bar.off { color: var(--gold-2); background: rgba(242, 193, 78, .1); border-color: rgba(242, 193, 78, .26); }
.net-bar > span { flex: 1; min-width: 0; }
#toast.has-act { pointer-events: auto; padding-right: 8px; }
.toast-act { margin-left: 6px; padding: 7px 12px; border-radius: 11px; font-weight: 800; font-size: 13px; color: var(--on-accent); background: linear-gradient(180deg, #b6ef7f, #8fdc58); }
#toast.ach { background: linear-gradient(135deg, rgba(60, 48, 14, .92), rgba(26, 30, 27, .92)); border-color: rgba(242, 193, 78, .4); }
#toast.ach .i { color: var(--gold-2); }
.mk { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 5px; margin-right: 5px; vertical-align: -3px; }
.mk.pend { color: var(--gold-2); background: rgba(242, 193, 78, .14); }
.mk.fp { color: #fdba74; background: rgba(251, 146, 60, .14); }
.mk.sp { color: #f0abfc; background: rgba(232, 121, 249, .14); }

/* перемикач «сімейна витрата» / «повернення боргу» */
.fp-toggle { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 11px 12px; border-radius: 16px; cursor: pointer;
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); transition: background .2s, border-color .2s; }
.fp-toggle > .i { color: #fdba74; flex: none; }
.fp-toggle > span:nth-child(2) { flex: 1; min-width: 0; }
.fp-toggle b { display: block; font-size: 14px; font-weight: 800; }
.fp-toggle small { display: block; font-size: 12px; color: var(--muted); font-weight: 600; }
.fp-toggle.on { background: rgba(251, 146, 60, .1); border-color: rgba(251, 146, 60, .35); }

/* розбиття покупки */
.split-box { margin-top: 12px; padding: 12px; border-radius: 18px; background: var(--well); border: 1px dashed rgba(232, 121, 249, .35); display: flex; flex-direction: column; gap: 8px; }
.split-h { display: flex; align-items: center; gap: 7px; color: #f0abfc; font-size: 13.5px; }
.split-h b { color: var(--text); flex: 1; }
.split-row { display: grid; grid-template-columns: minmax(0, 1fr) 104px 28px; gap: 6px; align-items: center; }
.split-row .field { padding: 10px 11px; font-size: 16px; border-radius: 12px; }
.split-rest { font-size: 13px; font-weight: 600; color: var(--muted); }
.split-rest b { color: var(--text); }
.split-info { display: flex; gap: 10px; margin-top: 12px; padding: 11px 12px; border-radius: 14px; background: rgba(232, 121, 249, .08); border: 1px solid rgba(232, 121, 249, .22); font-size: 13px; font-weight: 600; line-height: 1.45; }
.split-info > .i { color: #f0abfc; margin-top: 1px; }
.split-info small { color: var(--muted); }

/* журнал змін */
.li.au { align-items: flex-start; }
.li.au .t2 { white-space: normal; }
.au-diff { display: block; margin-top: 4px; font-size: 12px; color: #bae6fd; line-height: 1.45; }
.li.au .btn { align-self: center; flex: none; }

/* бекапи */
.bk-hero { display: flex; gap: 14px; align-items: flex-start; }
.bk-hero b { display: block; font-size: 15.5px; font-weight: 800; }
.bk-hero p { margin: 4px 0 0; color: var(--muted); font-size: 13px; line-height: 1.45; }

/* досягнення */
.ach-hero { display: flex; gap: 14px; align-items: center; padding: 16px; border-radius: 24px; margin-bottom: 12px;
  background: radial-gradient(80% 90% at 100% 0%, rgba(242, 193, 78, .22), transparent 60%), var(--glass), var(--glass-solid); border: 1px solid rgba(242, 193, 78, .25); }
.ach-hero img { border-radius: 20px; flex: none; animation: frogBob 4s ease-in-out infinite; }
.ach-hero > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ach-hero b { font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.ach-hero span { color: var(--muted); font-size: 13px; font-weight: 600; }
.ach-hero .bar { margin-top: 6px; }
.ach-hero .bar > i { background: linear-gradient(90deg, #f5a524, var(--gold-2)); }
.ach-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.ach { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 14px; border-radius: 20px; background: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .07); min-width: 0; }
.ach-ico { width: 44px; height: 44px; border-radius: 15px; display: grid; place-items: center; margin-bottom: 6px; color: var(--dim); background: rgba(255, 255, 255, .05); filter: grayscale(1); }
.ach b { font-size: 14px; font-weight: 800; line-height: 1.25; color: var(--muted); }
.ach small { font-size: 11.5px; color: var(--dim); font-weight: 600; line-height: 1.35; }
.ach .bar { height: 5px; margin-top: 8px; }
.ach .bar > i { background: var(--c); }
.ach-n { font-size: 11px; font-weight: 700; color: var(--dim); margin-top: 3px; }
.ach.done { background: linear-gradient(160deg, color-mix(in srgb, var(--c) 16%, transparent), rgba(255, 255, 255, .03) 70%); border-color: color-mix(in srgb, var(--c) 35%, transparent); }
.ach.done .ach-ico { filter: none; color: var(--c); background: color-mix(in srgb, var(--c) 18%, transparent); box-shadow: 0 0 22px color-mix(in srgb, var(--c) 30%, transparent); }
.ach.done b { color: var(--text); }
.ach.done small { color: var(--muted); }
.ach-ok { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; font-size: 11.5px; font-weight: 800; color: var(--c); }
.page.enter .ach { animation: pop .45s var(--spring) both; animation-delay: calc(var(--i, 0) * 35ms + 100ms); }

/* банер Wrapped */
.wr-banner { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; margin-top: 12px; padding: 13px 14px; border-radius: 20px; color: #fff;
  background: radial-gradient(90% 140% at 0% 0%, rgba(232, 121, 249, .35), transparent 60%), radial-gradient(90% 140% at 100% 100%, rgba(127, 211, 78, .35), transparent 60%), #141815;
  border: 1px solid rgba(255, 255, 255, .12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1); transition: transform .2s var(--spring); }
.wr-banner:active { transform: scale(.98); }
.wr-banner > .i:first-child { color: #f5d0fe; }
.wr-banner > span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.wr-banner b { font-weight: 800; font-size: 15px; }
.wr-banner small { font-size: 12.5px; color: #d6dbd4; font-weight: 600; }

/* прогноз */
.fc-card { padding: 16px; }
.fc-top { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; color: var(--dim); }
.fc-top > div { display: flex; flex-direction: column; }
.fc-top > div:last-child { margin-left: auto; text-align: right; }
.fc-top small { font-size: 12px; font-weight: 700; color: var(--muted); }
.fc-top b { font-size: 20px; font-weight: 800; color: var(--text); letter-spacing: -.02em; }
.fc { width: 100%; height: auto; display: block; overflow: visible; }
.fc-line { fill: none; stroke: var(--accent-2); stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.fc-line.bad { stroke: url(#fcg); stroke: var(--gold); }
.fc-zero { stroke: rgba(255, 111, 131, .5); stroke-width: 1; stroke-dasharray: 3 4; }
.fc-neg { fill: rgba(255, 111, 131, .07); }
.fc-ev { stroke: var(--bg); stroke-width: 2; }
.fc-ev.exp { fill: var(--exp); } .fc-ev.inc { fill: var(--inc); }
.fc-now { fill: #fff; stroke: var(--bg); stroke-width: 2; }
.fc-t { fill: var(--dim); font-size: 10.5px; font-weight: 700; }
.fc-v { fill: var(--text); font-size: 12px; font-weight: 800; }
.fc-v.bad { fill: var(--exp); }
.page.enter .fc-line { stroke-dasharray: 1; animation: draw 1.1s var(--ease) both .1s; }
.fc-warn { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 10px 12px; border-radius: 13px; font-size: 13px; font-weight: 600; color: #ffd0d8; background: rgba(255, 111, 131, .1); border: 1px solid rgba(255, 111, 131, .25); }
.fc-warn.soft { color: var(--gold-2); background: rgba(242, 193, 78, .08); border-color: rgba(242, 193, 78, .22); }
.fc-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.fc-stats span { background: var(--well); border: 1px solid rgba(255, 255, 255, .06); border-radius: 13px; padding: 8px 11px; }
.fc-stats small { display: block; font-size: 11.5px; color: var(--muted); font-weight: 700; }
.fc-stats b { font-size: 15px; font-weight: 800; }
.fc-ev-list { margin-top: 10px; display: flex; flex-direction: column; }
.fc-ev-list > div { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 8px; padding: 6px 2px; font-size: 13.5px; font-weight: 600; }
.fc-ev-list > div + div { border-top: 1px solid var(--line); }
.fc-ev-list span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fc-note { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--gold-2); }
.fc-note b { color: var(--text); }

/* взаєморозрахунки */
.debt-row { display: flex; align-items: center; gap: 12px; padding: 10px 4px; }
.debt-row + .debt-row { border-top: 1px solid var(--line); }
.debt-row .mid { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.debt-row b { font-weight: 800; }
.debt-row small { font-size: 12px; color: var(--muted); font-weight: 600; }
.debt-v { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.debt-v b { color: #fdba74; font-size: 16px; }

/* інфляція */
.infl-top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.infl-top span { color: var(--muted); font-size: 13px; font-weight: 600; }
.infl-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 52px; gap: 8px; padding: 6px 0; font-size: 13.5px; font-weight: 700; align-items: center; }
.infl-row + .infl-row { border-top: 1px solid var(--line); }
.infl-row span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.infl-row span.dim { font-size: 12px; font-weight: 600; }
.infl-row b { text-align: right; }
.carry { color: var(--inc); font-size: 11px; font-weight: 800; margin-left: 4px; }

/* ---------- Jaba Wrapped: сторіз на весь екран ---------- */
.wr { position: fixed; inset: 0; z-index: 95; background: #050605; opacity: 0; transition: opacity .25s; overflow: hidden; user-select: none; -webkit-user-select: none; }
.wr.show { opacity: 1; } .wr.out { opacity: 0; }
.wr-bars-top { position: absolute; z-index: 3; left: 12px; right: 56px; top: calc(12px + var(--safe-t)); display: flex; gap: 4px; }
.wr-bars-top i { flex: 1; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .22); overflow: hidden; }
.wr-bars-top i b { display: block; height: 100%; width: 0; background: #fff; }
.wr-bars-top i.done b { width: 100%; }
.wr-bars-top i.cur b { animation: wrbar 6.5s linear forwards; }
@keyframes wrbar { to { width: 100%; } }
.wr-x { position: absolute; z-index: 4; right: 10px; top: calc(4px + var(--safe-t)); width: 40px; height: 40px; border-radius: 14px; display: grid; place-items: center; color: #fff; background: rgba(255, 255, 255, .1); }
.wr-nav { position: absolute; inset: 0; z-index: 1; display: grid; grid-template-columns: 1fr 2fr; }
.wr-s { position: absolute; inset: 0; z-index: 2; display: none; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 10px;
  padding: calc(60px + var(--safe-t)) 28px calc(40px + var(--safe-b)); pointer-events: none; color: #fff; }
.wr-s.on { display: flex; animation: wrIn .55s var(--ease) both; }
.wr-s button, .wr-s [data-wr] { pointer-events: auto; position: relative; z-index: 5; }
@keyframes wrIn { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }
.wr-s > * { max-width: 460px; }
.wr-s.on > * { animation: wrIn .6s var(--ease) both; }
.wr-s.on > *:nth-child(2) { animation-delay: .08s; } .wr-s.on > *:nth-child(3) { animation-delay: .16s; } .wr-s.on > *:nth-child(4) { animation-delay: .24s; } .wr-s.on > *:nth-child(5) { animation-delay: .32s; } .wr-s.on > *:nth-child(n+6) { animation-delay: .4s; }
.wr-s h2 { margin: 0; font-size: clamp(28px, 8vw, 40px); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.wr-s p { margin: 0; font-size: 16px; line-height: 1.5; color: rgba(255, 255, 255, .78); font-weight: 600; }
.wr-k { text-transform: uppercase; letter-spacing: .12em; font-size: 13px !important; font-weight: 800 !important; color: rgba(255, 255, 255, .6) !important; }
.wr-big { font-size: clamp(44px, 14vw, 72px); font-weight: 800; letter-spacing: -.045em; line-height: 1; }
.wr-big small { font-size: .45em; opacity: .6; }
.wr-mid { font-size: clamp(30px, 9vw, 44px); font-weight: 800; letter-spacing: -.03em; }
.wr-year { font-size: clamp(72px, 24vw, 128px); font-weight: 800; letter-spacing: -.06em; line-height: .9; background: linear-gradient(180deg, #fff, #c2f08f 60%, #f2c14e); -webkit-background-clip: text; background-clip: text; color: transparent; }
.wr-frog { width: 120px; height: 120px; border-radius: 32%; box-shadow: 0 20px 60px rgba(127, 211, 78, .35); animation: frogBob 4s ease-in-out infinite !important; }
.wr-frog.sm { width: 96px; height: 96px; }
.wr-tap { margin-top: 18px; font-size: 13px; font-weight: 700; color: rgba(255, 255, 255, .5); }
.wr-facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 6px 0; }
.wr-facts span { padding: 8px 12px; border-radius: 99px; background: rgba(255, 255, 255, .1); font-size: 13.5px; font-weight: 600; }
.wr-facts b { font-weight: 800; }
.wr-cat { width: 96px; height: 96px; border-radius: 30px; display: grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 22%, transparent); box-shadow: 0 0 60px color-mix(in srgb, var(--c) 40%, transparent); margin-bottom: 6px; }
.wr-row { display: flex; justify-content: space-between; gap: 12px; width: 100%; padding: 10px 14px; border-radius: 14px; background: rgba(255, 255, 255, .08); font-weight: 700; font-size: 14.5px; }
.wr-row span { display: inline-flex; align-items: center; gap: 6px; text-align: left; }
.wr-pill { display: inline-flex; align-items: center; gap: 7px; margin-top: 8px; padding: 9px 14px; border-radius: 99px; background: rgba(255, 255, 255, .12); font-weight: 700; font-size: 14px; }
.wr-card { width: 100%; padding: 14px 16px; border-radius: 18px; background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .12); display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
.wr-card small { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
.wr-card b { font-size: 22px; font-weight: 800; }
.wr-card span { font-size: 14px; color: rgba(255, 255, 255, .75); font-weight: 600; }
.wr-bars { width: 100%; height: 170px; display: flex; align-items: flex-end; gap: 5px; margin: 8px 0 6px; }
.wr-bars > span { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 5px; }
.wr-bars i { width: 100%; border-radius: 6px 6px 3px 3px; background: rgba(255, 255, 255, .28); transform-origin: bottom; animation: growY .8s var(--ease) both .2s; }
.wr-bars .best i { background: #8fdc58; } .wr-bars .worst i { background: #ff6f83; }
.wr-bars small { font-size: 10px; font-weight: 700; color: rgba(255, 255, 255, .55); }
.wr-person { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border-radius: 16px; background: rgba(255, 255, 255, .08); text-align: left; }
.wr-person span:last-child { display: flex; flex-direction: column; }
.wr-person b { font-size: 17px; font-weight: 800; }
.wr-person small { font-size: 13px; color: rgba(255, 255, 255, .7); font-weight: 600; }
.wr-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 300px; }
.wr-badges span { width: 44px; height: 44px; border-radius: 15px; display: grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 20%, transparent); box-shadow: 0 0 18px color-mix(in srgb, var(--c) 30%, transparent); }
.wr .btn.primary { margin-top: 14px; }
/* фони слайдів */
.wr-s.s-intro { background: radial-gradient(60% 50% at 50% 30%, rgba(127, 211, 78, .35), transparent 70%), radial-gradient(60% 50% at 80% 100%, rgba(242, 193, 78, .2), transparent 70%), #070a07; }
.wr-s.s-total { background: linear-gradient(160deg, #1f3d16, #0b140a 60%), #0b140a; }
.wr-s.s-cat { background: radial-gradient(70% 50% at 50% 30%, rgba(232, 121, 249, .28), transparent 70%), linear-gradient(180deg, #1c0f22, #0b070d); }
.wr-s.s-day { background: linear-gradient(160deg, #3a2a08, #120d04 65%); }
.wr-s.s-place { background: linear-gradient(200deg, #0c2a30, #061215 65%); }
.wr-s.s-months { background: linear-gradient(180deg, #141a15, #070907); }
.wr-s.s-prod { background: radial-gradient(70% 50% at 30% 20%, rgba(74, 222, 128, .25), transparent 70%), linear-gradient(180deg, #0d1a10, #060906); }
.wr-s.s-team { background: linear-gradient(160deg, #1b1630, #0a0814 65%); }
.wr-s.s-ach { background: radial-gradient(70% 50% at 50% 35%, rgba(242, 193, 78, .3), transparent 70%), #0c0a05; }
.wr-s.s-outro { background: radial-gradient(70% 50% at 50% 30%, rgba(127, 211, 78, .3), transparent 70%), radial-gradient(60% 40% at 50% 100%, rgba(232, 121, 249, .18), transparent 70%), #070a07; }
@media (min-width: 640px) { .ach-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 960px) { .wr-s { padding-left: 20%; padding-right: 20%; } }
#toast { width: max-content; }
#toast > span { flex: 1 1 auto; min-width: 0; }
#toast > .i { flex: none; }
.fc-line.bad { stroke: var(--gold); }
.group-t .i { display: inline-block; vertical-align: -2px; margin-right: 4px; }

/* ============================================================ v7: вікно операції */
.ttabs { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); padding: 4px; border-radius: 17px; background: rgba(255, 255, 255, .045); border: 1px solid rgba(255, 255, 255, .07); isolation: isolate; }
.ttabs button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 4px; border-radius: 13px; font-weight: 800; font-size: 13.5px; color: var(--muted); transition: color .25s; }
.ttabs button.on { color: #fff; }
.ttabs-ind { position: absolute; z-index: -1; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / 3); border-radius: 13px; transition: transform .35s var(--spring), background .3s, box-shadow .3s;
  background: linear-gradient(180deg, rgba(255, 111, 131, .32), rgba(255, 111, 131, .18)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 6px 18px rgba(255, 111, 131, .18); }
.ttabs.t-income .ttabs-ind { transform: translateX(100%); background: linear-gradient(180deg, rgba(79, 227, 163, .32), rgba(79, 227, 163, .16)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 6px 18px rgba(79, 227, 163, .18); }
.ttabs.t-transfer .ttabs-ind { transform: translateX(200%); background: linear-gradient(180deg, rgba(125, 211, 252, .3), rgba(125, 211, 252, .14)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 6px 18px rgba(125, 211, 252, .16); }
.ttabs .tt-exp.on .i { color: #ff9aa8; } .ttabs .tt-inc.on .i { color: #7ff0c0; } .ttabs .tt-trf.on .i { color: #a5e3ff; }

.amt2 { position: relative; display: flex; align-items: baseline; justify-content: center; gap: 4px; margin: 12px 0 4px; padding: 8px 8px 20px; border-radius: 24px; isolation: isolate; overflow: hidden;
  background: radial-gradient(80% 120% at 50% 0%, var(--ag, rgba(255, 111, 131, .16)), transparent 70%), rgba(255, 255, 255, .025); border: 1px solid rgba(255, 255, 255, .06); }
.amt2.a-inc { --ag: rgba(79, 227, 163, .16); } .amt2.a-trf { --ag: rgba(125, 211, 252, .14); }
.amt2-sign { font-size: 34px; font-weight: 700; color: var(--dim); }
.amt2.a-exp .amt2-sign { color: #ff9aa8; } .amt2.a-inc .amt2-sign { color: #7ff0c0; }
.amt2 input { min-width: 1.2ch; max-width: 78%; width: 3ch; background: none; border: 0; padding: 0; text-align: center; font-size: 48px; font-weight: 800; letter-spacing: -.04em; color: #fff; font-variant-numeric: tabular-nums; caret-color: var(--accent-2); }
.amt2 input::placeholder { color: rgba(255, 255, 255, .22); }
.amt2 input:focus { outline: none; }
.amt2-cur { font-size: 28px; font-weight: 800; color: var(--muted); }
.amt2-calc { position: absolute; left: 0; right: 0; bottom: 6px; text-align: center; font-size: 12.5px; font-weight: 700; color: var(--muted); }

.tx-sec { margin-top: 14px; }
.tx-sec-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 2px 8px; font-size: 12.5px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.tx-sec-h i { font-style: normal; text-transform: none; letter-spacing: 0; font-weight: 600; margin-left: 4px; }
.tx-sec-h .link-btn { text-transform: none; letter-spacing: 0; }

.wchips, .qchips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 2px 16px 4px; scroll-snap-type: x proximity; }
.wchips::-webkit-scrollbar, .qchips::-webkit-scrollbar { display: none; }
.wchip { flex: none; scroll-snap-align: start; display: flex; align-items: center; gap: 9px; padding: 8px 12px 8px 8px; border-radius: 16px; text-align: left;
  background: rgba(255, 255, 255, .04); border: 1.5px solid rgba(255, 255, 255, .07); transition: border-color .2s, background .2s, transform .15s var(--spring); }
.wchip:active { transform: scale(.96); }
.wchip-i { width: 32px; height: 32px; border-radius: 11px; display: grid; place-items: center; color: var(--wc); background: color-mix(in srgb, var(--wc) 15%, transparent); flex: none; }
.wchip-t { display: flex; flex-direction: column; min-width: 0; }
.wchip-t b { font-size: 13.5px; font-weight: 800; white-space: nowrap; }
.wchip-t small { font-size: 11.5px; color: var(--muted); font-weight: 600; white-space: nowrap; }
.wchip.on { border-color: var(--wc); background: color-mix(in srgb, var(--wc) 12%, rgba(255, 255, 255, .03)); box-shadow: 0 6px 18px color-mix(in srgb, var(--wc) 18%, transparent); }
.wchip.on .wchip-i { background: var(--wc); color: #0b1310; }

.qchip { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 99px; font-size: 13px; font-weight: 700; color: var(--text);
  background: rgba(255, 255, 255, .045); border: 1px solid rgba(255, 255, 255, .08); transition: background .2s, border-color .2s; }
.qchip .i { color: var(--c); }
.qchip.on { border-color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); }

.cgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 4px; }
.csec { margin: 12px 2px 6px; font-size: 11.5px; font-weight: 800; color: var(--dim); }
.csearch { margin-bottom: 4px; }
.ctile { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 6px 2px 8px; border-radius: 16px; min-width: 0; transition: background .2s, transform .15s var(--spring); }
.ctile:active { transform: scale(.93); }
.ctile-i { width: 50px; height: 50px; border-radius: 17px; display: grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--c) 18%, transparent); transition: background .25s, color .25s, box-shadow .25s, transform .3s var(--spring); }
.ctile-n { font-size: 11.5px; font-weight: 700; color: var(--muted); text-align: center; line-height: 1.2; max-width: 100%; padding: 0 2px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
.ctile.on .ctile-i { background: var(--c); color: #0b1310; box-shadow: 0 8px 22px color-mix(in srgb, var(--c) 45%, transparent), inset 0 1px 0 rgba(255, 255, 255, .4); transform: translateY(-2px) scale(1.05); }
.ctile.on .ctile-n { color: var(--text); }
.sheet.fresh .ctile { animation: pop .35s var(--spring) both; animation-delay: calc(var(--i, 0) * 12ms); }

.tx-details { display: flex; flex-direction: column; gap: 8px; }
.tx-note { display: flex; align-items: center; gap: 10px; padding: 0 14px; border-radius: 16px; background: rgba(255, 255, 255, .045); border: 1px solid rgba(255, 255, 255, .08); color: var(--dim); transition: border-color .2s; }
.tx-note:focus-within { border-color: rgba(168, 232, 112, .5); }
.tx-note input { flex: 1; min-width: 0; background: none; border: 0; padding: 13px 0; font-size: 16px; font-weight: 600; color: var(--text); }
.tx-note input:focus { outline: none; }
.tx-dates { flex-wrap: nowrap; }
.tx-dates .opt { flex: 1; justify-content: center; }
.tx-dates .date-opt { flex: 1.3; }
.tx-dates .date-opt input { width: 100%; }

/* цифрова клавіатура */
.kp { display: none; position: sticky; bottom: calc(-18px - var(--safe-b)); z-index: 5; grid-template-columns: repeat(4, 1fr); gap: 6px;
  margin: 14px -16px calc(-18px - var(--safe-b)); padding: 10px 10px calc(12px + var(--safe-b));
  background: rgba(16, 19, 17, .9); border-top: 1px solid rgba(255, 255, 255, .08); backdrop-filter: blur(24px) saturate(1.6); -webkit-backdrop-filter: blur(24px) saturate(1.6);
  box-shadow: 0 -12px 30px rgba(0, 0, 0, .4); }
.sheet.kp-on .kp { display: grid; }
.sheet.fresh.kp-on .kp { animation: kpIn .28s var(--ease) both; }
@keyframes kpIn { from { transform: translateY(30px); opacity: 0; } }
.sheet.kp-on .tx-foot[data-new] { display: none; }
.kp-k { height: 52px; border-radius: 15px; font-size: 24px; font-weight: 700; color: var(--text); background: rgba(255, 255, 255, .06); display: grid; place-items: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); transition: background .12s, transform .1s; -webkit-user-select: none; user-select: none; touch-action: manipulation; }
.kp-k:active { background: rgba(255, 255, 255, .14); transform: scale(.95); }
.kp-op { color: var(--accent-2); background: rgba(255, 255, 255, .035); font-size: 26px; }
.kp-ok { color: var(--on-accent); background: rgba(168, 232, 112, .35); }
.kp-ok.ready { background: linear-gradient(180deg, #b6ef7f, #8fdc58); box-shadow: 0 8px 20px rgba(127, 211, 78, .35), inset 0 1px 0 rgba(255, 255, 255, .5); }
@media (min-width: 400px) { .cgrid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 350px) { .amt2 input { font-size: 44px; } .kp-k { height: 46px; } }

.tx-quick { margin-top: 12px; }
.kp-k { height: 48px; }
.kp { gap: 5px; padding-top: 8px; }
html.locked #toast { top: calc(14px + var(--safe-t)); bottom: auto; transform: translate(-50%, -16px) scale(.96); } html.locked #toast.show { transform: translate(-50%, 0) scale(1); }

/* ліміт як частка бюджету */
.lp-base { display: flex; gap: 10px; align-items: flex-start; padding: 11px 12px; border-radius: 14px; background: var(--well); border: 1px solid rgba(255, 255, 255, .06); font-size: 13.5px; font-weight: 600; color: var(--muted); }
.lp-base > .i { color: var(--gold-2); margin-top: 2px; }
.lp-base b { color: var(--text); margin-left: 4px; }
.lp-base small { display: block; font-size: 12px; color: var(--dim); }
.lp-box { margin: 10px 0 6px; }
.lp-hint { font-size: 14px; font-weight: 600; color: var(--muted); margin: 0 4px 10px; }
.lp-hint b { color: var(--accent-2); font-size: 16px; }
.lp-chips .opt { padding: 7px 11px; }
.lp-bar { position: relative; height: 8px; margin-top: 12px; border-radius: 99px; background: var(--track); overflow: hidden; }
.lp-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(255, 255, 255, .22); }
.lp-bar b { position: absolute; top: 0; bottom: 0; background: linear-gradient(90deg, #8fdc58, var(--accent-2)); }

/* ---------- продуктивність: розмиття лише там, де воно справді видно (панель, шит, тост) ---------- */
.card, .kpi, .list, .rc, .status, .rc-compare, .choice-btn, .act-btn, .seg, .monthnav, .icon-btn, .x, .ach-hero {
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.card, .kpi, .list, .rc, .status { background-color: rgba(17, 20, 18, .9); }
body::before { filter: none; will-change: auto; }
.tx-list .tx, .prod { content-visibility: auto; contain-intrinsic-size: auto 56px; }

/* ============================================================ v11: панель з «+» по центру, плашки, налаштування */

.tabbar { grid-template-columns: repeat(2, minmax(0, 1fr)) 72px repeat(2, minmax(0, 1fr)); align-items: center; }
.tab-add { justify-self: center; width: 58px; height: 58px; margin-top: -26px; border-radius: 20px; display: grid; place-items: center; color: var(--on-accent);
  background: linear-gradient(180deg, #b6ef7f 0%, #8fdc58 55%, #6fc23f 100%);
  box-shadow: 0 12px 26px rgba(127, 211, 78, .38), 0 0 0 5px rgba(6, 8, 7, .85), inset 0 1px 0 rgba(255, 255, 255, .5); transition: transform .2s var(--spring); }
.tab-add:active { transform: scale(.9) rotate(90deg); }
main#view { padding-bottom: calc(130px + var(--safe-b)); }
#toast { bottom: calc(118px + var(--safe-b)); }
@media (min-width: 960px) { .tab-add { display: none; } main#view { padding-bottom: 48px; } #toast { bottom: 28px; } }

.plaques { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin-top: 12px; }
.plq { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 18px; color: var(--text); min-width: 0;
  background: var(--glass), var(--glass-solid); border: 1px solid var(--glass-brd); box-shadow: var(--glass-hi); transition: transform .15s var(--spring); }
.plq:active { transform: scale(.97); }
.plq .mid { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.plq b { font-size: 14px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plq small { font-size: 11.5px; color: var(--muted); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plq > .i:last-child { color: var(--dim); flex: none; }
.plq-ico { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; flex: none; color: var(--inc); background: rgba(79, 227, 163, .12); }
.plq.gold .plq-ico { color: var(--gold-2); background: rgba(242, 193, 78, .14); }
.plq.gold { background: linear-gradient(135deg, rgba(242, 193, 78, .1), transparent 60%), var(--glass-solid); border-color: rgba(242, 193, 78, .2); }
.plq.warn .plq-ico { color: var(--gold-2); background: rgba(242, 193, 78, .14); }
.plq.bad { border-color: rgba(255, 111, 131, .3); }
.plq.bad .plq-ico { color: var(--exp); background: rgba(255, 111, 131, .14); }
.plq.bad small { color: #ffb3bf; }
@media (max-width: 350px) { .plaques { grid-template-columns: 1fr; } }

.me-card { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 22px; color: var(--text);
  background: radial-gradient(80% 120% at 0% 0%, rgba(127, 211, 78, .16), transparent 60%), var(--glass-solid); border: 1px solid var(--glass-brd); }
.me-card .mid { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.me-card b { font-size: 18px; font-weight: 800; }
.me-card small { color: var(--muted); font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.avatar.lg { width: 52px; height: 52px; border-radius: 18px; font-size: 21px; }
.li-badge { min-width: 22px; height: 22px; padding: 0 7px; border-radius: 99px; display: inline-grid; place-items: center; font-size: 12px; font-weight: 800; color: #0b1310; background: var(--gold); flex: none; }
.li-badge.bad { background: var(--exp); color: #fff; }
.li-col { align-items: flex-start; }
.li-col .mid { gap: 2px; }
.ui-seg { margin-top: 10px; }
.ui-seg button { font-size: 12px; padding: 8px 6px; white-space: normal; line-height: 1.2; }
.settings .group-t { margin-top: 20px; }

/* вимкнені анімації */
.no-anim *, .no-anim *::before, .no-anim *::after { animation: none !important; transition: none !important; }
.plq { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px 12px 11px; position: relative; }
.plq > .i:last-child { position: absolute; right: 10px; top: 14px; }
.plq .mid { width: 100%; }
.plq b { font-size: 14.5px; }
.plq small { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.3; min-height: 2.6em; }
.plq-ico { width: 34px; height: 34px; }

/* ============================================================ v14: тиждень Jaba, приховані суми, схованка $ */
.dg-card { cursor: pointer; padding: 14px 15px 13px; position: relative; overflow: hidden; }
.dg-card::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(80% 90% at 100% 0%, rgba(125, 211, 252, .10), transparent 60%); }
.dg-card.good::before { background: radial-gradient(80% 90% at 100% 0%, rgba(79, 227, 163, .13), transparent 60%); }
.dg-card.bad::before { background: radial-gradient(80% 90% at 100% 0%, rgba(255, 111, 131, .13), transparent 60%); }
.dg-card:active { transform: scale(.985); }
.dg-h { display: flex; align-items: center; gap: 10px; }
.dg-h .mid { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dg-h b { font-size: 15px; } .dg-h small { color: var(--muted); font-size: 12.5px; font-weight: 600; }
.dg-x { width: 28px; height: 28px; border-radius: 10px; display: grid; place-items: center; color: var(--dim); background: var(--card); border: 0; }
.dg-sum { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.dg-sum small { width: 100%; color: var(--muted); font-size: 12px; font-weight: 700; }
.dg-sum b { font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.dg-badge { font-size: 12px; font-weight: 800; padding: 3px 8px; border-radius: 99px; }
.dg-badge.up { color: var(--exp); background: rgba(255, 111, 131, .12); } .dg-badge.down { color: var(--inc); background: rgba(79, 227, 163, .12); }
.dg-verdict { margin: 6px 0 0; font-size: 13.5px; font-weight: 600; color: var(--text); opacity: .9; }
.dg-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.dg-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--muted); padding: 5px 9px; border-radius: 99px; background: var(--card); }
.dg-chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--cc); }
.dg-chip b { color: var(--text); }
.dg-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.dg-nav > span { text-align: center; display: flex; flex-direction: column; }
.dg-nav small { color: var(--muted); font-size: 12px; font-weight: 600; }
.dg-hero { text-align: center; padding: 16px 12px 14px; border-radius: 20px; background: var(--card); margin-bottom: 10px; }
.dg-hero.good { background: rgba(79, 227, 163, .08); } .dg-hero.bad { background: rgba(255, 111, 131, .08); }
.dg-hero small { color: var(--muted); font-weight: 700; font-size: 12.5px; }
.dg-hero b { display: block; font-size: 34px; font-weight: 800; letter-spacing: -.02em; margin: 2px 0 4px; }
.dg-hero p { margin: 0; font-weight: 600; font-size: 14px; }
.dg-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 8px; }
.dg-kpis > div { background: var(--card); border-radius: 16px; padding: 10px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dg-kpis small { color: var(--muted); font-size: 11.5px; font-weight: 700; }
.dg-kpis b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dg-cmp { display: flex; justify-content: space-between; gap: 10px; padding: 9px 4px; border-bottom: 1px solid var(--line); font-size: 13.5px; color: var(--muted); font-weight: 600; }
.dg-cats { display: flex; flex-direction: column; gap: 10px; padding: 4px 2px 6px; }
.dg-cat { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px 10px; }
.dg-cat .dg-cn { font-weight: 700; font-size: 14px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dg-cat b { font-size: 14px; }
.dg-cat .bar { grid-column: 2 / 4; height: 6px; border-radius: 99px; background: var(--track); overflow: hidden; }
.dg-cat .bar i { display: block; height: 100%; border-radius: 99px; }

.eye-btn { margin-left: auto; }
.eye-btn.on { color: var(--accent-2); background: var(--accent-soft); }
html.hide-sums :is(.num:not(input), .h2-big, .h2-sub, .h2-tile small, .plq small, .sc-body p, .dg-sum, .dg-verdict, svg text) { filter: blur(7px); transition: filter .25s ease; }

html.hide-sums :is(.mny, .mny-svg, #view input[inputmode="decimal"]:not(:focus), .sheet input.num:not(:focus), .amt2.old:not(.peek) input) { filter: blur(6px); transition: filter .25s ease; }
html.hide-sums .mny { display: inline-block; }
html.hide-sums .peek, html.hide-sums .peek :is(.num, .mny) { filter: none !important; }

.wchip.add { border: 1.5px dashed color-mix(in srgb, var(--wc) 45%, transparent); background: transparent; }

/* ============================================================ v15: позики */
.loan-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 2px 0 10px; }
.loan-seg button { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 6px; border-radius: 14px; border: 1px solid var(--line); background: var(--card); color: var(--muted); font: inherit; font-size: 13px; font-weight: 700; white-space: nowrap; }
.loan-seg button.on { color: #fff3e6; border-color: rgba(251, 146, 60, .55); background: rgba(251, 146, 60, .16); }
.loan-seg button:first-child.on { color: var(--accent-2); border-color: rgba(168, 232, 112, .45); background: var(--accent-soft); }
.loan-hint { display: flex; gap: 7px; align-items: flex-start; margin: -2px 2px 10px; font-size: 12.5px; color: var(--muted); line-height: 1.35; }
.loan-hint .i { flex: none; margin-top: 1px; color: #fb923c; }
.loan-due { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border-radius: 14px; background: rgba(251, 146, 60, .1); color: #fdba74; font-size: 13.5px; font-weight: 600; margin-bottom: 8px; }
.loan-due span { flex: 1; } .loan-due b { color: var(--text); }
.loan-due.off { background: var(--card); color: var(--muted); }
.wchip.foreign { border-style: dashed; }
.wchip.foreign .wchip-i .avatar { width: 26px; height: 26px; font-size: 11px; }
.loan-row .mid small { color: var(--muted); }

/* ============================================================ v17: згорнутий раціон, ква */
@media (min-width: 900px) { .home-grid.one { grid-template-columns: minmax(0, 1fr); max-width: 760px; } }
.plan-mini { width: 100%; display: flex; align-items: center; gap: 12px; padding: 13px 14px; text-align: left; color: var(--text); font: inherit; border: 1px solid var(--line); cursor: pointer; }
.plan-mini:active { transform: scale(.985); }
.pm-ico { width: 38px; height: 38px; border-radius: 13px; display: grid; place-items: center; color: var(--gold-2); background: rgba(242, 193, 78, .14); flex: none; }
.pm-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pm-mid b { font-size: 15px; }
.pm-mid small { color: var(--muted); font-size: 12.5px; font-weight: 600; line-height: 1.3; }
.pm-mid .bar { height: 5px; margin-top: 2px; }
.pm-pct { display: flex; flex-direction: column; align-items: flex-end; flex: none; }
.pm-pct b { font-size: 16px; color: var(--gold-2); } .pm-pct small { font-size: 11px; color: var(--muted); font-weight: 700; }
.plan-mini .chev { color: var(--dim); } .plan-mini .chev svg { transform: rotate(90deg); }
.h2-big { cursor: pointer; -webkit-user-select: none; user-select: none; }
.kva { position: fixed; z-index: 9000; pointer-events: none; transform: translate(-50%, 0); font-weight: 900; font-size: 23px; letter-spacing: .02em; color: #c6f59a;
  -webkit-text-stroke: .6px #2d6a12; text-shadow: 0 2px 0 #1d3f0c, 0 0 16px rgba(168, 232, 112, .75); animation: kva-up 1.05s cubic-bezier(.2, .7, .3, 1) forwards; }
@keyframes kva-up {
  0% { opacity: 0; transform: translate(-50%, 8px) scale(.6) rotate(0); }
  15% { opacity: 1; transform: translate(-50%, -6px) scale(1.2) rotate(var(--r)); }
  55% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), -70px) scale(1) rotate(var(--r)); }
}
html.no-anim .kva { animation: kva-up 1s linear forwards !important; }

/* ============================================================ v18: ліміт Gemini, зберігання фото */
.ocr-q { display: flex; align-items: flex-start; gap: 7px; margin: -2px 2px 8px; padding: 8px 11px; border-radius: 12px; font-size: 12.5px; font-weight: 600; line-height: 1.35;
  color: #e9c8f5; background: rgba(232, 121, 249, .09); border: 1px solid rgba(232, 121, 249, .18); }
.ocr-q .i { flex: none; margin-top: 1px; color: #e879f9; }
.ocr-q b { color: var(--text); }
.ocr-q.low { color: #fde2b0; background: rgba(251, 191, 36, .1); border-color: rgba(251, 191, 36, .25); }
.ocr-q.low .i { color: var(--warn); }
.ocr-q.out { color: #ffc2cb; background: rgba(255, 111, 131, .1); border-color: rgba(255, 111, 131, .28); }
.ocr-q.out .i { color: var(--exp); }
.sheet .ocr-q[data-ocrq="big"] { font-size: 14px; padding: 12px 13px; margin: 0 0 12px; }

/* ============================================================ v20: скан чека */

 

@keyframes scan-hop { 0%, 100% { transform: translateY(0) scale(1.08, .92); } 45% { transform: translateY(-22px) scale(.96, 1.05); } }

.rv-parts { display: flex; flex-direction: column; gap: 8px; }
.rv-row { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--cc); }
.rv-sel { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rv-sel select { appearance: none; -webkit-appearance: none; background: none; border: 0; color: var(--text); font: inherit; font-weight: 700; font-size: 15px; padding: 0; text-decoration: underline dotted rgba(255, 255, 255, .35); text-underline-offset: 4px; cursor: pointer; max-width: 100%; }
.rv-sel select option { background: #1a1d1b; }
.rv-sel small { color: var(--muted); font-size: 12px; font-weight: 600; }
.rv-row > b { font-size: 15.5px; }

/* ============================================================ v21: «Нова операція» — скан угорі, рівні відступи */
.sheet .ttabs + .scan-card, .sheet .ttabs + .ocr-q { margin-top: 12px; }
.scan-card { position: relative; display: flex; align-items: center; gap: 12px; margin: 12px 0 0; padding: 12px 14px; border-radius: 18px;
  background: linear-gradient(120deg, rgba(232, 121, 249, .13), rgba(168, 232, 112, .09)); border: 1px solid rgba(232, 121, 249, .28); color: var(--text); }
.scan-card.idle { cursor: pointer; transition: transform .15s var(--ease), border-color .2s; }
.scan-card.idle:active { transform: scale(.985); }
.scan-card.idle:hover { border-color: rgba(232, 121, 249, .5); }
.scn-ico { flex: none; width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; color: #f0abfc; background: rgba(232, 121, 249, .16); }
.scn-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.scn-txt b { font-size: 15px; display: flex; align-items: center; gap: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scn-txt small { color: var(--muted); font-size: 12.5px; font-weight: 600; line-height: 1.3; }

.scn-x { flex: none; width: 32px; height: 32px; border-radius: 11px; display: grid; place-items: center; color: var(--muted); background: rgba(255, 255, 255, .06); border: 0; cursor: pointer; }
.scn-thumbs { display: flex; flex: none; }
.scn-thumbs img { width: 38px; height: 50px; object-fit: cover; border-radius: 9px; border: 2px solid var(--bg2); cursor: zoom-in; }
.scn-thumbs img + img { margin-left: -18px; }
.scan-card.busy .spin-s { flex: none; }
.scan-card.busy .scn-txt b::after { content: ''; }
.scan-card.err { flex-wrap: wrap; background: rgba(255, 111, 131, .08); border-color: rgba(255, 111, 131, .3); }
.scan-card.err .scn-ico { color: var(--exp); background: rgba(255, 111, 131, .14); }
.scn-acts { flex-basis: 100%; display: flex; gap: 8px; padding-left: 52px; }
.scn-acts .btn { cursor: pointer; }
.scan-card.done { display: block; padding: 10px; background: rgba(168, 232, 112, .06); border-color: rgba(168, 232, 112, .28); }
.scn-head { display: flex; align-items: center; gap: 10px; padding: 2px 2px 10px; }
.scn-head .scn-txt b .i { color: var(--accent-2); }
.scan-card.done .rv-parts { gap: 6px; }
.scan-card.done .rv-row { padding: 9px 11px; border-radius: 14px; background: rgba(0, 0, 0, .18); }
.scn-note { display: flex; gap: 6px; align-items: flex-start; margin: 8px 4px 0; font-size: 12px; color: var(--muted); font-weight: 600; line-height: 1.35; }
.scn-note .i { flex: none; margin-top: 1px; }
.ocr-q[data-ocrq="mini"] { margin: 6px 4px 0; padding: 0; background: none; border: 0; font-size: 11.5px; color: var(--dim); }
.ocr-q[data-ocrq="mini"] .i { color: var(--dim); }
.ocr-q[data-ocrq="mini"] b { color: var(--muted); }
.ocr-q[data-ocrq="mini"].low, .ocr-q[data-ocrq="mini"].out { color: var(--warn); }
.sheet .amt2 { margin: 12px 0 0; }
.sheet .tx-quick { margin-top: 12px; }
.sheet .tx-sec { margin-top: 16px; }
.sheet .fp-toggle, .sheet .split-box, .sheet .loan-hint, .sheet .loan-due { margin-top: 10px; }
.sheet .tx-sec > .link-btn, .sheet .tx-sec + .link-btn { margin-top: 4px; }
.items-tog { width: 100%; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 16px; background: rgba(255, 255, 255, .045); border: 1px solid rgba(255, 255, 255, .08); color: var(--text); font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; }
.items-tog > span:first-of-type { flex: 1; text-align: left; }
.items-tog b { color: var(--accent-2); margin-left: 4px; }
.items-tog > .i:last-child { color: var(--dim); transition: transform .2s var(--ease); }
.items-tog.on > .i:last-child { transform: rotate(90deg); }
.rthumbs.old { margin-top: 10px; }

/* ============================================================ v22: monobank */
.scope-row { display: flex; align-items: center; gap: 8px; }
.mono-btn { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; padding: 9px 13px; border-radius: 14px; font-weight: 800; font-size: 14px; color: var(--text);
  background: linear-gradient(135deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .03)); border: 1px solid var(--line2); flex: none; }
.mono-btn .i { color: #fb7185; }
.mono-btn b { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; display: grid; place-items: center; font-size: 11.5px; color: #1a0b0e; background: #fb7185; }
.mono-btn.has { border-color: rgba(251, 113, 133, .45); }
.mono-page .top .btn { margin-left: auto; }
.mono-cards { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; margin: 0 -2px 12px; padding: 2px; }
.mono-cards::-webkit-scrollbar { display: none; }
.mono-card { flex: none; min-width: 168px; padding: 12px 14px; border-radius: 18px; display: flex; flex-direction: column; gap: 3px; background: linear-gradient(140deg, #22252a, #121417); border: 1px solid var(--line2); }
.mono-card.white { background: linear-gradient(140deg, #f4f4f5, #cfd1d4); color: #111; border-color: transparent; }
.mono-card.white small, .mono-card.white .mc-t { color: #4b5563; }
.mono-card .mc-t { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.mono-card b { font-size: 19px; font-weight: 800; }
.mono-card small { font-size: 11.5px; font-weight: 600; color: var(--muted); }
.mono-jar { display: flex; align-items: center; gap: 11px; padding: 11px 13px; border-radius: 16px; background: rgba(245, 192, 74, .08); border: 1px solid rgba(245, 192, 74, .25); margin-bottom: 4px; }
.mono-jar .mid { display: flex; flex-direction: column; gap: 2px; } .mono-jar b { font-size: 14px; } .mono-jar small { color: var(--muted); font-weight: 600; font-size: 12.5px; }
.mono-jar small b { font-size: inherit; color: var(--gold-2); }
.mono-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mono-h .btn { text-transform: none; letter-spacing: 0; }
.mono-day { font-size: 12.5px; font-weight: 800; color: var(--muted); margin: 14px 4px 8px; }
.mi { padding: 12px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); margin-bottom: 8px; display: flex; flex-direction: column; gap: 10px; }
.mi.off { opacity: .6; }
.mi-top { display: flex; align-items: center; gap: 11px; }
.mi-top .mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mi-top .mid b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mi-top small { color: var(--muted); font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mi-amt { font-size: 16px; font-weight: 800; flex: none; }
.mi-row { display: grid; grid-template-columns: auto 1fr; gap: 8px; }
.mi-sel { appearance: none; -webkit-appearance: none; font: inherit; font-size: 13.5px; font-weight: 700; color: var(--text); padding: 9px 12px; border-radius: 12px;
  background: rgba(255, 255, 255, .05); border: 1px solid var(--line2); min-width: 0; }
.mi-sel option { background: #1a1d1b; }
.mi-warn, .mi-jar { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; padding: 9px 2px; }
.mi-warn { color: var(--warn); } .mi-jar { color: var(--gold-2); }
.mi-dupe { display: flex; align-items: center; gap: 8px; padding: 9px 11px; border-radius: 12px; background: rgba(125, 211, 252, .08); border: 1px solid rgba(125, 211, 252, .25); font-size: 12.5px; font-weight: 600; color: #bae6fd; }
.mi-dupe span { flex: 1; min-width: 0; }
.mi-acts { display: flex; align-items: center; gap: 12px; }
.mi-acts > :first-child { margin-right: auto; }
.mi-always { display: flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 12.5px; font-weight: 700; color: var(--muted); cursor: pointer; }
.mi-always input { accent-color: var(--accent); width: 16px; height: 16px; }
.mi-note { display: flex; gap: 6px; margin: 0; font-size: 12.5px; color: var(--muted); font-weight: 600; }
.mono-done { margin-top: 8px; } .md-row { display: flex; align-items: center; gap: 10px; padding: 8px 4px; } .md-row + .md-row { border-top: 1px solid var(--line); }
.md-row .mid { flex: 1; min-width: 0; display: flex; flex-direction: column; } .md-row small { color: var(--muted); font-size: 12px; font-weight: 600; }
.mono-done-tog { margin-top: 16px; }

.mono-map select { margin-top: 8px; }
.mono-sync .opt-row { margin-top: 4px; }

/* ---------- v23: картки для переказу ---------- */
.only-d { display: none; }
@media (min-width: 960px) { .only-d { display: block; } .only-d > .section:first-child { margin-top: 0; } }
.pcards { display: flex; flex-direction: column; gap: 2px; }
.pcard { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 10px; border-radius: 13px; text-align: left; color: var(--text); background: transparent; border: 0; transition: background .15s, transform .1s; }
.pcard:hover { background: var(--card2); }
.pcard:active { transform: scale(.985); background: var(--card2); }
.pcard .mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pcard .t1 { font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcard .t2 { font-size: 15px; font-weight: 700; letter-spacing: .06em; color: var(--muted); font-variant-numeric: tabular-nums; }
.pcard-fam { width: 26px; height: 26px; border-radius: 9px; display: grid; place-items: center; flex: none; background: rgba(168, 232, 112, .16); color: var(--accent-2, #a8e870); }
.pcard-cp { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; flex: none; color: var(--accent-2, #a8e870); background: rgba(168, 232, 112, .1); }
.pcard-add { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; border-radius: 16px; border: 1px dashed var(--line); background: transparent; color: var(--muted); font-weight: 700; font-size: 14px; }
.pcard-add:hover { color: var(--text); border-color: var(--muted); }

/* ---------- v24: згортання блоків головного ---------- */
.section > h3 .more + .more { margin-left: 14px; }
.plan-mini.fold-green .pm-ico { color: var(--inc, #34e0a1); background: rgba(52, 224, 161, .13); }
.plan-mini.fold-green .pm-pct b { color: var(--text); }
.plan-mini.fold-blue .pm-ico { color: #7dd3fc; background: rgba(125, 211, 252, .13); }
.plan-mini.fold-red .pm-ico { color: var(--exp, #ff7a8a); background: rgba(255, 122, 138, .13); }
.plan-mini.fold-red .pm-pct b { color: var(--exp, #ff7a8a); }
.plan-mini .pm-mid small { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.plan-mini .pm-pct b.c-exp { color: var(--exp, #ff7a8a); }

/* ---------- v26: автозвірка карток моно ---------- */
.ma { background: linear-gradient(180deg, rgba(40, 47, 42, .55), rgba(28, 33, 30, .92)); border: 1px solid var(--line); border-radius: 22px; padding: 14px; min-width: 0; }
.ma.warn { border-color: rgba(245, 192, 74, .35); }
.ma.bad { border-color: rgba(255, 107, 129, .35); }
.pill.warn { background: rgba(245, 192, 74, .13); color: var(--gold-2, #f5c04a); }
.ma-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.ma-grid > div { background: rgba(12, 15, 13, .45); border: 1px solid var(--line); border-radius: 15px; padding: 9px 9px; min-width: 0; }
.ma-grid small { display: block; color: var(--muted); font-size: 11.5px; font-weight: 700; }
.ma-grid b { display: block; font-size: 15px; letter-spacing: -.01em; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ma-why { display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; font-size: 13px; line-height: 1.4; color: var(--muted); }
.ma-why .i { flex: none; margin-top: 2px; color: var(--gold-2, #f5c04a); }
.ma.bad .ma-why .i { color: var(--exp); }
.ma-why b { color: var(--text); }
.ma-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ma-acts .btn { flex: 1 1 auto; }
.group-t.sub { margin-top: 10px; }
.mono-audit { display: flex; align-items: center; gap: 11px; padding: 11px 13px; border-radius: 16px; background: rgba(245, 192, 74, .08); border: 1px solid rgba(245, 192, 74, .25); color: var(--text); margin-bottom: 6px; }
.mono-audit > .i { color: var(--gold-2, #f5c04a); flex: none; }
.mono-audit .mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mono-audit small { color: var(--muted); font-size: 12.5px; font-weight: 600; }

/* ---------- v28: Mono — що це за операція (чипи) ---------- */
.mi .mi-row { display: flex; flex-direction: column; gap: 8px; }
.mkc-row { display: flex; flex-wrap: wrap; gap: 6px; }
.mkc-row::-webkit-scrollbar { display: none; }
.mkc { flex: none; font: inherit; font-size: 13px; font-weight: 700; color: var(--muted); padding: 7px 12px; border-radius: 99px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); cursor: pointer; transition: background .15s, color .15s, border-color .15s; white-space: nowrap; }
.mkc:active { transform: scale(.97); }
.mkc.on { color: #0b1310; background: var(--accent-2, #a8e870); border-color: transparent; }
.mkc-row.sub .mkc { font-size: 12.5px; padding: 6px 11px; }
.mkc-row.sub .mkc.on { color: var(--text); background: rgba(251, 146, 60, .18); border-color: rgba(251, 146, 60, .5); }
.mi-eff { margin: -2px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--muted); font-weight: 600; }
.mi-wait { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.mi-wait span { flex: 1; min-width: 0; }
.mi-wait .link-btn { flex: none; }
.mi.off { opacity: .75; }
.mi-acts { gap: 10px; flex-wrap: wrap; row-gap: 6px; }
.mi-acts .link-btn { font-size: 13.5px; }
.mi-acts .btn.sm { margin-left: auto; }
@media (max-width: 400px) { .mi-always { font-size: 12px; } .mi-acts { gap: 8px; } }
/* v29: підказки різниці «чек ↔ сплачено» */
.scn-note.diff { color: var(--text, #e8ece6); }
.scn-note.diff b { font-weight: 800; }
.scn-note.warn { color: #f5c04a; }
.scan-card.done .scn-acts { padding-left: 4px; margin-top: 8px; flex-wrap: wrap; }
.rv-row.extra { border-left-style: dashed; }
.rv-row.extra .it-x { flex: none; }
/* v32: Сільпо — «Наш список», що закінчується, знижки, кошик */
.ptabs { margin: -4px 0 14px; }
.sil-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 4px 12px; font-size: 12.5px; font-weight: 600; }
.sil-list { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.sil-row { display: flex; align-items: center; gap: 10px; padding: 8px 2px; border-bottom: 1px solid var(--line); }
.sil-row:last-child { border-bottom: 0; }
.sil-row .mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; text-align: left; background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; }
.sil-row .t1 { font-weight: 700; font-size: 14px; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sil-row .t2 { font-size: 12px; color: var(--muted); font-weight: 600; }
.sil-row .pr { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: none; }
.sil-row .pr b { font-size: 14px; } .sil-row .pr small, .sil-ph small { font-size: 11px; color: var(--muted); font-weight: 700; }
.sil-img { width: 40px; height: 40px; flex: none; border-radius: 12px; object-fit: contain; background: #fff; }
.sil-img.ph { display: inline-flex; align-items: center; justify-content: center; background: var(--card2); }
.sil-img.ph.big { width: 84px; height: 84px; border-radius: 20px; }
.sil-disc { display: inline-block; padding: 2px 7px; border-radius: 99px; background: rgba(52, 224, 161, .14); color: var(--inc); font-size: 11.5px; font-weight: 800; }
.sil-disc.lg { margin-top: 6px; font-size: 12.5px; padding: 4px 10px; }
.sil-add { flex: none; width: 34px; height: 34px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--card2); border: 1px solid var(--line2); color: var(--accent-2); cursor: pointer; transition: background .2s, transform .15s; }
.sil-add.on { background: var(--accent-2); color: #10210a; border-color: transparent; }
.sil-add:active { transform: scale(.9); }
.sil-f button small { opacity: .65; font-weight: 800; }
.sil-ph { display: flex; gap: 14px; align-items: center; margin-bottom: 12px; }
.sil-ph img { width: 84px; height: 84px; border-radius: 20px; object-fit: contain; background: #fff; flex: none; }
.sil-modes { flex-wrap: wrap; }
.sil-modes .opt small { opacity: .7; font-weight: 600; }
.sil-an .sil-img { width: 36px; height: 36px; border-radius: 10px; }
.sil-unrec .li .btn { flex: none; }
.sil-bar { position: sticky; bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 20; display: flex; align-items: center; gap: 8px; margin: 12px 0 0; padding: 10px 10px 10px 14px; border-radius: 18px;
  background: rgba(20, 26, 22, .92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgba(168, 232, 112, .3); box-shadow: 0 10px 30px rgba(0, 0, 0, .4); font-size: 13px; font-weight: 600; }
.sil-bar > span { flex: 1; min-width: 0; }
@media (min-width: 900px) { .sil-bar { bottom: 16px; } }
.sil-step { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.sil-step button { width: 30px; height: 30px; border-radius: 10px; background: var(--card2); border: 1px solid var(--line2); font-size: 17px; font-weight: 800; color: var(--text); cursor: pointer; }
.sil-step b { min-width: 54px; text-align: center; font-size: 13px; }
/* v33: Продукти — замовлення через Сільпо (навігація, кошик-панель на ПК, автоперехід) */
.ptabs button { flex: 1; }
.sil-wrap.two { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 18px; align-items: start; }
.sil-side { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow: auto; }
.sil-side h3 small { font-weight: 700; }
.sil-nav { position: sticky; top: 0; z-index: 15; display: flex; gap: 4px; padding: 6px; margin: 0 0 14px; border-radius: 18px; background: rgba(14, 18, 16, .88); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.sil-nav::-webkit-scrollbar { display: none; }
.sil-nav button { position: relative; flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 12px; border-radius: 13px; font-size: 13px; font-weight: 700; color: var(--muted); white-space: nowrap; transition: background .2s, color .2s; }
.sil-nav button.on { background: linear-gradient(180deg, var(--card3), var(--card2)); color: var(--text); }
.sil-nav button.on .i { color: var(--accent-2); }
.sil-badge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--accent-2); color: #10210a; font-style: normal; font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
@media (max-width: 520px) { .sil-nav button { padding: 9px 10px; gap: 5px; font-size: 12.5px; } }
.sil-cards { display: grid; gap: 14px; }
@media (min-width: 760px) { .sil-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } .sil-wrap.two .sil-cards { grid-template-columns: 1fr; } }
@media (min-width: 1400px) { .sil-wrap.two .sil-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sil-cards > .card { margin: 0; }

.sil-tools { display: flex; gap: 8px; margin: 10px 0 4px; }
.sil-tools .search { flex: 1; margin: 0; }
.sil-tools select { flex: none; max-width: 46%; }
.sil-sform { display: flex; gap: 8px; }
.sil-sform .search { flex: 1; margin: 0; }

.sil-step.sm button { width: 28px; height: 28px; border-radius: 9px; font-size: 16px; }
.sil-step.sm b { min-width: 44px; font-size: 12px; }
.sil-row.cr { gap: 8px; }
.sil-row.cr .mid { cursor: default; }
.sil-total { display: flex; justify-content: space-between; align-items: baseline; margin: 12px 2px 8px; font-weight: 700; color: var(--muted); }
.sil-total b { font-size: 20px; color: var(--text); }
.sil-opt { margin: 4px 0 12px; font-size: 13px; }
.sil-go { font-size: 16px; padding: 15px; }
.sil-sc { margin-top: 14px; }
.sil-det { margin-top: 8px; font-size: 13px; }
.sil-det summary { cursor: pointer; color: var(--muted); font-weight: 700; }
.sil-cl { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--line); }
.sil-acts { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.sil-cta { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; }
.sil-count { display: flex; align-items: center; gap: 12px; margin: 14px 0 4px; padding: 12px 14px; border-radius: 16px; background: rgba(168, 232, 112, .08); border: 1px solid rgba(168, 232, 112, .3); font-weight: 700; }
.sil-count b { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--accent-2); color: #10210a; font-size: 17px; flex: none; }
.sil-count span { flex: 1; }
button.sil-bar { width: 100%; text-align: left; color: var(--text); cursor: pointer; }
.sil-bar-go { display: inline-flex; align-items: center; gap: 4px; padding: 7px 12px; border-radius: 12px; background: var(--accent-2); color: #10210a; font-weight: 800; flex: none; }
/* v33: мобільна навігація Сільпо — 4 рівні вкладки; кошик — назва на всю ширину, кнопка «Оформити» завжди під рукою */
@media (max-width: 640px) {
  .sil-nav { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; padding: 5px; }
  .sil-nav button { flex-direction: column; gap: 3px; padding: 7px 2px; font-size: 11px; }
  .sil-nav .sil-badge { position: absolute; top: 3px; right: calc(50% - 22px); min-width: 16px; height: 16px; font-size: 10px; }
  .sil-row.cr { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; grid-template-areas: 'img mid x' 'img step step'; column-gap: 10px; row-gap: 6px; align-items: center; }
  .sil-row.cr > .sil-img { grid-area: img; align-self: start; }
  .sil-row.cr > .mid { grid-area: mid; }
  .sil-row.cr > .sil-step { grid-area: step; justify-self: start; }
  .sil-row.cr > .it-x { grid-area: x; }
  .sil-row.cr .t1 { -webkit-line-clamp: 3; }
}
.sil-checkout { position: sticky; bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 12; margin: 8px -6px 0; padding: 10px 10px 12px; border-radius: 18px; background: rgba(20, 26, 22, .94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgba(168, 232, 112, .25); }
.sil-checkout .sil-total { margin: 0 4px 8px; }
.sil-side .sil-checkout { bottom: 0; margin: 8px 0 0; }
@media (min-width: 900px) { .sil-checkout { bottom: 12px; } }
.sil-exp { margin-bottom: 12px; } .sil-exp .btn { margin-top: 8px; }
/* v35: «Наш список» — мобільні інструменти не вилазять за екран; на ПК — таблиця */
.sil-tools { flex-wrap: wrap; }
.sil-tools .search { flex: 1 1 170px; min-width: 0; }
.sil-tools select { flex: 0 0 auto; max-width: 100%; width: auto; padding-right: 30px; }
.sil-pc-tools { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }

.sil-pc-tools .search { flex: 0 1 300px; margin: 0; }
.sil-tbl-wrap { overflow-x: auto; margin: 0 -6px; }
.sil-tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.sil-tbl th { position: sticky; top: 0; text-align: left; font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 8px 8px; border-bottom: 1px solid var(--line2); white-space: nowrap; background: var(--card); }
.sil-tbl th.sortable { cursor: pointer; } .sil-tbl th.sortable:hover, .sil-tbl th.on { color: var(--text); }
.sil-tbl td { padding: 8px; border-bottom: 1px solid var(--line); vertical-align: middle; font-weight: 600; }
.sil-tbl tr:hover td { background: rgba(255, 255, 255, .025); }
.sil-tbl td small { display: block; font-size: 11.5px; font-weight: 600; }
.sil-tbl .r { text-align: right; white-space: nowrap; } .sil-tbl .c { text-align: center; width: 1%; white-space: nowrap; }
.sil-tname { display: flex; align-items: center; gap: 10px; background: none; border: 0; padding: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; min-width: 220px; }
.sil-tname b { font-size: 14px; line-height: 1.3; display: block; }
.sil-tname .pill { display: inline-flex; margin: 3px 4px 0 0; font-size: 10.5px; padding: 2px 7px; }
.sil-tname:hover b { color: var(--accent-2); }
.sil-dr { display: block; width: 90px; height: 5px; margin-top: 6px; border-radius: 9px; background: var(--card2); overflow: hidden; }
.sil-dr i { display: block; height: 100%; border-radius: 9px; background: var(--accent-2); }
.sil-dr.warn i { background: #f5c04a; } .sil-dr.bad i { background: #ff6b81; }

@media (min-width: 1100px) and (max-width: 1399px) { .sil-wrap.two .sil-tbl th:nth-child(5), .sil-wrap.two .sil-tbl td:nth-child(5), .sil-wrap.two .sil-tbl th:nth-child(6), .sil-wrap.two .sil-tbl td:nth-child(6) { display: none; } }
@media (min-width: 1100px) { .sil-wrap.two { grid-template-columns: minmax(0, 1fr) 340px; } }
.sil-tools .search { flex: 1 1 140px; }
.sil-tbl td:not(:first-child) { white-space: nowrap; }
.sil-tbl td:first-child { width: 42%; }
.sil-bar > .sil-bar-go { flex: none; }
@media (min-width: 900px) { button.sil-bar { max-width: 520px; margin-left: auto; } }

/* =====================================================================
   v37: ПК — окремий, «повітряний» макет (без масштабування)
   Ідея: на великому екрані не збільшуємо елементи, а даємо їм простір і більше колонок.
   Шкала відступів: 8 · 12 · 16 · 24 · 32 · 48. Розміри шрифтів — як на телефоні або трохи менші.
   ===================================================================== */
@media (min-width: 1024px) {
  /* бокова панель — компактна, тиха */
  .app { grid-template-columns: 236px minmax(0, 1fr); }
  .side { padding: 28px 16px 20px; gap: 2px; }
  .side .logo { margin: 0 8px 28px; }
  .side .logo b { font-size: 19px; }
  .side > a { padding: 10px 12px; font-size: 14px; gap: 12px; border-radius: 12px; }
  .side .btn.primary { margin: 0 0 22px; padding: 11px 14px; font-size: 14px; border-radius: 14px; }

  /* робоча область: широка, але з полями */
  main#view { max-width: 1360px; padding: 40px 56px 72px; }
  .top { margin: 0 0 28px; gap: 16px; }
  .top h1 { font-size: 28px; }
  .section { margin-top: 32px; }
  .card { padding: 22px 24px; }
  .card h3, .section > h3 { margin-bottom: 16px; }
  .f-label { margin: 20px 2px 10px; }
  .li { padding: 13px 18px; }
  .tx { padding: 10px 8px; }
  .kpis { gap: 14px; }
  .kpi { padding: 16px 18px; }
  .masonry { column-gap: 24px; margin-top: 24px; }
  .masonry > .card { margin-bottom: 24px; }
  .home-grid { gap: 32px; }
  .sheet { width: 600px; padding: 24px 28px 28px; }

  /* Продукти: перемикач розділів — компактний, вкладки Сільпо — як закладки з лінією */
  .ptabs { display: inline-flex; width: auto; margin: 0 0 24px; }
  .ptabs button { flex: none; padding: 9px 18px; }
  .sil-nav { position: static; display: flex; gap: 4px; padding: 0; margin: 0 0 24px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; overflow: visible; }
  .sil-nav button { flex: none; padding: 10px 14px 12px; border-radius: 0; font-size: 14px; background: none !important; box-shadow: none; margin-bottom: -1px; border-bottom: 2px solid transparent; }
  .sil-nav button:hover { color: var(--text); }
  .sil-nav button.on { color: var(--text); border-bottom-color: var(--accent-2); }
  .sil-head { margin: -8px 2px 20px; }
  .sil-wrap.two { grid-template-columns: minmax(0, 1fr) 320px; gap: 32px; }
  .sil-side { top: 24px; padding: 22px; }
  .sil-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .sil-cards > .card.wide { grid-column: 1 / -1; }
  .sil-row { padding: 10px 2px; gap: 14px; }
  .sil-img { width: 44px; height: 44px; }

  /* плитки товарів: помірний розмір, більше колонок, багато повітря */
  .sil-list.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 16px; margin-top: 8px; }
  .sil-list.tiles .sil-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'img img' 'mid mid' 'pr add'; align-items: end; gap: 10px 8px;
    padding: 14px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255, 255, 255, .015); transition: border-color .2s; }
  .sil-list.tiles .sil-row:hover { border-color: var(--line2); }
  .sil-list.tiles .sil-row > .sil-img { grid-area: img; width: 100%; height: 116px; border-radius: 12px; }
  .sil-list.tiles .sil-row > .mid { grid-area: mid; align-self: start; gap: 4px; }
  .sil-list.tiles .sil-row .t1 { font-size: 13.5px; line-height: 1.35; min-height: 2.7em; }
  .sil-list.tiles .sil-row .t2 { font-size: 12px; }
  .sil-list.tiles .sil-row > .pr { grid-area: pr; align-items: flex-start; }
  .sil-list.tiles .sil-row > .pr b { font-size: 15.5px; }
  .sil-list.tiles .sil-row > .sil-add, .sil-list.tiles .sil-row > .sil-step { grid-area: add; justify-self: end; }
  .sil-list.tiles .sil-row > .sil-step b { min-width: 38px; }

  /* таблиця «Нашого списку» */
  .sil-pc-tools { margin-bottom: 18px; }
  .sil-tbl td { padding: 12px 10px; }
  .sil-tbl th { padding: 10px; }
}
@media (min-width: 1500px) {
  main#view { max-width: 1520px; padding-left: 64px; padding-right: 64px; }
  .masonry { columns: 3; }
  .sil-wrap.two { grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; }
}
@media (min-width: 1900px) {
  main#view { max-width: 1680px; }
  .app { grid-template-columns: 248px minmax(0, 1fr); }
  .sil-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sil-list.tiles { grid-template-columns: repeat(auto-fill, minmax(184px, 1fr)); }
}
/* кошик праворуч на ПК: назва на всю ширину, кількість під нею */
.sil-side .sil-row.cr { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-areas: 'img mid x' 'img step step'; column-gap: 12px; row-gap: 6px; align-items: center; }
.sil-side .sil-row.cr > .sil-img { grid-area: img; align-self: start; width: 44px; height: 44px; }
.sil-side .sil-row.cr > .mid { grid-area: mid; } .sil-side .sil-row.cr .t1 { -webkit-line-clamp: 2; }
.sil-side .sil-row.cr > .sil-step { grid-area: step; justify-self: start; }
.sil-side .sil-row.cr > .it-x { grid-area: x; }
@media (min-width: 1024px) {
  .seg.full.ptabs { display: inline-flex; width: auto; }
  .app { grid-template-columns: 248px minmax(0, 1fr); }
  .side .logo small { max-width: 170px; white-space: nowrap; }
  .sil-cards > .card:not(.wide) .sil-list.tiles { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
}

/* =====================================================================
   v38: аудит UI — історія з підсумком праворуч, «широкі» сторінки налаштувань на ПК
   ===================================================================== */
.hist-side { display: none; }
.hs-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.hs-kpis small { display: block; font-size: 12px; font-weight: 700; color: var(--muted); margin-bottom: 2px; }
.hs-kpis b { font-size: 18px; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; }
.hs-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: 'i n v' 'i bar bar'; align-items: center; gap: 4px 10px; width: 100%; padding: 8px 6px; border-radius: 12px; text-align: left; color: var(--text); transition: background .15s; }
.hs-row:hover { background: var(--card); }
.hs-row.on { background: var(--accent-soft); }
.hs-row > :first-child { grid-area: i; }
.hs-n { grid-area: n; font-size: 13.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hs-row > b { grid-area: v; font-size: 13.5px; }
.hs-bar { grid-area: bar; height: 4px; border-radius: 9px; background: var(--card2); overflow: hidden; }
.hs-bar i { display: block; height: 100%; border-radius: 9px; background: var(--accent-2); opacity: .8; }
@media (min-width: 1200px) {
  .history-wrap.hist2 { max-width: 1240px; display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; align-items: start; }
  .hist-side { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 24px; }
  .hist-side .card { margin: 0; }
  .hist-main .top { margin-bottom: 20px; }
  .hist-main .chips { margin: 0 0 12px; padding: 0; flex-wrap: wrap; overflow: visible; }

  /* налаштування, категорії, гаманці, регулярні — список у дві колонки, а не вузька смуга */
  .narrow.grid-pg { max-width: 1120px; }
  .grid-pg .list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-pg .list > .li { border-top: 1px solid var(--line); }
  .grid-pg .list > .li:nth-child(-n+2) { border-top: 0; }
  .grid-pg .list > .li:nth-child(odd) { border-right: 1px solid var(--line); }
  .grid-pg .list > .li:has(.ui-seg), .grid-pg .list > .li.add:last-child:nth-child(odd) { grid-column: 1 / -1; border-right: 0; }
  .grid-pg .me-card, .grid-pg > .card { max-width: none; }
  .grid-pg .about { margin-top: 40px; }
}
/* аудит: вузькі місця між планшетом і ПК (960–1279) */
.debt-row .mid b { display: block; overflow-wrap: anywhere; line-height: 1.25; }
.kpi small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 960px) and (max-width: 1279px) { .kpis:not(.kpis-4) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.summary-line span { white-space: nowrap; }

/* =====================================================================
   v39: Сільпо — сегменти товарів
   ===================================================================== */
/* значок сегмента на фото товару */
.sil-imgw { position: relative; flex: none; display: inline-flex; }
.sil-segdot { position: absolute; right: -4px; bottom: -4px; width: 18px; height: 18px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--sc) 22%, #0e1210); color: var(--sc); border: 2px solid var(--bg2); }
.sil-list.tiles .sil-row > .sil-imgw { grid-area: img; width: 100%; }
.sil-list.tiles .sil-row > .sil-imgw .sil-img { width: 100%; height: 116px; border-radius: 12px; }
.sil-list.tiles .sil-row > .sil-imgw .sil-segdot { right: 6px; bottom: 6px; width: 22px; height: 22px; border-radius: 8px; }
@media (max-width: 959px) { .sil-list.tiles .sil-row > .sil-imgw { width: auto; } .sil-list.tiles .sil-row > .sil-imgw .sil-img { width: 44px; height: 44px; } .sil-list.tiles .sil-row > .sil-imgw .sil-segdot { right: -4px; bottom: -4px; width: 18px; height: 18px; } }

/* кнопки сегментів: на телефоні — горизонтальна стрічка, на ПК — колонка зліва */
.sg-b { display: inline-flex; align-items: center; gap: 7px; flex: none; padding: 8px 12px; border-radius: 99px; background: var(--card2); border: 1px solid var(--line2); color: var(--muted); font-size: 13px; font-weight: 700; white-space: nowrap; transition: background .15s, color .15s, border-color .15s; }
.sg-b .i { color: var(--sc, var(--accent-2)); }
.sg-b small { font-size: 11.5px; opacity: .7; font-weight: 800; }
.sg-b:hover { color: var(--text); }
.sg-b.on { color: var(--text); background: color-mix(in srgb, var(--sc, #a8e870) 16%, transparent); border-color: color-mix(in srgb, var(--sc, #a8e870) 55%, transparent); }
.sg-scroll { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: -2px -16px 12px; padding: 2px 16px; }
.sg-scroll::-webkit-scrollbar { display: none; }
.sil-mlist .search { margin-bottom: 8px; }
.sil-mlist .sil-tools { margin: 0 0 6px; flex-wrap: nowrap; }
.sil-mlist .sil-tools select { flex: 1 1 0; min-width: 0; }
.sg-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, var(--sc) 9%, transparent); border: 1px solid color-mix(in srgb, var(--sc) 25%, transparent); }
.sg-head b { font-size: 15px; } .sg-head .dim { font-size: 12.5px; font-weight: 700; }
.sg-head .link-btn { margin-left: auto; }
.sil-tags { display: flex; gap: 6px; margin-top: 3px; }
.sil-tags small { display: inline-flex !important; align-items: center; gap: 3px; font-size: 11px !important; color: var(--muted); font-weight: 700; }

/* «Що купуємо» в підбірці */
.seg-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.seg-tile { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: 'i n' 'i c' 'b b'; align-items: center; gap: 1px 10px; padding: 11px 12px; border-radius: 16px; text-align: left; color: var(--text);
  background: color-mix(in srgb, var(--sc) 7%, rgba(0, 0, 0, .15)); border: 1px solid color-mix(in srgb, var(--sc) 18%, var(--line)); transition: border-color .15s, background .15s; }
.seg-tile:hover { border-color: color-mix(in srgb, var(--sc) 50%, transparent); }
.seg-tile > .ico { grid-area: i; }
.st-n { grid-area: n; font-weight: 800; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-c { grid-area: c; font-size: 12px; color: var(--muted); font-weight: 700; }
.st-b { grid-area: b; justify-self: start; margin-top: 7px; font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 99px; }
.st-b.due { background: rgba(255, 107, 129, .14); color: #ff8fa3; } .st-b.deal { background: rgba(52, 224, 161, .14); color: var(--inc); }

/* кошик: групи-відділи */
.cr-seg { display: flex; align-items: center; gap: 7px; margin: 12px 2px 2px; font-size: 12px; font-weight: 800; color: var(--muted); }
.cr-seg:first-child { margin-top: 0; }

/* картка товару: сегмент */
.seg-cur { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, var(--sc) 9%, var(--card)); border: 1px solid color-mix(in srgb, var(--sc) 30%, transparent); color: var(--text); text-align: left; font-weight: 800; }
.seg-cur small { margin-left: auto; color: var(--muted); font-weight: 700; font-size: 12px; }
.seg-pick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.seg-pick button { display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: 99px; background: var(--card2); border: 1px solid var(--line2); color: var(--muted); font-size: 12.5px; font-weight: 700; }
.seg-pick button .i { color: var(--sc, var(--accent-2)); }
.seg-pick button.on { color: var(--text); border-color: color-mix(in srgb, var(--sc) 60%, transparent); background: color-mix(in srgb, var(--sc) 14%, transparent); }

@media (min-width: 640px) { .seg-tiles { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); } }
@media (min-width: 960px) {
  .sil-lib { display: grid; grid-template-columns: 228px minmax(0, 1fr); gap: 24px; align-items: start; }
  .sg-rail { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 2px; }
  .sg-rail .sg-b { width: 100%; padding: 9px 12px; border-radius: 12px; background: none; border-color: transparent; font-size: 13.5px; }
  .sg-rail .sg-b span { flex: 1; text-align: left; }
  .sg-rail .sg-b:hover { background: var(--card); }
  .sg-rail .sg-b.on { background: color-mix(in srgb, var(--sc, #a8e870) 13%, transparent); border-color: color-mix(in srgb, var(--sc, #a8e870) 35%, transparent); }
  .sil-pc-tools .search { flex: 1 1 260px; }
  .sil-pc-tools select { flex: none; width: auto; }
}
.seg-chev { display: inline-flex; transition: transform .2s; color: var(--muted); } .seg-chev.open { transform: rotate(180deg); }
.st-n { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.25; }
.seg-tile { align-items: start; }
.sg-due { display: flex; align-items: center; gap: 8px; width: 100%; margin: 0 0 10px; padding: 9px 12px; border-radius: 12px; background: rgba(255, 107, 129, .08); border: 1px solid rgba(255, 107, 129, .25); color: #ffb3bf; font-size: 13px; font-weight: 700; }
.sil-img.ph.big { background: var(--card2); }
.cr-seg { text-transform: none; letter-spacing: 0; padding-top: 4px; }
.cr-seg i { width: 8px; height: 8px; border-radius: 50%; background: var(--sc); flex: none; }
.sil-list > .cr-seg + .sil-row { border-top: 0; }

/* =====================================================================
   v41: «Продукти → Аналітика» — логічний макет; прокрутка довгих списків
   ===================================================================== */
/* смуги прокрутки: тонкі, але помітні (Android, ПК; на iPhone система показує свої під час прокрутки) */
html { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .22) transparent; }
.scroll-y, .sil-tbl-wrap, .sil-side, .sheet { scrollbar-width: thin; scrollbar-color: rgba(168, 232, 112, .45) rgba(255, 255, 255, .04); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .16); border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: rgba(168, 232, 112, .55); }
.scroll-y::-webkit-scrollbar-thumb, .sil-tbl-wrap::-webkit-scrollbar-thumb { background-color: rgba(168, 232, 112, .4); }
.scroll-y::-webkit-scrollbar-track, .sil-tbl-wrap::-webkit-scrollbar-track { background: rgba(255, 255, 255, .03); border-radius: 10px; }

/* довгі списки — у власній області з прокруткою */
.scroll-y { max-height: min(62vh, 560px); overflow-y: auto; overscroll-behavior-y: auto; margin-right: -8px; padding-right: 6px; }
.sil-tbl-wrap { max-height: min(70vh, 720px); overflow-y: auto; }
.sil-tbl thead th { z-index: 2; }
@media (min-width: 1024px) { .scroll-y { max-height: min(68vh, 640px); } }

/* Аналітика: телефон — підказки, що купуємо, Сільпо, товари, інфляція */
.pa-main, .pa-side { display: contents; }
.pa-grid { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
.pa-grid .card { margin: 0; }
.pa-tips { order: 1; } .pa-grp { order: 2; } .pa-silpo { order: 3; } .pa-list { order: 4; } .pa-infl { order: 5; }
.pa-silpo:empty, .pa-infl:empty { display: none; }
.pa-tools { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.pa-tools .search { margin: 0; }
/* ПК: ліворуч головне (підказки + список товарів), праворуч контекст (структура, Сільпо, інфляція) */
@media (min-width: 1100px) {
  .pa-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; align-items: start; margin-top: 24px; }
  .pa-main, .pa-side { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
  .pa-side { position: sticky; top: 24px; }
  .pa-tools { flex-direction: row; align-items: center; gap: 12px; }
  .pa-tools .search { flex: 1; }
  .pa-tools .sort-row { margin: 0; }
  .pa-list .scroll-y { max-height: min(72vh, 760px); }
}
@media (min-width: 1500px) { .pa-grid { grid-template-columns: minmax(0, 1fr) 420px; } }

/* =====================================================================
   v42: Налаштування — групи за важливістю, інтеграції окремо
   ===================================================================== */

.set-attn { border-radius: 20px; padding: 12px; background: rgba(245, 192, 74, .06); border: 1px solid rgba(245, 192, 74, .25); }

.set-attn-i { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 6px; border-radius: 12px; color: var(--text); font-size: 13.5px; font-weight: 700; text-align: left; }
.set-attn-i span { flex: 1; }
.set-attn-i > .i:last-child { color: var(--muted); }
.set-attn-i:hover { background: rgba(255, 255, 255, .04); }
.set-attn-i + .set-attn-i { border-top: 1px solid var(--line); }

#set-account .t1 { font-weight: 800; }

/* інтеграції — окремі картки зі статусом */
.integ-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
.integ { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 20px; text-align: left; color: var(--text);
  background: linear-gradient(180deg, rgba(40, 47, 42, .5), rgba(24, 29, 26, .9)); border: 1px solid var(--line); transition: border-color .2s, background .2s; }
.integ:hover { border-color: var(--line2); }
.integ.on { border-color: rgba(52, 224, 161, .28); }
.integ.warn { border-color: rgba(249, 115, 22, .45); background: linear-gradient(180deg, rgba(249, 115, 22, .08), rgba(24, 29, 26, .9)); }
.integ-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.integ b { font-size: 15.5px; font-weight: 800; }
.integ-d { font-size: 12.5px; color: var(--muted); font-weight: 600; line-height: 1.4; }
.integ-b { align-self: flex-start; margin-top: 4px; font-size: 11.5px; font-weight: 800; padding: 3px 9px; border-radius: 99px; background: rgba(245, 192, 74, .14); color: #f5c04a; }
.integ-go { display: inline-flex; align-items: center; gap: 4px; margin-top: auto; padding-top: 10px; font-size: 13px; font-weight: 800; color: var(--accent-2); }
.integ.warn .integ-go { color: #fb923c; }
.pill.warn { background: rgba(249, 115, 22, .15); color: #fb923c; }

@media (min-width: 640px) { .integ-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* ПК: назва групи з описом — ліворуч, налаштування — праворуч */
@media (min-width: 1024px) {
  
  
  
  
  
  
  
  
  
  .integ-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .integ { padding: 18px; min-height: 172px; }
  
}
.set-attn-i span { flex: initial; } .set-attn-i > span:not(.ico) { flex: 1; }

/* ---------- v43: QR-код фіскального чека ---------- */
.sheet .ttabs + .scan-row { margin-top: 12px; }
.scan-row { display: flex; gap: 8px; margin: 12px 0 0; align-items: stretch; }
.scan-row > .scan-card { flex: 1; min-width: 0; margin: 0; }
.scan-qr { flex: none; width: 66px; border-radius: 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; cursor: pointer;
  color: #f0abfc; font: inherit; font-size: 12px; font-weight: 800; letter-spacing: .04em;
  background: linear-gradient(160deg, rgba(232, 121, 249, .16), rgba(232, 121, 249, .06)); border: 1px solid rgba(232, 121, 249, .28); transition: transform .15s var(--ease), border-color .2s; }
.scan-qr:hover { border-color: rgba(232, 121, 249, .55); }
.scan-qr:active { transform: scale(.96); }
.scn-qrb { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; color: #f0abfc; background: rgba(232, 121, 249, .16); }
.scn-note.qr { color: var(--muted); }
.scn-note.qr .i { color: #f0abfc; }
.scn-link { color: #f0abfc; font-weight: 700; text-decoration: none; white-space: nowrap; display: inline-flex; align-items: center; gap: 3px; }
.scn-link:hover { text-decoration: underline; }
.scan-card.err .scn-acts { flex-wrap: wrap; }

.qrl { position: fixed; inset: 0; z-index: 95; background: #000; color: #fff; overflow: hidden; animation: qrl-in .18s ease-out; }
.qrl.out { opacity: 0; transition: opacity .18s; }
@keyframes qrl-in { from { opacity: 0; } }
.qrl video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.qrl-top { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: calc(14px + var(--safe-t, 0px)) 16px 28px; background: linear-gradient(rgba(0, 0, 0, .65), transparent); }
.qrl-top b { display: flex; align-items: center; gap: 8px; font-size: 16px; }
.qrl-x { width: 40px; height: 40px; border-radius: 14px; border: 0; display: grid; place-items: center; color: #fff; background: rgba(255, 255, 255, .16); cursor: pointer; }
.qrl-frame { position: absolute; left: 50%; top: 50%; width: min(68vmin, 340px); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 24px;
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .45); transition: box-shadow .2s; }
.qrl-frame i { position: absolute; width: 34px; height: 34px; border: 4px solid #f0abfc; }
.qrl-frame i:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; border-top-left-radius: 24px; }
.qrl-frame i:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; border-top-right-radius: 24px; }
.qrl-frame i:nth-child(3) { left: 0; bottom: 0; border-right: 0; border-top: 0; border-bottom-left-radius: 24px; }
.qrl-frame i:nth-child(4) { right: 0; bottom: 0; border-left: 0; border-top: 0; border-bottom-right-radius: 24px; }
.qrl.hit .qrl-frame i { border-color: #a8e870; }
.qrl-hint { position: absolute; left: 16px; right: 16px; top: calc(50% + min(34vmin, 170px) + 18px); margin: 0; text-align: center; font-size: 14px; font-weight: 700; text-shadow: 0 1px 6px rgba(0, 0, 0, .8); }
.qrl-hint.warn { color: #f5c04a; }
.qrl-bot { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; padding: 28px 16px calc(22px + var(--safe-b, 0px)); background: linear-gradient(transparent, rgba(0, 0, 0, .65)); }
.qrl-bot .btn { background: rgba(255, 255, 255, .16); color: #fff; border-color: transparent; }
.qrl-bot { flex-direction: column; align-items: center; gap: 8px; }
.qrl-eng { font-size: 11px; color: rgba(255, 255, 255, .45); font-weight: 600; }

/* ---------- v45: особисті покупки зі ставка, коментар у Mono, замовлення Сільпо, таймер входу ---------- */
.pers-box { margin: 8px 0 4px; padding: 10px 12px 12px; border-radius: 16px; background: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .06); }
.pers-box .f-label { margin-top: 6px; }
.pers-box .opt-row { flex-wrap: wrap; }
.pers-box select.field { margin-top: 2px; }
.pers-box .loan-hint { margin: 10px 0 0; }
.hint.pers-cat { display: flex; gap: 6px; align-items: flex-start; }
.mi-note { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; padding: 0 10px; border-radius: 12px; background: rgba(0, 0, 0, .22); border: 1px solid rgba(255, 255, 255, .07); color: var(--muted); }
.mi-note:focus-within { border-color: rgba(168, 232, 112, .45); color: var(--accent-2); }
.mi-note input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: var(--text); font: inherit; font-size: 14px; font-weight: 600; padding: 10px 0; }
.mi-note input::placeholder { color: var(--muted); font-weight: 500; }
.mi-note-x { flex: none; border: 0; background: none; color: var(--muted); padding: 6px; cursor: pointer; border-radius: 8px; }
.mi-note-x:hover { color: var(--text); background: rgba(255, 255, 255, .06); }
.sil-order .sil-row.off { opacity: .55; }
button.li.compact { width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; }
button.li.compact .pill { flex: none; }
.sil-ttl { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--muted); padding: 3px 9px; border-radius: 999px; background: rgba(255, 255, 255, .05); white-space: nowrap; }
.sil-ttl.warn { color: #f5c04a; background: rgba(245, 192, 74, .12); }
.sil-ttl .link-btn { font-size: 12px; margin-left: 2px; }
.sil-head { flex-wrap: wrap; row-gap: 6px; }
.sil-sess h3 { flex-wrap: wrap; gap: 8px; }
.sil-sess h3 .sil-ttl { margin-left: auto; }

/* v46 — «Повторити замовлення»: картки замовлень */
.sil-ords { display: flex; flex-direction: column; gap: 8px; }
.sil-ord { display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 12px 12px 12px; text-align: left; color: var(--text);
  border-radius: 16px; background: rgba(255, 255, 255, .035); border: 1px solid var(--line); transition: background .15s, border-color .15s, transform .15s; }
.sil-ord:hover { background: rgba(255, 255, 255, .06); border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.sil-ord:active { transform: scale(.99); }
.so-date { flex: none; width: 48px; height: 52px; border-radius: 13px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); line-height: 1; }
.so-date b { font-size: 20px; font-weight: 800; }
.so-date small { font-size: 11px; font-weight: 700; margin-top: 3px; text-transform: lowercase; opacity: .85; }
.so-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.so-top { display: flex; align-items: baseline; gap: 10px; }
.so-top b { font-size: 16.5px; font-weight: 800; white-space: nowrap; }
.so-n { font-size: 12.5px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.so-thumbs { display: flex; align-items: center; }
.so-thumbs .sil-img { width: 30px; height: 30px; border-radius: 9px; padding: 2px; box-shadow: 0 0 0 2px #1b201c; }
.so-thumbs .sil-img.ph svg { width: 15px; height: 15px; }
.so-thumbs > * + * { margin-left: -6px; }
.so-thumbs i { font-style: normal; font-size: 11.5px; font-weight: 800; color: var(--muted); margin-left: 8px; }
.so-names { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.so-go { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); background: rgba(255, 255, 255, .05); }
.sil-ord:hover .so-go { color: var(--accent); }
.sil-cards > .card { min-width: 0; }

/* v0.1.0 — бета для сімей: сім'я, запрошення, підтримка, оновлення, реєстрація */
.row2 { display: flex; gap: 10px; margin-top: 14px; } .row2 > * { flex: 1; }
.block-c { display: block; text-align: center; margin-top: 10px; }
.fam-card .fam-h { display: flex; align-items: center; gap: 12px; }
.fam-card .fam-h .mid { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fam-card .fam-h b { font-size: 18px; font-weight: 800; }
.fam-card .fam-h small { color: var(--muted); font-size: 13px; margin-top: 2px; }
.inv-link { margin-top: 12px; padding: 14px; border-radius: 14px; background: var(--well, rgba(255,255,255,.04)); border: 1px dashed var(--line2); word-break: break-all; }
.inv-link code { font-size: 13px; color: var(--accent-2); }
.perm-list .li { padding: 10px 12px; }
.sup-new { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.sup-k { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 8px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); color: var(--text); transition: border-color .15s, transform .15s; }
.sup-k:hover { border-color: var(--line2); } .sup-k:active { transform: scale(.97); }
.sup-k b { font-size: 13.5px; font-weight: 800; }
.sup-chat { display: flex; flex-direction: column; gap: 10px; max-height: 46vh; overflow-y: auto; padding: 4px 2px 14px; }
.sup-msg { max-width: 86%; display: flex; flex-direction: column; gap: 4px; }
.sup-msg.me { align-self: flex-end; align-items: flex-end; } .sup-msg.adm { align-self: flex-start; }
.sup-b { padding: 10px 13px; border-radius: 16px; font-size: 14.5px; line-height: 1.45; background: var(--card2); border: 1px solid var(--line); }
.sup-msg.me .sup-b { background: color-mix(in srgb, var(--accent) 16%, var(--card2)); border-color: color-mix(in srgb, var(--accent) 30%, transparent); border-bottom-right-radius: 6px; }
.sup-msg.adm .sup-b { border-bottom-left-radius: 6px; }
.sup-msg small { font-size: 11.5px; color: var(--dim); }
.rel-card { margin-bottom: 12px; }
.rel-card .rel-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rel-card .rel-h b { font-size: 16px; font-weight: 800; }
.rel-v { font-size: 12.5px; font-weight: 800; padding: 4px 10px; border-radius: 999px; color: var(--accent-2); background: color-mix(in srgb, var(--accent) 14%, transparent); white-space: nowrap; }
.rel-v.new { color: var(--warn); background: color-mix(in srgb, var(--warn) 16%, transparent); }
.rel-m { font-size: 12.5px; color: var(--dim); margin-top: 6px; }
.rel-card p { margin: 10px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--muted); }
.sheet .rel-card { padding: 14px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); }
.join-card h3 { margin: 4px 0 6px; font-size: 20px; }
.join-card .muted { margin: 0 0 14px; line-height: 1.5; }
.join-card form { display: flex; flex-direction: column; gap: 10px; }
.join-card .f-label { margin: 4px 2px -4px; }
.join-ok { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; line-height: 1.45; color: var(--muted); margin-top: 4px; }
.join-ok input { margin-top: 2px; accent-color: var(--accent); width: 18px; height: 18px; flex: none; }

/* =====================================================================
   v0.2.0 — кабінет, налаштування, меню, вхід, оголошення
   Шкала заокруглень: 8 / 12 / 16 / 22 / 28 — вкладене завжди менше за батьківське.
   ===================================================================== */
:root { --r-xs: 8px; --r-s: 12px; --r-m: 16px; --r-l: 22px; --r-xl: 28px; --moss: rgba(168, 232, 112, .07); --moss-line: rgba(168, 232, 112, .18); }

/* ---------- вхід, пароль ---------- */
.login-hero.sm { margin-bottom: 10px; }
.login-hero.sm .login-frog { width: 72px; height: 72px; }
.login-hero.sm .brand-word { font-size: 26px; }
.lg-t { margin: 6px 0 6px; font-size: 20px; font-weight: 800; letter-spacing: -.01em; }
.lg-p { margin: 0 0 16px; line-height: 1.5; font-size: 14px; }
.lg-p b { color: var(--text); word-break: break-all; }
#login-form, #fg-form, #fc-form { display: flex; flex-direction: column; gap: 10px; }
.pw-wrap { position: relative; }
.pw-wrap .field { padding-right: 50px; }
.pw-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border-radius: var(--r-s); display: grid; place-items: center; color: var(--dim); }
.pw-eye:hover { color: var(--text); background: rgba(255, 255, 255, .05); }
.pw-meter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; align-items: center; margin: -2px 2px 2px; }
.pw-meter i { height: 4px; border-radius: 2px; background: var(--track); transition: background .25s; }
.pw-meter span { grid-column: 1 / -1; font-size: 12px; color: var(--dim); font-weight: 600; min-height: 16px; }
.pw-meter[data-s="1"] i:nth-child(-n+1) { background: var(--exp); }
.pw-meter[data-s="2"] i:nth-child(-n+2) { background: var(--warn); }
.pw-meter[data-s="3"] i:nth-child(-n+3) { background: var(--accent-2); }
.pw-meter[data-s="4"] i { background: var(--inc); }
.pw-meter[data-s="1"] span { color: var(--exp); }
.card .pw-wrap + .pw-meter, .sheet .pw-wrap + .pw-meter { margin-top: 6px; }
.card .pw-meter + .pw-wrap, .sheet .pw-meter + .pw-wrap { margin-top: 6px; }
.code-in { font-size: 22px; font-weight: 800; letter-spacing: .3em; text-align: center; font-variant-numeric: tabular-nums; }
.code-in::placeholder { letter-spacing: 0; font-size: 15px; font-weight: 600; }
.link-btn.block-c { display: flex; justify-content: center; width: 100%; margin-top: 0; }
.link-btn:disabled { color: var(--dim); }

/* ---------- тост трофея з хрестиком ---------- */
.toast-x { flex: none; width: 28px; height: 28px; border-radius: var(--r-xs); display: grid; place-items: center; color: var(--muted); margin-left: 2px; }
.toast-x:hover { color: var(--text); background: rgba(255, 255, 255, .08); }
#toast.ach { pointer-events: auto; }

/* ---------- головна: версія й оголошення ---------- */
.hello b { display: flex; align-items: center; gap: 8px; }
.ver-pill { flex: none; font-size: 11px; font-weight: 800; letter-spacing: .01em; padding: 3px 8px; border-radius: 99px; color: var(--accent-2); background: var(--moss); border: 1px solid var(--moss-line); line-height: 1.2; }
.ver-pill:hover { background: rgba(168, 232, 112, .14); }
.ann-wrap { display: grid; gap: 10px; margin: -4px 0 16px; }
.ann { display: flex; align-items: flex-start; gap: 12px; padding: 12px 12px 12px 14px; border-radius: var(--r-l); border: 1px solid var(--line); background: var(--card); }
.ann > .ico { margin-top: 1px; }
.ann-t { flex: 1; min-width: 0; }
.ann-t b { display: block; font-size: 14.5px; font-weight: 800; }
.ann-t p { margin: 3px 0 0; font-size: 13px; line-height: 1.45; color: var(--muted); }
.ann .btn { align-self: center; flex: none; }
.ann-update { background: linear-gradient(135deg, rgba(168, 232, 112, .12), rgba(168, 232, 112, .03)); border-color: var(--moss-line); }
.ann-warn { background: rgba(245, 192, 74, .07); border-color: rgba(245, 192, 74, .24); }
.ann-x { flex: none; width: 30px; height: 30px; border-radius: var(--r-xs); display: grid; place-items: center; color: var(--dim); }
.ann-x:hover { color: var(--text); background: rgba(255, 255, 255, .06); }

/* ---------- налаштування: телефон ---------- */
.set-index .me-card { margin-bottom: 12px; }
.set-index .set-attn { margin-bottom: 12px; }
.set-groups .li { padding-top: 13px; padding-bottom: 13px; }
.set-gi { width: 38px; height: 38px; flex: none; border-radius: var(--r-s); display: grid; place-items: center; color: var(--accent-2); background: var(--moss); border: 1px solid var(--moss-line); }
.set-out { margin-top: 12px; border-radius: var(--r-l); border: 1px solid var(--line); background: var(--card); color: var(--exp); font-weight: 800; justify-content: center; gap: 8px; }
.set-ver { text-align: center; color: var(--dim); font-size: 12px; font-weight: 700; margin: 18px 0 4px; }
.set-page > .list + .list, .set-page > .card + .list, .set-page > .list + .card { margin-top: 14px; }
.set-lead { color: var(--muted); font-size: 14px; line-height: 1.5; margin: -8px 2px 16px; max-width: 60ch; }
.card-t { margin: 0 0 12px; font-size: 16px; font-weight: 800; }
.cab-me { margin-bottom: 14px; }
.cab-export { display: flex; align-items: center; gap: 14px; margin-top: 14px; padding: 16px; border-radius: var(--r-l); background: linear-gradient(135deg, rgba(168, 232, 112, .09), rgba(255, 255, 255, .02)); border: 1px solid var(--moss-line); }
.cab-export .mid { flex: 1; min-width: 0; }
.cab-export b { font-size: 15px; font-weight: 800; }
.cab-export p { margin: 3px 0 0; font-size: 13px; line-height: 1.45; color: var(--muted); }
.cab-export .btn { flex: none; }
@media (max-width: 520px) { .cab-export { flex-wrap: wrap; } .cab-export .btn { width: 100%; } }
.li.dev { align-items: flex-start; }
.li.dev .t2 + .t2 { margin-top: 1px; }
.dev-at { flex: none; font-size: 12px; color: var(--dim); font-weight: 700; margin-top: 2px; }

/* перші кроки */
.onb { margin-bottom: 14px; padding: 14px; }
.onb-h { display: flex; align-items: flex-start; gap: 10px; margin: 0 2px 8px; }
.onb-h > div { flex: 1; }
.onb-h b { display: block; font-size: 15.5px; font-weight: 800; }
.onb-h small { color: var(--muted); font-size: 12.5px; font-weight: 700; }
.onb-l { display: grid; gap: 4px; }
.onb-i { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 8px; border-radius: var(--r-s); color: var(--text); text-align: left; }
.onb-i:hover { background: rgba(255, 255, 255, .04); }
.onb-i .mid { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.onb-i .t1 { font-weight: 800; font-size: 14px; } .onb-i .t2 { font-size: 12.5px; color: var(--muted); }
.onb-i > .i:last-child { color: var(--dim); }
.onb-c { width: 30px; height: 30px; flex: none; display: grid; place-items: center; }
.onb-i.done { opacity: .55; } .onb-i.done .onb-c { color: var(--inc); } .onb-i.done .t1 { text-decoration: line-through; text-decoration-color: rgba(255, 255, 255, .3); }

/* меню */
.mp-bar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: center; padding: 8px; border-radius: var(--r-xl); background: rgba(14, 17, 15, .7); border: 1px solid var(--line2); max-width: 420px; }
.mp-tab { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 2px 6px; border-radius: var(--r-m); color: var(--muted); font-size: 10.5px; font-weight: 700; min-width: 0; border: 1px dashed transparent; transition: background .15s, border-color .15s, color .15s; }
.mp-tab span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
button.mp-tab { border-color: var(--line2); }
button.mp-tab:hover { color: var(--text); }
.mp-tab.on { color: var(--text); border-style: solid; border-color: var(--accent-2); background: var(--moss); }
.mp-tab.on .i { color: var(--accent-2); }
.mp-tab.fixed { color: var(--dim); }
.mp-add { width: 46px; height: 46px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #97eb5e, #6ed833); opacity: .55; }
.mp-hint { color: var(--muted); font-size: 13px; margin: 12px 2px 14px; line-height: 1.45; }
.mp-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.mp-opt { position: relative; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--r-m); background: var(--card); border: 1px solid var(--line); color: var(--text); font-weight: 700; font-size: 14px; text-align: left; transition: border-color .15s, background .15s; }
.mp-opt:hover { border-color: var(--line2); }
.mp-opt .i { color: var(--muted); }
.mp-opt span { flex: 1; min-width: 0; }
.mp-opt i { font-style: normal; font-size: 11px; font-weight: 800; color: var(--dim); }
.mp-opt.used { opacity: .7; }
.mp-opt.on { border-color: var(--accent-2); background: var(--moss); }
.mp-opt.on .i, .mp-opt.on i { color: var(--accent-2); }

/* ---------- налаштування: комп'ютер — дві колонки ---------- */
.set-desk { display: grid; grid-template-columns: 248px minmax(0, 1fr); gap: 40px; align-items: start; }
.set-nav { position: sticky; top: 32px; display: flex; flex-direction: column; gap: 2px; }
.sn-me { display: flex; align-items: center; gap: 12px; padding: 4px 10px 18px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.sn-me .mid { min-width: 0; display: flex; flex-direction: column; }
.sn-me b { font-size: 15px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sn-me small { font-size: 12px; color: var(--dim); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sn-i { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r-s); color: var(--muted); font-weight: 700; font-size: 14px; width: 100%; text-align: left; transition: background .15s, color .15s; }
.sn-i span { flex: 1; }
.sn-i:hover { background: var(--card); color: var(--text); }
.sn-i.on { background: var(--moss); color: var(--text); box-shadow: inset 0 0 0 1px var(--moss-line); }
.sn-i.on .i { color: var(--accent-2); }
.sn-out { margin-top: 10px; color: var(--exp); opacity: .85; }
.sn-out:hover { opacity: 1; background: rgba(255, 107, 129, .07); color: var(--exp); }
.set-nav .set-ver { text-align: left; padding-left: 12px; margin-top: 14px; }
.set-pane { min-width: 0; }
.set-pane .back { display: none; }
.set-pane .narrow { max-width: 760px; margin: 0; }
.set-pane .narrow.grid-pg { max-width: none; }
.set-pane .top { margin-top: 0; }
@media (min-width: 1280px) { .set-desk { grid-template-columns: 264px minmax(0, 1fr); gap: 56px; } }

/* бокова панель: налаштування й профіль унизу */
.side .who { color: var(--muted); border-radius: var(--r-s); }
.side .who:hover { background: var(--card); color: var(--text); }
.side-set { margin-top: 10px; }

/* v0.2 — борги в одному місці, mono у фоні, регулярний з операції */
.debt-open { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; text-align: left; color: var(--text); border-radius: var(--r-s); padding: 2px; }
.debt-open:hover b { color: var(--accent-2); }
.debt-open .mid { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.debt-open small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.debt-v b.c-exp { color: var(--exp); } .debt-v b.c-inc { color: var(--inc); }
.debt-sum { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: var(--r-m); background: rgba(251, 146, 60, .08); border: 1px solid rgba(251, 146, 60, .22); }
.debt-sum b { font-size: 26px; font-weight: 800; color: #fdba74; letter-spacing: -.01em; }
.debt-sum.ok { background: rgba(52, 224, 161, .07); border-color: rgba(52, 224, 161, .22); } .debt-sum.ok b { color: var(--inc); font-size: 20px; }
.debt-sum small { color: var(--muted); font-size: 12.5px; font-weight: 600; }
.d-entry .d-r { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.d-entry .d-r b { font-size: 14.5px; }
.d-entry.repay .t1 { color: var(--muted); }
.dchip { font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 99px; background: var(--card2); color: var(--muted); white-space: nowrap; }
.dchip.ok { background: rgba(52, 224, 161, .12); color: var(--inc); }
.dchip.warn { background: rgba(245, 192, 74, .13); color: var(--gold); }
.dchip.bad { background: rgba(255, 111, 131, .12); color: var(--exp); }
.msync { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 10px 14px; border-radius: var(--r-m); font-size: 13px; font-weight: 700; color: var(--muted);
  background: rgba(168, 232, 112, .06); border: 1px solid var(--moss-line); }
.msync > .i { color: var(--accent-2); animation: msync-spin 1.4s linear infinite; flex: none; }
.msync span { flex: 1; min-width: 0; }
.msync b { color: var(--inc); font-size: 13px; }
@keyframes msync-spin { to { transform: rotate(360deg); } }
html.no-anim .msync > .i { animation: none; }
.rec-opts { margin-top: 10px; display: grid; gap: 10px; }
.rec-next { display: flex; align-items: center; gap: 12px; }
.rec-next span { flex: 1; font-size: 13.5px; font-weight: 700; color: var(--muted); }
.rec-next .field { width: auto; min-width: 170px; }
.rec-opts .hint { margin: 0; }

/* v0.2 — форма операції: вибір гаманця без прокрутки, дві колонки на ПК */
.wp-sel { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px 10px 10px; border-radius: var(--r-m); text-align: left; color: var(--text);
  background: color-mix(in srgb, var(--wc) 8%, rgba(255, 255, 255, .03)); border: 1.5px solid color-mix(in srgb, var(--wc) 45%, transparent); transition: background .15s; }
.wp-sel:hover { background: color-mix(in srgb, var(--wc) 13%, rgba(255, 255, 255, .03)); }
.wp-sel .wchip-i { background: var(--wc); color: #0b1310; }
.wp-sel .wchip-t { flex: 1; }
.wp-ch { flex: none; display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 800; color: var(--accent-2); }
.wp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.wp-grid .wchip { width: 100%; min-width: 0; }
.wp-grid .wchip-t b, .wp-grid .wchip-t small { overflow: hidden; text-overflow: ellipsis; }
.wp-g { grid-column: 1 / -1; font-size: 11.5px; font-weight: 800; color: var(--dim); margin: 4px 2px -2px; }
.wp-g:first-child { margin-top: 0; }
.tx-b > .tx-sec:first-child, .tx-b > .loan-seg:first-child { margin-top: 14px; }
.tx-b .fp-toggle { margin-top: 12px; }
@media (min-width: 960px) {
  .sheet:has(.tx-cols) { width: min(940px, calc(100vw - 64px)); }
  .tx-cols { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 0 28px; align-items: start; }
  .tx-a { position: sticky; top: 0; }
  .tx-b > .tx-sec:first-child, .tx-b > .loan-seg:first-child { margin-top: 0; }
  .tx-b { border-left: 1px solid var(--line); padding-left: 28px; min-height: 100%; }
  .sheet .qchips, .sheet .wchips { flex-wrap: wrap; overflow: visible; margin: 0; padding: 2px 0 4px; }
  .tx-a .amt2 { margin-top: 0; }
}
.wp-ch .i { transform: rotate(90deg); } .tx-cols { margin-top: 14px; } .tx-cols .amt2 { margin-top: 0; }
.rec-mini { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 4px; text-align: left; color: var(--text); border-top: 1px solid var(--line); }
.rec-mini:first-child { border-top: 0; }
.rec-mini > span:not(.ico) { flex: 1; min-width: 0; font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rec-mini small { color: var(--muted); font-size: 12.5px; font-weight: 600; flex: none; }
.rec-mini b { flex: none; min-width: 72px; text-align: right; font-size: 14px; }
.rec-mini:hover > span:not(.ico) { color: var(--accent-2); }
.rec-sep { font-size: 11.5px; font-weight: 800; color: var(--dim); margin: 10px 4px 2px; }
.rec-more { display: flex; justify-content: center; align-items: center; gap: 4px; padding: 8px 0 2px; font-size: 13px; font-weight: 800; }
/* покрокові інструкції інтеграцій */
.guide-lead { margin: 0 0 14px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.guide-lead b { color: var(--text); }
.gsteps { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 0; }
.gsteps li { display: flex; gap: 12px; position: relative; padding-bottom: 16px; }
.gsteps li:not(:last-child)::before { content: ''; position: absolute; left: 13px; top: 30px; bottom: 2px; width: 2px; border-radius: 1px; background: var(--line2); }
.gs-n { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 800; color: #0b1310; background: var(--accent-2); }
.gs-b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }
.gs-b > b { font-size: 15px; font-weight: 800; }
.gs-b .btn.sm { align-self: flex-start; }
.g-note { font-size: 13px; line-height: 1.5; color: var(--muted); }
.g-note b { color: var(--text); }
.gs-b .btn-row { display: flex; gap: 8px; } .gs-b .btn-row .btn { flex: 1; }

/* v0.3 — головна на ПК: дві рівні за змістом колонки, перші кроки, FAQ */
@media (min-width: 960px) {
  .home-grid.desk { grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr); gap: 24px; }
  .home-grid.desk > div > .section:first-child, .home-grid.desk > div > :first-child { margin-top: 0; }
  .hg-side > .section, .hg-side > .plaques, .hg-side > div { margin-top: 0; }
  .hg-side { display: flex; flex-direction: column; gap: 20px; }
  .hg-side .section { margin-top: 0; }
  .hg-side .plaques { margin: 0; }
  .hg-main > .section { margin-top: 24px; }
}
@media (min-width: 1500px) { .home-grid.desk { grid-template-columns: minmax(0, 1.6fr) minmax(360px, 1fr); gap: 28px; } }
.onb-bar { display: block; height: 4px; border-radius: 2px; background: var(--track); overflow: hidden; margin: 0 2px 10px; }
.onb-bar i { display: block; height: 100%; border-radius: 2px; background: var(--accent-2); }
.onb.home { border-color: var(--moss-line); background: linear-gradient(160deg, rgba(168, 232, 112, .08), rgba(28, 33, 30, .9) 60%); }
.faq { display: grid; gap: 8px; }
.faq-i { border-radius: var(--r-m); background: var(--card); border: 1px solid var(--line); overflow: hidden; }
.faq-i summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer; font-weight: 800; font-size: 14.5px; }
.faq-i summary::-webkit-details-marker { display: none; }
.faq-i summary span { flex: 1; }
.faq-i summary .i { color: var(--dim); transition: transform .2s; flex: none; }
.faq-i[open] summary .i { transform: rotate(90deg); color: var(--accent-2); }
.faq-i[open] { border-color: var(--line2); }
.faq-i p { margin: 0; padding: 0 16px 14px; color: var(--muted); font-size: 14px; line-height: 1.55; }
html.no-anim .faq-i summary .i { transition: none; }

/* ---------- 0.3: трофеї — на ПК дві колонки: зведення зліва, сітка трофеїв справа ---------- */
.ach-page { max-width: 680px; }
.ach-side { display: flex; flex-direction: column; gap: 12px; }
.ach-side .ach-hero, .ach-side .wr-banner { margin: 0; }
.ach-hint { margin: 0 2px; }
.ach-sum { display: none; }
.ach-next, .ach-last { display: flex; flex-direction: column; gap: 6px; }
.ach-next .group-t, .ach-last .group-t { margin: 4px 2px 2px; }
.ach-nx { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 16px; background: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .07); }
.ach-nx .mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.ach-nx b { font-size: 13px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ach-nx .bar { height: 4px; } .ach-nx .bar > i { background: var(--c); }
.ach-nx small { font-size: 12px; font-weight: 800; color: var(--c); }
.ach-ico.sm { width: 32px; height: 32px; border-radius: 11px; margin: 0; color: var(--c); background: color-mix(in srgb, var(--c) 16%, transparent); filter: none; }
.ach-sec { scroll-margin-top: 24px; }
@media (min-width: 960px) {
  .ach-page { max-width: none; }
  .ach-layout { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 32px; align-items: start; }
  .ach-side { position: sticky; top: 24px; }
  .ach-sum { display: flex; flex-direction: column; gap: 2px; padding: 8px; border-radius: 20px; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .07); }
  .ach-sum button { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; align-items: center; padding: 10px 12px; border-radius: 14px; background: none; border: 0; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
  .ach-sum button:hover { background: rgba(255, 255, 255, .05); }
  .ach-sum span { font-size: 13.5px; font-weight: 700; }
  .ach-sum b { font-size: 12.5px; color: var(--muted); font-weight: 800; }
  .ach-sum .bar { grid-column: 1 / -1; height: 4px; }
  .ach-sum .bar > i { background: linear-gradient(90deg, #f5a524, var(--gold-2)); }
  .ach-main .ach-sec:first-child .group-t { margin-top: 0; }
  .ach-main .ach-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
}

/* ---------- 0.3: меню — групи розділів і бічна панель ПК ---------- */
.mp-gt { font-size: 12px; font-weight: 800; color: var(--dim); margin: 14px 2px 8px; letter-spacing: .02em; }
.mp-hint + .mp-gt { margin-top: 0; }
.sd-wrap { display: grid; gap: 4px; margin-bottom: 18px; }
.sd-list { padding: 6px; display: flex; flex-direction: column; gap: 2px; max-width: 520px; }
.sd-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-m); min-height: 46px; }
.sd-row:hover { background: rgba(255, 255, 255, .03); }
.sd-row .sd-ico { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: rgba(255, 255, 255, .05); color: var(--muted); flex: none; }
.sd-row.on .sd-ico { background: var(--moss); color: var(--accent); }
.sd-row .sd-l { flex: 1; min-width: 0; font-weight: 700; font-size: 14px; }
.sd-row:not(.on):not(.fixed) .sd-l { color: var(--muted); }
.sd-row .icon-btn.sm { width: 30px; height: 30px; }
.sd-row .icon-btn:disabled { opacity: .25; pointer-events: none; }
.sd-row .switch { margin-left: 4px; }
.sd-fix { font-size: 12px; color: var(--dim); font-weight: 700; padding-right: 6px; }
.sd-row.fixed .sd-ico { color: var(--text); }
.sd-sep { font-size: 12px; font-weight: 800; color: var(--dim); padding: 12px 10px 4px; border-top: 1px solid var(--line); margin-top: 6px; }
.debts-lead { margin: 0 2px 12px; }
.sheet .debts-lead { margin-top: -6px; }

/* ---------- 0.3: Ревізія — що робиться само, а що вручну ---------- */
.recon2 .top { margin-bottom: 2px; }
.rv-lead { color: var(--muted); font-size: 14px; margin: 0 2px 14px; line-height: 1.45; }
.rv-hero { display: grid; grid-template-columns: auto 1fr; gap: 14px 16px; align-items: center; padding: 18px; border-radius: var(--r-xl, 24px);
  background: linear-gradient(135deg, rgba(52, 224, 161, .13), rgba(28, 33, 30, .9) 62%); border: 1px solid rgba(52, 224, 161, .24); }
.rv-hero.warn { background: linear-gradient(135deg, rgba(251, 191, 36, .13), rgba(28, 33, 30, .9) 62%); border-color: rgba(251, 191, 36, .26); }
.rv-hero.bad { background: linear-gradient(135deg, rgba(255, 107, 129, .15), rgba(28, 33, 30, .9) 62%); border-color: rgba(255, 107, 129, .3); }
.rv-hero.warn .rh-ico { background: rgba(251, 191, 36, .15); color: var(--warn); }
.rv-hero.bad .rh-ico { background: rgba(255, 107, 129, .15); color: var(--exp); }
.rv-hero-t b { font-size: 17px; font-weight: 800; display: block; line-height: 1.3; }
.rv-hero-t p { margin: 4px 0 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.rv-stats { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; }
.rv-stats > div { flex: 1 1 90px; padding: 10px 12px; border-radius: var(--r-m, 16px); background: rgba(0, 0, 0, .18); border: 1px solid rgba(255, 255, 255, .06); display: flex; flex-direction: column; gap: 1px; }
.rv-stats b { font-size: 22px; font-weight: 800; line-height: 1.1; }
.rv-stats small { font-size: 12px; color: var(--muted); font-weight: 700; }
.rv-how { display: grid; gap: 10px; margin: 14px 0 6px; }
.rv-lane { display: flex; gap: 12px; padding: 14px; border-radius: 20px; background: rgba(255, 255, 255, .03); border: 1px solid var(--line); }
.rv-lane .rv-ico { width: 40px; height: 40px; border-radius: 14px; display: grid; place-items: center; flex: none; }
.rv-lane.auto .rv-ico { background: rgba(125, 211, 252, .13); color: #7dd3fc; }
.rv-lane.man .rv-ico { background: rgba(168, 232, 112, .13); color: var(--accent, #a8e870); }
.rv-lane.off { opacity: .6; }
.rv-lane b { font-size: 15px; font-weight: 800; }
.rv-tag { margin-left: 8px; font-size: 11.5px; font-weight: 800; color: var(--muted); padding: 2px 8px; border-radius: 999px; background: rgba(255, 255, 255, .06); vertical-align: 2px; }
.rv-lane p { margin: 5px 0 6px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.rv-lane small { font-size: 12px; color: var(--dim); font-weight: 700; }
.rv-lane small a { color: var(--accent, #a8e870); text-decoration: none; }
.rv-sec { margin-top: 22px; }
.rv-sec > h3 { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 800; margin: 0 2px 12px; }
.rv-sec > h3 .i { color: var(--muted); }
.rv-chip { margin-left: auto; font-size: 11.5px; font-weight: 800; color: var(--muted); padding: 3px 9px; border-radius: 999px; background: rgba(255, 255, 255, .05); border: 1px solid var(--line); }
.rv-sec .group-t.sub:first-of-type { margin-top: 0; }
.rv-hf { margin: 0 0 10px; }
.rv-badge { display: inline-block; font-size: 10.5px; font-weight: 800; color: #7dd3fc; background: rgba(125, 211, 252, .12); padding: 1px 7px; border-radius: 999px; vertical-align: 1px; margin-left: 4px; }
@media (min-width: 720px) {
  .rv-how { grid-template-columns: 1fr 1fr; }
  .rv-hero { grid-template-columns: auto 1fr auto; }
  .rv-stats { grid-column: auto; flex-wrap: nowrap; }
  .rv-stats > div { flex: 0 0 auto; min-width: 92px; }
}
.rot-up, .rot-dn { display: grid; place-items: center; } .rot-up { transform: rotate(90deg); } .rot-dn { transform: rotate(-90deg); }

/* ---------- 0.3: аватарки ---------- */
.avatar.img { overflow: hidden; padding: 0; }
.avatar.img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.av-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); gap: 8px; margin-top: 6px; }
.av-opt { display: grid; place-items: center; padding: 4px; border-radius: 20px; background: none; border: 2px solid transparent; cursor: pointer; transition: border-color .15s, transform .15s var(--spring); }
.av-opt:hover { border-color: var(--line2); }
.av-opt:active { transform: scale(.94); }
.av-opt.on { border-color: var(--accent); background: var(--moss); }
.av-opt .avatar.lg { width: 52px; height: 52px; }
.av-hint { margin: 8px 2px 4px; }

/* ---------- 0.3.1: «Висушити ставок» ---------- */
.dz-t { color: var(--exp) !important; }
.card.dz { border-color: rgba(255, 107, 129, .3); background: linear-gradient(180deg, rgba(255, 107, 129, .07), rgba(28, 33, 30, .9)); }
.dz-h { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; }
.dz-h b { font-size: 15.5px; font-weight: 800; }
.dz-h p { margin: 4px 0 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.btn.dz-btn { background: #e5484d; border-color: #e5484d; color: #fff; font-weight: 800; }
.btn.dz-btn:hover:not(:disabled) { background: #f05a5f; }
.btn.dz-btn:disabled { background: rgba(229, 72, 77, .35); border-color: transparent; color: rgba(255, 255, 255, .75); cursor: not-allowed; }
.sheet-foot .btn.dz-btn { flex: 1; }
.dz-note { margin: 18px 2px 0; }
.dry-warn { display: flex; gap: 12px; padding: 14px; border-radius: 18px; background: rgba(255, 107, 129, .1); border: 1px solid rgba(255, 107, 129, .3); color: var(--exp); }
.dry-warn > .i { flex: none; margin-top: 2px; }
.dry-warn b { color: #ffd0d7; } .dry-warn p { margin: 4px 0 0; color: var(--text); font-size: 13.5px; line-height: 1.5; }
.dry-list { margin: 14px 0 0; padding-left: 20px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.dry-done { min-height: 100vh; display: grid; place-content: center; justify-items: center; gap: 12px; text-align: center; padding: 24px; }
.dry-done h1 { margin: 8px 0 0; } .dry-done p { color: var(--muted); max-width: 340px; margin: 0 0 8px; }
.priv { display: grid; gap: 14px; margin-top: 6px; }
.priv h4 { margin: 0 0 4px; font-size: 14.5px; font-weight: 800; }
.priv p { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.55; }
.kid-lim { display: flex; gap: 8px; align-items: center; padding: 9px 12px; margin: 8px 0 2px; border-radius: 14px; background: rgba(245, 192, 74, .1); border: 1px solid rgba(245, 192, 74, .25); color: #f5c04a; font-size: 12.5px; font-weight: 700; }

/* ---------- 0.3.3: доступи дитини ---------- */
.kid-tpl { display: grid; gap: 8px; }
.kid-tpl-b { display: flex; flex-direction: column; gap: 2px; text-align: left; padding: 11px 13px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); color: var(--text); cursor: pointer; }
.kid-tpl-b b { font-size: 14px; font-weight: 800; } .kid-tpl-b small { font-size: 12px; color: var(--muted); line-height: 1.4; }
.kid-tpl-b.on { border-color: var(--accent-2); background: var(--moss); }
.kid-lims { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px; }
.kid-lims label, .kid-row { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.kid-row { margin-top: 10px; }
.kid-al { display: grid; gap: 4px; padding: 12px; }
.kid-al .seg { margin-top: 10px; }
@media (min-width: 640px) { .kid-tpl { grid-template-columns: repeat(3, 1fr); } }
.solo-card { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 12px; border-color: rgba(168, 232, 112, .3); background: linear-gradient(135deg, rgba(168, 232, 112, .1), rgba(28, 33, 30, .9)); } .solo-card b { font-size: 15px; } .solo-card p { margin: 4px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }

/* ---------- 0.4.1: жабка-віджет підтримки ---------- */
.frog-fab { position: fixed; right: 10px; bottom: calc(96px + var(--safe-b)); z-index: 29; width: 76px; height: 84px; padding: 0; border: 0; background: none; box-shadow: none; cursor: pointer;
  display: grid; place-items: end center; transition: transform .2s var(--spring), opacity .2s; -webkit-tap-highlight-color: transparent; }
.frog-fab img { width: 76px; height: auto; display: block; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .55)); animation: frogBob 4s ease-in-out infinite; transform-origin: 50% 100%; }
.frog-fab:active { transform: scale(.92); }
.frog-fab:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 16px; }
.frog-dot { position: absolute; top: 4px; right: 6px; width: 14px; height: 14px; border-radius: 50%; background: var(--exp); border: 2px solid #0b0f0c; }
.frog-x { position: fixed; right: 6px; bottom: calc(174px + var(--safe-b)); z-index: 30; width: 24px; height: 24px; border-radius: 50%; padding: 0; display: grid; place-items: center;
  background: #1c221e; border: 1px solid var(--line2); color: var(--muted); cursor: pointer; }
/* згорнута жабка — маленький «язичок» зверху по центру, звисає з краю екрана й нічого не перекриває */
.frog-tab { position: fixed; top: 0; left: 50%; transform: translateX(-50%); z-index: 29; display: none; align-items: flex-end; justify-content: center;
  width: 42px; height: calc(15px + var(--safe-t)); padding: 0 0 2px; border-radius: 0 0 12px 12px; cursor: pointer;
  background: rgba(22, 28, 24, .9); border: 1px solid var(--line2); border-top: 0; box-shadow: 0 4px 12px rgba(0, 0, 0, .35);
  -webkit-tap-highlight-color: transparent; transition: height .2s var(--spring); }
.frog-tab::after { content: ''; position: absolute; inset: -6px -10px -10px; } /* більша зона дотику */
.frog-tab img { width: 16px; height: auto; display: block; }
.frog-tab:hover, .frog-tab:focus-visible { height: calc(22px + var(--safe-t)); }
html.frog-off .frog-fab, html.frog-off .frog-x { display: none; }
html.frog-off .frog-tab { display: flex; }
body.frog-here .frog-fab, body.frog-here .frog-x, body.frog-here .frog-tab, html.locked .frog-fab, html.locked .frog-x { display: none; }
@media (min-width: 960px) { .frog-fab { right: 26px; bottom: 22px; width: 88px; height: 96px; } .frog-fab img { width: 88px; } .frog-x { right: 20px; bottom: 116px; } }
.frog-tab-l { display: none; }
/* ПК: згорнута жабка — ширша «кишенька» з написом, жабка визирає з неї */
@media (min-width: 960px) {
  .frog-tab { width: auto; height: 40px; padding: 0 16px 0 10px; gap: 8px; align-items: center; overflow: hidden; border-radius: 0 0 18px 18px;
    background: linear-gradient(180deg, rgba(22, 30, 24, .96), rgba(30, 44, 30, .96)); border-color: rgba(123, 211, 74, .35);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .4), inset 0 -1px 0 rgba(123, 211, 74, .25); transition: height .25s var(--spring), box-shadow .25s; }
  .frog-tab::after { inset: 0; }
  .frog-tab img { width: 30px; align-self: flex-end; margin-bottom: -4px; animation: frogPeek 5s ease-in-out infinite; transform-origin: 50% 100%; }
  .frog-tab-l { display: block; font-size: 13px; font-weight: 700; color: var(--text); letter-spacing: -.01em; white-space: nowrap; }
  .frog-tab:hover, .frog-tab:focus-visible { height: 48px; box-shadow: 0 10px 28px rgba(0, 0, 0, .45), 0 0 0 1px rgba(123, 211, 74, .5), inset 0 -1px 0 rgba(123, 211, 74, .35); }
  .frog-tab:hover img { animation: frogHop .6s var(--spring) both; }
  html.frog-off .frog-tab { animation: tabDrop .5s var(--spring) both; }
}
@keyframes frogPeek { 0%, 62%, 100% { transform: translateY(0) rotate(0); } 70% { transform: translateY(-5px) rotate(-6deg); } 78% { transform: translateY(1px) rotate(4deg); } 86% { transform: translateY(-2px) rotate(0); } }
@keyframes frogHop { 0% { transform: translateY(0); } 45% { transform: translateY(-7px) scale(1.06); } 100% { transform: translateY(-2px); } }
@keyframes tabDrop { from { transform: translate(-50%, -100%); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .frog-fab img, .frog-tab img, html.frog-off .frog-tab { animation: none !important; } }
/* підтримка: головна кнопка зв'язку */
.help-cta { display: flex; align-items: center; gap: 14px; padding: 16px; margin-bottom: 14px; border-radius: 22px; text-decoration: none; color: var(--text);
  background: linear-gradient(135deg, rgba(168, 232, 112, .2), rgba(28, 33, 30, .92) 70%); border: 1px solid rgba(168, 232, 112, .4); box-shadow: 0 8px 26px rgba(168, 232, 112, .08); }
.help-cta .mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.help-cta b { font-size: 16px; font-weight: 800; } .help-cta small { color: var(--muted); font-size: 12.5px; line-height: 1.4; }
.help-cta > .i { color: var(--accent); flex: none; }
.help-cta img { border-radius: 14px; flex: none; }
.set-pane .back.keep { display: inline-flex; }
/* 0.5: рух коштів «Звідки і куди» + перенесений залишок в історії */
.card.flow { padding: 6px 14px 12px; }
.fl-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.fl-l { display: inline-flex; align-items: center; gap: 7px; min-width: 0; flex-wrap: wrap; }
.fl-l small { font-size: 12px; }
.fl-row.in .fl-l > svg { color: var(--inc); }
.fl-row.out .fl-l > svg { color: var(--exp); }
.fl-row.save .fl-l > svg { color: var(--gold); }
.fl-row.in b { color: var(--inc); }
.fl-row.start { color: var(--muted); }
.fl-row.start b { color: var(--text); }
.fl-row.end { border-bottom: 0; border-top: 1px solid var(--line2); margin-top: 2px; font-weight: 700; }
.fl-row.end b { font-size: 17px; }
.fl-people { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 0 0 9px 21px; margin-top: -3px; border-bottom: 1px solid var(--line); font-size: 12.5px; color: var(--muted); }
.fl-people span { display: inline-flex; align-items: center; gap: 5px; }
.fl-people b { color: var(--text); font-weight: 600; }
.card.flow .hint { margin: 10px 0 0; }
.tx-carry { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 14px; border: 1px dashed var(--line2); background: rgba(125, 211, 252, .05); }
.tx-carry .mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tx-carry small { color: var(--muted); font-size: 12px; }
.li .t2.rec-paid { display: flex; align-items: center; gap: 4px; color: var(--inc); margin-top: 2px; }
/* 0.6: святкове сповіщення про трофей */
.ach-pop { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 16px; pointer-events: none;
  background: radial-gradient(60% 45% at 50% 50%, color-mix(in srgb, var(--c) 20%, transparent), transparent 70%), rgba(4, 7, 5, .42); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: apFade .35s ease both; }
.ach-pop.out { animation: apFade .35s ease reverse both; }
.ach-pop.out .ap-card { animation: apOut .35s ease both; }
.ap-card { pointer-events: auto; cursor: pointer; position: relative; overflow: hidden; width: min(340px, 100%); padding: 26px 22px 20px; border-radius: 26px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--c) 30%, #141a16) 0%, #121714 62%), #121714;
  border: 1px solid color-mix(in srgb, var(--c) 55%, transparent);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .04) inset, 0 24px 70px rgba(0, 0, 0, .6), 0 0 60px color-mix(in srgb, var(--c) 45%, transparent);
  animation: apIn .6s var(--spring, cubic-bezier(.34, 1.56, .64, 1)) both, apPulse 1.6s ease-in-out .6s infinite; }
.ap-card::after { content: ''; position: absolute; inset: -40% auto -40% -60%; width: 45%; transform: rotate(20deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .16), transparent); animation: apShine 1.4s ease .45s both; pointer-events: none; }
.ap-x { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; padding: 0; cursor: pointer;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .1); color: var(--muted); z-index: 2; }
.ap-x:hover, .ap-x:focus-visible { color: var(--text); background: rgba(255, 255, 255, .14); }
.ap-badge { position: relative; width: 96px; height: 96px; display: grid; place-items: center; margin-bottom: 6px; }
.ap-rays { position: absolute; inset: -34px; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--c) 40%, transparent) 0 8deg, transparent 8deg 22deg);
  -webkit-mask: radial-gradient(circle, #000 18%, transparent 68%); mask: radial-gradient(circle, #000 18%, transparent 68%); animation: apSpin 6s linear infinite, apFade .6s ease both; }
.ap-glow { position: absolute; inset: 4px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--c) 70%, transparent), transparent 70%); filter: blur(10px); animation: apGlow 1.6s ease-in-out infinite; }
.ap-ico { position: relative; width: 84px; height: 84px; border-radius: 28px; display: grid; place-items: center; color: #10140f;
  background: linear-gradient(145deg, color-mix(in srgb, var(--c) 70%, #fff), var(--c));
  box-shadow: 0 10px 26px color-mix(in srgb, var(--c) 55%, transparent), inset 0 2px 0 rgba(255, 255, 255, .45);
  animation: apPop .7s var(--spring, cubic-bezier(.34, 1.56, .64, 1)) .1s both; }
.ap-sparks { position: absolute; inset: 0; }
.ap-sparks i { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); opacity: 0;
  animation: apSpark .9s ease-out calc(.25s + var(--t)) both; }
.ap-sparks i:nth-child(even) { width: 4px; height: 4px; background: #fff; }
.ap-k { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 800; color: var(--c); letter-spacing: .02em; animation: apUp .5s ease .2s both; }
.ap-t { font-size: 22px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; animation: apUp .5s ease .28s both; }
.ap-d { font-size: 13.5px; color: var(--muted); line-height: 1.4; max-width: 270px; animation: apUp .5s ease .36s both; }
.ap-more { margin-top: 4px; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 99px; background: rgba(255, 255, 255, .07); animation: apUp .5s ease .44s both; }
.ap-bar { display: block; width: 100%; height: 3px; margin-top: 14px; border-radius: 3px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.ap-bar > i { display: block; height: 100%; background: var(--c); transform-origin: left; animation: apTime 3s linear both; }
@keyframes apFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes apIn { from { opacity: 0; transform: translateY(24px) scale(.7); } to { opacity: 1; transform: none; } }
@keyframes apOut { to { opacity: 0; transform: translateY(-14px) scale(.92); } }
@keyframes apPulse { 0%, 100% { box-shadow: 0 0 0 1px rgba(255, 255, 255, .04) inset, 0 24px 70px rgba(0, 0, 0, .6), 0 0 50px color-mix(in srgb, var(--c) 35%, transparent); } 50% { box-shadow: 0 0 0 1px rgba(255, 255, 255, .04) inset, 0 24px 70px rgba(0, 0, 0, .6), 0 0 80px color-mix(in srgb, var(--c) 60%, transparent); } }
@keyframes apShine { from { left: -60%; } to { left: 130%; } }
@keyframes apSpin { to { transform: rotate(360deg); } }
@keyframes apGlow { 0%, 100% { opacity: .7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.15); } }
@keyframes apPop { 0% { transform: scale(0) rotate(-25deg); } 70% { transform: scale(1.12) rotate(6deg); } 100% { transform: none; } }
@keyframes apSpark { 0% { opacity: 1; transform: rotate(var(--a)) translateY(0) scale(1); } 100% { opacity: 0; transform: rotate(var(--a)) translateY(calc(-1 * var(--d))) scale(.4); } }
@keyframes apUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes apTime { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) { .ach-pop *, .ach-pop { animation-duration: .01ms !important; animation-iteration-count: 1 !important; } .ap-bar > i { animation: apTime 3s linear both !important; } }
/* ===== 0.6: Mono 2 — «Що це?», ставок і своє окремо ===== */
.m2-page { --fam: #a8e870; --own: #a78bfa; }
.mono-card.jar { background: linear-gradient(140deg, rgba(245, 192, 74, .16), rgba(245, 192, 74, .04)); border-color: rgba(245, 192, 74, .3); }
.mono-card.jar .mc-t { color: var(--gold-2, #f5c04a); display: inline-flex; align-items: center; gap: 5px; }
.mono-card small { display: inline-flex; align-items: center; gap: 4px; }
.m2-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border-radius: 16px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); margin: 12px 0 4px; }
.m2-tabs button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 6px; border-radius: 12px; font: inherit; font-size: 13.5px; font-weight: 800; color: var(--muted); background: none; border: 0; cursor: pointer; }
.m2-tabs button b { min-width: 20px; padding: 1px 6px; border-radius: 99px; font-size: 11.5px; background: rgba(255, 255, 255, .08); color: var(--text); }
.m2-tabs button.on { background: rgba(255, 255, 255, .09); color: var(--text); }
.m2-tabs .t-family.on { color: var(--fam); box-shadow: inset 0 0 0 1px rgba(168, 232, 112, .35); } .m2-tabs .t-family.on b { background: rgba(168, 232, 112, .2); color: var(--fam); }
.m2-tabs .t-personal.on { color: var(--own); box-shadow: inset 0 0 0 1px rgba(167, 139, 250, .4); } .m2-tabs .t-personal.on b { background: rgba(167, 139, 250, .2); color: var(--own); }
.m2-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 14px 2px 4px; font-size: 12.5px; font-weight: 800; color: var(--muted); }
.m2-sec { margin-top: 10px; }
.m2-st { display: flex; align-items: center; gap: 8px; margin: 12px 2px 2px; padding: 8px 12px; border-radius: 12px; font-size: 13px; font-weight: 800; }
.m2-sec.fam .m2-st { color: var(--fam); background: rgba(168, 232, 112, .07); }
.m2-sec.own .m2-st { color: var(--own); background: rgba(167, 139, 250, .08); }
.m2-st b { margin-left: auto; font-size: 12px; opacity: .85; }
.m2-scope { display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px 1px 6px; border-radius: 99px; font-size: 10.5px; font-weight: 800; vertical-align: 1px; }
.m2-scope.fam { color: var(--fam, #a8e870); background: rgba(168, 232, 112, .14); }
.m2-scope.own { color: var(--own, #a78bfa); background: rgba(167, 139, 250, .16); }
.mi.m2 { position: relative; padding: 14px 14px 12px 16px; gap: 12px; overflow: hidden; }
.mi.m2::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; }
.mi.m2.fam::before { background: var(--fam); } .mi.m2.own::before { background: var(--own); }
.mi.m2 .mi-top small { white-space: normal; display: block; line-height: 1.5; }
.m2-amt { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: none; }
.m2-amt b { font-size: 16px; font-weight: 800; }
.m2-amt small { font-size: 11.5px; color: var(--muted); font-weight: 700; }
.m2-amt.big b { font-size: 26px; letter-spacing: -.02em; }
.m2-pick { width: 100%; display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 14px; font: inherit; color: var(--text); cursor: pointer; text-align: left;
  background: color-mix(in srgb, var(--tc) 9%, transparent); border: 1px solid color-mix(in srgb, var(--tc) 35%, transparent); }
.m2-ti { width: 34px; height: 34px; flex: none; border-radius: 11px; display: grid; place-items: center; color: var(--tc); background: color-mix(in srgb, var(--tc) 16%, transparent); }
.m2-tt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.m2-tt small { font-size: 11.5px; font-weight: 700; color: var(--muted); }
.m2-tt b { font-size: 14.5px; font-weight: 800; }
.m2-chg { display: inline-flex; align-items: center; gap: 3px; font-size: 12.5px; font-weight: 800; color: var(--accent-2, #a8e870); flex: none; }
.m2-qh { font-size: 13px; font-weight: 800; color: var(--muted); margin-bottom: 8px; }
.m2-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.m2-tile { position: relative; display: flex; align-items: flex-start; gap: 10px; padding: 11px; border-radius: 14px; text-align: left; font: inherit; color: var(--text); cursor: pointer;
  background: rgba(255, 255, 255, .03); border: 1px solid var(--line); transition: background .15s, border-color .15s, transform .1s; }
.m2-tile:hover { background: rgba(255, 255, 255, .06); }
.m2-tile:active { transform: scale(.98); }
.m2-tile.on { background: color-mix(in srgb, var(--tc) 12%, transparent); border-color: color-mix(in srgb, var(--tc) 55%, transparent); }
.m2-tile .m2-ti { width: 32px; height: 32px; }
.m2-tile .m2-tt b { font-size: 13.5px; line-height: 1.25; }
.m2-tile .m2-tt small { font-size: 11.5px; font-weight: 600; line-height: 1.35; }
.m2-ok { position: absolute; top: 8px; right: 8px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; color: #10140f; background: var(--tc); }
.m2-fields { display: flex; flex-direction: column; gap: 10px; }
.m2-fields:empty { display: none; }
.m2-f { display: flex; flex-direction: column; gap: 5px; margin: 0; }
.m2-f > span:first-child { font-size: 12px; font-weight: 800; color: var(--muted); }
.m2-f .mi-sel { width: 100%; }
.mi-sel.need { border-color: rgba(242, 193, 78, .55); color: var(--gold-2, #f5c04a); }
.m2-in { display: flex; align-items: center; gap: 4px; padding: 0 4px 0 12px; border-radius: 12px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); }
.m2-in input { flex: 1; min-width: 0; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--text); background: none; border: 0; padding: 9px 0; outline: none; }
.m2-in:focus-within { border-color: var(--line2); }
.m2-seg { display: flex; flex-wrap: wrap; gap: 4px; padding: 3px; border-radius: 13px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); }
.m2-seg button { flex: 1 1 auto; font: inherit; font-size: 13px; font-weight: 800; color: var(--muted); padding: 8px 10px; border-radius: 10px; background: none; border: 0; cursor: pointer; white-space: nowrap; }
.m2-seg button.on { color: #10140f; background: var(--accent, #7fd34e); }
.m2-none { font-size: 12.5px; color: var(--muted); font-weight: 600; margin: 0; }
.m2-res { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, .035); border: 1px dashed var(--line2); }
.m2-rk { font-size: 11.5px; font-weight: 800; color: var(--muted); }
.m2-res b { font-size: 14px; font-weight: 800; }
.m2-res small { font-size: 12.5px; color: var(--muted); font-weight: 600; line-height: 1.45; }
.m2-acts { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.m2-acts > :first-child { margin-right: auto; }
.md-row .m2-scope { flex: none; }
/* ПК: черга ліворуч, редактор праворуч */
.m2-page.desk { max-width: 1240px; }
.m2-top { display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: 6px; }
.m2-page.desk .mono-cards { flex-wrap: wrap; overflow: visible; margin-bottom: 0; }
.m2-page.desk .mono-card { min-width: 200px; }
.m2-grid { display: grid; grid-template-columns: minmax(360px, 440px) 1fr; gap: 22px; align-items: start; }
.m2-list .mono-day { margin: 12px 4px 6px; }
.m2-row { position: relative; width: 100%; display: flex; align-items: center; gap: 11px; padding: 11px 12px 11px 14px; margin-bottom: 6px; border-radius: 14px; text-align: left; font: inherit; color: var(--text); cursor: pointer;
  background: var(--card); border: 1px solid var(--line); overflow: hidden; transition: background .15s, border-color .15s; }
.m2-row::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; }
.m2-row.fam::before { background: var(--fam); } .m2-row.own::before { background: var(--own); }
.m2-row:hover { background: var(--card2); }
.m2-row.on { background: rgba(255, 255, 255, .08); border-color: var(--line2); box-shadow: 0 0 0 1px rgba(255, 255, 255, .06); }
.m2-row .mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.m2-row .mid b { font-size: 14px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m2-row .mid small { font-size: 12px; color: var(--muted); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m2-ri { width: 32px; height: 32px; flex: none; border-radius: 10px; display: grid; place-items: center; color: var(--tc); background: color-mix(in srgb, var(--tc) 15%, transparent); }
.m2-row .m2-amt b { font-size: 14.5px; }
.m2-need { color: var(--gold-2, #f5c04a) !important; }
.m2-side { position: sticky; top: 16px; }
.m2-pane { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 20px 22px; border-radius: 22px; background: var(--card); border: 1px solid var(--line2); overflow: hidden; }
.m2-pane::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; }
.m2-pane.fam::before { background: var(--fam); } .m2-pane.own::before { background: var(--own); }
.m2-pane.empty { padding: 30px; }
.m2-ph { display: flex; align-items: flex-start; gap: 14px; }
.m2-ph .mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.m2-ph h2 { margin: 2px 0 0; font-size: 21px; letter-spacing: -.02em; }
.m2-ph small { color: var(--muted); font-size: 12.5px; font-weight: 600; }
.m2-pane .m2-tiles { grid-template-columns: repeat(3, 1fr); }
.m2-pane .m2-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.m2-pane .m2-fields > .m2-note, .m2-pane .m2-fields > .m2-f:has(.m2-seg) { grid-column: 1 / -1; }
.m2-pane .m2-acts .btn { padding: 11px 20px; font-size: 14px; }
.m2-pos { margin: 0; font-size: 12px; color: var(--muted); font-weight: 600; text-align: right; }
@media (max-width: 1180px) { .m2-pane .m2-tiles { grid-template-columns: 1fr 1fr; } }
@media (max-width: 380px) { .m2-tiles { grid-template-columns: 1fr; } }
.m2-links { display: inline-flex; gap: 12px; }
.m2-links .link-btn { font-size: 12.5px; color: var(--muted); padding: 6px 0; }
.m2-links .link-btn:hover { color: var(--text); }
.m2-btns { display: inline-flex; align-items: center; gap: 12px; margin-left: auto; }
@media (max-width: 959px) {
  .mi.m2 .m2-acts { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; }
  .mi.m2 .m2-acts > :first-child:empty { display: none; }
  .mi.m2 .m2-links { grid-column: 2; justify-self: end; }
  .mi.m2 .m2-btns { grid-column: 1 / -1; justify-content: flex-end; }
  .mi.m2 .m2-btns .btn { padding: 10px 18px; }
  .mi.m2 .m2-fields { gap: 8px; }
  .mi.m2 .m2-f > span:first-child { font-size: 11.5px; }
}
.m2-chg .i, .m2-chg svg { transform: rotate(90deg); }
.m2-tile .m2-tt { padding-right: 14px; }
@media (max-width: 959px) {
  .mi.m2 .m2-tiles { grid-template-columns: 1fr; gap: 6px; }
  .mi.m2 .m2-tile { align-items: center; padding: 9px 11px; }
  .mi.m2 .m2-tile .m2-tt small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mi.m2 .m2-ok { top: 50%; margin-top: -9px; right: 11px; }
  .mi.m2 .m2-tile .m2-tt { padding-right: 24px; }
}
.m2-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.m2-tile { min-width: 0; }
@media (max-width: 959px) { .mi.m2 .m2-tiles { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 960px) { .m2-pane .m2-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 960px) and (max-width: 1180px) { .m2-pane .m2-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }