/* ============================================================
   Corta Admin v2 — «Точный прибор»
   Дизайн-система: почти монохром + один индиго-акцент,
   hairline-границы, motion 80–200ms, клавиатура — первична.
   ============================================================ */

/* ---------- токены: светлая тема ---------- */
:root, :root[data-theme="light"] {
  color-scheme: light;
  --bg-app:      oklch(0.972 0.003 255);
  --bg-surface:  oklch(0.993 0.001 255);
  --bg-raised:   oklch(1 0 0);
  --bg-inset:    oklch(0.958 0.004 255);
  --bg-hover:    oklch(0.962 0.005 258);
  --bg-active:   oklch(0.945 0.007 258);
  --bg-selected: oklch(0.950 0.022 264);
  --border-hairline: oklch(0.905 0.005 255);
  --border-strong:   oklch(0.845 0.007 255);
  --text-1:        oklch(0.235 0.012 260);
  --text-2:        oklch(0.455 0.014 260);
  --text-3:        oklch(0.605 0.012 260);
  --text-disabled: oklch(0.720 0.008 260);
  --accent:        oklch(0.545 0.190 264);
  --accent-hover:  oklch(0.505 0.198 264);
  --accent-active: oklch(0.470 0.200 264);
  --accent-fg:     oklch(0.500 0.190 264);
  --accent-subtle: oklch(0.945 0.026 264);
  --on-accent:     oklch(0.990 0.005 264);
  --success:        oklch(0.545 0.145 155);
  --success-text:   oklch(0.430 0.130 155);
  --success-subtle: oklch(0.955 0.035 155);
  --warn:           oklch(0.545 0.125 80);
  --warn-text:      oklch(0.450 0.110 80);
  --warn-subtle:    oklch(0.962 0.045 90);
  --danger:         oklch(0.525 0.190 27);
  --danger-text:    oklch(0.440 0.180 27);
  --danger-subtle:  oklch(0.958 0.026 22);
  --focus-ring: oklch(0.545 0.190 264 / 0.45);
  --scrim:      oklch(0.220 0.010 260 / 0.42);
  --sh-card: 0 1px 2px oklch(0.2 0.01 260 / 0.04);
  --sh-pop:  0 4px 12px oklch(0.2 0.01 260 / 0.08);
  --sh-modal:0 16px 48px -12px oklch(0.2 0.01 260 / 0.22);
}
/* ---------- токены: тёмная тема ---------- */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  color-scheme: dark;
  --bg-app:      oklch(0.178 0.008 262);
  --bg-surface:  oklch(0.208 0.009 262);
  --bg-raised:   oklch(0.243 0.010 262);
  --bg-inset:    oklch(0.158 0.008 262);
  --bg-hover:    oklch(0.238 0.010 262);
  --bg-active:   oklch(0.262 0.011 262);
  --bg-selected: oklch(0.272 0.032 264);
  --border-hairline: oklch(0.282 0.010 262);
  --border-strong:   oklch(0.345 0.012 262);
  --text-1:        oklch(0.930 0.005 260);
  --text-2:        oklch(0.715 0.010 260);
  --text-3:        oklch(0.560 0.010 260);
  --text-disabled: oklch(0.435 0.008 260);
  --accent:        oklch(0.588 0.185 264);
  --accent-hover:  oklch(0.635 0.175 264);
  --accent-active: oklch(0.555 0.190 264);
  --accent-fg:     oklch(0.745 0.125 264);
  --accent-subtle: oklch(0.275 0.048 264);
  --on-accent:     oklch(0.985 0.005 264);
  --success:        oklch(0.720 0.145 155);
  --success-text:   oklch(0.800 0.140 155);
  --success-subtle: oklch(0.262 0.042 155);
  --warn:           oklch(0.785 0.130 85);
  --warn-text:      oklch(0.840 0.120 90);
  --warn-subtle:    oklch(0.268 0.048 85);
  --danger:         oklch(0.675 0.185 25);
  --danger-text:    oklch(0.760 0.150 25);
  --danger-subtle:  oklch(0.262 0.045 25);
  --focus-ring: oklch(0.745 0.125 264 / 0.55);
  --scrim:      oklch(0.090 0.005 260 / 0.58);
  --sh-card: none;
  --sh-pop:  0 4px 12px oklch(0.1 0.005 260 / 0.35);
  --sh-modal:0 16px 48px -12px oklch(0.1 0.005 260 / 0.6);
} }
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg-app:      oklch(0.178 0.008 262);
  --bg-surface:  oklch(0.208 0.009 262);
  --bg-raised:   oklch(0.243 0.010 262);
  --bg-inset:    oklch(0.158 0.008 262);
  --bg-hover:    oklch(0.238 0.010 262);
  --bg-active:   oklch(0.262 0.011 262);
  --bg-selected: oklch(0.272 0.032 264);
  --border-hairline: oklch(0.282 0.010 262);
  --border-strong:   oklch(0.345 0.012 262);
  --text-1:        oklch(0.930 0.005 260);
  --text-2:        oklch(0.715 0.010 260);
  --text-3:        oklch(0.560 0.010 260);
  --text-disabled: oklch(0.435 0.008 260);
  --accent:        oklch(0.588 0.185 264);
  --accent-hover:  oklch(0.635 0.175 264);
  --accent-active: oklch(0.555 0.190 264);
  --accent-fg:     oklch(0.745 0.125 264);
  --accent-subtle: oklch(0.275 0.048 264);
  --on-accent:     oklch(0.985 0.005 264);
  --success:        oklch(0.720 0.145 155);
  --success-text:   oklch(0.800 0.140 155);
  --success-subtle: oklch(0.262 0.042 155);
  --warn:           oklch(0.785 0.130 85);
  --warn-text:      oklch(0.840 0.120 90);
  --warn-subtle:    oklch(0.268 0.048 85);
  --danger:         oklch(0.675 0.185 25);
  --danger-text:    oklch(0.760 0.150 25);
  --danger-subtle:  oklch(0.262 0.045 25);
  --focus-ring: oklch(0.745 0.125 264 / 0.55);
  --scrim:      oklch(0.090 0.005 260 / 0.58);
  --sh-card: none;
  --sh-pop:  0 4px 12px oklch(0.1 0.005 260 / 0.35);
  --sh-modal:0 16px 48px -12px oklch(0.1 0.005 260 / 0.6);
}

