html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* Client sign-in page (Views/Access/Login.cshtml), the site's "/" front door.
   Live CSS panel over a background photo (kingcalibre-home-bg.png) rather than
   form fields hand-positioned over a pre-baked artwork — every custom property
   below is scoped to .kchome-hero instead of :root so nothing leaks into the
   rest of the site's stylesheet. */
body:has(.kchome-hero) {
  background: #07020d;
  margin-bottom: 0;
}

.kchome-hero {
  --kchome-card: rgba(8, 8, 18, 0.93);
  --kchome-text: #f7f2ff;
  --kchome-pink: #ff2daa;
  --kchome-purple: #8c2cff;

  position: relative;
  width: 100vw;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 calc(-50vw + 50%);

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: clamp(18px, 2.3vw, 34px);
  padding: clamp(28px, 5vw, 72px) 20px 26px;

  background: url("/images/kingcalibre-home-bg.png") center center / cover no-repeat;
  color: var(--kchome-text);
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  isolation: isolate;
}

.kchome-hero input,
.kchome-hero button {
  font: inherit;
}

.kchome-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at center, rgba(7, 3, 16, 0.02) 0%, rgba(7, 3, 16, 0.10) 48%, rgba(7, 3, 16, 0.48) 100%),
    linear-gradient(to bottom, rgba(3, 1, 10, 0.12), rgba(3, 1, 10, 0.25));
  z-index: -1;
}

.kchome-panel-wrap {
  width: min(92vw, 390px);
  z-index: 2;
}

.kchome-panel {
  position: relative;
  padding: 28px 26px 24px;
  border: 1px solid rgba(136, 66, 206, 0.22);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(10, 9, 22, 0.96), rgba(8, 8, 17, 0.95));
  box-shadow:
    0 22px 70px rgba(0, 0, 0, 0.55),
    0 0 55px rgba(149, 35, 255, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(12px);
}

.kchome-crown {
  text-align: center;
  font-size: 31px;
  line-height: 1;
  margin-bottom: 14px;
  color: #d63cff;
  text-shadow: 0 0 18px rgba(214, 60, 255, .7);
}

.kchome-title-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  margin-bottom: 34px;
}

.kchome-title-row span {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .26));
}

.kchome-title-row span:last-child {
  background: linear-gradient(90deg, rgba(255, 255, 255, .26), transparent);
}

.kchome-title-row h1 {
  margin: 0;
  font-size: 11px;
  letter-spacing: .24em;
  font-weight: 700;
  white-space: nowrap;
}

.kchome-form label {
  display: inline-block;
  margin-bottom: 10px;
  font-size: 11px;
  letter-spacing: .13em;
  font-weight: 800;
  color: #d44aa8;
}

.kchome-input-shell {
  position: relative;
}

.kchome-key-icon {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  filter: saturate(1.25);
}

.kchome-input {
  width: 100%;
  height: 50px;
  padding: 0 16px 0 44px;
  border-radius: 9px;
  border: 1px solid rgba(130, 74, 205, 0.62);
  color: white;
  background: rgba(17, 16, 31, .96);
  outline: none;
  transition: .2s ease;
}

.kchome-input::placeholder {
  color: rgba(255, 255, 255, .68);
}

.kchome-input:focus {
  border-color: #d52fff;
  box-shadow: 0 0 0 3px rgba(213, 47, 255, .12), 0 0 24px rgba(126, 38, 255, .18);
}

.kchome-submit {
  width: 100%;
  height: 58px;
  margin-top: 22px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  border: 0;
  border-radius: 9px;
  color: white;
  background: linear-gradient(90deg, var(--kchome-pink), #cf2ce9 50%, var(--kchome-purple));
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(178, 31, 255, .22);
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}

.kchome-submit:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
  box-shadow: 0 14px 32px rgba(178, 31, 255, .33);
}

.kchome-submit:active {
  transform: translateY(0);
}

/* Hidden until the validation summary tag helper adds "validation-summary-errors"
   (required field left empty, or a rejected key) — see Login.cshtml. */
.kchome-message {
  display: none;
  margin: 10px 0 0;
  text-align: center;
  font-size: 12px;
  color: #ff8fb3;
}

.kchome-message.validation-summary-errors {
  display: block;
}

.kchome-message ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.kchome-buy-link {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 7px;
  margin-top: 13px;
  color: #dfbf58;
  font-size: 11px;
  text-decoration: none;
}

.kchome-buy-link:link,
.kchome-buy-link:visited {
  color: #dfbf58;
}

.kchome-buy-link strong {
  text-decoration: underline;
}

