/* =========================================================
   ENDCORE 1.7 — CLIENT ENTRY
   Profiles · Servers · Authentication
   ========================================================= */

.client-entry-view {
  min-height: 100vh;

  position: relative;

  display: grid;

  place-items: center;

  overflow: hidden;

  padding:
    clamp(28px, 5vw, 64px);

  background:
    #030812;
}


.client-entry-view[hidden] {
  display: none !important;
}


.client-entry-background {
  position: absolute;

  inset: 0;

  overflow: hidden;

  pointer-events: none;
}


.client-entry-background::after {
  content: "";

  position: absolute;

  inset: 0;

  background:
    radial-gradient(
      circle at 50% 28%,
      rgba(39, 133, 245, .13),
      transparent 34%
    ),
    linear-gradient(
      180deg,
      rgba(3, 9, 20, .10),
      rgba(3, 8, 18, .94)
    );
}


.client-entry-aura {
  position: absolute;

  border-radius: 50%;

  filter:
    blur(90px);

  opacity: .32;
}


.client-entry-aura.aura-one {
  width: 52vw;
  height: 52vw;

  left: -17vw;
  top: -24vw;

  background:
    rgba(32, 109, 233, .36);

  animation:
    endcoreAuraDriftOne
    18s ease-in-out infinite;
}


.client-entry-aura.aura-two {
  width: 46vw;
  height: 46vw;

  right: -18vw;
  bottom: -20vw;

  background:
    rgba(31, 169, 224, .22);

  animation:
    endcoreAuraDriftTwo
    22s ease-in-out infinite;
}


.client-entry-grid-light {
  position: absolute;

  inset: 0;

  opacity: .09;

  background-image:
    linear-gradient(
      rgba(93, 160, 226, .18)
      1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(93, 160, 226, .14)
      1px,
      transparent 1px
    );

  background-size:
    72px 72px;

  mask-image:
    radial-gradient(
      circle at center,
      #000,
      transparent 72%
    );
}


.client-entry-shell {
  width:
    min(760px, 100%);

  min-height:
    min(780px, calc(100vh - 70px));

  position: relative;

  z-index: 2;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  padding:
    clamp(32px, 5vw, 58px);

  border:
    1px solid
    rgba(124, 176, 228, .14);

  border-radius:
    32px;

  background:
    linear-gradient(
      180deg,
      rgba(7, 17, 31, .76),
      rgba(4, 11, 22, .88)
    );

  box-shadow:
    0 40px 120px
    rgba(0, 0, 0, .48),
    inset 0 1px 0
    rgba(255, 255, 255, .035);

  backdrop-filter:
    blur(24px);
}


.client-entry-brand {
  display: flex;

  flex-direction: column;

  align-items: center;

  margin-bottom:
    clamp(34px, 5vh, 58px);
}


.client-entry-logo-orbit {
  width:
    clamp(92px, 11vw, 132px);

  aspect-ratio: 1;

  position: relative;

  display: grid;

  place-items: center;

  animation:
    endcoreLogoFloat
    6.5s ease-in-out infinite;
}


.client-entry-logo-glow {
  position: absolute;

  inset: 6%;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(61, 161, 255, .30),
      rgba(40, 110, 221, .10) 48%,
      transparent 72%
    );

  filter:
    blur(14px);

  animation:
    endcoreLogoGlow
    5.2s ease-in-out infinite;
}


.client-entry-logo {
  width: 82%;
  height: 82%;

  position: relative;

  z-index: 2;

  object-fit: contain;

  filter:
    drop-shadow(
      0 14px 26px
      rgba(0, 0, 0, .40)
    )
    drop-shadow(
      0 0 18px
      rgba(66, 159, 255, .20)
    );
}


.client-entry-wordmark {
  margin-top: 11px;

  color: #f3f8ff;

  font-size:
    clamp(27px, 4vw, 38px);

  font-weight: 780;

  letter-spacing:
    -.055em;
}


.client-entry-submark {
  margin-top: 3px;

  color:
    rgba(118, 176, 239, .75);

  font-size: 10px;

  font-weight: 800;

  letter-spacing:
    .34em;

  padding-left:
    .34em;
}


.client-entry-stage {
  width: 100%;

  display: flex;

  flex-direction: column;

  align-items: center;
}


.client-entry-stage[hidden] {
  display: none !important;
}


.client-entry-heading {
  max-width: 600px;

  text-align: center;
}


.client-entry-heading > span,
.client-selected-profile span {
  color:
    #6eaff9;

  font-size: 10px;

  font-weight: 800;

  letter-spacing:
    .20em;
}


.client-entry-heading h1 {
  margin:
    10px 0 8px;

  color:
    #f5f9ff;

  font-size:
    clamp(31px, 5vw, 48px);

  line-height: 1;

  letter-spacing:
    -.055em;
}


.client-entry-heading p {
  margin: 0;

  color:
    rgba(190, 205, 222, .66);

  font-size: 14px;

  line-height: 1.55;
}


.client-profile-grid {
  width: 100%;

  margin-top: 34px;

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  gap: 24px;
}


.client-profile-card {
  width: 126px;

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 12px;

  border: 0;

  padding: 4px;

  background:
    transparent;

  color:
    #ecf5ff;

  cursor: pointer;
}


.client-profile-avatar {
  width: 104px;
  height: 104px;

  position: relative;

  display: grid;

  place-items: center;

  overflow: hidden;

  border:
    1px solid
    rgba(124, 183, 238, .24);

  border-radius: 50%;

  background:
    radial-gradient(
      circle at 36% 28%,
      rgba(68, 155, 240, .38),
      rgba(11, 34, 60, .92)
    );

  color: #ffffff;

  font-size: 36px;

  font-weight: 760;

  box-shadow:
    0 16px 38px
    rgba(0, 0, 0, .38);

  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}


.client-profile-card:hover
.client-profile-avatar {
  transform:
    translateY(-5px)
    scale(1.035);

  border-color:
    rgba(96, 176, 250, .82);

  box-shadow:
    0 20px 44px
    rgba(0, 0, 0, .42),
    0 0 26px
    rgba(64, 152, 243, .18);
}


.client-profile-avatar img {
  width: 100%;
  height: 100%;

  object-fit: cover;
}


.client-profile-card strong {
  max-width: 126px;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

  font-size: 14px;

  font-weight: 650;
}


.client-profile-avatar-small {
  width: 54px;
  height: 54px;

  font-size: 20px;
}


.client-selected-profile {
  margin-bottom: 27px;

  display: flex;

  align-items: center;

  gap: 14px;
}


.client-selected-profile > div:last-child {
  display: flex;

  flex-direction: column;

  gap: 4px;
}


.client-selected-profile strong {
  color: #f4f8ff;

  font-size: 16px;
}


.client-server-grid {
  width: 100%;

  max-width: 560px;

  margin-top: 28px;

  display: grid;

  gap: 11px;
}


.client-server-card {
  width: 100%;

  display: grid;

  grid-template-columns:
    12px
    minmax(0, 1fr)
    auto;

  align-items: center;

  gap: 14px;

  padding:
    16px 18px;

  border:
    1px solid
    rgba(123, 175, 222, .16);

  border-radius: 16px;

  background:
    rgba(9, 24, 42, .66);

  color: #eff7ff;

  text-align: left;

  cursor: pointer;

  transition:
    transform 160ms ease,
    border-color 160ms ease,
    background 160ms ease;
}


.client-server-card:hover {
  transform:
    translateY(-2px);

  border-color:
    rgba(81, 160, 237, .52);

  background:
    rgba(12, 34, 58, .82);
}


