/* ==========================================================================
   Theming. Same contract as dashboard-v2.css — see the header comment there.
   Dark is the default and the base palette; light layers on
   :root[data-theme="light"], set before first paint by the themeInit template.
   ========================================================================== */

/* ---- Palette: dark (default) ---- */
:root {
  color-scheme: dark;

  --ps-bg: #000;
  --ps-surface: #0c0c0e;
  --ps-surface-raised: #111114;
  --ps-surface-pop: rgba(12, 12, 14, .88);

  /* Wash tint for hairlines, hover fills and inset highlights. */
  --ps-tint-rgb: 255, 255, 255;

  --ps-line: rgba(var(--ps-tint-rgb), .08);
  --ps-line-strong: rgba(var(--ps-tint-rgb), .16);
  --ps-text-high: #f4f4f5;
  --ps-text: #a1a1aa;
  --ps-text-low: #7d7d87;
  --ps-text-mid: #d4d4d8;

  --ps-invert-bg: #ffffff;
  --ps-invert-bg-hover: #f2f2f4;
  --ps-invert-fg: #09090b;
  --ps-invert-halo: rgba(255, 255, 255, .08);
  --ps-invert-halo-hover: rgba(255, 255, 255, .12);

  --ps-cyan-rgb: 124, 227, 245;
  --ps-violet-rgb: 167, 139, 250;
  --ps-green-rgb: 74, 222, 128;
  --ps-red-rgb: 248, 113, 113;
  --ps-cyan: rgb(var(--ps-cyan-rgb));
  --ps-violet: rgb(var(--ps-violet-rgb));
  --ps-green: rgb(var(--ps-green-rgb));
  --ps-red: rgb(var(--ps-red-rgb));

  --ps-shadow-strong: rgba(0, 0, 0, .42);

  --ps-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ps-display: "Newsreader", Georgia, "Times New Roman", serif;
  --ps-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ---- Palette: light ---- */
:root[data-theme="light"] {
  color-scheme: light;

  --ps-bg: #f7f7f9;
  --ps-surface: #ffffff;
  --ps-surface-raised: #ffffff;
  --ps-surface-pop: rgba(255, 255, 255, .94);

  --ps-tint-rgb: 24, 24, 27;

  --ps-line: rgba(var(--ps-tint-rgb), .11);
  --ps-line-strong: rgba(var(--ps-tint-rgb), .2);
  --ps-text-high: #09090b;
  --ps-text: #52525b;
  --ps-text-low: #71717a;
  --ps-text-mid: #3f3f46;

  --ps-invert-bg: #18181b;
  --ps-invert-bg-hover: #27272a;
  --ps-invert-fg: #fafafa;
  --ps-invert-halo: rgba(24, 24, 27, .14);
  --ps-invert-halo-hover: rgba(24, 24, 27, .2);

  --ps-cyan-rgb: 8, 115, 143;
  --ps-violet-rgb: 109, 40, 217;
  --ps-green-rgb: 21, 128, 61;
  --ps-red-rgb: 220, 38, 38;
  --ps-cyan: rgb(var(--ps-cyan-rgb));
  --ps-violet: rgb(var(--ps-violet-rgb));
  --ps-green: rgb(var(--ps-green-rgb));
  --ps-red: rgb(var(--ps-red-rgb));

  --ps-shadow-strong: rgba(24, 24, 27, .12);
}

:root.ps-theme-switching,
:root.ps-theme-switching *,
:root.ps-theme-switching *::before,
:root.ps-theme-switching *::after {
  transition: none !important;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  background: var(--ps-bg);
  -webkit-text-size-adjust: 100%;
}

body.ps-auth {
  min-height: 100vh;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 13% 12%, rgba(var(--ps-cyan-rgb), .08), transparent 28rem),
    radial-gradient(circle at 78% 35%, rgba(var(--ps-violet-rgb), .07), transparent 32rem),
    var(--ps-bg);
  color: var(--ps-text);
  font-family: var(--ps-ui);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.ps-auth::before {
  position: fixed;
  z-index: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
  content: "";
  background-image:
    linear-gradient(rgba(var(--ps-tint-rgb), .024) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--ps-tint-rgb), .024) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(ellipse 85% 78% at 50% 0%, #000 24%, transparent 75%);
  mask-image: radial-gradient(ellipse 85% 78% at 50% 0%, #000 24%, transparent 75%);
}

.ps-auth a {
  color: inherit;
  text-decoration: none;
}

.ps-auth a:hover {
  color: var(--ps-text-high);
  text-decoration: none;
}

.ps-auth :focus-visible {
  outline: 2px solid rgba(var(--ps-cyan-rgb), .85);
  outline-offset: 3px;
}

.ps-skip-link {
  position: fixed;
  z-index: 9999;
  top: 0;
  left: -999px;
  padding: 10px 16px;
  border-radius: 0 0 8px;
  background: var(--ps-invert-bg);
  color: var(--ps-invert-fg) !important;
  font-family: var(--ps-ui);
  font-weight: 700;
}

.ps-skip-link:focus {
  left: 0;
}

.auth-page {
  position: relative;
  z-index: 1;
  display: flex;
  width: min(100%, 1280px);
  min-height: 100vh;
  margin: 0 auto;
  padding: 0 40px;
  flex-direction: column;
}

.auth-header {
  display: flex;
  min-height: 78px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--ps-line);
}

.ps-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ps-text-high) !important;
  font-family: var(--ps-ui);
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -.02em;
}

