:root {
  --bg:        #0B1622;
  --card:      #111F30;
  --input-bg:  #0D1824;
  --accent:    #E8A33D;
  --live:      #5FC3B4;
  --wa:        #25D366;
  --text:      #EEF0F2;
  --dim:       #6E8499;
  --border:    rgba(255,255,255,0.07);
  --r:         16px;
  --sans:      'Space Grotesk', system-ui, sans-serif;
  --mono:      'JetBrains Mono', ui-monospace, monospace;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

body {
  min-height: 100dvh;
  background:
    radial-gradient(ellipse 70% 35% at 5%  0%,   rgba(232,163,61,.09), transparent 55%),
    radial-gradient(ellipse 55% 30% at 95% 100%,  rgba(95,195,180,.07), transparent 55%),
    var(--bg);
}

.page {
  max-width: 440px;
  margin: 0 auto;
  padding: 22px 16px 20px;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  gap: 14px;
  justify-content: center;
}

/* ── Header ─────────────────────────────────────── */
.header { display: flex; align-items: center; gap: 8px; }

.install-btn {
  font-family: var(--sans); font-size: 11px; font-weight: 700;
  color: var(--accent); background: rgba(232,163,61,.12);
  border: 1px solid rgba(232,163,61,.3); border-radius: 99px;
  padding: 4px 10px; cursor: pointer; white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: background .15s;
}
.install-btn:active { background: rgba(232,163,61,.22); }

.logo {
  width: 28px; height: 28px; border-radius: 7px;
  object-fit: cover; display: none;
}
.logo[src]:not([src=""]) { display: block; }

.title { font-size: 16px; font-weight: 600; flex: 1; }

.live-badge {
  display: flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 700; letter-spacing: .1em;
  color: var(--live);
  border: 1px solid rgba(95,195,180,.25);
  border-radius: 99px; padding: 3px 9px;
}
.live-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--live); animation: pulse 2s infinite;
}
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.35} }

/* ── Rate cards ─────────────────────────────────── */
.rates { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.rate-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 16px 12px;
  text-align: center;
}
.rate-card--p2p {
  border-color: rgba(232,163,61,.22);
  background: linear-gradient(150deg,#16243C,#111F30);
}

.rate-label { font-size: 11px; color: var(--dim); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; margin-bottom: 8px; }
.rate-price  { font-family: var(--mono); font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.rate-card--p2p .rate-price { color: var(--accent); }
.rate-sub    { font-size: 11px; color: var(--dim); margin-top: 3px; }

/* ── Calculator ─────────────────────────────────── */
.calc {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 18px 14px;
  display: flex; flex-direction: column; gap: 12px;
}

.calc-label { font-size: 12px; color: var(--dim); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }

.input-row {
  display: flex; align-items: center;
  background: var(--input-bg);
  border: 1.5px solid rgba(232,163,61,.3);
  border-radius: 12px; overflow: hidden;
}
.input-tag {
  padding: 0 14px; font-size: 12px; font-weight: 700;
  color: var(--accent); border-right: 1px solid var(--border);
  line-height: 48px; white-space: nowrap;
}
.input-row input {
  flex: 1; background: transparent; border: none; outline: none;
  color: var(--text); font-family: var(--mono);
  font-size: 22px; font-weight: 600;
  padding: 0 14px; height: 48px; width: 0;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
.input-row input::-webkit-outer-spin-button,
.input-row input::-webkit-inner-spin-button { -webkit-appearance: none; }
.input-row input::placeholder { color: var(--dim); font-size: 16px; }

.input-hint { font-size: 11.5px; color: var(--dim); }
.input-hint.err { color: #E07A5F; }

/* ── Totals ─────────────────────────────────────── */
.totals {
  display: flex; align-items: stretch;
  background: var(--input-bg);
  border: 1px solid var(--border); border-radius: 12px; overflow: hidden;
}
.total-block { flex: 1; padding: 14px 10px; text-align: center; }
.total-divider { width: 1px; background: var(--border); }
.total-label { font-size: 11px; color: var(--dim); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; margin-bottom: 5px; }
.total-amount {
  font-family: var(--mono); font-size: 20px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.total-amount--accent { color: var(--accent); }

/* ── Meta row ───────────────────────────────────── */
.meta-row {
  display: flex; align-items: center;
  background: var(--card);
  border: 1px solid var(--border); border-radius: var(--r);
  overflow: hidden;
}
.meta-item {
  flex: 1; padding: 12px 14px;
}
.meta-key { font-size: 10px; color: var(--dim); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; margin-bottom: 3px; }
.meta-val { font-family: var(--mono); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.meta-refresh { padding: 12px 14px; display: flex; align-items: center; justify-content: center; border-left: 1px solid var(--border); }

.ring { width: 28px; height: 28px; transform: rotate(-90deg); }
.ring-track { fill: none; stroke: var(--border); stroke-width: 4; }
.ring-fill  {
  fill: none; stroke: var(--live); stroke-width: 4; stroke-linecap: round;
  stroke-dasharray: 81.68; stroke-dashoffset: 0;
  transition: stroke-dashoffset 1s linear;
}

/* ── Disclaimer ─────────────────────────────────── */
.disclaimer { font-size: 11px; color: var(--dim); line-height: 1.55; text-align: center; }

/* ── WhatsApp ───────────────────────────────────── */
.wa-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--wa); color: #0A1520;
  font-family: var(--sans); font-weight: 700; font-size: 16px;
  text-decoration: none; padding: 17px; border-radius: var(--r);
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s, filter .12s;
}
.wa-btn:active { transform: scale(.97); filter: brightness(.92); }
.wa-icon { width: 22px; height: 22px; fill: #0A1520; flex-shrink: 0; }

/* ── Responsive ─────────────────────────────────── */
@media (max-width: 360px) {
  .rate-price   { font-size: 20px; }
  .total-amount { font-size: 17px; }
}
@media (min-width: 480px) {
  .rate-price   { font-size: 26px; }
  .total-amount { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .live-dot { animation: none; }
  .ring-fill { transition: none; }
}