:root{
  --bg:#f6f4ef; --card:#ffffff; --ink:#2b2b2b; --muted:#7c7c78;
  --line:#e7e3da; --brand:#4c7c66; --brand-ink:#3a6250;
  --event:#3f6fb0; --event-bg:#eaf1fb;
  --unavail:#b06a3f; --unavail-bg:#f7ede4;
  --bday:#b0518a; --bday-bg:#fbeaf4;
  --danger:#b0433f; --ok-bg:#e7f2ec; --err-bg:#fbe9e7;
  --radius:14px; --shadow:0 1px 2px rgba(0,0,0,.05),0 4px 14px rgba(0,0,0,.04);
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:var(--sans); color:var(--ink); background:var(--bg);
  line-height:1.5; -webkit-text-size-adjust:100%;
}
a{color:var(--brand-ink)}
h1{font-size:1.5rem;margin:.2em 0}
h2{font-size:1.1rem;margin:0 0 .6rem}
.muted{color:var(--muted)}

/* ---- Top bar ---- */
.topbar{
  position:sticky;top:0;z-index:20;background:var(--card);
  border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:.7rem 1rem;flex-wrap:wrap;
}
.brand{font-weight:700;text-decoration:none;color:var(--ink);font-size:1.05rem}
.brand-mark{color:var(--brand)}
.mainnav{display:flex;gap:.25rem;align-items:center;flex-wrap:wrap}
.mainnav a{
  text-decoration:none;color:var(--muted);padding:.4rem .7rem;border-radius:9px;font-weight:600;font-size:.95rem;
}
.mainnav a.is-active{color:var(--brand-ink);background:var(--ok-bg)}
.mainnav a:hover{color:var(--ink)}
.navlogout{margin-left:.3rem;color:var(--muted)!important;font-weight:500!important}

.container{max-width:920px;margin:0 auto;padding:1rem 1rem 3rem}
.foot{max-width:920px;margin:0 auto;padding:1rem;color:var(--muted);font-size:.85rem;text-align:center}

/* ---- Cards & headings ---- */
.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:1.1rem;margin:0 0 1.1rem;
}
.page-head{margin:.4rem 0 1rem}
.crumb{margin:.2rem 0 1rem}