.client-server-dot {
  width: 9px;
  height: 9px;

  border-radius: 50%;

  background:
    #6c7785;

  box-shadow:
    0 0 0 4px
    rgba(108, 119, 133, .10);
}


.client-server-card.has-session
.client-server-dot {
  background:
    #29c46f;

  box-shadow:
    0 0 0 4px
    rgba(41, 196, 111, .10),
    0 0 12px
    rgba(41, 196, 111, .40);
}


.client-server-copy {
  min-width: 0;

  display: flex;

  flex-direction: column;

  gap: 3px;
}


.client-server-copy strong {
  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

  font-size: 15px;
}


.client-server-copy span {
  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

  color:
    rgba(180, 200, 220, .55);

  font-size: 11px;
}


.client-server-state {
  color:
    rgba(181, 202, 222, .65);

  font-size: 11px;
}


.client-entry-form {
  width: 100%;

  max-width: 420px;

  margin-top: 31px;

  display: grid;

  gap: 18px;
}


.client-entry-form label {
  display: grid;

  gap: 8px;
}


.client-entry-form label > span {
  color:
    rgba(181, 202, 222, .72);

  font-size: 12px;

  font-weight: 650;
}


.client-entry-form input {
  width: 100%;

  min-height: 50px;

  border:
    1px solid
    rgba(123, 175, 222, .20);

  border-radius: 13px;

  padding:
    0 15px;

  background:
    rgba(7, 20, 36, .74);

  color: #f3f8ff;

  outline: none;

  transition:
    border-color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease;
}


.client-entry-form input:focus {
  border-color:
    rgba(74, 159, 244, .72);

  background:
    rgba(10, 28, 48, .92);

  box-shadow:
    0 0 0 3px
    rgba(63, 145, 231, .10);
}


.client-entry-secondary,
.client-entry-link {
  border: 0;

  background:
    transparent;

  color:
    rgba(183, 207, 232, .72);

  cursor: pointer;
}


.client-entry-secondary {
  margin-top: 30px;

  min-height: 42px;

  padding:
    0 18px;

  border:
    1px solid
    rgba(122, 174, 224, .18);

  border-radius: 12px;

  background:
    rgba(10, 26, 45, .54);
}


.client-entry-secondary:hover {
  color: #ffffff;

  border-color:
    rgba(87, 166, 242, .46);

  background:
    rgba(12, 34, 57, .76);
}


.client-entry-link {
  min-height: 34px;

  padding: 4px 8px;
}


.client-entry-link:hover {
  color:
    #78b8ff;
}


.client-entry-actions {
  margin-top: 20px;

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 9px;
}


.client-entry-empty {
  padding:
    30px 20px;

  border:
    1px dashed
    rgba(123, 175, 222, .18);

  border-radius: 16px;

  color:
    rgba(187, 207, 227, .58);

  text-align: center;
}


@keyframes endcoreLogoFloat {
  0%,
  100% {
    transform:
      translateY(0)
      rotate(-.5deg);
  }

  50% {
    transform:
      translateY(-10px)
      rotate(.6deg);
  }
}


@keyframes endcoreLogoGlow {
  0%,
  100% {
    opacity: .56;

    transform:
      scale(.92);
  }

  50% {
    opacity: 1;

    transform:
      scale(1.08);
  }
}


@keyframes endcoreAuraDriftOne {
  0%,
  100% {
    transform:
      translate(0, 0)
      scale(1);
  }

  50% {
    transform:
      translate(8vw, 6vh)
      scale(1.10);
  }
}


@keyframes endcoreAuraDriftTwo {
  0%,
  100% {
    transform:
      translate(0, 0)
      scale(1);
  }

  50% {
    transform:
      translate(-7vw, -5vh)
      scale(1.12);
  }
}


@media (prefers-reduced-motion: reduce) {
  .client-entry-logo-orbit,
  .client-entry-logo-glow,
  .client-entry-aura {
    animation: none;
  }
}


@media (max-width: 680px) {
  .client-entry-view {
    padding: 0;
  }


  .client-entry-shell {
    min-height: 100vh;

    border: 0;

    border-radius: 0;

    padding:
      30px 22px;
  }


  .client-profile-grid {
    gap: 18px;
  }


  .client-profile-card {
    width: 104px;
  }


  .client-profile-avatar {
    width: 88px;
    height: 88px;

    font-size: 30px;
  }
}


/* =========================================================
   ENDCORE 1.7 — SERVER MANAGEMENT / QUICK SWITCHER
   ========================================================= */


/* ---------------------------------------------------------
   PRELOGIN SERVER ROW + EDIT PENCIL
   --------------------------------------------------------- */

.client-server-row {
  width: 100%;

  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    44px;

  gap: 9px;

  align-items: stretch;
}


.client-server-edit {
  display: grid;

  place-items: center;

  border:
    1px solid
    rgba(123, 175, 222, .16);

  border-radius: 14px;

  background:
    rgba(9, 24, 42, .66);

  color:
    rgba(184, 210, 236, .70);

  cursor: pointer;

  transition:
    transform 160ms ease,
    border-color 160ms ease,
    background 160ms ease,
    color 160ms ease,
    box-shadow 160ms ease;
}


.client-server-edit:hover {
  transform:
    translateY(-2px);

  color:
    #ffffff;

  border-color:
    rgba(84, 166, 245, .60);

  background:
    rgba(12, 36, 62, .92);

  box-shadow:
    0 0 18px
    rgba(55, 147, 234, .15);
}


.client-server-edit svg {
  width: 18px;
  height: 18px;

  fill:
    currentColor;
}


/* ---------------------------------------------------------
   DELETE SERVER
   --------------------------------------------------------- */

.client-entry-danger {
  min-height: 44px;

  border:
    1px solid
    rgba(236, 91, 104, .28);

  border-radius: 12px;

  background:
    rgba(109, 24, 35, .14);

  color:
    rgba(255, 145, 155, .90);

  font-weight: 650;

  cursor: pointer;

  transition:
    border-color 160ms ease,
    background 160ms ease,
    color 160ms ease;
}


.client-entry-danger:hover {
  border-color:
    rgba(246, 94, 108, .62);

  background:
    rgba(131, 28, 41, .30);

  color:
    #ffb1ba;
}


/* ---------------------------------------------------------
   HOME SIDEBAR SERVER SWITCHER
   --------------------------------------------------------- */

.sidebar-server-switcher {
  width: 100%;

  display: grid;

  gap: 5px;
}


.server-nav-toggle {
  width: 100%;

  display: flex;

  align-items: center;

  justify-content: space-between;
}


.server-nav-chevron {
  margin-left: auto;

  font-size: 13px;

  opacity: .58;

  transition:
    transform 160ms ease,
    opacity 160ms ease;
}


.server-nav-toggle:hover
.server-nav-chevron {
  opacity: 1;
}


.server-nav-toggle[aria-expanded="true"]
.server-nav-chevron {
  transform:
    rotate(180deg);
}


.server-nav-list {
  display: grid;

  gap: 4px;

  margin:
    1px 0 7px;

  padding-left: 14px;
}


.server-nav-list[hidden] {
  display: none !important;
}


.server-nav-item {
  width: 100%;

  min-height: 37px;

  display: grid;

  grid-template-columns:
    8px
    minmax(0, 1fr)
    auto;

  align-items: center;

  gap: 9px;

  padding:
    7px 9px;

  border:
    1px solid
    transparent;

  border-radius: 10px;

  background:
    transparent;

  color:
    rgba(190, 207, 225, .66);

  text-align: left;

  cursor: pointer;

  transition:
    color 150ms ease,
    background 150ms ease,
    border-color 150ms ease;
}


