/* Панель торгового бота: «Инвентарь».
 *
 * На чём держится всё ниже:
 *  1. Один акцент на всю панель, фиолетовый на почти чёрном. Им отмечены
 *     активное состояние, деньги к выдаче и главные кнопки. Остальное
 *     нейтральное: два акцента в одном экране спорят друг с другом.
 *  2. Одна шкала скруглений: плитки и карточки 16, вложенные блоки 10,
 *     переключатели, фильтры и метки капсулой.
 *  3. Предмет лежит на тёмной подложке (--item) в обеих темах: рендеры
 *     скинов рассчитаны на тёмный фон и на светлом теряют силуэт.
 *  4. Цифры табличные (tabular-nums), крупные суммы набраны Unbounded:
 *     столбцы не прыгают при автообновлении раз в 20 секунд.
 *
 * Тема: тёмная по умолчанию, светлая, если клиент Telegram в светлой
 * (app.js ставит <html data-theme="light">).
 */

:root {
  --bg:      #0b0810;            /* почти чёрный с фиолетовым подтоном */
  --sf:      #141021;
  --sf2:     #1a1428;
  --ln:      #272036;
  --ln2:     #39304f;
  --tx:      #ece9f5;
  --mu:      #9a92b0;
  --faint:   #6f6788;
  --item:    #08060d;

  --ac:      #a98bff;
  --ac-ink:  #190f2e;            /* текст на фиолетовой заливке */
  --ac-soft: #241a3d;

  /* Рост и падение остаются зелёным и красным: на фиолетовом фоне они
     читаются, а цветом акцента деньги не обозначишь — он уже занят. */
  --up:      #56cf9b;
  --up-soft: rgba(86, 207, 155, .14);
  --down:    #f3796f;
  --down-soft: rgba(243, 121, 111, .14);
  --warn:    #e9a84f;
  --warn-soft: #30210f;

  --sans: "Golos Text", -apple-system, "Segoe UI", Roboto, sans-serif;
  --disp: Unbounded, "Golos Text", sans-serif;

  --r-lg: 16px;      /* плитки и карточки */
  --r:    10px;      /* поля, кнопки, вложенные блоки */
  --pill: 999px;     /* переключатели, фильтры, метки */
  --ease: cubic-bezier(.16, 1, .3, 1);
  --nav-h: 62px;
}

html[data-theme="light"] {
  --bg:      #f2eef9;
  --sf:      #ffffff;
  --sf2:     #f7f4fd;
  --ln:      #e4ddf3;
  --ln2:     #cec3e7;
  --tx:      #171027;
  --mu:      #605677;
  --faint:   #8d85a4;
  --item:    #16111f;
  --ac:      #6b36d4;
  --ac-ink:  #ffffff;
  --ac-soft: #ece3fd;
  --up:      #11764a;
  --up-soft: rgba(17, 118, 74, .1);
  --down:    #c13b30;
  --down-soft: rgba(193, 59, 48, .09);
  --warn:    #8d5200;
  --warn-soft: #f8edda;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--tx);
  font: 400 14.5px/1.45 var(--sans);
  font-variant-numeric: tabular-nums;
  padding-bottom: calc(var(--nav-h) + 20px + env(safe-area-inset-bottom));
  overscroll-behavior-y: contain;
  -webkit-font-smoothing: antialiased;
}

.hidden { display: none !important; }
button { font-family: var(--sans); }

:focus-visible { outline: 2px solid var(--ac); outline-offset: 2px; }

.ph, .ph-fill { line-height: 1; }

/* ======================= занавес ======================= */
.curtain {
  position: fixed; inset: 0; z-index: 50;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px;
  padding: 32px; text-align: center; background: var(--bg);
}
.spinner {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid var(--ln2); border-top-color: var(--ac);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.curtain-mark {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font: 600 18px var(--disp); color: var(--down);
  border: 1.5px solid var(--down);
}
.curtain-text { font-size: 15px; font-weight: 500; }
.curtain-hint { color: var(--mu); font-size: 13px; max-width: 270px; }

/* ======================= шапка ======================= */
.app-bar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px 10px;
  background: var(--bg);
}
.app-id { flex: 1; min-width: 0; }
.app-title {
  margin: 0; font: 600 19px/1.15 var(--disp); letter-spacing: -.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.app-sub {
  display: flex; align-items: center; gap: 6px; min-width: 0;
  color: var(--mu); font-size: 11.5px; margin-top: 3px;
}
.app-sub span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.icon-btn {
  flex: none; width: 36px; height: 36px; border-radius: var(--pill);
  border: 1px solid var(--ln); background: var(--sf);
  color: var(--mu); cursor: pointer; font-size: 17px;
  display: flex; align-items: center; justify-content: center;
  transition: color .15s, border-color .15s;
}
.icon-btn:active { color: var(--tx); border-color: var(--ln2); }
.icon-btn.busy .ph { animation: spin .9s linear infinite; }

.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); flex: none; }
.dot.ok   { background: var(--up); }
.dot.warn { background: var(--warn); }
.dot.bad  { background: var(--down); }

/* ======================= нижнее меню ======================= */
.tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 25;
  display: grid; grid-template-columns: repeat(5, 1fr);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  background: var(--sf); border-top: 1px solid var(--ln);
}
.tabs .tab {
  position: relative; min-height: 50px; border: 0; background: transparent; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  color: var(--mu); font: 500 11px var(--sans); transition: color .15s;
}
.tabs .tab .ph, .tabs .tab .ph-fill { font-size: 22px; }
.tabs .tab .ph-fill { display: none; }
.tabs .tab.is-on { color: var(--ac); }
.tabs .tab.is-on .ph { display: none; }
.tabs .tab.is-on .ph-fill { display: block; }
.tab-n {
  position: absolute; top: 3px; left: calc(50% + 6px);
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--pill);
  background: var(--ac); color: var(--ac-ink);
  font: 600 10.5px/18px var(--sans); text-align: center;
}