.ps-brand-mark {
  display: block;
  width: 21px;
  height: 24px;
  flex: none;
}

.auth-return {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ps-text);
  font-size: 14px;
  font-weight: 500;
  transition: color .15s ease;
}

.auth-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Theme toggle — hidden without JS, since nothing could act on a click.
   The visible icon is the theme the button switches to. */
.ps-theme-toggle {
  display: inline-flex;
  width: 36px;
  height: 36px;
  flex: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--ps-line);
  border-radius: 50%;
  background: transparent;
  color: var(--ps-text);
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}

.ps-theme-toggle:hover,
.ps-theme-toggle:focus {
  border-color: var(--ps-line-strong);
  background: rgba(var(--ps-tint-rgb), .05);
  color: var(--ps-text-high);
}

html:not(.js) .ps-theme-toggle {
  display: none;
}

.ps-theme-toggle .ps-ic-moon {
  display: none;
}

:root[data-theme="light"] .ps-theme-toggle .ps-ic-moon {
  display: block;
}

:root[data-theme="light"] .ps-theme-toggle .ps-ic-sun {
  display: none;
}

.auth-main {
  display: grid;
  width: 100%;
  max-width: 1110px;
  margin: auto;
  padding: 64px 0;
  align-items: center;
  gap: clamp(56px, 8vw, 120px);
  grid-template-columns: minmax(0, 1fr) minmax(380px, 460px);
}

.auth-intro {
  max-width: 570px;
}