.server-nav-item:hover {
  color:
    #f2f8ff;

  background:
    rgba(44, 111, 177, .12);

  border-color:
    rgba(91, 160, 226, .13);
}


.server-nav-item.is-active {
  color:
    #ffffff;

  background:
    rgba(41, 118, 194, .18);

  border-color:
    rgba(74, 157, 237, .22);
}


.server-nav-status {
  width: 7px;
  height: 7px;

  border-radius: 50%;

  background:
    #697685;
}


.server-nav-status.has-session {
  background:
    #2ac873;

  box-shadow:
    0 0 8px
    rgba(42, 200, 115, .48);
}


.server-nav-name {
  min-width: 0;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

  font-size: 12px;

  font-weight: 620;
}


.server-nav-current {
  color:
    rgba(100, 182, 255, .76);

  font-size: 8px;

  font-weight: 800;

  letter-spacing:
    .10em;
}


/* =========================================================
   ENDCORE 1.7 — CANONICAL CLIENT ENTRY
   Premium cross-client visual identity

   This section defines the canonical appearance that
   Windows / Android / TV clients should reproduce.
   ========================================================= */


/* ---------------------------------------------------------
   FULL SCREEN CANVAS
   --------------------------------------------------------- */

.client-entry-view {
  width: 100vw;
  min-width: 100%;
  min-height: 100vh;

  position: fixed;
  inset: 0;

  display: grid;
  place-items: center;

  box-sizing: border-box;

  padding:
    clamp(28px, 4vw, 64px);

  overflow: hidden;

  background:
    radial-gradient(
      ellipse at 50% -10%,
      rgba(29, 91, 176, .18),
      transparent 48%
    ),
    radial-gradient(
      ellipse at 8% 100%,
      rgba(22, 103, 211, .12),
      transparent 42%
    ),
    radial-gradient(
      ellipse at 92% 100%,
      rgba(92, 56, 208, .10),
      transparent 42%
    ),
    #020813;
}


/* ---------------------------------------------------------
   ATMOSPHERE
   --------------------------------------------------------- */

.client-entry-background {
  position: absolute;
  inset: 0;

  overflow: hidden;

  pointer-events: none;

  transform:
    scale(1.08);
}


.client-entry-background::before {
  content: "";

  position: absolute;

  width: 86vw;
  height: 86vw;

  left: 50%;
  top: -58vw;

  transform:
    translateX(-50%);

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(45, 126, 241, .18),
      rgba(64, 77, 210, .08) 37%,
      transparent 70%
    );

  filter:
    blur(20px);

  animation:
    endcoreEntrySkyBreath
    12s ease-in-out infinite;
}


.client-entry-background::after {
  content: "";

  position: absolute;

  width: 74vw;
  height: 260px;

  left: 50%;
  bottom: -170px;

  transform:
    translateX(-50%);

  border-radius: 50%;

  background:
    radial-gradient(
      ellipse,
      rgba(34, 127, 237, .23),
      rgba(77, 56, 206, .08) 43%,
      transparent 72%
    );

  filter:
    blur(34px);

  animation:
    endcoreEntryFloorBreath
    9s ease-in-out infinite;
}


.client-entry-grid-light {
  position: absolute;
  inset: -8%;

  opacity: .08;

  background-image:
    linear-gradient(
      rgba(92, 157, 225, .16)
      1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(92, 157, 225, .12)
      1px,
      transparent 1px
    );

  background-size:
    76px 76px;

  mask-image:
    radial-gradient(
      ellipse at 50% 48%,
      #000 0%,
      rgba(0, 0, 0, .72) 38%,
      transparent 75%
    );

  animation:
    endcoreEntryGridDrift
    36s linear infinite;
}


/* ---------------------------------------------------------
   PREMIUM CENTER PANEL
   --------------------------------------------------------- */

.client-entry-shell {
  width:
    min(1180px, 88vw);

  min-height:
    min(700px, 82vh);

  max-height:
    calc(100vh - 56px);

  position: relative;
  z-index: 2;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  box-sizing: border-box;

  padding:
    clamp(38px, 5vh, 68px)
    clamp(44px, 6vw, 86px);

  border:
    1px solid
    rgba(86, 150, 241, .25);

  border-radius:
    34px;

  background:
    radial-gradient(
      ellipse at 50% 0%,
      rgba(30, 75, 142, .13),
      transparent 45%
    ),
    linear-gradient(
      180deg,
      rgba(7, 17, 34, .82),
      rgba(3, 10, 22, .92)
    );

  box-shadow:
    0 44px 120px
      rgba(0, 0, 0, .54),

    0 0 72px
      rgba(28, 102, 219, .06),

    inset 0 1px 0
      rgba(255, 255, 255, .055),

    inset 0 -1px 0
      rgba(70, 131, 225, .08);

  backdrop-filter:
    blur(28px);

  animation:
    endcoreEntryPanelBreath
    8s ease-in-out infinite;
}


/*
 * Fine luminous line at top of the panel.
 */
.client-entry-shell::before {
  content: "";

  position: absolute;

  width: 38%;
  height: 1px;

  left: 31%;
  top: -1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(68, 143, 255, .45),
      rgba(150, 114, 255, .62),
      rgba(68, 143, 255, .45),
      transparent
    );

  box-shadow:
    0 0 16px
      rgba(65, 139, 255, .48);

  animation:
    endcoreEntryEdgePulse
    7s ease-in-out infinite;
}


/*
 * Floor reflection under the premium panel.
 */
.client-entry-shell::after {
  content: "";

  position: absolute;

  width: 72%;
  height: 32px;

  left: 14%;
  bottom: -25px;

  border-radius: 50%;

  background:
    radial-gradient(
      ellipse,
      rgba(40, 133, 245, .20),
      rgba(80, 57, 207, .07) 45%,
      transparent 73%
    );

  filter:
    blur(14px);

  pointer-events: none;
}


/* ---------------------------------------------------------
   BRAND — PRIMARY VISUAL HIERARCHY
   Logo + EndCore dominate Who's watching
   --------------------------------------------------------- */

.client-entry-brand {
  display: flex;

  flex-direction: column;

  align-items: center;

  margin-bottom:
    clamp(28px, 4vh, 42px);
}


.client-entry-logo-orbit {
  width:
    clamp(142px, 10vw, 190px);

  aspect-ratio: 1;

  position: relative;

  display: grid;

  place-items: center;

  margin-bottom: 2px;

  animation:
    endcoreCanonicalLogoFloat
    6.2s ease-in-out infinite;
}


.client-entry-logo-orbit::before {
  content: "";

  position: absolute;

  width: 124%;
  height: 124%;

  border-radius: 50%;

  background:
    conic-gradient(
      from 190deg,
      transparent,
      rgba(62, 145, 255, .05),
      rgba(142, 92, 255, .09),
      transparent 42%,
      rgba(59, 147, 255, .05),
      transparent
    );

  filter:
    blur(9px);

  animation:
    endcoreCanonicalLogoOrbit
    18s linear infinite;
}


.client-entry-logo-glow {
  position: absolute;

  inset: -6%;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(56, 151, 255, .36),
      rgba(95, 78, 231, .13) 38%,
      transparent 69%
    );

  filter:
    blur(18px);

  animation:
    endcoreCanonicalLogoGlow
    4.8s ease-in-out infinite;
}


