:root {
  --bg: var(--tg-theme-bg-color, #0f1115);
  --card: var(--tg-theme-secondary-bg-color, #181b22);
  --text: var(--tg-theme-text-color, #eef0f4);
  --muted: var(--tg-theme-hint-color, #8a90a0);
  --accent: var(--tg-theme-button-color, #3b82f6);
  --accent-text: var(--tg-theme-button-text-color, #fff);
  --line: color-mix(in srgb, var(--muted) 22%, transparent);
  --up: #16c784;
  --down: #ea3943;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); }
body { font: 15px/1.45 -apple-system, BlinkMacSystemFont, "PingFang TC", "Noto Sans TC", sans-serif; -webkit-font-smoothing: antialiased; }
main { max-width: 480px; margin: 0 auto; padding: 14px 16px calc(28px + env(safe-area-inset-bottom)); }
.state { text-align: center; padding: 80px 16px; color: var(--muted); }
.big { font-size: 56px; margin-bottom: 8px; }
.head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.pair { font-size: 22px; font-weight: 700; letter-spacing: .3px; }
.sub { color: var(--muted); font-size: 13px; }
.badge { padding: 5px 14px; border-radius: 999px; font-weight: 700; color: #fff; }
.badge.short { background: var(--down); }
.badge.long { background: var(--up); }
.label { color: var(--muted); font-size: 13px; margin: 16px 2px 8px; }
.label b { color: var(--text); font-size: 15px; }
.muted { color: var(--muted); }
.seg { display: flex; gap: 8px; flex-wrap: wrap; }
.seg button, .chips button {
  flex: 1; min-width: 0; padding: 10px 8px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--card); color: var(--text); font: inherit; font-weight: 600; cursor: pointer;
}
.seg button.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 18%, var(--card)); }
.seg button:disabled { opacity: .35; }
.seg.small button { padding: 8px; font-size: 14px; }
.card { background: var(--card); border-radius: 14px; padding: 12px 14px; margin-top: 14px; }
.card-title { font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.row { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 0; gap: 10px; }
.row span { color: var(--muted); }
.row b { font-variant-numeric: tabular-nums; text-align: right; }
.row small { color: var(--muted); font-weight: 400; margin-left: 6px; }
.row.total { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 10px; }
.up { color: var(--up); }
.down { color: var(--down); }
.hint { font-size: 12.5px; color: var(--muted); border-top: 1px solid var(--line); margin-top: 6px; padding-top: 8px; }
.amount { display: flex; align-items: center; background: var(--card); border-radius: 14px; padding: 4px 14px; margin-top: 10px; border: 1px solid var(--line); }
.amount:focus-within { border-color: var(--accent); }
.amount input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: var(--text); font: 700 28px/1.6 inherit; font-variant-numeric: tabular-nums; }
.amount span { color: var(--muted); font-weight: 600; }
.chips { display: flex; gap: 8px; margin-top: 10px; }
.chips button { padding: 7px 4px; font-size: 13px; }
input[type=range] { width: 100%; accent-color: var(--accent); }
.warn { margin-top: 8px; padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, #f5a623 16%, transparent); color: #f5b84a; font-size: 13px; }
.ai summary { cursor: pointer; color: var(--muted); font-size: 14px; }
.ai #analysis { white-space: pre-wrap; margin-top: 8px; font-size: 14px; }
.submit {
  width: 100%; margin-top: 18px; padding: 15px; border: 0; border-radius: 14px; font: 700 16px inherit;
  background: var(--accent); color: var(--accent-text); cursor: pointer;
}
.submit.short { background: var(--down); color: #fff; }
.submit.long { background: var(--up); color: #fff; }
.submit:disabled { opacity: .45; }
.foot { font-size: 12px; text-align: center; margin-top: 12px; }