feat(tariffs): configurable purchase order for periods and packages

The order of enabled_periods (period tariffs) and traffic_packages
(traffic tariffs) is now the storefront order everywhere — both the
Telegram keyboard and the web app. Only new tariffs-config tariffs are
affected; legacy subscription/traffic options are untouched.

- Stop sorting periods and traffic packages in the web app plans
  serializer so it follows the configured order, matching the bot
  keyboards that already iterate the lists as-is.
- Preserve the row order through the admin draft (load and save) instead
  of sorting by months.
- Add a reusable Sortable component to the UI library (native HTML5
  drag & drop with a grip handle; bits-ui/shadcn have no such primitive)
  and use it to reorder period rows and traffic package rows in the
  tariff editor.

frontend/src/styles/admin.css

@@ -3572,6 +3572,18 @@
     minmax(120px, 1fr) 32px;
 }
 
+/* Rows with a leading drag handle (Sortable) so the purchase order can be
+   reordered. The 24px column lines up with the handle the Sortable renders. */
+.admin-row-editor-line.admin-row-editor-period {
+  grid-template-columns:
+    24px minmax(72px, 0.8fr) minmax(90px, 1fr) minmax(90px, 1fr) minmax(120px, 1fr)
+    minmax(120px, 1fr) 32px;
+}
+
+.admin-row-editor-line.admin-row-editor-drag {
+  grid-template-columns: 24px minmax(90px, 1fr) minmax(110px, 1fr) 32px;
+}
+
 .admin-package-columns {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -3790,7 +3802,9 @@
   .admin-package-columns,
   .admin-row-editor-line,
   .admin-row-editor-line.admin-row-editor-4,
-  .admin-row-editor-line.admin-row-editor-6 {
+  .admin-row-editor-line.admin-row-editor-6,
+  .admin-row-editor-line.admin-row-editor-period,
+  .admin-row-editor-line.admin-row-editor-drag {
     grid-template-columns: 1fr;
   }