:root{
  --bg:#0b0f1a; --card:#12182a; --accent:#7c4dff; --accent-2:#00e5ff;
  --ok:#00d68f; --err:#ff5370; --text:#e6eaf3; --muted:#9aa3b2;
  --shadow:0 10px 30px rgba(0,0,0,.35); --radius:22px;
}
@media (prefers-color-scheme: light){
  :root{ --bg:#f6f8ff; --card:#ffffff; --text:#101428; --muted:#596273; --shadow:0 12px 28px rgba(16,20,40,.08); }
}
#tvlt-wrapper{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(124,77,255,.35), transparent 60%),
    radial-gradient(1000px 500px at 110% 10%, rgba(0,229,255,.35), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
  background-color:var(--bg);
  padding: clamp(16px, 2vw, 32px);
}
.tvlt-container{ max-width:980px; margin:auto; display:grid; gap:18px; }
.tvlt-card{
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0)) , var(--card);
  border:1px solid rgba(255,255,255,.06); box-shadow:var(--shadow); border-radius:var(--radius);
  padding: clamp(16px,2.2vw,28px); position:relative; overflow:clip;
}
.tvlt-title{ display:flex; align-items:center; gap:12px; margin:2px 0 6px 2px; }
.tvlt-title h1{
  font-size: clamp(22px, 2.6vw, 34px); line-height:1.1; margin:0; letter-spacing:.2px;
  background: linear-gradient(90deg,var(--accent),var(--accent-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow: 0 0 18px rgba(124,77,255,.2);
}
.tvlt-sub{ color:var(--muted); font-size:clamp(12px,1.4vw,14px); }
.tvlt-grid{ display:grid; gap:12px; grid-template-columns: repeat(12, minmax(36px, 1fr)); }
.tvlt-table-btn{
  user-select:none; cursor:pointer; border-radius:14px; padding:12px 0; text-align:center;
  border:1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  transition: transform .15s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
  font-weight:600; letter-spacing:.3px;
}
.tvlt-table-btn:hover{ transform:translateY(-2px); }
.tvlt-table-btn.active{
  background: linear-gradient(180deg, rgba(124,77,255,.25), rgba(0,229,255,.18));
  border-color: rgba(124,77,255,.5); box-shadow:0 8px 24px rgba(124,77,255,.25);
}
.tvlt-actions{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.tvlt-btn{
  cursor:pointer; border:none; border-radius:14px; padding:12px 18px; font-weight:700; letter-spacing:.3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2)); color:white;
  box-shadow:0 10px 22px rgba(124,77,255,.35);
  transition: transform .12s ease, box-shadow .2s ease, filter .2s ease;
}
.tvlt-btn:active{ transform: translateY(1px) scale(.99); filter: brightness(.95); }
.tvlt-ghost{ background:transparent; color:var(--text); border:1px solid rgba(255,255,255,.12); box-shadow:none; }
.tvlt-progress{ height:12px; background:rgba(255,255,255,.07); border-radius:999px; overflow:hidden; position:relative; }
.tvlt-progress>span{ display:block; height:100%; width:0%; background:linear-gradient(90deg, var(--accent), var(--accent-2)); transition:width .35s ease; }
.tvlt-question{ font-size:clamp(26px,4.5vw,56px); font-weight:800; letter-spacing:.6px; text-align:center; margin:12px 0 8px; }
.tvlt-input-row{ display:flex; gap:10px; justify-content:center; align-items:center; flex-wrap:wrap; }
.tvlt-input{
  font-size:clamp(22px,3vw,36px); width:min(220px, 40vw); text-align:center; padding:10px 14px;
  border-radius:14px; border:1px solid rgba(255,255,255,.12); background:rgba(0,0,0,.2); color:var(--text);
  outline:none; transition: box-shadow .2s ease, border-color .2s ease;
}
.tvlt-input:focus{ border-color:var(--accent-2); box-shadow:0 0 0 6px rgba(0,229,255,.14); }
.tvlt-badge{ display:inline-flex; align-items:center; gap:8px; border:1px solid rgba(255,255,255,.12); color:var(--muted); padding:8px 12px; border-radius:12px; font-weight:600; background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0)); }
.tvlt-badges{ display:flex; flex-wrap:wrap; gap:8px; }
.tvlt-feedback{ min-height:28px; text-align:center; font-size:clamp(14px,1.8vw,16px); font-weight:700; letter-spacing:.2px; margin-top:2px; }
.tvlt-good{ color:var(--ok); } .tvlt-bad{ color:var(--err); }
.tvlt-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; text-align:center; }
.tvlt-stat{ padding:10px 8px; border-radius:12px; background:rgba(255,255,255,.04); }
.pulse-ok{ animation:pulseOk .5s ease; } .pulse-bad{ animation:pulseBad .5s ease; }
@keyframes pulseOk{0%{box-shadow:0 0 0 0 rgba(0,214,143,.5);}100%{box-shadow:0 0 0 16px rgba(0,214,143,0);}}
@keyframes pulseBad{0%{box-shadow:0 0 0 0 rgba(255,83,112,.5);}100%{box-shadow:0 0 0 16px rgba(255,83,112,0);}}
.tvlt-footer{ color:var(--muted); font-size:12px; text-align:center; }
#tvlt-confetti{ position:fixed; inset:0; pointer-events:none; z-index:9999; }