/* UX-слой по ui-skills playbook */
/* tabular-nums для всех чисел */
.portfolio .val, .brow, .phead, .hist-row, .hspread b,
.field input[type=number], #est-price, #usda-in, #usdc-out, #total-usdt, #br-amt {
  font-variant-numeric: tabular-nums;
}

/* фокус-ринги с клавиатуры */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible,
input:focus-visible, textarea:focus-visible {
  outline: 2px solid #7c9cff;
  outline-offset: 2px;
}

/* press-фидбек кнопок */
.btn:active, .btab:active, .tab:active, .copybtn:active {
  transform: scale(.97);
  transition: transform .08s ease-out;
}

/* ошибки в полях — под полем */
.field { position: relative; }
.ferr {
  color: #ff8080; font-size: 12px; margin-top: 4px;
  display: none;
}
.field.err input { border-color: #ff5f5f; }
.field.err .ferr { display: block; }

/* skeleton истории и стакана */
.skel { animation: skel 1.2s ease-out infinite; border-radius: 6px; }
@keyframes skel { 0% { opacity:.45; } 50% { opacity:.15; } 100% { opacity:.45; } }

/* пустое состояние истории — одна кнопка */
.empty { text-align: center; color: var(--muted); padding: 28px 0; }
.empty button {
  margin-top: 10px; background: none; border: 1px solid var(--line);
  color: var(--tx); padding: 8px 18px; border-radius: 10px; cursor: pointer;
}
.empty button:hover { border-color: var(--acc); }

/* стек сообщений (заменяет alert) */
#toasts {
  position: fixed; top: 16px; right: 16px; z-index: 99;
  display: flex; flex-direction: column; gap: 8px; max-width: 340px;
}
.toast {
  background: #1a2030; border: 1px solid var(--line); color: var(--tx);
  border-left: 3px solid var(--acc); border-radius: 10px; padding: 12px 14px;
  font-size: 14px; box-shadow: 0 8px 24px rgba(0,0,0,.4);
  animation: toast-in .18s ease-out;
}
.toast.err { border-left-color: #ff5f5f; }
.toast.ok { border-left-color: #3ddc84; }
@keyframes toast-in { from { opacity:0; transform: translateY(-8px);} to { opacity:1; transform:none;} }

/* вход анимации — с 95%, не с нуля */
.card, .tab, .brow { animation: fade-in .22s ease-out; }
@keyframes fade-in { from { opacity:0; transform: scale(.97) translateY(4px);} to { opacity:1; transform:none;} }

/* тач-таргеты 44px */
.btn { min-height: 44px; }
.copybtn, .tab { min-height: 44px; }
.xbtn { min-width: 44px; min-height: 44px; }

/* поле суммы + суффикс-токен */
.amount-wrap { position: relative; display: flex; align-items: center; }
.amount-wrap input { padding-right: 64px; }
.amount-suffix {
  position: absolute; right: 12px; color: var(--muted);
  font-size: 13px; pointer-events: none; font-weight: 600;
}