/* ======================= страницы ======================= */
.page { padding: 4px 16px 8px; }
.page:not(.hidden) { animation: page-in .22s var(--ease) both; }
@keyframes page-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.card, .tile {
  margin-bottom: 10px; background: var(--sf); border: 1px solid var(--ln);
  border-radius: var(--r-lg);
}
.card { padding: 14px 14px 16px; }
.tile { padding: 12px; display: grid; gap: 4px; align-content: start; min-width: 0; }
.card-title { margin: 0; font-size: 14px; font-weight: 600; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.row { display: flex; align-items: center; gap: 8px; }
.row.wrap, .wrap { flex-wrap: wrap; }
.right { margin-left: auto; }
.head-tools { display: flex; align-items: center; gap: 10px; }

.sec { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 18px 2px 8px; }
.sec h2 { margin: 0; font-size: 13.5px; font-weight: 600; }
.sec .linkbtn { margin: -8px 0; }

.lbl { font-size: 12px; color: var(--mu); }
.fig { font: 600 24px/1.05 var(--disp); letter-spacing: -.02em; }
.fig.md { font-size: 20px; }
.fig.sm { font-size: 16px; }
.fig.xl { font-size: 32px; letter-spacing: -.035em; }
.fig small { font: 600 13px var(--sans); color: var(--ac); margin-left: 6px; letter-spacing: 0; }

.note { color: var(--mu); font-size: 12px; line-height: 1.45; margin-top: 6px; }
.eyebrow { color: var(--mu); font-size: 12px; }
.badge {
  flex: none; padding: 2px 9px; border-radius: var(--pill);
  background: var(--sf2); color: var(--mu); font-size: 11.5px; font-weight: 500;
}
.tag {
  justify-self: start; flex: none; font-size: 11px; font-weight: 500;
  padding: 2px 9px; border-radius: var(--pill);
  background: var(--ac-soft); color: var(--ac); white-space: nowrap;
}
.tag.warn { background: var(--warn-soft); color: var(--warn); }
.tag.live { background: var(--sf2); color: var(--tx); }
.tiny { font-size: 11px; color: var(--mu); }
.empty, .none { padding: 18px 4px; text-align: center; color: var(--mu); font-size: 12.5px; }
.lot-seller .none { padding: 0; text-align: left; }

/* предмет на тёмной подложке */
.art {
  background: var(--item); border-radius: var(--r);
  display: grid; place-items: center; overflow: hidden; flex: none;
}
.art img { width: 86%; height: 100%; object-fit: contain; display: block; }

/* ======================= деньги на обзоре ======================= */
.money { padding: 14px; }
.money-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-top: 6px; }
.money-sub { margin-top: 10px; font-size: 12.5px; }
.money-fiat { margin-top: 2px; font-size: 11.5px; color: var(--mu); }

.pill {
  flex: none; display: inline-flex; align-items: baseline; gap: 6px;
  padding: 4px 10px; border-radius: var(--pill); background: var(--sf2);
  font-size: 12.5px; font-weight: 600; color: var(--tx);
}
.pill:empty { display: none; }
.pill em { font: normal 500 10.5px var(--sans); color: var(--mu); }
.pill.pos { color: var(--up); background: var(--up-soft); }
.pill.neg { color: var(--down); background: var(--down-soft); }
.pill.pos em, .pill.neg em { color: inherit; opacity: .8; }

/* четыре итога плитками */
.strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 12px; }
.strip > div {
  display: flex; flex-direction: column; gap: 1px; min-width: 0;
  padding: 7px 9px; background: var(--sf2); border-radius: var(--r);
}
.strip b { font-size: 15px; font-weight: 600; }
.strip i { font: normal 400 10.5px var(--sans); color: var(--mu); }

.fiat { margin-top: 4px; color: var(--mu); font-size: 11.5px; }
.fiat.big { color: var(--tx); font-size: 12px; }
.fiat.inline { display: inline; margin-left: 6px; }

