:root {
    color-scheme: dark;
    --page-bg: #1c1f25;
    --surface-bg: #171a21;
    --input-bg: #242c38;
    --main-font-color: #e0e0e0;
    --muted-font-color: #cccccc;
    --subtle-font-color: #aaaaaa;
    --theme-border: rgba(255, 255, 255, 0.1);
    --primary-control-bg: var(--rime);
    --primary-control-text: #111111;
    --secondary-control-bg: var(--cover-color);
    --secondary-control-text: #ffffff;
    --control-bg: var(--cover-color);
    --control-text: #ffffff;
    --white: #ffffff;
}

html[data-theme="light"] {
    color-scheme: light;
    --page-bg: #eaeaea;
    --surface-bg: #ffffff;
    --input-bg: #ffffff;
    --main-font-color: #111111;
    --muted-font-color: #3f3f3f;
    --subtle-font-color: #888;
    --theme-border: #d4dbcf;
    --white: #111111;
    --gray: #888;
    --blue: #00679b;
    --blue-text: #006da3;
    --frame-color: #ffffff;
    --frame-color-sub: rgba(255, 255, 255, 0.78);
    --cover-color: #e6ecdf;
    --secondary-control-bg: #666;
    --secondary-control-text: #ffffff;
    --control-bg: #666;
    --control-text: #ffffff;
}

body {
    background-color: var(--page-bg);
    color: var(--main-font-color);
    transition: background-color 0.16s ease, color 0.16s ease;
}

html[data-theme="light"] :is(
    .bg-color-main,
    .bg-color-sub,
    .bg-color-cover,
    .contact-container,
    .signup-wrapper,
    .pwc-wrapper,
    .bug-sidebar,
    .bug-filter-section,
    .review-tab-menu,
    .review-controls,
    .review-list .user-review,
    .bug-report-form-section,
    .bug-thread,
    .request-form,
    .request-detail-header,
    .request-info,
    .request-card,
    .profile-card,
    .user-tabs,
    .review-item,
    .bug-list-item,
    .activity-list-item,
    .notification-settings-list,
    .specs-grid,
    .search-category-card,
    .game-search .game-search-container .game-item a
) {
    color: var(--main-font-color);
}

.footer-theme-selector {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 4px 10px 8px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.82rem;
}

.footer-theme-selector select {
    min-width: 120px;
    padding: 6px 30px 6px 10px;
    border: 1px solid #3c4650;
    border-radius: 3px;
    background-color: #171a21;
    color: #ffffff;
    font: inherit;
    cursor: pointer;
}

.footer-theme-selector select:focus-visible {
    outline: none;
    box-shadow: none;
}

html[data-theme="light"] main :is(h1, h2, h3, h4, h5, h6, legend),
html[data-theme="light"] .filter-search-modal :is(.title, legend),
html[data-theme="light"] :is(.section-title, .card-title, .requests-page-title, .request-card-title, .user-profile-header h2, .game-info h3, .category-header h3) {
    color: var(--main-font-color);
}

html[data-theme="light"] :is(.game-card a, .request-card, .request-card:visited) {
    color: var(--main-font-color);
}

html[data-theme="light"] :is(.requests-page-subtitle, .request-card-meta, .spec-item label, .form-group .form-label, .auth-instructions, .verification-instructions, .bug-form-help) {
    color: var(--muted-font-color);
}

html[data-theme="light"] :is(
    .contact-form label,
    .checkbox-list label,
    .sidebar-section .label,
    .review-list .user-review .updated,
    .review-list .user-review .created,
    .review-list .user-review .user-review-inner .contents,
    .bug-content,
    .bug-comment,
    .bug-thread-header .thread-platform,
    .bug-thread-header .thread-meta,
    .bug-thread-header .thread-date,
    .comment-popup .popup-date
) {
    color: var(--muted-font-color);
}

