@import url("./ui-modules.css");

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.card,
.btn,
.navbar,
.modal-content,
.dropdown-menu {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.navbar-menu,
.dropdown-menu,
.modal,
.card,
.modal-content {
    contain: layout style paint;
}

.hidden,
[hidden] {
    content-visibility: hidden;
    display: none !important;
}

.activities-list,
.class-members-grid,
.features-grid,
.post-list,
.questions-list {
    content-visibility: auto;
    contain-intrinsic-size: auto 200px;
    contain: layout style paint;
}

.btn,
.navbar-item {
    transition: transform 0.08s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.1s ease, color 0.1s ease, box-shadow 0.1s ease !important;
    -webkit-tap-highlight-color: transparent;
}

.card {
    transition: transform 0.08s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.1s ease !important;
    -webkit-tap-highlight-color: transparent;
}

.btn:active {
    transform: scale(0.96);
}

.btn:hover {
    transform: translateY(-1px);
}


body {
    position: relative;
    overflow-x: hidden;
    scrollbar-gutter: stable;
}


.ripple {
    position: fixed;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.3);
    transform: scale(0);
    animation: ripple-animation 0.6s linear;
    pointer-events: none;
    z-index: 9999;
}

@keyframes ripple-animation {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

html {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scrollbar-gutter: stable;
}

:root {
    --primary-color: #1d1d1f;
    --secondary-color: #f8f8f8;

    --text-primary: #1d1d1f;
    --text-secondary: #6e6e73;
    --border-color: rgba(255, 255, 255, 0.5);

    --border-right: rgba(255, 255, 255, 0.2);
    --border-bottom: rgba(255, 255, 255, 0.2);
    --success-color: #34c759;
    --warning-color: #ff9500;
    --danger-color: #ff3b30;
    --background-color: #f8f8f8;

    --card-background: rgba(255, 255, 255, 0.1);

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 25px 45px rgba(0, 0, 0, 0.1);
    --border-radius: 4px;

    --radius-md: 14px;

    --radius-pill: 9999px;

    --transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
    --backdrop-blur: blur(8px);
    --input-background: rgba(255, 255, 255, 0.2);

    --input-border: rgba(255, 255, 255, 0.5);

    --input-border-right: rgba(255, 255, 255, 0.2);
    --input-border-bottom: rgba(255, 255, 255, 0.2);


    --accent-purple: #7734db;
    --accent-green: #34db77;
    --accent-pink: #c7b9ff;

    --accent-yellow: #ffd1b3;

    --accent-blue: #9be7ff;

}

body.dark-mode {
    --ui-bg: #0f172a;
    --primary-color: #e4e4e7;
    --secondary-color: #18181b;
    --text-primary: #f4f4f5;
    --text-secondary: #a1a1aa;
    --border-color: rgba(255, 255, 255, 0.08);
    --border-right: rgba(255, 255, 255, 0.05);
    --border-bottom: rgba(255, 255, 255, 0.05);
    --background-color: #09090b;
    --card-background: rgba(24, 24, 27, 0.6);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 25px 45px rgba(0, 0, 0, 0.7);
    --input-background: rgba(39, 39, 42, 0.5);
    --input-border: rgba(255, 255, 255, 0.08);
    --input-border-right: rgba(255, 255, 255, 0.05);
    --input-border-bottom: rgba(255, 255, 255, 0.05);
    --modal-overlay: rgba(0, 0, 0, 0.75);
    --button-primary: #dc2626;
    --button-primary-hover: #b91c1c;
    --button-secondary: #27272a;
    --button-secondary-hover: #3f3f46;
}

body.dark-mode {
    background: #0f172a;
    background-attachment: fixed;
}

body.dark-mode .card {
    background: var(--card-background) !important;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-md);
}

body.dark-mode .modal-overlay {
    background: var(--modal-overlay) !important;
}

body.dark-mode .modal-content {
    background: rgba(24, 24, 27, 0.98) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

body.dark-mode .btn-primary {
    background: var(--button-primary) !important;
    border-color: var(--button-primary) !important;
}

body.dark-mode .btn-primary:hover {
    background: var(--button-primary-hover) !important;
    border-color: var(--button-primary-hover) !important;
}

body.dark-mode .btn-secondary {
    background: var(--button-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary);
}

body.dark-mode .btn-secondary:hover {
    background: var(--button-secondary-hover) !important;
    border-color: var(--border-color) !important;
}

body.dark-mode .theme-switcher {
    background: rgba(39, 39, 42, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body.dark-mode .main-container {
    background: transparent;
}

body.dark-mode .card-header,
body.dark-mode .card-body,
body.dark-mode .card-footer {
    background: transparent !important;
    color: var(--text-primary);
}

body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6 {
    color: var(--text-primary) !important;
}

body.dark-mode p {
    color: var(--text-secondary) !important;
}

body.dark-mode a {
    color: var(--primary-color);
}

body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select {
    background: var(--input-background);
    border-color: var(--input-border);
    color: var(--text-primary);
}

body.dark-mode ::placeholder {
    color: var(--text-secondary);
}

body.dark-mode .card-header h3 {
    color: var(--text-primary) !important;
}

body.dark-mode .activity-item {
    border-color: var(--border-color);
}

body.dark-mode .activity-title {
    color: var(--text-primary) !important;
}

body.dark-mode .activity-description {
    color: var(--text-secondary) !important;
}

body.dark-mode .activity-time {
    color: var(--text-secondary) !important;
}

body.dark-mode .info-label {
    color: var(--text-secondary) !important;
}

body.dark-mode .info-value {
    color: var(--text-primary) !important;
}

body.dark-mode .feature-card {
    background: var(--card-background) !important;
    border: 1px solid var(--border-color);
}

body.dark-mode .feature-card h3 {
    color: var(--text-primary) !important;
}

body.dark-mode .feature-card p {
    color: var(--text-secondary) !important;
}

body.dark-mode .dropdown-menu {
    background: rgba(24, 24, 27, 0.98) !important;
    border: 1px solid var(--border-color);
}

body.dark-mode .dropdown-header {
    color: var(--text-primary) !important;
}

body.dark-mode .dropdown-item {
    color: var(--text-secondary) !important;
}

body.dark-mode .dropdown-item:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary) !important;
}

body:not(.dark-mode)::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}

body {
    background: linear-gradient(to bottom, #f1f4f9, #dff1ff);
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    overflow-x: hidden;
    font-family: var(--ds-font);
}

body.dark-mode {
    background: #0f172a !important;
    background-attachment: fixed !important;
}

body.dark-mode .background-colors {
    display: none !important;
}

body.dark-mode::before {
    background: transparent !important;
}



:root {

    --oa-bg: #f5f3f1;
    --oa-surface: #ffffff;
    --oa-surface-2: #fcfcfd;
    --oa-border: #e5e7eb;
    --oa-border-2: #d1d5db;
    --oa-text: #1f2933;
    --oa-text-muted: #6b7280;
    --oa-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
    --oa-shadow-hover: 0 6px 18px rgba(0, 0, 0, 0.10);
    --oa-radius: 20px;
    --oa-radius-md: 14px;
    --oa-radius-pill: 9999px;
    --oa-primary: #10a37f;
    --oa-primary-hover: #0e8c6d;


    --primary-color: var(--oa-primary);
    --secondary-color: var(--oa-bg);
    --text-primary: var(--oa-text);
    --text-secondary: var(--oa-text-muted);
    --background-color: var(--oa-bg);
    --card-background: var(--oa-surface);
    --border-color: var(--oa-border);
    --border-right: var(--oa-border);
    --border-bottom: var(--oa-border);
    --shadow-sm: var(--oa-shadow);
    --shadow-md: var(--oa-shadow);
    --shadow-lg: var(--oa-shadow);
    --border-radius: var(--oa-radius);
    --radius-md: var(--oa-radius-md);
    --radius-pill: var(--oa-radius-pill);
    --backdrop-blur: blur(0px);
    --input-background: var(--oa-surface);
    --input-border: var(--oa-border);
    --input-border-right: var(--oa-border);
    --input-border-bottom: var(--oa-border);
}


body {
    background: var(--oa-bg) !important;
    background-attachment: initial !important;
    background-size: auto !important;
    background-position: initial !important;
    font-family: var(--ds-font);
    color: var(--oa-text);
}


body::before,
body .background-colors,
body .floating-squares {
    display: none !important;
}

.card {

    background: rgba(255, 255, 255, 0.14) !important;
    border: none !important;
    border-right: none !important;
    border-bottom: none !important;
    border-radius: 14px !important;
    box-shadow:
        0 18px 55px rgba(0, 0, 0, 0.12),
        0 2px 8px rgba(0, 0, 0, 0.06),
        0 0 0 0.5px rgba(255, 255, 255, 0.18) inset,
        0 1px 0 rgba(255, 255, 255, 0.10) inset !important;
}

.card:hover {
    transform: none !important;
}

.card-header {
    background: rgba(255, 255, 255, 0.12) !important;
    border-bottom: none !important;
    box-shadow: 0 -0.5px 0 rgba(255, 255, 255, 0.10) inset, 0 0.5px 0 rgba(0, 0, 0, 0.06) inset !important;
}


.btn {
    box-shadow: none !important;
    border: 1px solid var(--oa-border-2) !important;
    background: var(--oa-surface) !important;
    color: var(--oa-text) !important;
    border-radius: var(--oa-radius-pill) !important;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.btn:hover {
    transform: none !important;
    background: #f3f4f6 !important;
}

.btn-primary {
    background: var(--oa-primary) !important;
    border-color: var(--oa-primary) !important;
    color: #fff !important;
    border-radius: var(--oa-radius-pill) !important;
    box-shadow: none !important;
}

.btn-primary:hover {
    background: var(--oa-primary-hover) !important;
    border-color: var(--oa-primary-hover) !important;
    transform: none !important;
}

.btn-secondary,
.btn-danger {
    background: var(--oa-surface) !important;
    color: var(--oa-text) !important;
    border-color: var(--oa-border-2) !important;
    box-shadow: none !important;
}

.btn-secondary:hover,
.btn-danger:hover {
    background: #f3f4f6 !important;
    transform: none !important;
}


input,
textarea,
select,
.filter-select {
    background: var(--oa-surface) !important;
    border: 1px solid var(--oa-border) !important;
    color: var(--oa-text) !important;
    box-shadow: none !important;
    border-radius: var(--oa-radius-md) !important;
}

input:focus,
textarea:focus,
select:focus,
.filter-select:focus {
    outline: none;
    border-color: rgba(16, 163, 127, 0.6) !important;
    box-shadow: 0 0 0 3px rgba(16, 163, 127, 0.15) !important;
}


.modal-overlay {
    background-color: rgba(15, 23, 42, 0.8) !important;
    backdrop-filter: none !important;
}

.modal-content {
    background: var(--oa-surface) !important;
    border: 1px solid var(--oa-border) !important;
    box-shadow: var(--oa-shadow-hover) !important;
    backdrop-filter: none !important;
    border-radius: 14px !important;
}

.modal-header,
.modal-footer,
.modal-body {
    background: transparent !important;
    border-color: var(--oa-border) !important;
}

.modal-close {
    background: transparent !important;
    border: 1px solid var(--oa-border) !important;
    box-shadow: none !important;
}


.feedback-popup,
.feedback-content,
.feedback-message,
.feedback-modal .modal-content {
    color: var(--text-primary);
}


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

a:hover {
    color: var(--oa-primary-hover);
}

body .background-colors {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
    contain: strict;
}

body .background-colors .color {
    position: absolute;
    filter: blur(100px);
    opacity: 0.6;
}

body .background-colors .color:nth-child(1) {
    top: -350px;
    width: 600px;
    height: 600px;
    background: var(--accent-pink);
}

body .background-colors .color:nth-child(2) {
    bottom: -150px;
    left: 100px;
    width: 500px;
    height: 500px;
    background: var(--accent-yellow);
}

body .background-colors .color:nth-child(3) {
    bottom: 50px;
    right: 100px;
    width: 500px;
    height: 500px;
    background: var(--accent-blue);
}

body .floating-squares {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
    z-index: -1;
    contain: strict;
}

body .floating-squares .square {
    position: absolute;
    box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--border-radius);
}


body.auth-page .floating-squares {
    display: none;
}

body.auth-page .floating-squares .square {
    animation: none;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
}

body.auth-page .floating-squares .square:nth-child(1) {
    top: 25%;
    left: calc(50% - 300px);
    width: 100px;
    height: 100px;
    z-index: 3;
}

body.auth-page .floating-squares .square:nth-child(2) {
    top: 70%;
    left: calc(50% - 280px);
    width: 80px;
    height: 80px;
    z-index: 1;
}

body.auth-page .floating-squares .square:nth-child(3) {
    top: 30%;
    right: calc(50% - 280px);
    width: 90px;
    height: 90px;
    z-index: 3;
}

body.auth-page .floating-squares .square:nth-child(4) {
    top: 65%;
    right: calc(50% - 260px);
    width: 70px;
    height: 70px;
    z-index: 3;
}

body.auth-page .floating-squares .square:nth-child(5) {
    top: 50%;
    left: calc(50% - 180px);
    width: 60px;
    height: 60px;
    z-index: 3;
}


@keyframes animate {

    0%,
    100% {
        transform: translateY(-40px) rotate(0deg);
    }

    50% {
        transform: translateY(40px) rotate(180deg);
    }
}

@keyframes float {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    33% {
        transform: translate(30px, -30px) scale(1.1);
    }

    66% {
        transform: translate(-20px, 20px) scale(0.9);
    }
}

.question-tag {
    display: inline-block;
    background-color: rgba(107, 114, 128, 0.15);
    color: #4B5563;
    padding: 2px 8px;
    border-radius: var(--border-radius);
    font-size: 12px;
    font-weight: normal;
    margin-left: 8px;
    vertical-align: middle;
    cursor: pointer;
}

.question-tag:hover {
    background-color: rgba(107, 114, 128, 0.25);
}

body {
    font-family: var(--ds-font);
    background-color: var(--background-color);
    color: var(--text-primary);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    font-size: 16px;

    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    box-sizing: border-box;
}

@media (max-width: 1200px) {
    body {
        font-size: 15px;
    }
}

@media (max-width: 992px) {
    body {
        font-size: 14px;
    }
}

@media (max-width: 768px) {
    body {
        font-size: 13px;
    }
}

@media (max-width: 576px) {
    body {
        font-size: 12px;
    }
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

.main-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1rem;
    min-height: calc(100vh - 120px);
    position: relative;
}

.navbar {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1.5px solid rgba(0, 0, 0, 0.18);
    border-radius: 9999px;
    filter: none;
    position: sticky;
    top: 12px;
    z-index: 1000;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 12px auto;
    padding: 0 4px;
    width: fit-content;
    max-width: calc(100% - 40px);
    overflow: visible;
}

.navbar-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: auto;
    gap: 8px;
}

.navbar-left {
    display: flex;
    align-items: center;
}

.navbar-center {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.navbar-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    position: relative;
    overflow: visible;
}

.theme-switcher {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    background: transparent;
    border: none;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.theme-switcher i {
    font-size: 1.25rem;
    transition: all 0.3s ease;
}

.theme-switcher .fa-sun {
    color: #f59e0b;
}

.theme-switcher .fa-moon {
    color: #8b5cf6;
}

.theme-switcher:hover {
    background: rgba(128, 128, 128, 0.15);
}

.theme-switcher:hover i {
    transform: rotate(20deg);
}

.theme-switcher:active i {
    transform: rotate(0deg) scale(0.95);
}

body.dark-mode .theme-switcher:hover {
    background: rgba(255, 255, 255, 0.1);
}

.navbar-item {
    display: flex;
    padding: 6px 14px;
    color: var(--text-secondary);
    text-decoration: none;
    border-radius: 9999px;
    transition: color 0.2s ease, background-color 0.25s ease;
    font-weight: 500;
    font-size: 0.82rem;
    min-height: 32px;
    align-items: center;
    user-select: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    white-space: nowrap;
}

.navbar-item:hover {
    color: var(--text-primary);
    font-weight: 600;
    background: rgba(0, 0, 0, 0.06) !important;
}

.navbar-item.active {
    color: #ffffff !important;
    font-weight: 600;
    background: rgba(0, 0, 0, 0.82) !important;
    border: none !important;
    box-shadow: none !important;
    transform: none;
}

.navbar-menu {
    display: flex;
    gap: 0.25rem;
    position: relative;
    opacity: 1;
    transform: translateY(0);
    background-color: transparent;
    border-bottom: none;
    box-shadow: none;
    flex-direction: row;
    transition: all 0.3s ease-in-out;
}




.navbar-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 1.25rem;
    color: var(--text-primary);
    cursor: pointer;
    padding: 0.5rem;
    border-radius: var(--border-radius);
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
}

.navbar-toggle:hover {
    background-color: rgba(52, 152, 219, 0.05);
    color: var(--text-primary);
}

.navbar-toggle:active,
.navbar-toggle:focus {
    outline: none;
    background-color: rgba(52, 152, 219, 0.1);
    color: var(--text-primary);
}





.user-profile {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    position: relative;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: var(--border-radius);
    transition: var(--transition);
    overflow: visible;
}

.user-profile:hover {
    background-color: rgba(52, 152, 219, 0.05);
}

.avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--primary-color);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.85rem;
}

.username {
    font-weight: 500;
    color: var(--text-primary);
    font-size: 0.95rem;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    background: rgba(248, 248, 248, 0.9);

    border: 1px solid var(--border-color);
    border-right: 1px solid var(--border-right);
    border-bottom: 1px solid var(--border-bottom);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-lg);
    min-width: 180px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: var(--transition);
    z-index: 9999;
    overflow: hidden;
}

@media (max-width: 801px) {

    .navbar {
        width: calc(100% - 24px) !important;
        max-width: calc(100% - 24px) !important;
        margin: 12px auto !important;
        border-radius: 14px !important;
    }

    .navbar-container {
        gap: 0.5rem;
    }


    .navbar-toggle {
        display: flex;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }


    .navbar-menu {
        display: flex;
        flex-direction: column;
        gap: 0;
        margin-left: 0;
        position: absolute;
        top: 100%;
        left: -12px;
        right: -12px;
        background: rgba(255, 255, 255, 0.95);
        border: none;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
        border-radius: 0 0 14px 14px;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        max-height: 0;
        overflow: hidden;
        transition: all 0.3s ease-in-out;
        z-index: 999;
    }


    .navbar-menu.open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        max-height: 500px;
    }


    .navbar-menu.closing {
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        max-height: 0;
    }

    .navbar-menu .navbar-item {
        padding: 1rem;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        border-radius: 0;
        text-align: center;
        margin: 0;
        min-height: 44px;
    }

    .navbar-menu .navbar-item:last-child {
        border-bottom: none;
        border-radius: 0 0 14px 14px;
    }
}

@media (max-width: 801px) {
    body.dark-mode .navbar-menu {
        background: rgba(30, 30, 30, 0.95);
        border: none;
    }

    body.dark-mode .navbar-menu .navbar-item {
        border-bottom-color: rgba(255, 255, 255, 0.05);
    }
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    color: var(--text-primary);
    text-decoration: none;
    transition: var(--transition);
}

.dropdown-item:hover {
    background-color: rgba(52, 152, 219, 0.05);
    color: var(--primary-color);
}

.dropdown-item.active {
    background-color: rgba(52, 152, 219, 0.1);
    color: var(--primary-color);
}

.dropdown-item i {
    width: 1rem;
    text-align: center;
}

.dropdown-header {
    padding: 0.75rem 1rem;
    font-weight: 600;
    color: var(--primary-color);
    text-align: center;
    border-bottom: 1px solid var(--border-color);
    background-color: var(--secondary-color);
    margin-bottom: 0;
}

.card {
    background: rgba(255, 255, 255, 0.1);

    border: none;
    box-shadow:
        var(--shadow-lg),
        0 0 0 0.5px rgba(255, 255, 255, 0.22) inset,
        0 1px 0 rgba(255, 255, 255, 0.14) inset,
        0 -1px 0 rgba(0, 0, 0, 0.06) inset;
    border-radius: 14px;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
    overflow: hidden;
}

.card:hover {
    box-shadow:
        var(--shadow-lg),
        0 0 0 0.5px rgba(255, 255, 255, 0.22) inset,
        0 1px 0 rgba(255, 255, 255, 0.14) inset,
        0 -1px 0 rgba(0, 0, 0, 0.06) inset;
    transform: none !important;
}

.card-header {
    padding: 1rem 1.25rem;

    border-bottom: none;
    box-shadow: 0 -0.5px 0 rgba(255, 255, 255, 0.10) inset, 0 0.5px 0 rgba(0, 0, 0, 0.06) inset;
    background: rgba(255, 255, 255, 0.2);
}

.card-header h3 {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.card-body {
    padding: 1.25rem;
}

.card-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.forum-container .card {
    overflow: hidden;
}

.forum-container .card-body {
    padding: 0;
}

.forum-container .forum-posts {
    gap: 0;
    background-color: transparent;
    border-radius: 0;
    overflow: hidden;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.85rem 1.5rem;
    border: 1px solid #1d1d1f;
    border-radius: var(--radius-pill);
    font-size: 0.95rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
    font-family: inherit;
    text-transform: none;
    outline: none;
    min-height: 44px;
    min-width: 44px;
    user-select: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    background: #1d1d1f;
    color: #fff;
}

.btn-primary {
    background: #1d1d1f;
    color: #fff;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    border: 1px solid #1d1d1f;
    padding: 10px 20px;
    border-radius: var(--border-radius);
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
}

.btn-primary:hover {
    background: #000;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
    border-color: #000;
}

.btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.btn-secondary {
    background: #1d1d1f;
    color: #fff;
    border: 1px solid #1d1d1f;
    border-radius: var(--border-radius);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.btn-secondary:hover {
    background: #000;
    border-color: #000;
    color: #fff;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

.btn-secondary:active {
    transform: translateY(0);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.btn-danger {
    background: #1d1d1f;
    color: #fff;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    border: 1px solid #1d1d1f;
    border-radius: var(--border-radius);
}

.btn-danger:hover {
    background: #000;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
    border-color: #000;
}

.btn-danger:active {
    transform: translateY(0);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.btn-block {
    width: 100%;
}

.btn-large {
    padding: 1rem 1.5rem;
    font-size: 1rem;
}

.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
}

.btn.is-loading {
    cursor: wait;
}


.form-group {
    margin-bottom: 1.25rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--text-primary);
    font-size: 0.9rem;
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 10px 20px;
    border: 1px solid var(--input-border);
    border-right: 1px solid var(--input-border-right);
    border-bottom: 1px solid var(--input-border-bottom);
    border-radius: var(--radius-md);
    font-size: 16px;
    font-family: inherit;
    transition: var(--transition);
    background: #fff;
    color: #666;
    outline: none;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
    letter-spacing: 1px;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    border-color: var(--primary-color);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);
    outline: none;
}

.form-group input::placeholder {
    color: #999;
    opacity: 0.8;
}



.form-group textarea {
    resize: vertical;
    min-height: 120px;
}

.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.upload-btn-text-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.6rem 1.2rem;
    background-color: transparent;
    color: #1d1d1f;
    border: none;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    height: 44px;
    width: 120px;
    border-radius: 0;
    transition: all 0.2s ease;
    line-height: 1;
    vertical-align: middle;
    margin: 0;
    position: relative;
}

.upload-btn-text-icon:hover {
    color: #1d1d1f;
    background-color: transparent;
    transform: scale(1.05);
    filter: brightness(1.1);
    text-decoration: none;
    box-shadow: none;
}

.upload-btn-text-icon:active {
    color: #1d1d1f;
    background-color: transparent;
    transform: scale(1.02);
    filter: brightness(1.05);
    text-decoration: none;
    box-shadow: none;
}

.upload-btn-text-icon i {
    font-size: 14px;
    color: inherit;
    height: 14px;
    width: 14px;
    line-height: 1;
    display: inline-block;
    vertical-align: middle;
}

.upload-btn-text-icon span {
    line-height: 1;
    font-size: 14px;
    display: inline-block;
    vertical-align: middle;
}

.image-upload-container {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 1.5rem 0;
    padding: 0;
}

.image-upload-container label,
.image-upload-container button {
    display: flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    margin: 0;
    padding: 0;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
}

.image-upload-container button[id="takePhotoBtn"],
.image-upload-container button[id="takeAnswerPhotoBtn"] {
    position: relative;
    top: 0;
    left: 0;
}

.question-images {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    margin: 0.85rem 0 0.5rem;
}

.question-image-button {
    display: inline-block !important;
    width: auto !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    outline: none !important;
    background: transparent !important;
    box-shadow: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    cursor: zoom-in;
}

.question-image-button:hover,
.question-image-button:focus,
.question-image-button:active,
.question-image-button:focus-visible {
    border: none !important;
    border-radius: 0 !important;
    outline: none !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
}

.question-image {
    width: auto;
    max-width: min(100%, 760px);
    height: auto;
    max-height: 520px;
    object-fit: contain;
    display: block;
    margin: 0;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

.question-inline-attachments {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin: -0.15rem 0 1rem;
}

.question-inline-attachments__label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.36rem 0.7rem;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.05);
    color: var(--text-secondary);
    font-size: 0.84rem;
    font-weight: 600;
}

.question-inline-attachments__list {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.question-attachment-thumb {
    display: block !important;
    width: 72px !important;
    height: 72px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    outline: none !important;
    overflow: hidden !important;
    background: transparent !important;
    box-shadow: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    object-fit: cover;
    cursor: zoom-in;
    transition: transform 0.18s ease, opacity 0.18s ease;
}

.question-attachment-thumb:hover {
    transform: translateY(-1px);
    opacity: 0.92;
}

.question-attachment-thumb:focus,
.question-attachment-thumb:active,
.question-attachment-thumb:focus-visible {
    border: none !important;
    border-radius: 0 !important;
    outline: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.dark-mode .question-inline-attachments__label,
[data-theme="dark"] .question-inline-attachments__label {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.76);
}

body.dark-mode .question-attachment-thumb,
[data-theme="dark"] .question-attachment-thumb {
    background: transparent;
}

body.dark-mode .question-attachment-thumb:hover,
[data-theme="dark"] .question-attachment-thumb:hover {
    opacity: 0.9;
}

.question-attachment-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

.image-viewer-page {
    max-width: 1280px;
    margin: 24px auto 32px;
    padding: 0 clamp(0.75rem, 2.8vw, 1.75rem);
}

.image-viewer-card {
    border-radius: 24px !important;
    overflow: hidden;
}

.image-viewer-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.image-viewer-card__subtitle {
    margin: 0.3rem 0 0;
    color: var(--text-secondary);
}

.image-viewer-state {
    min-height: 360px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-viewer-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.image-viewer-stage {
    position: relative;
    min-height: 72vh;
    overflow: hidden;
    border-radius: 22px;
    border: 1px solid rgba(122, 109, 88, 0.12);
    background:
        radial-gradient(circle at top, rgba(255, 214, 122, 0.18), transparent 34%),
        linear-gradient(180deg, rgba(250, 246, 239, 0.98) 0%, rgba(244, 239, 230, 0.98) 100%);
    cursor: zoom-in;
    touch-action: none;
}

.image-viewer-stage__image {
    position: absolute;
    top: 50%;
    left: 50%;
    max-width: none;
    width: auto;
    max-height: none;
    transform: translate(-50%, -50%) scale(1);
    transform-origin: center center;
    user-select: none;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

body.dark-mode .image-viewer-stage,
[data-theme="dark"] .image-viewer-stage {
    border-color: rgba(255, 255, 255, 0.10);
    background:
        radial-gradient(circle at top, rgba(255, 214, 122, 0.12), transparent 34%),
        linear-gradient(180deg, rgba(27, 31, 44, 0.98) 0%, rgba(20, 24, 37, 0.98) 100%);
}

@media (max-width: 768px) {
    .upload-btn-text-icon {
        padding: 0.5rem 1rem;
        font-size: 13px;
        min-height: 40px;
        min-width: 110px;
    }

    .upload-btn-text-icon i {
        font-size: 13px;
    }

    .upload-btn-text-icon span {
        font-size: 13px;
    }

    .image-upload-container {
        gap: 0.75rem;
    }

    .question-images {
        margin-top: 0.7rem;
    }

    .question-inline-attachments {
        margin-bottom: 0.85rem;
    }

    .question-attachment-thumb {
        width: 60px;
        height: 60px;
    }

    .image-viewer-stage {
        min-height: 56vh;
        border-radius: 18px;
    }
}

.image-upload-container {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
}

.image-upload-container input[type="file"] {
    flex: 1;
    min-width: 200px;
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background-color: var(--background-color);
    transition: var(--transition);
}

.image-upload-container input[type="file"]:focus {
    border-color: var(--primary-color);
}

.uploaded-images {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

.uploaded-image-item {
    position: relative;
    width: 120px;
    height: 120px;
    border: none;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.06);
}

.uploaded-image-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
    box-shadow: none;
}

.uploaded-image-item .remove-image {
    position: absolute;
    top: 5px;
    right: 5px;
    background-color: rgba(255, 59, 48, 0.8);
    color: white;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    cursor: pointer;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.uploaded-image-item .remove-image:hover {
    background-color: rgba(255, 59, 48, 1);
}

.form-actions {
    margin-top: 1.5rem;
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
}


.password-input {
    position: relative;
}

.password-toggle {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 1rem;
    padding: 0.25rem;
    border-radius: 0.25rem;
    transition: var(--transition);
}

.password-toggle:hover {
    color: var(--primary-color);
    background-color: rgba(52, 152, 219, 0.05);
}


.filter-select {
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background-color: var(--background-color);
    font-size: 0.9rem;
    outline: none;
    transition: var(--transition);
}

.filter-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}

.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.modal.active {
    opacity: 1;
    visibility: visible;
}

.modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(29, 29, 31, 0.22);
    cursor: pointer;
}

.modal-content {
    position: relative;
    background-color: rgba(255, 255, 255, 0.88);
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    transform: none;
    transition: opacity 0.25s ease, box-shadow 0.3s ease, background-color 0.3s ease;
    border: 1px solid rgba(29, 29, 31, 0.08);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.78));
}

.modal.active .modal-content {
    transform: none;
    opacity: 1;
}

.modal-large {
    max-width: 800px;
}

.modal-header {
    padding: 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255, 255, 255, 0.1);
}

.modal-header h3 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
}

.modal-close {
    background: rgba(255, 59, 48, 0.1);
    border: 1px solid rgba(255, 59, 48, 0.2);
    font-size: 1.2rem;
    cursor: pointer;
    color: rgba(255, 59, 48, 0.9);
    padding: 0;
    border-radius: 50%;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.modal-close:hover {
    background: rgba(255, 59, 48, 0.9);
    color: #fff;
    border-color: rgba(255, 59, 48, 1);
}

.modal-body {
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.05);
}

.modal-footer {
    padding: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    background: rgba(255, 255, 255, 0.05);
}

.modal-form {
    margin: 0;
}


.modal-body .form-group input,
.modal-body .form-group textarea,
.modal-body .form-group select {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(29, 29, 31, 0.08);
    color: var(--text-primary);
    transition: all 0.2s ease;
}

.modal-body .form-group input:focus,
.modal-body .form-group textarea:focus,
.modal-body .form-group select:focus {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
}

.modal-body .form-group label {
    color: var(--text-primary);
    font-weight: 500;
    margin-bottom: 0.5rem;
}

#editQuestionModal .modal-content {
    max-width: 600px;
}

.feedback-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem 0;
}

.feedback-icon {
    font-size: 4rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.feedback-message {
    font-size: 1.1rem;
    font-weight: 500;
    line-height: 1.5;
}

.modal-content.modal-success {
    border: 1px solid rgba(52, 199, 89, 0.3);
    background: linear-gradient(135deg, rgba(52, 199, 89, 0.05), rgba(52, 199, 89, 0.02));
}

.modal-content.modal-success .modal-header {
    background: rgba(52, 199, 89, 0.1);
    border-bottom: 1px solid rgba(52, 199, 89, 0.2);
}

.modal-content.modal-success .feedback-icon {
    color: var(--success-color);
}

.modal-content.modal-error {
    border: 1px solid rgba(255, 59, 48, 0.3);
    background: linear-gradient(135deg, rgba(255, 59, 48, 0.05), rgba(255, 59, 48, 0.02));
}

.modal-content.modal-error .modal-header {
    background: rgba(255, 59, 48, 0.1);
    border-bottom: 1px solid rgba(255, 59, 48, 0.2);
}

.modal-content.modal-error .feedback-icon {
    color: var(--danger-color);
}

.modal-content.modal-info {
    border: 1px solid rgba(0, 122, 255, 0.3);
    background: linear-gradient(135deg, rgba(0, 122, 255, 0.05), rgba(0, 122, 255, 0.02));
}

.modal-content.modal-info .modal-header {
    background: rgba(0, 122, 255, 0.1);
    border-bottom: 1px solid rgba(0, 122, 255, 0.2);
}

.modal-content.modal-info .feedback-icon {
    color: #007AFF;
}


/* Modal centering - keep flex layout */
.modal {
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-content {
    transform: none;
    opacity: 0;
    transition: opacity 0.25s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

.modal.active .modal-content {
    transform: none;
    opacity: 1;
}


.welcome-section {
    text-align: center;
    padding: 4rem 2rem;
    background: transparent;
    color: var(--text-primary);
    border-radius: var(--border-radius);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 3rem;
    overflow: hidden;
}

.welcome-section::before {
    content: none;
}

.welcome-content {
    position: relative;
    z-index: 1;
}

.welcome-title {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    background-clip: text;
    letter-spacing: -0.02em;
    line-height: 1.2;
    animation: titleGlow 3s ease-in-out infinite;
}

.welcome-title .highlight {
    background: linear-gradient(135deg, #f093b0 0%, #ff6b3d 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

@keyframes titleGlow {

    0%,
    100% {
        text-shadow: 0 0 20px rgba(102, 126, 234, 0.8);
        text-shadow: 0 -20px 20px rgba(102, 126, 234, 0);
    }

    50% {
        text-shadow: 0 0 20px rgba(102, 126, 234, 0.8);
        text-shadow: 0 -20px 20px rgba(102, 126, 234, 0);
    }
}

.welcome-subtitle {
    font-size: 1.5rem;
    font-weight: 500;
    opacity: 0.85;
    letter-spacing: 0.1em;
    margin-top: 1rem;
}

.animated-gradient {
    background: transparent;
}


.bottom-section {
    display: grid;
    grid-template-columns: 2fr 3fr;
    gap: 2rem;
    margin-bottom: 3rem;
    align-items: start;
}

.left-panel {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    height: 100%;
}

.right-panel {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    height: 100%;
}

.left-panel .card {
    display: flex;
    flex-direction: column;
}

.left-panel .card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
}

@media (max-width: 802px) {
    .bottom-section {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .left-panel {
        order: 1;
    }

    .right-panel {
        order: 2;
    }
}

.jump-to-question {
    text-align: center;
}

.jump-to-question p {
    margin-bottom: 0.75rem;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.jump-form {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    justify-content: center;
    align-items: stretch;
}

.jump-input {
    min-width: 150px;
    padding: 0.5rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background-color: #fff;
    color: #666;
    font-size: 0.85rem;
    transition: var(--transition);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
}

.jump-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1), inset 0 1px 3px rgba(0, 0, 0, 0.05);
}

.jump-message {
    margin-top: 0.5rem;
    font-weight: 500;
    text-align: center;
    min-height: 1.25rem;
    font-size: 0.8rem;
}

.jump-message.success {
    color: var(--success-color);
}

.jump-message.error {
    color: var(--danger-color);
}


.jump-to-question-card {
    border-radius: var(--border-radius);
    overflow: hidden;
}

.jump-to-question-card .card-header {
    padding: 0.5rem 1rem;
    border-bottom: none;
    background: rgba(255, 255, 255, 0.2);
}

.jump-to-question-card .card-header h3 {
    margin: 0;
    font-size: 1rem;
}

.jump-to-question-card .card-body {
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.1));
}

.image-preview-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.82);
    padding: 20px;
    box-sizing: border-box;
}

.image-preview-backdrop {
    position: absolute;
    inset: 0;
}

.image-preview-shell {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    width: min(96vw, 1320px);
    height: min(92vh, 980px);
    padding: 1rem;
    border-radius: 24px;
    background: rgba(14, 14, 16, 0.86);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
}

.image-preview-toolbar {
    display: flex;
    justify-content: flex-end;
    gap: 0.55rem;
}

.image-preview-btn {
    width: 42px;
    height: 42px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}

.image-preview-btn:hover {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.24);
    transform: translateY(-1px);
}

.image-preview-stage {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    border-radius: 18px;
    background:
        linear-gradient(45deg, rgba(255, 255, 255, 0.03) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(255, 255, 255, 0.03) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(255, 255, 255, 0.03) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(255, 255, 255, 0.03) 75%);
    background-size: 24px 24px;
    background-position: 0 0, 0 12px, 12px -12px, -12px 0;
}

.image-preview-viewport {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    touch-action: none;
    cursor: zoom-in;
}

.image-preview-image {
    position: absolute;
    top: 50%;
    left: 50%;
    max-width: min(92vw, 1800px);
    max-height: calc(92vh - 160px);
    transform: translate(-50%, -50%) scale(1);
    transform-origin: center center;
    user-select: none;
    border-radius: 14px;
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.45);
    background: rgba(255, 255, 255, 0.04);
}

.image-preview-hint {
    text-align: center;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.88rem;
}

.image-preview-open {
    overflow: hidden;
}

@media (max-width: 768px) {
    .image-preview-shell {
        width: 100vw;
        height: 100vh;
        padding: 0.85rem;
        border-radius: 0;
    }

    .image-preview-stage {
        border-radius: 14px;
    }

    .image-preview-btn {
        width: 40px;
        height: 40px;
    }
}

.jump-to-question-card .jump-form {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 0;
    justify-content: center;
    align-items: stretch;
}

.jump-to-question-card .jump-input {
    min-width: 120px;
    padding: 0.4rem 0.6rem;
    font-size: 0.8rem;
}

.jump-to-question-card .btn {
    padding: 0.4rem 0.8rem;
    font-size: 0.8rem;
    min-height: auto;
}

.jump-to-question-card .btn:hover {
    transform: scale(1.02);
    transition: transform 0.2s ease;
}

.jump-to-question-card .btn:active {
    transform: scale(0.98);
}

@media (max-width: 768px) {
    .jump-to-question-card .card-header {
        padding: 0.625rem 1rem;
    }

    .jump-to-question-card .card-header h3 {
        font-size: 1rem;
    }

    .jump-to-question-card .card-body {
        padding: 0.875rem 1rem;
    }

    .jump-to-question-card .jump-form {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.75rem;
        justify-content: center;
    }

    .jump-to-question-card .jump-input {
        min-width: 120px;
        width: 160px;
        padding: 0.5rem 1rem;
    }
}


.daily-challenge-card {
    border-radius: var(--border-radius);
    overflow: hidden;
}

.dc-card-inner {
    display: flex;
    flex-direction: column;
}

.dc-card-top {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 1rem 0.5rem;
}

.dc-icon-wrap {
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    background: linear-gradient(135deg, #ff9500, #ff6b00);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.dc-label {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-color);
}

.dc-status-badge {
    margin-left: auto;
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    white-space: nowrap;
}

.dc-status-pending {
    background: rgba(255, 149, 0, 0.12);
    color: var(--warning-color);
}

.dc-status-correct {
    background: rgba(52, 199, 89, 0.12);
    color: var(--success-color);
}

.dc-status-wrong {
    background: rgba(255, 59, 48, 0.12);
    color: var(--danger-color);
}

.dc-card-body {
    padding: 0.25rem 1rem 0.6rem;
}

.dc-title {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-color);
    margin-bottom: 0.45rem;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.dc-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.dc-score {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.dc-score i {
    color: var(--warning-color);
    margin-right: 0.15rem;
}

.dc-action-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.65rem 1rem;
    background: linear-gradient(135deg, #ff9500, #ff6b00);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.15s;
}

.dc-action-btn:hover {
    opacity: 0.9;
}

.dc-action-btn:active {
    transform: scale(0.98);
}

.dc-action-btn.dc-completed {
    background: linear-gradient(135deg, var(--success-color), #2aa84a);
}

.dc-action-btn i {
    transition: transform 0.2s;
}

.dc-action-btn:hover i {
    transform: translateX(3px);
}

@media (max-width: 768px) {
    .dc-card-top {
        padding: 0.75rem 0.85rem 0.4rem;
    }

    .dc-card-body {
        padding: 0.2rem 0.85rem 0.5rem;
    }

    .dc-action-btn {
        padding: 0.6rem 0.85rem;
    }
}

.bottom-left-section {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.bottom-right-section {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.recent-activities-card {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.activities-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    height: auto;
    max-height: none;
    overflow-y: visible;
    padding-right: 0;
}


.activity-item {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 0.75rem;
    background-color: transparent !important;
    background: transparent !important;
    border-radius: var(--border-radius);
    border: none;
    transition: none !important;
    font-size: 0.95rem;
    overflow: hidden;
    transform: none !important;
    box-shadow: none !important;
}

.activity-item:hover {
    transform: none !important;
    box-shadow: none !important;
    border-color: inherit !important;
    background-color: transparent !important;
    background: transparent !important;
}

.revoke-btn {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    background: rgba(255, 59, 48, 0.1);
    border: 1px solid rgba(255, 59, 48, 0.3);
    border-radius: 6px;
    color: #ff3b30;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    margin-left: auto;
    align-self: center;
}

.revoke-btn:hover {
    background: rgba(255, 59, 48, 0.2);
    border-color: #ff3b30;
}

.revoke-btn i {
    margin-right: 0.25rem;
}


.activity-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: rgba(0, 113, 227, 0.1);
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    flex-shrink: 0;
    transition: all 0.2s ease;
}



.activity-content {
    flex: 1;
    min-width: 0;
}

.activity-title {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.125rem;
    font-size: 0.9rem;
}


.activity-description {
    color: var(--text-secondary);
    margin-bottom: 0.375rem;
    font-size: 0.85rem;
    line-height: 1.3;
}


.activity-time {
    color: var(--text-secondary);
    font-size: 0.75rem;
    opacity: 0.8;
}


.score-operator {
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: normal;
}

.source-badge {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
    vertical-align: middle;
}

.daily-challenge-badge {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
}

.activity-description strong {
    color: var(--primary-color);
}


.checkin-section {
    display: flex;
    align-items: center;
    justify-content: center;
}

.checkin-section .card {
    width: 100%;
    margin-bottom: 0;
}

.checkin-info {
    text-align: center;
}

.checkin-stats {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 1.5rem;
}

.checkin-action {
    margin-top: 1.5rem;
}

.checkin-message {
    margin-top: 1rem;
    font-size: 1rem;
    font-weight: 500;
}


.intro-container {
    display: inline-flex;
    align-items: center;
    margin: 1rem 0;
}


.welcome-intro {
    font-size: 1.125rem;
    opacity: 0.9;
    min-height: 1.5rem;
    margin: 0;
    display: inline;
}


.typing-indicator {
    display: inline-block;
    width: 8px;
    height: 1.5rem;
    background-color: white;
    margin-left: 4px;
    animation: blink 0.7s infinite;
    vertical-align: text-bottom;
    display: none;

    flex-shrink: 0;
    align-self: flex-start;
    margin-top: 0.25rem;
}



@media (max-width: 768px) {
    .top-section {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .welcome-section {
        margin-bottom: 0;
    }

    .checkin-stats {
        gap: 1rem;
    }
}


.score-editor-container {
    max-width: 800px;
    margin: 0 auto;
}

.admin-dashboard-compact {
    max-width: 1180px;
    margin: 0 auto;
    padding: 1.25rem;
}

.admin-page-hero {
    margin-bottom: 1.25rem;
    padding: 1.4rem 1.5rem;
    border-radius: 24px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background:
        radial-gradient(circle at top left, rgba(255, 244, 214, 0.9), transparent 42%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.92) 0%, rgba(246, 250, 255, 0.88) 100%);
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.08);
}

.admin-page-copy {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.admin-page-eyebrow {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    background: rgba(179, 120, 26, 0.12);
    color: #9a6510;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.admin-page-title {
    margin: 0;
    font-size: clamp(1.55rem, 2.6vw, 2.2rem);
    line-height: 1.15;
}

.admin-page-intro {
    margin: 0;
    max-width: 60ch;
    color: var(--text-secondary);
    line-height: 1.6;
}

.admin-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(280px, 0.9fr);
    gap: 1.25rem;
    align-items: start;
}

.admin-card-approval,
.admin-card-tags {
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.08);
}

.admin-card-approval .card-header,
.admin-card-tags .card-header {
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    padding-bottom: 1rem;
}

.admin-card-approval .card-body,
.admin-card-tags .card-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.admin-card-tags {
    position: sticky;
    top: 88px;
}

.approval-controls {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.approval-filters {
    display: grid;
    grid-template-columns: minmax(150px, 180px) minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: center;
}

.submissions-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.submission-item {
    padding: 1.1rem 1.15rem;
    border-radius: 20px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(248, 250, 255, 0.92) 100%);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
}

.submission-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 0.8rem;
}

.submission-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem;
}

.submission-meta .problem-no {
    font-weight: 700;
    color: var(--text-primary);
}

.submission-time,
.reviewed-at {
    color: var(--text-secondary);
    font-size: 0.92rem;
}

.submission-content {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.submission-content .question-title {
    margin: 0;
    color: var(--text-primary);
    line-height: 1.5;
}

.submission-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.submission-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.32rem 0.68rem;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.05);
    color: var(--text-secondary);
    font-size: 0.84rem;
    font-weight: 600;
}

.submission-chip-score {
    background: rgba(32, 129, 226, 0.12);
    color: #1b5f99;
}

.submission-chip-best {
    background: rgba(40, 167, 69, 0.12);
    color: #1c7c3a;
}

.answer-content {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.answer-text {
    padding: 0.9rem 1rem;
    border-radius: 16px;
    background: rgba(15, 23, 42, 0.04);
    line-height: 1.65;
    white-space: pre-wrap;
    word-break: break-word;
}

.answer-image-section {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.answer-image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 140px));
    gap: 0.75rem;
}

.answer-image-link {
    display: block;
    overflow: hidden;
    border-radius: 16px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: rgba(15, 23, 42, 0.03);
}

.answer-image-link img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.grading-section {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px dashed rgba(15, 23, 42, 0.12);
}

.grade-inputs {
    display: grid;
    grid-template-columns: minmax(150px, 220px) minmax(0, 1fr);
    gap: 0.9rem;
}

.grade-field {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.grade-field label {
    font-weight: 600;
    color: var(--text-primary);
}

.grade-score-input,
.grade-comment-input {
    width: 100%;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.94);
    transition: var(--transition);
}

.grade-score-input {
    min-height: 48px;
    padding: 0 0.95rem;
    font-weight: 600;
}

.grade-comment-input {
    min-height: 118px;
    padding: 0.85rem 0.95rem;
    resize: vertical;
    line-height: 1.6;
}

.grade-score-input:focus,
.grade-comment-input:focus {
    outline: none;
    border-color: rgba(32, 129, 226, 0.52);
    box-shadow: 0 0 0 4px rgba(32, 129, 226, 0.12);
}

.submission-actions-row {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.9rem;
}

.no-submissions {
    padding: 2.4rem 1rem;
    border-radius: 18px;
    border: 1px dashed rgba(15, 23, 42, 0.12);
    background: rgba(255, 255, 255, 0.68);
    text-align: center;
    color: var(--text-secondary);
}

body.dark-mode .admin-page-hero,
[data-theme="dark"] .admin-page-hero {
    border-color: rgba(226, 232, 240, 0.08);
    background:
        radial-gradient(circle at top left, rgba(160, 104, 25, 0.18), transparent 42%),
        linear-gradient(135deg, rgba(24, 30, 44, 0.92) 0%, rgba(18, 24, 37, 0.94) 100%);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.22);
}

body.dark-mode .admin-page-eyebrow,
[data-theme="dark"] .admin-page-eyebrow {
    background: rgba(245, 158, 11, 0.16);
    color: #ffd27f;
}

body.dark-mode .admin-card-approval,
body.dark-mode .admin-card-tags,
body.dark-mode .submission-item,
[data-theme="dark"] .admin-card-approval,
[data-theme="dark"] .admin-card-tags,
[data-theme="dark"] .submission-item {
    border-color: rgba(226, 232, 240, 0.08);
    background: linear-gradient(180deg, rgba(19, 26, 40, 0.96) 0%, rgba(15, 21, 32, 0.92) 100%);
    box-shadow: 0 16px 30px rgba(0, 0, 0, 0.22);
}

body.dark-mode .submission-chip,
[data-theme="dark"] .submission-chip {
    background: rgba(148, 163, 184, 0.14);
    color: rgba(226, 232, 240, 0.82);
}

body.dark-mode .submission-chip-score,
[data-theme="dark"] .submission-chip-score {
    background: rgba(56, 189, 248, 0.16);
    color: #9bdcff;
}

body.dark-mode .submission-chip-best,
[data-theme="dark"] .submission-chip-best {
    background: rgba(74, 222, 128, 0.16);
    color: #98f3b4;
}

body.dark-mode .answer-text,
[data-theme="dark"] .answer-text {
    background: rgba(148, 163, 184, 0.10);
}

body.dark-mode .answer-image-link,
[data-theme="dark"] .answer-image-link {
    border-color: rgba(226, 232, 240, 0.08);
    background: rgba(148, 163, 184, 0.08);
}

body.dark-mode .grade-score-input,
body.dark-mode .grade-comment-input,
[data-theme="dark"] .grade-score-input,
[data-theme="dark"] .grade-comment-input {
    border-color: rgba(226, 232, 240, 0.10);
    background: rgba(15, 23, 42, 0.78);
    color: var(--text-primary);
}

body.dark-mode .no-submissions,
[data-theme="dark"] .no-submissions {
    border-color: rgba(226, 232, 240, 0.10);
    background: rgba(15, 23, 42, 0.55);
}

.users-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-height: 600px;
    overflow-y: auto;
    padding: 0.5rem;
}

.search-input {
    padding: 0.5rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background-color: var(--secondary-color);
    color: var(--text-primary);
    font-size: 0.9rem;
    min-width: 200px;
    transition: var(--transition);
}

.search-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}

.user-score-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem;
    background-color: var(--secondary-color);
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    transition: var(--transition);
}

.user-score-item:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.user-info {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.username {
    font-weight: 600;
    font-size: 1.125rem;
    color: var(--text-primary);
}

.user-role {
    padding: 0.25rem 0.75rem;
    border-radius: 0.3rem;
    font-size: 0.85rem;
    font-weight: 500;
    text-transform: capitalize;
}

.user-role.owner {
    background-color: rgba(119, 52, 219, 0.1);
    color: var(--accent-purple);
}

.user-role.admin {
    background-color: rgba(255, 77, 79, 0.1);
    color: var(--danger-color);
}

.user-role.user {
    background-color: rgba(52, 152, 219, 0.1);
    color: var(--primary-color);
}

.score-edit {
    display: flex;
    align-items: center;
    gap: 1rem;
}


.score-split {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.score-field {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.score-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.score-total {
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
}

.score-input {
    width: 92px;
    padding: 0.45rem 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: 1rem;
    text-align: center;
    transition: var(--transition);
}

.score-input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}

.save-message {
    font-size: 0.9rem;
    font-weight: 500;
    margin-left: 0.5rem;
    min-width: 120px;
}

.no-users {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-secondary);
}

.no-users i {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
    display: flex;
}

.loading {
    text-align: center;
    padding: 2rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.loading i {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}


@media (max-width: 768px) {
    .user-score-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .score-edit {
        width: 100%;
        justify-content: space-between;
    }

    .score-input {
        flex: 1;
        min-width: auto;
    }
}



.welcome-content h1 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    font-weight: 700;
}

.welcome-content p {
    font-size: 1.125rem;
    opacity: 0.9;
    max-width: 600px;
    margin: 0 auto;
}


.features-section {
    margin-bottom: 3rem;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

.feature-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2rem;
    background-color: var(--card-background);
    border: none;
    border-radius: 14px;
    transition: all 0.2s ease;
    text-decoration: none;
    color: var(--text-primary);
    box-shadow: none;
    overflow: hidden;
}

.feature-icon {
    width: 64px;
    height: 64px;
    background-color: rgba(0, 113, 227, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    color: var(--primary-color);
    margin-bottom: 1rem;
    transition: all 0.2s ease;
}

.feature-card:hover .feature-icon {
    background-color: rgba(0, 113, 227, 0.1);
    color: var(--primary-color);
    transform: none;
}

.feature-card h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}

.feature-card p {
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin: 0;
}

.auth-container {
    max-width: 400px;
    margin: 0 auto;
    padding: 2rem 0;
}


.auth-page .navbar-toggle {
    display: none !important;
}

.auth-card {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid var(--border-color);

    border-right: 1px solid var(--border-right);
    border-bottom: 1px solid var(--border-bottom);
    border-radius: var(--border-radius);
    padding: 2rem;
    box-shadow: var(--shadow-lg);
    position: relative;
    z-index: 2;
    overflow: hidden;
}

.auth-header {
    text-align: center;
    margin-bottom: 2rem;
}

.auth-header h2 {
    margin: 0 0 10px;
    font-size: 24px;
    font-weight: 600;
    color: #fff;
    letter-spacing: 1px;
    position: relative;
}

.auth-header p {
    margin: 0;
    color: #fff;
    opacity: 0.8;
}

.auth-form {
    margin-bottom: 1.5rem;
}

.auth-footer {
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin-top: 1.5rem;
}

.auth-link {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 500;
    transition: var(--transition);
}

.auth-link:hover {
    text-decoration: underline;
}

.stat-item {
    text-align: center;
    padding: 1rem;
}

.stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 0.25rem;
    display: flex;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

.stat-label {
    font-size: 0.9rem;
    color: var(--text-secondary);
    display: flex;
    line-height: 1.15;
}

.checkin-container {
    max-width: 800px;
    margin: 0 auto;
}

.checkin-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.checkin-action {
    text-align: center;
    margin-bottom: 2rem;
    padding: 2rem;
    background-color: rgba(52, 152, 219, 0.05);
    border-radius: var(--border-radius);
    border: 1px dashed var(--border-color);
    overflow: hidden;
}

.checkin-message {
    margin-top: 1rem;
    font-size: 1rem;
    font-weight: 500;
}

.checkin-rules {
    background-color: var(--secondary-color);
    padding: 1.5rem;
    border-radius: var(--border-radius);
    margin-top: 2rem;
    overflow: hidden;
}

.checkin-rules h4 {
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 1.125rem;
}

.checkin-rules ul {
    margin: 0;
    padding-left: 1.25rem;
}

.checkin-rules li {
    margin-bottom: 0.5rem;
    color: var(--text-secondary);
}


.checkin-history {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.checkin-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background-color: var(--secondary-color);
    border-radius: var(--border-radius);
    font-size: 0.95rem;
    overflow: hidden;
}

.fortune-container {
    margin-top: 1rem;
    padding: 1.5rem;
    background-color: rgba(0, 113, 227, 0.05);
    border-radius: var(--border-radius);
    border: 1px solid rgba(0, 113, 227, 0.1);
    overflow: hidden;
}

.fortune-container h4 {
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 1.125rem;
    color: var(--primary-color);
    text-align: center;
}

.fortune-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(0, 113, 227, 0.1);
}

.fortune-item:last-child {
    border-bottom: none;
}

.fortune-label {
    font-weight: 500;
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.fortune-value {
    font-weight: 600;
    font-size: 1rem;
}

.fortune-value.good {
    color: var(--success-color);
}

.fortune-value.bad {
    color: var(--danger-color);
}

.checkin-date {
    font-weight: 500;
    color: var(--text-primary);
}

.checkin-status {
    color: var(--success-color);
    font-weight: 500;
}


.forum-container {
    max-width: 1000px;
    margin: 0 auto;
}

.forum-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.forum-header h2 {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.forum-posts {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.forum-post {
    background-color: var(--background-color);
    border-bottom: 1px solid var(--border-color);
    padding: 1rem 1.5rem;
    transition: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    width: 100%;
    animation: none !important;
    transform: none !important;
}

.forum-post:active,
.forum-post:focus,
.forum-post:hover {
    background-color: var(--background-color);
    border-color: var(--border-color);
    box-shadow: none !important;
    transform: none !important;
    transition: none !important;
}

.post-header {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.post-title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--primary-color);
    line-height: 1.4;
}

.post-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.post-meta .post-author {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--primary-color);
}

.post-content {
    margin-bottom: 0.75rem;
    line-height: 1.5;
    color: var(--text-primary);
    font-size: 0.95rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
}

.post-content.expanded {
    -webkit-line-clamp: unset;
    line-clamp: unset;
    height: auto;
}

.post-footer {
    display: flex;
    gap: 0.75rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
    justify-content: flex-end;
    align-items: center;
}

.no-posts {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 1rem;
    padding: 3rem 1rem;
    color: var(--text-secondary);
}

.no-posts i {
    font-size: 3rem;
    opacity: 0.5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    width: 1em;
    height: 1em;
}



.questions-container {
    max-width: 1000px;
    margin: 0 auto;
}

.questions-grid {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.questions-search-bar {
    margin-bottom: 1.5rem;
}

.search-box {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.search-input {
    flex: 1;
    min-width: 200px;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background-color: #fff;
    color: #666;
    font-size: 0.95rem;
    transition: var(--transition);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
}

.search-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1), inset 0 1px 3px rgba(0, 0, 0, 0.05);
}


.filter-select {
    padding: 0.75rem 1.75rem 0.75rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background-color: #fff;
    color: #666;
    font-size: 0.95rem;
    transition: var(--transition);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23666' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.75rem center;
    background-repeat: no-repeat;
    background-size: 16px 16px;
}

.filter-select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1), inset 0 1px 3px rgba(0, 0, 0, 0.05);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23666' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
}

.question-card {
    background-color: var(--background-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}


.question-row {
    display: grid;
    grid-template-columns: 40px auto 1fr auto;
    align-items: center;
    padding: 0.75rem 1.5rem;
    background-color: var(--background-color);
    border-bottom: 1px solid var(--border-color);
    font-size: 0.95rem;
    gap: 1rem;
}

.question-row-check {
    display: none;
}

.question-row-status {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-size: 1rem;
    width: 20px;
}

.status-correct {
    color: #22c55e;
}

.status-wrong {
    color: #ef4444;
}

.status-pending {
    color: var(--text-secondary);
}

.question-row-title-module {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    overflow: hidden;
    justify-content: flex-start;

}

.question-row-title-module:hover {
    color: var(--primary-color);
}

.question-problem-no {
    font-weight: 700;
    color: var(--text-primary);
    font-size: 1rem;
    min-width: 80px;
}

.question-title-text {
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.2;
    flex: 1;
}

.question-row-tags {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    align-self: center;
    gap: 0.5rem;
    margin: 0;
    margin-left: auto;
    white-space: nowrap;
    flex-wrap: nowrap;
}


.category-tag {
    background-color: var(--tag-tone-bg, var(--secondary-color));
    border: 1px solid var(--tag-tone-border, transparent);
    color: var(--tag-tone-text, var(--text-secondary));
    padding: 0.25rem 0.75rem;
    border-radius: var(--border-radius);
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1;
    display: inline-flex;
    align-items: center;
}

.question-topic-tag {
    padding: 0.25rem 0.75rem;
    border-radius: var(--border-radius);
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1;
    display: inline-flex;
    align-items: center;
}

/* 标签分类固定颜色样式 - 亮色模式 */
.question-topic-tag.tag-category-algebra {
    background-color: #5b8def;
    border: 1px solid #2f63c9;
    color: #ffffff;
}

.question-topic-tag.tag-category-geometry {
    background-color: #53b97b;
    border: 1px solid #2f8854;
    color: #ffffff;
}

.question-topic-tag.tag-category-calculus {
    background-color: #f0a24f;
    border: 1px solid #c97c26;
    color: #ffffff;
}

.question-topic-tag.tag-category-statistics {
    background-color: #9a7cf2;
    border: 1px solid #6f54c7;
    color: #ffffff;
}

.question-topic-tag.tag-category-discrete {
    background-color: #3fb7b2;
    border: 1px solid #238b87;
    color: #ffffff;
}

.question-topic-tag.tag-category-special {
    background-color: #ef6c8f;
    border: 1px solid #c6496b;
    color: #ffffff;
}

.question-topic-tag.tag-category-neutral {
    background-color: #7d8aa3;
    border: 1px solid #5c6880;
    color: #ffffff;
}

.question-difficulty {
    padding: 0.25rem 0.75rem;
    border-radius: var(--border-radius);
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}



.question-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.question-title {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0 0 0.75rem;
    color: var(--text-primary);
}


.question-row-info {
    flex: 1;
    min-width: 0;
}

.question-row-title {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0 0 0.75rem;
    color: var(--text-primary);
    line-height: 1.4;
}

.question-problem-no {
    color: var(--primary-color);
    font-weight: 700;
    font-size: 1rem;
    margin-right: 0.25rem;
    display: inline-block;
}

.question-meta {
    display: flex;
    gap: 1.5rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.question-row-meta {
    display: flex;
    gap: 1.5rem;
    font-size: 0.9rem;
    color: var(--text-secondary);
    flex-wrap: wrap;
}

.question-difficulty {
    padding: 0.25rem 0.75rem;
    border-radius: var(--border-radius);
    font-weight: 500;
    font-size: 0.75rem;
    text-transform: capitalize;
    margin-right: 0.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.question-difficulty.easy {
    background-color: rgba(52, 199, 89, 0.1);
    color: var(--success-color);
}

.question-difficulty.medium {
    background-color: rgba(255, 149, 0, 0.1);
    color: var(--warning-color);
}

.question-difficulty.hard {
    background-color: rgba(255, 59, 48, 0.1);
    color: var(--danger-color);
}

.question-content {
    flex: 1;
    margin-bottom: 1rem;
    line-height: 1.6;
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.question-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
}

.question-score {
    color: var(--primary-color);
    font-weight: 600;
}

.no-questions {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 1rem;
    padding: 3rem 1rem;
    color: var(--text-secondary);
}

.no-questions i {
    font-size: 3rem;
    opacity: 0.5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    width: 1em;
    height: 1em;
}

.columns-container {
    max-width: 900px;
    margin: 0 auto;
}

.columns-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.columns-header h2 {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.columns-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}




.ranking-container {
    max-width: 800px;
    margin: 0 auto;
}

.ranking-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.ranking-item {
    display: grid;
    grid-template-columns: 80px 1fr auto;
    align-items: center;
    padding: 1rem 1.5rem;
    background-color: var(--background-color);
    border-bottom: 1px solid var(--border-color);
    font-size: 1rem;
}

.ranking-item:nth-child(1) {
    background-color: rgba(255, 214, 10, 0.1);
    border-color: #ffd60a;
}

.ranking-item:nth-child(2) {
    background-color: rgba(174, 174, 178, 0.1);
    border-color: #aeaeb2;
}

.ranking-item:nth-child(3) {
    background-color: rgba(251, 140, 0, 0.1);
    border-color: #fb8c00;
}

.ranking-rank {
    font-weight: 700;
    color: var(--text-secondary);
    margin-right: 0;
}

.ranking-username {
    font-weight: 500;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.role-tag {
    padding: 0.2rem 0.4rem;
    border-radius: 2px;
    font-weight: 600;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    color: white;
    margin-left: 0.25rem;
}

.role-tag.owner {
    background-color: var(--accent-purple);
}

.role-tag.admin {
    background-color: var(--danger-color);
}

.ranking-score {
    display: flex;
    align-items: flex-end;
}

.ranking-score .score {
    font-weight: 700;
    color: var(--text-primary);
    font-size: 1.125rem;
}

.no-ranking {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-secondary);
}

.no-ranking i {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
    display: block;
}

.profile-container {
    max-width: 900px;
    margin: 0 auto;
}

.profile-header-card {
    margin-bottom: 2rem;
}

.profile-account-controls {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-top: 0.85rem;
}

.profile-account-controls[hidden] {
    display: none;
}

.profile-account-status {
    color: var(--text-secondary);
    font-size: 0.82rem;
    font-weight: 650;
}

.profile-account-status.is-banned {
    color: #b42318;
}

.profile-account-action {
    min-height: 34px;
    padding: 0.4rem 0.85rem;
    border: 1px solid rgba(180, 35, 24, 0.22);
    border-radius: 12px;
    background: rgba(180, 35, 24, 0.08);
    color: #9f1f16;
    font: inherit;
    font-size: 0.84rem;
    font-weight: 700;
    cursor: pointer;
}

.profile-account-action.is-unban {
    border-color: rgba(2, 122, 72, 0.2);
    background: rgba(2, 122, 72, 0.08);
    color: #027a48;
}

.profile-account-action:disabled {
    cursor: wait;
    opacity: 0.58;
}

.profile-header {
    display: flex;
    align-items: center;
    gap: 2rem;
    padding: 2rem;
    background: linear-gradient(135deg, rgba(52, 152, 219, 0.05) 0%, rgba(119, 52, 219, 0.02) 100%);
}

.profile-avatar {
    position: relative;
    flex-shrink: 0;
    width: 120px;
    height: 120px;
}

.avatar-large,
.avatar-large img,
.profile-avatar:hover .avatar-large,
.profile-avatar:hover .avatar-large img {
    transform: none !important;
    transition: none !important;
}

.avatar-large {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background-color: var(--primary-color);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
    overflow: hidden;
}

.change-avatar-btn {
    position: absolute;
    top: calc(50% - 120px);
    left: 50%;
    transform: translate(-50%, -50%) !important;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: transparent;
    border: none;
    color: #333;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    transition: none !important;
    box-shadow: none;
    opacity: 0;
    pointer-events: none;
    z-index: 10;
}

.profile-avatar.is-own-profile:hover .change-avatar-btn,
.profile-avatar.is-own-profile:active .change-avatar-btn {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%) !important;
}

.change-avatar-btn:hover {
    background: transparent;
    border: none;
    color: var(--primary-color);
    box-shadow: none;
    transform: translate(-50%, -50%) !important;
}

.change-avatar-btn:active,
.change-avatar-btn:focus {
    transform: translate(-50%, -50%) !important;
    outline: none;
}

#changeAvatarModal .modal-content {
    background: var(--oa-surface) !important;
    border: 1px solid var(--oa-border) !important;
    box-shadow: var(--oa-shadow-hover) !important;
}

#changeAvatarModal .modal-header,
#changeAvatarModal .modal-body,
#changeAvatarModal .modal-footer {
    background: transparent !important;
}

#changeAvatarModal .modal-header h3 {
    color: var(--text-primary) !important;
}

#changeAvatarModal .modal-close {
    color: var(--text-secondary) !important;
}

#changeAvatarModal .upload-hint {
    color: var(--text-secondary) !important;
}

.avatar-preview-container {
    display: flex;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.avatar-upload-area {
    text-align: center;
}

.avatar-upload-area .upload-hint {
    margin-top: 1rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}


.profile-page,
:root {
    --avatar-shell-bg: linear-gradient(180deg, color-mix(in srgb, var(--app-card-bg, #fffdf9) 92%, #ffffff 8%) 0%, color-mix(in srgb, var(--app-card-bg, #fffdf9) 84%, #efe3cf 16%) 100%);
    --avatar-shell-border: color-mix(in srgb, var(--app-card-border, rgba(122, 109, 88, 0.14)) 88%, rgba(122, 109, 88, 0.22) 12%);
    --avatar-shell-shadow: 0 16px 28px rgba(68, 55, 35, 0.10);
    --avatar-float-bg: color-mix(in srgb, var(--app-card-bg, #fffdf9) 90%, rgba(255, 248, 239, 0.98) 10%);
    --avatar-float-border: color-mix(in srgb, var(--app-card-border, rgba(122, 109, 88, 0.14)) 86%, rgba(122, 109, 88, 0.2) 14%);
    --avatar-upload-bg: color-mix(in srgb, var(--app-card-bg, #fffdf9) 78%, rgba(255, 250, 243, 0.72) 22%);
    --avatar-upload-border: color-mix(in srgb, var(--app-card-border, rgba(122, 109, 88, 0.14)) 84%, rgba(122, 109, 88, 0.24) 16%);
    --avatar-action-bg: color-mix(in srgb, var(--app-card-bg, #fffdf9) 94%, #ffffff 6%);
    --avatar-action-hover-bg: color-mix(in srgb, var(--app-card-bg-hover, #fffaf3) 92%, #fff9f1 8%);
    --avatar-action-border: color-mix(in srgb, var(--app-card-border, rgba(122, 109, 88, 0.14)) 88%, rgba(122, 109, 88, 0.18) 12%);
    --avatar-action-shadow: 0 8px 20px rgba(68, 55, 35, 0.08);
    --avatar-action-shadow-hover: 0 12px 24px rgba(68, 55, 35, 0.10);
    --avatar-save-bg: linear-gradient(180deg, #d4a13d 0%, #ba8c1f 100%);
    --avatar-save-border: rgba(161, 121, 28, 0.36);
    --avatar-save-shadow: 0 12px 24px rgba(166, 120, 28, 0.22);
    --avatar-save-hover-shadow: 0 14px 28px rgba(166, 120, 28, 0.26);
}

body.dark-mode {
    --avatar-shell-bg: linear-gradient(180deg, color-mix(in srgb, var(--app-card-bg, #2c2620) 90%, #4d4033 10%) 0%, color-mix(in srgb, var(--app-card-bg, #2c2620) 94%, #18120d 6%) 100%);
    --avatar-shell-border: color-mix(in srgb, var(--app-card-border, rgba(214, 196, 171, 0.10)) 82%, rgba(214, 196, 171, 0.22) 18%);
    --avatar-shell-shadow: 0 18px 30px rgba(0, 0, 0, 0.26);
    --avatar-float-bg: color-mix(in srgb, var(--app-card-bg, #2c2620) 92%, rgba(56, 47, 39, 0.98) 8%);
    --avatar-float-border: color-mix(in srgb, var(--app-card-border, rgba(214, 196, 171, 0.10)) 80%, rgba(214, 196, 171, 0.2) 20%);
    --avatar-upload-bg: color-mix(in srgb, var(--app-card-bg, #2c2620) 84%, rgba(48, 40, 33, 0.82) 16%);
    --avatar-upload-border: color-mix(in srgb, var(--app-card-border, rgba(214, 196, 171, 0.10)) 80%, rgba(214, 196, 171, 0.22) 20%);
    --avatar-action-bg: color-mix(in srgb, var(--app-card-bg, #2c2620) 92%, rgba(48, 40, 33, 0.96) 8%);
    --avatar-action-hover-bg: color-mix(in srgb, var(--app-card-bg-hover, #312a23) 90%, rgba(56, 47, 39, 0.98) 10%);
    --avatar-action-border: color-mix(in srgb, var(--app-card-border, rgba(214, 196, 171, 0.10)) 82%, rgba(214, 196, 171, 0.18) 18%);
    --avatar-action-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
    --avatar-action-shadow-hover: 0 12px 28px rgba(0, 0, 0, 0.26);
    --avatar-save-border: rgba(214, 173, 87, 0.24);
    
    /* 头像弹窗深色模式适配 - OA 变量覆盖 */
    --oa-surface: #1e1e24;
    --oa-surface-2: #25252d;
    --oa-border: rgba(255, 255, 255, 0.1);
    --oa-border-2: rgba(255, 255, 255, 0.15);
    --oa-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    --oa-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.6);
}

.profile-avatar {
    width: 128px;
    height: 128px;
}

.avatar-large {
    width: 128px;
    height: 128px;
    background: var(--avatar-shell-bg);
    color: var(--primary-color);
    border: 1px solid var(--avatar-shell-border);
    box-shadow: var(--avatar-shell-shadow);
}

.profile-avatar .avatar-large img {
    display: block;
}

.change-avatar-btn {
    top: auto;
    bottom: -10px;
    left: 50%;
    width: auto;
    min-width: 84px;
    height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    background: var(--avatar-float-bg);
    border: 1px solid var(--avatar-float-border);
    color: var(--text-primary);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    box-shadow: var(--avatar-action-shadow);
}

.change-avatar-btn:hover {
    background: var(--avatar-action-hover-bg);
    border-color: var(--avatar-float-border);
    color: var(--text-primary);
}

#changeAvatarModal .modal-dialog {
    width: min(440px, 100%);
    max-width: 440px;
    margin: auto;
}

#changeAvatarModal .modal-content {
    width: 100% !important;
    max-width: 440px !important;
    margin: 0 !important;
    border-radius: 18px !important;
    overflow: hidden;
}

#changeAvatarModal .modal-body {
    padding: 1.5rem 1.5rem 1.25rem;
}

.avatar-preview-container {
    margin-bottom: 1rem;
}

#changeAvatarModal #avatarPreview {
    width: 112px;
    height: 112px;
    margin: 0 auto;
}

.avatar-upload-area {
    padding: 1.1rem 1rem 1rem;
    border: 1px dashed var(--avatar-upload-border);
    border-radius: 16px;
    background: var(--avatar-upload-bg);
}

.avatar-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 40px;
    padding: 0 14px;
    border-radius: 12px;
    border: 1px solid var(--avatar-action-border);
    background: var(--avatar-action-bg);
    color: var(--text-primary);
    font-size: 0.95rem;
    font-weight: 600;
    box-shadow: var(--avatar-action-shadow);
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}

.avatar-action-btn:hover {
    background: var(--avatar-action-hover-bg);
    border-color: var(--avatar-action-border);
    color: var(--text-primary);
    box-shadow: var(--avatar-action-shadow-hover);
}

.avatar-action-btn:focus-visible {
    outline: 2px solid rgba(191, 144, 0, 0.28);
    outline-offset: 2px;
}

.avatar-select-btn {
    min-width: 132px;
}

.avatar-cancel-btn {
    background: color-mix(in srgb, var(--avatar-action-bg) 72%, transparent 28%);
}

.avatar-save-btn {
    background: var(--avatar-save-bg);
    border-color: var(--avatar-save-border);
    color: #fffdf8;
    box-shadow: var(--avatar-save-shadow);
}

.avatar-save-btn:hover {
    background: linear-gradient(180deg, rgba(219, 168, 66, 1) 0%, rgba(193, 147, 34, 1) 100%);
    border-color: var(--avatar-save-border);
    color: #fffdf8;
    box-shadow: var(--avatar-save-hover-shadow);
}

@media (max-width: 768px) {

    .profile-avatar,
    .avatar-large {
        width: 112px;
        height: 112px;
    }

    .change-avatar-btn {
        min-width: 76px;
        height: 28px;
        padding: 0 10px;
        font-size: 0.78rem;
    }

    #changeAvatarModal .modal-body {
        padding: 1.2rem 1rem 1rem;
    }

    .avatar-upload-area {
        padding: 1rem 0.9rem 0.9rem;
    }
}

.profile-info h2 {
    margin: 0 0 1.5rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.profile-info h2 .user-name {
    font-size: 1.5rem !important;
    font-weight: 700;
}

.profile-info h2 .role-tag {
    padding: 0.25rem 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1;
    display: inline-flex;
    align-items: center;
}

.profile-stats {
    display: flex;
    gap: 2rem;
}

.profile-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

.info-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.info-label {
    font-weight: 500;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.info-value {
    font-size: 1rem;
    color: var(--text-primary);
    font-weight: 500;
}

.activity-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.activity-item {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    background-color: transparent !important;
    background: transparent !important;
    border-radius: var(--border-radius);
    transition: none !important;
    transform: none !important;
    box-shadow: none !important;
}

.activity-icon {
    width: 40px;
    height: 40px;
    background-color: rgba(52, 152, 219, 0.1);
    color: var(--primary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.125rem;
}

.activity-content {
    flex: 1;
}

.activity-title {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.activity-time {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.no-activity {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-secondary);
}

.no-activity i {
    font-size: 3rem;
    opacity: 0.5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    margin: 0;
}

.no-activity p {
    margin: 0;
}

.footer {
    background: rgba(255, 255, 255, 0.1);
    border-top: 1px solid var(--border-color);
    padding: 1.5rem 0;
    margin-top: 3rem;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

.footer-content {
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.footer-content p {
    display: inline-block;
    margin: 0;
    color: var(--text-primary);
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 0;
}

@keyframes blink {

    0%,
    50% {
        opacity: 1;
    }

    51%,
    100% {
        opacity: 0;
    }
}

.typing-indicator {
    display: inline-block;
    width: 2px;
    height: 1.2em;
    background-color: var(--primary-color);
    animation: blink 1s infinite;
    margin-left: 4px;
    vertical-align: middle;
}


@media (max-width: 768px) {


    .navbar-toggle {
        display: flex;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    .navbar-menu {
        display: flex;
        position: absolute;
        top: 100%;
        left: -12px;
        right: -12px;
        background: rgba(255, 255, 255, 0.95);
        border: none;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
        border-radius: 0 0 14px 14px;
        flex-direction: column;
        gap: 0;
        margin-left: 0;
        z-index: 999;
        opacity: 0;
        transform: translateY(-10px);
        max-height: 0;
        overflow: hidden;
        transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out, max-height 0.3s ease-in-out;
    }

    .navbar-menu.open {
        opacity: 1;
        transform: translateY(0);
        max-height: 500px;
    }

    .navbar-menu.closing {
        opacity: 0;
        transform: translateY(-10px);
        max-height: 0;
    }

    .navbar-menu .navbar-item {
        padding: 1rem;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        border-radius: 0;
        text-align: center;
    }

    .navbar-menu .navbar-item:last-child {
        border-bottom: none;
        border-radius: 0 0 14px 14px;
    }

    body.dark-mode .navbar-menu {
        background: rgba(30, 30, 30, 0.95);
        border: none;
    }

    body.dark-mode .navbar-menu .navbar-item {
        border-bottom-color: rgba(255, 255, 255, 0.05);
    }

    .features-grid {
        grid-template-columns: 1fr;
    }

    .checkin-stats {
        grid-template-columns: 1fr;
    }

    .questions-grid {
        grid-template-columns: 1fr;
    }


    .welcome-content h1 {
        font-size: 2rem;
    }

    .welcome-content p {
        font-size: 1rem;
    }

    .feature-card h3 {
        font-size: 1.125rem;
    }

    .feature-card p {
        font-size: 0.9rem;
    }

    .card-header h3 {
        font-size: 1rem;
    }


    .form-group label {
        font-size: 0.9rem;
    }

    .form-group input,
    .form-group textarea,
    .form-group select {
        padding: 0.625rem;
        font-size: 0.95rem;
    }


    .btn {
        padding: 0.625rem 1rem;
        font-size: 0.9rem;
    }


    .stat-value {
        font-size: 1.5rem;
    }


    .user-info-section .card {
        margin-top: 1rem;
    }

    .main-container {
        padding: 1.5rem 1rem;
    }

    .card-body {
        padding: 1rem;
    }

    .card-header {
        padding: 0.875rem 1rem;
    }


    .profile-header {
        flex-direction: column;
        text-align: center;
    }

    .profile-stats {
        justify-content: center;
    }

    .info-grid {
        grid-template-columns: 1fr;
    }

    .ranking-user {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
}




.text-center {
    text-align: center;
}

.text-primary {
    color: var(--primary-color);
}

.text-secondary {
    color: var(--text-secondary);
}

.text-success {
    color: var(--success-color);
}

.text-danger {
    color: var(--danger-color);
}

.role-tag {
    font-size: 0.75rem;
    margin-left: 0.375rem;
    vertical-align: middle;
}

.dropdown-header .role-tag {
    font-size: 0.65rem;
    margin-left: 0.25rem;
}

.owner-dashboard {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.dashboard-card {
    background-color: white;
    border-radius: 0.75rem;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: var(--transition);
    border: 1px solid var(--border-color);
    background: linear-gradient(135deg, var(--background-color) 0%, white 100%);
}

.dashboard-card:hover {
    box-shadow: var(--shadow-lg);
    transform: none !important;
    border-color: var(--border-color);
}

.dashboard-card .card-header {
    background-color: var(--primary-color);
    color: white;
    padding: 1.25rem;
    border-bottom: 2px solid var(--secondary-color);
}

.dashboard-card .card-header h3 {
    margin: 0;
    font-size: 1.2rem;
    color: white;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.dashboard-card .card-body {
    padding: 1.5rem;
    background-color: var(--card-background);
}

.role-management {
    margin-top: 1rem;
}

.search-box {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    transition: var(--transition);
}

.search-box input {
    flex: 1;
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background-color: var(--background-color);
    transition: var(--transition);
}

.search-box input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(0, 113, 227, 0.1);
    outline: none;
}

.search-box .btn {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
}

.search-box .btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.user-role-list {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background-color: var(--background-color);
}

.user-role-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    border-bottom: 1px solid var(--border-color);
    transition: var(--transition);
    background-color: var(--secondary-color);
}

.user-role-item:last-child {
    border-bottom: none;
}

.user-role-item:hover {
    background-color: var(--background-color);
}

.role-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.role-select {
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background-color: white;
    transition: var(--transition);
    font-family: inherit;
    font-size: 0.9rem;
}

.role-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(0, 113, 227, 0.1);
    outline: none;
}

.role-controls .btn {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
}

.role-controls .btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.global-save-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    margin-top: 1rem;
    background-color: var(--card-background);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    position: sticky;
    bottom: 1rem;
    z-index: 10;
}

.global-save-bar .save-status {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.global-save-bar .save-status.success {
    color: var(--success-color);
}

.global-save-bar .save-status.error {
    color: var(--danger-color);
}

.owner-lock {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.system-info {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
    background-color: var(--background-color);
    border-radius: var(--border-radius);
}

.info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem;
    border-radius: var(--border-radius);
    transition: var(--transition);
}

.info-item:hover {
    background-color: rgba(0, 113, 227, 0.05);
}

.info-label {
    font-weight: 600;
    color: var(--text-secondary);
}

.info-value {
    font-weight: 600;
}

.status-online {
    color: #34c759;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.status-online::before {
    content: '';
    width: 8px;
    height: 8px;
    background-color: #34c759;
    border-radius: 50%;
    animation: pulse 2s infinite;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.5;
        transform: scale(1.2);
    }
}


.post-replies {
    margin-top: 0;
    padding: 0;
    background-color: var(--background-color);
    border-radius: 0;
    border: none;
    overflow: hidden;
}

.post-reply {
    background-color: var(--background-color);
    padding: 0.5rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
    transition: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.95rem;
    margin-bottom: 0;
    border-radius: 0;
    border: none;
    border-bottom: 1px solid var(--border-color);
    box-shadow: none;
}

.post-reply:active,
.post-reply:focus,
.post-reply:hover {
    background-color: var(--background-color);
    box-shadow: none;
}

.post-reply:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.reply-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    margin-bottom: 0;
    font-size: 0.85rem;
}

.reply-author {
    font-weight: 600;
    color: var(--primary-color);
    font-size: 0.9rem;
}

.reply-time {
    color: var(--text-secondary);
    font-size: 0.75rem;
}

.reply-content {
    color: var(--text-primary);
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.no-replies {
    text-align: center;
    color: var(--text-secondary);
    padding: 1rem 1.5rem;
    font-style: italic;
    font-size: 0.9rem;
    background-color: var(--background-color);
    border-radius: 0;
}

.reply-form-container {
    margin-top: 0;
    padding: 1rem 1.5rem;
    background-color: var(--background-color);
    border-radius: 0;
    border: none;
    border-top: 1px solid var(--border-color);
}

.reply-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.reply-content-input {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    resize: vertical;
    font-family: inherit;
    font-size: 0.95rem;
    transition: var(--transition);
    background-color: white;
}

.reply-content-input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(0, 113, 227, 0.1);
    outline: none;
}

.reply-form .form-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

.reply-header {
    display: none;
}


.reply-content-wrapper {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
    min-width: 0;
}

.reply-btn {
    margin-bottom: 0.75rem;
    padding: 0.375rem 0.75rem;
    font-size: 0.85rem;
}

.post-title {
    cursor: pointer;
    color: var(--primary-color);
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
    transition: color 0.2s ease;
}

.post-title:hover {
    color: var(--primary-color);
}

.forum-post {
    border-bottom: 1px solid var(--border-color);
    padding: 1rem 1.5rem;
    background-color: var(--background-color);
}

.forum-posts {
    gap: 0;
    background-color: var(--card-background);
    border-radius: var(--border-radius);
    overflow: hidden;
}

.post-title {
    cursor: pointer;
    color: var(--text-primary);
    font-size: 1.25rem;
    margin-bottom: 0.25rem;
    transition: color 0.2s ease;
    display: inline-block;
    font-weight: 600;
}

.post-detail .post-title {
    font-size: 1.5rem;
    margin-bottom: 0.75rem;
    color: var(--text-primary);
}


.post-detail {
    background-color: rgba(255, 255, 255, 0.95);
    padding: 1.5rem;
    border-bottom: 2px solid #ffd60a;
    margin-bottom: 1.5rem;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-md);
}


.replies-list {
    background-color: rgba(255, 255, 255, 0.95);
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.replies-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    background-color: var(--secondary-color);
    border-bottom: 1px solid var(--border-color);
}

.replies-header h3 {
    margin: 0;
    font-size: 1.125rem;
    color: var(--text-primary);
}


.replies-list .post-reply {
    background-color: rgba(255, 255, 255, 0.95);
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #e0e0e0;
}


.forum-detail-container .reply-form-container {
    margin-top: 1.5rem;
    background-color: rgba(255, 255, 255, 0.95);
    padding: 1rem;
    border-radius: var(--border-radius);
    border: 1px solid #e0e0e0;
    box-shadow: var(--shadow-md);
}


.reply-content-input {
    min-height: 60px;
    max-height: 200px;
    resize: none;
    overflow-y: auto;
    padding: 0.75rem;
    background-color: var(--background-color);
    color: var(--text-primary);
}


.reply-form .form-group {
    margin-bottom: 1rem;
}


.reply-form .form-actions {
    margin-top: 1rem;
    margin-bottom: 0;
}


.post-meta {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0;
}

.forum-container .card {
    background: var(--card-background);
    box-shadow: var(--shadow-sm);
}

.forum-container .card-body {
    padding: 0;
}

.forum-posts {
    gap: 0;
}


.post-content {
    margin-bottom: 1rem;
    line-height: 1.6;
}


.reply-content {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.5;
}

.reply-form-container {
    background-color: rgba(0, 113, 227, 0.05);
    padding: 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
}

.delete-reply-btn {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
}

.btn-xs {
    padding: 0.125rem 0.375rem;
    font-size: 0.75rem;
    line-height: 1.2;
    border-radius: var(--border-radius);
}

.post-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}



/* Modal centering - flex layout */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.modal.active {
    opacity: 1;
    visibility: visible;
}

.modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(29, 29, 31, 0.22);
    cursor: pointer;
}

.modal-content {
    position: relative;
    width: 90%;
    max-width: 800px;
    max-height: 90vh;
    overflow-y: auto;
    border-radius: 0.9rem;
    box-shadow: var(--shadow-lg);
    transform: none;
    transition: opacity 0.25s ease, box-shadow 0.3s ease, background-color 0.3s ease;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.78));
    border: 1px solid rgba(29, 29, 31, 0.08);
}

.modal.active .modal-content {
    transform: none;
    opacity: 1;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    border-bottom: 1px solid var(--border-color);
    background-color: var(--background-color);
    border-top-left-radius: 0.75rem;
    border-top-right-radius: 0.75rem;
}

.modal-header h3 {
    margin: 0;
    color: var(--primary-color);
    font-size: 1.25rem;
}

.modal-close {
    background: rgba(255, 59, 48, 0.1);
    border: none;
    color: rgba(255, 59, 48, 0.9);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.modal-close:hover {
    background: rgba(255, 59, 48, 0.9);
    color: #fff;
}

.modal-close:hover {
    background-color: var(--background-color);
    color: var(--text-primary);
}

.modal-form {
    padding: 1.5rem;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: flex;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--text-primary);
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    font-family: inherit;
    font-size: 0.95rem;
    transition: var(--transition);
    background-color: white;
}

.form-group input:focus,
.form-group textarea:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(0, 113, 227, 0.1);
    outline: none;
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
}

.form-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    margin-top: 2rem;
    flex-wrap: wrap;
}

@media (max-width: 768px) {


    .modal-content {
        width: 95%;
        margin: 1rem;
        max-height: calc(100vh - 2rem);
    }

    .modal-header,
    .modal-form {
        padding: 1rem;
    }

    .form-group {
        margin-bottom: 1rem;
    }

    .form-actions {
        justify-content: stretch;
    }
}

.global-message {
    position: fixed;
    top: 60px;
    left: 50%;
    transform: translateX(-50%) translateY(-100%);
    background-color: var(--background-color);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 1rem 2rem;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-lg);
    z-index: 1000;
    font-weight: 500;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
    max-width: 90%;
    text-align: center;
    background: rgba(255, 255, 255, 0.92);
}

.global-message.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    animation: slideDown 0.3s ease-out forwards;
}

.global-message.hide {
    opacity: 0;
    transform: translateX(-50%) translateY(-100px);
    animation: slideUp 0.3s ease-out forwards;
}

.global-message.success {
    border-color: #34c759;
    color: #34c759;
    background: linear-gradient(135deg, rgba(52, 199, 89, 0.1), rgba(46, 204, 113, 0.05));
}

.global-message.error {
    border-color: #ff3b30;
    color: #ff3b30;
    background: linear-gradient(135deg, rgba(255, 59, 48, 0.1), rgba(239, 68, 68, 0.05));
}

.global-message.info {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background: linear-gradient(135deg, rgba(52, 152, 219, 0.1), rgba(33, 150, 243, 0.05));
}

@keyframes slideDown {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(-100%);
    }

    100% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

@keyframes slideUp {
    0% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }

    100% {
        opacity: 0;
        transform: translateX(-50%) translateY(-100%);
    }
}

.form-actions .btn {
    flex: 1;
}

.mt-1 {
    margin-top: 0.25rem;
}

.mt-2 {
    margin-top: 0.5rem;
}

.mt-3 {
    margin-top: 0.75rem;
}

.mt-4 {
    margin-top: 1rem;
}

.mt-5 {
    margin-top: 1.25rem;
}

.mb-1 {
    margin-bottom: 0.25rem;
}

.mb-2 {
    margin-bottom: 0.5rem;
}

.mb-3 {
    margin-bottom: 0.75rem;
}

.mb-4 {
    margin-bottom: 1rem;
}

.mb-5 {
    margin-bottom: 1.25rem;
}

.p-1 {
    padding: 0.25rem;
}

.p-2 {
    padding: 0.5rem;
}

.p-3 {
    padding: 0.75rem;
}

.p-4 {
    padding: 1rem;
}

.p-5 {
    padding: 1.25rem;
}


.editor-wrapper {
    max-width: 1080px;
    margin: 0 auto;
    padding: clamp(1rem, 2.2vw, 1.75rem);
}

.editor-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.45rem;
    border-radius: 24px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background:
        radial-gradient(circle at top right, rgba(173, 216, 255, 0.45), transparent 40%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.94) 0%, rgba(247, 250, 255, 0.92) 100%);
    box-shadow: 0 20px 44px rgba(15, 23, 42, 0.08);
    margin-bottom: 1.25rem;
    margin-left: 0;
}

.editor-hero-left {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    min-width: 0;
}

.editor-hero-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 800;
    font-size: clamp(1.35rem, 2.3vw, 1.8rem);
    color: var(--text-primary);
}

.editor-hero-sub {
    display: block;
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.6;
    max-width: 60ch;
}

.editor-hero-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.editor-hero-right .btn {
    border-radius: 999px;
    padding: 0.65rem 1.1rem;
    font-size: 0.92rem;
}

.editor-card {
    border-radius: 24px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(249, 250, 252, 0.96) 100%);
    box-shadow: 0 20px 42px rgba(15, 23, 42, 0.08);
}

.editor-card .card-body {
    padding: clamp(1.15rem, 2vw, 1.6rem);
}

.editor-form {
    display: grid;
    gap: 1.15rem;
}

.editor-form .form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

.editor-form .form-group {
    min-width: 0;
}

.helper-label {
    color: var(--text-secondary);
}

.form-label-with-note {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    line-height: 1.2;
}

.form-label-note {
    display: inline-flex;
    align-items: center;
    font-size: 0.92em;
    font-weight: 400;
    color: var(--text-secondary);
    line-height: 1;
    vertical-align: middle;
    transform: translateY(0.01em);
}

.helper-box {
    padding: 0.85rem 0.95rem;
    border-radius: 12px;
    border: 1px solid rgba(29, 29, 31, 0.08);
    background: rgba(255, 255, 255, 0.65);
    color: var(--text-secondary);
    line-height: 1.45;
}

.related-question-hint {
    margin-top: 0.6rem;
    border-color: rgba(191, 144, 0, 0.16);
    background: linear-gradient(180deg, rgba(255, 249, 237, 0.96) 0%, rgba(255, 244, 221, 0.92) 100%);
    color: #7a5a17;
    box-shadow: 0 8px 18px rgba(166, 120, 28, 0.08);
}

body.dark-mode .helper-box {
    border-color: rgba(214, 196, 171, 0.14);
    background: rgba(48, 40, 33, 0.82);
    color: #d8c8b0;
}

body.dark-mode .related-question-hint {
    border-color: rgba(214, 173, 87, 0.20);
    background: linear-gradient(180deg, rgba(71, 56, 35, 0.92) 0%, rgba(56, 44, 27, 0.94) 100%);
    color: #f0ddb3;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.18);
}

.editor-upload {
    padding: 0.75rem;
    border-radius: 14px;
    border: 1px dashed rgba(29, 29, 31, 0.18);
    background: rgba(255, 255, 255, 0.55);
}

.editor-upload-block {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.editor-image-picker {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    width: fit-content;
    cursor: pointer;
}

.editor-upload-hint {
    margin-top: 0;
}

.editor-image-preview {
    margin-top: 0;
}

.editor-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1rem;
}

body.dark-mode .editor-hero,
[data-theme="dark"] .editor-hero {
    border-color: rgba(226, 232, 240, 0.08);
    background:
        radial-gradient(circle at top right, rgba(56, 189, 248, 0.12), transparent 40%),
        linear-gradient(135deg, rgba(20, 26, 39, 0.94) 0%, rgba(15, 21, 32, 0.94) 100%);
    box-shadow: 0 20px 42px rgba(0, 0, 0, 0.22);
}

body.dark-mode .editor-card,
[data-theme="dark"] .editor-card {
    border-color: rgba(226, 232, 240, 0.08);
    background: linear-gradient(180deg, rgba(19, 26, 40, 0.96) 0%, rgba(15, 21, 32, 0.92) 100%);
    box-shadow: 0 20px 42px rgba(0, 0, 0, 0.22);
}

@media (max-width: 980px) {
    .admin-grid {
        grid-template-columns: 1fr;
    }

    .admin-card-tags {
        position: static;
    }

    .approval-filters,
    .grade-inputs {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 680px) {
    .editor-hero {
        flex-direction: column;
        align-items: flex-start;
        grid-template-columns: 1fr;
    }

    .editor-actions {
        justify-content: stretch;
        flex-direction: column;
    }

    .editor-actions .btn {
        width: 100%;
    }

    .submission-header {
        flex-direction: column;
    }

    .submission-actions-row {
        justify-content: stretch;
    }

    .submission-actions-row .btn,
    .approval-filters .btn,
    .editor-image-picker {
        width: 100%;
        justify-content: center;
    }
}



.md-editor {
    border-radius: 14px;
    border: 1px solid rgba(29, 29, 31, 0.10);
    background: rgba(255, 255, 255, 0.60);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.md-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.18rem;
    padding: 0.35rem 0.45rem;
    border-bottom: 1px solid rgba(29, 29, 31, 0.08);
    background: rgba(255, 255, 255, 0.52);
}

.md-btn {
    width: 28px;
    height: 28px;
    min-width: 28px;
    padding: 0;
    border-radius: 7px;
    border: none;
    background: transparent;
    color: var(--text-primary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
    transition: background-color .12s ease, color .12s ease;
}

.md-btn:hover,
.md-btn:focus-visible {
    background: rgba(29, 29, 31, 0.06);
    box-shadow: none;
    outline: none;
}

.md-btn i {
    pointer-events: none;
    font-size: 0.9rem;
}

.md-glyph {
    font-size: 0.95rem;
    line-height: 1;
    font-weight: 600;
    pointer-events: none;
}

.md-sep {
    width: 1px;
    height: 14px;
    align-self: center;
    background: rgba(29, 29, 31, 0.10);
    margin: 0 0.12rem;
}

.md-tabs {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.32rem 0.45rem;
    border-bottom: 1px solid rgba(29, 29, 31, 0.08);
    background: rgba(255, 255, 255, 0.42);
}

.md-tab {
    height: 28px;
    padding: 0 0.5rem;
    border-radius: 7px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background-color .12s ease, color .12s ease;
}

.md-tab:hover,
.md-tab:focus-visible {
    background: rgba(29, 29, 31, 0.06);
    color: var(--text-primary);
    outline: none;
}

.md-tab.active {
    background: rgba(29, 29, 31, 0.08);
    color: var(--text-primary);
    box-shadow: none;
}

.md-hint {
    margin-left: auto;
    color: var(--text-secondary);
    font-size: 0.8rem;
}

.md-body {
    padding: 0.65rem;
}

.md-textarea {
    width: 100%;
    min-height: 240px;
    resize: vertical;
    border-radius: 14px;
}

.md-preview {
    min-height: 240px;
    padding: 0.9rem 1rem;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(29, 29, 31, 0.08);
    color: var(--text-primary);
    line-height: 1.75;
}

.md-preview pre {
    overflow: auto;
    padding: 0.85rem;
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.05);
}

.md-preview code {
    padding: 0.1rem 0.35rem;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.06);
}




:root {
    --primary-color: #000000 !important;


    --card-background: rgba(255, 255, 255, 0.12) !important;

    --accent-pink: #c7b9ff !important;
    --accent-yellow: #ffd1b3 !important;
    --accent-blue: #9be7ff !important;


    --border-color: rgba(255, 255, 255, 0.65) !important;
    --border-right: rgba(255, 255, 255, 0.35) !important;
    --border-bottom: rgba(255, 255, 255, 0.35) !important;

    --backdrop-blur: blur(10px) !important;
}

body {
    background: linear-gradient(135deg, rgba(199, 185, 255, 0.35), rgba(155, 231, 255, 0.28), rgba(255, 209, 179, 0.30)) !important;
    background-attachment: fixed !important;
    background-size: cover !important;
    background-position: center !important;
}

body::before {
    display: block !important;
}

body .background-colors,
body .floating-squares {
    display: block !important;
}

.card,
.modal-content,
.feedback-popup,
.feedback-content,
.feedback-modal .modal-content,
.card-header,
.modal-header,
.modal-footer {
    background: rgba(255, 255, 255, 0.12) !important;
}

.card {
    border: 1px solid var(--border-color) !important;
    border-right: 1px solid var(--border-right) !important;
    border-bottom: 1px solid var(--border-bottom) !important;
    border-radius: 14px !important;
}


.navbar {
    border: 1.5px solid rgba(0, 0, 0, 0.18) !important;
    border-radius: 9999px !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    filter: none !important;
}

.feature-card {
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid var(--border-color) !important;
    border-right: 1px solid var(--border-right) !important;
    border-bottom: 1px solid var(--border-bottom) !important;
    border-radius: 14px !important;
    box-shadow:
        0 18px 55px rgba(0, 0, 0, 0.12),
        0 2px 8px rgba(0, 0, 0, 0.06),
        0 0 0 0.5px rgba(255, 255, 255, 0.18) inset,
        0 1px 0 rgba(255, 255, 255, 0.10) inset !important;
}

.feature-card:hover {
    transform: none !important;
    box-shadow:
        0 18px 55px rgba(0, 0, 0, 0.12),
        0 2px 8px rgba(0, 0, 0, 0.06),
        0 0 0 0.5px rgba(255, 255, 255, 0.18) inset,
        0 1px 0 rgba(255, 255, 255, 0.10) inset !important;
}

.user-name {
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.2;
    transition: color 0.2s ease;
}

.user-link {
    text-decoration: none !important;
    cursor: pointer;
    transition: color 0.2s ease;
}

.user-link.role-scorer,
.user-name.role-scorer {
    color: #ff9500 !important;
}

.user-link.role-owner,
.user-name.role-owner {
    color: #9d3dd8 !important;
}

.user-link.role-admin,
.user-name.role-admin {
    color: #fe4c61 !important;
}

.user-link.role-user,
.user-name.role-user {
    color: #1f2937 !important;
}

/* Dark mode username colors with WCAG 2.1 AA compliant contrast ratios */
body.dark-mode .user-name.role-owner,
[data-theme="dark"] .user-name.role-owner {
    color: #c084fc !important;
}

body.dark-mode .user-name.role-admin,
[data-theme="dark"] .user-name.role-admin {
    color: #fb7185 !important;
}

body.dark-mode .user-name.role-scorer,
[data-theme="dark"] .user-name.role-scorer {
    color: #fb923c !important;
}

body.dark-mode .user-name.role-user,
[data-theme="dark"] .user-name.role-user {
    color: #e2e8f0 !important;
}

/* Dark mode user-link colors */
body.dark-mode .user-link.role-owner,
[data-theme="dark"] .user-link.role-owner {
    color: #c084fc !important;
}

body.dark-mode .user-link.role-admin,
[data-theme="dark"] .user-link.role-admin {
    color: #fb7185 !important;
}

body.dark-mode .user-link.role-scorer,
[data-theme="dark"] .user-link.role-scorer {
    color: #fb923c !important;
}

body.dark-mode .user-link.role-user,
[data-theme="dark"] .user-link.role-user {
    color: #e2e8f0 !important;
}

/* Navbar shell variables */
:root {
    --navbar-shell-bg-light: rgba(255, 255, 255, 0.65);
    --navbar-shell-shadow-light: 0 2px 12px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.5);
    --navbar-shell-bg-dark: rgba(15, 23, 42, 0.42);
    --navbar-shell-shadow-dark: 0 2px 12px rgba(0, 0, 0, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Force all cards to have 20px border-radius */
.card,
.forum-container .card,
.questions-container .card,
.question-card,
.dashboard-card,
.modal-content,
.post-card,
.group-card,
.profile-header-card,
.profile-content>.card,
.info-card,
.daily-challenge-card,
.challenge-question-card,
.challenge-answer-section,
.challenge-ranking-card,
.rankings-card,
.calendar-card,
.member-card,
.duty-card,
.home-legacy,
.home-panel,
.forum-post {
    border-radius: 14px !important;
}

.user-link:visited {
    color: inherit;
}

.user-link.role-scorer:visited {
    color: #ff9500 !important;
}

.user-link.role-owner:visited {
    color: #9d3dd8 !important;
}

.user-link.role-admin:visited {
    color: #fe4c61 !important;
}

.user-link.role-user:visited {
    color: #bbb !important;
}

.user-link:hover {
    text-decoration: none !important;
}

.user-link.role-scorer:hover,
.user-link.role-scorer:active {
    color: #ff9500 !important;
}

.user-link.role-owner:hover,
.user-link.role-owner:active {
    color: #9d3dd8 !important;
}

.user-link.role-admin:hover,
.user-link.role-admin:active {
    color: #fe4c61 !important;
}

.navbar-menu .navbar-item {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 9999px !important;
    padding: 6px 14px !important;
    min-height: 32px;
    color: rgba(0, 0, 0, 0.55) !important;
    font-weight: 500 !important;
    font-size: 0.82rem !important;
    position: relative;
    transform: none !important;
    transition: color 0.2s ease, background-color 0.25s ease !important;
}

.navbar-menu .navbar-item:hover {
    color: rgba(0, 0, 0, 0.88) !important;
    font-weight: 600 !important;
    background: rgba(0, 0, 0, 0.06) !important;
}

.navbar-menu .navbar-item.active {
    color: #ffffff !important;
    font-weight: 600 !important;
    transform: none !important;
    background: rgba(0, 0, 0, 0.82) !important;
}


.navbar-menu .tab-indicator {
    display: none !important;
}

.modal-overlay {
    background-color: rgba(0, 0, 0, 0.25) !important;
}

a,
a:hover {
    color: var(--primary-color) !important;
}

.btn-primary {
    background: rgba(0, 0, 0, 0.88) !important;
    border-color: rgba(0, 0, 0, 0.88) !important;
    color: #ffffff !important;
}

.btn-primary:hover {
    background: rgba(0, 0, 0, 0.95) !important;
    border-color: rgba(0, 0, 0, 0.95) !important;
}

input,
textarea,
select,
.filter-select {
    background: rgba(255, 255, 255, 0.16) !important;
    border: 2px solid rgba(255, 255, 255, 0.55) !important;
}

input:focus,
textarea:focus,
select:focus,
.filter-select:focus {
    border-color: rgba(0, 0, 0, 0.55) !important;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12) !important;
}


.auth-page {
    color: #000 !important;
}

.auth-page h1,
.auth-page h2,
.auth-page h3,
.auth-page p,
.auth-page label,
.auth-page span {
    color: #000 !important;
}

.floating-squares {
    display: none !important;
}


.auth-page input {
    color: #000 !important;
}

.toggle-password {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin-left: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.input-group {
    display: flex;
    align-items: center;
}

.input-group input {
    flex: 1;
}






.auth-page .auth-card {
    border: none !important;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.18), 0 4px 14px rgba(0, 0, 0, 0.10) !important;
}

.auth-page .password-input {
    position: relative;
}

.auth-page .password-input input {
    padding-right: 46px !important;
}

.auth-page .password-toggle {
    position: absolute !important;
    right: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 30px !important;
    height: 30px !important;
    display: grid !important;
    place-items: center !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 999px !important;
    padding: 0 !important;
}

.auth-page .password-toggle i {
    pointer-events: none;
}

.auth-page .password-toggle:hover,
.auth-page .password-toggle:focus,
.auth-page .password-toggle:active {
    background: transparent !important;
    outline: none !important;
}


.auth-page .auth-card {

    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.20), 0 10px 26px rgba(0, 0, 0, 0.14) !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
}

.auth-page .password-input input {
    padding-right: 3rem !important;
}

.auth-page .password-input {
    position: relative;
}

.auth-page .password-toggle {
    position: absolute !important;
    right: 0.85rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 2.25rem !important;
    height: 2.25rem !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 999px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer;
    z-index: 3;
}

.auth-page .password-toggle:hover,
.auth-page .password-toggle:active,
.auth-page .password-toggle:focus {
    background: transparent !important;
    outline: none !important;
}

.auth-page .password-toggle i {
    font-size: 1.05rem;
    color: #111 !important;
}


.class-members-header {
    text-align: center;
    margin-bottom: 2rem;
}

.class-members-header h1 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.class-members-header h1 i {
    margin-right: 0.5rem;
    color: var(--primary-color);
}

.class-members-header p {
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.class-members-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 1.5rem;
    padding: 1rem 0;
}

.member-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.member-avatar {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    border: 2px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    color: var(--text-secondary);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
    margin-bottom: 0.5rem;
    overflow: hidden;
    position: relative;
}

.member-avatar:hover {
    transform: scale(1.08);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.member-card.selected .member-avatar {
    border-color: var(--primary-color);
    background: inherit;
}

.member-card.selected .member-avatar::after {
    content: none;
    display: none;
}

body.dark-mode .member-card.selected .member-avatar {
    background: #3a3733 !important;
    border-color: #d8c4a6 !important;
    box-shadow: 0 0 0 3px rgba(216, 196, 166, 0.18) !important;
}

.member-name {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-primary);
    text-decoration: none;
    margin-bottom: 0.25rem;
    transition: color 0.2s ease;
}

.member-name.role-scorer {
    color: #ff9500 !important;
}

.member-name.role-owner {
    color: #9d3dd8 !important;
}

.member-name.role-admin {
    color: #fe4c61 !important;
}

.member-name:hover {
    color: var(--primary-color);
}

.member-name.role-scorer:hover,
.member-name.role-scorer:active {
    color: #ff9500 !important;
}

.member-name.role-owner:hover,
.member-name.role-owner:active {
    color: #9d3dd8 !important;
}

.member-name.role-admin:hover,
.member-name.role-admin:active {
    color: #fe4c61 !important;
}

.member-score {
    display: flex;
    gap: 0.5rem;
    font-size: 0.75rem;
}

.member-score .plus-score {
    color: #34c759;
}

.member-score .minus-score {
    color: #ff3b30;
}

.batch-toolbar {
    display: none;
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(30, 30, 32, 0.95);
    border-radius: 16px;
    padding: 12px 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 100;
    gap: 12px;
    align-items: center;
}

.batch-toolbar.active {
    display: flex;
}

body:not(.dark-mode) .batch-toolbar {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

.batch-toolbar .selected-count {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-right: 8px;
}

.batch-toolbar .selected-count strong {
    color: #007aff;
}

.batch-toolbar .btn {
    padding: 8px 16px;
    font-size: 0.85rem;
}

.batch-toolbar .btn-batch-plus {
    background: linear-gradient(135deg, #34c759, #30d158);
    border: none;
}

.batch-toolbar .btn-batch-minus {
    background: linear-gradient(135deg, #ff3b30, #ff453a);
    border: none;
}

.batch-toolbar .btn-cancel {
    background: rgba(128, 128, 128, 0.2);
    border: 1px solid rgba(128, 128, 128, 0.3);
    color: var(--text-secondary);
}

.role-scorer {
    color: #ff9500 !important;
}

.role-tag.scorer {
    background-color: #ff9500 !important;
    color: white;
}

.quick-score-options {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1rem;
}

.quick-score-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem 0.5rem;
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 2px solid transparent;
}

.quick-score-item.minus {
    background: rgba(255, 59, 48, 0.1);
}

.quick-score-item.minus:hover {
    background: rgba(255, 59, 48, 0.2);
    border-color: #ff3b30;
}

.quick-score-item.minus.selected {
    background: rgba(255, 59, 48, 0.3);
    border-color: #ff3b30;
    box-shadow: 0 0 16px rgba(255, 59, 48, 0.4);
}

.quick-score-item.plus {
    background: rgba(52, 199, 89, 0.1);
}

.quick-score-item.plus:hover {
    background: rgba(52, 199, 89, 0.2);
    border-color: #34c759;
}

.quick-score-item.plus.selected {
    background: rgba(52, 199, 89, 0.3);
    border-color: #34c759;
    box-shadow: 0 0 16px rgba(52, 199, 89, 0.4);
}

.quick-score-item.custom {
    background: rgba(100, 100, 100, 0.1);
}

.quick-score-item.custom:hover {
    background: rgba(100, 100, 100, 0.2);
    border-color: #888;
}

.quick-score-item.custom.selected {
    background: rgba(100, 100, 100, 0.25);
    border-color: #888;
}

.quick-score-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
}

.quick-score-item.minus .quick-score-icon {
    background: rgba(255, 59, 48, 0.2);
    color: #ff3b30;
}

.quick-score-item.plus .quick-score-icon {
    background: rgba(52, 199, 89, 0.2);
    color: #34c759;
}

.quick-score-item.custom .quick-score-icon {
    background: rgba(100, 100, 100, 0.2);
    color: #888;
}

.quick-score-label {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-primary);
    text-align: center;
    margin-bottom: 0.25rem;
}

.quick-score-amount {
    font-size: 0.85rem;
    font-weight: 700;
}

.quick-score-item.minus .quick-score-amount {
    color: #ff3b30;
}

.quick-score-item.plus .quick-score-amount {
    color: #34c759;
}

.quick-score-item.custom .quick-score-amount {
    color: #888;
}


.custom-score-form {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}


.select-mode-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 0.85rem;
    color: #007aff;
    transition: all 0.2s ease;
}

.select-mode-toggle:hover {
    color: #0056d6;
}

.select-mode-toggle.active {
    color: #007aff;
    font-weight: 600;
}

.select-mode-toggle i {
    font-size: 0.9rem;
}

.groups-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 2rem;
}

.groups-header h1 {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}

.groups-header p {
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

.groups-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
}

.group-card {
    background: var(--card-bg);
    border-radius: 16px;
    padding: 1.25rem;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid var(--border-color);
}

.group-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.group-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.group-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.group-count {
    font-size: 0.8rem;
    color: var(--text-secondary);
    background: rgba(0, 122, 255, 0.1);
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
}

.group-scores {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}

.group-score {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    padding: 0.5rem;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.03);
}

body.dark-mode .group-score {
    background: rgba(255, 255, 255, 0.05);
}

.group-score .label {
    font-size: 0.7rem;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
}

.group-score .value {
    font-size: 1.1rem;
    font-weight: 700;
}

.group-score.total .value {
    color: var(--primary-color);
}

.group-score.plus .value {
    color: #34c759;
}

.group-score.minus .value {
    color: #ff3b30;
}

.group-members-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.member-badge {
    font-size: 0.75rem;
    padding: 0.2rem 0.5rem;
    background: rgba(0, 122, 255, 0.1);
    border-radius: 12px;
    color: var(--text-secondary);
}

.member-badge.more {
    background: rgba(128, 128, 128, 0.1);
}

.member-select-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 0.5rem;
    max-height: 300px;
    overflow-y: auto;
    padding: 0.5rem;
}

.member-checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.member-checkbox:hover {
    background: rgba(0, 122, 255, 0.1);
}

.member-checkbox input {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.member-checkbox span {
    font-size: 0.85rem;
    color: var(--text-primary);
}


.group-detail-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 1.5rem;
}

.group-info h1 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

#groupStats {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

.group-actions {
    display: flex;
    gap: 0.75rem;
}

.group-members-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.group-member-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--card-bg);
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

.member-rank {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-secondary);
    min-width: 30px;
}

.group-member-item .member-info {
    flex: 1;
}

.group-member-item .member-scores {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 0;
}

.group-member-item .member-scores span {
    font-size: 0.85rem;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
}

.group-member-item .member-scores .plus {
    color: #34c759;
    background: rgba(52, 199, 89, 0.1);
}

.group-member-item .member-scores .minus {
    color: #ff3b30;
    background: rgba(255, 59, 48, 0.1);
}

.group-member-item .member-scores .total {
    font-weight: 600;
    color: var(--primary-color);
    background: rgba(0, 122, 255, 0.1);
}


.score-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.score-tab {
    flex: 1;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-secondary);
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.score-tab:hover {
    background: rgba(255, 255, 255, 0.08);
}

.score-tab.active[data-type="plus"] {
    background: rgba(52, 199, 89, 0.25);
    border: 2px solid #34c759;
    color: #34c759;
    box-shadow: 0 0 12px rgba(52, 199, 89, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transform: scale(1.02);
}

.score-tab.active[data-type="minus"] {
    background: rgba(255, 59, 48, 0.25);
    border: 2px solid #ff3b30;
    color: #ff3b30;
    box-shadow: 0 0 12px rgba(255, 59, 48, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transform: scale(1.02);
}

.score-form .form-group {
    margin-bottom: 1rem;
}

.score-form label {
    display: flex;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.score-form input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
    font-size: 0.95rem;
}

.score-form input:focus {
    outline: none;
    border-color: var(--primary-color);
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--border-color);
}

body.dark-mode .member-avatar {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .score-tab {
    border-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .score-form input {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .avatar {
    background-color: rgba(255, 255, 255, 0.15);
    color: var(--text-secondary);
}

body.dark-mode .avatar-large {
    background-color: rgba(255, 255, 255, 0.15);
    color: var(--text-secondary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

body.dark-mode .change-avatar-btn {
    color: var(--text-secondary);
}

body.dark-mode .replies-list {
    background-color: rgba(24, 24, 27, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

body.dark-mode .replies-header {
    background-color: rgba(255, 255, 255, 0.05);
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

body.dark-mode .replies-list .post-reply {
    background-color: rgba(24, 24, 27, 0.95);
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

body.dark-mode .forum-detail-container .reply-form-container {
    background-color: rgba(24, 24, 27, 0.95);
    border-color: rgba(255, 255, 255, 0.08);
}

body.dark-mode .reply-content-input {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}

body.dark-mode .reply-content-input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(0, 113, 227, 0.2);
}

body.dark-mode .post-detail-card {
    background-color: rgba(24, 24, 27, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

body.dark-mode .post-detail-content {
    color: var(--text-primary);
}

body.dark-mode .post-detail-meta {
    color: var(--text-secondary);
}

body.dark-mode .forum-detail-container {
    background: transparent;
}


@media (max-width: 768px) {
    .class-members-grid {
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
        gap: 1rem;
    }

    .member-avatar {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }

    .member-name {
        font-size: 0.8rem;
    }

    .member-score {
        font-size: 0.7rem;
    }
}

.navbar-more-btn {
    position: relative;
    height: 36px;
    padding: 0 14px !important;
    border-radius: 9999px !important;
    color: var(--text-secondary) !important;
    font-size: 0.88rem !important;
    font-weight: 500 !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
}

.navbar-more-btn:hover {
    color: var(--text-primary) !important;
    background: rgba(0, 0, 0, 0.06) !important;
}

body.dark-mode .navbar-more-btn {
    color: rgba(255, 255, 255, 0.65) !important;
}

body.dark-mode .navbar-more-btn:hover {
    color: rgba(255, 255, 255, 0.90) !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

.navbar-more-chevron {
    font-size: 0.65rem;
    transition: transform 0.2s ease;
}

.navbar-more-btn.open .navbar-more-chevron {
    transform: rotate(180deg);
}

.navbar-more-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 120px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.14);
    display: none;
    flex-direction: column;
    padding: 6px;
    z-index: 1100;
    overflow: hidden;
}

.navbar-more-btn.open .navbar-more-dropdown {
    display: flex;
}

body.dark-mode .navbar-more-dropdown {
    background: rgba(30, 30, 40, 0.96);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.40);
}

.navbar-more-dropdown .navbar-item {
    width: 100% !important;
    height: 40px !important;
    border-radius: 10px !important;
    justify-content: flex-start !important;
    padding: 0 12px !important;
    flex-shrink: 0 !important;
}



body {
    background: #f5f3f1 !important;
    color: #1f2933 !important;
}

body::before,
body .background-colors,
body .floating-squares {
    display: none !important;
}

.main-container {
    width: min(1200px, calc(100% - 48px)) !important;
    margin: 0 auto !important;
    padding: 40px 0 72px !important;
    background: transparent !important;
}

.card,
.forum-container .card,
.questions-container .card,
.modal-content,
.post-card,
.group-card,
.question-card,
.dashboard-card {
    background: #ffffff !important;
    border: 1px solid #d1d5db !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.card-header,
.modal-header,
.modal-footer {
    background: transparent !important;
    border-color: #e5e7eb !important;
}

.card-header h3,
.modal-header h3,
h1,
h2,
h3 {
    color: #1f2933 !important;
}

p,
.stat-label,
.info-label,
.member-score,
.group-count,
.post-meta,
.question-meta,
.activity-description,
.activity-time {
    color: #6b7280 !important;
}

.btn,
.btn-primary,
.btn-secondary,
.btn-danger,
.filter-select,
.search-input,
input,
textarea,
select {
    border-radius: 4px !important;
}

.btn-primary,
.btn-secondary,
.btn-danger {
    border: 1px solid #d1d5db !important;
    background: #ffffff !important;
    color: #1f2933 !important;
    box-shadow: none !important;
}

.btn-primary:hover,
.btn-secondary:hover,
.btn-danger:hover {
    border-color: #9ca3af !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06) !important;
    transform: none !important;
}

.search-input,
.filter-select,
input,
textarea,
select {
    background: #ffffff !important;
    border: 1px solid #d1d5db !important;
    color: #1f2933 !important;
    box-shadow: none !important;
}

.search-input:focus,
.filter-select:focus,
input:focus,
textarea:focus,
select:focus {
    border-color: #9ca3af !important;
    box-shadow: 0 0 0 3px rgba(156, 163, 175, 0.15) !important;
}

.footer {
    background: transparent !important;
    border-top: 1px solid #d1d5db !important;
    border-radius: 0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
}

.footer-container,
.footer-content,
.footer-content p {
    border-radius: 0 !important;
    box-shadow: none !important;
}

.footer-content p {
    color: #6b7280 !important;
}

.navbar {
    background: rgba(255, 255, 255, 0.88) !important;
    border: 1px solid rgba(209, 213, 219, 0.9) !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08) !important;
}

.navbar-item,
.navbar-more-btn,
.dropdown-item,
.dropdown-header,
.theme-switcher,
.user-profile .avatar {
    color: #4b5563 !important;
}

.navbar-item:hover,
.navbar-item.active,
.navbar-more-btn:hover,
.dropdown-item:hover {
    color: #1f2933 !important;
}

.theme-switcher,
.user-profile .avatar,
.navbar-toggle {
    border: 1px solid #d1d5db !important;
    background: #ffffff !important;
}

.dropdown-menu {
    background: rgba(255, 255, 255, 0.97) !important;
    border: 1px solid #d1d5db !important;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.10) !important;
}

body.dark-mode {
    background: #0f1720 !important;
}

body.dark-mode .card,
body.dark-mode .forum-container .card,
body.dark-mode .questions-container .card,
body.dark-mode .modal-content,
body.dark-mode .post-card,
body.dark-mode .group-card,
body.dark-mode .question-card,
body.dark-mode .dashboard-card {
    background: rgba(19, 28, 39, 0.92) !important;
    border-color: rgba(148, 163, 184, 0.2) !important;
    box-shadow: 0 18px 40px rgba(2, 6, 23, 0.34) !important;
}

body.dark-mode .btn-primary,
body.dark-mode .btn-secondary,
body.dark-mode .btn-danger,
body.dark-mode .theme-switcher,
body.dark-mode .user-profile .avatar,
body.dark-mode .navbar-toggle,
body.dark-mode .search-input,
body.dark-mode .filter-select,
body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select {
    background: rgba(15, 23, 42, 0.9) !important;
    border-color: rgba(148, 163, 184, 0.2) !important;
    color: #e5e7eb !important;
}

body.dark-mode .card-header h3,
body.dark-mode .modal-header h3,
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3 {
    color: #f8fafc !important;
}

body.dark-mode p,
body.dark-mode .stat-label,
body.dark-mode .info-label,
body.dark-mode .member-score,
body.dark-mode .group-count,
body.dark-mode .post-meta,
body.dark-mode .question-meta,
body.dark-mode .activity-description,
body.dark-mode .activity-time,
body.dark-mode .footer-content p,
body.dark-mode .dropdown-item,
body.dark-mode .dropdown-header,
body.dark-mode .navbar-item,
body.dark-mode .navbar-more-btn {
    color: #cbd5e1 !important;
}

@media (max-width: 768px) {
    .main-container {
        width: calc(100% - 32px) !important;
        padding: 28px 0 48px !important;
    }
}



:root {
    --ui-bg: #f6f2ea;
    --ui-surface: #fffdf9;
    --ui-surface-strong: #ffffff;
    --ui-border: rgba(122, 109, 88, 0.18);
    --ui-border-strong: rgba(122, 109, 88, 0.32);
    --ui-text: #22201c;
    --ui-text-muted: #6f675d;
    --ui-shadow: 0 10px 30px rgba(68, 55, 35, 0.06);
    --ui-shadow-hover: 0 14px 34px rgba(68, 55, 35, 0.08);
    --ui-radius: 20px;
    --ui-radius-sm: 20px;
    --ui-accent: #c26a2e;
    --ui-accent-soft: rgba(194, 106, 46, 0.10);
}

html,
body {
    background: var(--ui-bg) !important;
    color: var(--ui-text) !important;
    font-family: var(--ds-font) !important;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
    min-height: 100%;
}

html {
    background: var(--ui-bg) !important;
}

body {
    min-height: 100vh;
    background-image:
        radial-gradient(circle at top left, rgba(194, 106, 46, 0.10), transparent 24%),
        radial-gradient(circle at top right, rgba(166, 140, 101, 0.08), transparent 22%),
        linear-gradient(180deg, #faf7f1 0%, #f6f2ea 48%, #efe7dc 100%) !important;
    background-attachment: fixed !important;
}

body::before,
body .background-colors,
body .floating-squares,
.main-container {
    width: min(1200px, calc(100% - 48px)) !important;
    margin: 0 auto !important;
    padding: 32px 0 64px !important;
}

.card,
.post-card,
.group-card,
.question-card,
.dashboard-card,
.modal-content,
.forum-container .card,
.questions-container .card {
    background: var(--ui-surface) !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius) !important;
    box-shadow: var(--ui-shadow) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    position: relative;
    overflow: hidden;
}

.card::before,
.post-card::before,
.group-card::before,
.question-card::before,
.dashboard-card::before,
.modal-content::before,
.forum-container .card::before,
.questions-container .card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0));
    pointer-events: none;
}

.card:hover,
.post-card:hover,
.group-card:hover,
.question-card:hover,
.dashboard-card:hover {
    border-color: var(--ui-border-strong) !important;
    box-shadow: var(--ui-shadow-hover) !important;
    transform: none !important;
}

.card-header,
.modal-header,
.modal-footer {
    background: transparent !important;
    border-color: var(--ui-border) !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.card-header h3,
.modal-header h3 {
    color: var(--ui-text) !important;
    letter-spacing: -0.02em;
    font-family: var(--ds-font) !important;
}

p,
.stat-label,
.info-label,
.member-score,
.group-count,
.post-meta,
.question-meta,
.activity-description,
.activity-time,
.footer-content p,
.dropdown-item,
.dropdown-header,
.navbar-item,
.navbar-more-btn,
.home-legacy__text,
.home-panel__text,
.home-panel__eyebrow,
.home-hint,
.home-stat__label,
.home-fortune__item,
.home-footer__inner {
    color: var(--ui-text-muted) !important;
}

.btn,
.btn-primary,
.btn-secondary,
.btn-danger,
.search-input,
.filter-select,
input,
textarea,
select {
    border-radius: var(--ui-radius-sm) !important;
    border: 1px solid var(--ui-border) !important;
    background: #fbf7f1 !important;
    color: var(--ui-text) !important;
    box-shadow: none !important;
}

.btn-primary:hover,
.btn-secondary:hover,
.btn-danger:hover,
.home-button:hover:not(:disabled),
.home-legacy__link:hover {
    border-color: var(--ui-border-strong) !important;
    box-shadow: var(--ui-shadow-hover) !important;
    transform: none !important;
}

input:focus,
textarea:focus,
select:focus,
.search-input:focus,
.filter-select:focus {
    outline: none !important;
    border-color: var(--ui-border-strong) !important;
    box-shadow: 0 0 0 3px rgba(156, 163, 175, 0.16) !important;
}

.dropdown-item {
    border-radius: var(--ui-radius-sm) !important;
    transition: background-color 150ms ease, color 150ms ease;
}

.dropdown-item:hover {
    background: rgba(194, 106, 46, 0.08) !important;
}

.home-legacy__link,
.home-button,
.btn,
.navbar-menu .navbar-item,
.navbar-more-btn,
.dropdown-item,
.theme-switcher,
.user-profile .avatar,
.navbar-toggle {
    transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease, box-shadow 150ms ease !important;
}

.dropdown-menu {
    background: rgba(255, 251, 245, 0.98) !important;
    border: 1px solid rgba(122, 109, 88, 0.14) !important;
    box-shadow: 0 16px 40px rgba(68, 55, 35, 0.10) !important;
}

.modal-overlay {
    background: rgba(15, 23, 42, 0.72) !important;
}

body.dark-mode {
    background: #1f1c18 !important;
    color: #e5e7eb !important;
}

html:has(body.dark-mode) {
    background: #1f1c18 !important;
}

body.dark-mode {
    background-image:
        radial-gradient(circle at top left, rgba(194, 106, 46, 0.14), transparent 24%),
        radial-gradient(circle at top right, rgba(159, 129, 86, 0.10), transparent 22%),
        linear-gradient(180deg, #26211c 0%, #1f1c18 54%, #191613 100%) !important;
}

body.dark-mode .card,
body.dark-mode .post-card,
body.dark-mode .group-card,
body.dark-mode .question-card,
body.dark-mode .dashboard-card,
body.dark-mode .modal-content,
body.dark-mode .forum-container .card,
body.dark-mode .questions-container .card,
body.dark-mode .home-legacy,
body.dark-mode .home-panel {
    background: rgba(44, 38, 32, 0.90) !important;
    border-color: rgba(214, 196, 171, 0.10) !important;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body.dark-mode .navbar-menu .navbar-item,
body.dark-mode .navbar-more-btn,
body.dark-mode .dropdown-item,
body.dark-mode .dropdown-header,
body.dark-mode .home-legacy__text,
body.dark-mode .home-panel__text,
body.dark-mode .home-panel__eyebrow,
body.dark-mode .home-hint,
body.dark-mode .home-stat__label,
body.dark-mode .home-fortune__item,
body.dark-mode .home-footer__inner,
body.dark-mode .stat-label,
body.dark-mode .info-label,
body.dark-mode .member-score,
body.dark-mode .group-count,
body.dark-mode .post-meta,
body.dark-mode .question-meta,
body.dark-mode .activity-description,
body.dark-mode .activity-time,
body.dark-mode .footer-content p {
    color: #cbd5e1 !important;
}

body.dark-mode .theme-switcher,
body.dark-mode .user-profile .avatar,
body.dark-mode .navbar-toggle,
body.dark-mode .search-input,
body.dark-mode .filter-select,
body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select,
body.dark-mode .btn,
body.dark-mode .btn-primary,
body.dark-mode .btn-secondary,
body.dark-mode .btn-danger,
body.dark-mode .home-button,
body.dark-mode .home-input,
body.dark-mode .home-legacy__link,
body.dark-mode .home-badge,
body.dark-mode .home-fortune__box {
    background: rgba(58, 50, 42, 0.92) !important;
    border-color: rgba(214, 196, 171, 0.10) !important;
    color: #e5e7eb !important;
}

body.dark-mode .dropdown-menu {
    background: rgba(49, 42, 35, 0.98) !important;
    border-color: rgba(214, 196, 171, 0.10) !important;
}

body.dark-mode .dropdown-item:hover {
    background: rgba(255, 255, 255, 0.06) !important;
}

body.dark-mode .home-legacy__link:hover,
body.dark-mode .home-button:hover:not(:disabled),
body.dark-mode .home-panel:hover {
    transform: none !important;
}

::selection {
    background: rgba(16, 163, 127, 0.16);
    color: var(--ui-text);
}

button:hover,
button:active,
.btn:hover,
.btn:active,
.btn-primary:hover,
.btn-primary:active,
.btn-secondary:hover,
.btn-secondary:active,
.btn-danger:hover,
.btn-danger:active,
.home-button:hover,
.home-button:active,
.home-link:hover,
.home-link:active,
.theme-switcher:hover,
.theme-switcher:active,
.navbar-toggle:hover,
.navbar-toggle:active {
    transform: none !important;
}

@media (max-width: 768px) {
    .main-container {
        width: calc(100% - 32px) !important;
        padding: 24px 0 48px !important;
    }

    .navbar {
        width: calc(100% - 16px) !important;
        max-width: calc(100% - 16px) !important;
        top: 8px !important;
        margin: 8px auto 12px !important;
    }

    .navbar-container {
        padding: 0 12px !important;
    }
}



.question-detail-container,
.forum-detail-container,
.profile-container {
    width: min(1120px, calc(100% - 48px)) !important;
    margin: 0 auto !important;
}

.profile-container {
    display: grid;
    gap: 24px;
}

.profile-content {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.25fr);
    gap: 24px;
}

.profile-header-card,
.question-detail-header,
.question-detail-content,
.answer-section,
.info-card,
.tags-module,
.post-detail,
.replies-list,
.reply-form-container {
    background: #fffdf9 !important;
    border: 1px solid rgba(122, 109, 88, 0.14) !important;
    border-radius: 22px !important;
    box-shadow: 0 12px 28px rgba(68, 55, 35, 0.06) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.related-discussions {
    background: #fffdf9 !important;
    border: none !important;
    border-radius: 22px !important;
    box-shadow: 0 12px 28px rgba(68, 55, 35, 0.06) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.question-detail-header,
.question-detail-content,
.answer-section,
.related-discussions,
.replies-list,
.reply-form-container,
.profile-header-card,
.profile-content>.card {
    overflow: visible;
    padding: 24px;
    position: relative;
    z-index: 1;
}

/* 确保内容不会被圆角遮�?*/
.question-content-text,
.answer-form,
.submitted-answer-preview {
    position: relative;
    z-index: 2;
}

/* 确保文本内容完整显示 */
.question-detail-title,
.question-content-text p,
.answer-form textarea {
    overflow: visible;
    white-space: normal;
    word-wrap: break-word;
}

.question-detail-header {
    padding-bottom: 20px;
}

.question-detail-content {
    padding-top: 20px;
}

.answer-section {
    padding-top: 20px;
}

.info-card,
.tags-module {
    padding: 20px;
    overflow: visible;
}

.tags-module {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tags-module #questionTags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-start;
}

.tags-module .tag {
    white-space: nowrap;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 500;
}

.no-attachments {
    font-size: 0.85rem;
    color: #9ca3af;
    margin-left: 8px;
    padding: 8px 0;
}

.answer-section .message {
    font-size: 0.85rem;
    color: #6b7280;
    margin-left: 8px;
    padding: 8px 12px;
    border-radius: 8px;
    background: #f9fafb;
}

body.dark-mode .answer-section .message {
    color: #9ca3af;
    background: rgba(255, 255, 255, 0.05);
}

/* 增大卡片上下间距 */
.question-detail-header,
.question-detail-content,
.answer-section,
.related-discussions,
.info-card,
.tags-module {
    margin-bottom: 24px;
}

.question-detail-title,
.post-title,
#profileUsername,
.profile-info h2,
.question-row-title,
.attachments-header,
.replies-header h3,
.card-header h3 {
    font-family: var(--ds-font) !important;
    letter-spacing: -0.03em !important;
    color: #22201c !important;
}

.question-detail-title,
.post-title,
#profileUsername,
.profile-info h2 {
    font-size: clamp(2rem, 3vw, 2.8rem) !important;
    line-height: 1.1 !important;
}

.question-content-text,
.post-content,
.reply-content,
.forum-markdown-body,
.activity-details,
.activity-text {
    color: #2f2a24 !important;
    line-height: 1.85 !important;
    font-size: 16px !important;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Global: Remove all borders from images */
img {
    border: none !important;
    border-color: transparent !important;
    border-width: 0 !important;
    border-style: none !important;
    box-shadow: none !important;
    outline: none !important;
}

.question-content-text img,
.forum-markdown-body img {
    max-width: 100%;
    height: auto;
    margin: 1rem 0;
}

.question-content-text pre,
.forum-markdown-body pre {
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-x: auto;
    margin: 1rem 0;
    padding: 1rem;
    background: #f8f5ef;
    border-radius: 8px;
}

.question-content-text p,
.post-content p,
.reply-content p,
.forum-markdown-body p {
    margin: 0 0 1.05em !important;
}

.question-content-text h1,
.question-content-text h2,
.question-content-text h3,
.post-content h1,
.post-content h2,
.post-content h3,
.reply-content h1,
.reply-content h2,
.reply-content h3,
.forum-markdown-body h1,
.forum-markdown-body h2,
.forum-markdown-body h3 {
    margin: 1.4em 0 0.55em !important;
    line-height: 1.2 !important;
}

.question-content-text ul,
.question-content-text ol,
.post-content ul,
.post-content ol,
.reply-content ul,
.reply-content ol,
.forum-markdown-body ul,
.forum-markdown-body ol {
    padding-left: 1.35rem !important;
}

.question-detail-meta,
.post-meta,
.discussion-meta,
.reply-time,
.activity-time,
.activity-details,
.info-label,
.stat-label {
    color: #746b60 !important;
}

.question-detail-meta,
.post-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 18px !important;
    font-size: 13px !important;
}

.profile-header {
    display: grid !important;
    grid-template-columns: auto 1fr;
    gap: 28px;
    align-items: center;
}

.profile-avatar .avatar-large {
    width: 112px !important;
    height: 112px !important;
    border-radius: 28px !important;
    background: #f5ede2 !important;
    border: 1px solid rgba(122, 109, 88, 0.12) !important;
    box-shadow: none !important;
}

.profile-stats {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px !important;
    margin-top: 18px !important;
}

.profile-stats .stat-item,
.info-card .info-item,
.info-grid .info-item,
.activity-item,
.post-reply,
.attachment-item {
    border-radius: 16px !important;
    background: transparent !important;
    border: 1px solid rgba(122, 109, 88, 0.10) !important;
    box-shadow: none !important;
}

.discussion-item {
    border-radius: 0 !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid rgba(122, 109, 88, 0.10) !important;
    box-shadow: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
}

.profile-stats .stat-item {
    padding: 16px !important;
}

.profile-stats .stat-value {
    font-family: var(--ds-font) !important;
    font-size: 30px !important;
    color: #22201c !important;
    letter-spacing: -0.05em !important;
}

.info-grid .info-item,
.info-card .info-item {
    padding: 14px 16px !important;
    margin-bottom: 10px !important;
}

.activity-item,
.discussion-item,
.post-reply {
    padding: 16px 18px !important;
}

.reply-form-container {
    padding: 24px !important;
}

.reply-content-input,
#answer,
.form-group textarea,
.form-group input[type="text"],
.form-group select {
    background: #fbf7f1 !important;
    border: 1px solid rgba(122, 109, 88, 0.16) !important;
    border-radius: 16px !important;
    color: #22201c !important;
    box-shadow: none !important;
}

.question-tag,
.tag,
.role-tag,
.question-difficulty,
.difficulty-tag {
    border-radius: 999px !important;
}

.question-tag,
.tag {
    background: rgba(194, 106, 46, 0.10) !important;
    color: #70411f !important;
    border: 1px solid rgba(194, 106, 46, 0.10) !important;
}

.question-image,
.question-content-text img,
.post-images img,
.reply-images img,
.attachment-item img {
    border-radius: 18px !important;
    border: none !important;
    box-shadow: none !important;
}

.question-images .question-image,
.question-detail-content .question-image,
.question-detail-content .question-content-text img {
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

.question-image-clickable {
    cursor: zoom-in;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
}

.question-image-clickable:hover,
.question-image-clickable:focus,
.question-image-clickable:active,
.question-image-clickable:focus-visible {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    transform: none !important;
}

.question-images .question-image-button,
.question-detail-content .question-image-button {
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.dark-mode .profile-header-card,
body.dark-mode .question-detail-header,
body.dark-mode .question-detail-content,
body.dark-mode .answer-section,
body.dark-mode .info-card,
body.dark-mode .tags-module,
body.dark-mode .related-discussions,
body.dark-mode .post-detail,
body.dark-mode .replies-list,
body.dark-mode .reply-form-container,
body.dark-mode .profile-content>.card {
    background: #2d261f !important;
    border-color: rgba(220, 205, 184, 0.10) !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.20) !important;
}

body.dark-mode .question-detail-title,
body.dark-mode .post-title,
body.dark-mode .profile-info h2,
body.dark-mode .question-row-title,
body.dark-mode .attachments-header,
body.dark-mode .replies-header h3,
body.dark-mode .card-header h3 {
    color: #f7eee4 !important;
}

body.dark-mode .question-content-text,
body.dark-mode .post-content,
body.dark-mode .reply-content,
body.dark-mode .forum-markdown-body,
body.dark-mode .activity-details,
body.dark-mode .activity-text,
body.dark-mode .info-value,
body.dark-mode .profile-stats .stat-value {
    color: #efe2d2 !important;
}

body.dark-mode .question-detail-meta,
body.dark-mode .post-meta,
body.dark-mode .discussion-meta,
body.dark-mode .reply-time,
body.dark-mode .activity-time,
body.dark-mode .activity-details,
body.dark-mode .info-label,
body.dark-mode .stat-label {
    color: #c6b8a7 !important;
}

body.dark-mode .profile-avatar .avatar-large,
body.dark-mode .profile-stats .stat-item,
body.dark-mode .info-card .info-item,
body.dark-mode .info-grid .info-item,
body.dark-mode .activity-item,
body.dark-mode .discussion-item,
body.dark-mode .post-reply,
body.dark-mode .attachment-item {
    background: transparent !important;
    border-color: rgba(220, 205, 184, 0.08) !important;
}

body.dark-mode .reply-content-input,
body.dark-mode #answer,
body.dark-mode .form-group textarea,
body.dark-mode .form-group input[type="text"],
body.dark-mode .form-group select {
    background: #3a3128 !important;
    border-color: rgba(220, 205, 184, 0.10) !important;
    color: #f1e6d8 !important;
}

body.dark-mode .tag {
    background: rgba(194, 106, 46, 0.18) !important;
    color: #f1d7bc !important;
    border-color: rgba(194, 106, 46, 0.12) !important;
}

body.dark-mode .question-tag {
    background: rgba(156, 163, 175, 0.2) !important;
    color: #D1D5DB !important;
    border-color: rgba(156, 163, 175, 0.15) !important;
}

body.dark-mode .question-image,
body.dark-mode .question-content-text img,
body.dark-mode .post-images img,
body.dark-mode .reply-images img,
body.dark-mode .attachment-item img {
    border: none !important;
    box-shadow: none !important;
}

@media (max-width: 900px) {
    .profile-content {
        grid-template-columns: 1fr;
    }

    .profile-header {
        grid-template-columns: 1fr;
    }

    .profile-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .question-detail-container,
    .forum-detail-container,
    .profile-container {
        width: calc(100% - 32px) !important;
    }
}

@media (max-width: 640px) {
    .profile-stats {
        grid-template-columns: 1fr;
    }

    .question-detail-title,
    .post-title,
    #profileUsername,
    .profile-info h2 {
        font-size: 1.8rem !important;
    }

    .question-detail-content,
    .answer-section,
    .related-discussions,
    .replies-list,
    .reply-form-container,
    .profile-header-card,
    .profile-content>.card {
        padding: 18px !important;
    }
}


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

.navbar {
    top: 12px !important;
    margin: 12px auto 18px !important;
    background: rgba(255, 252, 246, 0.94) !important;
    border: 1px solid rgba(122, 109, 88, 0.12) !important;
    box-shadow: 0 14px 34px rgba(79, 60, 37, 0.10) !important;
}

.navbar-menu {
    background: transparent !important;
}

.dropdown-menu {
    background: rgba(255, 252, 246, 0.98) !important;
    border: 1px solid rgba(122, 109, 88, 0.12) !important;
    box-shadow: 0 16px 34px rgba(79, 60, 37, 0.12) !important;
}

body.dark-mode,
html:has(body.dark-mode) {
    background: #262522 !important;
    color: #efe4d5 !important;
}

body.dark-mode .background-colors,
body.dark-mode .floating-squares {
    display: none !important;
}

body.dark-mode .dropdown-menu {
    background: rgba(46, 45, 42, 0.98) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.26) !important;
}

body.dark-mode .card,
body.dark-mode .modal-content,
body.dark-mode .profile-header-card,
body.dark-mode .question-detail-header,
body.dark-mode .question-detail-content,
body.dark-mode .answer-section,
body.dark-mode .info-card,
body.dark-mode .tags-module,
body.dark-mode .related-discussions,
body.dark-mode .post-detail,
body.dark-mode .replies-list,
body.dark-mode .reply-form-container,
body.dark-mode .profile-content>.card,
body.dark-mode .daily-question-card,
body.dark-mode .rankings-card,
body.dark-mode .calendar-card,
body.dark-mode .member-card,
body.dark-mode .group-card,
body.dark-mode .duty-card {
    background: #32302c !important;
    background-image: none !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.20) !important;
}

body.dark-mode .profile-avatar .avatar-large,
body.dark-mode .profile-stats .stat-item,
body.dark-mode .info-card .info-item,
body.dark-mode .info-grid .info-item,
body.dark-mode .activity-item,
body.dark-mode .discussion-item,
body.dark-mode .post-reply,
body.dark-mode .attachment-item,
body.dark-mode .ranking-item,
body.dark-mode .member-item,
body.dark-mode .group-member,
body.dark-mode .calendar-day {
    background: transparent !important;
    background-image: none !important;
    border-color: rgba(255, 255, 255, 0.07) !important;
}

body.dark-mode .card::before,
body.dark-mode .card::after,
body.dark-mode .profile-header-card::before,
body.dark-mode .profile-header-card::after,
body.dark-mode .profile-content>.card::before,
body.dark-mode .profile-content>.card::after,
body.dark-mode .question-detail-header::before,
body.dark-mode .question-detail-content::before,
body.dark-mode .answer-section::before,
body.dark-mode .post-detail::before,
body.dark-mode .replies-list::before,
body.dark-mode .reply-form-container::before,
body.dark-mode .forum-container .card::before,
body.dark-mode .forum-container .card::after {
    display: none !important;
    content: none !important;
}

body.dark-mode .profile-header-card,
body.dark-mode .profile-content>.card,
body.dark-mode .forum-container .card,
body.dark-mode .question-detail-header,
body.dark-mode .question-detail-content,
body.dark-mode .answer-section,
body.dark-mode .related-discussions,
body.dark-mode .replies-list,
body.dark-mode .reply-form-container {
    filter: none !important;
}

body.dark-mode .profile-header,
body.dark-mode .profile-content .card-header,
body.dark-mode .profile-content .card-body,
body.dark-mode .profile-content .info-grid,
body.dark-mode .profile-content .activity-list {
    background: transparent !important;
    background-image: none !important;
}

body.dark-mode .profile-avatar .avatar-large {
    background: #3a3733 !important;
    box-shadow: none !important;
}

body.dark-mode .card,
body.dark-mode .modal-content,
body.dark-mode .profile-header-card,
body.dark-mode .profile-content>.card,
body.dark-mode .forum-container .card,
body.dark-mode .questions-container .card,
body.dark-mode .question-detail-header,
body.dark-mode .question-detail-content,
body.dark-mode .answer-section,
body.dark-mode .related-discussions,
body.dark-mode .replies-list,
body.dark-mode .reply-form-container,
body.dark-mode .member-card,
body.dark-mode .group-card,
body.dark-mode .duty-card,
body.dark-mode .rankings-card,
body.dark-mode .calendar-card,
body.dark-mode .daily-question-card,
body.dark-mode .info-card,
body.dark-mode .tags-module,
body.dark-mode .post-detail {
    background: #32302c !important;
    background-image: none !important;
}

body.dark-mode .card::before,
body.dark-mode .card::after,
body.dark-mode .modal-content::before,
body.dark-mode .modal-content::after,
body.dark-mode .member-card::before,
body.dark-mode .member-card::after,
body.dark-mode .group-card::before,
body.dark-mode .group-card::after,
body.dark-mode .duty-card::before,
body.dark-mode .duty-card::after,
body.dark-mode .rankings-card::before,
body.dark-mode .rankings-card::after,
body.dark-mode .calendar-card::before,
body.dark-mode .calendar-card::after,
body.dark-mode .daily-question-card::before,
body.dark-mode .daily-question-card::after,
body.dark-mode .info-card::before,
body.dark-mode .info-card::after,
body.dark-mode .tags-module::before,
body.dark-mode .tags-module::after,
body.dark-mode .post-detail::before,
body.dark-mode .post-detail::after {
    content: none !important;
    display: none !important;
}

body.dark-mode .member-avatar {
    background: #3a3733 !important;
    background-image: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: none !important;
}

.member-avatar::before,
.member-avatar::after {
    content: none !important;
    display: none !important;
}

body.dark-mode .member-card.selected .member-avatar {
    background: #3a3733 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    box-shadow: none !important;
}

body.dark-mode .member-card.selected .member-avatar::after {
    content: none !important;
    display: none !important;
}

body.dark-mode .question-detail-title,
body.dark-mode .post-title,
body.dark-mode .profile-info h2,
body.dark-mode .card-header h3,
body.dark-mode .section-title,
body.dark-mode .page-title,
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3 {
    color: #f8efe3 !important;
}

body.dark-mode .question-content-text,
body.dark-mode .post-content,
body.dark-mode .reply-content,
body.dark-mode .forum-markdown-body,
body.dark-mode .activity-details,
body.dark-mode .activity-text,
body.dark-mode .info-value,
body.dark-mode .profile-stats .stat-value,
body.dark-mode .card p,
body.dark-mode .member-name,
body.dark-mode .group-name,
body.dark-mode .duty-name {
    color: #eadfce !important;
}

body.dark-mode .member-name.role-owner,
[data-theme="dark"] .member-name.role-owner {
    color: #9d3dd8 !important;
}

body.dark-mode .member-name.role-admin,
[data-theme="dark"] .member-name.role-admin {
    color: #fe4c61 !important;
}

body.dark-mode .member-name.role-scorer,
[data-theme="dark"] .member-name.role-scorer {
    color: #ff9500 !important;
}

body.dark-mode .question-detail-meta,
body.dark-mode .post-meta,
body.dark-mode .discussion-meta,
body.dark-mode .reply-time,
body.dark-mode .activity-time,
body.dark-mode .info-label,
body.dark-mode .stat-label,
body.dark-mode .muted,
body.dark-mode .text-muted,
body.dark-mode .member-meta,
body.dark-mode .group-meta,
body.dark-mode .duty-meta {
    color: #b8afa3 !important;
}

body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select,
body.dark-mode .search-box,
body.dark-mode .reply-content-input,
body.dark-mode #answer {
    background: #3a3733 !important;
    color: #f1e6d8 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: none !important;
}

body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
    color: #a99a89 !important;
}

@media (max-width: 801px) {
    .navbar {
        top: 8px !important;
        margin: 8px auto 12px !important;
    }

    .navbar-menu,
    body.dark-mode .navbar-menu {
        background: rgba(255, 252, 246, 0.98) !important;
        border: 1px solid rgba(122, 109, 88, 0.12) !important;
        box-shadow: 0 12px 28px rgba(79, 60, 37, 0.10) !important;
    }

    body.dark-mode .navbar-menu {
        background: rgba(46, 45, 42, 0.98) !important;
        border-color: rgba(255, 255, 255, 0.08) !important;
        box-shadow: 0 14px 30px rgba(0, 0, 0, 0.24) !important;
    }
}


.forum-post .post-title,
.forum-posts .post-title {
    font-size: 1.08rem !important;
    line-height: 1.45 !important;
    letter-spacing: -0.01em !important;
}

.post-detail .post-title,
.forum-detail-container .post-title {
    font-size: clamp(1.55rem, 2.2vw, 2rem) !important;
    line-height: 1.25 !important;
    letter-spacing: -0.025em !important;
}

@media (max-width: 640px) {

    .forum-post .post-title,
    .forum-posts .post-title {
        font-size: 1rem !important;
    }

    .post-detail .post-title,
    .forum-detail-container .post-title {
        font-size: 1.45rem !important;
    }
}


body:not(.dark-mode) .card,
body:not(.dark-mode) .modal-content,
body:not(.dark-mode) .group-card,
body:not(.dark-mode) .questions-container .card,
body:not(.dark-mode) .member-card,
body:not(.dark-mode) .duty-card,
body:not(.dark-mode) .rankings-card,
body:not(.dark-mode) .calendar-card,
body:not(.dark-mode) .daily-question-card,
body:not(.dark-mode) .info-card,
body:not(.dark-mode) .tags-module,
body:not(.dark-mode) .post-detail,
body:not(.dark-mode) .profile-header-card,
body:not(.dark-mode) .profile-content>.card,
body:not(.dark-mode) .question-detail-header,
body:not(.dark-mode) .question-detail-content,
body:not(.dark-mode) .answer-section,
body:not(.dark-mode) .related-discussions,
body:not(.dark-mode) .replies-list,
body:not(.dark-mode) .reply-form-container {
    background-image: none !important;
}

body:not(.dark-mode) .card::before,
body:not(.dark-mode) .card::after,
body:not(.dark-mode) .modal-content::before,
body:not(.dark-mode) .modal-content::after,
body:not(.dark-mode) .group-card::before,
body:not(.dark-mode) .group-card::after,
body:not(.dark-mode) .questions-container .card::before,
body:not(.dark-mode) .questions-container .card::after,
body:not(.dark-mode) .member-card::before,
body:not(.dark-mode) .member-card::after,
body:not(.dark-mode) .profile-header-card::before,
body:not(.dark-mode) .profile-header-card::after,
body:not(.dark-mode) .profile-content>.card::before,
body:not(.dark-mode) .profile-content>.card::after {
    content: none !important;
    display: none !important;
}

body:not(.dark-mode) .group-card,
body:not(.dark-mode) .questions-container .card,
body:not(.dark-mode) .profile-header-card,
body:not(.dark-mode) .profile-content>.card {
    background: #fffdf9 !important;
}

body.dark-mode .search-box,
body.dark-mode .search-box input,
body.dark-mode .search-input,
body.dark-mode .filter-select,
body.dark-mode .form-input,
body.dark-mode .role-select,
body.dark-mode #questionsSearch,
body.dark-mode #userSearch,
body.dark-mode #difficultyFilter,
body.dark-mode #categoryFilter {
    background: #3a3733 !important;
    background-image: none !important;
    color: #f1e6d8 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: none !important;
}

body.dark-mode .questions-search-bar,
body.dark-mode .role-management,
body.dark-mode .user-role-list,
body.dark-mode .user-role-item,
body.dark-mode .group-card,
body.dark-mode .member-card,
body.dark-mode .duty-card {
    background-image: none !important;
}

body.dark-mode .group-card::before,
body.dark-mode .group-card::after,
body.dark-mode .questions-container .card::before,
body.dark-mode .questions-container .card::after,
body.dark-mode .member-card::before,
body.dark-mode .member-card::after,
body.dark-mode .duty-card::before,
body.dark-mode .duty-card::after,
body.dark-mode .rankings-card::before,
body.dark-mode .rankings-card::after,
body.dark-mode .calendar-card::before,
body.dark-mode .calendar-card::after {
    content: none !important;
    display: none !important;
}

.owner-dashboard {
    max-width: 1240px !important;
    padding: 24px !important;
}

.owner-dashboard>h1 {
    margin: 0 0 18px !important;
    font-size: clamp(2rem, 3.2vw, 2.8rem) !important;
    line-height: 1.1 !important;
}

.owner-dashboard .features-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 16px !important;
    align-items: start !important;
}

/* card-stack = 付费意向 + 说明 stacked in same column */
.owner-dashboard .card-stack {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    min-width: 0 !important;
}

/* 用户角色管理: full width */
.owner-dashboard .features-grid > .card:last-child {
    grid-column: 1 / -1 !important;
}

.owner-dashboard .card,
.owner-dashboard .card-compact {
    min-height: auto !important;
}

/* Membership intent survey card — compact data rows */
.membership-intent-total {
    margin: 0 0 10px;
    font-size: 13px;
    color: var(--text-secondary);
}

.membership-intent-total strong {
    color: var(--text-primary);
    font-size: 15px;
}

.membership-intent-list {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.membership-intent-row {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) 44px;
    align-items: center;
    gap: 8px;
}

.membership-intent-meta {
    min-width: 0;
}

.membership-intent-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.membership-intent-price {
    display: none;
}

.membership-intent-bar-wrap {
    height: 6px;
    border-radius: 3px;
    background: color-mix(in srgb, var(--text-secondary, #888) 12%, transparent);
    overflow: hidden;
}

.membership-intent-bar {
    height: 100%;
    border-radius: 3px;
    background: var(--text-primary, #111);
    min-width: 2px;
    transition: width 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

.membership-intent-count {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    text-align: right;
    white-space: nowrap;
}

.membership-intent-count small {
    display: none;
}

.owner-dashboard .card-body {
    padding: 16px 20px !important;
}

.owner-dashboard .card-body p {
    font-size: 13px !important;
    line-height: 1.5 !important;
    margin-bottom: 12px !important;
}

.owner-dashboard .card-compact .card-header {
    padding: 20px 22px 20px 22px !important;
}

.owner-dashboard .card-compact .card-header-stacked {
    display: block !important;
}

.owner-dashboard .card-compact .card-header-top {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 12px !important;
}

.owner-dashboard .card-compact .card-header-desc {
    margin: 0 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    color: var(--text-secondary) !important;
}

.owner-dashboard .card-compact .btn-sm i {
    margin-left: 6px !important;
    font-size: 15px !important;
    opacity: 1 !important;
}

.owner-dashboard .card-notice {
    padding: 14px 18px !important;
    background: var(--surface-secondary, #f8f8f8) !important;
    border-top: 1px solid var(--border-color, #e0e0e0) !important;
    border-radius: 0 0 24px 24px !important;
    display: flex !important;
    align-items: start !important;
    gap: 10px !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
    color: var(--text-secondary) !important;
}

.owner-dashboard .card-notice i {
    margin-top: 2px !important;
    flex-shrink: 0 !important;
    color: var(--text-tertiary, #999) !important;
}

.owner-dashboard .card-with-notice .card-header {
    border-radius: 24px 24px 0 0 !important;
}

.owner-dashboard .search-box {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px !important;
    margin-bottom: 16px !important;
}

.owner-dashboard .user-role-list {
    max-height: 460px !important;
}

.owner-dashboard .user-role-item {
    gap: 16px !important;
    padding: 14px 16px !important;
}

.owner-dashboard .role-controls {
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    gap: 10px !important;
}

.owner-dashboard .role-select {
    min-width: 132px !important;
    height: 40px !important;
}

@media (max-width: 900px) {
    .owner-dashboard .features-grid {
        grid-template-columns: 1fr !important;
    }

    .owner-dashboard .search-box {
        grid-template-columns: 1fr !important;
    }

    .owner-dashboard .user-role-item {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .owner-dashboard .role-controls {
        width: 100% !important;
        justify-content: flex-start !important;
    }
}


.profile-content {
    align-items: start !important;
}

.profile-info-card,
.profile-activity-card {
    display: flex !important;
    flex-direction: column !important;
    min-height: 360px;
}

.profile-info-card .card-body,
.profile-activity-card .card-body {
    flex: 1 1 auto;
    min-height: 0;
}

.profile-activity-card .card-body {
    overflow: hidden;
}

.profile-activity-card .activity-list {
    height: 100%;
    min-height: 0;
    overflow-y: auto;
    padding-right: 6px;
    scrollbar-width: thin;
    scrollbar-color: rgba(122, 109, 88, 0.32) transparent;
}

.profile-activity-card .activity-list::-webkit-scrollbar {
    width: 8px;
}

.profile-activity-card .activity-list::-webkit-scrollbar-track {
    background: transparent;
}

.profile-activity-card .activity-list::-webkit-scrollbar-thumb {
    background: rgba(122, 109, 88, 0.22);
    border-radius: 999px;
}

.profile-activity-card .activity-list::-webkit-scrollbar-thumb:hover {
    background: rgba(122, 109, 88, 0.32);
}

body.dark-mode .profile-activity-card .activity-list {
    scrollbar-color: rgba(220, 205, 184, 0.24) transparent;
}

body.dark-mode .profile-activity-card .profile-activity-item {
    background: rgba(30, 30, 40, 0.8) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

body.dark-mode .profile-activity-card .activity-list::-webkit-scrollbar-thumb {
    background: rgba(220, 205, 184, 0.18);
}

body.dark-mode .profile-activity-card .activity-list::-webkit-scrollbar-thumb:hover {
    background: rgba(220, 205, 184, 0.28);
}

@media (max-width: 900px) {

    .profile-info-card,
    .profile-activity-card {
        min-height: auto;
    }

    .profile-activity-card .activity-list {
        max-height: none;
        overflow-y: visible;
        padding-right: 0;
    }
}


.badge,
.tag,
.status-badge,
.question-tag,
.difficulty-tag,
.dc-status-badge,
.home-badge,
.member-badge,
.role-tag {
    border-radius: 2px !important;
}

#profileUsername,
.profile-info h2,
.user-name,
.ranking-username,
.user-info h3,
.member-name {
    align-items: center;
}

#profileUsername .role-tag,
.profile-info h2 .role-tag,
.ranking-username .role-tag,
.user-info h3 .role-tag,
.member-name .role-tag,
.dropdown-header .role-tag {
    margin-left: 0.12rem !important;
}


.question-detail-title .question-problem-no,
#questionNumber,
.question-content-text,
.question-content-text p,
.question-content-text li,
.question-content-text blockquote,
.question-content-text code,
.question-content-text pre,
.question-content-text h1,
.question-content-text h2,
.question-content-text h3,
.question-content-text h4,
.question-content-text h5,
.question-content-text h6 {
    font-family: var(--ds-font) !important;
    letter-spacing: 0 !important;
}

.question-detail-title .question-problem-no,
#questionNumber {
    font-weight: 700 !important;
}

.question-detail-title,
.question-detail-title .question-problem-no {
    font-size: clamp(1.6rem, 2.2vw, 2rem) !important;
    line-height: 1.2 !important;
}


.user-profile .dropdown-item,
#dropdownMenu .dropdown-item,
.dropdown-menu .dropdown-item {
    border-radius: 0 !important;
}


.class-members-grid .member-card,
body:not(.dark-mode) .class-members-grid .member-card,
body.dark-mode .class-members-grid .member-card {
    background: transparent !important;
    background-image: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.class-members-grid .member-card::before,
.class-members-grid .member-card::after,
body.dark-mode .class-members-grid .member-card::before,
body.dark-mode .class-members-grid .member-card::after {
    content: none !important;
    display: none !important;
}


.select-mode-toggle {
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    font: inherit !important;
}

.select-mode-toggle:hover,
.select-mode-toggle:focus,
.select-mode-toggle:active,
.select-mode-toggle.active {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: none !important;
}

.select-mode-toggle {
    color: var(--text-secondary) !important;
    text-decoration: none !important;
    cursor: pointer !important;
}

.select-mode-toggle:hover {
    color: var(--text-primary) !important;
    text-decoration: none !important;
}

.select-mode-toggle.active {
    font-weight: 600 !important;
    color: var(--text-primary) !important;
}


.profile-activity-card .activity-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.9rem !important;
}

.profile-activity-card .activity-item {
    position: relative !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 0.9rem !important;
    padding: 16px 88px 16px 18px !important;
    min-height: 0 !important;
    overflow: visible !important;
    background-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: var(--border-radius, 8px) !important;
}

/* Dark mode: ensure activity items are transparent */
body.dark-mode .profile-activity-card .activity-item {
    background-color: transparent !important;
    background: transparent !important;
}

.profile-activity-card .activity-icon {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    font-size: 1rem !important;
    margin-top: 2px !important;
    flex: 0 0 34px !important;
}

.profile-activity-card .activity-content {
    min-width: 0 !important;
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    gap: 0.35rem !important;
}

.profile-activity-card .profile-activity-summary,
.profile-activity-card .profile-activity-reason,
.profile-activity-card .profile-activity-stamp {
    display: block !important;
    margin: 0 !important;
    white-space: normal !important;
    word-break: break-word !important;
    line-height: 1.55 !important;
}

.profile-activity-card .profile-activity-summary {
    font-size: 0.98rem !important;
    font-weight: 600 !important;
    color: #2f2a24 !important;
}

.profile-activity-card .profile-activity-reason {
    font-size: 0.9rem !important;
    color: #746b60 !important;
}

body.dark-mode .profile-activity-card .profile-activity-summary {
    color: #efe2d2 !important;
}

body.dark-mode .profile-activity-card .profile-activity-reason {
    color: #b8afa3 !important;
}

.profile-activity-card .profile-activity-stamp {
    font-size: 0.8rem !important;
    color: #746b60 !important;
}

body.dark-mode .profile-activity-card .profile-activity-stamp {
    color: #c6b8a7 !important;
}

.profile-activity-card .revoke-btn {
    position: absolute !important;
    top: 16px !important;
    right: 16px !important;
    margin: 0 !important;
    align-self: auto !important;
}

@media (min-width: 901px) {
    .profile-content {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        align-items: start !important;
    }

    .profile-activity-card {
        display: flex !important;
        flex-direction: column !important;
        height: 360px !important;
        min-height: 360px !important;
        align-self: start !important;
    }

    .profile-info-card {
        height: auto !important;
        min-height: 0 !important;
        align-self: start !important;
    }

    .profile-info-card .card-body,
    .profile-activity-card .card-body {
        flex: 1 1 auto !important;
        min-height: 0 !important;
    }

    .profile-activity-card .card-body {
        overflow: hidden !important;
    }

    .profile-activity-card .activity-list {
        height: 100% !important;
        overflow-y: auto !important;
        padding-right: 6px !important;
    }
}

@media (max-width: 900px) {

    .profile-info-card,
    .profile-activity-card {
        height: auto !important;
        min-height: auto !important;
    }

    .profile-activity-card .activity-list {
        overflow-y: visible !important;
        padding-right: 0 !important;
    }
}


.theme-switcher {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
}

.theme-switcher i {
    font-size: 1.1rem !important;
}


@media (max-width: 640px) {
    .question-row {
        grid-template-columns: 20px minmax(0, 1fr) !important;
        gap: 0.75rem !important;
        padding: 0.85rem 1rem !important;
    }

    .question-row-title-module {
        min-width: 0 !important;
    }

    .question-row-title-module .question-title-text,
    .question-row-tags {
        display: none !important;
    }

    .question-row-title-module .question-problem-no {
        min-width: 0 !important;
        font-size: 0.98rem !important;
    }
}


body.dark-mode .questions-container .questions-search-bar {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
}

body.dark-mode .questions-container .search-box {
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
    gap: 14px !important;
}

body.dark-mode .questions-container #questionsSearch,
body.dark-mode .questions-container #difficultyFilter,
body.dark-mode .questions-container #categoryFilter {
    background: #32302c !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #efe4d5 !important;
    box-shadow: none !important;
}

body.dark-mode .questions-container #questionsSearch::placeholder {
    color: #ab9d8d !important;
}

body.dark-mode .questions-container #uploadQuestionBtn {
    background: #5a554e !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    color: #f5ede2 !important;
    box-shadow: none !important;
}

body.dark-mode .questions-container #uploadQuestionBtn:hover {
    background: #635d56 !important;
}


.profile-activity-card #activityList {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

.profile-activity-card .profile-activity-item {
    position: relative !important;
    display: flex !important;
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 14px !important;
    padding: 16px !important;
    margin-bottom: 10px !important;
    background: rgba(255, 255, 255, 0.8) !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08) !important;
    min-height: 0 !important;
    overflow: visible !important;
}

.profile-activity-card .profile-activity-icon {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    margin: 2px 0 0 !important;
    flex: 0 0 34px !important;
    font-size: 1rem !important;
    background: rgba(255, 255, 255, 0.8) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

body.dark-mode .profile-activity-card .profile-activity-icon {
    background: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

.profile-activity-card .profile-activity-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.3rem !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
}

.profile-activity-card .profile-activity-summary,
.profile-activity-card .profile-activity-reason,
.profile-activity-card .profile-activity-stamp {
    margin: 0 !important;
    display: block !important;
    white-space: normal !important;
    word-break: break-word !important;
}

.profile-activity-card .profile-activity-summary {
    font-size: 0.98rem !important;
    line-height: 1.45 !important;
    font-weight: 600 !important;
}

.profile-activity-card .profile-activity-reason {
    font-size: 0.9rem !important;
    line-height: 1.45 !important;
    color: #746b60 !important;
}

.profile-activity-card .profile-activity-stamp {
    font-size: 0.8rem !important;
    line-height: 1.3 !important;
    color: #746b60 !important;
}

body.dark-mode .profile-activity-card .profile-activity-summary {
    color: #efe2d2 !important;
}

body.dark-mode .profile-activity-card .profile-activity-reason {
    color: #b8afa3 !important;
}

body.dark-mode .profile-activity-card .profile-activity-stamp {
    color: #c6b8a7 !important;
}

.profile-activity-card .profile-revoke-btn {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    margin: 0 !important;
    align-self: auto !important;
    background: transparent !important;
    border: 1px solid #ccc !important;
    border-radius: 999px !important;
    padding: 6px 12px !important;
    font-size: 0.8rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    cursor: pointer !important;
}

.profile-activity-card .profile-revoke-btn:hover {
    background: #f0f0f0 !important;
    border-color: #999 !important;
}

body.dark-mode .profile-activity-card .profile-revoke-btn {
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: rgba(255, 255, 255, 0.8) !important;
}

body.dark-mode .profile-activity-card .profile-revoke-btn:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
}


@media (min-width: 802px) {
    .navbar {
        width: min(1320px, calc(100% - 72px)) !important;
        max-width: min(1320px, calc(100% - 72px)) !important;
        border-radius: 999px !important;
        padding: 10px 14px !important;
        box-shadow: none !important;
    }

    .navbar-container {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 18px !important;
        min-height: 76px !important;
    }

    .navbar-left,
    .navbar-right {
        display: flex !important;
        align-items: center !important;
        gap: 14px !important;
    }

    .navbar-left {
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    .navbar-menu {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        flex-wrap: nowrap !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    .navbar-menu .navbar-item {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 54px !important;
        padding: 0 22px !important;
        border-radius: 999px !important;
        margin: 0 !important;
        font-size: 1rem !important;
        font-weight: 600 !important;
        letter-spacing: -0.01em !important;
        background: transparent !important;
        box-shadow: none !important;
        white-space: nowrap !important;
    }

    .navbar-menu .navbar-item:hover {
        transform: none !important;
    }

    .navbar-menu .navbar-item.active {
        transform: none !important;
    }

    .theme-switcher,
    .user-profile .avatar {
        border-radius: 999px !important;
        width: 46px !important;
        height: 46px !important;
        min-width: 46px !important;
        min-height: 46px !important;
        box-shadow: none !important;
    }

    .user-profile {
        padding: 0 !important;
        background: transparent !important;
    }

    .user-profile:hover {
        background: transparent !important;
    }
}


.profile-info-card {
    min-height: 0 !important;
    height: fit-content !important;
    align-self: start !important;
}

.profile-info-card .card-body {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
}

.profile-info-card .info-grid {
    gap: 10px !important;
}

.profile-info-card .info-item,
.profile-info-card .info-grid .info-item {
    padding: 12px 14px !important;
    margin-bottom: 0 !important;
}


html {
    background: #f5f3f1 !important;
}

body {
    background-color: #f5f3f1 !important;
}

html:has(body.dark-mode),
body.dark-mode {
    background: #1c1917 !important;
}

.navbar {
    --nav-shell-radius: 999px;
    --nav-shell-padding: 0px;
    --nav-rail-radius: calc(var(--nav-shell-radius) - 10px);
    --nav-item-radius: calc(var(--nav-shell-radius) - 14px);
    --nav-shell-bg: #f7f1e8;
    --nav-shell-border: rgba(120, 111, 98, 0.18);
    --nav-rail-bg: #efe7dc;
    --nav-item-hover-bg: #e8ddd0;
    --nav-item-active-bg: #ddd0c1;
    --nav-action-bg: #ece2d6;
    --nav-shadow: 0 10px 24px rgba(28, 25, 23, 0.08);
}

.navbar::before,
.navbar::after {
    content: none !important;
    display: none !important;
}

@media (min-width: 802px) {
    .navbar {
        position: sticky !important;
        top: 12px !important;
        width: fit-content !important;
        max-width: calc(100% - 36px) !important;
        margin: 10px auto 16px !important;
        padding: var(--nav-shell-padding) !important;
        border-radius: 0 !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .navbar-container {
        width: auto !important;
        min-height: 40px !important;
        gap: 5px !important;
    }

    .navbar-left,
    .navbar-right {
        gap: 6px !important;
    }

    .navbar-left {
        flex: 0 1 auto !important;
        min-width: 0 !important;
    }

    .navbar-menu {
        display: flex !important;
        align-items: center !important;
        gap: 2px !important;
        flex: 0 1 auto !important;
        min-width: 0 !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        white-space: nowrap !important;
        height: 100% !important;
        padding: 2px !important;
        border-radius: var(--nav-rail-radius) !important;
        background: rgba(247, 241, 232, 0.72) !important;
        border: 1px solid var(--nav-shell-border) !important;
        box-shadow: var(--nav-shadow) !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }

    .navbar-menu::-webkit-scrollbar {
        display: none !important;
    }

    .navbar-menu .navbar-item {
        min-height: 36px !important;
        padding: 0 11px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
        border-radius: var(--nav-item-radius) !important;
        font-size: 0.86rem !important;
        font-weight: 600 !important;
        font-synthesis: none !important;
        line-height: 1 !important;
        letter-spacing: -0.01em !important;
        flex: 0 0 auto !important;
        overflow: visible !important;
        text-overflow: clip !important;
        background: transparent !important;
        box-shadow: none !important;
        border: 1px solid transparent !important;
        color: var(--text-secondary) !important;
    }

    .navbar-menu .navbar-item:hover {
        color: var(--text-primary) !important;
        font-weight: 600 !important;
        border-color: transparent !important;
    }

    .navbar-menu .navbar-item.active {
        color: var(--text-primary) !important;
        font-weight: 600 !important;
        border-color: transparent !important;
        box-shadow: none !important;
    }

    .theme-switcher,
    .user-profile .avatar,
    .navbar-toggle,
    .navbar-more-btn {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        min-height: 34px !important;
        border-radius: var(--nav-item-radius) !important;
        border: 1px solid transparent !important;
        color: var(--text-primary) !important;
        box-shadow: none !important;
    }

    .theme-switcher:hover,
    .user-profile .avatar:hover,
    .navbar-toggle:hover,
    .navbar-more-btn:hover {}

    .user-profile {
        padding: 0 !important;
        background: transparent !important;
    }

    .user-profile:hover {
        background: transparent !important;
    }
}

@media (max-width: 801px) {
    .navbar {
        position: sticky !important;
        top: 10px !important;
        width: calc(100% - 20px) !important;
        max-width: calc(100% - 20px) !important;
        margin: 10px auto 14px !important;
        padding: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .navbar-container {
        min-height: 40px !important;
        gap: 5px !important;
    }

    .navbar-menu {
        border-radius: 22px !important;
        padding: 4px !important;
        border: none !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .navbar-menu .navbar-item {
        border-radius: 16px !important;
        min-height: 40px !important;
    }

    .navbar-menu.open,
    .navbar-menu.closing {
        border: none !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}

body.dark-mode .navbar,
body.dark-mode #navbar,
html:has(body.dark-mode) #navbar {
    --nav-shell-bg: #121110;
    --nav-shell-border: rgba(255, 255, 255, 0.10);
    --nav-rail-bg: #1b1917;
    --nav-item-hover-bg: #26221f;
    --nav-item-active-bg: #312b26;
    --nav-action-bg: #201d1a;
    --nav-shadow: 0 12px 28px rgba(0, 0, 0, 0.24);
    background: none !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

body.dark-mode .navbar::before,
body.dark-mode .navbar::after,
body.dark-mode #navbar::before,
body.dark-mode #navbar::after,
html:has(body.dark-mode) #navbar::before,
html:has(body.dark-mode) #navbar::after {
    content: none !important;
    display: none !important;
}

body.dark-mode .navbar-menu .navbar-item {
    color: rgba(255, 255, 255, 0.68) !important;
}

body.dark-mode .navbar-menu .navbar-item:hover {
    color: rgba(255, 255, 255, 0.92) !important;
    font-weight: 600 !important;
}

body.dark-mode .navbar-menu .navbar-item.active {
    color: #ffffff !important;
    font-weight: 600 !important;
    box-shadow: none !important;
}

body.dark-mode .theme-switcher,
body.dark-mode .user-profile .avatar,
body.dark-mode .navbar-toggle,
body.dark-mode .navbar-more-btn {
    border-color: transparent !important;
    color: rgba(255, 255, 255, 0.92) !important;
}

body.dark-mode .theme-switcher:hover,
body.dark-mode .user-profile .avatar:hover,
body.dark-mode .navbar-toggle:hover,
body.dark-mode .navbar-more-btn:hover {}

body.dark-mode .navbar-menu,
body.dark-mode .navbar-menu.open,
body.dark-mode .navbar-menu.closing {
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body.dark-mode .navbar-more-dropdown {
    background: #181614 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.24) !important;
}


body.dark-mode.landing-page,
body.dark-mode.landing-page .landing-main,
body.dark-mode.landing-page .landing-container {
    background: transparent !important;
}

body.dark-mode.landing-page {
    background-color: #1c1917 !important;
}

body.dark-mode .home-legacy,
body.dark-mode .home-panel,
body.dark-mode .home-fortune__box,
body.dark-mode .home-legacy__link,
body.dark-mode .home-link {
    background: var(--app-card-bg) !important;
    border-color: var(--app-card-border) !important;
    box-shadow: var(--app-card-shadow) !important;
}

body.dark-mode .home-button,
body.dark-mode .home-input,
body.dark-mode .home-badge {
    background: var(--app-card-bg) !important;
    border-color: var(--app-card-border) !important;
    box-shadow: var(--app-card-shadow) !important;
}

body.dark-mode .home-panel:hover,
body.dark-mode .home-legacy__link:hover,
body.dark-mode .home-link:hover,
body.dark-mode .home-button:hover:not(:disabled),
body.dark-mode .home-input:focus {
    background: var(--app-card-bg-hover) !important;
    border-color: var(--app-card-border-hover) !important;
    box-shadow: var(--app-card-shadow-hover) !important;
}


#navbar,
.navbar,
.navbar-container {
    background: none !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

#navbar::before,
#navbar::after,
.navbar::before,
.navbar::after,
.navbar-container::before,
.navbar-container::after {
    content: none !important;
    display: none !important;
}


:root {
    --bg-base: #f3f6fb;
    --bg-gradient-1: rgba(128, 92, 255, 0.34);
    --bg-gradient-3: rgba(62, 231, 183, 0.22);
    --bg-blur-strength: 108px;
    --surface-bg: rgba(255, 255, 255, 0.72);
    --surface-bg-strong: rgba(255, 255, 255, 0.84);
    --surface-border: rgba(102, 116, 160, 0.18);
    --surface-text: #152033;
    --surface-muted: #61708a;
    --surface-shadow: 0 12px 34px rgba(70, 84, 118, 0.10);
    --brand-accent: #111111;
    --brand-accent-strong: #000000;
    --brand-accent-soft: rgba(17, 17, 17, 0.10);
    --brand-accent-hover: #242424;
    --brand-accent-text: #ffffff;
    --primary-color: var(--brand-accent);
    --success-color: #1fbf93;
    --warning-color: #2d8cff;
    --danger-color: #7b61ff;
}

body.dark-mode {
    --bg-base: #0b1220;
    --bg-gradient-1: rgba(128, 92, 255, 0.44);
    --bg-gradient-2: rgba(0, 113, 227, 0.34);
    --bg-gradient-3: rgba(62, 231, 183, 0.22);
    --bg-blur-strength: 128px;
    --surface-bg: rgba(14, 19, 31, 0.62);
    --surface-bg-strong: rgba(16, 22, 36, 0.78);
    --surface-border: rgba(165, 182, 227, 0.14);
    --surface-text: #eef4ff;
    --surface-muted: #a7b4cb;
    --surface-shadow: 0 18px 46px rgba(0, 0, 0, 0.24);
    --brand-accent: #f3f4f6;
    --brand-accent-strong: #ffffff;
    --brand-accent-soft: rgba(255, 255, 255, 0.14);
    --brand-accent-hover: #ffffff;
    --brand-accent-text: #ffffff;
    --primary-color: var(--brand-accent);
    --success-color: #49d8ae;
    --warning-color: #77a9ff;
    --danger-color: #9d87ff;
}

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

body {
    background: var(--bg-base) !important;
    color: var(--surface-text);
}

body::before,
body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -2;
}

body::before {
    background: var(--bg-base) !important;
}

body::after {
    z-index: -1;
    background:
        radial-gradient(circle at 0% 0%, var(--bg-gradient-1) 0%, transparent 36%),
        radial-gradient(circle at 100% 8%, var(--bg-gradient-2) 0%, transparent 34%),
        radial-gradient(circle at 50% 100%, var(--bg-gradient-3) 0%, transparent 32%);
    filter: blur(var(--bg-blur-strength));
    opacity: 0.98;
    transform: translate3d(0, 0, 0);
}

body.dark-mode::before {
    background: var(--bg-base) !important;
}

body.dark-mode::after {
    opacity: 0.88;
}

body .background-colors,
body .floating-squares,
body:not(.auth-page) .ripple {
    display: none !important;
}

.main-container,
.landing-main,
.landing-container {
    background: transparent !important;
}

.card,
.modal-content,
.dropdown-menu,
.question-detail-header,
.question-detail-content,
.answer-section,
.related-discussions,
.replies-list,
.reply-form-container,
.questions-container .card,
.profile-header-card,
.profile-content>.card,
.group-card,
.member-card,
.duty-card,
.rankings-card,
.calendar-card,
.daily-question-card,
.info-card,
.tags-module,
.post-detail,
.forum-container .card,
.home-legacy,
.home-panel,
.home-fortune__box,
.home-link,
.home-legacy__note {
    background: var(--surface-bg) !important;
    border: 1px solid var(--surface-border) !important;
    border-radius: 14px !important;
    box-shadow: var(--surface-shadow) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.card-header,
.card-body,
.card-footer,
.profile-header,
.profile-content .info-grid,
.profile-content .activity-list {
    background: transparent !important;
}

input,
textarea,
select,
.search-box,
.search-input,
.filter-select,
.form-input,
.role-select,
#questionsSearch,
#difficultyFilter,
#categoryFilter,
#answer,
.reply-content-input,
.home-input {
    background: var(--surface-bg-strong) !important;
    border-color: var(--surface-border) !important;
    color: var(--surface-text) !important;
    box-shadow: none !important;
}

input::placeholder,
textarea::placeholder {
    color: var(--surface-muted) !important;
}

.navbar-menu,
.navbar-menu.open,
.navbar-menu.closing,
.navbar-more-dropdown {
    background: var(--surface-bg-strong) !important;
    border-color: var(--surface-border) !important;
    box-shadow: 0 12px 30px rgba(54, 67, 98, 0.12) !important;
}

.btn-primary,
.home-button,
.dropdown-item-danger:hover,
.pagination .page-link.active,
.upload-btn,
.take-photo-btn {
    background: var(--brand-accent) !important;
    border-color: transparent !important;
    color: var(--brand-accent-text) !important;
}

.btn-primary:hover,
.home-button:hover:not(:disabled),
.upload-btn:hover,
.take-photo-btn:hover {
    background: var(--brand-accent-hover) !important;
    color: var(--brand-accent-text) !important;
}

a,
.home-panel__eyebrow,
.home-legacy__eyebrow,
.question-tag,
.discussion-link,
.score-link {
    color: var(--brand-accent) !important;
}

body.dark-mode .navbar-menu,
body.dark-mode .navbar-menu.open,
body.dark-mode .navbar-menu.closing,
body.dark-mode .navbar-more-dropdown {
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.28) !important;
}

body.dark-mode .card,
body.dark-mode .modal-content,
body.dark-mode .dropdown-menu,
body.dark-mode .question-detail-header,
body.dark-mode .question-detail-content,
body.dark-mode .answer-section,
body.dark-mode .related-discussions,
body.dark-mode .replies-list,
body.dark-mode .reply-form-container,
body.dark-mode .questions-container .card,
body.dark-mode .profile-header-card,
body.dark-mode .profile-content>.card,
body.dark-mode .group-card,
body.dark-mode .member-card,
body.dark-mode .duty-card,
body.dark-mode .rankings-card,
body.dark-mode .calendar-card,
body.dark-mode .daily-question-card,
body.dark-mode .info-card,
body.dark-mode .tags-module,
body.dark-mode .post-detail,
body.dark-mode .forum-container .card,
body.dark-mode .home-legacy,
body.dark-mode .home-panel,
body.dark-mode .home-fortune__box,
body.dark-mode .home-link,
body.dark-mode .home-legacy__note {
    background: var(--surface-bg) !important;
    border-color: var(--surface-border) !important;
    box-shadow: var(--surface-shadow) !important;
    background-image: none !important;
}

body.dark-mode,
html:has(body.dark-mode) {
    background: var(--bg-base) !important;
}

body:not(.dark-mode) .questions-container .card,
body:not(.dark-mode) .profile-header-card,
body:not(.dark-mode) .profile-content>.card,
body:not(.dark-mode) .group-card,
body:not(.dark-mode) .forum-container .card,
body:not(.dark-mode) .question-detail-header,
body:not(.dark-mode) .question-detail-content,
body:not(.dark-mode) .answer-section,
body:not(.dark-mode) .related-discussions,
body:not(.dark-mode) .replies-list,
body:not(.dark-mode) .reply-form-container {
    background: var(--surface-bg) !important;
    border-color: var(--surface-border) !important;
    box-shadow: var(--surface-shadow) !important;
    background-image: none !important;
}

body.auth-page form,
body.auth-page .card,
body.auth-page .auth-card,
body.auth-page .login-card,
body.auth-page .register-card {
    background: var(--surface-bg) !important;
    border: 1px solid var(--surface-border) !important;
    box-shadow: var(--surface-shadow) !important;
}

body.auth-page,
body.dark-mode.auth-page,
html:has(body.dark-mode) body.auth-page {
    background: var(--bg-base) !important;
}

html body.dark-mode {
    background-color: var(--bg-base) !important;
}


@media (min-width: 802px) {
    .navbar-container {
        width: min(1040px, calc(100% - 32px)) !important;
        min-height: 44px !important;
        margin: 0 auto !important;
        gap: 18px !important;
        justify-content: space-between !important;
    }

    .navbar-left,
    .navbar-right {
        gap: 12px !important;
        align-items: center !important;
    }

    .navbar-menu {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 2px !important;
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        overflow: visible !important;
    }

    .navbar-menu .navbar-item {
        min-height: 44px !important;
        padding: 0 10px !important;
        border-radius: 0 !important;
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
        color: rgba(22, 28, 36, 0.78) !important;
        font-size: 12px !important;
        font-weight: 400 !important;
        letter-spacing: -0.01em !important;
    }

    .navbar-menu .navbar-item:hover {
        color: rgba(22, 28, 36, 0.96) !important;
        background: transparent !important;
    }

    .navbar-menu .navbar-item.active {
        color: var(--brand-accent) !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .theme-switcher,
    .user-profile .avatar,
    .navbar-toggle,
    .navbar-more-btn {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
        border-radius: 999px !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        color: rgba(22, 28, 36, 0.82) !important;
    }

    .theme-switcher:hover,
    .user-profile .avatar:hover,
    .navbar-toggle:hover,
    .navbar-more-btn:hover {
        background: rgba(0, 0, 0, 0.05) !important;
        border-color: transparent !important;
    }

    .main-container {
        padding-top: 26px !important;
    }
}

@media (max-width: 801px) {
    .navbar-container {
        min-height: 48px !important;
        width: calc(100% - 24px) !important;
        margin: 0 auto !important;
        gap: 10px !important;
    }

    .navbar-menu {
        background: rgba(251, 251, 253, 0.92) !important;
        border: 1px solid rgba(18, 28, 45, 0.08) !important;
        border-radius: 18px !important;
        box-shadow: 0 12px 28px rgba(20, 32, 60, 0.10) !important;
    }

    .navbar-menu .navbar-item {
        border-radius: 12px !important;
        min-height: 40px !important;
        font-size: 13px !important;
        font-weight: 500 !important;
        background: transparent !important;
    }

    .navbar-menu .navbar-item.active {
        color: var(--brand-accent) !important;
        background: rgba(0, 113, 227, 0.08) !important;
        box-shadow: none !important;
    }

    .theme-switcher,
    .user-profile .avatar,
    .navbar-toggle,
    .navbar-more-btn {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    body.dark-mode .navbar-menu {
        background: rgba(24, 24, 28, 0.92) !important;
        border-color: rgba(255, 255, 255, 0.10) !important;
        box-shadow: 0 16px 32px rgba(0, 0, 0, 0.24) !important;
    }

    body.dark-mode .navbar-menu .navbar-item.active {
        color: var(--brand-accent) !important;
        background: rgba(41, 151, 255, 0.14) !important;
    }
}


html {
    background: var(--bg-base) !important;
}

body,
body.landing-page {
    position: relative;
    isolation: isolate;
    background: var(--bg-base) !important;
    background-color: var(--bg-base) !important;
}

body::before,
body::after,
body.landing-page::before,
body.landing-page::after {
    content: "" !important;
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    pointer-events: none !important;
}

body::before,
body.landing-page::before {
    z-index: -2 !important;
    background: var(--bg-base) !important;
}

body::after,
body.landing-page::after {
    z-index: -1 !important;
    background:
        radial-gradient(circle at 0% 0%, var(--bg-gradient-1) 0%, transparent 36%),
        radial-gradient(circle at 100% 8%, var(--bg-gradient-2) 0%, transparent 34%),
        radial-gradient(circle at 50% 100%, var(--bg-gradient-3) 0%, transparent 32%) !important;
    filter: blur(var(--bg-blur-strength)) !important;
    opacity: 0.96 !important;
    transform: translate3d(0, 0, 0) !important;
}

body.dark-mode::after,
body.dark-mode.landing-page::after {
    opacity: 0.88 !important;
}


:root {
    --surface-bg: rgba(255, 255, 255, 0.82);
    --surface-bg-strong: rgba(255, 255, 255, 0.92);
    --surface-border: rgba(24, 32, 48, 0.10);
    --surface-text: #121826;
    --surface-muted: #5f6b80;
    --surface-shadow: 0 12px 28px rgba(26, 34, 52, 0.08);
}

body.dark-mode {
    --surface-bg: rgba(17, 22, 34, 0.78);
    --surface-bg-strong: rgba(20, 26, 40, 0.9);
    --surface-border: rgba(232, 238, 250, 0.10);
    --surface-text: #eef2f8;
    --surface-muted: #adb8cc;
    --surface-shadow: 0 16px 34px rgba(0, 0, 0, 0.22);
    --brand-accent-text: #0f141d;
}

html,
body,
button,
input,
select,
textarea {
    font-family: var(--ds-font) !important;
}

body {
    color: var(--surface-text) !important;
}

.card,
.modal-content,
.dropdown-menu,
.question-detail-header,
.question-detail-content,
.answer-section,
.related-discussions,
.replies-list,
.reply-form-container,
.questions-container .card,
.profile-header-card,
.profile-content>.card,
.group-card,
.member-card,
.duty-card,
.rankings-card,
.calendar-card,
.daily-question-card,
.info-card,
.tags-module,
.post-detail,
.forum-container .card,
.home-legacy,
.home-panel,
.home-fortune__box,
.home-link,
.home-legacy__note {
    background: var(--surface-bg) !important;
    border: 1px solid var(--surface-border) !important;
    border-radius: 14px !important;
    box-shadow: var(--surface-shadow) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.card,
[class$="card"],
[class*="-card"],
.home-panel,
.home-legacy,
.question-row {
    transition: none !important;
    animation: none !important;
    transform: none !important;
}

.card:hover,
[class$="card"]:hover,
[class*="-card"]:hover,
.home-panel:hover,
.home-legacy:hover {
    transform: none !important;
    box-shadow: var(--surface-shadow) !important;
}

/* 题目卡片悬停不加阴影 */
.question-row:hover {
    transform: none !important;
}


:root {
    --ui-button-bg: #111111;
    --ui-button-bg-hover: #000000;
    --ui-button-border: #111111;
    --ui-button-text: #ffffff;
    --ui-button-disabled-bg: #d2d7df;
    --ui-button-disabled-border: #d2d7df;
    --ui-button-disabled-text: #6b7280;
}

body.dark-mode {
    --ui-button-bg: #111111;
    --ui-button-bg-hover: #000000;
    --ui-button-border: #1f2937;
    --ui-button-text: #ffffff;
    --ui-button-disabled-bg: #2b3442;
    --ui-button-disabled-border: #2b3442;
    --ui-button-disabled-text: #94a3b8;
}

.btn,
a.btn,
button:not(.navbar-toggle):not(.theme-switcher):not(.navbar-more-btn),
.home-button,
.page-link,
.home-link,
.upload-btn,
.take-photo-btn,
.upload-btn-text-icon,
.btn-primary,
.btn-secondary,
.btn-danger,
.pagination .page-link.active {
    min-height: 40px !important;
    padding: 0 16px !important;
    border-radius: 999px !important;
    border: 1px solid var(--ui-button-border) !important;
    background: var(--ui-button-bg) !important;
    color: var(--ui-button-text) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background-image: none !important;
    transition: background-color 140ms ease, border-color 140ms ease, transform 140ms ease !important;
}

.btn:hover,
a.btn:hover,
button:not(.navbar-toggle):not(.theme-switcher):not(.navbar-more-btn):hover,
.home-button:hover:not(:disabled),
.page-link:hover,
.home-link:hover,
.upload-btn:hover,
.take-photo-btn:hover,
.upload-btn-text-icon:hover,
.btn-primary:hover,
.btn-secondary:hover,
.btn-danger:hover,
.pagination .page-link.active:hover {
    background: var(--ui-button-bg-hover) !important;
    border-color: var(--ui-button-bg-hover) !important;
    color: var(--ui-button-text) !important;
    box-shadow: none !important;
    transform: translateY(-1px) !important;
}

.btn:disabled,
a.btn.disabled,
button:disabled,
.home-button:disabled,
.page-link.disabled,
.upload-btn:disabled,
.take-photo-btn:disabled {
    background: var(--ui-button-disabled-bg) !important;
    border-color: var(--ui-button-disabled-border) !important;
    color: var(--ui-button-disabled-text) !important;
    box-shadow: none !important;
    transform: none !important;
}

#navbar,
.navbar {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.navbar-container {
    width: min(1160px, calc(100% - 28px)) !important;
    min-height: 60px !important;
    margin: 12px auto 0 !important;
    padding: 8px 12px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 12px !important;
    border: 1px solid var(--surface-border) !important;
    border-radius: 24px !important;
    background: rgba(255, 255, 255, 0.78) !important;
    box-shadow: 0 12px 28px rgba(17, 24, 39, 0.08) !important;
}

body.dark-mode .navbar-container {
    background: rgba(14, 20, 31, 0.88) !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.22) !important;
}

.navbar-left,
.navbar-right {
    gap: 8px !important;
}

.navbar-menu {
    gap: 6px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.navbar-menu .navbar-item {
    min-height: 36px !important;
    padding: 0 14px !important;
    border-radius: 999px !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    color: var(--surface-muted) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}

.navbar-menu .navbar-item:hover {
    color: var(--surface-text) !important;
}

.navbar-menu .navbar-item.active {
    color: #ffffff !important;
}

body.dark-mode .navbar-menu .navbar-item:hover {
    color: var(--surface-text) !important;
}

body.dark-mode .navbar-menu .navbar-item.active {
    color: #ffffff !important;
}

.theme-switcher,
.navbar-toggle,
.navbar-more-btn,
.user-profile .avatar {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    border-radius: 999px !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    box-shadow: none !important;
}

.theme-switcher:hover,
.navbar-toggle:hover,
.navbar-more-btn:hover,
.user-profile .avatar:hover {
    background: transparent !important;
    border-color: transparent !important;
}

body.dark-mode .theme-switcher:hover,
body.dark-mode .navbar-toggle:hover,
body.dark-mode .navbar-more-btn:hover,
body.dark-mode .user-profile .avatar:hover {
    background: transparent !important;
    border-color: transparent !important;
}

.dropdown-menu {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(8px) !important;
}

.user-profile:hover .dropdown-menu,
.dropdown-menu:hover {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(8px) !important;
}

.user-profile.dropdown-open .dropdown-menu,
.dropdown-menu.open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
}

.dropdown-menu,
.navbar-menu.open,
.navbar-menu.closing,
.navbar-more-dropdown {
    border-radius: 18px !important;
    background: rgba(255, 255, 255, 0.94) !important;
    border: 1px solid var(--surface-border) !important;
    box-shadow: 0 16px 36px rgba(17, 24, 39, 0.12) !important;
}

body.dark-mode .dropdown-menu,
body.dark-mode .navbar-menu.open,
body.dark-mode .navbar-menu.closing,
body.dark-mode .navbar-more-dropdown {
    background: rgba(18, 24, 38, 0.96) !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.32) !important;
}

@media (max-width: 801px) {
    .navbar-container {
        width: calc(100% - 20px) !important;
        margin-top: 10px !important;
        min-height: 56px !important;
        padding: 8px 10px !important;
        border-radius: 14px !important;
    }

    .navbar-menu {
        top: calc(100% + 10px) !important;
        left: 0 !important;
        right: 0 !important;
        padding: 8px !important;
    }
}

.btn,
button,
.upload-btn-text-icon,
.home-button,
.page-link,
.home-link {
    min-height: 40px !important;
    border-radius: 999px !important;
    border: 1px solid var(--surface-border) !important;
    background: var(--surface-bg-strong) !important;
    color: var(--surface-text) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, transform 140ms ease !important;
}

.btn:hover,
button:hover,
.upload-btn-text-icon:hover,
.home-button:hover:not(:disabled),
.page-link:hover,
.home-link:hover {
    background: color-mix(in srgb, var(--surface-bg-strong) 92%, var(--brand-accent) 8%) !important;
    border-color: color-mix(in srgb, var(--surface-border) 65%, var(--brand-accent) 35%) !important;
    color: var(--surface-text) !important;
    box-shadow: none !important;
    transform: translateY(-1px) !important;
}

.btn-primary,
.home-button,
.pagination .page-link.active,
.upload-btn,
.take-photo-btn {
    background: var(--brand-accent) !important;
    color: var(--brand-accent-text) !important;
    border-color: var(--brand-accent) !important;
    box-shadow: none !important;
}

.btn-primary:hover,
.home-button:hover:not(:disabled),
.pagination .page-link.active:hover,
.upload-btn:hover,
.take-photo-btn:hover {
    background: var(--brand-accent-hover) !important;
    color: var(--brand-accent-text) !important;
    border-color: var(--brand-accent-hover) !important;
}

input,
textarea,
select,
.search-box,
.search-input,
.filter-select,
.form-input,
.role-select,
#questionsSearch,
#difficultyFilter,
#categoryFilter,
#answer,
.reply-content-input,
.home-input {
    min-height: 42px !important;
    /* radius omitted: design-system.css owns input shape (md 8px) */
    border: 1px solid var(--surface-border) !important;
    background: var(--surface-bg-strong) !important;
    color: var(--surface-text) !important;
    box-shadow: none !important;
}

input:focus,
textarea:focus,
select:focus,
.home-input:focus {
    border-color: color-mix(in srgb, var(--brand-accent) 40%, var(--surface-border)) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-accent) 12%, transparent) !important;
}

#navbar,
.navbar {
    position: sticky !important;
    top: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-bottom: 1px solid var(--surface-border) !important;
    border-radius: 0 !important;
    background: color-mix(in srgb, var(--surface-bg-strong) 88%, transparent) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    z-index: 1200 !important;
}

.navbar-container {
    width: min(1100px, calc(100% - 28px)) !important;
    min-height: 54px !important;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 14px !important;
}

.navbar-left,
.navbar-right {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-width: 0 !important;
}

.navbar-menu {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
}

.navbar-menu::-webkit-scrollbar {
    display: none !important;
}

.navbar-menu .navbar-item {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 34px !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    color: var(--surface-muted) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
    box-shadow: none !important;
    transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease !important;
}

.navbar-menu .navbar-item:hover {
    color: var(--surface-text) !important;
    background: color-mix(in srgb, var(--brand-accent) 8%, transparent) !important;
    border-color: color-mix(in srgb, var(--brand-accent) 18%, transparent) !important;
}

.navbar-menu .navbar-item.active {
    color: var(--brand-accent) !important;
    background: var(--brand-accent-soft) !important;
    border-color: color-mix(in srgb, var(--brand-accent) 26%, transparent) !important;
}

.theme-switcher,
.navbar-toggle,
.navbar-more-btn,
.user-profile .avatar {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    border-radius: 999px !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    color: var(--surface-muted) !important;
    box-shadow: none !important;
}

.theme-switcher:hover,
.navbar-toggle:hover,
.navbar-more-btn:hover,
.user-profile .avatar:hover,
.dropdown-item:hover {
    background: color-mix(in srgb, var(--brand-accent) 8%, transparent) !important;
    border-color: color-mix(in srgb, var(--brand-accent) 18%, transparent) !important;
    color: var(--surface-text) !important;
}

.navbar-menu.open,
.navbar-menu.closing,
.navbar-more-dropdown,
.dropdown-menu {
    background: var(--surface-bg-strong) !important;
    border: 1px solid var(--surface-border) !important;
    box-shadow: var(--surface-shadow) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body.animations-disabled,
body.animations-disabled *,
body.animations-disabled *::before,
body.animations-disabled *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
}

body.dark-mode .btn,
body.dark-mode button,
body.dark-mode .upload-btn-text-icon,
body.dark-mode .home-button,
body.dark-mode .page-link,
body.dark-mode .home-link {
    background: var(--surface-bg-strong) !important;
    border-color: var(--surface-border) !important;
    color: var(--surface-text) !important;
}

body.dark-mode .btn:hover,
body.dark-mode button:hover,
body.dark-mode .upload-btn-text-icon:hover,
body.dark-mode .home-button:hover:not(:disabled),
body.dark-mode .page-link:hover,
body.dark-mode .home-link:hover {
    background: color-mix(in srgb, var(--surface-bg-strong) 88%, white 12%) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
    color: var(--surface-text) !important;
}

body.dark-mode .btn-primary,
body.dark-mode .home-button,
body.dark-mode .pagination .page-link.active,
body.dark-mode .upload-btn,
body.dark-mode .take-photo-btn {
    background: var(--brand-accent) !important;
    border-color: var(--brand-accent) !important;
    color: var(--brand-accent-text) !important;
}

body.dark-mode .btn-primary:hover,
body.dark-mode .home-button:hover:not(:disabled),
body.dark-mode .pagination .page-link.active:hover,
body.dark-mode .upload-btn:hover,
body.dark-mode .take-photo-btn:hover {
    background: var(--brand-accent-hover) !important;
    border-color: var(--brand-accent-hover) !important;
    color: var(--brand-accent-text) !important;
}

body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select,
body.dark-mode .search-box,
body.dark-mode .search-input,
body.dark-mode .filter-select,
body.dark-mode .form-input,
body.dark-mode .role-select,
body.dark-mode #questionsSearch,
body.dark-mode #difficultyFilter,
body.dark-mode #categoryFilter,
body.dark-mode #answer,
body.dark-mode .reply-content-input,
body.dark-mode .home-input {
    background: rgba(20, 26, 40, 0.94) !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
    color: var(--surface-text) !important;
}

body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
    color: rgba(173, 184, 204, 0.84) !important;
}

body.dark-mode .navbar-menu .navbar-item {
    color: var(--surface-muted) !important;
}

body.dark-mode .navbar-menu .navbar-item:hover {
    color: var(--surface-text) !important;
    background: rgba(255, 255, 255, 0.07) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

body.dark-mode .navbar-menu .navbar-item.active {
    color: var(--brand-accent-text) !important;
    background: rgba(243, 244, 246, 0.92) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
}

body.dark-mode .theme-switcher:hover,
body.dark-mode .navbar-toggle:hover,
body.dark-mode .navbar-more-btn:hover,
body.dark-mode .user-profile .avatar:hover,
body.dark-mode .dropdown-item:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: var(--surface-text) !important;
}

body.dark-mode .dropdown-menu,
body.dark-mode .navbar-menu.open,
body.dark-mode .navbar-menu.closing,
body.dark-mode .navbar-more-dropdown {
    background: rgba(18, 24, 38, 0.96) !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.32) !important;
}

@media (max-width: 801px) {
    .navbar-container {
        width: calc(100% - 20px) !important;
        min-height: 52px !important;
        gap: 8px !important;
    }

    .navbar-menu {
        display: none !important;
        position: absolute !important;
        top: calc(100% + 8px) !important;
        left: 10px !important;
        right: 10px !important;
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 8px !important;
        max-height: min(62vh, 420px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        background: var(--surface-bg-strong) !important;
        border: 1px solid var(--surface-border) !important;
        border-radius: 16px !important;
        box-shadow: var(--surface-shadow) !important;
        z-index: 1210 !important;
    }

    .navbar-menu.open {
        display: flex !important;
    }

    .navbar-menu.closing {
        display: none !important;
    }

    .navbar-menu .navbar-item {
        width: 100% !important;
        justify-content: flex-start !important;
        min-height: 38px !important;
        border-radius: 12px !important;
    }
}


html,
body,
body.landing-page,
body.dark-mode,
body.dark-mode.landing-page {
    background-color: var(--bg-base) !important;
    background-image:
        radial-gradient(circle at 0% 0%, var(--bg-gradient-1) 0%, transparent 34%),
        radial-gradient(circle at 100% 8%, var(--bg-gradient-2) 0%, transparent 32%),
        radial-gradient(circle at 50% 100%, var(--bg-gradient-3) 0%, transparent 30%) !important;
    background-repeat: no-repeat !important;
    background-size: 140% 140% !important;
    background-attachment: fixed !important;
}

body::before,
body::after,
body.landing-page::before,
body.landing-page::after {
    display: none !important;
}

.card,
.post-card,
.group-card,
.question-card,
.dashboard-card,
.feature-card,
.member-card,
.duty-card,
.rankings-card,
.calendar-card,
.daily-question-card,
.info-card,
.tags-module,
.post-detail,
.question-detail-header,
.question-detail-content,
.answer-section,
.related-discussions,
.replies-list,
.reply-form-container,
.profile-header-card,
.profile-content>.card,
.home-legacy,
.home-panel,
.home-fortune__box,
.question-row {
    transition-property: none !important;
    transition-duration: 0s !important;
    animation: none !important;
    transform: none !important;
}

.card:hover,
.post-card:hover,
.group-card:hover,
.question-card:hover,
.dashboard-card:hover,
.feature-card:hover,
.member-card:hover,
.duty-card:hover,
.rankings-card:hover,
.calendar-card:hover,
.daily-question-card:hover,
.info-card:hover,
.tags-module:hover,
.post-detail:hover,
.question-detail-header:hover,
.question-detail-content:hover,
.answer-section:hover,
.related-discussions:hover,
.replies-list:hover,
.reply-form-container:hover,
.profile-header-card:hover,
.profile-content>.card:hover,
.home-legacy:hover,
.home-panel:hover,
.home-fortune__box:hover {
    transform: none !important;
    box-shadow: var(--surface-shadow) !important;
}

/* 题目卡片悬停不加阴影 */
.question-row:hover {
    transform: none !important;
}

.question-difficulty.easy,
.difficulty-tag.easy {
    color: var(--success-color) !important;
}

.question-difficulty.medium,
.difficulty-tag.medium {
    color: var(--warning-color) !important;
}

.question-difficulty.hard,
.difficulty-tag.hard {
    color: var(--danger-color) !important;
}

#navbar.navbar,
.navbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 1200 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(17, 24, 39, 0.08) !important;
    border-radius: 0 !important;
    background: rgba(255, 255, 255, 0.86) !important;
    box-shadow: none !important;
}

#navbar::before,
#navbar::after,
.navbar::before,
.navbar::after {
    content: none !important;
    display: none !important;
}

.navbar-container {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 18px !important;
    width: min(1280px, calc(100% - 32px)) !important;
    min-height: 56px !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

.navbar-left,
.navbar-right {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-width: 0 !important;
}

.navbar-brand {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    color: #111111 !important;
    text-decoration: none !important;
    border-radius: 12px !important;
    box-shadow: none !important;
}

.navbar-brand__mark {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 36px !important;
    min-width: 40px !important;
    padding: 0 6px !important;
    border-radius: 12px !important;
    background: rgba(17, 17, 17, 0.05) !important;
    color: inherit !important;
    font-size: 0.76rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.18em !important;
}

.navbar-menu {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    min-width: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
}

.navbar-menu::-webkit-scrollbar {
    display: none !important;
}

.navbar-item {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 40px !important;
    padding: 0 10px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: rgba(17, 24, 39, 0.78) !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    transition: color 150ms ease, opacity 150ms ease !important;
}

.navbar-item::after {
    content: '' !important;
    position: absolute !important;
    left: 12px !important;
    right: 12px !important;
    bottom: 8px !important;
    height: 1.5px !important;
    border-radius: 999px !important;
    background: currentColor !important;
    transform: scaleX(0) !important;
    transform-origin: center !important;
    transition: transform 150ms ease !important;
    opacity: 0.55 !important;
}

.navbar-item:hover,
.navbar-item.active {
    color: #111111 !important;
}

.navbar-item:hover::after,
.navbar-item.active::after {
    transform: scaleX(1) !important;
}

.navbar-item.active {
    font-weight: 600 !important;
}

.theme-switcher,
.user-profile .avatar,
.navbar-toggle,
.navbar-more-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
    border: 1px solid transparent !important;
    border-radius: 999px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #111111 !important;
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, transform 150ms ease !important;
}

.theme-switcher:hover,
.user-profile .avatar:hover,
.navbar-toggle:hover,
.navbar-more-btn:hover {
    background: rgba(17, 17, 17, 0.06) !important;
    border-color: rgba(17, 17, 17, 0.08) !important;
}

.navbar-toggle {
    display: none !important;
}

.dropdown-menu {
    min-width: 220px !important;
    padding: 0.5rem !important;
    border: 1px solid rgba(17, 24, 39, 0.08) !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, 0.94) !important;
    box-shadow: 0 20px 42px rgba(15, 23, 42, 0.12) !important;
}

body.dark-mode .navbar-brand,
body.dark-mode .navbar-item,
body.dark-mode .theme-switcher,
body.dark-mode .user-profile .avatar,
body.dark-mode .navbar-toggle,
body.dark-mode .navbar-more-btn {
    color: rgba(255, 255, 255, 0.86) !important;
}

body.dark-mode .navbar-brand__mark {
    background: rgba(255, 255, 255, 0.07) !important;
    color: rgba(255, 255, 255, 0.94) !important;
}

body.dark-mode .navbar-item {
    color: rgba(255, 255, 255, 0.70) !important;
}

body.dark-mode .navbar-item:hover,
body.dark-mode .navbar-item.active {
    color: rgba(255, 255, 255, 0.96) !important;
}

body.dark-mode .navbar-item::after {
    background: rgba(255, 255, 255, 0.88) !important;
}

body.dark-mode .theme-switcher:hover,
body.dark-mode .user-profile .avatar:hover,
body.dark-mode .navbar-toggle:hover,
body.dark-mode .navbar-more-btn:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
}

body.dark-mode .dropdown-menu {
    border-color: rgba(255, 255, 255, 0.10) !important;
    background: rgba(18, 24, 38, 0.96) !important;
    box-shadow: 0 20px 42px rgba(0, 0, 0, 0.30) !important;
}

@media (max-width: 960px) {
    .navbar-container {
        width: calc(100% - 20px) !important;
        min-height: 52px !important;
        gap: 10px !important;
    }

    .navbar-toggle {
        display: inline-flex !important;
    }

    .navbar-menu {
        position: absolute !important;
        top: calc(100% + 8px) !important;
        left: 10px !important;
        right: 10px !important;
        display: none !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 4px !important;
        padding: 8px !important;
        border: 1px solid rgba(17, 24, 39, 0.08) !important;
        border-radius: 18px !important;
        background: rgba(255, 255, 255, 0.94) !important;
        box-shadow: 0 20px 42px rgba(15, 23, 42, 0.12) !important;
        z-index: 1210 !important;
    }

    .navbar-menu.open {
        display: flex !important;
    }

    .navbar-menu.closing {
        display: none !important;
    }

    .navbar-item {
        justify-content: flex-start !important;
        min-height: 40px !important;
        padding: 0 14px !important;
        border-radius: 12px !important;
    }

    .navbar-item::after {
        display: none !important;
    }

    body.dark-mode .navbar-menu {
        border-color: rgba(255, 255, 255, 0.10) !important;
        background: rgba(18, 24, 38, 0.96) !important;
        box-shadow: 0 20px 42px rgba(0, 0, 0, 0.30) !important;
    }
}

.btn,
a.btn,
button:not(.navbar-toggle):not(.theme-switcher):not(.navbar-more-btn):not(.password-toggle):not(.toggle-password),
input[type="button"],
input[type="submit"],
.upload-btn-text-icon,
.home-button,
.page-link,
.home-link,
.upload-btn,
.take-photo-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    min-height: 40px !important;
    min-width: 40px !important;
    padding: 0.6875rem 1.125rem !important;
    border: 1px solid #000000 !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: #000000 !important;
    box-shadow: none !important;
    font-weight: 600 !important;
    text-align: center !important;
    white-space: nowrap !important;
    transform: none !important;
    filter: none !important;
    transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, filter 140ms ease, opacity 140ms ease !important;
}

.btn:hover,
a.btn:hover,
button:not(.navbar-toggle):not(.theme-switcher):not(.navbar-more-btn):not(.password-toggle):not(.toggle-password):hover,
input[type="button"]:hover,
input[type="submit"]:hover,
.upload-btn-text-icon:hover,
.home-button:hover:not(:disabled),
.page-link:hover,
.home-link:hover,
.upload-btn:hover,
.take-photo-btn:hover,
.btn:active,
a.btn:active,
button:not(.navbar-toggle):not(.theme-switcher):not(.navbar-more-btn):not(.password-toggle):not(.toggle-password):active,
input[type="button"]:active,
input[type="submit"]:active,
.upload-btn-text-icon:active,
.home-button:active:not(:disabled),
.page-link:active,
.home-link:active,
.upload-btn:active,
.take-photo-btn:active {
    background: #000000 !important;
    border-color: #000000 !important;
    color: #ffffff !important;
    box-shadow: none !important;
    transform: none !important;
    filter: none !important;
}

.btn-primary,
a.btn-primary,
.home-button,
.pagination .page-link.active,
.upload-btn,
.take-photo-btn {
    background: #000000 !important;
    border-color: #000000 !important;
    color: #ffffff !important;
}

.btn-primary:hover,
a.btn-primary:hover,
.home-button:hover:not(:disabled),
.pagination .page-link.active:hover,
.upload-btn:hover,
.take-photo-btn:hover,
.btn-primary:active,
a.btn-primary:active,
.home-button:active:not(:disabled),
.pagination .page-link.active:active,
.upload-btn:active,
.take-photo-btn:active {
    background: #000000 !important;
    border-color: #000000 !important;
    color: #ffffff !important;
    filter: brightness(1.06) !important;
}

.btn-secondary,
.btn-danger,
a.btn-secondary,
a.btn-danger,
.page-link,
.home-link,
.upload-btn-text-icon {
    background: transparent !important;
    border-color: #000000 !important;
    color: #000000 !important;
    filter: none !important;
}

.btn:disabled,
a.btn.disabled,
button:disabled,
input[type="button"]:disabled,
input[type="submit"]:disabled,
.home-button:disabled,
.page-link.disabled,
.upload-btn:disabled,
.take-photo-btn:disabled {
    opacity: 0.45 !important;
    box-shadow: none !important;
    transform: none !important;
    filter: none !important;
}

body.dark-mode .btn,
body.dark-mode a.btn,
body.dark-mode button:not(.navbar-toggle):not(.theme-switcher):not(.navbar-more-btn):not(.password-toggle):not(.toggle-password),
body.dark-mode input[type="button"],
body.dark-mode input[type="submit"],
body.dark-mode .upload-btn-text-icon,
body.dark-mode .home-button,
body.dark-mode .page-link,
body.dark-mode .home-link,
body.dark-mode .upload-btn,
body.dark-mode .take-photo-btn {
    border-color: #000000 !important;
}

body .background-colors,
body .floating-squares,
.ripple {
    display: none !important;
    animation: none !important;
}

/* Final button interaction performance override */
.btn,
a.btn,
button:not(.navbar-toggle):not(.theme-switcher):not(.navbar-more-btn):not(.password-toggle):not(.toggle-password),
input[type="button"],
input[type="submit"],
.upload-btn-text-icon,
.home-button,
.page-link,
.home-link,
.upload-btn,
.take-photo-btn {
    transition-property: background-color, border-color, color, opacity !important;
    transition-duration: 40ms !important;
    transition-timing-function: linear !important;
    transition-delay: 0s !important;
    filter: none !important;
}

.btn-primary:hover,
.btn-primary:active,
a.btn-primary:hover,
a.btn-primary:active,
.home-button:hover:not(:disabled),
.home-button:active:not(:disabled),
.pagination .page-link.active:hover,
.pagination .page-link.active:active,
.upload-btn:hover,
.upload-btn:active,
.take-photo-btn:hover,
.take-photo-btn:active,
body.auth-page .form-actions button[type="submit"]:hover,
body.auth-page .form-actions button[type="submit"]:active,
body.auth-page .form-actions button[type="submit"]:focus {
    background: #111111 !important;
    border-color: #111111 !important;
    color: #ffffff !important;
    filter: none !important;
}

.btn-secondary:hover,
.btn-secondary:active,
.btn-danger:hover,
.btn-danger:active,
a.btn-secondary:hover,
a.btn-secondary:active,
a.btn-danger:hover,
a.btn-danger:active,
.page-link:hover,
.page-link:active,
.home-link:hover,
.home-link:active,
.upload-btn-text-icon:hover,
.upload-btn-text-icon:active,
button:not(.navbar-toggle):not(.theme-switcher):not(.navbar-more-btn):not(.password-toggle):not(.toggle-password):hover,
button:not(.navbar-toggle):not(.theme-switcher):not(.navbar-more-btn):not(.password-toggle):not(.toggle-password):active,
input[type="button"]:hover,
input[type="button"]:active,
input[type="submit"]:hover,
input[type="submit"]:active {
    background: #000000 !important;
    border-color: #000000 !important;
    color: #ffffff !important;
    filter: none !important;
}

body.dark-mode .btn,
body.dark-mode a.btn,
body.dark-mode button:not(.navbar-toggle):not(.theme-switcher):not(.navbar-more-btn):not(.password-toggle):not(.toggle-password),
body.dark-mode input[type="button"],
body.dark-mode input[type="submit"],
body.dark-mode .upload-btn-text-icon,
body.dark-mode .home-button,
body.dark-mode .page-link,
body.dark-mode .home-link,
body.dark-mode .upload-btn,
body.dark-mode .take-photo-btn,
[data-theme="dark"] .btn,
[data-theme="dark"] a.btn,
[data-theme="dark"] button:not(.navbar-toggle):not(.theme-switcher):not(.navbar-more-btn):not(.password-toggle):not(.toggle-password),
[data-theme="dark"] input[type="button"],
[data-theme="dark"] input[type="submit"],
[data-theme="dark"] .upload-btn-text-icon,
[data-theme="dark"] .home-button,
[data-theme="dark"] .page-link,
[data-theme="dark"] .home-link,
[data-theme="dark"] .upload-btn,
[data-theme="dark"] .take-photo-btn {
    filter: none !important;
}

body.dark-mode .btn-primary:hover,
body.dark-mode .btn-primary:active,
body.dark-mode a.btn-primary:hover,
body.dark-mode a.btn-primary:active,
body.dark-mode .home-button:hover:not(:disabled),
body.dark-mode .home-button:active:not(:disabled),
body.dark-mode .pagination .page-link.active:hover,
body.dark-mode .pagination .page-link.active:active,
body.dark-mode .upload-btn:hover,
body.dark-mode .upload-btn:active,
body.dark-mode .take-photo-btn:hover,
body.dark-mode .take-photo-btn:active,
[data-theme="dark"] .btn-primary:hover,
[data-theme="dark"] .btn-primary:active,
[data-theme="dark"] a.btn-primary:hover,
[data-theme="dark"] a.btn-primary:active,
[data-theme="dark"] .home-button:hover:not(:disabled),
[data-theme="dark"] .home-button:active:not(:disabled),
[data-theme="dark"] .pagination .page-link.active:hover,
[data-theme="dark"] .pagination .page-link.active:active,
[data-theme="dark"] .upload-btn:hover,
[data-theme="dark"] .upload-btn:active,
[data-theme="dark"] .take-photo-btn:hover,
[data-theme="dark"] .take-photo-btn:active {
    background: #ffffff !important;
    border-color: #ffffff !important;
    color: #0f172a !important;
    filter: none !important;
}

body.dark-mode .btn-secondary:hover,
body.dark-mode .btn-secondary:active,
body.dark-mode .btn-danger:hover,
body.dark-mode .btn-danger:active,
body.dark-mode a.btn-secondary:hover,
body.dark-mode a.btn-secondary:active,
body.dark-mode a.btn-danger:hover,
body.dark-mode a.btn-danger:active,
body.dark-mode .page-link:hover,
body.dark-mode .page-link:active,
body.dark-mode .home-link:hover,
body.dark-mode .home-link:active,
body.dark-mode .upload-btn-text-icon:hover,
body.dark-mode .upload-btn-text-icon:active,
body.dark-mode button:not(.navbar-toggle):not(.theme-switcher):not(.navbar-more-btn):not(.password-toggle):not(.toggle-password):hover,
body.dark-mode button:not(.navbar-toggle):not(.theme-switcher):not(.navbar-more-btn):not(.password-toggle):not(.toggle-password):active,
body.dark-mode input[type="button"]:hover,
body.dark-mode input[type="button"]:active,
body.dark-mode input[type="submit"]:hover,
body.dark-mode input[type="submit"]:active,
[data-theme="dark"] .btn-secondary:hover,
[data-theme="dark"] .btn-secondary:active,
[data-theme="dark"] .btn-danger:hover,
[data-theme="dark"] .btn-danger:active,
[data-theme="dark"] a.btn-secondary:hover,
[data-theme="dark"] a.btn-secondary:active,
[data-theme="dark"] a.btn-danger:hover,
[data-theme="dark"] a.btn-danger:active,
[data-theme="dark"] .page-link:hover,
[data-theme="dark"] .page-link:active,
[data-theme="dark"] .home-link:hover,
[data-theme="dark"] .home-link:active,
[data-theme="dark"] .upload-btn-text-icon:hover,
[data-theme="dark"] .upload-btn-text-icon:active,
[data-theme="dark"] button:not(.navbar-toggle):not(.theme-switcher):not(.navbar-more-btn):not(.password-toggle):not(.toggle-password):hover,
[data-theme="dark"] button:not(.navbar-toggle):not(.theme-switcher):not(.navbar-more-btn):not(.password-toggle):not(.toggle-password):active,
[data-theme="dark"] input[type="button"]:hover,
[data-theme="dark"] input[type="button"]:active,
[data-theme="dark"] input[type="submit"]:hover,
[data-theme="dark"] input[type="submit"]:active {
    background: rgba(255, 255, 255, 0.92) !important;
    border-color: rgba(255, 255, 255, 0.92) !important;
    color: #0f172a !important;
    filter: none !important;
}

.question-row,
.forum-post,
.member-card,
.ranking-item,
.group-card,
.activity-item,
.user-role-item,
.reply-item,
.post-reply {
    content-visibility: visible !important;
    contain-intrinsic-size: auto !important;
}

body.auth-page .main-container {
    width: min(100%, 700px) !important;
    margin: 0 auto !important;
    padding: clamp(40px, 7vh, 72px) 20px 64px !important;
}

body.auth-page .auth-container {
    max-width: 500px !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

body.auth-page .auth-card,
body.auth-page .login-card,
body.auth-page .register-card {
    width: 100% !important;
    max-width: 500px !important;
    margin: 0 auto !important;
    padding: clamp(24px, 3.5vw, 32px) !important;
    border: 1px solid rgba(148, 163, 184, 0.24) !important;
    border-radius: 24px !important;
    background: rgba(255, 255, 255, 0.94) !important;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.10) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body.auth-page .auth-card::before,
body.auth-page .auth-card::after,
body.auth-page .login-card::before,
body.auth-page .login-card::after,
body.auth-page .register-card::before,
body.auth-page .register-card::after {
    display: none !important;
    content: none !important;
}

body.auth-page .auth-header {
    margin-bottom: 28px !important;
}

body.auth-page .auth-header h2 {
    margin: 0 0 12px !important;
    font-size: clamp(2.1rem, 4vw, 3rem) !important;
    line-height: 1.08 !important;
    letter-spacing: 0 !important;
    color: #111111 !important;
}

body.auth-page .auth-header p {
    max-width: 24ch !important;
    margin: 0 auto !important;
    color: rgba(17, 17, 17, 0.74) !important;
    font-size: 1rem !important;
    line-height: 1.6 !important;
}

body.auth-page .auth-form,
body.auth-page #loginForm,
body.auth-page #registerForm {
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.auth-page .form-group {
    margin: 0 !important;
}

body.auth-page .form-group label {
    display: block !important;
    margin: 0 0 10px !important;
    color: #111111 !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
}

body.auth-page .form-group input,
body.auth-page .form-group textarea,
body.auth-page .form-group select {
    width: 100% !important;
    min-height: 58px !important;
    padding: 0 22px !important;
    border: 1px solid rgba(148, 163, 184, 0.36) !important;
    border-radius: 14px !important;
    background: #eef4ff !important;
    box-shadow: none !important;
    color: #111111 !important;
    font-size: 1.0625rem !important;
    letter-spacing: 0 !important;
}

body.auth-page .form-group input::placeholder,
body.auth-page .form-group textarea::placeholder {
    color: rgba(17, 17, 17, 0.42) !important;
}

body.auth-page .form-group input:focus,
body.auth-page .form-group textarea:focus,
body.auth-page .form-group select:focus {
    border-color: rgba(17, 17, 17, 0.42) !important;
    box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.08) !important;
    background: #f5f8ff !important;
}

body.auth-page .password-input {
    position: relative !important;
    display: block !important;
    width: 100% !important;
}

body.auth-page .password-input input {
    padding-right: 58px !important;
}

body.auth-page .password-toggle {
    position: absolute !important;
    top: 50% !important;
    right: 18px !important;
    transform: translateY(-50%) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: rgba(17, 17, 17, 0.56) !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    filter: none !important;
    z-index: 2 !important;
}

body.auth-page .password-toggle:hover,
body.auth-page .password-toggle:focus,
body.auth-page .password-toggle:active {
    background: transparent !important;
    color: #111111 !important;
    box-shadow: none !important;
    filter: none !important;
    opacity: 1 !important;
    outline: none !important;
}

body.auth-page .password-toggle i {
    font-size: 1rem !important;
    line-height: 1 !important;
    pointer-events: none !important;
}

body.auth-page .form-actions {
    margin-top: 6px !important;
}

body.auth-page .form-actions .btn,
body.auth-page .form-actions button[type="submit"],
body.auth-page .form-actions input[type="submit"] {
    width: 100% !important;
    min-height: 56px !important;
    padding: 0 24px !important;
    border: 1px solid #000000 !important;
    border-radius: 999px !important;
    background: #000000 !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

body.auth-page .form-actions .btn:hover,
body.auth-page .form-actions button[type="submit"]:hover,
body.auth-page .form-actions input[type="submit"]:hover,
body.auth-page .form-actions .btn:active,
body.auth-page .form-actions button[type="submit"]:active,
body.auth-page .form-actions input[type="submit"]:active {
    background: #000000 !important;
    border-color: #000000 !important;
    color: #ffffff !important;
    box-shadow: none !important;
    filter: brightness(1.04) !important;
}

body.auth-page .auth-footer {
    margin-top: 2px !important;
    text-align: center !important;
    color: rgba(17, 17, 17, 0.72) !important;
}

body.auth-page .auth-footer p {
    margin: 0 !important;
    color: inherit !important;
}

body.auth-page .auth-link {
    color: #111111 !important;
    font-weight: 600 !important;
}

body.auth-page .auth-link:hover {
    color: #111111 !important;
}

body.dark-mode.auth-page .auth-card,
body.dark-mode.auth-page .login-card,
body.dark-mode.auth-page .register-card {
    border-color: rgba(255, 255, 255, 0.12) !important;
    background: rgba(15, 23, 42, 0.84) !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.30) !important;
}

body.dark-mode.auth-page .auth-header h2,
body.dark-mode.auth-page .form-group label,
body.dark-mode.auth-page .auth-link {
    color: rgba(255, 255, 255, 0.96) !important;
}

body.dark-mode.auth-page .auth-header p,
body.dark-mode.auth-page .auth-footer {
    color: rgba(255, 255, 255, 0.72) !important;
}

body.dark-mode.auth-page .form-group input,
body.dark-mode.auth-page .form-group textarea,
body.dark-mode.auth-page .form-group select {
    border-color: rgba(255, 255, 255, 0.14) !important;
    background: rgba(30, 41, 59, 0.88) !important;
    color: rgba(255, 255, 255, 0.96) !important;
}

body.dark-mode.auth-page .form-group input::placeholder,
body.dark-mode.auth-page .form-group textarea::placeholder {
    color: rgba(255, 255, 255, 0.38) !important;
}

body.dark-mode.auth-page .password-toggle {
    color: rgba(255, 255, 255, 0.56) !important;
}

body.dark-mode.auth-page .password-toggle:hover,
body.dark-mode.auth-page .password-toggle:focus,
body.dark-mode.auth-page .password-toggle:active {
    color: rgba(255, 255, 255, 0.96) !important;
}

@media (max-width: 640px) {
    body.auth-page .main-container {
        width: 100% !important;
        padding: 32px 16px 56px !important;
    }

    body.auth-page .auth-card,
    body.auth-page .login-card,
    body.auth-page .register-card {
        max-width: 100% !important;
        padding: 22px 18px !important;
        border-radius: 14px !important;
    }

    body.auth-page .auth-header h2 {
        font-size: 2.3rem !important;
    }

    body.auth-page .form-group input,
    body.auth-page .form-group textarea,
    body.auth-page .form-group select {
        min-height: 54px !important;
        font-size: 1rem !important;
    }
}

body.auth-page #passwordToggle {
    all: unset;
    position: absolute !important;
    top: 50% !important;
    right: 18px !important;
    transform: translateY(-50%) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
    height: 24px !important;
    cursor: pointer !important;
    color: rgba(17, 17, 17, 0.56) !important;
    z-index: 3 !important;
}

body.auth-page #passwordToggle::before {
    content: "👁" !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    background: none !important;
    font-size: 14px !important;
    line-height: 1 !important;
}

body.auth-page #passwordToggle i {
    display: none !important;
}

body.auth-page #passwordToggle:hover,
body.auth-page #passwordToggle:focus,
body.auth-page #passwordToggle:active {
    color: #111111 !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

body.auth-page #loginForm .form-actions button[type="submit"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 56px !important;
    padding: 0 24px !important;
    border: 1px solid #000000 !important;
    border-radius: 999px !important;
    background: #000000 !important;
    background-image: none !important;
    color: #ffffff !important;
    box-shadow: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

body.auth-page #loginForm .form-actions button[type="submit"]:hover,
body.auth-page #loginForm .form-actions button[type="submit"]:active,
body.auth-page #loginForm .form-actions button[type="submit"]:focus {
    background: #000000 !important;
    border-color: #000000 !important;
    color: #ffffff !important;
    box-shadow: none !important;
    filter: brightness(1.04) !important;
    outline: none !important;
}

body.dark-mode.auth-page #passwordToggle {
    color: rgba(255, 255, 255, 0.62) !important;
}

body.dark-mode.auth-page #passwordToggle:hover,
body.dark-mode.auth-page #passwordToggle:focus,
body.dark-mode.auth-page #passwordToggle:active {
    color: rgba(255, 255, 255, 0.96) !important;
}

body.auth-page {
    --auth-toggle-color: rgba(17, 17, 17, 0.56);
}

body.auth-page .password-toggle-proxy {
    color: var(--auth-toggle-color, rgba(17, 17, 17, 0.56)) !important;
}

body.dark-mode.auth-page,
body.auth-page[data-theme="dark"],
[data-theme="dark"] body.auth-page {
    --auth-toggle-color: rgba(255, 255, 255, 0.7);
}

.questions-container .questions-search-bar,
.questions-container .questions-search-bar .search-box {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.questions-container .questions-search-bar .search-box {
    min-height: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

.btn,
a.btn,
button:not(.navbar-toggle):not(.theme-switcher):not(.navbar-more-btn):not(.password-toggle):not(.toggle-password),
input[type="button"],
input[type="submit"],
.upload-btn-text-icon,
.home-button,
.page-link,
.home-link,
.upload-btn,
.take-photo-btn {
    transition-property: background-color, border-color, color, filter, opacity !important;
    transition-duration: 80ms !important;
    transition-timing-function: ease-out !important;
    transition-delay: 0s !important;
}

.btn:hover,
a.btn:hover,
button:not(.navbar-toggle):not(.theme-switcher):not(.navbar-more-btn):not(.password-toggle):not(.toggle-password):hover,
input[type="button"]:hover,
input[type="submit"]:hover,
.upload-btn-text-icon:hover,
.home-button:hover:not(:disabled),
.page-link:hover,
.home-link:hover,
.upload-btn:hover,
.take-photo-btn:hover,
.btn:active,
a.btn:active,
button:not(.navbar-toggle):not(.theme-switcher):not(.navbar-more-btn):not(.password-toggle):not(.toggle-password):active,
input[type="button"]:active,
input[type="submit"]:active,
.upload-btn-text-icon:active,
.home-button:active:not(:disabled),
.page-link:active,
.home-link:active,
.upload-btn:active,
.take-photo-btn:active {
    transition-duration: 60ms !important;
    transition-delay: 0s !important;
}

.btn:active,
a.btn:active,
button:not(.navbar-toggle):not(.theme-switcher):not(.navbar-more-btn):not(.password-toggle):not(.toggle-password):active,
input[type="button"]:active,
input[type="submit"]:active,
.upload-btn-text-icon:active,
.home-button:active:not(:disabled),
.page-link:active,
.home-link:active,
.upload-btn:active,
.take-photo-btn:active {
    animation: none !important;
}

.navbar-menu,
.dropdown-menu,
.modal,
.card,
.modal-content {
    contain: none !important;
}

.navbar-menu,
.dropdown-menu,
.modal,
.card,
.modal-content {
    contain: none !important;
}

/* Absolute final performance stabilization override */
.question-row,
.forum-post,
.member-card,
.ranking-item,
.group-card,
.activity-item,
.user-role-item,
.reply-item,
.post-reply {
    content-visibility: visible !important;
    contain-intrinsic-size: auto !important;
}

.navbar-menu,
.dropdown-menu,
.modal,
.card,
.modal-content {
    contain: none !important;
}

/* Absolute final navbar + dark button override */
#navbar.navbar,
.navbar {
    border-radius: 0 !important;
}

.navbar-container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 18px !important;
}

.navbar-left {
    display: flex !important;
    flex: 1 1 auto !important;
    align-items: center !important;
    gap: 22px !important;
    min-width: 0 !important;
}

.navbar-right {
    display: flex !important;
    flex: 0 0 auto !important;
    margin-left: auto !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 14px !important;
}

.navbar-brand,
.navbar-brand__mark,
.navbar-menu,
.navbar-item,
.navbar-item.active,
.navbar-menu .navbar-item,
.navbar-menu .navbar-item.active {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: none !important;
}

.navbar-menu {
    display: flex !important;
    flex: 1 1 auto !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: clamp(12px, 1.2vw, 24px) !important;
    padding: 0 !important;
}

.navbar-item,
.navbar-menu .navbar-item {
    min-height: 44px !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

.navbar-item.active,
.navbar-menu .navbar-item.active {
    font-weight: 600 !important;
}

.theme-switcher,
.navbar .user-profile .avatar {
    border-radius: 999px !important;
}

body.dark-mode .navbar-brand,
body.dark-mode .navbar-brand__mark,
body.dark-mode .navbar-menu,
body.dark-mode .navbar-item,
body.dark-mode .navbar-item.active,
body.dark-mode .navbar-menu .navbar-item,
body.dark-mode .navbar-menu .navbar-item.active,
[data-theme="dark"] .navbar-brand,
[data-theme="dark"] .navbar-brand__mark,
[data-theme="dark"] .navbar-menu,
[data-theme="dark"] .navbar-item,
[data-theme="dark"] .navbar-item.active,
[data-theme="dark"] .navbar-menu .navbar-item,
[data-theme="dark"] .navbar-menu .navbar-item.active {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

body.dark-mode .navbar-item:hover,
body.dark-mode .navbar-item.active,
body.dark-mode .navbar-menu .navbar-item:hover,
body.dark-mode .navbar-menu .navbar-item.active,
[data-theme="dark"] .navbar-item:hover,
[data-theme="dark"] .navbar-item.active,
[data-theme="dark"] .navbar-menu .navbar-item:hover,
[data-theme="dark"] .navbar-menu .navbar-item.active {
    color: rgba(255, 255, 255, 0.96) !important;
    background: transparent !important;
}

body.dark-mode .btn,
body.dark-mode a.btn,
body.dark-mode button:not(.navbar-toggle):not(.theme-switcher):not(.navbar-more-btn):not(.password-toggle):not(.toggle-password),
body.dark-mode input[type="button"],
body.dark-mode input[type="submit"],
body.dark-mode .upload-btn-text-icon,
body.dark-mode .home-button,
body.dark-mode .page-link,
body.dark-mode .home-link,
body.dark-mode .upload-btn,
body.dark-mode .take-photo-btn,
[data-theme="dark"] .btn,
[data-theme="dark"] a.btn,
[data-theme="dark"] button:not(.navbar-toggle):not(.theme-switcher):not(.navbar-more-btn):not(.password-toggle):not(.toggle-password),
[data-theme="dark"] input[type="button"],
[data-theme="dark"] input[type="submit"],
[data-theme="dark"] .upload-btn-text-icon,
[data-theme="dark"] .home-button,
[data-theme="dark"] .page-link,
[data-theme="dark"] .home-link,
[data-theme="dark"] .upload-btn,
[data-theme="dark"] .take-photo-btn {
    border-color: rgba(255, 255, 255, 0.78) !important;
    color: rgba(255, 255, 255, 0.92) !important;
    background: transparent !important;
}

body.dark-mode .btn:hover,
body.dark-mode a.btn:hover,
body.dark-mode button:not(.navbar-toggle):not(.theme-switcher):not(.navbar-more-btn):not(.password-toggle):not(.toggle-password):hover,
body.dark-mode input[type="button"]:hover,
body.dark-mode input[type="submit"]:hover,
body.dark-mode .upload-btn-text-icon:hover,
body.dark-mode .home-button:hover:not(:disabled),
body.dark-mode .page-link:hover,
body.dark-mode .home-link:hover,
body.dark-mode .upload-btn:hover,
body.dark-mode .take-photo-btn:hover,
body.dark-mode .btn:active,
body.dark-mode a.btn:active,
body.dark-mode button:not(.navbar-toggle):not(.theme-switcher):not(.navbar-more-btn):not(.password-toggle):not(.toggle-password):active,
body.dark-mode input[type="button"]:active,
body.dark-mode input[type="submit"]:active,
body.dark-mode .upload-btn-text-icon:active,
body.dark-mode .home-button:active:not(:disabled),
body.dark-mode .page-link:active,
body.dark-mode .home-link:active,
body.dark-mode .upload-btn:active,
body.dark-mode .take-photo-btn:active,
[data-theme="dark"] .btn:hover,
[data-theme="dark"] a.btn:hover,
[data-theme="dark"] button:not(.navbar-toggle):not(.theme-switcher):not(.navbar-more-btn):not(.password-toggle):not(.toggle-password):hover,
[data-theme="dark"] input[type="button"]:hover,
[data-theme="dark"] input[type="submit"]:hover,
[data-theme="dark"] .upload-btn-text-icon:hover,
[data-theme="dark"] .home-button:hover:not(:disabled),
[data-theme="dark"] .page-link:hover,
[data-theme="dark"] .home-link:hover,
[data-theme="dark"] .upload-btn:hover,
[data-theme="dark"] .take-photo-btn:hover,
[data-theme="dark"] .btn:active,
[data-theme="dark"] a.btn:active,
[data-theme="dark"] button:not(.navbar-toggle):not(.theme-switcher):not(.navbar-more-btn):not(.password-toggle):not(.toggle-password):active,
[data-theme="dark"] input[type="button"]:active,
[data-theme="dark"] input[type="submit"]:active,
[data-theme="dark"] .upload-btn-text-icon:active,
[data-theme="dark"] .home-button:active:not(:disabled),
[data-theme="dark"] .page-link:active,
[data-theme="dark"] .home-link:active,
[data-theme="dark"] .upload-btn:active,
[data-theme="dark"] .take-photo-btn:active {
    background: rgba(255, 255, 255, 0.92) !important;
    border-color: rgba(255, 255, 255, 0.92) !important;
    color: #0f172a !important;
    filter: none !important;
}

body.dark-mode .btn-primary,
body.dark-mode a.btn-primary,
body.dark-mode .home-button,
body.dark-mode .pagination .page-link.active,
body.dark-mode .upload-btn,
body.dark-mode .take-photo-btn,
[data-theme="dark"] .btn-primary,
[data-theme="dark"] a.btn-primary,
[data-theme="dark"] .home-button,
[data-theme="dark"] .pagination .page-link.active,
[data-theme="dark"] .upload-btn,
[data-theme="dark"] .take-photo-btn {
    background: rgba(255, 255, 255, 0.92) !important;
    border-color: rgba(255, 255, 255, 0.92) !important;
    color: #0f172a !important;
}

body.dark-mode .btn-primary:hover,
body.dark-mode a.btn-primary:hover,
body.dark-mode .home-button:hover:not(:disabled),
body.dark-mode .pagination .page-link.active:hover,
body.dark-mode .upload-btn:hover,
body.dark-mode .take-photo-btn:hover,
body.dark-mode .btn-primary:active,
body.dark-mode a.btn-primary:active,
body.dark-mode .home-button:active:not(:disabled),
body.dark-mode .pagination .page-link.active:active,
body.dark-mode .upload-btn:active,
body.dark-mode .take-photo-btn:active,
[data-theme="dark"] .btn-primary:hover,
[data-theme="dark"] a.btn-primary:hover,
[data-theme="dark"] .home-button:hover:not(:disabled),
[data-theme="dark"] .pagination .page-link.active:hover,
[data-theme="dark"] .upload-btn:hover,
[data-theme="dark"] .take-photo-btn:hover,
[data-theme="dark"] .btn-primary:active,
[data-theme="dark"] a.btn-primary:active,
[data-theme="dark"] .home-button:active:not(:disabled),
[data-theme="dark"] .pagination .page-link.active:active,
[data-theme="dark"] .upload-btn:active,
[data-theme="dark"] .take-photo-btn:active {
    background: #ffffff !important;
    border-color: #ffffff !important;
    color: #0f172a !important;
    filter: brightness(1.03) !important;
}

/* Keep content-visibility only on large sections, not on individual interactive rows/cards */
.question-row,
.forum-post,
.member-card,
.ranking-item,
.group-card,
.activity-item,
.user-role-item,
.reply-item,
.post-reply {
    content-visibility: visible !important;
    contain-intrinsic-size: auto !important;
}

.navbar-menu,
.dropdown-menu,
.modal,
.card,
.modal-content {
    contain: none !important;
}

/* Final navbar layout override: left-aligned brand/menu, right-aligned controls, no dark-mode menu frame */
#navbar.navbar,
.navbar {
    border-radius: 0 !important;
}

.navbar-container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 18px !important;
}

.navbar-left {
    display: flex !important;
    flex: 1 1 auto !important;
    align-items: center !important;
    gap: 22px !important;
    min-width: 0 !important;
}

.navbar-right {
    display: flex !important;
    flex: 0 0 auto !important;
    margin-left: auto !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 14px !important;
}

.navbar-brand,
.navbar-brand__mark,
.navbar-menu,
.navbar-item,
.navbar-item.active,
.navbar-menu .navbar-item,
.navbar-menu .navbar-item.active {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: none !important;
}

.navbar-menu {
    display: flex !important;
    flex: 1 1 auto !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: clamp(12px, 1.2vw, 24px) !important;
    padding: 0 !important;
}

.navbar-item,
.navbar-menu .navbar-item {
    min-height: 44px !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

.navbar-item.active,
.navbar-menu .navbar-item.active {
    font-weight: 600 !important;
}

.theme-switcher,
.navbar .user-profile .avatar {
    border-radius: 999px !important;
}

body.dark-mode .navbar-brand,
body.dark-mode .navbar-brand__mark,
body.dark-mode .navbar-menu,
body.dark-mode .navbar-item,
body.dark-mode .navbar-item.active,
body.dark-mode .navbar-menu .navbar-item,
body.dark-mode .navbar-menu .navbar-item.active,
[data-theme="dark"] .navbar-brand,
[data-theme="dark"] .navbar-brand__mark,
[data-theme="dark"] .navbar-menu,
[data-theme="dark"] .navbar-item,
[data-theme="dark"] .navbar-item.active,
[data-theme="dark"] .navbar-menu .navbar-item,
[data-theme="dark"] .navbar-menu .navbar-item.active {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

body.dark-mode .navbar-item:hover,
body.dark-mode .navbar-item.active,
body.dark-mode .navbar-menu .navbar-item:hover,
body.dark-mode .navbar-menu .navbar-item.active,
[data-theme="dark"] .navbar-item:hover,
[data-theme="dark"] .navbar-item.active,
[data-theme="dark"] .navbar-menu .navbar-item:hover,
[data-theme="dark"] .navbar-menu .navbar-item.active {
    color: rgba(255, 255, 255, 0.96) !important;
    background: transparent !important;
}

/* Final dark button override */
body.dark-mode .btn,
body.dark-mode a.btn,
body.dark-mode button:not(.navbar-toggle):not(.theme-switcher):not(.navbar-more-btn):not(.password-toggle):not(.toggle-password),
body.dark-mode input[type="button"],
body.dark-mode input[type="submit"],
body.dark-mode .upload-btn-text-icon,
body.dark-mode .home-button,
body.dark-mode .page-link,
body.dark-mode .home-link,
body.dark-mode .upload-btn,
body.dark-mode .take-photo-btn,
[data-theme="dark"] .btn,
[data-theme="dark"] a.btn,
[data-theme="dark"] button:not(.navbar-toggle):not(.theme-switcher):not(.navbar-more-btn):not(.password-toggle):not(.toggle-password),
[data-theme="dark"] input[type="button"],
[data-theme="dark"] input[type="submit"],
[data-theme="dark"] .upload-btn-text-icon,
[data-theme="dark"] .home-button,
[data-theme="dark"] .page-link,
[data-theme="dark"] .home-link,
[data-theme="dark"] .upload-btn,
[data-theme="dark"] .take-photo-btn {
    border-color: rgba(255, 255, 255, 0.78) !important;
    color: rgba(255, 255, 255, 0.92) !important;
    background: transparent !important;
}

body.dark-mode .btn:hover,
body.dark-mode a.btn:hover,
body.dark-mode button:not(.navbar-toggle):not(.theme-switcher):not(.navbar-more-btn):not(.password-toggle):not(.toggle-password):hover,
body.dark-mode input[type="button"]:hover,
body.dark-mode input[type="submit"]:hover,
body.dark-mode .upload-btn-text-icon:hover,
body.dark-mode .home-button:hover:not(:disabled),
body.dark-mode .page-link:hover,
body.dark-mode .home-link:hover,
body.dark-mode .upload-btn:hover,
body.dark-mode .take-photo-btn:hover,
body.dark-mode .btn:active,
body.dark-mode a.btn:active,
body.dark-mode button:not(.navbar-toggle):not(.theme-switcher):not(.navbar-more-btn):not(.password-toggle):not(.toggle-password):active,
body.dark-mode input[type="button"]:active,
body.dark-mode input[type="submit"]:active,
body.dark-mode .upload-btn-text-icon:active,
body.dark-mode .home-button:active:not(:disabled),
body.dark-mode .page-link:active,
body.dark-mode .home-link:active,
body.dark-mode .upload-btn:active,
body.dark-mode .take-photo-btn:active,
[data-theme="dark"] .btn:hover,
[data-theme="dark"] a.btn:hover,
[data-theme="dark"] button:not(.navbar-toggle):not(.theme-switcher):not(.navbar-more-btn):not(.password-toggle):not(.toggle-password):hover,
[data-theme="dark"] input[type="button"]:hover,
[data-theme="dark"] input[type="submit"]:hover,
[data-theme="dark"] .upload-btn-text-icon:hover,
[data-theme="dark"] .home-button:hover:not(:disabled),
[data-theme="dark"] .page-link:hover,
[data-theme="dark"] .home-link:hover,
[data-theme="dark"] .upload-btn:hover,
[data-theme="dark"] .take-photo-btn:hover,
[data-theme="dark"] .btn:active,
[data-theme="dark"] a.btn:active,
[data-theme="dark"] button:not(.navbar-toggle):not(.theme-switcher):not(.navbar-more-btn):not(.password-toggle):not(.toggle-password):active,
[data-theme="dark"] input[type="button"]:active,
[data-theme="dark"] input[type="submit"]:active,
[data-theme="dark"] .upload-btn-text-icon:active,
[data-theme="dark"] .home-button:active:not(:disabled),
[data-theme="dark"] .page-link:active,
[data-theme="dark"] .home-link:active,
[data-theme="dark"] .upload-btn:active,
[data-theme="dark"] .take-photo-btn:active {
    background: rgba(255, 255, 255, 0.92) !important;
    border-color: rgba(255, 255, 255, 0.92) !important;
    color: #0f172a !important;
    filter: none !important;
}

body.dark-mode .btn-primary,
body.dark-mode a.btn-primary,
body.dark-mode .home-button,
body.dark-mode .pagination .page-link.active,
body.dark-mode .upload-btn,
body.dark-mode .take-photo-btn,
[data-theme="dark"] .btn-primary,
[data-theme="dark"] a.btn-primary,
[data-theme="dark"] .home-button,
[data-theme="dark"] .pagination .page-link.active,
[data-theme="dark"] .upload-btn,
[data-theme="dark"] .take-photo-btn {
    background: rgba(255, 255, 255, 0.92) !important;
    border-color: rgba(255, 255, 255, 0.92) !important;
    color: #0f172a !important;
}

body.dark-mode .btn-primary:hover,
body.dark-mode a.btn-primary:hover,
body.dark-mode .home-button:hover:not(:disabled),
body.dark-mode .pagination .page-link.active:hover,
body.dark-mode .upload-btn:hover,
body.dark-mode .take-photo-btn:hover,
body.dark-mode .btn-primary:active,
body.dark-mode a.btn-primary:active,
body.dark-mode .home-button:active:not(:disabled),
body.dark-mode .pagination .page-link.active:active,
body.dark-mode .upload-btn:active,
body.dark-mode .take-photo-btn:active,
[data-theme="dark"] .btn-primary:hover,
[data-theme="dark"] a.btn-primary:hover,
[data-theme="dark"] .home-button:hover:not(:disabled),
[data-theme="dark"] .pagination .page-link.active:hover,
[data-theme="dark"] .upload-btn:hover,
[data-theme="dark"] .take-photo-btn:hover,
[data-theme="dark"] .btn-primary:active,
[data-theme="dark"] a.btn-primary:active,
[data-theme="dark"] .home-button:active:not(:disabled),
[data-theme="dark"] .pagination .page-link.active:active,
[data-theme="dark"] .upload-btn:active,
[data-theme="dark"] .take-photo-btn:active {
    background: #ffffff !important;
    border-color: #ffffff !important;
    color: #0f172a !important;
    filter: brightness(1.03) !important;
}

.question-difficulty.easy,
.difficulty-tag.easy {
    color: #34c759 !important;
}

.question-difficulty.medium,
.difficulty-tag.medium {
    color: #ff9500 !important;
}

.question-difficulty.hard,
.difficulty-tag.hard {
    color: #ff3b30 !important;
}

#navbar.navbar,
.navbar {
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1200 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(17, 24, 39, 0.08) !important;
    border-radius: 0 !important;
    background: rgba(250, 250, 252, 0.78) !important;
    box-shadow: none !important;
}

#navbar.navbar::before,
#navbar.navbar::after,
.navbar::before,
.navbar::after,
.navbar-container::before,
.navbar-container::after {
    display: none !important;
    content: none !important;
}

.navbar-container {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 18px !important;
    width: min(100%, 1080px) !important;
    min-height: 44px !important;
    margin: 0 auto !important;
    padding: 0 18px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.navbar-left,
.navbar-right {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    min-width: 0 !important;
}

.navbar-brand {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    min-width: 24px !important;
    padding: 0 !important;
    color: #111111 !important;
    text-decoration: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.navbar-brand__mark {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 24px !important;
    height: auto !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: inherit !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.18em !important;
    line-height: 1 !important;
    box-shadow: none !important;
}

.navbar-menu {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: clamp(12px, 1.2vw, 24px) !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
}

.navbar-menu::-webkit-scrollbar {
    display: none !important;
}

.navbar-item,
.navbar-menu .navbar-item {
    position: static !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 44px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: rgba(17, 24, 39, 0.74) !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    transform: none !important;
    transition: color 150ms ease, opacity 150ms ease !important;
}

.navbar-item::before,
.navbar-item::after,
.navbar-menu .navbar-item::before,
.navbar-menu .navbar-item::after {
    display: none !important;
    content: none !important;
}

.navbar-item:hover,
.navbar-item.active,
.navbar-menu .navbar-item:hover,
.navbar-menu .navbar-item.active {
    color: #111111 !important;
    background: transparent !important;
}

.navbar-item.active,
.navbar-menu .navbar-item.active {
    font-weight: 600 !important;
}

.theme-switcher,
.navbar-toggle,
.navbar-more-btn,
.navbar .user-profile .avatar {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #111111 !important;
    transform: none !important;
    transition: opacity 150ms ease, color 150ms ease !important;
}

.theme-switcher:hover,
.navbar-toggle:hover,
.navbar-more-btn:hover,
.navbar .user-profile .avatar:hover {
    background: transparent !important;
    border-color: transparent !important;
    opacity: 0.72 !important;
}

.navbar .user-profile {
    display: inline-flex !important;
    align-items: center !important;
}

.navbar .user-profile .avatar {
    overflow: hidden !important;
    border-radius: 50% !important;
}

.navbar .user-profile .avatar img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.navbar-toggle {
    display: none !important;
}

.dropdown-menu {
    min-width: 220px !important;
    padding: 0.5rem !important;
    border: 1px solid rgba(17, 24, 39, 0.08) !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, 0.96) !important;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.10) !important;
}

body.dark-mode .navbar-brand,
body.dark-mode .navbar-brand__mark,
body.dark-mode .navbar-item,
body.dark-mode .navbar-menu .navbar-item,
body.dark-mode .theme-switcher,
body.dark-mode .navbar-toggle,
body.dark-mode .navbar-more-btn,
body.dark-mode .navbar .user-profile .avatar {
    color: rgba(255, 255, 255, 0.82) !important;
}

body.dark-mode .navbar-item:hover,
body.dark-mode .navbar-item.active,
body.dark-mode .navbar-menu .navbar-item:hover,
body.dark-mode .navbar-menu .navbar-item.active {
    color: rgba(255, 255, 255, 0.96) !important;
    background: transparent !important;
}

body.dark-mode .dropdown-menu {
    border-color: rgba(255, 255, 255, 0.10) !important;
    background: rgba(18, 24, 38, 0.96) !important;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28) !important;
}

@media (max-width: 960px) {
    .navbar-container {
        grid-template-columns: auto 1fr auto !important;
        width: 100% !important;
        min-height: 48px !important;
        gap: 10px !important;
        padding: 0 12px !important;
    }

    .navbar-toggle {
        display: inline-flex !important;
    }

    .navbar-menu {
        position: absolute !important;
        top: calc(100% + 6px) !important;
        left: 12px !important;
        right: 12px !important;
        display: none !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0 !important;
        padding: 8px 0 !important;
        border: 1px solid rgba(17, 24, 39, 0.08) !important;
        border-radius: 16px !important;
        background: rgba(255, 255, 255, 0.96) !important;
        box-shadow: 0 16px 36px rgba(15, 23, 42, 0.10) !important;
        z-index: 1210 !important;
    }

    .navbar-menu.open {
        display: flex !important;
    }

    .navbar-menu.closing {
        display: none !important;
    }

    .navbar-item,
    .navbar-menu .navbar-item {
        justify-content: flex-start !important;
        min-height: 40px !important;
        padding: 0 16px !important;
    }

    body.dark-mode .navbar-menu {
        border-color: rgba(255, 255, 255, 0.10) !important;
        background: rgba(18, 24, 38, 0.96) !important;
        box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28) !important;
    }
}

body .background-colors,
body .floating-squares,
.ripple {
    display: none !important;
    animation: none !important;
}

.question-row,
.forum-post,
.member-card,
.ranking-item,
.group-card,
.activity-item,
.user-role-item,
.reply-item,
.post-reply {
    content-visibility: visible !important;
    contain-intrinsic-size: auto !important;
}

.answer-format-hint {
    margin-bottom: 0.75rem;
    color: var(--text-secondary);
    font-size: 0.92rem;
}

.submitted-answer-preview {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.submitted-answer-preview__label {
    margin-bottom: 0.5rem;
    color: var(--text-secondary);
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.submitted-answer-preview__body {
    padding: 1rem 1.1rem;
    border-radius: 16px;
    background: rgba(148, 163, 184, 0.08);
}

.challenge-answer-input {
    min-height: 132px;
    resize: vertical;
}

.modal-close,
.image-preview-close {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
}

.answer-section #answer,
.challenge-answer-input {
    width: 100%;
    min-height: 156px;
    padding: 0.95rem 1.1rem;
    border: 1px solid rgba(122, 109, 88, 0.16);
    border-radius: 16px;
    background: var(--surface-bg);
    color: var(--text-primary);
    box-shadow: none;
    resize: vertical;
}

.answer-section #answer:focus,
.challenge-answer-input:focus {
    outline: none;
    border-color: rgba(99, 102, 241, 0.32);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}

.answer-format-hint {
    margin-bottom: 0.9rem;
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.answer-format-hint code {
    font-size: 0.9em;
}

/* Question tags */
body.tag-picker-open {
    overflow: hidden;
}


button:not(.question-tag-chip):not(.question-tag-choice):not(.question-tag-remove),
.btn,
a.btn,
label.btn,
.upload-btn-text-icon,
.forum-upload-btn,
.question-tag-picker-clear,
.question-tag-field__trigger,
.question-category-filter-btn,
.question-tag-picker-tab,
.modal-close,
input[type="button"],
input[type="submit"],
input[type="reset"] {
    border-radius: 9999px !important;
}

.owner-dashboard .role-controls {
    align-items: flex-start !important;
}

.owner-dashboard .role-multi-select {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    min-width: 220px !important;
}

.owner-dashboard .role-option {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 36px !important;
    padding: 0 12px !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 9999px !important;
    background: var(--card-background) !important;
    color: var(--text-primary) !important;
    cursor: pointer !important;
    user-select: none !important;
}

.owner-dashboard .role-option input {
    margin: 0 !important;
}

.owner-dashboard .role-option span {
    white-space: nowrap !important;
}

body.dark-mode .owner-dashboard .role-option {
    background: #1c2232 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #f3f4f6 !important;
}

body.dark-mode .theme-switcher,
[data-theme="dark"] .theme-switcher {
    background: transparent !important;
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body.dark-mode .theme-switcher:hover,
body.dark-mode .theme-switcher:active,
body.dark-mode .theme-switcher:focus-visible,
[data-theme="dark"] .theme-switcher:hover,
[data-theme="dark"] .theme-switcher:active,
[data-theme="dark"] .theme-switcher:focus-visible {
    background: transparent !important;
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
}

@media (max-width: 768px) {

    html,
    body {
        overflow-x: clip;
    }

    img,
    video,
    canvas,
    svg,
    iframe {
        max-width: 100%;
        height: auto;
    }

    .main-container,
    .forum-container,
    .forum-detail-container,
    .questions-container,
    .question-detail-container,
    .daily-challenge-container,
    .ranking-container,
    .profile-container,
    .checkin-container,
    .clock-container,
    .score-editor-container,
    .owner-dashboard {
        width: min(100%, calc(100vw - 24px)) !important;
        max-width: calc(100vw - 24px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
    }

    .questions-grid,
    .class-members-grid,
    .groups-grid,
    .info-grid,
    .member-select-grid {
        grid-template-columns: 1fr !important;
    }

    .forum-header,
    .card-actions,
    .form-actions,
    .editor-actions,
    .group-actions,
    .question-actions,
    .modal-footer {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.75rem !important;
    }

    .forum-header>*,
    .card-actions>*,
    .form-actions>*,
    .editor-actions>*,
    .group-actions>*,
    .question-actions>*,
    .modal-footer>* {
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    .search-box,
    .owner-dashboard .search-box {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
    }

    .search-box input,
    .search-box select,
    .search-box .btn,
    .search-box button,
    .owner-dashboard .search-box>* {
        width: 100% !important;
        min-width: 0 !important;
    }

    .editor-form .form-row {
        flex-direction: column !important;
        gap: 1rem !important;
    }

    .editor-form .form-group {
        width: 100% !important;
        min-width: 0 !important;
    }

    .group-member-item,
    .owner-dashboard .user-role-item {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .group-member-item>*,
    .owner-dashboard .user-role-item>* {
        width: 100% !important;
        min-width: 0 !important;
    }

    .owner-dashboard .role-controls {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
        justify-content: stretch !important;
    }

    .owner-dashboard .role-controls>*,
    .owner-dashboard .role-select {
        width: 100% !important;
        min-width: 0 !important;
    }

    .modal-content {
        width: min(100vw - 24px, 560px) !important;
        max-width: calc(100vw - 24px) !important;
        margin: 0 auto !important;
    }
}

@media (max-width: 480px) {

    .main-container,
    .forum-container,
    .forum-detail-container,
    .questions-container,
    .question-detail-container,
    .daily-challenge-container,
    .ranking-container,
    .profile-container,
    .checkin-container,
    .clock-container,
    .score-editor-container,
    .owner-dashboard {
        width: min(100%, calc(100vw - 16px)) !important;
        max-width: calc(100vw - 16px) !important;
    }

    .forum-header h2 {
        font-size: 1.35rem !important;
    }

    .modal-content {
        width: min(100vw - 16px, 520px) !important;
        max-width: calc(100vw - 16px) !important;
    }
}

button:not(.question-tag-chip):not(.question-tag-choice):not(.question-tag-remove),
.btn,
a.btn,
input[type="button"],
input[type="submit"],
input[type="reset"],
.page-link,
.home-link,
.upload-btn,
.take-photo-btn,
.question-tag-picker-clear,
.question-tag-search-summary__clear,
.question-tag-field__trigger,
.question-category-filter-btn,
#questionFilterBtn,
#uploadQuestionBtn,
.md-btn,
.md-tab,
a[role="button"] {
    border-radius: 9999px !important;
}

/* Final compact user dropdown sizing */
.dropdown-menu {
    min-width: 196px !important;
    width: 196px !important;
    padding: 0.38rem !important;
    border-radius: 14px !important;
}

.dropdown-header {
    padding: 0.7rem 0.75rem 0.62rem !important;
}

.dropdown-item,
.user-profile .dropdown-item,
#dropdownMenu .dropdown-item,
.dropdown-menu .dropdown-item {
    padding: 0.82rem 0.9rem !important;
    gap: 0.72rem !important;
    border-radius: 10px !important;
}

.dropdown-item i,
.dropdown-menu .dropdown-item i {
    width: 1.05rem !important;
    min-width: 1.05rem !important;
}

body.dark-mode .dropdown-menu,
[data-theme="dark"] .dropdown-menu {
    min-width: 196px !important;
    width: 196px !important;
}

.theme-switcher.theme-switcher--dark,
body.dark-mode .theme-switcher,
[data-theme="dark"] .theme-switcher {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.theme-switcher.theme-switcher--dark:hover,
.theme-switcher.theme-switcher--dark:active,
.theme-switcher.theme-switcher--dark:focus-visible,
body.dark-mode .theme-switcher:hover,
body.dark-mode .theme-switcher:active,
body.dark-mode .theme-switcher:focus-visible,
[data-theme="dark"] .theme-switcher:hover,
[data-theme="dark"] .theme-switcher:active,
[data-theme="dark"] .theme-switcher:focus-visible {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Authoritative global navbar glass system */
:root {
    --nav-shell-bg: rgba(248, 250, 252, 0.44);
    --nav-shell-bg-dark: rgba(10, 16, 26, 0.9);
    --nav-panel-bg: rgba(255, 255, 255, 0.82);
    --nav-panel-bg-dark: rgba(10, 16, 26, 0.94);
    --nav-border: rgba(148, 163, 184, 0.22);
    --nav-border-dark: rgba(255, 255, 255, 0.12);
    --nav-blur: 22px;
    --nav-hover-tint: rgba(15, 23, 42, 0.06);
    --nav-active-line: rgba(17, 24, 39, 0.92);
}

body.dark-mode,
[data-theme="dark"] {
    --nav-shell-bg: var(--nav-shell-bg-dark);
    --nav-panel-bg: var(--nav-panel-bg-dark);
    --nav-border: var(--nav-border-dark);
    --nav-hover-tint: rgba(255, 255, 255, 0.08);
    --nav-active-line: rgba(255, 255, 255, 0.88);
}

#navbar.navbar,
.navbar {
    --nav-shell-bg: rgba(248, 250, 252, 0.44);
    --nav-panel-bg: rgba(255, 255, 255, 0.82);
    --nav-border: rgba(148, 163, 184, 0.22);
    --nav-shell-border: var(--nav-border);
    --nav-hover-tint: rgba(15, 23, 42, 0.06);
    --nav-active-line: rgba(17, 24, 39, 0.92);
    --nav-item-hover-bg: transparent;
    --nav-item-active-bg: transparent;
    --nav-action-bg: transparent;
    --nav-rail-bg: transparent;
    --nav-shadow: none;
    --nav-blur: 22px;
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1200 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid var(--nav-border) !important;
    border-radius: 0 !important;
    outline: none !important;
    background: var(--nav-shell-bg) !important;
    background-image: none !important;
    box-shadow: none !important;
    isolation: isolate !important;
    overflow: visible !important;
}

body.dark-mode #navbar.navbar,
body.dark-mode .navbar,
[data-theme="dark"] #navbar.navbar,
[data-theme="dark"] .navbar {
    --nav-shell-bg: rgba(10, 16, 26, 0.74);
    --nav-panel-bg: rgba(10, 16, 26, 0.84);
    --nav-border: rgba(255, 255, 255, 0.12);
    --nav-shell-border: var(--nav-border);
    --nav-hover-tint: rgba(255, 255, 255, 0.08);
    --nav-active-line: rgba(255, 255, 255, 0.88);
    --nav-item-hover-bg: transparent;
    --nav-item-active-bg: transparent;
    --nav-action-bg: transparent;
    --nav-rail-bg: transparent;
    --nav-shadow: none;
    border-bottom: 1px solid var(--nav-border) !important;
    background: var(--nav-shell-bg) !important;
    background-image: none !important;
    box-shadow: none !important;
}

#navbar.navbar::before,
#navbar.navbar::after,
.navbar::before,
.navbar::after,
.navbar-container::before,
.navbar-container::after,
.navbar-left::before,
.navbar-left::after,
.navbar-right::before,
.navbar-right::after {
    display: none !important;
    content: none !important;
}

#navbar.navbar .navbar-left,
#navbar.navbar .navbar-right,
#navbar.navbar .navbar-brand,
#navbar.navbar .navbar-brand__mark,
#navbar.navbar .navbar-center,
#navbar.navbar .navbar-menu,
#navbar.navbar .navbar-item,
#navbar.navbar .navbar-item.active,
#navbar.navbar .navbar-menu .navbar-item,
#navbar.navbar .navbar-menu .navbar-item.active,
#navbar.navbar .theme-switcher,
#navbar.navbar .navbar-toggle,
#navbar.navbar .navbar-more-btn,
#navbar.navbar .user-profile,
#navbar.navbar .user-profile .avatar,
.navbar .navbar-left,
.navbar .navbar-right,
.navbar .navbar-brand,
.navbar .navbar-brand__mark,
.navbar .navbar-center,
.navbar .navbar-menu,
.navbar .navbar-item,
.navbar .navbar-item.active,
.navbar .navbar-menu .navbar-item,
.navbar .navbar-menu .navbar-item.active,
.navbar .theme-switcher,
.navbar .navbar-toggle,
.navbar .navbar-more-btn,
.navbar .user-profile,
.navbar .user-profile .avatar {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: none !important;
}

.navbar-container {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 18px !important;
    width: min(100%, 1080px) !important;
    min-height: 52px !important;
    margin: 0 auto !important;
    padding: 0 18px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.navbar-left,
.navbar-right {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    min-width: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.navbar-left {
    flex: 1 1 auto !important;
    gap: 22px !important;
}

.navbar-right {
    flex: 0 0 auto !important;
    margin-left: auto !important;
    justify-content: flex-end !important;
}

.navbar-brand,
.navbar-brand__mark,
.navbar-center,
.navbar-menu {
    border: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

.navbar-brand {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 24px !important;
    padding: 0 !important;
    color: var(--text-primary) !important;
    text-decoration: none !important;
}

.navbar-brand__mark {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 24px !important;
    padding: 0 !important;
    color: inherit !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.18em !important;
    line-height: 1 !important;
}

.navbar-menu {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: clamp(12px, 1.2vw, 22px) !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    padding: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

.navbar-menu::-webkit-scrollbar {
    display: none !important;
}

.navbar-menu.open,
.navbar-menu.closing {
    background: var(--nav-panel-bg) !important;
    border: 1px solid var(--nav-border) !important;
    border-radius: 14px !important;
    box-shadow: none !important;
}

.navbar-item,
.navbar-menu .navbar-item {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 44px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    color: var(--text-secondary) !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    transition: color 150ms ease, opacity 150ms ease !important;
}

.navbar-item::before,
.navbar-menu .navbar-item::before {
    display: none !important;
    content: none !important;
}

.navbar-item::after,
.navbar-menu .navbar-item::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 10px !important;
    height: 1.5px !important;
    border-radius: 9999px !important;
    background: var(--nav-active-line) !important;
    transform: scaleX(0) !important;
    transform-origin: center !important;
    opacity: 0 !important;
    transition: transform 150ms ease, opacity 150ms ease !important;
}

.navbar-item:hover,
.navbar-item:focus-visible,
.navbar-menu .navbar-item:hover,
.navbar-menu .navbar-item:focus-visible {
    color: var(--text-primary) !important;
    background: transparent !important;
}

.navbar-item.active,
.navbar-menu .navbar-item.active {
    color: var(--text-primary) !important;
    font-weight: 600 !important;
    background: transparent !important;
}

.navbar-item.active::after,
.navbar-menu .navbar-item.active::after {
    transform: scaleX(1) !important;
    opacity: 1 !important;
}

.theme-switcher,
.navbar-toggle,
.navbar-more-btn,
.navbar .user-profile .avatar {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 9999px !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    color: var(--text-primary) !important;
    transition: background-color 150ms ease, opacity 150ms ease, color 150ms ease !important;
}

.navbar .user-profile {
    display: inline-flex !important;
    align-items: center !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.navbar .user-profile .avatar {
    overflow: hidden !important;
}

.theme-switcher:hover,
.theme-switcher:focus-visible,
.theme-switcher:active,
.navbar-toggle:hover,
.navbar-toggle:focus-visible,
.navbar-toggle:active,
.navbar-more-btn:hover,
.navbar-more-btn:focus-visible,
.navbar-more-btn:active,
.navbar .user-profile .avatar:hover,
.navbar .user-profile .avatar:focus-visible,
.navbar .user-profile .avatar:active {
    background: var(--nav-hover-tint) !important;
    box-shadow: none !important;
}

.navbar-toggle {
    display: none !important;
}

.dropdown-menu,
#dropdownMenu,
.navbar-more-dropdown {
    min-width: 196px !important;
    width: 196px !important;
    padding: 0.38rem !important;
    border: 1px solid var(--nav-border) !important;
    border-radius: 14px !important;
    background: var(--nav-panel-bg) !important;
    background-image: none !important;
    box-shadow: none !important;
}

.dropdown-header,
#dropdownMenu .dropdown-header,
.dropdown-item,
#dropdownMenu .dropdown-item {
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

.dropdown-header,
#dropdownMenu .dropdown-header {
    padding: 0.7rem 0.75rem 0.62rem !important;
    border-bottom: 1px solid rgba(148, 163, 184, 0.16) !important;
}

.dropdown-item,
.user-profile .dropdown-item,
#dropdownMenu .dropdown-item,
.dropdown-menu .dropdown-item {
    padding: 0.82rem 0.9rem !important;
    gap: 0.72rem !important;
    border-radius: 10px !important;
}

.dropdown-item i,
.dropdown-menu .dropdown-item i {
    width: 1.05rem !important;
    min-width: 1.05rem !important;
}

.dropdown-item:hover,
.dropdown-item:focus-visible,
#dropdownMenu .dropdown-item:hover,
#dropdownMenu .dropdown-item:focus-visible {
    background: var(--nav-hover-tint) !important;
    border-color: transparent !important;
}

body.dark-mode .dropdown-header,
body.dark-mode #dropdownMenu .dropdown-header,
[data-theme="dark"] .dropdown-header,
[data-theme="dark"] #dropdownMenu .dropdown-header {
    border-bottom-color: rgba(255, 255, 255, 0.10) !important;
}

@media (max-width: 960px) {
    .navbar-container {
        width: 100% !important;
        min-height: 52px !important;
        gap: 12px !important;
        padding: 0 12px !important;
    }

    .navbar-toggle {
        display: inline-flex !important;
    }

    .navbar-menu {
        position: absolute !important;
        top: calc(100% + 8px) !important;
        left: 12px !important;
        right: 12px !important;
        display: none !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0 !important;
        padding: 8px 0 !important;
        margin: 0 !important;
        max-width: none !important;
        overflow: visible !important;
        background: var(--nav-panel-bg) !important;
        border: 1px solid var(--nav-border) !important;
        border-radius: 14px !important;
        box-shadow: none !important;
        z-index: 1210 !important;
    }

    .navbar-menu.open {
        display: flex !important;
    }

    .navbar-menu.closing {
        display: none !important;
    }

    .navbar-item,
    .navbar-menu .navbar-item {
        justify-content: flex-start !important;
        min-height: 44px !important;
        padding: 0 18px !important;
        text-align: left !important;
    }

    .navbar-item::after,
    .navbar-menu .navbar-item::after {
        left: 18px !important;
        right: 18px !important;
        bottom: 9px !important;
    }
}

/* Score editor: leave space between title and search/action row */
.score-editor-container .card-header .card-actions {
    margin-top: 14px !important;
}

@media (min-width: 768px) {
    .score-editor-container .card-header .card-actions {
        margin-top: 18px !important;
    }
}

/* ============================================
   NAVBAR UNIFIED FROSTED GLASS STYLE
   ============================================ */

.navbar {
    position: sticky !important;
    top: 12px !important;
    z-index: 1000 !important;
    width: fit-content !important;
    max-width: calc(100% - 40px) !important;
    height: 48px !important;
    margin: 12px auto !important;
    padding: 0 6px !important;
    border-radius: 9999px !important;
    border: none !important;
    outline: none !important;
    overflow: visible !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    background: rgba(255, 255, 255, 0.65) !important;
    box-shadow:
        0 2px 12px rgba(0, 0, 0, 0.08),
        0 1px 3px rgba(0, 0, 0, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;

    transition: none !important;
    animation: none !important;
    isolation: isolate !important;
}

body.dark-mode .navbar,
[data-theme="dark"] .navbar {
    background: rgba(15, 23, 42, 0.42) !important;
    box-shadow:
        0 2px 12px rgba(0, 0, 0, 0.25),
        0 1px 3px rgba(0, 0, 0, 0.20),
        inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

.navbar::before,
.navbar::after {
    display: none !important;
    content: none !important;
}

.navbar-container {
    position: relative;
    z-index: 1;
    height: 48px;
    width: 100%;
    padding: 0 12px !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.navbar-left,
.navbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.navbar-menu {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 4px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.navbar-menu .navbar-item {
    height: 36px;
    min-height: unset;
    padding: 0 14px !important;
    border-radius: 9999px !important;
    font-size: 0.88rem !important;
    font-weight: 500 !important;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    white-space: nowrap;

    background: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    transition: none !important;
    transform: none !important;
    text-decoration: none;
}

.navbar-menu .navbar-item,
.navbar-item {
    color: rgba(60, 60, 70, 0.75) !important;
}

body.dark-mode .navbar-menu .navbar-item,
body.dark-mode .navbar-item,
[data-theme="dark"] .navbar-menu .navbar-item,
[data-theme="dark"] .navbar-item {
    color: rgba(255, 255, 255, 0.65) !important;
}

.navbar-menu .navbar-item:hover,
.navbar-item:hover {
    color: rgba(30, 30, 40, 0.95) !important;
    font-weight: 600 !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

body.dark-mode .navbar-menu .navbar-item:hover,
body.dark-mode .navbar-item:hover,
[data-theme="dark"] .navbar-menu .navbar-item:hover,
[data-theme="dark"] .navbar-item:hover {
    color: rgba(255, 255, 255, 0.92) !important;
}

.navbar-menu .navbar-item.active,
.navbar-item.active {
    color: rgba(30, 30, 40, 0.95) !important;
    font-weight: 700 !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

body.dark-mode .navbar-menu .navbar-item.active,
body.dark-mode .navbar-item.active,
[data-theme="dark"] .navbar-menu .navbar-item.active,
[data-theme="dark"] .navbar-item.active {
    color: rgba(255, 255, 255, 0.95) !important;
}

.navbar-brand,
.navbar-brand__mark {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.navbar-brand__mark::before,
.navbar-brand__mark::after {
    display: none !important;
    content: none !important;
}

.navbar-item::before,
.navbar-item::after {
    display: none !important;
    content: none !important;
}

.theme-switcher {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.navbar-toggle,
.navbar-more-btn {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.navbar .user-profile .avatar {
    border: none !important;
    box-shadow: none !important;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .navbar {
        max-width: calc(100% - 32px) !important;
        height: 46px !important;
    }

    .navbar-container {
        height: 46px;
        gap: 12px;
    }

    .navbar-menu .navbar-item {
        padding: 0 10px !important;
        font-size: 0.82rem !important;
    }
}

/* Final navbar shell stabilization
 * The last navbar block in main.css must define the real first-paint result.
 */
#navbar {
    background: var(--navbar-shell-bg-light) !important;
    background-image: none !important;
    border: none !important;
    box-shadow: var(--navbar-shell-shadow-light) !important;
}

body.dark-mode #navbar,
[data-theme="dark"] #navbar,
html:has(body.dark-mode) #navbar {
    background: var(--navbar-shell-bg-dark) !important;
    background-image: none !important;
    border: none !important;
    box-shadow: var(--navbar-shell-shadow-dark) !important;
}

#navbar > .navbar-container,
#navbar > .navbar-container > .navbar-left,
#navbar > .navbar-container > .navbar-right,
#navbar .navbar-brand,
#navbar .navbar-brand__mark,
#navbar .theme-switcher,
#navbar .navbar-toggle,
#navbar .navbar-more-btn,
#navbar .user-profile,
#navbar .user-profile .avatar {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
}

#navbar .navbar-item {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

@media (min-width: 802px) {
    #navbar .navbar-menu {
        background: transparent !important;
        background-color: transparent !important;
        background-image: none !important;
        border: none !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}

@media (max-width: 801px) {
    #navbar .navbar-menu.open,
    #navbar .navbar-menu.closing {
        background: rgba(255, 255, 255, 0.96) !important;
        border: 1px solid rgba(17, 24, 39, 0.08) !important;
        box-shadow: 0 16px 36px rgba(15, 23, 42, 0.10) !important;
    }

    body.dark-mode #navbar .navbar-menu.open,
    body.dark-mode #navbar .navbar-menu.closing,
    [data-theme="dark"] #navbar .navbar-menu.open,
    [data-theme="dark"] #navbar .navbar-menu.closing {
        background: rgba(18, 24, 38, 0.96) !important;
        border-color: rgba(255, 255, 255, 0.10) !important;
        box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28) !important;
    }
}

/* Dark mode username colors */
body.dark-mode .user-name.role-owner,
[data-theme="dark"] .user-name.role-owner {
    color: #c084fc !important;
}

body.dark-mode .user-name.role-admin,
[data-theme="dark"] .user-name.role-admin {
    color: #fb7185 !important;
}

body.dark-mode .user-name.role-scorer,
[data-theme="dark"] .user-name.role-scorer {
    color: #fb923c !important;
}

body.dark-mode .user-name.role-user,
[data-theme="dark"] .user-name.role-user {
    color: #e2e8f0 !important;
}

/* Dark mode user-link colors */
body.dark-mode .user-link.role-owner,
[data-theme="dark"] .user-link.role-owner {
    color: #c084fc !important;
}

body.dark-mode .user-link.role-admin,
[data-theme="dark"] .user-link.role-admin {
    color: #fb7185 !important;
}

body.dark-mode .user-link.role-scorer,
[data-theme="dark"] .user-link.role-scorer {
    color: #fb923c !important;
}

body.dark-mode .user-link.role-user,
[data-theme="dark"] .user-link.role-user {
    color: #e2e8f0 !important;
}


/* ============================================================
   MathRealm 2026 Site Redesign
   Clean, dense, Vercel-inspired system layer.
   Keep this block last so it is the authoritative visual source.
   ============================================================ */

:root {
    color-scheme: light;

    --mr-bg: #faf8f4;
    --mr-bg-raised: #fffdf8;
    --mr-bg-subtle: #f4f1ea;
    --mr-bg-muted: #ece7db;
    --mr-text: #1a1a1a;
    --mr-text-muted: #5f5a4f;
    --mr-text-faint: #8a8475;
    --mr-border: #ddd6c8;
    --mr-border-strong: #1a1a1a;
    --mr-primary: #1a1a1a;
    --mr-primary-hover: #c0392b;
    --mr-focus: #c0392b;
    --mr-success: #2e7d4f;
    --mr-warning: #9a6a1a;
    --mr-danger: #c0392b;
    --mr-info: #2c5f8a;
    --mr-radius: 4px;
    --mr-radius-sm: 3px;
    --mr-radius-lg: 4px;
    --mr-space-1: 4px;
    --mr-space-2: 8px;
    --mr-space-3: 12px;
    --mr-space-4: 16px;
    --mr-space-5: 20px;
    --mr-space-6: 24px;
    --mr-space-8: 32px;
    --mr-space-10: 40px;
    --mr-space-12: 48px;
    --mr-container: 1180px;
    --mr-container-narrow: 760px;
    --mr-shadow-xs: none;
    --mr-shadow-sm: none;
    --mr-ring: 0 0 0 3px rgba(192, 57, 43, 0.18);
    --mr-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --mr-font-body: "Geist", "Avenir Next", "PingFang SC", "Microsoft YaHei", sans-serif;
    --mr-font-mono: "JetBrains Mono", "SFMono-Regular", "Cascadia Code", monospace;
    --mr-accent: #c0392b;
    --mr-rule: #1a1a1a;           /* 结构线 */
    --mr-rule-soft: #ddd6c8;      /* 分隔线 */
    --mr-double-rule: 3px double #1a1a1a;
    --mr-shadow-press: 2px 2px 0 #1a1a1a;   /* hover 硬偏移阴影 */
    --mr-font-display: var(--ds-font);

    --color-bg: var(--mr-bg);
    --color-bg-secondary: var(--mr-bg-raised);
    --color-bg-tertiary: var(--mr-bg-subtle);
    --color-surface: var(--mr-bg-raised);
    --color-surface-strong: var(--mr-bg-raised);
    --color-surface-muted: var(--mr-bg-subtle);
    --color-text-primary: var(--mr-text);
    --color-text-secondary: var(--mr-text-muted);
    --color-text-tertiary: var(--mr-text-faint);
    --color-border: var(--mr-border);
    --color-border-strong: var(--mr-border-strong);
    --color-accent: var(--mr-primary);
    --color-accent-hover: var(--mr-primary-hover);
    --color-accent-secondary: var(--mr-info);
    --color-success: var(--mr-success);
    --color-warning: var(--mr-warning);
    --color-error: var(--mr-danger);

    --primary-color: var(--mr-primary);
    --secondary-color: var(--mr-bg-raised);
    --text-primary: var(--mr-text);
    --text-secondary: var(--mr-text-muted);
    --border-color: var(--mr-border);
    --background-color: var(--mr-bg);
    --card-background: var(--mr-bg-raised);
    --input-background: var(--mr-bg-raised);
    --input-border: var(--mr-border);
    --success-color: var(--mr-success);
    --warning-color: var(--mr-warning);
    --danger-color: var(--mr-danger);
    --button-primary: var(--mr-primary);
    --button-primary-hover: var(--mr-primary-hover);
    --button-secondary: var(--mr-bg-raised);
    --button-secondary-hover: var(--mr-bg-subtle);
    --modal-overlay: rgba(0, 0, 0, 0.42);
    --border-radius: var(--mr-radius);
    --radius-sm: var(--mr-radius-sm);
    --radius-md: var(--mr-radius);
    --radius-lg: var(--mr-radius-lg);
    --radius-xl: var(--mr-radius-lg);
    --shadow-sm: var(--mr-shadow-xs);
    --shadow-md: var(--mr-shadow-sm);
    --shadow-lg: 0 0 0 0 rgba(0, 0, 0, 0);
    --shadow-focus: var(--mr-ring);
    --font-family: var(--mr-font-body);
    --font-family-display: var(--mr-font-display);
    --transition-fast: 150ms var(--mr-ease);
    --transition-normal: 180ms var(--mr-ease);
    --transition-slow: 220ms var(--mr-ease);
    --transition: background-color var(--transition-normal), border-color var(--transition-normal), color var(--transition-normal), box-shadow var(--transition-normal), opacity var(--transition-normal), transform var(--transition-normal);
}

body.dark-mode,
[data-theme="dark"] {
    color-scheme: dark;

    --mr-bg: #050505;
    --mr-bg-raised: #111111;
    --mr-bg-subtle: #171717;
    --mr-bg-muted: #262626;
    --mr-text: #fafafa;
    --mr-text-muted: #a3a3a3;
    --mr-text-faint: #737373;
    --mr-border: #262626;
    --mr-border-strong: #3f3f46;
    --mr-primary: #fafafa;
    --mr-primary-hover: #e5e5e5;
    --mr-focus: #3291ff;
    --mr-success: #3dd68c;
    --mr-warning: #f5a524;
    --mr-danger: #ff5c5c;
    --mr-info: #52a8ff;
    --mr-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.32);
    --mr-shadow-sm: 0 10px 30px rgba(0, 0, 0, 0.34);

    background: var(--mr-bg) !important;
}

html {
    background: var(--mr-bg) !important;
    color: var(--mr-text) !important;
    font-family: var(--mr-font-body) !important;
    scroll-padding-top: 88px;
}

body {
    min-width: 320px;
    min-height: 100vh;
    margin: 0;
    color: var(--mr-text) !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.72) 0%, rgba(250, 250, 250, 0) 260px),
        repeating-linear-gradient(90deg, rgba(17, 17, 17, 0.032) 0 1px, transparent 1px 96px),
        var(--mr-bg) !important;
    font-family: var(--mr-font-body) !important;
    letter-spacing: 0;
    overflow-x: hidden;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

body.dark-mode,
[data-theme="dark"] body,
body[data-theme="dark"] {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.035) 0%, rgba(5, 5, 5, 0) 260px),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 96px),
        var(--mr-bg) !important;
}

* {
    box-sizing: border-box;
}

::selection {
    background: rgba(192, 57, 43, 0.18);
}

a {
    color: inherit;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

img,
video,
canvas,
svg {
    max-width: 100%;
}

button,
input,
textarea,
select {
    font: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--mr-text) !important;
    font-family: var(--mr-font-body) !important;
    letter-spacing: 0 !important;
    text-wrap: balance;
}

p,
li,
dd,
dt,
span,
label {
    text-wrap: pretty;
}

h1[id],
h2[id],
h3[id],
h4[id] {
    scroll-margin-top: 96px;
}

.background-colors,
.floating-squares,
body .background-colors,
body .floating-squares {
    display: none !important;
}

.sr-only,
.skip-link {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.skip-link:focus,
.skip-link:focus-visible {
    position: fixed !important;
    top: 12px !important;
    left: 12px !important;
    z-index: 10000 !important;
    width: auto !important;
    height: auto !important;
    padding: 10px 14px !important;
    margin: 0 !important;
    clip: auto !important;
    border: 1px solid var(--mr-border-strong) !important;
    border-radius: var(--mr-radius) !important;
    background: var(--mr-bg-raised) !important;
    color: var(--mr-text) !important;
    box-shadow: var(--mr-shadow-sm) !important;
}

:focus {
    outline: none;
}

:focus-visible {
    outline: 2px solid var(--mr-focus) !important;
    outline-offset: 2px !important;
    box-shadow: var(--mr-ring) !important;
}

/* Navigation */
#navbar,
.navbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 1200 !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 64px !important;
    margin: 0 !important;
    padding: max(0px, env(safe-area-inset-top)) 0 0 !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 0 !important;
    background: rgba(250, 250, 250, 0.84) !important;
    box-shadow: none !important;
}

body.dark-mode #navbar,
body.dark-mode .navbar,
[data-theme="dark"] #navbar,
[data-theme="dark"] .navbar {
    border-bottom-color: rgba(255, 255, 255, 0.12) !important;
    background: rgba(5, 5, 5, 0.82) !important;
    box-shadow: none !important;
}

#navbar .navbar-container,
.navbar-container {
    width: min(100% - 32px, var(--mr-container)) !important;
    height: 64px !important;
    margin-inline: auto !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: var(--mr-space-5) !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.navbar-left,
.navbar-right {
    display: flex !important;
    align-items: center !important;
    min-width: 0 !important;
    gap: var(--mr-space-3) !important;
}

.navbar-left {
    flex: 1 1 auto !important;
}

.navbar-right {
    flex: 0 0 auto !important;
}

.navbar-brand {
    display: inline-flex !important;
    align-items: center !important;
    min-width: max-content !important;
    min-height: 40px !important;
    padding: 0 !important;
    color: var(--mr-text) !important;
    text-decoration: none !important;
}

.navbar-brand__mark {
    display: inline-grid !important;
    place-items: center !important;
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    border: 1px solid var(--mr-primary) !important;
    border-radius: var(--mr-radius) !important;
    background: var(--mr-primary) !important;
    color: var(--mr-bg) !important;
    font-family: var(--mr-font-mono) !important;
    font-size: 0.72rem !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    line-height: 1 !important;
}

body.dark-mode .navbar-brand__mark,
[data-theme="dark"] .navbar-brand__mark {
    color: #050505 !important;
}

.navbar-menu {
    display: flex !important;
    align-items: center !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    gap: var(--mr-space-1) !important;
    padding: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.navbar-menu::-webkit-scrollbar {
    display: none !important;
}

.navbar-item,
.navbar-menu .navbar-item {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    min-height: 36px !important;
    padding: 0 10px !important;
    border: 0 !important;
    border-radius: var(--mr-radius) !important;
    color: var(--mr-text-muted) !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transition: background-color var(--transition-fast), color var(--transition-fast), opacity var(--transition-fast) !important;
}

.navbar-item:hover,
.navbar-item:focus-visible,
.navbar-menu .navbar-item:hover,
.navbar-menu .navbar-item:focus-visible {
    color: var(--mr-text) !important;
    background: var(--mr-bg-subtle) !important;
    font-weight: 500 !important;
}

.navbar-item.active,
.navbar-menu .navbar-item.active {
    color: var(--mr-text) !important;
    background: var(--mr-bg-muted) !important;
    font-weight: 650 !important;
}

.theme-switcher,
.navbar-toggle,
.navbar-more-btn,
.navbar .user-profile .avatar {
    display: inline-grid !important;
    place-items: center !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
    border: 1px solid var(--mr-border) !important;
    border-radius: var(--mr-radius) !important;
    background: var(--mr-bg-raised) !important;
    color: var(--mr-text) !important;
    box-shadow: none !important;
    cursor: pointer !important;
    transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast) !important;
}

.theme-switcher:hover,
.navbar-toggle:hover,
.navbar-more-btn:hover,
.navbar .user-profile .avatar:hover {
    background: var(--mr-bg-subtle) !important;
    border-color: var(--mr-border-strong) !important;
    opacity: 1 !important;
}

.navbar .user-profile {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
}

.dropdown-menu,
#navbar .dropdown-menu {
    min-width: 240px !important;
    padding: var(--mr-space-2) !important;
    border: 1px solid var(--mr-border) !important;
    border-radius: var(--mr-radius-lg) !important;
    background: var(--mr-bg-raised) !important;
    box-shadow: var(--mr-shadow-sm) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.dropdown-header {
    padding: var(--mr-space-3) !important;
    border-bottom: 1px solid var(--mr-border) !important;
    border-radius: var(--mr-radius) !important;
    color: var(--mr-text) !important;
    font-size: 0.875rem !important;
    font-weight: 650 !important;
}

.dropdown-item {
    min-height: 40px !important;
    padding: 0 var(--mr-space-3) !important;
    border-radius: var(--mr-radius) !important;
    color: var(--mr-text-muted) !important;
    font-size: 0.875rem !important;
    text-decoration: none !important;
    transition: background-color var(--transition-fast), color var(--transition-fast) !important;
}

.dropdown-item:hover,
.dropdown-item:focus-visible,
.dropdown-item.active {
    color: var(--mr-text) !important;
    background: var(--mr-bg-subtle) !important;
}

.dropdown-item-danger {
    color: var(--mr-danger) !important;
}

/* Layout */
.main-container,
.page-container,
.container,
.landing-container {
    width: min(100% - 32px, var(--mr-container)) !important;
    margin-inline: auto !important;
}

.main-container {
    min-height: calc(100vh - 140px) !important;
    padding-block: var(--mr-space-10) var(--mr-space-12) !important;
}

.container-sm,
.auth-container,
.settings-page .main-container {
    width: min(100% - 32px, var(--mr-container-narrow)) !important;
}

.section,
.welcome-section,
.bottom-section,
.page-section {
    padding-block: var(--mr-space-8) !important;
}

.section-header,
.forum-header,
.editor-hero,
.class-members-header,
.class-duties-header,
.groups-header,
.checkin-header,
.ranking-header,
.admin-page-hero {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    gap: var(--mr-space-4) !important;
    margin: 0 0 var(--mr-space-5) !important;
    padding: 0 !important;
    text-align: left !important;
}

.class-members-header,
.class-duties-header {
    flex-direction: column !important;
    align-items: flex-start !important;
}

.section-title,
.forum-header h2,
.class-members-header h1,
.class-duties-header h1,
.ranking-title,
.admin-page-title,
.auth-header h2 {
    margin: 0 !important;
    color: var(--mr-text) !important;
    font-size: clamp(1.55rem, 3vw, 2.35rem) !important;
    font-weight: 750 !important;
    line-height: 1.1 !important;
}

.section-header p,
.forum-header p,
.editor-hero-sub,
.class-members-header p,
.class-duties-header p,
.admin-page-intro,
.auth-header p {
    margin: var(--mr-space-2) 0 0 !important;
    max-width: 68ch !important;
    color: var(--mr-text-muted) !important;
    font-size: 0.95rem !important;
    line-height: 1.65 !important;
}

/* Surfaces */
.card,
.feature-card,
.auth-card,
.home-panel,
.home-intro,
.home-legacy,
.forum-post,
.post-detail,
.post-reply,
.replies-list,
.reply-form-container,
.editor-card,
.question-row,
.group-card,
.group-member-item,
.member-card,
.duty-member-card,
.duty-section-header,
.ranking-item,
.settings-list,
.modal-content,
.daily-challenge-card,
.challenge-question-card,
.challenge-ranking-card,
.profile-header-card,
.profile-info-card,
.profile-activity-card,
.owner-dashboard .dashboard-card,
.admin-card-approval,
.admin-card-tags,
.image-viewer-card {
    background: var(--mr-bg-raised) !important;
    background-image: none !important;
    border: 1px solid var(--mr-border) !important;
    border-radius: var(--mr-radius) !important;
    box-shadow: var(--mr-shadow-xs) !important;
    color: var(--mr-text) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transform: none !important;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast), opacity var(--transition-fast) !important;
}

.card:hover,
.feature-card:hover,
.home-panel:hover,
.forum-post:hover,
.question-row:hover,
.group-card:hover,
.member-card:hover,
.duty-member-card:hover,
.ranking-item:hover {
    border-color: var(--mr-border-strong) !important;
    box-shadow: var(--mr-shadow-sm) !important;
    transform: none !important;
}

.card-header,
.modal-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: var(--mr-space-4) !important;
    padding: var(--mr-space-5) var(--mr-space-5) !important;
    background: transparent !important;
    border-bottom: 1px solid var(--mr-border) !important;
}

.card-header h1,
.card-header h2,
.card-header h3,
.modal-header h3 {
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: var(--mr-space-2) !important;
    color: var(--mr-text) !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
}

.card-header i,
.forum-header i,
.section-header i,
.modal-header i {
    color: var(--mr-text-faint) !important;
}

.card-body,
.modal-body,
.card-footer,
.modal-footer {
    padding: var(--mr-space-5) !important;
}

.card + .card,
.profile-content,
.home-stack,
.side-stack,
.checkin-container,
.groups-container,
.ranking-container,
.questions-container,
.forum-container,
.forum-detail-container,
.editor-wrapper,
.owner-dashboard,
.score-editor-container {
    display: grid !important;
    gap: var(--mr-space-5) !important;
}

/* Buttons */
.btn,
a.btn,
button:not(.navbar-toggle):not(.theme-switcher):not(.navbar-more-btn):not(.password-toggle):not(.toggle-password),
input[type="button"],
input[type="submit"],
.home-button,
.home-link,
.upload-btn,
.take-photo-btn,
.page-link,
.pagination-btn,
.question-tag-field__trigger,
.md-btn,
.md-tab {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--mr-space-2) !important;
    min-height: 40px !important;
    min-width: 40px !important;
    padding: 0 var(--mr-space-4) !important;
    border: 1px solid var(--mr-border-strong) !important;
    border-radius: var(--mr-radius) !important;
    background: var(--mr-bg-raised) !important;
    color: var(--mr-text) !important;
    box-shadow: none !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), opacity var(--transition-fast), transform var(--transition-fast) !important;
}

.btn:hover,
a.btn:hover,
button:not(.navbar-toggle):not(.theme-switcher):not(.navbar-more-btn):not(.password-toggle):not(.toggle-password):hover,
input[type="button"]:hover,
input[type="submit"]:hover,
.home-button:hover,
.home-link:hover,
.upload-btn:hover,
.take-photo-btn:hover,
.page-link:hover,
.pagination-btn:hover:not(:disabled),
.question-tag-field__trigger:hover,
.md-btn:hover,
.md-tab:hover {
    border-color: var(--mr-text) !important;
    background: var(--mr-bg-subtle) !important;
    color: var(--mr-text) !important;
    transform: translateY(-1px) !important;
}

.btn:active,
button:active,
.home-button:active,
.pagination-btn:active {
    transform: translateY(0) !important;
}

.btn-primary,
a.btn-primary,
.home-button,
.pagination-btn-active,
.pagination .page-link.active,
.upload-btn,
.take-photo-btn,
input[type="submit"] {
    border-color: var(--mr-primary) !important;
    background: var(--mr-primary) !important;
    color: var(--mr-bg) !important;
}

body.dark-mode .btn-primary,
body.dark-mode a.btn-primary,
body.dark-mode .home-button,
body.dark-mode .pagination-btn-active,
body.dark-mode .upload-btn,
body.dark-mode .take-photo-btn,
body.dark-mode input[type="submit"],
[data-theme="dark"] .btn-primary,
[data-theme="dark"] a.btn-primary,
[data-theme="dark"] .home-button,
[data-theme="dark"] .pagination-btn-active,
[data-theme="dark"] .upload-btn,
[data-theme="dark"] .take-photo-btn,
[data-theme="dark"] input[type="submit"] {
    color: #050505 !important;
}

.btn-primary:hover,
a.btn-primary:hover,
.home-button:hover,
.pagination-btn-active:hover,
.upload-btn:hover,
.take-photo-btn:hover,
input[type="submit"]:hover {
    border-color: var(--mr-primary-hover) !important;
    background: var(--mr-primary-hover) !important;
    color: var(--mr-bg) !important;
}

.btn-secondary,
a.btn-secondary,
.page-link,
.home-link {
    border-color: var(--mr-border-strong) !important;
    background: var(--mr-bg-raised) !important;
    color: var(--mr-text) !important;
}

.btn-danger,
a.btn-danger {
    border-color: rgba(217, 45, 32, 0.28) !important;
    background: rgba(217, 45, 32, 0.08) !important;
    color: var(--mr-danger) !important;
}

.btn-danger:hover,
a.btn-danger:hover {
    border-color: var(--mr-danger) !important;
    background: var(--mr-danger) !important;
    color: #ffffff !important;
}

.btn-xs,
.btn-sm {
    min-height: 32px !important;
    min-width: 32px !important;
    padding-inline: var(--mr-space-3) !important;
    font-size: 0.78rem !important;
}

.btn-block {
    width: 100% !important;
}

.btn:disabled,
button:disabled,
input:disabled,
select:disabled,
textarea:disabled,
.pagination-btn:disabled {
    opacity: 0.48 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

/* Forms */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="file"]),
textarea,
select,
.form-input,
.search-input,
.home-input,
.md-textarea,
.md-preview {
    width: 100% !important;
    min-height: 44px !important;
    padding: 0 var(--mr-space-4) !important;
    border: 1px solid var(--mr-border) !important;
    border-radius: var(--mr-radius) !important;
    background: var(--mr-bg-raised) !important;
    color: var(--mr-text) !important;
    box-shadow: none !important;
    font-size: 0.925rem !important;
    line-height: 1.4 !important;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast) !important;
}

textarea,
.md-textarea,
.md-preview {
    min-height: 132px !important;
    padding-block: var(--mr-space-3) !important;
    line-height: 1.65 !important;
    resize: vertical !important;
}

input::placeholder,
textarea::placeholder {
    color: var(--mr-text-faint) !important;
}

input:focus,
textarea:focus,
select:focus,
.form-input:focus,
.search-input:focus,
.home-input:focus {
    border-color: var(--mr-focus) !important;
    box-shadow: var(--mr-ring) !important;
}

.form-group,
.auth-form,
.editor-form,
.reply-form,
.modal-form,
.score-form {
    display: grid !important;
    gap: var(--mr-space-3) !important;
}

.form-group label,
.question-tag-field__label,
.settings-row__name {
    color: var(--mr-text) !important;
    font-size: 0.875rem !important;
    font-weight: 650 !important;
}

.form-actions,
.editor-actions,
.card-actions,
.modal-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: var(--mr-space-3) !important;
    flex-wrap: wrap !important;
}

.password-input {
    position: relative !important;
}

.password-input input {
    padding-right: 48px !important;
}

.password-toggle,
.toggle-password {
    position: absolute !important;
    top: 50% !important;
    right: 6px !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: var(--mr-radius-sm) !important;
    background: transparent !important;
    color: var(--mr-text-muted) !important;
    transform: translateY(-50%) !important;
}

/* Badges, status, numbers */
.badge,
.tag,
.status-badge,
.question-tag,
.category-tag,
.question-topic-tag,
.question-difficulty,
.home-badge,
.member-badge,
.role-tag,
.duty-section-count,
.group-count {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    min-height: 24px !important;
    padding: 0 8px !important;
    border: 1px solid var(--mr-border) !important;
    border-radius: var(--mr-radius-sm) !important;
    background: var(--mr-bg-subtle) !important;
    color: var(--mr-text-muted) !important;
    font-size: 0.75rem !important;
    font-weight: 650 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

.stat-value,
.home-stat__value,
.ranking-rank,
.ranking-score .score,
.group-score .value,
.member-scores,
.score,
.stat-item .value,
.pagination-info,
.question-problem-no {
    font-variant-numeric: tabular-nums !important;
}

/* Home */
body.landing-page .main-container,
.landing-main {
    width: 100% !important;
    padding-block: var(--mr-space-10) var(--mr-space-12) !important;
}

.landing-container {
    display: grid !important;
    gap: var(--mr-space-6) !important;
}

.home-intro,
.home-legacy {
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: var(--mr-space-5) !important;
    min-height: auto !important;
    margin: 0 !important;
    padding: clamp(28px, 6vw, 72px) !important;
    overflow: hidden !important;
}

.home-intro::after,
.home-legacy::after {
    position: absolute;
    right: var(--mr-space-6);
    bottom: var(--mr-space-6);
    width: min(28vw, 280px);
    height: min(28vw, 280px);
    border: 1px solid var(--mr-border);
    border-radius: 50%;
    background:
        linear-gradient(transparent calc(50% - 1px), var(--mr-border) calc(50% - 1px), var(--mr-border) calc(50% + 1px), transparent calc(50% + 1px)),
        linear-gradient(90deg, transparent calc(50% - 1px), var(--mr-border) calc(50% - 1px), var(--mr-border) calc(50% + 1px), transparent calc(50% + 1px));
    opacity: 0.45;
    content: "";
    pointer-events: none;
}

.home-legacy__header,
.home-legacy__welcome {
    position: relative !important;
    z-index: 1 !important;
    max-width: 820px !important;
}

.home-legacy__eyebrow,
.home-panel__eyebrow,
.admin-page-eyebrow,
.eyebrow {
    margin: 0 0 var(--mr-space-3) !important;
    color: var(--mr-text-faint) !important;
    font-family: var(--mr-font-mono) !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
}

.home-legacy__title {
    max-width: 900px !important;
    margin: 0 !important;
    color: var(--mr-text) !important;
    font-size: clamp(2.5rem, 8vw, 6rem) !important;
    font-weight: 780 !important;
    line-height: 0.98 !important;
}

.home-legacy__text,
.home-legacy__note,
.home-panel__text,
.home-hint {
    color: var(--mr-text-muted) !important;
    font-size: 0.98rem !important;
    line-height: 1.7 !important;
}

.home-legacy__note {
    max-width: 680px !important;
    margin: 0 !important;
    padding: var(--mr-space-4) 0 0 !important;
    border: 0 !important;
    border-top: 1px solid var(--mr-border) !important;
    background: transparent !important;
    box-shadow: none !important;
}

.home-tools,
.home-tools__grid {
    margin: 0 !important;
}

.home-tools__grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr) !important;
    gap: var(--mr-space-5) !important;
    align-items: start !important;
}

.home-panel--wide {
    grid-column: auto !important;
}

.home-panel {
    padding: var(--mr-space-6) !important;
    gap: var(--mr-space-4) !important;
}

.home-panel__title {
    color: var(--mr-text) !important;
    font-size: 1.05rem !important;
    font-weight: 720 !important;
}

.home-panel__subhead {
    color: var(--mr-text) !important;
    font-size: 1.35rem !important;
    font-weight: 720 !important;
    line-height: 1.25 !important;
}

.home-jump {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: var(--mr-space-3) !important;
}

.home-stats,
.profile-stats,
.checkin-stats,
.group-scores {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) !important;
    gap: var(--mr-space-3) !important;
}

.home-stats > div,
.profile-stats .stat-item,
.checkin-stats .stat-item,
.group-score,
.info-item {
    min-width: 0 !important;
    padding: var(--mr-space-4) !important;
    border: 1px solid var(--mr-border) !important;
    border-radius: var(--mr-radius) !important;
    background: var(--mr-bg-subtle) !important;
}

.home-stat__value,
.stat-value,
.group-score .value {
    display: block !important;
    color: var(--mr-text) !important;
    font-size: clamp(1.5rem, 4vw, 2.25rem) !important;
    font-weight: 780 !important;
    line-height: 1 !important;
}

.home-stat__label,
.stat-label,
.group-score .label,
.info-label {
    display: block !important;
    margin-top: var(--mr-space-2) !important;
    color: var(--mr-text-faint) !important;
    font-size: 0.78rem !important;
    font-weight: 650 !important;
}

/* Questions */
.questions-container .card {
    overflow: hidden !important;
}

.questions-container .search-box {
    display: grid !important;
    grid-template-columns: minmax(240px, 1fr) minmax(150px, 180px) auto auto !important;
    gap: var(--mr-space-3) !important;
    align-items: center !important;
}

.questions-page .questions-container #questionsSearch,
.questions-page .questions-container #difficultyFilter,
.questions-page .questions-container #questionFilterBtn,
.questions-page .questions-container #uploadQuestionBtn {
    min-height: 44px !important;
    height: 44px !important;
    /* radius intentionally omitted: design-system.css owns shape
       (inputs -> md 8px, buttons -> pill). This ID rule only sizes. */
}

.questions-grid,
.questions-list {
    display: grid !important;
    gap: var(--mr-space-3) !important;
}

.question-row {
    display: grid !important;
    grid-template-columns: 8px 36px minmax(0, 1fr) minmax(220px, auto) !important;
    align-items: center !important;
    gap: var(--mr-space-4) !important;
    padding: var(--mr-space-4) !important;
    cursor: default !important;
}

.question-row-check {
    width: 8px !important;
    height: 36px !important;
    border-radius: 999px !important;
    background: var(--mr-border) !important;
}

.question-row-status {
    display: inline-grid !important;
    place-items: center !important;
    width: 32px !important;
    height: 32px !important;
    border: 1px solid var(--mr-border) !important;
    border-radius: var(--mr-radius) !important;
    background: var(--mr-bg-subtle) !important;
}

.question-row-title-module {
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: var(--mr-space-3) !important;
    cursor: pointer !important;
}

.question-row-title-module:hover .question-title-text {
    text-decoration: none !important;
}

.question-problem-no {
    color: var(--mr-text-faint) !important;
    font-family: var(--mr-font-mono) !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
}

.question-title-text {
    min-width: 0 !important;
    overflow: hidden !important;
    color: var(--mr-text) !important;
    font-size: 0.98rem !important;
    font-weight: 650 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.question-row-tags {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: var(--mr-space-2) !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

.questions-pagination .pagination-controls,
.ranking-pagination .pagination-controls {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--mr-space-2) !important;
    flex-wrap: wrap !important;
    padding: var(--mr-space-2) !important;
    border: 1px solid var(--mr-border) !important;
    border-radius: var(--mr-radius-lg) !important;
    background: var(--mr-bg-raised) !important;
}

.pagination-ellipsis {
    color: var(--mr-text-faint) !important;
    letter-spacing: 0 !important;
}

.pagination-info {
    color: var(--mr-text-muted) !important;
    font-size: 0.82rem !important;
}

/* Forum */
.forum-container,
.forum-detail-container,
.editor-wrapper {
    width: min(100%, 960px) !important;
}

.forum-posts,
.replies-list {
    display: grid !important;
    gap: var(--mr-space-3) !important;
}

.forum-post,
.post-reply {
    padding: var(--mr-space-5) !important;
}

.post-title,
.forum-post .post-title {
    margin: 0 !important;
    color: var(--mr-text) !important;
    font-size: clamp(1.05rem, 2vw, 1.35rem) !important;
    font-weight: 720 !important;
    line-height: 1.35 !important;
}

.forum-post .post-title {
    cursor: pointer !important;
}

.post-meta,
.post-time,
.reply-time {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: var(--mr-space-3) !important;
    margin-top: var(--mr-space-2) !important;
    color: var(--mr-text-faint) !important;
    font-size: 0.82rem !important;
}

.forum-markdown-body,
.post-content,
.reply-content {
    color: var(--mr-text) !important;
    line-height: 1.75 !important;
}

.no-posts,
.no-questions,
.no-ranking,
.no-replies,
.no-data,
.empty-state,
.message,
.helper-box {
    padding: var(--mr-space-8) !important;
    border: 1px dashed var(--mr-border-strong) !important;
    border-radius: var(--mr-radius) !important;
    background: var(--mr-bg-subtle) !important;
    color: var(--mr-text-muted) !important;
    text-align: center !important;
}

/* Profiles, people, ranking, groups */
.profile-container,
.profile-content {
    display: grid !important;
    gap: var(--mr-space-5) !important;
}

.profile-header {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    gap: var(--mr-space-6) !important;
    align-items: center !important;
    padding: var(--mr-space-6) !important;
}

.profile-avatar,
.member-avatar,
.duty-member-avatar,
.avatar-large {
    position: relative !important;
    display: inline-grid !important;
    place-items: center !important;
    overflow: hidden !important;
    border: 1px solid var(--mr-border) !important;
    border-radius: 50% !important;
    background: var(--mr-bg-subtle) !important;
    color: var(--mr-text-muted) !important;
}

.avatar-large {
    width: 96px !important;
    height: 96px !important;
}

.profile-info h2 {
    margin: 0 0 var(--mr-space-4) !important;
    font-size: clamp(1.8rem, 4vw, 3rem) !important;
    font-weight: 780 !important;
}

.info-grid,
.class-members-grid,
.duty-member-grid,
.groups-grid,
.group-members-list,
.ranking-list {
    display: grid !important;
    gap: var(--mr-space-3) !important;
}

.class-members-grid,
.duty-member-grid,
.groups-grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
}

.member-card,
.duty-member-card {
    display: grid !important;
    justify-items: center !important;
    gap: var(--mr-space-3) !important;
    padding: var(--mr-space-5) !important;
    text-align: center !important;
    text-decoration: none !important;
}

.member-card.selected {
    border-color: var(--mr-focus) !important;
    box-shadow: var(--mr-ring) !important;
}

.member-name,
.user-name,
.user-link,
.group-name {
    min-width: 0 !important;
    color: var(--mr-text) !important;
    font-weight: 680 !important;
    overflow-wrap: anywhere !important;
}

.ranking-item,
.group-member-item {
    display: grid !important;
    grid-template-columns: 72px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: var(--mr-space-4) !important;
    padding: var(--mr-space-4) !important;
}

.ranking-rank,
.member-rank {
    color: var(--mr-text-faint) !important;
    font-family: var(--mr-font-mono) !important;
    font-size: 0.88rem !important;
    font-weight: 700 !important;
}

.ranking-score .score {
    color: var(--mr-text) !important;
    font-weight: 760 !important;
}

.group-card {
    padding: var(--mr-space-5) !important;
    cursor: pointer !important;
}

.group-header {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: var(--mr-space-3) !important;
    margin-bottom: var(--mr-space-4) !important;
}

.group-members-preview {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: var(--mr-space-2) !important;
    margin-top: var(--mr-space-4) !important;
}

.batch-toolbar {
    border: 1px solid var(--mr-border) !important;
    border-radius: var(--mr-radius-lg) !important;
    background: var(--mr-bg-raised) !important;
    box-shadow: var(--mr-shadow-sm) !important;
}

/* Auth and settings */
.auth-page .main-container {
    display: grid !important;
    place-items: start center !important;
}

.auth-container {
    margin-inline: auto !important;
}

.auth-card {
    width: 100% !important;
    padding: var(--mr-space-8) !important;
}

.auth-header {
    margin-bottom: var(--mr-space-6) !important;
}

.auth-link {
    color: var(--mr-text) !important;
    font-weight: 650 !important;
}

.global-message {
    width: min(100% - 32px, var(--mr-container)) !important;
    margin: var(--mr-space-4) auto 0 !important;
    border-radius: var(--mr-radius) !important;
}

.settings-page .main-container {
    padding-top: var(--mr-space-10) !important;
}

.settings-list {
    overflow: hidden !important;
}

.settings-row {
    min-height: 56px !important;
    padding: 0 var(--mr-space-5) !important;
    border-bottom: 1px solid var(--mr-border) !important;
}

.settings-info-btn {
    color: var(--mr-text-faint) !important;
}

.settings-info-btn:hover,
.settings-info-btn:focus-visible {
    color: var(--mr-text) !important;
    outline: 2px solid var(--mr-focus) !important;
}

.toggle-slider {
    background: var(--mr-bg-muted) !important;
    border-color: var(--mr-border-strong) !important;
    transition: background-color var(--transition-fast) !important;
}

.toggle-switch input:checked + .toggle-slider {
    background: var(--mr-primary) !important;
}

/* Daily challenge, checkin, clock, admin */
.daily-challenge-container,
.checkin-container,
.clock-container,
.admin-dashboard-compact {
    display: grid !important;
    gap: var(--mr-space-5) !important;
}

.challenge-question-card,
.challenge-ranking-card,
.daily-challenge-admin-panel .card {
    overflow: hidden !important;
}

.challenge-result {
    padding: var(--mr-space-4) !important;
    border-radius: var(--mr-radius) !important;
    border: 1px solid var(--mr-border) !important;
    background: var(--mr-bg-subtle) !important;
}

.challenge-result.correct,
.status-correct,
.plus-score,
.plus,
.success {
    color: var(--mr-success) !important;
}

.challenge-result.wrong,
.status-wrong,
.minus-score,
.minus,
.error {
    color: var(--mr-danger) !important;
}

.challenge-result.already,
.status-pending,
.warning {
    color: var(--mr-warning) !important;
}

.clock-card,
.timer-card,
.time-display {
    border-radius: var(--mr-radius) !important;
}

.time-display,
.clock-display,
.timer-display {
    font-family: var(--mr-font-mono) !important;
    font-variant-numeric: tabular-nums !important;
    letter-spacing: 0 !important;
}

.admin-grid,
.approval-filters {
    display: grid !important;
    gap: var(--mr-space-4) !important;
}

.approval-filters {
    grid-template-columns: minmax(140px, 180px) minmax(220px, 1fr) auto !important;
    align-items: center !important;
}

.submissions-list {
    display: grid !important;
    gap: var(--mr-space-3) !important;
}

/* Modal */
.modal {
    overscroll-behavior: contain !important;
}

.modal-overlay {
    background: var(--modal-overlay) !important;
}

.modal-content {
    width: min(720px, calc(100vw - 32px)) !important;
    max-height: min(82vh, 780px) !important;
    overflow: auto !important;
}

.modal-large {
    width: min(960px, calc(100vw - 32px)) !important;
}

.modal-close {
    display: inline-grid !important;
    place-items: center !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    border: 1px solid var(--mr-border) !important;
    border-radius: var(--mr-radius) !important;
    background: var(--mr-bg-raised) !important;
    color: var(--mr-text-muted) !important;
    cursor: pointer !important;
}

.modal-close:hover,
.modal-close:focus-visible {
    color: var(--mr-text) !important;
    background: var(--mr-bg-subtle) !important;
}

/* Media and uploads */
.image-preview,
.uploaded-image,
.post-images img,
.reply-images img,
.forum-image-preview-trigger,
.image-viewer-stage img {
    border: 1px solid var(--mr-border) !important;
    border-radius: var(--mr-radius) !important;
    background: var(--mr-bg-subtle) !important;
}

.upload-btn-text-icon,
.image-preview-btn {
    border-radius: var(--mr-radius) !important;
}

/* Utility cleanup */
.ripple {
    display: none !important;
}

.footer {
    border-top: 1px solid var(--mr-border) !important;
    background: transparent !important;
    color: var(--mr-text-faint) !important;
}

.footer-container {
    width: min(100% - 32px, var(--mr-container)) !important;
    margin-inline: auto !important;
    padding: var(--mr-space-6) 0 !important;
}

.footer-content p {
    margin: 0 !important;
    color: var(--mr-text-faint) !important;
    font-size: 0.82rem !important;
}

@media (max-width: 960px) {
    #navbar .navbar-container,
    .navbar-container {
        width: min(100% - 24px, var(--mr-container)) !important;
        gap: var(--mr-space-3) !important;
    }

    .navbar-toggle {
        display: inline-grid !important;
    }

    .navbar-menu {
        display: none !important;
    }

    .navbar-menu.open,
    .navbar-menu.closing {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: var(--mr-space-1) !important;
        padding: var(--mr-space-2) !important;
        border: 1px solid var(--mr-border) !important;
        border-radius: var(--mr-radius-lg) !important;
        background: var(--mr-bg-raised) !important;
        box-shadow: var(--mr-shadow-sm) !important;
    }

    .navbar-menu.open .navbar-item,
    .navbar-menu.closing .navbar-item {
        justify-content: flex-start !important;
        width: 100% !important;
        min-height: 44px !important;
        padding-inline: var(--mr-space-3) !important;
    }

    .home-tools__grid,
    .profile-header,
    .approval-filters {
        grid-template-columns: 1fr !important;
    }

    .questions-container .search-box {
        grid-template-columns: 1fr !important;
    }

    .question-row {
        grid-template-columns: 8px 32px minmax(0, 1fr) !important;
        align-items: start !important;
    }

    .question-row-tags {
        grid-column: 3 / -1 !important;
        justify-content: flex-start !important;
        flex-wrap: wrap !important;
    }

    .ranking-item,
    .group-member-item {
        grid-template-columns: 52px minmax(0, 1fr) !important;
    }

    .ranking-score,
    .member-scores {
        grid-column: 2 / -1 !important;
    }

    .form-actions,
    .editor-actions,
    .modal-footer {
        justify-content: stretch !important;
    }

    .form-actions .btn,
    .editor-actions .btn,
    .modal-footer .btn,
    .home-jump .home-button {
        width: 100% !important;
    }

    .home-jump {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 640px) {
    .main-container,
    .page-container,
    .container,
    .landing-container,
    .footer-container {
        width: min(100% - 24px, var(--mr-container)) !important;
    }

    .main-container,
    .landing-main {
        padding-block: var(--mr-space-6) var(--mr-space-10) !important;
    }

    .card-header,
    .card-body,
    .card-footer,
    .modal-header,
    .modal-body,
    .modal-footer,
    .auth-card,
    .home-panel,
    .forum-post,
    .post-reply {
        padding: var(--mr-space-4) !important;
    }

    .home-intro,
    .home-legacy {
        padding: var(--mr-space-6) !important;
    }

    .home-legacy__title {
        font-size: clamp(2.2rem, 14vw, 3.6rem) !important;
    }

    .class-members-grid,
    .duty-member-grid,
    .groups-grid {
        grid-template-columns: 1fr !important;
    }
}

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

/* UI stability pass: keep repeated lists cheap and prevent mobile row clipping. */
.question-row,
.forum-post,
.ranking-item,
.group-card,
.member-card,
.duty-member-card,
.home-panel,
.auth-card {
    box-shadow: var(--mr-shadow-xs) !important;
}

.question-row:hover,
.forum-post:hover,
.ranking-item:hover,
.group-card:hover,
.member-card:hover,
.duty-member-card:hover,
.home-panel:hover {
    box-shadow: var(--mr-shadow-xs) !important;
    transform: none !important;
}

@media (max-width: 960px) {
    .question-row {
        grid-template-columns: 8px minmax(0, 1fr) !important;
        gap: var(--mr-space-3) !important;
    }

    .question-row-status {
        display: none !important;
    }

    .question-row-title-module,
    .question-row-tags {
        grid-column: 2 / -1 !important;
    }

    .question-row-title-module {
        min-width: 0 !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: var(--mr-space-2) !important;
    }

    .question-problem-no {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
    }

    .question-title-text {
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .question-row-tags {
        justify-content: flex-start !important;
        flex-wrap: wrap !important;
        overflow: visible !important;
    }
}

@media (max-width: 640px) {
    #navbar,
    .navbar,
    .dropdown-menu,
    .modal-overlay {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .question-row {
        padding: var(--mr-space-4) !important;
    }
}

/* UI performance correction: fewer paint-heavy effects, stable nav identity. */
html,
body,
body.landing-page {
    background: var(--mr-bg) !important;
}

#navbar,
.navbar,
body.dark-mode #navbar,
body.dark-mode .navbar,
[data-theme="dark"] #navbar,
[data-theme="dark"] .navbar {
    background: color-mix(in srgb, var(--mr-bg) 94%, transparent) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

#navbar .navbar-brand .navbar-brand__mark,
#navbar.navbar .navbar-brand .navbar-brand__mark,
.navbar .navbar-brand .navbar-brand__mark {
    width: 38px !important;
    height: 32px !important;
    border: 1px solid var(--mr-primary) !important;
    border-radius: var(--mr-radius) !important;
    background: var(--mr-primary) !important;
    color: var(--mr-bg) !important;
    box-shadow: none !important;
}

body.dark-mode #navbar .navbar-brand .navbar-brand__mark,
body.dark-mode #navbar.navbar .navbar-brand .navbar-brand__mark,
[data-theme="dark"] #navbar .navbar-brand .navbar-brand__mark {
    background: var(--mr-primary) !important;
    color: var(--mr-bg) !important;
}

@media (min-width: 961px) {
    #navbar .navbar-menu,
    .navbar .navbar-menu {
        overflow: visible !important;
    }
}

.card,
.auth-card,
.home-panel,
.home-intro,
.home-legacy,
.forum-post,
.post-detail,
.post-reply,
.question-row,
.ranking-item,
.group-card,
.member-card,
.duty-member-card,
.modal-content {
    box-shadow: var(--mr-shadow-xs) !important;
    transition: background-color 120ms var(--mr-ease), border-color 120ms var(--mr-ease), color 120ms var(--mr-ease), opacity 120ms var(--mr-ease) !important;
}

.card:hover,
.home-panel:hover,
.forum-post:hover,
.question-row:hover,
.ranking-item:hover,
.group-card:hover,
.member-card:hover,
.duty-member-card:hover {
    border-color: var(--mr-border-strong) !important;
    box-shadow: var(--mr-shadow-xs) !important;
    transform: none !important;
}

@media (max-width: 960px) {
    .question-row {
        min-height: 0 !important;
        padding: 14px !important;
    }

    .question-title-text {
        display: none !important;
    }
}

.forum-container .user-link,
.forum-container .user-name,
.forum-container .post-author,
.forum-container .post-meta a {
    color: var(--mr-text) !important;
}

.question-row .category-tag,
.question-row .question-topic-tag,
.question-row .question-difficulty,
.question-row .difficulty-tag {
    min-height: 22px !important;
    padding: 0 8px !important;
    border: 1px solid var(--mr-border) !important;
    border-radius: 999px !important;
    background: var(--mr-bg-subtle) !important;
    color: var(--mr-text-muted) !important;
    box-shadow: none !important;
    font-size: 0.75rem !important;
    font-weight: 650 !important;
}

.question-row .question-difficulty.hard,
.question-row .difficulty-tag.hard {
    border-color: rgba(217, 45, 32, 0.22) !important;
    background: rgba(217, 45, 32, 0.06) !important;
    color: var(--mr-danger) !important;
}

.question-row .question-difficulty.medium,
.question-row .difficulty-tag.medium {
    border-color: rgba(161, 98, 7, 0.22) !important;
    background: rgba(161, 98, 7, 0.06) !important;
    color: var(--mr-warning) !important;
}

@media (max-width: 640px) {
    .question-row {
        grid-template-columns: minmax(70px, auto) minmax(0, 1fr) !important;
        align-items: center !important;
        min-height: 72px !important;
        padding: 12px 14px !important;
    }

    .question-row-check,
    .question-row-status,
    .question-title-text {
        display: none !important;
    }

    .question-row-title-module {
        grid-column: 1 / 2 !important;
        display: block !important;
    }

    .question-row-tags {
        grid-column: 2 / 3 !important;
        justify-content: flex-end !important;
        gap: 6px !important;
    }

    .question-problem-no {
        color: var(--mr-text) !important;
        font-size: 0.92rem !important;
    }
}

/* KaTeX stability: global prose wrapping rules must not split formula internals. */
.question-content-text .katex,
.forum-markdown-body .katex,
.post-content .katex,
.reply-content .katex {
    max-width: 100% !important;
    white-space: nowrap !important;
    text-wrap: nowrap !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
}

.question-content-text .katex *,
.forum-markdown-body .katex *,
.post-content .katex *,
.reply-content .katex * {
    white-space: nowrap !important;
    text-wrap: nowrap !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
}

.question-content-text .katex-html,
.forum-markdown-body .katex-html,
.post-content .katex-html,
.reply-content .katex-html,
.question-content-text .katex .base,
.forum-markdown-body .katex .base,
.post-content .katex .base,
.reply-content .katex .base {
    display: inline-block !important;
    white-space: nowrap !important;
}

.question-content-text .katex-display,
.forum-markdown-body .katex-display,
.post-content .katex-display,
.reply-content .katex-display {
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding-bottom: 2px !important;
}

/* Authenticated-page stability pass: compact dense admin/student lists without heavy paint. */
.groups-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    text-align: left !important;
}

.groups-actions {
    display: flex !important;
    justify-content: flex-start !important;
    margin: 0 0 var(--mr-space-5) !important;
}

.class-members-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
    gap: var(--mr-space-3) !important;
}

.class-members-grid .member-card {
    display: grid !important;
    grid-template-columns: 52px minmax(0, 1fr) !important;
    grid-template-areas:
        "avatar name"
        "avatar score" !important;
    align-items: center !important;
    justify-items: stretch !important;
    gap: 4px var(--mr-space-3) !important;
    min-height: 76px !important;
    padding: var(--mr-space-3) !important;
    border: 1px solid var(--mr-border) !important;
    background: var(--mr-bg-raised) !important;
    box-shadow: none !important;
    text-align: left !important;
}

body:not(.dark-mode) .class-members-grid .member-card,
body.dark-mode .class-members-grid .member-card {
    border: 1px solid var(--mr-border) !important;
    background: var(--mr-bg-raised) !important;
    box-shadow: none !important;
}

.class-members-grid .member-avatar {
    grid-area: avatar !important;
    width: 48px !important;
    height: 48px !important;
    margin: 0 !important;
    font-size: 1.1rem !important;
}

.class-members-grid .member-name {
    grid-area: name !important;
    align-self: end !important;
    font-size: 0.92rem !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.class-members-grid .member-score {
    grid-area: score !important;
    display: flex !important;
    align-self: start !important;
    gap: var(--mr-space-2) !important;
    margin: 0 !important;
    color: var(--mr-text-muted) !important;
    font-size: 0.78rem !important;
    line-height: 1.2 !important;
}

.checkin-rules,
.checkin-action {
    background: var(--mr-bg-subtle) !important;
}

.checkin-rules li {
    line-height: 1.65 !important;
}

@media (max-width: 640px) {
    .groups-header,
    .class-members-header,
    .class-duties-header,
    .checkin-header,
    .ranking-header,
    .editor-hero {
        align-items: flex-start !important;
        text-align: left !important;
    }

    .class-members-grid {
        grid-template-columns: 1fr !important;
        gap: var(--mr-space-2) !important;
    }

    .class-members-grid .member-card {
        min-height: 64px !important;
        padding: 10px 12px !important;
    }

    .class-members-grid .member-avatar {
        width: 42px !important;
        height: 42px !important;
        font-size: 1rem !important;
    }
}

/* Dark mode correction pass: keep tokens, surfaces, and empty states coherent. */
html[data-theme="dark"],
body.dark-mode,
body[data-theme="dark"] {
    color-scheme: dark !important;
}

body.dark-mode,
body[data-theme="dark"],
html[data-theme="dark"] body {
    --mr-bg: #070b12;
    --mr-bg-raised: #101722;
    --mr-bg-subtle: #151d2a;
    --mr-bg-muted: #202b3a;
    --mr-text: #f6f8fb;
    --mr-text-muted: #aeb8c7;
    --mr-text-faint: #7f8a9a;
    --mr-border: rgba(255, 255, 255, 0.10);
    --mr-border-strong: rgba(255, 255, 255, 0.18);
    --mr-primary: #f6f8fb;
    --mr-primary-hover: #e8edf5;
    --mr-focus: #8ab4ff;
    --primary-color: var(--mr-primary);
    --secondary-color: var(--mr-bg-raised);
    --text-primary: var(--mr-text);
    --text-secondary: var(--mr-text-muted);
    --background-color: var(--mr-bg);
    --card-background: var(--mr-bg-raised);
    --input-background: #0b111b;
    --input-border: var(--mr-border);
    --button-primary: var(--mr-primary);
    --button-primary-hover: var(--mr-primary-hover);
    --button-secondary: var(--mr-bg-subtle);
    --button-secondary-hover: var(--mr-bg-muted);
    background:
        linear-gradient(rgba(255, 255, 255, 0.026) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px),
        var(--mr-bg) !important;
    background-size: 96px 96px, 96px 96px, auto !important;
    color: var(--mr-text) !important;
}

body.dark-mode::before,
body.dark-mode::after,
body[data-theme="dark"]::before,
body[data-theme="dark"]::after {
    display: none !important;
}

body.dark-mode .card,
body.dark-mode .auth-card,
body.dark-mode .forum-container .card,
body.dark-mode .questions-container .card,
body.dark-mode .editor-card,
body.dark-mode .editor-hero,
body.dark-mode .profile-header-card,
body.dark-mode .profile-info-card,
body.dark-mode .profile-activity-card,
body.dark-mode .settings-list,
body.dark-mode .daily-challenge-card,
body.dark-mode .challenge-question-card,
body.dark-mode .challenge-answer-section,
body.dark-mode .challenge-ranking-card,
body.dark-mode .home-panel,
body.dark-mode .post-detail,
body.dark-mode .post-reply,
body.dark-mode .replies-list,
body.dark-mode .reply-form-container,
[data-theme="dark"] .card,
[data-theme="dark"] .auth-card,
[data-theme="dark"] .forum-container .card,
[data-theme="dark"] .questions-container .card,
[data-theme="dark"] .editor-card,
[data-theme="dark"] .editor-hero,
[data-theme="dark"] .profile-header-card,
[data-theme="dark"] .profile-info-card,
[data-theme="dark"] .profile-activity-card,
[data-theme="dark"] .settings-list,
[data-theme="dark"] .daily-challenge-card,
[data-theme="dark"] .challenge-question-card,
[data-theme="dark"] .challenge-answer-section,
[data-theme="dark"] .challenge-ranking-card,
[data-theme="dark"] .home-panel,
[data-theme="dark"] .post-detail,
[data-theme="dark"] .post-reply,
[data-theme="dark"] .replies-list,
[data-theme="dark"] .reply-form-container {
    background: var(--mr-bg-raised) !important;
    background-image: none !important;
    border-color: var(--mr-border) !important;
    color: var(--mr-text) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.28) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body.dark-mode .editor-hero,
[data-theme="dark"] .editor-hero {
    background:
        radial-gradient(circle at 88% 18%, rgba(64, 124, 180, 0.22), transparent 34%),
        linear-gradient(135deg, #101722, #121d2c) !important;
}

body.dark-mode input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="file"]),
body.dark-mode textarea,
body.dark-mode select,
body.dark-mode .search-input,
body.dark-mode .filter-select,
body.dark-mode .form-input,
body.dark-mode .home-input,
body.dark-mode .md-textarea,
body.dark-mode .md-preview,
[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="file"]),
[data-theme="dark"] textarea,
[data-theme="dark"] select,
[data-theme="dark"] .search-input,
[data-theme="dark"] .filter-select,
[data-theme="dark"] .form-input,
[data-theme="dark"] .home-input,
[data-theme="dark"] .md-textarea,
[data-theme="dark"] .md-preview {
    background: #0b111b !important;
    border-color: var(--mr-border-strong) !important;
    color: var(--mr-text) !important;
    box-shadow: none !important;
}

body.dark-mode .md-toolbar,
body.dark-mode .md-tabs,
[data-theme="dark"] .md-toolbar,
[data-theme="dark"] .md-tabs {
    background: #111927 !important;
    border-color: var(--mr-border) !important;
}

body.dark-mode .btn-primary,
body.dark-mode a.btn-primary,
body.dark-mode .home-button,
body.dark-mode .upload-btn,
body.dark-mode .take-photo-btn,
body.dark-mode input[type="submit"],
[data-theme="dark"] .btn-primary,
[data-theme="dark"] a.btn-primary,
[data-theme="dark"] .home-button,
[data-theme="dark"] .upload-btn,
[data-theme="dark"] .take-photo-btn,
[data-theme="dark"] input[type="submit"] {
    background: var(--mr-primary) !important;
    border-color: var(--mr-primary) !important;
    color: var(--mr-bg) !important;
}

body.dark-mode .btn-secondary,
body.dark-mode a.btn-secondary,
body.dark-mode .home-link,
body.dark-mode .md-btn,
body.dark-mode .md-tab,
[data-theme="dark"] .btn-secondary,
[data-theme="dark"] a.btn-secondary,
[data-theme="dark"] .home-link,
[data-theme="dark"] .md-btn,
[data-theme="dark"] .md-tab {
    background: transparent !important;
    border-color: var(--mr-border-strong) !important;
    color: var(--mr-text) !important;
}

.no-posts,
.no-questions,
.no-ranking,
.no-replies,
.no-data,
.empty-state,
.message,
.helper-box {
    min-height: 148px !important;
    padding: clamp(24px, 4vw, 34px) !important;
    border: 1px dashed var(--mr-border-strong) !important;
    border-radius: var(--mr-radius-lg) !important;
    background: var(--mr-bg-subtle) !important;
    color: var(--mr-text-muted) !important;
    box-shadow: none !important;
}

.no-posts i,
.no-questions i,
.no-ranking i,
.no-replies i,
.empty-state i,
.no-challenge i {
    display: inline-grid !important;
    place-items: center !important;
    width: 42px !important;
    height: 42px !important;
    margin: 0 !important;
    border: 1px solid var(--mr-border) !important;
    border-radius: 14px !important;
    background: var(--mr-bg-raised) !important;
    color: var(--mr-text-faint) !important;
    font-size: 1.15rem !important;
    line-height: 1 !important;
    opacity: 1 !important;
}

.no-posts p,
.no-questions p,
.no-ranking p,
.no-replies p,
.no-data,
.empty-state,
.helper-box {
    color: var(--mr-text-muted) !important;
}

.no-challenge {
    width: min(100%, 640px) !important;
    min-height: auto !important;
    margin: clamp(44px, 12vh, 112px) auto !important;
    padding: clamp(28px, 5vw, 44px) !important;
    border: 1px dashed var(--mr-border-strong) !important;
    border-radius: var(--mr-radius-lg) !important;
    background: var(--mr-bg-raised) !important;
    color: var(--mr-text-muted) !important;
}

.no-challenge h2 {
    color: var(--mr-text) !important;
}

@media (max-width: 640px) {
    .no-posts,
    .no-questions,
    .no-ranking,
    .no-replies,
    .no-data,
    .empty-state,
    .message,
    .helper-box {
        min-height: 128px !important;
        padding: 22px !important;
    }

    .no-challenge {
        margin: 28px auto !important;
        padding: 24px !important;
    }
}

/* ============================================================
   Newspaper Components — 数学日报
   Appended after the 2026 system layer; this is now the
   authoritative visual source. Keep this block last.
   ============================================================ */

/* —— 报头（Navbar masthead）—— */
.navbar,
#navbar.navbar {
    background: var(--mr-bg) !important;
    border-bottom: var(--mr-double-rule) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.navbar .navbar-brand .navbar-brand__mark,
#navbar.navbar .navbar-brand .navbar-brand__mark {
    width: auto !important;
    height: auto !important;
    padding: 2px 6px !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--mr-text) !important;
    font-family: var(--mr-font-display) !important;
    font-style: italic !important;
    font-weight: 700 !important;
    font-size: 1.15rem !important;
    letter-spacing: 0.01em !important;
}

.navbar-item,
.navbar-menu .navbar-item {
    border-radius: 0 !important;
    font-size: 0.8rem !important;
    letter-spacing: 0.08em !important;
}

.navbar-item.active,
.navbar-menu .navbar-item.active {
    background: transparent !important;
    color: var(--mr-text) !important;
    box-shadow: inset 0 -2px 0 var(--mr-accent) !important;
}

.navbar-item:hover,
.navbar-item:focus-visible {
    background: var(--mr-bg-subtle) !important;
    color: var(--mr-accent) !important;
}

/* 移动端展开面板：纸色实底 + 单线分隔
   Scoped to max-width: 960px to match the system layer's mobile
   media query — on desktop .navbar-menu is an inline row with no
   background, so the override must not apply there. */
@media (max-width: 960px) {
    .navbar-menu,
    .navbar-menu.open,
    .navbar-menu.closing {
        background: var(--mr-bg) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}

/* 暗色模式下结构线/压印阴影需要亮色变体（本期暗色入口隐藏，仍保证可用） */
body.dark-mode,
[data-theme="dark"] {
    --mr-rule: #e5e0d5;
    --mr-double-rule: 3px double #e5e0d5;
    --mr-shadow-press: 2px 2px 0 rgba(229, 224, 213, 0.4);
}

.dropdown-menu {
    background: var(--mr-bg-raised) !important;
    border: 1px solid var(--mr-rule) !important;
    border-radius: var(--mr-radius) !important;
    box-shadow: var(--mr-shadow-press) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* —— 纸面卡片 —— */
.card,
.modal-content {
    background: var(--mr-bg-raised) !important;
    border: 1px solid var(--mr-rule-soft) !important;
    border-radius: var(--mr-radius) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.card:hover {
    transform: none !important;
    border-color: var(--mr-rule) !important;
    box-shadow: var(--mr-shadow-press) !important;
}

/* 头条级卡片：加 .card--headline 类后呈双线框 */
.card--headline {
    border: var(--mr-double-rule) !important;
}

/* —— 按钮 —— */
.btn,
button.btn {
    border-radius: var(--mr-radius-sm) !important;
    box-shadow: none !important;
}

.btn-primary {
    background: var(--mr-text) !important;
    border: 1px solid var(--mr-text) !important;
    color: var(--mr-bg-raised) !important;
}

.btn-primary:hover {
    background: var(--mr-accent) !important;
    border-color: var(--mr-accent) !important;
    transform: none !important;
}

.btn-secondary {
    background: var(--mr-bg-raised) !important;
    border: 1px solid var(--mr-text) !important;
    color: var(--mr-text) !important;
}

.btn-secondary:hover {
    background: var(--mr-bg-subtle) !important;
    transform: none !important;
}

.btn-link,
a.text-link {
    color: var(--mr-text) !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
}

.btn-link:hover,
a.text-link:hover {
    color: var(--mr-accent) !important;
}

/* —— 表单 —— */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="search"],
textarea,
select {
    background: var(--mr-bg-raised) !important;
    border: 1px solid var(--mr-text) !important;
    border-radius: var(--mr-radius-sm) !important;
    box-shadow: none !important;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
    border-color: var(--mr-accent) !important;
    box-shadow: var(--mr-ring) !important;
    outline: none !important;
}

.form-group > label,
.form-label {
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: var(--mr-text-muted) !important;
}

/* —— 标签/徽章：分类字样式 ——
   语义彩色徽章（状态/来源/成员）保留各自颜色，不参与墨线统一 */
.tag:not(.status-badge):not(.source-badge):not(.member-badge),
.badge:not(.status-badge):not(.source-badge):not(.member-badge),
.tag-badge {
    background: transparent !important;
    border: 1px solid var(--mr-text) !important;
    border-radius: 0 !important;
    color: var(--mr-text) !important;
    font-size: 0.68rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
}

.tag.tag--accent,
.badge--accent {
    border-color: var(--mr-accent) !important;
    color: var(--mr-accent) !important;
}

/* —— 分类字（kicker）与衬线数字：工具类 —— */
.np-kicker {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--mr-accent);
}

.np-figure {
    font-family: var(--mr-font-display);
    font-weight: 700;
    font-variant-numeric: lining-nums tabular-nums;
}

/* —— 标题用衬线 —— */
h1, h2,
.section-header h2,
.page-title {
    font-family: var(--mr-font-display);
    letter-spacing: 0.01em;
}

/* 纸面风格：禁用涟漪、本期隐藏暗色模式入口（CSS 保留未适配） */
.ripple { display: none !important; animation: none !important; }
.theme-switcher { display: none !important; }

/* UI module contracts loaded last enough to win over legacy page rules. */
.md-tabs,
.editor-card .md-tabs,
.question-tag-picker-tabs,
.question-tag-picker-modal .question-tag-picker-tabs,
.question-tag-picker-toolbar,
.question-tag-picker-modal .question-tag-picker-toolbar {
    border-top: 0 !important;
    border-right: 0 !important;
    border-left: 0 !important;
    border-bottom: 1px solid var(--mr-rule-soft, var(--border-color, rgba(29, 29, 31, 0.12))) !important;
    box-shadow: none !important;
}

.md-tab,
.question-tag-picker-tab,
.question-tag-picker-modal .question-tag-picker-tab,
.md-tab.active,
.md-tab.is-active,
.question-tag-picker-tab.active,
.question-tag-picker-tab.is-active,
.question-tag-picker-modal .question-tag-picker-tab.active,
.question-tag-picker-modal .question-tag-picker-tab.is-active {
    box-shadow: none !important;
}

.questions-list,
.post-list,
.forum-posts,
.answers-list,
.replies-list,
.rankings-list,
.activity-list,
.groups-grid,
.class-members-grid,
.content-grid,
.features-grid,
.leaderboard-list,
.notifications-list {
    content-visibility: auto;
    contain-intrinsic-size: 1px 720px;
}

.question-card,
.post-card,
.member-card,
.rankings-item,
.group-card,
.feature-card,
.activity-item,
.answer-card,
.reply-card {
    contain: layout paint style;
}

/* Hamburger visibility contract: desktop/tablet use the full nav, mobile uses the menu button. */
.navbar-toggle,
#navbar .navbar-toggle,
.navbar .navbar-toggle {
    display: none !important;
}

@media (max-width: 801px) {
    .navbar-toggle,
    #navbar .navbar-toggle,
    .navbar .navbar-toggle {
        display: inline-flex !important;
    }
}

@media (min-width: 802px) {
    .navbar-toggle,
    #navbar .navbar-toggle,
    .navbar .navbar-toggle {
        display: none !important;
    }
}