Channel Management, Drag & Drop

app/public/assets/css/main.css

@@ -7,3 +7,96 @@
 @import url("./timeline.css");
 @import url("./modal.css");
 @import url("./search.css");
+
+.channels-sticky-header {
+  position: sticky;
+  top: 0;
+  z-index: 20;
+  background: var(--bg);
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+}
+
+.channel-toolbar {
+  position: sticky;
+  top: 5.5rem;
+  z-index: 19;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  align-items: center;
+  background: var(--bg);
+  padding: 0.75rem 0;
+}
+
+.channel-toolbar input[type="search"] {
+  min-width: 260px;
+  flex: 1;
+}
+
+.channel-filter-buttons,
+.channel-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.channel-filter-buttons button.active {
+  background: var(--accent);
+  color: white;
+}
+
+.channel-count {
+  margin: 0.75rem 0 1rem;
+  color: var(--muted);
+}
+
+.channel-settings-card.is-changed {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 1px var(--accent-soft);
+}
+
+.number-input.has-duplicate {
+  border-color: #ef4444;
+  background: rgba(239, 68, 68, 0.12);
+}
+
+.duplicate-warning {
+  margin-left: 1rem;
+  color: #f87171;
+  font-weight: 700;
+}
+
+@media (max-width: 800px) {
+  .channels-sticky-header,
+  .channel-toolbar {
+    position: static;
+  }
+}
+
+.drag-handle {
+  cursor: grab;
+  color: var(--muted);
+  font-size: 1.2rem;
+  padding-right: 0.75rem;
+  user-select: none;
+}
+
+.channel-settings-main {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.channel-settings-card.is-dragging {
+  opacity: 0.45;
+  border-color: var(--accent);
+}
+
+.drag-handle {
+  cursor: grab;
+}
+
+.drag-handle:active {
+  cursor: grabbing;
+}