:root {
    --site-bg: #090d12;
    --site-bg-2: #111b27;
    --site-panel: rgba(13, 18, 25, 0.8);
    --site-panel-strong: rgba(9, 14, 20, 0.92);
    --site-border: rgba(126, 180, 255, 0.18);
    --site-accent: #5ec8ff;
    --site-accent-soft: rgba(94, 200, 255, 0.22);
    --site-text: #edf3ff;
    --site-text-soft: rgba(237, 243, 255, 0.8);
    --site-gold: #d4af6e;
}

body {
    background:
        radial-gradient(circle at top, rgba(94, 200, 255, 0.12), transparent 28%),
        linear-gradient(180deg, var(--site-bg) 0%, #101821 100%);
    color: var(--site-text);
}

.navbar {
    background: rgba(9, 13, 18, 0.82) !important;
    border-bottom: 1px solid var(--site-border);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.navbar-brand,
.nav-link,
.card,
.list-group-item,
.table,
.modal-content,
.form-control,
.form-select,
.btn,
.badge {
    transition: all 0.2s ease;
}

.navbar-brand {
    color: var(--site-text) !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.nav-link {
    color: rgba(237, 243, 255, 0.8) !important;
}

.nav-link:hover,
.nav-link.active,
.navbar-brand:hover {
    color: var(--site-accent) !important;
}

.card,
.list-group-item,
.table,
.modal-content,
.form-control,
.form-select,
textarea,
input,
select,
button {
    border-color: var(--site-border) !important;
}

.card {
    background: linear-gradient(180deg, rgba(16, 23, 32, 0.96), rgba(12, 18, 25, 0.88));
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.18);
}

h1, h2, h3, h4, h5, h6,
.hero-copy h1,
.hero-kicker,
.realm-name,
.stat-card .display-6 {
    color: var(--site-text);
}

.text-muted,
.small,
.muted,
.hero-description,
.card-subtitle,
.card-text {
    color: var(--site-text-soft) !important;
}

.btn-primary,
.btn-outline-primary {
    border-color: var(--site-accent);
}

.btn-primary {
    background: linear-gradient(135deg, var(--site-accent), #7cbcff);
    border: none;
    color: #041017;
    font-weight: 700;
}

.btn-primary:hover {
    filter: brightness(1.08);
}

.news-comment-panel,
.news-comment-panel .card-header,
.news-comment-panel .card-body {
    background: rgba(12, 18, 25, 0.9) !important;
    color: var(--site-text) !important;
    border-color: var(--site-border) !important;
}

.news-comment-panel .card-header {
    background: rgba(17, 25, 34, 0.96) !important;
}

.news-comment-panel .text-muted,
.news-comment-panel .small,
.news-comment-panel .form-text,
.news-comment-panel .form-label {
    color: rgba(237, 243, 255, 0.72) !important;
}

.news-comment-panel .form-control,
.news-comment-panel textarea,
.news-comment-panel input,
.news-comment-panel select {
    background: rgba(8, 12, 17, 0.9) !important;
    border-color: var(--site-border) !important;
    color: var(--site-text) !important;
}

.news-comment-panel .form-control::placeholder,
.news-comment-panel textarea::placeholder {
    color: rgba(237, 243, 255, 0.5) !important;
}

.news-comment-form-panel,
.news-comment-form-panel .card-header,
.news-comment-form-panel .card-body,
.news-comment-form-panel .card-footer {
    background: linear-gradient(180deg, rgba(17, 25, 34, 0.98), rgba(11, 16, 23, 0.96)) !important;
    color: var(--site-text) !important;
    border-color: rgba(126, 180, 255, 0.15) !important;
    box-shadow: inset 0 0 0 1px rgba(126, 180, 255, 0.04);
}

.news-comment-form-panel .card-header {
    background: rgba(20, 29, 38, 0.98) !important;
    color: var(--site-text) !important;
    border-bottom-color: rgba(126, 180, 255, 0.12) !important;
}

.news-comment-form-panel .text-muted,
.news-comment-form-panel .small,
.news-comment-form-panel .form-text,
.news-comment-form-panel .form-label,
.news-comment-form-panel p,
.news-comment-form-panel .form-check-label,
.news-comment-form-panel .alert,
.news-comment-form-panel .help-text {
    color: rgba(237, 243, 255, 0.72) !important;
}

.news-comment-form-panel .form-control,
.news-comment-form-panel textarea,
.news-comment-form-panel input,
.news-comment-form-panel select,
.news-comment-form-panel .btn,
.news-comment-form-panel .dropdown-menu {
    background: rgba(8, 12, 17, 0.9) !important;
    border-color: rgba(126, 180, 255, 0.18) !important;
    color: var(--site-text) !important;
    box-shadow: inset 0 0 0 1px rgba(126, 180, 255, 0.05);
}

.news-comment-form-panel .form-control::placeholder,
.news-comment-form-panel textarea::placeholder {
    color: rgba(237, 243, 255, 0.5) !important;
}

.news-comment-form-panel .bb-editor,
.news-comment-form-panel .bb-editor-toolbar,
.news-comment-form-panel .bb-editor-tabs,
.news-comment-form-panel .bb-editor-preview,
.news-comment-form-panel .bb-editor > textarea.bb-editor-input {
    background: rgba(8, 12, 17, 0.9) !important;
    color: var(--site-text) !important;
    border-color: rgba(126, 180, 255, 0.18) !important;
}

.news-comment-form-panel .bb-editor-toolbar {
    background: rgba(12, 18, 25, 0.95) !important;
}

.news-comment-form-panel .bb-editor-toolbar button,
.news-comment-form-panel .bb-editor-tabs button {
    color: var(--site-text) !important;
}

.news-comment-form-panel .bb-editor-toolbar button:hover,
.news-comment-form-panel .bb-editor-tabs button:hover,
.news-comment-form-panel .bb-editor-tabs button.active {
    background: rgba(94, 200, 255, 0.12) !important;
    color: var(--site-accent) !important;
}

.news-comment-form-panel .bb-editor-preview .bb-empty {
    color: rgba(237, 243, 255, 0.7) !important;
}

.news-comment-panel .btn-outline-primary,
.news-comment-form-panel .btn-outline-primary {
    color: var(--site-text);
    border-color: var(--site-accent);
}

.dropdown-menu {
    background: rgba(12, 18, 25, 0.98) !important;
    border-color: var(--site-border) !important;
    box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.35) !important;
    position: absolute !important;
    z-index: 1060;
}

.navbar {
    position: relative;
    z-index: 1030;
}

.navbar .dropdown,
.navbar .dropdown-menu,
.navbar-nav {
    position: relative;
    z-index: 1040;
}

.dropdown-item {
    color: var(--site-text) !important;
    background: transparent !important;
}

.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item.active,
.dropdown-item:active {
    background: rgba(94, 200, 255, 0.12) !important;
    color: var(--site-text) !important;
}

.list-group,
.list-group-item,
.list-group-item-action {
    background: rgba(12, 18, 25, 0.9) !important;
    color: var(--site-text) !important;
    border-color: var(--site-border) !important;
}

.list-group-item.active,
.list-group-item-action.active {
    background: linear-gradient(135deg, rgba(94, 200, 255, 0.18), rgba(94, 200, 255, 0.08)) !important;
    border-color: var(--site-accent) !important;
    color: var(--site-text) !important;
}

.card,
.card-header,
.card-body,
.card-footer {
    background: rgba(12, 18, 25, 0.9) !important;
    color: var(--site-text) !important;
    border-color: var(--site-border) !important;
}

.card-header.bg-white,
.card-header {
    background: rgba(17, 25, 34, 0.98) !important;
    color: var(--site-text) !important;
}

.table,
.table th,
.table td,
.table thead th,
.table tbody td,
.table-responsive {
    background: rgba(12, 18, 25, 0.8) !important;
    color: var(--site-text) !important;
    border-color: var(--site-border) !important;
}

.table thead th {
    background: rgba(17, 25, 34, 0.96) !important;
}

.table-light {
    background: rgba(17, 25, 34, 0.96) !important;
    color: var(--site-text) !important;
}

.text-muted,
.small,
.form-text,
.help-text {
    color: rgba(237, 243, 255, 0.72) !important;
}

.form-control,
.form-select,
textarea,
input,
select,
option,
.input-group-text,
.form-check-input {
    background: rgba(8, 12, 17, 0.9) !important;
    color: var(--site-text) !important;
    border-color: rgba(126, 180, 255, 0.18) !important;
}

.form-control::placeholder,
.form-select::placeholder,
textarea::placeholder,
input::placeholder {
    color: rgba(237, 243, 255, 0.5) !important;
}

.form-control:focus,
.form-select:focus,
textarea:focus,
input:focus,
select:focus {
    background: rgba(8, 12, 17, 0.95) !important;
    border-color: rgba(94, 200, 255, 0.55) !important;
    box-shadow: 0 0 0 0.2rem rgba(94, 200, 255, 0.16) !important;
    color: var(--site-text) !important;
}

.form-check-input {
    background-color: rgba(8, 12, 17, 0.9) !important;
}

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

main.container {
    position: relative;
    z-index: 1;
}