.kchome-feature-strip {
  width: min(92vw, 760px);
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.kchome-feature-strip article {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(7, 6, 20, .38);
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 11px;
  backdrop-filter: blur(8px);
}

.kchome-feature-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: white;
  background: linear-gradient(135deg, rgba(65, 211, 255, .9), rgba(155, 61, 255, .9));
}

.kchome-feature-strip strong {
  display: block;
  margin-bottom: 3px;
  font-size: 11px;
  letter-spacing: .08em;
  color: #cb75ff;
}

.kchome-feature-strip span {
  display: block;
  font-size: 9px;
  line-height: 1.35;
  color: #f3edfa;
}

.kchome-footer {
  z-index: 2;
  text-align: center;
  font-size: 10px;
  color: rgba(255, 255, 255, .8);
  text-shadow: 0 2px 8px rgba(0, 0, 0, .7);
}

@media (max-width: 850px) {
  .kchome-hero {
    justify-content: center;
    background-position: 54% center;
    padding-top: 34px;
  }

  .kchome-feature-strip {
    grid-template-columns: 1fr;
    max-width: 420px;
  }

  .kchome-feature-strip article {
    padding: 9px 12px;
  }
}

@media (max-width: 560px) {
  .kchome-hero {
    min-height: 100vh;
    min-height: 100dvh;
    background-position: 60% center;
    padding: 22px 14px 18px;
  }

  .kchome-panel-wrap {
    width: min(94vw, 380px);
  }

  .kchome-panel {
    padding: 24px 18px 20px;
    border-radius: 14px;
  }

  .kchome-title-row {
    gap: 8px;
    margin-bottom: 26px;
  }

  .kchome-title-row h1 {
    font-size: 9px;
    letter-spacing: .16em;
  }

  .kchome-submit {
    height: 54px;
  }

  .kchome-feature-strip {
    width: min(94vw, 380px);
  }

  .kchome-footer {
    max-width: 94vw;
    line-height: 1.4;
  }
}

@media (max-height: 760px) and (min-width: 700px) {
  .kchome-hero {
    justify-content: flex-start;
    padding-top: 24px;
    gap: 14px;
  }

  .kchome-panel {
    padding-top: 22px;
    padding-bottom: 18px;
  }

  .kchome-title-row {
    margin-bottom: 22px;
  }

  .kchome-feature-strip article {
    padding: 8px 10px;
  }
}

/* Views/Access/Expired.cshtml — "servicio caducado" page shown instead of the
   sign-in form once every one of a client's posts has run out of subscription
   (see AccessController + IApiKeyService.HasExpiredLicenseAsync). Ported from
   the standalone kingcalibre-page-v2 prototype (index.html + styles.css);
   kcexpired- prefixed and scoped to .kcexpired-hero the same way .kchome-hero
   is, so neither page's rules can leak into the other. */
body:has(.kcexpired-hero) {
  background: #07020d;
  margin-bottom: 0;
}

.kcexpired-hero {
  --kcexpired-purple: #bd40ff;
  --kcexpired-pink: #ff2bbf;
  --kcexpired-red: #ff3158;
  --kcexpired-text: #f7f4fa;
  --kcexpired-muted: #b6aec0;
  --kcexpired-card: rgba(6, 5, 14, .93);

  width: 100vw;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 calc(-50vw + 50%);
  display: flex;
  justify-content: center;

  color: var(--kcexpired-text);
  font-family: "Montserrat", sans-serif;
  background:
    linear-gradient(rgba(5, 3, 15, .30), rgba(3, 2, 10, .72)),
    radial-gradient(circle at 50% 18%, rgba(104, 21, 154, .35), transparent 36%),
    url("/images/kingcalibre-login-bg.jpeg") center / cover fixed no-repeat;
}

.kcexpired-page {
  position: relative;
  z-index: 1;
  width: min(1080px, calc(100% - 28px));
  margin: 0 auto;
  padding: 16px 0 24px;
}

.kcexpired-brand { text-align: center; margin-bottom: 16px; }
.kcexpired-crown {
  color: #d77bff;
  font-size: 3.2rem;
  line-height: .58;
  text-shadow: 0 0 15px #721bd0, 0 0 30px rgba(182, 63, 255, .3);
}
.kcexpired-brand h1 {
  margin: 8px 0 11px;
  font-family: "Oswald", sans-serif;
  font-style: italic;
  font-size: clamp(3.2rem, 8vw, 5.7rem);
  line-height: .82;
  letter-spacing: -4px;
  color: white;
  text-shadow: 3px 4px 0 #111, 0 0 14px rgba(255, 255, 255, .2), 0 0 18px rgba(165, 49, 255, .3);
}
.kcexpired-subtitle {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  font-weight: 600;
  letter-spacing: .36em;
  font-size: clamp(.70rem, 1.6vw, .98rem);
}
.kcexpired-subtitle span {
  width: 36px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #c73aff);
  box-shadow: 0 0 8px rgba(203, 58, 255, .8);
}
.kcexpired-subtitle span:last-child { transform: scaleX(-1); }

