/* Виджет: Время — карточка, иконка, три режима (часы / ЧЧ:ММ / ЧЧ:ММ:СС) */
@import url("kiosk-time-date-portrait.css");

.player-cell.widget-time {
  --widget-block-pad: 5px;
  --widget-gap: 5px;
  --player-cell-pad: 0.22em;
}

.widget-time {
  font-variant-numeric: tabular-nums;
  justify-content: center;
  align-items: center;
  padding: var(--widget-pad-single);
}
/* Зеркало по горизонтали: проекция, отражённый экран, съёмка через зеркало */
.widget-time.widget-time--mirror {
  transform: scaleX(-1);
}

.widget-time-inner {
  --widget-time-ring-scale: 1;
  --widget-time-date-scale: 1;
  --widget-time-digital-scale: 1;
  --widget-time-label-scale: 1;
  /* Профиль экрана (TV/kiosk): множители размеров. Для data-screen-display-profile="custom" не задаётся — только настройки виджета. */
  --widget-time-screen-base: 1;
  --widget-time-screen-label-base: 1;
  --widget-time-analog-sw-hour: 3;
  --widget-time-analog-sw-minute: 2.2;
  --widget-time-analog-sw-second: 1.05;
  /* cqi/cqw внутри виджета — от ширины ячейки, не от общего экрана (несколько часов не делят один контейнер) */
  container-type: inline-size;
  container-name: widget-time;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--widget-gap);
  width: 100%;
  min-height: 100%;
  padding: var(--widget-pad);
  border-radius: var(--block-radius, var(--radius));
  background: var(--glass-bg);
  border-width: var(--block-border-width, 0);
  border-style: solid;
  border-color: var(--block-border-color, var(--glass-border));
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
  transition: border-color var(--transition), box-shadow var(--transition);
}

/*
 * Квадраты без своего hex: маркер data-time-boxes-fill-default; заливка плиток и ряда — прозрачная (как у date).
 * Свой цвет — inline --widget-time-* + data-time-boxes-bg-custom.
 */
.player-cell.widget-time .widget-time-inner[data-time-boxes-fill-default='1'] {
  --widget-time-boxes-bg: transparent;
  --widget-time-boxes-border: rgba(255, 255, 255, 0.12);
  --widget-time-boxes-row-bg: transparent;
  --widget-time-boxes-row-border: rgba(255, 255, 255, 0.1);
}

[data-theme='light'] .player-cell.widget-time:not([data-widget-theme='dark']) .widget-time-inner[data-time-boxes-fill-default='1'],
.player-cell.widget-time[data-widget-theme='light'] .widget-time-inner[data-time-boxes-fill-default='1'] {
  --widget-time-boxes-bg: transparent;
  --widget-time-boxes-border: rgba(0, 0, 0, 0.08);
  --widget-time-boxes-row-bg: transparent;
  --widget-time-boxes-row-border: rgba(0, 0, 0, 0.07);
}

.player-cell.widget-time[data-widget-theme='dark'] .widget-time-inner[data-time-boxes-fill-default='1'] {
  --widget-time-boxes-bg: transparent;
  --widget-time-boxes-border: rgba(255, 255, 255, 0.12);
  --widget-time-boxes-row-bg: transparent;
  --widget-time-boxes-row-border: rgba(255, 255, 255, 0.1);
}

.player-wrap[data-screen-display-profile="tv_1024"] .player-cell.widget-time .widget-time-inner {
  --widget-time-screen-base: 0.88;
  --widget-time-screen-label-base: 0.88;
}

.player-wrap[data-screen-display-profile="tv_1920"] .player-cell.widget-time .widget-time-inner {
  --widget-time-screen-base: 1;
  --widget-time-screen-label-base: 1;
}

.player-wrap[data-screen-display-profile="tv_2560"] .player-cell.widget-time .widget-time-inner,
.player-wrap[data-screen-display-profile="kiosk_1440_2560"] .player-cell.widget-time .widget-time-inner {
  --widget-time-screen-base: 1.08;
  --widget-time-screen-label-base: 1.03;
}

.player-wrap[data-screen-display-profile="tv_3840"] .player-cell.widget-time .widget-time-inner,
.player-wrap[data-screen-display-profile="kiosk_2160_3840"] .player-cell.widget-time .widget-time-inner {
  --widget-time-screen-base: 1.16;
  --widget-time-screen-label-base: 1.06;
}

.player-wrap[data-screen-display-profile="kiosk_1080_1920"] .player-cell.widget-time .widget-time-inner {
  --widget-time-screen-base: 1;
  --widget-time-screen-label-base: 1;
}