.client-entry-logo {
  width: 88%;
  height: 88%;

  position: relative;
  z-index: 2;

  object-fit: contain;

  filter:
    drop-shadow(
      0 18px 30px
      rgba(0, 0, 0, .44)
    )
    drop-shadow(
      0 0 22px
      rgba(67, 152, 255, .33)
    );
}


.client-entry-wordmark {
  margin-top: 6px;

  color:
    #f5f9ff;

  font-size:
    clamp(46px, 4.4vw, 66px);

  font-weight: 790;

  line-height: .94;

  letter-spacing:
    -.065em;

  text-shadow:
    0 8px 26px
      rgba(0, 0, 0, .42),
    0 0 22px
      rgba(80, 157, 255, .08);

  animation:
    endcoreCanonicalWordmarkBreath
    7s ease-in-out infinite;
}


.client-entry-submark {
  margin-top: 11px;

  padding-left:
    .34em;

  color:
    rgba(112, 182, 255, .90);

  font-size:
    clamp(9px, .72vw, 12px);

  font-weight: 850;

  letter-spacing:
    .42em;
}


/* ---------------------------------------------------------
   ENTRY CONTENT
   --------------------------------------------------------- */

.client-entry-stage {
  width: 100%;
}


.client-entry-heading {
  width: 100%;

  max-width: 720px;

  text-align: center;
}


.client-entry-heading > span {
  color:
    rgba(105, 179, 255, .88);

  font-size:
    clamp(10px, .72vw, 12px);

  font-weight: 850;

  letter-spacing:
    .22em;
}


.client-entry-heading h1 {
  margin:
    13px 0 10px;

  color:
    #f4f8ff;

  font-size:
    clamp(34px, 3.4vw, 48px);

  font-weight: 760;

  line-height: 1;

  letter-spacing:
    -.055em;
}


.client-entry-heading p {
  margin: 0;

  color:
    rgba(188, 205, 225, .66);

  font-size:
    clamp(13px, 1vw, 16px);

  line-height: 1.5;
}


/* ---------------------------------------------------------
   PROFILES
   Avatar intentionally NOT dramatically enlarged.
   --------------------------------------------------------- */

.client-profile-grid {
  width: 100%;

  margin-top:
    clamp(30px, 4vh, 42px);

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  gap:
    clamp(26px, 3vw, 42px);
}


.client-profile-card {
  width: 138px;

  gap: 14px;
}


.client-profile-avatar {
  width: 108px;
  height: 108px;

  border:
    1px solid
    rgba(93, 168, 247, .42);

  box-shadow:
    0 18px 42px
      rgba(0, 0, 0, .42),

    0 0 0 1px
      rgba(55, 126, 220, .05),

    0 0 18px
      rgba(49, 139, 237, .07);

  transition:
    transform 210ms ease,
    border-color 210ms ease,
    box-shadow 210ms ease,
    filter 210ms ease;
}


.client-profile-card:hover
.client-profile-avatar,
.client-profile-card:focus-visible
.client-profile-avatar {
  transform:
    translateY(-7px)
    scale(1.055);

  border-color:
    rgba(78, 169, 255, .95);

  box-shadow:
    0 22px 48px
      rgba(0, 0, 0, .46),

    0 0 0 4px
      rgba(42, 135, 231, .10),

    0 0 28px
      rgba(48, 148, 248, .28);

  filter:
    brightness(1.06);
}


.client-profile-card strong {
  color:
    rgba(242, 248, 255, .93);

  font-size: 14px;

  font-weight: 680;
}


/* ---------------------------------------------------------
   ADD PROFILE
   --------------------------------------------------------- */

.client-entry-secondary {
  margin-top:
    clamp(27px, 3.5vh, 36px);

  min-height: 46px;

  padding:
    0 22px;

  border:
    1px solid
    rgba(85, 157, 234, .25);

  border-radius: 13px;

  background:
    linear-gradient(
      180deg,
      rgba(17, 42, 70, .66),
      rgba(8, 25, 44, .72)
    );

  color:
    rgba(198, 218, 239, .76);

  box-shadow:
    inset 0 1px 0
      rgba(255, 255, 255, .035);

  transition:
    transform 160ms ease,
    border-color 160ms ease,
    background 160ms ease,
    color 160ms ease,
    box-shadow 160ms ease;
}


.client-entry-secondary:hover {
  transform:
    translateY(-2px);

  color:
    #ffffff;

  border-color:
    rgba(78, 166, 250, .60);

  background:
    linear-gradient(
      180deg,
      rgba(20, 54, 91, .82),
      rgba(10, 33, 57, .86)
    );

  box-shadow:
    0 10px 24px
      rgba(0, 0, 0, .20),

    0 0 18px
      rgba(54, 145, 239, .10);
}


/* ---------------------------------------------------------
   SERVERS / LOGIN STAGES
   Keep same premium central language.
   --------------------------------------------------------- */

.client-server-grid,
.client-entry-form {
  margin-top:
    clamp(28px, 3.5vh, 38px);
}


.client-selected-profile {
  margin-bottom:
    clamp(25px, 3vh, 34px);
}


/* ---------------------------------------------------------
   MOTION
   --------------------------------------------------------- */

@keyframes endcoreCanonicalLogoFloat {
  0%,
  100% {
    transform:
      translateY(0)
      rotate(-.45deg)
      scale(1);
  }

  50% {
    transform:
      translateY(-13px)
      rotate(.45deg)
      scale(1.018);
  }
}


@keyframes endcoreCanonicalLogoOrbit {
  from {
    transform:
      rotate(0deg);
  }

  to {
    transform:
      rotate(360deg);
  }
}


@keyframes endcoreCanonicalLogoGlow {
  0%,
  100% {
    opacity: .60;

    transform:
      scale(.92);
  }

  50% {
    opacity: 1;

    transform:
      scale(1.11);
  }
}


@keyframes endcoreCanonicalWordmarkBreath {
  0%,
  100% {
    opacity: .94;

    text-shadow:
      0 8px 26px
        rgba(0, 0, 0, .42),
      0 0 18px
        rgba(80, 157, 255, .05);
  }

  50% {
    opacity: 1;

    text-shadow:
      0 8px 26px
        rgba(0, 0, 0, .42),
      0 0 28px
        rgba(80, 157, 255, .13);
  }
}


@keyframes endcoreEntrySkyBreath {
  0%,
  100% {
    opacity: .64;

    transform:
      translateX(-50%)
      scale(.94);
  }

  50% {
    opacity: 1;

    transform:
      translateX(-50%)
      scale(1.08);
  }
}


@keyframes endcoreEntryFloorBreath {
  0%,
  100% {
    opacity: .48;

    transform:
      translateX(-50%)
      scaleX(.88);
  }

  50% {
    opacity: .88;

    transform:
      translateX(-50%)
      scaleX(1.06);
  }
}


@keyframes endcoreEntryGridDrift {
  from {
    transform:
      translate(0, 0);
  }

  to {
    transform:
      translate(76px, 76px);
  }
}


@keyframes endcoreEntryPanelBreath {
  0%,
  100% {
    border-color:
      rgba(86, 150, 241, .22);

    box-shadow:
      0 44px 120px
        rgba(0, 0, 0, .54),

      0 0 64px
        rgba(28, 102, 219, .04),

      inset 0 1px 0
        rgba(255, 255, 255, .055);
  }

  50% {
    border-color:
      rgba(101, 157, 244, .31);

    box-shadow:
      0 44px 120px
        rgba(0, 0, 0, .54),

      0 0 86px
        rgba(28, 102, 219, .08),

      inset 0 1px 0
        rgba(255, 255, 255, .065);
  }
}


