/* FM Trainer v12 - minimal, fast, no re-render loops */
:root{
  --bg:#0b0f14;
  --card:#121823;
  --card2:#0f1520;
  --text:#e6eefc;
  --muted:#a7b3c7;
  --blue:#4aa3ff;
  --good:#2ecc71;
  --bad:#e74c3c;
  --warn:#f1c40f;
  --border:#273246;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}

.topbar{
  position:sticky; top:0; z-index:10;
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 14px;
  background: rgba(11,15,20,0.92);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--border);
}

.brand{ display:flex; gap:10px; align-items:center; }
.logo{
  width:38px; height:38px; border-radius:12px;
  display:grid; place-items:center;
  background: linear-gradient(135deg, #1f6feb, #8b5cf6);
  font-weight:800;
}
.title{ font-weight:800; letter-spacing:0.2px; }
.subtitle{ font-size:12px; color:var(--muted); }

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

.wrap{ max-width:920px; margin:0 auto; padding:16px; }

.card{
  background: linear-gradient(180deg, var(--card), var(--card2));
  border:1px solid var(--border);
  border-radius:18px;
  padding:16px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.35);
}

.row{ display:flex; align-items:center; }
.spread{ justify-content:space-between; }
.meta{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }

.pill{
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  color:var(--muted);
  font-size:12px;
  background: rgba(0,0,0,0.15);
}

.h2{ font-size:18px; font-weight:800; }
.muted{ color:var(--muted); font-size:12px; }

.question{
  margin-top:14px;
  font-size:18px;
  font-weight:800;
  color: var(--blue);
  line-height:1.25;
}

.choices{ margin-top:14px; display:flex; flex-direction:column; gap:10px; }
.choice{
  text-align:left;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid var(--border);
  background: rgba(0,0,0,0.15);
  color: #fff;
  font-size:15px;
  cursor:pointer;
}
.choice:hover{ filter:brightness(1.07); }
.choice:disabled{ opacity:0.75; cursor:not-allowed; }
.choice.correct{ border-color: rgba(46,204,113,0.7); background: rgba(46,204,113,0.14); }
.choice.wrong{ border-color: rgba(231,76,60,0.7); background: rgba(231,76,60,0.14); }

.btn{
  border:1px solid var(--border);
  background: rgba(0,0,0,0.18);
  color: var(--text);
  padding:10px 12px;
  border-radius:12px;
  cursor:pointer;
  font-weight:700;
}
.btn:hover{ filter:brightness(1.07); }
.btn:disabled{ opacity:0.6; cursor:not-allowed; }
.btn.primary{ background: rgba(31,111,235,0.25); border-color: rgba(31,111,235,0.6); }
.btn.danger{ background: rgba(231,76,60,0.18); border-color: rgba(231,76,60,0.55); color:#ffd6d0; }

.input{
  border:1px solid var(--border);
  background: rgba(0,0,0,0.18);
  color: var(--text);
  padding:10px 12px;
  border-radius:12px;
  min-width: 240px;
}

.solution{
  margin-top:12px;
  border-top:1px solid var(--border);
  padding-top:12px;
  color:#fff;
}
.solution ul{ margin:8px 0 0 18px; }

.learnList{ margin-top:14px; display:flex; flex-direction:column; gap:10px; }
.learnItem{
  border:1px solid var(--border);
  background: rgba(0,0,0,0.12);
  border-radius:14px;
  padding:12px;
}
.learnQ{ font-weight:800; color: var(--blue); }
.learnA{ margin:8px 0 0 18px; color:#fff; }
.learnTags{ margin-top:8px; color:var(--muted); font-size:12px; }

.toast{
  position: fixed;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(0,0,0,0.6);
  border: 1px solid var(--border);
  color: #fff;
  opacity: 0;
  pointer-events:none;
  transition: opacity 0.2s ease;
}
.toast.show{ opacity: 1; }

.accessCounter{
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background: rgba(31,111,235,0.12);
  color: var(--text);
  font-weight:700;
  white-space:nowrap;
}