/* Universal Test Widget — Core Theme (LTS v1.0.2) */
/* Namespace: .leveltest-wrapper */

.leveltest-wrapper{
  --primary:#5a77ff; --surface:#fff; --text:#111827; --muted:#6b7280;
  --success:#10b981; --warning:#f59e0b; --error:#ef4444;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Inter","Roboto","Helvetica Neue",Arial,sans-serif;
  color:var(--text); padding:24px 8px 56px;
}
.lt-container{max-width:720px;margin:0 auto;}
.lt-card{background:var(--surface);border:1px solid #e5e7eb;border-radius:20px;
  box-shadow:0 6px 18px rgba(0,0,0,.06);padding:20px;}
.lt-center{text-align:center;}

.lt-icon{width:72px;height:72px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;
  background:radial-gradient(120px 120px at 30% 20%, rgba(90,119,255,.18), transparent 60%);margin:4px auto 10px;}
.lt-icon img,.lt-icon svg{width:48px;height:48px;object-fit:contain}

.lt-title{font-size:28px;font-weight:800;line-height:1.25;margin:6px 0 4px}
.lt-sub{font-size:16px;color:var(--muted);margin:0 0 14px}
.lt-note{font-size:13px;color:var(--muted);margin-top:10px}

.lt-btn-row{display:flex;gap:10px;justify-content:center;margin-top:14px}
.lt-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 16px;border-radius:12px;
  border:1px solid #e5e7eb;background:#fff;color:var(--text);cursor:pointer;font-weight:600;
  transition:box-shadow .2s ease,transform .02s ease}
.lt-btn:disabled{opacity:.5;cursor:not-allowed}
.lt-btn:hover{box-shadow:0 6px 16px rgba(0,0,0,.06);transform:translateY(-1px)}
.lt-btn-primary{background:var(--primary);border-color:var(--primary);color:#fff}

.lt-progress-row{margin:14px auto 10px}
.lt-progress-top{display:flex;align-items:center;justify-content:space-between;font-size:14px;color:var(--muted);margin-bottom:8px}
.lt-progress-track{height:8px;background:#f3f4f6;border-radius:999px;overflow:hidden}
.lt-progress-fill{height:100%;width:0%;background:var(--primary);border-radius:999px;transition:width .25s ease}

.lt-question{font-size:20px;font-weight:700;margin:8px 0 14px}
.lt-choices{display:grid;gap:10px}
@media (min-width:768px){.lt-choices.grid-2{grid-template-columns:1fr 1fr}}
.lt-choice{border:1px solid #e5e7eb;border-radius:14px;padding:12px;background:#fff;display:flex;align-items:center;gap:12px;
  cursor:pointer;transition:box-shadow .2s ease,transform .02s ease,border-color .15s ease}
.lt-choice:hover,.lt-choice:focus-within{box-shadow:0 6px 16px rgba(0,0,0,.06)}
.lt-choice input{display:none}
.lt-choice.selected{border-color:var(--primary);box-shadow:0 0 0 3px rgba(90,119,255,.15)}
.lt-choice .media{width:64px;height:64px;border-radius:10px;background:#f9fafb;display:flex;align-items:center;justify-content:center}
.lt-choice .media img{width:56px;height:56px;object-fit:contain}
.lt-choice .media-audio{width:100%}

.lt-nav{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:14px}
.lt-nav .spacer{flex:1}

.lt-result-header{text-align:center}
.lt-result-title{font-size:26px;font-weight:800;margin:4px 0}
.lt-result-sub{font-size:16px;color:var(--muted);margin:0 0 14px}
.lt-metrics{display:grid;gap:8px;margin:12px 0}
.lt-metric{display:flex;align-items:center;justify-content:space-between;border:1px solid #e5e7eb;border-radius:12px;padding:10px 12px}
.lt-bars{display:grid;gap:8px;margin:8px 0 14px}
.lt-bar{display:grid;gap:6px}
.lt-bar-label{font-size:14px;color:var(--muted);display:flex;justify-content:space-between}
.lt-bar-track{height:10px;background:#f3f4f6;border-radius:999px;overflow:hidden}
.lt-bar-fill{height:100%;width:0%;background:var(--primary);border-radius:999px;transition:width .3s ease}

.lt-actions{display:flex;gap:10px;justify-content:center;margin-top:12px;flex-wrap:wrap}
.lt-loader{text-align:center;color:var(--muted);font-size:14px;padding:18px 0}
.lt-error{color:var(--error);text-align:center;padding:14px 0}

@media (max-width:767px){.lt-title{font-size:26px}.lt-question{font-size:19px}}


/* === AI Loader (start screen) === */
.lt-ailoader {
  width: 76px; height: 76px; margin: 6px auto 10px; position: relative;
}
.lt-ailoader .ring {
  position: absolute; inset: 0;
  border-radius: 999px;
  background:
    conic-gradient(from 0deg, var(--primary) 0 25%, rgba(90,119,255,0) 25% 100%),
    radial-gradient(28px 28px at 50% 50%, rgba(90,119,255,.12), rgba(90,119,255,0) 60%);
  mask: radial-gradient(transparent 24px, #000 26px); /* ince halka */
  animation: lt-spin 1.3s linear infinite;
  filter: drop-shadow(0 4px 12px rgba(90,119,255,.25));
}
.lt-ailoader .dot {
  position: absolute; inset: 0; display: grid; place-items: center;
}
.lt-ailoader .dot::after {
  content: ""; width: 12px; height: 12px; border-radius: 999px;
  background: var(--primary); opacity: .9;
  animation: lt-pulse 1.6s ease-in-out infinite;
}
@keyframes lt-spin { to { transform: rotate(360deg); } }
@keyframes lt-pulse { 0%,100%{ transform: scale(1); opacity:.9 } 50%{ transform: scale(1.25); opacity:.5 } }