:root { --teal:#0d9488; --teal-dark:#0f766e; --sand:#faf7f2; --ink:#1f2937; }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; background: var(--sand); color: var(--ink); }
.wrap { max-width: 960px; margin: 0 auto; padding: 0 1rem; }
header { background: linear-gradient(135deg, var(--teal), #0ea5e9); color:#fff; padding: 2.5rem 0 2rem; }
header h1 { margin:0 0 .25rem; font-size: 2rem; }
header p { margin:0; opacity:.9; }
main { padding: 1.5rem 1rem 3rem; display:grid; gap:1.25rem; }
.card { background:#fff; border-radius:14px; padding:1.25rem 1.5rem; box-shadow:0 1px 3px rgba(0,0,0,.08); }
.card h2 { margin:.1rem 0 .75rem; font-size:1.15rem; color:var(--teal-dark); }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:.75rem; }
label { display:flex; flex-direction:column; gap:.3rem; font-size:.85rem; font-weight:600; }
input { padding:.55rem .65rem; border:1px solid #d1d5db; border-radius:8px; font-size:.95rem; }
input:focus { outline:2px solid var(--teal); border-color:var(--teal); }
.hint { color:#6b7280; font-size:.8rem; margin:.75rem 0 0; }
.legend { display:flex; gap:.5rem; margin:.25rem 0 1rem; }
.pill { display:inline-block; padding:.15rem .6rem; border-radius:999px; font-size:.72rem; font-weight:700; }
.pill.free { background:#dcfce7; color:#15803d; }
.pill.shared { background:#fef3c7; color:#b45309; }
.pill.full { background:#fee2e2; color:#b91c1c; }
.rooms { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:.9rem; }
.room { border:1px solid #e5e7eb; border-radius:12px; padding:.9rem; display:flex; flex-direction:column; gap:.45rem; background:#fdfdfb; }
.room.full { opacity:.6; }
.room-name { font-weight:700; }
.room-sub { font-size:.8rem; color:#6b7280; }
.room button { margin-top:auto; padding:.5rem; border:0; border-radius:8px; background:var(--teal); color:#fff; font-weight:700; cursor:pointer; }
.room button:hover:not(:disabled) { background:var(--teal-dark); }
.room button:disabled { background:#9ca3af; cursor:not-allowed; }
.card.success { border-left:5px solid #16a34a; }
.card.error { border-left:5px solid #dc2626; }
.muted { color:#6b7280; font-size:.85rem; }
.lookup { display:flex; gap:.5rem; margin-bottom:.75rem; }
.lookup input { flex:1; }
.lookup button { padding:.5rem 1.1rem; border:0; border-radius:8px; background:var(--teal); color:#fff; font-weight:700; cursor:pointer; }
.booking { padding:.6rem .75rem; border:1px solid #e5e7eb; border-radius:8px; margin-bottom:.5rem; font-size:.9rem; background:#fdfdfb; }
footer { background:#111827; color:#9ca3af; padding:1.25rem 0; font-size:.8rem; }
footer a { color:#5eead4; }