/*
 时钟样式 (从 index.html 的内联样式抽离)
 目的：将样式模块化，便于复用、维护与缓存
*/
.dp-live-clock{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:0;
}
.dp-live-clock__face{
  position:relative;
  width:34px;
  height:34px;
  flex:0 0 34px;
  border:2px solid rgba(255,235,122,.82);
  border-radius:50%;
  background:radial-gradient(circle at 50% 50%, rgba(255,235,122,.24) 0 10%, rgba(10,61,46,.9) 11% 66%, rgba(0,0,0,.28) 67% 100%);
}
.dp-live-clock__face:before,
.dp-live-clock__face:after{
  content:"";
  position:absolute;
  left:50%;
  top:3px;
  bottom:3px;
  width:2px;
  background:rgba(255,255,255,.32);
  transform:translateX(-50%);
}
.dp-live-clock__face:after{
  top:50%;
  left:3px;
  right:3px;
  bottom:auto;
  width:auto;
  height:2px;
  transform:translateY(-50%);
}
.dp-live-clock__hand{
  position:absolute;
  left:50%;
  bottom:50%;
  z-index:2;
  border-radius:999px;
  transform-origin:50% 100%;
  transform:translateX(-50%) rotate(var(--clock-rotate, 0deg));
}
.dp-live-clock__hour{ width:3px; height:9px; background:#ffe77a; }
.dp-live-clock__minute{ width:2px; height:12px; background:#50f4ff; }
.dp-live-clock__second{ width:1px; height:14px; background:#ff7ad9; box-shadow:0 0 8px rgba(255,122,217,.7); }
.dp-live-clock__pin{
  position:absolute;
  left:50%;
  top:50%;
  z-index:3;
  width:6px;
  height:6px;
  border-radius:50%;
  background:#fff1a6;
  transform:translate(-50%,-50%);
  box-shadow:0 0 8px rgba(255,241,166,.85);
}
.dp-live-clock__text{
  max-width:160px;
  text-align:center;
  font-family:var(--font-body);
  font-size:16px;
  font-weight:900;
  line-height:1;
  letter-spacing:1px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  background:linear-gradient(90deg,#ffeb7a 0%,#50f4ff 42%,#ff7ad9 78%,#fff1a6 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:0 0 18px rgba(245,194,59,.28);
}

@media(max-width:600px){
  .dp-live-clock{ gap:6px; }
  .dp-live-clock__face{ width:28px; height:28px; flex-basis:28px; }
  .dp-live-clock__hour{ height:7px; }
  .dp-live-clock__minute{ height:10px; }
  .dp-live-clock__second{ height:12px; }
  .dp-live-clock__text{ max-width:96px; font-size:13px; }
}