/*!********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/.pnpm/next@15.5.26_@types+node@22.20.1_babel-plugin-macros@3.1.0_react-dom@19.2.8_react@19.2.8__react@19.2.8/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/.pnpm/next@15.5.26_@types+node@22.20.1_babel-plugin-macros@3.1.0_react-dom@19.2.8_react@19.2.8__react@19.2.8/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./node_modules/.pnpm/react-loading-skeleton@3.5.0_react@19.2.8/node_modules/react-loading-skeleton/dist/skeleton.css ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
@keyframes react-loading-skeleton {
  100% {
    transform: translateX(100%);
  }
}

.react-loading-skeleton {
  --base-color: #ebebeb;
  --highlight-color: #f5f5f5;
  --animation-duration: 1.5s;
  --animation-direction: normal;
  --pseudo-element-display: block; /* Enable animation */

  background-color: var(--base-color);

  width: 100%;
  border-radius: 0.25rem;
  display: inline-flex;
  line-height: 1;

  position: relative;
  user-select: none;
  overflow: hidden;
}

.react-loading-skeleton::after {
  content: ' ';
  display: var(--pseudo-element-display);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  background-repeat: no-repeat;
  background-image: var(
    --custom-highlight-background,
    linear-gradient(
      90deg,
      var(--base-color) 0%,
      var(--highlight-color) 50%,
      var(--base-color) 100%
    )
  );
  transform: translateX(-100%);

  animation-name: react-loading-skeleton;
  animation-direction: var(--animation-direction);
  animation-duration: var(--animation-duration);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

@media (prefers-reduced-motion) {
  .react-loading-skeleton {
    --pseudo-element-display: none; /* Disable animation */
  }
}

/*!***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/.pnpm/next@15.5.26_@types+node@22.20.1_babel-plugin-macros@3.1.0_react-dom@19.2.8_react@19.2.8__react@19.2.8/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/.pnpm/next@15.5.26_@types+node@22.20.1_babel-plugin-macros@3.1.0_react-dom@19.2.8_react@19.2.8__react@19.2.8/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/admin/admin-login.css ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* ================================================================
   ADMIN LOGIN — rebuilt as a proper two-column console entry.

   The old screen was a single 400px card floating in a large empty
   field. It read as an unfinished internal form, not the front door of
   an operations console. This is a deliberate redesign:

     · split layout — a brand/assurance rail and the form, not a lone card
     · the same 3D elevation language as the dashboard (v2-3d.css), so
       the transition into the app is continuous
     · real state machine: default / hover / press / focus-visible /
       loading / disabled, on every interactive element
     · 1px hairline borders, no glow soup, no gradient hero
   ================================================================ */

.admin-login {
  --lg-canvas: #05070c;
  --lg-surface: linear-gradient(180deg, #161c2b 0%, #121826 100%);
  --lg-surface-hi: linear-gradient(180deg, #1a2133 0%, #141b2a 100%);
  --lg-line: rgba(255, 255, 255, 0.16);
  --lg-line-hi: rgba(255, 255, 255, 0.3);
  --lg-rim: inset 0 1px 0 rgba(255, 255, 255, 0.18);
  --lg-rim-hi: inset 0 1px 0 rgba(255, 255, 255, 0.32);
  --lg-text: #e8ecf5;
  --lg-muted: #8b95ab;
  --lg-subtle: #626d82;
  --lg-accent: #ffe500;
  --lg-danger: #ff6b6b;

  display: grid !important;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  min-height: 100vh;
  min-height: 100dvh;
  width: 100%;
  background: var(--lg-canvas);
  color: var(--lg-text);
  grid-template-rows: auto 1fr;
  grid-template-areas: 'top top' 'rail form';
  overflow-x: hidden;
}

/* ---------------- Top bar ----------------
   One mark, nothing else. Everything else this bar used to carry (wordmark,
   hostname, store link) moved down into the rail, where it supports the copy
   instead of competing with it. A login screen's header is for orientation,
   not for navigation. */
.admin-login-top {
  grid-area: top;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  height: 58px;
  padding: 0 22px;
  border-bottom: 1px solid var(--lg-line);
}

.admin-login-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

/* The rail now owns the wordmark + hostname, so the header shows the mark and
   nothing else. */
.admin-login-brand > div { display: none; }

/* A quiet text link beats a bordered button for a secondary destination. */
.admin-login-toplink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 2px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--lg-subtle);
  font-size: 12.5px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: color 160ms cubic-bezier(0.16, 1, 0.3, 1);
}
.admin-login-toplink:hover { color: var(--lg-text); }
.admin-login-toplink:active { color: var(--lg-muted); }
.admin-login-toplink:focus-visible {
  outline: 2px solid var(--lg-accent);
  outline-offset: 3px;
}
.admin-login-toplink svg { transition: transform 160ms cubic-bezier(0.16, 1, 0.3, 1); }
.admin-login-toplink:hover svg { transform: translateX(2px); }

/* ---------------- Left rail: brand + assurance ---------------- */
.admin-login-rail {
  grid-area: rail;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 34px;
  padding: 52px clamp(36px, 5vw, 80px);
  border-right: 1px solid var(--lg-line);
  /* Flat, near-uniform. The depth in this page comes from the card and the
     1px hairlines, not from a lit background -- a wash here competed with
     the form and read as decoration. */
  background: linear-gradient(180deg, #0a0e18 0%, #070a11 100%);
  position: relative;
  overflow: hidden;
}

.admin-login-rail > * { position: relative; z-index: 1; }

.admin-login-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lg-subtle);
}
.admin-login-eyebrow::before { content: none; }

