@font-face {
  font-family: "TMobileTeleneo";
  src: url("../fonts/tmobile-teleneo-variable-upright.woff2") format("woff2-variations");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "TMobileTeleneo";
  src: url("../fonts/tmobile-teleneo-medium.woff2") format("woff2"),
       url("../fonts/tmobile-teleneo-medium.woff") format("woff");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "TMobileTeleneo";
  src: url("../fonts/tmobile-teleneo-bold.woff2") format("woff2"),
       url("../fonts/tmobile-teleneo-bold.woff") format("woff");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "NexaText";
  src: url("../fonts/Nexa-Text-W05-Extra-Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 800;
  font-display: swap;
}

:root {
  /* T-Mobile brand palette */
  --tm-magenta: #ff009f;
  --tm-magenta-rgb: 255, 0, 159;
  --tm-magenta-light: #f063c1;
  --tm-pink: #f7c1ea;
  --tm-pink-light: #ffd2fa;
  --tm-lavender: #f2def0;

  --bs-primary: var(--tm-magenta);
  --bs-primary-rgb: var(--tm-magenta-rgb);
  --bs-secondary: #767676;
  --bs-secondary-rgb: 118, 118, 118;
  --bs-success: #1e8f51;
  --bs-success-rgb: 30, 143, 81;
  --bs-danger: #d13a3a;
  --bs-danger-rgb: 209, 58, 58;
  --bs-warning: #d8a930;
  --bs-warning-rgb: 216, 169, 48;
  --bs-info: #3e89b7;
  --bs-info-rgb: 62, 137, 183;

  --db-font-body: "TMobileTeleneo", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --db-font-display: "TMobileTeleneo", "Segoe UI", sans-serif;

  --db-ink: #1a0e17;
  --db-ink-soft: #4a2e42;
  --db-paper: var(--tm-lavender);
  --db-line: #e6c4dd;
}

html,
body {
  min-height: 100%;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  color: var(--db-ink);
  font-family: var(--db-font-body);
  font-weight: 500;
  background:
    radial-gradient(circle at 15% -10%, var(--tm-pink-light) 0, transparent 45%),
    radial-gradient(circle at 100% 0%, var(--tm-pink) 0, transparent 38%),
    linear-gradient(180deg, #ffffff 0%, var(--db-paper) 100%);
}

main.container {
  flex: 1;
}

h1,
h2,
h3,
h4,
h5,
h6,
.navbar-brand,
.btn,
.card-header,
.display-1,
.display-2,
.display-3,
.display-4,
.display-5,
.display-6 {
  font-family: var(--db-font-display);
  font-weight: 700;
  letter-spacing: 0.02em;
}

a {
  color: var(--tm-magenta);
  text-underline-offset: 0.16rem;
}

a:hover {
  color: #c40080;
}

.site-nav {
  background: rgba(255, 255, 255, 0.94);
  border-bottom: 1px solid var(--db-line);
  backdrop-filter: blur(8px);
}

.navbar .navbar-brand {
  font-family: "NexaText", var(--db-font-display);
  color: var(--tm-magenta);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.95rem;
}

.brand-logo {
  width: auto;
  height: 1.9rem;
  object-fit: contain;
}

.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  background: #fff;
  border-radius: 0.45rem;
  box-shadow: inset 0 0 0 1px rgba(255, 0, 159, 0.15);
  padding: 0.2rem;
}

.hero-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 7rem;
  height: 7rem;
  border-radius: 1.2rem;
  background: #fff;
  box-shadow: 0 18px 40px rgba(255, 0, 159, 0.18);
  padding: 0.75rem;
}

.hero-mark-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.nav-link {
  color: var(--db-ink-soft);
}

.nav-link:hover,
.nav-link:focus,
.nav-link.active {
  color: var(--tm-magenta);
}

.dropdown-menu {
  border-color: var(--db-line);
  box-shadow: 0 10px 24px rgba(255, 0, 159, 0.08);
}

