@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700&family=Rajdhani:wght@400;500;600;700&display=swap');

:root {
    --forum-bg: #edf2fb;
    --forum-bg-2: #e5ecfb;
    --forum-surface: #ffffff;
    --forum-surface-soft: #f6f8ff;
    --forum-text: #1a2332;
    --forum-muted: #64748b;
    --forum-border: #d2d9ea;
    --forum-primary: #316ef5;
    --forum-primary-2: #1d4ed8;
    --forum-accent: #f59e0b;
    --forum-navbar: #0e1526;
    --forum-shadow: 0 14px 36px rgba(27, 43, 90, 0.14);

    /* backward-compatible aliases used by existing page CSS */
    --primary: var(--forum-primary);
    --border-color: var(--forum-border);
    --text-color: var(--forum-text);
    --muted: var(--forum-muted);
    --bg-color: var(--forum-bg);
    --card-bg: var(--forum-surface);
}

[data-theme="dark"] {
    --forum-bg: #070d18;
    --forum-bg-2: #0d172a;
    --forum-surface: #121d33;
    --forum-surface-soft: #192740;
    --forum-text: #e7edf8;
    --forum-muted: #99acc7;
    --forum-border: #27364f;
    --forum-primary: #6fa1ff;
    --forum-primary-2: #4d7ee0;
    --forum-accent: #fbbf24;
    --forum-navbar: #050a14;
    --forum-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);

    --primary: var(--forum-primary);
    --border-color: var(--forum-border);
    --text-color: var(--forum-text);
    --muted: var(--forum-muted);
    --bg-color: var(--forum-bg);
    --card-bg: var(--forum-surface);
}

html,
body {
    min-height: 100%;
}

body,
button,
input,
select,
textarea {
    font-family: 'Rajdhani', 'Segoe UI', Tahoma, sans-serif !important;
}

h1,
h2,
h3,
h4,
h5,
.navbar-brand,
.panel-header,
.section-title {
    font-family: 'Cinzel', serif;
    letter-spacing: 0.35px;
}

body {
    background:
        radial-gradient(900px 380px at -10% -20%, rgba(49, 110, 245, 0.24), transparent 62%),
        radial-gradient(700px 280px at 110% -10%, rgba(245, 158, 11, 0.16), transparent 58%),
        linear-gradient(180deg, var(--forum-bg), var(--forum-bg-2)) !important;
    color: var(--forum-text) !important;
    transition: background-color .25s ease, color .2s ease;
    position: relative;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        repeating-linear-gradient(
            -30deg,
            rgba(255, 255, 255, 0.02) 0,
            rgba(255, 255, 255, 0.02) 1px,
            transparent 1px,
            transparent 18px
        );
}

.container,
.container-fluid,
.navbar,
.modal,
footer {
    position: relative;
    z-index: 1;
}

a {
    color: var(--forum-primary);
}

a:hover {
    color: var(--forum-primary-2);
    text-decoration: none;
}

.text-dark {
    color: var(--forum-text) !important;
}

.text-muted {
    color: var(--forum-muted) !important;
}

.navbar.bg-dark {
    background:
        linear-gradient(135deg, rgba(14, 21, 38, 0.94), rgba(14, 21, 38, 0.84)) !important;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.24);
    backdrop-filter: blur(8px);
}

.navbar .navbar-brand {
    font-size: 1.05rem;
    color: #f8fbff !important;
}

.navbar .nav-link,
.navbar .btn {
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.navbar .nav-link:hover,
.navbar .btn:hover {
    transform: translateY(-1px);
}

#theme-toggle,
[data-theme-toggle] {
    border-radius: 999px;
    width: 36px;
    height: 36px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.24);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.26);
}

#theme-toggle:hover,
[data-theme-toggle]:hover {
    filter: brightness(1.12);
}

.card,
.card-box,
.topic-container,
.reply-content-side,
.setup-card,
.modal-content,
.note-editor.note-frame,
.list-group-item,
.table {
    background: linear-gradient(180deg, var(--forum-surface), var(--forum-surface-soft)) !important;
    color: var(--forum-text) !important;
    border: 1px solid var(--forum-border) !important;
    box-shadow: var(--forum-shadow) !important;
}

