.time-field { min-width:0; }
.time-field-label { display:block; }
.time-field input.time-24[type=hidden] { display:none !important; }
.time-trigger { display:flex; align-items:center; gap:10px; width:100%; min-height:48px; margin-top:6px; padding:10px 12px; border:1px solid #465166; border-radius:9px; background:#111720; color:#f1f4f8; font:inherit; font-variant-numeric:tabular-nums; text-align:left; cursor:pointer; }
.time-trigger:hover { border-color:#84a9d7; background:#152132; }
.time-trigger[aria-expanded=true] { border-color:#8abbff; box-shadow:0 0 0 2px #8abbff26; }
.time-trigger.is-empty { color:#aabace; }
.time-trigger:disabled { opacity:.5; cursor:default; }
.time-clock { width:21px; height:21px; flex:none; stroke:#9dbce4; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.time-value { flex:1; font-size:19px; font-weight:650; line-height:1.3; }
.time-trigger.is-empty .time-value { font-size:15px; font-weight:500; }
.time-chevron { width:16px; height:16px; flex:none; stroke:#a6bedb; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.time-field.has-error .time-trigger { border-color:#e4949b; }
.time-field-error { margin:7px 0 0; color:#ffc0c5; font-size:12px; line-height:1.4; }
.time-visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.time-popover { position:fixed; z-index:1000; width:min(372px,calc(100vw - 24px)); max-height:calc(100dvh - 24px); overflow:auto; overscroll-behavior:contain; padding:18px; border:1px solid #58749b; border-radius:16px; background:#172232; color:#eff5ff; box-shadow:0 18px 65px #0009; font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; line-height:1.4; }
.time-popover[hidden],.time-popover [hidden] { display:none !important; }
.time-popover-header { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:15px; }
.time-popover-heading { color:#b9cce4; font-size:13px; font-weight:600; }
.time-popover-readout { margin:2px 0 3px; color:#fff; font-size:30px; font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:.025em; }
.time-popover-range { color:#a8bed9; font-size:12px; }
.time-popover button { font:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.time-popover button:disabled { opacity:.3; cursor:default; }
.time-popover button:focus-visible,.time-trigger:focus-visible { outline:3px solid #a9ceff; outline-offset:2px; }
.time-close { display:flex; align-items:center; justify-content:center; flex:none; width:44px; height:44px; border:1px solid #445973; border-radius:9px; background:transparent; color:#c7d7eb; font-size:27px !important; line-height:1; }
.time-close:hover { background:#26374c; }
.time-section-label { margin-bottom:7px; color:#c4d3e6; font-size:12px; font-weight:650; }
.time-hour-section,.time-minute-section,.time-duration-section,.time-suggestion-section { margin-bottom:14px; }
.time-hours-grid,.time-minutes-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:5px; }
.time-choice { display:flex; align-items:center; justify-content:center; min-width:0; min-height:44px; padding:5px 2px; border:1px solid #3f5571; border-radius:8px; background:#1c2b40; color:#dfeaff; font-size:15px !important; font-variant-numeric:tabular-nums; }
.time-choice:not(:disabled):hover { border-color:#9bbde9; background:#2c4667; }
.time-choice[aria-pressed=true] { border-color:#9ac3ff; background:#8abbff; color:#11223a; font-weight:750; }
.time-choice[aria-pressed=true]:not(:disabled):hover { background:#acd0ff; }
.time-adjustment { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin:2px 0 15px; }
.time-adjust { min-height:44px; padding:8px 10px; border:1px solid #4b6586; border-radius:8px; background:#223750; color:#deecff; font-size:14px !important; font-weight:600 !important; }
.time-adjust:not(:disabled):hover { border-color:#8fbae9; background:#2c4869; }
.time-quick-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px; }
.time-quick-choice { min-width:0; min-height:44px; padding:7px 3px; border:1px solid #526b88; border-radius:8px; background:transparent; color:#d3e5fc; font-size:12px !important; font-variant-numeric:tabular-nums; }
.time-quick-choice:not(:disabled):hover { border-color:#a1c6f1; background:#2b425d; }
.time-done { display:block; width:100%; min-height:46px; padding:10px 16px; border:1px solid #8abbff; border-radius:9px; background:#8abbff; color:#10213b; font-size:15px !important; font-weight:700 !important; }
.time-done:not(:disabled):hover { background:#b3d2ff; }
.time-popover-error { margin:0 0 13px; padding:10px 12px; border:1px solid #a86977; border-radius:8px; background:#3a2431; color:#ffced5; font-size:13px; }
@media(max-width:480px) { .time-popover { padding:14px; border-radius:13px; } .time-popover-header { margin-bottom:12px; } .time-popover-readout { font-size:28px; } .time-hours-grid,.time-minutes-grid { gap:4px; } }
@media(max-width:360px) { .time-hours-grid,.time-minutes-grid { grid-template-columns:repeat(5,minmax(0,1fr)); } }
@media(prefers-reduced-motion:no-preference) { .time-trigger,.time-choice,.time-adjust,.time-quick-choice { transition:background-color .12s,border-color .12s; } }