.admin-login-hero h2 {
  margin: 0 0 14px;
  font-size: clamp(26px, 2.9vw, 34px);
  font-weight: 640;
  line-height: 1.18;
  letter-spacing: -0.03em;
  color: #fff;
  max-width: 18ch;
}
.admin-login-hero p {
  margin: 0;
  font-size: 15px;
  line-height: 1.62;
  color: var(--lg-muted);
  max-width: 46ch;
}

/* Capability list -- open rows separated by hairlines, no enclosing box.
   One bordered card on this page is enough; two made it look like a
   marketing landing section. */
.admin-login-caps {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--lg-line);
  max-width: 42ch;
}
.admin-login-caps li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--lg-line);
  font-size: 13.5px;
  color: #b8c1d2;
}
.admin-login-caps li svg { color: var(--lg-muted); flex-shrink: 0; }
.admin-login-caps li span { min-width: 0; }

.admin-login-hint {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 46ch;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--lg-subtle);
}
.admin-login-hint svg { color: var(--lg-subtle); flex-shrink: 0; margin-top: 2px; }

/* ---------------- Right: the form ---------------- */
.admin-login-formwrap {
  grid-area: form;
  display: grid;
  place-items: center;
  padding: 40px 24px;
}

.admin-login-card {
  width: min(432px, 100%);
  background: var(--lg-surface);
  border: 1px solid var(--lg-line);
  border-radius: 12px;
  padding: 32px 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 17px;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.5),
    0 18px 40px -14px rgba(0, 0, 0, 0.9),
    0 0 0 1px var(--lg-line),
    var(--lg-rim);
  position: relative;
  overflow: hidden;
}

/* The top rim IS the lighting cue: a 1px inset highlight, same as the
   dashboard's elevation ramp. No decorative accent bar on top of it. */
.admin-login-card::before { content: none; }

.admin-login-copy h1 {
  margin: 0 0 7px;
  font-size: 21px;
  font-weight: 650;
  letter-spacing: -0.028em;
  line-height: 1.2;
  color: #f2f5fa;
}
.admin-login-copy p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--lg-muted);
}

.admin-login-field { display: flex; flex-direction: column; gap: 7px; }
.admin-login-field > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #aeb8ca;
}
.admin-login-field em {
  font-style: normal;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--lg-subtle);
}

