:root {
  --bg: var(--tg-theme-bg-color, #0e1621);
  --text: var(--tg-theme-text-color, #f4f7fb);
  --hint: var(--tg-theme-hint-color, #8b9bb4);
  --btn: var(--tg-theme-button-color, #2ea6ff);
  --btn-text: var(--tg-theme-button-text-color, #ffffff);
  --sec: var(--tg-theme-secondary-bg-color, #17212b);
  --header: var(--tg-theme-header-bg-color, #17212b);
  --accent: var(--tg-theme-accent-text-color, #6ab2f2);
  --destructive: var(--tg-theme-destructive-text-color, #e53935);
}
*, *::before, *::after { box-sizing: border-box; }
html, body { background: var(--bg); color: var(--text); margin: 0; padding: 0; height: 100%; overflow: hidden; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  touch-action: manipulation;
}
.app {
  height: var(--app-height, 100%);
  max-height: var(--app-height, 100%);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding-top: var(--safe-top, env(safe-area-inset-top, 0px));
}
.app-main {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}
.wrap {
  margin: 0 auto;
  width: 100%;
  max-width: 28rem;
  padding: 0.75rem 0.85rem 0;
}
.card {
  background: var(--sec);
  border: 1px solid color-mix(in srgb, var(--hint) 22%, transparent);
}
.pnl-pos { color: #22c55e; }
.pnl-neg { color: #ef4444; }
.pnl-flat { color: var(--hint); }
.ws-bar {
  flex-shrink: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  width: 100%;
  max-width: 28rem;
  margin: 0 auto;
  padding: 8px 10px 4px;
}
.ws-btn {
  min-height: 42px;
  border: 0;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  background: transparent;
  color: var(--hint);
}
.ws-btn.ws-on { background: #2ea6ff; color: #fff; }
#ws-champion, #ws-intel {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
#ws-champion[hidden], #ws-intel[hidden] { display: none !important; }
.intel-long { color: #22c55e; font-weight: 800; }
.intel-short { color: #ef4444; font-weight: 800; }
.intel-wlist {
  margin-top: 0.5rem;
  max-height: min(42vh, 22rem);
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding-right: 0.45rem;
  scrollbar-gutter: stable;
}
.intel-wrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  column-gap: 0.45rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--hint) 16%, transparent);
}
.intel-wrow:last-child { border-bottom: 0; }
.intel-wmain { min-width: 0; }
.intel-wmain b, .intel-wmain p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.intel-wtrust { min-width: 1.75rem; text-align: right; font-variant-numeric: tabular-nums; }
.intel-filters { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; margin-top: 0.55rem; }
.intel-fbtn {
  min-height: 34px;
  border: 0;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  background: transparent;
  color: var(--hint);
}
.intel-fbtn.intel-f-on { background: #2ea6ff; color: #fff; }
.intel-active { color: #22c55e; font-size: 12px; font-weight: 700; }
.intel-passive { color: var(--hint); font-size: 12px; font-weight: 700; }
.bento-scan {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem;
  margin-top: 0.5rem;
}
.pair-card {
  background: color-mix(in srgb, var(--sec) 88%, #000);
  border: 1px solid color-mix(in srgb, var(--hint) 16%, transparent);
  border-radius: 1rem;
  padding: 0.7rem 0.7rem 0.6rem;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.pair-card.pair-go {
  border-color: color-mix(in srgb, #39ff88 55%, transparent);
  box-shadow: 0 0 14px color-mix(in srgb, #39ff88 22%, transparent);
}
.pair-card.pair-open {
  grid-column: span 2;
  border-color: color-mix(in srgb, #39ff88 72%, transparent);
  box-shadow: 0 0 16px color-mix(in srgb, #39ff88 28%, transparent);
}
.pair-card.pair-stop {
  border-color: color-mix(in srgb, #ff3b5c 32%, transparent);
}
.pair-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.35rem;
}
.pair-card-name {
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.02em;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pair-badge {
  font-size: 9px;
  font-weight: 800;
  border-radius: 999px;
  padding: 0.18rem 0.42rem;
  line-height: 1.2;
  text-align: right;
  max-width: 7.4rem;
}
.pair-badge-stop {
  color: #ff6b81;
  background: color-mix(in srgb, #ff3b5c 14%, transparent);
  box-shadow: 0 0 8px color-mix(in srgb, #ff3b5c 22%, transparent);
}
.pair-badge-go {
  color: #39ff88;
  background: color-mix(in srgb, #39ff88 12%, transparent);
  box-shadow: 0 0 8px color-mix(in srgb, #39ff88 28%, transparent);
}
.pair-health {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.15rem;
}
.pair-h {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.22rem;
}
.pair-h span {
  font-size: 8px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hint);
}
.pair-dot {
  width: 0.62rem;
  height: 0.62rem;
  border-radius: 999px;
}
.pair-dot.on {
  background: #39ff88;
  box-shadow: 0 0 8px #39ff88;
}
.pair-dot.off {
  background: #ff3b5c;
  box-shadow: 0 0 8px color-mix(in srgb, #ff3b5c 75%, transparent);
}
.alert-card {
  flex-shrink: 0;
  width: 100%;
  max-width: 28rem;
  margin: 0 auto;
  padding: 0.7rem 0.85rem;
  box-sizing: border-box;
  border-radius: 12px;
  border: 1px solid #ef4444;
  background: color-mix(in srgb, #ef4444 16%, transparent);
}
.alert-card.alert-warn {
  border-color: #f59e0b;
  background: color-mix(in srgb, #f59e0b 16%, transparent);
}
.alert-card #app-alert-title { margin: 0; color: #fca5a5; }
.alert-card.alert-warn #app-alert-title { color: #fbbf24; }
.tab-idle { color: var(--hint); background: transparent; }
button:disabled { opacity: 0.5; }
.page { display: none; }
.page.active { display: flex; flex-direction: column; gap: 0.75rem; }
.toast {
  background: var(--header);
  color: var(--text);
  border: 1px solid color-mix(in srgb, var(--hint) 30%, transparent);
}
.bar-track { height: 6px; background: color-mix(in srgb, var(--hint) 22%, transparent); border-radius: 99px; overflow: hidden; }
.bar-fill { height: 100%; background: var(--accent); }
.timeout-line { margin: 0.45rem 0 0; font-size: 13px; font-weight: 600; color: var(--accent); }
.timeout-line.timeout-urgent, #a-timeout.timeout-urgent, #p-timeout.timeout-urgent { color: var(--destructive); }
.trail-badge { margin-top: 0.55rem; }
.spin {
  display: inline-block;
  width: 0.85rem;
  height: 0.85rem;
  border: 2px solid color-mix(in srgb, currentColor 35%, transparent);
  border-top-color: currentColor;
  border-radius: 999px;
  animation: spin 0.7s linear infinite;
  vertical-align: -0.15rem;
  margin-right: 0.4rem;
}
@keyframes spin { to { transform: rotate(360deg); } }
nav.dock {
  flex-shrink: 0;
  position: relative;
  z-index: 50;
  background: var(--header);
  border-top: 1px solid color-mix(in srgb, var(--hint) 22%, transparent);
  padding-bottom: var(--safe-bottom, 12px);
}
.dock-inner {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  padding: 6px 8px 8px;
  max-width: 28rem;
  margin: 0 auto;
}
.hint { color: var(--hint); }
.row { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.gap { display: flex; align-items: center; gap: 0.45rem; }
.stack { display: flex; flex-direction: column; gap: 0.75rem; }
.kv { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; font-size: 14px; }
.kv span:first-child { color: var(--hint); flex-shrink: 0; }
.kv span:last-child { text-align: right; min-width: 0; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.5rem; }
.grid5 { display: grid; grid-template-columns: repeat(5, 1fr); }
.center { text-align: center; }
.muted { color: var(--hint); font-size: 12px; }
.label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--hint); }
.pill {
  border-radius: 999px; padding: 0.2rem 0.55rem; font-size: 10px;
  font-weight: 700; text-transform: uppercase;
  background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent);
  white-space: nowrap;
}
.pill-mode {
  text-transform: none;
  font-size: 11px;
  letter-spacing: 0;
  white-space: nowrap;
}
.deal-card {
  overflow: hidden;
}
.deal-card.deal-long {
  border-color: color-mix(in srgb, #22c55e 42%, transparent);
}
.deal-card.deal-short {
  border-color: color-mix(in srgb, #ef4444 42%, transparent);
}
.card.deal-win, .deal-card.deal-win {
  border-color: color-mix(in srgb, #22c55e 72%, transparent);
  background: color-mix(in srgb, #22c55e 16%, var(--sec));
}
.card.deal-loss, .deal-card.deal-loss {
  border-color: color-mix(in srgb, #ef4444 72%, transparent);
  background: color-mix(in srgb, #ef4444 16%, var(--sec));
}
.side-pill {
  border-radius: 999px;
  padding: 0.2rem 0.6rem;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.side-pill.long {
  background: color-mix(in srgb, #22c55e 22%, transparent);
  color: #4ade80;
}
.side-pill.short {
  background: color-mix(in srgb, #ef4444 22%, transparent);
  color: #f87171;
}
.deal-pnl {
  font-size: clamp(1.7rem, 8vw, 2.2rem);
  font-weight: 800;
  line-height: 1.05;
  margin: 0.55rem 0 0.15rem;
}
.dca-dots {
  display: flex;
  gap: 0.35rem;
  align-items: center;
  margin-top: 0.35rem;
}
.dca-dot {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--hint) 28%, transparent);
}
.dca-dot.on { background: var(--accent); }
.exit-chip {
  margin-top: 0.7rem;
  padding: 0.55rem 0.7rem;
  border-radius: 0.85rem;
  font-size: 13px;
  font-weight: 600;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
}
.pill-off {
  background: color-mix(in srgb, var(--hint) 18%, transparent);
  color: var(--hint);
}
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 999px; flex-shrink: 0; }
.dot-on { background: #34d399; animation: pulse 1.6s ease-in-out infinite; }
.dot-pause { background: #fbbf24; }
.dot-off { background: #71717a; }
@keyframes pulse { 50% { opacity: 0.45; } }
.r2 { border-radius: 1rem; }
.r3 { border-radius: 1.25rem; }
.pad { padding: 1rem; }
.pad2 { padding: 0.75rem; }
.btn {
  width: 100%; border: 1px solid color-mix(in srgb, var(--hint) 22%, transparent);
  background: var(--sec); color: var(--text); border-radius: 1rem;
  min-height: 2.75rem; padding: 0.75rem 0.85rem; font-size: 15px; font-weight: 600;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.btn-main { background: var(--btn); color: var(--btn-text); border: 0; }
.btn-danger { background: var(--destructive); color: #fff; border: 0; font-weight: 700; }
.num { font-variant-numeric: tabular-nums; }
.big { font-size: clamp(2rem, 9vw, 2.75rem); font-weight: 700; line-height: 1; }
.price-lg { font-size: clamp(1.4rem, 6vw, 1.85rem); font-weight: 700; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; }
.spark { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; letter-spacing: 0.12em; color: var(--accent); }
.input, select {
  width: 100%; background: var(--bg); color: var(--text); border-radius: 0.75rem;
  border: 1px solid color-mix(in srgb, var(--hint) 30%, transparent);
  padding: 0.7rem 0.75rem; font-size: 16px; margin-top: 0.25rem;
}
.chk { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 14px; line-height: 1.35; }
.chk input { width: 1.15rem; height: 1.15rem; margin-top: 0.1rem; flex-shrink: 0; }
.logline { font-size: 12px; line-height: 1.4; border-bottom: 1px solid color-mix(in srgb, var(--hint) 12%, transparent); padding: 0.4rem 0; }
.chart { width: 100%; height: 140px; display: block; }
.linkish {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 0; color: var(--accent); font-size: 13px; font-weight: 600;
  cursor: pointer; padding: 0.45rem 0.7rem; border-radius: 999px;
  min-height: 2.25rem;
}
.hidden { display: none !important; }
.fixed-toast { position: fixed; left: 0.75rem; right: 0.75rem; top: calc(0.6rem + env(safe-area-inset-top)); z-index: 50; pointer-events: none; }
.topbar { display: flex; flex-direction: column; gap: 0.55rem; margin-bottom: 0.85rem; }
.topbar-main { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; }
.topbar-main .gap { max-width: 100%; }
.topbar-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.status-chip {
  display: flex; align-items: center; gap: 0.35rem;
  padding: 0.3rem 0.6rem; font-size: 12px; font-weight: 600;
}
.tab-btn {
  background: transparent; border: 0; padding: 0.4rem 0.1rem;
  font-size: 12px; font-weight: 600; min-height: 44px; cursor: pointer;
  color: var(--hint); border-radius: 12px;
  -webkit-tap-highlight-color: transparent;
}
.tab-btn.tab-active {
  background: #2ea6ff;
  color: #fff;
}
.tab-btn.tab-idle { background: transparent; color: var(--hint); }
.help { font-size: 12px; color: var(--hint); line-height: 1.45; margin: 0; }
.fill-row { display: flex; justify-content: space-between; gap: 0.5rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px; margin-top: 0.3rem; }
@media (max-width: 360px) {
  .wrap { padding-left: 0.7rem; padding-right: 0.7rem; }
  .grid3 { gap: 0.35rem; }
  .tab-btn { font-size: 10px; }
}