/* === ZP Statusbox Skeleton & A11y (fix3) === */
.zp-status-skeleton{height:64px;border-radius:12px;opacity:.35}
.zp-status-skeleton:before{
  content:"";display:block;height:100%;border-radius:inherit;
  background:linear-gradient(90deg, rgba(255,255,255,.06) 25%, rgba(255,255,255,.12) 37%, rgba(255,255,255,.06) 63%);
  animation:zpShimmer 1.2s infinite;
}
@keyframes zpShimmer{0%{transform:translateX(-30%)}100%{transform:translateX(130%)}}
@media (prefers-reduced-motion: reduce){.zp-status-skeleton:before{animation:none}}
/* 資料到齊後把骨架移除 */
.zp-status-ready .zp-status-skeleton{display:none}


/* === Fix7: unify '現在時間' font size === */
#site-time,
[data-field="now"] {
  font-size: inherit !important;
  font-weight: inherit !important;
  opacity: 1 !important;
}


/* === Fix8: adjust '現在時間' smaller inside .detail.mono === */
.detail.mono #site-time,
.detail.mono [data-field="now"] {
  font-size: 0.85em !important;
  font-family: inherit !important;
  font-weight: normal !important;
}


/* === Fix9: shrink "現在時間：" label text === */
.detail.mono span:first-child {
  font-size: 0.85em !important;
  font-weight: normal !important;
}


/* === Fix10: unify font sizes === */
/* 狀態行稍大一點 */
.detail .state,
#site-status,
[data-field="state"] {
  font-size: 1em !important;
  font-weight: bold !important;
}

/* 上次更新與現在時間兩行一致，稍微小一點 */
.detail.mono span#site-date,
.detail.mono [data-field="updated"],
.detail.mono #site-time,
.detail.mono [data-field="now"],
.detail.mono span:first-child {
  font-size: 0.9em !important;
  font-weight: normal !important;
}


/* === Fix11: add spacing between status lines === */
#ZP_STATUS_BOX .detail,
#live-online .detail,
.zp-statusbox .detail {
  margin-bottom: 4px !important;
  line-height: 1.4 !important;
}
#ZP_STATUS_BOX .detail:last-child,
#live-online .detail:last-child,
.zp-statusbox .detail:last-child {
  margin-bottom: 0 !important;
}


/* === Fix12: add extra spacing between status and update lines === */
#ZP_STATUS_BOX .detail:nth-child(1),
#live-online .detail:nth-child(1),
.zp-statusbox .detail:nth-child(1) {
  margin-bottom: 8px !important;
}


/* === Fix13: Beautify status box (typography + spacing + colors) === */
#ZP_STATUS_BOX, #live-online, .zp-statusbox{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#ZP_STATUS_BOX .detail,
#live-online .detail,
.zp-statusbox .detail{
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 2px 0;
  margin-bottom: 6px !important;   /* default spacing between lines */
  line-height: 1.4 !important;
}

/* Larger gap specifically between 1st and 2nd line (status vs update) */
#ZP_STATUS_BOX .detail:nth-child(1),
#live-online .detail:nth-child(1),
.zp-statusbox .detail:nth-child(1){
  margin-bottom: 10px !important;
}

/* Label (first span) look */
#ZP_STATUS_BOX .detail > span:first-child,
#live-online .detail > span:first-child,
.zp-statusbox .detail > span:first-child{
  opacity: .8;
  font-size: 0.9em;
  letter-spacing: .02em;
}

/* Value (second span) use tabular numbers, uniform weight */
#ZP_STATUS_BOX .detail > span + span,
#live-online .detail > span + span,
.zp-statusbox .detail > span + span{
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

/* Status line prominence */
#ZP_STATUS_BOX .state,
#live-online .state,
.zp-statusbox .state,
#site-status,[data-field="state"]{
  font-size: 1em !important;
  font-weight: 600 !important;
}

/* Update/time lines consistent size */
#ZP_STATUS_BOX #site-date, #ZP_STATUS_BOX #site-time,
#live-online #site-date, #live-online #site-time,
.zp-statusbox #site-date, .zp-statusbox #site-time,
#ZP_STATUS_BOX [data-field="updated"], #ZP_STATUS_BOX [data-field="now"],
#live-online [data-field="updated"], #live-online [data-field="now"],
.zp-statusbox [data-field="updated"], .zp-statusbox [data-field="now"]{
  font-size: .9em !important;
  font-weight: 500 !important;
}

/* Status color states */
.state.ok, [data-field="state"].ok{ color: #22c55e; }   /* green-500 */
.state.warn, [data-field="state"].warn{ color: #eab308; } /* amber-500 */
.state.down, [data-field="state"].down{ color: #ef4444; } /* red-500 */

/* Remove extra margin after last line */
#ZP_STATUS_BOX .detail:last-child,
#live-online .detail:last-child,
.zp-statusbox .detail:last-child{
  margin-bottom: 0 !important;
}


/* === Fix16: per request - smaller '現在時間' font and tighter gap with '上次更新' === */
#ZP_STATUS_BOX .detail:nth-child(2),
#live-online .detail:nth-child(2),
.zp-statusbox .detail:nth-child(2){
  margin-bottom: 3px !important; /* second line (上次更新) gap smaller before 現在時間 */
}
#ZP_STATUS_BOX #site-time, #ZP_STATUS_BOX [data-field="now"],
#live-online #site-time, #live-online [data-field="now"],
.zp-statusbox #site-time, .zp-statusbox [data-field="now"]{
  font-size: 0.85em !important; /* make '現在時間' smaller than 更新 */
  font-weight: normal !important;
}


/* Fix18: hide stray '現在時間' lines outside status box */
body > .detail.mono:has(#site-time),
footer .detail.mono:has(#site-time) {
  display: none !important;
}