/* ==========================================================================
   Aigency public site — design tokens and components.

   Loads after app.css and dark-mode.css, and is the layer that carries the
   public site into the same theme contract the admin panel and the
   HarmonyTech workspace already share: one `data-theme` attribute, one
   preference in localStorage under `aigency-theme`, one token block per mode.

   The token blocks below are FALLBACKS. inc/styles.php emits the real ones
   from SiteTheme (admin/class/SiteTheme.class.php) later in <head>, so the
   admin's brand settings win. They are kept in sync by generating them from
   SiteTheme::css([]) — regenerate rather than hand-editing.

   Rule of thumb, same as the other two surfaces: a new theme is a new token
   block, never a new component rule.
   ========================================================================== */

:root, [data-theme="light"] {
  --site-canvas: #ffffff;
  --site-surface: #f8fafc;
  --site-surface-2: #f1f5f9;
  --site-card-bg: #f8fafc;
  --site-card-shadow: 0 1px 2px rgba(15,23,42,.06), 0 10px 30px rgba(15,23,42,.08);
  --site-card-blur: none;
  --site-border: #e2e8f0;
  --site-border-muted: #f1f5f9;
  --site-fg: #0f172a;
  --site-fg-muted: #64748b;
  --site-fg-subtle: #94a3b8;
  --site-accent: #6d5dfb;
  --site-accent-hover: #4e3afa;
  --site-accent-active: #331cf9;
  --site-accent-subtle: #f0efff;
  --site-accent-muted: #d6d2fe;
  --site-accent-fg: #402bfa;
  --site-on-accent-subtle: #402bfa;
  --site-on-accent: #ffffff;
  --site-hero-from: #ebe8fe;
  --site-hero-to: #ffffff;
  --site-overlay: rgba(15,23,42,.45);
  --site-shadow: 0 1px 2px rgba(15,23,42,.06), 0 10px 30px rgba(15,23,42,.08);
  --site-radius-sm: 8px;
  --site-radius: 14px;
  --site-radius-lg: 22px;
  --site-heading-font: 'Montserrat', system-ui, sans-serif;
  --site-body-font: 'Nunito Sans', system-ui, sans-serif;
  --site-color-scheme: light;
}
[data-theme="dark"] {
  --site-canvas: #0c1322;
  --site-surface: #141f39;
  --site-surface-2: #1a2748;
  --site-card-bg: #141f39;
  --site-card-shadow: 0 1px 2px rgba(0,0,0,.5), 0 8px 24px rgba(0,0,0,.4);
  --site-card-blur: none;
  --site-border: #2f405d;
  --site-border-muted: #27354c;
  --site-fg: #f8fafc;
  --site-fg-muted: #94a3b8;
  --site-fg-subtle: #64748b;
  --site-accent: #a399fc;
  --site-accent-hover: #c7c1fd;
  --site-accent-active: #e2defe;
  --site-accent-subtle: #272b49;
  --site-accent-muted: #3f416c;
  --site-accent-fg: #ffffff;
  --site-on-accent-subtle: #ffffff;
  --site-on-accent: #101317;
  --site-hero-from: #393b63;
  --site-hero-to: #0c1322;
  --site-overlay: rgba(0,0,0,.55);
  --site-shadow: 0 1px 2px rgba(0,0,0,.5), 0 8px 24px rgba(0,0,0,.4);
  --site-radius-sm: 8px;
  --site-radius: 14px;
  --site-radius-lg: 22px;
  --site-heading-font: 'Montserrat', system-ui, sans-serif;
  --site-body-font: 'Nunito Sans', system-ui, sans-serif;
  --site-color-scheme: dark;
}
[data-theme="developer"] {
  --site-canvas: #0d1117;
  --site-surface: #161b22;
  --site-surface-2: #1c2128;
  --site-card-bg: #161b22;
  --site-card-shadow: 0 1px 2px rgba(0,0,0,.5), 0 8px 24px rgba(0,0,0,.4);
  --site-card-blur: none;
  --site-border: #30363d;
  --site-border-muted: #21262d;
  --site-fg: #e6edf3;
  --site-fg-muted: #8b949e;
  --site-fg-subtle: #6e7681;
  --site-accent: #a399fc;
  --site-accent-hover: #c7c1fd;
  --site-accent-active: #e2defe;
  --site-accent-subtle: #282940;
  --site-accent-muted: #403f65;
  --site-accent-fg: #ffffff;
  --site-on-accent-subtle: #ffffff;
  --site-on-accent: #101317;
  --site-hero-from: #3a3a5c;
  --site-hero-to: #0d1117;
  --site-overlay: rgba(0,0,0,.55);
  --site-shadow: 0 1px 2px rgba(0,0,0,.5), 0 8px 24px rgba(0,0,0,.4);
  --site-radius-sm: 8px;
  --site-radius: 14px;
  --site-radius-lg: 22px;
  --site-heading-font: 'Montserrat', system-ui, sans-serif;
  --site-body-font: 'Nunito Sans', system-ui, sans-serif;
  --site-color-scheme: dark;
}