.admin-login-input {
  position: relative;
  display: flex;
  align-items: center;
  border: 1px solid var(--lg-line);
  border-radius: 10px;
  background: #0b0f18;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
  transition:
    border-color 150ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 150ms cubic-bezier(0.16, 1, 0.3, 1),
    background 150ms cubic-bezier(0.16, 1, 0.3, 1);
}
.admin-login-input:hover { border-color: var(--lg-line-hi); }
.admin-login-input:focus-within {
  border-color: rgba(255, 229, 0, 0.55);
  background: #0b1019;
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.35),
    0 0 0 3px rgba(255, 229, 0, 0.1);
}
.admin-login-input.has-error { border-color: rgba(255, 107, 107, 0.5); }

.admin-login-input > svg:first-child {
  margin-left: 13px;
  color: var(--lg-subtle);
  flex-shrink: 0;
  transition: color 150ms cubic-bezier(0.16, 1, 0.3, 1);
}
.admin-login-input:focus-within > svg:first-child { color: var(--lg-accent); }
.admin-login-input.has-error > svg:first-child { color: var(--lg-danger); }

.admin-login-input input {
  flex: 1;
  min-width: 0;
  height: 46px;
  padding: 0 13px;
  border: 0;
  background: transparent;
  color: var(--lg-text);
  font: inherit;
  font-size: 14px;
  outline: none;
}
.admin-login-input input::placeholder { color: #5c6779; }
.admin-login-input input:-webkit-autofill,
.admin-login-input input:-webkit-autofill-box,
.admin-login-input input:-webkit-autofill-button {
  -webkit-text-fill-color: var(--lg-text);
  -webkit-box-shadow: 0 0 0 1000px #0a0e17 inset;
  transition: background-color 9999s ease-out;
}

.admin-login-toggle {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-right: 4px;
  flex-shrink: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--lg-subtle);
  cursor: pointer;
  transition:
    background 140ms cubic-bezier(0.16, 1, 0.3, 1),
    color 140ms cubic-bezier(0.16, 1, 0.3, 1);
}
.admin-login-toggle:hover { background: rgba(255, 255, 255, 0.06); color: var(--lg-text); }
.admin-login-toggle:active { background: rgba(255, 255, 255, 0.1); }
.admin-login-toggle:focus-visible { outline: 2px solid var(--lg-accent); outline-offset: -2px; }

/* ---------------- Notice ---------------- */
.admin-login-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 107, 107, 0.28);
  border-left: 2px solid var(--lg-danger);
  border-radius: 9px;
  background: rgba(255, 107, 107, 0.06);
  font-size: 12.5px;
  line-height: 1.5;
  color: #ffc4c4;
  animation: lg-shake 380ms cubic-bezier(0.36, 0.07, 0.19, 0.97);
}
.admin-login-notice svg { color: var(--lg-danger); flex-shrink: 0; margin-top: 1px; }

@keyframes lg-shake {
  0%, 100% { transform: translateX(0); }
  22% { transform: translateX(-5px); }
  44% { transform: translateX(4px); }
  68% { transform: translateX(-2px); }
}

/* ---------------- Submit ---------------- */
.admin-login-submit {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 46px;
  margin-top: 2px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 10px;
  background: #1e2637;
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.005em;
  cursor: pointer;
  overflow: hidden;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.6),
    0 8px 20px -8px rgba(0, 0, 0, 0.9),
    var(--lg-rim);
  transition:
    transform 120ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 160ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 160ms cubic-bezier(0.16, 1, 0.3, 1),
    background 160ms cubic-bezier(0.16, 1, 0.3, 1);
}
.admin-login-submit::after { content: none; }
.admin-login-submit:hover:not(:disabled) {
  border-color: rgba(255, 255, 255, 0.34);
  background: #232d42;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.6),
    0 10px 24px -10px rgba(0, 0, 0, 0.9),
    var(--lg-rim-hi);
}
.admin-login-submit:active:not(:disabled) { transform: translateY(1px); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.7), var(--lg-rim); }
.admin-login-submit:focus-visible { outline: 2px solid var(--lg-accent); outline-offset: 2px; }
.admin-login-submit:disabled {
  cursor: not-allowed;
  opacity: 0.62;
  background: #171d2a;
  box-shadow: var(--lg-rim);
}

