/*
  Breaking Barriers Training premium UI layer
  Applied as an override so the existing PHP/JS functionality remains intact.
*/
:root {
  --bbt-bg: #05070d;
  --bbt-bg-2: #0b1019;
  --bbt-card: rgba(15, 23, 42, 0.88);
  --bbt-card-2: rgba(17, 24, 39, 0.72);
  --bbt-line: rgba(255, 255, 255, 0.12);
  --bbt-line-strong: rgba(214, 176, 85, 0.34);
  --bbt-gold: #d6b055;
  --bbt-gold-2: #f2d98d;
  --bbt-ink: #f8fafc;
  --bbt-soft: #cbd5e1;
  --bbt-muted: #94a3b8;
  --bbt-blue: #5fb4ff;
  --bbt-green: #64d8ad;
  --bbt-red: #fb7185;
  --bbt-radius: 24px;
  --bbt-shadow: 0 26px 80px rgba(0, 0, 0, 0.38);
  --bbt-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

html {
  color: var(--bbt-ink);
  background: var(--bbt-bg);
  scroll-behavior: smooth;
}

body {
  color: var(--bbt-ink);
  background:
    radial-gradient(circle at 12% 2%, rgba(214, 176, 85, 0.20), transparent 30rem),
    radial-gradient(circle at 92% 9%, rgba(95, 180, 255, 0.16), transparent 31rem),
    linear-gradient(145deg, #05070d 0%, #0b1019 46%, #111827 100%);
  font-family: var(--bbt-font);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), transparent 72%);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(5, 7, 13, 0) 0%, rgba(5, 7, 13, 0.72) 100%);
}

.page-glow-one {
  background: rgba(214, 176, 85, 0.16);
}

.page-glow-two {
  background: rgba(95, 180, 255, 0.12);
}

.bbt-contact-strip {
  position: relative;
  z-index: 20;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(2, 6, 23, 0.84);
  color: var(--bbt-soft);
  font-size: 0.78rem;
  letter-spacing: 0.01em;
}

.bbt-contact-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 9px 20px;
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}

.bbt-contact-inner span:first-child {
  color: var(--bbt-gold-2);
  font-weight: 700;
}