/* --------------------------------------------------------------------------
   Bootstrap 5.3 bridge. app.css and bootstrap.min.css both ship hardcoded
   light colors; mapping the --bs-* variables onto tokens brings dropdowns,
   modals, offcanvas, alerts, tables and form controls along for free.
   -------------------------------------------------------------------------- */
:root {
  color-scheme: var(--site-color-scheme);
  --bs-body-bg: var(--site-canvas);
  --bs-body-color: var(--site-fg);
  --bs-body-font-family: var(--site-body-font);
  --bs-emphasis-color: var(--site-fg);
  --bs-secondary-color: var(--site-fg-muted);
  --bs-tertiary-color: var(--site-fg-subtle);
  --bs-border-color: var(--site-border);
  --bs-border-radius: var(--site-radius);
  --bs-border-radius-sm: var(--site-radius-sm);
  --bs-border-radius-lg: var(--site-radius-lg);
  --bs-link-color: var(--site-accent-fg);
  --bs-link-hover-color: var(--site-accent-hover);
  --bs-primary: var(--site-accent);
  --bs-secondary-bg: var(--site-surface);
  --bs-tertiary-bg: var(--site-surface-2);
  --bs-heading-color: var(--site-fg);
  --bs-emphasis-color-rgb: 15, 23, 42;
}

/* Modules must not punch light holes in a dark theme. */
.bg-white,
.bg-light,
.bg-body,
.bg-body-tertiary { background-color: var(--site-surface) !important; color: var(--site-fg); }

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
body {
  background: var(--site-canvas);
  color: var(--site-fg);
  font-family: var(--site-body-font);
}
h1, h2, h3, h4, h5, h6 { font-family: var(--site-heading-font); color: var(--site-fg); }
hr { border-color: var(--site-border); opacity: 1; }
a { color: var(--site-accent-fg); }
a:hover { color: var(--site-accent-hover); }

/* One visible focus ring everywhere — app.css sets `* { outline: none }`. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--site-accent);
  outline-offset: 2px;
  border-radius: var(--site-radius-sm);
}

.site-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: .75rem 1.25rem;
  background: var(--site-accent);
  color: var(--site-on-accent);
  border-radius: 0 0 var(--site-radius-sm) 0;
  font-weight: 600;
}
.site-skip-link:focus { left: 0; color: var(--site-on-accent); }

.site-muted { color: var(--site-fg-muted); }
.site-eyebrow {
  display: inline-block;
  font-family: var(--site-heading-font);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--site-accent-fg);
  margin-bottom: .75rem;
}

/* --------------------------------------------------------------------------
   Header and navigation
   -------------------------------------------------------------------------- */