/* Indeterminate progress while the request is in flight. */
.admin-login-submit .lg-spin {
  width: 15px;
  height: 15px;
  border: 2px solid rgba(255, 255, 255, 0.22);
  border-top-color: #fff;
  border-radius: 50%;
  animation: lg-spin 640ms linear infinite;
}
@keyframes lg-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .admin-login *,
  .admin-login-submit::after { animation: none !important; transition: none !important; }
}

/* ---------------- Footer note ---------------- */
.admin-login-foot {
  margin-top: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 11.5px;
  color: var(--lg-subtle);
  text-align: center;
}
.admin-login-foot svg { color: var(--lg-accent); opacity: 0.8; flex-shrink: 0; }

/* ---------------- Responsive ---------------- */
@media (max-width: 980px) {
  .admin-login {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 1fr;
    grid-template-areas: 'top' 'rail' 'form';
  }
  .admin-login-rail {
    border-right: 0;
    border-bottom: 1px solid var(--lg-line);
    padding: 34px 24px 30px;
    gap: 24px;
  }
  .admin-login-hero h2 { max-width: 100%; }
  .admin-login-hero p { max-width: 62ch; }
  .admin-login-formwrap { padding: 32px 20px 44px; align-items: start; }
  .admin-login-card { padding: 28px 22px 24px; }
}

@media (max-width: 560px) {
  .admin-login-top { height: 56px; padding: 0 16px; gap: 10px; }
  .admin-login-toplink { height: 32px; padding: 0 11px; font-size: 12px; }
  .admin-login-rail { padding: 26px 18px 24px; }
  .admin-login-hero h2 { font-size: 25px; }
  .admin-login-hero p { font-size: 13.5px; }
  .admin-login-caps { display: none; }
  .admin-login-formwrap { padding: 26px 16px 40px; }
  .admin-login-card { width: 100%; padding: 26px 18px 22px; border-radius: 14px; }
}


/* ================================================================
   LIGHT THEME
   The dark tokens above define structure (elevation, radii, rhythm); this
   block only re-points colour. Same token names means no component changes.

   Reads from the SAME localStorage key as the dashboard
   (nova_admin_theme) so a user who set light mode inside the console does not
   get a dark login page on their next visit.
   ================================================================ */
