:root { color-scheme: dark; --bg: #0f172a; --card: #1e293b; --fg: #e2e8f0; --muted: #94a3b8; --ok: #22c55e; --warn: #f59e0b; --bad: #ef4444; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--fg);
  font: 16px/1.5 system-ui, -apple-system, sans-serif;
  padding: env(safe-area-inset-top) 16px env(safe-area-inset-bottom); display: grid; place-items: center; }
main { width: 100%; max-width: 420px; text-align: center; padding: 32px 0; }
img { border-radius: 18px; }
h1 { margin: 12px 0 4px; font-size: 28px; }
.sub, .hint { color: var(--muted); margin: 0 0 20px; }
ul { list-style: none; padding: 0; margin: 0 0 20px; background: var(--card); border-radius: 14px; text-align: left; }
li { display: flex; justify-content: space-between; gap: 12px; padding: 12px 16px; border-top: 1px solid #334155; }
li:first-child { border-top: 0; }
li span { color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; }
li.ok span { color: var(--ok); } li.warn span { color: var(--warn); } li.bad span { color: var(--bad); }
button { font: inherit; font-weight: 600; color: var(--bg); background: var(--ok); border: 0; border-radius: 12px; padding: 12px 20px; width: 100%; }

/* mèo trader */
#cat { margin: 0 auto 8px; max-width: 320px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
#cat svg { display: block; width: 100%; height: auto; }
#cat .sweat { animation: sweat 1.6s ease-in infinite; }
#cat .tail { transform-origin: 135px 186px; animation: wag 1.2s ease-in-out infinite alternate; }
#cat .paw { animation: tap .25s ease-in-out infinite alternate; }
#cat .arrow { animation: drop 1.4s ease-in-out infinite; }
#cat .last { animation: plunge 1.4s ease-in-out infinite; }
#cat .steam { animation: steam 2s ease-in-out infinite; }
#cat .bubble { transform-origin: 66px 50px; transition: transform .15s; }
#cat.pop .bubble { transform: scale(1.12); }
#cat.pop .kitty { animation: jump .35s ease-out; }
@keyframes sweat { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(26px); opacity: 0; } }
@keyframes wag { from { transform: rotate(-8deg); } to { transform: rotate(10deg); } }
@keyframes tap { from { transform: translateY(0); } to { transform: translateY(-3px); } }
@keyframes drop { 0%, 100% { transform: translateY(-4px); } 50% { transform: translateY(4px); } }
@keyframes plunge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
@keyframes steam { 0%, 100% { opacity: .2; transform: translateY(0); } 50% { opacity: .8; transform: translateY(-4px); } }
@keyframes jump { 0% { transform: translateY(0); } 40% { transform: translateY(-14px); } 100% { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { #cat * { animation: none !important; } }