:root{
    --bg:#ffffff;
    --panel:#f6f7f9;
    --stroke:#e6e8ee;
    --text:#111827;
    --muted:#6b7280;
    --accent:#0ea5b7;
    --accent-2:#0b8ea0;
    --btn:#ffffff;

    --stg-result-track:#e6e8ee;
    --stg-result-fill:var(--accent, #0ea5b7);
    --stg-result-threshold:rgba(0,0,0,0.45);
    --stg-result-muted:#6b7280;
    --stg-result-ok:#117a3a;
    --stg-result-bad:#a11212;
}

.stg-quiz{
    padding: 18px 0 28px;
    max-width: 1100px;
    margin: 0 auto;
    /*display: none;*/
}

.stg-quiz.show {
    display: block;
}

.stg-quiz .topbar{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:16px;
    margin-bottom:10px;
    color:var(--muted);
    font-size:14px;
}

.stg-quiz .timer{
    font-variant-numeric: tabular-nums;
    letter-spacing:0.3px;
}

.stg-quiz .progress{
    font-weight:600;
    color:#111827;
}

.stg-quiz .quiz-card{
    border:1px solid var(--stroke);
    border-radius:10px;
    padding:18px;
    background: var(--bg);
    box-shadow: 0 1px 0 rgba(17,24,39,0.02);
}

.stg-quiz .question{
    font-size:18px;
    line-height:1.35;
    margin:0 0 16px 0;
}

.stg-quiz .options{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:14px;
}

.stg-quiz .option{
    border:1px solid var(--stroke);
    background: var(--panel);
    border-radius:10px;
    padding:18px 16px;
    min-height:64px;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    cursor:pointer;
    user-select:none;
    transition: transform .03s ease, background .12s ease, border-color .12s ease, color .12s ease;
    position:relative;
    outline:none;
}

.stg-quiz .option:active{ transform: scale(0.997); }

.stg-quiz .option .badge{
    width:28px;
    height:28px;
    border-radius:8px;
    display:grid;
    place-items:center;
    margin-right:12px;
    font-weight:700;
    font-size:13px;
    color:#374151;
    background:#eef0f5;
    border:1px solid var(--stroke);
    flex: 0 0 auto;
}

.stg-quiz .option .text{
    font-size:15px;
    line-height:1.25;
    color:#111827;
    word-break: break-word;
}

.stg-quiz .option.is-selected{
    background: var(--accent);
    border-color: var(--accent);
}

.stg-quiz .option.is-selected .badge{
    background: rgba(255,255,255,0.2);
    border-color: rgba(255,255,255,0.25);
    color:#fff;
}

.stg-quiz .option.is-selected .text{
    color:#fff;
}

.stg-quiz .option.is-disabled{
    opacity:.55;
    cursor:not-allowed;
}

.stg-quiz .quiz-footer{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:12px;
    margin-top:14px;
}

.stg-quiz .btn{
    border:2px solid #cfe8ef;
    background: var(--btn);
    color: #0b7285;
    padding:10px 16px;
    border-radius:6px;
    font-weight:600;
    cursor:pointer;
    transition: background .12s ease, border-color .12s ease, opacity .12s ease;
    min-width: 110px;
}

.stg-quiz .btn:hover{ border-color:#a8dbe6; }
.stg-quiz .btn:active{ transform: translateY(1px); }

.stg-quiz .btn.primary{ border-color:#a8dbe6; }

.stg-quiz .btn[disabled]{ opacity:.5; cursor:not-allowed; }

.stg-quiz .result{
    margin-top:18px;
    border-top:1px solid var(--stroke);
    padding-top:14px;
    color:#111827;
}

.stg-quiz .result h3{
    margin:0 0 10px 0;
    font-size:16px;
}

.stg-quiz .result .meta{
    color:var(--muted);
    font-size:14px;
    margin-bottom:12px;
}

.stg-quiz .review{
    display:grid;
    gap:10px;
}

.stg-quiz .review-item{
    border:1px solid var(--stroke);
    border-radius:10px;
    padding:12px;
    background:#fff;
}

.stg-quiz .review-q{
    font-weight:600;
    margin:0 0 8px 0;
    font-size:14px;
}

.stg-quiz .review-a{
    margin:0;
    font-size:14px;
    color:#111827;
}

.stg-quiz .pill{
    display:inline-block;
    padding:2px 8px;
    border-radius:999px;
    font-size:12px;
    font-weight:700;
    margin-left:8px;
    vertical-align:middle;
}

.stg-quiz .pill.ok{ background:#e8f7ee; color:#117a3a; border:1px solid #ccefd9; }
.stg-quiz .pill.bad{ background:#ffecec; color:#a11212; border:1px solid #ffd0d0; }

.stg-result-header{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;flex-wrap:wrap}
.stg-result-header h3{margin:0;font-size:16px}
.stg-result-header .meta{color:var(--stg-result-muted);font-size:14px}

.stg-result-progress{margin-top:12px}
.stg-progress-row{display:flex;align-items:center;gap:12px}
.stg-progress-bar-wrap{flex:1}
.stg-progress-track{background:var(--stg-result-track);border-radius:8px;height:14px;position:relative;overflow:hidden}
.stg-progress-fill{background:var(--stg-result-fill);height:100%;width:0%;transition:width .6s ease}
.stg-progress-threshold{position:absolute;top:-4px;height:22px;width:2px;background:var(--stg-result-threshold)}
.stg-progress-percent{min-width:80px;text-align:right;font-weight:700}

.stg-result-min{margin-top:8px;color:var(--stg-result-muted);font-size:13px}
.stg-result-need{margin-top:6px;color:var(--stg-result-muted);font-size:13px}

.passed{color:var(--stg-result-ok)}
.failed{color:var(--stg-result-bad)}

.btn[disabled], .btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed}

@media (max-width:780px){
  .stg-progress-percent{min-width:64px}
    .stg-quiz .options{ grid-template-columns: 1fr; }
    .stg-quiz .btn{ min-width: 120px; }
    .stg-quiz .topbar{ justify-content:space-between; }
}