/* Color and Background-color Extensions for TW Region */

/* Global Styles */
html[data-region='tw'] a { color: #ffffff; }
html[data-region='tw'] button { color: #000000; }
html[data-region='tw'] .btn-text { color: #111119; }
html[data-region='tw'] html { background-color: #1a1918; }

/* Topbar */
html[data-region='tw'] .topbar { background-color: #1a1918; }
html[data-region='tw'] .topbar .menu-item { color: #ffffff; }
html[data-region='tw'] .topbar .role-name { color: #ffffff; }
html[data-region='tw'] .topbar .menu-item::after { background-color: #02fbff; }

/* Main Section */
html[data-region='tw'] .main-account { color: #dfe3e4; }
html[data-region='tw'] .button-login-text { color: #dfe3e4; }
html[data-region='tw'] .main-participant-text { color: #dcdcdc; }
html[data-region='tw'] .main-participant-number-text { color: #dfe3e4; }
html[data-region='tw'] .main-countdown-text { color: #ffffff; }
html[data-region='tw'] .main-register-btn-text { color: #2f2b20; }
html[data-region='tw'] .main-more-text { color: #efe1a2; }
html[data-region='tw'] .main-sub-title-text { color: #dcdcdc; }

/* Draw Section */
html[data-region='tw'] .draw-tab-text { color: #dfe3e4; }
html[data-region='tw'] .draw-tab-active-text { color: #8dc5d4; }
html[data-region='tw'] .goal-text-color { color: #000000; }
html[data-region='tw'] .mission-text { color: #000000; }
html[data-region='tw'] .current-count-text { color: #f18753; }

/* Test/Quiz Section */
html[data-region='tw'] .progress-text { color: #000000; }
html[data-region='tw'] .progress-current-text { color: #317ae3; }
html[data-region='tw'] .option-text { color: #e6e6e6; }
html[data-region='tw'] .option-active-text { color: #efe1a2; }

/* Feature Section */
html[data-region='tw'] .feature-title-text { color: #63d5fa; }
html[data-region='tw'] .feature-description-text { color: #cbcbcb; }

/* Modal Styles */
html[data-region='tw'] .modal-wrapper .modal-title { color: #ffffff; }
html[data-region='tw'] .modal-wrapper .modal-title .serial-code { color: #b3b3b3; }
html[data-region='tw'] .modal-wrapper .modal-content { color: #ffffff; }
html[data-region='tw'] .modal-wrapper .btn-box .btn-cancel { color: #000000; }
html[data-region='tw'] .modal-wrapper .btn-box .btn-confirm { color: #000000; }
html[data-region='tw'] .modal-text-primary-text { color: #f2f2f2; }
html[data-region='tw'] .modal-text-secondary-text { color: #a5a5a5; }
html[data-region='tw'] .modal-text-highlight-text { color: #fc8a8a; }
html[data-region='tw'] .modal-error-code-text { color: #525252; }

/* Popup/Modal Specific */
html[data-region='tw'] .popup-serial-code-text { color: #b3b3b3; }
html[data-region='tw'] .popup-tab-text { color: #bbb9bd; }
html[data-region='tw'] .popup-tab-active-text { color: #0b121a; }
html[data-region='tw'] .popup-tutorial-swiper-pagination-bullet { background-color: #5d5c5e; }
html[data-region='tw'] .popup-tutorial-swiper-pagination-bullet-active { background-color: #b6863e; }

/* Register Modal */
html[data-region='tw'] .register-modal .form-section .grand-prize .name { color: #0b121a; }
html[data-region='tw'] .register-modal .form-section .form .form-item .form-label { color: #ffffff; }
html[data-region='tw'] .register-modal .form-section .form .form-item .form-input { color: #2d2d33; }
html[data-region='tw'] .register-modal .form-section .form .form-item .form-input::placeholder { color: rgba(45, 45, 51, 0.5); }
html[data-region='tw'] .register-modal .hint { color: #fae039; }
html[data-region='tw'] .register-modal .btn-submit { color: #000000; }

/* Enter Code Modal */
html[data-region='tw'] .enter-code-modal .form-input { color: #000000; }
html[data-region='tw'] .enter-code-modal .btn-submit { color: #000000; }
html[data-region='tw'] .enter-code-modal .btn-cancel { color: #ffffff; }
html[data-region='tw'] .enter-code-modal .form-item { background-color: #e5e5e5; }

/* Consent Modal */
html[data-region='tw'] .consent-modal .title-section { background-color: #5e606a; }
html[data-region='tw'] .consent-modal .title-section .title { color: #ffed57; }
html[data-region='tw'] .consent-modal .title-section .event-name { color: #ffffff; }

/* Base Modal */
html[data-region='tw'] .base-modal .modal-title { color: #ffffff; }
html[data-region='tw'] .base-modal .modal-content { color: #ffffff; }
html[data-region='tw'] .base-modal ::-webkit-scrollbar-thumb { background-color: #fecc01; }
html[data-region='tw'] .base-modal ::-webkit-scrollbar-track { background-color: #383732; }

/* Form Fields */
html[data-region='tw'] .form-field { color: #f5f5f5; }
html[data-region='tw'] .form-field { background-color: #000000; }
html[data-region='tw'] .form-field > input { color: #f5f5f5; }
html[data-region='tw'] .form-field > input { background-color: transparent; }
html[data-region='tw'] .form-field > input::placeholder { color: #666666; }
html[data-region='tw'] .form-field.error { border-color: #d34b44; }
html[data-region='tw'] .form-field .error-hint { color: #e0aaa9; }

/* Register Form Fields */
html[data-region='tw'] .register-step-title { color: #c3c3c3; }
html[data-region='tw'] .register-field-text { color: #f5f5f5; }
html[data-region='tw'] .register-field-placeholder { color: #666666; }
html[data-region='tw'] .register-field-bg { background-color: #000000; }
html[data-region='tw'] .register-field-border { background-color: #bcbcbc; }
html[data-region='tw'] .register-field-error-border { color: #d34b44; }
html[data-region='tw'] .register-field-error-text { color: #e0aaa9; }
html[data-region='tw'] .register-field-dropdown-arrow { color: #ffffff; }
html[data-region='tw'] .register-checkbox-label-text { color: #cbcbcb; }
html[data-region='tw'] .register-checkbox-link-text { color: #f4f4f4; }

/* Region Dropdowns */
html[data-region='tw'] .region-code .select-button::after { background-color: #bcbcbc; }
html[data-region='tw'] .region-code .dropdowns-container .dropdowns { background-color: #000000; }
html[data-region='tw'] .region-code .dropdowns-container .dropdowns > li.hover { background-color: rgb(56, 56, 56); }
html[data-region='tw'] .region-code .dropdowns-container .dropdowns > li.selected { background-color: rgb(211, 211, 211); }
html[data-region='tw'] .region-code .dropdowns-container .dropdowns > li.selected { color: rgb(15, 34, 53); }

/* Milestone */
html[data-region='tw'] .milestone-reward-text { color: #2f2f2f; }
html[data-region='tw'] .milestone-target-text { color: #2f2f2f; }
html[data-region='tw'] .milestone-reward-finish-text { color: #c3c3c3; }
html[data-region='tw'] .milestone-target-finish-text { color: #ffffff; }
html[data-region='tw'] .milestone-progress-bg { background-color: #ffffff; }
html[data-region='tw'] .milestone-progress-finish-bg { background-color: #d6fa11; }

/* Menu */
html[data-region='tw'] .menu-item-text { color: #ffffff; }
html[data-region='tw'] .menu-item-highlight { color: #02fbff; }
html[data-region='tw'] .menu .menu-item { color: #ffffff; }
html[data-region='tw'] .menu .menu-item.active { border-color: #02fbff; }
html[data-region='tw'] .menu .menu-item.active { color: #02fbff; }

/* Store & Social */
html[data-region='tw'] .store-hint-text { color: #d1d1d1; }
html[data-region='tw'] .social-name-text { color: #a5a5a5; }
html[data-region='tw'] .side-panel-text { color: #ffffff; }

/* Base Components */
html[data-region='tw'] .base-reward { color: #f2f2f2; }
html[data-region='tw'] .base-store-btn { color: #d1d1d1; }
html[data-region='tw'] .base-social-btn { color: #a5a5a5; }
html[data-region='tw'] .base-form-checkbox { color: #cbcbcb; }
html[data-region='tw'] .base-form-checkbox a { color: #f4f4f4; }
html[data-region='tw'] .base-form-checkbox.error { color: #d34b44; }
html[data-region='tw'] .base-form-checkbox.error a { color: #d34b44; }

/* Loading */
html[data-region='tw'] .loading { background-color: rgba(0, 0, 0, 0.8); }

/* Error Page */
html[data-region='tw'] .error { color: #dfe3e4; }
html[data-region='tw'] .error .msg { color: #ffffff; }

/* App */
html[data-region='tw'] .app { color: #dfe3e4; }

/* Rule Modal */
html[data-region='tw'] .rule-modal .tab { color: #bbb9bd; }
html[data-region='tw'] .rule-modal .tab.active { color: #0b121a; }
html[data-region='tw'] .rule-modal .tutorial-swiper-pagination-bullet { background-color: #5d5c5e; }
html[data-region='tw'] .rule-modal .tutorial-swiper-pagination-bullet-active { background-color: #b6863e; }
html[data-region='tw'] .rule-modal .tutorial-content { background-color: #000000; }

/* Claim Modals */
html[data-region='tw'] .claim-modal .btn-confirm { background-color: #fecc01; }
html[data-region='tw'] .claim-modal .btn-cancel { background-color: #383732; }

/* Redeem Modal */
html[data-region='tw'] .redeem-modal .btn-confirm { background-color: #fecc01; }
html[data-region='tw'] .redeem-modal .btn-cancel { background-color: #383732; }

/* Draw Result Modal */
html[data-region='tw'] .draw-result-modal .btn-confirm { background-color: #fecc01; }
html[data-region='tw'] .draw-result-modal .btn-cancel { background-color: #383732; }

/* Reserve Success Modal */
html[data-region='tw'] .reserve-success-modal .btn-confirm { background-color: #fecc01; }
html[data-region='tw'] .reserve-success-modal .btn-cancel { background-color: #383732; }

/* My Code Modal */
html[data-region='tw'] .my-code-modal .code-text { color: #000000; }
html[data-region='tw'] .my-code-modal .btn-copy { color: #000000; }
html[data-region='tw'] .my-code-modal .btn-close { color: #ffffff; }
html[data-region='tw'] .my-code-modal .code-container { background-color: #e5e5e5; }

/* Layout */
html[data-region='tw'] .layout { background-color: #000000; }

/* Float Text */
html[data-region='tw'] .float-text { color: #ffffff; }

/* Draw Section Specific */
html[data-region='tw'] .draw-section .btn-draw { color: #000000; }
html[data-region='tw'] .draw-section .token-count { color: #63d5fa; }

/* Board Content */
html[data-region='tw'] .board-content-exchange .mission-text { color: #000000; }
html[data-region='tw'] .board-content-exchange .btn-claim { color: #ffffff; }
html[data-region='tw'] .board-content-exchange .token-count { color: #f18753; }
html[data-region='tw'] .board-content-mission .mission-text { color: #000000; }
html[data-region='tw'] .board-content-mission .btn-claim { color: #ffffff; }
html[data-region='tw'] .board-content-mission .token-count { color: #f18753; }
html[data-region='tw'] .board-content-mission .btn-draw { color: #000000; }
html[data-region='tw'] .board-content-invitation .btn-claim { color: #000000; }

/* Test Components */
html[data-region='tw'] .test-question .progress-text { color: #000000; }
html[data-region='tw'] .test-question .progress-current-text { color: #317ae3; }
html[data-region='tw'] .test-question .option-active-text { color: #efe1a2; }
html[data-region='tw'] .test-question .option-text { color: #e6e6e6; }
html[data-region='tw'] .test-question .btn-next { color: #ffffff; }
html[data-region='tw'] .test-result .btn-download { color: #ffffff; }
html[data-region='tw'] .test-result .btn-share { color: #ffffff; }

/* Invitation Item */
html[data-region='tw'] .invitation-item .goal-text { color: #000000; }
html[data-region='tw'] .invitation-item .btn-claim { color: #ffffff; }
html[data-region='tw'] .invitation-item .token-count { color: #f18753; }