:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
* { box-sizing: border-box; }
body { background: #050914; color: #b7c5dc; margin: 0; min-height: 100vh; }
body::before { background: radial-gradient(circle at 50% 42%, rgba(31,88,170,.55), transparent 44%), radial-gradient(circle at 12% 10%, rgba(62,112,198,.24), transparent 32%), linear-gradient(145deg,#081125,#050914); content: ""; inset: 0; position: fixed; }
body::after { background-image: linear-gradient(rgba(121,159,218,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(121,159,218,.045) 1px,transparent 1px); background-size: 56px 56px; content: ""; inset: 0; mask-image: radial-gradient(circle at center,#000,transparent 78%); position: fixed; }
.portal-shell { align-items: center; display: flex; justify-content: center; min-height: 100vh; padding: 28px; position: relative; z-index: 1; }
.portal-card,.login-card { backdrop-filter: blur(36px) saturate(135%); background: linear-gradient(145deg,rgba(211,237,255,.17),rgba(31,74,133,.2) 48%,rgba(107,172,233,.13)); border: 1px solid rgba(176,220,255,.42); border-radius: 28px; overflow: hidden; padding: 38px; position: relative; width: min(720px,100%); }
.portal-card::before,.login-card::before { background: radial-gradient(circle at 18% 0,rgba(194,229,255,.2),transparent 34%); content: ""; inset: 0; pointer-events: none; position: absolute; }
.portal-eyebrow { color: #8dc8ff; font: 700 10px ui-monospace,monospace; letter-spacing: .19em; text-transform: uppercase; }
h1 { color: #f2f7ff; font-size: clamp(32px,5vw,56px); letter-spacing: -.04em; line-height: 1.04; margin: 18px 0; max-width: 620px; }
.portal-intro,.login-card>p { font-size: 14px; line-height: 1.65; max-width: 590px; }
.portal-links { display: grid; gap: 11px; margin-top: 30px; }
.portal-links>a { align-items: center; background: rgba(91,151,219,.08); border: 1px solid rgba(154,205,255,.2); border-radius: 18px; color: inherit; display: grid; gap: 13px; grid-template-columns: 42px 1fr auto; padding: 15px; text-decoration: none; transition: background .25s ease,transform .25s ease; }
.portal-links>a:hover { background: rgba(117,183,245,.16); transform: translateY(-2px); }
.portal-links strong,.portal-links small { display: block; }.portal-links strong { color: #edf6ff; font-size: 13px; }.portal-links small { color: #7287a7; font-size: 10px; margin-top: 5px; }.portal-links b { color: #9bd1ff; font-size: 10px; }
.link-orb { border: 1px solid rgba(255,255,255,.55); border-radius: 50%; height: 34px; width: 34px; }.link-orb.beta { background: radial-gradient(circle at 30% 25%,#fff,#77b7ff 12%,#436bd0 55%,#152044); }.link-orb.pro { background: radial-gradient(circle at 30% 25%,#fff,#77e4dd 12%,#5278e4 55%,#18214b); }
.portal-card>footer { align-items: center; border-top: 1px solid rgba(154,205,255,.16); display: flex; justify-content: space-between; margin-top: 28px; padding-top: 18px; }.identity { align-items: center; display: flex; font: 10px ui-monospace,monospace; gap: 7px; }.identity i,.security-note i { background: #67d4aa; border-radius: 50%; height: 6px; width: 6px; }.login-button,.portal-card footer button { background: rgba(166,213,255,.14); border: 1px solid rgba(176,220,255,.3); border-radius: 10px; color: #dceeff; cursor: pointer; font-size: 10px; padding: 8px 12px; text-decoration: none; }
.login-card { width: min(480px,100%); }.login-card h1 { font-size: clamp(30px,5vw,43px); }.back-link { color: #8ba2c2; display: block; font-size: 11px; margin-bottom: 35px; text-decoration: none; }.login-card form { display: grid; gap: 14px; margin-top: 25px; }.login-card label { color: #8da3c1; display: grid; font-size: 10px; gap: 7px; }.login-card input { background: rgba(7,18,40,.45); border: 1px solid rgba(154,205,255,.22); border-radius: 12px; color: #f1f6ff; font: 13px inherit; outline: none; padding: 13px; }.login-card input:focus { border-color: rgba(154,205,255,.68); }.login-card form button { align-items: center; background: linear-gradient(135deg,#8bc9ff,#6688ed); border: 0; border-radius: 12px; color: #071226; cursor: pointer; display: flex; font-weight: 700; justify-content: space-between; padding: 13px 15px; }.login-error { background: rgba(244,116,116,.1); border: 1px solid rgba(244,116,116,.3); border-radius: 10px; color: #ffb8b8; font-size: 11px; margin-top: 15px; padding: 10px; }.security-note { align-items: center; color: #6f84a2; display: flex; font: 9px ui-monospace,monospace; gap: 6px; margin-top: 18px; }
@media (max-width:600px) { .portal-shell { padding: 12px; }.portal-card,.login-card { border-radius: 22px; padding: 25px; }.portal-card>footer { align-items: flex-start; gap: 15px; }.portal-links>a { grid-template-columns: 36px 1fr; }.portal-links b { display: none; } }