@keyframes endcoreEntryEdgePulse {
  0%,
  100% {
    opacity: .38;

    transform:
      scaleX(.82);
  }

  50% {
    opacity: .90;

    transform:
      scaleX(1);
  }
}


/* ---------------------------------------------------------
   LARGE / 4K DISPLAYS
   --------------------------------------------------------- */

@media (min-width: 1600px) {

  .client-entry-shell {
    width:
      min(1260px, 76vw);

    min-height:
      min(730px, 82vh);
  }


  .client-entry-logo-orbit {
    width:
      clamp(168px, 9vw, 205px);
  }


  .client-entry-wordmark {
    font-size:
      clamp(56px, 3.7vw, 72px);
  }


  .client-entry-heading h1 {
    font-size:
      clamp(38px, 2.8vw, 50px);
  }
}


/* ---------------------------------------------------------
   LAPTOP / MEDIUM
   --------------------------------------------------------- */

@media (
  max-width: 1100px
) {

  .client-entry-shell {
    width:
      min(900px, 92vw);

    min-height:
      min(680px, 88vh);

    padding:
      42px 42px;
  }


  .client-entry-logo-orbit {
    width:
      clamp(128px, 15vw, 166px);
  }


  .client-entry-wordmark {
    font-size:
      clamp(42px, 6vw, 56px);
  }
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (
  max-width: 680px
) {

  .client-entry-view {
    position: fixed;

    padding: 0;
  }


  .client-entry-shell {
    width: 100vw;

    min-height: 100vh;
    max-height: none;

    border: 0;

    border-radius: 0;

    padding:
      30px 22px;
  }


  .client-entry-shell::before,
  .client-entry-shell::after {
    display: none;
  }


  .client-entry-brand {
    margin-bottom: 26px;
  }


  .client-entry-logo-orbit {
    width: 118px;
  }


  .client-entry-wordmark {
    font-size: 42px;
  }


  .client-entry-heading h1 {
    font-size: 34px;
  }


  .client-profile-avatar {
    width: 88px;
    height: 88px;
  }
}


/* ---------------------------------------------------------
   ACCESSIBILITY / LOW POWER
   --------------------------------------------------------- */

@media (
  prefers-reduced-motion: reduce
) {

  .client-entry-background::before,
  .client-entry-background::after,
  .client-entry-grid-light,
  .client-entry-shell,
  .client-entry-shell::before,
  .client-entry-logo-orbit,
  .client-entry-logo-orbit::before,
  .client-entry-logo-glow,
  .client-entry-wordmark {
    animation: none !important;
  }
}


/* =========================================================
   ENDCORE 1.7 — LEGACY LOGIN GRID HARD RESET
   The canonical Client Entry owns the entire viewport.
   ========================================================= */

#loginView.client-entry-view {
  /*
   * IMPORTANT:
   * styles.css still defines the historical login
   * as a two-column grid. Client Entry is now a
   * completely independent full-screen experience.
   */
  position: fixed !important;

  inset: 0 !important;

  width: 100vw !important;
  height: 100dvh !important;

  min-width: 100vw !important;
  min-height: 100dvh !important;

  max-width: none !important;
  max-height: none !important;

  margin: 0 !important;

  padding:
    clamp(30px, 4vw, 70px)
    !important;

  display: grid !important;

  grid-template-columns:
    minmax(0, 1fr)
    !important;

  grid-template-rows:
    minmax(0, 1fr)
    !important;

  place-items:
    center !important;

  justify-content:
    center !important;

  align-content:
    center !important;

  overflow:
    hidden !important;

  transform:
    none !important;

  isolation:
    isolate;

  box-sizing:
    border-box;

  z-index: 9999;
}


/* ---------------------------------------------------------
   ATMOSPHERE MUST COVER THE WHOLE VIEWPORT
   --------------------------------------------------------- */

#loginView
> .client-entry-background {
  position: absolute !important;

  inset: 0 !important;

  width: auto !important;
  height: auto !important;

  min-width: 0 !important;
  min-height: 0 !important;

  max-width: none !important;

  margin: 0 !important;

  grid-column: 1 !important;
  grid-row: 1 !important;

  z-index: 0;

  pointer-events: none;

  transform:
    none !important;
}


/* ---------------------------------------------------------
   LARGE CENTERED PREMIUM PANEL
   --------------------------------------------------------- */

#loginView
> .client-entry-shell {
  width:
    min(
      1240px,
      calc(100vw - 120px)
    )
    !important;

  min-width: 0 !important;

  min-height:
    min(
      740px,
      calc(100dvh - 110px)
    )
    !important;

  max-width:
    1240px !important;

  max-height:
    calc(100dvh - 80px)
    !important;

  margin:
    0 auto !important;

  grid-column:
    1 !important;

  grid-row:
    1 !important;

  justify-self:
    center !important;

  align-self:
    center !important;

  position:
    relative;

  z-index:
    2;

  transform:
    none;

  box-sizing:
    border-box;
}


/* =========================================================
   VISIBLE CINEMATIC ATMOSPHERE
   ========================================================= */

#loginView
.client-entry-aura {
  opacity: .58;

  mix-blend-mode:
    screen;

  will-change:
    transform,
    opacity;
}


#loginView
.client-entry-aura.aura-one {
  width: 62vw;
  height: 62vw;

  left: -18vw;
  top: -31vw;

  background:
    radial-gradient(
      circle,
      rgba(31, 123, 255, .38),
      rgba(35, 78, 196, .16) 43%,
      transparent 70%
    );

  filter:
    blur(105px);

  animation:
    endcorePremiumAuraLeft
    19s ease-in-out infinite
    alternate;
}


#loginView
.client-entry-aura.aura-two {
  width: 58vw;
  height: 58vw;

  right: -20vw;
  bottom: -30vw;

  background:
    radial-gradient(
      circle,
      rgba(113, 64, 235, .28),
      rgba(29, 118, 246, .14) 42%,
      transparent 70%
    );

  filter:
    blur(110px);

  animation:
    endcorePremiumAuraRight
    23s ease-in-out infinite
    alternate;
}


/*
 * Slow light wash behind the entire panel.
 */
#loginView
.client-entry-background
.client-entry-grid-light {
  opacity: .12;

  animation:
    endcorePremiumGridTravel
    42s linear infinite;
}


/* ---------------------------------------------------------
   PANEL — MORE VISIBLE BREATHING LIGHT
   --------------------------------------------------------- */

#loginView
.client-entry-shell {
  border-color:
    rgba(85, 155, 255, .34);

  background:
    radial-gradient(
      ellipse at 50% -6%,
      rgba(45, 105, 203, .18),
      transparent 44%
    ),
    radial-gradient(
      ellipse at 50% 108%,
      rgba(49, 93, 191, .08),
      transparent 40%
    ),
    linear-gradient(
      180deg,
      rgba(7, 18, 36, .88),
      rgba(2, 9, 21, .94)
    );

  box-shadow:
    0 48px 140px
      rgba(0, 0, 0, .58),

    0 0 85px
      rgba(32, 116, 237, .11),

    inset 0 1px 0
      rgba(255, 255, 255, .07),

    inset 0 0 70px
      rgba(28, 91, 186, .035);

  animation:
    endcorePremiumPanelLife
    8s ease-in-out infinite;
}


/*
 * Animated luminous top edge.
 */