/* ---------- motion-токены ---------- */
:root {
  --t-hover: 80ms; --t-fade: 120ms; --t-move: 160ms; --t-enter: 200ms; --t-money: 480ms;
  --ease-out: cubic-bezier(0.25, 0, 0, 1);
  --ease-in:  cubic-bezier(0.5, 0, 0.75, 0);
  --spring-pop: linear(0, 0.36 6.9%, 0.65 13.7%, 0.866 20.6%, 0.985 27.5%, 1.035 35%, 1.043 43.5%, 1.021 57.4%, 1.005 72.5%, 1);
  --spring-slide: linear(0, 0.55 10%, 0.88 20%, 1.02 32%, 1.03 41%, 1.01 60%, 1);
  --r-1: 4px; --r-2: 6px; --r-3: 8px; --r-4: 10px; --r-full: 999px;
}

/* ---------- базис ---------- */
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:var(--bg-app);color:var(--text-1);
  font:13px/1.5 -apple-system,"Segoe UI Variable Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--accent-subtle)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:5px;border:2px solid var(--bg-app)}
::-webkit-scrollbar-track{background:transparent}
a{color:var(--accent-fg)}
.mono{font-family:"Cascadia Mono",ui-monospace,Consolas,monospace;font-size:11.5px;color:var(--text-3)}
.mut{color:var(--text-3)}
.mut2{color:var(--text-2)}
.num{text-align:right;font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
.cur{font-size:.85em;color:var(--text-3)}
.hide{display:none!important}
.row{display:flex;gap:8px;align-items:center}
.row.wrap{flex-wrap:wrap}
.grow{flex:1;min-width:0}
kbd{font:10.5px/1 "Cascadia Mono",ui-monospace,Consolas,monospace;background:var(--bg-inset);border:1px solid var(--border-hairline);border-bottom-width:2px;border-radius:var(--r-1);padding:2px 5px;color:var(--text-2)}

/* ---------- формы ---------- */
button{font:inherit;font-weight:600;cursor:pointer;border-radius:var(--r-2);border:1px solid var(--border-hairline);background:var(--bg-surface);padding:6px 12px;color:var(--text-1);position:relative;transition:background var(--t-hover) linear,border-color var(--t-fade) var(--ease-out),color var(--t-fade) linear,transform 70ms linear}
button:hover:not(:disabled){background:var(--bg-hover)}
button:active:not(:disabled){transform:scale(0.985)}
button:not(:active){transition:background var(--t-hover) linear,border-color var(--t-fade) var(--ease-out),color var(--t-fade) linear,transform 180ms var(--spring-pop)}
button:disabled{opacity:.5;cursor:not-allowed}
button.pri{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
button.pri:hover:not(:disabled){background:var(--accent-hover);border-color:var(--accent-hover)}
button.pri:active:not(:disabled){background:var(--accent-active)}
button.dng{color:var(--danger-text);border-color:color-mix(in oklch,var(--danger) 30%,var(--border-hairline))}
button.dng:hover:not(:disabled){background:var(--danger-subtle)}
button.ghost{border-color:transparent;background:transparent;color:var(--text-2)}
button.ghost:hover:not(:disabled){background:var(--bg-hover);color:var(--text-1)}
button.sm{padding:3px 9px;font-size:12px}
/* взведённая кнопка: фитиль догорает 5 секунд */
button.armed{background:var(--accent-active);border-color:var(--accent-active);color:var(--on-accent);overflow:hidden}
button.armed.dngarm{background:var(--danger);border-color:var(--danger)}
button.armed .drain{position:absolute;left:0;bottom:0;height:2px;width:100%;background:oklch(1 0 0/.55);transform-origin:left;animation:drain 5s linear forwards}
@keyframes drain{to{transform:scaleX(0)}}
input,select,textarea{font:inherit;padding:6px 10px;border:1px solid var(--border-strong);border-radius:var(--r-2);background:var(--bg-raised);color:var(--text-1);width:100%;transition:border-color var(--t-fade) var(--ease-out)}
input::placeholder{color:var(--text-3)}
:is(input,select,textarea,button,a,[tabindex]):focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;transition:outline-color var(--t-fade) var(--ease-out)}
label{display:block;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);margin:0 0 4px}
.f{margin-bottom:12px}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* ---------- карточки / таблицы ---------- */
.card{background:var(--bg-surface);border:1px solid var(--border-hairline);border-radius:var(--r-3);box-shadow:var(--sh-card);margin-bottom:16px}
.card>h3{margin:0;padding:10px 14px;border-bottom:1px solid var(--border-hairline);font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);display:flex;justify-content:space-between;align-items:center;gap:8px}
.card>.body{padding:16px}
table{width:100%;border-collapse:collapse}
th{text-align:left;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3);padding:6px 12px;border-bottom:1px solid var(--border-strong);white-space:nowrap}
td{padding:6px 12px;border-bottom:1px solid var(--border-hairline);vertical-align:middle;height:33px}
tbody tr{transition:background var(--t-hover) linear}
tbody tr:hover{background:var(--bg-hover);transition-duration:var(--t-hover)}
tbody tr:not(:hover){transition-duration:var(--t-move)}
tbody tr:last-child td{border-bottom:none}
tr.fresh td{animation:freshRow 1.2s var(--ease-out) forwards}
@keyframes freshRow{0%,25%{background:var(--success-subtle)}100%{background:transparent}}
tr.fresh.spend td{animation-name:freshRowA}
@keyframes freshRowA{0%,25%{background:var(--accent-subtle)}100%{background:transparent}}

