:root {
    --bg: #f7f1ea;
    --card: #fffdf9;
    --text: #2b1d22;
    --muted: #6f5d63;
    --wine: #7a1f3d;
    --wine-dark: #5c142c;
    --line: #e6d9cf;
    --error: #b3261e;
    --ok-bg: #eef5ea;
    --ok-text: #2f5a22;
    --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
    --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #1b1315;
        --card: #261b1e;
        --text: #f3e9ea;
        --muted: #bba9ae;
        --wine: #d9708f;
        --wine-dark: #e88aa6;
        --line: #3d2c31;
        --error: #ff8a80;
        --ok-bg: #22301d;
        --ok-text: #b9dca8;
    }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--sans);
    font-size: 17px;
    line-height: 1.55;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.page {
    flex: 1;
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    padding: 40px 16px 24px;
}

.masthead { text-align: center; margin-bottom: 28px; }

.wordmark {
    font-family: var(--serif);
    font-size: 56px;
    line-height: 1;
    letter-spacing: 0.01em;
    color: var(--wine);
    text-decoration: none;
}

.motto {
    margin: 8px 0 0;
    font-family: var(--serif);
    font-style: italic;
    font-size: 19px;
    color: var(--muted);
}

.card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 28px 24px;
    box-shadow: 0 1px 2px rgba(60, 20, 30, 0.04), 0 8px 24px rgba(60, 20, 30, 0.05);
}

.card.wide { max-width: none; }
.center { text-align: center; }

h1 {
    font-family: var(--serif);
    font-weight: 600;
    font-size: 28px;
    line-height: 1.2;
    margin: 0 0 12px;
}

.lead { margin: 0 0 24px; }
.sign { white-space: nowrap; color: var(--muted); }
.muted { color: var(--muted); font-size: 15px; }
.glass { font-size: 44px; margin: 0 0 4px; }

.field { margin-bottom: 18px; }

label { display: block; font-weight: 600; margin-bottom: 6px; }
.optional { font-weight: 400; color: var(--muted); }

input[type="text"], input[type="email"], input[type="tel"], input[type="password"] {
    width: 100%;
    font: inherit;
    color: var(--text);
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 12px 14px;
}

input:focus-visible, button:focus-visible, a:focus-visible {
    outline: 3px solid var(--wine);
    outline-offset: 2px;
}

.hint { margin: 6px 0 0; font-size: 14px; color: var(--muted); }

.check {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin: 0 0 16px;
}

.check input {
    flex: none;
    width: 22px;
    height: 22px;
    margin: 2px 0 0;
    accent-color: var(--wine);
}

.check label { font-weight: 400; margin: 0; }

.has-error input { border-color: var(--error); }
.error { color: var(--error); font-size: 14px; margin: 6px 0 0; }
.check + .error { margin: -10px 0 16px 34px; }

.alert {
    color: var(--error);
    border: 1px solid var(--error);
    border-radius: 10px;
    padding: 10px 14px;
}

.notice {
    background: var(--ok-bg);
    color: var(--ok-text);
    border-radius: 10px;
    padding: 10px 14px;
}

.button {
    display: inline-block;
    width: 100%;
    margin-top: 8px;
    font: inherit;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    color: #fff;
    background: var(--wine);
    border: 0;
    border-radius: 999px;
    padding: 14px 22px;
    cursor: pointer;
}

.button:hover { background: var(--wine-dark); }
.card.wide .button { width: auto; }

@media (prefers-color-scheme: dark) {
    .button { color: #1b1315; }
}

.link-button {
    font: inherit;
    font-size: 15px;
    background: none;
    border: 0;
    padding: 0;
    color: var(--wine);
    text-decoration: underline;
    cursor: pointer;
}

.link-button.danger { color: var(--error); }

a { color: var(--wine); }

.hp {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.admin-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }

.stats { display: flex; gap: 12px; flex-wrap: wrap; margin: 8px 0 16px; }
.stats div {
    flex: 1 1 120px;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 12px;
    text-align: center;
}
.stats strong { display: block; font-family: var(--serif); font-size: 28px; color: var(--wine); }
.stats span { font-size: 14px; color: var(--muted); }

.table-wrap { overflow-x: auto; margin-top: 16px; }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
th { font-weight: 600; color: var(--muted); }
td form { margin: 0; }
tr.pending td { color: var(--muted); }
tr.pending td:nth-child(5) { font-style: italic; }

.footer {
    text-align: center;
    font-size: 14px;
    color: var(--muted);
    padding: 16px 16px 32px;
}
.footer p { margin: 0; }

@media (min-width: 900px) {
    body:has(.card.wide) .page { max-width: 960px; }
}