:root {
    color-scheme: light;
    font-family: Inter, "Segoe UI", Arial, sans-serif;
    color: #17211d;
    background: #edf1ef;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: #edf1ef; }

.app-header {
    height: 54px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    color: #fff;
    background: #17352b;
}

.app-header-brand, .app-user { display: flex; align-items: center; gap: 14px; }
.app-brand { color: #fff; font-size: 18px; font-weight: 700; text-decoration: none; }
.app-header span { color: #c7d7d1; font-size: 13px; }
.app-user form { margin: 0; }
.app-logout { padding: 6px 10px; color: #fff; background: transparent; border: 1px solid #78978b; border-radius: 6px; cursor: pointer; font: inherit; }
.app-logout:hover { background: #24483b; }
.content { min-height: calc(100vh - 54px); }

.input {
    width: 100%;
    min-height: 38px;
    padding: 8px 11px;
    border: 1px solid #cbd5d1;
    border-radius: 6px;
    font: inherit;
}

.btn {
    min-height: 38px;
    padding: 8px 14px;
    border: 0;
    border-radius: 6px;
    font: inherit;
    font-weight: 600;
}

.btn-primary { color: #fff; background: #167a55; }
.btn-primary:hover { background: #116744; }
.btn-full { width: 100%; }
.btn:disabled, .input:disabled { cursor: not-allowed; opacity: .6; }

.login-body {
    min-height: 100vh;
    margin: 0;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #17352b;
}

.login-card {
    width: min(100%, 420px);
    padding: 30px;
    background: #fff;
    border: 1px solid #d6dfdb;
    border-radius: 8px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .24);
}

.login-logo { width: 76px; height: 76px; object-fit: contain; display: block; margin: 0 auto 14px; }
.login-card h1 { margin: 0 0 6px; text-align: center; font-size: 26px; }
.login-subtitle { margin: 0 0 24px; color: #607069; text-align: center; }
.login-form { display: grid; gap: 16px; }
.login-field { display: grid; gap: 6px; }
.login-field label { font-size: 14px; font-weight: 650; }
.alert-error { margin-bottom: 18px; padding: 11px 13px; color: #8f1c13; background: #fff0f0; border: 1px solid #f4c7c7; border-radius: 6px; }

@media (max-width: 640px) {
    .app-header-brand span, .app-user > span { display: none; }
    .login-card { padding: 24px 20px; }
}