#loginView
.client-entry-shell::before {
  width: 52%;

  left: 24%;

  opacity: .85;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(52, 134, 255, .22),
      rgba(85, 173, 255, .95),
      rgba(145, 94, 255, .78),
      rgba(68, 148, 255, .28),
      transparent
    );

  box-shadow:
    0 0 22px
      rgba(63, 145, 255, .62);

  animation:
    endcorePremiumEdgeLife
    6.5s ease-in-out infinite;
}


/*
 * Reflection below the panel.
 */
#loginView
.client-entry-shell::after {
  height: 48px;

  bottom: -37px;

  opacity: .72;

  background:
    radial-gradient(
      ellipse,
      rgba(44, 145, 255, .35),
      rgba(89, 65, 230, .13) 43%,
      transparent 73%
    );

  filter:
    blur(18px);

  animation:
    endcorePremiumReflection
    7s ease-in-out infinite;
}


/* =========================================================
   BRAND — REALLY THE MAIN CHARACTER
   ========================================================= */

#loginView
.client-entry-brand {
  margin-bottom:
    clamp(28px, 3.8vh, 42px);
}


#loginView
.client-entry-logo-orbit {
  width:
    clamp(
      170px,
      11vw,
      215px
    );

  animation:
    endcorePremiumLogoFloat
    6s ease-in-out infinite;
}


#loginView
.client-entry-logo-glow {
  inset: -18%;

  background:
    radial-gradient(
      circle,
      rgba(65, 165, 255, .48),
      rgba(114, 77, 241, .19) 36%,
      rgba(35, 91, 218, .07) 55%,
      transparent 72%
    );

  filter:
    blur(24px);

  animation:
    endcorePremiumLogoGlow
    4.6s ease-in-out infinite;
}


#loginView
.client-entry-logo {
  width: 91%;
  height: 91%;

  filter:
    drop-shadow(
      0 20px 36px
      rgba(0, 0, 0, .48)
    )
    drop-shadow(
      0 0 28px
      rgba(74, 158, 255, .42)
    );
}


#loginView
.client-entry-wordmark {
  font-size:
    clamp(
      54px,
      5vw,
      76px
    );

  font-weight:
    800;

  letter-spacing:
    -.068em;
}


#loginView
.client-entry-submark {
  font-size:
    clamp(
      10px,
      .8vw,
      13px
    );
}


/*
 * Who's watching remains important,
 * but subordinate to EndCore identity.
 */
#loginView
.client-entry-heading h1 {
  font-size:
    clamp(
      35px,
      3.2vw,
      48px
    );
}


/* =========================================================
   PROFILE FOCUS
   ========================================================= */

#loginView
.client-profile-card {
  position: relative;
}


#loginView
.client-profile-card::before {
  content: "";

  position: absolute;

  width: 116px;
  height: 116px;

  left: 50%;
  top: -4px;

  transform:
    translateX(-50%)
    scale(.82);

  border-radius:
    50%;

  background:
    radial-gradient(
      circle,
      rgba(54, 151, 255, .18),
      transparent 68%
    );

  filter:
    blur(10px);

  opacity: 0;

  pointer-events: none;

  transition:
    opacity 220ms ease,
    transform 220ms ease;
}


#loginView
.client-profile-card:hover::before,
#loginView
.client-profile-card:focus-visible::before {
  opacity: 1;

  transform:
    translateX(-50%)
    scale(1.22);
}


/* =========================================================
   ANIMATIONS
   ========================================================= */

@keyframes endcorePremiumAuraLeft {
  0% {
    transform:
      translate3d(
        -3vw,
        -2vh,
        0
      )
      scale(.90);

    opacity: .40;
  }

  50% {
    transform:
      translate3d(
        9vw,
        7vh,
        0
      )
      scale(1.08);

    opacity: .66;
  }

  100% {
    transform:
      translate3d(
        4vw,
        2vh,
        0
      )
      scale(.98);

    opacity: .52;
  }
}


@keyframes endcorePremiumAuraRight {
  0% {
    transform:
      translate3d(
        3vw,
        2vh,
        0
      )
      scale(.92);

    opacity: .38;
  }

  50% {
    transform:
      translate3d(
        -8vw,
        -7vh,
        0
      )
      scale(1.10);

    opacity: .64;
  }

  100% {
    transform:
      translate3d(
        -3vw,
        -3vh,
        0
      )
      scale(1);
  }
}


@keyframes endcorePremiumGridTravel {
  from {
    transform:
      translate3d(
        -38px,
        -38px,
        0
      );
  }

  to {
    transform:
      translate3d(
        38px,
        38px,
        0
      );
  }
}


@keyframes endcorePremiumPanelLife {
  0%,
  100% {
    border-color:
      rgba(76, 145, 239, .27);

    box-shadow:
      0 48px 140px
        rgba(0, 0, 0, .58),

      0 0 70px
        rgba(29, 111, 237, .075),

      inset 0 1px 0
        rgba(255, 255, 255, .055);
  }

  50% {
    border-color:
      rgba(94, 166, 255, .42);

    box-shadow:
      0 48px 140px
        rgba(0, 0, 0, .58),

      0 0 105px
        rgba(32, 123, 246, .15),

      inset 0 1px 0
        rgba(255, 255, 255, .08);
  }
}


@keyframes endcorePremiumEdgeLife {
  0%,
  100% {
    opacity: .35;

    transform:
      scaleX(.65);
  }

  50% {
    opacity: 1;

    transform:
      scaleX(1);
  }
}


@keyframes endcorePremiumReflection {
  0%,
  100% {
    opacity: .36;

    transform:
      scaleX(.76);
  }

  50% {
    opacity: .85;

    transform:
      scaleX(1.07);
  }
}


@keyframes endcorePremiumLogoFloat {
  0%,
  100% {
    transform:
      translate3d(
        0,
        0,
        0
      )
      rotate(-.7deg)
      scale(1);
  }

  50% {
    transform:
      translate3d(
        0,
        -16px,
        0
      )
      rotate(.7deg)
      scale(1.025);
  }
}


@keyframes endcorePremiumLogoGlow {
  0%,
  100% {
    opacity: .48;

    transform:
      scale(.88);
  }

  50% {
    opacity: 1;

    transform:
      scale(1.15);
  }
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (
  max-width: 900px
) {

  #loginView.client-entry-view {
    padding:
      22px !important;
  }


  #loginView
  > .client-entry-shell {
    width:
      calc(100vw - 44px)
      !important;

    min-height:
      calc(100dvh - 44px)
      !important;
  }
}


@media (
  max-width: 680px
) {

  #loginView.client-entry-view {
    padding:
      0 !important;
  }


  #loginView
  > .client-entry-shell {
    width:
      100vw !important;

    min-height:
      100dvh !important;

    max-height:
      none !important;

    border-radius:
      0 !important;
  }
}


/* Respect accessibility preference. */
@media (
  prefers-reduced-motion:
    reduce
) {

  #loginView
  .client-entry-aura,

  #loginView
  .client-entry-grid-light,

  #loginView
  .client-entry-shell,

  #loginView
  .client-entry-shell::before,

  #loginView
  .client-entry-shell::after,

  #loginView
  .client-entry-logo-orbit,

  #loginView
  .client-entry-logo-glow {
    animation:
      none !important;
  }
}


/* =========================================================
   ENDCORE 1.7 — PREMIUM3 SEAMLESS ATMOSPHERE
   Remove visible rectangular glow boundaries.
   ========================================================= */


/*
 * The old login must contribute no decorative
 * pseudo-elements to the canonical Client Entry.
 */
#loginView.client-entry-view::before,
#loginView.client-entry-view::after {
  content: none !important;
  display: none !important;
}


