/* ts3musicbot.net v2 – login page (layout/v2/login.php): glass card with the
   form, a quieter side panel for new visitors, and a waveform band behind both. */

.auth{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;min-height:calc(100svh - var(--hdr-h) - 40px);padding-block:clamp(40px,6vw,88px) clamp(104px,11vw,150px);--hx:calc(50% - 222px);--hy:46%}

/* waveform band behind the card and the panel; the glass blurs it into a glow */
.auth-eq{position:absolute;z-index:-1;left:50%;top:50%;transform:translate(-50%,-50%);width:min(1360px,100%);height:clamp(240px,30vw,380px);display:flex;align-items:center;gap:5px;padding-inline:var(--gutter);pointer-events:none;opacity:.7;-webkit-mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent);mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent)}
.auth-eq i{flex:1 1 0;min-width:0;height:var(--h);border-radius:3px;background:linear-gradient(to bottom,transparent,var(--a45) 35%,var(--a60) 50%,var(--a45) 65%,transparent);transform:scaleY(.7);animation:auth-eq var(--t) ease-in-out var(--d) infinite alternate}
@keyframes auth-eq{from{transform:scaleY(.3)}to{transform:scaleY(1)}}
@keyframes auth-in{from{opacity:0;transform:translateY(14px)}}

.auth-wrap{display:grid;grid-template-columns:minmax(0,440px) minmax(0,380px);justify-content:center;align-items:center;gap:clamp(40px,5vw,64px)}

