*,
   *::before,
   *::after {
       box-sizing: border-box;
       margin: 0;
       padding: 0;
   }

   :root {
       --bg: #f0eeec;
       --surface: #faf9f8;
       --surface2: #edeae7;
       --border: #dcd8d3;
       --accent: #d9534f;
       --accent2: #c0392b;
       --text: #2c2420;
       --muted: #8a7e78;
       --danger: #b83232;
       --radius: 14px;
   }

   body {
       font-family: 'DM Sans', sans-serif;
       background: var(--bg);
       color: var(--text);
       min-height: 100vh;
       display: flex;
       align-items: center;
       justify-content: center;
       position: relative;
       overflow: hidden;
   }

   /* Animated background blobs */
   .blob {
       position: absolute;
       border-radius: 50%;
       filter: blur(80px);
       opacity: 0.12;
       animation: float 8s ease-in-out infinite;
       pointer-events: none;
   }

   .blob-1 {
       width: 420px;
       height: 420px;
       background: #d9534f;
       top: -80px;
       left: -100px;
       animation-delay: 0s;
   }

   .blob-2 {
       width: 340px;
       height: 340px;
       background: #e8b4b8;
       bottom: -60px;
       right: -80px;
       animation-delay: 3s;
   }

   .blob-3 {
       width: 200px;
       height: 200px;
       background: #c0392b;
       bottom: 30%;
       left: 10%;
       animation-delay: 5s;
   }

   @keyframes float {

       0%,
       100% {
           transform: translateY(0) scale(1);
       }

       50% {
           transform: translateY(-30px) scale(1.05);
       }
   }

   /* Grid pattern overlay */
   body::before {
       content: '';
       position: absolute;
       inset: 0;
       background-image:
           linear-gradient(var(--border) 1px, transparent 1px),
           linear-gradient(90deg, var(--border) 1px, transparent 1px);
       background-size: 40px 40px;
       opacity: 0.4;
       pointer-events: none;
   }

   .login-wrap {
       position: relative;
       z-index: 10;
       width: 100%;
       max-width: 420px;
       padding: 20px;
   }

   .brand {
       text-align: center;
       margin-bottom: 32px;
   }

   .brand-logo {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       width: 52px;
       height: 52px;
       border-radius: 14px;
       background: linear-gradient(135deg, var(--accent), var(--accent2));
       font-size: 22px;
       color: #fff;
       margin-bottom: 14px;
   }

   .brand h1 {
       font-family: 'Syne', sans-serif;
       font-size: 28px;
       font-weight: 800;
       letter-spacing: -0.5px;
   }

   .brand p {
       color: var(--muted);
       font-size: 14px;
       margin-top: 4px;
   }

   .card {
       background: var(--surface);
       border: 1px solid var(--border);
       border-radius: 20px;
       padding: 36px 32px;
       box-shadow: 0 24px 60px rgba(0, 0, 0, 0.1);
   }

   .card h2 {
       font-family: 'Syne', sans-serif;
       font-size: 20px;
       font-weight: 700;
       margin-bottom: 6px;
   }

   .card .subtitle {
       color: var(--muted);
       font-size: 13.5px;
       margin-bottom: 28px;
   }

   .form-group {
       margin-bottom: 18px;
   }

   .form-label {
       display: block;
       font-size: 13px;
       font-weight: 500;
       color: var(--muted);
       margin-bottom: 7px;
       letter-spacing: 0.3px;
   }

   .input-wrap {
       position: relative;
   }

   .input-icon {
       position: absolute;
       left: 14px;
       top: 50%;
       transform: translateY(-50%);
       color: var(--muted);
       font-size: 14px;
       pointer-events: none;
   }

   .form-control {
       width: 100%;
       background: var(--surface2);
       border: 1.5px solid var(--border);
       border-radius: 10px;
       color: var(--text);
       font-family: 'DM Sans', sans-serif;
       font-size: 14px;
       padding: 11px 14px 11px 40px;
       outline: none;
       transition: border-color 0.2s, box-shadow 0.2s;
   }

   .form-control:focus {
       border-color: var(--accent);
       box-shadow: 0 0 0 3px rgba(217, 83, 79, 0.15);
   }

   .form-control::placeholder {
       color: var(--muted);
   }

   .toggle-pass {
       position: absolute;
       right: 13px;
       top: 50%;
       transform: translateY(-50%);
       background: none;
       border: none;
       color: var(--muted);
       cursor: pointer;
       font-size: 14px;
       padding: 4px;
   }

   .toggle-pass:hover {
       color: var(--text);
   }

   .form-row {
       display: flex;
       align-items: center;
       justify-content: space-between;
       margin-bottom: 22px;
   }

   .check-label {
       display: flex;
       align-items: center;
       gap: 8px;
       font-size: 13px;
       color: var(--muted);
       cursor: pointer;
   }

   .check-label input[type="checkbox"] {
       accent-color: var(--accent);
       width: 15px;
       height: 15px;
   }

   .forgot-link {
       font-size: 13px;
       color: var(--accent);
       text-decoration: none;
       transition: opacity 0.2s;
   }

   .forgot-link:hover {
       opacity: 0.8;
   }

   .btn-primary {
       width: 100%;
       background: linear-gradient(135deg, var(--accent), var(--accent2));
       color: #fff;
       border: none;
       border-radius: 10px;
       font-family: 'Syne', sans-serif;
       font-size: 15px;
       font-weight: 600;
       padding: 13px;
       cursor: pointer;
       transition: opacity 0.2s, transform 0.15s;
       letter-spacing: 0.2px;
   }

   .btn-primary:hover {
       opacity: 0.9;
       transform: translateY(-1px);
   }

   .btn-primary:active {
       transform: translateY(0);
   }

   .divider {
       display: flex;
       align-items: center;
       gap: 12px;
       margin: 22px 0;
       color: var(--muted);
       font-size: 12px;
   }

   .divider::before,
   .divider::after {
       content: '';
       flex: 1;
       height: 1px;
       background: var(--border);
   }

   .sso-btn {
       width: 100%;
       background: var(--surface2);
       border: 1.5px solid var(--border);
       border-radius: 10px;
       color: var(--text);
       font-family: 'DM Sans', sans-serif;
       font-size: 14px;
       font-weight: 500;
       padding: 11px;
       cursor: pointer;
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 10px;
       transition: border-color 0.2s, background 0.2s;
   }

   .sso-btn:hover {
       border-color: var(--accent);
       background: rgba(217, 83, 79, 0.05);
   }

   .sso-btn img {
       width: 18px;
       height: 18px;
   }

   .register-link {
       text-align: center;
       margin-top: 22px;
       font-size: 13px;
       color: var(--muted);
   }

   .register-link a {
       color: var(--accent);
       text-decoration: none;
       font-weight: 500;
   }

   .register-link a:hover {
       text-decoration: underline;
   }

   .alert-error {
       background: rgba(217, 83, 79, 0.08);
       border: 1px solid rgba(217, 83, 79, 0.3);
       border-radius: 10px;
       color: var(--danger);
       font-size: 13px;
       padding: 10px 14px;
       margin-bottom: 18px;
       display: none;
   }

   .alert-error.show {
       display: flex;
       align-items: center;
       gap: 8px;
   }