/* ---------------------------------------------------------
   ONE CONTINUOUS FULL-SCREEN ATMOSPHERE
   --------------------------------------------------------- */

#loginView
> .client-entry-background {
  position: absolute !important;

  inset: 0 !important;

  overflow: hidden !important;

  background:
    radial-gradient(
      ellipse at 50% -10%,
      rgba(30, 105, 225, .12),
      transparent 54%
    ),

    radial-gradient(
      ellipse at 0% 38%,
      rgba(27, 103, 218, .08),
      transparent 48%
    ),

    radial-gradient(
      ellipse at 100% 82%,
      rgba(96, 52, 210, .09),
      transparent 48%
    ),

    linear-gradient(
      135deg,
      #020813 0%,
      #031023 48%,
      #05091b 100%
    )
    !important;
}


/*
 * Retire the previous boxed aura DIVs.
 * The moving atmosphere is now generated by
 * oversized fullscreen pseudo-elements instead.
 */
#loginView
.client-entry-aura {
  display: none !important;
}


/* ---------------------------------------------------------
   BLUE MOVING AURA — NO BOX EDGES
   --------------------------------------------------------- */

#loginView
> .client-entry-background::before {
  content: "";

  position: absolute !important;

  inset: -28% !important;

  width: auto !important;
  height: auto !important;

  left: -28% !important;
  right: -28% !important;
  top: -28% !important;
  bottom: -28% !important;

  border-radius: 0 !important;

  background:
    radial-gradient(
      ellipse at 22% 28%,
      rgba(43, 133, 255, .24) 0%,
      rgba(31, 99, 214, .13) 22%,
      rgba(29, 75, 174, .045) 40%,
      transparent 64%
    )
    !important;

  filter:
    blur(38px) !important;

  opacity: .88;

  transform:
    translate3d(0, 0, 0);

  will-change:
    transform,
    opacity;

  animation:
    endcoreSeamlessBlueAura
    20s ease-in-out infinite
    alternate
    !important;
}


/* ---------------------------------------------------------
   PURPLE / BLUE MOVING AURA — NO BOX EDGES
   --------------------------------------------------------- */

#loginView
> .client-entry-background::after {
  content: "";

  position: absolute !important;

  inset: -28% !important;

  width: auto !important;
  height: auto !important;

  left: -28% !important;
  right: -28% !important;
  top: -28% !important;
  bottom: -28% !important;

  border-radius: 0 !important;

  background:
    radial-gradient(
      ellipse at 78% 72%,
      rgba(111, 70, 234, .16) 0%,
      rgba(47, 108, 224, .105) 25%,
      rgba(35, 72, 168, .035) 43%,
      transparent 65%
    )
    !important;

  filter:
    blur(44px) !important;

  opacity: .82;

  transform:
    translate3d(0, 0, 0);

  will-change:
    transform,
    opacity;

  animation:
    endcoreSeamlessPurpleAura
    25s ease-in-out infinite
    alternate
    !important;
}


/* ---------------------------------------------------------
   GRID REMAINS, BUT DISSOLVES INTO THE BACKGROUND
   --------------------------------------------------------- */

#loginView
.client-entry-grid-light {
  inset: -12% !important;

  opacity: .055 !important;

  mask-image:
    radial-gradient(
      ellipse at center,
      rgba(0, 0, 0, .85) 0%,
      rgba(0, 0, 0, .52) 38%,
      transparent 74%
    )
    !important;

  -webkit-mask-image:
    radial-gradient(
      ellipse at center,
      rgba(0, 0, 0, .85) 0%,
      rgba(0, 0, 0, .52) 38%,
      transparent 74%
    )
    !important;
}


/* ---------------------------------------------------------
   ATMOSPHERE MOTION
   --------------------------------------------------------- */

@keyframes endcoreSeamlessBlueAura {
  0% {
    transform:
      translate3d(
        -3vw,
        -2vh,
        0
      )
      scale(.98);

    opacity: .68;
  }

  50% {
    transform:
      translate3d(
        7vw,
        5vh,
        0
      )
      scale(1.08);

    opacity: .94;
  }

  100% {
    transform:
      translate3d(
        3vw,
        -1vh,
        0
      )
      scale(1.02);

    opacity: .78;
  }
}


@keyframes endcoreSeamlessPurpleAura {
  0% {
    transform:
      translate3d(
        4vw,
        3vh,
        0
      )
      scale(.96);

    opacity: .62;
  }

  50% {
    transform:
      translate3d(
        -6vw,
        -4vh,
        0
      )
      scale(1.09);

    opacity: .88;
  }

  100% {
    transform:
      translate3d(
        -2vw,
        2vh,
        0
      )
      scale(1.01);

    opacity: .72;
  }
}


@media (
  prefers-reduced-motion:
    reduce
) {

  #loginView
  > .client-entry-background::before,

  #loginView
  > .client-entry-background::after {
    animation:
      none !important;
  }
}


/* =========================================================
   ENDCORE 1.7 — PREMIUM4
   TRUE SEAMLESS FULL-VIEWPORT ATMOSPHERE

   No rectangular atmosphere layers.
   The viewport itself is the atmosphere.
   ========================================================= */


/*
 * Kill the independent atmospheric container completely.
 * This removes any possibility of visible rectangular edges.
 */
#loginView
> .client-entry-background {
  display: none !important;
}


/* ---------------------------------------------------------
   THE LOGIN VIEW ITSELF BECOMES THE LIVING BACKGROUND
   --------------------------------------------------------- */

#loginView.client-entry-view {
  background:

    radial-gradient(
      ellipse at 14% 18%,
      rgba(37, 124, 245, .19) 0%,
      rgba(25, 82, 182, .085) 26%,
      transparent 52%
    ),

    radial-gradient(
      ellipse at 86% 82%,
      rgba(103, 63, 230, .145) 0%,
      rgba(40, 94, 211, .075) 28%,
      transparent 55%
    ),

    radial-gradient(
      ellipse at 52% -10%,
      rgba(41, 117, 230, .12) 0%,
      transparent 48%
    ),

    linear-gradient(
      135deg,
      #020813 0%,
      #031023 48%,
      #06091a 100%
    )

    !important;


  background-size:
    135% 135%,
    145% 145%,
    125% 125%,
    100% 100%

    !important;


  background-position:
    0% 0%,
    100% 100%,
    50% 0%,
    center

    !important;


  animation:
    endcoreViewportAtmosphere
    22s
    ease-in-out
    infinite
    alternate

    !important;
}


/* ---------------------------------------------------------
   VERY SUBTLE INNER LIGHT AROUND THE WHOLE SCREEN
   Not a box — it reaches the viewport edges.
   --------------------------------------------------------- */

#loginView.client-entry-view {
  box-shadow:

    inset 0 0 180px
      rgba(12, 55, 128, .10),

    inset 0 -120px 180px
      rgba(54, 38, 145, .055)

    !important;
}


/* ---------------------------------------------------------
   BACKGROUND MOTION
   --------------------------------------------------------- */

@keyframes endcoreViewportAtmosphere {

  0% {
    background-position:
      0% 0%,
      100% 100%,
      48% 0%,
      center;
  }


  35% {
    background-position:
      8% 5%,
      92% 93%,
      52% 3%,
      center;
  }


  70% {
    background-position:
      3% 10%,
      96% 87%,
      55% 0%,
      center;
  }


  100% {
    background-position:
      11% 3%,
      89% 96%,
      49% 5%,
      center;
  }
}


/* ---------------------------------------------------------
   ACCESSIBILITY
   --------------------------------------------------------- */