/* главный плательщик: скин, баланс, сколько выдать одним лотом */
.give-hero { padding: 0; gap: 0; overflow: hidden; }
.give-hero > .art { border-radius: 0; height: 112px; }
.give-hero > .art img { max-height: 92px; }
.give-hero .in { padding: 12px; display: grid; gap: 8px; }
.give-hero .line { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.give {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  background: var(--ac-soft); border-radius: var(--r); padding: 8px 10px;
}
.give span { font-size: 12.5px; }
.give b { font: 600 15px var(--disp); color: var(--ac); white-space: nowrap; }

/* автоматика: три плитки с тумблерами */
.auto { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.au {
  background: var(--sf); border: 1px solid var(--ln); border-radius: var(--r-lg);
  padding: 10px; display: grid; gap: 4px; align-content: start; min-width: 0;
}
.au-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2px; }
.au-top .ph { font-size: 20px; color: var(--mu); }
.au b { font-size: 12.5px; font-weight: 600; }
.au > span { font-size: 11px; color: var(--mu); line-height: 1.3; overflow-wrap: anywhere; }
.au.is-wait { opacity: .6; }

/* лента событий */
.feed { background: var(--sf); border: 1px solid var(--ln); border-radius: var(--r-lg); padding: 2px 12px; }
.ev { display: grid; grid-template-columns: 46px 1fr auto; gap: 10px; align-items: center; padding: 9px 0; }
.ev + .ev { border-top: 1px solid var(--ln); }
.ev .art { height: 32px; }
.ev .art img { max-height: 26px; }
.ev-what { font-weight: 500; line-height: 1.25; min-width: 0; overflow-wrap: anywhere; }
.ev-what small { display: block; font-weight: 400; color: var(--mu); font-size: 11.5px; margin-top: 1px; }
.ev-m { text-align: right; font-weight: 600; white-space: nowrap; }
.ev-m small { display: block; font-weight: 400; color: var(--mu); font-size: 11px; }
.ev-m.plus { color: var(--up); }
.ev.warn .ev-what { color: var(--warn); }

/* паттерны для покупателя */
.pat { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pat > div { background: var(--sf2); border-radius: var(--r); padding: 8px 10px; min-width: 0; }
.pat b { display: block; font: 600 15px var(--disp); margin: 2px 0; }

/* две плитки рядом */
.bento { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bento > .tile { margin-bottom: 0; }
.bento + * { margin-top: 10px; }

/* ======================= выводы ======================= */
.pay-head .fig { margin-top: 2px; }
.pay {
  background: var(--sf); border: 1px solid var(--ln); border-radius: var(--r-lg);
  padding: 12px; display: grid; gap: 8px; margin-bottom: 8px;
}
.pay.bad { border-color: var(--warn); }
.pay-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.pay-av { width: 44px; height: 44px; flex: none; border-radius: 12px; overflow: hidden; background: var(--sf2);
          border: 1px solid var(--ln); display: grid; place-items: center; font-weight: 700; color: var(--mu); }
.pay-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pay-who { flex: 1; min-width: 0; }
.pay-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; }
.pay-rub { font-style: normal; font-weight: 700; font-size: 13.5px; color: var(--up); white-space: nowrap; }
.pay-h b { font-weight: 600; overflow-wrap: anywhere; }
.pay-h small { display: block; color: var(--mu); font-size: 11.5px; margin-top: 1px; }
.nums { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
.nums > div { background: var(--sf2); border-radius: var(--r); padding: 6px 8px; min-width: 0; }
.nums b { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ======================= ещё ======================= */
.more { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.go {
  cursor: pointer; text-align: left; color: var(--tx);
  background: var(--sf); border: 1px solid var(--ln); border-radius: var(--r-lg);
  padding: 14px 12px; display: grid; gap: 5px; align-content: start;
  transition: transform .15s var(--ease), border-color .15s;
}
.go:active { transform: scale(.98); border-color: var(--ln2); }
.go .ph { font-size: 23px; color: var(--ac); }
.go b { font-weight: 600; font-size: 14px; }
.go span { font-size: 12px; color: var(--mu); line-height: 1.35; }

/* строки «ключ: значение» */
.kv { margin: 10px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.kv > div { background: var(--sf2); border-radius: var(--r); padding: 7px 9px; min-width: 0; }
.kv dt { color: var(--mu); font-size: 11px; }
.kv dd { margin: 1px 0 0; font-weight: 600; font-size: 13px; overflow-wrap: anywhere; }
.kv > .wide { grid-column: span 2; }
.kv dd.bad { color: var(--down); font-weight: 500; }

/* простой список строк внутри карточки */
.line-row {
  display: flex; align-items: center; gap: 10px; padding: 10px 0;
  border-bottom: 1px solid var(--ln);
}
.line-row:last-child { border-bottom: 0; }
.line-row .art { width: 52px; height: 34px; }
.line-row .art img { max-height: 28px; }
.line-main { min-width: 0; flex: 1; }
.line-main b { display: block; font-weight: 600; font-size: 13.5px; overflow-wrap: anywhere; }
.line-main small { display: block; color: var(--mu); font-size: 11.5px; overflow-wrap: anywhere; }
.line-val { text-align: right; font-weight: 600; white-space: nowrap; }
.line-val small { display: block; color: var(--mu); font-size: 11px; font-weight: 400; }
.mono-id { font-variant-numeric: tabular-nums; letter-spacing: .01em; }

/* ======================= карточка аккаунта ======================= */
.acc-top { display: flex; align-items: center; gap: 10px; }
.acc-skin {
  order: -1; flex: none; width: 58px; height: 40px;
  background: var(--item); border-radius: var(--r);
  display: grid; place-items: center; overflow: hidden;
}
.acc-skin img { width: 86%; height: 32px; object-fit: contain; }
.acc-skin-name { display: none; }
.acc-name { font-size: 15px; font-weight: 600; }
.acc-state { color: var(--mu); font-size: 11.5px; margin-left: auto; }
.acc-top .dot { order: 1; }
.acc-money {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; margin-top: 12px;
}
.acc-bal { font: 600 22px var(--disp); letter-spacing: -.03em; }
.acc-bal small { font: 600 12px var(--sans); color: var(--ac); margin-left: 5px; letter-spacing: 0; }

.acc-stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 6px; margin: 12px 0 0;
}
.acc-stats > div {
  display: flex; flex-direction: column; gap: 1px; min-width: 0;
  padding: 6px 8px; background: var(--sf2); border-radius: var(--r);
}
.acc-stats dt { color: var(--mu); font-size: 10.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-stats dd { margin: 0; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* задержка выставления */
.delay {
  display: flex; align-items: center; gap: 6px; margin-top: 12px;
  padding-top: 10px; border-top: 1px solid var(--ln); transition: opacity .2s;
}
.delay.busy, .onlast.busy, .retrylast.busy { opacity: .5; pointer-events: none; }
.delay-t { font-size: 12.5px; color: var(--mu); margin-right: auto; }
.delay-b, .rl-b {
  width: 32px; height: 32px; flex: none; border-radius: var(--pill);
  border: 1px solid var(--ln); background: var(--sf2);
  color: var(--tx); font: 500 16px var(--sans); line-height: 1; cursor: pointer;
}
.delay-b:active, .rl-b:active { border-color: var(--ac); color: var(--ac); }
.delay-i, .rl-i {
  flex: none; padding: 6px; text-align: center;
  border: 1px solid var(--ln); border-radius: var(--r);
  background: var(--bg); color: var(--tx); font: 600 13px var(--sans);
}
.delay-i { width: 56px; }
.rl-i { width: 46px; }
.delay-i:focus, .rl-i:focus { outline: 0; border-color: var(--ac); }
.delay-i::-webkit-outer-spin-button, .delay-i::-webkit-inner-spin-button,
.rl-i::-webkit-outer-spin-button, .rl-i::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.delay-u { font-size: 11.5px; color: var(--mu); }

.onlast, .retrylast {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin-top: 10px; transition: opacity .2s;
}
.onlast-txt, .retrylast-txt { min-width: 0; }
.onlast-t, .retrylast-t { font-size: 12.5px; color: var(--mu); transition: color .2s; }
.onlast.is-on .onlast-t, .retrylast.is-on .retrylast-t { color: var(--tx); font-weight: 500; }
.onlast-h, .retrylast-h {
  display: block; margin-top: 1px; font-style: normal;
  color: var(--mu); font-size: 11px; line-height: 1.35;
}
.retrylast-ctl { display: flex; align-items: center; gap: 6px; flex: none; }

/* шкала лимита трат */
.lim { margin-top: 12px; }
.lim-head { display: flex; justify-content: space-between; gap: 10px; color: var(--mu); font-size: 11.5px; margin-bottom: 6px; }
.bar { position: relative; height: 6px; overflow: hidden; border-radius: var(--pill); background: var(--sf2); }
.bar i {
  position: absolute; left: 0; top: 0; bottom: 0; display: block; border-radius: var(--pill);
  background: var(--ac); transition: width .5s var(--ease);
}
.bar i.warn { background: var(--warn); }
.bar i.bad  { background: var(--down); }

/* ======================= график ======================= */
.seg {
  display: inline-flex; padding: 3px; gap: 2px;
  background: var(--sf2); border-radius: var(--pill); overflow: hidden;
}
.seg-block { display: flex; width: 100%; margin-top: 10px; }
#m-who { overflow-x: auto; scrollbar-width: none; }
#m-who:empty { display: none; }
#m-who::-webkit-scrollbar { display: none; }
#m-who button { flex: 0 0 auto; }
.seg button {
  flex: 1; min-height: 30px; border: 0; border-radius: var(--pill); background: transparent;
  color: var(--mu); padding: 6px 10px; font: 500 12px var(--sans);
  cursor: pointer; white-space: nowrap; transition: color .15s, background .15s;
}
.seg button.is-on { color: var(--tx); background: var(--sf); box-shadow: 0 1px 2px rgb(0 0 0 / .18); }
.readout {
  display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 12px;
  min-height: 18px; font-size: 12px; color: var(--mu);
}
.readout b { color: var(--tx); font-weight: 600; }
.readout i, .chip i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; }
#chart { width: 100%; height: 170px; display: block; margin-top: 8px; }

/* фильтры-капсулы */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chips-tight { gap: 5px; }
.seg-chips, #g-pay-filter { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 0 10px; }
.seg-chips::-webkit-scrollbar, #g-pay-filter::-webkit-scrollbar { display: none; }
.chip {
  display: inline-flex; align-items: center; gap: 4px; flex: none;
  min-height: 32px; padding: 6px 13px; border-radius: var(--pill); border: 1px solid var(--ln);
  background: var(--sf); color: var(--tx); font: 500 12.5px var(--sans); cursor: pointer; white-space: nowrap;
}
.chip.is-on { background: var(--tx); color: var(--bg); border-color: var(--tx); }
.chip i { margin-right: 2px; }

/* ======================= поля формы ======================= */
.field { margin-top: 16px; }
.field-head { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.field-head em { font-style: normal; color: var(--mu); font-size: 11.5px; font-weight: 400; }
.step {
  width: 20px; height: 20px; flex: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font: 600 11px var(--sans); color: var(--ac); background: var(--ac-soft);
}
.input {
  flex: 1; min-width: 0; padding: 10px 12px; border-radius: var(--r);
  border: 1px solid var(--ln2); background: var(--bg); color: var(--tx);
  font: 400 14.5px var(--sans);
}
.input::placeholder { color: var(--faint); }
.input:focus { outline: 0; border-color: var(--ac); }
.input-block { width: 100%; display: block; margin-top: 8px; }
.tilde { color: var(--mu); flex: none; font-size: 12.5px; }

.opt-btn, .ghost, .linkbtn, .cta, .apply { cursor: pointer; }
.opt-btn {
  flex: none; min-height: 40px; padding: 9px 14px; border-radius: var(--pill);
  border: 1px solid var(--ln2); background: transparent; color: var(--tx);
  font-size: 13px; font-weight: 500;
}
.opt-btn.is-on { border-color: var(--ac); color: var(--ac); background: var(--ac-soft); }
.opt-wide { width: 100%; }
.linkbtn {
  border: 0; background: transparent; color: var(--ac);
  font-size: 12.5px; font-weight: 500; min-height: 32px; padding: 6px 2px;
}
.linkbtn:active { opacity: .6; }
.linkbtn:disabled { color: var(--mu); }
.ghost {
  width: 100%; min-height: 44px; padding: 11px; border-radius: var(--pill);
  border: 1px solid var(--ln2); background: transparent; color: var(--tx);
  font-size: 14px; font-weight: 500;
}
.cta {
  width: 100%; margin-top: 16px; min-height: 46px; padding: 12px; border: 0; border-radius: var(--pill);
  background: var(--ac); color: var(--ac-ink); font-size: 14.5px; font-weight: 600;
  transition: opacity .15s, transform .15s var(--ease);
}
.cta:active { transform: scale(.98); }
.cta:disabled { background: var(--sf2); color: var(--mu); cursor: default; transform: none; }
.cta.busy { opacity: .6; }

.recap {
  margin-top: 14px; padding: 10px 12px; border-radius: var(--r);
  background: var(--sf2); color: var(--mu); font-size: 12px; line-height: 1.5;
}
.recap:empty { display: none; }

/* выбор скина и наклейки */
.skin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
.skin-card, .st {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 8px 6px 9px; border-radius: var(--r); border: 1px solid var(--ln);
  background: var(--sf2); color: var(--tx); cursor: pointer;
}
.skin-card.is-on, .st.is-on { border-color: var(--ac); background: var(--ac-soft); }
.skin-card img {
  width: 100%; height: 44px; object-fit: contain;
  background: var(--item); border-radius: 7px; padding: 4px;
}
.skin-card span, .st span { font-size: 10.5px; color: var(--mu); text-align: center; line-height: 1.25; }
.skin-card em { font-style: normal; font-size: 10px; color: var(--ac); text-align: center; }
.st-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 6px; margin-top: 12px; }
.st-grid-sheet { max-height: 46vh; overflow-y: auto; padding: 1px; }
.st img { width: 44px; height: 44px; object-fit: contain; }

.picker {
  display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 8px; min-height: 44px;
  padding: 9px 12px; border-radius: var(--r); border: 1px solid var(--ln2);
  background: var(--bg); color: var(--tx); cursor: pointer; text-align: left;
}
.picker img { width: 28px; height: 28px; object-fit: contain; flex: none; }
.picker-ph { color: var(--faint); }
.picker-name { font-size: 13.5px; font-weight: 500; }
.picker-id { color: var(--mu); font-size: 11px; }

/* ======================= строки списков ======================= */
.lot, .watch, .prof, .sale { padding: 12px 0; border-bottom: 1px solid var(--ln); }
.lot:last-child, .watch:last-child, .prof:last-child, .sale:last-child { border-bottom: 0; }
.lot { display: grid; grid-template-columns: 76px 1fr; gap: 12px; align-items: start; }
.lot > .lot-skin {
  width: 76px; height: 56px; object-fit: contain; padding: 5px;
  background: var(--item); border-radius: var(--r); cursor: zoom-in;
}
.lot > .lot-body { margin-top: 0; grid-column: 2; min-width: 0; }
.lot > .lot-body:only-child { grid-column: 1 / -1; }
.lot-head, .watch-t, .prof-top { display: flex; align-items: center; gap: 8px; }
.lot-title { font-size: 13.5px; font-weight: 600; min-width: 0; }
.lot-sub, .lot-when, .watch-s { color: var(--mu); font-size: 11.5px; }
.lot-sub, .lot-seller, .lot-stick, .lot-when { margin-top: 5px; }
.lot-price { font: 600 15px var(--disp); margin-left: auto; white-space: nowrap; letter-spacing: -.02em; }
.lot-seller { display: flex; align-items: center; gap: 7px; font-size: 12px; }
.lot-seller img, .buy-face, .noface { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; flex: none; }
.noface {
  display: flex; align-items: center; justify-content: center;
  background: var(--sf2); color: var(--mu); font-size: 10.5px; font-weight: 600;
}
.lot-new {
  display: inline-block; padding: 0 7px; border-radius: var(--pill);
  background: var(--ac-soft); color: var(--ac); font-weight: 500;
}
.lot-stick, .stick-row { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; }
.stick-row { margin-top: 6px; }
.lot-stick > span:not(.stick-row) { color: var(--mu); font-size: 11.5px; }
.stick {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 2px;
  border-radius: var(--pill); background: var(--sf2); font-size: 11px; color: var(--mu);
}
.stick i { font-style: normal; }
.stick img { width: 20px; height: 20px; object-fit: contain; }
.buy {
  margin-top: 10px; width: 100%; min-height: 42px; padding: 10px; border: 0; border-radius: var(--pill);
  background: var(--ac); color: var(--ac-ink); font: 600 13.5px var(--sans); cursor: pointer;
}
.buy:disabled { background: var(--sf2); color: var(--faint); cursor: default; }
.buy.done { background: var(--up-soft); color: var(--up); }
.del, .clear {
  flex: none; min-width: 32px; min-height: 32px; border: 0; border-radius: var(--pill); cursor: pointer;
  background: transparent; color: var(--mu); font: 400 13px var(--sans); padding: 4px 8px;
}
.del:active { color: var(--down); background: var(--down-soft); }
.msum { color: var(--mu); font-size: 12px; margin-top: 10px; }
.val { font-weight: 600; }

/* плашка вместо картинки скина («нет фото», «свой») */
.noimg {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 44px; padding: 2px 4px;
  border: 1px dashed var(--ln2); border-radius: 7px;
  color: var(--mu); font-size: 10.5px; text-align: center; line-height: 1.2;
}

/* слежки */
.watch { display: flex; align-items: center; gap: 10px; }
.watch > img {
  width: 58px; height: 40px; object-fit: contain; flex: none; padding: 4px;
  background: var(--item); border-radius: var(--r);
}
.watch-body { flex: 1; min-width: 0; }
.watch-t { font-size: 13.5px; font-weight: 600; }
.watch-s { margin-top: 2px; line-height: 1.4; }

/* купленные: сетка предметов */
.items { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.items > .empty { grid-column: 1 / -1; }
.buyrow {
  background: var(--sf); border: 1px solid var(--ln); border-radius: var(--r-lg);
  overflow: hidden; display: grid; align-content: start; min-width: 0;
}
.buyrow > .art { position: relative; border-radius: 0; height: 84px; }
.buyrow > .art > img:first-child { max-height: 60px; }
/* лицо продавца на углу картинки скина */
.buyrow .buy-av {
  position: absolute; left: 8px; bottom: 8px;
  width: 34px; height: 34px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--sf); background: var(--sf2);
  box-shadow: 0 2px 6px rgb(0 0 0 / .35);
}
.buyrow .buy-av.noface { display: flex; font-size: 13px; color: var(--mu); }
.buyrow-body { padding: 9px 10px 10px; display: grid; gap: 3px; min-width: 0; }
.buyrow-t { font-size: 13px; line-height: 1.25; overflow-wrap: anywhere; }
.buyrow-t b { font-weight: 600; }
.buyrow-s { color: var(--mu); font-size: 11.5px; display: flex; align-items: center; gap: 6px; min-width: 0; overflow-wrap: anywhere; }
.buyrow-s img, .buyrow-s .noface { width: 18px; height: 18px; border-radius: 50%; flex: none; }
.buyrow-ok { font: 600 15px var(--disp); letter-spacing: -.02em; margin-top: 2px; }
.buyrow-ok.is-pay { color: var(--ac); }
.buyrow .stick-row { margin-top: 2px; }

/* ======================= история продаж ======================= */
.sale-head { display: flex; align-items: center; gap: 10px; }
.sale-skin {
  width: 52px; height: 36px; object-fit: contain; flex: none; padding: 3px;
  background: var(--item); border-radius: var(--r);
}
.sale-title { display: block; font-size: 13px; font-weight: 600; }
.sale-meta { display: block; color: var(--mu); font-size: 11px; margin-top: 2px; }
.sale-g { margin-left: auto; font-size: 14px; font-weight: 600; color: var(--up); white-space: nowrap; }
.sale-card {
  display: grid; grid-template-columns: 56px 1fr auto; gap: 10px; align-items: center;
  width: 100%; padding: 10px 0; border: 0; border-bottom: 1px solid var(--ln);
  background: transparent; color: var(--tx); cursor: pointer; text-align: left;
}
.sale-card:last-of-type { border-bottom: 0; }
.sale-card.is-on { background: var(--ac-soft); border-radius: var(--r); padding-left: 8px; padding-right: 8px; }
.sale-card img {
  width: 56px; height: 38px; object-fit: contain; padding: 3px;
  background: var(--item); border-radius: var(--r);
}
.sale-n { font-size: 15px; font-weight: 600; text-align: right; }
.sale-n small { display: block; color: var(--mu); font-size: 10.5px; font-weight: 400; }

/* ======================= лимиты ======================= */
.lim-slider {
  width: 100%; margin: 8px 0 4px; -webkit-appearance: none; appearance: none;
  height: 28px; background: transparent; cursor: pointer;
}
.lim-slider::-webkit-slider-runnable-track { height: 4px; border-radius: var(--pill); background: var(--sf2); }
.lim-slider::-moz-range-track { height: 4px; border-radius: var(--pill); background: var(--sf2); }
.lim-slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 22px; height: 22px; margin-top: -9px; border-radius: 50%;
  background: var(--sf); border: 2px solid var(--ac); cursor: pointer;
}
.lim-slider::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--sf); border: 2px solid var(--ac); cursor: pointer;
}
.lim-row { display: flex; align-items: center; gap: 8px; }
.lim-num { max-width: 140px; font-weight: 600; }
.lim-unit { color: var(--ac); font-size: 12.5px; font-weight: 600; }
.lim-acts, .prof-acts, .cfg-acts { display: flex; gap: 6px; margin-top: 12px; }
.lim-acts button, .prof-acts button, .cfg-acts button {
  flex: 1; min-height: 38px; padding: 8px 6px; border-radius: var(--pill); border: 1px solid var(--ln2);
  background: transparent; color: var(--tx); font: 500 12.5px var(--sans); cursor: pointer;
}
.lim-acts .apply { background: var(--ac); border-color: var(--ac); color: var(--ac-ink); font-weight: 600; }
.lim-acts .danger { color: var(--down); }

/* переключатели */
.sw-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--ln);
}
.sw-row:last-of-type { border-bottom: 0; }
.sw-title { font-size: 13.5px; font-weight: 500; }
.sw-sub { color: var(--mu); font-size: 11.5px; margin-top: 1px; }
.sw { position: relative; flex: none; width: 40px; height: 24px; cursor: pointer; }
.sw input { position: absolute; opacity: 0; width: 0; height: 0; }
.sw span {
  position: absolute; inset: 0; border-radius: var(--pill);
  background: var(--ln2); transition: background .2s;
}
.sw span::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 18px; height: 18px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 2px rgb(0 0 0 / .3);
  transition: transform .22s var(--ease);
}
.sw input:checked + span { background: var(--ac); }
.sw input:checked + span::after { transform: translateX(16px); }
.sw input:disabled + span { opacity: .45; cursor: default; }
.sw input:focus-visible + span { outline: 2px solid var(--ac); outline-offset: 2px; }

