/* ================================================================
   dt-chronograph.css — Dev Tools Shared CSS
   Extracted from alerts-style-adc.css
   DO NOT modify manually — source of truth is alerts-style-adc.css
   ================================================================ */


/* ╔══════════════════════════════════════════════════════════════════╗
   ║  HEADER POLISH v3.6 — годинник, side-btns, refresh, логотип     ║
   ║  1. Clock → симетрія з back-btn (над правою трубою)             ║
   ║  2. Side-btns → колонка збоку від годинника (не зверху/знизу)   ║
   ║  3. Refresh + interval → уніфікований control strip             ║
   ║  4. Crest → steampunk-пластина у стилі back-btn                 ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* ─── 1. CLOCK PANEL — фіксований над правою трубою ─── */
.dev-tools-scope.al-page .al-clock-panel {
  position: absolute !important;
  right: 20px !important;
  top: 10px !important;
  display: grid !important;
  grid-template-columns: auto auto !important;
  grid-template-rows: 1fr 1fr !important;
  column-gap: 6px !important;
  row-gap: 4px !important;
  align-items: center !important;
  justify-items: center !important;
  z-index: 50 !important;
}

/* ─── 2. SIDE-BTNS ─── */
.dev-tools-scope.al-page .al-clock-panel .clock-unit {
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;
}
.dev-tools-scope.al-page .al-clock-panel .al-clock-sidebtn--top {
  grid-column: 2 !important;
  grid-row: 1 !important;
}
.dev-tools-scope.al-page .al-clock-panel .al-clock-sidebtn--bot {
  grid-column: 2 !important;
  grid-row: 2 !important;
}
.dev-tools-scope.al-page .al-clock-sidebtn {
  width: 30px !important;
  height: 30px !important;
}
.dev-tools-scope.al-page .al-clock-sidebtn .material-symbols-outlined {
  font-size: 16px !important;
}

/* ─── 3. REFRESH-COMBO ─── */
.dev-tools-scope.al-page .al-refresh-combo {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  min-width: 140px !important;
  background: linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg-base) 100%) !important;
  border: 1px solid var(--border-dim) !important;
  border-top-color: rgba(197, 139, 58, 0.25) !important;
  border-radius: 3px !important;
  padding: 3px !important;
  box-shadow:
    inset 0 1px 0 rgba(232, 219, 178, 0.05),
    inset 0 -1px 0 rgba(0, 0, 0, 0.5),
    0 2px 4px rgba(0, 0, 0, 0.4) !important;
  overflow: hidden !important;
}
.dev-tools-scope.al-page .al-refresh-combo .al-refresh-info {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 3px 8px 4px !important;
  background: rgba(0, 0, 0, 0.25) !important;
  border: none !important;
  border-bottom: 1px solid rgba(92, 68, 48, 0.35) !important;
  font-family: var(--font-dt-digits, 'IBM Plex Mono', monospace) !important;
  font-size: 10px !important;
  color: var(--al-text-secondary) !important;
}
.dev-tools-scope.al-page .al-refresh-combo .al-refresh-info .al-lock-icon {
  font-size: 13px !important;
  color: var(--accent-brass) !important;
  opacity: 0.85 !important;
}
.dev-tools-scope.al-page .al-refresh-combo .al-refresh-info .al-interval-select {
  background: transparent !important;
  border: none !important;
  color: var(--accent-brass) !important;
  font-family: var(--font-dt-digits, 'IBM Plex Mono', monospace) !important;
  font-size: 10px !important;
  padding: 0 2px !important;
  height: auto !important;
  outline: none !important;
  cursor: pointer !important;
  box-shadow: none !important;
}
.dev-tools-scope.al-page .al-refresh-combo .al-refresh-info .al-countdown {
  color: var(--accent-brass) !important;
  opacity: 0.7 !important;
  margin-left: auto !important;
  font-size: 10px !important;
  font-weight: 500 !important;
}
.dev-tools-scope.al-page .al-refresh-combo .al-refresh-btn {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  height: 30px !important;
  padding: 0 12px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  color: var(--text-body) !important;
  font-family: var(--font-dt-title, 'Oswald', sans-serif) !important; /* FIX cc-722 */
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.10em !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transition: background 0.15s ease, color 0.15s ease !important;
}
.dev-tools-scope.al-page .al-refresh-combo .al-refresh-btn:hover {
  background: rgba(197, 139, 58, 0.08) !important;
  color: var(--accent-brass) !important;
}
.dev-tools-scope.al-page .al-refresh-combo .al-refresh-btn:active {
  background: rgba(0, 0, 0, 0.3) !important;
}
.dev-tools-scope.al-page .al-refresh-combo .al-refresh-btn .material-symbols-outlined {
  font-size: 16px !important;
}


