:root {
    font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
    color:#142327;
    background:#f2f6f4;
    font-synthesis:none
}

* {
    box-sizing:border-box
}

body {
    margin:0
}

button,input,textarea,select {
    font:inherit
}

button,.button {
    cursor:pointer;
    border:0;
    border-radius:10px;
    padding:11px 16px;
    background:#087f68;
    color:white;
    font-weight:650;
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    justify-content:center
}

button:hover,.button:hover {
    background:#066a57
}

button:disabled {
    opacity:.55;
    cursor:not-allowed
}

.secondary {
    background:#e6efec;
    color:#173c36
}

.danger {
    background:#a53a38
}

.wrap {
    max-width:1220px;
    margin:auto;
    padding:28px 22px
}

.top {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    margin-bottom:22px
}

.brand {
    font-size:21px;
    font-weight:800;
    letter-spacing:-.4px
}

.brand span {
    color:#087f68
}

.card {
    background:white;
    border:1px solid #e1eae6;
    border-radius:18px;
    padding:23px;
    margin:15px 0;
    box-shadow:0 10px 35px #17372b0a
}

.grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
    gap:14px
}

.package-create-form {
    grid-template-columns:minmax(0,1.3fr) minmax(0,1.3fr) minmax(120px,.7fr) auto;
    align-items:end
}

.package-create-form .field {
    min-width:0;
    margin:0
}

.package-create-submit {
    min-height:44px;
    padding:11px 18px;
    white-space:nowrap
}

.field {
    display:grid;
    gap:6px;
    margin:12px 0
}

label {
    font-weight:650;
    font-size:14px
}

.side-nav a svg {
    width:20px;
    height:20px;
    flex:none
}

input,textarea,select {
    width:100%;
    border:1px solid #cfddd7;
    border-radius:9px;
    padding:11px 12px;
    background:#fff;
    color:#142327
}

textarea {
    min-height:110px;
    resize:vertical
}

.muted {
    color:#657771;
    font-size:14px
}

.tag {
    display:inline-block;
    background:#e8f4ef;
    border-radius:30px;
    padding:5px 10px;
    color:#087f68;
    font-size:12px;
    font-weight:700
}

.row {
    display:flex;
    gap:10px;
    align-items:center;
    flex-wrap:wrap
}

.row form {
    margin:0
}

.exam {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:15px
}

.exam-actions {
    flex-wrap:nowrap
}

.exam-actions form {
    display:flex
}

.tablewrap {
    overflow:auto
}

table {
    width:100%;
    border-collapse:collapse;
    font-size:14px
}

.user-list-table {
    min-width:760px
}

.user-list-table th:nth-child(1) {
    width:17%
}

.user-list-table th:nth-child(2) {
    width:17%
}

.user-list-table th:nth-child(3) {
    width:20%
}

.user-list-table th:nth-child(4) {
    width:18%
}

.user-list-table th:nth-child(5) {
    width:25%
}

.student-data-table {
    min-width:760px
}

.exam-status-muted {
    background:#edf2f0;
    color:#657771
}

.exam-status-active {
    background:#fff3dc;
    color:#80520a
}

.progress-track {
    width:120px;
    height:8px;
    margin:3px 0 5px;
    overflow:hidden;
    border-radius:99px;
    background:#e6efec
}

.progress-track span {
    display:block;
    height:100%;
    border-radius:inherit;
    background:#087f68
}

.students-management-heading {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:clamp(8px,2vw,20px)
}

.students-management-heading h2 {
    margin:10px 0;
    font-size:clamp(18px,4vw,24px);
    white-space:nowrap
}

.students-management-heading p {
    margin:0
}

.students-management-actions {
    display:flex;
    align-items:center;
    gap:6px;
    flex:none
}

.students-management-actions form {
    margin:0
}

.students-management-actions .icon-button {
    width:40px;
    height:40px
}

.students-management-actions .icon-button svg {
    width:18px;
    height:18px
}

.students-toolbar {
    justify-content:space-between;
    align-items:center;
    margin-bottom:16px
}

.students-toolbar h2 {
    margin:0
}

.class-filter-form,
.class-create-form {
    align-items:flex-end;
    margin:0 0 18px
}

.class-filter-form .field,
.class-create-form .field {
    flex:1;
    min-width:min(100%,240px);
    margin:0
}

.class-edit-form {
    align-items:center;
    flex-wrap:nowrap
}

.class-edit-form input {
    min-width:140px
}

th,td {
    text-align:left;
    padding:11px;
    border-bottom:1px solid #e6eeea;
    vertical-align:top
}

th {
    color:#64776f
}

.option {
    display:flex;
    gap:10px;
    align-items:flex-start;
    margin:11px 0;
    font-weight:400
}

.option input {
    width:auto;
    margin-top:5px
}

.option select {
    max-width:140px;
    margin-left:auto
}

.notice {
    background:#eff8f5;
    padding:13px;
    border-radius:10px;
    margin:12px 0
}

