:root {
  --bg: #f6f8ff;
  --card: #ffffff;
  --primary: #6c5ce7;
  --accent: #00b894;
  --muted: #7f8fa6;
  --text: #2d3436;
  --grid-head: #eef1ff;
  --today: #e8fff5;
  --selected: #dfe6ff;
  --hover: #f9f9ff;
}

/* Container wrapper */
.calendar-card {
  background: var(--card);
  border-radius: 14px;
  box-shadow: 0 8px 28px rgba(0,0,0,.08);
  overflow: hidden;
  max-width: 420px;
  margin: 0 auto;
}

/* Header */
.calendar-header {
  display:flex; justify-content:space-between; align-items:center; padding:14px;
  background: linear-gradient(135deg, var(--primary), #845ef7);
  color:#fff;
}
.header-left, .header-right { display:flex; gap:8px; align-items:center; }
.nav-btn {
  width:34px; height:34px; border-radius:8px; border:0;
  background:rgba(255,255,255,.2); color:#fff; font-weight:700; cursor:pointer;
}
.nav-btn:hover { background:rgba(255,255,255,.3); }

.month-label {
  background:#fff; color:#2d3436; border:0; border-radius:8px;
  padding:6px 10px; font-weight:700; min-width:120px; text-align:center;
}

/* Week row */
.calendar-week {
  display:grid; grid-template-columns: repeat(7,1fr);
  background: var(--grid-head); color:#4b4f67; font-weight:700;
  font-size:14px; padding: 8px;
}
.calendar-week div { text-align:center; }

/* Days grid */
.calendar-grid {
  display:grid; grid-template-columns: repeat(7,1fr);
  gap:6px; padding:10px;
}
.day {
  height:42px; display:flex; align-items:center; justify-content:center;
  border-radius:10px; cursor:pointer; user-select:none;
  background:#fff; border:1px solid #eef1f6; font-weight:600;
}
.day:hover { background: var(--hover); }
.day.today { background: var(--today); border-color:#c8f7e7; color:#087f5b; }
.day.other { color:#b2bec3; background:#fafbff; }
.day.selected { background: var(--selected); border-color:#b2c5ff; color:#304ffe; }

/* Legend */
.calendar-legend {
  display:flex; gap:10px; justify-content:space-between; align-items:center;
  padding:10px 14px; border-top:1px dashed #eaeaea; color: var(--muted); font-size:13px;
}
.pill { display:inline-flex; align-items:center; gap:6px; padding:4px 8px;
  border-radius:999px; background:#f7f9ff; border:1px solid #e5e9ff; color:#4b4f67; }
.dot { width:10px; height:10px; border-radius:999px; display:inline-block; }
.dot.sel{ background:#3867ff; }
.dot.tdy{ background:#2ecc71; }
.dot.oth{ background:#b2bec3; }

/* Responsive */
@media (max-width:576px){
  .month-label{ min-width:auto; font-size:14px; }
}