body.hf-admin-logged-out {
  min-height: 100dvh;
  background:
    radial-gradient(circle at 50% 0%, rgba(73, 245, 154, .08), transparent 17rem),
    linear-gradient(180deg, #071018, #03060b);
}

body.hf-admin-logged-out #admin-root {
  min-height: 100dvh;
}

body.hf-admin-logged-out .admin-shell {
  min-height: 100dvh;
  display: grid;
  grid-template-rows: 1fr !important;
  background: transparent;
}

body.hf-admin-logged-out .admin-header {
  position: static !important;
  min-height: 100dvh;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-content: center !important;
  align-items: stretch !important;
  justify-items: stretch !important;
  gap: 18px !important;
  padding: max(28px, env(safe-area-inset-top)) clamp(22px, 6vw, 38px) max(28px, env(safe-area-inset-bottom)) !important;
  background: transparent !important;
  color: #edf6f3;
}

body.hf-admin-logged-out .admin-brand-lockup {
  display: grid;
  gap: 5px;
  min-width: 0;
  text-align: left;
}

body.hf-admin-logged-out .admin-brand-title {
  margin: 0 !important;
  color: #f4f7ff !important;
  font-size: clamp(1.75rem, 8vw, 2.25rem) !important;
  line-height: 1.04 !important;
  white-space: normal !important;
}

body.hf-admin-logged-out .admin-brand-subtitle {
  margin: 0 !important;
  color: #9bd7c2 !important;
  font-size: .76rem !important;
  line-height: 1.1 !important;
  letter-spacing: 0 !important;
}

body.hf-admin-logged-out .access-form {
  width: 100% !important;
  max-width: 360px;
  display: grid !important;
  justify-self: stretch;
  justify-items: stretch !important;
  gap: 12px !important;
}

body.hf-admin-logged-out .access-form__main {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  gap: 12px !important;
}

body.hf-admin-logged-out .access-form__main label {
  width: 100% !important;
  min-width: 0 !important;
  color: #c9d8e8 !important;
  font-size: .96rem !important;
  line-height: 1.2 !important;
}

body.hf-admin-logged-out .access-form input {
  width: 100% !important;
  height: 52px !important;
  border: 1px solid #5f7088 !important;
  border-radius: 8px !important;
  padding: 0 12px !important;
  background: #202d42 !important;
  color: #fff !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .06) !important;
}

body.hf-admin-logged-out .access-form input:focus {
  border-color: #7fa8cf !important;
  outline: 2px solid rgba(127, 168, 207, .34) !important;
  outline-offset: 2px !important;
}

body.hf-admin-logged-out .access-form button[type="submit"] {
  width: 100% !important;
  min-height: 52px !important;
  border: 1px solid rgba(75, 231, 154, .46) !important;
  border-radius: 8px !important;
  background: #0b332a !important;
  color: #f2fff7 !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
}

body.hf-admin-logged-out .settings-icon-button,
body.hf-admin-logged-out .tabbar,
body.hf-admin-logged-out .panel,
body.hf-admin-logged-out .hf-sms-page {
  display: none !important;
}

body.hf-admin-logged-in .settings-icon-button {
  width: auto !important;
  min-width: 72px !important;
  padding: 0 10px !important;
  font-size: 0 !important;
}

body.hf-admin-logged-in .settings-icon-button::before {
  content: "Settings";
  font-size: .76rem;
  font-weight: 800;
  line-height: 1;
}

@media (min-width: 520px) {
  body.hf-admin-logged-out {
    display: grid;
    justify-content: center;
  }

  body.hf-admin-logged-out #admin-root {
    width: min(100vw, 420px) !important;
    box-shadow: 0 0 0 1px rgba(156, 186, 176, .22), 0 28px 80px rgba(0, 0, 0, .46) !important;
  }
}

