/* Red-White Theme - Inverted */
body {
    font-family: 'Arial', sans-serif !important;
    /* เปลี่ยนจาก linear-gradient เป็น radial-gradient และเพิ่ม fixed */
    background: radial-gradient(circle at center, #ffffff 0%, #c4c4c4 100%) fixed !important;
    background-size: cover !important;
    background-attachment: fixed !important;
    color: #333333 !important;
    min-height: 100vh !important;
    margin: 0 !important;
    padding: 15px !important;
}

.leaderboard-container {
    background: white !important;
    box-shadow: 0px 0px 20px rgba(255, 0, 0, 0.35) !important;
}

.table-wrapper {
    background: transparent !important; /* เปลี่ยนเป็น transparent */
    margin-bottom: 20px !important;
}

table {
    color: #333 !important;
    width: 100% !important;
    border-collapse: collapse !important;
}

th {
    background: #ff0000 !important;
    color: white !important;
    border-bottom: 2px solid #ddd !important;
    padding: 24px !important;
    font-size: 18px !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 2 !important;
}

td {
    border-bottom: 1px solid #ddd !important;
    color: #333 !important;
    padding: 15px !important;
    text-align: center !important;
    vertical-align: middle !important;
}

tr:nth-child(even) {
    background: #c5c5c5 !important;
}

tr:hover {
    background: #dbdbdb !important;
    transition: background-color 0.3s ease !important;
}

.highlight {
    background: #ff0000 !important;
    color: white !important;
    font-weight: bold !important;
}

.btn, 
.menu button {
    background: white !important;
    color: #ff0000 !important;
    box-shadow: 0px 5px 15px rgba(255, 0, 0, 0.2) !important;
    border: 1px solid #ff0000 !important;
    transition: all 0.3s ease !important;
    font-weight: bold !important;
    cursor: pointer !important;
    font-size: clamp(14px, 3.5vw, 18px) !important;
    border-radius: 10px !important;
}

.btn:hover,
.menu button:hover {
    background: #f8f8f8 !important;
    box-shadow: 0px 5px 20px rgba(255, 0, 0, 0.3) !important;
    transform: translateY(-2px) !important;
    color: #a80000 !important;
}

.error-message {
    color: #FFFDEF !important;
    background: rgba(255, 253, 239, 0.1) !important;
}

.loading {
    color: #a80000 !important;
}

.hamburger-btn {
    color: #ff0000 !important;
}

.dropdown-menu {
    background: white !important;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1) !important;
    border-radius: 5px !important;
    padding: 10px 0 !important;
}

.dropdown-menu a {
    color: #333 !important;
    padding: 8px 15px !important;
    display: block !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}

.dropdown-menu a:hover {
    background: #ff0000 !important;
    color: white !important;
}

.profile-container,
.container {
    background: white !important;
    box-shadow: 0px 0px 20px rgba(255, 0, 0, 0.35) !important;
    color: #333 !important;
    border-radius: 10px !important;
    padding: clamp(15px, 4vw, 25px) !important;
    margin: 20px auto !important;
    width: min(95%, 900px) !important;
}

.profile-container h1,
.profile-container h2,
.profile-container h3,
.profile-container label {
    color: #ff0000 !important;
}

.profile-container .btn {
    background: #FFFDEF !important;
    color: #910000 !important;
    border: 1px solid #910000 !important;
}

h1, h2, h3, .guide-section h3 {
    color: #ff0000 !important;
}

textarea,
input {
    border: 1px solid #ddd !important;
    background: white !important;
    color: #333 !important;
}

.guide-section {
    background: white !important;
    color: #333 !important;
    border: 1px solid #ddd !important;
}

.score-table th {
    background: #ff0000 !important;
    color: white !important;
    border: 1px solid #ddd !important;
}

.score-table td {
    border: 1px solid #ddd !important;
    color: #333 !important;
}

.preview-item {
    border: 2px solid #ff0000 !important;
    background-color: white !important;
    padding: 10px !important;
    margin: 10px 0 !important;
    border-radius: 5px !important;
    position: relative !important;
}

.notification-badge {
    background: #ff0000 !important;
    color: white !important;
    box-shadow: 0px 0px 5px rgba(255, 0, 0, 0.3) !important;
    padding: 3px 8px !important;
    border-radius: 10px !important;
    font-size: 12px !important;
    position: absolute !important;
}

.btn-toggle {
    background: #ff0000 !important;
    color: white !important;
}