/* Stile base: leggibile, contrasto alto, pulsanti grandi per l'uso da telefono. */
:root {
    --bg: #f6f4ee;
    --surface: #ffffff;
    --text: #1f2a1f;
    --muted: #5d6b5d;
    --border: #dcd8cc;
    --primary: #2f6b3a;
    --primary-text: #ffffff;
    --ok-bg: #e3f1e5;
    --ok-text: #1f5a2b;
    --warn-bg: #fdf0d9;
    --warn-text: #7a4b05;
    --error-bg: #fbe3e1;
    --error-text: #8a1f17;
    --radius: 12px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #141814;
        --surface: #1e241e;
        --text: #e8ece6;
        --muted: #a3aea3;
        --border: #354035;
        --primary: #6fb07c;
        --primary-text: #0f1a10;
        --ok-bg: #1f3424;
        --ok-text: #a8dcb2;
        --warn-bg: #3a2e14;
        --warn-text: #f2cf8a;
        --error-bg: #3d1e1b;
        --error-text: #f4b1a9;
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 17px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

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

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text);
    font-weight: 600;
    text-decoration: none;
}

.topbar-form { margin: 0; }

.page {
    max-width: 720px;
    margin: 0 auto;
    padding: 20px 16px 48px;
}

h1 { font-size: 1.6rem; line-height: 1.25; margin: 8px 0 16px; }
h2 { font-size: 1.15rem; margin: 0 0 12px; }

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    margin-bottom: 16px;
}

.card.narrow { max-width: 440px; margin-left: auto; margin-right: auto; }

.hero { padding: 32px 0; }
.hero p { font-size: 1.1rem; color: var(--muted); }

.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }

.button {
    display: inline-block;
    min-height: 48px;
    padding: 12px 22px;
    border: 2px solid var(--primary);
    border-radius: var(--radius);
    background: var(--primary);
    color: var(--primary-text);
    font: inherit;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.button-secondary { background: transparent; color: var(--primary); }

.link-button {
    background: none;
    border: 0;
    padding: 8px;
    color: var(--primary);
    font: inherit;
    cursor: pointer;
}

.form { display: grid; gap: 16px; }
.form label { display: grid; gap: 6px; font-weight: 500; }
.form input, .form select {
    min-height: 48px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg);
    color: var(--text);
    font: inherit;
}
.form .check { grid-template-columns: auto 1fr; align-items: start; font-weight: 400; }
.form .check input { min-height: auto; width: 22px; height: 22px; margin-top: 2px; }

.notice { padding: 12px 16px; border-radius: var(--radius); margin-bottom: 16px; }
.notice-success { background: var(--ok-bg); color: var(--ok-text); }
.notice-error { background: var(--error-bg); color: var(--error-text); }

.status { padding: 10px 14px; border-radius: 10px; margin: 0 0 12px; }
.status-ok { background: var(--ok-bg); color: var(--ok-text); }
.status-warn { background: var(--warn-bg); color: var(--warn-text); }

.muted { color: var(--muted); }

.list { list-style: none; margin: 0; padding: 0; }
.list li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}
.list li:last-child { border-bottom: 0; }

.plain { padding-left: 20px; }
code { font-size: 0.9em; }