:root { font-family: system-ui, -apple-system, sans-serif; color: #202027; background: #f4f4f7; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 20px; box-sizing: border-box; }
.card { width: min(100%, 480px); background: white; border-radius: 20px; padding: 32px; box-shadow: 0 12px 40px #17171f18; }
.brand { color: #d52b4a; font-weight: 800; letter-spacing: .02em; }
h1 { margin: 12px 0 8px; font-size: 28px; } p { color: #666673; }
.result { margin-top: 24px; border-top: 1px solid #e5e5ea; }
.result div { padding: 16px 0; border-bottom: 1px solid #e5e5ea; display: grid; gap: 5px; }
.result span { color: #777783; font-size: 13px; } .result strong { text-transform: capitalize; }
button { margin-top: 20px; border: 0; border-radius: 10px; padding: 12px 20px; color: white; background: #d52b4a; font-weight: 700; cursor: pointer; }
.hidden { display: none; }