:root {
    --kn-primary: #1a365d;
    --kn-primary-light: #2c5282;
    --kn-accent: #c9a227;
    --kn-accent-hover: #b8921f;
    --kn-bg: #f0f4f8;
    --kn-card-shadow: 0 4px 24px rgba(26, 54, 93, 0.08);
    --kn-radius: 12px;
    --kn-sidebar-width: 240px;
}

* { box-sizing: border-box; }

body.kn-layout {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    background: var(--kn-bg);
    color: #2d3748;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Cards */
.kn-card {
    background: #fff;
    border-radius: var(--kn-radius);
    box-shadow: var(--kn-card-shadow);
    border: none;
    overflow: hidden;
}

.kn-card-header {
    background: linear-gradient(135deg, var(--kn-primary) 0%, var(--kn-primary-light) 100%);
    color: #fff;
    padding: 1.25rem 1.5rem;
    font-weight: 600;
}

.kn-card-body { padding: 1.5rem; }

/* Buttons */
.kn-btn-primary {
    background: var(--kn-accent);
    border-color: var(--kn-accent);
    color: #1a202c;
    font-weight: 600;
    border-radius: 8px;
    padding: 0.6rem 1.25rem;
    transition: background 0.2s, transform 0.15s;
}
.kn-btn-primary:hover, .kn-btn-primary:focus {
    background: var(--kn-accent-hover);
    border-color: var(--kn-accent-hover);
    color: #1a202c;
    transform: translateY(-1px);
}

.kn-btn-outline {
    border: 2px solid var(--kn-primary);
    color: var(--kn-primary);
    font-weight: 600;
    border-radius: 8px;
    background: transparent;
}
.kn-btn-outline:hover {
    background: var(--kn-primary);
    color: #fff;
}

/* Public hero */
.kn-hero {
    text-align: center;
    padding: 2.5rem 1rem 1.5rem;
}
.kn-hero h1 {
    color: var(--kn-primary);
    font-size: 1.75rem;
    font-weight: 700;
}
@media (min-width: 768px) {
    .kn-hero h1 { font-size: 2.25rem; }
}

.kn-exam-picker .form-select {
    border-radius: 8px;
    border: 2px solid #e2e8f0;
    padding: 0.75rem;
}

/* Auth layout */
.kn-auth-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: linear-gradient(160deg, #eef2f7 0%, #e2e8f0 100%);
}
.kn-auth-card {
    width: 100%;
    max-width: 420px;
}
.kn-auth-card-wide {
    max-width: 440px;
}
.kn-auth-form .form-label {
    font-weight: 600;
    font-size: 0.9rem;
    color: #2d3748;
    margin-bottom: 0.35rem;
}
.kn-auth-form .form-control,
.kn-auth-form .form-select {
    border-radius: 8px;
    border: 1px solid #cbd5e0;
    padding: 0.65rem 0.85rem;
}
.kn-auth-form .form-control:focus {
    border-color: var(--kn-primary-light);
    box-shadow: 0 0 0 0.2rem rgba(44, 82, 130, 0.15);
}
.kn-auth-form .input-group-text {
    background: #f7fafc;
    border-color: #cbd5e0;
}
.kn-password-group .form-control {
    border-right: 0;
}
.kn-password-group .kn-toggle-pw {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.kn-auth-form fieldset legend {
    float: none;
    width: auto;
    margin-bottom: 0.5rem;
}

/* Admin sidebar */
.kn-admin-wrapper { display: flex; min-height: 100vh; }

.kn-sidebar {
    width: var(--kn-sidebar-width);
    background: var(--kn-primary);
    color: #e2e8f0;
    position: fixed;
    top: 0; left: 0;
    height: 100vh;
    overflow-y: auto;
    z-index: 1040;
    transition: transform 0.3s ease;
    padding: 1rem 0;
}
.kn-sidebar-header {
    padding: 0.5rem 1.25rem 1.25rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    margin-bottom: 0.5rem;
}
.kn-sidebar-nav { list-style: none; padding: 0; margin: 0; }
.kn-sidebar-nav li a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1.25rem;
    color: #cbd5e0;
    text-decoration: none;
    font-size: 0.95rem;
    transition: background 0.2s, color 0.2s;
}
.kn-sidebar-nav li a:hover, .kn-sidebar-nav li a.active {
    background: rgba(255,255,255,0.1);
    color: #fff;
}
.kn-sidebar-nav li a.text-danger { color: #fc8181 !important; }

.kn-admin-content {
    flex: 1;
    margin-left: var(--kn-sidebar-width);
    padding: 1.5rem;
    transition: margin-left 0.3s ease;
}

.kn-sidebar-toggle {
    position: fixed;
    top: 1rem;
    left: 1rem;
    z-index: 1050;
    display: none;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    width: 42px; height: 42px;
    align-items: center;
    justify-content: center;
    box-shadow: var(--kn-card-shadow);
}

@media (max-width: 991px) {
    .kn-sidebar { transform: translateX(-100%); }
    body.kn-sidebar-open .kn-sidebar { transform: translateX(0); }
    .kn-admin-content { margin-left: 0; padding-top: 4rem; }
    .kn-sidebar-toggle { display: flex; }
}

/* Exam layout */
.kn-exam-grid {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 1rem;
    min-height: calc(100vh - 2rem);
    padding: 1rem;
}
@media (max-width: 1100px) {
    .kn-exam-grid { grid-template-columns: 1fr; }
}

.kn-exam-palette {
    background: #fff;
    border-radius: var(--kn-radius);
    box-shadow: var(--kn-card-shadow);
    padding: 1rem;
    max-height: 80vh;
    overflow-y: auto;
}
.kn-exam-palette .palette-btn {
    width: 36px; height: 36px;
    margin: 3px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
}

.kn-timer-bar {
    background: var(--kn-primary);
    color: #fff;
    padding: 0.75rem 1.5rem;
    border-radius: var(--kn-radius);
    text-align: center;
    font-weight: 600;
}

.kn-question-panel {
    background: #fff;
    border-radius: var(--kn-radius);
    box-shadow: var(--kn-card-shadow);
    padding: 1.5rem;
}

/* Result badges */
.kn-result-badge { font-size: 0.8rem; padding: 0.35rem 0.65rem; border-radius: 6px; }
.kn-result-right { background: #c6f6d5; color: #22543d; }
.kn-result-wrong { background: #fed7d7; color: #742a2a; }
.kn-result-skip { background: #e2e8f0; color: #4a5568; }

.kn-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.kn-summary-item {
    background: #fff;
    border-radius: var(--kn-radius);
    padding: 1rem;
    text-align: center;
    box-shadow: var(--kn-card-shadow);
}
.kn-summary-item .value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--kn-primary);
}
.kn-summary-item .label {
    font-size: 0.85rem;
    color: #718096;
}

.pentagon-button, .countContain .pentagon-button {
    display: inline-block;
    background: var(--kn-primary);
    color: #fff;
    padding: 0.25rem 0.75rem;
    border-radius: 6px;
    font-weight: 600;
}

/* Result accordion */
.kn-result-accordion .accordion-button:not(.collapsed) {
    background: #ebf4ff;
    color: var(--kn-primary);
}

/* Auth forms (paid_mock, course_pannel, paidPanel) */
.kn-auth-page .kn-auth-card {
    background: #fff;
    border-radius: var(--kn-radius);
    box-shadow: var(--kn-card-shadow);
    width: 100%;
    padding: 1.75rem;
    margin: 0 auto;
}
.kn-auth-page .login-from-img {
    width: 100%;
    border-radius: 8px;
    display: block;
}
.kn-auth-page h2 { color: var(--kn-primary); text-align: center; }
.kn-auth-page a { color: var(--kn-primary-light); text-decoration: none; }
.kn-auth-page a:hover { text-decoration: underline; }

/* Test series dashboard */
.kn-test-series { max-width: 900px; margin: 0 auto; padding: 1.5rem; }
.kn-test-series .feature-card {
    background: #fff; border-radius: var(--kn-radius);
    box-shadow: var(--kn-card-shadow); padding: 1.5rem; margin-bottom: 1.5rem;
}
.kn-test-series .buy-button, .kn-test-series .explore-button {
    display: inline-block; padding: 0.6rem 1.5rem; border-radius: 8px;
    font-weight: 600; text-decoration: none; margin: 0.25rem;
}
.kn-test-series .buy-button { background: var(--kn-accent); border: none; color: #1a202c; }
.kn-test-series .explore-button { background: var(--kn-primary); color: #fff; }

.stat-card {
    flex: 1 1 180px;
    background: linear-gradient(135deg, var(--kn-primary) 0%, var(--kn-primary-light) 100%);
    color: #fff;
    border-radius: 10px;
    padding: 16px 18px;
}
.stat-card.scholarship { background: linear-gradient(135deg, #28a745 0%, #1e7e34 100%); }
.stat-card.total { background: linear-gradient(135deg, #6f42c1 0%, #563d7c 100%); }
.stats-row { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 22px; }
.stat-card .label { font-size: 0.85rem; opacity: 0.9; }
.stat-card .value { font-size: 1.75rem; font-weight: 700; }


/* DataTables BS5 tweaks */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
    margin-top: 0.75rem;
    margin-bottom: 0.25rem;
}

.dataTables_wrapper .dataTables_paginate {
    display: flex;
    justify-content: flex-end;
}

.dataTables_wrapper .dataTables_paginate .pagination {
    margin: 0;
    gap: 0.25rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.dataTables_wrapper .pagination .page-item.active .page-link {
    background: var(--kn-primary);
    border-color: var(--kn-primary);
}

.dataTables_wrapper .pagination .page-link {
    color: var(--kn-primary);
    border-radius: 0.375rem;
    min-width: 2.25rem;
    text-align: center;
}

.dataTables_wrapper .pagination .page-link:hover {
    color: var(--kn-primary-light);
}

/* Legacy BS3 DataTables pagination markup on BS5 pages */
.dataTables_wrapper .pagination .paginate_button {
    list-style: none;
    display: inline-block;
}

.dataTables_wrapper .pagination .paginate_button a {
    display: block;
    padding: 0.375rem 0.75rem;
    margin-left: 0.125rem;
    color: var(--kn-primary);
    text-decoration: none;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    cursor: pointer;
}

.dataTables_wrapper .pagination .paginate_button.active a,
.dataTables_wrapper .pagination .paginate_button.current a {
    background: var(--kn-primary);
    color: #fff;
    border-color: var(--kn-primary);
}

.dataTables_wrapper .pagination .paginate_button.disabled a {
    opacity: 0.55;
    pointer-events: none;
    cursor: default;
}

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    margin: 0 0.35rem;
}

.kn-table-actions {
    display: flex;
    gap: 0.35rem;
    justify-content: center;
    white-space: nowrap;
}

.kn-table-actions-cell {
    white-space: nowrap;
    width: 1%;
    vertical-align: middle !important;
    text-align: center;
}

.kn-questions-table td.kn-question-cell {
    max-width: 480px;
    word-break: break-word;
}

.kn-questions-table .kn-table-actions .btn {
    min-width: 2rem;
    padding: 0.25rem 0.5rem;
}

.kn-users-table .btn-sm {
    font-size: 0.8rem;
    white-space: nowrap;
}

.kn-leads-nav .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.kn-leads-hub-card {
    border: 1px solid #e2e8f0;
    border-radius: var(--kn-radius);
    transition: box-shadow 0.2s, transform 0.15s;
    color: inherit;
}

.kn-leads-hub-card:hover {
    box-shadow: var(--kn-card-shadow);
    transform: translateY(-2px);
    color: inherit;
}

.kn-leads-message {
    min-width: 200px;
    max-width: 320px;
    white-space: normal !important;
    word-break: normal;
    overflow-wrap: anywhere;
    font-size: 0.9rem;
    vertical-align: top;
}

.kn-leads-table-wrap {
    overflow-x: auto;
}

.kn-leads-table th,
.kn-leads-table td {
    vertical-align: middle;
}

.kn-table-text-cell {
    max-width: 220px;
    white-space: normal !important;
    word-break: normal;
    overflow-wrap: anywhere;
    font-size: 0.9rem;
}

.kn-quill-wrap .ql-toolbar.ql-snow,
.kn-quill-wrap .ql-container.ql-snow {
    border-color: #dee2e6;
    border-radius: 0.375rem;
}

.kn-quill-wrap .ql-toolbar.ql-snow {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.kn-quill-wrap .ql-container.ql-snow {
    border-top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.kn-quill-wrap .ql-editor {
    min-height: 180px;
    max-height: 320px;
    overflow-y: auto;
}

.kn-feature-image-preview {
    max-width: 320px;
}

.kn-feature-image-preview img {
    display: block;
    width: 100%;
    max-height: 220px;
    object-fit: contain;
    background: #f8fafc;
}

.modal .kn-quill-wrap .ql-picker-label,
.modal .kn-quill-wrap .ql-picker-item {
    line-height: 1.4;
}

.modal .kn-quill-wrap .ql-snow .ql-picker.ql-expanded .ql-picker-options {
    z-index: 2000;
}

.modal {
    z-index: 1060;
}
.modal-backdrop {
    z-index: 1055;
}

/* Toast container */
.kn-toast-container {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 9999;
}

/* Sticky exam submit bar (mobile) */
.kn-exam-submit-bar {
    position: sticky;
    bottom: 0;
    background: #fff;
    padding: 0.75rem;
    box-shadow: 0 -4px 12px rgba(0,0,0,0.08);
    z-index: 100;
    display: none;
}
@media (max-width: 1100px) {
    .kn-exam-submit-bar { display: flex; gap: 0.5rem; justify-content: center; }
}