/* ---------- бейджи ---------- */
.badge{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:var(--r-full);font-size:11px;font-weight:600;letter-spacing:.02em;white-space:nowrap}
.badge::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}
.badge.nod::before{display:none}
.b-ok{background:var(--success-subtle);color:var(--success-text)}
.b-warn{background:var(--warn-subtle);color:var(--warn-text)}
.b-err{background:var(--danger-subtle);color:var(--danger-text)}
.b-mut{background:var(--bg-inset);color:var(--text-2)}
.b-acc{background:var(--accent-subtle);color:var(--accent-fg)}
.buhsum{display:grid;grid-template-columns:repeat(auto-fit,minmax(136px,1fr));gap:10px 16px}
.buhsum .k{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
.buhsum .v{font-size:17px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.01em;margin-top:2px}
.buhsum .s{font-size:11.5px;color:var(--text-2);margin-top:1px}
.ctlsm{width:auto;padding:5px 8px;font-size:12.5px}   /* компактные поля периода и БИН; на телефоне их возвращает к 16px мобильный слой */
.sttbl{overflow:auto;max-height:40vh}                /* таблица выписки: на десктопе сводка остаётся видна */

/* ---------- header ---------- */
#app{display:flex;flex-direction:column;height:100%}
header.top{display:flex;align-items:center;gap:12px;padding:0 16px;height:52px;background:var(--bg-surface);border-bottom:1px solid var(--border-hairline);flex-shrink:0}
.brand{font-weight:700;letter-spacing:-.01em;font-size:15px}
.brand em{font-style:normal;color:var(--accent-fg)}
nav.tabs{display:flex;gap:2px;margin-left:8px}
nav.tabs button{border:none;background:none;padding:5px 12px;border-radius:var(--r-full);color:var(--text-2);font-weight:600;font-size:13px}
nav.tabs button:hover{background:var(--bg-hover);color:var(--text-1)}
nav.tabs button.on{background:var(--bg-selected);color:var(--accent-fg)}
nav.tabs .cnt{display:inline-block;min-width:16px;text-align:center;margin-left:5px;padding:0 4px;border-radius:var(--r-full);font-size:10.5px;background:var(--warn-subtle);color:var(--warn-text);font-variant-numeric:tabular-nums}
#ttl{font-variant-numeric:tabular-nums;font-size:12px;padding:3px 9px;border-radius:var(--r-full);background:var(--bg-inset);color:var(--text-2);cursor:pointer;border:1px solid transparent;transition:background var(--t-fade) linear,color var(--t-fade) linear}
#ttl.w{background:var(--warn-subtle);color:var(--warn-text)}
#ttl.d{background:var(--danger-subtle);color:var(--danger-text)}
.icobtn{width:30px;height:30px;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--r-2)}
.icobtn svg{width:16px;height:16px;stroke:var(--text-2);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.icobtn:hover svg{stroke:var(--text-1)}
.icobtn .jcnt{position:absolute;top:-4px;right:-4px;min-width:15px;height:15px;line-height:15px;text-align:center;border-radius:var(--r-full);font-size:9.5px;background:var(--accent);color:var(--on-accent);padding:0 3px;font-variant-numeric:tabular-nums}

/* ---------- layout ---------- */
main{flex:1;overflow:auto;padding:16px;scroll-padding-top:60px}
#view{view-transition-name:view}
.split{display:grid;grid-template-columns:340px 1fr;gap:16px;align-items:start}
@media(max-width:1000px){.split{grid-template-columns:1fr}}
::view-transition-old(view){animation:vtOut 90ms var(--ease-in) both}
::view-transition-new(view){animation:vtIn 160ms var(--ease-out) both}
@keyframes vtOut{to{opacity:0}}
@keyframes vtIn{from{opacity:0;transform:translateY(4px)}}
/* Подсветку ведёт сама активная кнопка: её снимок содержит и фон, и
   подпись, поэтому текст не может остаться под плашкой. Отдельным
   слоем плашку делать нельзя — именованная группа рисуется ПОВЕРХ
   снимка страницы и перекрывает подпись на всё время перехода. */
::view-transition-group(navpill){animation-duration:280ms;animation-timing-function:var(--spring-slide)}

/* Солнце ↔ луна: не подмена картинки, а разворот. Имя перехода
   ставится из JS только на время самой смены темы — иначе кнопка
   вылезала бы из общего снимка и крутилась на каждом переключении
   раздела. */
::view-transition-old(themeico){animation:icoSpinOut 280ms var(--ease-in) both;transform-origin:50% 50%}
::view-transition-new(themeico){animation:icoSpinIn 280ms var(--ease-out) both;transform-origin:50% 50%}
@keyframes icoSpinOut{to{opacity:0;transform:rotate(-110deg) scale(.35)}}
@keyframes icoSpinIn{from{opacity:0;transform:rotate(110deg) scale(.35)}}

/* галочка в тосте рисуется штрихом, а не появляется целиком */
.toast .tic svg path{stroke-dasharray:16;stroke-dashoffset:16;
  animation:drawIco 320ms var(--ease-out) 70ms forwards}
@keyframes drawIco{to{stroke-dashoffset:0}}
/* Журнал: строчки «дописываются» при наведении. Длина трёх линий 18,
   поэтому dasharray 20 в покое рисует их сплошными. */
#jbtn svg path:last-child{stroke-dasharray:20}
#jbtn:hover svg path:last-child{animation:drawLines 320ms var(--ease-out)}
@keyframes drawLines{from{stroke-dashoffset:20}to{stroke-dashoffset:0}}

/* ---------- список тенантов ---------- */
.chipsrow{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.chip{padding:2px 10px;border-radius:var(--r-full);font-size:11.5px;font-weight:600;border:1px solid var(--border-hairline);background:var(--bg-surface);color:var(--text-2);cursor:pointer;transition:all var(--t-fade) var(--ease-out)}
.chip:hover{background:var(--bg-hover);color:var(--text-1)}
.chip.on{background:var(--bg-selected);border-color:transparent;color:var(--accent-fg)}
.chip.rc{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tlist{max-height:calc(100vh - 292px);overflow:auto}
.titem{position:relative;padding:8px 12px;border-bottom:1px solid var(--border-hairline);cursor:pointer;transition:background var(--t-hover) linear}
.titem:last-child{border-bottom:none}
.titem:hover{background:var(--bg-hover)}
.titem.on{background:var(--bg-selected)}
.titem.on::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent);animation:selbar 140ms var(--ease-out)}
@keyframes selbar{from{transform:scaleY(0)}}
.titem.kbsel{outline:1px solid var(--accent);outline-offset:-1px}
.titem .n{font-weight:600;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;gap:6px}
.titem .dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.titem .m{font-size:12px;color:var(--text-3);display:flex;justify-content:space-between;gap:8px;margin-top:1px}
.titem .bal{font-weight:600;font-variant-numeric:tabular-nums}
.bal.pos{color:var(--success-text)}
.bal.zero{color:var(--text-3)}

/* ---------- деталка ---------- */
.kv{display:grid;grid-template-columns:150px 1fr;gap:6px 12px;font-size:13px}
.kv .k{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);padding-top:2px}
.bigbal{font-size:28px;font-weight:700;letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums lining-nums;position:relative;display:inline-block}
.bigbal .sweep{position:absolute;left:0;bottom:-6px;height:1px;width:100%;background:var(--success);transform:scaleX(0);transform-origin:left}
.bigbal .sweep.go{animation:sweep 600ms var(--ease-out) forwards}
@keyframes sweep{0%{transform:scaleX(0);opacity:1}70%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}
.stickybar{position:sticky;top:-16px;z-index:5;margin:-4px 0 12px;display:flex;gap:10px;align-items:center;background:var(--bg-surface);border:1px solid var(--border-hairline);border-radius:var(--r-3);box-shadow:var(--sh-pop);padding:8px 14px;opacity:0;pointer-events:none;transform:translateY(-6px);transition:opacity var(--t-move) var(--ease-out),transform var(--t-move) var(--ease-out)}
.stickybar.show{opacity:1;pointer-events:auto;transform:none}
.stickybar .nm{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stickybar .bb{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---------- одометр ---------- */
.od{display:inline-flex}
.od-s{display:inline-block}
.od-c{display:inline-block;height:1em;line-height:1;overflow:hidden;vertical-align:baseline}
.od-roll{display:flex;flex-direction:column}
.od-roll>span{display:block;height:1em;line-height:1}
.od-c.go .od-roll{animation:odRoll 240ms var(--ease-out) both}
@keyframes odRoll{to{transform:translateY(-50%)}}
.flash{animation:flashBg 400ms var(--ease-out)}
@keyframes flashBg{30%{background:var(--success-subtle)}}

/* ---------- копирование ---------- */
.cpy{cursor:pointer;border-radius:var(--r-1);padding:0 3px;margin:0 -3px;transition:background var(--t-fade) linear;position:relative}
.cpy:hover{background:var(--bg-inset)}
.cpy.did{background:var(--accent-subtle)}
.cpy .ck{display:none;margin-left:3px}
.cpy.did .ck{display:inline}
.cpy .ck svg{width:10px;height:10px;stroke:var(--success);fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:14;stroke-dashoffset:14;animation:ck 200ms var(--ease-out) forwards}
@keyframes ck{to{stroke-dashoffset:0}}

/* ---------- фитиль (истекающие) ---------- */
td.fusecell{width:8px;padding:0 0 0 6px}
.fuse{width:2px;height:24px;border-radius:1px;background:var(--border-hairline);position:relative;overflow:hidden}
.fuse i{position:absolute;left:0;bottom:0;width:100%;background:var(--fusecol,var(--text-3));transform-origin:bottom;animation:fusein var(--t-move) var(--ease-out) both}
@keyframes fusein{from{transform:scaleY(0)}}

/* ---------- модалка ---------- */
#mask,#remask{position:fixed;inset:0;background:var(--scrim);backdrop-filter:blur(6px) saturate(1.15);display:flex;align-items:flex-start;justify-content:center;padding:9vh 20px 20px;z-index:50;animation:fadeIn 140ms var(--ease-out)}
#remask{z-index:70}
#mask.out{animation:fadeOut 120ms var(--ease-in) forwards}
@keyframes fadeIn{from{opacity:0}}
@keyframes fadeOut{to{opacity:0}}
#mask .win,#remask .win{background:var(--bg-raised);border:1px solid var(--border-hairline);border-radius:var(--r-4);width:100%;max-width:520px;max-height:84vh;overflow:auto;box-shadow:var(--sh-modal);animation:winIn var(--t-enter) var(--spring-pop)}
#remask .win{max-width:400px}
#mask.out .win{animation:winOut 120ms var(--ease-in) forwards}
@keyframes winIn{from{opacity:0;transform:scale(.98) translateY(6px)}}
@keyframes winOut{to{opacity:0;transform:scale(.985)}}
#mask .win.shake{animation:shake 300ms linear}
@keyframes shake{0%,100%{transform:none}20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}
#mask h3,#remask h3{margin:0;padding:14px 20px;border-bottom:1px solid var(--border-hairline);font-size:16px;font-weight:600;letter-spacing:-.01em;text-wrap:balance}
#mask .win .body,#remask .win .body{padding:20px}
#mask .win .foot,#remask .win .foot{padding:12px 20px;border-top:1px solid var(--border-hairline);display:flex;gap:8px;justify-content:flex-end;background:var(--bg-surface);border-radius:0 0 var(--r-4) var(--r-4)}
.confirm-sum{background:var(--accent-subtle);border:1px solid transparent;border-radius:var(--r-2);padding:11px 13px;font-size:13px;margin-bottom:13px;transition:border-color 140ms var(--ease-out)}
.confirm-sum b{font-size:16px;font-variant-numeric:tabular-nums}
.confirm-sum.armedb{border-color:var(--accent)}
.dupbanner{background:var(--danger-subtle);border:1px solid color-mix(in oklch,var(--danger) 30%,transparent);color:var(--danger-text);border-radius:var(--r-2);padding:9px 12px;font-size:12.5px;margin-bottom:12px}
.err{background:var(--danger-subtle);border:1px solid color-mix(in oklch,var(--danger) 25%,transparent);color:var(--danger-text);padding:9px 12px;border-radius:var(--r-2);font-size:12.5px;margin-bottom:12px;white-space:pre-wrap}
.words{font-size:12px;color:var(--text-3);margin:-8px 0 12px;min-height:16px;font-style:italic}

/* ---------- палитра (Ctrl+K) ---------- */
#palmask{position:fixed;inset:0;background:var(--scrim);backdrop-filter:blur(6px) saturate(1.15);z-index:60;display:flex;justify-content:center;align-items:flex-start;padding:13vh 20px 20px;animation:fadeIn 140ms var(--ease-out)}
.pal{width:100%;max-width:580px;background:var(--bg-raised);border:1px solid var(--border-hairline);border-radius:var(--r-4);box-shadow:var(--sh-modal);overflow:hidden;animation:winIn var(--t-move) var(--spring-pop)}
.pal input{border:none;border-radius:0;border-bottom:1px solid var(--border-hairline);padding:13px 16px;font-size:15px;background:transparent}
.pal input:focus-visible{outline:none}
.pallist{max-height:46vh;overflow:auto;position:relative;padding:6px}
.palrow{position:relative;z-index:1;height:44px;display:flex;align-items:center;gap:10px;padding:0 10px;border-radius:var(--r-2);cursor:pointer;font-size:13px}
.palrow .pn{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.palrow .pe{color:var(--text-3);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.palrow .pb{margin-left:auto;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.palrow .verbs{margin-left:auto;display:none;gap:4px}
.palrow.sel .verbs{display:flex}
.palrow.sel .pb{display:none}
.verb{padding:2px 8px;border-radius:var(--r-1);font-size:11px;font-weight:600;background:var(--bg-inset);color:var(--text-2);border:1px solid transparent}
.verb.von{background:var(--accent);color:var(--on-accent)}
.palglide{position:absolute;top:0;left:6px;right:6px;height:44px;border-radius:var(--r-2);background:var(--bg-selected);z-index:0;transition:transform 120ms var(--spring-slide);pointer-events:none}
.palfoot{border-top:1px solid var(--border-hairline);padding:8px 14px;display:flex;gap:14px;font-size:11px;color:var(--text-3);background:var(--bg-surface)}
.palempty{padding:26px;text-align:center;color:var(--text-3);font-size:13px}

/* ---------- журнал ---------- */
#jpanel{position:fixed;top:56px;right:16px;width:360px;max-height:70vh;overflow:auto;background:var(--bg-raised);border:1px solid var(--border-hairline);border-radius:var(--r-3);box-shadow:var(--sh-pop);z-index:40;animation:winIn var(--t-move) var(--spring-pop)}
#jpanel h4{margin:0;padding:10px 14px;border-bottom:1px solid var(--border-hairline);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3)}
.jrow{display:flex;gap:10px;align-items:baseline;padding:8px 14px;border-bottom:1px solid var(--border-hairline);font-size:12.5px}
.jrow:last-of-type{border-bottom:none}
.jrow .jt{color:var(--text-3);font-size:11.5px;font-variant-numeric:tabular-nums;flex-shrink:0}
.jrow .jn{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jrow .ja{margin-left:auto;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.jtotal{padding:10px 14px;border-top:1px solid var(--border-strong);font-size:12.5px;display:flex;justify-content:space-between;background:var(--bg-surface)}

/* ---------- toast ---------- */
#toasts{position:fixed;right:16px;bottom:16px;display:flex;flex-direction:column;gap:8px;z-index:100}
.toast{position:relative;overflow:hidden;background:var(--bg-raised);border:1px solid var(--border-hairline);color:var(--text-1);padding:10px 14px 12px;border-radius:var(--r-3);font-size:12.5px;max-width:380px;box-shadow:var(--sh-pop);white-space:pre-wrap;display:flex;gap:9px;align-items:flex-start;animation:toastIn 180ms var(--spring-pop)}
@keyframes toastIn{from{opacity:0;transform:translateY(8px)}}
.toast.gone{animation:toastOut 140ms var(--ease-in) forwards}
@keyframes toastOut{to{opacity:0;transform:translateY(4px)}}
.toast .tic{width:16px;height:16px;flex-shrink:0;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-top:1px}
.toast.ok .tic{background:var(--success-subtle)}
.toast.bad .tic{background:var(--danger-subtle)}
.toast.inf .tic{background:var(--accent-subtle)}
.toast .tic svg{width:9px;height:9px;stroke-width:2.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.toast.ok .tic svg{stroke:var(--success-text)}
.toast.bad .tic svg{stroke:var(--danger-text)}
.toast.inf .tic svg{stroke:var(--accent-fg)}
.toast .life{position:absolute;left:0;bottom:0;height:2px;background:var(--border-strong);width:100%;transform-origin:left;animation:drain linear forwards}
.toast .tact{margin-left:6px;flex-shrink:0}
.toast .tclose{margin-left:6px;flex-shrink:0;padding:0 7px;line-height:1.5}

/* ---------- скелетоны (видны, только если загрузка > 150ms) ---------- */
.skelwrap{opacity:0;animation:skelShow 1ms 150ms forwards}
@keyframes skelShow{to{opacity:1}}
.skel{background:var(--bg-inset);border-radius:var(--r-1);animation:skelPulse 1.1s ease-in-out infinite alternate}
@keyframes skelPulse{from{opacity:.55}to{opacity:.9}}

/* ---------- пустые состояния ---------- */
.empty{padding:32px;text-align:center;color:var(--text-3);font-size:13px}
.empty svg{width:28px;height:28px;stroke:var(--text-disabled);fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;margin-bottom:8px}
.empty .t{text-wrap:balance}

/* ---------- login ---------- */
#login{display:flex;align-items:center;justify-content:center;height:100%;padding:20px;background:radial-gradient(600px 400px at 20% 0%,var(--accent-subtle),transparent 70%),radial-gradient(500px 400px at 100% 100%,var(--accent-subtle),transparent 70%),var(--bg-app)}
#login .box{width:100%;max-width:360px;background:var(--bg-surface);border:1px solid var(--border-hairline);border-radius:12px;padding:28px;box-shadow:var(--sh-modal);animation:winIn 260ms var(--spring-pop)}
#login .box.shake{animation:shake 300ms linear}
#login h1{margin:0 0 4px;font-size:20px;font-weight:700;letter-spacing:-.015em}
#login p.sub{margin:0 0 20px;color:var(--text-3);font-size:12.5px}
#login .fine{color:var(--text-3);font-size:11.5px;margin:16px 0 0;line-height:1.5}

/* ============================================================
   МОБИЛЬНАЯ ЧАСТЬ
   Железное правило: всё мобильное живёт ТОЛЬКО внутри медиазапросов,
   которые физически не могут совпасть на десктопе с мышью:
     (pointer: coarse)  — основной ввод палец, а не курсор
     (max-width: 720px) — телефонная ширина
   Ни одно правило выше этой черты не меняется, поэтому геометрия
   ПК-версии остаётся прежней до пикселя.
   ============================================================ */
@media (pointer: coarse){
  /* серая вспышка Android при тапе — убираем, у нас свои состояния */
  *{-webkit-tap-highlight-color:transparent}
  /* hover на тач-экране «залипает» после тапа — гасим */
  button:hover:not(:disabled){background:var(--bg-surface)}
  button.pri:hover:not(:disabled){background:var(--accent)}
  .chip:hover{background:var(--bg-surface);color:var(--text-2)}
  .chip.on:hover{background:var(--bg-selected);color:var(--accent-fg)}
  .titem:hover{background:transparent}
  .titem.on:hover{background:var(--bg-selected)}
  tbody tr:hover{background:transparent}
  .cpy:hover{background:transparent}
}
@media (max-width: 720px){
  /* pull-to-refresh не должен перезагружать страницу посреди операции */
  html,body{overscroll-behavior-y:contain}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0ms!important;transition-duration:80ms!important}
  .skel{animation:none;opacity:.7}
  button.armed .drain{animation-duration:5s!important} /* фитиль — функциональный таймер, не декорация */
  .token-life{animation-duration:var(--life)!important}  /* как и полоса жизни токена */
  .toast .life{display:none}
}

/* ============================================================
   ==== МОБИЛЬНЫЙ СЛОЙ — НАЧАЛО ====
   Всё до этой черты заморожено. Каждое правило ниже обязано
   лежать внутри медиазапроса. Три шлюза, больше никаких:
     M1 — раскладка   (телефон по ширине ИЛИ телефон на боку)
     M2 — размеры под палец (то же + обязательно pointer:coarse)
     M3 — ландшафт телефона
   У мыши всегда pointer:fine и hover:hover, поэтому M2/M3 на ПК
   не срабатывают физически, а M1 требует ширину ≤720px.
   ============================================================ */

/* ---------- M1: РАСКЛАДКА ---------- */
@media (max-width:720px), (pointer:coarse) and (hover:none) and (max-height:540px){
  /* --- шапка: только статус, никаких действий --- */
  header.top{height:auto;min-height:46px;gap:8px;
    padding-top:env(safe-area-inset-top);
    padding-left:max(12px,env(safe-area-inset-left));
    padding-right:max(12px,env(safe-area-inset-right))}
  nav.tabs,#palHint,#me,#logoutBtn,#build{display:none}
  .brand{font-size:14px}
  #mtitle{display:block;font-weight:700;font-size:15px;letter-spacing:-.01em;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* таймер сессии всплывает, только когда начинает иметь значение */
  #ttl{display:none}
  #ttl.w,#ttl.d{display:inline-flex}

  main{padding:12px 12px calc(58px + max(env(safe-area-inset-bottom),8px) + 12px);scroll-padding-top:0}

  /* --- мастер-детейл: два экрана --- */
  .split{grid-template-columns:1fr;gap:0}
  /* без min-width:0 grid-элемент не сжимается уже своего содержимого,
     и ленты чипов распирают колонку за край экрана */
  .split>*{min-width:0}
  .tlist{max-height:none;overflow:visible}
  :root[data-m] #app[data-pane="list"] #detail{display:none}
  :root[data-m] #app[data-pane="detail"] #tpane{display:none}
  :root[data-m] #app[data-pane="detail"] #detail{animation:paneIn 200ms var(--ease-out)}
  @keyframes paneIn{from{opacity:0;transform:translateX(14px)}}
  .stickybar{display:none}          /* его работу делает док */

  /* --- горизонтальные ленты чипов вместо переносов --- */
  .chipsrow,#fchips,#rchips,#ledchips,#stchips{
    flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;min-width:0;
    scrollbar-width:none;margin-inline:-2px;padding-inline:2px}
  .chipsrow>*,#fchips>*,#rchips>*,#stchips>*{flex:0 0 auto}
  .chipsrow::-webkit-scrollbar,#fchips::-webkit-scrollbar{display:none}
  /* заголовок истории: чипы и кнопка «Выписка» переносятся под название, чипы скроллятся */
  .ledh{flex-wrap:wrap} #ledhead{flex:1 1 100%;min-width:0} #ledchips{flex:1 1 auto;min-width:0}
  /* выписка: на телефоне скроллится сама шторка, а не таблица внутри неё */
  .sttbl{max-height:none;overflow:visible}
  #fchips .grow{display:none}

  /* --- широкие таблицы становятся карточками «подпись → значение» --- */
  .tbl thead{display:none}
  .tbl,.tbl tbody,.tbl tr,.tbl td{display:block;width:auto}
  .tbl tr{border:1px solid var(--border-hairline);border-radius:var(--r-2);
    background:var(--bg-surface);margin:0 0 8px;padding:10px 12px}
  .tbl tr:hover{background:var(--bg-surface)}
  /* Подпись уводим в левый жёлоб абсолютом, а содержимое ячейки остаётся
     обычным потоком. Ни flex, ни grid тут не годятся: они делают каждый
     узел отдельным элементом раскладки — «₸» отрывается от суммы,
     а бейджи растягиваются во всю ширину. */
  .tbl td{border:none;height:auto;display:block;position:relative;
    padding:6px 0 6px calc(34% + 12px);min-height:24px;text-align:right}
  .tbl td::before{content:attr(data-l);position:absolute;left:0;top:7px;width:34%;
    text-align:left;line-height:1.3;
    font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
  .tbl td .mut{font-size:12px}
  .tbl td .mono{word-break:break-all}
  .tbl td:empty{display:none}
  .tbl td.acts{justify-content:flex-end;flex-wrap:wrap;gap:8px;padding-top:10px;margin-top:6px;
    border-top:1px solid var(--border-hairline)}
  .tbl td.acts::before{display:none}
  .tbl td.acts button{flex:1 1 auto}
  .tblwrap{overflow-x:visible!important}
  td.fusecell{display:none}

  /* --- карточка тенанта: одна колонка --- */
  .kv{grid-template-columns:1fr;gap:2px 0}
  .kv .k{padding-top:8px}
  .f2{grid-template-columns:1fr}
  .card{margin-bottom:12px}
  .card>.body{padding:14px}

  /* --- модалки едут снизу как шторки --- */
  #mask,#remask{align-items:flex-end;padding:0;backdrop-filter:blur(2px) saturate(1.1)}
  #mask .win,#remask .win{max-width:none;width:100%;max-height:92dvh;
    border-radius:16px 16px 0 0;position:relative;
    display:flex;flex-direction:column;
    padding-bottom:max(env(safe-area-inset-bottom),8px);
    animation:sheetIn var(--t-enter) var(--spring-slide)}
  #mask.out .win{animation:sheetOut 120ms var(--ease-in) forwards}
  @keyframes sheetIn{from{transform:translateY(100%)}}
  @keyframes sheetOut{to{transform:translateY(100%)}}
  /* хват сверху — сигнал «это шторка, её можно смахнуть» */
  #mask .win::before,#remask .win::before{content:"";position:absolute;top:8px;left:50%;
    width:36px;height:4px;margin-left:-18px;border-radius:2px;background:var(--border-strong)}
  #mask h3,#remask h3{flex-shrink:0;padding-top:22px;font-size:18px}
  #mask .win .body,#remask .win .body{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain}
  /* подвал приколочен к низу: денежная кнопка всегда под пальцем */
  #mask .win .foot,#remask .win .foot{flex-shrink:0;flex-direction:column;gap:8px;border-radius:0}
  #mask .win .foot button,#remask .win .foot button{width:100%}
  #mask .win .foot .grow,#remask .win .foot .grow{display:none}
  /* хвост клика по элементу, который открыл шторку, не должен попасть в кнопку */
  #mask .win .foot button{animation:settle 350ms step-end}
  @keyframes settle{from{pointer-events:none}}

  /* --- палитра во весь экран --- */
  #palmask{padding:0;align-items:stretch;backdrop-filter:blur(2px)}
  .pal{max-width:none;border-radius:0;height:100dvh;display:flex;flex-direction:column;
    padding-top:env(safe-area-inset-top);animation:none}
  .pallist{max-height:none;flex:1 1 auto;overscroll-behavior:contain}
  .palglide{display:none}
  .palfoot{display:none}

  /* --- журнал тоже шторка --- */
  #jpanel{position:fixed;top:auto;left:0;right:0;bottom:0;width:auto;
    max-height:80dvh;border-radius:16px 16px 0 0;z-index:46;
    padding-bottom:max(env(safe-area-inset-bottom),8px);
    animation:sheetIn var(--t-move) var(--spring-slide)}

  /* --- тосты над доком, во всю ширину --- */
  #toasts{left:12px;right:12px;bottom:calc(58px + max(env(safe-area-inset-bottom),8px) + 10px)}
  .toast{max-width:none}

  /* --- нижний док --- */
  #dock{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:45;
    align-items:center;gap:8px;height:calc(58px + max(env(safe-area-inset-bottom),8px));
    padding:0 max(10px,env(safe-area-inset-left)) max(env(safe-area-inset-bottom),8px) max(10px,env(safe-area-inset-right));
    background:var(--bg-surface);border-top:1px solid var(--border-hairline)}

  /* --- «жидкая» подсветка активной вкладки ------------------------
     Всплывает ТОЛЬКО декоративный круг: он pointer-events:none и
     лежит отдельным слоем поверх дока. Геометрия самих кнопок не
     меняется ни на пиксель, поэтому палец попадает ровно туда же,
     куда и без анимации. На ПК этого блока нет вовсе — он внутри
     мобильной медиа-выборки. -------------------------------------- */
  #dock .dtab{flex:1;min-width:0;display:flex;flex-direction:column;
    align-items:center;justify-content:center;gap:3px;border:none;background:transparent;
    border-radius:var(--r-2);min-height:48px;padding:4px 2px;color:var(--text-2);
    transition:color 220ms var(--ease-out)}
  #dock .dtab.on{background:var(--bg-selected);color:var(--accent-fg)}
  #dock .dslot{position:relative;display:flex;align-items:center;justify-content:center}
  #dock .dico{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.6;
    stroke-linecap:round;stroke-linejoin:round;
    transition:opacity 130ms linear,transform 280ms var(--ease-out)}
  #dock .dlabel{font-size:11px;font-weight:600;letter-spacing:.01em;line-height:1;white-space:nowrap}
  #dock .dbadge{position:absolute;top:-5px;left:11px;min-width:16px;height:16px;line-height:16px;
    padding:0 4px;border-radius:var(--r-full);background:var(--warn);color:var(--bg-surface);
    font-size:10px;font-weight:700;font-variant-numeric:tabular-nums;text-align:center}

  /* Круг включается только там, где ему есть куда всплыть: data-pill
     ставит JS. Пока его нет, вкладка подсвечивается как раньше —
     плашкой, и ничего не всплывает. */
  #dock[data-pill="1"] .dtab.on{background:transparent}
  #dock[data-pill="1"] .dtab.on .dico{opacity:0;transform:translateY(-7px)}
  #dpill{position:absolute;top:-15px;left:0;width:42px;height:42px;margin-left:-21px;
    pointer-events:none;opacity:0;z-index:2;
    transition:transform 430ms var(--spring-slide),opacity 180ms linear}
  #dock[data-pill="1"] #dpill{opacity:1}
  /* тело отдельным узлом: на #dpill висит translateX, и squash-анимация
     затёрла бы его, окажись она на том же элементе */
  #dpill .pbody{position:absolute;inset:0;border-radius:var(--r-full);
    background:var(--bg-surface);color:var(--accent-fg);
    border:1px solid var(--border-hairline);
    box-shadow:0 8px 18px -6px rgba(0,0,0,.32),0 0 0 4px var(--bg-surface)}
  #dpill .pi{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    opacity:0;transition:opacity 210ms var(--ease-out)}
  #dpill[data-l="a"] .pa,#dpill[data-l="b"] .pb{opacity:1}
  #dpill svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;
    stroke-linecap:round;stroke-linejoin:round}
  /* «жидкость»: в полёте круг вытягивается по ходу движения и осаживается */
  #dpill.hop .pbody{animation:pillHop 430ms var(--ease-out)}
  @keyframes pillHop{
    0%{transform:scale(1,1)}
    30%{transform:scale(1.14,.86)}
    62%{transform:scale(.94,1.06)}
    100%{transform:scale(1,1)}
  }
  #login{padding-bottom:calc(20px + env(safe-area-inset-bottom))}
}