header {
  background: var(--site-canvas);
  border-bottom: 1px solid var(--site-border);
  padding: 14px 0;
}
header.sticky-header {
  /* Opaque first: a browser without color-mix() drops the second declaration
     and keeps a solid header, instead of depending on an unrelated rule to
     cover for it. */
  background: var(--site-canvas);
  background: color-mix(in srgb, var(--site-canvas) 88%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
}
#logo { max-height: 44px; width: auto; }
.site-logo-dark { display: none; }
[data-theme="dark"] .site-logo-light,
[data-theme="developer"] .site-logo-light { display: none; }
[data-theme="dark"] .site-logo-dark,
[data-theme="developer"] .site-logo-dark { display: inline-block; }

.site-logo-fallback {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--site-heading-font);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--site-fg);
  text-decoration: none;
}
.site-logo-mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--site-radius-sm);
  background: var(--site-accent);
  color: var(--site-on-accent);
  font-size: 1rem;
}

.primary-menu { gap: .25rem; }
.primary-menu li a,
.primary-menu li a:active { color: var(--site-fg-muted) !important; font-weight: 600; }
.primary-menu li a:hover { color: var(--site-fg) !important; }
.primary-menu li a.nav-link-effect::before { background-color: var(--site-accent); }
.offcanvas-custom { background: var(--site-canvas); color: var(--site-fg); }
header .btn-close span, header .bi-list { color: var(--site-fg); }
.navbar-expand-lg .navbar-nav .dropdown-menu a { color: var(--site-fg); }

.site-header-actions { display: flex; align-items: center; gap: .5rem; }
.my-credits {
  display: inline-block;
  padding: .35rem .7rem;
  border-radius: 999px;
  background: var(--site-accent-subtle);
  color: var(--site-accent-fg);
  font-weight: 600;
  font-size: .875rem;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn { font-family: var(--site-heading-font); font-weight: 600; border-radius: var(--site-radius-sm); }

.btn-primary,
.btn-sign-in,
.card-ai .btn,
#hero .btn {
  background: var(--site-accent);
  border: 1px solid var(--site-accent);
  color: var(--site-on-accent);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-sign-in:hover, .btn-sign-in:focus, .btn-sign-in:active,
.card-ai .btn:hover,
#hero .btn:hover {
  background: var(--site-accent-hover) !important;
  border-color: var(--site-accent-hover) !important;
  color: var(--site-on-accent) !important;
  box-shadow: none;
}

.btn-sign-up,
.btn-site-ghost {
  background: transparent;
  border: 1px solid var(--site-border);
  color: var(--site-fg);
}
.btn-sign-up:hover, .btn-sign-up:focus, .btn-sign-up:active,
.btn-site-ghost:hover {
  background: var(--site-surface) !important;
  border-color: var(--site-fg-subtle) !important;
  color: var(--site-fg) !important;
}

.btn-site-on-accent {
  background: var(--site-on-accent);
  border: 1px solid var(--site-on-accent);
  color: var(--site-accent);
}
.btn-site-on-accent:hover { background: transparent; color: var(--site-on-accent); }

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */
.section-spacing { padding-top: 4.5rem; padding-bottom: 4.5rem; }
.site-section { background: var(--site-canvas); }
.site-section-alt { background: var(--site-surface); }
.default-title, .title-default { color: var(--site-fg); font-weight: 700; }
.site-section-head { max-width: 42rem; margin: 0 auto 2.5rem; text-align: center; }
.site-section-head p { color: var(--site-fg-muted); font-size: 1.0625rem; margin-bottom: 0; }