html[data-theme="light"] :is(
    .product .full-detail .full-detail-wrapper .full-detail-inner .detail-inner-col a,
    .custom-reviews-list ol li a,
    .review-tab-menu ol li a,
    .review-list .user-review .user-review-inner .readmore,
    .review-list .user-review .user-review-top .platform span,
    .product .detail-contact a,
    .playlist-btn,
    .product .score .score-inner .score-point span,
    .review-none .review-post-btn,
    .review-post-ratio::before,
    .review-post .review-field .spec-help a,
    .review-field-modal::after,
    .review-edit-modal-content .modal-header h3,
    .review-edit-modal-content .modal-close,
    .review-edit-modal-content .modal-title-field label,
    .review-edit-modal-content .modal-score-field label,
    .filter-search-modal .close,
    .filter-search-modal-score-title,
    .filter-search-modal .filter-search-modal-search-form fieldset label,
    .recommended-game-modal-header .title,
    .recommended-game-modal .close,
    .current-month-year,
    .custom-dropdown,
    .dropdown-list li .sliding-text,
    .selected-platforms span,
    .bug-thread-header .thread-title,
    .bug-thread-header .user-detail .name a,
    .comment-user a,
    .popup-header,
    .request-detail-title,
    .request-detail-body,
    .request-detail-body a,
    .request-actions a,
    .responses-section-title,
    .request-detail-info-item .value,
    .request-detail-spec-value,
    .filter-group label,
    .request-form .form-group label,
    .pc-spec-fields-title,
    .similar-game-results-item,
    .similar-game-selected-title,
    .submit-game-results-item,
    .submit-game-selected-title,
    .submit-game-section,
    .user-link,
    .response-card-title,
    .response-card-title a,
    .review-game-title,
    .review-game-title a,
    .bug-list-item .bug-item-header .bug-header-title,
    .bug-list-item .bug-thread-title,
    .activity-header-title,
    .activity-main-title,
    .activity-main-title a,
    .contact-title,
    .thanks-title,
    .bug-sidebar .game-title,
    .sidebar-recommended .rec-item,
    .game-search .game-search-container .game-item a
) {
    color: var(--main-font-color);
}

html[data-theme="light"] :is(
    .game-search .game-search-container .game-item a .game-item-detail .game-item-detail-info .game-item-detail-info-summary,
    .request-detail-content,
    .request-detail-text,
    .request-detail-date,
    .request-status .request-detail-date-item,
    .request-detail-date-item i,
    .request-detail-spec-label,
    .response-card-vote-count,
    .target-text p,
    .category-review-prompt .no-review-msg,
    .review-load-status,
    .review-load-fallback,
    .review-load-retry
) {
    color: var(--muted-font-color);
}

html[data-theme="light"] :is(
    .game-search .game-search-container .pagination .step-links a,
    .game-search .game-search-container .pagination .step-links span,
    .game-search #game-search-side fieldset .more-button,
    .game-search #game-search-side fieldset .close-button,
    .pagination .step-links a,
    .pagination .step-links span,
    .back-btn,
    .back-btn:visited,
    a.btn-back
) {
    color: var(--main-font-color);
}

html[data-theme="light"] main :is(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]), textarea, select),
html[data-theme="light"] .filter-search-modal :is(input:not([type="checkbox"]):not([type="radio"]), textarea, select) {
    border-color: var(--theme-border) !important;
    background: var(--input-bg) !important;
    color: var(--main-font-color) !important;
    box-shadow: inset 0 0 0 1px var(--theme-border);
}

html[data-theme="light"] main option,
html[data-theme="light"] .filter-search-modal option {
    background: var(--input-bg);
    color: var(--main-font-color);
}

html[data-theme="light"] :is(
    .filter-search-modal,
    .filter-search-modal .filter-search-modal-search-form fieldset,
    .filter-dropdown-menu,
    .game-autocomplete-results,
    .review-edit-modal-content,
    .recommended-game-modal,
    #platform-modal .modal-content,
    .dropdown-list-container,
    .picker-dropdown,
    .comment-popup
) {
    border-color: var(--theme-border);
    background: var(--surface-bg);
    color: var(--main-font-color);
    box-shadow: 0 10px 30px rgba(36, 42, 47, 0.14);
}

html[data-theme="light"] :is(
    .filter-search-modal-header,
    .filter-search-modal-score,
    .filter-search-modal .filter-search-modal-search-form,
    .review-edit-modal-content .modal-header,
    .review-edit-modal-content .modal-footer,
    .recommended-game-modal-header,
    #platform-modal h3,
    .requests-filter-section,
    .search-category-card,
    .request-card,
    .profile-card,
    .contact-target-info,
    .thanks-note
) {
    border-color: var(--theme-border);
    background: var(--frame-color-sub);
}

