*{box-sizing:border-box}
body{margin:0;font:17px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans Thai","Leelawadee UI",Tahoma,sans-serif;background:#f3f6f4;color:#1d2a24}
header{background:#2f7d5b;color:#fff;padding:.6rem 1rem;display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1.2rem}
header a,header .link{color:#fff;text-decoration:none;font-size:1rem}
.brand{font-weight:700;font-size:1.2rem}
nav{display:flex;flex-wrap:wrap;gap:.2rem 1rem;align-items:center}
nav a,nav .link{padding:.5rem 0}
main{max-width:860px;margin:0 auto;padding:1rem}
.card{background:#fff;border-radius:12px;padding:1rem;margin:0 0 1rem;box-shadow:0 1px 3px #0001}
.narrow{max-width:420px;margin:2rem auto}
.grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}.grid .card{margin:0}
.link-card{display:block;color:inherit;text-decoration:none}
h1{font-size:1.5rem;margin:.5rem 0 1rem}h2{font-size:1.2rem;margin:.2rem 0 .6rem}
a{color:#1f6b4b}.muted{color:#66756d;font-size:.9rem}
label{display:block;margin:.6rem 0;font-weight:600}
input,select,textarea{display:block;width:100%;padding:.7rem;margin-top:.25rem;font:inherit;border:1px solid #b9c6bf;border-radius:8px;background:#fff}
.btn,button.link{font:inherit;cursor:pointer}
.btn{display:inline-block;background:#2f7d5b;color:#fff;border:0;border-radius:8px;padding:.75rem 1.2rem;text-decoration:none;min-height:44px}
.btn.small{padding:.4rem .8rem;min-height:40px}.btn.danger{background:#b3402f}
button.link{background:none;border:0;color:#fff;padding:.5rem 0}
form.inline{display:inline}
.row{display:flex;justify-content:space-between;align-items:center;gap:.8rem;padding:.55rem 0;border-bottom:1px solid #eef2ef}
.row:last-child{border-bottom:0}.card.row{border-bottom:0}
.flash{padding:.8rem 1rem;border-radius:8px;margin-bottom:1rem}
.flash.ok{background:#dcf2e5}.flash.error{background:#fbdcd7}
.badge{display:inline-block;background:#dfe9e3;border-radius:99px;padding:.1rem .7rem;font-size:.85rem}
.badge.off{background:#fbdcd7}.s-üben{background:#ffe9b3}.s-sicher{background:#bfe8cf}
.bar{background:#e1e9e4;border-radius:99px;height:12px;overflow:hidden}.bar span{display:block;height:100%;background:#2f7d5b}
.seg{display:flex}.seg button{font:inherit;padding:.6rem .9rem;min-height:44px;border:1px solid #2f7d5b;background:#fff;color:#2f7d5b;cursor:pointer}
.seg button:first-child{border-radius:8px 0 0 8px}.seg button:last-child{border-radius:0 8px 8px 0}
.seg button.on{background:#2f7d5b;color:#fff}
ol{padding-left:1.3rem}li{margin:.3rem 0}

.actions{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:flex-end}
.langs{margin-left:auto;display:flex;gap:.3rem}
.langs a{padding:.3rem .55rem;border-radius:6px;font-size:.9rem;opacity:.8}
.langs a.on{background:#fff3;opacity:1;font-weight:700}