:root {
    --primary: #2e7d32;
    --primary-dark: #1f5b28;
    --ink: #1f2937;
    --muted: #667085;
    --surface: #ffffff;
    --soft: #f2f6f3;
    --line: #dbe5dd;
    --shadow: 0 18px 50px rgba(25, 55, 34, .10);
    --radius: 16px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: #f6f8f6; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.55; }
a { color: var(--primary-dark); }
a:hover { color: var(--primary); }
button, input, select, textarea { font: inherit; }
button, .button { border: 0; border-radius: 10px; padding: .7rem 1rem; background: var(--primary); color: #fff; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: .45rem; font-weight: 700; }
button:hover, .button:hover { background: var(--primary-dark); color: #fff; }
.button.secondary { background: #e7f0e9; color: var(--primary-dark); }
.button.ghost { background: transparent; color: var(--primary-dark); border: 1px solid var(--line); }
.button.danger, button.danger { background: #b42318; }
h1, h2, h3 { line-height: 1.2; color: #183b24; letter-spacing: -.02em; }
h1 { font-size: clamp(1.7rem, 3vw, 2.6rem); }
h2 { font-size: clamp(1.25rem, 2vw, 1.7rem); }
img { max-width: 100%; height: auto; }

/* Public website */
.site-header { position: sticky; top: 0; z-index: 20; background: rgba(255,255,255,.94); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(219,229,221,.9); }
.site-header-inner { width: min(1180px, calc(100% - 2rem)); margin: 0 auto; min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brand { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; color: #183b24; font-weight: 850; letter-spacing: -.03em; }
.brand-mark { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; background: linear-gradient(135deg, var(--primary), #86b98c); color: #fff; font-size: 1.15rem; box-shadow: 0 8px 18px rgba(46,125,50,.22); }
.brand small { display: block; color: var(--muted); font-weight: 600; letter-spacing: 0; font-size: .72rem; }
.site-nav-list { display: flex; align-items: center; gap: .25rem; list-style: none; padding: 0; margin: 0; }
.site-nav-list > li { position: relative; }
.site-nav-list a { display: block; padding: .65rem .8rem; border-radius: 9px; color: #365341; text-decoration: none; font-weight: 650; }
.site-nav-list a:hover { background: var(--soft); color: var(--primary-dark); }
.site-nav-list ul { display: none; position: absolute; top: calc(100% + .4rem); left: 0; min-width: 220px; padding: .45rem; margin: 0; list-style: none; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
.site-nav-list li:hover > ul, .site-nav-list li:focus-within > ul { display: block; }
.nav-actions { display: flex; align-items: center; gap: .45rem; }
.menu-toggle { display: none; background: var(--soft); color: var(--primary-dark); }
.site-main { min-height: 65vh; }
.site-footer { margin-top: 4rem; padding: 2.6rem 1rem; background: #183b24; color: #d9e9db; }
.site-footer-inner { width: min(1180px, calc(100% - 2rem)); margin: 0 auto; display: flex; align-items: flex-start; justify-content: space-between; gap: 2rem; }
.site-footer a { color: #e7f7e9; }
.footer-links { display: flex; flex-wrap: wrap; gap: .8rem 1.2rem; }
.hero { min-height: min(650px, calc(100vh - 72px)); position: relative; display: grid; place-items: center; overflow: hidden; background: linear-gradient(120deg, rgba(18,65,28,.88), rgba(18,65,28,.25)), url('/assets/hero.jpg') center/cover; }
.hero::after { content: ""; position: absolute; inset: auto -10% -22% -10%; height: 45%; background: rgba(255,255,255,.10); border-radius: 50%; transform: rotate(-4deg); }
.hero-inner { width: min(1180px, calc(100% - 2rem)); position: relative; z-index: 1; color: #fff; padding: 5rem 0; }
.hero h1 { max-width: 700px; margin: 0 0 1rem; color: #fff; font-size: clamp(2.4rem, 6vw, 5rem); }
.hero p { max-width: 620px; font-size: clamp(1.05rem, 2vw, 1.3rem); color: #eef8ef; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.8rem; }
.hero .button.secondary { background: rgba(255,255,255,.16); color: #fff; border: 1px solid rgba(255,255,255,.35); }
.section { width: min(1180px, calc(100% - 2rem)); margin: 0 auto; padding: 4.5rem 0; }
.section-header { max-width: 720px; margin-bottom: 2rem; }
.section-header p { color: var(--muted); font-size: 1.05rem; }
.feature-grid, .stats-grid, .card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.feature-card, .card, .stat-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.35rem; box-shadow: 0 8px 28px rgba(25,55,34,.05); }
.feature-card strong { display: block; margin-bottom: .45rem; color: var(--primary-dark); }
.feature-icon { width: 42px; height: 42px; border-radius: 12px; background: var(--soft); display: grid; place-items: center; margin-bottom: 1rem; }
.page-shell { width: min(980px, calc(100% - 2rem)); margin: 0 auto; padding: 3.5rem 0; }
.page-content { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.2rem, 4vw, 2.5rem); box-shadow: var(--shadow); }

/* Logged-in areas */
.app-shell { min-height: 100vh; display: flex; }
.app-sidebar { width: 270px; flex: 0 0 270px; padding: 1.25rem; background: linear-gradient(180deg, #173922, #10291a); color: #d9e9db; }
.app-sidebar .brand { color: #fff; margin: .35rem .35rem 1.7rem; }
.app-sidebar .brand small { color: #a9c7ad; }
.app-nav-label { margin: 1.1rem .75rem .35rem; color: #94b89b; text-transform: uppercase; letter-spacing: .08em; font-size: .7rem; font-weight: 800; }
.app-nav a { display: flex; align-items: center; gap: .6rem; padding: .7rem .75rem; margin: .15rem 0; border-radius: 10px; color: #d9e9db; text-decoration: none; font-weight: 650; }
.app-nav a:hover, .app-nav a.active { background: rgba(255,255,255,.12); color: #fff; }
.app-main { min-width: 0; flex: 1; }
.app-topbar { min-height: 72px; padding: 1rem clamp(1rem, 3vw, 2.2rem); background: rgba(255,255,255,.94); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 1rem; position: sticky; top: 0; z-index: 10; }
.app-topbar-title { font-weight: 800; color: #183b24; }
.app-user { color: var(--muted); font-size: .9rem; text-align: right; }
.app-content { width: min(1400px, calc(100% - 2rem)); margin: 0 auto; padding: clamp(1.25rem, 3vw, 2.7rem) 0 4rem; }
.content-intro { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1.4rem; }
.content-intro h1 { margin: 0; }
.content-intro p { color: var(--muted); margin: .5rem 0 0; }
.surface { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1rem, 3vw, 1.5rem); box-shadow: 0 8px 28px rgba(25,55,34,.05); }
.stats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 1.5rem; }
.stat-card small { color: var(--muted); display: block; margin-bottom: .45rem; }
.stat-card strong { font-size: 1.8rem; color: var(--primary-dark); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
label { display: block; color: #344054; font-weight: 700; }
input, select, textarea { width: 100%; max-width: 100%; border: 1px solid #cbd8ce; border-radius: 9px; background: #fff; color: var(--ink); padding: .68rem .75rem; margin-top: .3rem; }
textarea { min-height: 110px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 3px solid rgba(46,125,50,.16); border-color: var(--primary); }
table { border-collapse: collapse; width: 100%; background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
th { background: #eef6ef; color: #31543a; text-align: left; font-size: .82rem; text-transform: uppercase; letter-spacing: .035em; }
th, td { padding: .8rem .75rem; border-bottom: 1px solid var(--line); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
.table-wrap { overflow-x: auto; border-radius: 12px; }
.notice { padding: .9rem 1rem; border-radius: 10px; background: #eef6ef; border: 1px solid #cde2cf; color: #31543a; }
.pill { display: inline-flex; align-items: center; border-radius: 999px; padding: .24rem .6rem; font-size: .76rem; font-weight: 800; background: #e7f0e9; color: #31543a; }
.update-list { display: grid; gap: 1rem; }
.update-entry h2 { margin: .85rem 0 .65rem; }
.update-meta { color: var(--muted); font-size: .88rem; }
.update-body { white-space: normal; color: #344054; }
.actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
hr { border: 0; border-top: 1px solid var(--line); margin: 1.5rem 0; }
code { background: #eef2ef; border-radius: 5px; padding: .12rem .3rem; }

/* Cookie consent */
.cookie-banner { position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 100; width: min(760px, calc(100% - 2rem)); margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 1.1rem; background: #183b24; color: #eef8ef; border: 1px solid rgba(255,255,255,.18); border-radius: 16px; box-shadow: 0 18px 45px rgba(0,0,0,.23); }
.cookie-banner p { margin: 0; font-size: .9rem; }
.cookie-banner a { color: #fff; }
.cookie-actions { display: flex; flex-wrap: wrap; gap: .45rem; flex: 0 0 auto; }
.cookie-actions button { white-space: nowrap; background: #fff; color: #183b24; }
.cookie-actions button.secondary { background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.4); }

@media (max-width: 980px) {
    .feature-grid, .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .site-header-inner { min-height: 64px; }
    .menu-toggle { display: inline-flex; }
    .site-nav { display: none; position: absolute; left: 1rem; right: 1rem; top: 68px; padding: .6rem; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); }
    .site-nav.open { display: block; }
    .site-nav-list { display: block; }
    .site-nav-list ul { position: static; display: block; margin-left: 1rem; box-shadow: none; border: 0; padding: 0; min-width: 0; }
    .nav-actions .button { display: none; }
    .hero-inner { padding: 4rem 0; }
    .feature-grid, .card-grid, .form-grid { grid-template-columns: 1fr; }
    .section { padding: 3rem 0; }
    .site-footer-inner { display: block; }
    .app-shell { display: block; }
    .app-sidebar { width: 100%; padding: .8rem 1rem; }
    .app-sidebar .brand { margin: .25rem 0 .7rem; }
    .app-nav { display: flex; overflow-x: auto; gap: .25rem; padding-bottom: .3rem; }
    .app-nav-label { display: none; }
    .app-nav a { white-space: nowrap; padding: .55rem .7rem; }
    .app-topbar { position: static; min-height: 58px; }
    .app-content { width: min(100% - 1.2rem, 1400px); }
    .app-user { display: none; }
    .cookie-banner { display: block; bottom: .6rem; padding: .9rem; }
    .cookie-actions { margin-top: .75rem; }
    .cookie-actions button { flex: 1; }
    table { display: block; min-width: 620px; max-width: 100%; overflow-x: auto; }
    .table-wrap table { min-width: 620px; }
}