/* Обновляемый текст для NVDA/JAWS/VoiceOver — визуально скрыт, без участия в flex */
.widget-time-a11y-live {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
  pointer-events: none;
}
.widget-time:hover .widget-time-inner,
.player-cell.widget-time:focus-within .widget-time-inner {
  border-color: rgba(59, 130, 246, 0.35);
  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.2);
}
.widget-time-icon {
  flex-shrink: 0;
  width: calc(1.35em * var(--widget-time-screen-base, 1));
  height: calc(1.35em * var(--widget-time-screen-base, 1));
  min-width: calc(1.35em * var(--widget-time-screen-base, 1));
  min-height: calc(1.35em * var(--widget-time-screen-base, 1));
  box-sizing: border-box;
  aspect-ratio: 1;
  align-self: center;
  border-radius: 50%;
  border: 2px solid var(--color-primary);
  background: linear-gradient(145deg, var(--color-surface-2), var(--color-surface));
  position: relative;
  opacity: 0.9;
}
.widget-time-icon::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 50%;
  width: 2px;
  height: 36%;
  margin-left: -1px;
  background: var(--color-primary);
  transform-origin: 50% 100%;
  transform: rotate(-52deg);
  border-radius: 1px;
}
.widget-time-icon::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 50%;
  width: 2px;
  height: 24%;
  margin-left: -1px;
  background: var(--color-accent);
  transform-origin: 50% 100%;
  transform: rotate(42deg);
  border-radius: 1px;
}
/* Чуть влево относительно центрированного ряда — визуально ровнее к цифрам */
.widget-time-inner > .widget-time-icon {
  margin-left: -0.22em;
}
.widget-time--no-icon .widget-time-icon { display: none; }
.widget-time-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.08em;
  min-width: 0;
}
.widget-time .widget-time-value {
  letter-spacing: 0.04em;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.widget-time-label {
  font-size: calc(0.52em * var(--widget-time-label-scale, 1) * var(--widget-time-screen-label-base, 1));
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  line-height: 1.2;
}
.widget-time-label:empty { display: none; }

.widget-time-main--custom { display: flex; align-items: center; justify-content: center; padding-bottom: var(--widget-gap-sm); }
/* Доп. «стекло» только вокруг блока времени (аналог/цифры), не дублируя всю карточку */
.widget-time-main--custom.widget-time-main--glass {
  position: relative;
  z-index: 0;
  padding: var(--widget-dt-glass-pad-y) var(--widget-dt-glass-pad-x);
  padding-bottom: max(var(--widget-gap-sm), var(--widget-dt-glass-pad-y));
  border-radius: var(--block-radius, var(--radius));
  background: var(--glass-bg);
  border-width: var(--block-border-width, 0);
  border-style: solid;
  border-color: var(--block-border-color, var(--glass-border));
  backdrop-filter: blur(11px) saturate(1.05);
  -webkit-backdrop-filter: blur(11px) saturate(1.05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 2px 14px rgba(0, 0, 0, 0.1);
}
.widget-time-main--custom.widget-time-main--glass.widget-time-main--analog {
  padding: clamp(0.35em, 0.9cqmax, 0.65em);
}
/* row-gap / column-gap отдельно — чтобы при «без двоеточия» column-gap из настроек стабильно перебивал второе значение gap */
.widget-time-main--custom.widget-time-main--row {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  row-gap: var(--widget-gap);
  column-gap: var(--widget-pad-single);
}
.widget-time-main--custom.widget-time-main--labels-below { flex-direction: column; gap: var(--widget-gap); align-items: center; }
.widget-time-main--labels-below .widget-time-numbers-row { display: flex; flex-direction: row; align-items: center; justify-content: center; flex-wrap: wrap; }
.widget-time-main--labels-below .widget-time-labels-row { display: flex; flex-direction: row; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--widget-gap) var(--widget-pad-single); }
.widget-time-main--labels-below .widget-time-labels-row .widget-time-label-part { font-size: calc(0.42em * var(--widget-time-label-scale, 1)); }
.widget-time-main--custom .widget-time-pair { display: inline-flex; align-items: baseline; gap: var(--widget-gap-xs); }
.widget-time-main--custom .widget-time-pair--stack {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1em;
  text-align: center;
}
.widget-time-ring-core .widget-time-pair-inner--stack {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.08em;
  text-align: center;
  width: 100%;
}
.widget-time-main--custom .widget-time-sep {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  line-height: 1;
  color: var(--color-text-muted);
  opacity: 0.85;
  padding: 0 0.08em;
  transform: translateY(-0.05em);
  user-select: none;
}
.widget-time-main--custom .widget-time-sep--ms {
  font-weight: 700;
  color: var(--color-text-muted);
  opacity: 0.72;
  padding: 0 0.02em 0 0.05em;
  user-select: none;
}
/* Секунды + «.» + мс одной группой — в портрете не отдельная строка с точкой */
.widget-time-main--custom .widget-time-ms-suffix {
  display: inline-flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 0;
}
.widget-time--rings .widget-time-ms-suffix {
  align-items: center;
}
.widget-time-main--custom .widget-time-num { font-variant-numeric: tabular-nums; letter-spacing: 0.04em; font-weight: 700; color: var(--color-text); }
.widget-time-main--custom .widget-time-num--ms {
  font-size: 0.82em;
  letter-spacing: 0.02em;
  font-weight: 700;
  opacity: 0.95;
}
/*
 * «Классические» коробки: ряд без flip-ячеек; inline без «квадраты» (простые коробки по em).
 * Inline + widget-time--boxes — те же flip-плитки, что и .widget-time-numbers-row--flip-cells (см. ниже).
 */
.widget-time-main--custom .widget-time-numbers-row:not(.widget-time-numbers-row--flip-cells) .widget-time-num--box,
.widget-time-main--custom.widget-time-main--inline.widget-time-main--row:not(.widget-time--boxes) .widget-time-num--box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2em;
  padding: var(--widget-box-pad);
  background: var(--widget-time-boxes-bg, transparent);
  border: 1px solid var(--widget-time-boxes-border, rgba(255, 255, 255, 0.12));
  border-radius: 6px;
  box-sizing: border-box;
  font-variant-numeric: tabular-nums;
}
[data-theme='light'] .widget-time-main--custom .widget-time-numbers-row:not(.widget-time-numbers-row--flip-cells) .widget-time-num--box,
[data-theme='light'] .widget-time-main--custom.widget-time-main--inline.widget-time-main--row:not(.widget-time--boxes) .widget-time-num--box {
  background: var(--widget-time-boxes-bg, transparent);
  border-color: var(--widget-time-boxes-border, rgba(0, 0, 0, 0.08));
}
.widget-time-main--custom.widget-time-main--labels-below.widget-time--boxes .widget-time-numbers-row:not(.widget-time-numbers-row--flip-cells) {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--widget-gap-sm);
  padding: var(--widget-pad);
  background: var(--widget-time-boxes-row-bg, var(--widget-time-boxes-bg, transparent));
  border-radius: 10px;
  border: 1px solid var(--widget-time-boxes-row-border, rgba(255, 255, 255, 0.1));
  flex-wrap: nowrap;
  box-sizing: border-box;
}
[data-theme="light"] .widget-time-main--custom.widget-time-main--labels-below.widget-time--boxes .widget-time-numbers-row:not(.widget-time-numbers-row--flip-cells) {
  background: var(--widget-time-boxes-row-bg, var(--widget-time-boxes-bg, transparent));
  border-color: var(--widget-time-boxes-row-border, rgba(0, 0, 0, 0.07));
}
.widget-time-main--custom.widget-time-main--labels-below.widget-time--boxes .widget-time-numbers-row:not(.widget-time-numbers-row--flip-cells) .widget-time-sep {
  opacity: 0.85;
  flex-shrink: 0;
}

