/* =========================================================
   TheSweeper
   Datei: /public/css/pages/auth.css

   Zweck:
   - AAA-Auth-Modal (Login + Registrierung) im "2030 Sci-Fi Terminal"-Look
   - Farben/Token sind an /public/css/base.css gekoppelt
   - Alle Klassen sind ts-auth-* prefixed

   Sichtbarkeit:
   - #tsAuthModal[aria-hidden="false"] => sichtbar

   UI Hooks (für späteres Backend/Validation):
   - .ts-auth-alert (mit [hidden] oder .is-error/.is-success/.is-info/.is-warn)
   - .ts-auth-inputwrap.is-error / .is-success / .is-warn
   - .ts-auth-field.is-error / .is-success
========================================================= */

/* verhindert scroll-jitter zusätzlich zur JS body-lock */
html.ts-auth-open { overflow: hidden; }

/* ---------------------------------------------------------
   Base tokens (scoped) – aus base.css abgeleitet
--------------------------------------------------------- */
.ts-auth-modal{
  /* globals from :root (base.css) */
  --ts-bg:    color-mix(in srgb, var(--bg) 86%, transparent);
  --ts-bg2:   color-mix(in srgb, var(--bg2) 86%, transparent);
  --ts-panel: var(--panel2);

  --ts-line:  var(--line);
  --ts-line2: var(--line2);

  --ts-text:  var(--text);
  --ts-muted: var(--muted);

  --ts-cyan:  var(--cyan);
  --ts-teal:  var(--teal);
  --ts-violet:var(--violet);
  --ts-amber: var(--warn);
  --ts-danger:var(--danger);

  --ts-shadow:  var(--shadow);
  --ts-shadow2: var(--shadow2);

  --ts-radius:  22px;
  --ts-radius2: 28px;

  --ts-font: var(--font-ui);
  --ts-mono: var(--font-mono);

  --ts-ease: cubic-bezier(0.2, 0.9, 0.2, 1);
  --ts-fast: 180ms var(--ts-ease);
  --ts-med:  320ms var(--ts-ease);
  --ts-slow: 600ms var(--ts-ease);

  /* derived (alpha helpers) */
  --ts-cyan-06:  color-mix(in srgb, var(--ts-cyan) 6%, transparent);
  --ts-cyan-10:  color-mix(in srgb, var(--ts-cyan) 10%, transparent);
  --ts-cyan-14:  color-mix(in srgb, var(--ts-cyan) 14%, transparent);
  --ts-cyan-18:  color-mix(in srgb, var(--ts-cyan) 18%, transparent);
  --ts-cyan-26:  color-mix(in srgb, var(--ts-cyan) 26%, transparent);
  --ts-cyan-36:  color-mix(in srgb, var(--ts-cyan) 36%, transparent);

  --ts-teal-06:  color-mix(in srgb, var(--ts-teal) 6%, transparent);
  --ts-teal-10:  color-mix(in srgb, var(--ts-teal) 10%, transparent);
  --ts-teal-16:  color-mix(in srgb, var(--ts-teal) 16%, transparent);
  --ts-teal-22:  color-mix(in srgb, var(--ts-teal) 22%, transparent);

  --ts-violet-06: color-mix(in srgb, var(--ts-violet) 6%, transparent);
  --ts-violet-10: color-mix(in srgb, var(--ts-violet) 10%, transparent);
  --ts-violet-16: color-mix(in srgb, var(--ts-violet) 16%, transparent);

  --ts-warn-06:  color-mix(in srgb, var(--ts-amber) 6%, transparent);
  --ts-warn-10:  color-mix(in srgb, var(--ts-amber) 10%, transparent);
  --ts-danger-08: color-mix(in srgb, var(--ts-danger) 8%, transparent);
  --ts-danger-14: color-mix(in srgb, var(--ts-danger) 14%, transparent);

  /* local focus (etwas "cleaner" als global) */
  --ts-focus: 0 0 0 3px color-mix(in srgb, var(--ts-cyan) 22%, transparent),
              0 0 0 1px color-mix(in srgb, var(--ts-cyan) 20%, transparent) inset;
}

.ts-auth-modal *{ box-sizing: border-box; }
.ts-auth-modal button,
.ts-auth-modal input{ font-family: var(--ts-font); }

.ts-auth-modal [hidden]{ display: none !important; }

