/* Shared styling for the interactive clock/countdown/timer widgets (.wc-*).
   Accent comes from each skin's --c variable; layout is skin-neutral. */
.wc-stage{display:flex;flex-direction:column;align-items:center;gap:14px;
  padding:22px;border-radius:16px;background:rgba(127,127,127,.06);
  border:1px solid rgba(128,128,128,.18)}
.wc-widget{width:100%;display:flex;flex-direction:column;align-items:center;gap:12px}

/* digital */
.wc-digital{text-align:center}
.wc-label{font-size:13px;text-transform:uppercase;letter-spacing:1px;opacity:.65;margin-bottom:4px}
.wc-time{font-variant-numeric:tabular-nums;font-weight:800;font-size:clamp(38px,9vw,68px);
  line-height:1;letter-spacing:1px;color:var(--c,#222)}
.wc-date{margin-top:8px;opacity:.7;font-size:15px}

/* analog */
.wc-analog{width:min(74vw,240px);height:min(74vw,240px)}
.wc-analog .wc-face{fill:rgba(127,127,127,.05);stroke:var(--c,#333);stroke-width:3}
.wc-analog .wc-tick{stroke:currentColor;opacity:.5;stroke-width:2}
.wc-analog .wc-hour,.wc-analog .wc-min{stroke:currentColor}
.wc-analog .wc-sec{stroke:var(--c,#e11)}

/* binary */
.wc-binary{display:flex;gap:10px;justify-content:center}
.wc-bcol{display:flex;flex-direction:column;gap:8px}
.wc-bdot{width:22px;height:22px;border-radius:50%;border:2px solid rgba(128,128,128,.35);
  background:transparent;transition:background .1s}
.wc-bdot.on{background:var(--c,#3a3);border-color:var(--c,#3a3);box-shadow:0 0 10px -2px var(--c,#3a3)}
.wc-binread{font-variant-numeric:tabular-nums;font-weight:700;font-size:22px;opacity:.85;letter-spacing:1px}

/* world clock */
.wc-world{width:100%;max-width:420px;display:flex;flex-direction:column;gap:2px}
.wc-wrow{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;
  border-radius:9px}
.wc-wrow:nth-child(odd){background:rgba(127,127,127,.06)}
.wc-wcity{font-weight:600}
.wc-wtime{font-variant-numeric:tabular-nums;font-weight:700;color:var(--c,#222)}

/* inputs / converters / forms */
.wc-tzconv,.wc-lifeform,.wc-freq,.wc-btnrow{display:flex;flex-wrap:wrap;gap:10px;
  align-items:center;justify-content:center}
.wc-ilabel{font-size:12px;text-transform:uppercase;letter-spacing:.5px;opacity:.6}
.wc-input,.wc-sel{font-size:15px;padding:9px 11px;border-radius:9px;
  border:1px solid rgba(128,128,128,.4);background:rgba(127,127,127,.05);color:inherit}
.wc-input:focus,.wc-sel:focus{outline:2px solid var(--c,#888);border-color:var(--c,#888)}
.wc-tzout,.wc-lifeout{font-size:17px;font-weight:600;text-align:center;color:var(--c,#222)}
.wc-lifeout b{color:var(--c,#222)}

/* countdown / count-up */
.wc-cdtitle{font-size:18px;font-weight:700;text-align:center}
.wc-cdyears{font-size:15px;opacity:.7;text-align:center}
.wc-cd{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.wc-cdbox{min-width:74px;padding:12px 8px;border-radius:12px;text-align:center;
  background:rgba(127,127,127,.08);border:1px solid rgba(128,128,128,.2)}
.wc-cdnum{font-variant-numeric:tabular-nums;font-weight:800;font-size:clamp(26px,7vw,40px);
  color:var(--c,#222);line-height:1}
.wc-cdlab{font-size:11px;text-transform:uppercase;letter-spacing:1px;opacity:.6;margin-top:4px}
.wc-cdmsg{text-align:center;font-weight:600;color:var(--c,#222)}

/* life progress bar */
.wc-lifebar{width:100%;max-width:460px;height:16px;border-radius:999px;
  background:rgba(128,128,128,.2);overflow:hidden}
.wc-lifefill{height:100%;width:0;background:var(--c,#4a7);transition:width .5s}

/* frequency */
.wc-fnote{opacity:.6;font-size:13px}
.wc-fbtn{background:var(--c,#333);color:#fff;border:0;border-radius:999px;
  padding:10px 20px;font-weight:700;cursor:pointer}
.wc-fbtn.on{filter:brightness(1.15)}
.wc-fbtn2{background:transparent;border:1px solid rgba(128,128,128,.5);color:inherit;
  border-radius:999px;padding:10px 18px;font-weight:600;cursor:pointer}

/* stopwatch / timer */
.wc-laps{margin:8px 0 0;padding-left:22px;font-variant-numeric:tabular-nums;
  max-height:140px;overflow:auto;text-align:left}
.wc-done{color:var(--c,#e11);animation:wcblink 1s steps(2) infinite}
@keyframes wcblink{50%{opacity:.35}}

@media(max-width:560px){
  .wc-cdbox{min-width:64px}
  .wc-tzconv,.wc-lifeform{flex-direction:column;align-items:stretch}
}