.flash {
    padding:13px 15px;
    border-radius:10px;
    background:#e5f5ee;
    margin:15px 0
}

.flash.error {
    background:#fff0eb;
    color:#8c3324
}

.exam-flash {
    position:fixed;
    top:12px;
    left:50%;
    z-index:30;
    width:max-content;
    max-width:calc(100vw - 32px);
    transform:translateX(-50%);
    box-shadow:0 6px 22px #17372b26
}

.login {
    max-width:470px;
    margin:9vh auto
}

.modal {
    position:fixed;
    inset:0;
    background:#102720a8;
    display:grid;
    place-items:center;
    padding:18px;
    z-index:5
}

.modalbox {
    background:#fff;
    border-radius:20px;
    max-width:700px;
    width:100%;
    padding:28px;
    max-height:90vh;
    overflow:auto
}

.modalbox h2 {
    margin-top:0
}

.app-modal-backdrop,
.confirm-overlay {
    position:fixed;
    inset:0;
    display:none;
    place-items:center;
    padding:18px;
    background:#102720a8
}

.app-modal-backdrop {
    z-index:40
}

.app-modal-backdrop.open,
.confirm-overlay.open {
    display:grid
}

.app-modal {
    width:100%;
    max-width:700px;
    max-height:90vh;
    overflow:auto;
    padding:28px;
    border-radius:20px;
    background:#fff;
    box-shadow:0 20px 60px #10272040
}

.app-modal h2 {
    margin-top:0
}

.edit-user-form {
    grid-template-columns:repeat(2,minmax(0,1fr));
    align-items:start;
    column-gap:18px;
    row-gap:6px
}

.edit-user-form .field {
    align-self:start;
    margin:8px 0
}

.edit-user-form .edit-password-field,
.edit-user-form .edit-user-actions {
    grid-column:1/-1
}

.edit-password-field small {
    line-height:1.5
}

.edit-user-actions {
    display:flex;
    justify-content:flex-end;
    padding-top:4px
}

.edit-user-actions button {
    min-width:180px
}

@media(max-width:600px) {
    .edit-user-form {
        grid-template-columns:1fr
    }
}

.confirm-overlay {
    z-index:50
}

.confirm-box {
    width:100%;
    max-width:460px;
    padding:24px;
    border-radius:16px;
    background:#fff;
    box-shadow:0 20px 60px #10272040
}

.confirm-box h2 {
    margin-top:0
}

.confirm-actions {
    display:flex;
    justify-content:flex-end;
    gap:10px;
    margin-top:20px
}

.clock {
    font-variant-numeric:tabular-nums;
    font-weight:800;
    color:#a33d2b;
    font-size:19px
}

.tiny {
    font-size:12px
}

.question {
    padding:18px 0;
    border-bottom:1px solid #e7eeeb
}

.checkpoint-button {
    position:fixed;
    right:24px;
    bottom:24px;
    z-index:20;
    width:54px;
    height:54px;
    padding:14px;
    border-radius:50%;
    box-shadow:0 6px 20px #17372b38
}

.checkpoint-button svg {
    width:24px;
    height:24px
}

.exam-submit-button {
    margin-top:16px
}

.stimulus {
    padding:17px;
    background:#f1f7f4;
    border-left:4px solid #087f68;
    border-radius:0 12px 12px 0;
    margin:18px 0;
    line-height:1.75;
    white-space:normal
}

.stimulus p {
    margin:0 0 14px
}

.stimulus-chart-title,
.stimulus-data-title {
    margin:18px 0 10px;
    text-align:center;
    font-size:18px
}

.stimulus-flow-heading {
    padding:8px 12px;
    border:1px solid #6f8f86;
    border-bottom:0;
    font-weight:700;
    text-align:center
}

.stimulus-flow-table {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    margin-bottom:10px;
    border:1px solid #6f8f86
}

.stimulus-flow-table div {
    min-height:92px;
    padding:10px;
    text-align:center
}

.stimulus-flow-table div+div {
    border-left:1px solid #6f8f86
}

.stimulus-flow-table b,
.stimulus-flow-table span {
    display:block
}

.stimulus-flow-table span {
    margin-top:12px
}

.stimulus-data-table {
    width:100%;
    table-layout:fixed;
    border-collapse:collapse;
    background:#fff
}

.stimulus-data-table th,
.stimulus-data-table td {
    border:1px solid #6f8f86;
    padding:8px 10px
}

.stimulus-data-table th {
    text-align:center
}

.stimulus-data-table th:nth-child(1),
.stimulus-data-table td:nth-child(1) {
    width:34%
}

.stimulus-data-table th:nth-child(2),
.stimulus-data-table td:nth-child(2),
.stimulus-data-table th:nth-child(3),
.stimulus-data-table td:nth-child(3) {
    width:33%
}

.side-layout {
    display:grid;
    grid-template-columns:240px minmax(0,1fr);
    gap:22px;
    align-items:start
}

.sidebar {
    display:flex;
    flex-direction:column;
    background:#173c36;
    color:white;
    border-radius:18px;
    padding:21px;
    position:sticky;
    top:18px;
    min-height:calc(100vh - 56px)
}