/* ---------- M2: РАЗМЕРЫ ПОД ПАЛЕЦ ---------- */
@media (max-width:720px) and (pointer:coarse), (pointer:coarse) and (hover:none) and (max-height:540px){
  body{font-size:15px;line-height:1.45}
  button,.chip,.titem,.palrow,a,label{touch-action:manipulation}
  button{min-height:44px;padding:11px 16px;font-size:15px}
  button.sm{min-height:44px;padding:11px 14px;font-size:14px}
  button.icobtn{width:44px;height:44px;padding:0}
  .icobtn svg{width:20px;height:20px}
  .chip{min-height:40px;padding:9px 14px;font-size:13px}
  .titem{min-height:64px;padding:12px 14px}
  .titem .n{font-size:15px}
  .titem .m{font-size:13px}
  .palrow{height:64px;font-size:15px}
  /* 16px — порог, ниже которого Android сам зумит страницу при фокусе */
  input,select,textarea{min-height:48px;font-size:16px;padding:12px 14px}
  .ctlsm{min-height:48px;font-size:16px;padding:12px 14px}
  .mut,.mut2{font-size:13px}
  .mono{font-size:12.5px}
  .badge{font-size:12px;padding:4px 10px}
  .toast{font-size:14px}
  .bigbal{font-size:34px}
  .cpy{display:inline-flex;align-items:center;min-height:44px;padding:8px 6px;margin:0 -6px;
    background:var(--bg-inset)}          /* без hover нужен постоянный намёк, что это копируется */
  kbd{display:none}
  main,.tlist,.pallist,#mask .win .body{overscroll-behavior-y:contain}
  /* взведённая кнопка не должна менять высоту между первым и вторым тапом */
  .foot button.pri{min-height:56px;font-size:16px;
    display:flex;align-items:center;justify-content:center;text-align:center}
  button.armed{min-height:56px}
}

/* ---------- M3: ТЕЛЕФОН НА БОКУ ---------- */
@media (pointer:coarse) and (hover:none) and (max-height:540px){
  #mask .win,#remask .win{max-height:100dvh;border-radius:0}
  .bigbal{font-size:24px}
  #dock .dlabel{display:none}
  #dock{height:calc(48px + max(env(safe-area-inset-bottom),6px))}
  main{padding-bottom:calc(48px + max(env(safe-area-inset-bottom),6px) + 10px)}
}
/* ==== МОБИЛЬНЫЙ СЛОЙ — КОНЕЦ ==== */

#build{font-size:11px;letter-spacing:.02em;white-space:nowrap}