* {
    box-sizing: border-box;
}

:root {
    --cell: 19px;
    --grid-line: 1px;
    --tile: calc(var(--cell) + var(--grid-line));
    --tile-2: calc(var(--tile) * 2 + var(--grid-line));
    --paper: #ffffff;
    --ink: #2f2b26;
    --soft-ink: #70675c;
    --accent-dark: #7a5b00;
    --accent-soft: #ead08a;
    --line: rgba(72, 61, 48, 0.22);
    --button-surface: rgba(255, 255, 255, 0.74);
}

body {
    margin: 0;
    min-height: 100vh;
    color: var(--ink);
    font-family: "Nunito", "Segoe UI", Arial, sans-serif;
    background: var(--paper);
}

.donate-panel {
    display: grid;
    min-height: 100vh;
    padding: var(--tile);
    background: var(--paper);
}

.donate-box,
form {
    display: grid;
    gap: calc(var(--tile) / 2);
}

.donate-kicker {
    margin: 0;
    color: var(--accent-dark);
    font-size: 0.78rem;
    font-weight: 900;
    line-height: var(--tile);
    text-transform: uppercase;
}

h2 {
    margin: 0;
    color: var(--ink);
    font-size: 1.35rem;
    font-weight: 900;
    line-height: calc(var(--tile) * 1.6);
}

.donate-copy,
.form-message {
    margin: 0;
    color: var(--soft-ink);
    font-size: 0.92rem;
    font-weight: 800;
    line-height: calc(var(--tile) * 1.2);
}

label {
    margin-top: calc(var(--tile) / 2);
    color: var(--soft-ink);
    font-size: 0.8rem;
    font-weight: 900;
    line-height: var(--tile);
    text-transform: uppercase;
}

.amount-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: calc(var(--tile) / 2);
}

.amount-chip,
.panel-btn {
    min-height: var(--tile-2);
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--button-surface);
    color: var(--ink);
    cursor: pointer;
    font: inherit;
    font-weight: 900;
}

.amount-chip.active,
.panel-btn {
    border-color: var(--accent-dark);
    background: var(--accent-soft);
    color: var(--accent-dark);
}

.amount-field {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: calc(var(--tile) / 2);
    min-height: var(--tile-2);
    padding: 0 calc(var(--tile) / 2);
    border-radius: 13px;
    outline: 1px solid var(--line);
    outline-offset: -1px;
    background: var(--button-surface);
    color: var(--accent-dark);
    font-weight: 900;
}

input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-size: 0.95rem;
    font-weight: 800;
}

.panel-btn {
    margin-top: calc(var(--tile) / 2);
    border-radius: 11px;
}