/* Account: login / register */
.lc-auth {
  position: relative;
  overflow: hidden;
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 5.5rem);
  background:
    radial-gradient(55% 60% at 15% 30%, rgba(255, 107, 26, 0.09), transparent 70%),
    var(--lc-graphite-950);
  color: var(--lc-text);
}

.lc-auth::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at center, var(--lc-pixel-dot) 1.1px, transparent 1.6px);
  background-size: 14px 14px;
  mask-image: linear-gradient(90deg, #000, transparent 55%);
  pointer-events: none;
}

.lc-auth__grid { position: relative; display: grid; gap: var(--lc-space-10); align-items: center; }

@media (min-width: 1024px) {
  .lc-auth__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 28rem); gap: var(--lc-space-16); }
}

.lc-auth__intro { display: grid; gap: var(--lc-space-6); }
.lc-auth__intro .lc-h1 { max-width: 16ch; }

.lc-auth__card {
  display: grid;
  gap: var(--lc-space-6);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border-radius: var(--lc-radius-lg);
  background: var(--lc-paper-0);
  color: var(--lc-text);
  box-shadow: var(--lc-shadow-lg);
}

@media (prefers-reduced-motion: no-preference) {
  .lc-auth__card { animation: lc-rise 0.7s var(--lc-ease-out) 0.1s both; }
  .lc-auth__intro > * { animation: lc-rise 0.7s var(--lc-ease-out) both; }
}

.lc-auth__form { display: grid; gap: var(--lc-space-5); }
.lc-auth__row { display: grid; gap: var(--lc-space-5); }

@media (min-width: 480px) {
  .lc-auth__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.lc-auth__errors:empty,
.lc-auth__errors.validation-summary-valid { display: none; }

.lc-auth__errors {
  padding: var(--lc-space-3) var(--lc-space-4);
  border: 1px solid color-mix(in srgb, var(--lc-danger-text) 40%, transparent);
  border-left: 3px solid var(--lc-danger-text);
  border-radius: var(--lc-radius-sm);
  background: color-mix(in srgb, var(--lc-danger-text) 7%, transparent);
  color: var(--lc-text);
  font-size: var(--lc-text-sm);
}

.lc-auth__errors ul { margin: 0; padding-left: 1.1rem; }
.lc-auth__form .input-validation-error { border-color: var(--lc-danger-text); }
.lc-auth__alt { margin: 0; font-size: var(--lc-text-sm); color: var(--lc-text-muted); }

/* Card-only pages (forgot / reset password, e-mail link results) */
.lc-auth__grid--single { grid-template-columns: minmax(0, 30rem); justify-content: center; }
.lc-auth__card .lc-alert p { margin: 0; }

/* "or" between the e-mail form and the Google button */
.lc-auth__divider {
  display: flex;
  align-items: center;
  gap: var(--lc-space-4);
  color: var(--lc-text-muted);
  font-size: var(--lc-text-sm);
}

.lc-auth__divider::before,
.lc-auth__divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--lc-border);
}

.lc-auth__provider { display: grid; }

/* Google's own button look: white, hairline border, the four-colour mark. */
.lc-btn--google {
  gap: var(--lc-space-3);
  border: 1px solid #747775;
  background: #fff;
  color: #1f1f1f;
}

.lc-btn--google:hover { background: #f8f9fa; border-color: #1f1f1f; }
.lc-google-mark { flex: none; }

/* Account page */
.lc-account__card { display: grid; gap: var(--lc-space-5); }
.lc-account__line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--lc-space-3); margin: 0; }
.lc-account__line strong { overflow-wrap: anywhere; }
.lc-account__method { display: grid; gap: var(--lc-space-3); }
.lc-account__method + .lc-account__method { padding-top: var(--lc-space-5); border-top: 1px solid var(--lc-border); }
.lc-account__facts { display: grid; gap: var(--lc-space-3); margin: 0; }
.lc-account__facts > div { display: grid; grid-template-columns: minmax(8rem, 12rem) minmax(0, 1fr); gap: var(--lc-space-4); }
.lc-account__facts dt { color: var(--lc-text-muted); }
.lc-account__facts dd { margin: 0; overflow-wrap: anywhere; }
.lc-account .lc-disclosure:last-child { border-bottom: 0; }
.lc-account .lc-btn-row form { display: contents; }

