/* Bottom panel — frosted glass, light */
#panel {
  width:100%;
  background:rgba(255,255,255,0.08);
  backdrop-filter:blur(28px);
  -webkit-backdrop-filter:blur(28px);
  border-top:1px solid rgba(255,255,255,0.14);
  padding-bottom:var(--safe-bottom);
}

/* Day row */
#days {
  display:flex; gap:7px; align-items:center;
  padding:10px 14px 8px;
  overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none;
  -webkit-overflow-scrolling:touch; scroll-behavior:smooth;
  touch-action:none;
  mask-image:linear-gradient(to right,transparent 0%,black 4%,black 96%,transparent 100%);
  -webkit-mask-image:linear-gradient(to right,transparent 0%,black 4%,black 96%,transparent 100%);
  cursor:grab;
}
#days:active { cursor:grabbing; }
#days.drag { scroll-behavior:auto; }
#days::-webkit-scrollbar { display:none; }

.dpill {
  flex-shrink:0; padding:7px 15px;
  border-radius:20px; white-space:nowrap;
  font-size:clamp(11px,2.4vw,13px); font-weight:500;
  letter-spacing:.025em; cursor:pointer;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.78);
  transition:background .18s, border-color .18s, color .18s, transform .1s;
  text-shadow:1px 1px 0 rgba(0,0,0,.42);
  -webkit-tap-highlight-color:transparent;
}
.dpill:hover {
  background:rgba(255,255,255,.13);
  border-color:rgba(255,255,255,.34);
  color:#fff;
}
.dpill:active { transform:scale(0.94); }
.dpill.on {
  background:rgba(255,255,255,.21);
  border-color:rgba(255,255,255,.48);
  color:#fff; font-weight:600;
}
.dpill .dot {
  display:inline-block; width:5px; height:5px;
  border-radius:50%; background:#5ec4ff;
  margin-right:5px; vertical-align:middle; position:relative; top:-1px;
  box-shadow:0 0 6px #5ec4ff;
  animation:dp 2s ease-in-out infinite;
}
@keyframes dp {
  0%,100% { box-shadow:0 0 5px #5ec4ff; }
  50% { box-shadow:0 0 12px #5ec4ff,0 0 20px rgba(94,196,255,.45); }
}

/* Separator */
.sep { height:1px; background:rgba(255,255,255,.09); }

/* Hour strip */
#hr-wrap { position:relative; overflow:hidden; }
.c-line { display:none; }
.hslot.peek {
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.42);
  color:rgba(255,255,255,.95);
  box-shadow:0 0 0 2px rgba(255,255,255,.14);
}
.dpill.peek {
  background:rgba(255,255,255,.14);
  border-color:rgba(255,255,255,.50);
  color:#fff;
  box-shadow:0 0 0 2px rgba(255,255,255,.14);
}
#hrs {
  display:flex; gap:3px;
  padding:7px 14px 11px;
  overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none;
  -webkit-overflow-scrolling:touch; scroll-behavior:smooth;
  touch-action:none;
  mask-image:linear-gradient(to right,transparent 0%,black 5%,black 95%,transparent 100%);
  -webkit-mask-image:linear-gradient(to right,transparent 0%,black 5%,black 95%,transparent 100%);
  cursor:grab;
}
#hrs:active { cursor:grabbing; }
#hrs::-webkit-scrollbar { display:none; }
#hrs.drag { scroll-behavior:auto; }

.hslot {
  flex-shrink:0; width:var(--slot-w);
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:4px; padding:7px 4px; border-radius:13px;
  cursor:pointer;
  border:1px solid transparent;
  color:rgba(255,255,255,.68);
  transition:background .18s, border-color .18s, color .18s;
  -webkit-tap-highlight-color:transparent;  text-shadow:1px 1px 0 rgba(0,0,0,.42);
}
.hslot:hover {
background:rgba(255,255,255,.09); color:rgba(255,255,255,.95); }
.hslot.on {
  background:rgba(255,255,255,.18);
  border-color:rgba(255,255,255,.3);
  color:#fff;
}
.hslot { position:relative; }
.hslot.now .ht {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: #5ec4ff;
  text-underline-offset: 3px;
  text-decoration-skip-ink: none;
}
.ht { font-size:11px; font-weight:500; letter-spacing:.03em; line-height:1; font-variant-numeric:tabular-nums; }
.hslot.on .ht { font-weight:700; font-size:12px; }
.hi { font-size:17px; line-height:1; transition:transform .2s; }
.hi .wi { font-size: inherit; }
.hspacer { flex-shrink: 0; width: calc((100vw - var(--slot-w)) / 2); }
.dspacer { flex-shrink: 0; width: calc(50vw - 50px); }
.hslot.on .hi { transform:scale(1.14); }
.hv { font-size:11px; font-weight:600; letter-spacing:.02em; line-height:1; }
.hslot.on .hv { font-size:12px; }