.sts-app{font-family:Arial,sans-serif;background:#f5f6fa;border:1px solid #ddd}.sts-login-panel{max-width:420px;margin:30px auto;background:#fff;padding:24px;border-radius:10px;box-shadow:0 3px 18px rgba(0,0,0,.08)}#sts-access-code{width:100%;font-size:18px;padding:12px;margin-bottom:12px}#sts-login-btn,#sts-finish-test,.sts-save-answer,.sts-flag-question,.sts-materials-open{padding:10px 14px;border:0;border-radius:5px;cursor:pointer}#sts-login-btn,#sts-finish-test,.sts-nav-item.flagged{background:#ffd54f;color:#222}.sts-finish-bar{padding:18px;background:#fff;border-top:1px solid #ddd;text-align:center}.sts-modal{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:9999;display:flex;align-items:center;justify-content:center}.sts-modal-box{background:#fff;max-width:800px;width:90%;max-height:80vh;overflow:auto;border-radius:10px;padding:24px;position:relative}.sts-modal-close{position:absolute;right:12px;top:8px;font-size:28px;background:transparent;border:0;cursor:pointer}@media(max-width:900px){.sts-layout{grid-template-columns:1fr}.sts-nav{position:static;grid-template-columns:repeat(8,1fr)}.sts-top{flex-wrap:wrap}}

#sts-student-login,#sts-student-password{width:100%;font-size:18px;padding:12px;margin-bottom:12px;box-sizing:border-box}

.sts-stage-tabs{display:flex;background:#fff;border-bottom:1px solid #ddd}
.sts-stage-tab{flex:1;padding:16px;border:0;background:#e9edf5;cursor:pointer;font-weight:700}
.sts-stage-tab.active{background:#fff;border-bottom:4px solid #c62828}
.sts-stage-code-panel{background:#fff;margin:18px;padding:18px;border:1px solid #ddd;border-radius:8px}
.sts-stage-code-input{font-size:18px;padding:10px;min-width:260px;margin-right:8px}
.sts-open-stage{background:#c62828;color:#fff;border:0;border-radius:5px;padding:11px 14px;cursor:pointer}
.sts-stage-message{margin-left:10px;font-weight:700;color:#c62828}


/* v1.0.0 stage selection repair */
#sts-student-login,#sts-student-password{width:100%;font-size:18px;padding:12px;margin-bottom:12px;box-sizing:border-box}
.sts-stage-tabs{display:flex;background:#fff;border-bottom:1px solid #ddd;margin-top:0}
.sts-stage-tab{flex:1;padding:16px;border:0;background:#e9edf5;cursor:pointer;font-weight:700;font-size:16px}
.sts-stage-tab.active{background:#fff;border-bottom:4px solid #c62828}
.sts-stage-code-panel{background:#fff;margin:18px;padding:18px;border:1px solid #ddd;border-radius:8px}
.sts-stage-code-input{font-size:18px;padding:10px;min-width:260px;margin-right:8px}
.sts-open-stage{background:#c62828;color:#fff;border:0;border-radius:5px;padding:11px 14px;cursor:pointer}
.sts-stage-message{margin-left:10px;font-weight:700;color:#c62828}


/* v1.0.1 stage-only mode and answer save states */
.sts-stage-summary{
    background:#fff;
    margin:18px;
    padding:16px;
    border:1px solid #ddd;
    border-radius:8px;
}

.sts-stage-tab.finished{
    background:#d1d5db;
    color:#374151;
}

.sts-save-answer.saved{
    background:#9ca3af !important;
    color:#fff !important;
}

.sts-save-answer.unsaved{
    background:#f59e0b !important;
    color:#111827 !important;
}

.sts-nav-item.unsaved{
    background:#f59e0b;
    color:#111827;
}

.sts-nav-item.saved{
    background:#9ca3af;
    color:#fff;
}


/* v1.0.2 requested UI changes */
.sts-top-actions{
    display:flex;
    align-items:center;
    gap:12px;
    margin-left:auto;
}

#sts-finish-test.sts-finish-control{
    background:#c62828;
    color:#fff;
    border:0;
    border-radius:5px;
    padding:10px 14px;
    cursor:pointer;
    font-weight:700;
}

body.sts-testing-mode header nav,
body.sts-testing-mode .site-header nav,
body.sts-testing-mode .main-navigation,
body.sts-testing-mode .primary-navigation,
body.sts-testing-mode .secondary-navigation,
body.sts-testing-mode .wp-block-navigation,
body.sts-testing-mode #site-navigation,
body.sts-testing-mode .site-navigation,
body.sts-testing-mode .navbar,
body.sts-testing-mode .primary-menu,
body.sts-testing-mode .menu-primary-container,
body.sts-testing-mode .menu-main-menu-container{
    display:none !important;
}

@media(max-width:900px){
    .sts-top-actions{width:100%;justify-content:flex-end;}
    }


/* v1.0.3 save-button state and original test width */
.sts-save-answer,
.sts-save-answer.saved,
.sts-save-answer:disabled{
    background:#f8fafc !important;
    color:#6b7280 !important;
    border:1px solid #e5e7eb !important;
    font-weight:700;
    cursor:not-allowed !important;
    opacity:1 !important;
}

.sts-save-answer.unsaved:not(:disabled){
    background:#c62828 !important;
    color:#fff !important;
    border:1px solid #b91c1c !important;
    cursor:pointer !important;
}

.sts-nav-item{
    background:#f8fafc !important;
    color:#374151 !important;
    border:1px solid #e5e7eb !important;
}

.sts-nav-item.unsaved{
    background:#f8fafc !important;
    color:#374151 !important;
    border-color:#e5e7eb !important;
}

.sts-nav-item.saved{
    background:#c62828 !important;
    color:#fff !important;
    border-color:#b91c1c !important;
}

body.sts-testing-mode .sts-app{
    width:auto !important;
    max-width:initial !important;
    margin:initial !important;
}

body.sts-testing-mode .sts-layout{
    grid-template-columns:1fr 150px !important;
    gap:18px !important;
}

@media(max-width:900px){
    .sts-top-actions{width:100%;justify-content:flex-end;}
    body.sts-testing-mode .sts-layout{grid-template-columns:1fr !important;}
}


/* v1.0.4 keep question navigation on the right */
body.sts-testing-mode .sts-layout,
.sts-app .sts-layout{
    display:grid !important;
    grid-template-columns:minmax(0, 1fr) 150px !important;
    gap:18px !important;
    align-items:start !important;
    width:100% !important;
    box-sizing:border-box !important;
}

.sts-app .sts-questions{
    min-width:0 !important;
    width:100% !important;
}

.sts-app .sts-nav{
    display:grid !important;
    grid-template-columns:repeat(3, 1fr) !important;
    gap:8px !important;
    align-content:start !important;
    align-self:start !important;
    position:sticky !important;
    top:12px !important;
    width:150px !important;
    min-width:150px !important;
    max-width:150px !important;
}

.sts-app .sts-nav-item{
    width:42px !important;
    height:42px !important;
    padding:0 !important;
    border-radius:6px !important;
}

@media(max-width:700px){
    body.sts-testing-mode .sts-layout,
    .sts-app .sts-layout{
        grid-template-columns:1fr !important;
    }
    .sts-app .sts-nav{
        position:static !important;
        width:100% !important;
        min-width:0 !important;
        max-width:none !important;
        grid-template-columns:repeat(8, 42px) !important;
        justify-content:start !important;
    }
}


/* v1.0.5 footer hiding, question spacing, slightly wider question area */
body.sts-testing-mode footer,
body.sts-testing-mode .site-footer,
body.sts-testing-mode #colophon,
body.sts-testing-mode .footer,
body.sts-testing-mode .footer-widgets,
body.sts-testing-mode .wp-site-blocks > footer,
body.sts-testing-mode [role="contentinfo"]{
    display:none !important;
    visibility:hidden !important;
    height:0 !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
}

.sts-question-text{
    margin-bottom:20px !important;
}

.sts-question .sts-answers{
    margin-top:18px !important;
}

.sts-question .sts-answer:first-child{
    margin-top:0 !important;
}

body.sts-testing-mode .sts-layout,
.sts-app .sts-layout{
    grid-template-columns:minmax(0, 1fr) 132px !important;
    gap:14px !important;
}

.sts-app .sts-nav{
    width:132px !important;
    min-width:132px !important;
    max-width:132px !important;
    grid-template-columns:repeat(3, 40px) !important;
    gap:6px !important;
}

.sts-app .sts-nav-item{
    width:40px !important;
    height:40px !important;
}

@media(max-width:700px){
    body.sts-testing-mode .sts-layout,
    .sts-app .sts-layout{
        grid-template-columns:1fr !important;
    }
    .sts-app .sts-nav{
        width:100% !important;
        min-width:0 !important;
        max-width:none !important;
        grid-template-columns:repeat(8, 40px) !important;
    }
}


/* v1.0.6 fixed top controls and subject/materials layout */
.sts-test-panel{
    position:relative !important;
}

.sts-top{
    position:sticky !important;
    top:0 !important;
    z-index:99998 !important;
    display:flex !important;
    align-items:center !important;
    gap:14px !important;
    justify-content:flex-end !important;
    background:#ffffff !important;
    border-bottom:1px solid #e5e7eb !important;
    box-shadow:0 3px 12px rgba(0,0,0,.08) !important;
    padding:10px 16px !important;
}

body.admin-bar .sts-top{
    top:32px !important;
}

.sts-top .sts-brand{
    margin-right:auto !important;
    font-weight:700 !important;
}

.sts-top-actions{
    margin-left:auto !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:10px !important;
}

#sts-timer{
    background:#c62828 !important;
    color:#fff !important;
    font-size:24px !important;
    line-height:1 !important;
    font-weight:800 !important;
    letter-spacing:1px !important;
    padding:10px 16px !important;
    border-radius:8px !important;
    min-width:132px !important;
    text-align:center !important;
    box-shadow:0 2px 8px rgba(198,40,40,.25) !important;
}

#sts-finish-test.sts-finish-control,
#sts-finish-test{
    background:#bbf7d0 !important;
    color:#14532d !important;
    border:1px solid #86efac !important;
    border-radius:6px !important;
    padding:7px 10px !important;
    font-size:13px !important;
    line-height:1.15 !important;
    min-height:34px !important;
    font-weight:700 !important;
    cursor:pointer !important;
}

#sts-finish-test.sts-finish-control:hover,
#sts-finish-test:hover{
    background:#86efac !important;
}

.sts-subject-bar{
    align-items:stretch !important;
    gap:12px !important;
    background:#fff !important;
    padding:12px 16px !important;
    border-bottom:1px solid #e5e7eb !important;
    flex-wrap:wrap !important;
}

.sts-subject-tabs{
    display:flex !important;
    gap:10px !important;
    flex-wrap:wrap !important;
    align-items:stretch !important;
}

.sts-subject-tab{
    background:#e9edf5 !important;
    color:#111827 !important;
    border:1px solid #cbd5e1 !important;
    border-radius:8px !important;
    padding:14px 22px !important;
    min-height:48px !important;
    font-size:17px !important;
    font-weight:800 !important;
    cursor:pointer !important;
}

.sts-subject-tab.active{
    background:#bbf7d0 !important;
    color:#14532d !important;
    border-color:#86efac !important;
    box-shadow:0 2px 8px rgba(34,197,94,.16) !important;
}

.sts-materials-near-subjects{
    background:#f8fafc !important;
    color:#111827 !important;
    border:1px solid #cbd5e1 !important;
    border-radius:8px !important;
    padding:14px 18px !important;
    min-height:48px !important;
    font-size:16px !important;
    font-weight:800 !important;
    cursor:pointer !important;
    margin-left:auto !important;
}

.sts-materials-near-subjects:hover{
    background:#e2e8f0 !important;
}

/* compensate sticky header when scrolling from right navigation */
.sts-question{
    scroll-margin-top:92px !important;
}

@media(max-width:900px){
    .sts-top{
        flex-wrap:wrap !important;
        justify-content:flex-end !important;
    }
    .sts-top .sts-brand{
        width:100% !important;
        margin-right:0 !important;
    }
    .sts-top-actions{
        width:100% !important;
    }
    #sts-timer{
        font-size:20px !important;
        min-width:116px !important;
    }
    .sts-subject-bar{
        flex-direction:column !important;
    }
    .sts-materials-near-subjects{
        margin-left:0 !important;
        width:100% !important;
    }
}


/* v1.0.7 reduce gap between answer marker and answer text */
.sts-app .sts-answer{
    display:flex !important;
    align-items:flex-start !important;
    gap:4px !important;
    column-gap:4px !important;
}

.sts-app .sts-answer input[type="radio"],
.sts-app .sts-answer input[type="checkbox"]{
    margin:2px 4px 0 0 !important;
    flex:0 0 auto !important;
}

.sts-app .sts-answer span{
    margin-left:0 !important;
    padding-left:0 !important;
}


/* v1.0.12 subject filtering */
.sts-subject-tab[data-subject="all"]{
    border:2px solid rgba(76, 175, 80, .55);
}


/* v1.0.14 fixed right question navigation and subject switch confirmation */
body.sts-testing-mode .sts-app .sts-nav,
.sts-app .sts-nav{
    position:sticky !important;
    top:96px !important;
    align-self:start !important;
    max-height:calc(100vh - 112px) !important;
    overflow-y:auto !important;
    z-index:99990 !important;
    background:#f5f6fa !important;
    padding:6px !important;
    border-radius:8px !important;
}

body.admin-bar.sts-testing-mode .sts-app .sts-nav{
    top:128px !important;
}

.sts-subject-switch-dialog{
    position:fixed !important;
    inset:0 !important;
    z-index:100000 !important;
    background:rgba(15,23,42,.55) !important;
    display:none !important;
    align-items:center !important;
    justify-content:center !important;
    padding:20px !important;
    box-sizing:border-box !important;
}

.sts-subject-switch-dialog.is-open{
    display:flex !important;
}

.sts-subject-switch-box{
    width:min(520px, 100%) !important;
    background:#fff !important;
    border-radius:12px !important;
    padding:24px !important;
    box-shadow:0 20px 55px rgba(0,0,0,.24) !important;
    border:1px solid #e5e7eb !important;
}

.sts-subject-switch-box h3{
    margin:0 0 12px !important;
    font-size:22px !important;
}

.sts-subject-switch-box p{
    margin:0 0 18px !important;
    font-size:16px !important;
    line-height:1.45 !important;
}

.sts-subject-switch-actions{
    display:flex !important;
    gap:12px !important;
    justify-content:flex-end !important;
    flex-wrap:wrap !important;
}

.sts-confirm-subject-switch,
.sts-cancel-subject-switch{
    border:0 !important;
    border-radius:8px !important;
    padding:10px 14px !important;
    font-weight:700 !important;
    cursor:pointer !important;
}

.sts-confirm-subject-switch{
    background:#c62828 !important;
    color:#fff !important;
}

.sts-cancel-subject-switch{
    background:#f8fafc !important;
    color:#111827 !important;
    border:1px solid #d1d5db !important;
}

@media(max-width:700px){
    body.sts-testing-mode .sts-app .sts-nav,
    .sts-app .sts-nav{
        position:static !important;
        max-height:none !important;
        overflow:visible !important;
    }
}


/* v1.0.18 matching question/table answers */
.sts-matching-front{
    margin-top:12px;
}

.sts-matching-front-grid{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(220px,0.8fr);
    gap:24px;
    margin-bottom:16px;
}

.sts-matching-front h4{
    margin:0 0 8px;
}

.sts-matching-left-list{
    margin:0 0 0 24px;
}

.sts-matching-left-list li{
    margin:6px 0;
}

.sts-matching-options-list div{
    margin:6px 0;
}

.sts-matching-table{
    border-collapse:collapse;
    margin-top:10px;
    background:#fff;
}

.sts-matching-table th,
.sts-matching-table td{
    border:1px solid #9ca3af;
    width:44px;
    height:36px;
    text-align:center;
    vertical-align:middle;
}

.sts-matching-table th:first-child{
    width:40px;
}

.sts-matching-table input[type="radio"]{
    margin:0;
}

@media(max-width:700px){
    .sts-matching-front-grid{
        grid-template-columns:1fr;
    }
}


/* v1.0.19 math formulas */
.sts-question-text mjx-container,
.sts-answer mjx-container,
.sts-matching-front mjx-container{
    max-width:100%;
}
.sts-question-text,
.sts-answer span,
.sts-matching-options-list,
.sts-matching-left-list{
    overflow-wrap:anywhere;
}


/* v1.0.22 answer images */
.sts-answer-content{
    display:block;
}
.sts-answer-image{
    margin-top:8px;
}
.sts-answer-image img{
    max-width:260px;
    max-height:180px;
    width:auto;
    height:auto;
    border:1px solid #ddd;
    background:#fff;
    padding:4px;
    border-radius:4px;
}
.sts-matching-option-front{
    margin:8px 0;
}


/* v1.0.25 free answer questions */
.sts-free-answer-box{
    margin-top:18px;
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
}

.sts-free-answer-label{
    font-weight:700;
}

.sts-free-answer-input{
    min-width:280px;
    max-width:420px;
    width:40%;
    padding:10px 12px;
    font-size:18px;
    border:1px solid #9ca3af;
    border-radius:4px;
    background:#fff;
}


/* v1.0.31 stage/result summaries */
.sts-stage-count-summary{
    display:inline-block;
    margin:10px 0;
    padding:10px 18px;
    border-radius:8px;
    background:#eef7ee;
    border:1px solid #b7dfb7;
    color:#1d6b1d;
    font-size:24px;
}

.sts-final-summary{
    max-width:900px;
    margin:22px auto;
    background:#fff;
    border:1px solid #dcdcde;
    border-radius:10px;
    padding:22px;
    box-shadow:0 2px 12px rgba(0,0,0,.06);
}

.sts-final-summary h3{
    margin-top:0;
    font-size:24px;
}

.sts-final-summary-table{
    width:100%;
    border-collapse:collapse;
    margin:14px 0 18px;
    background:#fff;
}

.sts-final-summary-table th,
.sts-final-summary-table td{
    border:1px solid #dcdcde;
    padding:12px 14px;
    text-align:left;
    vertical-align:middle;
}

.sts-final-summary-table thead th{
    background:#f6f7f7;
}

.sts-final-summary-table .sts-final-score-head,
.sts-final-summary-table .sts-final-score-cell{
    background:#d9f2d9;
    text-align:center;
    font-size:18px;
}

.sts-final-summary-table tfoot th{
    background:#f6f7f7;
    font-size:18px;
}

.sts-return-login-button{
    background:#2e7d32;
    color:#fff;
    border:0;
    border-radius:6px;
    padding:10px 16px;
    cursor:pointer;
    font-weight:700;
}

.sts-material-subject-label{
    display:inline-block;
    padding:4px 8px;
    border-radius:6px;
    background:#eef7ee;
    color:#1b5e20;
    font-weight:700;
    margin:0 0 8px 0;
}
.sts-materials-current-subject{
    font-weight:700;
    margin-bottom:12px;
}
.sts-materials-empty{
    padding:12px;
    background:#fff8e1;
    border-left:4px solid #f9a825;
}


/* v1.0.36 subject-linked materials modal */
#sts-materials-modal.sts-modal,
#sts-materials-modal{
    position:fixed !important;
    inset:0 !important;
    z-index:999999 !important;
    background:rgba(0,0,0,.58) !important;
    align-items:center !important;
    justify-content:center !important;
    padding:24px !important;
    box-sizing:border-box !important;
}

#sts-materials-modal .sts-modal-box{
    width:min(1100px, 96vw) !important;
    max-height:88vh !important;
    overflow:auto !important;
    background:#fff !important;
    border-radius:12px !important;
    padding:24px !important;
    box-shadow:0 16px 60px rgba(0,0,0,.35) !important;
}

.sts-material{
    border:1px solid #e1e4e8;
    border-radius:10px;
    padding:16px;
    margin:14px 0;
    background:#fff;
}

.sts-material-subject-label{
    display:inline-block;
    margin:0 0 6px 0;
    padding:4px 8px;
    border-radius:999px;
    background:#e8f5e9;
    font-weight:700;
}

.sts-material-file{
    margin:12px 0;
}

.sts-material-image{
    max-width:100%;
    height:auto;
    border:1px solid #ddd;
    border-radius:8px;
}

.sts-material-frame{
    width:100%;
    min-height:62vh;
    border:1px solid #ccd0d4;
    border-radius:8px;
    background:#fff;
}

body.sts-materials-modal-open{
    overflow:hidden;
}


/* v1.0.38: виправлення накладання довідкових матеріалів */
#sts-materials-modal.sts-modal,
body > #sts-materials-modal.sts-modal,
body > #sts-materials-modal{
    position:fixed !important;
    inset:0 !important;
    z-index:2147483647 !important;
    display:none;
    align-items:center !important;
    justify-content:center !important;
    background:rgba(0,0,0,.62) !important;
    padding:24px !important;
    box-sizing:border-box !important;
    isolation:isolate !important;
}

#sts-materials-modal .sts-modal-box{
    position:relative !important;
    z-index:2147483647 !important;
    width:min(980px, 94vw) !important;
    max-height:86vh !important;
    overflow:auto !important;
    background:#fff !important;
    border-radius:12px !important;
    box-shadow:0 24px 80px rgba(0,0,0,.45) !important;
    padding:28px !important;
}

#sts-materials-modal .sts-modal-close{
    position:absolute !important;
    top:12px !important;
    right:18px !important;
    z-index:2147483647 !important;
}

body.sts-materials-modal-open{
    overflow:hidden !important;
}

body.sts-materials-modal-open .sts-top,
body.sts-materials-modal-open .sts-nav,
body.sts-materials-modal-open .sts-subject-bar,
body.sts-materials-modal-open #sts-finish-test,
body.sts-materials-modal-open #sts-timer{
    z-index:1 !important;
}


/* v1.0.39: довідкові матеріали як кероване вікно */
#sts-materials-modal.sts-modal,
body > #sts-materials-modal.sts-modal,
body > #sts-materials-modal{
    align-items:flex-start !important;
    justify-content:flex-start !important;
    padding:0 !important;
    background:rgba(0,0,0,.58) !important;
}

#sts-materials-modal .sts-modal-box{
    position:absolute !important;
    left:50% !important;
    top:50% !important;
    transform:translate(-50%, -50%);
    width:min(900px, 88vw) !important;
    height:min(680px, 82vh) !important;
    min-width:460px !important;
    min-height:260px !important;
    max-width:calc(100vw - 28px) !important;
    max-height:calc(100vh - 28px) !important;
    padding:0 !important;
    border-radius:8px !important;
    overflow:hidden !important;
    resize:both;
    display:flex !important;
    flex-direction:column !important;
    box-shadow:0 22px 70px rgba(0,0,0,.45) !important;
    border:1px solid #bfc7d1 !important;
}