#inner-page {
  background: var(--site-surface);
  border-bottom: 1px solid var(--site-border);
  padding: 3rem 0;
}
#inner-page h1, #inner-page h3 { color: var(--site-fg); }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
#hero {
  background: linear-gradient(165deg, var(--site-hero-from) 0%, var(--site-hero-to) 62%);
  min-height: auto;
  padding: 5rem 0 5.5rem;
  position: relative;
  overflow: hidden;
}
/* A soft radial wash so the hero reads as designed without an uploaded image. */
#hero::after {
  content: "";
  position: absolute;
  inset: -40% -20% auto auto;
  width: 46rem;
  height: 46rem;
  background: radial-gradient(circle, var(--site-accent-muted) 0%, transparent 62%);
  opacity: .55;
  pointer-events: none;
}
#hero > .container { position: relative; z-index: 1; }
#hero h1 {
  color: var(--site-fg);
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  line-height: 1.1;
  margin-bottom: 1rem;
}
#hero h1 span { color: var(--site-accent); font-family: var(--site-heading-font); margin-bottom: 0; }
#hero p { color: var(--site-fg-muted); font-size: 1.1875rem; max-width: 34rem; }
#hero .btn { padding: .8rem 1.6rem; font-size: 1.0625rem; border-radius: var(--site-radius-sm); }
.hero-call-action-img img { margin-top: 0; max-width: 100%; height: auto; }

.site-hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.site-hero-points {
  list-style: none;
  padding: 0;
  margin: 2rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  color: var(--site-fg-muted);
  font-size: .9375rem;
}
.site-hero-points li { display: flex; align-items: center; gap: .45rem; }
.site-hero-points i { color: var(--site-accent); }

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */
.site-card {
  height: 100%;
  padding: 1.75rem;
  background: var(--site-card-bg);
  border: 1px solid var(--site-border);
  border-radius: var(--site-radius);
  box-shadow: var(--site-card-shadow);
  backdrop-filter: var(--site-card-blur);
}
.site-card h3 { font-size: 1.125rem; margin-bottom: .5rem; }
.site-card p { color: var(--site-fg-muted); margin-bottom: 0; }
.site-card-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 1rem;
  border-radius: var(--site-radius-sm);
  background: var(--site-accent-subtle);
  color: var(--site-accent-fg);
  font-size: 1.25rem;
}
.site-step-number {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 1rem;
  border-radius: 999px;
  background: var(--site-accent);
  color: var(--site-on-accent);
  font-family: var(--site-heading-font);
  font-weight: 700;
}

.card-ai {
  background: var(--site-card-bg);
  border: 1px solid var(--site-border);
  border-radius: var(--site-radius);
  box-shadow: var(--site-card-shadow);
}
.card-ai:hover { box-shadow: var(--site-shadow); border-color: var(--site-accent-muted); }
.card-ai-image { background: var(--site-surface-2); }
.card-ai-name h3 { color: var(--site-fg); }
.card-ai-job span { color: var(--site-fg-muted); }

/* card-ai-theme-2 lays its caption over a full-bleed avatar behind a
   black gradient and sets its own white text (app.css:1406). The two rules
   above are more specific and load later, so they were repainting that text
   in --site-fg — dark ink on a near-black gradient in the light theme. */
.card-ai-theme-2 .card-ai-name h3,
.card-ai-theme-2 .card-ai-job span { color: #fff; }

/* --------------------------------------------------------------------------
   card-ai-flip — two faces, detail and the call to action on the back.

   The front deliberately carries no link: if hover flips the card, anything
   clickable on the front moves out from under the pointer. Making the whole
   front the flip control removes that conflict rather than working around it,
   and gives touch and keyboard the same affordance a mouse gets from hover.
   -------------------------------------------------------------------------- */
.card-ai-flip {
  /* app.css:132 sets overflow:hidden on .card-ai, which clips the rotation and
     flattens the 3D context. The faces carry the rounding instead. */
  overflow: visible;
  background: none;
  border: 0;
  box-shadow: none;
  perspective: 1400px;
  /* The faces are absolutely positioned, so the card needs a height of its
     own. Matched to the stacked card it replaces. */
  height: var(--site-card-ai-height, 27rem);
}
.card-ai-flip:hover { box-shadow: none; border-color: transparent; }

.card-ai-flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform .6s cubic-bezier(.2, .7, .3, 1);
}
.card-ai-flip.is-flipped .card-ai-flip-inner { transform: rotateY(180deg); }
/* Hover only where hovering is real. On a touch screen :hover latches after a
   tap and the card would stay flipped with no way back. */