@media (
  prefers-reduced-motion:
    reduce
) {

  #loginView.client-entry-view {
    animation:
      none !important;
  }
}


/* =========================================================
   ENDCORE 1.7 — PREMIUM4.1 VISIBILITY FIX
   hidden must always win over premium full-screen layout.
   ========================================================= */

#loginView.client-entry-view[hidden] {
  display: none !important;
}


/*
 * While Client Entry owns the viewport, prevent the
 * application behind it from creating a body scrollbar.
 *
 * Once loginView becomes hidden this rule no longer applies.
 */
html:has(
  #loginView.client-entry-view:not([hidden])
),
body:has(
  #loginView.client-entry-view:not([hidden])
) {
  overflow: hidden !important;
}


/* =========================================================
   ENDCORE 1.7 A4 — REAL SERVER HEALTH
   ========================================================= */

.client-server-dot.is-online,
.server-nav-status.is-online {
  background:
    #2bd477 !important;

  box-shadow:
    0 0 0 4px
      rgba(43, 212, 119, .10),
    0 0 12px
      rgba(43, 212, 119, .48)
    !important;
}


.client-server-dot.is-degraded,
.server-nav-status.is-degraded {
  background:
    #f0b743 !important;

  box-shadow:
    0 0 0 4px
      rgba(240, 183, 67, .10),
    0 0 12px
      rgba(240, 183, 67, .40)
    !important;
}


.client-server-dot.is-offline,
.server-nav-status.is-offline {
  background:
    #e65b67 !important;

  box-shadow:
    0 0 0 4px
      rgba(230, 91, 103, .09),
    0 0 10px
      rgba(230, 91, 103, .30)
    !important;
}


.client-server-dot.is-checking,
.server-nav-status.is-checking {
  background:
    #68aef7 !important;

  box-shadow:
    0 0 0 4px
      rgba(104, 174, 247, .09),
    0 0 12px
      rgba(104, 174, 247, .36)
    !important;

  animation:
    endcoreServerChecking
    1.15s ease-in-out infinite;
}


.client-server-dot.is-unknown,
.server-nav-status.is-unknown,
.client-server-dot.is-unsupported,
.server-nav-status.is-unsupported {
  background:
    #707c8b !important;

  box-shadow:
    none !important;
}


.server-nav-current {
  white-space:
    nowrap;

  font-size:
    7.5px;
}


@keyframes endcoreServerChecking {
  0%,
  100% {
    opacity: .45;
  }

  50% {
    opacity: 1;
  }
}


/* =========================================================
   ENDCORE 1.7 A5 — PROVIDER SELECTOR
   ========================================================= */

.client-entry-form select {
  width: 100%;

  min-height: 48px;

  box-sizing: border-box;

  padding:
    0 14px;

  border:
    1px solid
    rgba(89, 143, 206, .25);

  border-radius:
    12px;

  outline:
    none;

  background:
    rgba(4, 15, 29, .88);

  color:
    rgba(239, 247, 255, .96);

  font:
    inherit;

  cursor:
    pointer;

  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    background 160ms ease;
}


.client-entry-form select:focus {
  border-color:
    rgba(75, 158, 255, .72);

  box-shadow:
    0 0 0 3px
    rgba(57, 137, 239, .10);

  background:
    rgba(6, 20, 38, .96);
}


.client-provider-ready-meta {
  max-width:
    620px;

  margin:
    28px auto 0;

  padding:
    13px 18px;

  border:
    1px solid
    rgba(67, 148, 239, .20);

  border-radius:
    12px;

  background:
    rgba(6, 20, 38, .56);

  color:
    rgba(140, 193, 246, .82);

  font-size:
    13px;

  text-align:
    center;

  word-break:
    break-word;
}

/* =========================================================
   LOCAL PROFILE MANAGEMENT
   ========================================================= */

#loginView
.client-profile-shell {
  width: 126px;
  position: relative;
  flex: 0 0 auto;
}


#loginView
.client-profile-edit {
  position: absolute;
  z-index: 8;

  top: 0;
  right: 0;

  width: 30px;
  height: 30px;

  display: grid;
  place-items: center;

  padding: 0;

  border:
    1px solid
    rgba(99, 174, 243, .32);

  border-radius: 50%;

  background:
    rgba(7, 25, 43, .90);

  color:
    rgba(211, 235, 255, .90);

  font-size: 15px;
  line-height: 1;

  cursor: pointer;

  opacity: .70;

  transform:
    translate(5px, -3px);

  transition:
    opacity 160ms ease,
    transform 160ms ease,
    border-color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease;
}


#loginView
.client-profile-shell:hover
.client-profile-edit,
#loginView
.client-profile-edit:focus-visible {
  opacity: 1;

  transform:
    translate(5px, -5px)
    scale(1.06);

  border-color:
    rgba(88, 177, 255, .72);

  background:
    rgba(12, 42, 70, .96);

  box-shadow:
    0 0 20px
    rgba(54, 151, 255, .18);
}


.client-local-profile-overlay {
  position: fixed;
  z-index: 10000;

  inset: 0;

  display: grid;
  place-items: center;

  padding: 24px;

  background:
    rgba(2, 8, 15, .72);

  backdrop-filter:
    blur(12px);
}


.client-local-profile-dialog {
  width:
    min(470px, 100%);

  padding: 26px;

  border:
    1px solid
    rgba(100, 168, 232, .22);

  border-radius: 22px;

  background:
    linear-gradient(
      180deg,
      rgba(12, 32, 53, .98),
      rgba(7, 20, 35, .98)
    );

  box-shadow:
    0 30px 90px
    rgba(0, 0, 0, .48),
    0 0 50px
    rgba(45, 137, 225, .08);
}


.client-local-profile-dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 20px;

  margin-bottom: 24px;
}


.client-local-profile-dialog-head h2 {
  margin: 5px 0 0;

  color: #f3f8ff;

  font-size: 25px;
}


.client-local-profile-close {
  width: 36px;
  height: 36px;

  display: grid;
  place-items: center;

  border:
    1px solid
    rgba(125, 172, 214, .17);

  border-radius: 50%;

  background:
    rgba(255, 255, 255, .035);

  color:
    rgba(220, 235, 249, .72);

  font-size: 22px;

  cursor: pointer;
}


.client-local-profile-field {
  display: grid;

  gap: 8px;
}


.client-local-profile-field > span {
  color:
    rgba(201, 222, 241, .72);

  font-size: 13px;
  font-weight: 650;
}


.client-local-profile-field input {
  width: 100%;

  box-sizing: border-box;

  min-height: 48px;

  padding:
    0 14px;

  border:
    1px solid
    rgba(102, 167, 226, .22);

  border-radius: 12px;

  outline: none;

  background:
    rgba(4, 17, 30, .80);

  color: #f4f8ff;

  font: inherit;
}


.client-local-profile-field input:focus {
  border-color:
    rgba(72, 165, 249, .72);

  box-shadow:
    0 0 0 3px
    rgba(53, 148, 236, .10);
}


.client-local-profile-note {
  margin:
    16px 0 21px;

  color:
    rgba(180, 204, 226, .64);

  font-size: 13px;
  line-height: 1.55;
}


.client-local-profile-actions {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1fr);

  gap: 10px;
}


.client-local-profile-actions
.client-entry-button,
.client-local-profile-actions
.client-entry-danger {
  width: 100%;
}


@media (max-width: 620px) {
  #loginView
  .client-profile-shell {
    width: 104px;
  }


  .client-local-profile-actions {
    grid-template-columns:
      1fr;
  }
}