/* Shared public account surfaces: Planka brand continuity without replacing forms or layouts.
   Applied to login, premium and usage after their existing stylesheets. */
.s-page {
  --public-brand: #ff874b;
  --public-brand-glow: rgba(255, 118, 48, 0.08);
}
.s-page.s-auth {
  background: radial-gradient(ellipse 65% 34% at 85% 5%, var(--public-brand-glow), transparent 78%), var(--color-bg);
}
.s-page .s-top {
  border-bottom: 1px solid var(--color-border);
}
.s-page .s-brand {
  letter-spacing: -0.04em;
}
.s-page .s-brand svg {
  flex: none;
}
.s-page .s-top-link {
  transition: background 170ms ease, border-color 170ms ease;
}
.s-page .s-top-link:hover {
  border-color: color-mix(in srgb, var(--public-brand) 45%, var(--color-border));
}
.s-auth .premiere-spark,
.s-auth .premiere-eyebrow,
.s-auth .premiere-entry-tag {
  color: var(--public-brand);
}
.s-auth .premiere-hero h1 span,
.s-auth .premiere-hero h1 em {
  color: var(--public-brand);
  font-style: normal;
}
.s-auth .premiere-entry,
.s-auth .premiere-example,
.s-page .u-plan-section {
  border-color: color-mix(in srgb, var(--public-brand) 20%, var(--color-border-strong));
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.07);
}
.s-auth .premiere-capability-index {
  color: var(--public-brand);
  border-color: color-mix(in srgb, var(--public-brand) 28%, var(--color-border));
}
.s-auth .premiere-entry .s-email .s-btn {
  background: var(--public-brand);
  border-color: var(--public-brand);
  color: #201209;
}
.s-auth .premiere-entry .s-email .s-btn:hover {
  background: #ffb080;
  border-color: #ffb080;
}
.s-page :is(.s-btn, .s-top-link, .u-btn, .s-input):focus-visible {
  outline: 2px solid var(--public-brand);
  outline-offset: 3px;
}
.s-page .u-eyebrow {
  color: var(--public-brand);
}
.s-page .u-skel i {
  animation-duration: 1.35s;
}
html[data-theme="light"] .s-page {
  --public-brand: #bf4a16;
  --public-brand-glow: rgba(191, 74, 22, 0.06);
}
@media (max-width: 599px) {
  .s-page .s-top {
    min-width: 0;
    gap: 10px;
  }
  .s-auth .premiere-entry {
    border-radius: 18px;
  }
  .s-page .u-plan-section {
    border-radius: 16px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .s-page .s-top-link,
  .s-auth .premiere-entry .s-btn,
  .s-page .u-skel i {
    transition: none;
    animation: none;
  }
}