:root {
  color-scheme: dark;
  font-family: Inter, system-ui, sans-serif;
  background: #090b13;
  color: #f7f8ff;
}

* { box-sizing: border-box; }

body {
  min-height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at top, #26204c, #090b13 58%);
}

main {
  width: min(92vw, 440px);
  padding: 2rem;
  border: 1px solid #383a55;
  border-radius: 22px;
  background: rgb(18 20 34 / 94%);
  box-shadow: 0 24px 80px #0008;
}

.account-card { --accent: #7c5cff; }
.product-fuxionmix { --accent: #ef4056; }
.product-fuxionvideo { --accent: #7c5cff; }
.brand-mark {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  margin-bottom: 1rem;
  background: linear-gradient(135deg, var(--accent), #5a41d8);
  color: #fff;
  font-weight: 900;
  letter-spacing: -.04em;
}
.eyebrow {
  margin: 0 0 .35rem;
  color: var(--accent);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

h1 { margin: 0 0 .4rem; font-size: 1.75rem; }
p { color: #b8bbd1; line-height: 1.5; }
label { display: block; margin: 1rem 0 .4rem; color: #d7d9e8; }

input {
  width: 100%;
  padding: .85rem 1rem;
  border-radius: 10px;
  border: 1px solid #454866;
  background: #0d0f1b;
  color: #fff;
}

button,
.button {
  display: block;
  width: 100%;
  margin-top: 1rem;
  padding: .9rem 1rem;
  border: 0;
  border-radius: 10px;
  background: var(--accent, #7c5cff);
  color: white;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.secondary { background: transparent; border: 1px solid #55597a; }
.provider { position: relative; background: #fff; color: #17182b; }
.provider span {
  position: absolute;
  left: 1rem;
  font-size: 1.15rem;
  font-weight: 900;
}
.provider.facebook { background: #1877f2; color: #fff; }
.divider { display: flex; align-items: center; gap: .7rem; margin: 1.3rem 0 .2rem; color: #969ab5; font-size: .78rem; }
.divider::before, .divider::after { content: ""; height: 1px; flex: 1; background: #383a55; }
.account-link { margin: 1.1rem 0; text-align: center; font-size: .92rem; }
a { color: #b5a7ff; }
.notice { padding: .8rem 1rem; border-radius: 10px; background: #25283d; line-height: 1.45; }
.notice.error { background: #3a2028; color: #ffc7cf; }
.validation-summary-errors { color: #ffb1b1; }
.remember-me input { width: auto; }
small { color: #969ab5; }

/* Product-aware central authentication. The account remains shared while the
   entry surface preserves the product that initiated the OIDC request. */
body.account-page {
  padding: clamp(1rem, 4vh, 2.5rem);
}

.account-shell { width: min(100%, 420px); }

.product-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  margin-bottom: 1rem;
}

.fuxionmix-logo {
  display: block;
  width: 155px;
  height: auto;
  filter: drop-shadow(0 0 18px rgb(229 9 20 / 32%));
}

.fuxionvideo-logo {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: #fff;
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: -.025em;
}

.fuxionvideo-mark-image,
.fuxionradio-mark-image {
  display: block;
  width: 38px;
  height: 38px;
  filter: drop-shadow(0 0 18px rgb(118 87 255 / 32%));
}

.fuxionradio-logo {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: #fff;
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: -.025em;
}

.fuxionradio-logo > span > span { color: #38bdf8; }
.fuxionradio-mark-image {
  width: 44px;
  height: 44px;
  filter: drop-shadow(0 0 18px rgb(34 211 238 / 32%));
}

.aliencat-official-logo {
  display: block;
  width: 132px;
  max-width: 42vw;
  height: auto;
  border-radius: 18px;
  filter: drop-shadow(0 0 24px rgb(124 92 255 / 18%));
}

.portal-page .aliencat-official-logo {
  width: 92px;
}

body.product-fuxionmix {
  --accent: #e50914;
  background: radial-gradient(circle at 72% 18%, rgb(229 9 20 / 20%), transparent 36rem), linear-gradient(180deg, #07090d, #0b0d12);
}

.product-fuxionmix .account-shell {
  padding: 1.65rem 1.75rem 1.35rem;
  border: 1px solid rgb(229 9 20 / 24%);
  border-radius: 22px;
  background: rgb(14 19 28 / 97%);
  box-shadow: 0 28px 75px rgb(0 0 0 / 55%), 0 0 34px rgb(229 9 20 / 10%);
}

.product-fuxionmix main {
  width: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.product-fuxionmix h1,
.product-fuxionmix .account-intro { text-align: center; }
.product-fuxionmix h1 { font-size: 1.3rem; }

body.product-fuxionvideo {
  --accent: #7657ff;
  color-scheme: light;
  background: radial-gradient(circle at top, #27294b, #10111d 55%);
  color: #15182a;
}

.product-fuxionvideo main {
  width: auto;
  border: 0;
  border-radius: 18px;
  background: #fff;
  color: #15182a;
  box-shadow: 0 22px 65px rgb(0 0 0 / 28%);
}

.product-fuxionvideo p,
.product-fuxionvideo label,
.product-fuxionvideo small { color: #62677a; }
.product-fuxionvideo a { color: #6547e8; }

.account-intro { margin: 0 0 1.2rem; }

.product-fuxionvideo input:not([type="hidden"]):not([type="checkbox"]) {
  border-color: #cbd0dc;
  background: #fff;
  color: #15182a;
}

body.product-fuxionradio {
  --accent: #22d3ee;
  background: radial-gradient(circle at 72% 18%, rgb(14 165 233 / 22%), transparent 36rem), linear-gradient(180deg, #061020, #080b14);
}

.product-fuxionradio main {
  border-color: rgb(34 211 238 / 24%);
  background: rgb(8 17 34 / 96%);
  box-shadow: 0 28px 75px rgb(0 0 0 / 50%), 0 0 34px rgb(34 211 238 / 10%);
}

.product-fuxionradio .account-card { --accent: #22d3ee; }
.product-fuxionradio a { color: #67e8f9; }

.primary-button { background: var(--accent, #7c5cff); }
.product-fuxionmix .account-card { --accent: #e50914; }
.provider-stack { display: grid; gap: .75rem; }
.provider-form { margin: 0; }
.provider-button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: .65rem 2.9rem;
  border-radius: 6px;
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
}
.provider-button:focus-visible { outline: 3px solid #8ec5ff; outline-offset: 3px; }
.provider-icon { position: absolute; left: 14px; width: 20px; height: 20px; }
.provider-google { border: 1px solid #747775; background: #fff; color: #1f1f1f; font-weight: 500; }
a.provider-google { color: #1f1f1f; }
.provider-google:hover { background: #f8fafd; box-shadow: 0 1px 3px rgb(60 64 67 / 30%); }
.provider-facebook { border: 1px solid #1877f2; background: #1877f2; color: #fff; }
a.provider-facebook { color: #fff; }
.provider-facebook:hover { background: #166fe5; }

.product-fuxionvideo .divider::before,
.product-fuxionvideo .divider::after { background: #d8dbe5; }

.account-note { display: block; line-height: 1.45; text-align: center; }
.validation-summary-valid { display: none; }
.validation-summary-errors { margin: .8rem 0; color: #ffb1b1; }
.product-fuxionvideo .validation-summary-errors { color: #b42318; }
.validation-summary-errors ul { margin: 0; padding-left: 1.15rem; }

.account-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .15rem .45rem;
  margin-top: .85rem;
  color: rgb(255 255 255 / 43%);
  font-size: .7rem;
  text-align: center;
}

@media (max-width: 480px) {
  body.account-page { padding: 1rem; }
  .product-fuxionmix .account-shell { padding: 1.35rem; }
}