html #jzRec button {
  transition: background-color .16s var(--ease), background .16s var(--ease), box-shadow .16s var(--ease), border-color .16s var(--ease), color .16s var(--ease), scale .41s var(--spring-snappy);
}
html #jzRec button:active { scale: .96; transition-duration: .16s, .16s, .16s, .16s, .16s, .08s; }
html #jzOpts .jz-chip { transition: background-color .18s var(--ease), color .18s var(--ease), box-shadow .18s var(--ease), scale .41s var(--spring-snappy); }
html #jzOpts .jz-chip:active { scale: .95; transition-duration: .18s, .18s, .18s, .08s; }
html #jzOpts .jz-sw::before { transition: transform .41s var(--spring-snappy); }
html #jpZone { transition: opacity .22s var(--ease), scale .41s var(--spring-snappy), display .41s allow-discrete; transform-origin: top left; }
html #jpZone[hidden] { opacity: 0; scale: .97; transition: opacity .14s ease-in, scale .16s var(--ease-in), display .16s allow-discrete; }
@starting-style { html #jpZone { opacity: 0; scale: .95; } }

#rngFov:disabled { opacity: .4; cursor: default; }
#jzFovNote { margin: 6px 0 2px; }

#rngHour, #valHour { display: none !important; }
.date-sel#inpDate { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.1fr); gap: 8px; margin-top: 8px; }
.form-row #inpDate > select { padding-left: 10px; padding-right: 26px; background-position: right 10px center; }
#jzTime {
  display: flex; align-items: center; min-width: 0; padding: 0 26px 0 4px; border-radius: var(--r-c);
  background: #0E3A5E url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23cfe9f8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center / 10px 6px;
  border: 1px solid var(--sep); box-shadow: var(--in);
}
#jzTime:focus-within { border-color: rgba(124, 203, 239, .6); box-shadow: var(--in), var(--focus); }
.form-row #jzTime select { flex: 1 1 0; min-width: 0; padding: 9px 0; border: 0; border-radius: var(--r-xs); background: transparent none; box-shadow: none; text-align: center; text-align-last: center; cursor: pointer; }
.form-row #jzTime select:hover { background-color: rgba(255, 255, 255, .06); }
.form-row #jzTime select:focus { box-shadow: none; }
#jzTime .jz-colon { flex: none; color: var(--fg-2); }
#jzHour { grid-column: 1 / -1; margin: 4px 0 0; }

html #jpZone, html #jzRec button {
  background: var(--mat-hud); border: 1px solid var(--hair); border-radius: 999px; color: #fff;
  box-shadow: var(--sh-1), var(--hi); backdrop-filter: var(--blur-hud); text-shadow: none;
}
html #jpZone { border-radius: var(--r-m); }
html #jzRec .on { background: rgba(214, 52, 44, .9); border-color: rgba(255, 160, 150, .4); color: #fff; }
html #jzRec button:hover { background: rgba(40, 64, 88, .7); filter: none; }
html #jpZone .jz-row i { border-radius: 3px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .35); }
html #jpZone .jz-row em, html #jpZone .jz-ok { color: var(--fg-2); opacity: 1; }

