:root {
    --app-ink: #172033;
    --app-ink-soft: #39435b;
    --app-muted: #667085;
    --app-muted-light: #8c94a7;
    --app-line: #dde3ec;
    --app-line-strong: #d0d8e5;
    --app-surface: #fafbfc;
    --app-surface-soft: #f4f6f9;
    --app-canvas: #edf1f5;
    --app-purple: #6f63ff;
    --app-purple-dark: #5146de;
    --app-purple-soft: #eeecff;
    --app-teal: #16a28a;
    --app-teal-dark: #11826f;
    --app-teal-soft: #e8f8f4;
    --app-orange: #f07b3f;
    --app-orange-soft: #fff0e8;
    --app-red: #d95656;
    --app-red-soft: #fff0f0;
    --app-blue: #397bc5;
    --app-blue-soft: #eaf3ff;
    --app-radius-sm: 9px;
    --app-radius: 14px;
    --app-radius-lg: 20px;
    --app-shadow-sm: 0 8px 24px rgba(37, 45, 78, .055);
    --app-shadow: 0 16px 42px rgba(37, 45, 78, .085);
    --app-shadow-hover: 0 20px 46px rgba(37, 45, 78, .12);
}

html {
    background: var(--app-canvas);
}

body.app-theme {
    color: var(--app-ink);
    background: var(--app-canvas);
    font-family: Inter, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body.app-theme a {
    color: var(--app-purple-dark);
    text-decoration-color: rgba(81, 70, 222, .3);
    text-underline-offset: 3px;
}

body.app-theme a:hover {
    color: #4137c6;
}

/* Shared application shell */
body.app-theme #header .navbar {
    min-height: 62px;
    padding: 7px 0;
    border-bottom: 1px solid rgba(91, 83, 160, .1);
    background: rgba(248, 250, 252, .92) !important;
    box-shadow: 0 10px 34px rgba(65, 72, 110, .09) !important;
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}

body.app-theme #header .navbar > .container {
    width: min(1240px, calc(100% - 32px));
    max-width: none;
    padding-right: 0;
    padding-left: 0;
}

body.app-theme #header .navbar-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-right: 24px;
    color: #20283c !important;
    letter-spacing: -.035em;
    text-decoration: none;
}

.app-brand-mark {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(135deg, #796dff, #5b50e6 60%, #20a990);
    box-shadow: 0 8px 20px rgba(82, 68, 224, .24);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .02em;
}

.app-brand-name {
    font-size: 20px;
    font-weight: 760;
}

body.app-theme #header .navbar-nav {
    align-items: center;
    gap: 2px;
}

body.app-theme #header .navbar-nav .nav-link {
    padding: 8px 11px !important;
    margin: 0 1px;
    border-radius: 9px;
    color: #59627a !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .005em;
    text-shadow: none;
    transform: none !important;
    transition: color .18s ease, background .18s ease;
}

body.app-theme #header .navbar-nav .nav-link:hover,
body.app-theme #header .navbar-nav .nav-link.active,
body.app-theme #header .navbar-nav .active > .nav-link,
body.app-theme #header .navbar-nav .show > .nav-link {
    color: #5549d8 !important;
    background: rgba(111, 99, 255, .09) !important;
}

body.app-theme #header .navbar-nav .glyphicon {
    margin-right: 5px;
    opacity: .85;
}

body.app-theme #header .navbar-nav form {
    margin: 0;
}

body.app-theme #header .navbar-nav .logout {
    padding: 8px 11px !important;
    border: 0;
    border-radius: 9px;
    color: #8d4c5b !important;
    background: #fff0f2 !important;
    font-size: 13px;
    font-weight: 650;
    line-height: 1.5;
    text-decoration: none;
}

body.app-theme #header .navbar-nav .logout:hover {
    color: #743646 !important;
    background: #ffe5e9 !important;
}

