:root{
  --cream:#F6F2EA; --cream-2:#FBF8F2; --ink:#2A2520; --muted:#6F675C;
  --forest:#2F4A3C; --forest-2:#25382E; --brass:#B08D4F;
  --hair:rgba(42,37,32,0.10);
  --open:#3f7a5d; --open-bg:rgba(63,122,93,0.10);
  --fill:#B08D4F; --fill-bg:rgba(176,141,79,0.12);
  --full:#9a8f80; --full-bg:rgba(42,37,32,0.05);
  --danger:#b5483a;
  --ease:cubic-bezier(0.32,0.72,0,1);
}
*{ box-sizing:border-box; margin:0; padding:0; }
body{ font-family:'Plus Jakarta Sans',system-ui,sans-serif; background:var(--cream); color:var(--ink); line-height:1.5; -webkit-font-smoothing:antialiased; }
h1,h2,h3{ font-family:'Fraunces',Georgia,serif; font-weight:500; letter-spacing:-0.01em; line-height:1.06; }
a{ color:var(--forest); }
.wrap{ width:min(1180px,94vw); margin:0 auto; }
.brand{ font-family:'Fraunces',serif; font-weight:600; letter-spacing:-0.01em; }

/* top app bar */
.appbar{ position:sticky; top:0; z-index:40; background:rgba(251,248,242,0.86); backdrop-filter:blur(14px); border-bottom:1px solid var(--hair); }
.appbar .row{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 0; }
.appbar .brand{ font-size:20px; }
.appbar nav{ display:flex; align-items:center; gap:8px; }
.pill-link{ text-decoration:none; color:var(--ink); font-size:14px; font-weight:600; padding:8px 14px; border-radius:999px; opacity:.8; }
.pill-link:hover{ opacity:1; background:rgba(42,37,32,0.05); }
.pill-link.active{ background:var(--ink); color:var(--cream-2); opacity:1; }

