:root{--pink:#e46a9b;--pinkl:#fbe3ee;--brown:#5a3a26;--cream:#fffaf6}
*{box-sizing:border-box}body{margin:0;font-family:Georgia,serif;color:var(--brown);background:var(--cream)}
header{background:#fff;border-bottom:4px solid var(--pink);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;padding:8px 20px}
header img{height:70px}nav a{margin:0 10px;color:var(--brown);text-decoration:none;font-weight:bold}nav a:hover{color:var(--pink)}
.hero{background:linear-gradient(135deg,var(--pink),var(--brown));color:#fff;text-align:center;padding:60px 20px}
.hero h1{font-size:2.6em;margin:0}.btn{display:inline-block;background:#fff;color:var(--pink);padding:12px 22px;border-radius:30px;font-weight:bold;text-decoration:none;margin-top:16px}
.wrap{max-width:1000px;margin:auto;padding:30px 20px}.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.card{background:#fff;border:1px solid #eed;border-top:4px solid var(--pink);border-radius:8px;padding:16px}
.ph{background:#fff3c4;border:1px dashed #c9a200;padding:0 4px;border-radius:3px}
.count{font-size:2em;text-align:center;font-weight:bold}.count b{color:var(--pink)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px}
.stall{border-radius:8px;padding:14px;text-align:center;color:#fff;font-weight:bold;cursor:default}
.available{background:#3a9d5d}.reserved{background:#e0a020}.occupied{background:#9b3b3b}
.legend span{display:inline-block;padding:4px 10px;border-radius:4px;color:#fff;margin-right:6px}
form label{display:block;margin-top:10px;font-weight:bold}input,select,textarea{width:100%;padding:8px;font:inherit;border:1px solid #ccb;border-radius:4px}
table{width:100%;border-collapse:collapse;background:#fff}td,th{border:1px solid #eed;padding:8px;text-align:left}
footer{text-align:center;padding:20px;background:var(--brown);color:#fff;font-size:.9em}
@media(max-width:600px){.hero h1{font-size:1.8em}header{justify-content:center}nav a{margin:4px 6px;font-size:.9em}}
.ph{color:#5a3a26}.hero .count b{color:#fff;text-decoration:underline}

.barn .rowlabel{font-weight:bold;margin:18px 0 6px;color:var(--brown)}
.barn .row{display:grid;grid-template-columns:repeat(9,1fr);gap:8px}
.barn .stall{padding:12px 4px;font-size:.9em}
@media(max-width:700px){.barn .row{grid-template-columns:repeat(3,1fr)}}

.stall.picked{outline:4px solid var(--brown);outline-offset:-4px}
#pick .stall{cursor:pointer}