/* =============================================================================
   login.css : ログイン画面
   ============================================================================= */

.login-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 20px; position: relative; overflow: hidden; }

/* 背景の柔らかいパステルの光（装飾しすぎない範囲で親しみやすさを演出） */
.login-body::before, .login-body::after {
    content: ""; position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.5; z-index: 0;
}
.login-body::before { width: 340px; height: 340px; background: var(--pastel-pink); top: -80px; left: -60px; }
.login-body::after  { width: 300px; height: 300px; background: var(--pastel-blue); bottom: -80px; right: -60px; }

.login-card {
    position: relative; z-index: 1;
    width: 100%; max-width: 390px; padding: 40px 34px;
    border-radius: var(--r-lg);
    background: var(--surface);
    border: 1.5px solid var(--border);
    box-shadow: var(--shadow-lg);
    text-align: center;
}

.login-logo { display: inline-flex; margin-bottom: 14px; color: var(--brand); }
.login-logo .icon { width: 48px; height: 48px; }
.login-title { font-size: var(--fs-h1); margin-bottom: 6px; color: var(--brand-strong); }
.login-subtitle { font-size: var(--fs-label); color: var(--text-muted); margin-bottom: 26px; }

.login-form { display: flex; flex-direction: column; gap: 16px; text-align: left; margin-bottom: 18px; }

.login-error {
    display: flex; align-items: center; gap: 8px;
    background: var(--danger-soft); border: 1.5px solid var(--danger);
    color: var(--danger); padding: 11px 14px; border-radius: var(--r-sm);
    font-size: var(--fs-label); font-weight: 600; margin-bottom: 18px; text-align: left;
}
.login-error .icon { flex: none; }

.login-hint { font-size: var(--fs-mini); color: var(--text-muted); }