/* Clock */
.clock-wrap { display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; gap:1rem; }
@media(min-width:640px){ .clock-wrap{ gap:1.5rem; } }
.clock-label {
  display:flex; align-items:center; gap:0.5rem;
  color:rgba(103,232,249,0.6); font-size:0.5rem;
  font-family: monospace; text-transform:uppercase; letter-spacing:0.2em;
}
@media(min-width:640px){ .clock-label{ gap:0.75rem; font-size:0.625rem; } }
.clock-label .line { width:1rem; height:1px; background:rgba(103,232,249,0.4); }
@media(min-width:640px){ .clock-label .line{ width:1.5rem; } }
.clock-display { position:relative; display:flex; align-items:center; justify-content:center; }
.clock-ring {
  position:absolute; width:10rem; height:10rem; border-radius:50%;
  border:1px solid rgba(34,211,238,0.1);
}
@media(min-width:640px){ .clock-ring{ width:14rem; height:14rem; } }
@media(min-width:1024px){ .clock-ring{ width:16rem; height:16rem; } }
@media(min-width:1280px){ .clock-ring{ width:18rem; height:18rem; } }
.clock-ring-progress {
  position:absolute; width:10rem; height:10rem; border-radius:50%;
}
@media(min-width:640px){ .clock-ring-progress{ width:14rem; height:14rem; } }
@media(min-width:1024px){ .clock-ring-progress{ width:16rem; height:16rem; } }
@media(min-width:1280px){ .clock-ring-progress{ width:18rem; height:18rem; } }
.clock-time {
  font-size:2.5rem; font-weight:700; color:#fff;
  text-shadow: 0 0 20px rgba(255,255,255,0.15);
  font-variant-numeric: tabular-nums; line-height:1;
}
@media(min-width:640px){ .clock-time{ font-size:4rem; } }
@media(min-width:1024px){ .clock-time{ font-size:5rem; } }
@media(min-width:1280px){ .clock-time{ font-size:6rem; } }
.clock-sep { color:rgba(103,232,249,0.8); font-weight:300; animation:pulse 1s step-end infinite; }
.clock-min { color:#facc15; font-weight:700; }
.clock-ms { font-size:0.75rem; font-family:monospace; color:rgba(103,232,249,0.5); margin-left:0.25rem; }
@media(min-width:1024px){ .clock-ms{ font-size:1.5rem; } }
.clock-date {
  display:flex; align-items:center; gap:0.5rem;
  font-size:0.875rem; font-weight:500; color:rgba(255,255,255,0.7);
  text-transform:capitalize;
}
@media(min-width:640px){ .clock-date{ gap:0.75rem; font-size:1rem; } }
.clock-date .line { width:0.75rem; height:1px; background:rgba(255,255,255,0.2); }
@media(min-width:640px){ .clock-date .line{ width:1rem; } }
.clock-bar {
  display:flex; align-items:center; gap:0.75rem;
  font-size:0.5rem; font-family:monospace;
  color:rgba(255,255,255,0.3); text-transform:uppercase; letter-spacing:0.05em;
}
@media(min-width:640px){ .clock-bar{ gap:1rem; font-size:0.625rem; } }
.clock-dot { width:3px; height:3px; border-radius:50%; background:rgba(34,211,238,0.6); animation:pulse 2s infinite; }
@keyframes pulse { 0%,100%{ opacity:1; } 50%{ opacity:0.4; } }

/* Theme light overrides */
body.theme-light .clock-time { color: #0f172a; text-shadow: 0 0 20px rgba(0,0,0,0.1); }
body.theme-light .clock-sep { color: #64748b; }
body.theme-light .clock-ms { color: rgba(0,0,0,0.6); }
body.theme-light .clock-date { color: rgba(0,0,0,0.65); }
body.theme-light .clock-min { color: #b45309; }
body.theme-light .clock-label { color: rgba(0,0,0,0.6); }
body.theme-light .clock-bar { color: rgba(0,0,0,0.6); }
body.theme-light .clock-dot { background: rgba(100,116,139,0.7); }