body.app-theme #header .dropdown-menu {
    min-width: 185px;
    padding: 7px;
    margin-top: 8px;
    border: 1px solid var(--app-line);
    border-radius: 12px;
    background: rgba(250, 251, 253, .98);
    box-shadow: var(--app-shadow);
}

body.app-theme #header .dropdown-item {
    padding: 9px 11px;
    margin: 0;
    border-radius: 8px;
    color: #535d74;
    font-size: 13px;
    transition: color .15s ease, background .15s ease;
}

body.app-theme #header .dropdown-item:hover,
body.app-theme #header .dropdown-item:focus,
body.app-theme #header .dropdown-item.active {
    color: #5549d8;
    background: var(--app-purple-soft);
    transform: none;
}

body.app-theme #header .navbar-toggler {
    padding: 6px 8px;
    border-color: rgba(67, 73, 103, .2);
    border-radius: 9px;
    box-shadow: none;
}

body.app-theme #header .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(48, 55, 80, 0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

body.app-theme:not(.home-page) #main {
    position: relative;
    isolation: isolate;
    background:
        radial-gradient(circle at 87% 2%, rgba(111, 99, 255, .08), transparent 24%),
        radial-gradient(circle at 6% 94%, rgba(22, 162, 138, .07), transparent 25%),
        var(--app-canvas);
}

body.app-theme:not(.home-page) #main::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    content: "";
    opacity: .5;
    background-image:
        linear-gradient(rgba(87, 79, 154, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(87, 79, 154, .035) 1px, transparent 1px);
    background-size: 58px 58px;
    -webkit-mask-image: linear-gradient(to bottom, #000, transparent 460px);
    mask-image: linear-gradient(to bottom, #000, transparent 460px);
    pointer-events: none;
}

.app-page-container {
    width: min(1280px, calc(100% - 32px));
    max-width: none !important;
    min-height: calc(100vh - 124px);
    padding: 92px 0 52px !important;
    margin: 0 auto;
}

body.app-theme #footer {
    margin-top: auto !important;
    border: 0;
    color: rgba(255, 255, 255, .58);
    background: #0d1327 !important;
}

.app-footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 50px;
}

.app-footer-brand {
    color: rgba(255, 255, 255, .84);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -.01em;
}

.app-footer-copy {
    color: rgba(255, 255, 255, .48);
    font-size: 11px;
}

/* Bootstrap 3 utility compatibility retained by several legacy views. */
body.app-theme .pull-right {
    float: right !important;
}

body.app-theme .pull-left {
    float: left !important;
}

body.app-theme .text-right {
    text-align: right !important;
}

body.app-theme .text-left {
    text-align: left !important;
}

/* Page rhythm and typography */
body.app-theme:not(.home-page) .app-page-container h1,
body.app-theme:not(.home-page) .app-page-container h2,
body.app-theme:not(.home-page) .app-page-container h3,
body.app-theme:not(.home-page) .app-page-container h4 {
    color: var(--app-ink);
    letter-spacing: -.018em;
}

body.app-theme:not(.home-page) .app-page-container > h1,
body.app-theme:not(.home-page) .app-page-container > div > h1,
body.app-theme:not(.home-page) .app-page-container .page-header h1,
body.app-theme:not(.home-page) .app-page-container .page-header h2 {
    font-weight: 740;
}

body.app-theme .text-muted {
    color: var(--app-muted) !important;
}

body.app-theme .help-block,
body.app-theme .form-text,
body.app-theme .hint-block {
    color: var(--app-muted-light);
    font-size: 12px;
    line-height: 1.55;
}

body.app-theme .breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 0;
    margin: 0 0 18px;
    color: var(--app-muted);
    background: transparent;
    font-size: 12px;
}

body.app-theme .breadcrumb a {
    color: #68728a;
    text-decoration: none;
}

body.app-theme .breadcrumb a:hover {
    color: var(--app-purple-dark);
}

