/* Admin authentication 17.1 — editorial atelier */
body.login-page {
  --login-navy: #102c52;
  --login-navy-deep: #071b35;
  --login-ink: #152b49;
  --login-muted: #66758b;
  --login-line: #dbe2e8;
  --login-orange: #ff6a2a;
  --login-orange-dark: #ea4d12;
  --login-cream: #f8f4ec;
  --login-surface: #fffdf9;
  position: relative;
  display: grid;
  place-items: center;
  min-height: 100dvh;
  margin: 0;
  padding: 24px;
  overflow-x: hidden;
  color: var(--login-ink);
  color-scheme: light;
  background:
    radial-gradient(circle at 8% 8%, rgba(255, 194, 112, .22), transparent 30%),
    radial-gradient(circle at 92% 90%, rgba(100, 189, 226, .17), transparent 32%),
    #f1eee8;
}

body.login-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  opacity: .18;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.08'/%3E%3C/svg%3E");
}

.login-page .login-shell {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(430px, .88fr);
  width: min(1280px, calc(100vw - 48px));
  min-height: min(780px, calc(100dvh - 48px));
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(24, 48, 74, .1);
  border-radius: 32px;
  background: var(--login-surface);
  box-shadow: 0 32px 90px rgba(28, 48, 67, .14), 0 3px 14px rgba(28, 48, 67, .06);
  animation: login17-shell-in .55s cubic-bezier(.22, .76, .3, 1) both;
}

.login-page .login-story {
  position: relative;
  display: flex;
  min-height: 0;
  padding: 34px 38px 36px;
  overflow: hidden;
  flex-direction: column;
  justify-content: space-between;
  color: #fff;
  background:
    linear-gradient(90deg, rgba(4, 36, 45, .86) 0%, rgba(4, 53, 57, .55) 47%, rgba(2, 35, 38, .06) 100%),
    linear-gradient(180deg, rgba(5, 47, 55, .08), rgba(3, 26, 38, .56)),
    url('/assets/brand/admin-hero-v10.webp') 61% center / cover no-repeat;
  isolation: isolate;
}

.login-page .login-story::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  display: block;
  pointer-events: none;
  background:
    radial-gradient(circle at 31% 22%, rgba(255, 214, 111, .13), transparent 30%),
    linear-gradient(180deg, rgba(4, 32, 41, .02) 42%, rgba(3, 24, 35, .68));
}

.login-page .login-story::after {
  content: "";
  position: absolute;
  right: 30px;
  bottom: 28px;
  display: block;
  width: 112px;
  height: 112px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 50%;
  pointer-events: none;
}

.login-page .login-stars {
  position: absolute;
  z-index: 0;
  top: 16%;
  left: 23%;
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #ffe88b;
  box-shadow: 115px 34px #ffe88b, 217px -24px rgba(255,232,139,.8), 324px 56px #ffe88b, 432px 7px rgba(255,232,139,.7);
  animation: login17-stars 4s ease-in-out infinite;
}

.login-page .login-brand,
.login-page .login-story-copy,
.login-page .login-story-note {
  position: relative;
  z-index: 1;
}

.login-page .login-brand {
  display: block;
  align-self: flex-start;
  width: 156px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  transition: transform .22s ease, filter .22s ease;
}

.login-page .login-brand:hover { transform: translateY(-2px); filter: brightness(1.04); }
.login-page .login-brand img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 8px 14px rgba(0, 16, 30, .28));
}

.login-page .login-story-copy {
  max-width: 540px;
  margin-top: auto;
  padding: 54px 0 42px;
}

.login-page .login-kicker,
.login-page .login-eyebrow {
  display: block;
  margin-bottom: 11px;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.login-page .login-kicker { color: #ffdf75; }
.login-page .login-story-copy h2 {
  max-width: 470px;
  margin: 0 0 16px;
  color: #fff;
  font: 800 clamp(44px, 4.1vw, 64px) / 1 var(--font-display);
  letter-spacing: -.045em;
  text-wrap: balance;
  text-shadow: 0 4px 24px rgba(0, 21, 30, .34);
}

.login-page .login-story-copy > p {
  max-width: 490px;
  margin: 0 0 25px;
  color: rgba(246, 251, 248, .9);
  font-size: 15px;
  line-height: 1.68;
}

.login-page .login-benefits { display: flex; gap: 9px; flex-wrap: wrap; }
.login-page .login-benefits span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 42px;
  padding: 0 13px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 14px;
  background: rgba(3, 31, 38, .34);
  color: #fff;
  font-size: 12px;
  font-weight: 760;
  box-shadow: none;
  backdrop-filter: blur(8px);
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}

.login-page .login-benefits i { color: #ffdf75; font-size: 18px; }
.login-page .login-benefits span:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.45); background: rgba(5,44,52,.55); }
.login-page .login-story-note {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  color: rgba(242, 250, 247, .83);
  font-size: 12px;
  font-weight: 720;
}

.login-page .login-story-note .status-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #67e6a5;
  box-shadow: 0 0 0 5px rgba(103,230,165,.13);
}