html[data-theme="light"] :is(
    .custom-reviews-list ol li a,
    .review-list .user-review.myreview,
    .selected-platforms span,
    .submit-game-section,
    .request-detail-spec-item,
    .request-detail-info-item,
    .response-card,
    .similar-game-selected,
    .submit-game-selected,
    .request-detail-list ol li,
    .pc-spec-fields
) {
    border-color: var(--theme-border);
    background: #eef2e9;
}

html[data-theme="light"] :is(
    .similar-game-results,
    .submit-game-results
) {
    border-color: var(--theme-border);
    background: var(--surface-bg);
    color: var(--main-font-color);
}

html[data-theme="light"] .review-list .user-review .user-review-inner {
    border-color: var(--theme-border);
}

html[data-theme="light"] .review-list .user-review .user-review-inner .contents.truncated::before {
    background: linear-gradient(to top, #ffffff, rgba(255, 255, 255, 0.9), transparent);
}

html[data-theme="light"] .review-list .user-review.myreview .user-review-inner .contents.truncated::before {
    background: linear-gradient(to top, #eef2e9, rgba(238, 242, 233, 0.9), transparent);
}

html[data-theme="light"] :is(
    .filter-search-modal-score-list li a,
    .filter-group select,
    .search-group input,
    .custom-dropdown,
    .filter-dropdown-toggle,
    .bug-filter-form select,
    .review-controls select,
    .filter-item select,
    .filter-item input,
    .picker-display
) {
    border-color: var(--theme-border);
    background: var(--input-bg);
    color: var(--main-font-color);
}

html[data-theme="light"] :is(.category-btn, .category-btn:visited, .dropdown-item, .checkbox-btn) {
    color: var(--muted-font-color);
}

html[data-theme="light"] :is(.category-btn, .requests-filter-section, .search-category-card) {
    border-color: var(--theme-border);
}

html[data-theme="light"] .category-btn {
    background: var(--secondary-control-bg);
    color: var(--secondary-control-text);
}

html[data-theme="light"] :where(
    .product .image .page-btn li a,
    .product .full-detail-btn,
    .review-tab-menu ol li:hover,
    .review-tab-menu ol li.active,
    .product-container-btn ol li:hover,
    .product-container-btn ol li.active,
    .review-list .user-review .user-review-inner .custom-review-btn,
    .review-post .platform-select-btn,
    .review-post .review-field #id_played_platforms,
    .user-tab-btn.active,
    .user-tab-btn:hover,
    .review-body .review-inner .contents a.recommended-game,
    .game-search .filter-toggle-btn,
    .game-search #game-search-side .clear-filters-button,
    .game-search #game-search-side fieldset label:hover,
    .bug-sidebar-btn,
    .back-btn,
    .back-btn:visited,
    a.btn-back,
    .filter-dropdown-toggle,
    .category-btn,
    .helpful-btn,
    .review-edit-modal-content .modal-cancel-btn,
    .tutorial-btn:not(.primary),
    .review-load-retry,
    .btn-secondary,
    .signup-wrapper .verification-resend-button,
    .btn-push-notification,
    .modal-score-remove,
    .cancel-reply,
    .btn-vote,
    .hmenu .hmenu-inner-btn .btn:not(.regist) a,
    .hmenu .user a,
    .hmenu .filter-search,
    .hmenu-link
) {
    border-color: var(--secondary-control-bg) !important;
    background: var(--secondary-control-bg) !important;
    color: var(--secondary-control-text) !important;
}

html[data-theme="light"] .form-group input[type="file"]::file-selector-button {
    border-color: var(--secondary-control-bg);
    background: var(--secondary-control-bg);
    color: var(--secondary-control-text);
}

html[data-theme="light"] :where(
    .product .score .review-post-btn,
    .product .score .notify-release-btn:not(.success),
    .review-none .review-post-btn,
    .category-review-btn,
    .review-post button,
    .bug-submit-btn,
    .comment-submit-btn,
    a.view-all-bugs-btn,
    .filter-search-modal .filter-search-modal-search-form button,
    .tutorial-btn.primary,
    .submit-btn,
    .signup-wrapper button:not(.verification-resend-button),
    .form-actions button,
    .pwc-wrapper form button,
    a.thanks-btn-home,
    .btn-create-request,
    .btn-submit-request,
    .btn-submit-proposal:not(:disabled),
    .btn-select-game,
    .btn-primary,
    .btn-danger,
    .personalized-game-review .review-prompt-action,
    .latest-requests-section .section-header .btn-view-all,
    .hmenu .hmenu-inner-btn .btn.regist a,
    .request-form .checkbox-list label:has(input:checked)
) {
    border-color: var(--primary-control-bg) !important;
    background: var(--primary-control-bg) !important;
    color: var(--primary-control-text) !important;
}

html[data-theme="light"] .btn-submit-proposal:disabled {
    border-color: var(--secondary-control-bg);
    background: var(--secondary-control-bg);
    color: var(--secondary-control-text);
    opacity: 0.65;
}

html[data-theme="light"] .review-tab-menu.bg-color-sub ol li:is(:hover, .active) > a {
    color: #ffffff !important;
}

html[data-theme="light"] .review-report-btn:hover {
    color: #111111;
}

html[data-theme="light"] .review-field-modal::after {
    content: '⤢';
    font-size: 1rem;
    color: #888;
    line-height: 1;
    margin-top: -2px;
    transition: ease all .4s;
    opacity: 1;
}

html[data-theme="light"] .product .score {
    background: linear-gradient(145deg, #1d2531 0%, #0d1116 100%);
    border: none;
    color: #ffffff;
    box-shadow: 0 8px 24px rgba(13, 17, 22, 0.18);
}

html[data-theme="light"] .product .score .score-inner {
    border-color: rgba(255, 255, 255, 0.08);
}

html[data-theme="light"] .product .score :is(
    .score-title,
    .score-point span,
    .unreleased-text .main,
    .unreleased-text p
) {
    color: #ffffff !important;
}

html[data-theme="light"] .product .score .custom-reviews-list h2 {
    color: #ffffff !important;
}

html[data-theme="light"] .product .score .custom-reviews-list ol li a {
    border: 1px solid var(--secondary-control-bg);
    background: var(--secondary-control-bg) !important;
    color: var(--secondary-control-text) !important;
}

html[data-theme="light"] .product .score .custom-reviews-list ol li a .custom-review-stat-item-title .count {
    color: rgba(255, 255, 255, 0.78) !important;
}

html[data-theme="light"] :is(
    .review-post .review-field .review-hide,
    .review-post .review-field.custom,
    .recommended-game-modal-inner #autocomplete-list li,
    #platform-modal .platform-list label,
    .dropdown-list li
) {
    border-color: #cccccc;
    background: #f1f1f1;
    color: #111111;
}

html[data-theme="light"] .review-list .user-review .user-review-inner .contents .contents-hide {
    background: #666666;
    color: #fff;
}

html[data-theme="light"] .product-container-inner.reviews:not([data-current-tab="all"]) .review-tab-content.custom .user-review-body > .title {
    padding-right: 70px;
    color: var(--main-font-color);
    line-height: 1.5;
    overflow-wrap: anywhere;
}

html[data-theme="light"] .review-post .review-field .recommended-game {
    background: #ddd !important;
    color: #111 !important;
}

html[data-theme="light"] :is(
    .filter-search-modal-header,
    .filter-search-modal-score,
    .filter-search-modal .filter-search-modal-search-form,
    .review-edit-modal-content .modal-header,
    .review-edit-modal-content .modal-footer,
    .recommended-game-modal-header,
    #platform-modal h3
) {
    border-color: #cccccc;
    background: #ddd;
}

html[data-theme="light"] :is(
    .review-edit-modal-content .modal-header h3,
    .review-edit-modal-content .modal-close,
    .review-edit-modal-content .modal-title-field label,
    .review-edit-modal-content .modal-score-field label,
    .recommended-game-modal-header .title,
    .recommended-game-modal .close,
    #platform-modal h3,
    #platform-modal .no-answer-option label,
    .dropdown-list li .sliding-text
) {
    color: #111111;
}

html[data-theme="light"] :is(
    .filter-search-modal .close:hover,
    .review-edit-modal-content .modal-close:hover,
    .recommended-game-modal .close:hover
) {
    background: #cccccc;
    color: #111111;
}

html[data-theme="light"] :is(
    .review-edit-modal-content .modal-body textarea,
    .review-edit-modal-content .modal-title-field input,
    .recommended-game-modal-inner input
) {
    border: 1px solid #cccccc;
    background: #ffffff;
    color: #111111;
    box-shadow: none;
}

html[data-theme="light"] .review-edit-modal-content .modal-cancel-btn {
    border-color: var(--secondary-control-bg);
    background: var(--secondary-control-bg);
    color: var(--secondary-control-text);
}

html[data-theme="light"] .review-edit-modal-content .modal-cancel-btn:hover {
    background: var(--secondary-control-bg);
    color: var(--secondary-control-text);
}

html[data-theme="light"] .recommended-game-modal-inner #autocomplete-list li:hover,
html[data-theme="light"] .dropdown-list li:hover {
    background: #cccccc;
    color: #111111;
}

html[data-theme="light"] .dropdown-list li.active,
html[data-theme="light"] #platform-modal .platform-list label.checked {
    border-color: var(--secondary-control-bg) !important;
    background: var(--secondary-control-bg) !important;
    color: var(--secondary-control-text) !important;
}

html[data-theme="light"] :is(
    .calendar-day,
    .calendar-weekdays,
    .current-month-year
) {
    color: #111111;
}

html[data-theme="light"] .calendar-day:hover:not(.empty) {
    background: #ddd;
}

html[data-theme="light"] :is(
    .prev-year:hover,
    .prev-month:hover,
    .next-month:hover,
    .next-year:hover,
    .clear-selection:hover
) {
    color: #111111;
}

html[data-theme="light"] :is(.clear-filter:hover, .filter-clear-btn:hover) {
    color: #111111;
}

html[data-theme="light"] .game-search #game-search-side .side-header .side-close {
    color: var(--main-font-color);
}

html[data-theme="light"] .game-search .game-search-container .game-item a .game-item-detail .game-item-detail-info .game-item-detail-info-score:not(.noreview) {
    background: #eef2e9;
}

html[data-theme="light"] .game-search .game-search-container .game-item a .game-item-detail .game-item-detail-info .game-item-detail-info-score:not(.noreview) .game-item-detail-info-score-inner {
    border-right-color: #00000021;
}

html[data-theme="light"] .product .score .notify-release-btn.success {
    color: #ffffff;
}

html[data-theme="light"] :is(
    .helpful-count,
    .helpful-disabled,
    .review-list .user-review .updated,
    .review-list .user-review .created,
    .review-date,
    .bug-thread-header .thread-platform,
    .bug-thread-header .thread-meta,
    .bug-thread-header .thread-date,
    .comment-popup .popup-date
) {
    color: #888;
}

html[data-theme="light"] :is(.notification-settings-list, .specs-grid) {
    background: #f1f1f1;
}

html[data-theme="light"] .notification-settings-list,
html[data-theme="light"] .notification-settings-list .checkbox-label-custom {
    color: #111111;
}

html[data-theme="light"] .pc-spec-privacy-setting {
    border-color: #00000021;
    color: #111111;
}

html[data-theme="light"] .pc-spec-privacy-setting .form-hint {
    color: #666;
}

html[data-theme="light"] .personalized-game-review .game-list .game-item .game-title {
    color: #111111;
}

html[data-theme="light"] .review-post .review-field {
    border-bottom: 1px solid #00000021;
}

html[data-theme="light"] .review-post .review-field .text {
    color: #666;
}

html[data-theme="light"] .review-post .review-field .score span {
    border: 1px solid #666;
    color: #666;
}

html[data-theme="light"] .game-search #game-search-side fieldset label.active .remove {
    color: #666;
}

html[data-theme="light"] .game-search #game-search-side fieldset label.active:hover .remove {
    color: #fff;
}

html[data-theme="light"] .card-header {
    background: rgba(36, 42, 47, 0.05);
    border-color: var(--theme-border);
}

html[data-theme="light"] .request-card:hover {
    background: #ffffff;
    color: var(--main-font-color);
    box-shadow: 0 6px 20px rgba(36, 42, 47, 0.12);
}

html[data-theme="light"] :is(.game-list, .filter-search-modal .filter-search-modal-inner) {
    scrollbar-color: #aeb8a8 #e4e9df;
}

@media (prefers-reduced-motion: reduce) {
    body {
        transition: none;
    }
}

@media screen and (max-width: 480px) {
    .footer-theme-selector {
        flex-direction: column;
        gap: 6px;
    }

    .footer-theme-selector select {
        width: min(220px, 100%);
    }
}