/* Login-Seite: dunkler Hintergrund im Sidebar-Ton, zentrierte Karte. */
:root {
    --sidebar: #1f2330;
    --green: #2a8c3d;
    --green-dark: #237233;
    --text: #1f2733;
    --muted: #6b7785;
    --border: #e4e7eb;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; }

.login-body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;
    padding: 24px;
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(1200px 600px at 50% 120%, #2b3142 0%, transparent 60%),
        linear-gradient(160deg, #23283a 0%, var(--sidebar) 55%, #171a24 100%);
    color: var(--text);
    font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.45;
}

/* weiche Lichtflecken im Hintergrund */
.login-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: .45;
    pointer-events: none;
}
.login-glow-a { width: 420px; height: 420px; left: -120px; top: -140px; background: #3bb273; }
.login-glow-b { width: 360px; height: 360px; right: -100px; bottom: -120px; background: #2767d4; opacity: .28; }

.login-card {
    position: relative;
    width: 100%;
    max-width: 400px;
    background: #fff;
    border-radius: 16px;
    padding: 30px 30px 28px;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, .25),
        0 24px 60px -20px rgba(0, 0, 0, .6),
        0 0 0 1px rgba(255, 255, 255, .06);
    animation: rise .45s cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.login-card.shake { animation: rise .45s cubic-bezier(.16, 1, .3, 1) both, shake .5s .1s; }
@keyframes shake {
    20%, 60% { transform: translateX(-6px); }
    40%, 80% { transform: translateX(6px); }
}

.login-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.login-logo {
    width: 46px; height: 46px; flex: none;
    border-radius: 12px;
    background: linear-gradient(135deg, #3bb273, var(--green));
    color: #fff;
    font-weight: 800; font-size: 25px;
    display: grid; place-items: center;
    box-shadow: 0 6px 14px -4px rgba(42, 140, 61, .6);
}
.login-brand h1 { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -.2px; }
.login-sub { margin: 2px 0 0; color: var(--muted); font-size: 12.5px; }

.login-hint { margin: 0 0 16px; color: #3b4652; }

.login-alert {
    background: #fde8e8;
    color: #a12333;
    border: 1px solid #f7c6c9;
    border-left: 3px solid #d63b49;
    border-radius: 8px;
    padding: 9px 12px;
    font-size: 13px;
    margin-bottom: 14px;
}
.login-alert strong { display: block; margin-bottom: 2px; }
.login-alert code { font-size: 12px; background: rgba(0, 0, 0, .05); padding: 1px 4px; border-radius: 4px; }

.login-field { display: block; margin-bottom: 16px; }
.login-field > span:first-child {
    display: block;
    font-size: 12px; font-weight: 600; color: var(--muted);
    margin-bottom: 6px;
    text-transform: uppercase; letter-spacing: .4px;
}
.login-input { position: relative; display: block; }
.login-input input {
    width: 100%;
    font: inherit; font-size: 15px; letter-spacing: .5px;
    padding: 11px 44px 11px 13px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: #fafbfc;
    color: var(--text);
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.login-input input:focus {
    outline: none;
    background: #fff;
    border-color: #7fa8f0;
    box-shadow: 0 0 0 3px #dbe7ff;
}
.login-eye {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    width: 32px; height: 32px;
    border: none; border-radius: 7px;
    background: transparent; color: #8a94a3;
    display: grid; place-items: center;
    cursor: pointer;
}
.login-eye:hover { background: #eef1f4; color: var(--text); }
.login-eye.on { color: var(--green); }

.login-btn {
    width: 100%;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border: none; border-radius: 9px;
    padding: 12px 16px;
    font: inherit; font-size: 14.5px; font-weight: 700;
    color: #fff;
    background: linear-gradient(180deg, #2f9a45, var(--green));
    box-shadow: 0 6px 16px -6px rgba(42, 140, 61, .7), inset 0 1px 0 rgba(255, 255, 255, .15);
    cursor: pointer;
    transition: transform .12s, box-shadow .12s, background .15s;
}
.login-btn:hover { background: linear-gradient(180deg, #2a8c3d, var(--green-dark)); }
.login-btn:active { transform: translateY(1px); box-shadow: 0 3px 8px -4px rgba(42, 140, 61, .7); }
.login-btn:focus-visible { outline: 3px solid #bcd4ff; outline-offset: 2px; }

.login-foot { margin: 0; color: #7c8699; font-size: 12px; position: relative; }

@media (max-width: 460px) {
    .login-card { padding: 24px 20px; border-radius: 14px; }
}