:root {
  --bg: #0e0f13;
  --panel: #16171d;
  --line: rgb(255 255 255 / .09);
  --text: #f4f4f7;
  --soft: #a3a5b2;
  --accent: #8b5cf6;
  --accent-bright: #b79bff;
  --good: #3ddc97;
  --bad: #ffb547;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); }
body { font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-text-size-adjust: 100%; }
h1 { margin: 0; line-height: 1.15; text-wrap: balance; }

@font-face { font-family: "Unbounded"; src: url("unbounded.woff2") format("woff2"); font-weight: 400 900; font-display: swap; }
.brand { display: inline-flex; align-items: center; gap: 0; font-family: "Unbounded", system-ui, sans-serif; font-weight: 900; font-size: 1.15rem; letter-spacing: .02em; color: var(--text); line-height: 1; }
.brand__mark { height: 1.17em; width: auto; margin-right: .03em; color: var(--accent); }
.brand__tv { color: var(--accent-bright); font-weight: 500; margin-left: .26em; }

.format { margin: 0; color: var(--soft); text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; font-weight: 600; }
.amount { margin: .2rem 0 0; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.amount small { font-size: .45em; font-weight: 600; color: var(--soft); letter-spacing: 0; }
.tax { margin: 0; color: var(--soft); font-size: .85rem; }
.status { display: inline-block; margin: 1rem 0 0; padding: .35rem .8rem; border-radius: 999px; font-weight: 600; font-size: .95rem; }
.status.is-in { background: rgb(61 220 151 / .12); color: var(--good); }
.status.is-out { background: rgb(255 181 71 / .12); color: var(--bad); }

.price { display: grid; place-items: center; min-height: 100dvh; padding: max(1rem, env(safe-area-inset-top)) 1rem max(1rem, env(safe-area-inset-bottom)); background: radial-gradient(60rem 30rem at 50% -10%, rgb(139 92 246 / .22), transparent 70%), var(--bg); }
.card { width: min(100%, 28rem); padding: 1.6rem 1.4rem 1.8rem; border-radius: 18px; background: var(--panel); border: 1px solid var(--line); }
.card .brand { margin-bottom: 1.6rem; }
.card h1 { font-size: clamp(1.5rem, 6.5vw, 2rem); margin: .3rem 0 .9rem; }
.card .amount { font-size: clamp(2.6rem, 13vw, 3.4rem); line-height: 1; }
.card .ask { font-size: 2.2rem; color: var(--bad); }
.card .detail { color: var(--soft); margin: .6rem 0 0; }