/* Sign-in: the old site's coral brand glow and gradient button on the hybrid glass card (works without JS). */
:root { color-scheme: dark; --page: #080c15; --mat: rgba(20, 27, 44, 0.66); --ink: #f1f3f8; --ink2: rgba(226,232,245,.78); --muted: rgba(196,206,228,.64); --border: rgba(255,255,255,.12); --field: rgba(255,255,255,.05); --accent: #8c85ff; --bad: #ef6461; --coral: #ff6b4a; --coral2: #cc311e; }
@media (prefers-color-scheme: light) { :root { color-scheme: light; --page: #f2f4f9; --mat: rgba(255,255,255,.72); --ink: #0f172a; --ink2: rgba(15,23,42,.76); --muted: rgba(15,23,42,.6); --border: rgba(15,23,42,.10); --field: rgba(15,23,42,.04); --accent: #4f46e5; --bad: #c22f2f; --coral: #e2502f; --coral2: #b8321b; } }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; background: var(--page); color: var(--ink); padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  font: 14px/1.5 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(620px 420px at 50% 30%, rgba(255,107,74,.14), transparent 70%), radial-gradient(900px 600px at 10% -10%, rgba(99,91,255,.16), transparent 62%), radial-gradient(800px 600px at 100% 110%, rgba(0,196,255,.07), transparent 60%), var(--page); }
.box { width: 100%; max-width: 380px; background: var(--mat); border: 0.5px solid var(--border); border-radius: 24px; padding: 34px 28px 26px; text-align: center;
  -webkit-backdrop-filter: blur(28px) saturate(180%); backdrop-filter: blur(28px) saturate(180%);
  box-shadow: 0 30px 80px -24px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.08); }
.mark { width: 58px; height: 58px; margin: 0 auto; border-radius: 17px; display: grid; place-items: center; background: linear-gradient(160deg, #1b1f33, #0d1020);
  box-shadow: inset 0 0 0 0.5px rgba(255,255,255,.12), 0 10px 26px -8px rgba(255,107,74,.55); }
.mark svg { display: block; width: 34px; height: auto; }
h1 { font: 700 24px/1.2 -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", system-ui, sans-serif; letter-spacing: -0.025em; margin: 16px 0 4px; }
.sub { color: var(--muted); margin: 0 0 22px; font-size: 13px; }
form { text-align: left; }
label { display: block; font-size: 12px; font-weight: 500; color: var(--ink2); margin-bottom: 7px; }
input[type=password] { width: 100%; height: 46px; border-radius: 12px; border: 0.5px solid var(--border); background: var(--field); color: var(--ink); padding: 0 14px; font: inherit; font-size: 16px; outline: none; transition: border-color .15s, box-shadow .15s; }
input[type=password]:focus { border-color: var(--coral); box-shadow: 0 0 0 4px color-mix(in srgb, var(--coral) 22%, transparent); }
button { width: 100%; height: 46px; margin-top: 16px; border: 0; border-radius: 12px; background: linear-gradient(135deg, var(--coral), var(--coral2)); color: #fff; font: 600 15px/1 inherit; font-family: inherit; cursor: pointer;
  box-shadow: 0 10px 24px -8px rgba(204,49,30,.55); transition: filter .15s, transform .12s cubic-bezier(.34,1.32,.64,1); }
button:hover { filter: brightness(1.06); }
button:active { transform: scale(.98); }
input:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.err { color: var(--bad); font-size: 13px; margin: 12px 0 0; text-align: center; }
.foot { color: var(--muted); font-size: 11.5px; margin: 20px 0 0; }
@media (prefers-reduced-transparency: reduce) { .box { background: var(--page); -webkit-backdrop-filter: none; backdrop-filter: none; } }