#sts-materials-modal .sts-modal-titlebar{
    height:34px;
    min-height:34px;
    padding:0 8px 0 12px;
    background:#f2f4f7;
    border-bottom:1px solid #cfd6df;
    display:flex;
    align-items:center;
    justify-content:space-between;
    cursor:move;
    user-select:none;
    box-sizing:border-box;
}

#sts-materials-modal .sts-modal-window-title{
    font-size:15px;
    line-height:1;
    font-weight:700;
    color:#202124;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

#sts-materials-modal .sts-modal-window-controls{
    display:flex;
    gap:4px;
    align-items:center;
    cursor:default;
}

#sts-materials-modal .sts-modal-window-controls button{
    width:30px;
    height:26px;
    border:0;
    border-radius:4px;
    background:transparent;
    color:#202124;
    font-size:17px;
    line-height:1;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0;
}

#sts-materials-modal .sts-modal-window-controls button:hover{
    background:#dfe4ea;
}

#sts-materials-modal .sts-modal-window-controls .sts-modal-close:hover{
    background:#d93025;
    color:#fff;
}

#sts-materials-modal .sts-modal-content{
    padding:10px 14px 14px 14px;
    overflow:auto;
    flex:1 1 auto;
    background:#fff;
    box-sizing:border-box;
}