/* ---------------------------------------------------------
   Overlay / visibility
--------------------------------------------------------- */
.ts-auth-modal{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: clamp(14px, 2.5vw, 32px);

  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity var(--ts-med), transform var(--ts-med);
}

.ts-auth-modal[aria-hidden="false"]{
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.ts-auth-backdrop{
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1050px 820px at 74% 14%, var(--ts-cyan-14), transparent 62%),
    radial-gradient(980px 760px  at 22% 84%, var(--ts-teal-10), transparent 64%),
    radial-gradient(900px 700px  at 45% 55%, var(--ts-violet-06), transparent 70%),
    linear-gradient(180deg, rgba(0,0,0,0.54), rgba(0,0,0,0.78));
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}

/* ---------------------------------------------------------
   Shell
--------------------------------------------------------- */
.ts-auth-shell{
  position: relative;
  width: min(920px, 92vw);
  max-height: min(86vh, 920px);
  overflow: hidden;

  border-radius: var(--ts-radius2);
  background:
    radial-gradient(1400px 900px at 18% 10%, var(--ts-cyan-10), transparent 56%),
    radial-gradient(1200px 900px at 86% 30%, var(--ts-violet-06), transparent 58%),
    radial-gradient(1000px 760px at 70% 85%, var(--ts-teal-06), transparent 62%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--bg2) 84%, transparent),
      color-mix(in srgb, var(--bg) 90%, transparent)
    );
  box-shadow: var(--ts-shadow);
  border: 1px solid rgba(255,255,255,0.14);
  isolation: isolate;

  display: grid;
  grid-template-rows: auto 1fr;
}

.ts-auth-shell::before{
  content:"";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(640px 100px at 50% 0%, rgba(255,255,255,0.16), transparent 72%),
    radial-gradient(900px 260px at 50% 120%, rgba(0,0,0,0.38), transparent 72%);
  opacity: 0.78;
  pointer-events: none;
  z-index: 0;
}

.ts-auth-shell::after{
  content:"";
  position: absolute;
  inset: 10px;
  border-radius: calc(var(--ts-radius2) - 10px);
  border: 1px solid rgba(255,255,255,0.10);
  pointer-events: none;
  z-index: 0;
}

/* ---------------------------------------------------------
   Chrome layers (grid / scanline / glow / noise)
--------------------------------------------------------- */
.ts-auth-chrome{
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.ts-auth-grid{
  position: absolute;
  inset: -2px;
  background:
    linear-gradient(var(--ts-cyan-18) 1px, transparent 1px) 0 0 / 46px 46px,
    linear-gradient(90deg, var(--ts-cyan-14) 1px, transparent 1px) 0 0 / 46px 46px,
    radial-gradient(900px 600px at 72% 18%, var(--ts-cyan-10), transparent 62%),
    radial-gradient(800px 700px at 22% 84%, var(--ts-teal-10), transparent 62%);
  opacity: 0.34;
  filter: blur(0.25px);
}

.ts-auth-glow{
  position: absolute;
  inset: 0;
  background:
    radial-gradient(720px 320px at 52% 14%, var(--ts-cyan-14), transparent 72%),
    radial-gradient(760px 360px at 60% 88%, var(--ts-teal-10), transparent 74%),
    radial-gradient(680px 320px at 28% 72%, var(--ts-violet-06), transparent 76%);
  opacity: 0.62;
  mix-blend-mode: screen;
}

.ts-auth-noise{
  position: absolute;
  inset: 0;
  background: var(--scanline);
  opacity: 0.16;
  mix-blend-mode: overlay;
  filter: contrast(110%) brightness(110%);
}

.ts-auth-scanline{
  position: absolute;
  left: 0;
  right: 0;
  top: -30%;
  height: 38%;
  background:
    linear-gradient(180deg,
      transparent 0%,
      var(--ts-cyan-10) 35%,
      rgba(255,255,255,0.05) 50%,
      var(--ts-cyan-06) 65%,
      transparent 100%);
  opacity: 0.52;
  transform: translateY(0);
  animation: tsAuthScan 4.6s var(--ts-ease) infinite;
}

@keyframes tsAuthScan{
  0%{ transform: translateY(0); }
  100%{ transform: translateY(190%); }
}

/* Corner accents */
.ts-auth-corners .c{
  position: absolute;
  width: 22px;
  height: 22px;
  border: 1px solid color-mix(in srgb, var(--ts-cyan) 38%, transparent);
  filter: drop-shadow(0 0 12px var(--ts-cyan-10));
  opacity: 0.95;
}

.ts-auth-corners .tl{ top: 14px; left: 14px; border-right: none; border-bottom: none; border-top-left-radius: 10px; }
.ts-auth-corners .tr{ top: 14px; right: 14px; border-left: none; border-bottom: none; border-top-right-radius: 10px; }
.ts-auth-corners .bl{ bottom: 14px; left: 14px; border-right: none; border-top: none; border-bottom-left-radius: 10px; }
.ts-auth-corners .br{ bottom: 14px; right: 14px; border-left: none; border-top: none; border-bottom-right-radius: 10px; }

/* ---------------------------------------------------------
   Close button
--------------------------------------------------------- */
.ts-auth-close{
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;

  width: 44px;
  height: 44px;
  border-radius: 14px;

  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.30);
  color: var(--ts-text);
  cursor: pointer;

  display: grid;
  place-items: center;

  box-shadow: var(--ts-shadow2);
  transition: transform var(--ts-fast), border-color var(--ts-fast), background var(--ts-fast), box-shadow var(--ts-fast);
}