.bbt-contact-inner a {
  color: var(--bbt-soft);
  text-decoration: none;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 19;
  height: auto;
  max-width: none;
  margin: 0;
  padding: 14px max(20px, calc((100vw - 1180px) / 2 + 20px));
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(7, 10, 18, 0.78);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.brand {
  color: var(--bbt-ink);
  letter-spacing: -0.025em;
}

.brand-mark {
  background: linear-gradient(145deg, #111827, #020617);
  border: 1px solid var(--bbt-line-strong);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
}

.brand-mark span {
  background: linear-gradient(180deg, var(--bbt-gold-2), var(--bbt-gold));
}

.marketing-nav a,
.admin-link {
  color: var(--bbt-soft);
}

.marketing-nav a:hover,
.site-footer a:hover,
.bbt-contact-inner a:hover,
.admin-link:hover {
  color: var(--bbt-gold-2);
}

.marketing-nav .nav-cta {
  color: #0b1019;
  background: linear-gradient(135deg, var(--bbt-gold-2), var(--bbt-gold));
  box-shadow: 0 14px 34px rgba(214, 176, 85, 0.24);
}

.app,
.admin-page {
  max-width: 1180px;
}

.hero {
  position: relative;
  padding-top: clamp(36px, 7vh, 82px);
}

.hero::before {
  content: "";
  position: absolute;
  inset: 18px -18px auto auto;
  width: min(42vw, 410px);
  height: min(42vw, 410px);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(214, 176, 85, 0.14), transparent 68%);
  filter: blur(5px);
  pointer-events: none;
}

.hero-copy,
.value-heading,
.pricing-heading,
.admin-heading,
.room-heading,
.customer-portal .account-banner {
  color: var(--bbt-ink);
}

.eyebrow {
  color: var(--bbt-gold-2);
  background: rgba(214, 176, 85, 0.11);
  border: 1px solid rgba(214, 176, 85, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.eyebrow::before {
  background: var(--bbt-gold);
  box-shadow: 0 0 0 4px rgba(214, 176, 85, 0.12);
}

h1,
h2,
h3 {
  color: inherit;
}

.hero-copy h1,
.admin-heading h1,
.room-heading h2 {
  color: var(--bbt-ink);
  text-wrap: balance;
}

.hero-copy h1 {
  max-width: 780px;
  font-size: clamp(2.7rem, 7vw, 5.45rem);
  line-height: 0.95;
  letter-spacing: -0.075em;
}

.lead,
.hero-copy .lead,
.value-heading .lead,
.pricing-heading .lead,
.admin-heading .lead,
.prompt,
.participant-count,
.microcopy,
.share-link,
.price-detail,
.plan-list,
.site-footer {
  color: var(--bbt-soft);
}

.hero-points span {
  color: var(--bbt-soft);
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.entry-card,
.value-card,
.price-card,
.conversion-banner,
.account-banner,
.account-room-form,
.panel,
.result-panel,
.join-card,
.admin-form,
.account-list-panel {
  border: 1px solid var(--bbt-line);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.045)),
    rgba(15, 23, 42, 0.82);
  box-shadow: var(--bbt-shadow);
  color: var(--bbt-ink);
}

.entry-card {
  position: relative;
  overflow: hidden;
  border-color: rgba(214, 176, 85, 0.24);
}

.entry-card::before {
  content: "Live participation layer";
  position: absolute;
  top: 15px;
  right: 16px;
  padding: 7px 10px;
  border-radius: 999px;
  color: #0b1019;
  background: var(--bbt-gold);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.tab-buttons {
  margin-top: 33px;
  background: rgba(2, 6, 23, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.09);
}

.tab-button {
  color: var(--bbt-muted);
}

.tab-button.active {
  color: #0b1019;
  background: linear-gradient(135deg, var(--bbt-gold-2), var(--bbt-gold));
  box-shadow: 0 12px 28px rgba(214, 176, 85, 0.20);
}

.field label,
.choice-fieldset legend,
.rating-fieldset legend,
.board-text-editor label,
.toggle-setting,
.question-body,
.feedback-list p,
.form-responses p,
.price-card h3,
.price-card .price,
.plan-name,
.result-label span,
.account-list article strong,
.activity-grid strong,
.value-card h3 {
  color: var(--bbt-ink);
}

.field input,
.field textarea,
.field select,
.board-text-editor input {
  color: #0f172a;
  border-color: rgba(15, 23, 42, 0.10);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.80);
}

.field input::placeholder,
.field textarea::placeholder,
.board-text-editor input::placeholder {
  color: #64748b;
}

.field input:focus,
.field textarea:focus,
.field select:focus,
.board-text-editor input:focus {
  border-color: var(--bbt-gold);
  box-shadow: 0 0 0 4px rgba(214, 176, 85, 0.22);
}

.primary-button,
a.primary-button {
  color: #0b1019;
  background: linear-gradient(135deg, var(--bbt-gold-2), var(--bbt-gold));
  box-shadow: 0 16px 34px rgba(214, 176, 85, 0.20);
}

.primary-button:hover,
a.primary-button:hover {
  background: linear-gradient(135deg, #ffe7a3, #e0b84f);
}

.secondary-button,
a.secondary-button,
.quiet-button,
.board-tool,
.board-command,
.tiny-action,
.mode-option,
.vote-button {
  color: var(--bbt-soft);
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.07);
}

.secondary-button:hover,
a.secondary-button:hover,
.quiet-button:hover,
.board-tool:hover,
.board-command:hover,
.tiny-action:hover,
.mode-option:hover {
  color: var(--bbt-gold-2);
  border-color: rgba(214, 176, 85, 0.42);
  background: rgba(214, 176, 85, 0.10);
}

.danger-button,
.board-command.alert,
.tiny-action.alert {
  color: #fecdd3;
  border: 1px solid rgba(251, 113, 133, 0.26);
  background: rgba(251, 113, 133, 0.12);
}

.value-card,
.activity-grid article,
.price-card,
.metrics-grid article,
.feedback-list article,
.form-responses article,
.question,
.account-list article {
  border-color: rgba(255, 255, 255, 0.11);
  background: rgba(255, 255, 255, 0.055);
  color: var(--bbt-ink);
}

.value-number,
.plan-name,
.activity-grid strong,
.code-pill,
.live-response-line,
.survey-average,
.result-choice.correct .result-label span {
  color: var(--bbt-gold-2);
}

.value-card p,
.activity-grid p,
.price-detail,
.account-list p,
.account-list small,
.metrics-grid span,
.result-label strong,
.question-meta,
.feedback-list p,
.form-responses p,
.empty-state,
.cloud-word,
.setup-note,
.board-colour-picker,
.board-width-picker {
  color: var(--bbt-soft);
}

.report-callout,
.conversion-banner {
  border-color: rgba(214, 176, 85, 0.26);
  background:
    radial-gradient(circle at 92% 18%, rgba(214, 176, 85, 0.17), transparent 20rem),
    linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(2, 6, 23, 0.92));
}

.report-callout span,
.popular {
  color: #0b1019;
  background: linear-gradient(135deg, var(--bbt-gold-2), var(--bbt-gold));
}

.price-card.featured {
  border-color: rgba(214, 176, 85, 0.64);
  box-shadow: 0 24px 72px rgba(214, 176, 85, 0.15);
}

.price {
  color: var(--bbt-ink);
}

.plan-list li::before,
.participant-count::before,
.result-track span,
.vote-button.active,
.mode-option.active,
.board-tool.active,
.board-command.active {
  background: var(--bbt-gold);
}

.plan-list li::before {
  box-shadow: 0 0 0 4px rgba(214, 176, 85, 0.11);
}

.code-pill,
.live-response-line {
  border: 1px solid rgba(214, 176, 85, 0.24);
  background: rgba(214, 176, 85, 0.10);
}

.choice-option,
.rating-options span {
  color: var(--bbt-ink);
  border-color: rgba(255, 255, 255, 0.13);
  background: rgba(255, 255, 255, 0.07);
}

.choice-option span {
  color: var(--bbt-ink);
  line-height: 1.45;
}

.choice-option:has(input:checked),
.rating-options input:checked + span,
.mode-option.active,
.vote-button.active,
.board-tool.active,
.board-command.active {
  color: #0b1019;
  border-color: rgba(214, 176, 85, 0.62);
  background: linear-gradient(135deg, var(--bbt-gold-2), var(--bbt-gold));
}

.choice-option:has(input:checked) span,
.rating-options input:checked + span {
  color: #0b1019;
  font-weight: 760;
}

.choice-option input,
.rating-options input,
.toggle-setting input {
  accent-color: var(--bbt-gold);
}

.result-track {
  background: rgba(255, 255, 255, 0.10);
}

.result-choice.correct .result-track span {
  background: linear-gradient(90deg, var(--bbt-green), var(--bbt-gold));
}

.whiteboard-panel.expanded {
  background: #05070d;
}

.board-stage,
.whiteboard-canvas,
.qr-code {
  border-color: rgba(255, 255, 255, 0.16);
  background: #ffffff;
}

.board-color {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.96);
}