.auth-eyebrow {
  display: inline-flex;
  margin: 0 0 25px;
  align-items: center;
  gap: 8px;
  color: var(--ps-cyan);
  font-family: var(--ps-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.auth-eyebrow::before {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 12px rgba(var(--ps-cyan-rgb), .7);
  content: "";
}

.auth-intro h1 {
  margin: 0;
  color: var(--ps-text-high);
  font-family: var(--ps-display);
  font-size: clamp(48px, 5.6vw, 78px);
  font-weight: 400;
  font-optical-sizing: auto;
  letter-spacing: -.025em;
  line-height: .98;
}

.auth-intro h1 em {
  color: var(--ps-text-mid);
  font-weight: 400;
}

.auth-lead {
  max-width: 520px;
  margin: 27px 0 0;
  color: var(--ps-text);
  font-size: 18px;
  line-height: 1.65;
}

.auth-facts {
  display: grid;
  margin-top: 38px;
  gap: 13px;
}

.auth-facts > div {
  display: flex;
  align-items: center;
  gap: 11px;
  color: var(--ps-text-mid);
  font-size: 14px;
  font-weight: 500;
}

.auth-fact-dot {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: currentColor;
}

.auth-fact-dot.cyan {
  color: var(--ps-cyan);
}

.auth-fact-dot.violet {
  color: var(--ps-violet);
}

.auth-fact-dot.green {
  color: var(--ps-green);
}

.auth-panel {
  position: relative;
  overflow: hidden;
  padding: clamp(28px, 4vw, 42px);
  border: 1px solid var(--ps-line-strong);
  border-radius: 20px;
  background: var(--ps-surface-pop);
  box-shadow: 0 24px 80px var(--ps-shadow-strong);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.auth-panel::before {
  position: absolute;
  top: 0;
  right: 22px;
  left: 22px;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(var(--ps-cyan-rgb), .55), rgba(var(--ps-violet-rgb), .45), transparent);
}

.auth-panel .content-title {
  margin: 0 0 28px;
  text-align: left;
}

.auth-panel .content-title h2,
.auth-panel .content-title h3 {
  margin: 0;
  color: var(--ps-text-high);
  font-family: var(--ps-display);
  font-size: clamp(34px, 4vw, 44px);
  font-weight: 400;
  letter-spacing: -.02em;
  line-height: 1.05;
  text-transform: none;
}

.auth-choice-grid {
  display: grid;
  gap: 12px;
}

.auth-choice {
  display: flex;
  min-height: 82px;
  padding: 18px 20px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border: 1px solid var(--ps-line-strong);
  border-radius: 14px;
  background: rgba(var(--ps-tint-rgb), .025);
  color: var(--ps-text-high) !important;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}

/* The welcome page's choices are form buttons, because choosing sets the
   account type. Reset the browser and Bootstrap button styles so they match
   the link cards. They carry no type attribute, so the auth-panel
   button[type="submit"] style does not apply. The 600 weight is the one the
   link cards inherited from style.css's a rule, which signed-in pages load. */
.auth-choice-form {
  margin: 0;
}

button.auth-choice {
  width: 100%;
  margin: 0;
  font: inherit;
  font-weight: 600;
  letter-spacing: inherit;
  word-spacing: inherit;
  text-align: inherit;
  text-transform: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.auth-choice:hover,
.auth-choice:focus {
  border-color: rgba(var(--ps-cyan-rgb), .45);
  background: rgba(var(--ps-cyan-rgb), .055);
  transform: translateY(-1px);
}

.auth-choice-primary {
  border-color: rgba(var(--ps-cyan-rgb), .25);
  background:
    linear-gradient(120deg, rgba(var(--ps-cyan-rgb), .1), rgba(var(--ps-violet-rgb), .055)),
    rgba(var(--ps-tint-rgb), .03);
}

.auth-choice > span:first-child {
  display: grid;
  text-align: left;
  gap: 3px;
}

.auth-choice strong {
  color: var(--ps-text-high);
  font-size: 15px;
  font-weight: 650;
}

.auth-choice small {
  color: var(--ps-text);
  font-size: 12px;
}

.auth-choice > span:last-child {
  color: var(--ps-cyan);
  font-size: 20px;
  transition: transform .15s ease;
}

.auth-choice:hover > span:last-child {
  transform: translateX(3px);
}

.auth-note {
  margin: 22px 0 0;
  color: var(--ps-text-low);
  font-size: 13px;
  line-height: 1.55;
}

.auth-panel .content-title p {
  margin: 11px 0 0;
  color: var(--ps-text);
  font-size: 14px;
  line-height: 1.55;
}

.auth-panel .row,
.auth-panel .col-12 {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
}

.auth-panel .card,
.auth-panel .packetstream_card,
.auth-panel .padded_card,
.auth-panel .narrow_card {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--ps-text);
}

.auth-panel .form-group {
  width: 100%;
  margin: 0 0 19px;
}

.auth-panel label {
  display: block;
  margin: 0 0 8px;
  color: var(--ps-text-mid);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .01em;
}

.auth-panel .form-control {
  display: block;
  width: 100%;
  max-width: none;
  height: 48px;
  padding: 0 14px;
  border: 1px solid var(--ps-line-strong);
  border-radius: 10px;
  background: rgba(var(--ps-tint-rgb), .035);
  box-shadow: none;
  color: var(--ps-text-high);
  font-family: var(--ps-ui);
  font-size: 15px;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

.auth-panel .form-control:hover {
  border-color: rgba(var(--ps-tint-rgb), .25);
}

.auth-panel .form-control:focus {
  border-color: rgba(var(--ps-cyan-rgb), .65);
  outline: none;
  background: rgba(var(--ps-tint-rgb), .055);
  box-shadow: 0 0 0 3px rgba(var(--ps-cyan-rgb), .1);
}

.auth-panel .form-control[readonly] {
  color: var(--ps-text);
  font-family: var(--ps-mono);
}

.auth-panel .auth-submit,
.auth-panel button[type="submit"] {
  display: inline-flex;
  width: 100%;
  height: 48px;
  margin: 4px 0 0;
  padding: 0 22px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ps-invert-bg);
  border-radius: 999px;
  background: var(--ps-invert-bg);
  box-shadow: 0 10px 34px var(--ps-invert-halo);
  color: var(--ps-invert-fg);
  font-family: var(--ps-ui);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  text-transform: none;
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}

.auth-panel .auth-submit::after {
  display: none;
}

.auth-panel .auth-submit:hover,
.auth-panel .auth-submit:focus,
.auth-panel button[type="submit"]:hover,
.auth-panel button[type="submit"]:focus {
  background: var(--ps-invert-bg-hover);
  box-shadow: 0 14px 40px var(--ps-invert-halo-hover);
  color: var(--ps-invert-fg);
  transform: translateY(-1px);
}

.auth-panel form + div,
.auth-panel form ~ div {
  color: var(--ps-text);
  font-size: 14px;
}

.auth-panel form + div a,
.auth-panel form ~ div a {
  color: var(--ps-text-high);
  font-weight: 600;
}

.auth-panel form + div a:hover,
.auth-panel form ~ div a:hover {
  color: var(--ps-cyan);
}

/* The auth templates use this small subset of Bootstrap spacing utilities.
   Define them here so the full framework is not required. */
.ps-auth .mt-2 {
  margin-top: .5rem !important;
}

.ps-auth .mt-3 {
  margin-top: 1rem !important;
}

.ps-auth .mb-2 {
  margin-bottom: .5rem !important;
}

.ps-auth .ml-1 {
  margin-left: .25rem !important;
}

.auth-panel .cf-turnstile {
  max-width: 100%;
  overflow: hidden;
}

/* The self-hosted ALTCHA check on login and forgot-password runs invisibly
   (altcha-init.js). An early submit turns the button into a spinner until the
   check passes; a failed check shows the error line. */
.auth-panel .auth-submit.is-verifying,
.auth-panel .auth-submit.is-verifying:hover,
.auth-panel .auth-submit.is-verifying:focus {
  gap: 10px;
  cursor: progress;
  transform: none;
}

.auth-panel .auth-submit.is-verifying::before {
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: auth-check-spin .7s linear infinite;
  content: "";
}

@keyframes auth-check-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .auth-panel .auth-submit.is-verifying::before {
    animation-duration: 2s;
  }
}

.auth-panel .auth-check-error {
  margin: 0 0 12px;
  color: var(--ps-red);
  font-size: 13px;
  line-height: 1.5;
}

.auth-panel .auth-check-error[hidden] {
  display: none;
}

.auth-panel .auth-check-retry {
  margin: 0 0 0 4px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ps-text-high);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.auth-footer {
  display: flex;
  min-height: 72px;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--ps-line);
  color: var(--ps-text-low);
  font-size: 12px;
}

