/* Тема — переменные Telegram (--tg-theme-*, их ставит telegram-web-app.js);
   запасные значения — для браузера без Telegram (стенд). */
:root {
  --bg: var(--tg-theme-bg-color, #ffffff);
  --text: var(--tg-theme-text-color, #0f1419);
  --hint: var(--tg-theme-hint-color, #6b7280);
  --link: var(--tg-theme-link-color, #2481cc);
  --button: var(--tg-theme-button-color, #2481cc);
  --button-text: var(--tg-theme-button-text-color, #ffffff);
  --section: var(--tg-theme-secondary-bg-color, #f2f3f5);
  --long: #16a34a;
  --short: #dc2626;
  --live: #dc2626;
  --liq: #f59e0b;
  --gap: 16px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: var(--tg-theme-bg-color, #17212b);
    --text: var(--tg-theme-text-color, #f5f5f5);
    --hint: var(--tg-theme-hint-color, #8b9398);
    --section: var(--tg-theme-secondary-bg-color, #232e3c);
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1;
  padding: 0 var(--gap);
}

[hidden] { display: none !important; }

.muted { color: var(--hint); }

.account {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px var(--gap);
  background: var(--section);
  font-size: 13px;
}

.badge {
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--button);
  color: var(--button-text);
  font-weight: 600;
}

.account.live .badge { background: var(--live); }
.account.live { box-shadow: inset 0 -2px 0 var(--live); }

.account-note { width: 100%; color: var(--hint); }

.screen { padding: var(--gap) 0; }

.error-title { font-size: 18px; margin: 0 0 8px; }

.button {
  width: 100%;
  min-height: 44px;
  border: 0;
  border-radius: 10px;
  background: var(--button);
  color: var(--button-text);
  font: inherit;
  font-weight: 600;
}

.button-long { background: var(--long); color: #ffffff; }
.button-short { background: var(--short); color: #ffffff; }

.fallback-buttons {
  display: flex;
  gap: 8px;
  padding: 8px var(--gap) calc(8px + env(safe-area-inset-bottom));
}

.attribution {
  padding: 8px var(--gap) calc(8px + env(safe-area-inset-bottom));
  font-size: 11px;
  text-align: center;
}

.attribution a { color: var(--hint); }

.small { font-size: 12px; }

.button-small { width: auto; min-height: 36px; padding: 0 16px; }

.link-button {
  border: 0;
  background: none;
  color: var(--link);
  font: inherit;
  padding: 8px 0 8px 8px;
}

/* --- Экран рынка (§5а) --- */

.market-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.symbol-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 17px;
  font-weight: 600;
  padding: 4px 0;
  margin-right: auto;
  min-width: 0;
}

.symbol { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Узкий экран (iPhone SE) — плашка «Фьючерс» уступает место монете и ☆. */
@media (max-width: 359px) {
  .chip-kind { display: none; }
}

.caret { color: var(--hint); font-size: 13px; }

.coin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--section);
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  flex: none;
}

.chip {
  flex: none;
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--section);
  color: var(--hint);
  font-size: 12px;
}

.star {
  flex: none;
  border: 0;
  background: none;
  color: var(--hint);
  font-size: 20px;
  line-height: 1;
  padding: 4px;
}

.star[aria-pressed="true"] { color: #f5a524; }

.market-price { margin: 8px 0 12px; }

.price {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.change { margin: 2px 0; color: var(--hint); font-variant-numeric: tabular-nums; }

.pill {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--section);
  color: var(--hint);
  font-weight: 600;
}

.pill.up { background: rgba(22, 163, 74, 0.15); color: var(--long); }
.pill.down { background: rgba(220, 38, 38, 0.15); color: var(--short); }

.details .up { color: var(--long); }
.details .down { color: var(--short); }

.note {
  margin: 6px 0 0;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--section);
  color: var(--hint);
  font-size: 12px;
}

/* Высота — от устойчивой высоты окна Telegram (её ставит SDK); поворот экрана и
   изменение окна подхватывает autoSize графика (ResizeObserver). */
.chart-box {
  position: relative;
  margin: 0 calc(-1 * var(--gap));
  height: clamp(200px, calc(var(--tg-viewport-stable-height, 100vh) * 0.42), 380px);
}

.chart { position: absolute; inset: 0; }

.chart-state {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 var(--gap);
  background: var(--bg);
  color: var(--hint);
  text-align: center;
}

.chart-state p { margin: 0; }

.chart-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  margin: 8px 0 4px;
}

.segmented {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border-radius: 8px;
  background: var(--section);
}

.segmented button {
  min-width: 34px;
  min-height: 30px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--hint);
  font: inherit;
  font-size: 13px;
  padding: 0 6px;
}

.segmented button.selected {
  background: var(--bg);
  color: var(--text);
  font-weight: 600;
}

.section-title { font-size: 15px; margin: 16px 0 6px; }

.details {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 12px;
  margin: 0;
}

.details dt { color: var(--hint); }
.details dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }

.market-error { padding: var(--gap) 0; }

.search-bar { display: flex; align-items: center; gap: 8px; }

.search-bar input {
  flex: 1;
  min-height: 40px;
  border: 0;
  border-radius: 10px;
  padding: 0 12px;
  background: var(--section);
  color: var(--text);
  font: inherit;
  font-size: 16px;
}

.search-list { list-style: none; margin: 8px 0 0; padding: 0; }

.search-group { padding: 10px 0 4px; }

.search-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  text-align: left;
  padding: 4px 0;
}

.search-item .small { margin-left: auto; }

/* --- Экран сделки (§5а, экран 2) --- */

.trade-head { display: flex; align-items: baseline; gap: 8px; }

.trade-title { font-size: 17px; margin: 0; margin-right: auto; }

.trade-last { color: var(--hint); font-variant-numeric: tabular-nums; }

.chart-compact {
  margin-top: 8px;
  height: clamp(160px, calc(var(--tg-viewport-stable-height, 100vh) * 0.28), 240px);
}

.trade-blocked { padding: var(--gap) 0; }

.trade-blocked-title { font-size: 17px; font-weight: 600; margin: 0 0 4px; }

.trade-form { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }

.segmented-wide { display: flex; }
.segmented-wide button { flex: 1; min-height: 36px; }
#trade-side button[data-side="LONG"].selected { color: var(--long); }
#trade-side button[data-side="SHORT"].selected { color: var(--short); }

.field { display: flex; align-items: center; gap: 8px; }

.field-label { flex: none; width: 48px; color: var(--hint); }

.field-input,
.field-select {
  flex: 1;
  min-width: 0;
  min-height: 36px;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 0 10px;
  background: var(--section);
  color: var(--text);
  font: inherit;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}

.field-select { flex: none; }

.field-input.invalid { border-color: var(--short); }

.field-range { flex: 1; min-width: 0; accent-color: var(--button); }

.field-value { flex: none; min-width: 44px; text-align: right; font-weight: 600; }

.field-hint { margin: -4px 0 0 56px; }
.field-hint:empty { display: none; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: -2px 0 0 56px; }

.chips button {
  min-height: 28px;
  border: 0;
  border-radius: 6px;
  padding: 0 10px;
  background: var(--section);
  color: var(--text);
  font: inherit;
  font-size: 13px;
}

.chips button:disabled { opacity: 0.4; }

.trade-result { margin: 12px 0 var(--gap); }

.trade-result.pending .details dd { opacity: 0.45; }

.issues { list-style: none; margin: 8px 0 0; padding: 0; }
.issues li { margin: 4px 0; }

/* --- Экран подтверждения (§5а, экран 3) --- */

.live-warning {
  margin: 0 0 8px;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--live);
  color: #ffffff;
  font-weight: 700;
}

.card-text {
  margin: 8px 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--section);
  white-space: pre-wrap;
  font-variant-numeric: tabular-nums;
}

.confirm-actions { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 var(--gap); }

.button-plain { background: var(--section); color: var(--text); }

/* --- Вкладка «Позиции» (П.1) --- */

.account-menu { margin-left: auto; padding: 0; }

.positions-state { padding: 24px 0; text-align: center; }

.positions-list, .journal-list { list-style: none; margin: 0; padding: 0; }

.position-card {
  margin: 0 0 12px;
  padding: 12px;
  border-radius: 12px;
  background: var(--section);
}

.position-head {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  font-weight: 600;
  padding: 0 0 8px;
  text-align: left;
}

.position-symbol { margin-right: auto; }

.position-side {
  padding: 1px 8px;
  border-radius: 6px;
  color: #ffffff;
  font-size: 12px;
}

.position-side.long { background: var(--long); }
.position-side.short { background: var(--short); }

.position-pnl.up { color: var(--long); }
.position-pnl.down { color: var(--short); }

.position-card .details { margin: 0 0 8px; }
.details dd.warn { color: var(--liq); }

.position-chat { width: 100%; background: var(--bg); }

.positions-empty { padding: 16px 0; }

.journal-list li { padding: 6px 0; border-bottom: 1px solid var(--section); }

/* Блок «Позиция» на экране рынка (П.2) */

.market-position-list { list-style: none; margin: 0 0 8px; padding: 0; }

.market-position-list li {
  padding: 6px 0 6px 10px;
  border-left: 3px solid var(--section);
}

.market-position-list li.long { border-left-color: var(--long); }
.market-position-list li.short { border-left-color: var(--short); }