:root{
  --bg: var(--tvl-bg, #f6f8ff);
  --card: var(--tvl-card, #ffffff);
  --text: var(--tvl-text, #101428);
  --muted: var(--tvl-muted, #596273);
  --accent: var(--tvl-primary, #ff4fa3);
  --accent-2: var(--tvl-secondary, #2dd4ff);
  --shadow: var(--tvl-shadow, 0 14px 40px rgba(20,32,51,.10));
  --radius: var(--tvl-radius, 22px);
}

.tvlb-wrap{ max-width: 980px; margin: 0 auto; }
.tvlb-card{
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(20,32,51,.10);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(16px,2vw,28px);
}

.tvlb-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.tvlb-title{ display:flex; align-items:center; gap:12px; }
.tvlb-star{ font-size: 28px; color: var(--accent); }
.tvlb-title h2{
  margin:0;
  font-size: clamp(22px, 2.6vw, 34px);
  background: linear-gradient(90deg,var(--accent),var(--accent-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.tvlb-help-btn{
  border: 1px solid rgba(20,32,51,.12);
  background: rgba(255,255,255,.60);
  color: var(--text);
  border-radius: 14px;
  padding: 10px 14px;
  font-weight: 800;
  cursor:pointer;
}
.tvlb-help{
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(20,32,51,.10);
  background: rgba(255,255,255,.60);
}
.tvlb-help h3{ margin: 10px 0 6px; }
.tvlb-help p{ margin: 0 0 8px; color: var(--muted); }
.tvlb-help p strong{ color: var(--text); }

.tvlb-controls{ margin-top: 14px; display:flex; gap:12px; justify-content:space-between; flex-wrap:wrap; }
.tvlb-badges{ display:flex; gap:8px; flex-wrap:wrap; }
.tvlb-badge{
  display:inline-flex; gap:8px; align-items:center;
  border:1px solid rgba(20,32,51,.12);
  color: var(--muted);
  padding:8px 12px;
  border-radius:12px;
  font-weight:700;
  background: rgba(255,255,255,.55);
}
.tvlb-levels{ display:flex; gap:10px; flex-wrap:wrap; }
.tvlb-chip{
  cursor:pointer;
  border-radius: 999px;
  padding: 10px 14px;
  border: 1px solid rgba(20,32,51,.12);
  background: rgba(255,255,255,.55);
  font-weight: 800;
}
.tvlb-chip.active{
  border: 0;
  color: #fff;
  background: linear-gradient(90deg,var(--accent),var(--accent-2));
  box-shadow: 0 12px 26px rgba(255,79,163,.18);
}

.tvlb-q{ margin-top: 18px; }
.tvlb-question{
  font-size: clamp(26px, 4.2vw, 54px);
  font-weight: 900;
  text-align:center;
  margin: 10px 0 14px;
  color: var(--text);
}
.tvlb-answers{
  display:grid;
  grid-template-columns: repeat(2, minmax(160px, 1fr));
  gap: 12px;
  max-width: 520px;
  margin: 0 auto;
}
.tvlb-answer{
  cursor:pointer;
  border-radius: 16px;
  padding: 14px 12px;
  text-align:center;
  font-weight: 900;
  border: 1px solid rgba(20,32,51,.12);
  background: rgba(255,255,255,.70);
}
.tvlb-answer:hover{ transform: translateY(-1px); }
.tvlb-actions{ margin-top: 16px; display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }

.tvlb-btn{
  cursor:pointer; border:none; border-radius:14px;
  padding:12px 18px; font-weight:900; letter-spacing:.2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2)); color:white;
  box-shadow: 0 10px 22px rgba(255,79,163,.20);
}
.tvlb-ghost{
  background: transparent;
  color: var(--text);
  border: 1px solid rgba(20,32,51,.14);
  box-shadow: none;
}
.tvlb-btn:disabled{ opacity:.45; cursor:not-allowed; }

.tvlb-feedback{ min-height: 26px; margin-top: 10px; text-align:center; font-weight: 900; }
.tvlb-good{ color: var(--ok, #00d68f); }
.tvlb-bad{ color: var(--tvl-err, #ff5370); }

@media (max-width: 782px){
  .tvlb-answers{ grid-template-columns: 1fr; }
}