#sts-materials-modal .sts-materials-current-subject{
    margin:0 0 6px 0 !important;
    font-size:14px;
    font-weight:700;
}

#sts-materials-modal .sts-material{
    padding:8px !important;
    margin:8px 0 !important;
    border-radius:6px !important;
}

#sts-materials-modal .sts-material h3{
    margin:2px 0 6px 0 !important;
    font-size:18px !important;
    line-height:1.2 !important;
}

#sts-materials-modal .sts-material-subject-label{
    margin:0 0 4px 0 !important;
    padding:2px 6px !important;
    font-size:12px !important;
    line-height:1.2 !important;
}

#sts-materials-modal .sts-material-file{
    margin:6px 0 !important;
}

#sts-materials-modal .sts-material-frame{
    min-height:55vh !important;
    border-radius:4px !important;
}

#sts-materials-modal .sts-modal-box.sts-window-minimized{
    width:360px !important;
    height:34px !important;
    min-height:34px !important;
    resize:none !important;
    overflow:hidden !important;
}

#sts-materials-modal .sts-modal-box.sts-window-minimized .sts-modal-content{
    display:none !important;
}

#sts-materials-modal .sts-modal-box.sts-window-maximized{
    left:14px !important;
    top:14px !important;
    width:calc(100vw - 28px) !important;
    height:calc(100vh - 28px) !important;
    transform:none !important;
    resize:none !important;
}

