html,
body {
  min-height: 100%;
  margin: 0;
}

/* ============================================================================
   Login + signup (core:login) - ported from the notypost sibling product's
   reference (site-kit.css's .auth-*, .seg, .oauth, .pw, .pwreq, .consent rules,
   tokens.css's palette) onto this app's own stylesheet.

   Every class here is prefixed "np-" (noty-post) rather than reused verbatim
   from the reference. This app's existing core/static/css/app.css (a
   third-party Bootstrap admin template, "Material Admin Extended Dark") already
   defines .btn, .btn-primary, .logo, .login, .seg-looking selectors etc. for
   its own dashboard chrome - reusing those exact names here would silently
   collide with rules that already exist for a different purpose on every
   other page that loads app.css (same failure the reference's own site-kit.css
   header comment describes happening between its landing page and dashboard).
   Namespacing everything below sidesteps that regardless of stylesheet order.

   Scoped custom properties (--np-c-*) instead of global :root tokens, for the
   same reason - app.css defines no CSS custom properties at all today, so
   nothing collides yet, but there's no reason to be the first file to put
   tokens in :root for the rest of the app to collide with later. Values below
   are copied from the reference's tokens.css (light theme only - this app has
   no dark-mode toggle to key a dark variant off of).
   ============================================================================ */

.np-auth-wrap {
  --np-c-ink: #0C0A09;
  --np-c-ink-hover: #24211F;
  --np-c-ink-press: #050403;
  --np-c-graphite: #615955;
  --np-c-linen: #E8E4E3;
  --np-c-paper: #F3F1F1;
  --np-c-cream: #FBFAF9;
  --np-c-chalk: #FFFFFF;

  --np-c-stamp: #8200DB;
  --np-c-stamp-tint: #F5EBFC;
  --np-c-stamp-line: #DCB8F5;

  --np-c-danger: #C7473E;
  --np-c-success: #1F8D48;

  --np-font-sans: "Geologica", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --np-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --np-r-md: 11px;
  --np-shadow-md: 0 6px 20px -8px rgba(28, 26, 21, .10);
  --np-ease: cubic-bezier(0.2, 0, 0, 1);
  --np-dur: .15s;

  position: relative;
  isolation: isolate;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px 16px;
  box-sizing: border-box;
  font-family: var(--np-font-body);
  color: var(--np-c-ink);
  background: #fff;
  overflow: hidden;
  line-height: 1.42857143;
}
.np-auth-wrap::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: url("../images/auth/hero-glow.svg") center / cover no-repeat; }
.np-auth-wrap::after { content: ""; position: absolute; right: -10vh; top: -6vh; height: 112vh; aspect-ratio: 950.171 / 798.506; transform: rotate(180deg); pointer-events: none; background: url("../images/auth/hero-loop.svg") center / contain no-repeat;
}

.np-auth-wrap * { box-sizing: border-box; }

.np-auth-card { position: relative; z-index: 1; width: 380px; max-width: 100%; }
.np-auth-card-inner {
  background: var(--np-c-chalk);
  border: 1px solid var(--np-c-linen);
  border-radius: 16px;
  padding: 32px;
  box-shadow: var(--np-shadow-md);
}

.np-auth-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.np-logo {
  font-family: var(--np-font-sans);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -.02em;
  text-transform: lowercase;
  white-space: nowrap;
  color: var(--np-c-ink);
  text-decoration: none;
}
.np-logo span { color: var(--np-c-stamp); }