/* ╔══════════════════════════════════════════════════════════════════╗
   ║  HEADER UNIFIED v1.0                                             ║
   ║  ⚠️ Специфічність: body.dev-tools-scope.al-page                  ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* §1. CLOCK PANEL — Fixed-прив'язка */
body.dev-tools-scope.al-page .al-clock-panel {
  position: fixed !important;
  top: calc(var(--header-h, 96px) / 2) !important;
  transform: translateY(-50%) !important;
  right: max(20px, calc((100vw - var(--max-width, 1400px)) / 2 + 20px)) !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 100 !important;
  pointer-events: auto !important;
  display: grid !important;
  grid-template-columns: auto auto !important;
  grid-template-rows: auto !important;
  column-gap: 8px !important;
  row-gap: 0 !important;
  align-items: center !important;
}
body.dev-tools-scope.al-page .al-clock-panel > .al-clock-sidecol {
  grid-column: 1 / 2 !important;
  grid-row: 1 / 2 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 0 !important;
  pointer-events: auto !important;
}
body.dev-tools-scope.al-page .al-clock-panel > .clock-unit {
  grid-column: 2 / 3 !important;
  grid-row: 1 / 2 !important;
}

/* §2. CLOCK-UNIT */
body.dev-tools-scope.al-page .al-clock-panel > .clock-unit {
  width: 164px !important;
  padding: 5px 7px !important;
  position: relative !important;
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0px, transparent 3px,
      rgba(0, 0, 0, 0.08) 3px, rgba(0, 0, 0, 0.08) 4px
    ),
    linear-gradient(180deg,
      #3a2a18 0%,
      #2a1e10 30%,
      #1e1408 65%,
      #2a1e10 100%
    ) !important;
  border: 1px solid #1a0e06 !important;
  border-top-color: rgba(216, 179, 112, 0.50) !important;
  border-radius: 3px !important;
  box-shadow:
    inset 0 1px 0 rgba(232, 200, 140, 0.28),
    inset 0 -1px 0 rgba(0, 0, 0, 0.65),
    inset 0 0 16px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(92, 68, 48, 0.5),
    0 3px 8px rgba(0, 0, 0, 0.6) !important;
}
body.dev-tools-scope.al-page .clock-unit .body-screw {
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle at 32% 28%, #e8c880, #8c6b46 55%, #2a1810) !important;
  border: 0.5px solid #1a0e06 !important;
  box-shadow:
    inset 0 0.5px 1px rgba(255, 255, 255, 0.25),
    0 1px 2px rgba(0, 0, 0, 0.65) !important;
}
body.dev-tools-scope.al-page .clock-unit .body-screw::after { display: none !important; }
body.dev-tools-scope.al-page .clock-unit .screw-tl { top: 3px !important; left: 3px !important; }
body.dev-tools-scope.al-page .clock-unit .screw-tr { top: 3px !important; right: 3px !important; }
body.dev-tools-scope.al-page .clock-unit .screw-bl { bottom: 3px !important; left: 3px !important; }
body.dev-tools-scope.al-page .clock-unit .screw-br { bottom: 3px !important; right: 3px !important; }

