:root { --forest:#153F2F; --cream:#F5F4EC; --lime:#D8EB68; --orange:#F47760; --white:#FFFEFA; --charcoal:#172D25; --muted:#777777; }
.login-page { background:var(--cream); min-height:100vh; }
.login-topbar { align-items:center; display:flex; height:88px; justify-content:space-between; margin:auto; max-width:1320px; padding:0 34px; }
.login-topbar nav { display:flex; gap:30px; }
.login-topbar nav a { color:#6e7770; font-size:13px; font-weight:700; text-decoration:none; }
.login-nav-actions { align-items:center; display:flex; gap:10px; }
.nav-login,.nav-start { border-radius:999px; font-size:12px; font-weight:700; padding:11px 18px; text-decoration:none; }
.nav-login { background:transparent; border:0; color:var(--charcoal); }
.nav-start { background:var(--forest); color:white; }
.login-layout { align-items:center; display:grid; gap:4.5vw; grid-template-columns:minmax(380px,.8fr) minmax(520px,1.2fr); margin:auto; max-width:1320px; min-height:calc(100vh - 88px); padding:35px 34px 70px; }
.login-welcome { padding-left:2vw; }
.login-badge { align-items:center; background:white; border-radius:999px; color:var(--forest); display:inline-flex; font-size:10px; font-weight:800; gap:8px; letter-spacing:.12em; margin:0 0 24px; padding:9px 13px; }
.login-badge span { background:var(--orange); border-radius:50%; height:7px; width:7px; }
.login-welcome h1 { font-size:clamp(48px,5.2vw,76px); line-height:.94; letter-spacing:-.065em; margin:0; }
.login-welcome h1 em { color:var(--forest); font-style:normal; }
.welcome-copy { color:var(--muted); font-size:16px; line-height:1.7; margin:25px 0 30px; max-width:500px; }
.welcome-actions { align-items:center; display:flex; gap:12px; }
.welcome-login { align-items:center; background:var(--forest); border:0; border-radius:999px; color:white; display:flex; font-weight:700; justify-content:center; min-width:142px; padding:15px 20px; }
.welcome-login span { font-size:19px; margin-left:18px; }
.welcome-actions a { border:1px solid #cbd0c6; border-radius:999px; color:var(--charcoal); font-size:13px; font-weight:700; padding:14px 20px; text-decoration:none; }
.welcome-proof { color:#667269; display:flex; flex-wrap:wrap; font-size:11px; gap:18px; margin-top:26px; }
.meal-preview { background:var(--forest); border-radius:32px; box-shadow:0 30px 70px rgba(23,71,52,.18); color:white; padding:28px; }
.preview-heading { align-items:flex-start; display:flex; justify-content:space-between; margin-bottom:20px; }
.preview-heading p { color:#bed0c6; font-size:10px; margin:0 0 5px; text-transform:uppercase; }
.preview-heading h2 { font-size:26px; letter-spacing:-.04em; }
.preview-status { border:1px solid rgba(213,233,92,.45); border-radius:999px; color:var(--lime); font-size:10px; padding:8px 10px; white-space:nowrap; }
.featured-recommendation { align-items:center; background:var(--white); border-radius:22px; color:var(--charcoal); display:grid; grid-template-columns:1fr 1.15fr 118px; min-height:270px; overflow:hidden; padding-right:18px; position:relative; }
.recommendation-image { align-items:flex-start; background:url("https://images.unsplash.com/photo-1547592180-85f173990554?auto=format&fit=crop&w=700&q=85") center/cover; display:flex; height:270px; padding:14px; }
.recommendation-image span { background:var(--orange); border-radius:999px; color:white; font-size:9px; font-weight:800; padding:8px 10px; }
.recommendation-copy { padding:24px 20px; }
.meal-kicker { color:var(--orange)!important; font-size:9px!important; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }
.recommendation-copy h3 { font-size:25px; line-height:1.05; margin:8px 0; }
.recommendation-copy > p:not(.meal-kicker) { color:var(--muted); font-size:11px; line-height:1.55; }
.recommendation-meta { display:flex; gap:18px; margin-top:18px; }
.recommendation-meta div { display:flex; flex-direction:column; }
.recommendation-meta strong { font-size:15px; }
.recommendation-meta span { color:var(--muted); font-size:9px; margin-top:3px; }
.nutrition-ring { align-items:center; background:conic-gradient(var(--lime) 0 75%,#e8eadf 75% 100%); border-radius:50%; display:flex; flex-direction:column; height:112px; justify-content:center; position:relative; width:112px; }
.nutrition-ring::after { background:var(--white); border-radius:50%; content:""; height:87px; position:absolute; width:87px; }
.nutrition-ring span,.nutrition-ring small { position:relative; z-index:1; }
.nutrition-ring span { font:700 20px "Space Grotesk",sans-serif; }
.nutrition-ring small { color:var(--muted); font-size:8px; line-height:1.25; text-align:center; }
.preview-meals { display:grid; gap:12px; grid-template-columns:repeat(3,1fr); margin-top:16px; }
.preview-meals article { background:var(--white); border-radius:16px; color:var(--charcoal); overflow:hidden; }
.preview-meal-image { background-position:center; background-size:cover; height:92px; }
.preview-photo-yellow { background-image:url("https://images.unsplash.com/photo-1547592180-85f173990554?auto=format&fit=crop&w=500&q=80"); }
.preview-photo-blue { background-image:url("https://images.unsplash.com/photo-1512621776951-a57141f2eefd?auto=format&fit=crop&w=500&q=80"); }
.preview-photo-pink { background-image:url("https://images.unsplash.com/photo-1546069901-ba9599a7e63c?auto=format&fit=crop&w=500&q=80"); }
.preview-meals article div:last-child { display:flex; flex-direction:column; padding:10px 12px; }
.preview-meals strong { font-size:11px; min-height:29px; }
.preview-meals span { color:var(--muted); font-size:9px; }
.login-dialog { background:transparent; border:0; max-height:94vh; max-width:470px; overflow:visible; padding:0; width:calc(100% - 28px); }
.login-dialog::backdrop { background:rgba(23,45,37,.58); backdrop-filter:blur(7px); }
.dialog-close { align-items:center; background:var(--white); border:0; border-radius:50%; color:var(--charcoal); display:flex; font-size:24px; height:36px; justify-content:center; position:absolute; right:-12px; top:-12px; width:36px; z-index:3; }
.login-form { background:var(--white); border-radius:24px; box-shadow:0 24px 80px rgba(23,45,37,.25); max-height:94vh; overflow-y:auto; padding:30px 38px 34px; }
.auth-brand { display:flex; justify-content:center; margin-bottom:18px; text-decoration:none; }
.auth-heading { margin-bottom:20px; text-align:center; }
.auth-heading h1 { font-size:30px; letter-spacing:-.04em; margin:7px 0; }
.auth-heading p:last-child { color:var(--muted); font-size:12px; margin:0; }
.login-form > label,.auth-options { color:var(--charcoal); display:block; font-size:11px; font-weight:700; margin-bottom:14px; }
.auth-input { background:#fbfaf6; border:1px solid #ded9cb; border-radius:10px; color:var(--charcoal); height:46px; margin-top:7px; outline:none; padding:0 13px; width:100%; }
.auth-input:focus { border-color:var(--forest); box-shadow:0 0 0 3px rgba(23,71,52,.08); }
.password-wrap { display:block; position:relative; }
.password-wrap .auth-input { padding-right:58px; }
.password-toggle { background:none; border:0; color:var(--orange); font-size:10px; font-weight:800; position:absolute; right:10px; top:20px; }
.auth-options { align-items:center; display:flex; justify-content:space-between; margin-top:-2px; }
.auth-options a,.auth-switch a { color:var(--orange); font-weight:800; text-decoration:none; }
.remember { align-items:center; display:flex; gap:7px; margin:0!important; }
.remember input { accent-color:var(--forest); }
.captcha-row { align-items:center; display:flex; gap:8px; }
.captcha-row .auth-input { flex:1; }
.captcha-refresh { background:var(--lime); border:0; border-radius:10px; height:46px; margin-top:7px; width:46px; }
.auth-submit { align-items:center; background:var(--forest); border:0; border-radius:999px; color:white; display:flex; font-weight:700; justify-content:space-between; padding:15px 20px; width:100%; }
.auth-submit span { font-size:18px; }
.auth-switch { color:var(--muted); font-size:12px; margin:18px 0 0; text-align:center; }
.admin-login-switch{border-top:1px solid #e5e7df;margin-top:14px;padding-top:14px}
.admin-login-card{max-width:460px;width:100%}
.form-errors { background:#fff0eb; border-left:3px solid var(--orange); color:#8b3425; margin-bottom:16px; padding:9px 12px; }
.form-errors p { font-size:11px; margin:3px 0; }
.reset-success { background:#edf4e7;border-left-color:#769b55;color:#355323; }
.registration-page { min-height:100vh; background:var(--cream); }
.registration-page .auth-page { align-items:center; box-sizing:border-box; display:flex; justify-content:center; min-height:100vh; padding:32px 16px; }
.registration-page .register-card { background:var(--white); border:1px solid rgba(23,71,52,.08); border-radius:24px; box-shadow:0 24px 70px rgba(23,45,37,.12); box-sizing:border-box; max-width:500px; padding:34px 38px 32px; width:100%; }
.registration-page .auth-brand { align-items:center; display:flex; justify-content:center; margin-bottom:20px; }
.registration-page .auth-heading { margin-bottom:22px; text-align:center; }
.registration-page .auth-heading .eyebrow { color:var(--orange); letter-spacing:.16em; margin-bottom:8px; }
.registration-page .auth-heading h1 { color:var(--charcoal); font-size:34px; line-height:1.1; margin:0 0 8px; }
.registration-page .auth-heading p:last-child { color:var(--muted); font-size:13px; line-height:1.55; margin:0 auto; max-width:380px; }
.registration-page .register-card > label { color:var(--charcoal); display:block; font-size:12px; font-weight:700; margin-bottom:15px; }
.registration-page .auth-input { border-radius:10px; height:48px; margin-top:7px; }
.registration-page .auth-grid { gap:12px; grid-template-columns:1fr 1fr; margin-bottom:2px; }
.registration-page .auth-grid label { margin-bottom:15px; }
.registration-page .password-toggle { top:21px; }
.registration-page .registration-submit { align-items:center; background:var(--forest); border-radius:999px; display:flex; height:48px; justify-content:center; margin-top:4px; padding:0 20px; transition:transform .2s,box-shadow .2s; width:100%; }
.registration-page .registration-submit:hover:not(:disabled) { box-shadow:0 12px 24px rgba(23,71,52,.18); transform:translateY(-2px); }
.registration-page .registration-submit:disabled { cursor:wait; opacity:.72; }
.registration-page .registration-submit .button-label { flex:1; text-align:center; }
.registration-page .button-arrow { font-size:20px; }
.registration-page .auth-switch { margin-top:19px; }
.registration-page .auth-switch a { color:var(--orange); }
@media(max-width:1050px){.login-layout{grid-template-columns:.85fr 1.15fr;gap:24px}.login-topbar nav{gap:18px}.featured-recommendation{grid-template-columns:38% 62%}.nutrition-ring{display:none}}
@media(max-width:820px){.login-topbar nav{display:none}.login-layout{grid-template-columns:1fr;padding-top:20px}.login-welcome{padding-left:0}.meal-preview{margin-top:25px}.login-welcome h1{font-size:64px}}
@media(max-width:540px){.login-topbar{height:auto;padding:16px 18px}.login-nav-actions .nav-login{display:none}.nav-start{padding:10px 14px}.login-layout{padding:30px 18px 45px}.login-welcome h1{font-size:48px}.welcome-copy{font-size:15px}.welcome-actions{align-items:stretch;flex-direction:column}.welcome-actions a,.welcome-login{justify-content:center;text-align:center}.welcome-proof{gap:10px}.meal-preview{border-radius:24px;padding:18px}.preview-heading{gap:10px}.preview-heading h2{font-size:21px}.preview-status{display:none}.featured-recommendation{display:block;padding:0}.recommendation-image{height:210px}.recommendation-copy{padding:20px}.nutrition-ring{display:flex;float:right;height:92px;margin:-105px 14px 20px 0;width:92px}.nutrition-ring::after{height:70px;width:70px}.preview-meals{gap:8px}.preview-meal-image{height:75px}.preview-meals strong{font-size:10px}.preview-meals span{font-size:8px}.login-form{padding:26px 20px 28px}.dialog-close{right:-4px}.registration-page .auth-page{align-items:flex-start;padding:18px 14px}.registration-page .register-card{border-radius:20px;padding:28px 20px 26px}.registration-page .auth-heading h1{font-size:30px}.registration-page .auth-grid{grid-template-columns:1fr;gap:0}}

/* Administrator login: centered, responsive standalone layout */
.admin-login-screen { background: var(--cream, #F5F4EC); color: #173B30; margin: 0; min-height: 100vh; }
.admin-login-page {
  align-items: center; box-sizing: border-box; display: flex; justify-content: center;
  min-height: 100vh; min-height: 100svh; padding: 24px; width: 100%;
}
.admin-login-page *, .admin-login-page *::before, .admin-login-page *::after { box-sizing: border-box; }
.admin-login-card {
  background: #fff; border: 1px solid rgba(21, 63, 47, .08); border-radius: 24px;
  box-shadow: 0 24px 70px rgba(23, 45, 37, .14); color: #173B30; margin: 0 auto;
  max-width: 440px; padding: 34px 38px; width: 100%;
}
.admin-login-card > label {
  color: #173B30; display: block; font-size: 12px; font-weight: 700; margin: 0 0 16px;
}
.admin-login-card .auth-input { display: block; height: 48px; margin-top: 7px; width: 100%; }
.admin-login-card .password-wrap { display: block; }
.admin-login-card .password-toggle { cursor: pointer; top: 25px; }
.admin-login-card .auth-options { margin: 0 0 16px; }
.admin-login-card .remember { align-items: center; display: inline-flex; gap: 8px; }
.admin-login-card .remember input { accent-color: #153F2F; margin: 0; }
.admin-login-card .auth-submit {
  align-items: center; cursor: pointer; justify-content: center; min-height: 48px;
  transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.admin-login-card .auth-submit:hover {
  background: #1d563e; box-shadow: 0 10px 22px rgba(21, 63, 47, .16); transform: translateY(-1px);
}
.admin-login-card .auth-switch { margin-top: 18px; }
.admin-login-card .auth-brand { align-items: center; }
@media (max-width: 540px) {
  .admin-login-page { padding: 18px 16px; }
  .admin-login-card { border-radius: 20px; padding: 28px 22px; }
}

.login-type-tabs {
  background: #f5f4ec;
  border: 1px solid rgba(21, 63, 47, .12);
  border-radius: 999px;
  display: flex;
  gap: 5px;
  margin: 0 auto 18px;
  padding: 5px;
  width: 100%;
}
.login-type-tab {
  background: transparent;
  border: 0;
  border-radius: 999px;
  color: #153F2F;
  cursor: pointer;
  flex: 1 1 50%;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  min-height: 40px;
  padding: 9px 10px;
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.login-type-tab[aria-selected="true"] {
  background: #153F2F;
  box-shadow: 0 4px 12px rgba(21, 63, 47, .16);
  color: #fff;
}
.login-type-tab:focus-visible,
.login-back-customer button:focus-visible {
  outline: 3px solid #D8EB68;
  outline-offset: 2px;
}
.admin-access-label {
  color: #F47760;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .15em;
  margin: 0 0 8px;
}
.login-back-customer button {
  background: none;
  border: 0;
  color: #153F2F;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  text-decoration: underline;
}
.login-form [hidden] { display: none !important; }
@media (max-width: 420px) {
  .login-type-tabs { gap: 3px; padding: 4px; }
  .login-type-tab { font-size: 11px; padding: 8px 5px; }
}

@keyframes login-panel-in {
  from { opacity: .35; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
.login-form.login-switching .auth-heading,
.login-form.login-switching > label,
.login-form.login-switching .auth-options,
.login-form.login-switching .auth-switch {
  animation: login-panel-in .22s ease-out both;
}