:root {
    --bg: #14100d;
    --wood-dark: #2e221a;
    --wood-mid: #684732;
    --wood-light: #8f6645;
    --gold: #d8b784;
    --text: #f4e8d6;
    --muted: #cdbca2;
    --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 10% 12%, rgba(143,102,69,.22), transparent 28%),
        radial-gradient(circle at 90% 90%, rgba(216,183,132,.18), transparent 34%),
        linear-gradient(140deg, #120f0d 0%, #1b1512 50%, #221a14 100%);
    display: grid;
    place-items: center;
    padding: 24px;
}

.panel {
    width: 100%;
    max-width: 820px;
    background: linear-gradient(165deg, rgba(46,34,26,.96), rgba(30,23,18,.96));
    border: 1px solid rgba(216,183,132,.24);
    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 18px 0; color: var(--muted); }
.section { margin-top: 8px; margin-bottom: 8px; color: var(--gold); font-size: 14px; text-transform: uppercase; letter-spacing: .08em; }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.full { grid-column: 1 / -1; }
label { display: block; margin-bottom: 6px; font-size: 14px; color: var(--gold); }

input {
    width: 100%;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(216,183,132,.22);
    background: rgba(255,255,255,.04);
    color: var(--text);
    outline: none;
}

input:focus { border-color: var(--gold); }

.input-invalid {
    border-color: rgba(248, 139, 122, .75) !important;
    box-shadow: 0 0 0 1px rgba(248, 139, 122, .25);
}

.field-error {
    display: block;
    margin-top: 6px;
    font-size: .82rem;
    color: var(--danger);
}

.btn {
    width: 100%;
    margin-top: 16px;
    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: 12px; 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; }

@media (max-width: 720px) {
    .grid { grid-template-columns: 1fr; }
}

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

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

    h1 {
        font-size: 1.45rem;
    }

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