.card,
.list-group-item,
.table,
.accordion-item {
  border-color: var(--db-line);
}

.card {
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 14px 26px rgba(255, 0, 159, 0.05);
}

.card-header {
  background: #fff;
}

.btn {
  border-radius: 0.45rem;
  text-transform: uppercase;
  font-size: 0.86rem;
  letter-spacing: 0.06em;
}

.btn-primary {
  --bs-btn-bg: var(--tm-magenta);
  --bs-btn-border-color: var(--tm-magenta);
  --bs-btn-hover-bg: #c40080;
  --bs-btn-hover-border-color: #c40080;
  --bs-btn-active-bg: #a30069;
  --bs-btn-active-border-color: #a30069;
  --bs-btn-disabled-bg: #e39ac9;
  --bs-btn-disabled-border-color: #e39ac9;
}

.btn-outline-primary {
  --bs-btn-color: var(--tm-magenta);
  --bs-btn-border-color: var(--tm-magenta);
  --bs-btn-hover-bg: var(--tm-magenta);
  --bs-btn-hover-border-color: var(--tm-magenta);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #c40080;
  --bs-btn-active-border-color: #c40080;
  --bs-btn-active-color: #fff;
}

.btn-success {
  --bs-btn-bg: #1e8f51;
  --bs-btn-border-color: #1e8f51;
  --bs-btn-hover-bg: #187944;
  --bs-btn-hover-border-color: #187944;
}

.btn-danger {
  --bs-btn-bg: #d13a3a;
  --bs-btn-border-color: #d13a3a;
  --bs-btn-hover-bg: #b72f2f;
  --bs-btn-hover-border-color: #b72f2f;
}

.badge {
  letter-spacing: 0.04em;
}

.bg-primary,
.text-bg-primary {
  background-color: var(--tm-magenta) !important;
}

.text-primary {
  color: var(--tm-magenta) !important;
}

.form-control,
.form-select {
  border-color: #d9b6cf;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--tm-magenta);
  box-shadow: 0 0 0 0.2rem rgba(var(--tm-magenta-rgb), 0.18);
}

.alert {
  border-radius: 0.4rem;
  border-width: 1px;
}

.alert-secondary,
.alert-light {
  color: #4a2e42;
  background: var(--tm-lavender);
  border-color: var(--db-line);
}

.site-footer {
  border-top: 1px solid var(--tm-magenta);
  background: #1a0e17;
  color: #d9b6cf;
}

.site-footer a {
  color: var(--tm-pink-light);
}

.font-credit {
  font-size: 0.69rem;
  opacity: 0.72;
  letter-spacing: 0.02em;
}

.font-monospace {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}

#qr-reader {
  border-radius: 0.5rem;
  overflow: hidden;
  background: #000;
}

#qr-reader video {
  width: 100% !important;
  height: auto !important;
}

main.container > * {
  opacity: 0;
  animation: db-fade-up 0.45s ease-out forwards;
}

main.container > *:nth-child(2) {
  animation-delay: 0.05s;
}

main.container > *:nth-child(3) {
  animation-delay: 0.1s;
}

main.container > *:nth-child(4) {
  animation-delay: 0.15s;
}

@keyframes db-fade-up {
  from {
    opacity: 0;
    transform: translateY(7px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  main.container > * {
    opacity: 1;
    animation: none;
  }
}

@media (max-width: 575.98px) {
  #btn-start,
  #btn-stop {
    font-size: 1.1rem;
    padding: 0.75rem;
  }

  .navbar .navbar-brand {
    font-size: 0.8rem;
  }

  .brand-logo {
    height: 1.5rem;
  }

  .brand-mark {
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 0.4rem;
  }

  .hero-mark {
    width: 5.5rem;
    height: 5.5rem;
  }
}

@media (max-width: 767.98px) {
  .list-group-item.active {
    font-weight: 600;
  }
}

.badge-pill {
  border-radius: 50rem;
}