:root { color-scheme: dark; }

html,
body.priviot-login-page { min-height: 100%; background: #09070e !important; }

body.priviot-login-page {
  --priviot-auth-violet: #7c35ff;
  --priviot-auth-violet-hover: #7c35ff;
  --priviot-auth-violet-readable: #a66bff;
  --priviot-auth-violet-link-hover: #c195ff;
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  color: #f7f4ff !important;
  background: radial-gradient(68rem 48rem at 46% 75%, rgb(91 53 160 / .16), transparent 73%), linear-gradient(135deg, #121018 0%, #181321 55%, #111017 100%) !important;
  background-attachment: fixed !important;
}

body.priviot-login-page #root { display: flex; flex: 1 0 auto; flex-direction: column; background: transparent !important; }
body.priviot-login-page #root > div { display: flex !important; min-height: 0 !important; flex: 1 0 auto; flex-direction: column; background: transparent !important; }
.priviot-login-original-header,
.priviot-login-original-footer,
body.priviot-login-page #root > div > header,
body.priviot-login-page #root > div > footer { display: none !important; }

.priviot-auth-header {
  position: relative;
  z-index: 5;
  display: flex;
  width: 100%;
  min-height: 5.5rem;
  box-sizing: border-box;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem clamp(1.5rem, 3.5vw, 4rem) .65rem;
  background: transparent !important;
}

.priviot-auth-brand {
  display: inline-flex;
  align-items: center;
  border-radius: .5rem;
  transition: filter 180ms ease;
}
.priviot-auth-brand img { display: block; width: clamp(8.8rem, 11vw, 11rem); height: auto; }
.priviot-auth-brand:hover { filter: drop-shadow(0 0 .8rem rgb(124 53 255 / .3)); }
.priviot-auth-brand:focus-visible { outline: 2px solid var(--priviot-auth-violet-hover); outline-offset: .35rem; }
.priviot-auth-actions { display: flex; align-items: center; gap: 1.3rem; }

.priviot-auth-language summary {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .58rem .7rem;
  border: 1px solid transparent;
  border-radius: .75rem;
  background: transparent;
  color: var(--priviot-auth-violet-readable);
  font: inherit;
  font-size: .94rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease, background-color 160ms ease, transform 160ms ease;
}

.priviot-auth-language svg {
  width: 1.22rem;
  height: 1.22rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
}

.priviot-auth-language { position: relative; }
.priviot-auth-language summary { list-style: none; }
.priviot-auth-language summary::-webkit-details-marker { display: none; }
.priviot-auth-language .priviot-auth-chevron { width: .8rem; height: .8rem; transition: transform 180ms ease; }
.priviot-auth-language[open] .priviot-auth-chevron { transform: rotate(180deg); }
.priviot-auth-language summary:hover,
.priviot-auth-language summary:focus-visible,
.priviot-auth-language[open] summary {
  border-color: var(--priviot-auth-violet-hover);
  background: rgb(124 53 255 / .18);
  color: var(--priviot-auth-violet-link-hover);
}
.priviot-auth-language summary:hover { transform: translateY(-1px); }
.priviot-auth-language summary:focus-visible { outline: 2px solid var(--priviot-auth-violet-hover); outline-offset: 2px; }
.priviot-auth-language > a {
  position: absolute;
  top: calc(100% + .65rem);
  right: 0;
  min-width: 7.5rem;
  padding: .65rem .8rem;
  border: 1px solid rgb(124 53 255 / .5);
  border-radius: .7rem;
  background: #17121f;
  color: var(--priviot-auth-violet-readable);
  text-decoration: none;
  box-shadow: 0 .8rem 2rem rgb(0 0 0 / .3);
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease, transform 160ms ease;
}
.priviot-auth-language > a:hover,
.priviot-auth-language > a:focus-visible {
  border-color: var(--priviot-auth-violet-hover);
  background: rgb(124 53 255 / .24);
  color: var(--priviot-auth-violet-readable);
  transform: translateY(-1px);
}
.priviot-auth-language > a:focus-visible { outline: 2px solid var(--priviot-auth-violet-hover); outline-offset: 2px; }

.priviot-login-shell {
  position: relative !important;
  display: flex !important;
  min-height: auto !important;
  flex: 1 0 auto;
  align-items: center !important;
  justify-content: center !important;
  padding: .75rem 1.25rem 1.2rem !important;
  background: transparent !important;
}

.priviot-login-shell > div[aria-hidden='true'], .priviot-login-shell::before, .priviot-login-shell::after { display: none !important; }
.priviot-login-panel { width: min(100%, 35.5rem) !important; max-width: 35.5rem !important; }

.priviot-login-heading {
  display: block !important;
  margin: 0 0 1.35rem !important;
  text-align: left !important;
}

.priviot-login-heading h1 {
  margin: 0 !important;
  color: #f8f6ff !important;
  font-size: clamp(1.85rem, 4vw, 2.2rem) !important;
  font-weight: 720 !important;
  letter-spacing: -.035em !important;
  line-height: 1.15 !important;
}

.priviot-login-heading p {
  max-width: none !important;
  margin: .65rem 0 0 !important;
  color: #aaa4b4 !important;
  font-size: .96rem !important;
  line-height: 1.55 !important;
}

.priviot-login-panel .priviot-glass-card {
  overflow: visible !important;
  padding: 0 !important;
  border: 1px solid #3a3642 !important;
  border-radius: 1.15rem !important;
  background: #222027 !important;
  box-shadow: 0 1rem 2.8rem rgb(0 0 0 / .22) !important;
  backdrop-filter: none !important;
}

.priviot-login-panel .priviot-glass-card::before, .priviot-login-panel .priviot-glass-card::after { display: none !important; }

.priviot-login-card-inner {
  position: relative !important;
  z-index: 1 !important;
  padding: clamp(2rem, 5vw, 2.65rem) !important;
}

.priviot-login-form { display: grid !important; gap: 1.05rem !important; }
.priviot-login-form > div:not(.priviot-login-trust) { margin-bottom: 0 !important; }

.priviot-login-form label {
  color: #f4f1fa !important;
  font-size: .88rem !important;
  font-weight: 680 !important;
}

.priviot-login-form input[type='email'],
.priviot-login-form input[type='password'],
.priviot-login-form input[type='text'] {
  width: 100% !important;
  min-height: 3.15rem !important;
  box-sizing: border-box !important;
  border: 1px solid #4d4755 !important;
  border-radius: .72rem !important;
  outline: 0 !important;
  background: #1a181e !important;
  color: #f7f4ff !important;
  padding: .7rem .9rem !important;
  box-shadow: none !important;
}

.priviot-login-form input:focus { border-color: var(--priviot-auth-violet-hover) !important; box-shadow: 0 0 0 3px rgb(124 53 255 / .2) !important; }
.priviot-password-field { position: relative; }
.priviot-password-field input { padding-right: 3rem !important; }

.priviot-password-toggle {
  position: absolute;
  top: 50%;
  right: .64rem;
  display: grid;
  width: 2rem;
  height: 2rem;
  padding: 0;
  place-items: center;
  transform: translateY(-50%);
  border: 0;
  border-radius: .48rem;
  background: transparent;
  color: #aaa4b4;
  cursor: pointer;
}

.priviot-password-toggle:hover, .priviot-password-toggle:focus-visible { background: rgb(124 53 255 / .2); color: var(--priviot-auth-violet-readable); }
.priviot-password-toggle svg { width: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.7; }
.priviot-login-trust { display: grid; gap: .35rem; margin: -.15rem 0 .05rem; }

.priviot-login-trust-choice {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr);
  gap: .7rem;
  align-items: start;
  cursor: pointer;
}

.priviot-login-trust-choice input { width: 1.2rem; height: 1.2rem; margin: .12rem 0 0; accent-color: var(--priviot-auth-violet); }
.priviot-login-trust-choice span { display: grid; gap: .08rem; }
.priviot-login-trust-choice strong { color: #f3f0f8; font-size: .9rem; font-weight: 560; }

.priviot-login-trust-choice small, .priviot-login-trust-detail {
  color: #aaa4b4;
  font-size: .78rem;
  font-weight: 440;
  line-height: 1.45;
}

.priviot-login-trust-why {
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--priviot-auth-violet-readable);
  font: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: color 160ms ease, text-shadow 160ms ease;
}

.priviot-login-trust-detail { margin: .2rem 0 0 1.95rem; }
.priviot-login-trust-detail[hidden] { display: none; }

.priviot-login-form button[type='submit'],
.priviot-login-form .btn-tactile {
  min-height: 3.15rem !important;
  margin-top: .05rem !important;
  border: 0 !important;
  border-radius: .7rem !important;
  background: var(--priviot-auth-violet) !important;
  color: #fff !important;
  font-size: .98rem !important;
  font-weight: 650 !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease !important;
}

.priviot-login-form button[type='submit']:hover:not(:disabled),
.priviot-login-form .btn-tactile:hover:not(:disabled),
.priviot-login-form button[type='submit']:focus-visible,
.priviot-login-form .btn-tactile:focus-visible {
  background: var(--priviot-auth-violet-hover) !important;
  border-color: var(--priviot-auth-violet-hover) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 .55rem 1.5rem rgb(124 53 255 / .28) !important;
}
.priviot-login-form button[type='submit']:focus-visible,
.priviot-login-form .btn-tactile:focus-visible { outline: 2px solid #7c35ff !important; outline-offset: 3px !important; }

.priviot-login-register {
  margin: 1rem 0 0 !important;
  color: #d0cad8 !important;
  font-size: .87rem !important;
  text-align: center !important;
}

.priviot-login-register a,
.priviot-login-help a,
.priviot-auth-footer a,
.priviot-login-trust-why {
  color: var(--priviot-auth-violet-readable) !important;
  border-radius: .25rem;
  text-decoration: none !important;
  transition: color 160ms ease, text-shadow 160ms ease;
}

.priviot-login-register a:hover,
.priviot-login-help a:hover,
.priviot-auth-footer a:hover,
.priviot-login-trust-why:hover {
  color: var(--priviot-auth-violet-link-hover) !important;
  text-shadow: 0 0 1rem rgb(124 53 255 / .58);
}

.priviot-login-register a:focus-visible,
.priviot-login-help a:focus-visible,
.priviot-auth-footer a:focus-visible,
.priviot-login-trust-why:focus-visible {
  outline: 2px solid var(--priviot-auth-violet-hover);
  outline-offset: 3px;
  color: var(--priviot-auth-violet-link-hover) !important;
}

.priviot-login-passkey-alternative { display: grid !important; gap: .8rem !important; margin: 1.05rem 0 0 !important; }

.priviot-login-passkey-alternative .login-auth-divider {
  display: flex !important;
  align-items: center !important;
  gap: .8rem !important;
  margin: 0 !important;
  color: #777180 !important;
  font-size: .7rem !important;
  letter-spacing: .08em !important;
}

.priviot-login-passkey-alternative .login-auth-divider::before, .priviot-login-passkey-alternative .login-auth-divider::after {
  content: '' !important;
  height: 1px !important;
  flex: 1 !important;
  background: rgb(255 255 255 / .1) !important;
}

.priviot-login-passkey-alternative .login-passkey-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .65rem !important;
  min-height: 3.15rem !important;
  border: 1px solid #4b4454 !important;
  border-radius: .7rem !important;
  background: rgb(255 255 255 / .035) !important;
  color: #f4f1fa !important;
  box-shadow: none !important;
}
.priviot-login-passkey-alternative .login-passkey-button svg { width: 1.2rem; height: 1.2rem; flex: none; }

.priviot-login-passkey-alternative .login-passkey-button {
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease, box-shadow 160ms ease !important;
}

.priviot-login-passkey-alternative .login-passkey-button:hover,
.priviot-login-passkey-alternative .login-passkey-button:focus-visible {
  border-color: var(--priviot-auth-violet-hover) !important;
  background: rgb(124 53 255 / .12) !important;
  color: #d4bfff !important;
  transform: none !important;
  box-shadow: 0 0 0 1px rgb(124 53 255 / .2), 0 .55rem 1.5rem rgb(70 37 120 / .18) !important;
}
.priviot-login-passkey-alternative .login-passkey-button:focus-visible { outline: 2px solid #7c35ff !important; outline-offset: 3px !important; }

.priviot-login-passkey-alternative .login-email-status { min-height: 0 !important; margin: 0 !important; color: #aaa4b4 !important; text-align: center; }
.priviot-login-passkey-alternative .login-email-status:empty { display: none; }
.priviot-login-help { margin: 1.15rem 0 0 !important; border-top: 1px solid #403c46; padding-top: 1.15rem; font-size: .85rem !important; text-align: center !important; }

.priviot-auth-footer {
  display: grid;
  justify-items: center;
  gap: .65rem;
  padding: .2rem 1.5rem 1rem;
  color: #aaa4b4;
  font-size: .82rem;
  text-align: center;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.priviot-auth-products { display: flex; gap: .72rem; align-items: center; margin-bottom: .35rem; }
.priviot-auth-product {
  position: relative;
  display: block;
  width: 2.15rem;
  height: 2.15rem;
  flex: 0 0 2.15rem;
  overflow: hidden;
  border-radius: .62rem;
}
.priviot-auth-products img {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: var(--priviot-auth-icon-source-size);
  height: var(--priviot-auth-icon-source-size);
  max-width: none;
  object-fit: contain;
  transform: translate(-50%, -50%);
}
.priviot-auth-product--pdf { --priviot-auth-icon-source-size: 2.65rem; }
.priviot-auth-product--write { --priviot-auth-icon-source-size: 2.68rem; }
.priviot-auth-product--paste { --priviot-auth-icon-source-size: 2.84rem; }
.priviot-auth-product--notes { --priviot-auth-icon-source-size: 3.15rem; }
.priviot-auth-product--ai { --priviot-auth-icon-source-size: 3.02rem; }
.priviot-auth-footer p { margin: 0; color: #d0cad8; }
.priviot-auth-footer nav { display: flex; gap: .55rem; align-items: center; }
.priviot-auth-footer a { color: var(--priviot-auth-violet-readable); }

@media (min-width: 641px) and (max-height: 1000px) {
  .priviot-auth-header { min-height: 4.75rem; padding-top: .7rem; padding-bottom: .4rem; }
  .priviot-login-shell { padding: .4rem 1.25rem .8rem !important; }
  .priviot-login-card-inner { padding: 1.8rem 2rem !important; }
  .priviot-login-heading { margin-bottom: .95rem !important; }
  .priviot-login-form { gap: .82rem !important; }
  .priviot-login-passkey-alternative { gap: .65rem !important; margin-top: .8rem !important; }
  .priviot-login-register { margin-top: .8rem !important; }
  .priviot-login-help { margin-top: .8rem !important; padding-top: .8rem; }
  .priviot-auth-footer { gap: .4rem; padding: 0 1.5rem .5rem; }
  .priviot-auth-products { margin-bottom: 0; }
}

@media (min-width: 641px) and (max-height: 800px) {
  .priviot-auth-header { min-height: 4rem; padding-top: .4rem; padding-bottom: .2rem; }
  .priviot-login-shell { padding: .3rem 1rem .6rem !important; }
  .priviot-login-card-inner { padding: 1rem 1.7rem !important; }
  .priviot-login-heading { margin-bottom: .55rem !important; }
  .priviot-login-heading p { margin-top: .35rem !important; }
  .priviot-login-form { gap: .65rem !important; }
  .priviot-login-form input[type='email'],
  .priviot-login-form input[type='password'],
  .priviot-login-form input[type='text'],
  .priviot-login-form button[type='submit'],
  .priviot-login-form .btn-tactile,
  .priviot-login-passkey-alternative .login-passkey-button { min-height: 2.7rem !important; }
  .priviot-login-passkey-alternative { gap: .5rem !important; margin-top: .65rem !important; }
  .priviot-login-register { margin-top: .6rem !important; }
  .priviot-login-help { margin-top: .4rem !important; padding-top: .4rem; }
  .priviot-auth-footer { gap: .35rem; padding: 0 1rem .55rem; }
  .priviot-auth-products { margin-bottom: 0; }
}

@media (max-width: 640px) {
  .priviot-auth-header { min-height: 5.3rem; padding: 1.25rem 1.15rem .65rem; }
  .priviot-auth-brand img { width: 8.3rem; }
  .priviot-auth-actions { gap: .75rem; }
  .priviot-login-shell { align-items: flex-start !important; padding: .75rem .9rem 1.6rem !important; }
  .priviot-login-panel .priviot-glass-card { border-radius: 1rem !important; }
  .priviot-login-card-inner { padding: 2rem 1.35rem !important; }
  .priviot-auth-footer { padding-bottom: 1.7rem; }
  .priviot-auth-products { gap: .6rem; }
}
.registration-consent a { color: var(--color-ink, #f7f4ff); text-decoration: underline; text-underline-offset: .18em; }
.registration-consent a:focus-visible { outline: 2px solid #7c35ff; outline-offset: 2px; }