.sidebar .brand {
    margin:0 0 7px
}

.sidebar .brand span {
    color:#75d0b1
}

.side-caption {
    font-size:12px;
    color:#bbd1c9;
    margin:0 0 22px
}

.side-nav {
    display:grid;
    gap:7px
}

.side-nav a {
    display:flex;
    align-items:center;
    gap:12px;
    color:#d8e9e3;
    padding:11px 13px;
    border-radius:9px;
    text-decoration:none;
    font-size:14px
}

.side-nav a:hover,.side-nav a.active {
    background:#286354;
    color:white
}

.side-bottom {
    margin-top:28px;
    border-top:1px solid #ffffff2a;
    padding-top:18px
}

.sidebar-bottom {
    margin-top:auto;
    border-top:1px solid #ffffff2a;
    padding-top:18px
}

.profile-menu {
    position:relative;
    min-width:0
}

.profile-menu summary {
    display:flex;
    align-items:center;
    gap:10px;
    cursor:pointer;
    list-style:none
}

.profile-menu summary::-webkit-details-marker {
    display:none
}

.profile-avatar {
    display:grid;
    width:38px;
    height:38px;
    flex:none;
    place-items:center;
    border-radius:50%;
    background:#d7eee5;
    color:#087f68;
    font-weight:800
}

.profile-name {
    display:grid;
    min-width:0;
    gap:3px;
    font-weight:650
}

.profile-name small {
    display:block;
    margin:0;
    font-size:11px;
    font-weight:400
}

.profile-dropdown {
    position:absolute;
    z-index:25;
    bottom:calc(100% + 8px);
    left:0;
    display:none;
    width:100%;
    min-width:190px;
    padding:8px;
    border:1px solid #e1eae6;
    border-radius:12px;
    background:#fff;
    box-shadow:0 12px 32px #17372b20
}

.profile-menu[open] .profile-dropdown {
    display:grid;
    gap:4px
}

.profile-dropdown form {
    margin:0
}

.profile-dropdown button {
    width:100%;
    justify-content:flex-start;
    background:transparent;
    color:#173c36;
    text-align:left
}

.profile-dropdown button:hover {
    background:#e6efec
}

.profile-inline .profile-dropdown {
    top:calc(100% + 8px);
    right:0;
    bottom:auto;
    left:auto
}

.workspace {
    min-width:0
}

.workspace .top {
    background:white;
    border:1px solid #e1eae6;
    padding:17px 20px;
    border-radius:15px;
    margin-bottom:16px
}

.metric {
    font-size:28px;
    font-weight:800;
    margin:6px 0
}

.page-title {
    margin:0 0 6px
}

.stimulus-title {
    font-weight:750;
    color:#087f68;
    margin-bottom:8px
}

.student-shell {
    max-width:940px
}

.student-intro {
    margin:18px 0
}

.footer {
    padding:20px 0;
    color:#82918b;
    font-size:12px
}

@media(max-width:800px) {
    .side-layout {
        grid-template-columns:1fr
    }

    .sidebar {
        position:static;
        min-height:auto
    }

    .side-nav {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }

    .side-bottom {
        margin-top:15px
    }

    .wrap {
        padding:17px 13px
    }

}

@media(max-width:560px) {
    .top {
        align-items:flex-start
    }

    .card {
        padding:17px
    }

    .exam {
        align-items:flex-start;
        flex-direction:column
    }

    .side-nav {
        grid-template-columns:1fr 1fr
    }

    .workspace .top {
        padding:14px
    }

    .option select {
        max-width:110px
    }

}

.true-false-table {
    margin-top:12px
}

.true-false-table th:not(:first-child),.true-false-table td.choice-cell {
    text-align:center;
    width:92px
}

.true-false-table input {
    width:18px;
    height:18px;
    margin:0;
    flex:none;
    accent-color:#087f68
}

.login-status {
    white-space:nowrap
}

.status-dot {
    display:inline-block;
    width:6px;
    height:6px;
    border-radius:50%;
    background:#087f68;
    margin-right:5px;
    flex:none
}

.offline-dot {
    background:#9aa8a2
}

.user-actions {
    min-width:210px
}

.user-actions details {
    margin-bottom:8px
}

.user-actions summary {
    cursor:pointer;
    list-style:none
}

.user-actions summary::-webkit-details-marker {
    display:none
}

.user-actions details form {
    min-width:230px;
    padding:12px;
    border:1px solid #e1eae6;
    border-radius:10px;
    margin-top:8px
}

.user-actions .field {
    margin:8px 0
}

.user-actions .row {
    align-items:flex-start
}

.workspace .card {
    box-shadow:0 12px 32px #17372b0b;
    transition:box-shadow .18s ease,transform .18s ease
}

.workspace .card:hover {
    box-shadow:0 16px 38px #17372b12
}

.workspace button,.workspace .button {
    border-radius:9px;
    transition:background .16s ease,transform .16s ease
}