.kcexpired-card {
  border: 1.5px solid #7441a5;
  border-radius: 22px;
  background: var(--kcexpired-card);
  box-shadow: 0 0 28px rgba(104, 25, 153, .14), inset 0 0 42px rgba(133, 34, 177, .025);
  padding: 20px 34px 0;
  backdrop-filter: blur(3px);
}
.kcexpired-alert-top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 22px;
  align-items: center;
  width: min(740px, 86%);
  margin: 0 auto 8px;
}
.kcexpired-line {
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--kcexpired-red) 52%, var(--kcexpired-red));
  box-shadow: 0 0 9px rgba(255, 49, 88, .8);
}
.kcexpired-line:last-child { transform: scaleX(-1); }
.kcexpired-triangle {
  width: 62px;
  height: 56px;
  display: grid;
  place-items: center;
  color: #ff526b;
  font-weight: 800;
  font-size: 2rem;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  background: linear-gradient(180deg, rgba(255, 83, 107, .17), rgba(255, 49, 88, .08));
  border: 2px solid var(--kcexpired-red);
  filter: drop-shadow(0 0 8px rgba(255, 49, 88, .7));
}
.kcexpired-card h2 {
  margin: 0;
  text-align: center;
  font-family: "Oswald", sans-serif;
  font-size: clamp(2.15rem, 4.3vw, 3.2rem);
  letter-spacing: .025em;
}
.kcexpired-card h2 strong { color: var(--kcexpired-red); }
.kcexpired-status-copy { text-align: center; margin: 0 0 12px; font-size: 1.05rem; }