.ts-auth-close:hover{
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--ts-cyan) 35%, transparent);
  background: rgba(0,0,0,0.40);
  box-shadow: 0 14px 36px rgba(0,0,0,0.42);
}
.ts-auth-close:active{ transform: translateY(0); }

.ts-auth-close span{
  font-size: 16px;
  line-height: 1;
  opacity: 0.9;
}

/* ---------------------------------------------------------
   Header / brand / tabs
--------------------------------------------------------- */
.ts-auth-header{
  position: relative;
  z-index: 2;
  padding: clamp(18px, 2.2vw, 26px) clamp(18px, 2.4vw, 30px) 14px;
  display: grid;
  gap: 12px;
}

.ts-auth-brand{
  display: flex;
  align-items: center;
  gap: 14px;
  padding-right: 54px;
}

.ts-auth-mark{
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display: grid;
  place-items: center;

  color: color-mix(in srgb, var(--ts-cyan) 92%, white);
  background:
    radial-gradient(44px 44px at 30% 25%, var(--ts-cyan-18), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(0,0,0,0.18));
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 10px 26px rgba(0,0,0,0.35);
  overflow: hidden;
}

.ts-auth-mark img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 7px;
  filter: drop-shadow(0 0 12px var(--ts-cyan-10));
  opacity: 0.98;
}

.ts-auth-titles{ display: grid; gap: 4px; }

.ts-auth-kicker{
  font-family: var(--ts-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ts-muted) 92%, white);
}

.ts-auth-title{
  margin: 0;
  font-size: clamp(18px, 2.1vw, 22px);
  letter-spacing: 0.02em;
  color: var(--ts-text);
}

.ts-auth-desc{
  margin: 0;
  font-size: 12px;
  line-height: 1.35;
  color: color-mix(in srgb, var(--ts-muted) 92%, white);
  max-width: 56ch;
}

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

  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 18px;
  padding: 8px;
  overflow: hidden;
}

.ts-auth-tab{
  position: relative;
  height: 44px;
  border-radius: 14px;
  border: 1px solid transparent;

  background: transparent;
  color: color-mix(in srgb, var(--ts-muted) 92%, white);
  cursor: pointer;

  font-weight: 800;
  letter-spacing: 0.02em;

  transition: background var(--ts-fast), border-color var(--ts-fast), color var(--ts-fast), transform var(--ts-fast);
}

.ts-auth-tab:hover{
  background: rgba(255,255,255,0.05);
  color: var(--ts-text);
  transform: translateY(-1px);
}
.ts-auth-tab:active{ transform: translateY(0); }

.ts-auth-tab.is-active{
  background:
    radial-gradient(240px 90px at 50% 0%, var(--ts-cyan-14), transparent 65%),
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(0,0,0,0.18));
  border-color: color-mix(in srgb, var(--ts-cyan) 30%, transparent);
  color: var(--ts-text);
  box-shadow: 0 10px 26px rgba(0,0,0,0.26);
}

.ts-auth-tab-underline{
  position: absolute;
  left: 10px;
  bottom: 6px;
  width: calc(50% - 15px);
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--ts-cyan) 92%, white),
    color-mix(in srgb, var(--ts-teal) 86%, white),
    color-mix(in srgb, var(--ts-cyan) 72%, white),
    transparent
  );
  filter: drop-shadow(0 0 10px var(--ts-cyan-10));
  opacity: 0.9;
  transition: left var(--ts-med), width var(--ts-med);
}