/* Квадраты как у даты: отдельные стеклянные плитки + подписи снизу */
.widget-time-main--custom.widget-time-main--labels-below.widget-time--boxes .widget-time-numbers-row--flip-cells {
  --widget-time-flip-size: var(--widget-dt-flip-tile-size);
  --widget-time-flip-radius: var(--widget-dt-flip-tile-radius);
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: center;
  gap: var(--widget-dt-flip-row-gap);
  padding: var(--widget-dt-flip-row-pad-inline);
  background: transparent;
  border: none;
  box-shadow: none;
  width: 100%;
  box-sizing: border-box;
}

/* Inline + квадраты: нет обёртки flip-ряда — те же токены и зазор, что у .widget-time-numbers-row--flip-cells */
.widget-time-main--custom.widget-time-main--inline.widget-time-main--row.widget-time--boxes {
  --widget-time-flip-size: var(--widget-dt-flip-tile-size);
  --widget-time-flip-radius: var(--widget-dt-flip-tile-radius);
  gap: var(--widget-dt-flip-row-gap);
  align-items: flex-start;
}

.widget-time-flip-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: var(--widget-dt-flip-cell-gap);
  min-width: 0;
  flex: 0 0 auto;
}

.widget-time-numbers-row--flip-cells .widget-time-label-part {
  font-size: var(--widget-dt-flip-caption-fs);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 600;
  text-align: center;
  line-height: 1.25;
  max-width: 12em;
  color: rgba(147, 197, 253, 0.82);
}

[data-theme='light'] .widget-time-numbers-row--flip-cells .widget-time-label-part {
  color: rgba(30, 64, 175, 0.78);
}

.widget-time-main--custom.widget-time--boxes .widget-time-numbers-row--flip-cells .widget-time-pair,
.widget-time-main--custom.widget-time-main--inline.widget-time-main--row.widget-time--boxes .widget-time-pair {
  display: flex;
  align-items: center;
  justify-content: center;
}

.widget-time-main--custom.widget-time--boxes .widget-time-numbers-row--flip-cells .widget-time-num--box,
.widget-time-main--custom.widget-time-main--inline.widget-time-main--row.widget-time--boxes .widget-time-num--box {
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  width: var(--widget-time-flip-size);
  height: var(--widget-time-flip-size);
  min-width: var(--widget-time-flip-size);
  min-height: var(--widget-time-flip-size);
  max-width: var(--widget-time-flip-size);
  max-height: var(--widget-time-flip-size);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.12em;
  aspect-ratio: 1;
  border-radius: var(--widget-time-flip-radius);
  border: 1px solid var(--widget-time-boxes-border, rgba(255, 255, 255, 0.12));
  background: var(--widget-time-boxes-bg, transparent);
  font-family: var(--widget-font-family, 'Barlow Condensed', var(--font-outfit, system-ui), sans-serif);
  font-weight: 700;
  font-size: var(--widget-dt-flip-digit-fs);
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--color-text, #f8fafc);
  overflow: hidden;
  text-align: center;
}

.widget-time-main--custom.widget-time--boxes .widget-time-numbers-row--flip-cells .widget-time-num--box.widget-time-num--ms,
.widget-time-main--custom.widget-time-main--inline.widget-time-main--row.widget-time--boxes .widget-time-num--box.widget-time-num--ms {
  font-size: var(--widget-dt-flip-digit-fs-ms);
  letter-spacing: 0.02em;
}

