:root { font-family: Inter, system-ui, sans-serif; color: var(--tg-theme-text-color, #1d2433); background: var(--tg-theme-bg-color, #f5f7fb); }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100dvh; background: radial-gradient(circle at top right, #5e7cff22, transparent 38%), var(--tg-theme-bg-color, #f5f7fb); }
main { width: min(100%, 560px); margin: auto; padding: max(24px, env(safe-area-inset-top)) 18px max(28px, env(safe-area-inset-bottom)); }
.eyebrow { margin: 0 0 8px; color: var(--tg-theme-button-color, #526deb); font-size: 12px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
h1 { margin: 0; font-size: clamp(28px, 8vw, 42px); line-height: 1.08; }
.lead { margin: 12px 0 22px; color: var(--tg-theme-hint-color, #687083); }
.card { padding: 24px; border-radius: 20px; background: var(--tg-theme-secondary-bg-color, white); box-shadow: 0 16px 40px #27305014; }
.ranking { display: grid; gap: 10px; padding: 0; list-style: none; counter-reset: rank; }
.option { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; padding: 13px; border: 1px solid #7c849429; border-radius: 17px; background: var(--tg-theme-secondary-bg-color, white); counter-increment: rank; }
.option::before { content: counter(rank); display: grid; width: 30px; height: 30px; place-items: center; border-radius: 10px; color: white; background: var(--tg-theme-button-color, #526deb); font-weight: 800; }
.label { font-weight: 700; }
.controls { display: flex; gap: 6px; }
.move { width: 36px; height: 36px; border: 0; border-radius: 11px; color: var(--tg-theme-text-color, #1d2433); background: #7c849418; font-size: 18px; }
.submit { width: 100%; min-height: 54px; margin-top: 18px; border: 0; border-radius: 17px; color: var(--tg-theme-button-text-color, white); background: var(--tg-theme-button-color, #526deb); font-weight: 800; }
.submit:disabled { opacity: .55; }
.hidden { display: none; }
.success { color: #208852; }
.error { color: #c3364b; }