:root {
  --bg: #1E282F;
  --panel: #26323A;
  --line: #3A4853;
  --steel: #9FB0BB;
  --bone: #ECE7D8;
  --brass: #E0B054;
  --brass-dim: #8A6B26;
  --alarm: #D9553C;
  --tabs-h: 62px;
  --font-display: "Russo One", "Arial Black", sans-serif;
  --font-body: "Golos Text", system-ui, -apple-system, "Segoe UI", sans-serif;
}

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

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--bone);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.45;
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
}

button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }

#app {
  height: calc(100dvh - var(--tabs-h) - env(safe-area-inset-bottom));
  overflow-y: auto;
  padding: 16px 18px 20px;
}

.screen { display: none; min-height: 100%; }
.screen.active { display: flex; flex-direction: column; }

h2 {
  margin: 4px 0 6px;
  font: 400 26px/1.1 var(--font-display);
  letter-spacing: .01em;
}
.lead { margin: 0 0 16px; color: var(--steel); }
.lead b { color: var(--bone); font-weight: 600; }

/* ---------- Хранилище ---------- */
#screen-vault { align-items: center; justify-content: space-between; gap: 10px; }

.balance { text-align: center; padding-top: 4px; width: 100%; max-width: 100%; }
.amount {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  text-wrap: balance;
  font: 400 clamp(40px, 13vw, 56px)/1.1 var(--font-display);
  color: var(--bone);
  font-variant-numeric: tabular-nums;
}
.balance-sub { margin-top: 6px; color: var(--steel); font-size: 14px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.dial-wrap {
  position: relative;
  width: min(88vw, 49dvh, 376px);
  aspect-ratio: 1;
  margin-bottom: 28px; /* приподнимает колесо */
  touch-action: manipulation;
}
.dial { width: 100%; height: 100%; display: block; filter: drop-shadow(0 14px 22px rgba(0,0,0,.45)); }
/* тапается и крутится только внутренний диск; корпус (обод, болты, указатель) неподвижен */
#dial { cursor: pointer; }
#dialPress, #dial {
  transform-box: view-box;
  transform-origin: 150px 150px;
}
/* вращение #dial плавно догоняет целевой угол в JS (requestAnimationFrame), CSS-transition не нужен */

.pop {
  position: absolute;
  pointer-events: none;
  font: 400 24px/1 var(--font-display);
  color: var(--brass);
  text-shadow: 0 2px 0 rgba(0,0,0,.5);
  transform: translate(-50%, -50%);
  will-change: transform, opacity;
}