.widget-time-main--custom.widget-time--boxes .widget-time-numbers-row--flip-cells .widget-time-num--box::before,
.widget-time-main--custom.widget-time-main--inline.widget-time-main--row.widget-time--boxes .widget-time-num--box::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 50%;
  border-radius: var(--widget-time-flip-radius) var(--widget-time-flip-radius) 0 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
  z-index: 0;
}

.widget-time-main--custom.widget-time--boxes .widget-time-numbers-row--flip-cells .widget-time-num--box::after,
.widget-time-main--custom.widget-time-main--inline.widget-time-main--row.widget-time--boxes .widget-time-num--box::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  margin-top: -0.5px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.22) 20%,
    rgba(255, 255, 255, 0.28) 50%,
    rgba(255, 255, 255, 0.22) 80%,
    rgba(255, 255, 255, 0) 100%
  );
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06);
  pointer-events: none;
  z-index: 1;
}

[data-theme='light'] .widget-time-main--custom.widget-time--boxes .widget-time-numbers-row--flip-cells .widget-time-num--box,
[data-theme='light'] .widget-time-main--custom.widget-time-main--inline.widget-time-main--row.widget-time--boxes .widget-time-num--box {
  border: 1px solid var(--widget-time-boxes-border, rgba(0, 0, 0, 0.08));
  background: var(--widget-time-boxes-bg, transparent);
  color: var(--color-text, #0f172a);
}

[data-theme='light'] .widget-time-main--custom.widget-time--boxes .widget-time-numbers-row--flip-cells .widget-time-num--box::before,
[data-theme='light'] .widget-time-main--custom.widget-time-main--inline.widget-time-main--row.widget-time--boxes .widget-time-num--box::before {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0) 92%);
}