body.dev-tools-scope.al-page .clock-unit .clock-deco-gear {
  position: absolute !important;
  left: 5px !important;
  top: 50% !important;
  width: 10px !important;
  height: 10px !important;
  transform: translateY(-50%) !important;
  color: rgba(197, 139, 58, 0.35) !important;
  animation: clk-deco-gear-spin 28s linear infinite !important;
  pointer-events: none !important;
  z-index: 2 !important;
}
@keyframes clk-deco-gear-spin {
  from { transform: translateY(-50%) rotate(0deg); }
  to   { transform: translateY(-50%) rotate(360deg); }
}

/* Display window */
body.dev-tools-scope.al-page .clock-unit .display-window {
  padding: 3px 4px !important;
  gap: 1px !important;
  justify-content: space-between !important;
  align-items: center !important;
  min-height: 26px !important;
  border: 1px solid #1c1208 !important;
  border-radius: 2px !important;
  margin-bottom: 3px !important;
  background:
    radial-gradient(ellipse 70% 60% at 50% 40%, rgba(197, 139, 58, 0.06) 0%, transparent 70%),
    linear-gradient(180deg, #030201, #080604 30%, #040301 90%) !important;
  box-shadow:
    inset 0 0 8px rgba(0, 0, 0, 0.90),
    inset 0 0 14px rgba(197, 139, 58, 0.05),
    0 1px 0 rgba(140, 107, 70, 0.30) !important;
}

/* Nixie */
body.dev-tools-scope.al-page .clock-unit .nixie {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  width: auto !important;
  height: 20px !important;
  border: 0.5px solid #242018 !important;
  border-radius: 1.5px !important;
  background:
    radial-gradient(ellipse at 50% 35%, rgba(20, 13, 6, 0.90) 0%, rgba(5, 3, 1, 0.97) 75%) !important;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.90) !important;
}
body.dev-tools-scope.al-page .clock-unit .nixie-digit {
  font-family: var(--font-dt-digits, 'IBM Plex Mono', 'Courier New', monospace) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  color: #d89a3f !important;
  text-shadow:
    0 0 3px rgba(216, 154, 63, 0.85),
    0 0 7px rgba(216, 154, 63, 0.50),
    0 0 2px rgba(255, 230, 180, 0.40) !important;
}
body.dev-tools-scope.al-page .clock-unit .nixie-ghost {
  font-family: var(--font-dt-digits, 'IBM Plex Mono', 'Courier New', monospace) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: rgba(197, 139, 58, 0.10) !important;
  text-shadow: none !important;
}
body.dev-tools-scope.al-page .clock-unit .nixie-colon {
  flex: 0 0 auto !important;
  width: 8px !important;
  gap: 4px !important;
}
body.dev-tools-scope.al-page .clock-unit .colon-dot {
  width: 4px !important;
  height: 4px !important;
  border-radius: 50% !important;
  background: #e6a848 !important;
  box-shadow:
    0 0 4px rgba(230, 168, 72, 1.0),
    0 0 9px rgba(230, 168, 72, 0.65),
    0 0 2px rgba(255, 230, 180, 0.55) !important;
}