.auth-footer nav {
  display: flex;
  gap: 20px;
}

.auth-footer a {
  transition: color .15s ease;
}

@media (max-width: 900px) {
  .auth-page {
    padding: 0 24px;
  }

  .auth-main {
    max-width: 520px;
    padding: 48px 0 64px;
    gap: 36px;
    grid-template-columns: 1fr;
  }

  .auth-intro {
    text-align: center;
  }

  .auth-intro h1 {
    font-size: clamp(44px, 10vw, 64px);
  }

  .auth-lead {
    margin-right: auto;
    margin-left: auto;
  }

  .auth-facts {
    display: none;
  }
}

@media (max-width: 560px) {
  .auth-page {
    padding: 0 16px;
  }

  .auth-header {
    min-height: 66px;
  }

  .auth-return span:first-child {
    display: none;
  }

  .auth-return {
    width: 36px;
    height: 36px;
    justify-content: center;
    border: 1px solid var(--ps-line);
    border-radius: 50%;
  }

  .auth-main {
    padding: 34px 0 48px;
    gap: 28px;
  }

  .auth-intro h1 {
    font-size: clamp(38px, 13vw, 52px);
  }

  .auth-lead {
    margin-top: 18px;
    font-size: 15px;
  }

  .auth-eyebrow {
    margin-bottom: 17px;
    font-size: 10px;
  }

  .auth-panel {
    padding: 28px 22px;
    border-radius: 16px;
  }

  .auth-panel .content-title h2,
  .auth-panel .content-title h3 {
    font-size: 34px;
  }

  .auth-footer {
    min-height: 94px;
    padding: 18px 0;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
  }
}

/* ==========================================================================
   MCP OAuth pages (consent and its errors). The layout drops the marketing
   column (.ps-auth-solo), so the request is the only thing on screen.
   ========================================================================== */
.ps-auth-solo .auth-main {
  max-width: 540px;
  grid-template-columns: minmax(0, 1fr);
}

