/* Presentation only: scoped to the existing password sign-in layout. */
@layer lumi-login {
  @keyframes lumi-login-enter {from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
}
/* Native login DOM, form values, event handlers and auth remain unchanged. */
#root:has(form a[href="/forgot-password"]) {
  --lumi-login-bg:#fbf8f4;
  --lumi-login-card:#ffffff;
  --lumi-login-ink:#29231f;
  --lumi-login-muted:#9b8e82;
  --lumi-login-border:#eee5dc;
  --lumi-login-input:#fcfaf8;
  --lumi-login-accent:#c64c16;
  --lumi-login-shadow:0 24px 80px -26px #75451f22,0 2px 10px #75451f04;
}
#root:has(form a[href="/forgot-password"]) [class~="h-svh"][class~="max-w-none"] {
  min-height:100svh;
  height:auto;
  isolation:isolate;
  background:radial-gradient(ellipse at 87% 5%,#fbdabb70 0%,transparent 42%),radial-gradient(ellipse at 8% 100%,#fae5d350 0%,transparent 40%),var(--lumi-login-bg);
  padding:100px 24px 70px;
  color:var(--lumi-login-ink);
}
#root:has(form a[href="/forgot-password"]) [class~="h-svh"][class~="max-w-none"]::before {
  content:"";pointer-events:none;position:absolute;z-index:-1;inset:0;
  background-image:radial-gradient(#bc967028 .65px,transparent .65px);
  background-size:18px 18px;
  mask-image:linear-gradient(125deg,#0004,transparent 65%);
}
#root:has(form a[href="/forgot-password"]) [class~="h-svh"][class~="max-w-none"]::after {
  content:"";pointer-events:none;position:absolute;z-index:-1;
  width:450px;height:450px;right:-120px;top:12%;border-radius:50%;
  border:1px solid #d19a6420;
  box-shadow:0 0 0 58px #d19a6409,0 0 0 115px #d19a6406;
  clip-path:inset(-120px 0 -120px -120px);
}
#root:has(form a[href="/forgot-password"]) [class~="h-svh"][class~="max-w-none"]>a {
  top:30px;left:38px;gap:11px;color:var(--lumi-login-ink);
  padding:7px 10px 7px 6px;border-radius:12px;
}
#root:has(form a[href="/forgot-password"]) [class~="h-svh"][class~="max-w-none"]>a>div {
  width:35px;height:35px;border:1px solid #eecfb9;border-radius:11px;
  padding:5px;box-shadow:0 2px 5px #984c1106;background:#fff9f3;
}
#root:has(form a[href="/forgot-password"]) [class~="h-svh"][class~="max-w-none"]>a img {
  width:23px;height:23px;border-radius:0;object-fit:contain;
}
#root:has(form a[href="/forgot-password"]) [class~="h-svh"][class~="max-w-none"]>a h1 {
  font-size:17px;font-weight:650;letter-spacing:-.5px;
}
#root:has(form a[href="/forgot-password"]) [class~="h-svh"][class~="max-w-none"]>.container {
  padding:0;margin:0;max-width:none;width:100%;justify-content:center;
}
#root:has(form a[href="/forgot-password"]) [class~="h-svh"][class~="max-w-none"]>.container>div {
  width:460px;max-width:100%;margin:auto;
  padding:42px 40px 38px;border:1px solid var(--lumi-login-border);
  border-radius:24px;background:var(--lumi-login-card);
  box-shadow:var(--lumi-login-shadow);
  animation:lumi-login-enter .35s ease-out both;
}
#root:has(form a[href="/forgot-password"]) h2 {
  color:var(--lumi-login-ink);font-size:28px;line-height:1.35;
  text-align:left;font-weight:650;letter-spacing:-.9px;
  margin:0;padding-top:21px;position:relative;
}
#root:has(form a[href="/forgot-password"]) h2::before {
  content:"";position:absolute;left:0;top:0;
  width:28px;height:4px;border-radius:3px;
  background:linear-gradient(90deg,#c64c16,#eda15d);
}
#root:has(form a[href="/forgot-password"]) form {gap:22px}
#root:has(form a[href="/forgot-password"]) form label {
  color:#65574a;font-size:12px;font-weight:550;line-height:1.4;
}
#root:has(form a[href="/forgot-password"]) form input:not([type="checkbox"]):not([type="hidden"]) {
  height:50px;width:100%;padding:0 15px;
  border:1px solid var(--lumi-login-border);border-radius:12px;
  background:var(--lumi-login-input);color:var(--lumi-login-ink);
  font-size:14px;box-shadow:0 1px 2px #694a2c03;
  transition:border-color .18s,box-shadow .18s,background .18s;
}
#root:has(form a[href="/forgot-password"]) form input::placeholder {
  color:#b0a397;font-size:13px;
}
#root:has(form a[href="/forgot-password"]) form input:hover {border-color:#d7c5b5}
#root:has(form a[href="/forgot-password"]) form input:focus-visible {
  outline:none;border-color:#d6753d;box-shadow:0 0 0 3px #eb8a4220;
  background:var(--lumi-login-card);
}
#root:has(form a[href="/forgot-password"]) form input[aria-invalid="true"] {
  border-color:var(--destructive);box-shadow:0 0 0 3px color-mix(in srgb,var(--destructive) 9%,transparent);
}
#root:has(form a[href="/forgot-password"]) form input[name="password"] {padding-right:48px}
#root:has(form a[href="/forgot-password"]) form button[type="submit"] {
  height:50px;border-radius:12px;margin-top:6px;
  font-size:14px;font-weight:600;letter-spacing:.5px;
  color:white;background:linear-gradient(115deg,#d45b20,#bf4611);
  border:1px solid #bc4716;box-shadow:0 5px 12px #bf4f1320,inset 0 1px 0 #ffffff26;
  transition:box-shadow .18s,filter .18s,transform .18s;
}
#root:has(form a[href="/forgot-password"]) form button[type="submit"]:hover:not(:disabled) {
  filter:brightness(1.04);box-shadow:0 7px 15px #bf4f1330;transform:translateY(-1px);
}
#root:has(form a[href="/forgot-password"]) form button[type="submit"]:active:not(:disabled) {transform:translateY(0)}
#root:has(form a[href="/forgot-password"]) form a[href="/forgot-password"] {
  font-size:12px;font-weight:450;color:#9c795d;top:-1px;
}
#root:has(form a[href="/forgot-password"]) form a[href="/forgot-password"]:hover {color:var(--lumi-login-accent)}
#root:has(form a[href="/forgot-password"]) form button[aria-label="Toggle password visibility"] {
  border-radius:9px;color:#9d8c7c;
}
.dark #root:has(form a[href="/forgot-password"]) {
  --lumi-login-bg:#191614;--lumi-login-card:#241f1b;--lumi-login-ink:#f1e7de;
  --lumi-login-muted:#a89484;--lumi-login-border:#42352a;
  --lumi-login-input:#201b17;--lumi-login-accent:#e97837;
  --lumi-login-shadow:0 24px 80px -26px #0009,0 2px 10px #0002;
}
.dark #root:has(form a[href="/forgot-password"]) [class~="h-svh"][class~="max-w-none"] {
  background:radial-gradient(ellipse at 87% 5%,#71422229 0%,transparent 42%),var(--lumi-login-bg);
}
.dark #root:has(form a[href="/forgot-password"]) [class~="h-svh"]>a>div {background:#32251c;border-color:#61402b}
.dark #root:has(form a[href="/forgot-password"]) form label {color:#cfb8a4}
.dark #root:has(form a[href="/forgot-password"]) form input::placeholder {color:#887767}
@media(max-width:600px){
  #root:has(form a[href="/forgot-password"]) [class~="h-svh"][class~="max-w-none"]{padding:110px 20px 55px}
  #root:has(form a[href="/forgot-password"]) [class~="h-svh"][class~="max-w-none"]>a{top:22px;left:20px}
  #root:has(form a[href="/forgot-password"]) [class~="h-svh"][class~="max-w-none"]>.container>div{padding:32px 26px 29px;border-radius:21px}
  #root:has(form a[href="/forgot-password"]) [class~="h-svh"][class~="max-w-none"]::after{width:240px;height:240px;right:-120px}
  #root:has(form a[href="/forgot-password"]) h2{font-size:26px}
  #root:has(form a[href="/forgot-password"]) form input:not([type="checkbox"]):not([type="hidden"]){font-size:16px}
}
@media(prefers-reduced-motion:reduce){
  #root:has(form a[href="/forgot-password"]) [class~="h-svh"]>.container>div{animation:none}
  #root:has(form a[href="/forgot-password"]) form input,#root:has(form a[href="/forgot-password"]) form button{transition:none}
}