:root{
  --bg:#f7fafc; --card:#ffffff; --text:#1f2937; --muted:#6b7280; --line:#e5e7eb;
  --pri:#2563eb; --pri-600:#1d4ed8; --ok:#16a34a; --err:#dc2626; --shadow: 0 6px 20px rgba(17,24,39,.08);
}
#tnq-root{font:16px "Inter",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--text);}
.tnq-header{position:sticky; top:0; z-index:9; background:linear-gradient(180deg,#ffffff, #f8fafc); border-bottom:1px solid var(--line); padding:14px 16px;}
.tnq-title{font-size:22px;margin:0;font-weight:700;letter-spacing:.2px;color:#0f172a}
.tnq-sub{color:var(--muted);font-size:13px}
.tnq-wrap{max-width:980px;margin:0 auto;padding:16px}
.tnq-card{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:16px; margin:14px 0; box-shadow:var(--shadow);}
.tnq-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.tnq-btn{background:var(--pri); color:#fff;border:0;border-radius:999px; padding:10px 16px;cursor:pointer; font-weight:600; letter-spacing:.2px; transition:transform .04s ease, box-shadow .2s ease, background-color .2s ease; box-shadow: 0 4px 14px rgba(37,99,235,.25);}
.tnq-btn:hover{background:var(--pri-600)} .tnq-btn:active{transform:translateY(1px)}
.tnq-btn.alt{background:#ffffff;color:var(--text); border:1px solid var(--line); box-shadow:none;} .tnq-btn.alt:hover{background:#f3f4f6}
.tnq-badge{background:#eef2ff; border:1px solid #dbeafe; color:#1e3a8a; padding:6px 10px;border-radius:999px;font-size:12px;font-weight:600;}
.tnq-pill{background:#f3f4f6;color:#111827; border:1px solid var(--line); padding:4px 10px;border-radius:999px;font-size:12px;font-weight:600;}
.tnq-math{line-height:1.6; font-size:16px}
.tnq-opt{margin:10px 0; padding:10px 12px; border:1px solid var(--line); border-radius:12px; display:flex; gap:10px; align-items:center; background:#ffffff; transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease; cursor:pointer;}
.tnq-opt:hover{ border-color:#cbd5e1; box-shadow:0 4px 14px rgba(2,6,23,.06); background:#fafafa; }
.tnq-opt input[type="radio"]{appearance:none; width:18px; height:18px; border:2px solid #94a3b8; border-radius:50%; outline:none; display:inline-block; position:relative; background:#fff; transition:all .2s ease;}
.tnq-opt input[type="radio"]:checked{ border-color:var(--pri); box-shadow:0 0 0 3px rgba(37,99,235,.15); }
.tnq-opt input[type="radio"]:checked::after{content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:8px; height:8px; background:var(--pri); border-radius:50%;}
.tnq-opt input[type="text"]{width:100%; border:1px solid var(--line); border-radius:10px; padding:10px 12px; outline:none; transition: box-shadow .2s ease, border-color .2s ease;}
.tnq-opt input[type="text"]:focus{border-color:#a5b4fc; box-shadow:0 0 0 3px rgba(99,102,241,.15);}
.tnq-card .tnq-card{ border-radius:12px; margin:8px 0; padding:12px; box-shadow:none; background:#fafafa; border-color:#e5e7eb; }
.tnq-result b{font-size:18px}
#tnq-list .tnq-card + .tnq-card{ margin-top:18px; }

/* Feedback states */
.tnq-opt.correct{ border-color:#86efac; background:#ecfdf5; box-shadow:0 0 0 2px rgba(22,163,74,.15) inset; }
.tnq-opt.wrong{ border-color:#fecaca; background:#fff1f2; box-shadow:0 0 0 2px rgba(220,38,38,.12) inset; }
.tnq-opt .tnq-check{ margin-left:auto; font-weight:700; }
.tnq-explain{ background: #eff6ff; border:1px solid #dbeafe; color:#1e3a8a; border-radius:12px; padding:12px; margin-top:10px;}

@media (max-width:700px){ .tnq-wrap{padding:12px} .tnq-row{gap:8px} .tnq-card{padding:14px;margin:12px 0} .tnq-title{font-size:20px} }