#sts-materials-modal .sts-modal-box.sts-window-maximized .sts-material-frame{
    min-height:calc(100vh - 150px) !important;
}

@media(max-width:700px){
    #sts-materials-modal .sts-modal-box{
        left:8px !important;
        top:8px !important;
        width:calc(100vw - 16px) !important;
        height:calc(100vh - 16px) !important;
        min-width:0 !important;
        transform:none !important;
    }
}


/* v1.0.40: примусове кероване вікно довідкових матеріалів */
#sts-materials-modal.sts-modal,
body > #sts-materials-modal.sts-modal{
    position:fixed !important;
    inset:0 !important;
    z-index:2147483647 !important;
    align-items:flex-start !important;
    justify-content:flex-start !important;
    padding:0 !important;
    background:rgba(0,0,0,.58) !important;
}
#sts-materials-modal .sts-modal-box{
    position:absolute !important;
    width:min(920px, 88vw) !important;
    height:min(660px, 82vh) !important;
    min-width:460px !important;
    min-height:260px !important;
    max-width:calc(100vw - 20px) !important;
    max-height:calc(100vh - 20px) !important;
    padding:0 !important;
    margin:0 !important;
    border-radius:8px !important;
    overflow:hidden !important;
    resize:both !important;
    display:flex !important;
    flex-direction:column !important;
    box-shadow:0 24px 80px rgba(0,0,0,.45) !important;
    border:1px solid #bfc7d1 !important;
}
#sts-materials-modal .sts-modal-titlebar{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    height:32px !important;
    min-height:32px !important;
    padding:0 6px 0 10px !important;
    background:#eef2f6 !important;
    border-bottom:1px solid #cbd3dc !important;
    cursor:move !important;
}
#sts-materials-modal .sts-modal-window-title{
    font-size:14px !important;
    line-height:32px !important;
    font-weight:700 !important;
    color:#111 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
}
#sts-materials-modal .sts-modal-window-controls{
    display:flex !important;
    gap:2px !important;
}
#sts-materials-modal .sts-modal-window-controls button{
    width:30px !important;
    height:26px !important;
    border:0 !important;
    border-radius:3px !important;
    background:transparent !important;
    color:#111 !important;
    font-size:16px !important;
    cursor:pointer !important;
}
#sts-materials-modal .sts-modal-content{
    flex:1 1 auto !important;
    overflow:auto !important;
    padding:10px 14px 14px !important;
    background:#fff !important;
}
#sts-materials-modal .sts-modal-box > h2,
#sts-materials-modal .sts-modal-content > h2{display:none !important;}
#sts-materials-modal .sts-modal-box.sts-window-minimized{
    width:360px !important;
    height:32px !important;
    min-height:32px !important;
    resize:none !important;
    overflow:hidden !important;
}
#sts-materials-modal .sts-modal-box.sts-window-minimized .sts-modal-content{display:none !important;}
#sts-materials-modal .sts-modal-box.sts-window-maximized{
    left:10px !important;
    top:10px !important;
    width:calc(100vw - 20px) !important;
    height:calc(100vh - 20px) !important;
    transform:none !important;
    resize:none !important;
}

