:root {
     --bg-main: #F5F7FB;
     --bg-card: #FFFFFF;
     --primary: #3B82F6;
     --primary-hover: #2563EB;

     --text-main: #111827;
     --text-body: #374151;
     --text-muted: #6B7280;

     --border-light: #E5E7EB;
     --danger: #EF4444;
 }

 /* * {
     box-sizing: border-box;
     font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto;
 } */

 .main-content {
     margin: 0;
     background: var(--bg-main);
     display: flex;
     justify-content: center;
     /* align-items: center; */
     /* height: 100vh; */
     /* border-radius: 16px;
     padding: 32px;
     border: 1px solid var(--border-light);
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06); */

 }

 /* Card */
 .login-card {
     width: 400px;
     background: var(--bg-card);
     border-radius: 16px;
     padding: 32px;
     border: 1px solid var(--border-light);
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
 }

 /* Title */
 .login-title {
     font-size: 22px;
     font-weight: 700;
     color: var(--text-main);
     margin-bottom: 6px;
 }

 .login-subtitle {
     font-size: 14px;
     color: var(--text-muted);
     margin-bottom: 18px;
 }

 /* Error Box */
 .error-box {
     display: none;
     background: #FEF2F2;
     border: 1px solid #FECACA;
     color: var(--danger);
     padding: 12px 14px;
     border-radius: 12px;
     font-size: 14px;
     margin-bottom: 16px;
 }

 /* Input */
 .form-group {
     margin-bottom: 16px;
 }

 label {
     display: block;
     font-size: 13px;
     color: var(--text-body);
     margin-bottom: 6px;
 }

 input {
     width: 100%;
     padding: 12px 14px;
     border-radius: 12px;
     border: 1px solid var(--border-light);
     font-size: 14px;
     color: var(--text-body);
     outline: none;
     transition: 0.2s ease;
 }

 input::placeholder {
     color: #9CA3AF;
 }

 input:focus {
     border-color: var(--primary);
     box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
 }

 /* Input Error */
 input.error {
     border-color: var(--danger);
     box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
 }

 /* Button */
 .btn-primary {
     width: 100%;
     margin-top: 10px;
     padding: 14px;
     border-radius: 14px;
     border: none;
     background: var(--primary);
     color: white;
     font-weight: 600;
     font-size: 15px;
     cursor: pointer;
     transition: 0.2s ease;
 }

 .btn-primary:hover {
     background: var(--primary-hover);
 }

 /* Footer */
 .login-footer {
     margin-top: 18px;
     text-align: center;
     font-size: 14px;
     color: var(--text-muted);
 }

 .login-footer a {
     color: var(--primary);
     text-decoration: none;
     font-weight: 500;
 }