.workspace button:hover,.workspace .button:hover {
    transform:translateY(-1px)
}

input:focus,textarea:focus,select:focus {
    outline:3px solid #087f6822;
    border-color:#087f68
}

table tbody tr:hover {
    background:#f8fbf9
}

.results-actions {
    display:flex;
    align-items:center;
    gap:8px;
    min-width:82px;
    white-space:nowrap
}

.results-actions form {
    display:flex;
    flex:none;
    margin:0
}

.answer-review-heading {
    justify-content:space-between;
    align-items:flex-start
}

.answer-review-heading h2 {
    margin:10px 0 6px
}

.answer-review-heading p {
    margin:0
}

.answer-review-overview {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
    margin-top:20px
}

.answer-review-overview > div {
    display:flex;
    align-items:center;
    gap:10px;
    min-height:64px;
    padding:12px 16px;
    border:1px solid #dfe8e4;
    border-radius:12px;
    background:#f8faf9
}

.answer-review-overview strong {
    font-size:24px;
    line-height:1
}

.answer-review-overview span {
    color:#607169;
    font-size:13px
}

.answer-review-overview .overview-correct {
    border-color:#b9dfd1;
    background:#edf8f3;
    color:#087f68
}

.answer-review-overview .overview-wrong {
    border-color:#efc7c4;
    background:#fff4f3;
    color:#a53a38
}

.answer-sheet-heading {
    margin-top:22px;
    padding-bottom:10px;
    border-bottom:1px solid #dfe8e4
}

.answer-sheet-heading div {
    display:flex;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap
}

.answer-sheet-heading span {
    color:#657771;
    font-size:12px
}

.answer-sheet {
    margin-top:12px
}

.answer-sheet-columnset {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
    align-items:start
}

.answer-sheet-table {
    border:1px solid #dfe7e4;
    border-collapse:collapse;
    font-size:12px
}

.answer-sheet-table th {
    text-align:center;
    background:#f4f7f6;
    color:#52675f
}

.answer-sheet-table td,
.answer-sheet-table th {
    height:29px;
    padding:4px;
    text-align:center;
    border-bottom:1px solid #e5ebe8;
    border-right:1px solid #edf1ef
}

.answer-sheet-table td.answer-cell-correct {
    background:#087f68;
    color:#fff
}

.answer-sheet-table td.answer-cell-wrong {
    background:#a53a38;
    color:#fff
}

.answer-sheet-table td.answer-cell-key {
    color:#087f68;
    box-shadow:inset 0 -2px #087f68
}

.answer-sheet-table td.answer-cell-text {
    min-width:48px;
    color:#294039;
    font-size:11px;
    white-space:normal
}

.answer-bubble-card {
    min-height:82px;
    padding:9px;
    border:1px solid #dfe7e4;
    border-top:3px solid #a53a38;
    border-radius:10px;
    background:#fff
}

.answer-bubble-card.is-correct {
    border-top-color:#087f68;
    background:#fbfefd
}

.answer-bubble-number {
    margin-bottom:8px;
    color:#294039;
    font-size:14px;
    font-weight:800
}

.answer-bubbles {
    display:flex;
    gap:5px;
    flex-wrap:wrap
}

.answer-bubble {
    position:relative;
    display:grid;
    width:25px;
    height:25px;
    place-items:center;
    border:1px solid #aebdb7;
    border-radius:50%;
    color:#52675f;
    font-size:12px;
    font-weight:800;
    background:#fff
}

.answer-bubble.selected.correct {
    border-color:#087f68;
    background:#087f68;
    color:#fff
}

.answer-bubble.selected.wrong {
    border-color:#a53a38;
    background:#a53a38;
    color:#fff
}

.answer-bubble.key-only:after {
    content:"";
    position:absolute;
    bottom:-5px;
    width:5px;
    height:5px;
    border-radius:50%;
    background:#087f68
}

.answer-bubble-false-items {
    display:flex;
    flex-wrap:wrap;
    gap:4px
}

.answer-bubble-false-items span {
    display:grid;
    grid-template-columns:12px 17px;
    gap:2px;
    padding:3px 4px;
    border-radius:6px;
    color:#52675f;
    font-size:11px;
    background:#f1f4f3
}

.answer-bubble-false-items b {
    text-align:center
}

.answer-bubble-false-items .item-correct {
    background:#dff3ea;
    color:#087f68
}

.answer-bubble-false-items .item-wrong {
    background:#f8e3e1;
    color:#a53a38
}

.answer-review-question {
    padding:20px 0;
    border-bottom:1px solid #e6eeea
}

.answer-review-question:last-child {
    border-bottom:0
}

.answer-review-row {
    margin-top:8px;
    border:1px solid #e2eae7;
    border-radius:12px;
    overflow:hidden;
    background:#fff
}

.answer-review-row:first-of-type {
    margin-top:18px;
    border-top:1px solid #e2eae7
}

.answer-review-row[open] {
    border-color:#a9cbc0;
    box-shadow:0 6px 18px #17372b0d
}

