/* TVL Rekenen — gebruikt dezelfde tokens als je theme (via --accent/--accent-2 etc.) */

.tvlr-wrapper{
  font-family: ui-rounded, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color: var(--text);
  padding: clamp(10px, 1.6vw, 20px);
}

.tvlr-container{ max-width: 980px; margin: 0 auto; display: grid; gap: 18px; }

.tvlr-card{
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(20,32,51,.10);
  border-radius: var(--radius, 22px);
  box-shadow: var(--shadow, 0 14px 40px rgba(20,32,51,.10));
  padding: clamp(16px,2vw,26px);
}

.tvlr-title{ display:flex; align-items:center; gap:12px; margin:2px 0 6px 2px; }
.tvlr-title h1{
  margin:0;
  font-size: clamp(22px, 2.6vw, 34px);
  line-height: 1.1;
  background: linear-gradient(90deg,var(--accent),var(--accent-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.tvlr-sub{ color: var(--muted); font-size: clamp(12px,1.4vw,14px); }

.tvlr-row{ margin-top: 12px; }

.tvlr-chipset{ display:flex; gap:10px; flex-wrap:wrap; }
.tvlr-chip{
  cursor:pointer;
  border-radius: 999px;
  padding: 9px 14px;
  border: 1px solid rgba(20,32,51,.12);
  background: rgba(255,255,255,.66);
  font-weight: 700;
}
.tvlr-chip.active{
  background: linear-gradient(90deg, rgba(255,79,163,.18), rgba(45,212,255,.18));
  border-color: rgba(255,79,163,.35);
  box-shadow: 0 10px 22px rgba(255,79,163,.12);
}

.tvlr-actions{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }

.tvlr-btn{
  cursor:pointer; border:none; border-radius: 16px;
  padding: 12px 18px; font-weight: 800;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  color: #fff;
  box-shadow: 0 12px 26px rgba(255,79,163,.18);
}
.tvlr-btn:active{ transform: translateY(1px); }
.tvlr-ghost{
  background: transparent;
  color: var(--text);
  border: 1px solid rgba(20,32,51,.14);
  box-shadow: none;
}

.tvlr-badge{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid rgba(20,32,51,.12);
  color: var(--muted);
  padding: 8px 12px;
  border-radius: 14px;
  font-weight: 700;
  background: rgba(255,255,255,.62);
}

.tvlr-progress{ height: 12px; background: rgba(20,32,51,.08); border-radius: 999px; overflow:hidden; }
.tvlr-progress>span{ display:block; height:100%; width:0%; background: linear-gradient(90deg,var(--accent),var(--accent-2)); transition: width .35s ease; }

.tvlr-question{
  font-size: clamp(26px,4.5vw,54px);
  font-weight: 900;
  letter-spacing: .4px;
  text-align:center;
  margin: 12px 0 8px;
}

.tvlr-input-row{ display:flex; gap:10px; justify-content:center; align-items:center; flex-wrap:wrap; }
.tvlr-input{
  font-size: clamp(22px,3vw,34px);
  width: min(240px, 55vw);
  text-align:center;
  padding: 10px 14px;
  border-radius: 16px;
  border: 1px solid rgba(20,32,51,.14);
  background: rgba(255,255,255,.78);
  color: var(--text);
  outline:none;
}
.tvlr-input:focus{ border-color: var(--accent-2); box-shadow: 0 0 0 6px rgba(45,212,255,.18); }

.tvlr-badges{ display:flex; flex-wrap:wrap; gap:8px; }

.tvlr-feedback{
  min-height: 28px;
  text-align:center;
  font-size: clamp(14px,1.8vw,16px);
  font-weight: 900;
  margin-top: 2px;
}
.tvlr-good{ color: var(--ok); }
.tvlr-bad{ color: var(--err); }

.tvlr-stats{ display:grid; grid-template-columns: repeat(3,1fr); gap:10px; text-align:center; }
.tvlr-stat{ padding: 10px 8px; border-radius: 14px; background: rgba(255,255,255,.60); border: 1px solid rgba(20,32,51,.08); }
.tvlr-big{ font-size: 26px; font-weight: 900; }

.tvlr-review{
  font-size: 14px;
  color: var(--muted);
  line-height: 1.7;
  margin-bottom: 12px;
  white-space: pre-line;
}

.tvlr-footer{ color: var(--muted); font-size: 12px; text-align:center; margin-top: 10px; }