:root {
    --temporal-accent: var(--edu-orange-logo-deep, #fc7303);
    --temporal-accent-strong: var(--interaction-warning-text, #a84000);
    --temporal-selected: var(--brand-action,var(--edu-orange-solid,#d95700));
    --temporal-surface: #ffffff;
    --temporal-surface-soft: #f8fafc;
    --temporal-border: #d8dee7;
    --temporal-text: #1e2b40;
    --temporal-muted: #657286;
    --temporal-shadow: 0 18px 48px rgb(18 32 52 / 18%);
    --temporal-overlay-layer: 80;
}

.temporal-field { position: relative; min-width: 0; color: var(--temporal-text); font: inherit; }
.temporal-field__label{margin-block-end:12px}
.temporal-field__trigger {
    width: 100%; min-height: var(--control-height,46px); display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 13px; border: 1px solid var(--temporal-border); border-radius: 11px;
    background: var(--temporal-surface-soft); color: var(--temporal-muted); font: inherit; text-align: start; cursor: pointer;
}
.temporal-field.has-value .temporal-field__trigger { color: var(--temporal-text); }
.temporal-field__trigger svg,.time-picker__icon { width: 20px; height: 20px; flex: 0 0 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.temporal-field__error{margin:7px 0 0;color:#b52d36;font-size:10px;text-align:start}.temporal-field__error[hidden]{display:none}.temporal-field.is-invalid .temporal-field__trigger{border-color:#c33e42}
.temporal-field__trigger:hover { border-color: #f0a16f; background: #fffaf6; }
.temporal-field__trigger:focus-visible,.date-picker__nav:focus-visible,.date-picker__footer button:focus-visible,.date-picker__grid button:focus-visible,.time-picker select:focus-visible {
    outline: 3px solid rgb(237 104 31 / 22%); outline-offset: 2px; border-color: var(--temporal-accent);
}

.temporal-popover {
    position: fixed; z-index: var(--temporal-overlay-layer); inset: auto; margin: 0;
    width: clamp(280px,34vw,360px); max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px);
    grid-template-rows: auto minmax(0,1fr) auto; overflow: hidden; padding: 9px;
    border: 1px solid var(--temporal-border); border-radius: 17px;
    background: var(--temporal-surface); background: color-mix(in srgb, var(--temporal-surface) 96%, transparent); box-shadow: var(--temporal-shadow); backdrop-filter: blur(18px);
    overscroll-behavior: contain;
}
.temporal-popover[hidden] { display: none !important; }
.temporal-popover:not([hidden]),.temporal-popover:popover-open { display: grid; }
.temporal-overlay { position: fixed; z-index: var(--temporal-overlay-layer); inset: 0; pointer-events: none; }
.temporal-overlay>.temporal-popover { pointer-events: auto; }
.temporal-overlay__backdrop { display: none; position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; pointer-events: auto; }
.date-picker__header { display: grid; grid-template-columns: 32px minmax(0,1fr) 32px; align-items: center; gap: 4px; }
.date-picker__nav { width: 32px; height: 34px; display: grid; place-items: center; border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--temporal-muted); cursor: pointer; }
.date-picker__nav:hover { border-color: var(--temporal-border); background: var(--temporal-surface-soft); color: var(--temporal-accent); }
.date-picker__nav:disabled,.date-picker__footer button:disabled { opacity: .4; cursor: not-allowed; }
.date-picker__nav svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.date-picker__dialog:dir(rtl) .date-picker__nav svg { transform: scaleX(-1); }
.date-picker__period { min-width: 0; display: grid; grid-template-columns: minmax(0,1fr) 66px; gap: 4px; }
.date-picker__period select,.time-picker select {
    min-width: 0; min-height: 42px; padding: 7px 9px; border: 1px solid var(--temporal-border); border-radius: 10px;
    background: var(--temporal-surface-soft); color: var(--temporal-text); font: inherit;
}
.date-picker__period select { min-height: 34px; font-size: 12px; padding: 4px 5px; }
.date-picker__body { min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--temporal-border) transparent; }
.date-picker__weekdays,.date-picker__grid { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 2px; }
.date-picker__weekdays { margin: 6px 0 2px; color: var(--temporal-muted); font-size: 10px; font-weight: 600; text-align: center; }
.date-picker__weekdays span { display: grid; place-items: center; min-height: 20px; }
.date-picker__grid button {
    position: relative; min-width: 0; min-height: 30px; display: grid; place-items: center; padding: 0;
    border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--temporal-text); font: inherit; font-size: 11px; cursor: pointer;
}
.date-picker__grid button:hover:not(:disabled) { border-color: #f3b187; background: #fff4eb; color: var(--temporal-accent-strong); }
.date-picker__grid button.is-outside { color: var(--temporal-muted); }
.date-picker__grid button.is-today:not(.is-selected) { border-color: var(--temporal-accent); font-weight: 700; }
.date-picker__grid button.is-selected { background: var(--temporal-selected); color: #fff; font-weight: 700; box-shadow: 0 6px 15px rgb(237 104 31 / 28%); }
.date-picker__grid button:disabled { color: #bdc4ce; cursor: not-allowed; text-decoration: line-through; opacity: .58; }
.date-picker__footer { display: flex; justify-content: space-between; gap: 8px; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--temporal-border); }
.date-picker__footer button { min-height: 32px; padding: 4px 8px; border: 0; border-radius: 9px; background: transparent; color: var(--temporal-accent-strong); font: 600 11px inherit; cursor: pointer; }
.date-picker__footer button:hover { background: #fff1e7; }

.time-picker__controls { min-height: 48px; display: flex; align-items: flex-end; gap: 7px; padding: 5px 9px; border: 1px solid var(--temporal-border); border-radius: 11px; background: var(--temporal-surface-soft); }
.time-picker__controls>label { flex: 1 1 70px; min-width: 0; display: grid; gap: 2px; margin: 0; }
.time-picker__controls>label>span { color: var(--temporal-muted); font-size: 8px; font-weight: 600; }
.time-picker__controls>span[aria-hidden] { align-self: center; color: var(--temporal-muted); font-weight: 700; }
.time-picker select { width: 100%; min-height: 36px; padding: 4px 7px; background: var(--temporal-surface); }
.time-picker__icon { align-self: center; color: var(--temporal-muted); }
.time-picker.is-invalid .time-picker__controls { border-color: #c33e42; }
.datetime-picker { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(210px,.7fr); gap: 10px; }

html[data-theme="dark"] {
    --temporal-surface: #182235; --temporal-surface-soft: #202c40; --temporal-border: #3b495e;
    --temporal-text: #f1f4f8; --temporal-muted: #b5c0cf; --temporal-shadow: 0 20px 55px rgb(0 0 0 / 45%);
}
html[data-theme="dark"] .temporal-field__trigger:hover,html[data-theme="dark"] .date-picker__footer button:hover { background: #2a3548; }
html[data-theme="dark"] .date-picker__grid button:hover:not(:disabled) { border-color: #a85f35; background: #322b2a; color: #ffb27c; }
html[data-theme="dark"] .date-picker__grid button:disabled { color: #657185; }
@media(prefers-color-scheme:dark) {
    html[data-theme="system"] { --temporal-surface:#182235;--temporal-surface-soft:#202c40;--temporal-border:#3b495e;--temporal-text:#f1f4f8;--temporal-muted:#b5c0cf;--temporal-shadow:0 20px 55px rgb(0 0 0 / 45%); }
    html[data-theme="system"] .temporal-field__trigger:hover,html[data-theme="system"] .date-picker__footer button:hover { background:#2a3548; }
    html[data-theme="system"] .date-picker__grid button:hover:not(:disabled) { border-color:#a85f35;background:#322b2a;color:#ffb27c; }
    html[data-theme="system"] .date-picker__grid button:disabled { color:#657185; }
}
@media(max-width:600px) {
    .temporal-popover.is-mobile-sheet { border-radius: 22px; padding-block-end: max(12px,env(safe-area-inset-bottom)); }
    .temporal-popover.is-mobile-sheet::backdrop { background: rgb(10 18 30 / 42%); backdrop-filter: blur(2px); }
    .temporal-overlay.is-mobile-overlay .temporal-overlay__backdrop { display: block; background: rgb(10 18 30 / 42%); backdrop-filter: blur(2px); }
    .date-picker__grid button { min-height: 44px; }
    .date-picker__nav { width: 40px; height: 40px; }
    .date-picker__header { grid-template-columns: 40px minmax(0,1fr) 40px; }
    .date-picker__period select { min-height: 40px; }
    .date-picker__footer button,.time-picker select { min-height: 44px; }
    .datetime-picker { grid-template-columns: 1fr; }
}
@media(max-width:374px) {
    .temporal-popover { padding: 9px; }
    .date-picker__header { grid-template-columns: 38px minmax(0,1fr) 38px; gap: 4px; }
    .date-picker__period { grid-template-columns: minmax(0,1fr) 64px; gap: 4px; }
}
/* Time selection uses the shared searchable control, never native selects. */
.time-picker__selection{position:relative;min-inline-size:0;inline-size:100%}
.time-picker__selection>.edu-select-control{margin:0;min-inline-size:0}
.date-time-range .time-picker__selection .edu-control__label-row,.datetime-picker .time-picker__selection .edu-control__label-row{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%)}
.datetime-picker--part-labels .time-picker__selection .edu-control__label-row{position:static;inline-size:auto;block-size:auto;overflow:visible;clip-path:none;margin-block-end:12px}
.time-picker__selection .edu-select__trigger{padding-inline-end:42px;min-block-size:44px}
.time-picker__selection .edu-select__trigger>svg{display:none}
.time-picker__selection>.time-picker__icon{position:absolute;inset-inline-end:12px;inset-block-end:12px;inline-size:20px;block-size:20px;pointer-events:none;fill:none;stroke:currentColor;stroke-width:1.7}
.date-time-range,.datetime-picker{min-inline-size:0;margin:0;padding:0;border:0}
.date-time-range legend,.datetime-picker legend{padding:0 0 8px;font-size:12px;font-weight:600;color:var(--temporal-text)}
.date-time-range__controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:10px;align-items:start}
.date-time-range__controls>*{min-inline-size:0}