/* v1.0.41 compact draggable/resizable materials window fallback */
#sts-materials-modal .sts-materials-current-subject,#sts-materials-modal .sts-material-subject-label,#sts-materials-modal .sts-material h3{display:none!important}
#sts-materials-modal .sts-modal-titlebar{height:24px!important;min-height:24px!important;padding:0 4px 0 8px!important}
#sts-materials-modal .sts-modal-content{padding:4px!important}
#sts-materials-modal .sts-material{padding:0!important;margin:0!important;border:0!important}
#sts-materials-modal .sts-material-frame{border:0!important;border-radius:0!important}
#sts-materials-modal .sts-window-resize-handle{position:absolute!important;right:0!important;bottom:0!important;width:16px!important;height:16px!important;cursor:nwse-resize!important;z-index:3!important}


/* v1.0.42 materials window: white window + bottom-left resize handle */
#sts-materials-modal.sts-modal,
body > #sts-materials-modal.sts-modal{
    background:transparent !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
}
body.sts-materials-modal-open #sts-materials-modal.sts-modal{
    background:transparent !important;
}
#sts-materials-modal .sts-modal-box,
#sts-materials-modal .sts-modal-content,
#sts-materials-modal .sts-material,
#sts-materials-modal .sts-material-file,
#sts-materials-modal .sts-material-frame,
#sts-materials-modal iframe,
#sts-materials-modal object,
#sts-materials-modal embed{
    background:#fff !important;
    opacity:1 !important;
    filter:none !important;
    -webkit-filter:none !important;
}
#sts-materials-modal .sts-modal-box{
    border:1px solid #5f6873 !important;
    box-shadow:0 10px 32px rgba(0,0,0,.28) !important;
}
#sts-materials-modal .sts-modal-titlebar{
    height:24px !important;
    min-height:24px !important;
    background:#f7f9fb !important;
    border-bottom:1px solid #c5ccd3 !important;
}
#sts-materials-modal .sts-modal-window-controls button{
    width:28px !important;
    height:22px !important;
    min-width:28px !important;
    min-height:22px !important;
    color:#111 !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    font-size:13px !important;
    line-height:22px !important;
}
#sts-materials-modal .sts-modal-window-controls button:hover{
    background:#e2e8ef !important;
}
#sts-materials-modal .sts-modal-window-controls .sts-modal-close:hover{
    background:#e81123 !important;
    color:#fff !important;
}
#sts-materials-modal .sts-window-resize-handle,
#sts-materials-modal .sts-window-resize-handle-left{
    position:absolute !important;
    bottom:0 !important;
    width:18px !important;
    height:18px !important;
    z-index:50 !important;
    opacity:.9 !important;
    pointer-events:auto !important;
}
#sts-materials-modal .sts-window-resize-handle{
    right:0 !important;
    cursor:nwse-resize !important;
    background:linear-gradient(135deg, transparent 0 50%, rgba(0,0,0,.35) 51% 58%, transparent 59% 66%, rgba(0,0,0,.35) 67% 74%, transparent 75%) !important;
}
#sts-materials-modal .sts-window-resize-handle-left{
    left:0 !important;
    cursor:nesw-resize !important;
    background:linear-gradient(225deg, transparent 0 50%, rgba(0,0,0,.35) 51% 58%, transparent 59% 66%, rgba(0,0,0,.35) 67% 74%, transparent 75%) !important;
}
#sts-materials-modal .sts-modal-box.sts-window-minimized .sts-window-resize-handle-left,
#sts-materials-modal .sts-modal-box.sts-window-minimized .sts-window-resize-handle{
    display:none !important;
}


