:root { font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #f7f8ff; background: #05070d; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100dvh; background: radial-gradient(circle at 90% 10%, #6c4dff22, transparent 30%), radial-gradient(circle at 0 90%, #1ea7ff18, transparent 34%), #05070d; }
.login-shell { min-height: 100dvh; padding: max(26px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom)); display: grid; place-items: center; }
.login-card { width: min(100%, 430px); padding: 28px; overflow: hidden; border: 1px solid #22283a; border-radius: 28px; background: linear-gradient(155deg, #0d1120, #080b14 70%); box-shadow: 0 28px 90px #0009; }
.brand { display: flex; align-items: center; gap: 10px; color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .17em; }
.brand > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; background: linear-gradient(135deg, #1ea7ff, #6c4dff, #d629e8); letter-spacing: 0; }
.brand small { display: block; margin-top: 4px; color: #737b91; font-size: 5px; letter-spacing: .2em; }
.illustration { height: 175px; margin: 26px -28px 24px; display: grid; place-items: center; position: relative; background: radial-gradient(circle, #6548f526, transparent 58%); }
.receipt { width: 112px; height: 138px; padding: 28px 20px; position: relative; transform: rotate(-6deg); border-radius: 10px; color: #0b0f1b; background: #f6f7fb; box-shadow: 0 22px 55px #0008; }
.receipt::after { content: ""; position: absolute; inset: auto 0 -7px; height: 14px; background: linear-gradient(135deg, transparent 7px, #f6f7fb 0) 0 0/14px 14px repeat-x; }
.receipt i { display: block; height: 5px; margin-bottom: 10px; border-radius: 9px; background: #cbd0db; }
.receipt i:nth-child(2) { width: 72%; }
.receipt strong { display: block; margin-top: 21px; font-size: 24px; }
.scan-line { width: 190px; height: 2px; position: absolute; background: linear-gradient(90deg, transparent, #28a9ff, #bd42ed, transparent); box-shadow: 0 0 18px #6c4dff; animation: scan 2.4s ease-in-out infinite; }
.eyebrow { color: #8e96aa; font-size: 10px; font-weight: 800; letter-spacing: .2em; }
h1 { margin: 12px 0; max-width: 340px; font-size: clamp(29px, 8vw, 38px); line-height: 1.06; letter-spacing: -.045em; }
p { margin: 0 0 24px; color: #969daf; font-size: 14px; line-height: 1.55; }
.login-button { min-height: 58px; padding: 0 18px; display: grid; grid-template-columns: 28px 1fr 20px; align-items: center; gap: 12px; border-radius: 16px; color: #fff; background: linear-gradient(110deg, #219df2, #6157f5 56%, #c62ddd); text-decoration: none; box-shadow: 0 12px 35px #5849db45; }
.login-button:active { transform: scale(.985); }
.login-button strong { text-align: left; font-size: 14px; }
.login-button b { font-size: 20px; }
.microsoft { width: 22px; height: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.microsoft i:nth-child(1) { background: #f35325; }.microsoft i:nth-child(2) { background: #81bc06; }.microsoft i:nth-child(3) { background: #05a6f0; }.microsoft i:nth-child(4) { background: #ffba08; }
.security { margin-top: 20px; padding: 14px; display: flex; align-items: center; gap: 12px; border: 1px solid #202638; border-radius: 14px; background: #0b0f1a; }
.security > span { color: #39d889; font-size: 22px; }.security strong,.security small { display: block; }.security strong { font-size: 11px; }.security small { margin-top: 4px; color: #737b91; font-size: 9px; }
.notice { margin: -5px 0 16px; padding: 11px 13px; border-radius: 11px; font-size: 11px; }.notice.success { color: #7be6ad; background: #25a86718; border: 1px solid #39d88944; }.notice.error { color: #ff9aa5; background: #ef444416; border: 1px solid #ef444444; }
footer { margin-top: 20px; color: #555d72; font-size: 9px; line-height: 1.45; text-align: center; }
@keyframes scan { 0%,100% { transform: translateY(-55px); opacity: .35; } 50% { transform: translateY(55px); opacity: 1; } }
@media (max-width: 390px) { .login-card { padding: 23px; border-radius: 24px; }.illustration { margin-inline: -23px; height: 150px; }.receipt { transform: scale(.88) rotate(-6deg); } }
@media (prefers-reduced-motion: reduce) { .scan-line { animation: none; } }