:root {
  --bg: #ffffff;
  --bg-page: #f7f7f8;
  --fg: #0f0f10;
  --muted: #667085;
  --muted-2: #98a2b3;
  --border: #e6e7eb;
  --chip-bg: #f2f4f7;
  --chip-fg: #0f172a;
  --chip-hover: #e5e7eb;
  --chip-sel-bg: #0f172a;
  --chip-sel-fg: #ffffff;
}

* { box-sizing: border-box; }
/*html,body { height: 100%; }*/
/*body { margin: 0; background: var(--bg-page); color: var(--fg); font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial; }*/

.spc { max-width: 1000px; margin: 0px auto; padding: 5px; }
.spc__head { margin-bottom: 12px; }
.spc__title { margin: 0; font-size: 20px; font-weight: 700; }
.spc__sub { margin: 4px 0 0; font-size: 12px; color: var(--muted); }

.spc__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 900px) {
  /*.spc__grid { grid-template-columns: 1fr 1.2fr; }*/
}

.cal, .slots {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 16px 16px 10px 16px;
  box-shadow: 0 10px 20px rgba(0,0,0,0.04);
}

.cal__hdr { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.cal__nav {
  width: 36px; height: 36px; border-radius: 12px; border: 1px solid var(--border);
  background: #fff; color: var(--fg); cursor: pointer; font-size: 18px; line-height: 1; display:flex; align-items:center; justify-content:center;
}
.cal__nav:active { transform: scale(0.98); }
.cal__month { font-weight: 700; font-size: 14px; }

.cal__wk {
  display:grid; grid-template-columns: repeat(7,1fr);
  text-align:center; font-size:11px; color: var(--muted); margin-bottom: 6px;
}

.cal__days {
  display:grid; grid-template-columns: repeat(7,1fr); gap: 6px;
}
.cal__day {
  height: 36px; border-radius: 12px; border: 1px solid transparent;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-size: 13px;
  color: var(--fg);
}
.cal__day--out { color: var(--muted-2); }
.cal__day:hover { background: #0f172a;
    color: #fff; }
.cal__day--sel { background: #0f172a; color: #fff; }
.cal__day:active { transform: scale(0.98); }

.slots__hdr { display:flex; align-items:baseline; justify-content:space-between; gap: 10px; margin-bottom: 8px; }
.slots__date { font-size: 14px; font-weight: 700; }
.slots__tz { font-size: 12px; color: var(--muted); }

.slots__grid { display:grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
@media (min-width: 640px) { .slots__grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (min-width: 900px) { .slots__grid { grid-template-columns: repeat(4, minmax(0,1fr)); } }
@media (min-width: 1200px) { .slots__grid { grid-template-columns: repeat(5, minmax(0,1fr)); } }

.slots .btn {
  border: 1px solid var(--border);
  padding: 5px 12px;
  border-radius: 999px;
  font-weight: 400; font-size: 13px;
  background: var(--chip-bg); 
  /*color: var(--chip-fg);*/
  color: var(--fg);
  cursor:pointer; transition: background .15s ease, transform .05s ease;
  box-shadow: unset;
}
.slots .btn:hover { background-color:#0f172a; color: #fff}
.slots .btn:active { transform: scale(0.98); }
.slots .btn--sel {background-color:#0f172a; color: #fff}
.slots .btn--solid { background: #111827; color: #fff; border-color: #111827; }
.slots .btn:disabled { opacity: .5; cursor: not-allowed; }

.slots__empty {
  border: 1px dashed var(--border);
  border-radius: 14px;
  padding: 14px;
  color: var(--muted);
  text-align: center;
  font-size: 14px;
  margin-top: 6px;
}

.slots__loading { display:grid; grid-template-columns: repeat(4,1fr); gap:10px; }
.skel { height: 40px; border-radius: 999px; background: #eef2f7; animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity:.6 } 50% { opacity:1 } }

.slots__foot { display:flex; justify-content:flex-end; margin-top: 12px; }
#slots-grid{
  overflow-y: auto;
  max-height: 156px;
}