@media (hover: hover) and (pointer: fine) {
  .card-ai-flip:hover .card-ai-flip-inner { transform: rotateY(180deg); }
}
/* Tabbing to the call to action has to bring its face into view. */
.card-ai-flip:focus-within .card-ai-flip-inner { transform: rotateY(180deg); }

.card-ai-face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin: 0;
  padding: 0;
  text-align: center;
  background: var(--site-card-bg);
  border: 1px solid var(--site-border);
  border-radius: var(--site-radius);
  box-shadow: var(--site-card-shadow);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.card-ai-flip:hover .card-ai-face,
.card-ai-flip:focus-within .card-ai-face { border-color: var(--site-accent-muted); }

/* The front is a <button>: reset the control, keep the card. */
.card-ai-front {
  appearance: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  width: 100%;
}
.card-ai-front:focus-visible { outline: 2px solid var(--site-accent); outline-offset: 2px; }

.card-ai-flip .card-ai-image {
  display: block;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  background: var(--site-surface-2);
}
.card-ai-flip .card-ai-image img {
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.2, .7, .3, 1);
}
@media (hover: hover) and (pointer: fine) {
  .card-ai-flip:hover .card-ai-image img { transform: scale(1.04); }
}
.card-ai-flip .card-ai-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .25rem;
  flex: 0 0 auto;
  min-height: 0;
  padding: .9rem 1rem 1rem;
}
.card-ai-flip .card-ai-name-text {
  display: block;
  font-family: var(--site-heading-font);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--site-fg);
  line-height: 1.25;
}
.card-ai-flip .card-ai-job span { font-size: .875rem; color: var(--site-fg-muted); }
.card-ai-hint {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-top: .35rem;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--site-accent-fg);
}
.card-ai-hint i { transition: transform .4s ease; }
@media (hover: hover) and (pointer: fine) {
  .card-ai-flip:hover .card-ai-hint i { transform: rotate(180deg); }
}

.card-ai-back {
  transform: rotateY(180deg);
  justify-content: center;
  gap: .5rem;
  padding: 1.35rem 1.25rem;
}
.card-ai-back-name {
  font-size: 1.0625rem;
  margin: 0;
  color: var(--site-fg);
}
.card-ai-back-role {
  margin: 0;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--site-accent-fg);
}
.card-ai-desc {
  margin: .35rem 0 0;
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--site-fg-muted);
  /* The card has a fixed height; a long description has to stop somewhere. */
  display: -webkit-box;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-ai-caps {
  list-style: none;
  margin: .75rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .35rem;
}
.card-ai-caps li {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .25rem .55rem;
  border-radius: 999px;
  background: var(--site-accent-subtle);
  /* Not --site-accent-fg: that one is measured against the page and the card
     surface, and a tinted chip background is neither. */
  color: var(--site-on-accent-subtle, var(--site-accent-fg));
  font-size: .75rem;
  font-weight: 600;
}
.card-ai-back-actions { margin-top: auto; padding-top: 1rem; }
.card-ai-flip .card-ai-back .btn { width: 100%; margin: 0; }
.card-ai-back-btn {
  appearance: none;
  background: none;
  border: 0;
  margin-top: .5rem;
  padding: .25rem;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--site-fg-muted);
  cursor: pointer;
}
.card-ai-back-btn:hover { color: var(--site-fg); }
.card-ai-back-btn:focus-visible { outline: 2px solid var(--site-accent); outline-offset: 2px; }
/* Pointer-driven flips need no explicit way back; touch and click do. */
@media (hover: hover) and (pointer: fine) {
  .card-ai-flip:not(.is-flipped) .card-ai-back-btn { display: none; }
}

