.blog{position:fixed;inset:0;z-index:100;overflow:auto;background:radial-gradient(120% 60% at 50% 100%,#0b1a3a 0,#05070d 70%);color:#fff;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
.blog-in{max-width:480px;margin:0 auto;min-height:100%;display:flex;flex-direction:column;background:linear-gradient(#0000 0,#05070dcc 40%,#05070d 100%)}
.blog-hero{display:block;width:100%;aspect-ratio:853/690;object-fit:cover;object-position:top;-webkit-mask-image:linear-gradient(#000 80%,#0000);mask-image:linear-gradient(#000 80%,#0000)}
.blog-card{margin:-70px 18px 0;position:relative;padding:22px 20px 20px;border-radius:22px;background:rgba(16,22,36,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:2px solid #1f6bff;box-shadow:0 0 22px rgba(31,107,255,.55),inset 0 0 18px rgba(31,107,255,.15)}
.blog-card h2{margin:0;text-align:center;font-size:30px;letter-spacing:.06em;font-weight:800}
.blog-card .sub{text-align:center;margin:6px 0 16px;font-size:12.5px;letter-spacing:.14em;color:#cfd6e6;text-transform:uppercase;line-height:1.5}
.blog-f{display:flex;align-items:center;gap:12px;background:rgba(40,50,70,.7);border:1px solid #3a4763;border-radius:10px;padding:0 14px;margin-bottom:10px;height:52px}
.blog-f.on{border-color:#3b82ff;box-shadow:0 0 0 2px rgba(59,130,255,.35)}
.blog-f svg{flex:none;width:20px;height:20px;fill:#cfd6e6}
.blog-f input{flex:1;min-width:0;background:none;border:0;color:#fff;font-size:17px;outline:none;padding:0;height:100%;margin:0;box-shadow:none}
.blog-f input::placeholder{color:#aab3c5}
.blog-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px}
.blog-pad button{height:56px;border-radius:10px;border:1px solid #3a4763;background:linear-gradient(#2a3346,#1b2232);color:#fff;font-size:26px;font-weight:600;cursor:pointer;padding:0;width:100%;-webkit-tap-highlight-color:transparent}
.blog-pad button:active{filter:brightness(1.4)}
.blog-pad .go{background:linear-gradient(#2f7bff,#0b55e6);border-color:#4b8dff}
.blog-pad svg{width:28px;height:28px;fill:none;stroke:#fff;stroke-width:2.4;vertical-align:middle}
.blog-err{color:#ff8a8a;text-align:center;min-height:1.3em;margin-top:10px;font-size:14px}
.blog-note{text-align:center;font-size:13px;color:#cfd6e6;margin-top:8px}.blog-note a{color:#8fb6ff;cursor:pointer}
.blog-foot{display:block;width:100%;margin-top:auto;padding-top:14px}

/* compact: whole login fits one phone screen */
.blog{height:100vh;height:100dvh}.blog-in{min-height:100vh;min-height:100dvh}
.blog-f input{caret-color:transparent;cursor:pointer;-webkit-user-select:none;user-select:none}
@media (max-width:600px){
.blog-hero{aspect-ratio:auto;height:30dvh;max-height:260px;object-position:center 30%}
.blog-card{margin:-12px 14px 0;padding:12px 14px 10px;border-radius:18px}
.blog-card h2{font-size:22px}.blog-card .sub{margin:2px 0 8px;font-size:10.5px;line-height:1.35}
.blog-f{height:42px;margin-bottom:7px}.blog-f input{font-size:16px}
.blog-pad{gap:7px;margin-top:8px}.blog-pad button{height:clamp(40px,6.4dvh,54px);font-size:22px}
.blog-err{margin-top:4px;min-height:1.1em;font-size:13px}.blog-note{margin-top:2px}
.blog-foot{padding-top:6px;max-height:11dvh;object-fit:contain}
}