/* ======================= профили ======================= */
.prof-name { font-size: 14px; font-weight: 600; }
.prof-skin { color: var(--mu); font-size: 11.5px; }
.prof-src {
  flex: none; padding: 1px 8px; border-radius: var(--pill); background: var(--sf2);
  color: var(--mu); font-size: 10.5px; font-weight: 500;
}
.prof-bal { margin-left: auto; font-size: 13.5px; font-weight: 600; }
.tokrow { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 11.5px; color: var(--mu); overflow-wrap: anywhere; }
.setgrid { display: grid; gap: 10px; }
.setrow { display: flex; flex-direction: column; gap: 5px; }
.setrow label { font-size: 12.5px; font-weight: 500; }
.setrow em { font-style: normal; color: var(--mu); font-size: 11px; }
.prof-off { opacity: .7; }

/* ======================= настройки на карточке ======================= */
.cfg { margin-top: 12px; border-top: 1px solid var(--ln); transition: opacity .2s; }
.cfg.busy { opacity: .5; pointer-events: none; }
.cfg summary {
  list-style: none; cursor: pointer; padding: 10px 0 2px; min-height: 32px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  -webkit-user-select: none; user-select: none;
}
.cfg summary::-webkit-details-marker { display: none; }
.cfg summary::after {
  content: ""; margin-left: auto; width: 7px; height: 7px; flex: none;
  border-right: 1.5px solid var(--mu); border-bottom: 1.5px solid var(--mu);
  transform: rotate(45deg) translateY(-2px); transition: transform .2s var(--ease);
}
.cfg[open] summary::after { transform: rotate(-135deg) translateY(-1px); }
.cfg-t { font-size: 12.5px; font-weight: 600; }
.cfg-brief { color: var(--mu); font-size: 11px; }
.cfg.dirty .cfg-t::after { content: ", не сохранено"; color: var(--warn); font-weight: 500; }
.cfg.saved .cfg-t::after { content: ", сохранено"; color: var(--up); font-weight: 500; }
.cfg-body { padding: 4px 0 2px; }
.cfg-g { margin: 14px 0 4px; color: var(--mu); font-size: 11px; font-weight: 600; }
.cfg-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 7px 0; border-top: 1px solid var(--ln);
}
.cfg-g + .cfg-row { border-top: 0; }
.cfg-l { font-size: 12.5px; line-height: 1.3; min-width: 0; }
.cfg-l em { display: block; font-style: normal; color: var(--mu); font-size: 11px; margin-top: 1px; }
.cfg-i {
  width: 92px; flex: none; padding: 6px 9px; text-align: right;
  border: 1px solid var(--ln2); border-radius: var(--r);
  background: var(--bg); color: var(--tx); font: 600 13px var(--sans);
}
.cfg-i:focus { outline: 0; border-color: var(--ac); }
.cfg-i.is-ch { border-color: var(--warn); }
.cfg-i::-webkit-outer-spin-button, .cfg-i::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cfg-acts .cfg-save:not(:disabled) { background: var(--ac); border-color: var(--ac); color: var(--ac-ink); font-weight: 600; }
.cfg-acts button:disabled { opacity: .4; cursor: default; }

