:root {
        --navy: #102b59;
        --navy-deep: #091b3c;
        --blue: #2458ad;
        --blue-bright: #2f69c8;
        --blue-soft: #eaf1ff;
        --ink: #1d2b45;
        --muted: #75839b;
        --line: #e7ecf4;
        --surface: #fff;
        --canvas: #f4f7fc;
        --success: #15966a;
        --danger: #db4f61;
        --warning: #e5a12d;
        --radius: 16px;
        --shadow: 0 8px 28px rgba(24, 45, 83, 0.06);
}
* {
        box-sizing: border-box;
}
html {
        scroll-behavior: smooth;
}
body {
        font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont,
                "Segoe UI", sans-serif;
        color: var(--ink);
        font-size: 13.5px;
        background: var(--canvas);
}
a {
        text-decoration: none;
}
.app-body {
        min-height: 100vh;
}
.app-sidebar {
        width: 258px;
        position: fixed;
        inset: 0 auto 0 0;
        background: linear-gradient(
                178deg,
                #102b59 0%,
                #0d234b 60%,
                #091b3c 100%
        );
        color: #fff;
        display: flex;
        flex-direction: column;
        z-index: 1040;
        padding: 27px 17px 18px;
        overflow-y: auto;
        box-shadow: 7px 0 28px rgba(12, 28, 60, 0.06);
}
.brand-lockup {
        display: flex;
        align-items: center;
        gap: 12px;
        color: #fff;
        padding: 0 10px 30px;
}
.brand-mark {
        height: 41px;
        width: 41px;
        flex: 0 0 41px;
        border-radius: 13px;
        display: grid;
        place-items: center;
        background: linear-gradient(140deg, #5a8df3, #2b5cb8);
        box-shadow: 0 7px 18px rgba(42, 91, 177, 0.28);
        font-size: 20px;
        color: #fff;
}
.brand-text {
        display: flex;
        flex-direction: column;
        line-height: 1.13;
}
.brand-text strong,
.auth-logo strong {
        font-size: 17px;
        letter-spacing: 0.2px;
        font-weight: 800;
}
.brand-text strong span,
.auth-logo strong span {
        color: #8fb6ff;
}
.brand-text small {
        font-size: 9px;
        letter-spacing: 2px;
        color: #a9bbd9;
        margin-top: 5px;
        font-weight: 600;
}
.sidebar-section-label {
        font-size: 9px;
        letter-spacing: 1.6px;
        color: #839ac1;
        font-weight: 800;
        padding: 0 13px 11px;
}
.sidebar-nav {
        display: flex;
        flex-direction: column;
        gap: 5px;
}
.nav-entry {
        position: relative;
        height: 45px;
        display: flex;
        align-items: center;
        gap: 13px;
        padding: 0 13px;
        color: #b8c7e0;
        border-radius: 11px;
        font-weight: 550;
        font-size: 12.5px;
        transition: all 0.18s ease;
}
.nav-entry > i {
        font-size: 17px;
        width: 20px;
        color: #91a9ce;
        text-align: center;
}
.nav-entry:hover {
        background: rgba(255, 255, 255, 0.07);
        color: #fff;
}
.nav-entry.active {
        color: #fff;
        background: linear-gradient(
                90deg,
                rgba(62, 120, 220, 0.36),
                rgba(67, 111, 181, 0.18)
        );
        box-shadow: inset 3px 0 #70a2ff;
}
.nav-entry.active > i {
        color: #8eb6ff;
}
.nav-mini-badge {
        font-size: 8px;
        letter-spacing: 0.4px;
        margin-left: auto;
        background: #e4edff;
        color: #204b91;
        border-radius: 20px;
        padding: 3px 6px;
        font-weight: 800;
}
.sidebar-bottom-card {
        display: flex;
        align-items: center;
        gap: 11px;
        margin: auto 5px 20px;
        padding: 13px 11px;
        border: 1px solid rgba(177, 202, 242, 0.14);
        border-radius: 13px;
        background: rgba(255, 255, 255, 0.055);
}
.sidebar-bottom-icon {
        width: 34px;
        height: 34px;
        display: grid;
        place-items: center;
        flex: 0 0 34px;
        border-radius: 10px;
        background: rgba(111, 163, 255, 0.15);
        color: #93b9ff;
        font-size: 17px;
}
.sidebar-bottom-card strong {
        display: block;
        font-size: 10.5px;
        color: #f1f5ff;
}
.sidebar-bottom-card span {
        display: block;
        font-size: 9px;
        color: #9aafd2;
        margin-top: 4px;
}
.sidebar-footer {
        text-align: center;
        font-size: 9px;
        color: #7891ba;
        letter-spacing: 0.3px;
        padding: 0 4px;
}
.app-main-shell {
        margin-left: 258px;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
}
.topbar {
        height: 89px;
        padding: 0 34px;
        background: rgba(255, 255, 255, 0.96);
        border-bottom: 1px solid #e8edf5;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: sticky;
        top: 0;
        z-index: 1020;
        backdrop-filter: blur(14px);
}
.topbar-heading .topbar-eyebrow {
        font-size: 8.5px;
        letter-spacing: 1.5px;
        color: #9aa8be;
        font-weight: 800;
        margin-bottom: 6px;
}
.topbar-heading h1 {
        font-size: 20px;
        letter-spacing: -0.5px;
        margin: 0;
        color: #1d2c48;
        font-weight: 750;
}
.topbar-actions,
.user-menu {
        display: flex;
        align-items: center;
        gap: 13px;
}
.secure-pill {
        align-items: center;
        gap: 7px;
        border: 1px solid #e2ebf5;
        padding: 8px 11px;
        border-radius: 22px;
        color: #60728b;
        font-size: 10px;
        font-weight: 650;
        background: #fbfdff;
}
.secure-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #22b57e;
        box-shadow: 0 0 0 3px #def8ed;
}
.user-avatar {
        width: 38px;
        height: 38px;
        display: grid;
        place-items: center;
        border-radius: 13px;
        background: linear-gradient(140deg, #284e8c, #4776c5);
        color: white;
        font-weight: 800;
        font-size: 14px;
        box-shadow: 0 5px 13px rgba(32, 78, 146, 0.17);
}
.user-meta strong {
        display: block;
        font-size: 11px;
        font-weight: 750;
        white-space: nowrap;
        max-width: 150px;
        overflow: hidden;
        text-overflow: ellipsis;
}
.user-meta span {
        display: block;
        font-size: 10px;
        color: #8592a8;
        margin-top: 4px;
}
.icon-action {
        border: 0;
        background: transparent;
        color: #7e8ca3;
        padding: 6px;
        border-radius: 8px;
}
.icon-action:hover {
        background: #f2f5fa;
}
.sidebar-toggle {
        display: none;
        border: 1px solid var(--line);
        color: #1a376a;
        border-radius: 10px;
        width: 38px;
        height: 38px;
        font-size: 23px;
        padding: 0;
        align-items: center;
        justify-content: center;
}
.app-content {
        padding: 27px 34px 34px;
        flex: 1;
        min-width: 0;
}
.app-footer {
        padding: 17px 34px;
        border-top: 1px solid #e8edf5;
        color: #9ba7ba;
        font-size: 10px;
        display: flex;
        justify-content: space-between;
        gap: 15px;
        background: #fbfcfe;
}
.app-alert {
        border-radius: 12px;
        border: 0;
        box-shadow: var(--shadow);
        font-size: 12px;
        padding: 13px 15px;
}
.page-intro {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 20px;
        margin-bottom: 22px;
}
.page-intro h2 {
        font-weight: 780;
        letter-spacing: -0.5px;
        font-size: 20px;
        margin: 0 0 7px;
}
.page-intro p {
        color: #8390a6;
        margin: 0;
        font-size: 11.5px;
        line-height: 1.65;
}
.eyebrow {
        font-size: 9px;
        color: #5376ac;
        letter-spacing: 1.4px;
        font-weight: 800;
        text-transform: uppercase;
        margin-bottom: 8px;
}
.btn-primary {
        background: #2458ad;
        border-color: #2458ad;
}
.btn-primary:hover,
.btn-primary:focus {
        background: #173e80;
        border-color: #173e80;
}
.btn {
        font-size: 12px;
        font-weight: 650;
        border-radius: 9px;
        padding: 9px 14px;
}
.btn-sm {
        font-size: 10.5px;
        padding: 6px 10px;
        border-radius: 8px;
}
.btn-outline-primary {
        border-color: #cbd9f1;
        color: #2d5ba5;
}
.btn-outline-primary:hover {
        background: #edf3ff;
        color: #174185;
        border-color: #afc5e9;
}
.btn-light {
        background: #f4f7fb;
        border-color: #e8edf4;
        color: #60708a;
}
.card-panel {
        background: #fff;
        border: 1px solid #e8edf5;
        border-radius: var(--radius);
        box-shadow: var(--shadow);
        padding: 21px;
}
.card-panel-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        margin-bottom: 18px;
}
.card-panel-header h3 {
        font-size: 13px;
        font-weight: 800;
        margin: 0;
}
.card-panel-header p {
        font-size: 10px;
        color: #8b98ac;
        margin: 5px 0 0;
}
.section-label {
        font-size: 9px;
        letter-spacing: 1.3px;
        color: #8897ae;
        font-weight: 800;
        text-transform: uppercase;
}
.stat-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 15px;
        margin-bottom: 20px;
}
.stat-card {
        background: #fff;
        position: relative;
        overflow: hidden;
        border: 1px solid #e7edf5;
        border-radius: 15px;
        min-height: 125px;
        padding: 18px 18px 16px;
        box-shadow: 0 6px 24px rgba(27, 53, 94, 0.035);
        transition: transform 0.18s, box-shadow 0.18s;
}
.stat-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 24px rgba(27, 53, 94, 0.08);
}
.stat-card:after {
        content: "";
        position: absolute;
        right: -20px;
        top: -23px;
        width: 75px;
        height: 75px;
        border-radius: 50%;
        background: var(--stat-wash, #eef3ff);
        opacity: 0.75;
}
.stat-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative;
        z-index: 1;
}
.stat-label {
        font-size: 10px;
        color: #7c8ba3;
        font-weight: 650;
}
.stat-icon {
        width: 33px;
        height: 33px;
        border-radius: 11px;
        display: grid;
        place-items: center;
        font-size: 16px;
        background: var(--stat-wash, #edf3ff);
        color: var(--stat-color, #285bae);
}
.stat-number {
        font-size: 29px;
        font-weight: 800;
        line-height: 1.05;
        color: #1c2b48;
        letter-spacing: -1px;
        margin-top: 15px;
        position: relative;
        z-index: 1;
}
.stat-foot {
        font-size: 9.5px;
        color: #9aa6b8;
        margin-top: 7px;
        position: relative;
        z-index: 1;
}
.stat-card.blue {
        --stat-wash: #eaf1ff;
        --stat-color: #275bb1;
}
.stat-card.teal {
        --stat-wash: #e3f7f4;
        --stat-color: #159a91;
}
.stat-card.amber {
        --stat-wash: #fff3dc;
        --stat-color: #b97b13;
}
.stat-card.red {
        --stat-wash: #ffeaed;
        --stat-color: #d64d60;
}
.stat-card.purple {
        --stat-wash: #f0edff;
        --stat-color: #7560c8;
}
.stat-card.green {
        --stat-wash: #e4f7ed;
        --stat-color: #1f9966;
}
.stat-card.slate {
        --stat-wash: #edf1f6;
        --stat-color: #657893;
}
.chart-grid {
        display: grid;
        grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr);
        gap: 18px;
        margin-bottom: 20px;
}
.chart-container {
        height: 280px;
        position: relative;
}
.chart-container.pie {
        height: 250px;
        max-width: 330px;
        margin: 0 auto;
}
.data-table-card {
        padding: 0;
        overflow: hidden;
}
.data-table-card .card-panel-header {
        padding: 20px 21px 0;
}
.table-responsive {
        width: 100%;
}
.table {
        --bs-table-bg: transparent;
        vertical-align: middle;
        margin-bottom: 0;
        font-size: 11px;
}
.table thead th {
        color: #7f8da3;
        letter-spacing: 0.4px;
        font-size: 9px;
        text-transform: uppercase;
        font-weight: 800;
        background: #f8fafe;
        border-bottom: 1px solid #e8edf5;
        padding: 13px 13px;
        white-space: nowrap;
}
.table tbody td {
        padding: 13px;
        color: #41516d;
        border-bottom: 1px solid #eff2f7;
}
.table tbody tr:last-child td {
        border-bottom: 0;
}
.table tbody tr:hover td {
        background: #fafcff;
}
.table .badge {
        font-size: 9px;
        padding: 5px 8px;
        font-weight: 750;
}
.table-question-text {
        max-width: 330px;
        min-width: 160px;
        white-space: normal;
        line-height: 1.5;
        color: #243653;
        font-weight: 600;
}
.table-options-list {
        padding-left: 18px;
        margin: 0;
        min-width: 180px;
        max-width: 300px;
}
.table-options-list li {
        margin: 4px 0;
        line-height: 1.45;
        color: #63728b;
        white-space: normal;
}
.correct-badge {
        font-size: 8px !important;
        padding: 3px 6px !important;
        background: #dff7e9 !important;
        color: #087747 !important;
        vertical-align: 1px;
        margin-left: 4px;
}
.future-badge {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        font-size: 9px;
        font-weight: 700;
        border-radius: 20px;
        padding: 5px 8px;
        background: #fff3dc;
        color: #97610e;
}
.future-badge.no {
        background: #edf1f6;
        color: #78879b;
}
.table-actions {
        display: flex;
        align-items: center;
        gap: 5px;
        white-space: nowrap;
}
.action-icon-btn {
        height: 29px;
        width: 30px;
        display: inline-grid;
        place-items: center;
        border-radius: 8px;
        border: 1px solid #e4eaf4;
        color: #667895;
        background: #fff;
        font-size: 12px;
}
.action-icon-btn:hover {
        background: #edf4ff;
        border-color: #c8d9f3;
        color: #2458ad;
}
.action-icon-btn.danger:hover {
        background: #fff0f1;
        border-color: #ffccd2;
        color: #c83246;
}
.empty-state {
        text-align: center;
        padding: 45px 20px;
        color: #8a99af;
}
.empty-state .empty-icon {
        width: 57px;
        height: 57px;
        margin: 0 auto 12px;
        border-radius: 18px;
        background: #eff4fd;
        color: #4e78bb;
        display: grid;
        place-items: center;
        font-size: 24px;
}
.empty-state strong {
        display: block;
        font-size: 13px;
        color: #425370;
        margin-bottom: 5px;
}
.empty-state span {
        font-size: 11px;
}
.filter-panel {
        margin-bottom: 19px;
        padding: 20px;
}
.filter-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 13px;
}
.filter-actions {
        display: flex;
        align-items: end;
        gap: 8px;
}
.form-label {
        font-size: 10.5px;
        color: #586983;
        font-weight: 750;
        margin-bottom: 7px;
}
.form-control,
.form-select {
        font-size: 12px;
        min-height: 39px;
        border-radius: 9px;
        border-color: #dfe6f0;
        color: #253653;
        padding: 9px 11px;
        background-color: #fff;
}
.form-control:focus,
.form-select:focus {
        border-color: #83a7ea;
        box-shadow: 0 0 0 0.2rem rgba(48, 105, 200, 0.11);
}
textarea.form-control {
        line-height: 1.6;
}
.form-text {
        font-size: 10px;
        color: #8e9bb0;
}
.required-star {
        color: #df4a5e;
}
.form-section-title {
        display: flex;
        align-items: center;
        gap: 10px;
        font-weight: 800;
        font-size: 12px;
        margin-bottom: 15px;
        color: #233551;
}
.form-section-title .section-number {
        width: 28px;
        height: 28px;
        border-radius: 9px;
        background: #eaf1ff;
        color: #2d61b5;
        display: grid;
        place-items: center;
        font-size: 11px;
}
.question-form-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 285px;
        gap: 18px;
        align-items: start;
}
.question-form-main,
.question-form-aside {
        display: flex;
        flex-direction: column;
        gap: 17px;
}
.question-form-aside .card-panel {
        position: sticky;
        top: 110px;
}
.topic-help {
        font-size: 10px;
        color: #8d9ab0;
        margin-top: 6px;
}
.options-editor {
        display: flex;
        flex-direction: column;
        gap: 9px;
}
.option-editor-row {
        display: grid;
        grid-template-columns: 27px minmax(0, 1fr) 31px;
        gap: 10px;
        align-items: center;
        padding: 10px;
        border-radius: 12px;
        border: 1px solid #e5eaf3;
        background: #fbfcff;
}
.option-editor-row:focus-within {
        border-color: #b8cdf0;
        background: #fff;
        box-shadow: 0 0 0 3px rgba(48, 105, 200, 0.055);
}
.option-order {
        font-size: 10px;
        color: #8090a8;
        text-align: center;
        font-weight: 800;
}
.option-text-input {
        border: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
        min-width: 0;
        padding: 8px 3px !important;
}
.correct-choice {
        display: flex;
        justify-content: center;
        align-items: center;
}
.correct-choice input {
        height: 17px;
        width: 17px;
        accent-color: #169a68;
        cursor: pointer;
}
.correct-choice label {
        display: none;
}
.option-delete {
        border: 1px solid #edf0f6;
        background: #fff;
        color: #a0abba;
        border-radius: 8px;
        height: 29px;
        width: 29px;
        display: grid;
        place-items: center;
}
.option-delete:hover {
        background: #fff0f1;
        border-color: #f4c6cc;
        color: #cd4657;
}
.option-locked {
        background: #fff !important;
        border-style: dashed;
}
.option-lock-label {
        font-size: 9px;
        color: #9aa5b7;
        text-align: center;
        margin-top: 4px;
}
.options-caption {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 12px;
}
.options-caption p {
        font-size: 10px;
        color: #8694aa;
        margin: 4px 0 0;
}
.options-counter {
        border-radius: 20px;
        background: #edf3ff;
        color: #315da5;
        padding: 5px 9px;
        font-size: 9px;
        font-weight: 800;
        white-space: nowrap;
}
.workflow-status-note {
        background: #f5f8fe;
        border: 1px solid #e2eafa;
        border-radius: 12px;
        padding: 12px;
        color: #5b6f90;
        font-size: 10px;
        line-height: 1.65;
}
.workflow-status-note strong {
        color: #31578f;
}
.review-panel {
        border-color: #d9e5f9;
}
.form-sticky-actions {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
}
.mini-meta-list {
        display: flex;
        flex-direction: column;
        gap: 12px;
}
.mini-meta-line {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 15px;
        font-size: 10px;
}
.mini-meta-line span {
        color: #8795aa;
}
.mini-meta-line strong {
        color: #344661;
        text-align: right;
}
.info-banner {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        border-radius: 11px;
        padding: 12px 13px;
        background: #eff5ff;
        color: #43669d;
        font-size: 10.5px;
        line-height: 1.6;
}
.info-banner i {
        font-size: 15px;
        margin-top: 1px;
}
.subject-category-pill {
        background: #edf3ff;
        color: #335fa6;
        border-radius: 8px;
        padding: 5px 8px;
        font-size: 9px;
        font-weight: 800;
}
.subject-category-pill.optional {
        background: #e2f7fa;
        color: #138092;
}
.subject-category-pill.special {
        background: #f0edff;
        color: #745dba;
}
.users-stat-row {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 12px;
        margin-bottom: 19px;
}
.user-stat {
        border: 1px solid #e6ecf4;
        background: #fff;
        border-radius: 13px;
        padding: 15px;
        display: flex;
        align-items: center;
        gap: 12px;
}
.user-stat-icon {
        width: 35px;
        height: 35px;
        border-radius: 11px;
        background: #edf3ff;
        color: #3569bd;
        display: grid;
        place-items: center;
        font-size: 17px;
}
.user-stat strong {
        display: block;
        font-size: 20px;
        font-weight: 800;
}
.user-stat span {
        display: block;
        font-size: 9px;
        color: #8795a9;
        margin-top: 3px;
}
.form-error-list {
        border-radius: 11px;
        background: #fff0f1;
        color: #a32e40;
        border: 1px solid #ffd7dc;
        padding: 12px 16px;
        font-size: 11px;
}
.form-error-list li + li {
        margin-top: 4px;
}
.user-role-pill {
        padding: 5px 8px;
        border-radius: 7px;
        font-size: 9px;
        font-weight: 800;
        display: inline-block;
}
.role-deo {
        background: #e9f2ff;
        color: #2b5eaa;
}
.role-admin {
        background: #eeeaff;
        color: #6953b8;
}
.role-superadmin {
        background: #dff7ec;
        color: #14734f;
}
.account-state {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        font-weight: 750;
        font-size: 9px;
}
.account-state:before {
        content: "";
        height: 6px;
        width: 6px;
        border-radius: 50%;
        background: #1baf75;
}
.account-state.inactive:before {
        background: #e06472;
}
.account-state.inactive {
        color: #c85160;
}
.account-state.active {
        color: #198b63;
}
.subject-topic-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 18px;
        align-items: start;
}
.management-form {
        margin-bottom: 15px;
        background: #f8faff;
        border: 1px solid #e8eef8;
        border-radius: 13px;
        padding: 15px;
}
.management-form .form-row {
        display: grid;
        grid-template-columns: 1fr 1fr auto;
        gap: 10px;
        align-items: end;
}
.management-form .form-row.two {
        grid-template-columns: 1fr 1fr auto;
}
.subject-table td,
.subject-table th {
        padding: 11px 10px;
}
.subject-topic-card {
        padding: 0;
        overflow: hidden;
}
.subject-topic-card .card-panel-header {
        padding: 20px 20px 0;
}
.small-count {
        background: #edf3ff;
        color: #3a64a7;
        border-radius: 7px;
        font-weight: 800;
        font-size: 9px;
        padding: 4px 7px;
}
.inactive-row {
        opacity: 0.58;
}
.question-detail-hero {
        border-radius: 14px;
        padding: 17px 18px;
        background: linear-gradient(115deg, #102b59, #1e4c8e);
        color: #fff;
        margin-bottom: 18px;
}
.question-detail-hero .detail-id {
        font-size: 9px;
        color: #a7c4f3;
        letter-spacing: 1px;
        font-weight: 800;
}
.question-detail-hero h4 {
        font-size: 16px;
        line-height: 1.65;
        font-weight: 650;
        margin: 9px 0 13px;
        white-space: pre-wrap;
        overflow-wrap: anywhere;
}
.question-detail-badges {
        display: flex;
        align-items: center;
        gap: 7px;
        flex-wrap: wrap;
}
.question-detail-badges .badge {
        font-size: 9px;
}
.detail-meta-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
        margin-bottom: 19px;
}
.detail-meta-card {
        border: 1px solid #e8edf5;
        border-radius: 10px;
        padding: 11px 12px;
        min-width: 0;
}
.detail-meta-card span {
        display: block;
        color: #8b99ad;
        font-size: 9px;
        font-weight: 650;
        margin-bottom: 6px;
}
.detail-meta-card strong {
        display: block;
        font-size: 11px;
        color: #354866;
        overflow-wrap: anywhere;
}
.detail-options {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin: 0;
        padding: 0;
        list-style: none;
}
.detail-options li {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        padding: 11px 12px;
        border: 1px solid #e7ecf4;
        border-radius: 10px;
        background: #fff;
}
.detail-options li.correct-option {
        background: #f1fbf5;
        border-color: #bfead1;
}
.detail-option-letter {
        height: 24px;
        width: 24px;
        border-radius: 8px;
        flex: 0 0 24px;
        display: grid;
        place-items: center;
        background: #edf1f8;
        color: #73829a;
        font-size: 9px;
        font-weight: 800;
}
.correct-option .detail-option-letter {
        background: #c9f0d8;
        color: #0d7e4d;
}
.detail-option-content {
        flex: 1;
        color: #43536e;
        font-size: 11px;
        line-height: 1.6;
        white-space: pre-wrap;
        overflow-wrap: anywhere;
}
.detail-reviews {
        margin-top: 20px;
        border-top: 1px solid #e8edf4;
        padding-top: 18px;
}
.review-timeline-item {
        display: flex;
        gap: 11px;
        padding: 10px 0;
        border-bottom: 1px solid #f0f3f7;
}
.review-timeline-item:last-child {
        border-bottom: 0;
}
.review-timeline-icon {
        width: 29px;
        height: 29px;
        flex: 0 0 29px;
        border-radius: 10px;
        background: #eff4ff;
        color: #426cb4;
        display: grid;
        place-items: center;
}
.review-timeline-main {
        flex: 1;
}
.review-timeline-main strong {
        font-size: 10px;
}
.review-timeline-main p {
        font-size: 10px;
        color: #77859b;
        margin: 4px 0 0;
        white-space: pre-wrap;
}
.question-modal-content {
        border: 0;
        border-radius: 18px;
        overflow: hidden;
}
.question-modal-content .modal-header {
        padding: 19px 23px;
        border-bottom: 1px solid #e8edf5;
}
.question-modal-content .modal-title {
        font-weight: 800;
        font-size: 16px;
}
.modal-kicker {
        font-size: 8px;
        letter-spacing: 1.5px;
        color: #6c8dc4;
        font-weight: 800;
        margin-bottom: 4px;
}
.question-modal-content .modal-body {
        padding: 22px;
}
.modal-loading {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        padding: 52px;
        color: #7d8ca4;
}
.modal-loading .spinner-border {
        width: 26px;
        height: 26px;
}
.dt-container .dt-search input,
.dt-container .dt-length select {
        border: 1px solid #dfe6f0 !important;
        border-radius: 8px !important;
        padding: 6px 9px !important;
        color: #445574 !important;
        background: white !important;
        font-size: 11px !important;
}
.dt-container .dt-search label,
.dt-container .dt-length label,
.dt-container .dt-info {
        font-size: 10px;
        color: #8290a5;
}
.dt-container .dt-paging .dt-paging-button {
        border-radius: 7px !important;
        font-size: 10px !important;
        padding: 5px 9px !important;
}
.dt-container .dt-paging .dt-paging-button.current {
        background: #2458ad !important;
        color: #fff !important;
        border-color: #2458ad !important;
}
.dt-container .dt-layout-row {
        padding: 13px 18px;
        margin: 0 !important;
}
.dt-container .dt-layout-row:first-child {
        border-bottom: 1px solid #edf1f6;
}
.dt-container .dt-layout-row:last-child {
        border-top: 1px solid #edf1f6;
}
.dt-container .dt-layout-table {
        padding: 0 0 5px;
}
.dt-container
        table.dataTable.dtr-inline.collapsed
        > tbody
        > tr
        > td.dtr-control:before,
