.tvl-klok-app{ max-width: 980px; margin: 0 auto; padding: 12px; }

.tvl-card{
  border-radius: 18px;
  background: var(--wp--preset--color--base, #fff);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 10px 28px rgba(0,0,0,.06);
  overflow: hidden;
}

.tvl-head{ padding: 18px 18px 10px 18px; }
.tvl-head h2{ margin: 0 0 6px 0; font-size: 22px; }
.tvl-sub{ margin: 0 0 10px 0; opacity:.85; }

.tvl-uitleg{
  margin-top: 10px;
  border-radius: 14px;
  padding: 10px 12px;
  background: rgba(0,0,0,.03);
  border: 1px solid rgba(0,0,0,.06);
}
.tvl-uitleg summary{ cursor:pointer; }
.tvl-uitleg-body{ margin-top: 10px; }
.tvl-uitleg-body ol{ margin: 0 0 10px 18px; }

.tvl-toolbar{
  display:flex;
  gap: 12px;
  align-items:center;
  justify-content: space-between;
  padding: 12px 18px;
  border-top: 1px solid rgba(0,0,0,.06);
  border-bottom: 1px solid rgba(0,0,0,.06);
  flex-wrap: wrap;
}

.tvl-stats{ display:flex; gap: 14px; flex-wrap: wrap; opacity:.9; }
.tvl-stats strong{ font-weight: 800; }

.tvl-body{ padding: 18px; }
.tvl-empty{ opacity:.85; }

.tvl-layout{
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 18px;
  align-items: start;
}
@media (max-width: 860px){
  .tvl-layout{ grid-template-columns: 1fr; }
}

.tvl-btn{
  border: 0;
  border-radius: 12px;
  padding: 10px 14px;
  cursor: pointer;
  font-weight: 700;
  background: var(--accent, #2b7cff);
  color: #fff;
}
.tvl-btn.tvl-secondary{ background: var(--accent-2, #6c757d); }

.tvl-clock-wrap{ display:flex; flex-direction: column; align-items: center; gap: 10px; }

.tvl-periodline{
  display:flex;
  gap: 8px;
  align-items:center;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(0,0,0,.03);
  border: 1px solid rgba(0,0,0,.06);
}
.tvl-badge{ font-size: 12px; opacity:.8; }
.tvl-period{ font-size: 16px; text-transform: none; }

.tvl-digital-target{
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(0,0,0,.04);
  border: 1px solid rgba(0,0,0,.06);
  font-size: 16px;
}

.tvl-analog{
  width: 320px;
  height: 320px;
  border-radius: 50%;
  position: relative;
  background: #fff;
  border: 10px solid rgba(0,0,0,.08);
  box-shadow: inset 0 0 0 6px rgba(0,0,0,.02);
}

.tvl-face{
  position:absolute;
  inset: 14px;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, rgba(0,0,0,.06) 0 2px, transparent 3px),
    radial-gradient(circle at center, transparent 0 120px, rgba(0,0,0,.04) 121px);
}

.tvl-hand{
  position:absolute;
  left: 50%;
  top: 50%;
  transform-origin: bottom center;
  border-radius: 999px;
}

.tvl-hour{
  width: 10px;
  height: 90px;
  background: rgba(0,0,0,.75);
  transform: translate(-50%, -100%) rotate(0deg);
}

.tvl-min{
  width: 8px;
  height: 125px;
  background: rgba(0,0,0,.60);
  transform: translate(-50%, -100%) rotate(0deg);
}

.tvl-sec{
  width: 3px;
  height: 135px;
  background: rgba(255,0,0,.65);
  transform: translate(-50%, -100%) rotate(0deg);
}

.tvl-num{
  position:absolute;
  width: 32px;
  height: 32px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 800;
  border-radius: 999px;
  background: rgba(0,0,0,.03);
}

/* Posities 1..12 */
.tvl-num-12{ top: 12px; left: 50%; transform: translateX(-50%); }
.tvl-num-3{ right: 12px; top: 50%; transform: translateY(-50%); }
.tvl-num-6{ bottom: 12px; left: 50%; transform: translateX(-50%); }
.tvl-num-9{ left: 12px; top: 50%; transform: translateY(-50%); }

.tvl-num-1{ top: 32px; right: 78px; }
.tvl-num-2{ top: 78px; right: 32px; }
.tvl-num-4{ bottom: 78px; right: 32px; }
.tvl-num-5{ bottom: 32px; right: 78px; }
.tvl-num-7{ bottom: 32px; left: 78px; }
.tvl-num-8{ bottom: 78px; left: 32px; }
.tvl-num-10{ top: 78px; left: 32px; }
.tvl-num-11{ top: 32px; left: 78px; }

.tvl-input-wrap{
  border-radius: 16px;
  padding: 14px;
  background: rgba(0,0,0,.02);
  border: 1px solid rgba(0,0,0,.06);
}

.tvl-prompt{ font-size: 18px; margin-bottom: 10px; }

.tvl-answer{
  display:flex;
  align-items:end;
  gap: 10px;
  margin-bottom: 12px;
}

.tvl-label{
  display:flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
  opacity: .9;
}

.tvl-in, .tvl-sel{
  width: 160px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.15);
  font-size: 18px;
}

.tvl-setrow{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.tvl-colon{ font-size: 28px; opacity: .7; padding-bottom: 10px; }

.tvl-actions{ display:flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }

.tvl-feedback{
  margin-top: 10px;
  padding: 12px;
  border-radius: 12px;
  background: rgba(0,0,0,.04);
}

.tvl-hintbox{
  margin-top: 10px;
  padding: 12px;
  border-radius: 12px;
  border: 1px dashed rgba(0,0,0,.2);
  background: rgba(0,0,0,.02);
}

.tvl-small{ font-size: 12px; opacity: .75; text-align:center; }
.tvl-hidden{ display:none; }