.time24-control { display: inline-flex; align-items: center; gap: .35rem; width: 100%; max-width: 100%; }
.time24-control > input { min-width: 0; flex: 1 1 auto; width: 7rem; }
.time24-open { flex: 0 0 auto; font-size: 1.25rem; min-width: 2.75rem; min-height: 2.75rem; padding: .3rem; border: 1px solid #86606b; border-radius: .35rem; background: #fff; cursor: pointer; }
.time24-open:disabled { opacity: .45; cursor: default; }
.time24-open:focus-visible, .time24-dialog :focus-visible { outline: 3px solid #2363bb; outline-offset: 2px; }
.time24-dialog { box-sizing: border-box; width: min(28rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); padding: 1.5rem; border: 1px solid #86606b; border-radius: 1rem; background: #fff; color: #292326; box-shadow: 0 1rem 4rem #0004; }
.time24-dialog::backdrop { background: #0007; }
.time24-dialog h2 { margin: 0 0 .75rem; padding: 0; background: none; color: #702638; font: 600 1.3rem system-ui; }
.time24-dialog p { margin: 0 0 1rem; font: 1rem/1.5 system-ui; color: #4a4145; }
.time24-picker-fields { display: flex; gap: .6rem; flex-wrap: wrap; }
.time24-picker-fields label { flex: 1 1 5rem; font: .85rem system-ui; color: #292326; }
.time24-picker-fields label[hidden] { display: none; }
.time24-picker-fields select { display: block; box-sizing: border-box; width: 100%; margin-top: .4rem; padding: .65rem; border: 1px solid #86606b; border-radius: .35rem; background: #fff; color: #292326; font: 1.1rem system-ui; }
.time24-preview { display: block; padding: 1rem 0; text-align: center; font: 600 1.5rem monospace; color: #702638; }
.time24-picker-actions { display: flex; justify-content: flex-end; gap: .6rem; }
.time24-picker-actions button { border: 1px solid #702638; border-radius: .35rem; padding: .65rem .8rem; background: white; color: #702638; font: 1rem system-ui; cursor: pointer; }
.time24-picker-actions .time24-apply { background: #702638; color: white; }