/* TDM-086: стили, перенесённые из блока <style> в Components/Layout/LoginLayout.razor.
   Подключается ТОЛЬКО на этой странице (или в этом макете) — в общий файл выносить нельзя,
   иначе правила разъедутся по всей панели (так и было 26.09.2026). */

    * { margin: 0; padding: 0; box-sizing: border-box; }
    html, body { height: 100%; width: 100%; }
    body {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", sans-serif;
        background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
        display: flex; align-items: center; justify-content: center;
        min-height: 100vh; margin: 0; padding: 20px;
        position: relative;
    }
    body::before {
        content: "";
        position: fixed; top: 0; left: 0; right: 0; bottom: 0;
        background: radial-gradient(ellipse at 20% 50%, rgba(102,126,234,0.1) 0%, transparent 50%),
                    radial-gradient(ellipse at 80% 20%, rgba(118,75,162,0.08) 0%, transparent 50%);
        pointer-events: none;
    }
    .login-container {
        width: 100%; max-width: 400px;
        position: relative; z-index: 1;
        margin: auto;
    }
    .login-card {
        background: rgba(255,255,255,0.98);
        backdrop-filter: blur(20px);
        border-radius: 20px;
        box-shadow: 0 25px 80px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.05);
        width: 100%; padding: 40px 32px;
    }
    .login-logo {
        text-align: center; margin-bottom: 8px;
    }
    .login-logo .icon {
        width: 56px; height: 56px;
        background: linear-gradient(135deg, #667eea, #764ba2);
        border-radius: 16px; display: inline-flex; align-items: center; justify-content: center;
        font-size: 26px; color: #fff; margin-bottom: 16px;
        box-shadow: 0 8px 24px rgba(102,126,234,0.3);
    }
    .login-card h3 {
        text-align: center; margin: 0 0 4px 0; color: #1a1a2e;
        font-weight: 700; font-size: 22px; letter-spacing: -0.3px;
    }
    .login-card .subtitle {
        text-align: center; color: #7c8ba0; font-size: 14px;
        margin-bottom: 28px;
    }
    .login-card label {
        font-size: 12px; font-weight: 600; color: #495057;
        margin-bottom: 6px; display: block; text-transform: uppercase;
        letter-spacing: 0.6px;
    }
    .login-card .form-control {
        width: 100%; padding: 12px 14px;
        border: 2px solid #e9ecef; border-radius: 12px;
        font-size: 15px; margin-bottom: 16px;
        transition: all 0.2s ease; outline: none;
        background: #f8f9fa; color: #1a1a2e;
    }
    .login-card .form-control:focus {
        border-color: #667eea; background: #fff;
        box-shadow: 0 0 0 4px rgba(102,126,234,0.12);
    }
    .login-card .btn {
        width: 100%; padding: 13px;
        background: linear-gradient(135deg, #667eea, #764ba2);
        color: #fff; border: none; border-radius: 12px;
        font-size: 16px; font-weight: 600; cursor: pointer;
        transition: all 0.2s; letter-spacing: 0.3px;
        margin-top: 4px;
    }
    .login-card .btn:hover { transform: translateY(-1px); box-shadow: 0 8px 25px rgba(102,126,234,0.35); }
    .login-card .btn:active { transform: translateY(0); }
    .login-card .btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; box-shadow: none; }
    .login-card .alert {
        padding: 12px 16px; border-radius: 12px; margin-bottom: 20px;
        font-size: 14px; border: none;
    }
    .login-card .alert-danger { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }
    .login-card .alert-info {
        background: #eff6ff; color: #2563eb; border: 1px solid #bfdbfe;
        font-size: 12px; text-align: center;
    }
    .login-card .footer {
        text-align: center; margin-top: 24px; color: #adb5bd; font-size: 12px;
    }
    .spinner {
        display: inline-block; width: 18px; height: 18px;
        border: 2px solid rgba(255,255,255,0.3); border-top-color: #fff;
        border-radius: 50%; animation: spin 0.6s linear infinite;
        vertical-align: middle; margin-right: 8px;
    }
    @keyframes spin { to { transform: rotate(360deg); } }
#blazor-error-ui { display: none !important; }