/* FirstHack login + signup: one clean card, Material-style fields. */
.au{min-height:calc(100vh - 220px);display:flex;align-items:flex-start;justify-content:center;padding:36px 16px 48px}
.au-card{width:100%;max-width:420px;background:var(--surface,#fff);border:1px solid var(--border,#e4e5e9);border-radius:24px;padding:30px 28px 24px;
  box-shadow:0 1px 2px rgba(10,12,16,.04),0 24px 56px -32px rgba(10,12,16,.38);animation:au-in .35s cubic-bezier(.2,.8,.3,1)}
@keyframes au-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.au-brand{display:flex;justify-content:center;align-items:baseline;width:max-content;margin:0 auto 16px;font-size:30px;font-weight:750;letter-spacing:-.02em;text-decoration:none}
.au-brand:hover{text-decoration:none}
.au-logo{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;margin:0 auto 14px;color:#fff;font:800 24px/1 var(--font,inherit);
  background:linear-gradient(135deg,#dc2733,#9c0e19);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 10px 22px -10px rgba(156,14,25,.7)}
.au-h{text-align:center;font-size:24px;line-height:1.25;letter-spacing:-.015em;margin:0 0 6px}
.au-sub{text-align:center;color:var(--text-dim,#5b6170);font-size:14.5px;margin:0 0 22px}
.au .alert{border-radius:12px;font-size:14px}

/* outlined text field with a floating label */
.mf{position:relative;margin:0 0 14px}
.mf input{display:block;width:100%;height:56px;margin:0!important;padding:22px 16px 6px!important;font-size:16px!important;color:var(--text,#14161a);
  background:var(--surface,#fff)!important;border:1.5px solid var(--border,#e4e5e9)!important;border-radius:14px!important;box-shadow:none!important;outline:0;
  transition:border-color .15s,box-shadow .15s}
.mf input:hover{border-color:color-mix(in srgb,var(--text,#14161a) 28%,var(--border,#e4e5e9))!important}
.mf input:focus{border-color:var(--blue,#c1121f)!important;box-shadow:0 0 0 4px rgba(193,18,31,.1)!important}
.mf label{position:absolute;left:17px;top:18px;font-size:16px;color:var(--text-faint,#8a909c);pointer-events:none;transform-origin:left top;
  transition:transform .15s ease,color .15s ease;z-index:2;background:transparent}
.mf:has(input:focus) label,.mf:has(input:not(:placeholder-shown)) label{transform:translateY(-10px) scale(.76);color:var(--text-dim,#5b6170)}
.mf:has(input:focus) label{color:var(--blue,#c1121f)}
/* same thing for older phones (iOS < 15.4, old Android) that lack :has(), via classes set by JS */
.mf.is-up label{transform:translateY(-10px) scale(.76);color:var(--text-dim,#5b6170)}
.mf.is-focus label{color:var(--blue,#c1121f)}
.mf input::placeholder{color:transparent}
.mf:has(input:focus) input::placeholder{color:var(--text-faint,#b0b5bf)}
.mf-hint{font-size:12.5px;color:var(--text-faint,#8a909c);margin:6px 4px 0}
.mf-eye{position:absolute;right:8px;top:8px;width:40px;height:40px;border:0;border-radius:10px;background:transparent;color:var(--text-faint,#8a909c);
  cursor:pointer;display:grid;place-items:center;z-index:3}
.mf-eye:hover{background:var(--surface-2,#f2f3f5);color:var(--text,#14161a)}
.mf.has-eye input{padding-right:52px!important}

.au-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:52px;margin-top:6px;border:0;border-radius:999px;cursor:pointer;
  font:600 16px/1 var(--font,inherit);color:#fff;background:linear-gradient(135deg,#dc2733,#b0101c);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 10px 22px -12px rgba(176,16,28,.75);transition:filter .15s,transform .06s}
.au-btn:hover{filter:brightness(1.06)}.au-btn:active{transform:translateY(1px)}
.au-btn.is-busy{opacity:.75;pointer-events:none}
.au-foot{text-align:center;margin:20px 0 0;padding-top:16px;border-top:1px solid var(--border,#e4e5e9);font-size:14.5px;color:var(--text-dim,#5b6170)}
.au-foot a{font-weight:600}
.au-terms{text-align:center;font-size:12px;color:var(--text-faint,#8a909c);margin:12px 0 0}
.au-terms a{color:inherit;text-decoration:underline}
.au .gsi-wrap{margin-bottom:18px}
@media (max-width:480px){ .au{padding:20px 12px 36px} .au-card{padding:24px 18px 20px;border-radius:20px} .au-h{font-size:22px} }