:root { font-family: Inter, ui-sans-serif, system-ui, sans-serif; color: #f6f7fb; background: #0b0d12; }
* { box-sizing: border-box; }
body { min-height: 100vh; margin: 0; display: grid; place-items: center; padding: 28px 16px 70px; background: radial-gradient(circle at 50% 0%, #182038 0, #0b0d12 48%); }
.card { width: min(560px, 100%); padding: 34px; border: 1px solid #293044; border-radius: 20px; background: rgba(21,24,34,.94); box-shadow: 0 25px 80px #0009; }
.brand { display: flex; align-items: center; gap: 12px; color: #dce3f5; font-weight: 750; }
.brand > span { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; color: white; background: linear-gradient(135deg,#5896ff,#7859ff); }
.brand small { display: block; margin-top: 2px; color: #7f899f; font-size: 11px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; }
.status-icon { width: 58px; height: 58px; margin: 38px 0 18px; border-radius: 50%; background: #5b8cff22; border: 2px solid #5b8cff; }
[data-state="success"] .status-icon { background: #45c78722; border-color: #45c787; }
[data-state="error"] .status-icon { background: #e25b6522; border-color: #e25b65; }
h1 { margin: 0 0 10px; font-size: clamp(26px,5vw,36px); letter-spacing: -.03em; }
p { margin: 0 0 26px; color: #aeb7ca; line-height: 1.6; }
.steam-button { display: block; padding: 14px 20px; border-radius: 10px; text-align: center; text-decoration: none; color: white; font-weight: 700; background: linear-gradient(135deg,#1b799e,#153c75); }
.steam-button:hover { filter: brightness(1.13); }
.profile { display: flex; gap: 15px; align-items: center; margin: 4px 0 26px; padding: 16px; border-radius: 12px; background: #0e1119; border: 1px solid #293044; }
.profile img { width: 66px; height: 66px; border-radius: 10px; }
.profile strong,.profile span { display: block; overflow-wrap: anywhere; }
.profile span { color: #8e98ad; margin-top: 5px; font-size: 13px; }
.facts { display: grid; gap: 10px; padding: 24px 0 0 20px; margin: 0; color: #7f899f; font-size: 13px; line-height: 1.5; }
footer { position: fixed; bottom: 18px; color: #5f687b; font-size: 12px; text-align: center; }