/* =========================================================================
   Smart Tools Suite — Online Test / Exam UI
   Modern, animated, "exam-app" grade styling.
   All rules are scoped under .sts-ot-* / .sts-ot-card so the shared
   .sts-card / .sts-btn base styles used by the other tools are untouched.
   ========================================================================= */

.sts-ot-card{
    --sts-ot-accent-1:var(--sts-accent, #185fa5);
    --sts-ot-accent-2:#5b3df6;
    --sts-ot-accent-grad:linear-gradient(135deg, var(--sts-ot-accent-1), var(--sts-ot-accent-2));
    --sts-ot-success:#17a35d;
    --sts-ot-success-grad:linear-gradient(135deg, #17a35d, #0fb98e);
    --sts-ot-danger:#e0392c;
    --sts-ot-danger-grad:linear-gradient(135deg, #e0392c, #ff6a3d);
    --sts-ot-skipped:#e08a1f;
    --sts-ot-skipped-grad:linear-gradient(135deg, #e08a1f, #f4a83d);
    --sts-ot-unanswered:#9ca3af;
    --sts-ot-radius:16px;
    --sts-ot-shadow-sm:0 2px 8px rgba(24,26,32,0.06);
    --sts-ot-shadow-md:0 10px 30px -8px rgba(24,26,32,0.16);
    --sts-ot-shadow-glow:0 0 0 4px rgba(24,95,165,0.12);

    position:relative;
    max-width:700px;
    border-radius:var(--sts-ot-radius);
    box-shadow:var(--sts-ot-shadow-md);
    overflow:hidden;
    animation:sts-ot-card-in .45s cubic-bezier(.22,1,.36,1);
}
.sts-ot-card::before{
    content:"";
    position:absolute;
    top:0; left:0; right:0;
    height:4px;
    background:var(--sts-ot-accent-grad);
    background-size:200% 100%;
    animation:sts-ot-gradient-flow 6s linear infinite;
}
.sts-ot-field{
    margin-bottom:1.1rem;
}

/* ---------- Branding header (Logo + Title + Slogan) ---------- */
.sts-ot-brand-header{
    display:flex;
    align-items:center;
    gap:12px;
    padding-bottom:14px;
    margin-bottom:16px;
    border-bottom:1px solid var(--sts-border);
}
.sts-ot-brand-logo{
    flex-shrink:0;
    max-height:46px;
    max-width:150px;
    width:auto;
    height:auto;
    object-fit:contain;
}
.sts-ot-brand-text{
    min-width:0;
}
.sts-ot-brand-title{
    margin:0;
    font-size:16px;
    font-weight:800;
    letter-spacing:-.01em;
    color:var(--sts-ot-accent-1);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.sts-ot-brand-slogan{
    margin:2px 0 0;
    font-size:11.5px;
    font-weight:500;
    color:var(--sts-text-muted);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.sts-ot-error{
    color:var(--sts-ot-danger);
    font-weight:600;
}

/* ---------- shared keyframes ---------- */
@keyframes sts-ot-card-in{
    from{ opacity:0; transform:translateY(10px) scale(.99); }
    to{ opacity:1; transform:translateY(0) scale(1); }
}
@keyframes sts-ot-gradient-flow{
    0%{ background-position:0% 50%; }
    100%{ background-position:200% 50%; }
}
@keyframes sts-ot-fade-slide-in{
    from{ opacity:0; transform:translateY(10px); }
    to{ opacity:1; transform:translateY(0); }
}
@keyframes sts-ot-pop-in{
    0%{ opacity:0; transform:scale(.85); }
    70%{ opacity:1; transform:scale(1.04); }
    100%{ opacity:1; transform:scale(1); }
}
@keyframes sts-ot-pulse-ring{
    0%{ box-shadow:0 0 0 0 rgba(24,95,165,0.35); }
    70%{ box-shadow:0 0 0 8px rgba(24,95,165,0); }
    100%{ box-shadow:0 0 0 0 rgba(24,95,165,0); }
}
@keyframes sts-ot-critical-pulse{
    0%, 100%{ box-shadow:0 0 0 0 rgba(224,57,44,0.35); }
    50%{ box-shadow:0 0 0 6px rgba(224,57,44,0); }
}
@keyframes sts-ot-shimmer{
    0%{ background-position:-200px 0; }
    100%{ background-position:200px 0; }
}
@keyframes sts-ot-spin{
    to{ transform:rotate(360deg); }
}
@keyframes sts-ot-check-pop{
    0%{ transform:scale(0) rotate(-20deg); opacity:0; }
    60%{ transform:scale(1.25) rotate(6deg); opacity:1; }
    100%{ transform:scale(1) rotate(0); }
}

/* ---------- Registration step ---------- */
.sts-ot-step-register .sts-select,
.sts-ot-step-register .sts-input{
    transition:border-color .18s ease, box-shadow .18s ease, transform .1s ease;
}
.sts-ot-step-register .sts-select:focus,
.sts-ot-step-register .sts-input:focus{
    box-shadow:var(--sts-ot-shadow-glow);
    transform:translateY(-1px);
}
.sts-ot-step-register .sts-btn{
    background:var(--sts-ot-accent-grad);
    background-size:160% 160%;
    box-shadow:0 8px 20px -6px rgba(24,95,165,0.5);
    transition:background-position .4s ease, transform .15s ease, box-shadow .15s ease;
}
.sts-ot-step-register .sts-btn:hover{
    background-position:100% 0;
    transform:translateY(-2px);
    box-shadow:0 12px 26px -6px rgba(24,95,165,0.55);
}
.sts-ot-step-register .sts-btn:active{
    transform:translateY(0) scale(.98);
}

/* ---------- Exam header / progress ---------- */
.sts-ot-exam-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    margin-bottom:14px;
    padding-bottom:14px;
    border-bottom:1px dashed var(--sts-border);
}
.sts-ot-exam-topic{
    margin:0;
    font-size:17px;
    font-weight:800;
    letter-spacing:-.01em;
    background:var(--sts-ot-accent-grad);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}
.sts-ot-progress-text{
    margin:3px 0 0;
    font-size:13px;
    font-weight:600;
    color:var(--sts-text-secondary);
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
}
.sts-ot-qtimer-badge{
    display:inline-flex;
    align-items:center;
    gap:4px;
    background:rgba(24,95,165,0.08);
    color:var(--sts-ot-accent-1);
    border:1px solid rgba(24,95,165,0.25);
    border-radius:999px;
    padding:2px 10px;
    font-size:11.5px;
    font-weight:700;
    font-variant-numeric:tabular-nums;
    white-space:nowrap;
}
.sts-ot-badges{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:6px;
    flex-shrink:0;
}
.sts-ot-timer-badge{
    display:inline-flex;
    align-items:center;
    gap:5px;
    flex-shrink:0;
    background:var(--sts-surface-1);
    border:1px solid var(--sts-border);
    border-radius:999px;
    padding:6px 13px;
    font-size:12px;
    font-weight:700;
    color:var(--sts-text-secondary);
    white-space:nowrap;
    transition:transform .15s ease, box-shadow .15s ease;
}
.sts-ot-timer-badge:hover{ transform:translateY(-1px); }
.sts-ot-time-left{
    color:var(--sts-ot-accent-1);
    border-color:var(--sts-ot-accent-1);
    background:rgba(24,95,165,0.07);
    font-variant-numeric:tabular-nums;
}
.sts-ot-time-left.sts-ot-time-critical{
    color:#fff;
    border-color:var(--sts-ot-danger);
    background:var(--sts-ot-danger-grad);
    animation:sts-ot-critical-pulse 1.1s ease-in-out infinite;
}

/* ---------- Answered / Skipped / Unanswered status chips ---------- */
.sts-ot-status-row{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:1.1rem;
}
.sts-ot-status-chip{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:12px;
    font-weight:700;
    padding:6px 12px;
    border-radius:999px;
    border:1px solid var(--sts-border);
    background:var(--sts-surface-1);
    color:var(--sts-text-secondary);
}
.sts-ot-status-dot{
    width:8px;
    height:8px;
    border-radius:50%;
    display:inline-block;
}
.sts-ot-status-answered .sts-ot-status-dot{ background:var(--sts-ot-success); }
.sts-ot-status-skipped .sts-ot-status-dot{ background:var(--sts-ot-skipped); }
.sts-ot-status-unanswered .sts-ot-status-dot{ background:var(--sts-ot-unanswered); }
.sts-ot-status-answered{ color:#0f6b2c; background:rgba(23,163,93,0.1); }
.sts-ot-status-skipped{ color:#8a5510; background:rgba(224,138,31,0.12); }
.sts-ot-status-unanswered{ color:#5b6270; }

/* ---------- Jump-to-question + Topics, side by side in one row ---------- */
.sts-ot-nav-panels{
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:start;
    gap:14px;
    margin-bottom:0.2rem;
}
.sts-ot-nav-panel-topics .sts-ot-chapter-progress{
    margin-bottom:0;
    height:100%;
    box-sizing:border-box;
}
.sts-ot-nav-panel-palette .sts-ot-palette{
    margin-bottom:0;
    height:100%;
    box-sizing:border-box;
}
/* If there's no chapter/topic progress to show (single-chapter exam), let
   the question palette take the full row on its own. */
.sts-ot-nav-panels:has(.sts-ot-chapter-progress[style*="display: none"]) .sts-ot-nav-panel-palette,
.sts-ot-nav-panels:has(.sts-ot-nav-panel-topics:empty) .sts-ot-nav-panel-palette{
    grid-column:1 / -1;
}
@media (max-width:560px){
    .sts-ot-nav-panels{ grid-template-columns:1fr; }
}

/* ---------- Chapter (optional) picker on Step 1 ---------- */
.sts-ot-chapter-optional{
    font-weight:400;
    text-transform:none;
    letter-spacing:0;
    font-size:11px;
    color:var(--sts-text-muted);
}

/* ---------- Chapter-wise dynamic progress ---------- */
.sts-ot-chapter-progress{
    display:none;
    background:var(--sts-surface-1);
    border:1px solid var(--sts-border);
    border-radius:12px;
    padding:14px 16px;
    margin-bottom:1.2rem;
    animation:sts-ot-fade-slide-in .4s ease;
}
.sts-ot-chapter-progress-title{
    display:flex;
    align-items:center;
    gap:6px;
    margin:0 0 10px;
    font-size:11px;
    font-weight:800;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--sts-text-muted);
}
.sts-ot-chapter-progress-title::before{
    content:"";
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--sts-ot-accent-grad);
}
.sts-ot-chapter-row{
    padding:7px 0;
    transition:opacity .2s ease;
}
.sts-ot-chapter-row + .sts-ot-chapter-row{
    border-top:1px solid var(--sts-border);
}
.sts-ot-chapter-label-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:6px;
}
.sts-ot-chapter-name{
    font-size:12.5px;
    font-weight:700;
    color:var(--sts-text-primary);
    letter-spacing:.01em;
}
.sts-ot-chapter-row-current .sts-ot-chapter-name{
    color:var(--sts-ot-accent-1);
}
.sts-ot-chapter-row-current .sts-ot-chapter-name::before{
    content:"\25B8\2005";
    color:var(--sts-ot-accent-1);
}
.sts-ot-chapter-count{
    font-size:11.5px;
    font-weight:700;
    color:var(--sts-text-secondary);
    font-variant-numeric:tabular-nums;
    background:var(--sts-surface-2);
    border-radius:999px;
    padding:1px 8px;
}
.sts-ot-chapter-track{
    height:7px;
    background:var(--sts-surface-2);
    border-radius:999px;
    overflow:hidden;
}
.sts-ot-chapter-fill{
    height:100%;
    width:0%;
    background:var(--sts-ot-success-grad);
    border-radius:999px;
    transition:width .5s cubic-bezier(.22,1,.36,1);
}
.sts-ot-chapter-row-current .sts-ot-chapter-track{
    outline:2px solid var(--sts-ot-accent-1);
    outline-offset:2px;
    border-radius:999px;
}

/* ---------- Question box ---------- */
.sts-ot-question-box{
    position:relative;
    background:linear-gradient(180deg, var(--sts-surface-1), var(--sts-surface-2) 60%);
    border:1px solid var(--sts-border);
    border-left:4px solid var(--sts-ot-accent-1);
    border-radius:12px;
    padding:1.15rem 1.25rem;
    margin-bottom:1.1rem;
    box-shadow:var(--sts-ot-shadow-sm);
    animation:sts-ot-fade-slide-in .35s cubic-bezier(.22,1,.36,1);
}
.sts-ot-q-top-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
}
.sts-ot-q-heading{
    margin:0 0 6px;
    font-size:12px;
    font-weight:800;
    letter-spacing:.03em;
    text-transform:uppercase;
    color:var(--sts-ot-accent-1);
}
.sts-ot-q-chapter-badge{
    display:none;
    flex-shrink:0;
    margin:0 0 6px;
    background:var(--sts-ot-accent-grad);
    color:#fff;
    border-radius:999px;
    padding:4px 11px;
    font-size:11px;
    font-weight:700;
    white-space:nowrap;
    box-shadow:0 3px 8px -2px rgba(24,95,165,0.45);
}
.sts-ot-q-text-en{
    margin:0 0 6px;
    font-size:15.5px;
    font-weight:700;
    line-height:1.45;
    color:var(--sts-text-primary);
}
.sts-ot-q-text-hi{
    margin:0 0 16px;
    font-size:14px;
    line-height:1.5;
    color:var(--sts-text-secondary);
}

.sts-ot-options{
    display:flex;
    flex-direction:column;
    gap:9px;
}
.sts-ot-option{
    position:relative;
    display:flex;
    align-items:flex-start;
    gap:11px;
    background:var(--sts-surface-2);
    border:1.5px solid var(--sts-border);
    border-radius:10px;
    padding:11px 14px;
    cursor:pointer;
    overflow:hidden;
    transition:border-color .18s ease, background-color .18s ease, transform .15s ease, box-shadow .18s ease;
    animation:sts-ot-fade-slide-in .3s ease both;
}
.sts-ot-options .sts-ot-option:nth-child(1){ animation-delay:.02s; }
.sts-ot-options .sts-ot-option:nth-child(2){ animation-delay:.07s; }
.sts-ot-options .sts-ot-option:nth-child(3){ animation-delay:.12s; }
.sts-ot-options .sts-ot-option:nth-child(4){ animation-delay:.17s; }
.sts-ot-option:hover{
    border-color:var(--sts-ot-accent-1);
    transform:translateX(3px);
    box-shadow:var(--sts-ot-shadow-sm);
}
.sts-ot-option-selected{
    border-color:var(--sts-ot-accent-1);
    background:rgba(24,95,165,0.07);
    box-shadow:var(--sts-ot-shadow-glow);
}
.sts-ot-option-selected::after{
    content:"\2713";
    position:absolute;
    top:8px;
    right:10px;
    width:18px;
    height:18px;
    border-radius:50%;
    background:var(--sts-ot-accent-grad);
    color:#fff;
    font-size:11px;
    font-weight:800;
    display:flex;
    align-items:center;
    justify-content:center;
    animation:sts-ot-check-pop .28s ease;
}
.sts-ot-option input[type="radio"]{
    margin-top:3px;
    flex-shrink:0;
    width:16px;
    height:16px;
    accent-color:var(--sts-ot-accent-1);
    cursor:pointer;
}
.sts-ot-option-text{
    display:flex;
    flex-direction:column;
    gap:2px;
}
.sts-ot-option-en{
    font-size:14px;
    font-weight:500;
    color:var(--sts-text-primary);
}
.sts-ot-option-selected .sts-ot-option-en{
    font-weight:700;
    color:var(--sts-ot-accent-1);
}
.sts-ot-option-hi{
    font-size:13px;
    color:var(--sts-text-muted);
}

/* ---------- Nav / palette ---------- */
.sts-ot-nav-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin:1rem 0;
}
.sts-ot-nav-row .sts-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:auto;
    flex:0 0 auto;
    min-width:118px;
    height:42px;
    padding:0 20px;
    margin:0;
    transition:transform .15s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease;
}
.sts-ot-next-btn{
    margin-left:auto;
    background:var(--sts-ot-accent-grad);
    box-shadow:0 8px 20px -6px rgba(24,95,165,0.5);
}
.sts-ot-next-btn:hover{ transform:translateY(-2px); box-shadow:0 12px 24px -6px rgba(24,95,165,0.55); }
.sts-ot-next-btn:active{ transform:translateY(0) scale(.98); }
.sts-ot-prev-btn:hover:not(:disabled){ transform:translateY(-2px); background:var(--sts-info-bg, #eaf2fb); }
.sts-ot-prev-btn:disabled{
    opacity:.45;
    cursor:not-allowed;
}
.sts-ot-submit-btn{
    background:var(--sts-ot-success-grad) !important;
    box-shadow:0 8px 20px -6px rgba(23,163,93,0.5);
    transition:transform .15s ease, box-shadow .15s ease;
}
.sts-ot-submit-btn:hover{ transform:translateY(-2px); box-shadow:0 12px 24px -6px rgba(23,163,93,0.55); }
.sts-ot-submit-btn:active{ transform:translateY(0) scale(.98); }
@media (max-width:420px){
    .sts-ot-nav-row .sts-btn{ min-width:0; flex:1 1 0; padding:0 12px; }
}

.sts-ot-palette-label{
    display:flex;
    align-items:center;
    gap:6px;
    margin:0 0 8px;
    font-size:11px;
    font-weight:800;
    letter-spacing:.04em;
    text-transform:uppercase;
    color:var(--sts-text-muted);
}
.sts-ot-palette-label::before{
    content:"";
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--sts-ot-accent-grad);
}
.sts-ot-palette{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(38px, 1fr));
    gap:7px;
    margin-bottom:1.2rem;
    max-height:230px;
    overflow-y:auto;
    padding:10px;
    background:var(--sts-surface-1);
    border:1px solid var(--sts-border);
    border-radius:12px;
    scrollbar-width:thin;
}
.sts-ot-palette::-webkit-scrollbar{ width:6px; }
.sts-ot-palette::-webkit-scrollbar-thumb{ background:var(--sts-border); border-radius:999px; }
.sts-ot-palette-btn{
    box-sizing:border-box;
    width:100%;
    min-width:34px;
    aspect-ratio:1 / 1;
    min-height:34px;
    border-radius:50%;
    border:1.5px solid var(--sts-border);
    background:var(--sts-surface-2);
    color:var(--sts-text-secondary);
    font-size:12px;
    font-weight:700;
    line-height:1;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    white-space:nowrap !important;
    word-break:keep-all;
    overflow-wrap:normal;
    flex-shrink:0;
    padding:0;
    font-variant-numeric:tabular-nums;
    transition:transform .15s cubic-bezier(.34,1.56,.64,1), border-color .15s ease, background-color .15s ease, box-shadow .15s ease, color .15s ease;
}
.sts-ot-palette-btn:hover{
    transform:translateY(-2px) scale(1.06);
    border-color:var(--sts-ot-accent-1);
    box-shadow:var(--sts-ot-shadow-sm);
}
.sts-ot-palette-answered{
    background:var(--sts-ot-success-grad);
    border-color:transparent;
    color:#fff;
    box-shadow:0 3px 8px -2px rgba(23,163,93,0.45);
}
.sts-ot-palette-skipped{
    background:var(--sts-ot-skipped-grad);
    border-color:transparent;
    color:#fff;
    box-shadow:0 3px 8px -2px rgba(224,138,31,0.45);
}
.sts-ot-palette-current{
    border-color:var(--sts-ot-accent-1);
    background:var(--sts-ot-accent-grad);
    color:#fff;
    transform:scale(1.08);
    animation:sts-ot-pulse-ring 1.6s ease-out infinite;
}

/* ---------- Palette legend (Answered / Skipped / Unanswered / Current) ---------- */
.sts-ot-palette-legend{
    display:flex;
    flex-wrap:wrap;
    gap:10px 14px;
    margin-top:10px;
    font-size:11px;
    font-weight:600;
    color:var(--sts-text-secondary);
}
.sts-ot-palette-legend span{
    display:inline-flex;
    align-items:center;
    gap:6px;
}
.sts-ot-legend-dot{
    width:9px;
    height:9px;
    border-radius:50%;
    display:inline-block;
}
.sts-ot-legend-answered{ background:var(--sts-ot-success-grad); }
.sts-ot-legend-skipped{ background:var(--sts-ot-skipped-grad); }
.sts-ot-legend-unanswered{ background:var(--sts-surface-2); border:1px solid var(--sts-border); }
.sts-ot-legend-current{ background:#fff; border:2px solid var(--sts-ot-accent-1); }

/* ---------- Overall Progress: single animated circular ring ---------- */
.sts-ot-overall-progress{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
    background:var(--sts-surface-1);
    border:1px solid var(--sts-border);
    border-radius:12px;
    padding:16px;
    margin-bottom:0.9rem;
}
.sts-ot-overall-progress-title{
    margin:0;
    font-size:11px;
    font-weight:800;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--sts-text-muted);
}
.sts-ot-overall-ring-wrap{
    position:relative;
    width:160px;
    height:160px;
}
.sts-ot-overall-ring-svg{
    width:100%;
    height:100%;
    transform:rotate(-90deg);
}
.sts-ot-overall-ring-track{
    fill:none;
    stroke:var(--sts-surface-2);
    stroke-width:11;
}
.sts-ot-overall-ring-seg{
    fill:none;
    stroke-width:11;
    stroke-linecap:round;
    stroke-dasharray:0 999;
    transition:stroke-dasharray .9s cubic-bezier(.22,1,.36,1), stroke-dashoffset .9s cubic-bezier(.22,1,.36,1);
}
.sts-ot-overall-seg-answered{ stroke:var(--sts-ot-success); }
.sts-ot-overall-seg-skipped{ stroke:var(--sts-ot-skipped); }
.sts-ot-overall-ring-center{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
}
.sts-ot-overall-ring-pct{
    font-size:32px;
    font-weight:800;
    color:var(--sts-text-primary);
    font-variant-numeric:tabular-nums;
    line-height:1;
}
.sts-ot-overall-ring-label{
    font-size:11px;
    font-weight:700;
    color:var(--sts-text-muted);
    text-transform:uppercase;
    letter-spacing:.05em;
    margin-top:5px;
}

/* ---------- Overall Progress: Answered/Skipped/Unanswered breakdown list ---------- */
.sts-ot-overall-ring-legend{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    margin-top:4px;
    width:100%;
}
.sts-ot-overall-ring-legend span{
    display:inline-flex;
    align-items:center;
    gap:7px;
    font-size:13px;
    font-weight:600;
    color:var(--sts-text-secondary);
}
.sts-ot-overall-ring-legend b{
    font-weight:800;
    color:var(--sts-text-primary);
}

/* ---------- Exit-warning modal ---------- */
.sts-ot-exit-modal{
    position:fixed;
    inset:0;
    z-index:9999;
    background:rgba(18,20,26,0.6);
    backdrop-filter:blur(3px);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
    animation:sts-ot-fade-slide-in .2s ease;
}
.sts-ot-exit-modal-box{
    background:var(--sts-surface-0, #fff);
    border-radius:16px;
    padding:22px 24px;
    max-width:380px;
    width:100%;
    box-shadow:0 20px 50px rgba(0,0,0,0.3);
    animation:sts-ot-pop-in .3s cubic-bezier(.22,1,.36,1);
    border-top:4px solid var(--sts-ot-danger);
}
.sts-ot-exit-modal-title{
    margin:0 0 8px;
    font-size:17px;
    font-weight:800;
    color:var(--sts-text-primary);
}
.sts-ot-exit-modal-msg{
    margin:0 0 18px;
    font-size:13.5px;
    line-height:1.55;
    color:var(--sts-text-secondary);
}
.sts-ot-exit-modal-actions{
    display:flex;
    gap:10px;
}
.sts-ot-exit-modal-actions .sts-btn{
    margin:0;
    flex:1;
    transition:transform .15s ease;
}
.sts-ot-exit-modal-actions .sts-btn:hover{ transform:translateY(-2px); }
.sts-ot-exit-leave-btn{ background:var(--sts-ot-danger-grad) !important; }

/* ---------- Review chapter tag ---------- */
.sts-ot-review-chapter-tag{
    margin-left:8px;
    display:inline-block;
    background:var(--sts-ot-accent-grad);
    color:#fff;
    border-radius:999px;
    padding:2px 10px;
    font-size:10.5px;
    font-weight:700;
    vertical-align:middle;
    white-space:nowrap;
}
.sts-ot-review-time-tag{
    margin-left:8px;
    display:inline-block;
    background:var(--sts-surface-1);
    color:var(--sts-text-secondary);
    border:1px solid var(--sts-border);
    border-radius:999px;
    padding:1px 9px;
    font-size:10.5px;
    font-weight:700;
    vertical-align:middle;
    white-space:nowrap;
    font-variant-numeric:tabular-nums;
}

/* ---------- Result: per-topic animated circular progress rings ---------- */
.sts-ot-topic-rings{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:10px 6px;
    margin:0.4rem 0 1.1rem;
}
.sts-ot-topic-ring-btn{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
    width:92px;
    background:none;
    border:none;
    cursor:pointer;
    padding:8px 4px;
    border-radius:12px;
    transition:background-color .15s ease, transform .15s ease;
}
.sts-ot-topic-ring-btn:hover{ background:var(--sts-surface-1); transform:translateY(-2px); }
.sts-ot-topic-ring-active{ background:var(--sts-surface-1); }
.sts-ot-topic-ring-wrap{
    position:relative;
    width:64px;
    height:64px;
}
.sts-ot-topic-ring-svg{ width:64px; height:64px; transform:rotate(-90deg); }
.sts-ot-ring-track{
    fill:none;
    stroke:var(--sts-border);
    stroke-width:7;
}
.sts-ot-ring-fill{
    fill:none;
    stroke:url(#sts-ot-ring-grad-fallback);
    stroke:var(--sts-ot-accent-1);
    stroke-width:7;
    stroke-linecap:round;
}
.sts-ot-topic-ring-active .sts-ot-ring-fill{ stroke:#1a9b53; }
.sts-ot-topic-ring-pct{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:13px;
    font-weight:800;
    color:var(--sts-text-primary);
    font-variant-numeric:tabular-nums;
}
.sts-ot-topic-ring-label{
    margin:0;
    font-size:11px;
    font-weight:700;
    color:var(--sts-text-secondary);
    text-align:center;
    line-height:1.25;
    max-width:88px;
    overflow:hidden;
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
}

/* ---------- Result: chapter-wise accordion (one chapter open at a time) ---------- */
.sts-ot-chapter-accordion{
    display:flex;
    flex-direction:column;
    gap:10px;
}
.sts-ot-chapter-section{
    border:1px solid var(--sts-border);
    border-radius:12px;
    overflow:hidden;
}
.sts-ot-chapter-section-head{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:12px 15px;
    background:var(--sts-surface-1);
    border:none;
    cursor:pointer;
    font-size:13.5px;
    font-weight:800;
    color:var(--sts-text-primary);
    text-align:left;
}
.sts-ot-chapter-section-open{
    background:var(--sts-ot-accent-grad);
    color:#fff;
}
.sts-ot-chapter-section-meta{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:11.5px;
    font-weight:700;
    color:var(--sts-text-muted);
    white-space:nowrap;
}
.sts-ot-chapter-section-open .sts-ot-chapter-section-meta{ color:rgba(255,255,255,0.9); }
.sts-ot-chapter-section-caret{
    display:inline-block;
    transition:transform .2s ease;
}
.sts-ot-chapter-section-open .sts-ot-chapter-section-caret{ transform:rotate(180deg); }
.sts-ot-chapter-section-body{
    padding:12px;
    display:flex;
    flex-direction:column;
    gap:10px;
    animation:sts-ot-fade-slide-in .25s ease;
}
.sts-ot-chapter-section-body .sts-ot-review-item{ margin:0; }

/* ---------- Result / final preview ---------- */
.sts-ot-step-result .sts-card-title{
    background:var(--sts-ot-accent-grad);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    display:inline-block;
}
.sts-ot-result-candidate{
    margin:-6px 0 1.2rem;
    font-size:13px;
    color:var(--sts-text-secondary);
}
.sts-ot-score-grid{
    display:grid;
    grid-template-columns:repeat(4, minmax(0,1fr));
    gap:10px;
    margin-bottom:1.1rem;
}
.sts-ot-score-grid .sts-metric{
    border-radius:12px;
    background:var(--sts-surface-1);
    border:1px solid var(--sts-border);
    transition:transform .18s ease, box-shadow .18s ease;
    animation:sts-ot-pop-in .35s ease both;
}
.sts-ot-score-grid .sts-metric:nth-child(1){ animation-delay:.02s; }
.sts-ot-score-grid .sts-metric:nth-child(2){ animation-delay:.09s; }
.sts-ot-score-grid .sts-metric:nth-child(3){ animation-delay:.16s; }
.sts-ot-score-grid .sts-metric:nth-child(4){ animation-delay:.23s; }
.sts-ot-score-grid .sts-metric:hover{
    transform:translateY(-3px);
    box-shadow:var(--sts-ot-shadow-md);
}
.sts-ot-score-summary{
    display:flex;
    justify-content:space-between;
    background:linear-gradient(135deg, rgba(24,95,165,0.08), rgba(91,61,246,0.08));
    border:1px solid var(--sts-border);
    border-radius:12px;
    padding:13px 16px;
    margin-bottom:1.5rem;
    font-size:14px;
}
.sts-ot-score-summary p{ margin:0; }
.sts-ot-score-summary strong{ color:var(--sts-ot-accent-1); font-size:15px; }

.sts-ot-result-actions{
    margin-bottom:1.5rem;
}
.sts-ot-download-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:auto;
    min-width:220px;
    gap:8px;
    text-decoration:none !important;
    background:var(--sts-ot-accent-grad) !important;
    box-shadow:0 8px 20px -6px rgba(24,95,165,0.5);
    transition:transform .15s ease, box-shadow .15s ease, background-position .3s ease;
    background-size:160% 160%;
}
.sts-ot-download-btn:hover,
.sts-ot-download-btn:focus{
    transform:translateY(-2px);
    box-shadow:0 12px 24px -6px rgba(24,95,165,0.55);
    text-decoration:none !important;
    background-position:100% 0;
}
.sts-ot-download-icon{
    flex-shrink:0;
    color:#fff;
}
@media (max-width:420px){
    .sts-ot-download-btn{ width:100%; }
}

.sts-ot-review-title{
    margin:0 0 .8rem;
    font-size:16px;
    font-weight:800;
    display:flex;
    align-items:center;
    gap:8px;
}
.sts-ot-review-title::before{
    content:"";
    width:5px;
    height:16px;
    border-radius:3px;
    background:var(--sts-ot-accent-grad);
}
.sts-ot-review-list{
    display:flex;
    flex-direction:column;
    gap:11px;
    margin-bottom:1.3rem;
}
.sts-ot-review-item{
    border-radius:10px;
    padding:11px 14px;
    background:var(--sts-surface-1);
    border:1px solid var(--sts-border);
    border-left-width:5px;
    transition:transform .15s ease, box-shadow .15s ease;
    animation:sts-ot-fade-slide-in .3s ease both;
}
.sts-ot-review-item:hover{
    transform:translateX(3px);
    box-shadow:var(--sts-ot-shadow-sm);
}
.sts-ot-review-correct{
    border-left-color:var(--sts-ot-success);
}
.sts-ot-review-wrong{
    border-left-color:var(--sts-ot-danger);
}
.sts-ot-review-skipped{
    border-left-color:var(--sts-text-muted);
}
.sts-ot-review-q{
    margin:0 0 3px;
    font-size:14px;
    font-weight:700;
    color:var(--sts-text-primary);
}
.sts-ot-review-q-hi{
    margin:0 0 9px;
    font-size:13px;
    color:var(--sts-text-secondary);
}
.sts-ot-review-opt{
    margin:0 0 4px;
    font-size:13px;
    color:var(--sts-text-secondary);
    padding-left:2px;
}
.sts-ot-review-opt-correct{
    color:var(--sts-ot-success);
    font-weight:700;
}
.sts-ot-review-opt-wrong{
    color:var(--sts-ot-danger);
    font-weight:700;
}
.sts-ot-review-tag{
    margin:5px 0 0;
    font-size:12px;
    font-style:italic;
    color:var(--sts-text-muted);
}

.sts-ot-retry-btn{
    transition:transform .15s ease, box-shadow .15s ease;
}
.sts-ot-retry-btn:hover{ transform:translateY(-2px); }

@media (max-width:480px){
    .sts-ot-score-grid{
        grid-template-columns:repeat(2, minmax(0,1fr));
    }
    .sts-ot-score-summary{
        flex-direction:column;
        gap:8px;
    }
    .sts-ot-exam-topic{ font-size:15px; }
    .sts-ot-q-text-en{ font-size:14.5px; }
}

/* ---------- Online Test v2: Category/Exam meta ---------- */
.sts-ot-exam-meta{
    margin:-6px 0 14px;
    font-size:12px;
    font-weight:600;
    color:var(--sts-ot-accent-1);
}
.sts-ot-r-negative-note{
    font-size:12px;
    color:var(--sts-ot-danger);
    font-weight:600;
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce){
    .sts-ot-card,
    .sts-ot-card::before,
    .sts-ot-overall-ring-seg,
    .sts-ot-chapter-progress,
    .sts-ot-question-box,
    .sts-ot-option,
    .sts-ot-option-selected::after,
    .sts-ot-palette-current,
    .sts-ot-time-left.sts-ot-time-critical,
    .sts-ot-exit-modal,
    .sts-ot-exit-modal-box,
    .sts-ot-score-grid .sts-metric,
    .sts-ot-review-item{
        animation:none !important;
        transition:none !important;
    }
}