diff --git a/src/styles.css b/src/styles.css
index ef11f15..c5f9dac 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -314,6 +314,86 @@ select:focus {
     box-shadow: 0 0 0 3px rgba(145, 70, 255, 0.18);
 }
 
+/* ============================================
+   CUSTOM CHECKBOX — modern Twitch-purple
+   ============================================
+   Replaces the OS gray box with a 16px rounded square that fills
+   purple + draws a white check when checked. Smooth 0.18s transition
+   on every state change. Focus ring matches inputs. */
+input[type="checkbox"] {
+    appearance: none;
+    -webkit-appearance: none;
+    width: 16px;
+    height: 16px;
+    flex-shrink: 0;
+    border: 1.5px solid var(--border-soft);
+    border-radius: 4px;
+    background: var(--bg-card);
+    cursor: pointer;
+    position: relative;
+    transition: background 0.18s, border-color 0.18s, box-shadow 0.18s, transform 0.12s;
+    vertical-align: middle;
+}
+
+input[type="checkbox"]:hover:not(:disabled) {
+    border-color: rgba(145, 70, 255, 0.6);
+}
+
+input[type="checkbox"]:checked {
+    background: var(--accent);
+    border-color: var(--accent);
+}
+
+input[type="checkbox"]:checked::after {
+    content: '';
+    position: absolute;
+    left: 4px;
+    top: 0.5px;
+    width: 5px;
+    height: 9px;
+    border: solid #fff;
+    border-width: 0 2px 2px 0;
+    transform: rotate(45deg);
+}
+
+input[type="checkbox"]:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 3px rgba(145, 70, 255, 0.25);
+}
+
+input[type="checkbox"]:active:not(:disabled) {
+    transform: scale(0.92);
+}
+
+input[type="checkbox"]:disabled {
+    opacity: 0.45;
+    cursor: not-allowed;
+}
+
+/* ============================================
+   CUSTOM SELECT — chevron via inline SVG background
+   ============================================ */
+select {
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23999'%3E%3Cpath d='M4 6l4 4 4-4z'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right 8px center;
+    background-size: 14px;
+    padding-right: 28px !important;
+    cursor: pointer;
+}
+
+select:hover:not(:disabled) {
+    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%239146FF'%3E%3Cpath d='M4 6l4 4 4-4z'/%3E%3C/svg%3E");
+}
+
+select option {
+    background: var(--bg-card);
+    color: var(--text);
+}
+
 /* Queue Section */
 .queue-section {
     border-top: 1px solid rgba(255,255,255,0.1);