/* Login — Music style (dark, pink accent, Inter) */
.ml-page{overflow:auto;min-height:100%;display:grid;place-items:center;padding:32px 16px}
.ml-bg{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0;background:radial-gradient(900px 500px at 15% -10%,rgba(255,45,134,.22),transparent 60%),radial-gradient(700px 500px at 110% 110%,rgba(122,92,255,.18),transparent 60%)}
.ml-eq{position:absolute;left:0;right:0;bottom:0;height:38vh;display:flex;align-items:flex-end;gap:1.2vw;padding:0 3vw;opacity:.16;mask-image:linear-gradient(to top,#000,transparent)}
.ml-eq i{flex:1;border-radius:6px 6px 0 0;background:linear-gradient(to top,var(--accent),#ffb3d3);height:20%;animation:eq 1.6s ease-in-out infinite alternate}
.ml-eq i:nth-child(3n){animation-duration:1.1s}.ml-eq i:nth-child(4n+1){animation-duration:1.9s}.ml-eq i:nth-child(5n+2){animation-duration:1.35s}
.ml-eq i:nth-child(odd){animation-delay:-.6s}.ml-eq i:nth-child(7n){animation-delay:-1.1s}
@keyframes eq{from{height:12%}to{height:92%}}
@media (prefers-reduced-motion:reduce){.ml-eq i{animation:none;height:40%}}

.ml-wrap{position:relative;z-index:1;width:100%;max-width:420px;display:flex;flex-direction:column;align-items:center;gap:22px}
.ml-logo{font-weight:800;font-size:40px;letter-spacing:.06em;line-height:1}
.ml-card{width:100%;background:rgba(21,21,22,.92);backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:22px;padding:28px 26px 22px;box-shadow:0 30px 80px rgba(0,0,0,.6);display:flex;flex-direction:column;gap:16px}
.ml-head{display:flex;gap:14px;align-items:center}
.ml-ic{width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,var(--accent),#ff7ab5);display:grid;place-items:center;flex:none;box-shadow:0 8px 26px rgba(255,45,134,.35)}
.ml-head h1{font-size:21px;font-weight:700;letter-spacing:-.01em}
.ml-head p{color:var(--muted);font-size:13px;margin-top:3px}

.ml-field{display:flex;flex-direction:column;gap:7px}
.ml-field>span{font-size:12.5px;color:#c9c9ce;font-weight:500}
.ml-field input{width:100%;height:48px;background:var(--panel3);border:1px solid transparent;border-radius:24px;padding:0 18px;color:var(--text);font:15px var(--font);outline:0;transition:border-color .15s,box-shadow .15s}
.ml-field input:focus{border-color:rgba(255,45,134,.6);box-shadow:0 0 0 3px rgba(255,45,134,.18)}
.ml-field input::placeholder{color:var(--dim)}
.ml-pass{position:relative}.ml-pass input{padding-right:50px}
.ml-eye{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:var(--muted)}
.ml-eye:hover{background:var(--hover);color:#fff}.ml-eye.on{color:var(--accent2)}

.ml-err{background:rgba(255,45,134,.1);border:1px solid rgba(255,45,134,.45);color:#ffc2da;border-radius:14px;padding:10px 14px;font-size:13px}
.ml-btn{height:50px;border-radius:25px;background:var(--accent);color:#fff;font-weight:700;font-size:15px;display:flex;align-items:center;justify-content:center;gap:10px;transition:background .15s,transform .1s,opacity .15s}
.ml-btn:hover:not(:disabled){background:var(--accent2)}.ml-btn:active:not(:disabled){transform:translateY(1px)}.ml-btn:disabled{opacity:.7;cursor:default}
.ml-spin{width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:mlspin .7s linear infinite}
@keyframes mlspin{to{transform:rotate(360deg)}}
.ml-feats{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;padding-top:2px}
.ml-feats span{font-size:12px;color:#d6d6da;background:var(--panel3);padding:5px 11px;border-radius:99px}
.ml-foot{color:var(--dim);font-size:12.5px;text-align:center}
.shake{animation:shake .35s}
@keyframes shake{20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}
@media (max-width:420px){.ml-card{padding:22px 18px 18px}.ml-logo{font-size:34px}}