.board-text-editor,
.setup-note,
.toggle-setting {
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.06);
}

.question.answered {
  opacity: 0.66;
}

.cloud-word:nth-child(3n + 2) {
  color: var(--bbt-gold-2);
}

.cloud-word:nth-child(3n) {
  color: var(--bbt-blue);
}

.room-code-large {
  color: var(--bbt-gold-2);
  text-shadow: 0 12px 34px rgba(214, 176, 85, 0.18);
}

.share-grid {
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.05);
}

.metrics-grid strong {
  color: var(--bbt-ink);
}

.toast {
  color: #0b1019;
  background: linear-gradient(135deg, var(--bbt-gold-2), var(--bbt-gold));
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.34);
}

.site-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  margin-top: 24px;
}

.site-footer a {
  color: var(--bbt-soft);
}

.admin-heading {
  padding-top: 20px;
}

.admin-heading h1 {
  max-width: 780px;
}

@media (min-width: 780px) {
  .hero {
    grid-template-columns: minmax(420px, 1fr) minmax(350px, 420px);
  }

  .entry-card {
    transform: translateY(8px);
  }

  .value-card:nth-child(2),
  .price-card.featured {
    transform: translateY(-8px);
  }
}

@media (max-width: 779px) {
  .bbt-contact-inner {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .topbar {
    position: relative;
    padding: 12px 14px;
  }

  .hero-copy h1 {
    font-size: clamp(2.42rem, 13vw, 4rem);
  }

  .entry-card::before {
    position: static;
    display: inline-flex;
    margin-bottom: 14px;
  }

  .tab-buttons {
    margin-top: 0;
  }

  .value-card:nth-child(2),
  .price-card.featured {
    transform: none;
  }
}

@media (max-width: 620px) {
  .brand > span:last-child {
    max-width: 180px;
  }

  .marketing-nav .nav-cta {
    color: #0b1019;
  }
}

@media print {
  html,
  body {
    color: #0f172a;
    background: #ffffff !important;
  }

  .panel,
  .result-panel,
  .metrics-grid article,
  .question,
  .feedback-list article,
  .form-responses article {
    color: #0f172a;
    border: 1px solid #d9e2ea;
    background: #ffffff;
    box-shadow: none;
  }

  .result-label span,
  .question-body,
  .feedback-list p,
  .form-responses p,
  .metrics-grid strong {
    color: #0f172a;
  }
}