/* ======================= шторка ======================= */
.backdrop {
  position: fixed; inset: 0; z-index: 30; background: rgba(0, 0, 0, .55);
  animation: fade .18s var(--ease) both;
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.sheet {
  position: fixed; z-index: 31; left: 0; right: 0; bottom: 0;
  max-height: 88vh; overflow-y: auto;
  padding: 8px 16px calc(20px + env(safe-area-inset-bottom));
  border-radius: 20px 20px 0 0; border-top: 1px solid var(--ln2);
  background: var(--sf); animation: sheet-up .26s var(--ease) both;
}
@keyframes sheet-up { from { transform: translateY(100%); } to { transform: none; } }
.sheet-grab { width: 36px; height: 4px; border-radius: 2px; background: var(--ln2); margin: 2px auto 12px; }
.sheet-head { margin-bottom: 10px; }
.sheet-body { padding-bottom: 6px; }
.sheet-foot { margin-top: 16px; }
#zoom-img { width: 100%; max-height: 42vh; object-fit: contain; margin-top: 8px; background: var(--item); border-radius: var(--r-lg); }

/* 3D-модель: сцена на тёмной подложке, как картинки предметов */
.sheet-3d { max-height: 96vh; }
/* окно модели квадратное, но не выше экрана: на низком телефоне сужается */
.m3d-stage {
  position: relative; width: min(100%, 64vh); aspect-ratio: 1 / 1; margin: 4px auto 0;
  background: radial-gradient(120% 90% at 50% 40%, #232a31 0%, var(--item) 70%);
  border-radius: var(--r-lg); overflow: hidden;
}
.m3d-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: min(100%, 64vh); margin: 12px auto 0;
}
.m3d-slots { display: flex; gap: 6px; }
.m3d-slot {
  position: relative; width: 50px; height: 50px; flex: none;
  display: grid; place-items: center;
  background: var(--sf2); border: 1px solid var(--ln); border-radius: var(--r);
}
.m3d-slot img { width: 42px; height: 42px; object-fit: contain; }
.m3d-slot i {
  position: absolute; left: 4px; top: 2px;
  font: normal 600 10.5px var(--sans); color: var(--mu);
}
.m3d-slot.is-on { border-color: var(--ac); }
.m3d-slot.is-on i { color: var(--ac); }
.m3d-slot:not(.is-on) { opacity: .5; }
.m3d-pat {
  display: flex; align-items: center; gap: 8px; flex: none;
  padding: 6px 12px 6px 8px; background: var(--sf2); border-radius: var(--r);
}
.m3d-pat .ph-fill { font-size: 30px; color: var(--ac); }
.m3d-pat span { display: block; font-size: 10.5px; color: var(--mu); line-height: 1.1; }
.m3d-pat b { display: block; font: 600 18px/1.1 var(--disp); letter-spacing: -.02em; }
@media (max-width: 360px) { .m3d-slot { width: 44px; height: 44px; } .m3d-slot img { width: 36px; height: 36px; } }
#m3d-canvas { width: 100%; height: 100%; display: block; touch-action: none; }
.m3d-msg {
  position: absolute; inset: 0; display: grid; place-items: center; padding: 20px;
  color: var(--tx); font-size: 13px; text-align: center; pointer-events: none;
}
.m3d-msg:empty { display: none; }
.m3d-open { margin-top: 12px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.buyrow > .art[data-pi] { cursor: pointer; }
.buyrow > .art[data-pi]::after {
  content: "3D"; position: absolute; right: 8px; top: 8px;
  padding: 1px 7px; border-radius: var(--pill);
  background: rgb(0 0 0 / .55); color: #fff; font: 600 10.5px var(--sans);
}
.pay-3d { justify-self: start; min-height: 32px; padding: 4px 12px; font-size: 12.5px; width: auto; }

/* итог покупки */
.bought { text-align: center; padding: 10px 0 4px; }
.bought-mark {
  width: 52px; height: 52px; margin: 0 auto 12px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font: 600 22px var(--sans); color: var(--up); background: var(--up-soft);
}
.bought-mark.no { color: var(--down); background: var(--down-soft); }
.bought-title { font-size: 16px; font-weight: 600; }
.bought-rows { margin: 16px 0 0; text-align: left; }
.bought-rows > div {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid var(--ln); font-size: 13px;
}
.bought-rows dt { color: var(--mu); }
.bought-rows dd { margin: 0; font-weight: 600; }

/* строка выбора аккаунта в шторке «Чем платим?» */
.payrow {
  display: flex; align-items: center; gap: 12px;
  width: 100%; min-height: 58px; padding: 10px 12px;
  margin-bottom: 6px; border: 1px solid var(--ln); border-radius: var(--r);
  background: var(--sf2); color: var(--tx); text-align: left; cursor: pointer;
  transition: border-color .12s var(--ease), background .12s var(--ease);
}
.payrow:last-of-type { margin-bottom: 0; }
.payrow:not(:disabled):hover { border-color: var(--ac); }
.payrow:not(:disabled):active { background: var(--ln); }
.payrow:disabled { cursor: default; opacity: .55; }
.payrow-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.payrow-name { font-size: 14px; font-weight: 600; }
.payrow-why { color: var(--mu); font-size: 11.5px; line-height: 1.3; overflow-wrap: anywhere; }
.payrow-money { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; margin-left: auto; flex: none; text-align: right; }
.payrow-bal { font-size: 14px; font-weight: 600; }
.payrow-bal.no { color: var(--mu); }
.payrow-left { font-size: 11px; color: var(--mu); }
.payrow-left.no { color: var(--down); }
.buyrow-ok.no { color: var(--down); }

/* ======================= всплывашка ======================= */
.toast {
  position: fixed; z-index: 60; left: 12px; right: 12px;
  bottom: calc(var(--nav-h) + 12px + env(safe-area-inset-bottom));
  padding: 12px 14px; border-radius: var(--r-lg);
  background: var(--tx); color: var(--bg);
  font-size: 13px; font-weight: 500; animation: toast-in .22s var(--ease) both;
  box-shadow: 0 8px 24px rgb(0 0 0 / .25);
}
.toast.bad { background: var(--down); color: #fff; }
@keyframes toast-in { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }

.flash { animation: flash .8s var(--ease); }
@keyframes flash { from { color: var(--ac); } to { color: inherit; } }

/* ======================= выключатель аккаунта ======================= */
.acc-power {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin-top: 12px; padding: 9px 11px; border-radius: var(--r); background: var(--sf2);
  transition: opacity .2s;
}
.acc-power.busy { opacity: .55; pointer-events: none; }
.acc-power-t { font-size: 12.5px; font-weight: 600; }
.acc-power-s { color: var(--mu); font-size: 11px; margin-top: 1px; }

/* выключенная карточка: содержимое приглушено, шапка и тумблер живые */
.card.is-off { background: var(--bg); border-style: dashed; }
.card.is-off .acc-name, .card.is-off .acc-state, .card.is-off .acc-power-t { color: var(--mu); }
.card.is-off .acc-skin img { opacity: .45; filter: grayscale(1); }
.card.is-off > :not(.acc-top):not(.acc-power) {
  opacity: .45; filter: grayscale(1); pointer-events: none; user-select: none;
}

/* ======================= мелкие экраны ======================= */
@media (max-width: 360px) {
  .fig.xl { font-size: 27px; }
  .acc-stats { grid-template-columns: repeat(3, 1fr); }
  .strip { grid-template-columns: repeat(2, 1fr); }
  .auto { grid-template-columns: 1fr; }
  .nums { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 640px) {
  .page { max-width: 640px; margin: 0 auto; }
  .app-bar { max-width: 640px; margin: 0 auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ============ строка списка: тикеты, лист ожидания, игнор ============ */
/* Один вид на три раздела: слева имя и подпись, справа кнопка одной ширины.
   .ghost растягивается на всю строку (width:100%) — для списка это не
   годится, поэтому у кнопки свой класс, а не переопределение .ghost. */
.lrow {
  display: flex; align-items: center; gap: 10px;
  min-height: 52px; padding: 7px 0;
  border-bottom: 1px solid var(--ln);
}
.lrow:last-of-type { border-bottom: 0; }
.lrow-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lrow-t { display: flex; align-items: center; gap: 7px; min-width: 0; }
.lrow-t .dot { flex: none; }
.lrow-name {
  font-size: 14px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lrow-s {
  font-size: 11.5px; color: var(--mu);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lrow.is-stale .lrow-s { color: var(--warn); }
.lrow-btn {
  flex: none; width: 104px; min-height: 36px; padding: 8px 6px;
  border: 1px solid var(--ln2); border-radius: var(--pill);
  background: transparent; color: var(--tx);
  font-size: 12.5px; font-weight: 500; text-align: center;
}
.lrow-btn:active { background: var(--ln); }
.lrow-btn:disabled { color: var(--mu); border-color: var(--ln); }

/* ======================= лента событий ======================= */
.ev2 {
  display: flex; align-items: baseline; gap: 8px;
  padding: 7px 0; border-bottom: 1px solid var(--ln);
  font-size: 12.5px; line-height: 1.35; overflow-wrap: anywhere;
}
.ev2:last-of-type { border-bottom: 0; }
.ev2 i { font-size: 14px; color: var(--mu); flex: none; }
.ev2-t { color: var(--faint); font-variant-numeric: tabular-nums; flex: none; }
.ev2-a { color: var(--ac); font-weight: 600; flex: none; }
.ev2-x { color: var(--tx); min-width: 0; }
.ev-err i, .ev-err .ev2-x { color: var(--down); }
.ev-sell i { color: var(--up); }
.ev-buy i { color: var(--ac); }
.ev-cancel .ev2-x { color: var(--mu); }

/* =================== лист ожидания и игнор =================== */
.wlrow {
  display: flex; align-items: center; gap: 8px;
  min-height: 42px; border-bottom: 1px solid var(--ln);
}
.wlrow:last-of-type { border-bottom: 0; }
.wl-who { font-size: 13.5px; font-weight: 600; overflow-wrap: anywhere; }
.wl-when { flex: 1; font-size: 11.5px; color: var(--mu); }
.wlrow .ghost { padding: 6px 10px; font-size: 12px; }

/* Деньги: столбики по дням во всю ширину карточки */
#mn-chart { width: 100%; display: block; }

/* Поле и кнопка в одной строке: .cta и .input по отдельности тянутся на всю
   ширину, в паре это давало крошечное поле и кнопку во весь экран. */
.row > .input { flex: 1; min-width: 0; }
.row > .cta { flex: none; width: auto; margin-top: 0; padding: 12px 18px; }
.row > .sw { flex: none; }