/* ---------------------------------------------------------
   Body / panels
--------------------------------------------------------- */
.ts-auth-body{
  position: relative;
  z-index: 2;
  padding: 10px clamp(18px, 2.4vw, 30px) clamp(18px, 2.6vw, 30px);
  overflow: auto;
  scrollbar-gutter: stable;
}

.ts-auth-panel{ display: none; }
.ts-auth-panel.is-active{
  display: block;
  animation: tsAuthPanelIn 360ms var(--ts-ease) both;
}

@keyframes tsAuthPanelIn{
  from{ opacity: 0; transform: translateY(6px); }
  to{ opacity: 1; transform: translateY(0); }
}

.ts-auth-form{ display: grid; gap: 14px; }

.ts-auth-split{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 760px){
  .ts-auth-split{ grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------
   Alert area (Login/Register Feedback)
--------------------------------------------------------- */
.ts-auth-alert{
  position: relative;
  display: flex;
  gap: 10px;
  align-items: flex-start;

  padding: 12px 12px;
  border-radius: 16px;

  border: 1px solid rgba(255,255,255,0.12);
  background:
    radial-gradient(380px 120px at 18% 0%, var(--ts-cyan-10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(0,0,0,0.22));
  box-shadow: 0 12px 28px rgba(0,0,0,0.24);

  color: color-mix(in srgb, var(--ts-muted) 92%, white);
  font-size: 13px;
  line-height: 1.35;
}

.ts-auth-alert::before{
  content:"";
  margin-top: 2px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ts-cyan) 92%, white);
  box-shadow: 0 0 14px var(--ts-cyan-10);
  flex: 0 0 auto;
}

.ts-auth-alert b{ color: var(--ts-text); font-weight: 800; }

.ts-auth-alert.is-info{
  border-color: color-mix(in srgb, var(--ts-cyan) 26%, transparent);
}
.ts-auth-alert.is-info::before{ background: color-mix(in srgb, var(--ts-cyan) 92%, white); }

.ts-auth-alert.is-success{
  border-color: color-mix(in srgb, var(--ts-teal) 30%, transparent);
  background:
    radial-gradient(380px 120px at 18% 0%, var(--ts-teal-16), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(0,0,0,0.22));
}
.ts-auth-alert.is-success::before{
  background: color-mix(in srgb, var(--ts-teal) 92%, white);
  box-shadow: 0 0 14px var(--ts-teal-10);
}

.ts-auth-alert.is-warn{
  border-color: color-mix(in srgb, var(--ts-amber) 32%, transparent);
  background:
    radial-gradient(380px 120px at 18% 0%, var(--ts-warn-10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(0,0,0,0.22));
  color: color-mix(in srgb, var(--ts-text) 92%, white);
}
.ts-auth-alert.is-warn::before{
  background: color-mix(in srgb, var(--ts-amber) 92%, white);
  box-shadow: 0 0 14px var(--ts-warn-10);
}

.ts-auth-alert.is-error{
  border-color: color-mix(in srgb, var(--ts-danger) 34%, transparent);
  background:
    radial-gradient(420px 140px at 18% 0%, var(--ts-danger-14), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(0,0,0,0.22));
  color: color-mix(in srgb, var(--ts-text) 92%, white);
}
.ts-auth-alert.is-error::before{
  background: color-mix(in srgb, var(--ts-danger) 92%, white);
  box-shadow: 0 0 14px var(--ts-danger-14);
}

/* ---------------------------------------------------------
   Fields / inputs
--------------------------------------------------------- */
.ts-auth-field{ display: grid; gap: 8px; }

.ts-auth-label{
  font-size: 13px;
  letter-spacing: 0.02em;
  color: color-mix(in srgb, var(--ts-muted) 92%, white);
}

.ts-auth-inputwrap{
  position: relative;
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;

  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.12);
  background:
    radial-gradient(260px 60px at 20% 0%, var(--ts-cyan-10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(0,0,0,0.22));
  box-shadow: 0 10px 26px rgba(0,0,0,0.22);

  transition: border-color var(--ts-fast), box-shadow var(--ts-fast), transform var(--ts-fast), background var(--ts-fast);
}

.ts-auth-inputicon{
  display: grid;
  place-items: center;
  color: color-mix(in srgb, var(--ts-cyan) 72%, white);
  opacity: 0.95;
}

.ts-auth-input{
  height: 52px;
  padding: 0 12px 0 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--ts-text);
  font-size: 15px;
  letter-spacing: 0.01em;
  min-width: 0;
}

.ts-auth-input::placeholder{
  color: color-mix(in srgb, var(--ts-muted) 62%, transparent);
}

.ts-auth-eye{
  margin-right: 10px;
  height: 34px;
  width: 44px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.22);
  color: var(--ts-text);
  cursor: pointer;
  transition: transform var(--ts-fast), border-color var(--ts-fast), background var(--ts-fast), box-shadow var(--ts-fast);
}