/* The VIP badge is positioned against the card, outside the rotating element,
   so it stays put while the faces turn. */
.card-ai-flip > .card-vip { z-index: 2; }

@media (max-width: 575px) {
  .card-ai-flip { --site-card-ai-height: 24rem; }
}
@media (min-width: 1400px) {
  .card-ai-flip { --site-card-ai-height: 29rem; }
}

/* Rotation is the effect, not the point. Without a preference for motion the
   faces cross-fade in place and every trigger still works. */
@media (prefers-reduced-motion: reduce) {
  .card-ai-flip-inner,
  .card-ai-flip .card-ai-image img,
  .card-ai-hint i {
    transition: none;
  }
  .card-ai-flip .card-ai-flip-inner,
  .card-ai-flip.is-flipped .card-ai-flip-inner,
  .card-ai-flip:hover .card-ai-flip-inner,
  .card-ai-flip:focus-within .card-ai-flip-inner {
    transform: none;
  }
  .card-ai-flip .card-ai-back { transform: none; }
  .card-ai-face { backface-visibility: visible; -webkit-backface-visibility: visible; transition: opacity .15s linear; }
  .card-ai-flip .card-ai-back { opacity: 0; pointer-events: none; }
  .card-ai-flip.is-flipped .card-ai-back,
  .card-ai-flip:hover .card-ai-back,
  .card-ai-flip:focus-within .card-ai-back { opacity: 1; pointer-events: auto; }
  .card-ai-flip.is-flipped .card-ai-front,
  .card-ai-flip:hover .card-ai-front,
  .card-ai-flip:focus-within .card-ai-front { opacity: 0; }
  @media (hover: hover) and (pointer: fine) {
    .card-ai-flip:hover .card-ai-image img { transform: none; }
    .card-ai-flip:hover .card-ai-hint i { transform: none; }
  }
}
.card, .card-body { background: var(--site-card-bg); color: var(--site-fg); border-color: var(--site-border); }
.card-price { color: var(--site-fg); }

.wrapper-category-item a { color: var(--site-fg-muted); }
.wrapper-category-item:hover a { color: var(--site-accent-fg); }

/* Empty states. The assistants grid renders one whenever `prompts` is empty,
   which is the current state of a fresh install. */
.site-empty {
  text-align: center;
  max-width: 34rem;
  margin: 0 auto;
  padding: 3rem 2rem;
  background: var(--site-surface);
  border: 1px dashed var(--site-border);
  border-radius: var(--site-radius-lg);
}
.site-empty-icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin: 0 auto 1.25rem;
  border-radius: 999px;
  background: var(--site-accent-subtle);
  color: var(--site-accent-fg);
  font-size: 1.5rem;
}
.site-empty h3 { font-size: 1.25rem; }
.site-empty p { color: var(--site-fg-muted); }

.site-badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .3rem .7rem;
  border-radius: 999px;
  background: var(--site-accent-subtle);
  color: var(--site-accent-fg);
  font-size: .8125rem;
  font-weight: 600;
}
.site-badge-off { background: var(--site-surface-2); color: var(--site-fg-subtle); }

/* --------------------------------------------------------------------------
   Call to action band
   -------------------------------------------------------------------------- */
