/* Login page only (loaded by index.php). Does not affect other pages. */
body.login-page { background: #fff; font-family: Roboto, "Segoe UI", -apple-system, Arial, sans-serif; color: #444; }

.login-topbar {
    height: 64px; display: flex; align-items: center; padding: 0 24px;
    background: #fff; border-top: 2px solid #343a40; box-shadow: 0 1px 4px rgba(0,0,0,.18);
}
.login-burger { display: inline-block; width: 26px; margin-right: 26px; }
.login-burger i { display: block; height: 4px; background: #6c6c6c; border-radius: 1px; margin: 4px 0; }
.login-brand { font-size: 22px; font-weight: 500; color: #343a40; letter-spacing: .3px; }

.login-wrap { max-width: 770px; margin: 0 auto; padding: 18px 15px 40px; }
.login-logo { text-align: center; font-size: 34px; font-weight: 500; color: #343a40; padding: 22px 0 26px; }

.login-card {
    background: #fff; border: 1px solid #ececec; box-shadow: 0 1px 4px rgba(0,0,0,.2);
    padding: 32px;
}
.login-field {
    width: 100%; height: 51px; margin-bottom: 25px; padding: 0 14px 0 50px;
    border: 1px solid #cfcfcf; border-radius: 0; background-color: #fff;
    background-repeat: no-repeat; background-position: 14px center; background-size: 22px 22px;
    font-size: 16px; color: #444; outline: none;
}
.login-field:focus { border-color: #6262c0; box-shadow: 0 0 0 2px rgba(98,98,192,.18); }
.login-field::placeholder { color: #757575; }
.login-user {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='7.5' r='5' fill='%23b5b5b5'/><path d='M2 23c0-6 4-9.5 10-9.5S22 17 22 23z' fill='%23b5b5b5'/></svg>");
}
.login-pass {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 10V7a5 5 0 0 1 10 0v3' fill='none' stroke='%23b5b5b5' stroke-width='2.4'/><rect x='3.5' y='10' width='17' height='13' rx='1.5' fill='%23b5b5b5'/><circle cx='12' cy='16' r='1.7' fill='%23fff'/></svg>");
}
.login-btn {
    display: block; width: 100%; height: 46px; margin-top: 8px; border: 0; border-radius: 0;
    background: #6262c0; color: #fff; font-size: 18px; cursor: pointer;
}
.login-btn:hover { background: #5353b0; }
.login-forgot { text-align: right; margin-top: 26px; }
.login-forgot a { color: #444; font-size: 17px; text-decoration: none; }
.login-forgot a:hover { text-decoration: underline; }