[data-theme='light'] .widget-time-main--custom.widget-time--boxes .widget-time-numbers-row--flip-cells .widget-time-num--box::after,
[data-theme='light'] .widget-time-main--custom.widget-time-main--inline.widget-time-main--row.widget-time--boxes .widget-time-num--box::after {
  background: linear-gradient(
    90deg,
    rgba(15, 23, 42, 0) 0%,
    rgba(15, 23, 42, 0.1) 25%,
    rgba(15, 23, 42, 0.14) 50%,
    rgba(15, 23, 42, 0.1) 75%,
    rgba(15, 23, 42, 0) 100%
  );
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* Двоеточие между flip-плитками: без отдельного блока; в полосе высоты плитки, по центру с цифрами */
.widget-time-main--custom.widget-time--boxes .widget-time-sep--flip {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  align-self: flex-start;
  border: none;
  background: none;
  padding: 0 0.06em;
  margin: 0;
  font-family: var(--widget-font-family, 'Barlow Condensed', var(--font-outfit, system-ui), sans-serif);
  font-weight: 700;
  font-size: var(--widget-dt-flip-digit-fs);
  line-height: 1;
  letter-spacing: 0;
  color: var(--color-text, #f8fafc);
  opacity: 0.9;
  transform: none;
  user-select: none;
}

.widget-time-main--custom.widget-time--boxes .widget-time-numbers-row--flip-cells .widget-time-sep--flip,
.widget-time-main--custom.widget-time-main--inline.widget-time-main--row.widget-time--boxes .widget-time-sep--flip {
  height: var(--widget-time-flip-size);
  min-height: var(--widget-time-flip-size);
  width: auto;
  min-width: 0;
  max-width: none;
}

.widget-time-main--custom.widget-time--boxes .widget-time-numbers-row--flip-cells .widget-time-sep--flip.widget-time-sep--ms,
.widget-time-main--custom.widget-time-main--inline.widget-time-main--row.widget-time--boxes .widget-time-sep--flip.widget-time-sep--ms {
  font-size: var(--widget-dt-flip-digit-fs-ms);
}

[data-theme='light'] .widget-time-main--custom.widget-time--boxes .widget-time-sep--flip {
  color: var(--color-text, #0f172a);
}

.widget-time-main--custom .widget-time-label-part { font-size: calc(0.4em * var(--widget-time-label-scale, 1)); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); line-height: 1.35; }
.widget-time-main--custom.widget-time-main--labels-below .widget-time-labels-row .widget-time-label-part { font-size: calc(0.46em * var(--widget-time-label-scale, 1)); opacity: 0.92; color: var(--color-text-muted); }
.widget-time-main--custom .widget-time-pair--stack .widget-time-label-part { font-size: calc(0.34em * var(--widget-time-label-scale, 1)); letter-spacing: 0.07em; line-height: 1.15; font-weight: 600; }
.widget-time-main--custom.widget-time-main--labels-below .widget-time-pair--stack .widget-time-label-part { font-size: calc(0.32em * var(--widget-time-label-scale, 1)); }
.widget-time--label-small .widget-time-main--custom .widget-time-pair--stack .widget-time-label-part { font-size: calc(0.26em * var(--widget-time-label-scale, 1)); font-weight: 600; }
.widget-time-main--custom.widget-time-main--inline.widget-time-main--row .widget-time-pair--stack + .widget-time-sep:not(.widget-time-sep--ms) {
  align-self: flex-start;
  margin-top: 0.18em;
}
.widget-time-main--custom.widget-time-main--labels-below .widget-time-numbers-row:not(.widget-time-numbers-row--flip-cells) {
  align-items: flex-start;
}
.widget-time-main--custom.widget-time-main--labels-below
  .widget-time-numbers-row:not(.widget-time-numbers-row--flip-cells)
  > .widget-time-sep:not(.widget-time-sep--ms) {
  align-self: flex-start;
  margin-top: 0.14em;
  transform: translateY(0);
}
.widget-time--label-small .widget-time-label { font-size: 0.42em; }
.widget-time--label-small .widget-time-main--custom .widget-time-label-part { font-size: 0.44em; }
.widget-time--label-small .widget-time-main--custom.widget-time-main--labels-below .widget-time-labels-row .widget-time-label-part { font-size: 0.44em; }
.widget-time--label-small .widget-time-main--plaque .widget-time-status-label { font-size: 0.44em; }

.widget-time-main--plaque { flex-direction: column; gap: var(--widget-gap); align-items: center; text-align: center; }
/* Плашка времени: тот же «стеклянный» язык, что и у flip-плиток даты */
.widget-time-plaque-box {
  --widget-time-plaque-radius: var(--widget-dt-plaque-radius);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  box-sizing: border-box;
  padding: var(--widget-dt-plaque-pad);
  border-radius: var(--widget-time-plaque-radius);
  border: 1px solid rgba(255, 255, 255, 0.22);
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.1) 0%,
      rgba(255, 255, 255, 0.035) 48%,
      rgba(255, 255, 255, 0.025) 52%,
      rgba(255, 255, 255, 0.06) 100%
    ),
    var(--widget-time-plaque-bg, rgba(255, 255, 255, 0.04));
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 4px 18px rgba(0, 0, 0, 0.06);
}
.widget-time-plaque-box::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 50%;
  border-radius: var(--widget-time-plaque-radius) var(--widget-time-plaque-radius) 0 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
  z-index: 0;
}
.widget-time-plaque-box::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  margin-top: -0.5px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.22) 20%,
    rgba(255, 255, 255, 0.28) 50%,
    rgba(255, 255, 255, 0.22) 80%,
    rgba(255, 255, 255, 0) 100%
  );
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06);
  pointer-events: none;
  z-index: 1;
}
[data-theme='light'] .widget-time-plaque-box {
  border-color: rgba(255, 255, 255, 0.5);
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.42) 0%,
      rgba(255, 255, 255, 0.18) 48%,
      rgba(255, 255, 255, 0.14) 52%,
      rgba(255, 255, 255, 0.28) 100%
    ),
    var(--widget-time-plaque-bg, rgba(255, 255, 255, 0.35));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    0 3px 12px rgba(15, 23, 42, 0.05);
}
[data-theme='light'] .widget-time-plaque-box::before {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0) 92%);
}
[data-theme='light'] .widget-time-plaque-box::after {
  background: linear-gradient(
    90deg,
    rgba(15, 23, 42, 0) 0%,
    rgba(15, 23, 42, 0.1) 25%,
    rgba(15, 23, 42, 0.14) 50%,
    rgba(15, 23, 42, 0.1) 75%,
    rgba(15, 23, 42, 0) 100%
  );
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
.widget-time-main--plaque .widget-time-plaque-box .widget-time-numbers-row {
  margin: 0;
  position: relative;
  z-index: 2;
}
.widget-time-main--plaque .widget-time-status-label { font-size: calc(0.58em * var(--widget-time-label-scale, 1) * var(--widget-time-screen-label-base, 1)); opacity: 0.92; color: var(--color-text-muted); margin-top: 0.15em; }
.widget-time-main--plaque-expand-wide .widget-time-plaque-box { width: 85%; margin-left: auto; margin-right: auto; box-sizing: border-box; }
.widget-time-main--plaque-expand-full .widget-time-plaque-box { width: 100%; box-sizing: border-box; }
.widget-time-main--plaque-expand-wide { width: 100%; }
.widget-time-main--plaque-expand-full { width: 100%; }

.widget-time--hours .widget-time-inner { padding: var(--widget-pad); }
.widget-time--hours .widget-time-value { font-size: calc(1.25em * var(--widget-time-screen-base, 1)); }
.widget-time--hours .widget-time-icon { width: calc(1.15em * var(--widget-time-screen-base, 1)); height: calc(1.15em * var(--widget-time-screen-base, 1)); min-width: calc(1.15em * var(--widget-time-screen-base, 1)); min-height: calc(1.15em * var(--widget-time-screen-base, 1)); aspect-ratio: 1; }

.widget-time--hm .widget-time-value { font-size: calc(1.05em * var(--widget-time-screen-base, 1)); }

.widget-time--hms .widget-time-inner { gap: var(--widget-gap); }
.widget-time--hms .widget-time-value { font-size: calc(0.98em * var(--widget-time-screen-base, 1)); }
.widget-time--hms .widget-time-label { font-size: calc(0.48em * var(--widget-time-screen-label-base, 1)); opacity: 0.9; }

/* Одно значение: и в ряду (альбом), и в столбике (портрет) зазор между ЧЧ/ММ/СС идёт по главной оси flex */
.widget-time-main--custom.widget-time--no-sep .widget-time-numbers-row {
  gap: var(--widget-time-parts-gap, 0px);
}
.widget-time-main--custom.widget-time--no-sep.widget-time-main--row {
  column-gap: var(--widget-time-parts-gap, 0px);
}

.widget-time-main--custom.widget-time-main--inline.widget-time-main--row.widget-time--boxes.widget-time--no-sep {
  gap: var(--widget-time-parts-gap, 0px);
}
.widget-time-date-line { font-size: calc(0.28em * var(--widget-time-date-scale, 1) * var(--widget-time-screen-base, 1)); font-weight: 600; color: var(--color-text-muted); text-align: center; line-height: 1.3; max-width: 100%; margin-top: var(--widget-time-date-mt, 0.15em); }

.widget-time-inner[data-time-text-custom="1"] .widget-time .widget-time-value,
.widget-time-inner[data-time-text-custom="1"] .widget-time-main--custom .widget-time-num { color: var(--widget-time-text); }
.widget-time-inner[data-time-text-custom="1"] .widget-time-main--custom .widget-time-sep:not(.widget-time-sep--flip) {
  color: var(--widget-time-text);
  opacity: 0.78;
}
.widget-time-inner[data-time-text-custom="1"] .widget-time-main--custom.widget-time--boxes .widget-time-sep--flip {
  color: var(--widget-time-text);
  opacity: 0.9;
}
.widget-time-inner[data-time-text-custom="1"] .widget-time-main--custom .widget-time-sep--ms:not(.widget-time-sep--flip) {
  color: var(--widget-time-text);
  opacity: 0.68;
}
.widget-time-inner[data-time-text-custom="1"] .widget-time-main--custom .widget-time-num--ms { color: var(--widget-time-text); opacity: 0.92; }
.widget-time-inner[data-time-text-custom="1"] .widget-time-main--custom .widget-time-label-part,
.widget-time-inner[data-time-text-custom="1"] .widget-time-main--plaque .widget-time-status-label { color: var(--widget-time-text); opacity: 0.82; }
.widget-time-inner[data-time-text-custom="1"] .widget-time-label { color: var(--widget-time-text); opacity: 0.88; }
.widget-time-inner[data-time-text-custom="1"] .widget-time-date-line { color: var(--widget-time-text); opacity: 0.85; }

.widget-time--digit-tech .widget-time-num--tech,
.widget-time--digit-tech .widget-time-num--ms,
.widget-time-ring-cell--tech .widget-time-num { font-family: 'Orbitron', Outfit, sans-serif; letter-spacing: 0.1em; }

/* Шрифт цифр (настройка виджета); перебивает умолчание и «текно», если задано */
.widget-time-inner[data-time-digit-font="orbitron"] .widget-time-main--custom .widget-time-num,
.widget-time-inner[data-time-digit-font="orbitron"] .widget-time-ring-cell .widget-time-num {
  font-family: 'Orbitron', Outfit, sans-serif;
}
.widget-time-inner[data-time-digit-font="jetbrains_mono"] .widget-time-main--custom .widget-time-num,
.widget-time-inner[data-time-digit-font="jetbrains_mono"] .widget-time-ring-cell .widget-time-num {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: 0.02em;
}
.widget-time-inner[data-time-digit-font="roboto"] .widget-time-main--custom .widget-time-num,
.widget-time-inner[data-time-digit-font="roboto"] .widget-time-ring-cell .widget-time-num {
  font-family: Roboto, Outfit, sans-serif;
  letter-spacing: 0.03em;
}
.widget-time-inner[data-time-digit-font="barlow"] .widget-time-main--custom .widget-time-num,
.widget-time-inner[data-time-digit-font="barlow"] .widget-time-ring-cell .widget-time-num {
  font-family: 'Barlow Condensed', Outfit, sans-serif;
  letter-spacing: 0.04em;
}
.widget-time-inner[data-time-digit-font="rajdhani"] .widget-time-main--custom .widget-time-num,
.widget-time-inner[data-time-digit-font="rajdhani"] .widget-time-ring-cell .widget-time-num {
  font-family: Rajdhani, Outfit, sans-serif;
  letter-spacing: 0.05em;
}
.widget-time-inner[data-time-digit-font="share_tech"] .widget-time-main--custom .widget-time-num,
.widget-time-inner[data-time-digit-font="share_tech"] .widget-time-ring-cell .widget-time-num {
  font-family: 'Share Tech Mono', ui-monospace, monospace;
  letter-spacing: 0.03em;
}
.widget-time-ring-cell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: calc(2.45em * var(--widget-time-ring-scale, 1) * var(--widget-time-screen-base, 1));
  height: calc(2.45em * var(--widget-time-ring-scale, 1) * var(--widget-time-screen-base, 1));
  min-width: calc(2.45em * var(--widget-time-ring-scale, 1) * var(--widget-time-screen-base, 1));
  min-height: calc(2.45em * var(--widget-time-ring-scale, 1) * var(--widget-time-screen-base, 1));
  max-width: calc(2.45em * var(--widget-time-ring-scale, 1) * var(--widget-time-screen-base, 1));
  max-height: calc(2.45em * var(--widget-time-ring-scale, 1) * var(--widget-time-screen-base, 1));
  flex-shrink: 0;
  align-self: center;
  aspect-ratio: 1;
  vertical-align: middle;
}
.widget-time-ring-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.widget-time-ring-core { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; line-height: 1; padding: 0.12em; }
.widget-time-ring-tick { stroke: var(--color-text-muted); stroke-opacity: 0.2; stroke-width: 1.75; }
.widget-time-ring-tick--lit { stroke: var(--widget-time-ring-lit, var(--color-primary, #38bdf8)); stroke-opacity: 1; }
.widget-time-ring-cell--tech .widget-time-ring-tick--lit { stroke: var(--widget-time-ring-lit, #22d3ee); filter: drop-shadow(0 0 1.5px rgba(34, 211, 238, 0.45)); }
.widget-time-inner[data-time-ring-lit-custom="1"] .widget-time-ring-cell--tech .widget-time-ring-tick--lit { filter: drop-shadow(0 0 2px var(--widget-time-ring-lit)); }
.widget-time--rings .widget-time-numbers-row {
  gap: var(--widget-time-parts-gap, 0px);
  align-items: center;
}

/* Аналоговые часы (опция timeAnalogClock) */
.widget-time-main--analog {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--widget-gap-sm);
}
.widget-time-analog-wrap {
  width: min(calc(4.15em * var(--widget-time-analog-scale, 1) * var(--widget-time-screen-base, 1)), calc(78% * var(--widget-time-analog-scale, 1) * var(--widget-time-screen-base, 1)));
  max-width: 100%;
  aspect-ratio: 1;
  flex-shrink: 0;
}
.widget-time-analog-svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
/* Непрерывный ход секунды: rAF + дробные секунды — подсказка композитору */
.widget-time-inner[data-time-analog-sweep="1"] .widget-time-analog-hand-g {
  will-change: transform;
}
.widget-time-analog-face {
  fill: none;
  stroke: var(--color-text-muted);
  stroke-opacity: 0.38;
  stroke-width: 1.5;
}
.widget-time-analog-tick {
  stroke: var(--color-text-muted);
  stroke-opacity: 0.3;
  stroke-width: 1.15;
}
.widget-time-analog-tick--major {
  stroke-opacity: 0.48;
  stroke-width: 1.55;
}
.widget-time-analog-hand {
  stroke: var(--color-text);
  fill: none;
}
.widget-time-analog-hand--hour {
  stroke-width: var(--widget-time-analog-sw-hour);
}
.widget-time-analog-hand--minute {
  stroke-width: var(--widget-time-analog-sw-minute);
}
.widget-time-analog-hand--second {
  stroke-width: var(--widget-time-analog-sw-second);
  stroke: var(--color-primary, #38bdf8);
  stroke-opacity: 0.95;
}
.widget-time--glow .widget-time-inner[data-time-glow="1"] .widget-time-analog-hand--hour,
.widget-time--glow .widget-time-inner[data-time-glow="1"] .widget-time-analog-hand--minute {
  filter: drop-shadow(0 0 2px currentColor) drop-shadow(0 0 9px currentColor);
}
.widget-time--glow .widget-time-inner[data-time-glow="1"] .widget-time-analog-hand--second {
  filter: drop-shadow(0 0 3px currentColor) drop-shadow(0 0 14px currentColor);
}
.widget-time--glow .widget-time-inner[data-time-glow="1"] .widget-time-ring-tick--lit {
  filter: drop-shadow(0 0 2px var(--widget-time-ring-lit, var(--color-primary, #38bdf8)))
    drop-shadow(0 0 8px var(--widget-time-ring-lit, var(--color-primary, #38bdf8)));
}

/* Цифровой режим: свечение цифр и разделителей (аналог и кольца — выше) */
.widget-time--glow .widget-time-inner[data-time-glow="1"]:not([data-time-analog="1"]) .widget-time-main--custom .widget-time-num {
  text-shadow: 0 0 1px currentColor, 0 0 10px color-mix(in srgb, currentColor 40%, transparent), 0 0 22px color-mix(in srgb, var(--color-primary, #38bdf8) 35%, transparent);
}
.widget-time--glow
  .widget-time-inner[data-time-glow="1"]:not([data-time-analog="1"])
  .widget-time-main--custom
  .widget-time-sep:not(.widget-time-sep--ms):not(.widget-time-sep--flip) {
  text-shadow: 0 0 6px color-mix(in srgb, currentColor 50%, transparent);
  opacity: 0.92;
}
.widget-time--glow
  .widget-time-inner[data-time-glow="1"]:not([data-time-analog="1"])
  .widget-time-main--custom.widget-time--boxes
  .widget-time-sep--flip {
  text-shadow: 0 0 6px color-mix(in srgb, currentColor 50%, transparent);
  opacity: 0.92;
}
.widget-time--glow .widget-time-inner[data-time-glow="1"]:not([data-time-analog="1"]) .widget-time-main--custom .widget-time-num--box {
  box-shadow:
    0 0 14px color-mix(in srgb, var(--color-primary, #38bdf8) 24%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 4px 18px rgba(0, 0, 0, 0.07);
}
.widget-time--glow .widget-time-inner[data-time-glow="1"]:not([data-time-analog="1"]) .widget-time-plaque-box {
  box-shadow:
    0 0 22px color-mix(in srgb, var(--color-primary, #38bdf8) 20%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 4px 18px rgba(0, 0, 0, 0.07);
}
.widget-time--glow
  .widget-time-inner[data-time-glow="1"]:not([data-time-analog="1"])
  .widget-time-main--labels-below.widget-time--boxes
  .widget-time-numbers-row:not(.widget-time-numbers-row--flip-cells) {
  box-shadow: 0 0 14px color-mix(in srgb, var(--color-primary, #38bdf8) 12%, transparent);
}
.widget-time--glow .widget-time-inner[data-time-glow="1"][data-time-text-custom="1"]:not([data-time-analog="1"]) .widget-time-main--custom .widget-time-num {
  text-shadow: 0 0 1px var(--widget-time-text), 0 0 12px color-mix(in srgb, var(--widget-time-text) 45%, transparent);
}
.widget-time-analog-cap {
  fill: var(--color-text);
  stroke: none;
}
.widget-time-inner[data-time-mode="hours"] .widget-time-analog-hand-g--minute,
.widget-time-inner[data-time-mode="hours"] .widget-time-analog-hand-g--second {
  visibility: hidden;
}
.widget-time-inner[data-time-mode="hm"] .widget-time-analog-hand-g--second {
  visibility: hidden;
}
.widget-time-inner[data-time-text-custom="1"] .widget-time-analog-face {
  stroke: var(--widget-time-text);
  stroke-opacity: 0.42;
}
.widget-time-inner[data-time-text-custom="1"] .widget-time-analog-tick,
.widget-time-inner[data-time-text-custom="1"] .widget-time-analog-tick--major {
  stroke: var(--widget-time-text);
}
.widget-time-inner[data-time-text-custom="1"] .widget-time-analog-tick {
  stroke-opacity: 0.32;
}
.widget-time-inner[data-time-text-custom="1"] .widget-time-analog-tick--major {
  stroke-opacity: 0.5;
}
.widget-time-inner[data-time-text-custom="1"] .widget-time-analog-hand:not(.widget-time-analog-hand--second) {
  stroke: var(--widget-time-text);
}
.widget-time-inner[data-time-text-custom="1"] .widget-time-analog-hand--second {
  stroke: var(--color-primary, #38bdf8);
}
.widget-time-inner[data-time-text-custom="1"] .widget-time-analog-cap {
  fill: var(--widget-time-text);
}
.widget-time-analog-numeral {
  font-family: Outfit, ui-sans-serif, system-ui, sans-serif;
  font-size: 7.25px;
  font-weight: 700;
  fill: var(--color-text-muted);
  opacity: 0.88;
  pointer-events: none;
}
.widget-time-inner[data-time-text-custom="1"] .widget-time-analog-numeral {
  fill: var(--widget-time-text);
  opacity: 0.9;
}
.widget-time-inner[data-time-analog-palette-custom="1"] .widget-time-analog-face {
  stroke: var(--widget-time-analog-palette);
  stroke-opacity: 0.45;
}
.widget-time-inner[data-time-analog-palette-custom="1"] .widget-time-analog-tick,
.widget-time-inner[data-time-analog-palette-custom="1"] .widget-time-analog-tick--major {
  stroke: var(--widget-time-analog-palette);
}
.widget-time-inner[data-time-analog-palette-custom="1"] .widget-time-analog-tick {
  stroke-opacity: 0.35;
}
.widget-time-inner[data-time-analog-palette-custom="1"] .widget-time-analog-tick--major {
  stroke-opacity: 0.52;
}
.widget-time-inner[data-time-analog-palette-custom="1"] .widget-time-analog-hand {
  stroke: var(--widget-time-analog-palette);
}
.widget-time-inner[data-time-analog-palette-custom="1"] .widget-time-analog-hand--second {
  stroke: var(--widget-time-analog-palette);
  stroke-opacity: 0.88;
}
.widget-time-inner[data-time-analog-palette-custom="1"] .widget-time-analog-cap {
  fill: var(--widget-time-analog-palette);
}
.widget-time-inner[data-time-analog-palette-custom="1"] .widget-time-analog-numeral {
  fill: var(--widget-time-analog-palette);
  opacity: 0.92;
}
.widget-time--analog.widget-time--hours .widget-time-analog-wrap {
  width: min(calc(3.55em * var(--widget-time-analog-scale, 1) * var(--widget-time-screen-base, 1)), calc(72% * var(--widget-time-analog-scale, 1) * var(--widget-time-screen-base, 1)));
}

/* Портрет: подписи и разделители при своём цвете текста */
.player-wrap[data-screen-orientation="portrait"] .widget-time-inner[data-time-text-custom="1"] .widget-time-main--custom .widget-time-label-part {
  color: var(--widget-time-text);
  opacity: 0.82;
}
.player-wrap[data-screen-orientation="portrait"] .widget-time-inner[data-time-text-custom="1"] .widget-time-main--custom .widget-time-sep {
  color: var(--widget-time-text);
  opacity: 0.72;
}

/* Кольца в столбике (киоск): не растягивать по ширине ряда */
.player-wrap[data-screen-orientation="portrait"] .widget-time--rings .widget-time-numbers-row {
  align-items: center;
}
.player-wrap[data-screen-orientation="portrait"] .widget-time-ring-cell {
  align-self: center;
}

/* Не киоск-портрет: ползунок «Размер цифр» на базе наследуемого размера ячейки */
.player-wrap:not([data-screen-orientation="portrait"]) .widget-time-inner:not([data-time-analog="1"]) .widget-time-main--custom:not(.widget-time-main--analog) {
  font-size: calc(1em * var(--widget-time-digital-scale, 1) * var(--widget-time-screen-base, 1));
}