/* Two-step verification: QR, key, recovery codes, code input */
.lc-account__steps { display: grid; gap: var(--lc-space-2); margin: 0; padding-left: 1.25rem; }
.lc-account__qr { width: min(14rem, 100%); margin: 0 auto; padding: 0; background: #fff; border-radius: var(--lc-radius, 8px); }
.lc-account__qr svg { display: block; width: 100%; height: auto; }
.lc-account__key { margin: 0; text-align: center; }
.lc-account__key code,
.lc-account__codes code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1rem; letter-spacing: 0.05em; overflow-wrap: anywhere; }
.lc-account__codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--lc-space-2) var(--lc-space-5); margin: 0; padding-left: 1.5rem; }
.lc-input--code { font-variant-numeric: tabular-nums; letter-spacing: 0.15em; }

@media (max-width: 479px) {
  .lc-account__facts > div { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .lc-account__codes { grid-template-columns: minmax(0, 1fr); }
}

/* =========================================================== STORE THEME (commerce-first UI) */
.lc-theme-store .lc-auth {
  background:
    radial-gradient(50% 60% at 12% 25%, color-mix(in srgb, var(--lc-signal-500) 6%, transparent), transparent 70%),
    var(--lc-store-canvas);
}

.lc-theme-store .lc-auth::before { opacity: 0.6; }
.lc-theme-store .lc-auth__card { background: var(--lc-surface); border: 1px solid var(--lc-store-line); border-radius: var(--lc-radius-xl); box-shadow: var(--lc-shadow-card-hover); }
.lc-theme-store .lc-auth__intro .lc-checklist li .lc-icon { color: var(--lc-ok-text); }

/* Customer panel: dashboard, orders, projects. Rows a buyer scans: number, status, amount, one action. */
.lc-panel-grid { display: grid; gap: var(--lc-space-5); align-items: start; }
@media (min-width: 960px) { .lc-panel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lc-panel-card { gap: var(--lc-space-4); }
.lc-theme-store .lc-panel-card { box-shadow: var(--lc-shadow-card); }
.lc-panel-list { margin: 0; padding: 0; list-style: none; display: grid; }
.lc-panel-list.lc-panel-card { padding-block: var(--lc-space-2); }
.lc-panel-list li + li { border-top: 1px solid var(--lc-store-line, var(--lc-border)); }

.lc-panel-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--lc-space-2) var(--lc-space-5);
  padding: var(--lc-space-4) 0;
  color: var(--lc-text);
  text-decoration: none;
}

.lc-panel-row:hover { color: var(--lc-text); text-decoration: none; }
.lc-panel-row__main { display: flex; flex-wrap: wrap; align-items: center; gap: var(--lc-space-1) var(--lc-space-3); min-width: 0; }
.lc-panel-row__main strong { font-weight: var(--lc-weight-semibold); overflow-wrap: anywhere; }
.lc-panel-row__main .lc-muted { flex-basis: 100%; }
.lc-panel-row__value { font-weight: var(--lc-weight-bold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lc-panel-row__go { display: inline-flex; align-items: center; gap: var(--lc-space-1); font-size: var(--lc-text-sm); font-weight: var(--lc-weight-semibold); color: var(--lc-accent-text); white-space: nowrap; }
.lc-panel-row:hover .lc-panel-row__go .lc-icon { transform: translateX(3px); }
.lc-panel-row__go .lc-icon { transition: transform var(--lc-dur) var(--lc-ease); }

@media (max-width: 479px) {
  .lc-panel-row { grid-template-columns: minmax(0, 1fr) auto; }
  .lc-panel-row__go { grid-column: 1 / -1; }
}