.button { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.75rem 1.5rem; border-radius: 6px; font-weight: 600; font-size: 1rem; text-decoration: none; cursor: pointer; transition: all 0.2s ease; border: 1px solid transparent; }
.button-primary { background-color: var(--primary-color); color: var(--text-light); border-color: var(--primary-color); }
.button-primary:hover { background-color: var(--primary-hover); border-color: var(--primary-hover); transform: translateY(-2px); }
.button-secondary { background-color: transparent; color: var(--text-dark); border-color: var(--border-light); }
.button-secondary:hover { background-color: var(--secondary-color); }
html.dark-mode .button-secondary { color: var(--text-light); border-color: var(--border-dark); }
html.dark-mode .button-secondary:hover { background-color: var(--bg-dark-secondary); }

.switch { position: relative; display: inline-block; width: 40px; height: 20px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: 0.4s; }
.slider:before { position: absolute; content: ""; height: 14px; width: 14px; left: 3px; bottom: 3px; background-color: white; transition: 0.4s; }
input:checked + .slider { background-color: var(--primary-color); }
input:checked + .slider:before { transform: translateX(20px); }
.slider.round { border-radius: 20px; }
.slider.round:before { border-radius: 50%; }
html.dark-mode .slider { background-color: #555; }
html.dark-mode input:checked + .slider { background-color: var(--primary-color); }

.modal { display: none; position: fixed; z-index: 2000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); }
.modal-content { background-color: var(--bg-light); margin: 15% auto; padding: 2rem; border: 1px solid var(--border-light); border-radius: 10px; width: 90%; max-width: 400px; text-align: center; position: relative; }
html.dark-mode .modal-content { background-color: var(--bg-dark-secondary); border-color: var(--border-dark); }
.modal .button.secondary { background-color: #f1f1f1; color: #555; border: 1px solid #ddd; }
.modal .button.secondary:hover { background-color: #e9e9e9; }
html.dark-mode .modal .button.secondary { background-color: #555; color: #eee; border-color: #666; }
html.dark-mode .modal .button.secondary:hover { background-color: #666; }
.modal-content input { width: 80%; padding: 0.5rem; margin: 1rem 0; border-radius: 6px; border: 1px solid var(--border-light); }
html.dark-mode .modal-content input { background-color: #3c3c3c; color: #e0e0e0; border-color: #555; }
.modal-content h3 { font-size: 1.5rem; font-weight: 600; margin-bottom: 0.5rem; }
html.dark-mode .modal-content h3 { color: var(--text-light); }
#roomCodeInput { width: 240px; margin: 1.5rem auto; display: block; text-align: center; font-size: 2.25rem; font-family: 'Courier New', Courier, monospace; letter-spacing: 0.3em; text-transform: uppercase; padding: 0.5rem 0.3em; border-radius: 8px; border-width: 1px; transition: border-color 0.2s, box-shadow 0.2s; }
#roomCodeInput:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(58, 58, 58, 0.3); }
html.dark-mode #roomCodeInput { background-color: #3c3c3c; border-color: #555; color: #e0e0e0; box-shadow: none; }
html.dark-mode #roomCodeInput:focus { border-color: var(--primary-hover); box-shadow: 0 0 0 3px rgba(74, 74, 74, 0.4); }
#closeModal { position: absolute; top: 5px; right: 15px; font-size: 1.5rem; font-weight: bold; color: #333; cursor: pointer; transition: color 0.2s ease; z-index: 2100; }
#closeModal:hover { color: #ff0000; }
html.dark-mode #closeModal { color: #f8f9fa; }
html.dark-mode #closeModal:hover { color: #ff4d4d; }

.toast-notification { position: fixed; bottom: 20px; right: 20px; background-color: #ffffff; color: #333333; border: 1px solid #e0e0e0; box-shadow: 0 4px 12px rgba(0,0,0,0.1); padding: 12px 24px; border-radius: 4px; opacity: 0; transform: translateY(20px); transition: opacity 0.3s, transform 0.3s ease; z-index: 9999; }
.toast-notification.show { opacity: 1; transform: translateY(0); }
.toast-notification.error { background-color: #f8d7da; color: #721c24; border-color: #f5c6cb; }
html.dark-mode .toast-notification { background-color: #333; color: white; border-color: #444; box-shadow: 0 4px 12px rgba(0,0,0,0.3); }
html.dark-mode .toast-notification.error { background-color: #d32f2f; color: white; border-color: #d32f2f; }