/* =========================================================
   Projekt: HelionForge
   Datei: /public/css/auth.css

   Ziel:
   - Auth Modal (Login/Register) als AAA Sci-Fi Glass Panel
   - Farbsystem übernimmt Variablen aus /public/css/header.css
     (Steel + Ember, clean, nicht zu düster)
   - Keine Inline-Styles mehr im Header
========================================================= */

/* ------------------------------
   Modal Root
------------------------------ */
.auth-modal[hidden]{ display:none !important; }

.auth-modal{
  position: fixed;
  inset: 0;
  z-index: 9999;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 22px;
}

/* Backdrop: weich, sci-fi glass */
.auth-modal__backdrop{
  position: absolute;
  inset: 0;

  background: rgba(0,0,0,.64);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  /* leichter Ember glow */
  background-image:
    radial-gradient(720px 520px at 18% 8%, rgba(255,122,26,.12), transparent 62%),
    radial-gradient(720px 520px at 82% 10%, rgba(255,177,74,.08), transparent 62%);

  cursor: pointer;
}

/* ------------------------------
   Panel
------------------------------ */
.auth-modal__panel{
  position: relative;
  width: min(540px, 100%);
  border-radius: 20px;

  overflow: hidden;

  border: 1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(900px 260px at 50% -80px, rgba(255,122,26,.12), transparent 60%),
    linear-gradient(180deg, rgba(16,20,34,.92), rgba(10,12,20,.92));

  box-shadow:
    0 0 0 1px rgba(255,255,255,.06),
    0 22px 80px rgba(0,0,0,.62),
    0 0 70px rgba(255,122,26,.08);

  transform: translateY(0);
  animation: authPop .14s ease-out;
}

@keyframes authPop{
  from{ opacity: 0; transform: translateY(6px) scale(.99); }
  to{ opacity: 1; transform: translateY(0) scale(1); }
}

/* Subtle top grid line */
.auth-modal__panel::before{
  content:"";
  position:absolute;
  inset: 0;
  pointer-events:none;
  opacity:.45;
  background:
    linear-gradient(90deg, transparent, rgba(255,122,26,.28), rgba(241,199,109,.18), rgba(207,214,230,.10), transparent);
  height: 2px;
}

/* ------------------------------
   Topbar
------------------------------ */
.auth-modal__top{
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 16px 18px;

  border-bottom: 1px solid rgba(255,255,255,.10);
}

.auth-modal__title{
  font-size: 13px;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 900;
  color: var(--steel);
  opacity: .95;
}

.auth-modal__close{
  appearance: none;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: var(--text);

  width: 38px;
  height: 38px;
  border-radius: 12px;

  display: grid;
  place-items: center;

  cursor: pointer;

  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}

.auth-modal__close:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.20);
  background: rgba(255,255,255,.06);
}

.auth-modal__close:active{ transform: translateY(0); }

/* ------------------------------
   Tabs
------------------------------ */
.auth-tabs{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;

  padding: 12px 18px 0;
}

.auth-tab{
  appearance: none;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: var(--text);

  border-radius: 14px;
  padding: 10px 12px;

  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 12px;

  cursor: pointer;

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

.auth-tab:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.055);
}

.auth-tab[aria-selected="true"]{
  border-color: rgba(255,122,26,.38);
  background:
    linear-gradient(180deg, rgba(255,122,26,.18), rgba(255,122,26,.08));
  box-shadow: 0 0 0 1px rgba(255,122,26,.10);
}

/* ------------------------------
   Body / Text
------------------------------ */
.auth-body{
  padding: 16px 18px 18px;
}

.auth-hint{
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
}

.auth-hint strong{
  color: var(--text);
  font-weight: 900;
}

/* ------------------------------
   Message box
------------------------------ */
.auth-msg{
  margin-top: 10px;
  margin-bottom: 14px;

  padding: 10px 12px;
  border-radius: 14px;

  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);

  font-size: 13px;
  line-height: 1.45;

  display: none;
}

.auth-msg.is-visible{ display:block; }

.auth-msg.is-error{
  border-color: rgba(255,80,80,.32);
  box-shadow: 0 0 0 1px rgba(255,80,80,.10);
}

.auth-msg.is-ok{
  border-color: rgba(80,255,160,.22);
  box-shadow: 0 0 0 1px rgba(80,255,160,.08);
}

/* ------------------------------
   Forms
------------------------------ */
.auth-form{ display:none; }
.auth-form.is-active{ display:block; }

.auth-grid{
  display: grid;
  gap: 10px;
}

.auth-row{
  display: grid;
  gap: 6px;
}

.auth-label{
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(238,241,255,.78);
  font-weight: 900;
}

.auth-input{
  width: 100%;
  padding: 12px 12px;

  border-radius: 14px;

  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.035);

  color: var(--text);
  outline: none;

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

.auth-input::placeholder{
  color: rgba(238,241,255,.40);
}

.auth-input:focus{
  border-color: rgba(255,122,26,.38);
  background: rgba(255,255,255,.05);
  box-shadow:
    0 0 0 1px rgba(255,122,26,.10),
    0 0 30px rgba(255,122,26,.06);
}

/* Checkbox rows */
.auth-check{
  display:flex;
  align-items:center;
  gap: 8px;
  color: rgba(238,241,255,.78);
  user-select:none;
}

.auth-check input{
  width: 16px;
  height: 16px;
  accent-color: var(--ember);
}