.oauth-eyebrow {
  margin: 0 0 14px !important;
  color: var(--ps-cyan) !important;
  font-family: var(--ps-mono);
  font-size: 11px !important;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.auth-panel .oauth-title h3 {
  font-size: clamp(30px, 3.4vw, 38px);
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.oauth-unverified {
  color: var(--ps-text);
  font-style: italic;
}

.auth-panel .oauth-title .oauth-host {
  margin-top: 10px;
  color: var(--ps-text-mid);
  font-family: var(--ps-mono);
  font-size: 13px;
}

.oauth-account {
  display: flex;
  margin: 0 0 22px;
  padding: 12px 14px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 16px;
  border: 1px solid var(--ps-line);
  border-radius: 12px;
  background: rgba(var(--ps-tint-rgb), .025);
  font-size: 14px;
}

.oauth-account strong {
  color: var(--ps-text-high);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.oauth-logout {
  margin: 0;
}

.auth-panel .oauth-logout .oauth-logout-button {
  display: inline;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  color: var(--ps-text-high);
  font-size: 14px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.auth-panel .oauth-logout .oauth-logout-button:hover,
.auth-panel .oauth-logout .oauth-logout-button:focus {
  background: none;
  box-shadow: none;
  color: var(--ps-cyan);
  transform: none;
}

.oauth-warning {
  margin: 0 0 22px;
  padding: 14px 16px;
  border: 1px solid rgba(var(--ps-red-rgb), .45);
  border-radius: 12px;
  background: rgba(var(--ps-red-rgb), .07);
  color: var(--ps-text-mid);
  font-size: 14px;
  line-height: 1.55;
}

.oauth-warning strong {
  display: block;
  margin-bottom: 4px;
  color: var(--ps-text-high);
}

.oauth-warning code,
.oauth-detail {
  font-family: var(--ps-mono);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.oauth-warning code {
  color: var(--ps-text-high);
}

.oauth-lead {
  margin: 0 0 10px;
  color: var(--ps-text-high);
  font-size: 15px;
  font-weight: 600;
}

.oauth-scopes {
  margin: 0 0 22px;
  padding: 0 0 0 20px;
  font-size: 14px;
  line-height: 1.55;
}

.oauth-scopes li {
  list-style: disc;
}

.oauth-scopes li::marker {
  color: var(--ps-cyan);
}

.oauth-scopes li + li {
  margin-top: 6px;
}

.oauth-scopes strong {
  color: var(--ps-text-high);
}

.oauth-balance {
  display: flex;
  padding: 12px 0;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--ps-line);
  border-bottom: 1px solid var(--ps-line);
  font-size: 14px;
}

.oauth-balance strong {
  color: var(--ps-text-high);
  font-family: var(--ps-mono);
}

.ps-auth .oauth-balance a,
.ps-auth .oauth-fineprint a,
.ps-auth .oauth-alert a,
.ps-auth .oauth-return a {
  color: var(--ps-text-high);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ps-auth .oauth-balance a:hover,
.ps-auth .oauth-fineprint a:hover,
.ps-auth .oauth-alert a:hover,
.ps-auth .oauth-return a:hover {
  color: var(--ps-cyan);
}

.oauth-alert {
  margin: 14px 0 0;
  padding: 12px 14px;
  border: 1px solid rgba(var(--ps-red-rgb), .45);
  border-radius: 12px;
  background: rgba(var(--ps-red-rgb), .07);
  color: var(--ps-text-high);
  font-size: 14px;
  line-height: 1.5;
}

.oauth-fineprint {
  margin: 18px 0 0;
  color: var(--ps-text-low);
  font-size: 13px;
  line-height: 1.55;
}

.oauth-detail {
  margin: -12px 0 22px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(var(--ps-tint-rgb), .04);
  color: var(--ps-text-mid);
}

.oauth-return {
  margin: 0 0 8px;
  font-size: 14px;
}

.oauth-actions {
  display: grid;
  margin: 26px 0 0;
  gap: 12px;
  grid-template-columns: 1fr 1fr;
}

.oauth-solo-action {
  grid-template-columns: 1fr;
}

.ps-auth-solo .auth-panel > :last-child {
  margin-bottom: 0;
}

.auth-panel .oauth-actions .auth-submit {
  margin: 0;
}

.auth-panel .oauth-actions .oauth-cancel {
  border-color: var(--ps-line-strong);
  background: transparent;
  box-shadow: none;
  color: var(--ps-text-high);
}

.auth-panel .oauth-actions .oauth-cancel:hover,
.auth-panel .oauth-actions .oauth-cancel:focus {
  border-color: rgba(var(--ps-tint-rgb), .35);
  background: rgba(var(--ps-tint-rgb), .05);
  box-shadow: none;
  color: var(--ps-text-high);
}

.auth-panel .oauth-link {
  width: 100%;
  margin-top: 8px;
}

@media (max-width: 560px) {
  .auth-panel .oauth-title h3 {
    font-size: 28px;
  }

  .oauth-actions {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ps-auth *,
  .ps-auth *::before,
  .ps-auth *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}