/* Date-strip */
body.dev-tools-scope.al-page .clock-unit .data-strip {
  gap: 0 !important;
  align-items: stretch !important;
  padding-left: 16px !important;
}
body.dev-tools-scope.al-page .clock-unit .clock-date-box {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  min-height: 16px !important;
  padding: 1px 7px !important;
  gap: 6px !important;
  display: flex !important;
  align-items: center !important;
  border: 1px solid #1c1208 !important;
  border-radius: 2px !important;
  background:
    radial-gradient(ellipse 80% 70% at 50% 45%, rgba(197, 139, 58, 0.04) 0%, transparent 70%),
    linear-gradient(180deg, #050301 0%, #0c0804 50%, #050301 100%) !important;
  box-shadow:
    inset 0 0 6px rgba(0, 0, 0, 0.90),
    0 1px 0 rgba(140, 107, 70, 0.38) !important;
}
body.dev-tools-scope.al-page .clock-unit .clock-date-label {
  font-family: var(--font-dt-title, 'Cinzel', 'Special Elite', serif) !important; /* 🔧 sys-1045 */
  font-size: 7.5px !important;
  font-weight: 700 !important;
  letter-spacing: 1.8px !important;
  color: rgba(216, 154, 63, 0.72) !important;
  text-transform: uppercase !important;
  flex-shrink: 0 !important;
  text-shadow: 0 0 3px rgba(216, 154, 63, 0.28) !important;
}
body.dev-tools-scope.al-page .clock-unit .clock-date-sep {
  flex: 1 1 auto !important;
  height: 1px !important;
  min-width: 8px !important;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(197, 139, 58, 0.28) 20%,
    rgba(216, 154, 63, 0.50) 50%,
    rgba(197, 139, 58, 0.28) 80%,
    transparent 100%
  ) !important;
  align-self: center !important;
}
body.dev-tools-scope.al-page .clock-unit .data-value {
  font-family: var(--font-dt-digits, 'IBM Plex Mono', 'Courier New', monospace) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #e6a848 !important;
  letter-spacing: 1px !important;
  text-shadow:
    0 0 3px rgba(230, 168, 72, 0.85),
    0 0 7px rgba(230, 168, 72, 0.50) !important;
  flex-shrink: 0 !important;
}

/* §3. SIDECOL-КНОПКИ */
body.dev-tools-scope.al-page .al-clock-panel > .al-clock-sidecol > .al-clock-sidebtn,
body.dev-tools-scope.al-page .al-clock-panel > .al-clock-sidecol > #customAlertToggle,
body.dev-tools-scope.al-page .al-clock-panel > .al-clock-sidecol > #al-notif-toggle {
  position: relative !important;
  width: 30px !important;
  height: 30px !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background:
    linear-gradient(180deg,
      #2a1f14 0%,
      #1a1208 45%,
      #0d0805 100%
    ) !important;
  border: 1px solid #1a0e06 !important;
  border-top-color: rgba(216, 179, 112, 0.45) !important;
  border-radius: 2px !important;
  color: #d89a3f !important;
  box-shadow:
    inset 0 1px 0 rgba(232, 200, 140, 0.22),
    inset 0 -1px 0 rgba(0, 0, 0, 0.70),
    0 0 0 1px rgba(92, 68, 48, 0.45),
    0 2px 5px rgba(0, 0, 0, 0.55) !important;
  cursor: pointer !important;
  transition: background 0.20s ease, border-color 0.20s ease,
              box-shadow 0.20s ease, transform 0.10s ease !important;
  overflow: visible !important;
}
body.dev-tools-scope.al-page .al-clock-panel > .al-clock-sidecol > .al-clock-sidebtn::after,
body.dev-tools-scope.al-page .al-clock-panel > .al-clock-sidecol > #customAlertToggle::after,
body.dev-tools-scope.al-page .al-clock-panel > .al-clock-sidecol > #al-notif-toggle::after {
  content: '' !important;
  position: absolute !important;
  bottom: 2px !important;
  right: 2px !important;
  width: 3px !important;
  height: 3px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle at 35% 30%, #e8c880, #8c6b46 55%, #3a2510) !important;
  box-shadow: 0 0.5px 1px rgba(0, 0, 0, 0.6) !important;
  pointer-events: none !important;
}
body.dev-tools-scope.al-page .al-clock-panel > .al-clock-sidecol > .al-clock-sidebtn:hover,
body.dev-tools-scope.al-page .al-clock-panel > .al-clock-sidecol > #customAlertToggle:hover,
body.dev-tools-scope.al-page .al-clock-panel > .al-clock-sidecol > #al-notif-toggle:hover {
  border-top-color: #e6a848 !important;
  border-color: rgba(197, 139, 58, 0.70) !important;
  background:
    linear-gradient(180deg,
      #3a2a1a 0%,
      #241810 50%,
      #140c08 100%
    ) !important;
  color: #f3e0a8 !important;
  box-shadow:
    inset 0 1px 0 rgba(232, 200, 140, 0.38),
    inset 0 -1px 0 rgba(0, 0, 0, 0.70),
    inset 0 0 10px rgba(197, 139, 58, 0.10),
    0 0 0 1px rgba(230, 168, 72, 0.50),
    0 0 8px rgba(197, 139, 58, 0.22),
    0 2px 5px rgba(0, 0, 0, 0.50) !important;
}
body.dev-tools-scope.al-page .al-clock-panel > .al-clock-sidecol > .al-clock-sidebtn:active,
body.dev-tools-scope.al-page .al-clock-panel > .al-clock-sidecol > #customAlertToggle:active,
body.dev-tools-scope.al-page .al-clock-panel > .al-clock-sidecol > #al-notif-toggle:active {
  transform: translateY(1px) !important;
  box-shadow:
    inset 0 2px 5px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(230, 168, 72, 0.50),
    0 1px 2px rgba(0, 0, 0, 0.40) !important;
}
body.dev-tools-scope.al-page .al-clock-panel > .al-clock-sidecol > .al-clock-sidebtn .material-symbols-outlined,
body.dev-tools-scope.al-page .al-clock-panel > .al-clock-sidecol > #customAlertToggle .material-symbols-outlined,
body.dev-tools-scope.al-page .al-clock-panel > .al-clock-sidecol > #al-notif-toggle .material-symbols-outlined {
  font-size: 17px !important;
  pointer-events: none !important;
}


