/* Reuse site variables from home.css (:root contains --main, --card, --border, etc.) */
:root{
	--main: #00b5ef;
	--bg:#ffffff;
	--card:#f7f7f7;
	--muted:#6b7280;
	--accent:#b8f879;
	--accent-dark:#07b57c;
	--border:#e5e7eb;
}

body {
    margin: 0;
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', Arial;
    background: var(--main);
    color: #111827;
    min-height: 100vh;
}

.login-page { min-height:100vh; padding:32px; box-sizing:border-box; }

.login-box {
    margin: 0 auto;
    width: 420px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 8px 26px rgba(2,6,23,0.12);
    padding: 28px 22px;
    box-sizing: border-box;
    text-align: center;
}

.login-logo img { width: 84px; height: auto; display:block; margin: 75px auto 25px; }

.login-title { margin: 0 0 12px; color: var(--main); font-size:1.25rem; font-weight:700; }

.login-form { display:block; margin-top:8px; }
.form-field { display:flex; flex-direction:column; text-align:left; margin-bottom:12px; }
.form-field label { font-size:0.95rem; color: var(--main); font-weight:600; margin-bottom:6px; text-transform:uppercase; letter-spacing:0.04rem; }
.form-field input[type="email"], .form-field input[type="password"] { padding:10px 12px; border-radius:8px; border:1px solid var(--border); background:#fff; font-size:1rem; }
.form-field input:focus { outline: none; box-shadow: 0 0 0 4px rgba(0,120,212,0.06); border-color: var(--accent); }

.form-actions { margin-top:16px; }
.btn-submit { width:100%; padding:14px 18px; background: var(--accent); border:none; color:#072; font-weight:700; border-radius:8px; cursor:pointer; }
.btn-submit:hover { background: var(--accent-dark); }

@media (max-width: 480px) {
    .login-box { padding:18px; }
    .login-logo img { width:64px; }
}