.answer-review-row summary {
    display:grid;
    grid-template-columns:42px minmax(0,1fr) auto;
    align-items:center;
    gap:12px;
    padding:12px 14px;
    cursor:pointer;
    list-style:none
}

.answer-review-row summary::-webkit-details-marker {
    display:none
}

.answer-review-row summary .answer-result {
    grid-column:3;
    grid-row:1
}

.answer-result {
    display:inline-flex;
    min-width:78px;
    justify-content:center;
    padding:7px 10px;
    border-radius:8px;
    font-size:13px;
    font-weight:800
}

.answer-result.is-correct {
    background:#087f68;
    color:#fff
}

.answer-result.is-wrong {
    background:#fff1ef;
    color:#a53a38;
    box-shadow:inset 0 0 0 1px #edc4c0
}

.answer-review-number {
    display:grid;
    width:32px;
    height:32px;
    place-items:center;
    border-radius:9px;
    background:#e8f4ef;
    color:#087f68;
    font-weight:800
}

.answer-review-summary {
    display:grid;
    grid-template-columns:minmax(150px,.9fr) minmax(150px,.7fr);
    gap:12px;
    min-width:0;
    line-height:1.4
}

.answer-legend {
    display:block;
    min-width:0;
    padding-left:9px;
    border-left:3px solid #b9c7c1
}

.answer-legend small {
    display:block;
    margin-bottom:2px;
    color:#657771;
    font-size:11px
}

.answer-legend strong {
    display:block;
    overflow-wrap:anywhere;
    font-size:14px
}

.answer-given {
    border-left-color:#087f68
}

.answer-key {
    border-left-color:#d29a35
}

.answer-review-detail {
    padding:12px 18px 18px 54px;
    border-top:1px solid #edf1ef;
    background:#fbfcfb
}

.answer-review-detail h3 {
    margin:0 0 14px;
    line-height:1.55
}

.answer-review-question h3 {
    margin:0 0 14px;
    font-size:16px;
    line-height:1.6
}

.answer-review-stimulus {
    margin-bottom:16px;
    padding:14px 16px;
    border-left:4px solid #087f68;
    border-radius:0 10px 10px 0;
    background:#f1f7f4;
    line-height:1.65
}

.answer-review-stimulus div {
    margin-top:6px
}

.answer-review-list {
    display:grid;
    gap:8px
}

.answer-review-choice {
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:14px;
    padding:11px 13px;
    border:1px solid #e1eae6;
    border-radius:10px;
    line-height:1.55
}

.answer-review-choice.is-correct {
    border-color:#9bd5c3;
    background:#f0faf6
}

.answer-review-choice.is-wrong {
    border-color:#e8b4b1;
    background:#fff5f4
}

.answer-review-choice.is-key {
    border-color:#93c5fd;
    background:#eff6ff
}

.answer-review-choice.is-correct {
    border:2px solid rgba(57,255,20,.45);
    background:rgba(57,255,20,.20);
    color:#111827;
    box-shadow:none
}

.answer-review-choice.is-wrong {
    border:2px solid rgba(255,8,0,.45);
    background:rgba(255,8,0,.20);
    color:#111827;
    box-shadow:none
}

.answer-review-choice.is-key {
    border:2px solid rgba(136,170,255,.45);
    background:rgba(136,170,255,.20);
    color:#111827;
    box-shadow:none
}

.answer-indicators {
    display:flex;
    flex:0 0 auto;
    align-items:center;
    gap:7px;
    min-height:24px;
    padding-top:2px
}

.answer-color-legend {
    display:flex;
    flex-wrap:wrap;
    gap:8px 18px;
    margin:16px 0 4px;
    color:#52675f;
    font-size:13px
}

.answer-color-legend[hidden] {
    display:none
}

.answer-legend-box {
    max-width:520px
}

.answer-legend-heading {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px
}

.answer-legend-heading h2 {
    margin:0
}

.answer-legend-close {
    flex:0 0 auto;
    width:36px;
    height:36px;
    padding:0;
    border:1px solid #cbd5d1;
    border-radius:50%;
    background:#fff;
    color:#173c36;
    font-size:26px;
    line-height:32px
}

.answer-legend-modal .answer-color-legend {
    margin-top:20px;
    flex-direction:column;
    gap:14px;
    font-size:15px
}

.answer-review-actions {
    display:flex;
    align-items:center;
    gap:8px
}

.answer-info-button {
    width:38px;
    height:38px;
    padding:7px;
    border:1px solid #cbd5d1;
    border-radius:8px;
    background:#fff;
    color:#173c36;
    cursor:pointer
}

.answer-info-button svg {
    width:100%;
    height:100%;
    fill:none;
    stroke:currentColor;
    stroke-width:2;
    stroke-linecap:round
}

.answer-color-legend span {
    display:inline-flex;
    align-items:center;
    gap:7px
}

.answer-color-legend .answer-indicator {
    width:14px;
    height:14px;
    border-width:1px
}