.np-lang { position: relative; }
.np-lang-btn {
  display: flex; align-items: center; gap: 6px;
  background: var(--np-c-cream); border: 1px solid var(--np-c-linen); border-radius: var(--np-r-md);
  padding: 6px 10px; font-size: 13px; color: var(--np-c-graphite); cursor: pointer;
  font-family: inherit;
}
.np-lang-btn:hover { border-color: var(--np-c-graphite); }
/* Original SVG artwork: smpio/notypost-front/src/components/icons/flags.ts. */
.np-flag {
  display: inline-block; flex-shrink: 0; width: 21px; height: 15px; border-radius: 3px;
  border: 0; box-shadow: none; background-repeat: no-repeat; background-size: 100% 100%;
}
.np-flag-ru { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%2233%2043%2021%2015%22%20width%3D%2221%22%20height%3D%2215%22%20fill%3D%22none%22%3E%3Crect%20x%3D%2233%22%20y%3D%2243%22%20width%3D%2221%22%20height%3D%2215%22%20rx%3D%223%22%20fill%3D%22%230036A7%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M33%2053H54V58H33V53Z%22%20fill%3D%22%23D62718%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M33%2043H54V48H33V43Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E"); }
.np-flag-en { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%2233%2014%2021%2015%22%20width%3D%2221%22%20height%3D%2215%22%20fill%3D%22none%22%3E%3Crect%20x%3D%2233%22%20y%3D%2214%22%20width%3D%2221%22%20height%3D%2215%22%20rx%3D%223%22%20fill%3D%22%23001B69%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M35.234%2014H33V16.5L51.7539%2029L54%2029V26.5L35.234%2014Z%22%20fill%3D%22%23FDFDFD%22%2F%3E%3Cpath%20d%3D%22M33.7451%2014L54%2027.5354V29H53.2724L33%2015.4506V14H33.7451Z%22%20fill%3D%22%23C9072A%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M52%2014H54V16.5C54%2016.5%2041.0098%2024.8281%2035%2029H33V26.5L52%2014Z%22%20fill%3D%22%23FDFDFD%22%2F%3E%3Cpath%20d%3D%22M54%2014H53.3218L33%2027.5471V29H33.7451L54%2015.4615V14Z%22%20fill%3D%22%23C9072A%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M40.6371%2014H46.3804V18.6268H54V24.3701H46.3804V29H40.6371V24.3701H33V18.6268H40.6371V14Z%22%20fill%3D%22%23FDFDFD%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M41.8421%2014H45.1579V19.7692H54V23.2308H45.1579V29H41.8421V23.2308H33V19.7692H41.8421V14Z%22%20fill%3D%22%23C9072A%22%2F%3E%3C%2Fsvg%3E"); }
.np-lang-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 2;
  background: var(--np-c-chalk); border: 1px solid var(--np-c-linen); border-radius: var(--np-r-md);
  box-shadow: var(--np-shadow-md); padding: 4px; min-width: 120px;
  display: none;
}
.np-lang.open .np-lang-menu { display: block; }
.np-lang-menu a {
  display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 7px;
  font-size: 13px; color: var(--np-c-ink); text-decoration: none;
}
.np-lang-menu a:hover { background: var(--np-c-paper); }
.np-lang-menu a.on { font-weight: 600; color: var(--np-c-stamp); }

.np-auth-card-inner label {
  display: block; font-size: 13px; color: var(--np-c-graphite); margin: 12px 0 6px;
}
.np-auth-card-inner input[type="email"],
.np-auth-card-inner input[type="password"],
.np-auth-card-inner input[type="text"] {
  width: 100%; height: 47px; padding: 4px 12px; background: var(--np-c-cream);
  border: 1px solid var(--np-c-linen); border-radius: var(--np-r-md);
  color: var(--np-c-ink); font-size: 15px; font-family: inherit;
}
.np-auth-card-inner input:focus { outline: none; border-color: var(--np-c-stamp); }

.np-err { color: var(--np-c-danger); font-size: 13px; margin-top: 10px; }
.np-note {
  font-size: 13px; color: var(--np-c-graphite); background: var(--np-c-paper);
  border-radius: var(--np-r-md); padding: 10px 12px; margin-bottom: 14px;
}
.np-muted { color: var(--np-c-graphite); font-size: 13px; }

.np-auth-h { font-family: var(--np-font-sans); font-size: 20px; font-weight: 700; margin: 0 0 6px; }

.np-linkish {
  display: inline-block; margin-top: 14px; background: none; border: none; padding: 0;
  color: var(--np-c-graphite); font-size: 13px; cursor: pointer; text-underline-offset: 3px;
  text-decoration: none; font-family: inherit;
}
.np-linkish:hover { color: var(--np-c-ink); text-decoration: underline; }

.np-pw { position: relative; display: block; }
.np-pw input { padding-inline-end: 42px; }
.np-pw-eye {
  position: absolute; top: 50%; inset-inline-end: 6px; transform: translateY(-50%);
  display: grid; place-items: center; width: 32px; height: 32px; border: none; border-radius: 8px;
  background: none; color: var(--np-c-graphite); cursor: pointer; padding: 0;
}
.np-pw-eye:hover { color: var(--np-c-ink); }
.np-pw-eye svg { display: block; }

.np-pwreq { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.np-pwreq li { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--np-c-graphite); }
.np-pwreq li.ok { color: var(--np-c-success); }
.np-pwreq .np-dot {
  width: 14px; height: 14px; border-radius: 50%; border: 1px solid currentColor;
  display: grid; place-items: center; font-size: 9px; line-height: 1; flex: none;
}

.np-consent {
  display: flex; align-items: flex-start; gap: 9px; margin: 14px 0 0; font-size: 13px; line-height: 1.45;
  color: var(--np-c-graphite); cursor: pointer;
}
.np-consent input { width: 16px; height: 16px; flex: none; margin-top: 1px; accent-color: var(--np-c-stamp); }
.np-consent a { color: var(--np-c-ink); text-decoration: underline; text-underline-offset: 3px; }

.np-btn {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  width: 100%; height: 46px; padding: 0 18px; border-radius: var(--np-r-md); font-weight: 600; font-size: 14px;
  cursor: pointer; border: 1px solid transparent; transition: background var(--np-dur) var(--np-ease);
  margin-top: 14px; font-family: inherit;
  background: var(--np-c-ink); color: var(--np-c-chalk);
}
.np-btn:hover { background: var(--np-c-ink-hover); }
.np-btn:active { background: var(--np-c-ink-press); }
.np-btn:disabled { opacity: .6; cursor: default; }

@media (max-width: 480px) {
  .np-auth-wrap { padding: 16px 12px; background-size: auto 110%, auto, auto, auto; }
  .np-auth-card-inner { padding: 32px; }
  .np-auth-wrap::after { display: none; }
}

/* Dimensions and decor ported from smpio/notypost-front auth_shell.tsx. */
.np-auth-card { max-width: 92vw; }
.np-products { position: relative; }
.np-products summary { display: flex; align-items: center; gap: 0; cursor: pointer; list-style: none; line-height: 1; }
.np-products summary::-webkit-details-marker { display: none; }
.np-products summary svg { margin-left: 8px; color: #615955; }
.np-products-menu { position: absolute; z-index: 10; left: -8px; top: calc(100% + 12px); width: 260px; max-width: 78vw; padding: 6px; border: 1px solid #e8e4e3; border-radius: 12px; background: white; box-shadow: 0 12px 32px #0c0a0918; }
.np-products-menu a { display: block; padding: 10px; border-radius: 8px; color: #0c0a09; text-decoration: none; font-size: 14px; }
.np-products-menu a:hover, .np-products-menu a[aria-current] { background: #f3f1f1; }
.np-products-menu a span { color: #8200db; }
.np-products-menu small { display: block; font: 12px/1.5 var(--np-font-body); color: #615955; margin-top: 3px; }
.np-auth-wrap :focus-visible { outline: 2px solid #8200db; outline-offset: 3px; }
.np-auth-card-inner label.np-consent { display: flex; margin-top: 14px; }

.np-lang-btn { height: 33px; padding: 0 8px; gap: 7px; border-radius: 7.5px; background: white; }
.np-lang-btn svg { width: 14px; height: 14px; }

.np-strength { position: relative; margin-top: 10px; }
.np-strength-trigger { display: block; width: 100%; border: 0; padding: 0; background: none; font: inherit; color: var(--np-c-graphite); cursor: help; text-align: left; }
.np-strength-heading { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; margin-bottom: 6px; }
.np-strength-bars { display: flex; gap: 5px; }
.np-strength-bars > span { flex: 1; height: 4px; border-radius: 99px; background: var(--np-c-linen); }
.np-strength[data-score="1"] .np-strength-bars > span:first-child { background: #c7473e; }
.np-strength[data-score="2"] .np-strength-bars > span:nth-child(-n+2) { background: #bf8b1c; }
.np-strength[data-score="3"] .np-strength-bars > span { background: #1f8d48; }
.np-strength-tooltip { position: absolute; z-index: 20; left: calc(100% + 16px); top: -14px; width: 300px; max-width: calc(100vw - 40px); padding: 14px; border: 1px solid var(--np-c-linen); border-radius: 11px; background: white; box-shadow: 0 8px 28px #0c0a0914; visibility: hidden; opacity: 0; }
.np-strength-tooltip::before { content: ""; position: absolute; width: 18px; top: 0; bottom: 0; left: -18px; }
.np-strength-tooltip .np-pwreq { margin: 0; gap: 8px; }
.np-strength-tooltip .np-pwreq li { align-items: flex-start; font-size: 12px; line-height: 1.5; }
.np-strength-tooltip .np-dot { margin-top: 2px; }
.np-strength:hover .np-strength-tooltip, .np-strength:focus-within .np-strength-tooltip { visibility: visible; opacity: 1; }
.np-strength.np-tooltip-dismissed .np-strength-tooltip { visibility: hidden; opacity: 0; }
@media (max-width: 1050px) { .np-strength-tooltip { left: 0; top: calc(100% + 10px); width: 100%; } .np-strength-tooltip::before { left: 0; top: -12px; height: 12px; width: 100%; bottom: auto; } }

.np-auth-footer { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px; margin-top: 18px; color: var(--np-c-graphite); font-size: 12px; line-height: 1.5; }
.np-auth-footer a { color: var(--np-c-ink); text-decoration: none; font-weight: 500; }
.np-auth-footer a:hover { text-decoration: underline; text-underline-offset: 3px; }
.np-auth-footer .np-auth-recovery { color: var(--np-c-graphite); font-weight: 400; }
.np-auth-footer-center { justify-content: center; text-align: center; }