/*
  Dependency chain: app shell -> shared HF UI tokens -> page-scoped auth,
  SMS, and Friends Circle CSS. This file defines visual primitives only; page
  files decide layout and state.
*/
:root {
  --hf-ui-page-bg: #0b1428;
  --hf-ui-panel-bg: #244a82;
  --hf-ui-panel-border: rgba(255, 255, 255, .24);
  --hf-ui-panel-radius: 8px;
  --hf-ui-panel-shadow: 0 18px 55px rgba(8, 18, 46, .24);
  --hf-ui-text: #f8fbff;
  --hf-ui-text-muted: rgba(248, 251, 255, .82);
  --hf-ui-gold: #d99a37;
  --hf-ui-orange: #ffb329;
  --hf-ui-orange-border: #d98600;
  --hf-ui-forest: #236f44;
  --hf-ui-forest-dark: #124f31;
  --hf-ui-forest-text: #ecffe7;
  --hf-ui-red-dark: #4f131f;
  --hf-ui-red-border: #8f3c49;
  --hf-ui-important-red-start: #b84658;
  --hf-ui-important-red-end: #8f2f43;
  --hf-ui-important-red-border: rgba(255, 178, 188, .62);
  --hf-ui-important-red-text: #ffe3e7;
  --hf-ui-important-red-shadow: 0 .42rem 1rem rgba(68, 10, 25, .24);
  --hf-ui-baby-blue: #6fa6cd;
  --hf-ui-link-blue: #263d91;
  --hf-ui-input-bg: #243f78;
  --hf-ui-input-bg-focus: #2a4f8e;
  --hf-ui-input-border: #9ed7ff;
  --hf-ui-font: Arial, Helvetica, sans-serif;
  --hf-ui-pill-font-size: .72rem;
  --hf-ui-pill-line-height: 1;
  --hf-ui-pill-min-height: 2.08rem;
  --hf-ui-pill-padding-block-start: .18rem;
  --hf-ui-pill-padding-block-end: .2rem;
  --hf-ui-pill-padding-inline: .56rem;
  --hf-ui-bullet-size: .54em;
  --hf-ui-bullet-gap: .72em;
  --hf-ui-bullet-color: #1f7a4d;
  --hf-ui-bullet-list-gap: .62rem;
  --hf-ui-check-size: 1.22rem;
  --hf-ui-brand-image-width: min(13.2rem, 56vw);
}

.hf-ui-panel {
  box-sizing: border-box;
  border: 1px solid var(--hf-ui-panel-border);
  border-radius: var(--hf-ui-panel-radius);
  background: var(--hf-ui-panel-bg);
  color: var(--hf-ui-text);
  box-shadow: var(--hf-ui-panel-shadow);
}

.hf-ui-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--hf-ui-pill-min-height);
  padding: var(--hf-ui-pill-padding-block-start) var(--hf-ui-pill-padding-inline) var(--hf-ui-pill-padding-block-end);
  border-radius: 999px;
  font: 900 var(--hf-ui-pill-font-size)/var(--hf-ui-pill-line-height) var(--hf-ui-font);
  letter-spacing: 0;
  text-align: center;
  text-transform: uppercase;
}

.hf-ui-pill--forest {
  border: 1px solid rgba(147, 215, 160, .54);
  background: linear-gradient(180deg, var(--hf-ui-forest) 0%, var(--hf-ui-forest-dark) 100%);
  color: var(--hf-ui-forest-text);
}

.hf-ui-pill--red {
  border: 1px solid var(--hf-ui-red-border);
  background: var(--hf-ui-red-dark);
  color: #ffffff;
}

.hf-ui-pill--important {
  border: 1px solid var(--hf-ui-important-red-border);
  background: linear-gradient(180deg, var(--hf-ui-important-red-start) 0%, var(--hf-ui-important-red-end) 100%);
  color: var(--hf-ui-important-red-text);
  box-shadow: var(--hf-ui-important-red-shadow);
}

.hf-ui-pill--gold {
  border: 1px solid rgba(217, 154, 55, .45);
  background: rgba(217, 154, 55, .2);
  color: #ffd7a0;
}

.hf-ui-action-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 3rem;
  padding: .82rem 1rem;
  border: 1px solid var(--hf-ui-orange-border);
  border-radius: var(--hf-ui-panel-radius);
  background: var(--hf-ui-orange);
  color: #17203a;
  font: 900 .98rem/1.15 var(--hf-ui-font);
  letter-spacing: 0;
  text-align: center;
}

.hf-ui-brand,
.hf-auth-brand {
  display: grid;
  justify-items: center;
  gap: .36rem;
  width: 100%;
  margin: 0;
}

.hf-ui-brand__image,
.hf-auth-brand__image {
  display: block;
  width: var(--hf-ui-brand-image-width);
  height: auto;
  aspect-ratio: 560 / 403;
  object-fit: cover;
  border: 2px solid rgba(255, 215, 160, .56);
  border-radius: var(--hf-ui-panel-radius);
  background: rgba(5, 12, 26, .42);
  box-shadow: 0 12px 28px rgba(7, 18, 43, .24);
}

.hf-ui-brand__slogan,
.hf-auth-brand__slogan {
  margin: 0;
  color: #ffd7a0;
  font: 900 .76rem/1.1 var(--hf-ui-font);
  letter-spacing: .08em;
  text-align: center;
  text-transform: uppercase;
}

.hf-ui-bullet-list {
  display: grid;
  gap: var(--hf-ui-bullet-list-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.hf-ui-bullet-list > li {
  position: relative;
  margin: 0;
  padding-left: calc(var(--hf-ui-bullet-size) + var(--hf-ui-bullet-gap));
}

.hf-ui-bullet-list > li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: calc((1lh - var(--hf-ui-bullet-size)) / 2);
  width: var(--hf-ui-bullet-size);
  height: var(--hf-ui-bullet-size);
  border-radius: 999px;
  background: var(--hf-ui-bullet-color);
}

.hf-ui-spinner {
  width: 2.45rem;
  height: 2.45rem;
  border: .28rem solid rgba(229, 242, 255, .34);
  border-top-color: var(--hf-ui-orange);
  border-radius: 999px;
  animation: hf-ui-spin .82s linear infinite;
}

@keyframes hf-ui-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hf-ui-spinner {
    animation: none;
  }
}