/* ---------- card ---------- */
.auth-card{position:relative;display:flex;flex-direction:column;gap:24px;padding:clamp(28px,3.2vw,40px);border-radius:22px;background:color-mix(in srgb,var(--bg2) 66%,transparent);-webkit-backdrop-filter:blur(22px) saturate(150%);backdrop-filter:blur(22px) saturate(150%);animation:auth-in .7s cubic-bezier(.2,.8,.2,1) both;border:1px solid color-mix(in srgb,var(--text) 11%,transparent);box-shadow:0 40px 100px rgba(0,0,0,.55),0 0 0 1px var(--a10),0 0 90px var(--a18)}
.auth-card::before{content:"";position:absolute;left:32px;right:32px;top:-1px;height:1px;background:linear-gradient(90deg,transparent,var(--accent) 30%,var(--accent-soft) 50%,var(--accent) 70%,transparent)}
.auth-head{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.auth-mark{width:64px;height:64px;margin-bottom:8px;border-radius:18px;display:grid;place-items:center;background:#0d1320;border:1px solid color-mix(in srgb,var(--text) 12%,transparent);box-shadow:0 0 0 6px var(--a10),0 0 38px var(--a45)}
.auth-mark .mark{width:38px;height:38px}
.auth-card:focus-within .auth-mark .eq1{animation:eq 1.1s ease-in-out infinite}
.auth-card:focus-within .auth-mark .eq2{animation:eq .9s ease-in-out infinite reverse}
.auth-card:focus-within .auth-mark .eq3{animation:eq 1.3s ease-in-out infinite}
.auth-title{font-family:var(--display);font-weight:800;font-size:clamp(28px,3vw,34px);letter-spacing:-.035em;line-height:1.1}
.auth-sub{max-width:38ch;font-size:15px;color:var(--muted);text-wrap:balance}

.auth-alert{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:12px;background:color-mix(in srgb,var(--danger) 12%,transparent);border:1px solid color-mix(in srgb,var(--danger) 42%,transparent);color:#fecdd3;font-size:14px;line-height:1.45}
.auth-alert svg{flex-shrink:0;margin-top:1px;color:#fb7185}

/* ---------- form ---------- */
.auth-form{display:flex;flex-direction:column;gap:18px}
.auth-input{position:relative}
.auth-input>svg{position:absolute;inset-inline-start:15px;top:50%;transform:translateY(-50%);color:var(--dim);pointer-events:none;transition:color .15s}
.auth-input:focus-within>svg{color:var(--accent-soft)}
.v2-body .auth-input input{min-height:50px;padding-inline-start:44px;border-radius:12px}
.v2-body .auth-input #auth-password{padding-inline-end:52px}
.v2-body .auth-input input[aria-invalid="true"]{border-color:color-mix(in srgb,var(--danger) 55%,transparent)}
.v2-body .auth-input input[aria-invalid="true"]:focus{border-color:var(--accent)}
.v2-body .auth-input input:-webkit-autofill{-webkit-text-fill-color:var(--text);caret-color:var(--text);box-shadow:0 0 0 40px color-mix(in srgb,var(--bg) 70%,var(--bg2)) inset}
.v2-body .auth-input input:-webkit-autofill:focus{box-shadow:0 0 0 40px color-mix(in srgb,var(--bg) 70%,var(--bg2)) inset,0 0 0 3px var(--a30)}
.auth-reveal{position:absolute;inset-inline-end:5px;top:50%;transform:translateY(-50%);width:40px;height:40px;padding:0;border:0;border-radius:9px;background:transparent;display:grid;place-items:center;color:var(--dim);transition:color .15s,background .15s}
.auth-reveal:hover{color:var(--text);background:color-mix(in srgb,var(--text) 6%,transparent)}
.auth-reveal .i-hide,.auth-reveal[aria-pressed="true"] .i-show{display:none}
.auth-reveal[aria-pressed="true"] .i-hide{display:block}
.auth-reveal[aria-pressed="true"]{color:var(--accent-soft)}

.auth-row{display:flex;justify-content:space-between;align-items:center;gap:4px 16px;flex-wrap:wrap;margin-block:-6px}
.v2-body .auth-forgot{display:inline-flex;align-items:center;min-height:40px;margin-inline-start:auto;font-size:14px;font-weight:600}
.auth-check{display:inline-flex;align-items:center;gap:10px;min-height:40px;font-size:14px;color:color-mix(in srgb,var(--text) 85%,transparent);cursor:pointer;-webkit-user-select:none;user-select:none}
.auth-check input{-webkit-appearance:none;appearance:none;flex-shrink:0;width:20px;height:20px;margin:0;border-radius:6px;border:1px solid color-mix(in srgb,var(--text) 24%,transparent);background:color-mix(in srgb,var(--bg) 70%,var(--bg2));display:grid;place-items:center;cursor:pointer;transition:background .15s,border-color .15s,box-shadow .15s}
.auth-check input::after{content:"";width:10px;height:5px;border:2px solid var(--on-accent);border-top:0;border-right:0;transform:translateY(-1px) rotate(-45deg) scale(0);transition:transform .15s}
.auth-check:hover input{border-color:var(--line-hover)}
.auth-check input:checked{background:var(--grad);border-color:transparent;box-shadow:0 0 12px var(--a45)}
.auth-check input:checked::after{transform:translateY(-1px) rotate(-45deg) scale(1)}
.auth-check input:focus-visible{outline:2px solid var(--accent-soft);outline-offset:2px}

/* .btn sets weight 600, but the shell's `.v2-body button{font:inherit}` outranks it on a <button> */
.v2-body .auth-submit{width:100%;margin-top:4px;font-weight:600}
.auth-submit svg{transition:transform .2s}
.auth-submit:hover svg{transform:translateX(3px)}

.auth-alt{display:none;padding-top:10px;border-top:1px solid var(--line);font-size:14px;color:var(--muted);text-align:center}
.v2-body .auth-alt a{display:inline-flex;align-items:center;min-height:40px;font-weight:600}

/* ---------- side panel ---------- */
.auth-side{display:flex;flex-direction:column;gap:26px;padding:clamp(24px,2.8vw,34px);border-radius:22px;border:1px solid var(--line);background:linear-gradient(180deg,color-mix(in srgb,var(--bg2) 90%,transparent),color-mix(in srgb,var(--bg) 92%,transparent));animation:auth-in .7s .1s cubic-bezier(.2,.8,.2,1) both}
.auth-side-intro{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.auth-side-title{font-family:var(--display);font-weight:800;font-size:clamp(22px,2.2vw,26px);letter-spacing:-.03em}
.auth-side-intro p{font-size:15px;line-height:1.6;color:var(--muted)}
.auth-side-cta{margin-top:6px}
.auth-side-demo{display:flex;flex-direction:column;gap:12px;padding-top:24px;border-top:1px solid var(--line)}
.auth-side-demo .label{color:var(--muted)}
.auth-demos{display:flex;width:100%;transition:border-color .2s,box-shadow .2s}
.auth-demos:hover{border-color:var(--line-hover);box-shadow:0 0 18px var(--a18)}
.v2-body .auth-demos a{flex:1 1 0;justify-content:center;min-height:44px;padding:0 10px;font-size:13.5px;white-space:nowrap}
.auth-note{margin-top:-4px}

/* ---------- stacked: card first, panel below ---------- */
@media (max-width:920px){
  .auth{align-items:flex-start;min-height:0;padding-bottom:clamp(56px,9vw,96px);--hx:50%;--hy:14%}
  .auth-wrap{grid-template-columns:minmax(0,480px)}
  .auth-eq{top:360px}
  .auth-alt{display:block}
}
@media (max-width:720px){
  .auth-eq{gap:3px;height:300px}
  .auth-eq i:nth-child(n+41){display:none}
}
@media (max-width:480px){
  .auth{padding-top:28px}
  .auth-card{padding:28px 20px;border-radius:18px;gap:22px}
  .auth-side{padding:24px 20px;border-radius:18px}
}
/* the two demo pills no longer fit side by side */
@media (max-width:370px){
  .auth-demos{flex-direction:column;border-radius:14px}
  .auth-demos>*+*{border-inline-start:0;border-top:1px solid var(--line)}
}
/* right to left (Arabic): the glow follows the card to the right; the submit arrow
   (.rtl-flip) points left and moves left on hover */
[dir="rtl"] .auth{--hx:calc(50% + 222px)}
@media (max-width:920px){[dir="rtl"] .auth{--hx:50%}}