/* ==========================================================
   ERROR404 // GEMEINSAMES ACCOUNTSYSTEM
   Portal + Chat
   ========================================================== */

.e404-account-overlay{
  --account-cyan:var(--cyan,#19f3ff);
  --account-pink:var(--pink,#ff5cef);
  --account-bg:#020810;
  --account-panel:#040c16;
  --account-text:#f3f7fb;
  --account-muted:#8c99a8;
  --account-error:#ff7895;
}

.e404-account-card{
  position:relative;

  width:min(540px,calc(100vw - 28px));
  max-height:calc(100dvh - 28px);
  padding:30px;

  overflow-x:hidden;
  overflow-y:auto;

  border:1px solid rgba(25,243,255,.50);
  border-radius:18px;

  color:var(--account-text);

  background:
    radial-gradient(
      circle at 8% 5%,
      rgba(25,243,255,.12),
      transparent 30%
    ),
    radial-gradient(
      circle at 92% 88%,
      rgba(255,92,239,.11),
      transparent 34%
    ),
    linear-gradient(
      180deg,
      rgba(4,13,23,.99),
      rgba(2,7,14,.99)
    );

  box-shadow:
    0 0 28px rgba(25,243,255,.14),
    0 0 65px rgba(255,92,239,.09),
    0 28px 85px rgba(0,0,0,.72);
}

.e404-account-card::before{
  content:"";
  position:absolute;
  top:0;
  left:22px;
  right:22px;
  height:1px;

  background:linear-gradient(
    90deg,
    transparent,
    var(--account-cyan),
    var(--account-pink),
    transparent
  );

  opacity:.9;
}

.e404-account-brand{
  display:block;
  width:max-content;
  margin:0 auto;

  font-size:clamp(36px,8vw,48px);
  font-weight:900;
  font-style:italic;
  line-height:1;
  letter-spacing:-4px;
  text-decoration:none;
}

.e404-account-brand .cyan{
  color:var(--account-cyan);
  text-shadow:0 0 15px var(--account-cyan);
}

.e404-account-brand .pink{
  color:var(--account-pink);
  text-shadow:0 0 15px var(--account-pink);
}

.e404-account-subtitle{
  margin:10px 0 25px;

  color:#c6ced8;
  text-align:center;
  font-size:10px;
  font-weight:700;
  letter-spacing:5px;
}

.e404-account-tabs{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7px;

  margin-bottom:22px;
  padding:4px;

  border:1px solid rgba(255,255,255,.07);
  border-radius:11px;

  background:rgba(0,0,0,.22);
}

.e404-account-tabs button{
  min-height:42px;
  padding:8px;

  border:1px solid transparent;
  border-radius:8px;

  color:#7e8997;
  background:transparent;

  font-size:10px;
  font-weight:800;
  letter-spacing:1.3px;

  transition:
    color .18s ease,
    border-color .18s ease,
    background .18s ease,
    box-shadow .18s ease;
}

.e404-account-tabs button:hover{
  color:var(--account-pink);
  border-color:rgba(255,92,239,.28);
}

.e404-account-tabs button.active{
  color:var(--account-cyan);
  border-color:rgba(25,243,255,.48);

  background:rgba(25,243,255,.055);

  box-shadow:
    inset 0 -2px 0 var(--account-cyan),
    0 0 14px rgba(25,243,255,.12);
}

.e404-account-form{
  display:block;
}

.e404-account-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 12px;
}

.e404-account-row{
  display:block;
  min-width:0;
  margin-bottom:14px;
}

.e404-account-row.e404-account-full{
  grid-column:1 / -1;
}

.e404-account-label{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;

  min-height:17px;
  margin-bottom:6px;

  color:var(--account-cyan);
  font-size:10px;
  font-weight:800;
  letter-spacing:1px;
}

.e404-account-optional{
  color:#697787;
  font-size:8px;
  font-weight:600;
  letter-spacing:.5px;
}

.e404-account-input-wrap{
  position:relative;
}

.e404-account-row input,
.e404-account-row select{
  width:100%;
  min-height:46px;
  padding:11px 13px;

  border:1px solid rgba(25,243,255,.30);
  border-radius:9px;
  outline:none;

  color:#f4f8fc;
  background:rgba(1,7,13,.93);

  font:inherit;

  transition:
    border-color .18s ease,
    box-shadow .18s ease,
    background .18s ease;
}

.e404-account-row input::placeholder{
  color:#536171;
}

.e404-account-row input:focus,
.e404-account-row select:focus{
  border-color:var(--account-pink);
  background:#020912;

  box-shadow:
    0 0 0 2px rgba(255,92,239,.055),
    0 0 15px rgba(255,92,239,.13);
}

.e404-account-row input.has-toggle{
  padding-right:50px;
}

.e404-password-toggle{
  position:absolute;
  top:50%;
  right:7px;
  transform:translateY(-50%);

  width:36px;
  height:34px;
  padding:0;

  display:grid;
  place-items:center;

  border:1px solid transparent;
  border-radius:7px;

  color:#748292;
  background:transparent;

  font-size:16px;
}

.e404-password-toggle:hover{
  color:var(--account-pink);
  border-color:rgba(255,92,239,.26);
  background:rgba(255,92,239,.05);
}

.e404-account-help{
  margin:-5px 0 14px;

  color:#718092;
  font-size:9px;
  line-height:1.5;
}

.e404-account-options{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;

  margin:2px 0 16px;
}

.e404-remember-row,
.e404-consent-row{
  position:relative;

  display:flex;
  align-items:flex-start;
  gap:9px;

  color:#9aa6b4;
  font-size:10px;
  line-height:1.45;
  cursor:pointer;
}

.e404-remember-row input,
.e404-consent-row input{
  width:16px;
  height:16px;
  min-width:16px;
  margin:0;
  margin-top:1px;

  accent-color:var(--account-cyan);
}

.e404-forgot-button{
  padding:3px 0;

  border:0;

  color:#8e9baa;
  background:transparent;

  font-size:10px;
}

.e404-forgot-button:hover{
  color:var(--account-pink);
  text-shadow:0 0 9px rgba(255,92,239,.32);
}

.e404-password-status{
  margin:-5px 0 14px;
}

.e404-password-meter{
  height:5px;
  overflow:hidden;

  border-radius:999px;

  background:rgba(255,255,255,.07);
}

.e404-password-meter span{
  display:block;
  width:0;
  height:100%;

  border-radius:inherit;

  background:var(--account-error);

  box-shadow:0 0 8px currentColor;

  transition:
    width .2s ease,
    background .2s ease;
}

.e404-password-meter[data-level="1"] span{
  width:25%;
  background:#ff6f7f;
}

.e404-password-meter[data-level="2"] span{
  width:50%;
  background:#ffb347;
}

.e404-password-meter[data-level="3"] span{
  width:75%;
  background:#e6e75c;
}

.e404-password-meter[data-level="4"] span{
  width:100%;
  background:#55ef92;
}

.e404-password-strength-text,
.e404-password-match{
  display:block;
  margin-top:6px;

  color:#6f7d8c;
  font-size:9px;
}

.e404-password-match.is-valid{
  color:#55ef92;
}

.e404-password-match.is-invalid{
  color:var(--account-error);
}

.e404-consents{
  display:grid;
  gap:8px;

  margin:5px 0 18px;
  padding:13px;

  border:1px solid rgba(255,255,255,.07);
  border-radius:10px;

  background:rgba(0,0,0,.20);
}

.e404-account-submit{
  width:100%;
  min-height:50px;
  padding:10px 16px;

  display:flex;
  align-items:center;
  justify-content:center;
  gap:24px;

  border:1px solid var(--account-pink);
  border-radius:9px;

  color:var(--account-pink);
  background:rgba(255,92,239,.04);

  font-weight:800;
  letter-spacing:1px;

  transition:
    color .18s ease,
    border-color .18s ease,
    background .18s ease,
    box-shadow .18s ease,
    transform .18s ease;
}

.e404-account-submit:hover{
  color:#fff;
  background:rgba(255,92,239,.10);

  box-shadow:
    0 0 18px rgba(255,92,239,.20),
    inset 0 0 16px rgba(255,92,239,.05);

  transform:translateY(-1px);
}

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

.e404-account-message{
  min-height:18px;
  margin:14px 0 0;

  color:var(--account-error);
  text-align:center;
  font-size:10px;
  line-height:1.5;
}

.e404-account-message.is-info{
  color:var(--account-cyan);
}

@media(max-width:600px){
  .e404-account-card{
    width:calc(100vw - 18px);
    max-height:calc(100dvh - 18px);
    padding:24px 17px;
    border-radius:14px;
  }

  .e404-account-grid{
    grid-template-columns:1fr;
  }

  .e404-account-row.e404-account-full{
    grid-column:auto;
  }

  .e404-account-options{
    align-items:flex-start;
    flex-direction:column;
  }

  .e404-account-subtitle{
    letter-spacing:3.5px;
  }
}

/* Passwortstärke mittig anzeigen */
.e404-password-strength-text,
.e404-password-status small{
  display:block;
  text-align:center;
}

/* Passwortstärke und Status mittig ausrichten */
.e404-password-status{
  text-align:center;
}

.e404-password-status small,
.e404-password-strength-text{
  display:block;
  width:100%;
  text-align:center;
}

/* ==========================================================
   ACCOUNT-FORMULAR KORREKTUREN
   ========================================================== */

/* Passwortstärke garantiert mittig */
#authCard .e404-password-status,
.portal-auth-card .e404-password-status{
  grid-column:1 / -1 !important;
  width:100% !important;
  text-align:center !important;
}

#authCard .e404-password-status small,
#authCard [data-password-strength-text],
.portal-auth-card .e404-password-status small,
.portal-auth-card [data-password-strength-text]{
  display:block !important;
  width:100% !important;
  margin-left:auto !important;
  margin-right:auto !important;
  text-align:center !important;
}

/* Auch der Balken bleibt über die gesamte Breite */
#authCard [data-password-meter],
.portal-auth-card [data-password-meter]{
  width:100% !important;
}

/* Passwortstärke mittig unter dem Balken */
.e404-account-form .e404-password-status{
  grid-column:1 / -1 !important;
  width:100% !important;
  text-align:center !important;
}

.e404-account-form .e404-password-status
[data-password-strength-text]{
  display:block !important;
  width:100% !important;
  margin:8px auto 0 !important;
  padding:0 !important;
  text-align:center !important;
  box-sizing:border-box !important;
}

.e404-account-form .e404-password-meter{
  width:100% !important;
  margin-left:auto !important;
  margin-right:auto !important;
}


/* ==========================================================
   ERROR404 // ACCOUNT-SCROLLBAR
   Cyan → Violett → Magenta
   ========================================================== */

.e404-account-form,
.e404-account-grid,
.portal-auth-card,
#authCard{
  /*
   * Keine feste scrollbar-color verwenden.
   * Chromium würde dadurch den Verlauf überschreiben.
   */
}

