/* ============================================================
   Nadel — Sign in
   One dark card floating on the storefront photo. The card owns
   its own token layer so nothing here depends on app.css, which
   is a light workspace theme and would fight the photo.
   ============================================================ */
:root{
  --brand:#009C4A;
  --brand-hi:#2BD07E;          /* accent ink that stays readable on black */
  --card:#101215;
  --card-2:#0A0B0C;
  --line:rgba(255,255,255,.10);
  --line-2:rgba(255,255,255,.20);
  --field:rgba(255,255,255,.05);
  --text:#F5F6F7;
  --muted:#A9AEB5;
  --r:14px;
  --r-lg:24px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;min-height:100svh;
  display:grid;place-items:center;
  padding:clamp(16px,4vw,48px);
  color:var(--text);
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:15px;line-height:1.55;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  background:#07080A url("./image/restaurant-bg.jpg") center/cover no-repeat fixed;
}
/* the photo is busy and mid-key: a scrim buys the contrast the form needs */
body::before{
  content:"";position:fixed;inset:0;z-index:0;
  background:
    radial-gradient(90% 70% at 50% 45%,rgba(0,0,0,.45),rgba(0,0,0,.82) 100%),
    linear-gradient(180deg,rgba(4,6,8,.55),rgba(4,6,8,.80));
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,p{margin:0}
:focus-visible{outline:2px solid var(--brand-hi);outline-offset:2px;border-radius:8px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[hidden]{display:none!important}

/* ---------------- card ---------------- */
.auth{
  position:relative;z-index:1;
  width:100%;max-width:452px;
  padding:clamp(28px,5vw,44px) clamp(22px,4.5vw,40px) clamp(26px,4.5vw,38px);
  border-radius:var(--r-lg);
  background:linear-gradient(165deg,var(--card),var(--card-2));
  border:1px solid var(--line);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.06);
  animation:rise .5s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.auth{animation:none}}

.auth-logo{display:flex;justify-content:center}
.auth-logo img{width:104px;height:auto}
.auth-head{margin-top:22px;text-align:center}
.auth-head h1{
  font-family:"Manrope",sans-serif;font-weight:700;letter-spacing:-.03em;
  font-size:clamp(22px,3.4vw,26px);line-height:1.2;
}
.auth-head p{margin-top:8px;color:var(--muted);font-size:14px}

/* ---------------- fields ---------------- */
form{margin-top:26px}
.field + .field{margin-top:16px}
.field label{display:block;font-size:13px;font-weight:600;color:var(--muted);margin-bottom:7px}
.control{position:relative;display:flex;align-items:center}
.control input{
  width:100%;
  padding:13px 15px;
  font:inherit;color:var(--text);
  background:var(--field);
  border:1px solid var(--line);
  border-radius:var(--r);
  transition:border-color .16s ease,background .16s ease,box-shadow .16s ease;
}
.control input::placeholder{color:#6E757D}
.control input:hover{border-color:var(--line-2)}
.control input:focus{
  outline:none;background:rgba(255,255,255,.07);
  border-color:var(--brand-hi);
  box-shadow:0 0 0 3px rgba(0,156,74,.22);
}
/* Chrome paints its own yellow autofill ground — repaint it dark */
.control input:-webkit-autofill,
.control input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--text);
  -webkit-box-shadow:0 0 0 40px #16191D inset;
  caret-color:var(--text);
}
.has-toggle input{padding-right:50px}
.toggle{
  position:absolute;right:6px;
  display:grid;place-items:center;
  width:38px;height:38px;border-radius:10px;color:var(--muted);
  transition:color .16s ease,background .16s ease;
}
.toggle:hover{color:var(--text);background:rgba(255,255,255,.07)}
.toggle svg{width:19px;height:19px}

/* ---------------- row: remember + forgot ---------------- */
.row{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:18px;flex-wrap:wrap}
.check{display:inline-flex;align-items:center;gap:9px;cursor:pointer;font-size:14px;color:var(--muted)}
.check input{position:absolute;opacity:0;width:0;height:0}
.check .box{
  width:18px;height:18px;flex:none;border-radius:5px;
  border:1.5px solid var(--line-2);background:var(--field);
  display:grid;place-items:center;
  transition:background .16s ease,border-color .16s ease;
}
.check .box svg{width:12px;height:12px;stroke:#fff;opacity:0;transform:scale(.7);transition:opacity .14s ease,transform .14s ease}
.check input:checked + .box{background:var(--brand);border-color:var(--brand)}
.check input:checked + .box svg{opacity:1;transform:none}
.check input:focus-visible + .box{outline:2px solid var(--brand-hi);outline-offset:2px}
.check:hover .box{border-color:var(--line-2)}
.link{font-size:14px;font-weight:600;color:var(--brand-hi)}
.link:hover{text-decoration:underline}

/* ---------------- submit ---------------- */
.btn{
  margin-top:24px;width:100%;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 20px;border-radius:999px;
  font-family:"Manrope",sans-serif;font-weight:700;font-size:15.5px;letter-spacing:-.01em;
  color:#fff;background:var(--brand);
  box-shadow:0 10px 30px -14px rgba(0,156,74,.9);
  transition:transform .14s ease,background .16s ease,box-shadow .16s ease;
}
.btn:hover{background:#00A851;box-shadow:0 14px 34px -14px rgba(0,156,74,1)}
.btn:active{transform:translateY(1px)}
.btn[aria-busy="true"]{pointer-events:none;opacity:.75}
.btn .spin{width:17px;height:17px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;display:none}
.btn[aria-busy="true"] .spin{display:block}
.btn[aria-busy="true"] .arrow{display:none}
@keyframes spin{to{transform:rotate(360deg)}}

.alt{margin-top:22px;text-align:center;font-size:14px;color:var(--muted)}
.alt a{font-weight:600;color:var(--brand-hi)}
.alt a:hover{text-decoration:underline}
.back{
  position:relative;z-index:1;
  display:inline-flex;align-items:center;gap:7px;
  margin-top:20px;font-size:13.5px;color:rgba(255,255,255,.62);
}
.back:hover{color:#fff}
.back svg{width:15px;height:15px}
.stack{display:flex;flex-direction:column;align-items:center}

@media (max-width:430px){
  body{background-attachment:scroll}
  .auth{border-radius:20px}
}