/* v1.0.63 instructor frontend dashboard */
.sts-instructor-panel{
    max-width:1100px;
    margin:30px auto;
    background:#fff;
    border-radius:12px;
    padding:22px;
    box-shadow:0 8px 24px rgba(0,0,0,.12);
}
.sts-instructor-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:16px;
    border-bottom:1px solid #e5e7eb;
    padding-bottom:14px;
    margin-bottom:16px;
}
.sts-instructor-header h2{margin:0 0 6px 0;}
.sts-instructor-subtitle{margin:3px 0;color:#374151;}
.sts-instructor-logout{
    border:1px solid #b91c1c;
    background:#fff;
    color:#b91c1c;
    border-radius:6px;
    padding:8px 12px;
    cursor:pointer;
    font-weight:700;
}
.sts-instructor-stage-tabs{
    display:flex;
    gap:10px;
    margin:12px 0 18px;
}
.sts-instructor-stage-button{
    flex:1;
    min-height:52px;
    border:1px solid #cbd5e1;
    border-radius:8px;
    background:#f8fafc;
    font-weight:800;
    cursor:pointer;
    font-size:18px;
}
.sts-instructor-stage-button.active{
    background:#bbf7d0;
    border-color:#22c55e;
}
.sts-instructor-stage-content{
    min-height:180px;
}
.sts-instructor-code-box{
    display:flex;
    flex-wrap:wrap;
    gap:12px 18px;
    align-items:center;
    background:#f0fdf4;
    border:1px solid #bbf7d0;
    border-radius:10px;
    padding:12px 14px;
    margin-bottom:16px;
}
.sts-instructor-stage-code{
    display:inline-block;
    padding:4px 10px;
    background:#fff;
    border:1px solid #22c55e;
    border-radius:6px;
    font-size:20px;
    font-weight:900;
    letter-spacing:1px;
}
.sts-instructor-updated{
    margin-left:auto;
    color:#64748b;
    font-size:13px;
}
.sts-instructor-room{
    margin:18px 0;
    border:1px solid #e5e7eb;
    border-radius:10px;
    overflow:hidden;
}
.sts-instructor-room h3{
    margin:0;
    padding:12px 14px;
    background:#f8fafc;
    border-bottom:1px solid #e5e7eb;
}
.sts-instructor-room-location{
    margin:0;
    padding:0 14px 10px;
    background:#f8fafc;
    color:#64748b;
}
.sts-instructor-room-table{
    width:100%;
    border-collapse:collapse;
    font-size:15px;
}
.sts-instructor-room-table th,
.sts-instructor-room-table td{
    border-bottom:1px solid #e5e7eb;
    padding:10px 12px;
    text-align:left;
    vertical-align:middle;
}
.sts-instructor-room-table th{
    background:#f1f5f9;
}
.sts-instructor-status-label{
    display:inline-block;
    border-radius:999px;
    padding:4px 10px;
    font-weight:800;
    background:#e5e7eb;
}
.sts-instructor-status-active .sts-instructor-status-label{
    background:#bbf7d0;
    color:#166534;
}
.sts-instructor-status-finished .sts-instructor-status-label{
    background:#dbeafe;
    color:#1d4ed8;
}
.sts-instructor-status-not_started .sts-instructor-status-label{
    background:#f3f4f6;
    color:#6b7280;
}
@media(max-width:760px){
    .sts-instructor-header{display:block;}
    .sts-instructor-stage-tabs{flex-direction:column;}
    .sts-instructor-room-table{font-size:13px;}
    .sts-instructor-room-table th,.sts-instructor-room-table td{padding:8px 6px;}
    .sts-instructor-updated{margin-left:0;}
}


/* v1.0.66 instructor direct room dashboard */
.sts-instructor-panel{
    max-width: 1180px;
    margin: 24px auto;
}
.sts-instructor-stage-tabs{
    display:none !important;
}
.sts-instructor-codes-two{
    display:flex;
    flex-wrap:wrap;
    gap:12px 18px;
    align-items:center;
    justify-content:flex-start;
}
.sts-instructor-codes-two > div{
    background:#ffffff;
    border:1px solid #d1d5db;
    border-radius:8px;
    padding:10px 12px;
}
.sts-instructor-codes-two .sts-instructor-updated{
    margin-left:auto;
    color:#6b7280;
}
.sts-instructor-stage-status-table th:nth-child(1),
.sts-instructor-stage-status-table td:nth-child(1){
    width:70px;
    text-align:center;
}
.sts-instructor-stage-status-table th:nth-child(3),
.sts-instructor-stage-status-table td:nth-child(3){
    width:110px;
    text-align:center;
}
.sts-instructor-stage-status-table th:nth-child(4),
.sts-instructor-stage-status-table th:nth-child(5),
.sts-instructor-stage-status-table td:nth-child(4),
.sts-instructor-stage-status-table td:nth-child(5){
    width:170px;
    text-align:center;
}
.sts-instructor-status-label{
    display:inline-block;
    min-width:120px;
    padding:6px 10px;
    border-radius:999px;
    font-weight:700;
}
.sts-instructor-status-not_started .sts-instructor-status-label{
    background:#f3f4f6;
    color:#374151;
    border:1px solid #d1d5db;
}
.sts-instructor-status-active .sts-instructor-status-label{
    background:#fff7ed;
    color:#c2410c;
    border:1px solid #fdba74;
}
.sts-instructor-status-finished .sts-instructor-status-label{
    background:#dcfce7;
    color:#166534;
    border:1px solid #86efac;
}
@media(max-width:760px){
    .sts-instructor-codes-two{display:block;}
    .sts-instructor-codes-two > div{margin-bottom:8px;}
    .sts-instructor-stage-status-table{font-size:12px;}
    .sts-instructor-status-label{min-width:0;}
}