/* нижняя строка: доход слева, заряд справа; зоны одной высоты */
.status-row {
  width: 100%; max-width: 360px;
  display: flex; align-items: stretch; gap: 10px;
}
.zone {
  min-height: 46px;
  border-radius: 6px;
  position: relative;
  overflow: hidden;
}
.income-zone {
  flex: 0 0 124px;
  background: var(--brass);
  color: var(--bg);
  padding: 8px 10px;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
}
.income {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
/* пустой доход: зона по ширине текста, отступы со всех сторон одинаковые (8px) */
.income-zone.empty { flex: 0 0 auto; width: min-content; padding: 5px 8px 11px; }  /* текст приподнят на 3px, слева 8px */  /* ширина = «Нет пассивного», «дохода» уходит на 2-ю строку */
.income.empty { font-size: 12.5px; font-weight: 600; color: var(--bg); }  /* как тёмная подпись «Заряд» */

/* зона заряда сама является шкалой: жёлтая заливка по уровню заряда */
.energy {
  flex: 1; min-width: 0;
  background: #151D22;
  border: 1px solid var(--energy-color, var(--brass));
}
.energy-fill {
  position: absolute; inset: 0;
  background: var(--energy-color, var(--brass));
  transform-origin: left center;
}
.energy-label {
  position: absolute; inset: 0;
  padding: 0 12px;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 15px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.energy-label-light { color: var(--energy-color, var(--brass)); }
/* тёмная копия подписи видна только поверх заливки (обрезается в JS) */
.energy-label-dark { color: var(--bg); }

.daily {
  width: 100%; max-width: 360px;
  padding: 12px 14px;
  background: transparent;
  border: 1px solid var(--brass);
  border-radius: 6px;
  color: var(--brass);
  font-weight: 600;
}
.daily:active { background: rgba(224,176,84,.12); }
.daily[hidden] { display: none; }

/* ---------- Улучшения ---------- */
.upgrades, .top { list-style: none; margin: 0; padding: 0; }

.up {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}
.up:last-child { border-bottom: 1px solid var(--line); }
.up-main { flex: 1; min-width: 0; }
.up h3 { margin: 0; font-size: 16px; font-weight: 600; }
.up .lvl { color: var(--steel); font-weight: 400; font-size: 13px; margin-left: 6px; }
.up p { margin: 2px 0 0; color: var(--steel); font-size: 13.5px; }
.up .eff { color: var(--bone); font-variant-numeric: tabular-nums; }

.buy {
  min-width: 92px;
  padding: 10px 12px;
  background: var(--brass);
  color: #2B1F07;
  border: 0;
  border-radius: 6px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.buy:active { transform: translateY(1px); }
.buy:disabled { background: transparent; border: 1px solid var(--line); color: var(--steel); cursor: default; }

/* ---------- Рейтинг ---------- */
.top li {
  display: grid; grid-template-columns: 34px 1fr auto; gap: 8px;
  padding: 11px 8px 11px 10px;
  border-top: 1px solid var(--line);
  border-left: 3px solid transparent;
}
.top li:last-child { border-bottom: 1px solid var(--line); }
.top li.me { border-left-color: var(--brass); background: rgba(224,176,84,.07); }
.top .pos { color: var(--steel); font-variant-numeric: tabular-nums; }
.top li:nth-child(-n+3) .pos { color: var(--brass); font-weight: 600; }
.top .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top .sc { font-variant-numeric: tabular-nums; color: var(--bone); }

/* ---------- Друзья ---------- */
.friends-count { margin: 4px 0 24px; }
.friends-count span { display: block; font: 400 64px/1 var(--font-display); }
.friends-count small { color: var(--steel); font-size: 14px; }
.friends-actions { display: grid; gap: 10px; }
.btn {
  padding: 14px; border-radius: 6px; border: 1px solid var(--line);
  background: transparent; font-weight: 600;
}
.btn.primary { background: var(--brass); border-color: var(--brass); color: #2B1F07; }
.btn:active { transform: translateY(1px); }

/* Рефералы: «Вас пригласил» и список приглашённых */
.invited, .refs { margin-top: 28px; }
.invited .sub, .refs .sub { margin-top: 0; }
.bonus-inline { color: var(--bone); font-weight: 600; }
.refs-total { color: var(--steel); font-weight: 400; font-size: 14px; margin-left: 4px; }
#invitedBy { margin-bottom: 6px; }
#invitedForm .promo-row { margin-top: 10px; }
#refMore { width: 100%; margin-top: 10px; }
#invitedBy[hidden], #invitedForm[hidden], #invitedMeta[hidden], #refMore[hidden] { display: none; }
.promo { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--line); }
.promo h3 { margin: 0 0 10px; font-size: 17px; font-weight: 600; }
.promo-row { display: flex; gap: 8px; }
.promo-row .btn { padding: 12px 14px; white-space: nowrap; }
input {
  flex: 1; min-width: 0;
  padding: 12px;
  font: 500 16px var(--font-body);   /* 16px, чтобы iOS не увеличивал страницу при фокусе */
  letter-spacing: .04em;
  color: var(--bone);
  background: #151D22;
  border: 1px solid var(--line);
  border-radius: 6px;
  -webkit-user-select: text; user-select: text;
}
input::placeholder { color: #66778A; letter-spacing: 0; }
.promo-msg { margin: 10px 0 0; color: var(--alarm); font-size: 14px; }
.promo .btn#promoLink { margin-top: 10px; width: 100%; }
.promo-msg[hidden], #promoLink[hidden] { display: none; }

/* ---------- Игры ---------- */
.games { list-style: none; margin: 0; padding: 0; }
.game-card {
  display: flex; flex-direction: column; align-items: stretch; gap: 14px; width: 100%;
  padding: 16px 16px 18px; margin-bottom: 12px; text-align: left;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
}
.game-card:active { transform: translateY(1px); }
.game-card .gc-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.game-card .gc-icon {
  flex: none; width: 56px; height: 56px; border-radius: 14px;
  display: grid; place-items: center;
  background: #1B242A; border: 1px solid var(--line); color: var(--brass);
}
.game-card .gc-icon svg { width: 36px; height: 36px; display: block; }
.game-card .gc-main { min-width: 0; }
.game-card h3 { margin: 0; font: 400 20px/1.1 var(--font-display); }
.game-card p { margin: 4px 0 0; color: var(--steel); font-size: 13.5px; }
.gc-status {
  flex: 1; min-width: 0; max-width: 70%; margin-left: auto;
  padding: 7px 12px; border-radius: 10px; text-align: center;
  font-size: 13px; font-weight: 600; line-height: 1.3; font-variant-numeric: tabular-nums;
}
.gc-status small { display: block; font-size: 12px; font-weight: 500; opacity: .85; }
.gc-status.wait { background: #E4B23A; color: #2B1F07; }
.gc-status.live { background: #3BA840; color: #fff; }
.gc-status.spin { background: #3470FF; color: #fff; }
.gc-status.show { background: #A324D6; color: #fff; }

.back { background: none; border: 0; padding: 4px 0 8px; color: var(--steel); font-weight: 500; }
.lobby-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.lobby-bal { text-align: right; font-variant-numeric: tabular-nums; }
.lobby-bal b { display: block; font: 400 22px/1 var(--font-display); }
.lobby-bal small { color: var(--steel); font-size: 12px; }

.stage {
  display: block; width: 100%; height: 264px; margin: 12px 0 10px;
  border-radius: 14px; background: var(--panel); border: 1px solid var(--line);
}
.num.red { background: #B8372B; border-color: #E0705F; }
.num.black { background: #11181C; border-color: #4A5A66; }
.num.green { background: #2E7D4F; border-color: #5FBF86; }
.num.yellow { background: #B88A2A; border-color: #E3B450; }
.phase { min-width: 0; min-height: 40px; margin-bottom: 8px; font-weight: 500; line-height: 1.35; text-align: center; }
.phase small { display: block; color: var(--steel); font-weight: 400; margin-top: 2px; }
.phase .plus { color: #6FD39A; font-weight: 600; }
.phase .minus { color: #F08A78; font-weight: 600; }

.timer { height: 6px; background: #151D22; border-radius: 3px; overflow: hidden; margin-bottom: 10px; }
.timer-fill { height: 100%; background: var(--brass); transform-origin: left center; transform: scaleX(0); }
.timer-fill.hot { background: var(--alarm); }

.history { display: flex; gap: 5px; flex-wrap: wrap; min-height: 26px; margin-bottom: 6px; }
.hist-hint { display: block; margin-bottom: 12px; font-size: 11px; color: var(--steel); }
.num {
  display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  border: 1.5px solid; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums;
  padding: 0; color: inherit; font-family: inherit; cursor: pointer;
}
.num.picked { box-shadow: 0 0 0 2px var(--brass); }

/* ---------- Панель ставок ---------- */
.bet-panel { display: grid; gap: 8px; margin-bottom: 4px; }
.pill {
  padding: 12px 8px; border-radius: 999px; border: 0;
  background: #20232F; color: var(--bone); font-weight: 600; font-size: 15px;
  font-variant-numeric: tabular-nums;
}
.pill:active { transform: translateY(1px); filter: brightness(1.15); }
.quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.amount-row { display: grid; grid-template-columns: 1fr 54px 54px; gap: 6px; }
.amount-row input { border-radius: 999px; padding: 12px 18px; background: #20232F; border: 0; letter-spacing: 0; }
.pill.round { padding: 0; }
.pill.wide { width: 100%; background: #554BF2; color: #fff; font-size: 16px; padding: 15px 8px; }
.pill.wide[aria-expanded="true"] { background: #3F37C4; }

.board { display: grid; gap: 6px; }
.board.locked, .numgrid.locked { opacity: .55; pointer-events: none; }
.b-row { display: flex; gap: 6px; align-items: center; }
.cell {
  position: relative; flex: 1; min-width: 0; display: flex; align-items: stretch;
  padding: 0; border: 0; border-radius: 999px; color: #fff;
  background: #20232F; font-weight: 500; font-size: 17px; font-variant-numeric: tabular-nums;
}
.cell:active { transform: translateY(1px); filter: brightness(1.12); }
.cell .t { flex: 1; padding: 13px 6px; text-align: center; white-space: nowrap; }
.cell .m {
  display: grid; place-items: center; padding: 0 12px 0 10px; font-size: 12px; font-weight: 400;
  background: rgba(0,0,0,.16); border-radius: 0 999px 999px 0; opacity: .95;
}
.cell.red { background: #DC2F4B; }
.cell.black { background: #000; }
.cell.green { background: #3BA840; }
.cell.yellow { background: #DDAF48; }
.cell.blue { background: #3470FF; }
.cell.purple { background: #A324D6; }
.cell.zero { flex: none; width: 56px; height: 56px; padding: 0; justify-content: center; align-items: center; background: #3BE04F; color: #0E2A12; }
.cell.zero .t { padding: 0; }
.cell.mine { box-shadow: 0 0 0 2px var(--brass); }
.cell .stake {
  position: absolute; top: -7px; right: 6px; padding: 1px 7px; border-radius: 9px;
  background: var(--brass); color: #2B1F07; font-size: 11px; font-weight: 700;
}
.cell.win:not(.mine) { box-shadow: 0 0 0 2px rgba(111,211,154,.55); }
.cell.hit { box-shadow: 0 0 0 2px #6FD39A; }

.numgrid { display: grid; gap: 6px; }
.numgrid .cell { border-radius: 14px; flex-direction: column; font-size: 16px; }
.numgrid .cell .t { padding: 10px 0 2px; }
.numgrid .cell .m { background: none; padding: 0 0 8px; font-size: 11px; opacity: .8; border-radius: 0; }
.numgrid .cell .stake { right: -3px; }
.numgrid[hidden] { display: none; }

.fair { margin: 0 0 14px; padding: 10px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; }
.fair[hidden], .fair-row[hidden] { display: none; }
.fair-title { font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.fair-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--steel); margin-top: 4px; }
.fair-row code { min-width: 0; overflow-wrap: anywhere; text-align: right; color: var(--bone); font: 500 12px/1.3 ui-monospace, Menlo, monospace; -webkit-user-select: text; user-select: text; }
.fair small { display: block; margin-top: 8px; font-size: 12px; line-height: 1.35; color: var(--steel); }
.fair small.ok { color: #6FD39A; }
.fair small.bad { color: #F08A78; }
.fair-back { margin-top: 8px; padding: 0; border: 0; background: none; color: var(--brass); font: inherit; font-size: 12px; cursor: pointer; }
.fair-back[hidden] { display: none; }

.sub { margin: 18px 0 8px; font-size: 17px; font-weight: 600; }
.players { list-style: none; margin: 0; padding: 0; }
.players li { padding: 10px 8px 10px 10px; border-top: 1px solid var(--line); border-left: 3px solid transparent; }
.players li:last-child { border-bottom: 1px solid var(--line); }
.players li.me { border-left-color: var(--brass); background: rgba(224,176,84,.07); }
.p-top { display: flex; justify-content: space-between; gap: 8px; }
.p-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.p-sum { color: var(--bone); font-variant-numeric: tabular-nums; white-space: nowrap; }
.p-sum .plus { color: #6FD39A; } .p-sum .minus { color: #F08A78; }
.p-bets { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.p-bet {
  padding: 2px 8px; border-radius: 4px; background: #151D22; border: 1px solid var(--line);
  font-size: 13px; font-variant-numeric: tabular-nums;
}
.p-bet b { color: var(--brass); font-weight: 600; margin-left: 4px; }
.p-bet.win { border-color: #6FD39A; }
.empty { color: var(--steel); font-size: 14px; margin: 6px 0 0; }

/* ---------- Профиль и переводы ---------- */
.avatar {
  --h: 200;
  position: relative; flex: none; overflow: hidden;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: hsl(var(--h) 26% 30%); color: #F3EEDF;
  font: 400 18px/1 var(--font-display);
  border: 1px solid rgba(255,255,255,.08);
}
.avatar.xl { width: 72px; height: 72px; font-size: 30px; }
.avatar.sm { width: 38px; height: 38px; font-size: 15px; }
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .15s; }
.avatar.has-img img { opacity: 1; }

.me-card { display: flex; align-items: center; gap: 14px; margin: 4px 0 14px; }
.me-info { min-width: 0; }
.me-name { font: 400 22px/1.15 var(--font-display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me-sub { color: var(--steel); font-size: 13px; margin-top: 3px; overflow-wrap: anywhere; }
.me-balance { margin: 0 0 16px; padding: 14px 16px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; }
.me-balance b { display: block; font: 400 30px/1.1 var(--font-display); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.me-balance small { color: var(--steel); font-size: 13px; }
#profileView > .btn, #amountStep > .btn.primary { width: 100%; }
#txMore { width: 100%; margin-top: 12px; }

.tx { list-style: none; margin: 0; padding: 0; }
.tx li { display: flex; align-items: center; gap: 12px; padding: 10px 2px; border-top: 1px solid var(--line); }
.tx li:last-child { border-bottom: 1px solid var(--line); }
.tx-main { flex: 1; min-width: 0; }
.tx-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tx-meta { color: var(--steel); font-size: 12px; margin-top: 1px; }
.tx-amt { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tx-amt.in { color: #6FD39A; }
.tx-amt.out { color: var(--bone); }

/* Итоги ставок и история игр в профиле */
.bet-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 6px; }
.stat { min-width: 0; padding: 10px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; }
.stat small { display: block; color: var(--steel); font-size: 12px; }
.stat b { display: block; margin-top: 2px; font: 400 20px/1.2 var(--font-display); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.stat b.win, .bet-net.win, .bl-out.win { color: #6FD39A; }
.stat b.lose, .bet-net.lose, .bl-out.lose { color: #F08A78; }
.stat-note { margin: 0 0 14px; }

.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 16px 0 0; padding: 3px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; }
.seg-btn { padding: 9px 0; border: 0; border-radius: 6px; background: transparent; color: var(--steel); font-weight: 600; }
.seg-btn.active { background: var(--brass); color: #2B1F07; }

.bets { list-style: none; margin: 0; padding: 0; }
.bet { padding: 12px 2px; border-top: 1px solid var(--line); }
.bet:last-child { border-bottom: 1px solid var(--line); }
.bet-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.bet-title { min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bet-net { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bet-meta { color: var(--steel); font-size: 12px; margin-top: 1px; }
.bet-lines { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.bet-lines li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 7px 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; }
.bl-main { min-width: 0; }
.bl-ev { font-weight: 600; overflow-wrap: anywhere; }
.bl-amt { color: var(--steel); font-size: 12px; }
.bl-out { font-size: 13px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.bet-fair { margin-top: 8px; font-size: 12px; }
.bet-fair summary { padding: 4px 0; color: var(--brass); cursor: pointer; }
.bet-fair small { display: block; margin-top: 8px; line-height: 1.35; color: var(--steel); }
.bet-fair small.ok { color: #6FD39A; }
.bet-fair small.bad { color: #F08A78; }
#betMore { width: 100%; margin-top: 12px; }

#userSearch { width: 100%; flex: none; letter-spacing: 0; }
#foundMsg { margin: 10px 0 0; }
.found { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.user-row {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 10px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
}
button.user-row:active { transform: translateY(1px); border-color: var(--brass-dim); }
.user-main { flex: 1; min-width: 0; }
.user-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-sub { color: var(--steel); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-bal { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.user-bal small { display: block; color: var(--steel); font-size: 11px; font-weight: 400; }

.picked { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.picked .user-row { flex: 1; min-width: 0; }
.picked .change { flex: none; background: none; border: 0; padding: 8px 4px; color: var(--brass); font-weight: 500; }
.amount-row2 { display: flex; gap: 8px; }
.amount-row2 .btn { padding: 12px 16px; }
.amount-row2 input { letter-spacing: 0; }
#sendHint { margin: 8px 0 14px; min-height: 20px; }
#sendHint.bad { color: #F08A78; }
#sendBtn:disabled { background: transparent; border-color: var(--line); color: var(--steel); cursor: default; }
#profileView[hidden], #sendView[hidden], #pickStep[hidden], #amountStep[hidden],
.empty[hidden], #txMore[hidden], #betMore[hidden] { display: none; }

/* ---------- Навигация и уведомления ---------- */
.tabs {
  position: fixed; left: 0; right: 0; bottom: 0;
  height: calc(var(--tabs-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  display: grid; grid-template-columns: repeat(6, 1fr);
  background: #172026;
  border-top: 1px solid var(--line);
}
.tab {
  background: none; border: 0; border-top: 3px solid transparent;
  color: var(--steel); font-size: 11px; font-weight: 500; padding: 0 1px;
}
.tab.active { color: var(--bone); border-top-color: var(--brass); }

.toast {
  position: fixed; left: 50%; bottom: calc(var(--tabs-h) + env(safe-area-inset-bottom) + 14px);
  transform: translate(-50%, 12px);
  max-width: 88vw;
  padding: 10px 16px;
  background: var(--bone); color: #1B2328;
  border-radius: 6px; font-weight: 500; font-size: 14px;
  opacity: 0; pointer-events: none;
  transition: opacity .18s, transform .18s;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.bad { background: var(--alarm); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  #dial, .toast { transition: none; }
}