/* Degenix lab, Telegram Mini App (LAB-D3): the boards as cards at phone width, on app.css's tokens. */
body.mini { font-size: 14px; padding-bottom: env(safe-area-inset-bottom); }
.mini .top { padding: 8px 16px; }
.mini .fresh { font-size: 11px; }
.mini-tabs { display: flex; gap: 4px; padding: 8px 16px 0; }
.mini-tabs button { flex: 1; padding: 8px 0; }
.mini .filters label { flex: 1 1 40%; }
.mini .filters select { width: 100%; padding: 6px; }
.mini .chips { flex: 1 1 100%; }
.mini .chips button { flex: 1; padding: 6px 0; }

.cards { display: flex; flex-direction: column; gap: 8px; padding: 8px 16px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px;
  display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; cursor: pointer; text-align: left; width: 100%; }
.card:active { background: var(--raise); }
.card .coin { max-width: none; }
.card .right { text-align: right; font-variant-numeric: tabular-nums; }
.card .big { font-size: 16px; font-weight: 700; }
.card .line { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 12px; color: var(--ink-2);
  font-variant-numeric: tabular-nums; }
.card .line b { color: var(--ink); font-weight: 600; }

.sheet { position: fixed; inset: 0; background: var(--page); overflow-y: auto; z-index: 10; }
.sheet-head { position: sticky; top: 0; display: flex; padding: 8px 16px; background: var(--surface);
  border-bottom: 1px solid var(--line); z-index: 1; }
.sheet-head button { background: transparent; border: 1px solid var(--line); border-radius: 4px; padding: 6px 12px; }
.sheet .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sheet .board { margin: 0 -16px; }
.gate { padding: 24px 16px; color: var(--ink-2); }
.gate b { color: var(--ink); }