:root {
    --bg: #15110f;
    --wood-dark: #2b1f18;
    --wood-mid: #5a3b2a;
    --wood-light: #8c5f3f;
    --gold: #d2b27a;
    --text: #f2e7d7;
    --muted: #c5b39a;
    --danger: #f88b7a;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    min-height: 100vh;
    font-family: Georgia, "Times New Roman", serif;
    color: var(--text);
    background:
        radial-gradient(circle at 20% 15%, rgba(210,178,122,.18), transparent 30%),
        radial-gradient(circle at 80% 85%, rgba(140,95,63,.22), transparent 35%),
        linear-gradient(140deg, #120f0d 0%, #1b1512 45%, #221912 100%);
    display: grid;
    place-items: center;
    padding: 24px;
}

.panel {
    width: 100%;
    max-width: 450px;
    background: linear-gradient(160deg, rgba(43,31,24,.95), rgba(29,22,18,.95));
    border: 1px solid rgba(210,178,122,.25);
    border-radius: 18px;
    box-shadow: 0 20px 45px rgba(0,0,0,.45);
    padding: 28px;
}

h1 { margin: 0 0 8px 0; font-size: 28px; }
.sub { margin: 0 0 20px 0; color: var(--muted); }
.field { margin-bottom: 14px; }
label { display: block; margin-bottom: 6px; font-size: 14px; color: var(--gold); }

input[type="text"],
input[type="password"] {
    width: 100%;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(210,178,122,.25);
    background: rgba(255,255,255,.04);
    color: var(--text);
    outline: none;
}

input:focus { border-color: var(--gold); }
.remember { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; color: var(--muted); }

.btn {
    width: 100%;
    padding: 11px;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--wood-light), var(--wood-mid));
    color: #fff;
    font-weight: 700;
    cursor: pointer;
}

.btn:hover { filter: brightness(1.08); }
.foot { margin-top: 14px; text-align: center; color: var(--muted); }
.foot a { color: var(--gold); text-decoration: none; }
.errors { background: rgba(248,139,122,.12); border: 1px solid rgba(248,139,122,.45); border-radius: 10px; padding: 10px 14px; margin-bottom: 14px; color: var(--danger); }
.errors ul { margin: 0; padding-left: 18px; }

.info-box {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: rgba(210,178,122,.12);
    border: 1px solid rgba(210,178,122,.35);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 18px;
    color: var(--gold);
}
.info-box .info-icon { font-size: 1.5rem; flex-shrink: 0; margin-top: 2px; }
.info-box strong { display: block; font-size: 0.95rem; margin-bottom: 4px; color: var(--gold); }
.info-box p { margin: 0; font-size: 0.82rem; line-height: 1.45; color: var(--muted); }

@media (max-width: 576px) {
    body {
        padding: 14px;
    }

    .panel {
        border-radius: 14px;
        padding: 18px 14px;
    }

    h1 {
        font-size: 1.5rem;
    }

    .sub,
    .foot {
        font-size: 0.9rem;
    }
}