.auth-page {
  min-height: calc(100vh - 86px);
  display: grid;
  place-items: center;
  padding: 56px 20px 72px;
}
.auth-shell {
  width: min(100%, 980px);
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  border: 1px solid var(--border-color, rgba(18,18,18,.1));
  border-radius: 28px;
  overflow: hidden;
  background: var(--surface, #fff);
  box-shadow: 0 22px 70px rgba(24, 23, 20, .08);
}
.auth-visual {
  min-height: 610px;
  padding: 46px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #fff;
  background:
    radial-gradient(circle at 20% 15%, rgba(207,173,104,.36), transparent 31%),
    radial-gradient(circle at 78% 78%, rgba(255,255,255,.09), transparent 28%),
    linear-gradient(145deg, #111, #24221f 72%, #161513);
  position: relative;
  isolation: isolate;
}
.auth-visual::after {
  content: "";
  position: absolute;
  inset: 22px;
  border: 1px solid rgba(213, 181, 112, .32);
  border-radius: 20px;
  pointer-events: none;
  z-index: -1;
}
.auth-visual .eyebrow {
  font-size: 12px;
  letter-spacing: .18em;
  color: #d6b978;
  direction: ltr;
  text-align: right;
}
.auth-visual h1 {
  margin: 16px 0 12px;
  font-size: clamp(38px, 5vw, 68px);
  line-height: 1;
  font-weight: 800;
}
.auth-visual p {
  max-width: 420px;
  margin: 0;
  color: rgba(255,255,255,.72);
  line-height: 2;
  font-size: 14px;
}
.auth-visual-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  color: rgba(255,255,255,.68);
  font-size: 12px;
}
.auth-visual-line {
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg, transparent, rgba(214,185,120,.66));
}
.auth-panel {
  padding: 54px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.auth-panel-head { margin-bottom: 30px; }
.auth-panel-head .kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .16em;
  color: #aa8546;
  direction: ltr;
}
.auth-panel-head h2 {
  margin: 0 0 8px;
  font-size: 28px;
  color: var(--text-color, #171717);
}
.auth-panel-head p {
  margin: 0;
  color: var(--muted-color, #777);
  font-size: 13px;
  line-height: 1.9;
}
.auth-form { display: grid; gap: 15px; }
.auth-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.auth-field { display: grid; gap: 7px; }
.auth-field label { font-size: 12px; font-weight: 700; color: var(--text-color, #333); }
.auth-control { position: relative; }
.auth-control input {
  width: 100%;
  height: 50px;
  padding: 0 14px;
  border: 1px solid var(--border-color, #e6e2d8);
  border-radius: 13px;
  outline: 0;
  background: var(--surface-soft, #faf9f6);
  color: var(--text-color, #171717);
  font-family: inherit;
  font-size: 13px;
  transition: .2s ease;
}
.auth-control input:focus {
  border-color: #b99758;
  box-shadow: 0 0 0 4px rgba(185,151,88,.10);
  background: var(--surface, #fff);
}
.auth-control.has-toggle input { padding-left: 48px; }
.password-toggle {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  color: #8b857a;
  font-family: inherit;
  font-size: 11px;
}
.auth-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 12px;
  color: var(--muted-color, #777);
}
.auth-check { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.auth-check input { accent-color: #aa8546; }
.auth-submit {
  width: 100%;
  min-height: 51px;
  border: 0;
  border-radius: 13px;
  background: #161616;
  color: #fff;
  font-family: inherit;
  font-weight: 800;
  cursor: pointer;
  transition: transform .18s ease, opacity .18s ease;
}
.auth-submit:hover { transform: translateY(-1px); }
.auth-submit:disabled { cursor: wait; opacity: .62; transform: none; }
.auth-message {
  display: none;
  padding: 11px 13px;
  border-radius: 11px;
  font-size: 12px;
  line-height: 1.8;
}
.auth-message.show { display: block; }
.auth-message.error { color: #9e2d2d; background: #fff1f1; border: 1px solid #f0cdcd; }
.auth-message.success { color: #24633f; background: #eff9f2; border: 1px solid #cde8d5; }
.auth-switch {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--border-color, #ece8df);
  text-align: center;
  font-size: 12px;
  color: var(--muted-color, #777);
}
.auth-switch a { color: #9b783d; font-weight: 800; text-decoration: none; }
.password-meter { display: grid; grid-template-columns: repeat(4,1fr); gap: 5px; margin-top: 2px; }
.password-meter span { height: 3px; border-radius: 99px; background: #e7e3da; }
.password-meter[data-strength="1"] span:nth-child(-n+1),
.password-meter[data-strength="2"] span:nth-child(-n+2),
.password-meter[data-strength="3"] span:nth-child(-n+3),
.password-meter[data-strength="4"] span:nth-child(-n+4) { background: #b28a46; }
html[data-theme="dark"] .auth-shell { background: #171717; border-color: #31302c; }
html[data-theme="dark"] .auth-panel { background: #171717; }
html[data-theme="dark"] .auth-control input { background: #1f1f1f; border-color: #34332f; color: #f6f2e8; }
html[data-theme="dark"] .auth-panel-head h2,
html[data-theme="dark"] .auth-field label { color: #f4f1e8; }
html[data-theme="dark"] .auth-panel-head p,
html[data-theme="dark"] .auth-row,
html[data-theme="dark"] .auth-switch { color: #aaa59b; }
html[data-theme="dark"] .auth-switch { border-color: #302f2c; }
@media (max-width: 820px) {
  .auth-page { padding: 28px 15px 46px; }
  .auth-shell { grid-template-columns: 1fr; border-radius: 22px; }
  .auth-visual { min-height: 220px; padding: 32px; }
  .auth-visual h1 { font-size: 42px; }
  .auth-visual-bottom { display: none; }
  .auth-panel { padding: 34px 24px 38px; }
}
@media (max-width: 520px) {
  .auth-visual { min-height: 190px; padding: 28px 24px; }
  .auth-grid { grid-template-columns: 1fr; }
  .auth-panel { padding: 28px 18px 34px; }
  .auth-row { align-items: flex-start; flex-direction: column; gap: 10px; }
}

/* Unified customer/staff login role picker */
.staff-role-picker{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:14px 0 18px}.staff-role-option{min-height:66px;padding:10px 12px;border:1px solid var(--line,#dedbd3);border-radius:14px;background:transparent;color:inherit;text-align:right;font:inherit;cursor:pointer;transition:.2s}.staff-role-option strong,.staff-role-option small{display:block}.staff-role-option strong{font-size:11px}.staff-role-option small{margin-top:4px;font-size:8px;opacity:.62}.staff-role-option.active{border-color:#b28b4c;background:rgba(178,139,76,.1);box-shadow:0 0 0 2px rgba(178,139,76,.08)}@media(max-width:560px){.staff-role-picker{grid-template-columns:1fr 1fr}}


.staff-portal-link{margin-top:14px;padding-top:14px;border-top:1px solid var(--line,#e4e2dc);display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--muted,#777);font-size:9px}.staff-portal-link a{padding:8px 11px;border:1px solid rgba(177,138,76,.28);border-radius:10px;color:#9a7439;text-decoration:none;font-weight:800;background:rgba(177,138,76,.06)}.staff-portal-link a:hover{border-color:#b18a4c;background:rgba(177,138,76,.11)}