.site-cta {
  background: var(--site-accent);
  color: var(--site-on-accent);
  border-radius: var(--site-radius-lg);
  padding: 3.25rem 2rem;
  text-align: center;
}
.site-cta h2 { color: var(--site-on-accent); }
.site-cta p { color: var(--site-on-accent); opacity: .85; max-width: 36rem; margin: 0 auto 1.75rem; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
footer {
  background: var(--site-surface);
  border-top: 1px solid var(--site-border);
  color: var(--site-fg-muted);
  padding: 3.5rem 0 2rem;
}
footer h5, footer .h1 { color: var(--site-fg) !important; }
footer p, footer ul li, footer ul li a { color: var(--site-fg-muted); }
footer ul li a:hover { color: var(--site-accent-fg); }

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */
.form-control, .form-select {
  background: var(--site-canvas);
  border: 1px solid var(--site-border);
  color: var(--site-fg);
  border-radius: var(--site-radius-sm);
}
.form-control:focus, .form-select:focus {
  background: var(--site-canvas);
  border-color: var(--site-accent);
  color: var(--site-fg);
  box-shadow: 0 0 0 3px var(--site-accent-subtle);
}
.form-control::placeholder { color: var(--site-fg-subtle); }
.form-floating > label { color: var(--site-fg-muted); }
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label { color: var(--site-fg-subtle); }
.form-check-input { background-color: var(--site-canvas); border-color: var(--site-border); }
.form-check-input:checked { background-color: var(--site-accent); border-color: var(--site-accent); }
.form-text { color: var(--site-fg-muted); }

/* --------------------------------------------------------------------------
   Authentication screens
   -------------------------------------------------------------------------- */
.auth-shell { min-height: 100vh; display: flex; background: var(--site-canvas); }
.auth-brand {
  position: relative;
  display: none;
  flex-direction: column;
  justify-content: space-between;
  padding: 3rem;
  color: var(--site-on-accent);
  background:
    linear-gradient(150deg, var(--site-accent) 0%, var(--site-accent-active) 100%);
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.auth-brand::after {
  content: "";
  position: absolute;
  inset: auto auto -30% -20%;
  width: 32rem;
  height: 32rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .10);
  pointer-events: none;
}
.auth-brand-image::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(150deg, var(--site-accent) 0%, transparent 100%);
  opacity: .82;
}
.auth-brand > * { position: relative; z-index: 1; }
.auth-brand-logo { max-height: 40px; width: auto; }
.auth-brand-title {
  font-size: clamp(1.75rem, 2.4vw, 2.4rem);
  line-height: 1.15;
  color: var(--site-on-accent);
  margin: 2.5rem 0 1rem;
  max-width: 22ch;
}
.auth-brand-tagline { color: var(--site-on-accent); opacity: .88; max-width: 34ch; margin-bottom: 0; }
.auth-brand-points { list-style: none; padding: 0; margin: 0; display: grid; gap: .85rem; }
.auth-brand-points li { display: flex; gap: .7rem; align-items: flex-start; opacity: .92; }
.auth-brand-points i { margin-top: .15rem; }

.auth-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  background: var(--site-canvas);
}
.auth-panel-top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.auth-panel-body { flex: 1; display: flex; align-items: center; justify-content: center; padding: 2rem 0; }
.auth-form { width: 100%; max-width: 25rem; }
.auth-form h1 { font-size: 1.75rem; margin-bottom: .4rem; }
.auth-form .auth-sub { color: var(--site-fg-muted); margin-bottom: 1.75rem; }
.auth-form .btn-lg { padding: .8rem 1rem; font-size: 1rem; }
.auth-alt { text-align: center; color: var(--site-fg-muted); margin-top: 1.5rem; }
.auth-legal { font-size: .8125rem; color: var(--site-fg-subtle); }
.auth-messages:empty { display: none; }

.toggle-password { color: var(--site-fg-subtle); cursor: pointer; }
.toggle-password:hover { color: var(--site-fg); }
.password-progress { height: 5px; background: var(--site-surface-2); border-radius: 999px; }

@media (min-width: 768px) {
  .auth-brand { display: flex; flex: 0 0 44%; max-width: 44%; }
  .auth-panel { padding: 2rem 3rem; }
}
@media (min-width: 1200px) {
  .auth-brand { flex-basis: 50%; max-width: 50%; }
}

/* The `.theme-icon` override and the `.hide-section` reset that used to close
   this file are gone: the first masked rules for a `#toggle-button` that the
   shared theme switch replaced, and the second reset a class the rebuilt
   landing no longer emits. Both targeted markup that no longer exists. */