:root {
  --bg: var(--tg-theme-bg-color, #131722);
  --fg: var(--tg-theme-text-color, #d1d4dc);
  --muted: var(--tg-theme-hint-color, #787b86);
  --card: var(--tg-theme-secondary-bg-color, #1e222d);
  --accent: var(--tg-theme-button-color, #2962ff);
  --accent-fg: var(--tg-theme-button-text-color, #ffffff);
  --up: #26a69a;
  --down: #ef5350;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--fg);
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Tahoma, "Noto Sans Arabic", sans-serif; }
header { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; }
.brand { font-weight: 700; font-size: 18px; }
.badge { font-size: 12px; padding: 2px 8px; border-radius: 10px; background: #f5c54233; color: #f5c542; }
nav { display: flex; gap: 4px; padding: 0 10px; position: sticky; top: 0; background: var(--bg); z-index: 2; }
nav button { flex: 1; padding: 9px 4px; border: 0; border-bottom: 2px solid transparent; background: none;
  color: var(--muted); font: inherit; cursor: pointer; }
nav button.active { color: var(--fg); border-bottom-color: var(--accent); }
main { padding: 10px 14px 4px; min-height: 60vh; }
.card { background: var(--card); border-radius: 12px; padding: 12px; margin: 0 0 10px; }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.between { justify-content: space-between; }
.title { font-weight: 600; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.up { color: var(--up); }
.down { color: var(--down); }
h3 { font-size: 15px; margin: 14px 0 8px; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; margin: 6px 0; }
button.action { padding: 8px 12px; border: 0; border-radius: 8px; background: var(--accent); color: var(--accent-fg);
  font: inherit; cursor: pointer; }
button.action.secondary { background: none; color: var(--accent); border: 1px solid var(--accent); }
button.action.danger { background: var(--down); color: #fff; }
button.action:disabled { opacity: .5; cursor: default; }
button.chip { padding: 6px 10px; border-radius: 16px; border: 1px solid var(--muted); background: none; color: var(--fg);
  font: inherit; cursor: pointer; }
button.chip.active { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
#chart-box { width: 100%; height: 360px; margin: 10px 0 4px; direction: ltr; }
.notice { background: #f5c54222; border: 1px solid #f5c54266; border-radius: 10px; padding: 10px; margin-bottom: 10px; }
.ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }
footer { padding: 6px 14px 18px; }
footer p { margin: 4px 0; }