:root { color-scheme: light dark; --fg:#1d2a22; --bg:#f4f7f2; --card:#ffffff; --muted:#5b6b60; --accent:#2f7d4f; --line:#dfe6dd; }
@media (prefers-color-scheme: dark) { :root { --fg:#e8efe9; --bg:#15201a; --card:#1d2b23; --muted:#a7b7ab; --accent:#6fcf97; --line:#2c3d32; } }
* { box-sizing: border-box; }
body { margin:0; font-family: -apple-system, "Sukhumvit Set", "Noto Sans Thai", "Helvetica Neue", Arial, sans-serif; color:var(--fg); background:var(--bg); line-height:1.7; }
header { background:var(--accent); color:#fff; padding:18px 20px; }
header a { color:#fff; }
header h1 { margin:0; font-size:1.35rem; }
nav.lang { margin-top:6px; font-size:.95rem; }
main { max-width:820px; margin:0 auto; padding:16px 20px 48px; }
section.card { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:8px 22px 18px; margin:18px 0; }
h2 { font-size:1.25rem; margin-top:18px; }
h3 { font-size:1.05rem; margin:18px 0 4px; }
table { border-collapse:collapse; width:100%; font-size:.93rem; }
th, td { border:1px solid var(--line); padding:6px 8px; text-align:left; vertical-align:top; }
th { background:rgba(47,125,79,.10); }
.muted { color:var(--muted); font-size:.92rem; }
.ph { background:#ffe58a; color:#3a2d00; padding:0 4px; border-radius:4px; }
a { color:var(--accent); }
footer { text-align:center; color:var(--muted); font-size:.85rem; padding:20px; }