.admin-login.admin-login-light {
  --lg-canvas: #eef1fa;
  --lg-surface: linear-gradient(180deg, #ffffff 0%, #f7f9fd 100%);
  --lg-surface-hi: linear-gradient(180deg, #ffffff 0%, #f9fbfe 100%);
  --lg-line: rgba(24, 24, 40, 0.11);
  --lg-line-hi: rgba(24, 24, 40, 0.2);
  --lg-rim: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --lg-rim-hi: inset 0 1px 0 rgba(255, 255, 255, 1);
  --lg-text: #14141f;
  --lg-muted: rgba(20, 20, 34, 0.64);
  --lg-subtle: rgba(20, 20, 34, 0.45);
  --lg-accent: #4a5fd9;
  --lg-danger: #d3324a;

  background: var(--lg-canvas);
  color: var(--lg-text);
  color-scheme: light;
}

.admin-login.admin-login-light .admin-login-rail {
  background: linear-gradient(180deg, #f7f9fd 0%, #eef1fa 100%);
  box-shadow: none;
}
.admin-login.admin-login-light .admin-login-rail::after {
  /* A hairline under the top bar, not a shadow: shadows on a light canvas
     read as dirt, edges read as structure. */
  content: none;
}

.admin-login.admin-login-light .admin-login-card {
  box-shadow:
    0 1px 2px rgba(24, 24, 40, 0.06),
    0 18px 40px -14px rgba(24, 24, 40, 0.16),
    0 0 0 1px var(--lg-line),
    var(--lg-rim);
}

.admin-login.admin-login-light .admin-login-input {
  background: #ffffff;
  box-shadow: inset 0 1px 2px rgba(24, 24, 40, 0.05);
}
.admin-login.admin-login-light .admin-login-input:hover { border-color: var(--lg-line-hi); }
.admin-login.admin-login-light .admin-login-input:focus-within { background: #ffffff; }
.admin-login.admin-login-light .admin-login-input input { color: var(--lg-text); }
.admin-login.admin-login-light .admin-login-input input::placeholder { color: rgba(20, 20, 34, 0.36); }
.admin-login.admin-login-light .admin-login-input input:-webkit-autofill,
.admin-login.admin-login-light .admin-login-input input:-webkit-autofill-box,
.admin-login.admin-login-light .admin-login-input input:-webkit-autofill-button {
  -webkit-text-fill-color: var(--lg-text);
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset;
}

.admin-login.admin-login-light .admin-login-submit {
  background: #1e2637;
  border-color: rgba(24, 24, 40, 0.2);
}
.admin-login.admin-login-light .admin-login-submit:hover:not(:disabled) {
  background: #232d42;
  border-color: rgba(24, 24, 40, 0.3);
}

.admin-login.admin-login-light .admin-login-notice {
  border-color: rgba(211, 50, 74, 0.24);
  background: rgba(211, 50, 74, 0.05);
  color: #a3202f;
}

.admin-login.admin-login-light .admin-login-hero h2,
.admin-login.admin-login-light .admin-login-copy h1 { color: #0d0d18; }
.admin-login.admin-login-light .admin-login-caps li { color: #2a2a3c; }

/* The theme button must be visible on both canvases. */
.admin-login-theme {
  display: grid;
  margin-left: auto;
  place-items: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--lg-subtle);
  cursor: pointer;
  transition:
    background 150ms cubic-bezier(0.16, 1, 0.3, 1),
    color 150ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 150ms cubic-bezier(0.16, 1, 0.3, 1);
}
.admin-login-theme:hover {
  background: rgba(127, 140, 163, 0.12);
  color: var(--lg-text);
  border-color: var(--lg-line);
}
.admin-login-theme:active { background: rgba(127, 140, 163, 0.2); }
.admin-login-theme:focus-visible { outline: 2px solid var(--lg-accent); outline-offset: 2px; }

/* Cross-fade the two glyphs instead of swapping them abruptly. */
.admin-login-theme svg { grid-area: 1 / 1; transition: opacity 180ms ease, transform 220ms cubic-bezier(0.16, 1, 0.3, 1); }
.admin-login-theme .lg-icon-sun { opacity: 1; transform: rotate(0deg) scale(1); }
.admin-login-theme .lg-icon-moon { opacity: 0; transform: rotate(-35deg) scale(0.7); }
.admin-login.admin-login-light .admin-login-theme .lg-icon-sun { opacity: 0; transform: rotate(35deg) scale(0.7); }
.admin-login.admin-login-light .admin-login-theme .lg-icon-moon { opacity: 1; transform: rotate(0deg) scale(1); }

.admin-login.admin-login-light .admin-login-caps li svg { color: var(--lg-muted); }
.admin-login.admin-login-light .admin-login-hint svg { color: var(--lg-subtle); }
.admin-login.admin-login-light .admin-login-foot svg { color: var(--lg-accent); }
.admin-login.admin-login-light .admin-login-toplink:hover { color: var(--lg-text); }
.admin-login.admin-login-light .admin-login-input > svg:first-child { color: rgba(20, 20, 34, 0.34); }
.admin-login.admin-login-light .admin-login-input:focus-within > svg:first-child { color: var(--lg-accent); }
.admin-login.admin-login-light .admin-login-toggle { color: rgba(20, 20, 34, 0.38); }
.admin-login.admin-login-light .admin-login-toggle:hover { background: rgba(24, 24, 40, 0.05); color: var(--lg-text); }
.admin-login.admin-login-light .admin-login-input.has-error > svg:first-child { color: var(--lg-danger); }