.login-page .login-panel {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 48px clamp(38px, 4.3vw, 72px);
  border: 0;
  border-left: 1px solid rgba(21, 43, 73, .08);
  border-radius: 0;
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 191, 112, .13), transparent 30%),
    radial-gradient(circle at 3% 100%, rgba(108, 191, 218, .11), transparent 27%),
    var(--login-surface);
}

.login-page .login-panel::after {
  content: "";
  position: absolute;
  right: -76px;
  bottom: -94px;
  display: block;
  width: 240px;
  height: 240px;
  border: 1px solid rgba(255, 106, 42, .09);
  border-radius: 50%;
  background: rgba(255, 224, 196, .12);
  pointer-events: none;
}

.login-page form.login,
.login-page .login-panel > .login {
  position: relative;
  z-index: 1;
  width: min(438px, 100%);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--login-ink);
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.login-page .login-mobile-brand { display: none; }
.login-page .login-lock {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin: 0 0 23px;
  border: 1px solid #f1d4bd;
  border-radius: 17px;
  color: var(--login-orange-dark);
  background: #fff2e6;
  box-shadow: inset 0 1px 0 #fff, 0 8px 20px rgba(180, 86, 25, .09);
}

.login-page .login-lock span { font-size: 24px; }
.login-page .login-eyebrow { margin-bottom: 8px; color: #bd4a19; }
.login-page .login h1 {
  max-width: 410px;
  margin: 0 0 12px;
  color: var(--login-ink);
  font: 800 clamp(36px, 3vw, 47px) / 1.03 var(--font-display);
  letter-spacing: -.038em;
  text-wrap: balance;
}

.login-page .login-intro {
  max-width: 395px;
  margin: 0 0 29px;
  color: var(--login-muted);
  font-size: 14px;
  line-height: 1.65;
}

.login-page .login-error {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0 0 18px;
  padding: 12px 14px;
  border: 1px solid #efc1c0;
  border-radius: 13px;
  color: #8b2f3d;
  background: #fff0f1;
  font-size: 12px;
  font-weight: 720;
  line-height: 1.45;
}

.login-page .login-error[hidden] { display: none; }
.login-page .login-error .material-symbols-rounded { color: #c94856; font-size: 19px; }
.login-page .login-field { margin-top: 17px; }
.login-page .login-field label {
  display: block;
  margin-bottom: 8px;
  color: #253b58;
  font-size: 12px;
  font-weight: 780;
}

.login-page .login-input {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--login-line);
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 6px 16px rgba(28, 49, 68, .045);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.login-page .login-input:focus-within {
  border-color: rgba(255, 106, 42, .7);
  outline: 0;
  box-shadow: 0 0 0 4px rgba(255, 106, 42, .11), 0 9px 22px rgba(92, 54, 30, .07);
  transform: translateY(-1px);
}

.login-page .login-input > span {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 16px;
  color: #70849c;
  font-size: 20px;
  transform: translateY(-50%);
  pointer-events: none;
}

.login-page .login-input:focus-within > span { color: var(--login-orange-dark); }
.login-page .login-input input:not([type="checkbox"]):not([type="radio"]),
.login-page .login-input input:not([type="checkbox"]):not([type="radio"]):focus {
  width: 100%;
  min-height: 57px;
  padding: 12px 48px;
  border: 0;
  border-radius: 0;
  outline: 0;
  color: var(--login-ink) !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 15px;
  caret-color: var(--login-orange-dark);
}

.login-page .login-input input::placeholder { color: #8a98aa; opacity: 1; }
.login-page .login-password-input input:not([type="checkbox"]):not([type="radio"]) { padding-right: 54px; }
.login-page .login-password-toggle {
  position: absolute;
  z-index: 2;
  top: 50%;
  right: 6px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border: 0;
  border-radius: 11px;
  color: #60748d;
  background: transparent;
  box-shadow: none;
  transform: translateY(-50%);
  cursor: pointer;
  transition: color .18s ease, background .18s ease;
}

.login-page .login-password-toggle:hover { color: var(--login-orange-dark); background: #fff1e8; }
.login-page .login-password-toggle:focus-visible { outline: 3px solid rgba(255,106,42,.22); outline-offset: 0; }
.login-page .login-field-error {
  display: block;
  min-height: 15px;
  margin-top: 5px;
  color: #a52d40;
  font-size: 12px;
  font-weight: 720;
}

.login-page .login-field.has-error .login-input { border-color: #da6c78; box-shadow: 0 0 0 4px rgba(218,108,120,.09); }
.login-page .login-caps-lock { color: #9b6512; }
.login-page .login-submit {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 58px;
  margin-top: 19px;
  padding: 0 11px 0 21px;
  overflow: hidden;
  border: 0;
  border-radius: 15px;
  color: #fff;
  background: linear-gradient(100deg, #ff7b35, var(--login-orange) 54%, #f1571a);
  box-shadow: 0 13px 27px rgba(225, 77, 15, .23), inset 0 1px 0 rgba(255,255,255,.36);
  font-size: 14px;
  font-weight: 830;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.login-page .login-submit-arrow {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  color: var(--login-orange-dark);
  background: rgba(255, 255, 255, .94);
  font-size: 21px;
  transition: transform .2s ease;
}

.login-page .login-submit:hover:not(:disabled) {
  filter: saturate(1.04) brightness(1.02);
  transform: translateY(-2px);
  box-shadow: 0 17px 34px rgba(225, 77, 15, .29), inset 0 1px 0 rgba(255,255,255,.4);
}

.login-page .login-submit:hover .login-submit-arrow { transform: translateX(2px); }
.login-page .login-submit:active:not(:disabled) { transform: translateY(0) scale(.992); }
.login-page .login-submit:focus-visible { outline: 3px solid rgba(255,106,42,.28); outline-offset: 3px; }
.login-page .login-submit:disabled { opacity: .74; cursor: wait; }
.login-page .login-submit-spinner { right: 21px; }
.login-page .login-security {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 17px 0 0;
  color: #738197;
  font-size: 12px;
  font-weight: 680;
}

.login-page .login-security .material-symbols-rounded { color: #4c8a92; font-size: 16px; }

@media (max-width: 1080px) {
  .login-page .login-shell { grid-template-columns: minmax(0, .95fr) minmax(420px, 1.05fr); }
  .login-page .login-story { padding-inline: 30px; background-position: 66% center; }
  .login-page .login-story-copy h2 { font-size: 48px; }
  .login-page .login-panel { padding-inline: 34px; }
  .login-page .login-benefits { display: grid; }
  .login-page .login-benefits span { width: max-content; }
}

@media (max-width: 860px) {
  body.login-page { display: block; padding: 12px; }
  .login-page .login-shell { grid-template-columns: 1fr; width: 100%; min-height: calc(100dvh - 24px); overflow: visible; border-radius: 25px; }
  .login-page .login-story { min-height: 264px; padding: 24px 26px; border-radius: 25px 25px 0 0; background-position: 66% 49%; }
  .login-page .login-brand { width: 126px; }
  .login-page .login-story-copy { max-width: 390px; padding: 30px 0 2px; }
  .login-page .login-story-copy h2 { max-width: 340px; margin-bottom: 8px; font-size: 36px; }
  .login-page .login-story-copy > p { max-width: 390px; margin: 0; font-size: 12px; line-height: 1.5; }
  .login-page .login-benefits,
  .login-page .login-story-note { display: none; }
  .login-page .login-panel { min-height: auto; padding: 36px 28px 42px; border-top: 1px solid rgba(21,43,73,.08); border-left: 0; border-radius: 0 0 25px 25px; }
  .login-page form.login,
  .login-page .login-panel > .login { width: min(520px, 100%); }
}

@media (max-width: 520px) {
  body.login-page { padding: 0; background: var(--login-surface); }
  .login-page .login-shell { min-height: 100dvh; border: 0; border-radius: 0; box-shadow: none; }
  .login-page .login-story { min-height: 194px; padding: 17px 18px; border-radius: 0; background-position: 69% 45%; }
  .login-page .login-story::before { background: linear-gradient(90deg,rgba(3,32,39,.82),rgba(3,40,46,.16)),linear-gradient(180deg,transparent,rgba(2,25,33,.56)); }
  .login-page .login-brand { width: 98px; }
  .login-page .login-story-copy { padding: 19px 0 0; }
  .login-page .login-kicker { margin-bottom: 6px; font-size: 10px; }
  .login-page .login-story-copy h2 { max-width: 255px; margin: 0; font-size: 29px; }
  .login-page .login-story-copy > p { display: none; }
  .login-page .login-panel { align-items: start; margin-top: 0; padding: 0 16px calc(28px + env(safe-area-inset-bottom)); border-radius: 0; background: var(--login-surface); }
  .login-page form.login,
  .login-page .login-panel > .login { width: 100%; margin-top: -18px; padding: 25px 20px 23px; border: 1px solid rgba(21,43,73,.08); border-radius: 22px; background: rgba(255,253,249,.98); box-shadow: 0 16px 36px rgba(29,48,65,.1); }
  .login-page .login-lock { width: 46px; height: 46px; margin-bottom: 16px; border-radius: 14px; }
  .login-page .login-lock span { font-size: 22px; }
  .login-page .login h1 { font-size: 32px; }
  .login-page .login-intro { margin-bottom: 21px; font-size: 13px; }
  .login-page .login-field { margin-top: 13px; }
  .login-page .login-input input:not([type="checkbox"]):not([type="radio"]) { min-height: 56px; font-size: 16px; }
  .login-page .login-submit { margin-top: 15px; }
  .login-page .login-security { font-size: 11px; }
}

@keyframes login17-shell-in {
  from { opacity: 0; transform: translateY(10px) scale(.994); }
  to { opacity: 1; transform: none; }
}

@keyframes login17-stars {
  0%, 100% { opacity: .5; transform: scale(.9); }
  50% { opacity: 1; transform: scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
  .login-page .login-shell,
  .login-page .login-stars { animation: none; }
  .login-page .login-brand,
  .login-page .login-benefits span,
  .login-page .login-input,
  .login-page .login-submit,
  .login-page .login-submit-arrow { transition: none; }
}