Add module ordering feature with drag-and-drop

- Add modules_order setting in backend settings registry
- Update ModulesContext with moduleOrder state and save functions
- Create configuration tab in Features page with drag-and-drop reordering
- Make feature tabs dynamic based on order (updates in real-time)
- Sort sidebar modules based on saved order
- Add order-cards CSS with vertical layout
- Update API client to support string[] type for modules_order

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

frontend/src/styles/AdminPanel.css

@@ -2378,3 +2378,155 @@
 [data-theme='dark'][data-accent='auto'] .users-modal .toggle-inline input:checked+.toggle-slider-sm::before {
     background: #111827;
 }
+
+/* ===========================================
+   ORDER CARDS - Feature Ordering (Theme Editor Style)
+   =========================================== */
+
+/* Order Cards Container - Vertical Stack */
+.order-cards {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    max-width: 600px;
+}
+
+/* Order Card */
+.order-card {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    padding: 1rem 1.25rem;
+    background: var(--color-bg-card);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-md);
+    cursor: grab;
+    transition: all 0.25s ease;
+    user-select: none;
+}
+
+.order-card:hover {
+    transform: translateX(4px);
+    border-color: var(--color-text-secondary);
+    box-shadow: var(--shadow-md);
+}
+
+.order-card:active {
+    cursor: grabbing;
+}
+
+.order-card.dragging {
+    opacity: 0.6;
+    transform: scale(1.02);
+    box-shadow: var(--shadow-lg);
+    border-color: var(--color-accent);
+    background: rgba(var(--color-accent-rgb), 0.05);
+}
+
+/* Order Card Preview - Number Badge */
+.order-card-preview {
+    flex-shrink: 0;
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--color-bg-elevated);
+    border-radius: var(--radius-md);
+    border: 1px solid var(--color-border);
+}
+
+.order-card-number {
+    font-size: 1.1rem;
+    font-weight: 700;
+    color: var(--color-accent);
+}
+
+/* Order Card Info */
+.order-card-info {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+    min-width: 0;
+}
+
+.order-card-name {
+    font-weight: 600;
+    font-size: 1.05rem;
+    color: var(--color-text-primary);
+}
+
+.order-card-desc {
+    font-size: 0.9rem;
+    color: var(--color-text-secondary);
+}
+
+/* Order Card Icon */
+.order-card-icon {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+    height: 36px;
+    background: rgba(var(--color-accent-rgb), 0.1);
+    border-radius: var(--radius-md);
+}
+
+.order-card-icon .material-symbols-outlined {
+    font-size: 20px;
+    color: var(--color-accent);
+}
+
+/* Order Card Handle */
+.order-card-handle {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.5rem;
+    cursor: grab;
+}
+
+.order-card-handle:active {
+    cursor: grabbing;
+}
+
+.order-card-handle .material-symbols-outlined {
+    font-size: 24px;
+    color: var(--color-text-muted);
+    transition: color 0.2s ease;
+}
+
+.order-card:hover .order-card-handle .material-symbols-outlined {
+    color: var(--color-text-secondary);
+}
+
+/* Order Actions */
+.order-actions {
+    margin-top: 1.5rem;
+    display: flex;
+    gap: 0.75rem;
+}
+
+.order-actions .btn-primary {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.75rem 1.5rem;
+    font-size: 0.95rem;
+    font-weight: 500;
+}
+
+.order-actions .btn-primary .material-symbols-outlined {
+    font-size: 20px;
+}
+
+/* Mobile Responsive */
+@media (max-width: 768px) {
+    .order-cards {
+        max-width: 100%;
+    }
+}
+