body.app-theme:not(.home-page) .app-page-container .page-header {
    position: relative;
    min-height: 84px;
    padding: 20px 22px !important;
    margin: 0 0 24px !important;
    overflow: hidden;
    border: 1px solid var(--app-line) !important;
    border-radius: var(--app-radius-lg) !important;
    color: var(--app-ink) !important;
    background:
        radial-gradient(circle at 94% 10%, rgba(111, 99, 255, .12), transparent 28%),
        rgba(249, 250, 252, .96) !important;
    box-shadow: var(--app-shadow-sm);
}

body.app-theme:not(.home-page) .app-page-container .page-header h1,
body.app-theme:not(.home-page) .app-page-container .page-header h2,
body.app-theme:not(.home-page) .app-page-container .page-header p {
    color: inherit !important;
}

/* Cards and legacy Bootstrap 3 panels */
body.app-theme .panel,
body.app-theme .card,
body.app-theme .well,
body.app-theme .jumbotron {
    overflow: hidden;
    border: 1px solid var(--app-line);
    border-radius: var(--app-radius-lg);
    background: var(--app-surface);
    box-shadow: var(--app-shadow-sm);
}

body.app-theme .panel {
    margin-bottom: 20px;
}

body.app-theme .panel-heading,
body.app-theme .card-header {
    padding: 14px 18px;
    border: 0;
    border-bottom: 1px solid var(--app-line) !important;
    border-radius: 0 !important;
    color: var(--app-ink) !important;
    background: var(--app-surface-soft) !important;
}

body.app-theme .panel-title,
body.app-theme .card-header h1,
body.app-theme .card-header h2,
body.app-theme .card-header h3,
body.app-theme .card-header h4 {
    margin: 0;
    color: inherit !important;
    font-weight: 690;
}

body.app-theme .panel-body,
body.app-theme .card-body {
    padding: 20px;
}

body.app-theme .panel-footer,
body.app-theme .card-footer {
    padding: 14px 18px;
    border: 0;
    border-top: 1px solid var(--app-line);
    background: var(--app-surface-soft);
}

body.app-theme .panel-primary > .panel-heading,
body.app-theme .card-header.bg-primary {
    color: #4d43c8 !important;
    background: var(--app-purple-soft) !important;
}

body.app-theme .panel-success > .panel-heading,
body.app-theme .card-header.bg-success {
    color: #117762 !important;
    background: var(--app-teal-soft) !important;
}

body.app-theme .panel-info > .panel-heading,
body.app-theme .card-header.bg-info {
    color: #2a67a9 !important;
    background: var(--app-blue-soft) !important;
}

body.app-theme .panel-warning > .panel-heading,
body.app-theme .card-header.bg-warning {
    color: #b65e2e !important;
    background: var(--app-orange-soft) !important;
}

body.app-theme .panel-danger > .panel-heading,
body.app-theme .card-header.bg-danger {
    color: #b94646 !important;
    background: var(--app-red-soft) !important;
}

body.app-theme .panel:hover,
body.app-theme .card:hover {
    border-color: #d9d5ff;
}