.answer-indicator {
    width:18px;
    height:18px;
    border-radius:50%;
    border:2px solid rgba(255,255,255,.92);
    box-shadow:0 0 0 1px rgba(38,63,55,.14);
    display:inline-block
}

.answer-indicator.is-key {
    background:#88AAFF;
    box-shadow:0 0 0 2px #fff,0 0 0 4px #88AAFF
}

.answer-indicator.is-correct {
    background:#39FF14;
    box-shadow:0 0 0 2px #fff,0 0 0 4px #39FF14
}

.answer-indicator.is-wrong {
    background:#FF0800;
    box-shadow:0 0 0 2px #fff,0 0 0 4px #FF0800
}

.tf-answer-key {
    flex:0 0 auto;
    color:#111827;
    text-align:center
}

.tf-answer-grid {
    display:none;
    gap:8px;
    flex:0 0 auto;
    min-height:24px
}

.tf-answer-column {
    display:flex;
    align-items:flex-start;
    justify-content:center;
    gap:3px;
    min-width:24px
}

.answer-review-meta {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:flex-end;
    gap:6px 12px;
    color:#52675f;
    font-size:13px
}

.answer-status {
    display:inline-flex;
    align-items:center;
    padding:3px 8px;
    border-radius:20px;
    background:#e9efec;
    color:#52675f;
    font-size:12px;
    font-weight:700;
    white-space:nowrap
}

.answer-status.is-correct {
    background:#dff3ea;
    color:#087f68
}

.answer-status.is-wrong {
    background:#f8e3e1;
    color:#a53a38
}

.answer-status.is-key {
    background:#e6efec;
    color:#173c36
}

.result-actions,
.result-history-item {
    justify-content:flex-start;
    margin-top:18px
}

.result-actions form,
.result-history-item p {
    margin:0
}

.student-ranking-self {
    background:#e8f4ef;
    font-weight:650
}

.completed-exam-modal {
    max-width:480px
}

.completed-exam-modal h2 {
    margin-top:0
}

.completed-exam-modal .modal-actions {
    display:flex;
    justify-content:flex-end;
    margin-top:22px
}

.answer-question-status {
    margin:12px 0 0;
    font-size:13px;
    font-weight:750
}

.answer-question-status.is-correct {
    color:#087f68
}

.answer-question-status.is-wrong {
    color:#a53a38
}

.danger:hover {
    background:#862d2b
}

.wrap.admin-shell {
    width:100%;
    max-width:none;
    min-height:100vh;
    margin:0;
    padding:16px 20px
}

.admin-shell .side-layout {
    min-height:calc(100vh - 32px);
    grid-template-columns:230px minmax(0,1fr);
    gap:18px
}

.admin-shell .sidebar {
    min-height:calc(100vh - 32px)
}

@media(max-width:700px) {
    .answer-review-choice {
        flex-direction:column
    }

    .answer-review-meta {
        justify-content:flex-start
    }

    .workspace table {
        font-size:13px
    }

    .workspace th,.workspace td {
        padding:9px 8px
    }

    .answer-review-row summary {
        grid-template-columns:36px minmax(0,1fr)
        gap:8px
    }

    .answer-review-row summary .answer-result {
        grid-column:2;
        justify-self:start;
        margin-top:-3px
    }

    .answer-review-summary {
        grid-template-columns:1fr
        gap:7px
    }

    .answer-review-overview {
        grid-template-columns:repeat(3,minmax(0,1fr))
    }

    .answer-review-overview > div {
        display:grid;
        gap:4px;
        padding:10px
    }

    .answer-review-detail {
        padding-left:44px
    }

}

@media(max-width:900px) {
    .answer-sheet-columnset {
        grid-template-columns:1fr
    }
}

@media(max-width:560px) {
    .answer-sheet-columnset {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }

    .answer-sheet-heading div {
        flex-direction:column
    }
}

@media(max-width:800px) {
    .wrap.admin-shell {
        padding:12px
    }

    .admin-shell .side-layout {
        min-height:0
    }

    .admin-shell .sidebar {
        min-height:auto
    }

    .package-create-form {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }

}

@media(max-width:560px) {
    .package-create-form {
        grid-template-columns:1fr
    }

    .package-create-submit {
        justify-self:start
    }

    .exam-actions {
        flex-wrap:wrap
    }
}

.wrap.login-shell:not(.admin-shell):not(.exam-shell) {
    display:flex;
    width:100%;
    max-width:none;
    min-height:100vh;
    justify-content:center;
    align-items:flex-start;
    margin:0;
    padding:9vh 22px 40px;
    background-color:#eaf2ef;
    background-image:
        linear-gradient(110deg,rgba(242,246,244,.18),rgba(242,246,244,.35)),
        url("../img/login-background.svg");
    background-position:center;
    background-size:cover;
    background-attachment:fixed
}

.login-shell .login {
    width:min(100%,465px);
    max-width:465px;
    margin:0;
    padding:28px 32px 32px;
    border-color:#e1eae6;
    border-radius:17px;
    background:rgba(255,255,255,.97);
    box-shadow:0 12px 36px rgba(23,60,54,.09)
}

