* {
    box-sizing: border-box;
}

:root {
    --login-paper: #F1ECDD;
    --login-paper-2: #E7DFC7;
    --login-ink: #1C2624;
    --login-muted: #53625E;
    --login-teal: #0E3B36;
    --login-teal-light: #175750;
    --login-seal: #9C2B1F;
    --login-gold: #B8863B;
    --login-line: #C9BFA0;
    --login-line-strong: #A79C7A;
}

html,
body {
    min-height: 100%;
}

body {
    align-items: center;
    background:
        linear-gradient(135deg, rgba(14, 59, 54, 0.08), transparent 42%),
        repeating-linear-gradient(135deg, transparent 0 26px, rgba(28, 38, 36, 0.035) 26px 27px),
        var(--login-paper);
    color: var(--login-ink);
    display: flex;
    font-family: Arial, Helvetica, sans-serif;
    justify-content: center;
    margin: 0;
    padding: 24px;
}

.login-container {
    width: min(100%, 430px);
}

.login-card {
    background: var(--login-paper);
    border: 1px solid var(--login-line-strong);
    box-shadow: 0 24px 48px -28px rgba(28, 38, 36, 0.55);
    padding: 34px;
    position: relative;
}

.login-card::before,
.login-card::after {
    background: repeating-linear-gradient(90deg, var(--login-line-strong) 0 6px, transparent 6px 11px);
    content: "";
    height: 1px;
    left: 0;
    position: absolute;
    right: 0;
}

.login-card::before {
    top: -1px;
}

.login-card::after {
    bottom: -1px;
}

.login-header {
    align-items: center;
    border-bottom: 1px solid var(--login-line);
    display: flex;
    gap: 14px;
    margin-bottom: 26px;
    padding-bottom: 22px;
}

.login-header i,
.login-mark {
    align-items: center;
    border: 1px solid var(--login-teal);
    color: var(--login-teal);
    display: inline-flex;
    flex: 0 0 44px;
    font-size: 1.2rem;
    height: 44px;
    justify-content: center;
    width: 44px;
}

.login-header span {
    color: var(--login-teal);
    display: block;
    font-size: 1.45rem;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1;
}

.login-subtitle {
    color: var(--login-muted);
    display: block;
    font-family: Consolas, "Courier New", monospace;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    margin-top: 6px;
    text-transform: uppercase;
}

.alert {
    border: 1px solid var(--login-seal);
    color: var(--login-seal);
    font-size: 0.92rem;
    margin-bottom: 18px;
    padding: 12px;
}

.form-group {
    display: grid;
    gap: 7px;
    margin-bottom: 18px;
}

.form-label {
    color: var(--login-muted);
    font-family: Consolas, "Courier New", monospace;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.input-group {
    align-items: stretch;
    display: flex;
}

.form-control {
    background: #FBF8EF;
    border: 1px solid var(--login-line-strong);
    color: var(--login-ink);
    flex: 1 1 auto;
    font: inherit;
    min-height: 46px;
    min-width: 0;
    padding: 10px 12px;
    width: 100%;
}

.form-control:focus {
    border-color: var(--login-seal);
    box-shadow: 0 0 0 3px rgba(156, 43, 31, 0.13);
    outline: none;
}

.input-group-text {
    align-items: center;
    background: var(--login-paper-2);
    border: 1px solid var(--login-line-strong);
    border-left: 0;
    color: var(--login-teal);
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    min-width: 48px;
}

.btn-primary {
    background: var(--login-teal);
    border: 1px solid var(--login-teal);
    color: var(--login-paper);
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-weight: 700;
    justify-content: center;
    min-height: 46px;
    padding: 11px 18px;
    transition: background 0.2s ease, transform 0.15s ease;
    width: 100%;
}

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

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

.login-footer {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.login-footer a {
    color: var(--login-seal);
    font-family: Consolas, "Courier New", monospace;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-decoration: none;
    text-transform: uppercase;
}

@media (max-width: 520px) {
    body {
        align-items: flex-start;
        padding: 16px;
    }

    .login-card {
        padding: 26px 20px;
    }
}