/* Rebuilt stylesheet with Safari-friendly fallbacks */
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  background: radial-gradient(circle at 25% 25%, #1f3b73, #0d1524 70%);
  color: #e9eef6;
  -webkit-font-smoothing: antialiased;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

:root {
  --card-bg: rgba(255,255,255,0.07);
  --card-border: rgba(255,255,255,0.15);
  --accent: #5aa9ff;
  --accent-glow-r: 174; --accent-glow-g: 212; --accent-glow-b: 255;
  --accent-glow-rgb: var(--accent-glow-r), var(--accent-glow-g), var(--accent-glow-b);
  --danger: #ff3d54;
  --radius-sm: 4px;
  --radius: 14px;
  --focus-ring: 0 0 0 3px rgba(var(--accent-glow-rgb),0.35);
  --transition: 160ms cubic-bezier(.4,0,.2,1);
  --logo-bg: #050607;
  --logo-fill: #ffbf00;
  -webkit-text-size-adjust: 100%;
}

@media (prefers-color-scheme: light) {
  body { background: linear-gradient(135deg,#e3f1ff,#ffffff); color: #213043; }
  :root { --card-bg: rgba(255,255,255,0.55); --card-border: rgba(0,0,0,0.08); }
}

.login-shell { width: 100%; max-width: 420px; position: relative; }

.login-card {
  /* Fallback solid color for browsers w/o backdrop-filter */
  background: rgba(20,28,40,0.72);
  background: var(--card-bg);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: clamp(1.75rem, 4vw, 2.5rem) clamp(1.5rem, 3vw, 2.25rem) 2.25rem;
  box-shadow: 0 12px 28px -8px rgba(0,0,0,0.45), 0 2px 4px -1px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.04) inset;
  position: relative;
  overflow: hidden;
}
.login-card:before { content:""; position:absolute; inset:0; background:linear-gradient(125deg, rgba(255,255,255,0.18), transparent 45%); pointer-events:none; }

.brand { display:flex; align-items:center; gap:.9rem; margin:0 0 .75rem; }
.brand-icon { width:46px; height:46px; display:block; flex-shrink:0; border-radius:12px; box-shadow:0 4px 12px -2px rgba(0,0,0,0.55),0 0 0 1px rgba(255,255,255,0.15) inset; background:#111; }
.keeper-logo .logo-bg { fill: var(--logo-bg); }
.keeper-logo .logo-fill { fill: var(--logo-fill); }

@media (prefers-color-scheme: light) { :root { --logo-bg:#ffffff; --logo-fill:#e2a500; } .brand-icon { box-shadow:0 3px 8px -3px rgba(0,0,0,0.25),0 0 0 1px rgba(0,0,0,0.06) inset; } }

.brand h1 { font-size:1.15rem; font-weight:600; letter-spacing:.5px; margin:0; display:flex; flex-direction:column; line-height:1.15; }
.brand h1 span { font-weight:400; opacity:.65; font-size:.7rem; letter-spacing:1.2px; text-transform:uppercase; margin-top:.25rem; }

form { display:flex; flex-direction:column; gap:1rem; margin-top:.35rem; }
.field { display:flex; flex-direction:column; gap:.5rem; }
.field label { font-size:.8rem; text-transform:uppercase; letter-spacing:1px; font-weight:600; opacity:.75; }

.control { position:relative; }
.control input { width:100%; background:rgba(255,255,255,0.09); border:1px solid rgba(255,255,255,0.25); color:inherit; font:inherit; padding:.9rem .95rem .9rem 2.6rem; border-radius:var(--radius-sm); outline:none; transition:var(--transition); }
.control input::placeholder { color:#b7c2d2; opacity:.6; }
.control input:focus { border-color:var(--accent); box-shadow:var(--focus-ring),0 0 0 1px var(--accent) inset; }
.control svg { position:absolute; top:50%; left:.85rem; width:20px; height:20px; transform:translateY(-50%); stroke:#9fb2c9; transition:var(--transition); pointer-events:none; }
.control input:focus + svg { stroke:var(--accent); }

.actions { display:flex; flex-direction:column; gap:.85rem; margin-top:.5rem; }

button[type=submit] { background:linear-gradient(135deg,#5aa9ff,#2f7edb 55%, #1f63af); border:1px solid #2c6fb9; color:#fff; font:inherit; font-weight:600; letter-spacing:.5px; padding:.95rem 1.1rem; border-radius:var(--radius-sm); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:.5rem; position:relative; transition:var(--transition); box-shadow:0 6px 18px -6px rgba(0,0,0,0.55),0 2px 4px -1px rgba(0,0,0,0.4); }
button[type=submit]:hover { filter:brightness(1.08); box-shadow:0 8px 22px -6px rgba(0,0,0,0.6),0 4px 8px -2px rgba(0,0,0,0.45); }
button[type=submit]:active { transform:translateY(1px); }
button[type=submit]:focus-visible { outline:none; box-shadow:var(--focus-ring),0 0 0 1px #d0ebff inset; }

.secondary-btn { background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.25); color:#e2ecf7; font:inherit; font-weight:500; letter-spacing:.4px; padding:.85rem 1rem; border-radius:var(--radius-sm); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:.5rem; transition:var(--transition); }
.secondary-btn:hover { background:rgba(255,255,255,0.12); }
.secondary-btn:focus-visible { outline:none; box-shadow:var(--focus-ring),0 0 0 1px rgba(255,255,255,0.35) inset; }

.password-control { position:relative; }
.pw-toggle { position:absolute; top:50%; right:.55rem; transform:translateY(-50%); background:none; border:none; cursor:pointer; font-size:.9rem; line-height:1; padding:.35rem; color:#b7c2d2; opacity:.75; transition:var(--transition); }
.pw-toggle:hover { opacity:1; }
.pw-toggle:focus-visible { outline:none; box-shadow:var(--focus-ring); border-radius:4px; }

.primary-btn { position:relative; }
.primary-btn .spinner { width:16px; height:16px; border-radius:50%; border:3px solid rgba(255,255,255,0.4); border-top-color:#fff; opacity:0; pointer-events:none; transform:scale(.6); transition:var(--transition); -webkit-backface-visibility:hidden; backface-visibility:hidden; }
.primary-btn.loading .spinner { animation:spin .7s linear infinite; opacity:1; transform:scale(1); }
.primary-btn.loading .btn-label { opacity:.6; }
@keyframes spin { to { transform:rotate(360deg); } }

.meta-row { display:flex; justify-content:space-between; align-items:center; font-size:.72rem; letter-spacing:.5px; margin-top:.25rem; }
.meta-row a { color:var(--accent); text-decoration:none; position:relative; }
.meta-row a:after { content:""; position:absolute; left:0; bottom:-2px; height:1px; width:100%; background:currentColor; transform:scaleX(0); transform-origin:left; transition:var(--transition); opacity:.7; }
.meta-row a:hover:after { transform:scaleX(1); }

footer.small-note { margin-top:1.75rem; font-size:.65rem; opacity:.55; line-height:1.3; text-align:center; }

.login-shell:after { content:""; position:absolute; inset:-2px; border-radius:inherit; pointer-events:none; background:radial-gradient(circle at 60% 15%, rgba(var(--accent-glow-rgb),0.35), rgba(var(--accent-glow-rgb),0) 60%); mix-blend-mode:overlay; opacity:.6; animation:float 6.5s ease-in-out infinite; }
@keyframes float { 0%,100% { transform:translateY(-4px);} 50% { transform:translateY(6px);} }

.error { display:none; font-size:.7rem; color:var(--danger); margin-top:.35rem; letter-spacing:.4px; }
.error.visible { display:block; }

/* Global error block (server / passkey failures) */
.global-error {
  font-size:.72rem;
  border:1px solid rgba(255,0,0,0.4);
  background:rgba(255,0,0,0.08);
  padding:.6rem .75rem;
  border-radius:var(--radius-sm);
  line-height:1.3;
  letter-spacing:.4px;
  margin-top:.25rem;
  display:none;
}
.global-error.visible { display:block; animation:fadeIn .3s ease; }
@keyframes fadeIn { from { opacity:0; transform:translateY(-4px);} to { opacity:1; transform:translateY(0);} }

@media (max-width: 560px) { .login-card { padding:1.75rem 1.35rem 2rem; } .brand h1 { font-size:1.05rem; } }

.success-card { text-align:center; padding:clamp(2rem,4vw,2.75rem) clamp(1.75rem,3vw,2.5rem) 2.5rem; display:flex; flex-direction:column; align-items:center; gap:1.1rem; animation:cardPop .55s cubic-bezier(.4,0,.2,1); }
.success-icon { width:74px; height:74px; border-radius:50%; display:grid; place-items:center; font-size:2rem; font-weight:600; background:radial-gradient(circle at 30% 30%, #37d773, #138b42 70%); box-shadow:0 6px 18px -6px rgba(0,0,0,0.55),0 0 0 1px rgba(255,255,255,0.12) inset,0 0 0 4px rgba(55,215,115,0.25); color:#fff; position:relative; opacity:0; transform:scale(.6) rotate(-12deg); animation:iconIn .65s .15s cubic-bezier(.35,1.4,.4,1) forwards; }
.success-title { margin:.25rem 0 0; font-size:1.45rem; letter-spacing:.5px; font-weight:600; }
.success-msg { margin:0; font-size:.95rem; line-height:1.45; }
.success-msg strong { font-weight:600; color:#fff; }
.success-meta { font-size:.7rem; letter-spacing:.7px; opacity:.6; line-height:1.4; max-width:420px; }
@media (prefers-color-scheme: light) { .success-msg strong { color:#0f2742; } .success-icon { box-shadow:0 6px 18px -6px rgba(0,0,0,0.25),0 0 0 1px rgba(0,0,0,0.05) inset,0 0 0 4px rgba(55,215,115,0.25); } }
@keyframes iconIn { 0% { opacity:0; transform:scale(.6) rotate(-12deg);} 55% { transform:scale(1.08) rotate(4deg);} 100% { opacity:1; transform:scale(1) rotate(0);} }
@keyframes cardPop { 0% { opacity:0; transform:translateY(12px) scale(.98);} 100% { opacity:1; transform:translateY(0) scale(1);} }

/* Safari specific tweaks (hyphens hack) */
@supports (-webkit-hyphens:none) and (not (hyphens:none)) {
  .login-card { background:rgba(20,28,40,0.78); }
  .control input { -webkit-appearance:none; appearance:none; }
  button, .secondary-btn { -webkit-appearance:none; appearance:none; }
  .primary-btn.loading .spinner { animation-duration:.85s; }
}

@media (prefers-reduced-motion: reduce) { .login-shell:after, .success-card, .success-icon, .primary-btn .spinner { animation:none !important; } }