- TRip: various ui/ux enhancements

- other minor changes

src/assets/styles/global.css

@@ -401,6 +401,84 @@ Custom
   border-color: #f87171;
 }
 
+.trip-checkbox {
+  appearance: none;
+  width: 2.1rem;
+  height: 1.1rem;
+  border-radius: 999px;
+  border: 1px solid #9ca3af;
+  background: #e5e7eb;
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  transition: background 0.2s ease, border-color 0.2s ease;
+  cursor: pointer;
+}
+
+.trip-checkbox::after {
+  content: "";
+  position: absolute;
+  width: 0.95rem;
+  height: 0.95rem;
+  border-radius: 999px;
+  background: #ffffff;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
+  left: 2px;
+  top: 50%;
+  transform: translate(0, -50%);
+  transition: transform 0.2s ease;
+}
+
+.trip-checkbox:hover {
+  border-color: #2563eb;
+}
+
+.trip-checkbox:focus-visible {
+  outline: 2px solid rgba(37, 99, 235, 0.5);
+  outline-offset: 2px;
+}
+
+.trip-checkbox:checked {
+  background: #2563eb;
+  border-color: #2563eb;
+}
+
+.trip-checkbox:checked::after {
+  transform: translate(0.95rem, -50%);
+}
+
+.trip-checkbox:indeterminate {
+  background: linear-gradient(90deg, #93c5fd, #2563eb);
+  border-color: #2563eb;
+}
+
+.trip-checkbox:indeterminate::after {
+  width: 0.8rem;
+  height: 0.2rem;
+  border-radius: 0.2rem;
+  background: white;
+  transform: translate(0.65rem, -50%);
+  box-shadow: none;
+}
+
+[data-theme="dark"] .trip-checkbox {
+  border-color: #4b5563;
+  background: #1f2937;
+}
+
+[data-theme="dark"] .trip-checkbox::after {
+  background: #f8fafc;
+}
+
+[data-theme="dark"] .trip-checkbox:checked {
+  background: #3b82f6;
+  border-color: #3b82f6;
+}
+
+[data-theme="dark"] .trip-checkbox:checked::after {
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
+}
+
 .lyric-search-input.has-ready .p-autocomplete-input {
   border-color: #34d399;
 }