/* ── CLOCK-UNIT v7: SVG-монолит корпус + HTML overlay ── */

body.dev-tools-scope.al-page .al-clock-panel > .clock-unit {
  position: relative !important;
  width: 207px !important;
  height: 47px !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}
body.dev-tools-scope.al-page .al-clock-svg {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  overflow: visible !important;
  pointer-events: none !important;
  filter: drop-shadow(0 3px 10px rgba(0,0,0,0.65)) !important;
}
body.dev-tools-scope.al-page .clock-overlay {
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100% !important;
  padding: 4px 22px !important;
  box-sizing: border-box !important;
}

/* Фонові шестерні */
.al-clock-bg-gear--L .al-bk-rot-tail {
  animation: bk-tail-spin-idle 55s linear infinite;
}
.al-clock-bg-gear--R .al-bk-rot-tip {
  animation: bk-tip-spin-idle 45s linear infinite;
}

/* МАЯТНИК */
body.dev-tools-scope.al-page .al-clock-pendulum-svg {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
  overflow: visible !important;
  z-index: 4 !important;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.55)) !important;
}
body.dev-tools-scope.al-page .al-clock-pendulum {
  pointer-events: none !important;
}
body.dev-tools-scope.al-page .al-clock-pendulum-swing {
  transform-box: fill-box !important;
  transform-origin: center top !important;
  animation: clk-pendulum-swing 2.6s ease-in-out infinite !important;
}
@keyframes clk-pendulum-swing {
  0%   { transform: rotate(-14deg); }
  50%  { transform: rotate(14deg); }
  100% { transform: rotate(-14deg); }
}

body.dev-tools-scope.al-page .al-clock-lamp .al-sv-lamp-halo {
  animation: clk-lamp-flicker 3.5s ease-in-out infinite;
}
@keyframes clk-lamp-flicker {
  0%, 100% { opacity: 0.55; }
  45%       { opacity: 0.85; }
  55%       { opacity: 0.70; }
  80%       { opacity: 0.90; }
}

body.dev-tools-scope.al-page .clock-unit .body-screw { display: none !important; }
body.dev-tools-scope.al-page .clock-unit .clock-deco-gear { display: none !important; }