html #jzRecDlg { background: rgba(2, 8, 16, .5); }
html #jzRecDlg .jz-card { background: var(--mat-panel); border: 1px solid var(--hair); border-radius: var(--r-xl); box-shadow: var(--sh-3), var(--hi); backdrop-filter: var(--blur-pop); color: var(--fg); }
html #jzRecDlg { transition: opacity .24s var(--ease), display .3s allow-discrete; }
html #jzRecDlg[hidden] { opacity: 0; pointer-events: none; transition: opacity .2s ease-in, display .2s allow-discrete; }
html #jzRecDlg .jz-card { transition: opacity .24s var(--ease), scale .57s var(--spring-smooth), translate .57s var(--spring-smooth); }
html #jzRecDlg[hidden] .jz-card { scale: .98; translate: 0 6px; transition: opacity .2s ease-in, scale .22s var(--ease-in), translate .22s var(--ease-in); }
@starting-style {
  html #jzRecDlg { opacity: 0; }
  html #jzRecDlg .jz-card { opacity: 0; scale: .97; translate: 0 18px; }
}
html #jzRecDlg .jz-head { padding: 12px 16px; border-bottom-color: var(--sep); }
html #jzRecDlg .jz-list { padding: 8px; border-right-color: var(--sep); }
html #jzRecDlg .jz-item { border-radius: var(--r-s); padding: 8px 10px; color: var(--fg-2); }
html #jzRecDlg .jz-item b { color: var(--fg); }
html #jzRecDlg .jz-item:hover { background: rgba(255, 255, 255, .06); }
html #jzRecDlg .jz-item.sel { background: rgba(124, 203, 239, .18); color: var(--fg); box-shadow: none; }
html #jzRecDlg .jz-item .jz-sp { color: #FFB86B; }
html #jzRecDlg .jz-detail { padding: 14px 16px; }
html #jzRecDlg .jz-sum div { color: var(--fg); opacity: 1; }
html #jzRecDlg .jz-sum span { color: var(--fg-3); opacity: 1; }
html #jzRecDlg .jz-perm { background: var(--well); border: 1px solid var(--sep); border-radius: var(--r-m); box-shadow: var(--in); padding: 10px 12px; }
html #jzRecDlg .jz-perm h4 { color: #FFB86B; }
html #jzRecDlg .jz-perm .jz-law { color: var(--fg-2); opacity: 1; }
html #jzRecDlg .jz-perm li.now { background: rgba(124, 203, 239, .18); border-radius: var(--r-tag); box-shadow: -6px 0 0 rgba(124, 203, 239, .18), 6px 0 0 rgba(124, 203, 239, .18); }
html #jzRecDlg .jz-mapw { border-radius: var(--r-c); box-shadow: 0 0 0 1px var(--hair); }
html #jzRecDlg .jz-mapmsg { color: var(--fg-2); }
html #jzRecDlg .jz-play .jz-pbtn { border-radius: 999px; }
html #jzRecDlg .jz-ptime { color: var(--fg); }
html #jzRecDlg .jz-seek { accent-color: #6EC3EA; }
html #jzRecDlg .jz-rate {
  -webkit-appearance: none; appearance: none; background-color: #0E3A5E;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23cfe9f8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 10px 6px; padding-right: 32px;
  color: var(--fg); border: 1px solid var(--sep); border-radius: var(--r-s); box-shadow: var(--in); padding-top: 4px; padding-bottom: 4px;
}
html #jzRecDlg .jz-legend, html #jzRecDlg .jz-note { color: var(--fg-2); opacity: 1; }
html #jzRecDlg .jz-chart canvas { background: rgba(0, 0, 0, .18); border-radius: var(--r-c); box-shadow: inset 0 0 0 1px var(--sep); }
html #jzRecDlg .btn-secondary { border-radius: 999px; }
html #jzRecDlg .jz-hud, html #jzRecDlg .jz-now {
  background: rgba(10, 22, 36, .78); color: #fff; border-radius: var(--r-m); text-shadow: none;
  box-shadow: inset 0 0 0 1px var(--hair), var(--hi), var(--sh-1); backdrop-filter: var(--blur-hud);
}
html #jzRecDlg .jz-hh { color: var(--fg-2); opacity: 1; }
html #jzRecDlg .jz-mode { background: rgba(255, 255, 255, .1); color: #fff; border: 1px solid var(--hair); border-radius: 999px; padding: 0 8px; }
html #jzRecDlg .jz-mode:hover { background: rgba(255, 255, 255, .18); }
html #jzRecDlg .jz-stk i { background-color: rgba(0, 0, 0, .28); background-image: none; border: 1px solid var(--sep); border-radius: var(--r-s); box-shadow: var(--in); }
html #jzRecDlg .jz-stk i::before { content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: .16; pointer-events: none;
  background: linear-gradient(#fff, #fff) center / 1px 100% no-repeat, linear-gradient(#fff, #fff) center / 100% 1px no-repeat; }
html #jzRecDlg .jz-stk b { background: var(--aq-ink); box-shadow: 0 0 0 2px rgba(0, 0, 0, .35), 0 0 8px rgba(124, 203, 239, .6); }
html #jzRecDlg .jz-stk span { color: var(--fg-2); opacity: 1; }
html #jzRecDlg .jz-now .jz-c { border-radius: 999px; padding: 1px 9px; }
html #jzRecDlg .jz-now .p { background: var(--aq-ink); color: #06263D; }
html #jzRecDlg .jz-now .w { background: rgba(255, 255, 255, .14); color: #fff; }
html #jzRecDlg .jz-now .x { background: #E5534B; color: #fff; }

@media (prefers-reduced-motion: reduce) {
  html #jzRec button, html #jzOpts .jz-chip, html #jpZone, html #jzRecDlg .jz-card { translate: none !important; scale: none !important; }
  html #jzOpts .jz-sw::before { transition: none; }
}