/* Global reset */
* { box-sizing: border-box; margin: 0; padding: 0; }
html,body{height:100%;}
:root{
  --bg:#f7f9fb;
  --card:#ffffff;
  --muted:#707b86;
  --accent:#0d6efd;
  --success:#198754;
  --danger:#dc3545;
  --radius:8px;
  --max-width:1100px;
  --gap:12px;
  --font-sans: Inter, Roboto, "Segoe UI", Arial, sans-serif;
}
body{
  font-family: var(--font-sans);
  background: var(--bg);
  color: #12222b;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  padding: 24px 16px;
}
.wrapper{max-width:var(--max-width);margin:0 auto;}
.site-header{display:flex;align-items:center;gap:12px;margin-bottom:18px;}
.brand{display:flex;align-items:center;gap:10px}
.brand h1{font-size:1.25rem;margin:0;font-weight:600}
.site-actions{margin-left:auto;display:flex;gap:8px}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:white;border:none;padding:8px 12px;border-radius:6px;text-decoration:none;cursor:pointer}
.btn.secondary{background:#f0f2f5;color:var(--muted);border:1px solid #e1e6ea}
.small-btn{padding:6px 10px;border-radius:6px}
.tabs{display:flex;gap:8px;margin-bottom:12px}
.tab-button{background:transparent;border:1px solid transparent;padding:8px 10px;border-radius:6px;cursor:pointer;color:var(--muted)}
.tab-button.active{background:var(--accent);color:#fff}
.controls{display:flex;gap:8px;align-items:center;margin-bottom:12px}
.container-card{background:var(--card);border-radius:var(--radius);padding:14px;border:1px solid #e9eef2}
.question{margin-bottom:12px;padding:12px;border-radius:10px;background:linear-gradient(180deg,#fff,#fbfdff);border:1px solid #e6eef5}
.question > div:first-child{margin-bottom:8px}
.answers{margin-top:6px;display:flex;flex-direction:column;gap:6px}
.answer{display:flex;align-items:center;gap:8px;padding:9px;border-radius:8px;cursor:pointer;border:1px solid transparent}
.answer:hover{background:#f6fbff}
.answer input{margin-right:8px}
.answer.correct{background:#eaf6ec;border-color:rgba(25,135,84,0.15)}
.answer.wrong{background:#fff1f2;border-color:rgba(220,53,69,0.12)}
.feedback{margin-top:8px;font-weight:600}
.feedback .good{color:var(--success)}
.feedback .bad{color:var(--danger)}
.manage-item{padding:10px;border-radius:8px;border:1px solid #f0f3f5;background:linear-gradient(180deg,#fff,#fbfdff);margin-bottom:8px}
.hidden{display:none}
.footer{margin-top:22px;padding:12px;text-align:center;color:var(--muted);font-size:0.9rem}
.iframe-wrap{border-radius:8px;overflow:hidden;border:1px solid #e6eef5;background:white}
.iframe-wrap iframe{width:100%;height:80vh;border:0;display:block}
@media (max-width:800px){
  .tabs{flex-wrap:wrap}
  .site-header{flex-direction:column;align-items:flex-start;gap:8px}
  .site-actions{margin-left:0}
  .iframe-wrap iframe{height:60vh}
}
@media (max-width:420px){
  .brand h1{font-size:1rem}
  .btn{padding:8px}
}