:root {
    --soil: #5c4033;
    --leaf: #3d5c3a;
    --leaf-light: #6cb356;
    --cream: #f7f3e8;
    --text: #1a1f16;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: system-ui, Segoe UI, sans-serif;
    background: var(--cream);
    color: var(--text);
    line-height: 1.5;
}

.site-header, .site-footer {
    padding: 1rem 1.5rem;
    background: var(--leaf);
    color: #fff;
}

.site-header a { color: #fff; margin-right: 1rem; text-decoration: none; }
.logo { font-weight: 700; }

.site-main { max-width: 960px; margin: 0 auto; padding: 1.5rem; }

.hero h1 { color: var(--leaf); }

.btn, button {
    background: var(--leaf);
    color: #fff;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    cursor: pointer;
}

button:disabled { opacity: 0.5; cursor: not-allowed; }

.muted { color: #555; }
.flash { background: #e8f5e9; padding: 0.75rem; border-radius: 6px; }

.hud {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1rem;
    background: #fff;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    border: 1px solid #ddd;
}

.session-active { color: #2e7d32; }
.session-idle { color: #b45309; }

.plots {
    display: grid;
    grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
    gap: 0.5rem;
}

.plot {
    min-height: 120px;
    padding: 0.5rem;
    border-radius: 8px;
    border: 2px solid var(--soil);
    background: #c4a574;
    font-size: 0.85rem;
}

.plot.growing { background: #a8c686; }
.plot.ready { background: var(--leaf-light); color: #fff; }

.plant-form select { width: 100%; margin-bottom: 0.25rem; }

.seed-shop {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1.5rem;
}

.seed-buy-form label { display: inline-block; margin-right: 1rem; margin-bottom: 0.5rem; }
.seed-buy-form select, .seed-buy-form input { margin-left: 0.25rem; }


.install-page .card {
    max-width: 480px;
    margin: 2rem auto;
    background: #fff;
    padding: 1.5rem;
    border-radius: 8px;
}

.install-page label { display: block; margin: 0.75rem 0; }
.install-page input { width: 100%; padding: 0.35rem; }
.error { color: #b91c1c; }
.success { color: #15803d; }

.sandbox .warning {
    background: #fff3cd;
    padding: 0.75rem;
    border-radius: 6px;
    border: 1px solid #e6c200;
}

.sandbox-form label { display: block; margin: 0.75rem 0; }
.sandbox-form input { width: 100%; max-width: 400px; padding: 0.35rem; }