/* Buttons */
body.app-theme .btn {
    min-height: 36px;
    padding: 7px 14px;
    border-radius: var(--app-radius-sm);
    box-shadow: none;
    font-size: 13px;
    font-weight: 650;
    line-height: 1.45;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

body.app-theme .btn:hover:not(:disabled):not(.disabled) {
    transform: translateY(-1px);
}

body.app-theme .btn:focus,
body.app-theme .btn:focus-visible {
    box-shadow: 0 0 0 3px rgba(111, 99, 255, .18);
}

body.app-theme .btn-primary {
    border-color: #6559ee !important;
    color: #fff !important;
    background: linear-gradient(135deg, #796dff, #6255ef) !important;
    box-shadow: 0 8px 18px rgba(82, 68, 224, .22);
}

body.app-theme .btn-primary:hover {
    border-color: #574bdc !important;
    background: linear-gradient(135deg, #6d61f1, #574bdc) !important;
    box-shadow: 0 11px 24px rgba(82, 68, 224, .3);
}

body.app-theme .btn-success {
    border-color: #15957f !important;
    color: #fff !important;
    background: linear-gradient(135deg, #22ad94, #138d78) !important;
}

body.app-theme .btn-info {
    border-color: #397bc5 !important;
    color: #fff !important;
    background: linear-gradient(135deg, #4d90d8, #3472b8) !important;
}

body.app-theme .btn-warning {
    border-color: #df6e36 !important;
    color: #fff !important;
    background: linear-gradient(135deg, #f38b50, #dc6630) !important;
}

body.app-theme .btn-danger {
    border-color: #ce4e4e !important;
    color: #fff !important;
    background: linear-gradient(135deg, #e26868, #c94848) !important;
}

body.app-theme .btn-default,
body.app-theme .btn-secondary,
body.app-theme .btn-light {
    border-color: var(--app-line-strong) !important;
    color: #4e5870 !important;
    background: var(--app-surface) !important;
}

body.app-theme .btn-default:hover,
body.app-theme .btn-secondary:hover,
body.app-theme .btn-light:hover {
    border-color: #c9c3ff !important;
    color: var(--app-purple-dark) !important;
    background: #f8f7ff !important;
}

body.app-theme .btn-link {
    color: var(--app-purple-dark) !important;
    background: transparent !important;
}

body.app-theme .btn-lg {
    min-height: 46px;
    padding: 10px 20px;
    border-radius: 11px;
    font-size: 14px;
}

body.app-theme .btn-sm {
    min-height: 31px;
    padding: 5px 10px;
    border-radius: 7px;
    font-size: 12px;
}

body.app-theme .btn-block {
    width: 100%;
}

/* Forms */
body.app-theme .form-group {
    margin-bottom: 16px;
}

body.app-theme label,
body.app-theme .form-label,
body.app-theme .control-label {
    margin-bottom: 7px;
    color: #3d465b;
    font-size: 13px;
    font-weight: 650;
}

body.app-theme .form-control,
body.app-theme .form-select,
body.app-theme select.form-control,
body.app-theme textarea.form-control {
    min-height: 40px;
    padding: 8px 12px;
    border: 1px solid #d8deea;
    border-radius: 9px;
    color: #273148;
    background-color: #fcfdfe;
    box-shadow: inset 0 1px 2px rgba(34, 43, 70, .025);
    font-size: 13px;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

body.app-theme textarea.form-control {
    min-height: 96px;
    line-height: 1.65;
}

body.app-theme .form-control:focus,
body.app-theme .form-select:focus {
    border-color: #8d84f7;
    background-color: #fcfdfe;
    box-shadow: 0 0 0 3px rgba(111, 99, 255, .13);
    outline: none;
}

body.app-theme .form-control::placeholder {
    color: #a0a7b7;
}

body.app-theme .form-check-input:checked {
    border-color: var(--app-purple);
    background-color: var(--app-purple);
}

body.app-theme .input-group-text {
    border-color: #d8deea;
    color: #616b81;
    background: #f6f8fb;
    font-size: 13px;
}

body.app-theme .has-error .form-control,
body.app-theme .is-invalid {
    border-color: #dc6969;
}

body.app-theme .help-block-error,
body.app-theme .invalid-feedback {
    color: #b94646;
    font-size: 12px;
}

/* Tables and data grids */
body.app-theme .table-responsive,
body.app-theme .grid-view {
    overflow-x: auto;
    border: 1px solid var(--app-line);
    border-radius: var(--app-radius);
    background: var(--app-surface);
    box-shadow: var(--app-shadow-sm);
}

body.app-theme .grid-view .table-responsive {
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

body.app-theme .table {
    width: 100%;
    margin-bottom: 0;
    color: #364057;
    background: var(--app-surface);
    font-size: 13px;
}

body.app-theme .table > :not(caption) > * > *,
body.app-theme .table th,
body.app-theme .table td {
    padding: 11px 13px;
    border-color: #e8ebf2;
    vertical-align: middle;
}

body.app-theme .table thead th,
body.app-theme .table > thead > tr > th {
    color: #4c566d;
    background: #f7f8fc !important;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

body.app-theme .table-hover > tbody > tr:hover > * {
    background: #faf9ff;
}

body.app-theme .grid-view .summary {
    padding: 11px 14px;
    color: var(--app-muted);
    border-bottom: 1px solid var(--app-line);
    font-size: 12px;
}

body.app-theme .empty {
    padding: 34px !important;
    color: var(--app-muted);
    text-align: center;
}

/* Alerts, labels, navigation and progress */
body.app-theme .alert {
    padding: 13px 16px;
    border-width: 1px;
    border-radius: 11px;
    box-shadow: none;
    font-size: 13px;
    line-height: 1.65;
}

body.app-theme .alert-success { color: #176e5d; border-color: #c5eadf; background: #edf9f6; }
body.app-theme .alert-info { color: #2f679d; border-color: #cde1f4; background: #eff7ff; }
body.app-theme .alert-warning { color: #9a5a2e; border-color: #f2d9c9; background: #fff7f0; }
body.app-theme .alert-danger { color: #9f4545; border-color: #efcece; background: #fff3f3; }

body.app-theme .badge,
body.app-theme .label {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}

/* Legacy pages often put a translucent white badge inside a dark panel title.
   Panel titles are light in the shared theme, so give those badges an explicit
   high-contrast semantic fill instead of keeping the old inherited white text. */
body.app-theme .panel-heading .badge,
body.app-theme .card-header .badge {
    border: 1px solid rgba(81, 70, 222, .16);
    color: #4d43c8 !important;
    background: #dfdcff !important;
}

body.app-theme .panel-primary > .panel-heading .badge,
body.app-theme .card-header.bg-primary .badge {
    border-color: #5f53df;
    color: #fff !important;
    background: #5f53df !important;
}

body.app-theme .panel-success > .panel-heading .badge,
body.app-theme .card-header.bg-success .badge {
    border-color: #117762;
    color: #fff !important;
    background: #117762 !important;
}

body.app-theme .panel-info > .panel-heading .badge,
body.app-theme .card-header.bg-info .badge {
    border-color: #27679f;
    color: #fff !important;
    background: #27679f !important;
}

body.app-theme .panel-warning > .panel-heading .badge,
body.app-theme .card-header.bg-warning .badge {
    border-color: #a94f22;
    color: #fff !important;
    background: #a94f22 !important;
}

body.app-theme .panel-danger > .panel-heading .badge,
body.app-theme .card-header.bg-danger .badge {
    border-color: #b64040;
    color: #fff !important;
    background: #b64040 !important;
}

body.app-theme .badge.bg-primary,
body.app-theme .label-primary { color: #5549d8; background: var(--app-purple-soft) !important; }
body.app-theme .badge.bg-success,
body.app-theme .label-success { color: #117762; background: var(--app-teal-soft) !important; }
body.app-theme .badge.bg-info,
body.app-theme .label-info { color: #2a67a9; background: var(--app-blue-soft) !important; }
body.app-theme .badge.bg-warning,
body.app-theme .label-warning { color: #b65e2e; background: var(--app-orange-soft) !important; }
body.app-theme .badge.bg-danger,
body.app-theme .label-danger { color: #b94646; background: var(--app-red-soft) !important; }

body.app-theme .nav-tabs {
    gap: 5px;
    padding: 5px;
    border: 1px solid var(--app-line);
    border-radius: 11px;
    background: var(--app-surface);
}

body.app-theme .nav-tabs .nav-link,
body.app-theme .nav-tabs > li > a {
    padding: 8px 12px;
    border: 0 !important;
    border-radius: 8px;
    color: #667085;
    font-size: 13px;
    text-decoration: none;
}

body.app-theme .nav-tabs .nav-link.active,
body.app-theme .nav-tabs > li.active > a {
    color: #5549d8;
    background: var(--app-purple-soft);
}

body.app-theme .pagination {
    gap: 4px;
}

body.app-theme .pagination .page-link,
body.app-theme .pagination > li > a,
body.app-theme .pagination > li > span {
    min-width: 34px;
    padding: 7px 10px;
    border: 1px solid var(--app-line);
    border-radius: 8px !important;
    color: #59627a;
    background: var(--app-surface);
    text-align: center;
    text-decoration: none;
}

body.app-theme .pagination .active > .page-link,
body.app-theme .pagination > .active > a,
body.app-theme .pagination > .active > span {
    border-color: var(--app-purple);
    color: #fff;
    background: var(--app-purple);
}

body.app-theme .progress {
    overflow: hidden;
    border-radius: 999px;
    background: #e9ecf3;
    box-shadow: none;
}

body.app-theme .progress-bar {
    background: linear-gradient(90deg, #796dff, #6255ef);
}

body.app-theme .list-group {
    overflow: hidden;
    border: 1px solid var(--app-line);
    border-radius: var(--app-radius);
    box-shadow: var(--app-shadow-sm);
}

body.app-theme .list-group-item {
    padding: 12px 15px;
    border-color: var(--app-line);
    color: #3d465b;
    background: var(--app-surface);
}

body.app-theme .list-group-item.active {
    border-color: #d9d5ff;
    color: #5549d8;
    background: var(--app-purple-soft);
}

body.app-theme code {
    padding: 2px 6px;
    border-radius: 5px;
    color: #564abe;
    background: #f0efff;
    font-size: .9em;
}

body.app-theme pre {
    border: 1px solid var(--app-line) !important;
    border-radius: 10px !important;
    color: #30394e;
    background: #f8f9fc !important;
}

/* Imported language questions use this class for proofreading marks. */
body.app-theme .wavy-underline,
body.app-theme u.wavy-underline {
    -webkit-text-decoration-line: underline !important;
    -webkit-text-decoration-style: wavy !important;
    text-decoration-line: underline !important;
    text-decoration-style: wavy !important;
    text-decoration-color: #222b3d !important;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
    text-decoration-skip-ink: none;
}

/* Modals */
body.app-theme .modal-content {
    overflow: hidden;
    border: 1px solid var(--app-line);
    border-radius: 17px;
    background: var(--app-surface);
    box-shadow: 0 28px 75px rgba(25, 33, 61, .25);
}

body.app-theme .modal-header {
    padding: 15px 18px;
    border-bottom: 1px solid var(--app-line);
    color: var(--app-ink) !important;
    background: var(--app-surface-soft) !important;
}

body.app-theme .modal-footer {
    padding: 13px 18px;
    border-top: 1px solid var(--app-line);
    background: var(--app-surface-soft);
}

/* Authentication pages inherit the light homepage canvas. */
body.app-theme:not(.home-page) .site-login,
body.app-theme:not(.home-page) .site-signup,
body.app-theme:not(.home-page) .admin-login {
    min-height: calc(100vh - 210px);
    padding: 36px 0 !important;
    background: transparent !important;
}

body.app-theme .site-login .login-card,
body.app-theme .site-signup .card,
body.app-theme .admin-login .card {
    border: 1px solid var(--app-line);
    border-radius: var(--app-radius-lg);
    box-shadow: var(--app-shadow);
}

body.app-theme .site-login .login-header,
body.app-theme .site-signup .card-header,
body.app-theme .admin-login .card-header {
    padding: 22px !important;
    color: var(--app-ink) !important;
    background:
        radial-gradient(circle at 90% 0, rgba(111, 99, 255, .14), transparent 40%),
        var(--app-surface-soft) !important;
}

body.app-theme .site-login .login-header h2,
body.app-theme .site-signup .card-header h3,
body.app-theme .admin-login .card-header h3 {
    color: var(--app-ink) !important;
}

/* Shared question content */
body.app-theme .question-table {
    width: 100%;
    margin: 10px 0;
    border-collapse: collapse;
    color: #374158;
    background: var(--app-surface);
    font-size: 14px;
    line-height: 1.55;
}

body.app-theme .question-table th,
body.app-theme .question-table td {
    padding: 7px 10px;
    border: 1px solid #d7deea;
    vertical-align: top;
}

body.app-theme .question-table th {
    font-weight: 700;
    text-align: center;
    background: #f3f5fa;
}

body.app-theme .question-table caption {
    padding: 4px 0 7px;
    color: #59627a;
    font-weight: 650;
    caption-side: top;
}

/* The administrator AI drawer uses the same surface language. */
body.app-theme #ai-sidebar {
    border-left: 1px solid var(--app-line);
    color: var(--app-ink);
    background: var(--app-surface-soft);
    box-shadow: -18px 0 50px rgba(30, 38, 67, .18);
}

body.app-theme #ai-sidebar-toggle {
    border: 1px solid #6459eb;
    color: #fff;
    background: linear-gradient(135deg, #796dff, #6255ef);
    box-shadow: -7px 7px 24px rgba(82, 68, 224, .22);
}

body.app-theme #ai-sidebar .ai-sidebar-header {
    border-bottom: 1px solid var(--app-line);
    color: var(--app-ink);
    background: rgba(249, 250, 252, .96);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

body.app-theme #ai-sidebar .ai-config-section {
    border: 1px solid var(--app-line);
    background: var(--app-surface);
}

body.app-theme #ai-sidebar .ai-provider-btn {
    border-color: var(--app-line-strong);
    color: #4e5870;
    background: var(--app-surface);
}

body.app-theme #ai-sidebar .ai-provider-btn:hover,
body.app-theme #ai-sidebar .ai-provider-btn.active {
    border-color: #bdb6ff;
    color: #5549d8;
    background: var(--app-purple-soft);
}

body.app-theme #ai-sidebar .close-sidebar-btn {
    color: #59627a;
    background: #eef1f6;
}

@media (max-width: 1199px) {
    body.app-theme #header .navbar-nav .nav-link,
    body.app-theme #header .navbar-nav .logout {
        padding-right: 8px !important;
        padding-left: 8px !important;
        font-size: 12px;
    }
}

@media (min-width: 768px) {
    body.app-theme .col-md-offset-1 {
        margin-left: 8.333333%;
    }

    body.app-theme .col-md-offset-2 {
        margin-left: 16.666667%;
    }
}

@media (max-width: 991px) {
    body.app-theme #header .navbar-collapse {
        max-height: calc(100vh - 78px);
        padding: 10px;
        margin-top: 9px;
        overflow-y: auto;
        border: 1px solid var(--app-line);
        border-radius: 13px;
        background: rgba(248, 250, 252, .98);
        box-shadow: var(--app-shadow);
    }

    body.app-theme #header .navbar-nav {
        align-items: stretch;
    }

    body.app-theme #header .navbar-nav .nav-link,
    body.app-theme #header .navbar-nav .logout {
        width: 100%;
        padding: 9px 11px !important;
        text-align: left;
    }

    body.app-theme #header .navbar-nav form {
        width: 100%;
    }
}

@media (max-width: 767px) {
    body.app-theme #header .navbar > .container,
    .app-page-container {
        width: min(100% - 22px, 1280px);
    }

    .app-page-container {
        padding-top: 78px !important;
        padding-bottom: 36px !important;
    }

    body.app-theme:not(.home-page) .app-page-container .page-header {
        min-height: 0;
        padding: 17px !important;
        border-radius: 15px !important;
    }

    body.app-theme .panel-body,
    body.app-theme .card-body {
        padding: 16px;
    }

    body.app-theme .btn {
        min-height: 38px;
    }

    .app-footer-inner {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
        padding: 12px 0;
    }

    body.app-theme #ai-sidebar {
        right: -100%;
        width: min(92vw, 400px);
    }
}

@media (prefers-reduced-motion: reduce) {
    body.app-theme *,
    body.app-theme *::before,
    body.app-theme *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}