fix: style custom checkbox with checkmark icon, add disabled button colors

public/assets/css/style.css

@@ -716,6 +716,14 @@ code, pre {
     box-shadow: var(--shadow-sm);
 }
 
+.btn:disabled,
+.btn.disabled {
+    opacity: 0.55;
+    cursor: not-allowed;
+    transform: none !important;
+    box-shadow: none !important;
+}
+
 .btn-primary {
     background: var(--accent);
     color: white;
@@ -727,6 +735,26 @@ code, pre {
     color: white;
 }
 
+.btn-primary:disabled,
+.btn-primary.disabled {
+    background: var(--bg-tertiary);
+    color: var(--text-muted);
+    border-color: var(--border-color);
+    cursor: not-allowed;
+    transform: none;
+    box-shadow: none;
+    opacity: 0.6;
+}
+
+.btn-primary:disabled:hover,
+.btn-primary.disabled:hover {
+    background: var(--bg-tertiary);
+    color: var(--text-muted);
+    border-color: var(--border-color);
+    transform: none;
+    box-shadow: none;
+}
+
 .btn-secondary {
     background: var(--bg-tertiary);
     color: var(--text-primary);
@@ -921,13 +949,45 @@ textarea.form-input {
     gap: 0.5rem;
     cursor: pointer;
     font-size: 0.9rem;
+    position: relative;
+    padding-left: 0;
 }
 
 .checkbox-label input[type="checkbox"] {
-    width: 16px;
-    height: 16px;
-    accent-color: var(--accent);
-    cursor: pointer;
+    position: absolute;
+    opacity: 0;
+    width: 0;
+    height: 0;
+    pointer-events: none;
+}
+
+.checkbox-label .checkmark {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 18px;
+    height: 18px;
+    border: 2px solid var(--border-color);
+    border-radius: 4px;
+    background: var(--bg-input);
+    transition: all var(--transition);
+    flex-shrink: 0;
+    font-size: 0.65rem;
+    color: transparent;
+}
+
+.checkbox-label:hover .checkmark {
+    border-color: var(--accent);
+}
+
+.checkbox-label input[type="checkbox"]:checked + .checkmark {
+    background: var(--accent);
+    border-color: var(--accent);
+    color: #fff;
+}
+
+.checkbox-label input[type="checkbox"]:focus-visible + .checkmark {
+    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
 }
 
 .font-mono {

views/layouts/main.php

@@ -195,6 +195,7 @@ if (!isset($user) || $user === null) {
                 </div>
                 <label class="checkbox-label" style="margin-bottom:0.75rem;font-size:0.82rem">
                     <input type="checkbox" id="agreeTerms" onchange="toggleDownloadBtn()">
+                    <span class="checkmark"><i class="fas fa-check"></i></span>
                     I agree to the <a href="/terms" target="_blank" style="color:var(--accent);text-decoration:underline">Terms &amp; Conditions</a>
                     and <a href="/privacy" target="_blank" style="color:var(--accent);text-decoration:underline">Privacy Policy</a>
                 </label>