/* buttons */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px; border:0; cursor:pointer; font:inherit; font-weight:600; font-size:15px; border-radius:13px; padding:13px 18px; transition:transform .3s var(--ease), background .3s var(--ease); text-decoration:none; }
.btn-primary{ background:var(--forest); color:var(--cream-2); }
.btn-primary:hover{ background:var(--forest-2); } .btn-primary:active{ transform:scale(.98); }
.btn-ink{ background:var(--ink); color:var(--cream-2); }
.btn-ink:hover{ background:#3a342d; }
.btn-ghost{ background:transparent; border:1px solid var(--hair); color:var(--ink); }
.btn-ghost:hover{ background:rgba(42,37,32,0.04); }
.btn-block{ width:100%; }
.btn[disabled]{ background:var(--full-bg); color:var(--full); cursor:not-allowed; }
.btn-sm{ padding:8px 13px; font-size:13px; border-radius:10px; }
.btn-danger{ background:transparent; border:1px solid rgba(181,72,58,.4); color:var(--danger); }
.btn-danger:hover{ background:rgba(181,72,58,.08); }

/* auth card */
.auth-page{ min-height:100dvh; display:flex; align-items:center; justify-content:center; padding:28px; background:
  radial-gradient(55% 45% at 80% 12%, rgba(176,141,79,0.14), transparent 70%),
  radial-gradient(50% 40% at 12% 90%, rgba(47,74,60,0.12), transparent 70%); }
.auth-shell{ background:rgba(42,37,32,0.04); border:1px solid var(--hair); border-radius:30px; padding:8px; width:min(440px,100%); }
.auth-card{ background:var(--cream-2); border-radius:23px; padding:34px 30px; box-shadow:inset 0 1px 1px rgba(255,255,255,.6); }
.auth-card .home{ text-align:center; display:block; font-size:13px; text-decoration:none; color:var(--muted); margin-bottom:14px; }
.auth-card .brand{ font-size:24px; display:block; text-align:center; }
.auth-card h1{ font-size:27px; text-align:center; margin:14px 0 4px; }
.auth-card .sub{ text-align:center; color:var(--muted); font-size:14px; margin-bottom:22px; }
.field{ margin-bottom:14px; }
.field label{ display:block; font-size:12px; text-transform:uppercase; letter-spacing:.12em; color:var(--muted); font-weight:600; margin-bottom:6px; }
.field input{ width:100%; font:inherit; font-size:15px; padding:13px 15px; border:1px solid var(--hair); border-radius:13px; background:#fff; }
.field input:focus{ outline:2px solid var(--forest); outline-offset:1px; }
.msg{ font-size:13.5px; border-radius:12px; padding:11px 14px; margin-bottom:14px; display:none; }
.msg.err{ display:block; background:rgba(181,72,58,.08); color:var(--danger); }
.msg.ok{ display:block; background:var(--open-bg); color:var(--open); }
.swap{ text-align:center; font-size:13.5px; color:var(--muted); margin-top:18px; }

/* page heading */
.pagehead{ padding:30px 0 8px; }
.pagehead h1{ font-size:clamp(26px,4vw,38px); }
.pagehead .sub{ color:var(--muted); font-size:14px; margin-top:4px; }

/* calendar (shared with prototype look) */
.legend{ display:flex; gap:16px; flex-wrap:wrap; padding:14px 0 6px; color:var(--muted); font-size:12.5px; }
.legend span{ display:inline-flex; align-items:center; gap:7px; }
.dot{ width:9px; height:9px; border-radius:50%; }
.dot.open{ background:var(--open);} .dot.fill{ background:var(--fill);} .dot.full{ background:var(--full);} .dot.mine{ background:var(--forest);}
.week{ display:grid; grid-template-columns:repeat(7,1fr); gap:10px; padding:8px 0 50px; }
.day{ background:var(--cream-2); border:1px solid var(--hair); border-radius:18px; padding:10px; min-height:140px; display:flex; flex-direction:column; gap:8px; }
.day .dh{ text-align:center; padding:6px 0 8px; border-bottom:1px solid var(--hair); }
.day .dh .dow{ font-size:11px; text-transform:uppercase; letter-spacing:.14em; color:var(--muted); }
.day .dh .dnum{ font-family:'Fraunces',serif; font-size:20px; display:block; }
.slot{ text-align:left; border:0; cursor:pointer; font:inherit; border-radius:13px; padding:10px 11px; transition:transform .3s var(--ease); position:relative; }
.slot:hover{ transform:translateY(-2px); } .slot:active{ transform:scale(.98); }
.slot.open{ background:var(--open-bg);} .slot.fill{ background:var(--fill-bg);} .slot.full{ background:var(--full-bg);}
.slot .t{ font-weight:700; font-size:13px; } .slot .ty{ font-size:12px; color:var(--muted); }
.slot .cap{ font-size:11.5px; font-weight:600; margin-top:6px; }
.slot.open .cap{ color:var(--open);} .slot.fill .cap{ color:#8a6d2f;} .slot.full .cap{ color:var(--full);}
.slot .mine{ position:absolute; top:8px; right:8px; width:7px; height:7px; border-radius:50%; background:var(--forest); }
.empty{ color:var(--muted); font-size:12px; text-align:center; padding:14px 0; opacity:.6; }
.addbtn{ margin-top:auto; border:1px dashed var(--hair); background:transparent; color:var(--muted); cursor:pointer; font:inherit; font-size:12px; font-weight:600; padding:8px; border-radius:11px; }
.addbtn:hover{ background:rgba(42,37,32,0.04); color:var(--ink); }

/* modal */
.overlay{ position:fixed; inset:0; z-index:90; background:rgba(42,37,32,.42); backdrop-filter:blur(8px); display:none; align-items:center; justify-content:center; padding:20px; }
.overlay.show{ display:flex; }
.modal{ width:min(460px,100%); background:var(--cream-2); border:1px solid var(--hair); border-radius:26px; padding:8px; box-shadow:0 40px 90px -40px rgba(42,37,32,.6); }
.modal .inner{ padding:22px 24px; }
.closebar{ display:flex; justify-content:flex-end; }
.closebar button{ border:0; background:rgba(42,37,32,0.05); width:34px; height:34px; border-radius:50%; cursor:pointer; font-size:18px; }
.tag{ font-size:11px; text-transform:uppercase; letter-spacing:.16em; font-weight:600; color:var(--brass); }
.modal h2{ font-size:25px; margin:8px 0 2px; }
.when{ color:var(--muted); font-size:14px; margin-bottom:14px; }
.capbar{ height:8px; border-radius:999px; background:rgba(42,37,32,0.08); overflow:hidden; margin:4px 0 6px; }
.capbar i{ display:block; height:100%; background:var(--forest); }
.capnote{ font-size:13px; color:var(--muted); margin-bottom:14px; }
.info{ background:rgba(42,37,32,0.04); border-radius:13px; padding:12px 14px; font-size:13.5px; margin-bottom:14px; }
.info b{ display:block; font-size:11px; text-transform:uppercase; letter-spacing:.14em; color:var(--muted); margin-bottom:3px; font-weight:600; }
.roster{ list-style:none; display:flex; flex-direction:column; gap:8px; margin-bottom:16px; }
.roster li{ display:flex; align-items:center; gap:10px; font-size:14px; padding:8px 11px; background:rgba(42,37,32,0.03); border-radius:10px; }
.roster .av{ width:26px; height:26px; border-radius:50%; background:var(--forest); color:var(--cream-2); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; flex:0 0 auto; }
.roster .nt{ color:var(--muted); font-size:12.5px; }
.me-pill{ font-size:10px; background:var(--forest); color:var(--cream-2); border-radius:999px; padding:2px 7px; margin-left:6px; }

/* admin */
.panel{ background:var(--cream-2); border:1px solid var(--hair); border-radius:22px; padding:22px 22px; margin:14px 0; }
.panel h2{ font-size:22px; margin-bottom:4px; }
.panel .ph-sub{ color:var(--muted); font-size:13.5px; margin-bottom:16px; }
.pending-item{ display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--hair); flex-wrap:wrap; }
.pending-item:last-child{ border-bottom:0; }
.pending-item .who{ flex:1 1 200px; }
.pending-item .who .nm{ font-weight:600; }
.pending-item .who .ct{ color:var(--muted); font-size:13px; }
.pending-item .acts{ display:flex; gap:8px; }
.formgrid{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.formgrid .field{ margin:0; }
.formgrid .full{ grid-column:1 / -1; }
select,.formgrid input{ width:100%; font:inherit; font-size:14px; padding:11px 13px; border:1px solid var(--hair); border-radius:11px; background:#fff; }
.book{ display:flex; flex-direction:column; gap:10px; }
.book input{ width:100%; font:inherit; font-size:14px; padding:13px 15px; border:1px solid var(--hair); border-radius:13px; background:#fff; }
.muted-note{ text-align:center; color:var(--muted); font-size:12.5px; padding:6px 0 40px; }

/* calendar controls + month/day views */
.cal-controls{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:6px 0 14px; }
.cal-seg{ display:inline-flex; background:rgba(42,37,32,0.05); border:1px solid var(--hair); border-radius:999px; padding:4px; }
.cal-seg button{ border:0; background:transparent; cursor:pointer; font:inherit; font-weight:600; font-size:13px; color:var(--muted); padding:7px 15px; border-radius:999px; transition:all .3s var(--ease); }
.cal-seg button.active{ background:var(--ink); color:var(--cream-2); }
.cal-nav{ display:inline-flex; align-items:center; gap:6px; }
.cal-nav button{ border:1px solid var(--hair); background:var(--cream-2); cursor:pointer; font:inherit; font-weight:600; font-size:14px; color:var(--ink); height:34px; min-width:34px; padding:0 12px; border-radius:10px; transition:background .3s var(--ease); }
.cal-nav button:hover{ background:rgba(42,37,32,0.05); }
.cal-label{ font-family:'Fraunces',serif; font-size:20px; margin-left:auto; }
.cal-dow{ display:grid; grid-template-columns:repeat(7,1fr); gap:8px; padding:2px 0 6px; }
.cal-dow span{ text-align:center; font-size:11px; text-transform:uppercase; letter-spacing:.12em; color:var(--muted); font-weight:600; }
.cal-month{ display:grid; grid-template-columns:repeat(7,1fr); gap:8px; padding-bottom:40px; }
.cal-cell{ position:relative; text-align:left; border:1px solid var(--hair); background:var(--cream-2); cursor:pointer; font:inherit; border-radius:14px; min-height:84px; padding:9px 10px; display:flex; flex-direction:column; gap:6px; transition:transform .25s var(--ease), border-color .25s var(--ease); }
.cal-cell:hover{ transform:translateY(-2px); border-color:rgba(42,37,32,0.22); }
.cal-cell .cd{ font-family:'Fraunces',serif; font-size:16px; color:var(--ink); }
.cal-cell.out{ opacity:.4; } .cal-cell.past{ opacity:.5; }
.cal-cell.today{ border-color:var(--forest); box-shadow:inset 0 0 0 1px var(--forest); }
.cal-cell .cc{ font-size:11px; font-weight:600; color:var(--forest); background:var(--open-bg); border-radius:7px; padding:3px 7px; align-self:flex-start; }
.cal-cell .cc.mine{ background:var(--forest); color:var(--cream-2); }
.day.is-today .dh{ border-color:var(--forest); }
.cal-day{ display:flex; flex-direction:column; gap:10px; padding-bottom:40px; max-width:520px; }
.cal-day-row .slot{ width:100%; }
.cal-day-row .slot .t{ font-size:15px; } .cal-day-row .slot .ty{ font-size:13px; }

@media (max-width:820px){
  .week{ grid-template-columns:1fr; }
  .day{ min-height:0; } .day .dh{ text-align:left; display:flex; align-items:baseline; gap:8px; }
  .day .dh .dnum{ display:inline; }
  .formgrid{ grid-template-columns:1fr; }
  .cal-month{ gap:5px; } .cal-cell{ min-height:64px; border-radius:11px; padding:7px 7px; }
  .cal-cell .cc{ font-size:10px; padding:2px 5px; }
  .cal-label{ font-size:18px; }
}