.ts-auth-eye:hover{
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--ts-cyan) 28%, transparent);
  background: rgba(0,0,0,0.30);
}
.ts-auth-eye:active{ transform: translateY(0); }

.ts-auth-eye.is-on{
  border-color: color-mix(in srgb, var(--ts-cyan) 40%, transparent);
  box-shadow: 0 0 0 4px var(--ts-cyan-10);
  background: var(--ts-cyan-06);
}

.ts-auth-focus{
  position: absolute;
  inset: 0;
  border-radius: 16px;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(420px 120px at 30% 0%, var(--ts-cyan-18), transparent 65%),
    radial-gradient(420px 120px at 70% 100%, var(--ts-teal-16), transparent 65%);
  transition: opacity var(--ts-fast);
}

.ts-auth-inputwrap:focus-within{
  border-color: var(--ts-cyan-36);
  box-shadow:
    0 12px 30px rgba(0,0,0,0.28),
    var(--ts-focus);
  transform: translateY(-1px);
}

.ts-auth-inputwrap:focus-within .ts-auth-focus{ opacity: 1; }

.ts-auth-hint{
  font-size: 12px;
  color: color-mix(in srgb, var(--ts-muted) 86%, transparent);
  line-height: 1.35;
}
.ts-auth-hint b{ color: var(--ts-text); font-weight: 800; }

/* Validation states (Hooks) */
.ts-auth-field.is-error .ts-auth-label{ color: color-mix(in srgb, var(--ts-danger) 72%, white); }
.ts-auth-field.is-success .ts-auth-label{ color: color-mix(in srgb, var(--ts-teal) 78%, white); }

.ts-auth-inputwrap.is-error{
  border-color: color-mix(in srgb, var(--ts-danger) 42%, transparent);
  background:
    radial-gradient(320px 90px at 22% 0%, var(--ts-danger-14), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(0,0,0,0.22));
  box-shadow:
    0 14px 34px rgba(0,0,0,0.30),
    0 0 0 1px var(--ts-danger-08) inset;
}

.ts-auth-inputwrap.is-success{
  border-color: color-mix(in srgb, var(--ts-teal) 42%, transparent);
  background:
    radial-gradient(320px 90px at 22% 0%, var(--ts-teal-16), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(0,0,0,0.22));
  box-shadow:
    0 14px 34px rgba(0,0,0,0.30),
    0 0 0 1px var(--ts-teal-10) inset;
}

.ts-auth-inputwrap.is-warn{
  border-color: color-mix(in srgb, var(--ts-amber) 40%, transparent);
  background:
    radial-gradient(320px 90px at 22% 0%, var(--ts-warn-10), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(0,0,0,0.22));
  box-shadow:
    0 14px 34px rgba(0,0,0,0.30),
    0 0 0 1px var(--ts-warn-06) inset;
}

/* ---------------------------------------------------------
   Row / checkbox / link
--------------------------------------------------------- */
.ts-auth-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 2px;
}

.ts-auth-check{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: color-mix(in srgb, var(--ts-muted) 92%, white);
  user-select: none;
}

.ts-auth-check input{
  width: 18px;
  height: 18px;
  accent-color: var(--ts-cyan);
}

.ts-auth-link{
  border: 0;
  background: transparent;
  color: color-mix(in srgb, var(--ts-cyan) 88%, white);
  font-weight: 800;
  cursor: pointer;
  padding: 8px 10px;
  border-radius: 12px;
  transition: background var(--ts-fast), color var(--ts-fast), transform var(--ts-fast);
}

.ts-auth-link:hover{
  background: var(--ts-cyan-06);
  color: var(--ts-text);
  transform: translateY(-1px);
}
.ts-auth-link:active{ transform: translateY(0); }

