.login-card { animation: slideUp .35s cubic-bezier(.16,1,.3,1) both; }

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

/* Panel wrapper — always on right edge */
.ql-panel {
    position: fixed;
    top:      0;
    right:    0;
    height:   100%;
    z-index:  50;
}

/* Toggle tab */
.ql-toggle {
    position:       absolute;
    top:            50%;
    right:          0;
    transform:      translateY(-50%);
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            6px;
    padding:        14px 10px;
    background:     #fff;
    border:         1px solid #e5e7eb;
    border-right:   none;
    border-radius:  12px 0 0 12px;
    box-shadow:     -4px 0 20px rgba(0,0,0,.08);
    cursor:         pointer;
    color:          #6b7280;
    transition:     background .2s, color .2s, right .3s cubic-bezier(.16,1,.3,1);
}
.ql-toggle:hover { background: #fef2f2; color: #b91c1c; }

.ql-toggle-label {
    writing-mode:   vertical-rl;
    font-size:      10px;
    font-weight:    700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color:          inherit;
}

/* Slide-in drawer */
.ql-content {
    position:   absolute;
    top:        0;
    right:      0;
    height:     100%;
    width:      260px;
    background: #fff;
    border-left: 1px solid #f1f5f9;
    box-shadow:  -12px 0 40px rgba(0,0,0,.10);
    transform:   translateX(100%);
    transition:  transform .3s cubic-bezier(.16,1,.3,1);
}

/* Open state */
.ql-panel.open .ql-content { transform: translateX(0); }
.ql-panel.open .ql-toggle  { right: 260px; }