/* Display window (overlay variant) */
body.dev-tools-scope.al-page .clock-overlay .display-window {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  width: 100% !important;
  min-height: 22px !important;
  max-height: 26px !important;
  flex: 0 0 auto !important;
  padding: 2px 6px !important;
  border: 1px solid #1c1208 !important;
  border-radius: 2px !important;
  margin: 0 !important;
  background:
    radial-gradient(ellipse 70% 60% at 50% 40%, rgba(197,139,58,0.06) 0%, transparent 70%),
    linear-gradient(180deg, #030201, #080604 30%, #040301 90%) !important;
  box-shadow:
    inset 0 0 8px rgba(0,0,0,0.90),
    inset 0 0 14px rgba(197,139,58,0.05),
    0 1px 0 rgba(140,107,70,0.25) !important;
}

/* CLOCK TOOLTIP */
body.dev-tools-scope.al-page .clock-unit .al-clock-tooltip {
  position: absolute !important;
  top: calc(100% + 3px) !important;
  right: 4px !important;
  left: auto !important;
  bottom: auto !important;
  transform: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 1px 7px !important;
  background: linear-gradient(180deg, #2e2008 0%, #1a1208 50%, #100c06 100%) !important;
  border: 1px solid #3a2208 !important;
  border-top-color: rgba(240, 200, 100, 0.40) !important;
  border-radius: 2px !important;
  box-shadow:
    inset 0 1px 0 rgba(240, 210, 120, 0.10),
    0 0 0 1px rgba(92, 58, 26, 0.32),
    0 1px 3px rgba(0, 0, 0, 0.50) !important;
  font-family: var(--font-dt-status), var(--font-dt-digits, 'IBM Plex Mono', monospace) !important;
  font-size: 6.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  color: #d4a840 !important;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.90), 0 0 3px rgba(197,139,58,0.25) !important;
  white-space: nowrap !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.2s ease !important;
  z-index: 20 !important;
}
body.dev-tools-scope.al-page .clock-unit .al-clock-tooltip::before,
body.dev-tools-scope.al-page .clock-unit .al-clock-tooltip::after {
  content: '' !important;
  position: absolute !important;
  width: 2.5px !important;
  height: 2.5px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle at 35% 30%, #d4a840, #7a4e18) !important;
  border: 0.5px solid #1a0a04 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}
body.dev-tools-scope.al-page .clock-unit .al-clock-tooltip::before { left: 2px !important; }
body.dev-tools-scope.al-page .clock-unit .al-clock-tooltip::after  { right: 2px !important; }
body.dev-tools-scope.al-page .clock-unit .al-clock-tooltip .clock-date-label { opacity: 0.60 !important; }
body.dev-tools-scope.al-page .clock-unit .al-clock-tooltip .clock-date-sep {
  display: inline-block !important;
  width: 3px !important;
  height: 3px !important;
  border-radius: 50% !important;
  background: #7a5a35 !important;
}
body.dev-tools-scope.al-page .clock-unit .al-clock-tooltip .data-value {
  color: #e8c860 !important;
  opacity: 1 !important;
}
body.dev-tools-scope.al-page .clock-unit:hover .al-clock-tooltip,
body.dev-tools-scope.al-page .al-clock-panel:hover .al-clock-tooltip {
  opacity: 1 !important;
}

body.dev-tools-scope.al-page .al-gear-countdown {
  bottom: auto !important;
  top: -16px !important;
  font-size: 10px !important;
}
body.dev-tools-scope.al-page .al-gear-hint-text { display: none !important; }
body.dev-tools-scope.al-page .al-steam-puff { display: none !important; }

/* ─── COLON BLINK (миготіння двокрапки годинника) ─── */
@keyframes clk-colon-blink {
  0%, 49%  { opacity: 1; }
  50%, 100% { opacity: 0.2; }
}
.dev-tools-scope.al-page .clock-unit .colon-blink .colon-dot {
  animation: clk-colon-blink 1s step-end infinite;
}

/* ─── LED PULSE (пульсація led-індикатора) ─── */
@keyframes clk-led-pulse {
  0%, 100% { box-shadow: 0 0 2px var(--led-color, #c58b3a); }
  50%      { box-shadow: 0 0 5px var(--led-color, #c58b3a),
                          0 0 8px color-mix(in srgb, var(--led-color, #c58b3a) 40%, transparent); }
}
.dev-tools-scope.al-page .clock-unit .led-pulse {
  animation: clk-led-pulse 2s ease-in-out infinite;
}