/* ---------------------------------------------------------
   Actions / buttons
--------------------------------------------------------- */
.ts-auth-actions{
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 6px;
}

.ts-auth-btn{
  position: relative;
  height: 52px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.12);
  cursor: pointer;
  overflow: hidden;

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

  font-weight: 900;
  letter-spacing: 0.02em;
  transition: transform var(--ts-fast), border-color var(--ts-fast), box-shadow var(--ts-fast), background var(--ts-fast), color var(--ts-fast);
}

.ts-auth-btnlabel{ position: relative; z-index: 2; }

.ts-auth-btnfx{
  position: absolute;
  inset: -2px;
  background:
    radial-gradient(220px 70px at 25% 0%, var(--ts-cyan-26), transparent 60%),
    radial-gradient(220px 70px at 75% 100%, var(--ts-teal-16), transparent 60%),
    linear-gradient(90deg, rgba(255,255,255,0.04), rgba(255,255,255,0.00));
  opacity: 0;
  transition: opacity var(--ts-fast);
  z-index: 1;
}

/* primary: cyan -> teal (wie deine page) */
.ts-auth-btn-primary{
  color: rgba(4, 10, 16, 0.92);
  border-color: color-mix(in srgb, var(--ts-cyan) 35%, transparent);
  background:
    radial-gradient(600px 160px at 12% 10%, color-mix(in srgb, var(--ts-cyan) 42%, transparent), transparent 58%),
    linear-gradient(90deg, color-mix(in srgb, var(--ts-cyan) 92%, white), color-mix(in srgb, var(--ts-teal) 78%, white));
  box-shadow:
    0 14px 36px rgba(0,0,0,0.34),
    0 0 0 1px var(--ts-cyan-10) inset;
}

.ts-auth-btn-primary:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,0.22);
  box-shadow:
    0 18px 46px rgba(0,0,0,0.40),
    0 0 0 1px rgba(255,255,255,0.10) inset;
}
.ts-auth-btn-primary:hover .ts-auth-btnfx{ opacity: 1; }
.ts-auth-btn-primary:active{ transform: translateY(0); }

.ts-auth-btn-ghost{
  color: var(--ts-text);
  background: rgba(0,0,0,0.18);
  border-color: rgba(255,255,255,0.10);
}

.ts-auth-btn-ghost:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,0.06);
  border-color: color-mix(in srgb, var(--ts-cyan) 26%, transparent);
}
.ts-auth-btn-ghost:hover .ts-auth-btnfx{ opacity: 0.65; }
.ts-auth-btn-ghost:active{ transform: translateY(0); }

/* submit pulse (auth.js toggles .ts-auth-pulse) */
.ts-auth-btn.ts-auth-pulse{
  animation: tsAuthPulse 520ms var(--ts-ease) both;
}
@keyframes tsAuthPulse{
  0%{ transform: translateY(0); filter: brightness(1); }
  35%{ transform: translateY(-1px); filter: brightness(1.08); }
  100%{ transform: translateY(0); filter: brightness(1); }
}

/* ---------------------------------------------------------
   Footnote
--------------------------------------------------------- */
.ts-auth-footnote{
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: color-mix(in srgb, var(--ts-muted) 86%, transparent);
  font-size: 12px;
  letter-spacing: 0.02em;
}

.ts-auth-footnote b{
  color: var(--ts-text);
  font-weight: 900;
}

.ts-auth-footnote .dot{
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ts-cyan) 92%, white);
  box-shadow: 0 0 12px var(--ts-cyan-10);
}

/* ---------------------------------------------------------
   Scrollbar
--------------------------------------------------------- */
.ts-auth-body::-webkit-scrollbar{ width: 10px; }
.ts-auth-body::-webkit-scrollbar-track{
  background: rgba(255,255,255,0.04);
  border-radius: 999px;
}
.ts-auth-body::-webkit-scrollbar-thumb{
  background: var(--ts-cyan-10);
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.08);
}
.ts-auth-body::-webkit-scrollbar-thumb:hover{
  background: var(--ts-cyan-14);
}

/* ---------------------------------------------------------
   Reduced motion
--------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .ts-auth-modal,
  .ts-auth-panel.is-active,
  .ts-auth-scanline,
  .ts-auth-tab-underline,
  .ts-auth-btn.ts-auth-pulse{
    animation: none !important;
    transition: none !important;
  }
}