.dt-container
        table.dataTable.dtr-inline.collapsed
        > tbody
        > tr
        > th.dtr-control:before {
        background: #2d5fb2;
        box-shadow: none;
        border: 0;
}
.text-muted-small {
        font-size: 10px;
        color: #8795a9;
}
.empty-inline {
        color: #9aa6b8;
        font-size: 10px;
}
.mobile-scrim {
        display: none;
}
/* Authentication experience */
.auth-body {
        min-height: 100vh;
        background: #0b1d3f;
        overflow-x: hidden;
}
.auth-scene {
        position: relative;
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 34px 20px;
        overflow: hidden;
        background: radial-gradient(
                        circle at 8% 15%,
                        rgba(44, 98, 184, 0.32),
                        transparent 35%
                ),
                radial-gradient(
                        circle at 93% 90%,
                        rgba(39, 91, 178, 0.26),
                        transparent 34%
                ),
                linear-gradient(135deg, #091831, #102b59 54%, #091a38);
}
.auth-decor {
        position: absolute;
        border-radius: 50%;
        border: 1px solid rgba(167, 198, 255, 0.12);
        pointer-events: none;
}
.decor-one {
        width: 530px;
        height: 530px;
        top: -305px;
        right: -170px;
        box-shadow: 0 0 0 34px rgba(157, 192, 255, 0.025),
                0 0 0 71px rgba(157, 192, 255, 0.018);
}
.decor-two {
        width: 450px;
        height: 450px;
        bottom: -290px;
        left: -190px;
        box-shadow: 0 0 0 40px rgba(157, 192, 255, 0.022),
                0 0 0 78px rgba(157, 192, 255, 0.015);
}
.auth-grid-pattern {
        position: absolute;
        inset: 0;
        opacity: 0.2;
        pointer-events: none;
        background-image: linear-gradient(
                        rgba(255, 255, 255, 0.04) 1px,
                        transparent 1px
                ),
                linear-gradient(
                        90deg,
                        rgba(255, 255, 255, 0.04) 1px,
                        transparent 1px
                );
        background-size: 42px 42px;
        mask-image: linear-gradient(to bottom, black, transparent 90%);
}
.auth-shell {
        width: min(1060px, 100%);
        min-height: 660px;
        position: relative;
        display: grid;
        grid-template-columns: 1fr 0.9fr;
        border-radius: 23px;
        overflow: hidden;
        background: #fff;
        box-shadow: 0 32px 100px rgba(0, 0, 0, 0.28);
        z-index: 1;
}
.auth-brand-panel {
        padding: 35px 42px 27px;
        background: linear-gradient(
                150deg,
                #173b76 0%,
                #102b59 48%,
                #0b2047 100%
        );
        color: #fff;
        display: flex;
        flex-direction: column;
        position: relative;
        overflow: hidden;
}
.auth-brand-panel:after {
        content: "";
        position: absolute;
        right: -120px;
        bottom: 100px;
        width: 380px;
        height: 380px;
        border: 1px solid rgba(160, 194, 252, 0.13);
        border-radius: 50%;
        box-shadow: 0 0 0 30px rgba(160, 194, 252, 0.025),
                0 0 0 65px rgba(160, 194, 252, 0.018);
}
.auth-logo {
        display: flex;
        align-items: center;
        gap: 11px;
        position: relative;
        z-index: 1;
}
.auth-logo > span:last-child {
        display: flex;
        flex-direction: column;
        line-height: 1.15;
}
.auth-logo small {
        font-size: 8px;
        color: #a5bee8;
        letter-spacing: 1.7px;
        font-weight: 700;
        margin-top: 5px;
}
.auth-brand-copy {
        position: relative;
        z-index: 1;
        margin: auto 0;
        padding: 42px 0 45px;
}
.eyebrow-light {
        display: flex;
        align-items: center;
        gap: 9px;
        font-size: 8px;
        color: #a5bde4;
        font-weight: 800;
        letter-spacing: 1.65px;
        margin-bottom: 23px;
}
.eyebrow-light span {
        height: 6px;
        width: 6px;
        border-radius: 50%;
        background: #72a5ff;
        box-shadow: 0 0 0 4px rgba(112, 162, 255, 0.13);
}
.auth-brand-copy h1 {
        font-size: 37px;
        font-weight: 800;
        letter-spacing: -1.4px;
        line-height: 1.2;
        margin: 0 0 17px;
}
.auth-brand-copy h1 em {
        font-style: normal;
        color: #8cb7ff;
}
.auth-brand-copy > p {
        font-size: 12px;
        max-width: 330px;
        line-height: 1.85;
        color: #b1c3df;
        margin-bottom: 33px;
}
.auth-feature-list {
        display: flex;
        flex-direction: column;
        gap: 18px;
}
.auth-feature-list > div {
        display: flex;
        gap: 12px;
        align-items: center;
}
.feature-icon {
        height: 35px;
        width: 35px;
        border-radius: 11px;
        display: grid;
        place-items: center;
        background: rgba(142, 183, 255, 0.12);
        border: 1px solid rgba(154, 192, 255, 0.12);
        color: #a2c4ff;
        font-size: 16px;
}
.auth-feature-list strong {
        display: block;
        font-size: 10.5px;
        color: #f5f8ff;
}
.auth-feature-list small {
        display: block;
        font-size: 9px;
        color: #9eb4d7;
        margin-top: 4px;
}
.auth-brand-footer {
        position: relative;
        z-index: 1;
        display: flex;
        justify-content: space-between;
        gap: 10px;
        font-size: 12px;
        color: #fff;
}
.auth-brand-footer i {
        color: #86b1ff;
}
.auth-form-panel {
        display: flex;
        flex-direction: column;
        background: #fff;
        min-width: 0;
}
.auth-form-top {
        display: flex;
        align-items: center;
        gap: 11px;
        padding: 29px 32px 0;
}
.auth-top-label {
        font-size: 8px;
        color: #8c9ab0;
        letter-spacing: 1.4px;
        font-weight: 800;
        white-space: nowrap;
}
.auth-top-line {
        height: 1px;
        background: #edf1f6;
        flex: 1;
}
.auth-form-body {
        width: 100%;
        max-width: 400px;
        margin: auto;
        padding: 36px 32px 25px;
}
.auth-heading {
        margin-bottom: 27px;
}
.form-step-label {
        font-size: 8px;
        color: #2f65b5;
        font-weight: 800;
        letter-spacing: 1.3px;
        display: block;
        margin-bottom: 10px;
}
.auth-heading h2 {
        font-size: 25px;
        font-weight: 800;
        letter-spacing: -0.8px;
        color: #192a47;
        margin: 0 0 10px;
}
.auth-heading p {
        font-size: 11px;
        line-height: 1.8;
        color: #8996a9;
        margin: 0;
}
.auth-form-panel .form-label {
        font-size: 12px;
        color: #455775;
}
.input-icon-wrap {
        position: relative;
}
.input-icon-wrap > i {
        position: absolute;
        top: 50%;
        left: 13px;
        transform: translateY(-50%);
        font-size: 15px;
        color: #92a0b4;
        z-index: 2;
}
.auth-input {
        height: 47px !important;
        padding: 10px 43px 10px 39px !important;
        border-radius: 10px !important;
        border-color: #e1e7f0 !important;
        font-size: 11px !important;
        background: #fcfdff !important;
}
.auth-input::placeholder {
        color: #aab4c3;
}
.auth-input:focus {
        background: #fff !important;
        border-color: #90afe7 !important;
        box-shadow: 0 0 0 3px rgba(43, 98, 181, 0.08) !important;
}
.password-toggle {
        position: absolute;
        right: 9px;
        top: 50%;
        transform: translateY(-50%);
        border: 0;
        background: transparent;
        color: #93a0b3;
        padding: 6px;
        font-size: 14px;
}
.verification-panel {
        border: 1px solid #e5eaf3;
        border-radius: 11px;
        padding: 12px;
        margin: 18px 0 20px;
        background: #fbfcff;
}
.verification-heading {
        display: flex;
        align-items: center;
        gap: 7px;
        margin-bottom: 11px;
        font-size: 10.5px;
        font-weight: 800;
        color: #405372;
}
.verification-heading i {
        color: #2b61b5;
        font-size: 14px;
}
.verification-heading small {
        margin-left: auto;
        border-radius: 5px;
        background: #fff2db;
        color: #9c6a1d;
        font-size: 8px;
        padding: 4px 6px;
        font-weight: 800;
}
.turnstile-placeholder {
        border: 1px dashed #ccd6e5;
        border-radius: 8px;
        padding: 13px 10px;
        display: flex;
        align-items: center;
        gap: 9px;
        color: #7b8da8;
        font-size: 9px;
        line-height: 1.6;
}
.turnstile-placeholder i {
        font-size: 17px;
        color: #6589c2;
}
.turnstile-placeholder code {
        font-size: 8.5px;
        color: #3a5d95;
}
.cf-turnstile {
        min-height: 65px;
        display: flex;
        align-items: center;
        justify-content: center;
        max-width: 100%;
        overflow: hidden;
}
.btn-auth-primary {
        height: 48px;
        border-radius: 10px;
        background: linear-gradient(100deg, #2458ad, #2f6dc5);
        border: 0;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 17px 0 19px;
        font-size: 11px;
        box-shadow: 0 8px 19px rgba(36, 88, 173, 0.19);
        transition: transform 0.15s, box-shadow 0.15s;
}
.btn-auth-primary i {
        font-size: 16px;
}
.btn-auth-primary:hover {
        background: linear-gradient(100deg, #1a478f, #265eb2);
        color: #fff;
        transform: translateY(-1px);
        box-shadow: 0 11px 20px rgba(36, 88, 173, 0.25);
}
.auth-assurance {
        display: flex;
        align-items: flex-start;
        gap: 9px;
        font-size: 11px;
        color: #000;
        line-height: 1;
        margin-top: 18px;
}
.auth-assurance i {
        font-size: 14px;
        color: #2c9e76;
}
.auth-form-footer {
        display: flex;
        justify-content: space-between;
        gap: 10px;
        padding: 17px 32px 22px;
        color: #000;
        font-size: 12px;
        border-top: 1px solid #f0f3f7;
}
.auth-form-footer span:first-child {
        display: flex;
        align-items: center;
        gap: 6px;
}
.auth-form-footer i {
        color: #2a966e;
}
.auth-toast {
        position: fixed;
        z-index: 2000;
        top: 15px;
        left: 50%;
        transform: translateX(-50%);
        width: min(560px, calc(100vw - 30px));
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.17);
        font-size: 12px;
        border-radius: 11px;
}
.mobile-brand-mark {
        display: none;
}
.otp-form-body {
        padding-top: 22px;
}
.back-to-login {
        font-size: 10px;
        color: #6c7e99;
        white-space: nowrap;
}
.back-to-login:hover {
        color: #2458ad;
}
.otp-illustration {
        height: 116px;
        width: 116px;
        position: relative;
        margin: 8px auto 19px;
        display: grid;
        place-items: center;
}
.otp-illustration-orbit {
        position: absolute;
        border: 1px solid #dbe7fb;
        border-radius: 50%;
        inset: 0;
}
.orbit-b {
        inset: 11px;
        border-style: dashed;
        animation: rotate-orbit 30s linear infinite;
}
.otp-illustration-core {
        height: 70px;
        width: 70px;
        display: grid;
        place-items: center;
        border-radius: 24px;
        background: linear-gradient(145deg, #e8f0ff, #d8e6ff);
        color: #285eae;
        font-size: 30px;
        box-shadow: 0 10px 22px rgba(34, 88, 170, 0.11);
}
.otp-spark {
        position: absolute;
        height: 25px;
        width: 25px;
        border-radius: 9px;
        display: grid;
        place-items: center;
        background: #fff;
        box-shadow: 0 4px 12px rgba(27, 56, 104, 0.12);
        font-size: 12px;
}
.spark-a {
        top: 7px;
        right: 0;
        color: #d59b2e;
}
.spark-b {
        bottom: 4px;
        left: 0;
        color: #198b68;
}
.otp-form-body .auth-heading {
        margin-bottom: 17px;
}
.otp-form-body .auth-heading h2 {
        font-size: 23px;
}
.otp-email-value {
        color: #2b5aa2;
        font-weight: 750;
}
.otp-timer-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: #f5f8fe;
        border: 1px solid #e6edf8;
        border-radius: 9px;
        padding: 10px 12px;
        margin-bottom: 17px;
        color: #71809a;
        font-size: 10px;
}
.otp-timer-row strong {
        font-size: 12px;
        letter-spacing: 0.5px;
        color: #2458ad;
        font-variant-numeric: tabular-nums;
}
.otp-timer-row strong.urgent {
        color: #d45261;
}
.otp-timer-row strong.expired {
        color: #d45261;
}
.otp-input {
        height: 58px !important;
        text-align: center;
        font-size: 23px !important;
        font-weight: 800;
        letter-spacing: 13px;
        color: #244f95;
        border: 1px solid #d8e2f1 !important;
        border-radius: 11px !important;
        padding-left: 20px !important;
        background: #fbfcff !important;
}
.otp-input::placeholder {
        color: #c1ccdc;
        letter-spacing: 7px;
}
.otp-input:focus {
        background: #fff !important;
        border-color: #7fa4e6 !important;
        box-shadow: 0 0 0 3px rgba(48, 105, 200, 0.08) !important;
}
.otp-help-note {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        margin-top: 18px;
        color: #99a4b5;
        font-size: 9px;
        line-height: 1.6;
}
.otp-help-note i {
        color: #7a95bf;
        font-size: 13px;
}
.otp-steps {
        display: flex;
        flex-direction: column;
        gap: 19px;
        margin-top: 29px;
        position: relative;
}
.otp-step {
        display: flex;
        align-items: center;
        gap: 12px;
        position: relative;
}
.otp-step:not(:last-child):after {
        content: "";
        position: absolute;
        left: 16px;
        top: 37px;
        width: 1px;
        height: 15px;
        background: rgba(146, 176, 222, 0.22);
}
.otp-step > span {
        height: 33px;
        width: 33px;
        border-radius: 11px;
        background: rgba(255, 255, 255, 0.07);
        border: 1px solid rgba(171, 197, 238, 0.14);
        display: grid;
        place-items: center;
        color: #91a9d2;
        font-size: 10px;
        font-weight: 800;
}
.otp-step.complete > span {
        background: rgba(38, 177, 129, 0.13);
        border-color: rgba(70, 213, 162, 0.24);
        color: #5bd3a0;
}
.otp-step.active > span {
        background: #2b62b6;
        border-color: #4c80d4;
        color: white;
        box-shadow: 0 4px 13px rgba(30, 83, 165, 0.3);
}
.otp-step strong {
        display: block;
        font-size: 10.5px;
        color: #f0f5ff;
}
.otp-step small {
        display: block;
        font-size: 9px;
        color: #9bb0d2;
        margin-top: 4px;
}
@keyframes rotate-orbit {
        to {
                transform: rotate(360deg);
        }
}
@media (max-width: 1300px) {
        .app-content {
                padding-left: 25px;
                padding-right: 25px;
        }
        .topbar {
                padding-left: 25px;
                padding-right: 25px;
        }
        .stat-grid {
                grid-template-columns: repeat(4, minmax(0, 1fr));
                gap: 11px;
        }
        .stat-card {
                padding: 15px;
        }
        .stat-number {
                font-size: 26px;
        }
        .filter-grid {
                grid-template-columns: repeat(3, minmax(0, 1fr));
        }
        .question-form-grid {
                grid-template-columns: minmax(0, 1fr) 250px;
        }
}
@media (max-width: 1050px) {
        .app-sidebar {
                transform: translateX(-105%);
                transition: transform 0.23s ease;
        }
        .app-sidebar.is-open {
                transform: translateX(0);
        }
        .mobile-scrim.is-visible {
                display: block;
                position: fixed;
                inset: 0;
                background: rgba(4, 17, 40, 0.48);
                z-index: 1035;
        }
        .app-main-shell {
                margin-left: 0;
        }
        .sidebar-toggle {
                display: inline-flex;
        }
        .chart-grid {
                grid-template-columns: minmax(0, 1.3fr) minmax(270px, 1fr);
        }
        .question-form-grid {
                grid-template-columns: 1fr;
        }
        .question-form-aside .card-panel {
                position: static;
        }
        .subject-topic-layout {
                grid-template-columns: 1fr 1fr;
        }
}
@media (max-width: 760px) {
        .topbar {
                height: 73px;
                padding: 0 15px;
        }
        .topbar-heading .topbar-eyebrow {
                display: none;
        }
        .topbar-heading h1 {
                font-size: 16px;
        }
        .user-meta {
                display: none !important;
        }
        .topbar-actions {
                gap: 7px;
        }
        .app-content {
                padding: 19px 14px 24px;
        }
        .app-footer {
                padding: 14px;
                font-size: 9px;
        }
        .page-intro {
                flex-direction: column;
                gap: 13px;
        }
        .page-intro > .btn,
        .page-intro > div > .btn {
                align-self: flex-start;
        }
        .page-intro h2 {
                font-size: 18px;
        }
        .stat-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 10px;
        }
        .stat-card {
                min-height: 113px;
                padding: 13px;
        }
        .stat-number {
                font-size: 25px;
                margin-top: 12px;
        }
        .stat-icon {
                height: 29px;
                width: 29px;
                font-size: 14px;
        }
        .stat-label {
                font-size: 9.5px;
        }
        .chart-grid {
                grid-template-columns: 1fr;
                gap: 13px;
        }
        .chart-container {
                height: 245px;
        }
        .chart-container.pie {
                height: 220px;
        }
        .card-panel {
                padding: 16px;
                border-radius: 13px;
        }
        .card-panel-header {
                align-items: flex-start;
        }
        .filter-panel {
                padding: 15px;
        }
        .filter-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 10px;
        }
        .filter-actions {
                grid-column: 1/-1;
        }
        .filter-actions .btn {
                flex: 1;
        }
        .question-form-main,
        .question-form-aside {
                gap: 13px;
        }
        .management-form .form-row,
        .management-form .form-row.two {
                grid-template-columns: 1fr 1fr;
        }
        .management-form .form-row .full-row {
                grid-column: 1/-1;
        }
        .subject-topic-layout {
                grid-template-columns: 1fr;
        }
        .users-stat-row {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 9px;
        }
        .user-stat {
                padding: 12px;
        }
        .user-stat strong {
                font-size: 18px;
        }
        .detail-meta-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        .question-modal-content .modal-body {
                padding: 14px;
        }
        .question-modal-content .modal-header {
                padding: 15px;
        }
        .auth-scene {
                padding: 14px;
                align-items: flex-start;
        }
        .auth-shell {
                grid-template-columns: 1fr;
                min-height: auto;
                max-width: 490px;
                border-radius: 18px;
                margin: auto;
        }
        .auth-brand-panel {
                display: none;
        }
        .auth-form-panel {
                min-height: calc(100vh - 28px);
                border-radius: 18px;
        }
        .auth-form-top {
                padding: 21px 22px 0;
        }
        .auth-form-body {
                padding: 35px 24px 28px;
        }
        .auth-form-footer {
                padding: 15px 23px 19px;
        }
        .mobile-brand-mark {
                display: grid;
                width: 32px;
                height: 32px;
                place-items: center;
                border-radius: 10px;
                background: #2358ad;
                color: #fff;
                font-size: 16px;
        }
        .auth-top-label {
                margin-left: auto;
        }
        .auth-top-line {
                flex: 0 1 30px;
        }
        .auth-heading h2 {
                font-size: 23px;
        }
        .otp-form-body {
                padding-top: 22px;
        }
        .otp-illustration {
                margin-top: 7px;
        }
        .otp-form-body .auth-heading h2 {
                font-size: 22px;
        }
        .auth-toast {
                top: 10px;
        }
        .data-table-card .card-panel-header {
                padding: 16px 15px 0;
        }
        .dt-container .dt-layout-row {
                padding: 11px 12px;
        }
        .table thead th,
        .table tbody td {
                padding: 10px 9px;
        }
        .table-question-text {
                max-width: 260px;
        }
        .filter-actions {
                flex-wrap: wrap;
        }
}
@media (max-width: 420px) {
        .secure-pill {
                display: none !important;
        }
        .topbar-heading h1 {
                font-size: 14px;
        }
        .sidebar-toggle {
                width: 34px;
                height: 34px;
        }
        .topbar {
                gap: 8px;
        }
        .topbar-actions {
                gap: 4px;
        }
        .user-avatar {
                width: 33px;
                height: 33px;
        }
        .stat-grid {
                gap: 8px;
        }
        .stat-card {
                padding: 11px;
                min-height: 105px;
        }
        .stat-number {
                font-size: 23px;
        }
        .stat-label {
                max-width: 93px;
                line-height: 1.3;
        }
        .filter-grid {
                grid-template-columns: 1fr;
        }
        .filter-actions {
                grid-column: auto;
        }
        .detail-meta-grid {
                grid-template-columns: 1fr 1fr;
        }
        .otp-input {
                letter-spacing: 9px;
                font-size: 21px !important;
        }
        .auth-form-body {
                padding-left: 20px;
                padding-right: 20px;
        }
}