.e404-account-form::-webkit-scrollbar,
.e404-account-grid::-webkit-scrollbar,
.portal-auth-card::-webkit-scrollbar,
#authCard::-webkit-scrollbar{
  width:5px !important;
  height:5px !important;
  background:transparent !important;
}

.e404-account-form::-webkit-scrollbar-track,
.e404-account-grid::-webkit-scrollbar-track,
.portal-auth-card::-webkit-scrollbar-track,
#authCard::-webkit-scrollbar-track{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

.e404-account-form::-webkit-scrollbar-thumb,
.e404-account-grid::-webkit-scrollbar-thumb,
.portal-auth-card::-webkit-scrollbar-thumb,
#authCard::-webkit-scrollbar-thumb{
  background-color:#19f3ff !important;

  background-image:linear-gradient(
    180deg,
    #19f3ff 0%,
    #936eff 55%,
    #ff5cef 100%
  ) !important;

  border:0 !important;
  border-radius:999px !important;
  box-shadow:none !important;
}

.e404-account-form::-webkit-scrollbar-thumb:hover,
.e404-account-grid::-webkit-scrollbar-thumb:hover,
.portal-auth-card::-webkit-scrollbar-thumb:hover,
#authCard::-webkit-scrollbar-thumb:hover{
  background-image:linear-gradient(
    180deg,
    #ff5cef 0%,
    #936eff 45%,
    #19f3ff 100%
  ) !important;
}

.e404-account-form::-webkit-scrollbar-button,
.e404-account-grid::-webkit-scrollbar-button,
.portal-auth-card::-webkit-scrollbar-button,
#authCard::-webkit-scrollbar-button,
.e404-account-form::-webkit-scrollbar-button:single-button,
.e404-account-grid::-webkit-scrollbar-button:single-button,
.portal-auth-card::-webkit-scrollbar-button:single-button,
#authCard::-webkit-scrollbar-button:single-button{
  display:none !important;
  width:0 !important;
  height:0 !important;
  background:transparent !important;
}

.e404-account-form::-webkit-scrollbar-corner,
.e404-account-grid::-webkit-scrollbar-corner,
.portal-auth-card::-webkit-scrollbar-corner,
#authCard::-webkit-scrollbar-corner{
  background:transparent !important;
}