/* The sign-in pages in the home page's look (red and black, Manrope + Inter, the Drottna "D"), layered over login.css so
   every behaviour stays: the globe (dark variant), floating labels, peek, caps hint, shake, spinner. */
:root { --ink: #edf2f8; --ink-2: #b2bfcf; --muted: #8a98ad; --line: rgba(178, 191, 207, .16); --sky-ink: #edf2f8; --sky-muted: #8a98ad;
  --red-light: #ff6b70; --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --display: "Manrope", "Inter", system-ui, sans-serif; }
html { background: #05080e; }
body.login { background: #05080e; color: var(--ink); overflow-x: hidden; overflow-y: auto; } /* short screens can reach the card's foot */
body.login::before { background: radial-gradient(40vmax 30vmax at 72% 40%, rgba(227, 30, 36, .32), transparent 70%),
  radial-gradient(30vmax 24vmax at 10% 90%, rgba(227, 30, 36, .14), transparent 70%); }
body.login::after { mix-blend-mode: normal; background-size: 64px 64px; filter: none; opacity: .5;
  background-image: linear-gradient(rgba(178, 191, 207, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(178, 191, 207, .05) 1px, transparent 1px);
  mask-image: radial-gradient(ellipse 60% 60% at 40% 45%, #000 20%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 60% 60% at 40% 45%, #000 20%, transparent 75%); animation: none; }
.veil { background: radial-gradient(120% 90% at 50% 40%, transparent 50%, rgba(5, 8, 14, .8) 100%); }
body.ready #globe { opacity: .9; }
.login-card { background: linear-gradient(180deg, rgba(16, 23, 35, .86), rgba(10, 15, 24, .92)); border: 1px solid rgba(227, 30, 36, .28);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 40px 90px -30px rgba(0, 0, 0, .9), 0 30px 80px -40px rgba(227, 30, 36, .45); }
.login-card::before { background: linear-gradient(140deg, rgba(255, 107, 112, .55), rgba(227, 30, 36, 0) 35%, rgba(227, 30, 36, 0) 65%, rgba(227, 30, 36, .55)); }
.brand-mark { background: rgba(227, 30, 36, .1); border: 1px solid rgba(227, 30, 36, .3); box-shadow: none; }
.brand-mark svg { width: 22px; height: 25px; stroke: none; }
.brand b, .intro h1 { font-family: var(--display); color: #fff; } .intro h1 { font-weight: 800; letter-spacing: -.03em; }
.brand small { font: 500 11.5px var(--font); letter-spacing: .02em; text-transform: none; color: var(--muted); }
.intro p { color: var(--ink-2); }
.field input, .field select { background: rgba(5, 8, 14, .6); border-color: rgba(178, 191, 207, .2); color: var(--ink); box-shadow: none; }
.field input:hover, .field select:hover { border-color: rgba(178, 191, 207, .34); }
.field input:focus, .field select:focus { background: rgba(5, 8, 14, .8); border-color: var(--red); box-shadow: 0 0 0 4px rgba(227, 30, 36, .18); }
.field input:-webkit-autofill { -webkit-text-fill-color: var(--ink); -webkit-box-shadow: 0 0 0 40px #0b111b inset; }
.field input:focus + label { color: var(--red-light); }
.peek:hover { color: #fff; background: rgba(255, 255, 255, .06); } .peek[aria-pressed="true"] { color: var(--red-light); }
.check .box { background: rgba(5, 8, 14, .6); border-color: rgba(178, 191, 207, .3); }
.caps { color: #ffb547; } .err { color: var(--red-light); }
.go { border-radius: 999px; background: linear-gradient(180deg, #f0353b 0%, var(--red) 45%, #c9161c 100%); }
.google { border-radius: 999px; background: rgba(255, 255, 255, .04); border-color: rgba(178, 191, 207, .22); color: var(--ink); }
.google:hover { background: rgba(255, 255, 255, .08); box-shadow: none; }
.or { color: var(--muted); } .or::before, .or::after { background: rgba(178, 191, 207, .16); }
.note { background: rgba(62, 240, 176, .1); color: #8ff5cf; border: 1px solid rgba(62, 240, 176, .25); }
.link { color: var(--red-light); } .switch { color: var(--ink-2); }
.login-foot, .legend { color: var(--muted); text-shadow: none; } .legend i { background: linear-gradient(90deg, var(--red), var(--red-light)); }
.home { position: absolute; top: 22px; left: max(20px, 4vw); z-index: 4; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px;
  border: 1px solid rgba(178, 191, 207, .2); background: rgba(5, 8, 14, .5); color: var(--ink-2); font: 500 13px var(--font); text-decoration: none; }
.perks { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; margin: 12px 0 0; padding: 0; list-style: none; font: 500 12.5px var(--font); color: var(--ink-2); }
.perks[hidden] { display: none; } .perks li::before { content: "✓"; margin-right: 6px; color: var(--red-light); font-weight: 700; }
.help { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid rgba(178, 191, 207, .12); font-size: 12.5px; color: var(--muted); text-align: center; }
.help .link { font-size: inherit; text-decoration: none; } .help .link:hover { text-decoration: underline; }
.value { position: fixed; right: 28px; top: 84px; z-index: 3; width: 290px; padding: 18px 20px; border-radius: 16px; opacity: 0; transition: opacity .8s .4s;
  background: rgba(8, 12, 20, .88); border: 1px solid rgba(227, 30, 36, .22); box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
body.ready .value { opacity: 1; } .value p { margin: 0 0 12px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--red-light); }
.value ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; } .value li { font-size: 12.5px; line-height: 1.45; color: var(--ink-2); }
.value b { display: block; font: 700 14px var(--display); color: #fff; } @media (max-width: 1100px) { .value { display: none; } }
.home:hover { color: #fff; border-color: rgba(178, 191, 207, .4); }.login-wrap { padding-top: 84px; } .switch { display: grid; grid-template-columns: 1fr auto; row-gap: 4px; } .switch #forgot { grid-row: span 2; align-self: start; justify-self: start; }