.picker{
  position:relative;
  width:100%;
  z-index:0;
  --picker-open-space:0px;
  margin-bottom:var(--picker-open-space);
  transition:margin-bottom .18s ease;
}

.picker.is-open{
  z-index:90;
}

.picker select,
.picker input{
  position:absolute;
  inset:0;
  opacity:0;
  pointer-events:none;
  width:0;
  height:0;
}

.picker-trigger{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  width:100%;
  min-height:62px;
  padding:12px 14px 12px 18px;
  border-radius:22px;
  border:1px solid rgba(156,216,255,.16);
  background:
    linear-gradient(180deg,rgba(24,31,42,.98),rgba(18,24,33,.94)),
    radial-gradient(circle at top left,rgba(140,215,255,.08),transparent 44%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 16px 28px rgba(0,0,0,.24);
  color:#f6fbff;
  cursor:pointer;
  transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease,background .18s ease;
}

.picker-trigger:hover{
  border-color:rgba(140,215,255,.32);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 18px 34px rgba(0,0,0,.28);
}

.picker.is-open .picker-trigger,
.picker-trigger:focus-visible{
  outline:none;
  border-color:rgba(140,215,255,.7);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 0 0 4px rgba(140,215,255,.12),
    0 18px 34px rgba(0,0,0,.32);
}

.picker-value{
  display:block;
  flex:1 1 auto;
  min-width:0;
  color:#f7fbff;
  font-size:1.42rem;
  font-weight:900;
  line-height:1;
  letter-spacing:.01em;
  text-align:left;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.picker-value.is-placeholder{
  color:#dce8f4;
  font-size:1rem;
  font-weight:800;
}

.picker-side{
  display:flex;
  align-items:center;
  gap:0;
  flex-shrink:0;
}

.picker-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:64px;
  min-height:34px;
  padding:7px 12px;
  border-radius:999px;
  border:1px solid rgba(140,215,255,.18);
  background:rgba(140,215,255,.1);
  color:#8cd7ff;
  font-size:.74rem;
  font-weight:900;
  letter-spacing:.16em;
}

.picker-chip.subtle{
  min-width:0;
  min-height:28px;
  padding:5px 10px;
  border-color:rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
  color:#9fb0c4;
}

.picker-caret{
  position:relative;
  width:14px;
  height:14px;
  opacity:.78;
}

.picker-caret::before{
  content:"";
  position:absolute;
  inset:2px 3px 4px 2px;
  border-right:2px solid rgba(232,241,250,.68);
  border-bottom:2px solid rgba(232,241,250,.68);
  transform:rotate(45deg);
  transition:transform .18s ease,opacity .18s ease;
}

.picker.is-open .picker-caret::before{
  transform:rotate(225deg) translate(-1px,-1px);
  opacity:1;
}

.picker-clock{
  position:relative;
  width:22px;
  height:22px;
  border-radius:999px;
  border:1px solid rgba(140,215,255,.28);
  background:radial-gradient(circle at 35% 30%,rgba(140,215,255,.24),rgba(140,215,255,.06));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.03);
}

.picker-clock::before,
.picker-clock::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  background:#9fe3ff;
  border-radius:999px;
  transform-origin:bottom center;
}

.picker-clock::before{
  width:2px;
  height:7px;
  margin-left:-1px;
  margin-top:-7px;
}

.picker-clock::after{
  width:2px;
  height:5px;
  margin-left:-1px;
  margin-top:-5px;
  transform:rotate(55deg);
}

.picker-menu{
  position:absolute;
  left:0;
  right:0;
  top:calc(100% + 10px);
  z-index:60;
  max-height:min(52dvh,340px);
  overflow:auto;
  padding:10px;
  border-radius:24px;
  border:1px solid rgba(140,215,255,.14);
  background:
    linear-gradient(180deg,rgba(14,19,27,.98),rgba(11,15,22,.98)),
    radial-gradient(circle at top left,rgba(140,215,255,.08),transparent 46%);
  box-shadow:0 24px 56px rgba(0,0,0,.42);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}

.picker.is-open-up .picker-menu{
  top:auto;
  bottom:calc(100% + 10px);
}

.picker-option-grid{
  display:grid;
  gap:8px;
}

.picker-option{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  width:100%;
  min-height:48px;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.03);
  color:#ebf4fd;
  text-align:left;
  cursor:pointer;
  transition:border-color .18s ease,background .18s ease,transform .18s ease,color .18s ease;
}

.picker-option:hover{
  border-color:rgba(140,215,255,.2);
  background:rgba(140,215,255,.08);
  transform:translateY(-1px);
}

.picker-option.is-active{
  border-color:rgba(140,215,255,.44);
  background:linear-gradient(90deg,rgba(140,215,255,.18),rgba(99,230,207,.12));
  color:#f8fdff;
}

.picker-option small{
  color:#91a4b8;
  font-size:.74rem;
  font-weight:800;
}

.picker-time-menu{
  width:min(420px,calc(100vw - 48px));
  right:auto;
  overflow:hidden;
}

.picker-time-top{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  margin-bottom:12px;
  padding:6px 4px 10px;
  border-bottom:1px solid rgba(255,255,255,.06);
}

.picker-time-top strong{
  color:#f8fcff;
  font-size:1.3rem;
  font-weight:900;
  letter-spacing:.03em;
}

.picker-time-grid{
  display:grid;
  grid-template-columns:120px 1fr;
  gap:12px;
}

.picker-time-col{
  min-width:0;
}

.picker-time-col > p{
  margin:0 0 10px;
  color:#8ea3b7;
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.16em;
}

.picker-hour-list,
.picker-minute-list{
  display:grid;
  gap:8px;
  max-height:196px;
  overflow:auto;
  padding-right:4px;
}

.picker-hour-list{
  grid-template-columns:1fr;
}

.picker-minute-list{
  grid-template-columns:repeat(4,minmax(0,1fr));
}

.picker-hour-list::-webkit-scrollbar,
.picker-minute-list::-webkit-scrollbar{
  width:8px;
}

.picker-hour-list::-webkit-scrollbar-thumb,
.picker-minute-list::-webkit-scrollbar-thumb{
  border-radius:999px;
  background:rgba(140,215,255,.18);
}

.picker-time-btn{
  min-height:42px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.03);
  color:#f0f7ff;
  font-weight:900;
  line-height:1;
}

.picker-time-btn:hover{
  border-color:rgba(140,215,255,.18);
  background:rgba(140,215,255,.08);
}

.picker-time-btn.is-active{
  border-color:rgba(140,215,255,.44);
  background:linear-gradient(90deg,rgba(140,215,255,.2),rgba(99,230,207,.12));
  color:#ffffff;
}

.picker-compact .picker-trigger{
  min-height:52px;
  padding:10px 12px 10px 15px;
  border-radius:18px;
}

.picker-compact .picker-value{
  font-size:1.02rem;
}

.picker-compact .picker-side{
  gap:0;
}

@media (max-width:760px){
  .picker-time-menu{
    width:min(100vw - 34px,420px);
  }

  .picker-time-grid{
    grid-template-columns:1fr;
  }

  .picker-minute-list{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
}