.time-picker {
  width: min(360px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  box-sizing: border-box;
  padding: 24px;
  border: 1px solid var(--panel-border);
  border-radius: 20px;
  background: var(--app-surface);
  color: var(--app-ink, #24332f);
  box-shadow: 0 24px 80px #0004;
}
.time-picker::backdrop { background: #0007; }
.time-picker__header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.time-picker__header h2 { margin: 0; font-size: 1.35rem; }
.time-picker__cancel { border: 0; background: none; color: inherit; min-height: 44px; cursor: pointer; }
.time-picker__hint { margin: 4px 0 20px; font-size: .9rem; }
.time-picker__fields { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 12px; }
.time-picker__fields label { display: grid; gap: 8px; font-weight: 600; }
.time-picker__fields > span { padding-bottom: 14px; font-size: 2rem; }
.time-picker .time-picker__fields input[type="number"] {
  width: 100%; min-width: 0; box-sizing: border-box; height: 68px;
  border: 1px solid var(--panel-border); border-radius: 12px;
  background: var(--app-surface); color: inherit;
  font: inherit; font-size: 2rem; text-align: center;
}
.time-picker__actions { display: flex; gap: 12px; margin-top: 24px; }
.time-picker__actions > button { flex: 1; }
.time-picker :focus-visible { outline: 3px solid var(--app-primary); outline-offset: 3px; }