:root{--green:#0b6b3a;--green-d:#06331d;--green-l:#e7f4ec;--accent:#18a957;--red:#c8302f;--ink:#14231a;--mute:#5d6b63;--line:#dbe4de;--bg:#f4f7f5}
*{box-sizing:border-box}
body{margin:0;font-family:"Segoe UI",system-ui,-apple-system,Roboto,sans-serif;color:var(--ink);background:var(--bg);line-height:1.5}
a{color:var(--green)}
img{max-width:100%}
.btn{display:inline-block;border:0;border-radius:8px;background:var(--green);color:#fff;padding:.6rem 1.1rem;font:inherit;font-weight:600;text-decoration:none;cursor:pointer}
.btn:hover{background:var(--green-d)}
.btn:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #7fd6a4;outline-offset:2px}
.btn.ghost{background:transparent;color:#fff;border:1.5px solid #fff}
.btn.light{background:#fff;color:var(--green)}
.btn.sm{padding:.3rem .7rem;font-size:.85rem}
.btn.red{background:var(--red)}
.btn.grey{background:#e8eeea;color:var(--ink)}

/* landing */
.site-head{position:absolute;inset:0 0 auto 0;z-index:5;display:flex;align-items:center;gap:2rem;padding:.8rem 5vw;background:linear-gradient(#04170d,#04170dcc)}
.brand{display:flex;align-items:center;gap:.7rem;color:#fff;text-decoration:none;font-weight:700;line-height:1.1}
.brand img{height:46px;border-radius:8px}
.site-head nav{display:flex;gap:1.6rem;margin-left:auto;margin-right:1rem}
.site-head nav a{color:#e6f3ea;text-decoration:none;font-size:.95rem}
.site-head nav a:hover{color:#6be29c}
.hero{min-height:560px;display:flex;align-items:center;padding:8rem 5vw 5rem;color:#fff;
 background:linear-gradient(90deg,#04170dee 0%,#04170d99 45%,#0000 100%),url('/images/hero.jpg') center/cover,radial-gradient(circle at 80% 30%,#14803f,#04170d 70%)}
.hero h1{font-size:clamp(2.4rem,6vw,4.4rem);line-height:1.02;margin:0 0 1rem;max-width:12ch}
.hero h1 b{color:#2fd27a;display:block}
.hero p{font-size:1.25rem;max-width:30ch;margin:0 0 2rem}
.hero .actions{display:flex;gap:.8rem;flex-wrap:wrap}
.section{padding:4rem 5vw}
.section.white{background:#fff}
.section h2{font-size:2rem;margin:.2rem 0 1rem}
.mission{display:grid;grid-template-columns:1.2fr 2fr;gap:3rem;align-items:center}
.values{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.value{border-left:3px solid var(--accent);padding-left:1rem}
.value h3{margin:0 0 .3rem}
.value p{margin:0;color:var(--mute);font-size:.92rem}
.sports{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1rem;margin-top:1.5rem}
.sport{background:linear-gradient(160deg,var(--green),var(--green-d));color:#fff;border-radius:14px;padding:1.4rem 1rem;font-weight:600;min-height:110px;display:flex;flex-direction:column;justify-content:flex-end}
.sport span{font-size:2rem}
.cta{background:linear-gradient(90deg,var(--green-d),var(--green));color:#fff;display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;padding:2rem 5vw}
.cta h2{margin:0}
.site-foot{background:#04170d;color:#c4d6ca;padding:2.5rem 5vw;display:flex;gap:3rem;flex-wrap:wrap;justify-content:space-between}
.site-foot a{color:#c4d6ca}

/* app shell */
.topbar{background:var(--green-d);color:#fff;display:flex;align-items:center;gap:1.2rem;padding:.6rem 2rem;flex-wrap:wrap}
.topbar .brand img{height:38px}
.topbar nav{display:flex;gap:.2rem;flex-wrap:wrap;flex:1}
.topbar nav a{color:#d6e9dc;text-decoration:none;padding:.4rem .8rem;border-radius:6px;font-size:.95rem}
.topbar nav a:hover,.topbar nav a.on{background:#ffffff22;color:#fff}
.who{font-size:.85rem;text-align:right;line-height:1.2}
.who small{color:#9fc4ad}
.who button{background:none;border:0;color:#fff;text-decoration:underline;cursor:pointer;font:inherit;padding:0}
main{max-width:1150px;margin:0 auto;padding:2rem 1.5rem 4rem}
h1.page{margin:0 0 1.2rem;font-size:1.6rem}
.row{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1rem}
.panel{background:#fff;border:1px solid var(--line);border-radius:12px;padding:1.3rem}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1rem;margin-bottom:1.5rem}
.stat{background:#fff;border:1px solid var(--line);border-radius:12px;padding:1rem 1.2rem}
.stat b{font-size:2rem;display:block;color:var(--green)}
.stat span{color:var(--mute);font-size:.9rem}
table.t{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.t th,.t td{padding:.65rem .9rem;text-align:left;border-bottom:1px solid var(--line);font-size:.93rem;vertical-align:middle}
.t th{background:var(--green-l);font-weight:600}
.t tr:last-child td{border-bottom:0}
.tablewrap{overflow-x:auto}
.badge{display:inline-block;border-radius:99px;padding:.1rem .65rem;font-size:.78rem;font-weight:600}
.badge.draft{background:#e8eeea;color:#46554c}.badge.submitted{background:#fff2cc;color:#7a5a00}
.badge.approved{background:#d4f2e0;color:#0a5a30}.badge.rejected{background:#fbdcdc;color:#8d1d1d}
form.f{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem 1.2rem}
.f label{display:block;font-weight:600;font-size:.88rem;margin-bottom:.25rem}
.f input,.f select,.f textarea,.inline input,.inline select{width:100%;padding:.55rem .7rem;border:1px solid #c5d2ca;border-radius:8px;font:inherit;background:#fff}
.f .full{grid-column:1/-1}
.f h3{grid-column:1/-1;margin:.6rem 0 0;padding-bottom:.3rem;border-bottom:1px solid var(--line);color:var(--green)}
.err{color:var(--red);font-size:.82rem}
.alert{padding:.7rem 1rem;border-radius:8px;margin-bottom:1rem}
.alert.ok{background:#d4f2e0;color:#0a5a30}.alert.bad{background:#fbdcdc;color:#8d1d1d}
.inline{display:flex;gap:.6rem;flex-wrap:wrap;align-items:end;margin-bottom:1rem}
.inline>*{width:auto;min-width:160px}
.detail{display:grid;grid-template-columns:200px 1fr;gap:1.5rem}
.detail img.photo{width:200px;height:250px;object-fit:cover;border-radius:10px;border:1px solid var(--line)}
dl.kv{display:grid;grid-template-columns:170px 1fr;gap:.35rem 1rem;margin:0}
dl.kv dt{color:var(--mute)}dl.kv dd{margin:0;font-weight:600}
.login-wrap{min-height:100vh;display:grid;place-items:center;background:linear-gradient(160deg,var(--green-d),var(--green));padding:1rem}
.login{background:#fff;border-radius:16px;padding:2rem;width:100%;max-width:400px}
.login img{height:70px;display:block;margin:0 auto 1rem;border-radius:10px}
.login .f{grid-template-columns:1fr}
.verify{max-width:460px;margin:3rem auto;background:#fff;border-radius:16px;padding:2rem;text-align:center;border:1px solid var(--line)}
.verify .mark{font-size:4rem;line-height:1}
.verify.ok{border-top:8px solid var(--accent)}.verify.no{border-top:8px solid var(--red)}
.actions-row{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1rem}
@media(max-width:800px){.mission,.detail{grid-template-columns:1fr}.values{grid-template-columns:1fr 1fr}form.f{grid-template-columns:1fr}.site-head nav{display:none}.site-head{justify-content:space-between}}
@media print{.topbar,.noprint{display:none!important}body{background:#fff}main{padding:0}}