.login-shell .login .brand {
    margin-bottom:8px
}

.login-shell .login p {
    margin:10px 0 24px
}

.login-shell .login .field {
    gap:7px;
    margin:14px 0
}

@media(max-width:560px) {
    .answer-review-heading,
    .answer-review-choice {
        flex-direction:column
    }

    .answer-review-heading .button {
        align-self:flex-start
    }

    .answer-review-meta {
        justify-content:flex-start
    }

    .wrap.login-shell:not(.admin-shell):not(.exam-shell) {
        min-height:100svh;
        padding:7vh 16px 28px;
        background-attachment:scroll
    }

    .login-shell .login {
        padding:24px 22px 26px
    }
}

.icon-button {
    width:34px;
    height:34px;
    padding:8px;
    border-radius:9px;
    flex:none
}

.icon-button svg,.import-pick svg {
    width:16px;
    height:16px;
    display:block
}

.icon-button.danger:hover {
    background:#862d2b
}

.reset-session-button {
    width:20px;
    min-width:20px;
    height:20px;
    padding:3px;
    border-radius:5px;
    background:#a53a38;
    vertical-align:top
}

.reset-session-button svg {
    width:14px;
    height:14px
}

.reset-session-form {
    margin:0;
    line-height:0
}

.reset-session-form .reset-session-button {
    padding:3px
}

.reset-session-button:disabled {
    background:#a53a38;
    opacity:.8
}

.user-actions {
    display:flex;
    align-items:center;
    gap:7px;
    min-width:150px
}

.user-actions details {
    display:inline-block;
    margin:0 5px 5px 0
}

.user-actions details form {
    position:absolute;
    z-index:3;
    right:24px;
    width:min(320px,calc(100vw - 48px));
    box-shadow:0 12px 32px #17372b20
}

.user-actions>form {
    display:inline-block;
    vertical-align:top
}

.user-actions>form button {
    margin:0
}

.import-tools {
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap
}

.import-tools form {
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
    margin:0
}

.import-pick {
    display:inline-flex;
    align-items:center;
    gap:7px;
    min-height:36px;
    padding:7px 11px;
    border:1px solid #cfddd7;
    border-radius:9px;
    background:#fff;
    color:#173c36;
    font-size:13px;
    font-weight:650;
    cursor:pointer
}

.import-pick:hover {
    background:#f4f8f6
}

.import-pick input {
    position:absolute;
    width:1px;
    height:1px;
    opacity:0;
    overflow:hidden
}

.import-filename {
    max-width:230px;
    color:#657771;
    font-size:12px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis
}

.import-card .notice {
    font-size:13px;
    padding:10px 12px;
    margin:9px 0
}

.import-card h2 {
    margin:8px 0
}

.import-card>p {
    margin:6px 0;
    font-size:13px
}

.import-card {
    padding:18px 20px
}

@media(max-width:560px) {
    .import-tools,.import-tools form {
        align-items:stretch
    }

    .import-tools form {
        width:100%
    }

    .import-filename {
        max-width:calc(100vw - 190px)
    }
}

@media(max-width:640px) {
    .students-management-heading {
        align-items:center;
        gap:6px
    }

    .students-management-heading h2 {
        font-size:18px
    }

    .students-management-actions {
        width:auto
    }

    .students-management-actions {
        gap:4px
    }

    .students-management-actions .icon-button {
        width:32px;
        height:32px;
        padding:6px;
        flex:none
    }

    .students-management-actions .icon-button svg {
        width:16px;
        height:16px
    }
}

@media(max-width:560px) {
    .user-actions details form {
        right:12px
    }

}

@media(min-width:801px) {
    body.sidebar-hidden .wrap.admin-shell {
        padding-left:clamp(16px,3vw,42px)
    }

    body.sidebar-hidden .admin-shell .side-layout {
        grid-template-columns:minmax(0,1fr)
    }

    body.sidebar-hidden .admin-shell .sidebar {
        display:none
    }

}

@media(max-width:800px) {
    .wrap.admin-shell {
        padding:18px 16px
    }

    .admin-shell .side-layout {
        min-height:0
    }

    .admin-shell .sidebar {
        width:min(290px,85vw);
        height:100dvh;
        min-height:0;
        transform:translateX(-105%);
        box-shadow:0 12px 32px #071c1733
    }

    body.sidebar-open .admin-shell .sidebar {
        transform:translateX(0)
    }

    body.sidebar-open:before {
        content:"";
        position:fixed;
        inset:0;
        background:#10272080;
        z-index:21
    }

    .admin-shell .workspace {
        min-height:calc(100vh - 36px)
    }

    .admin-shell .profile-menu {
        position:fixed;
        left:16px;
        bottom:16px;
        z-index:23;
        margin:0
    }

    .admin-shell .profile-menu summary {
        width:48px;
        height:48px;
        padding:6px;
        border-radius:50%;
        background:#123b32;
        box-shadow:0 8px 24px #071c1733
    }

    .admin-shell .profile-menu summary .profile-name,
    .admin-shell .profile-dropdown {
        position:fixed;
        bottom:72px;
        left:16px;
        right:auto;
        width:230px
    }

    .exam-shell {
        padding:0 16px 20px
    }

}