body.hf-admin-sms-ready .tabbar {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

body.hf-sms-active .tabbar button.active:not([data-hf-sms-tab]) {
  border-color: rgba(128, 169, 157, .36);
  background: transparent;
  color: inherit;
}

.hf-sms-page {
  --hf-sms-surface: linear-gradient(180deg, #0a111b, #070b12);
  --hf-sms-surface-soft: linear-gradient(180deg, #111b28, #0a1019);
  --hf-sms-surface-warn: linear-gradient(180deg, #1b1510, #0f0d0b);
  --hf-sms-line: rgba(156, 186, 176, .34);
  --hf-sms-line-strong: rgba(178, 214, 204, .52);
  --hf-sms-ink: #edf6f3;
  --hf-sms-muted: #b7cac4;
  --hf-sms-soft: #8ea49d;
  --hf-sms-green: #4be79a;
  --hf-sms-gold: #efbd62;
  --hf-sms-red: #f05e6f;
  display: none;
  min-width: 0;
  padding: 16px clamp(14px, 3vw, 26px) 28px;
  color: var(--hf-sms-ink);
  box-sizing: border-box;
}

.hf-sms-page * {
  box-sizing: border-box;
}

body.hf-sms-active .panel {
  display: none;
}

body.hf-sms-active .hf-sms-page {
  display: grid;
  gap: 12px;
}

.hf-sms-page__header,
.hf-sms-page__metric,
.hf-sms-subscriber {
  border: 1px solid var(--hf-sms-line);
  border-radius: 8px;
  background: var(--hf-sms-surface);
  box-shadow: inset 0 1px rgba(255, 255, 255, .05);
}

.hf-sms-page__header {
  display: grid;
  gap: 10px;
  padding: 16px;
}

.hf-sms-page__title-row {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

.hf-sms-page .eyebrow {
  color: var(--hf-sms-green);
}

.hf-sms-page__header h2 {
  margin: 0;
  color: var(--hf-sms-ink);
  font-size: clamp(1.25rem, 2.4vw, 1.7rem);
  line-height: 1.08;
}

.hf-sms-page__header p {
  max-width: 52ch;
  margin: 0;
  color: var(--hf-sms-muted);
  font-size: .98rem;
  line-height: 1.45;
}

.hf-sms-page__refresh {
  flex: 0 0 auto;
  min-height: 38px;
  border: 1px solid rgba(75, 231, 154, .4);
  border-radius: 8px;
  background: rgba(75, 231, 154, .12);
  color: #dffbed;
  font-weight: 800;
}

.hf-sms-page__summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
  gap: 8px;
}

.hf-sms-page__metric {
  display: grid;
  gap: 6px;
  min-height: 86px;
  padding: 14px;
}

.hf-sms-page__metric span {
  color: var(--hf-sms-muted);
  font-size: .82rem;
  font-weight: 800;
}

.hf-sms-page__metric strong {
  color: #e9f0ff;
  font-size: 1.42rem;
  line-height: 1;
}

.hf-sms-page__list {
  display: grid;
  gap: 10px;
}

.hf-sms-subscriber {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  padding: 14px;
  color: var(--hf-sms-ink);
  text-align: left;
}

.hf-sms-subscriber[data-needs-ack="true"] {
  border-color: rgba(239, 189, 98, .72);
  background: var(--hf-sms-surface-warn);
}

.hf-sms-subscriber__main {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.hf-sms-subscriber__phone {
  color: var(--hf-sms-ink);
  font-size: 1.05rem;
  font-weight: 800;
}

.hf-sms-subscriber__detail {
  color: var(--hf-sms-muted);
  font-size: .88rem;
}

.hf-sms-subscriber__badges {
  display: flex;
  align-items: start;
  justify-content: end;
  flex-wrap: wrap;
  gap: 6px;
}

.hf-sms-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  border: 1px solid var(--hf-sms-line);
  border-radius: 999px;
  padding: 3px 10px;
  background: rgba(255, 255, 255, .07);
  color: var(--hf-sms-ink);
  font-size: .76rem;
  font-weight: 800;
}

.hf-sms-pill--new {
  border-color: rgba(239, 189, 98, .75);
  background: rgba(239, 189, 98, .2);
  color: #ffe0a4;
}

.hf-sms-pill--subscribed {
  border-color: rgba(75, 231, 154, .46);
  background: rgba(75, 231, 154, .14);
  color: #dffbed;
}

.hf-sms-pill--unsubscribed {
  border-color: rgba(240, 94, 111, .46);
  background: rgba(240, 94, 111, .13);
  color: #ffdce1;
}

.hf-sms-page__error {
  border: 1px solid rgba(240, 94, 111, .6);
  border-radius: 8px;
  padding: 12px;
  background: rgba(240, 94, 111, .12);
  color: #ffdce1;
  font-weight: 800;
}

.hf-sms-page .empty-state {
  border: 1px solid var(--hf-sms-line);
  border-radius: 8px;
  background: var(--hf-sms-surface-soft);
  color: var(--hf-sms-muted);
}

@media (max-width: 640px) {
  body.hf-admin-sms-ready .tabbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hf-sms-page__title-row,
  .hf-sms-subscriber {
    display: grid;
    grid-template-columns: 1fr;
  }

  .hf-sms-page__refresh {
    width: 100%;
  }

  .hf-sms-subscriber__badges {
    justify-content: start;
  }
}