.card,
.card-box,
.topic-container,
.setup-card {
    border-radius: 16px !important;
    overflow: hidden;
}

.card-header,
.card-footer,
.bg-white,
.bg-light,
.table thead th,
.note-toolbar,
.note-statusbar {
    background: var(--forum-surface-soft) !important;
    color: var(--forum-text) !important;
    border-color: var(--forum-border) !important;
}

.table,
.table td,
.table th {
    border-color: var(--forum-border) !important;
}

.table-hover tbody tr:hover,
.list-group-item:hover,
.activity-item:hover,
.cat-card:hover,
.reply-card:hover .reply-content-side {
    background: rgba(49, 110, 245, 0.09) !important;
}

.form-control,
.custom-select,
.note-editable,
.note-placeholder {
    background: var(--forum-surface) !important;
    color: var(--forum-text) !important;
    border-color: var(--forum-border) !important;
}

.note-editable {
    min-height: 120px;
}

.form-control::placeholder {
    color: var(--forum-muted) !important;
}

.form-control:focus,
.custom-select:focus {
    border-color: var(--forum-primary) !important;
    box-shadow: 0 0 0 .2rem rgba(49, 110, 245, 0.22) !important;
}

.btn {
    border-radius: 10px;
    font-weight: 600;
    letter-spacing: 0.2px;
}

.btn-primary,
.btn-success {
    border: none !important;
    background: linear-gradient(135deg, var(--forum-primary), var(--forum-primary-2)) !important;
    color: #fff !important;
}

.btn-primary:hover,
.btn-success:hover {
    box-shadow: 0 10px 20px rgba(49, 110, 245, 0.28);
}

.btn-warning {
    background: linear-gradient(135deg, #f59e0b, #d97706) !important;
    border: none !important;
    color: #111827 !important;
}

.btn-outline-light,
.btn-outline-secondary,
.btn-outline-info,
.btn-outline-warning,
.btn-outline-danger {
    border-width: 1px;
}

.badge-light {
    background: var(--forum-surface-soft) !important;
    color: var(--forum-text) !important;
    border: 1px solid var(--forum-border);
}

.badge-secondary {
    background: rgba(100, 116, 139, 0.22) !important;
    color: var(--forum-text) !important;
}

.pagination .page-link {
    background: var(--forum-surface) !important;
    color: var(--forum-text) !important;
    border-color: var(--forum-border) !important;
}

.pagination .page-item.active .page-link {
    background: var(--forum-primary) !important;
    border-color: var(--forum-primary) !important;
    color: #fff !important;
}

.forum-header {
    background:
        linear-gradient(135deg, rgba(49, 110, 245, 0.92), rgba(25, 77, 188, 0.92)) !important;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 14px;
    margin: 12px auto 22px;
}

.topic-header {
    border-bottom: 1px solid var(--forum-border) !important;
}

.topic-content-side::before {
    background: rgba(49, 110, 245, 0.24) !important;
}

.reply-content-side {
    border-radius: 14px;
}

.reply-content-side::before {
    border-left-color: var(--forum-border) !important;
    border-bottom-color: var(--forum-border) !important;
}

.stat-box,
.cat-card,
.activity-item,
.topic-container,
.reply-card,
.setup-card,
.card-box {
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.stat-box:hover,
.cat-card:hover,
.topic-container:hover,
.setup-card:hover,
.card-box:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(20, 31, 64, 0.22) !important;
}

@keyframes forumRise {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.card,
.card-box,
.topic-container,
.setup-card,
.reply-card,
.table-responsive {
    animation: forumRise .28s ease both;
}

@media (max-width: 768px) {
    .navbar .navbar-brand {
        font-size: 0.92rem;
    }

    .card,
    .card-box,
    .topic-container,
    .setup-card {
        border-radius: 12px !important;
    }

    #theme-toggle,
    [data-theme-toggle] {
        width: 34px;
        height: 34px;
    }
}