/* Dashboard category analytics and question metadata fields */
.dashboard-feature-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dashboard-category-section { margin: 24px 0 28px; }
.dashboard-category-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin:0 0 14px; }
.dashboard-category-heading h2 { color:#1e3150; font-size:19px; font-weight:800; margin:4px 0 5px; }
.dashboard-category-heading p { color:#8592a7; font-size:11px; margin:0; }
.category-section-tag { background:#edf3ff; color:#2a579e; border-radius:9px; padding:8px 11px; font-size:10px; font-weight:800; white-space:nowrap; }
.category-mini-stats { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; margin-bottom:15px; }
.category-mini-stat { border:1px solid #e7edf6; background:#fff; border-radius:12px; padding:12px 14px; min-width:0; }
.category-mini-stat span { display:block; font-size:10px; color:#8190a7; font-weight:700; }
.category-mini-stat strong { display:block; font-size:21px; line-height:1.3; color:#1c3151; margin-top:4px; font-weight:800; }
.category-mini-stat small { display:block; color:#7f8da3; font-size:9px; margin-top:2px; }
.question-filter-panel { margin-top:0; }
.detail-page-toolbar .btn { font-size:11px; }
@media (max-width: 1100px) { .category-mini-stats { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width: 700px) {
  .dashboard-feature-stats { grid-template-columns:repeat(1,minmax(0,1fr)); }
  .dashboard-category-heading { align-items:flex-start; flex-direction:column; }
  .category-mini-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .category-mini-stat:last-child { grid-column:span 2; }
}