@media(max-width:560px) {
    .workspace .top {
        align-items:center
    }

    .admin-shell .page-title {
        font-size:21px
    }

    .app-modal {
        padding:20px
    }

    .exam-shell>.top {
        padding:10px 0
    }

}

:root {
    background:#f3f6f5;
    font-size:14px
}

.wrap:not(.admin-shell):not(.exam-shell) {
    max-width:1180px;
    padding:28px 20px
}

.card {
    border-radius:16px;
    padding:21px;
    margin:14px 0;
    box-shadow:0 8px 26px #17372b09
}

button,.button {
    border-radius:9px;
    padding:10px 14px
}

.option input,
input[type="radio"],
input[type="checkbox"] {
    width:18px;
    height:18px;
    margin-top:0;
    flex:0 0 18px;
    accent-color:#087f68
}

.sidebar-submenu {
    border-radius:8px
}

.sidebar-submenu summary {
    display:flex;
    align-items:center;
    gap:12px;
    min-height:46px;
    padding:10px 12px;
    border-radius:8px;
    cursor:pointer;
    list-style:none
}

.sidebar-submenu summary::-webkit-details-marker {
    display:none
}

.sidebar-submenu summary svg {
    width:22px;
    height:22px;
    flex:0 0 auto
}

.sidebar-submenu summary.active,
.sidebar-submenu summary:hover {
    background:#087f6820;
    color:#fff
}

.sidebar-submenu-links {
    display:flex;
    flex-direction:column;
    gap:4px;
    padding:4px 8px 8px 46px
}

.sidebar-submenu-links a {
    padding:7px 10px;
    border-radius:7px;
    color:#dce8e4;
    font-size:14px
}

.sidebar-submenu-links a.active,
.sidebar-submenu-links a:hover {
    background:#087f6830;
    color:#fff
}

.schedule-list-heading {
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    width:100%;
    margin-bottom:16px
}

.schedule-list-heading h2 {
    margin:0
}

.schedule-actions-menu {
    position:relative;
    display:inline-block
}

.schedule-tablewrap {
    overflow:visible
}

.schedule-actions-menu summary {
    display:grid;
    width:36px;
    height:36px;
    padding:9px;
    place-items:center;
    border-radius:9px;
    background:#e6efec;
    color:#173c36;
    cursor:pointer;
    list-style:none
}

.schedule-actions-menu summary::-webkit-details-marker {
    display:none
}

.schedule-actions-menu summary svg {
    width:18px;
    height:18px
}

.schedule-actions-dropdown {
    position:absolute;
    top:calc(100% + 6px);
    right:0;
    z-index:12;
    display:none;
    min-width:174px;
    padding:0;
    overflow:hidden;
    border:1px solid #dbe5e1;
    border-radius:12px;
    background:#fff;
    box-shadow:0 8px 20px #17372b1c
}

.schedule-actions-menu[open] .schedule-actions-dropdown {
    display:grid;
    gap:0
}

.schedule-actions-dropdown form {
    margin:0
}

.schedule-actions-dropdown a,
.schedule-actions-dropdown button {
    display:flex;
    width:100%;
    min-height:32px;
    justify-content:flex-start;
    padding:6px 12px;
    border-radius:0;
    background:transparent;
    color:#173c36;
    font-size:14px;
    font-weight:500;
    text-align:left;
    text-decoration:none;
    white-space:nowrap;
    transition:background-color .14s ease,color .14s ease
}

.schedule-actions-dropdown a:hover,
.schedule-actions-dropdown button:not(:disabled):hover,
.schedule-actions-dropdown a:focus-visible,
.schedule-actions-dropdown button:focus-visible {
    background:#1d6bd1;
    color:#fff;
    outline:none
}

.schedule-create-modal {
    max-width:760px
}

.schedule-create-modal .modal-heading {
    justify-content:space-between;
    margin-bottom:18px
}

.schedule-create-modal .modal-heading h2 {
    margin:0
}

.schedule-create-form {
    grid-template-columns:repeat(2,minmax(0,1fr));
    align-items:end;
    gap:8px 18px
}

.schedule-create-form .field {
    min-width:0;
    margin:8px 0
}

.schedule-create-form input[readonly] {
    background:#f2f6f4;
    color:#657771;
    cursor:default
}

.schedule-create-actions {
    grid-column:1 / -1;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin-top:10px
}

.schedule-create-actions .option {
    margin:0
}

.schedule-create-actions button {
    min-width:150px;
    white-space:nowrap
}

@media(max-width:560px) {
    .schedule-create-form {
        grid-template-columns:1fr
    }

    .schedule-create-actions {
        grid-column:auto;
        align-items:stretch;
        flex-direction:column
    }
}