:root{
  --ink:#20242b;
  --paper:#f5f4f0;
  --card:#ffffff;
  --line:#e0ddd5;
  --accent:#1f6f54;
  --accent-soft:#e4f0ea;
  --warn:#b3541e;
  --muted:#7a7f88;
  --radius:12px;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  background:var(--paper);
  color:var(--ink);
  font-size:16px;
}
.topbar{
  position:sticky;top:0;z-index:10;
  background:var(--ink);color:#fff;
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 14px;
}
.brand{color:#fff;text-decoration:none;font-weight:700;letter-spacing:.03em}
.topbar nav{display:flex;gap:4px}
.topbar nav a{
  color:#cfd3da;text-decoration:none;padding:8px 10px;border-radius:8px;font-size:.9rem;
}
.topbar nav a.on{background:var(--accent);color:#fff}
.wrap{max-width:640px;margin:0 auto;padding:16px 14px 60px}

h1{font-size:1.3rem;margin:6px 0 14px}
h2{font-size:1.05rem;margin:18px 0 8px}
.muted{color:var(--muted);font-size:.85rem}

.card{
  background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:14px;margin-bottom:12px;
}
a.card{display:block;text-decoration:none;color:inherit}
.card .addr{font-weight:600}
.card .meta{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:6px;font-size:.85rem;color:var(--muted)}
.badge{
  display:inline-block;background:var(--accent-soft);color:var(--accent);
  border-radius:999px;padding:2px 10px;font-size:.78rem;font-weight:600;
}
.badge.past{background:#eee;color:var(--muted)}
.day-head{
  margin:20px 0 8px;font-size:.8rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;color:var(--accent);
}

label{display:block;font-size:.85rem;font-weight:600;margin:12px 0 4px}
input[type=text],input[type=tel],input[type=number],
input[type=datetime-local],textarea,select{
  width:100%;padding:11px;border:1px solid var(--line);border-radius:10px;
  font:inherit;background:#fff;
}
textarea{min-height:70px;resize:vertical}

.btn{
  display:inline-block;border:0;border-radius:10px;padding:12px 18px;
  font:inherit;font-weight:600;cursor:pointer;text-decoration:none;text-align:center;
  background:var(--accent);color:#fff;
}
.btn.block{display:block;width:100%}
.btn.ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}
.btn.small{padding:7px 12px;font-size:.85rem}
.btn.danger{background:#fff;color:var(--warn);border:1px solid var(--line)}
.fab{
  position:fixed;right:16px;bottom:16px;z-index:9;
  border-radius:999px;padding:14px 20px;box-shadow:0 4px 14px rgba(0,0,0,.25);
}

.room{border:1px solid var(--line);border-radius:var(--radius);background:#fff;margin-bottom:10px;overflow:hidden}
.room summary{
  list-style:none;cursor:pointer;padding:13px 14px;font-weight:600;
  display:flex;justify-content:space-between;align-items:center;
}
.room summary::-webkit-details-marker{display:none}
.room summary::after{content:"▾";color:var(--muted)}
.room[open] summary::after{content:"▴"}
.room .body{padding:0 14px 14px;border-top:1px solid var(--line)}

.check{display:flex;align-items:flex-start;gap:10px;padding:10px 0;border-bottom:1px dashed var(--line)}
.check:last-of-type{border-bottom:0}
.check input[type=checkbox]{width:22px;height:22px;margin-top:2px;accent-color:var(--accent);flex:none}
.check .grow{flex:1}
.check .lbl{font-size:.95rem}
.check input[type=text]{margin-top:6px;padding:8px;font-size:.9rem}

.pickrooms{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:6px}
.pickrooms label{
  display:flex;align-items:center;gap:8px;margin:0;padding:11px;font-weight:500;
  border:1px solid var(--line);border-radius:10px;background:#fff;
}
.pickrooms input{width:20px;height:20px;accent-color:var(--accent)}

.row{display:flex;gap:8px;align-items:center}
.row .grow{flex:1}
.savestate{position:fixed;left:50%;transform:translateX(-50%);bottom:14px;
  background:var(--ink);color:#fff;padding:8px 16px;border-radius:999px;
  font-size:.82rem;opacity:0;transition:opacity .25s;pointer-events:none}
.savestate.show{opacity:.95}

table.admin{width:100%;border-collapse:collapse}
table.admin td{padding:8px 4px;border-bottom:1px solid var(--line);vertical-align:middle}
.empty{padding:30px 10px;text-align:center;color:var(--muted)}

.photostrip{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 10px}
.thumb{position:relative;width:84px;height:84px;border-radius:8px;overflow:hidden;border:1px solid var(--line)}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.delphoto{position:absolute;top:2px;right:2px;width:22px;height:22px;border:0;border-radius:50%;
  background:rgba(0,0,0,.6);color:#fff;font-size:15px;line-height:1;cursor:pointer}
.photobtn{display:inline-block;cursor:pointer}