.auth-check--tos{
  align-items:flex-start;
  max-width: 380px;
}

/* ------------------------------
   Actions / Links
------------------------------ */
.auth-meta{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  margin-top: 6px;

  font-size: 12px;
  color: rgba(238,241,255,.78);
}

.auth-link{
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
  opacity: .90;
  transition: opacity .12s ease, transform .12s ease;
}

.auth-link:hover{
  opacity: 1;
  transform: translateY(-1px);
}

.auth-actions{
  margin-top: 14px;

  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.auth-btn{
  appearance: none;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);

  color: var(--text);
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 12px;

  border-radius: 999px;
  height: 42px;
  padding: 0 16px;

  cursor: pointer;

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

.auth-btn:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
}

.auth-btn:active{ transform: translateY(0); }

.auth-btn.primary{
  border-color: rgba(255,122,26,.42);
  background: linear-gradient(180deg, rgba(255,122,26,.24), rgba(255,122,26,.10));
  box-shadow:
    0 0 0 1px rgba(255,122,26,.10),
    0 18px 45px rgba(255,122,26,.10);
}

.auth-btn.primary:hover{
  border-color: rgba(255,177,74,.52);
  box-shadow:
    0 0 0 1px rgba(255,177,74,.14),
    0 22px 60px rgba(255,122,26,.14);
}

/* ------------------------------
   Responsive
------------------------------ */
@media (max-width: 520px){
  .auth-modal{ padding: 14px; }
  .auth-tabs{ grid-template-columns: 1fr; }
  .auth-actions{ justify-content: stretch; }
  .auth-btn{ width: 100%; }
  .auth-meta{ flex-direction: column; align-items:flex-start; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .auth-modal__panel{ animation: none; }
  .auth-tab,
  .auth-btn,
  .auth-modal__close,
  .auth-link{ transition: none; }
}

/* =========================================================
   RESET UI (Root Page) – scoped, damit Modal nicht beeinflusst wird
   Seite: /reset.php
   bodyClass: page-reset
========================================================= */

.page-reset .auth-wrap{
  min-height: calc(100svh - 120px);
  display: grid;
  place-items: center;
  padding: 26px 14px;
}

.page-reset .auth-card{
  width: min(640px, 100%);
  border-radius: 20px;
  overflow: hidden;

  border: 1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(900px 260px at 50% -80px, rgba(255,122,26,.12), transparent 60%),
    linear-gradient(180deg, rgba(16,20,34,.92), rgba(10,12,20,.92));

  box-shadow:
    0 0 0 1px rgba(255,255,255,.06),
    0 22px 80px rgba(0,0,0,.62),
    0 0 70px rgba(255,122,26,.08);
}

.page-reset .auth-head{
  padding: 18px 18px 10px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}

.page-reset .auth-title{
  font-size: 14px;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 900;
  color: var(--steel);
  opacity: .95;
}

.page-reset .auth-sub{
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
}

.page-reset #resetMsg.auth-msg{
  margin: 14px 18px 0;
}

.page-reset .auth-form{
  padding: 14px 18px 18px;
}

/* /reset.php nutzt .field statt .auth-row – wir mappen das auf den Modal-Look */
.page-reset .field{
  display: grid;
  gap: 6px;
  margin-bottom: 10px;
}

.page-reset .field label{
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(238,241,255,.78);
  font-weight: 900;
}

.page-reset .field input{
  width: 100%;
  padding: 12px 12px;
  border-radius: 14px;

  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.035);

  color: var(--text);
  outline: none;

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

.page-reset .field input::placeholder{
  color: rgba(238,241,255,.40);
}

.page-reset .field input:focus{
  border-color: rgba(255,122,26,.38);
  background: rgba(255,255,255,.05);
  box-shadow:
    0 0 0 1px rgba(255,122,26,.10),
    0 0 30px rgba(255,122,26,.06);
}

/* Reset-Seite verwendet .btn Klassen – wir stylen sie scoped, falls global nicht existiert */
.page-reset .btn{
  appearance: none;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: var(--text);

  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 12px;

  border-radius: 999px;
  height: 42px;
  padding: 0 16px;

  cursor: pointer;
  text-decoration: none;

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

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

.page-reset .btn:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
}

.page-reset .btn:active{ transform: translateY(0); }

.page-reset .btn-lg{
  height: 48px;
  padding: 0 18px;
}

.page-reset .btn-primary{
  border-color: rgba(255,122,26,.42);
  background: linear-gradient(180deg, rgba(255,122,26,.24), rgba(255,122,26,.10));
  box-shadow:
    0 0 0 1px rgba(255,122,26,.10),
    0 18px 45px rgba(255,122,26,.10);
}

.page-reset .btn-primary:hover{
  border-color: rgba(255,177,74,.52);
  box-shadow:
    0 0 0 1px rgba(255,177,74,.14),
    0 22px 60px rgba(255,122,26,.14);
}

.page-reset .btn-ghost{
  border-color: rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
}

.page-reset .auth-actions{
  margin-top: 14px;
  justify-content: flex-end;
}

.page-reset .auth-hint{
  margin-top: 12px;
  font-size: 12px;
  line-height: 1.6;
  color: rgba(238,241,255,.66);
}

/* Mobile */
@media (max-width: 520px){
  .page-reset .auth-actions{ justify-content: stretch; }
  .page-reset .btn{ width: 100%; }
}