:root{
  --bg:#0b1020; --card:#11162a; --muted:#9aa4c7; --text:#e8ebff;
  --accent:#6da7ff; --grid:#1b2340; --danger:#ef4444; --ok:#10b981;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  background:linear-gradient(180deg,#0b1020 0%, #0f1430 100%);
  color:var(--text);
  min-height:100vh;
}
.app{max-width:1100px;margin:0 auto;padding:16px}

.topbar{display:flex;align-items:center;gap:12px;padding:8px 0 16px}
.topbar h1{font-size:20px;margin:0 8px}
.topbar button{
  padding:8px 10px;border:1px solid var(--grid);
  background:var(--card);color:var(--text);
  border-radius:10px;cursor:pointer
}
.topbar button.ghost{background:transparent;border-color:var(--grid);color:var(--muted)}
.topbar .spacer{flex:1}

.calendar{
  background:var(--card);border:1px solid var(--grid);
  border-radius:16px;overflow:hidden;box-shadow:0 20px 50px rgba(0,0,0,.35);
}
.weekdays, .grid{display:grid;grid-template-columns:repeat(7,1fr)}
.weekdays>div{
  padding:10px 8px;font-weight:600;color:var(--muted);text-align:center;
  border-bottom:1px solid var(--grid);background:#0f1631
}

.grid .cell{
  border-right:1px solid var(--grid);
  border-bottom:1px solid var(--grid);
  min-height:120px;padding:8px;position:relative;cursor:pointer;
  transition:background .1s ease;
}
.grid .cell:hover{background:#0f1631}
.grid .cell.disabled{opacity:.4;filter:saturate(.6)}
.grid .date{font-size:12px;color:var(--muted)}

.grid .items{
  display:flex;flex-direction:column;gap:6px;margin-top:6px;
}

/* Event chips: white text, rounded pill, filled with event color */
.grid .chip{
  display:inline-block;
  max-width:100%;
  padding:4px 8px;
  border-radius:10px;
  font-size:12px;
  line-height:1.2;
  color:#fff; /* enforced again in JS */
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.15);
}
.grid .chip:hover{ filter:brightness(0.92); }

/* Neutral “+N more” chip */
.grid .chip.more{
  background:#0b1228;
  color:#e8ebff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15);
}

.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;padding:16px}
.modal.hidden{display:none}
.modal-content{width:min(100%,980px);background:var(--card);border:1px solid var(--grid);border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--grid)}
.modal-header h2{margin:0;font-size:18px}
.modal-header .icon{font-size:26px;background:transparent;border:none;color:var(--muted);cursor:pointer}
.modal-body{display:grid;grid-template-columns:1.1fr .9fr;gap:16px;padding:16px}
@media (max-width:900px){.modal-body{grid-template-columns:1fr}}

.events-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;max-height:360px;overflow:auto}
.event-item{border:1px solid var(--grid);border-radius:10px;padding:8px;background:#0b1228;display:flex;align-items:center;justify-content:space-between}
.event-swatch{width:10px;height:10px;border-radius:999px;display:inline-block}
.badge{font-size:11px;color:var(--muted);border:1px solid var(--grid);padding:2px 6px;border-radius:999px;margin-left:6px}

form .row{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
form .row.times{display:grid;grid-template-columns:1fr 1fr;gap:12px}
form .row.inline{flex-direction:row;align-items:center;gap:10px}
form input,form textarea,form select{
  background:#0b1228;border:1px solid var(--grid);color:var(--text);
  border-radius:10px;padding:8px;outline:none
}
.actions{display:flex;gap:8px;justify-content:flex-end;margin-top:8px}
.actions .danger{background:transparent;border:1px solid var(--danger);color:var(--danger)}
.actions .ghost{background:transparent;border:1px solid var(--grid);color:var(--muted)}