/* ---- Buttons ---- */
.btn{
  display:inline-block;border:1px solid var(--line);background:var(--card);color:var(--ink);
  padding:.55rem .95rem;border-radius:10px;font-weight:600;font-size:.95rem;
  text-decoration:none;cursor:pointer;line-height:1.2;
}
.btn:hover{border-color:#d8d3c8}
.btn-sm{padding:.4rem .7rem;font-size:.85rem}
.btn-block{display:block;width:100%;text-align:center}
.btn-primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn-primary:hover{background:var(--brand-ink);border-color:var(--brand-ink)}
.btn-ghost{background:transparent}
.btn-danger{background:transparent;color:var(--danger);border-color:#eccfcd}
.btn-danger:hover{background:var(--err-bg)}
.inline{display:inline}

/* ---- Alerts ---- */
.alert{padding:.7rem .9rem;border-radius:10px;margin:0 0 1rem;font-weight:500}
.alert-ok{background:var(--ok-bg);color:#2f5c48}
.alert-err{background:var(--err-bg);color:#8a3a36}

/* ---- Forms ---- */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.form-grid label{display:flex;flex-direction:column;gap:.3rem;font-weight:600;font-size:.9rem}
.form-grid label span{font-weight:600}
.form-grid input[type=text],
.form-grid input[type=number],
.form-grid input[type=date],
.form-grid input[type=time],
.form-grid input[type=password],
.form-grid select,
.form-grid textarea{
  font:inherit;padding:.55rem .65rem;border:1px solid var(--line);border-radius:9px;background:#fff;width:100%;
}
.form-grid textarea{resize:vertical}
.f-title,.f-details,.f-notes,.f-name{grid-column:1 / -1}
.form-actions{grid-column:1 / -1;display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;margin-top:.2rem}
.checkbox{flex-direction:row!important;align-items:center;gap:.5rem!important}
.checkbox input{width:auto}

/* ---- Lists (mentors / birthdays) ---- */
.list{list-style:none;margin:0;padding:0}
.list-row{
  display:flex;justify-content:space-between;align-items:center;gap:.8rem;
  padding:.7rem 0;border-top:1px solid var(--line);
}
.list-row:first-child{border-top:0}
.list-main strong{font-size:1rem}
.list-sub{color:var(--muted);font-size:.88rem}
.list-actions{display:flex;gap:.4rem;flex-shrink:0}
.is-inactive .list-main strong{color:var(--muted)}
.pill{display:inline-block;font-size:.72rem;font-weight:700;padding:.12rem .5rem;border-radius:999px;vertical-align:middle}
.pill-muted{background:#efece5;color:var(--muted)}
.pill-event{background:var(--event-bg);color:var(--event)}
.pill-unavail{background:var(--unavail-bg);color:var(--unavail)}

/* ---- Add box ---- */
.addbox summary{cursor:pointer;font-weight:700;list-style:none}
.addbox summary::-webkit-details-marker{display:none}
.addbox[open] summary{margin-bottom:.9rem}

/* ---- Calendar ---- */
.cal-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.cal-nav{display:flex;gap:.4rem;flex-wrap:wrap}
.calendar{margin:0 0 1.1rem}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cal-dow{margin-bottom:6px}
.dow{text-align:center;font-size:.75rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
.cell{
  background:var(--card);border:1px solid var(--line);border-radius:10px;
  min-height:92px;padding:5px 5px 6px;display:flex;flex-direction:column;gap:3px;overflow:hidden;
}
.cell-empty{background:transparent;border:0}
.cell.is-today{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand) inset}
.cell-top{display:flex;justify-content:space-between;align-items:center}
.daynum{font-size:.8rem;font-weight:700;color:var(--muted)}
.is-today .daynum{color:var(--brand-ink)}
.cell-add{text-decoration:none;color:#c7c2b8;font-weight:700;line-height:1;padding:0 3px;border-radius:6px}
.cell-add:hover{color:var(--brand);background:var(--ok-bg)}
.chip{
  display:block;font-size:.72rem;line-height:1.25;padding:2px 6px;border-radius:6px;
  text-decoration:none;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.chip-event{background:var(--event-bg);color:var(--event)}
.chip-unavail{background:var(--unavail-bg);color:var(--unavail)}
.chip-bday{background:var(--bday-bg);color:var(--bday)}
.chip-time{font-weight:700}
.chip-count{font-weight:700;opacity:.8}

/* ---- Upcoming list ---- */
.up-list{list-style:none;margin:0;padding:0}
.up-row{display:flex;gap:.9rem;align-items:center;padding:.7rem 0;border-top:1px solid var(--line)}
.up-row:first-child{border-top:0}
.up-date{
  flex-shrink:0;width:52px;text-align:center;background:var(--ok-bg);border-radius:10px;padding:.35rem 0;
}
.up-d{display:block;font-size:1.15rem;font-weight:800;color:var(--brand-ink);line-height:1}
.up-mo{display:block;font-size:.7rem;font-weight:700;text-transform:uppercase;color:var(--muted)}
.up-title{font-weight:700;text-decoration:none;color:var(--ink)}
.up-sub{color:var(--muted);font-size:.85rem;margin-top:.15rem;display:flex;gap:.4rem;align-items:center;flex-wrap:wrap}

/* ---- Event detail ---- */
.event-head{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-bottom:.4rem}
.event-head h1{margin:0}
.event-meta{display:flex;gap:1.6rem;flex-wrap:wrap;margin:.6rem 0}
.event-meta div{min-width:80px}
.event-meta dt{font-size:.72rem;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);font-weight:700}
.event-meta dd{margin:.1rem 0 0;font-weight:600}
.event-details{margin:.6rem 0;padding:.8rem;background:#faf9f5;border-radius:10px;border:1px solid var(--line)}

/* ---- Attendance ---- */
.attend-list{list-style:none;margin:.4rem 0 1rem;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:.4rem}
.attend-row{
  display:flex;align-items:center;gap:.6rem;padding:.6rem .7rem;border:1px solid var(--line);
  border-radius:10px;cursor:pointer;font-weight:500;
}
.attend-row:has(input:checked){background:var(--ok-bg);border-color:#bcd9c9}
.attend-row input{width:18px;height:18px}

/* ---- Soon (birthdays) ---- */
.soon-list{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
.soon-list li{display:flex;gap:.6rem;align-items:baseline;flex-wrap:wrap}
.soon-when{display:inline-block;min-width:90px;font-weight:700;color:var(--bday)}

/* ---- Login ---- */
.login-body{display:flex;min-height:100vh;align-items:center;justify-content:center;padding:1.5rem}
.login-card{
  background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);
  padding:2rem 1.6rem;max-width:340px;width:100%;text-align:center;
}
.login-mark{font-size:2rem;color:var(--brand)}
.login-card h1{margin:.2rem 0 .1rem}
.login-card form{margin-top:1rem;display:flex;flex-direction:column;gap:.7rem}
.login-card input{font:inherit;padding:.7rem .8rem;border:1px solid var(--line);border-radius:10px;text-align:center}

/* ---- Mobile ---- */
@media (max-width:640px){
  .form-grid{grid-template-columns:1fr}
  .attend-list{grid-template-columns:1fr}
  .cell{min-height:74px}
  .chip{font-size:.68rem}
  .daynum{font-size:.72rem}
  .cal-grid{gap:4px}
  h1{font-size:1.3rem}
}