@font-face {
    font-family: "Portal Sans";
    src: url("/assets/CeraPro-6e898994.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

:root {
    --paper-bg: #f5f4ed;
    --paper-surface: #faf9f5;
    --paper-white: #ffffff;
    --paper-warm: #e8e6dc;
    --paper-border: #f0eee6;
    --paper-border-strong: #e8e6dc;
    --paper-ink: #141413;
    --paper-ink-soft: #4d4c48;
    --paper-muted: #5e5d59;
    --paper-dim: #87867f;
    --paper-dark: #30302e;
    --paper-accent: #c96442;
    --paper-accent-soft: #d97757;
    --paper-danger: #b53333;
    --paper-focus: #3898ec;
    --paper-ring: #d1cfc5;
    --paper-shadow: 0 0 0 1px rgba(209, 207, 197, 0.72), 0 14px 32px rgba(20, 20, 19, 0.06);
    --paper-shadow-soft: 0 0 0 1px rgba(209, 207, 197, 0.6), 0 6px 20px rgba(20, 20, 19, 0.05);
    --paper-serif: Georgia, "Times New Roman", serif;
    --paper-sans: "Portal Sans", "Segoe UI", Arial, sans-serif;
    --paper-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

html,
body {
    background: var(--paper-bg) !important;
    color: var(--paper-ink) !important;
    font-family: var(--paper-sans) !important;
}

body {
    line-height: 1.6;
}

body::before,
body::after {
    display: none !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.navbar-brand,
.page-title,
.panel-title,
.modal-title,
.card-title,
.page-header h1,
.page-header h2,
.display-1,
.display-2,
.display-3,
.display-4 {
    color: var(--paper-ink) !important;
    font-family: var(--paper-serif) !important;
    font-weight: 500 !important;
    line-height: 1.18 !important;
    letter-spacing: normal !important;
}

p,
li,
label,
small,
span,
input,
select,
textarea,
button,
.btn,
.nav,
.navbar-nav > li > a,
.dropdown-menu,
.table,
.alert,
.badge,
.label {
    font-family: var(--paper-sans) !important;
}

code,
pre,
kbd,
samp,
.backup-code {
    font-family: var(--paper-mono) !important;
}

a {
    color: var(--paper-accent-soft);
    transition: color 0.2s ease;
}

a:hover,
a:focus {
    color: var(--paper-accent);
    text-decoration: none;
}

.text-muted,
.help-block,
.form-text,
small,
.small,
.stat-label,
.node-description,
.question-id,
.question-meta,
.card-subtitle,
.text-secondary {
    color: var(--paper-muted) !important;
}

.navbar,
.navbar-default,
.navbar-inverse,
.bg-ib-blue,
.sidebar {
    background: var(--paper-ink) !important;
    border-color: var(--paper-dark) !important;
    box-shadow: 0 10px 28px rgba(20, 20, 19, 0.12) !important;
}

.navbar-default .navbar-brand,
.navbar-inverse .navbar-brand,
.navbar-brand,
.navbar-default .navbar-nav > li > a,
.navbar-inverse .navbar-nav > li > a,
.navbar-nav > li > a,
.sidebar .sidebar-brand,
.sidebar .nav-link,
.bg-ib-blue .navbar-brand,
.bg-ib-blue .nav-link {
    color: #faf9f5 !important;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a,
.navbar-nav > .active > a,
.sidebar-menu .nav-link:hover,
.sidebar-menu .nav-link.active {
    color: #faf9f5 !important;
    background: rgba(233, 230, 220, 0.1) !important;
}

.navbar-toggle,
.navbar-toggler {
    border-color: rgba(250, 249, 245, 0.35) !important;
}

.navbar-toggle .icon-bar,
.navbar-toggler-icon {
    background-color: #faf9f5 !important;
}

.panel,
.panel-modern,
.well,
.card,
.modal-content,
.content-wrapper,
.login-panel,
.profile-card,
.stat-card,
.course-card,
.planner-tree,
.backup-codes,
.top-bar,
.dropdown-menu,
.offcanvas,
.question-card,
.markscheme-section,
.report-section,
.question-header,
.alert,
.list-group-item,
.node-header,
.app-card,
.stat-box,
.table-responsive,
.sidebar .sidebar-header {
    background: var(--paper-surface) !important;
    border: 1px solid var(--paper-border-strong) !important;
    border-radius: 16px !important;
    box-shadow: var(--paper-shadow-soft) !important;
    color: var(--paper-ink) !important;
}

.panel-heading,
.card-header,
.modal-header,
.question-header,
.top-bar {
    background: var(--paper-surface) !important;
    border-bottom: 1px solid var(--paper-border-strong) !important;
    color: var(--paper-ink) !important;
}

.panel-footer,
.card-footer,
.modal-footer {
    background: rgba(232, 230, 220, 0.4) !important;
    border-top: 1px solid var(--paper-border-strong) !important;
}

.course-card::before,
.stat-card::after,
.app-card::before {
    background: var(--paper-accent) !important;
}

.app-card,
.course-card,
.node-header,
.question-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.app-card:hover,
.course-card:hover,
.node-header:hover,
.question-card:hover {
    transform: translateY(-2px);
    border-color: var(--paper-ring) !important;
    box-shadow: var(--paper-shadow) !important;
}

.btn {
    border-radius: 12px !important;
    font-weight: 500 !important;
    box-shadow: none !important;
}

.btn-primary,
.btn-success,
.btn-outline-primary,
.grade-badge {
    background: var(--paper-accent) !important;
    border-color: var(--paper-accent) !important;
    color: #faf9f5 !important;
    box-shadow: 0 0 0 1px rgba(201, 100, 66, 0.55) !important;
}

.btn-primary:hover,
.btn-success:hover,
.btn-outline-primary:hover,
.grade-badge:hover {
    background: var(--paper-accent-soft) !important;
    border-color: var(--paper-accent-soft) !important;
    color: #faf9f5 !important;
}

.btn-default,
.btn-secondary,
.btn-outline-secondary,
.btn-light,
.btn-ghost {
    background: var(--paper-warm) !important;
    border-color: var(--paper-warm) !important;
    color: var(--paper-ink-soft) !important;
    box-shadow: 0 0 0 1px rgba(209, 207, 197, 0.65) !important;
}

.btn-default:hover,
.btn-secondary:hover,
.btn-outline-secondary:hover,
.btn-light:hover,
.btn-ghost:hover {
    background: #ede9de !important;
    border-color: #ded8c9 !important;
    color: var(--paper-ink) !important;
}

.btn-danger,
.alert-danger,
.label-danger,
.badge.bg-danger {
    background: rgba(181, 51, 51, 0.08) !important;
    border-color: rgba(181, 51, 51, 0.24) !important;
    color: var(--paper-danger) !important;
}

.btn-danger:hover {
    background: rgba(181, 51, 51, 0.14) !important;
}

.btn-warning,
.alert-warning,
.label-warning {
    background: rgba(201, 100, 66, 0.12) !important;
    border-color: rgba(201, 100, 66, 0.22) !important;
    color: var(--paper-accent) !important;
}

.alert-success,
.label-success,
.badge.bg-success {
    background: rgba(93, 118, 89, 0.1) !important;
    border-color: rgba(93, 118, 89, 0.22) !important;
    color: #476146 !important;
}

.alert-info,
.label-info,
.badge.bg-info {
    background: rgba(56, 152, 236, 0.08) !important;
    border-color: rgba(56, 152, 236, 0.2) !important;
    color: #2e79b8 !important;
}

.form-control,
.form-select,
.input-group-addon,
select.form-control,
textarea.form-control {
    background: var(--paper-white) !important;
    border: 1px solid var(--paper-border-strong) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    color: var(--paper-ink) !important;
}

.form-control:focus,
.form-select:focus,
select.form-control:focus,
textarea.form-control:focus,
.form-check-input:focus {
    border-color: var(--paper-focus) !important;
    box-shadow: 0 0 0 3px rgba(56, 152, 236, 0.15) !important;
}

.form-check-input:checked {
    background-color: var(--paper-accent) !important;
    border-color: var(--paper-accent) !important;
}

.table > thead > tr > th,
.table thead th,
.table-modern > thead > tr > th {
    background: rgba(232, 230, 220, 0.45) !important;
    border-bottom: 1px solid var(--paper-border-strong) !important;
    color: var(--paper-muted) !important;
}

.table > tbody > tr > td,
.table tbody td,
.table-modern > tbody > tr > td {
    border-top: 1px solid var(--paper-border) !important;
    background: transparent !important;
}

.table-hover > tbody > tr:hover,
.table tbody tr:hover,
.table-modern > tbody > tr:hover {
    background: rgba(232, 230, 220, 0.25) !important;
}

.badge,
.label,
.subject-badge,
.topic-badge,
.subtopic-badge,
.login-method-badge {
    border-radius: 999px !important;
    font-weight: 500 !important;
}

.subject-badge,
.topic-badge,
.label-primary,
.badge.bg-primary {
    background: rgba(201, 100, 66, 0.12) !important;
    border: 1px solid rgba(201, 100, 66, 0.22) !important;
    color: var(--paper-accent) !important;
}

.subtopic-badge,
.label-default,
.badge.bg-secondary {
    background: rgba(232, 230, 220, 0.75) !important;
    border: 1px solid rgba(209, 207, 197, 0.7) !important;
    color: var(--paper-ink-soft) !important;
}

.pagination .page-link,
.pagination > li > a,
.pagination > li > span {
    background: var(--paper-surface) !important;
    border-color: var(--paper-border-strong) !important;
    color: var(--paper-ink-soft) !important;
}

.pagination .page-item.active .page-link,
.pagination > .active > a,
.pagination > .active > span {
    background: var(--paper-accent) !important;
    border-color: var(--paper-accent) !important;
    color: #faf9f5 !important;
}

.page-header,
hr,
.dropdown-divider {
    border-color: var(--paper-border-strong) !important;
}

.sidebar {
    background: var(--paper-ink) !important;
}

.sidebar .sidebar-header {
    background: rgba(250, 249, 245, 0.05) !important;
    border-color: rgba(250, 249, 245, 0.08) !important;
    box-shadow: none !important;
}

.sidebar-menu .nav-link {
    border-left: 3px solid transparent;
}

.sidebar-menu .nav-link.active {
    border-left-color: var(--paper-accent);
}

.main-content,
.content-area,
.container-fluid,
.container {
    position: relative;
}

.page-title,
.course-name,
.app-name,
.question-content,
.question-content p {
    color: var(--paper-ink) !important;
}

.question-content,
.panel-body,
.card-body,
.modal-body {
    line-height: 1.7;
}

.question-card,
.planner-tree,
.content-wrapper,
.stat-box,
.stat-card,
.course-card,
.app-card {
    overflow: hidden;
}

.question {
    color: var(--paper-ink) !important;
}

.marks {
    color: var(--paper-accent) !important;
}

.spinner-border,
.fa-spinner,
.fa-spin {
    color: var(--paper-accent) !important;
}

footer {
    color: var(--paper-muted) !important;
    border-top: 1px solid var(--paper-border-strong) !important;
}

@media (max-width: 768px) {
    .panel,
    .card,
    .modal-content,
    .planner-tree,
    .question-card,
    .course-card,
    .app-card {
        border-radius: 14px !important;
    }
}