.kcexpired-panel {
  border: 1px solid rgba(255, 67, 98, .34);
  border-radius: 13px;
  background: rgba(10, 8, 17, .63);
}
.kcexpired-main-info {
  min-height: 150px;
  padding: 20px 24px;
  display: grid;
  grid-template-columns: 56px 1fr 150px;
  gap: 18px;
  align-items: center;
}
.kcexpired-copy p { margin: 0 0 14px; font-size: .95rem; line-height: 1.45; }
.kcexpired-copy p:last-child { margin-bottom: 0; }
.kcexpired-copy b { color: #ff4565; }

.kcexpired-clock {
  width: 46px;
  height: 46px;
  border: 3px solid var(--kcexpired-red);
  border-radius: 50%;
  position: relative;
  box-shadow: 0 0 11px rgba(255, 49, 88, .35);
}
.kcexpired-clock::before {
  content: "";
  position: absolute;
  width: 11px;
  height: 11px;
  border: 3px solid var(--kcexpired-red);
  border-left: 0;
  border-bottom: 0;
  right: -3px;
  top: 6px;
  transform: rotate(42deg);
}
.kcexpired-hand { position: absolute; left: 50%; top: 50%; background: var(--kcexpired-red); transform-origin: left center; }
.kcexpired-hand--one { width: 13px; height: 3px; transform: rotate(0deg); }
.kcexpired-hand--two { width: 11px; height: 3px; transform: rotate(-90deg); }

.kcexpired-calendar-trash { position: relative; width: 145px; height: 100px; justify-self: end; color: var(--kcexpired-red); }
.kcexpired-calendar { position: absolute; left: 0; top: 4px; width: 92px; height: 78px; border: 4px solid currentColor; border-radius: 12px; }
.kcexpired-calendar::before { content: ""; position: absolute; left: 0; right: 0; top: 20px; border-top: 3px solid currentColor; }
.kcexpired-ring { position: absolute; top: -11px; width: 10px; height: 20px; border: 3px solid currentColor; border-radius: 7px; background: #0b0811; }
.kcexpired-ring--left { left: 17px; }
.kcexpired-ring--right { right: 17px; }
.kcexpired-x { position: absolute; inset: 23px 0 0; display: grid; place-items: center; font-size: 3rem; font-weight: 200; }
.kcexpired-trash { position: absolute; width: 46px; height: 55px; right: 4px; bottom: 5px; border: 4px solid currentColor; border-top: 0; border-radius: 0 0 8px 8px; transform: skewX(-3deg); }
.kcexpired-trash::before { content: ""; position: absolute; left: -8px; right: -8px; top: -9px; border-top: 4px solid currentColor; }
.kcexpired-trash::after { content: ""; position: absolute; width: 18px; left: 10px; top: -18px; border-top: 4px solid currentColor; border-radius: 5px; }
.kcexpired-trash i { position: absolute; top: 10px; bottom: 8px; width: 3px; background: currentColor; }
.kcexpired-trash i:nth-child(2) { left: 12px; }
.kcexpired-trash i:nth-child(3) { right: 12px; }

.kcexpired-reminder {
  margin-top: 12px;
  min-height: 86px;
  padding: 13px 25px;
  display: flex;
  gap: 24px;
  align-items: center;
  background: linear-gradient(90deg, rgba(79, 4, 21, .32), rgba(54, 3, 18, .16));
}
.kcexpired-reminder-icon {
  width: 52px;
  height: 46px;
  display: grid;
  place-items: end center;
  padding-bottom: 4px;
  color: #140813;
  font-size: 1.5rem;
  font-weight: 800;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  background: #ff4263;
}
.kcexpired-reminder h3, .kcexpired-support-copy h3 { margin: 0 0 3px; font-family: "Oswald", sans-serif; letter-spacing: .03em; }
.kcexpired-reminder h3 { color: #ff4164; font-size: 1rem; }
.kcexpired-reminder p, .kcexpired-support-copy p { margin: 0; line-height: 1.42; font-size: .9rem; }

.kcexpired-support {
  margin-top: 12px;
  padding: 17px 24px;
  display: grid;
  grid-template-columns: 74px 1fr minmax(310px, 390px);
  gap: 18px;
  align-items: center;
  border-color: rgba(150, 86, 217, .40);
}
.kcexpired-headset { width: 58px; height: 48px; border: 5px solid #b843ff; border-bottom: 0; border-radius: 32px 32px 0 0; position: relative; }
.kcexpired-headset::before, .kcexpired-headset::after { content: ""; position: absolute; width: 12px; height: 25px; border: 5px solid #b843ff; top: 22px; border-radius: 8px; background: #0d0918; }
.kcexpired-headset::before { left: -11px; }
.kcexpired-headset::after { right: -11px; }
.kcexpired-headset span { position: absolute; width: 25px; height: 14px; right: -2px; bottom: -27px; border-bottom: 5px solid #b843ff; border-right: 5px solid #b843ff; border-radius: 0 0 15px 0; }
.kcexpired-support-copy h3 { color: #bc47ff; font-size: 1.25rem; }
.kcexpired-support-btn {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  border-radius: 10px;
  color: white;
  text-decoration: none;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 1.12rem;
  background: linear-gradient(100deg, #ff2cb7, #8f35ff);
  box-shadow: 0 0 24px rgba(192, 50, 255, .30), inset 0 0 10px rgba(255, 255, 255, .11);
  transition: .2s ease;
}
.kcexpired-support-btn:hover { transform: translateY(-2px); filter: brightness(1.07); }
.kcexpired-whatsapp { font-size: 2.1rem; }
.kcexpired-redirect-note { text-align: center; color: #9a769f; font-size: .82rem; margin: 9px 0 10px; }

.kcexpired-benefits {
  border-color: rgba(121, 70, 176, .30);
  border-bottom: 0;
  border-radius: 13px 13px 0 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  overflow: hidden;
}
.kcexpired-benefit {
  min-height: 86px;
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 12px;
  align-items: center;
  padding: 14px 14px;
  position: relative;
}
.kcexpired-benefit + .kcexpired-benefit::before { content: ""; position: absolute; left: 0; top: 15px; bottom: 15px; width: 1px; background: rgba(131, 92, 168, .40); }
.kcexpired-benefit-icon { color: #bd40ff; font-size: 2rem; text-shadow: 0 0 9px rgba(189, 64, 255, .35); text-align: center; }
.kcexpired-benefit h4 { margin: 0 0 5px; color: #c949ff; font-family: "Oswald", sans-serif; font-size: .78rem; letter-spacing: .02em; }
.kcexpired-benefit p { margin: 0; color: #b4acbc; font-size: .62rem; line-height: 1.35; }

.kcexpired-footer { text-align: center; padding: 12px 0 0; }
.kcexpired-footer-brand { color: #c33fff; font-size: 1.35rem; text-shadow: 0 0 10px #7210ac; }
.kcexpired-footer-tagline { margin: 7px 0 6px; letter-spacing: .30em; font-size: .69rem; color: #c2bac6; }
.kcexpired-footer small { color: #88808d; font-size: .62rem; }

@media (max-width: 930px) {
  .kcexpired-page { width: min(780px, calc(100% - 20px)); }
  .kcexpired-card { padding: 20px 22px 0; }
  .kcexpired-main-info { grid-template-columns: 54px 1fr; }
  .kcexpired-calendar-trash { display: none; }
  .kcexpired-support { grid-template-columns: 65px 1fr; }
  .kcexpired-support-btn { grid-column: 1 / -1; }
  .kcexpired-benefits { grid-template-columns: repeat(2, 1fr); }
  .kcexpired-benefit:nth-child(3)::before { display: none; }
  .kcexpired-benefit:nth-child(n+3) { border-top: 1px solid rgba(131, 92, 168, .30); }
}

@media (max-width: 600px) {
  .kcexpired-hero {
    background-attachment: scroll;
    background-position: center top;
    background-image:
      linear-gradient(rgba(5, 3, 15, .30), rgba(3, 2, 10, .72)),
      radial-gradient(circle at 50% 18%, rgba(104, 21, 154, .35), transparent 36%),
      url("/images/kingcalibre-login-bg-mobile.jpeg");
  }
  .kcexpired-page { width: calc(100% - 14px); padding-top: 12px; }
  .kcexpired-crown { font-size: 2.45rem; }
  .kcexpired-brand h1 { letter-spacing: -2px; margin-top: 7px; }
  .kcexpired-subtitle { letter-spacing: .20em; gap: 9px; }
  .kcexpired-subtitle span { width: 22px; }
  .kcexpired-card { padding: 18px 12px 0; border-radius: 18px; }
  .kcexpired-alert-top { width: 94%; gap: 10px; }
  .kcexpired-triangle { width: 47px; height: 42px; font-size: 1.5rem; }
  .kcexpired-status-copy { font-size: .92rem; }
  .kcexpired-main-info { display: block; padding: 18px 15px; }
  .kcexpired-clock { margin-bottom: 13px; }
  .kcexpired-copy p, .kcexpired-reminder p, .kcexpired-support-copy p { font-size: .84rem; }
  .kcexpired-copy br, .kcexpired-reminder br, .kcexpired-support-copy br, .kcexpired-benefit br { display: none; }
  .kcexpired-reminder { align-items: flex-start; gap: 13px; padding: 14px; }
  .kcexpired-reminder-icon { flex: 0 0 43px; width: 43px; height: 39px; font-size: 1.2rem; }
  .kcexpired-support { display: block; padding: 16px; }
  .kcexpired-headset { margin: 2px 0 13px 8px; transform: scale(.85); transform-origin: left center; }
  .kcexpired-support-btn { margin-top: 16px; min-height: 58px; font-size: .98rem; }
  .kcexpired-benefits { grid-template-columns: 1fr; }
  .kcexpired-benefit { min-height: 72px; }
  .kcexpired-benefit + .kcexpired-benefit::before { left: 14px; right: 14px; top: 0; bottom: auto; width: auto; height: 1px; }
  .kcexpired-benefit:nth-child(n+3) { border-top: 0; }
  .kcexpired-footer-tagline { letter-spacing: .14em; font-size: .58rem; }
}

/* Views/Access/AcceptTerms.cshtml — one-time Terms and Conditions gate shown
   the first time a client's key passes validation. Ported from the standalone
   kingcalibre-terms-page prototype (index.html + styles.css); kcterms-
   prefixed and scoped to .kcterms-hero the same way .kchome-hero and
   .kcexpired-hero are. The prototype's checkbox was a static preview with no
   submit action, so .kcterms-submit/.kcterms-message are new here, not ported
   — the rest is a close copy of the prototype's own dark/purple styling
   rather than the kchome- palette, since this page was designed as its own
   look. The prototype's checkbox+"fake box" pair relied on `+` (adjacent
   sibling); asp-for on a bool auto-emits a hidden fallback input between the
   two here, so `~` (general sibling) is used instead — see AcceptTerms.cshtml. */
body:has(.kcterms-hero) {
  background: #04040d;
  margin-bottom: 0;
  /* page-styles.css pins `.loginpage body { height: 100% }`, which _AccessLayout
     puts on every page here. Left alone it caps the body at the viewport while
     the card grows past it, so it is released back to auto and min-height does
     the work instead. */
  height: auto;
  min-height: 100vh;
  min-height: 100dvh;
  /* Vertical scrolling stays available on purpose — see the sizing note on
     .kcterms-shell. Only the horizontal axis is pinned, because .kcterms-hero
     is a full-bleed 100vw block and a scrollbar's width would otherwise make
     it overflow its own page. */
  overflow-x: hidden;
}

.kcterms-hero {
  --kcterms-white: #f6f4f6;
  --kcterms-muted: #c5bfd2;
  --kcterms-purple: #b837ff;
  --kcterms-purple-2: #8f2cff;
  --kcterms-red: #ff315c;

  width: 100vw;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 calc(-50vw + 50%);
  position: relative;
  isolation: isolate;

  color: var(--kcterms-white);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 18% 35%, rgba(77, 0, 142, .38), transparent 30%),
    radial-gradient(circle at 82% 42%, rgba(126, 0, 167, .34), transparent 29%),
    radial-gradient(circle at 50% 100%, rgba(90, 0, 140, .24), transparent 28%),
    linear-gradient(180deg, #03030a 0%, #060511 58%, #03030a 100%);
}

.kcterms-hero::before,
.kcterms-hero::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
}

.kcterms-hero::before {
  opacity: .3;
  background-image:
    linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .02) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, transparent, black 20%, black 80%, transparent);
}

.kcterms-hero::after {
  box-shadow: inset 0 0 150px 45px #000;
}

/* Every vertical measurement below (font-size, margin, padding, gap) is
   driven primarily by dvh rather than px/vw, with a small min and max as
   guardrails. That keeps the whole card's total height proportional to the
   actual viewport height, so on a reasonably sized screen it lands under
   100dvh and the page never scrolls — the design goal for this gate is that a
   client sees the full terms in one screen. Horizontal sizing (padding-inline,
   wrap width) still uses vw/px.

   It is a goal, not a guarantee, and the difference matters. Below 470px the
   rules and the alert reflow from icon-beside-text to a stacked single column
   (see the media query at the end of this block) while every dvh-driven size
   is already pinned to its clamp minimum and cannot shrink any further, so on
   a phone the card genuinely can exceed the viewport. dvh itself also moves
   under you there as the browser's own chrome slides in and out. This used to
   be a fixed 100dvh box with overflow:hidden, which turned all of that into
   silently clipped content — and what fell off the bottom was the accept
   checkbox and the submit button, i.e. the gate became impossible to pass.

   So: min-height rather than height, no clipping, and the card centred with
   auto margins rather than by the container. Auto margins centre it while it
   fits and stop at the container's edges when it doesn't, which grid/flex
   centring does not — those push the overflowing top edge off-screen where it
   cannot be scrolled back to. */
.kcterms-shell {
  min-height: 100vh;
  min-height: 100dvh;
  padding: clamp(6px, 1.4dvh, 24px) clamp(10px, 2.5vw, 32px);
  display: flex;
}

.kcterms-card {
  width: min(100%, 860px);
  margin: auto;
  position: relative;
  border: 2px solid rgba(197, 71, 255, .9);
  border-radius: clamp(12px, 2dvh, 24px);
  padding: clamp(10px, 2dvh, 28px) clamp(14px, 3vw, 40px) clamp(10px, 1.8dvh, 24px);
  background:
    linear-gradient(180deg, rgba(8, 7, 24, .97), rgba(3, 4, 15, .98)),
    radial-gradient(circle at 50% 5%, rgba(142, 43, 255, .14), transparent 35%);
  box-shadow:
    0 0 24px rgba(177, 45, 255, .48),
    0 0 70px rgba(104, 16, 167, .22),
    inset 0 0 28px rgba(130, 38, 255, .05);
}

.kcterms-heading { text-align: center; }

.kcterms-topline {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(8px, 1.6vw, 18px);
  margin: 0 7% clamp(2px, 0.6dvh, 8px);
  color: #f264ff;
}

.kcterms-topline span {
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(220, 75, 255, .9));
}
.kcterms-topline span:last-child { transform: scaleX(-1); }

.kcterms-crown {
  font-size: clamp(16px, 3.2dvh, 40px);
  line-height: 1;
  filter: drop-shadow(0 0 10px rgba(231, 91, 255, .85));
}

.kcterms-title-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1.6vw, 20px);
}

.kcterms-doc-icon {
  flex: 0 0 clamp(24px, 4dvh, 52px);
  width: clamp(24px, 4dvh, 52px);
  color: #d657ff;
  filter: drop-shadow(0 0 9px rgba(203, 61, 255, .9));
}
.kcterms-doc-icon svg { display: block; width: 100%; height: auto; }

.kcterms-hero h1,
.kcterms-hero h2,
.kcterms-big-warning {
  font-family: "Barlow Condensed", Impact, sans-serif;
  letter-spacing: .02em;
}

.kcterms-title-row h1 {
  margin: 0;
  font-size: clamp(18px, 3.6dvh, 38px);
  line-height: .95;
  font-weight: 800;
  text-shadow: 0 0 18px rgba(255, 255, 255, .12);
}

.kcterms-hero-divider {
  width: 70%;
  height: 1px;
  margin: clamp(4px, 1.2dvh, 16px) auto;
  background: linear-gradient(90deg, transparent, rgba(182, 52, 255, .56), transparent);
}

.kcterms-intro {
  margin: 0 auto;
  max-width: 640px;
  font-size: clamp(10px, 1.7dvh, 16px);
  line-height: 1.3;
  font-weight: 500;
}

.kcterms-intro strong {
  color: var(--kcterms-purple);
  font-weight: 700;
}

.kcterms-main-divider {
  height: 2px;
  margin: clamp(6px, 1.6dvh, 22px) 0 clamp(6px, 1.4dvh, 18px);
  background: linear-gradient(90deg, rgba(166, 40, 255, .15), rgba(181, 47, 255, .9), rgba(166, 40, 255, .15));
}

.kcterms-rule {
  display: grid;
  grid-template-columns: clamp(38px, 6dvh, 76px) 1fr;
  gap: clamp(8px, 1.6vw, 18px);
  align-items: start;
  padding: 0 4px;
}

.kcterms-rule-icon {
  width: clamp(30px, 4.8dvh, 60px);
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin-top: 4px;
  box-shadow: inset 0 0 28px currentColor, 0 0 20px color-mix(in srgb, currentColor 35%, transparent);
  border: 1px solid currentColor;
}

.kcterms-rule-icon svg { width: 72%; height: 72%; }
.kcterms-rule--danger { color: var(--kcterms-red); }
.kcterms-rule--purple { color: var(--kcterms-purple); }

.kcterms-rule-copy { color: var(--kcterms-white); }
.kcterms-rule-copy h2 {
  margin: 0 0 clamp(1px, 0.4dvh, 4px);
  font-size: clamp(12px, 2dvh, 20px);
  line-height: 1.05;
  color: currentColor;
  font-weight: 700;
}
.kcterms-rule-copy p {
  margin: 0;
  font-size: clamp(9px, 1.35dvh, 14px);
  line-height: 1.3;
  color: var(--kcterms-white);
}

.kcterms-big-warning {
  margin-top: 4px !important;
  color: var(--kcterms-red) !important;
  font-size: clamp(10px, 1.6dvh, 18px) !important;
  line-height: 1.15 !important;
  font-weight: 700;
  letter-spacing: .03em;
}

.kcterms-dotted-divider {
  border-top: 1px dotted rgba(141, 104, 178, .5);
  margin: clamp(5px, 1.3dvh, 16px) 10px;
}

.kcterms-alert {
  margin: clamp(4px, 1dvh, 14px) 4px 0;
  padding: clamp(4px, 1dvh, 10px) clamp(10px, 2vw, 16px);
  min-height: 0;
  display: grid;
  grid-template-columns: clamp(20px, 3.2dvh, 40px) 1fr;
  align-items: center;
  gap: clamp(6px, 1vw, 12px);
  border: 2px solid var(--kcterms-red);
  border-radius: clamp(8px, 1.4dvh, 12px);
  background: linear-gradient(180deg, rgba(56, 3, 17, .72), rgba(19, 4, 12, .66));
  box-shadow: inset 0 0 30px rgba(255, 32, 79, .12), 0 0 12px rgba(255, 32, 79, .18);
}

.kcterms-alert-triangle {
  width: clamp(20px, 3.2dvh, 40px);
  height: clamp(17px, 2.8dvh, 34px);
  display: grid;
  place-items: center;
  color: #0a0610;
  font-size: clamp(11px, 1.8dvh, 22px);
  font-weight: 900;
  line-height: 1;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  background: var(--kcterms-red);
  filter: drop-shadow(0 0 10px rgba(255, 46, 92, .5));
}

.kcterms-alert p {
  margin: 0;
  font-family: "Barlow Condensed", Impact, sans-serif;
  font-size: clamp(9px, 1.3dvh, 17px);
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.1;
}

.kcterms-dotted-divider--footer { margin: clamp(5px, 1.3dvh, 16px) 10px clamp(6px, 1.5dvh, 18px); }

.kcterms-accept-row {
  display: grid;
  grid-template-columns: clamp(24px, 3.6dvh, 48px) 1fr;
  align-items: center;
  gap: clamp(6px, 1.2vw, 14px);
  cursor: pointer;
  padding: 0 12px;
}

.kcterms-accept-row input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.kcterms-fake-check {
  width: clamp(22px, 3.6dvh, 40px);
  height: clamp(22px, 3.6dvh, 40px);
  border-radius: 10px;
  border: 2px solid var(--kcterms-purple);
  background: rgba(62, 14, 92, .3);
  box-shadow: inset 0 0 20px rgba(182, 55, 255, .18), 0 0 10px rgba(180, 55, 255, .24);
  position: relative;
}

/* `~` rather than `+`: asp-for on a bool emits a hidden fallback input right
   after the checkbox, so .kcterms-fake-check is not its *immediate* sibling. */
.kcterms-accept-row input:checked ~ .kcterms-fake-check::after {
  content: "✓";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #f5c8ff;
  font-size: clamp(14px, 2.3dvh, 26px);
  font-weight: 800;
  text-shadow: 0 0 12px var(--kcterms-purple);
}

.kcterms-accept-copy {
  color: var(--kcterms-muted);
  font-size: clamp(9px, 1.3dvh, 15px);
  line-height: 1.2;
}
.kcterms-accept-copy strong { color: var(--kcterms-purple); }

.kcterms-submit {
  width: 100%;
  margin: clamp(5px, 1.2dvh, 18px) 0 0;
  padding: 0 20px;
  height: clamp(28px, 4.4dvh, 46px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 0;
  border-radius: 12px;
  color: white;
  background: linear-gradient(90deg, var(--kcterms-purple-2), var(--kcterms-purple));
  font-family: inherit;
  font-weight: 700;
  font-size: clamp(10px, 1.4dvh, 15px);
  letter-spacing: .02em;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(178, 31, 255, .28);
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}
.kcterms-submit:hover { transform: translateY(-2px); filter: brightness(1.08); }
.kcterms-submit:active { transform: translateY(0); }

/* Hidden until the validation summary tag helper adds "validation-summary-errors"
   (terms not checked). */
.kcterms-message {
  display: none;
  margin: clamp(4px, 1dvh, 14px) 8px 0;
  text-align: center;
  font-size: clamp(9px, 1.2dvh, 14px);
  color: #ff8fb3;
}
.kcterms-message.validation-summary-errors { display: block; }
.kcterms-message ul { list-style: none; margin: 0; padding: 0; }

/* Below ~760px wide, rule/alert/accept rows flip from icon-left to a single
   column so text isn't squeezed too narrow — a width-driven reflow, layered
   on top of the height-driven (dvh) sizing above which needs no width
   breakpoints since it already scales with the viewport on its own. */
@media (max-width: 760px) {
  .kcterms-desktop-only { display: none; }
}

@media (max-width: 470px) {
  .kcterms-title-row { flex-direction: column; }
  .kcterms-hero-divider { width: 90%; }

  .kcterms-rule {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .kcterms-rule-icon { margin: 0 auto; }

  .kcterms-alert {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .kcterms-alert-triangle { margin: 0 auto; }
}

/* Admin sign-in page (Areas/Identity/Pages/Account/Login.cshtml) — dark
   background and a purple card instead of the plain white Bootstrap default,
   same purple/pink accent family as the client login and the manage-post
   buttons elsewhere on the site. */
body:has(.admin-login-page) {
  background: #0d0716;
}

.admin-login-page {
  min-height: 100vh;
}

.admin-login-card {
  background: linear-gradient(160deg, #2c1b42 0%, #150c22 100%);
  border: 1px solid rgba(191, 64, 255, .35);
  border-radius: 14px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .55);
  color: #f1e9ff;
}

.admin-login-card .form-control {
  background: #1c1329;
  border: 1px solid rgba(191, 64, 255, .3);
  color: #ffffff;
}

.admin-login-card .form-control:focus {
  background: #1c1329;
  border-color: rgba(191, 64, 255, .85);
  color: #ffffff;
  box-shadow: 0 0 0 .25rem rgba(191, 64, 255, .25);
}

.admin-login-card .form-control::placeholder {
  color: transparent;
}

.admin-login-card .form-floating > label {
  color: #b9a4d6;
}

/* Bootstrap's form-floating shrinks+raises the label on focus/fill by fading
   in a background swatch behind it (--bs-body-bg, which is white by default) —
   without this override that swatch would show as a bright white patch on the
   dark card. */
.admin-login-card .form-floating > .form-control:focus ~ label,
.admin-login-card .form-floating > .form-control:not(:placeholder-shown) ~ label {
  background: transparent;
  color: #d8bfff;
}

/* New button style: a purple/pink gradient pill instead of Bootstrap's default
   .btn-primary blue. */
.admin-login-submit {
  border: 0;
  border-radius: 8px;
  background: linear-gradient(135deg, #bf40ff 0%, #7c3fe0 100%);
  color: #ffffff;
  font-weight: 600;
  padding: 10px 0;
  transition: box-shadow .2s ease, transform .2s ease;
}

.admin-login-submit:hover,
.admin-login-submit:focus-visible {
  background: linear-gradient(135deg, #cf5dff 0%, #8c52ea 100%);
  box-shadow: 0 0 18px rgba(191, 64, 255, .5);
  transform: translateY(-1px);
  color: #ffffff;
}

.admin-login-submit:active {
  transform: translateY(0);
}